@charset "UTF-8";

/*
/* common設定
/* -------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 { margin-top: initial; margin-bottom: initial; font-size: initial; font-weight: initial; }

.title_h2 { position: relative; top: -.75em; color: var(--color_2); font-family: Oswald; font-weight: 500; }

@media screen and (min-width: 700px), print {
.block-event-page--accessory { display: block; margin-bottom: 0; width: 100%; }
.block-event-page--accessory-item { margin: 0; }
.block-event-page--accessory .block-top-event--goods { width: 1200px; margin: 0 auto ; }
.title_h2 { font-size: 90px; text-shadow: 5px 5px 0 #ffffff; }
}

@media only screen and (max-width: 699px) {
.block-event-page--accessory { padding: 0; }
.block-event-page--accessory-item { margin: 0; }
.block-event-page--accessory .block-top-event--goods { margin: 0 auto ;padding: 12px; }
.title_h2 { font-size: 40px; text-shadow: 3px 3px 0 #ffffff; }
}

:root {
--color_1: #ffd36f;
--color_2: #ff9C4f;
--color_3: #fa646e;
--color_4: #7a5233;
}

/*
/* section_title
/* -------------------------------------------------- */

.section_title { background: var(--color_1); }

@media screen and (min-width: 700px), print {
}

@media only screen and (max-width: 699px) {
}

/*
/* section_anchor
/* -------------------------------------------------- */

.section_anchor { background: var(--color_1); }
.section_anchor_link a { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; border-radius: 100vh; border: 5px solid #ffffff; background: var(--color_2); color: #ffffff; transition: all .2s linear; }
.section_anchor_link a:hover,
.section_anchor_link a:focus,
.section_anchor_link a:active { border: 0 solid var(--color_1); text-decoration: none; }

@media screen and (min-width: 700px), print {
.section_anchor { padding-top: 3rem; }
.section_anchor_link { height: 80px; }
.section_anchor_link a { height: 80px; }
}

@media only screen and (max-width: 699px) {
.section_anchor { padding-top: 30px; }
.section_anchor_link a { height: 60px; }
}

/*
/* section_catch
/* -------------------------------------------------- */

.section_catch { background: var(--color_1); }
.section_catch h1 { color: var(--color_4); font-weight: bold; line-height: 1.5em; }
.section_catch h1 span { background: #ffffff; }

@media screen and (min-width: 700px), print {
.section_catch { padding-top: 90px; }
.section_catch h1 { font-size: 2.5em; }
}

@media only screen and (max-width: 699px) {
.section_catch { padding-top: 60px; }
.section_catch h1 { font-size: 1.5em; }
}

/*
/* section_introduction
/* -------------------------------------------------- */

.section_introduction { background: var(--color_1); }
.section_introduction p { color: var(--color_4); }
.section_introduction_wrapper { background: #ffffff; }

@media screen and (min-width: 700px), print {
.section_introduction { padding-top: 120px; padding-bottom: 10px; }
.section_introduction p { margin-right: 3rem; margin-left: 3rem; }
.section_introduction_wrapper { padding-bottom: 60px; border-radius: 0 40px 40px 40px; box-shadow: 10px 10px 0 var(--color_2); }
}

@media only screen and (max-width: 699px) {
.section_introduction { padding-top: 60px; padding-bottom: 5px; }
.section_introduction p { margin-right: 1rem; margin-left: 1rem; }
.section_introduction_wrapper { padding-bottom: 40px; border-radius: 0 30px 30px 30px; box-shadow: 5px 5px 0 var(--color_2); }
}

/*
/* section_pickup
/* -------------------------------------------------- */

.section_pickup { background: var(--color_1); }
.section_pickup p { color: var(--color_4); }
.section_pickup_wrapper { background: #ffffff; }

@media screen and (min-width: 700px), print {
.section_pickup { padding-top: 120px; padding-bottom: 120px; }
.section_pickup p { margin-right: 3rem; margin-left: 3rem; }
.section_pickup_wrapper { position: relative; padding-bottom: 60px; border-radius: 0 40px 40px 40px; box-shadow: 10px 10px 0 var(--color_2); }
.section_pickup_img { position: absolute; top: -20px; right: 10px; width: 420px; box-shadow: 5px 5px 0 var(--color_2); rotate: 5deg; }
}

@media only screen and (max-width: 699px) {
.section_pickup { padding-top: 60px; padding-bottom: 60px; }
.section_pickup p { margin-right: 1rem; margin-left: 1rem; }
.section_pickup_wrapper { padding-bottom: 40px; border-radius: 0 30px 30px 30px; box-shadow: 5px 5px 0 var(--color_2); }
.section_pickup_img { margin-top: 40px; width: 50vw; box-shadow: 3px 3px 0 var(--color_2);}
}

/*
/* section_pc
/* -------------------------------------------------- */

.section_pc_bg { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; background: url('/contents/event/a1030908/img/bg_pattern_pink_stripe.png') #000000; background-repeat: repeat; }
.section_pc_bg .natorisana_daiv { position: absolute; z-index: 2; bottom: 0; background: url('/contents/event/a1030908/img/natorisana_daiv.png'); background-size: 100%; background-repeat: no-repeat; background-position: top center; }
.section_pc_bg .natorisana_mouse { position: absolute; z-index: 2; bottom: 0; background: url('/contents/event/a1030908/img/natorisana_mouse.png'); background-size: 100%; background-repeat: no-repeat; background-position: top center; }
.section_pc_bar { background: var(--color_2); }

@media screen and (min-width: 700px), print {
.section_pc { margin-bottom: 90px; }
.section_pc_bg { height: 300px; }
.section_pc_bg h3 { font-size: 3em; }
.section_pc_bg .natorisana_daiv,
.section_pc_bg .natorisana_mouse { right: calc((100% - 1200px) / 2); width: 300px; height: 300px; }
.section_pc_bar { height: 20px; }
}

@media only screen and (max-width: 699px) {
.section_pc { margin-bottom: 60px; }
.section_pc_bg { height: 40vw; }
.section_pc_bg h3 { font-size: 3.5vw; }
.section_pc_bg .natorisana_daiv,
.section_pc_bg .natorisana_mouse { right: 0vw; width: 38vw; height: 38vw; }
.section_pc_bar { height: 3vw; }
}

/*
/* section_interview
/* -------------------------------------------------- */

.section_interview { background: var(--color_1); }
.section_interview p { color: var(--color_4); }
.section_interview dl dt,
.section_interview dl dd { display: inline-block; color: var(--color_4); }
.section_interview dl dd { margin-top: 1em; }
.section_interview dl dt::before,
.section_interview dl dd::before { display: block; margin-bottom: 1em; padding: 0 .5em; width: fit-content; color: #ffffff; font-weight: bold; }
.section_interview dl dt::before { content: "マウスコンピューター"; background: var(--color_2); }
.section_interview dl dd::before { content: "名取さな"; background: var(--color_3); }
.section_interview_wrapper { position: relative; background: #ffffff; }
.section_interview_chapter { background: var(--color_3); color: #ffffff; font-weight: bold; }

@media screen and (min-width: 700px), print {
.section_interview { padding-top: 120px; padding-bottom: 180px; }
.section_interview p { margin-right: 3rem; margin-bottom: 2em; margin-left: 3rem; font-size: 2em; }
.section_interview dl { margin-right: 3rem; margin-left: 3rem; }
.section_interview dl dt,
.section_interview dl dd { font-size: 1.5em; } 
.section_interview dl dt { margin-bottom: 1em; }
.section_interview .section_interview_qa dl:not(:first-of-type) { margin-top: 60px; }
.section_interview .section_interview_qa dl:last-of-type { margin-bottom: 90px; }
.section_interview_wrapper { padding-bottom: 60px; border-radius: 0 40px 40px 40px; box-shadow: 10px 10px 0 var(--color_2); }
.section_interview_chapter { margin-bottom: 60px; padding: .5rem 0 .5rem 3rem; font-size: 2em; }
}

@media only screen and (max-width: 699px) {
.section_interview { padding-top: 60px; padding-bottom: 60px; }
.section_interview p { margin-right: 1rem; margin-bottom: 2em; margin-left: 1rem; font-size: 1.25em; }
.section_interview dl { margin-right: 1rem; margin-left: 1rem; }
.section_interview dl dt,
.section_interview dl dd { font-size: 1.25em; } 
.section_interview dl dt { margin-bottom: 1em; }
.section_interview .section_interview_qa dl:not(:first-of-type) { margin-top: 40px; }
.section_interview .section_interview_qa dl:last-of-type { margin-bottom: 60px; }
.section_interview_wrapper { padding-bottom: 40px; border-radius: 0 30px 30px 30px; box-shadow: 5px 5px 0 var(--color_2); }
.section_interview_chapter { margin-bottom: 40px; padding: .5rem 0 .5rem 1rem; font-size: 1.5em; }
}

/*
/* section_profile
/* -------------------------------------------------- */

.section_profile { background: #ffffff; }
.section_profile h3 { color: var(--color_2); font-size: 3em; font-weight: bold; }
.section_profile h4 { color: var(--color_2); font-weight: bold; }
.section_profile h5 { color: var(--color_4); line-height: 2em; }

@media screen and (min-width: 700px), print {
.section_profile { padding-bottom: 90px; }
.section_profile > div { display: flex; flex-direction: row; }
.section_profile > div > div:nth-child(1) { display: flex; justify-content: center; align-items: center; width: 360px; height: 360px; border-radius: 40px; }
.section_profile > div > div:nth-child(2) { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-left: 40px; }
.section_profile h5 { font-size: 1.75em; }
.section_profile_img_natorisana { width: 360px; height: 360px; border-radius: 40px; }
}

@media only screen and (max-width: 699px) {
.section_profile { padding-bottom: 60px; }
.section_profile > div > div:nth-child(1) { padding: 10px; }
.section_profile_img_natorisana { width: 100%; height: 380px; border-radius: 30px; }
}

/*
/* section_archives
/* -------------------------------------------------- */

.section_archives { background: var(--color_1); }
.section_archives p { color: var(--color_4); }
.section_archives_wrapper { background: #ffffff; }

@media screen and (min-width: 700px), print {
.section_archives { padding-top: 150px; padding-bottom: 150px; }
.section_archives p { margin-right: 3rem; margin-left: 3rem; }
.section_archives_wrapper { padding-bottom: 60px; border-radius: 0 40px 40px 40px; box-shadow: 10px 10px 0 var(--color_2); }
}

@media only screen and (max-width: 699px) {
.section_archives { padding-top: 60px; padding-bottom: 60px; }
.section_archives p { margin-right: 1rem; margin-left: 1rem; }
.section_archives_wrapper { padding-bottom: 40px; border-radius: 0 30px 30px 30px; box-shadow: 5px 5px 0 var(--color_2); }
}

/*
/* section_note
/* -------------------------------------------------- */

.section_note { background: #181818; color: #ffffff; }