@charset "utf-8";
/* CSS Document */

:root {
    --font-size-base: 1.4rem;
}

p,audio { margin-bottom: .5em;}

.wrapper { text-align: center;}
.wrapper_body { margin: 0 auto; padding: 0; color: #000; font-size: 1.8rem; line-height: 1.5em;}
.wrapper_body > section > p:last-child { margin-bottom: 0;}
.wrapper_body > section > div > p:last-child { margin-bottom: 0;}

/*KV
----------------------------------------------*/
#image_list {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
    height: auto;
    aspect-ratio: 16 / 9; /* 画像のアスペクト比に合わせて調整するか ↓ */
    /* height: 300px; ← 固定サイズでもOK */
    overflow: hidden;
  }
  
  #image_list li {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease;
  }
  
  #image_list li img {
    width: 100%;
    display: block;
  }
  
  #image_list li.active {
    opacity: 1;
    z-index: 1;
  }
  


/*Info
----------------------------------------------*/
#m_info { width: 95%; max-width: 800px; margin: 50px auto; display: flex; align-items: center;}
#m_info > div { flex: 1;}
#m_info > .left > p > img { max-width: 327px;}
#m_info > .right { text-align: left; font-size: 1.4rem; border-left: 1px solid #c1c9d1; padding-left: 3em;}
#m_info > .right > p > strong { font-size: 2rem; font-weight: normal;}
@media screen and (max-width: 720px) {
    #m_info > .left { display: none;}
}

/*Introduction
----------------------------------------------*/
#m_intro > div { width: 95%; max-width: 800px; margin: 0 auto 50px;   padding: 50px; box-sizing: border-box;font-size: 1.6rem;}
.gradient_border > p { margin-bottom: 1.5em;}
.gradient_border > p:last-child { margin-bottom: 0;}
.gradient_border > p > strong { font-size: 2.6rem; color: #970013; font-weight: normal;}

/*Story
----------------------------------------------*/
#m_story { width: 100%; background: #b8c1ca url(../img/deco_line.webp) repeat-x; padding: 40px 0 50px;}
#m_story > .m_story_body { width: 95%; max-width: 800px; text-align: left; font-size: 1.6rem; margin: 50px auto;}
#m_story > .m_story_body > p { line-height: 2em; margin-bottom: 1.5em;}
#m_story > .m_story_body > p > strong { background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, #d4c700 50%); font-size: 2.4rem; font-weight: normal; padding: 0 0.25em;}

/*選択肢
----------------------------------------------*/
.choose { font-size: 1.5rem;}
.choose_text { font-size: 3rem; margin-bottom: 2em;}
.choose_text > span { font-size: 2rem;}
#character_select { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 95%; max-width: 800px; margin: 0 auto;}
#character_select > li > img { border: 1px solid #970013;}
#character_select > li > img:hover { opacity: .8;}
@media screen and (max-width: 720px) {
    #character_select { gap: 10px;}
}


/*Character
----------------------------------------------*/
#m_chara { width: 100%; background: #e0e4e8 url(../img/deco_line2.webp) repeat-x; padding-top: 40px;}

.char_box { width: 100%; overflow: hidden; position: relative; padding: 50px 0;}
.chara_img { position: absolute; top: 0; transform: translateX(-15%)}
.box_in { width: 95%; max-width: 570px; margin: 30px auto; text-align: left; position: relative; z-index: 1; transform: translateX(50%)}
.box_in > .gradient_border { padding: 2em; margin: 30px 0;}
.box_in > .gradient_border > p { margin-bottom: .8em; text-align: center;}
.box_text1 { font-size: 1.4rem;}
.box_text1  { position: relative; line-height: 1.4; padding: 0.25em 1em; display: inline-block; top: 0; margin-bottom: 1.5em; text-align: center; }
.box_text1:before, .box_text1:after { position: absolute; top: 0; content: ''; width: 8px; height: 100%; display: inline-block; }
.box_text1:before { border-left: solid 1px black; border-top: solid 1px black; border-bottom: solid 1px black; left: 0; }
.box_text1:after { content: ''; border-top: solid 1px black; border-right: solid 1px black; border-bottom: solid 1px black; right: 0; }
.box_text2 { font-size: 2.4rem; line-height: 1.6em; position: relative; display: inline-block; margin-bottom: 2em; width: 100%; }
.box_text2:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 1px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: black; }
.box_text3 { font-size: 1.4rem;}
.box_text4 { font-size: 4rem;}
.box_text4 > span {background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, #edeac7 50%); padding: 0 .25em;}

.box_text5 { font-size: 2.4rem; line-height: 0;}
.box_text6 { font-size: 1.4rem; margin-top: 3em;}
.box_in > div > ul { font-size: 1.4rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0em 2.5em; margin-bottom: 1.5em;}
.box_in > div > dl { font-size: 1.4rem;}
.box_in > div > dl > dt { text-align: center; background: #d6dbdf;}
.box_in > div > dl > dd { margin-bottom: 1.5em;}
.box_in > div > dl > dd:last-child { margin-bottom: 0;}
.choose_back { width: 95%; margin: 30px auto;}

.char_box { display: none; }
.char_box.active { display: block; }

#m_chara > .gradient_border { width: 95%; max-width: 800px; margin: 30px auto 50px; padding: 50px; box-sizing: border-box;font-size: 1.6rem; text-align: left;}
#m_chara > .gradient_border > p { margin-bottom: .5em;}
.sub_chara_text1 { font-size: 2.4rem; border-left: 2px solid #000; padding-left: .5em;}
.sub_chara_box { display: flex; margin-top: 3em;}
.sub_chara_box_in { width: 100%; max-width: calc(100% - 153px - 2em); padding-left: 2em;}
.sub_chara_box_in > ul { font-size: 1.4rem; display: flex; flex-wrap: wrap; justify-content: left; gap: 0em 1.5em; margin-bottom: 1.5em;}
.sub_chara_box_in > .box_text2 { margin-bottom: .8em;}
.sub_chara_box_in > .box_text2:before { height: 0;}
.sub_chara_box_in > .box_text5 { line-height: normal;}

.char_box > .box_in > .gradient_border > p > .btn { margin-top: 2em;}

@media screen and (max-width: 820px) {
    .char_box { padding-bottom: 0;}
    .chara_img { transform: none;}
    .box_in { transform: none; margin-top: 300px;}
    .sub_chara_box { display: block;}
    .sub_chara_box > p { text-align: center;}
    .sub_chara_box_in { max-width: 100%; padding: 0;}
}

/*Product
----------------------------------------------*/
#m_product { width: 100%; background: #000 url(../img/deco_line.webp) repeat-x; padding: 120px 0 50px; color: #fff;}
#m_product > dl { display: flex; justify-content: center; align-items: center; width: 95%; max-width: 800px; margin: 0 auto 50px; }
#m_product > dl > dd { text-align: left; padding-left: 1em; font-size: 2rem;}
.product_text1 { border-left: 2px solid #fff; padding-left: .8em; margin-bottom: 1.5em;}
.product_text2 { font-size: 3rem; color: #d4c700;}
.product_text3 { font-size: 2.2rem;}
.product_text4 { font-size: 2rem;}
#m_product > dl > dd > .cen { font-size: 1.4rem; color: #d4c700;}
@media screen and (max-width: 720px) {
    #m_product > dl { display: block;}
    #m_product > dl > dt { margin-bottom: 1em;}
}

#m_product > h2:before { border-left: solid 1px #fff; border-top: solid 1px #fff; border-bottom: solid 1px #fff; }
#m_product > h2:after { border-top: solid 1px #fff; border-right: solid 1px #fff; border-bottom: solid 1px #fff; }

/*Staff
----------------------------------------------*/
#m_staff { background: #000; padding-bottom: 50px; color: #fff;}
.staff { margin-top: 5em;}
.staff > dt { font-size: 1.8rem;}
.staff > dd { margin-bottom: 2em;}
.staff > dd > small { margin-bottom: 1.4em;}


/*タイトル
----------------------------------------------*/
h2 { position: relative; line-height: 1.4; padding: 0.25em 1em; display: inline-block; top: 0; margin-bottom: 1.5em; font-size: 2.6rem; }
h2:before, h2:after { position: absolute; top: 0; content: ''; width: 8px; height: 100%; display: inline-block; }
h2:before { border-left: solid 1px black; border-top: solid 1px black; border-bottom: solid 1px black; left: 0; }
h2:after { content: ''; border-top: solid 1px black; border-right: solid 1px black; border-bottom: solid 1px black; right: 0; }
  

/*グラデ枠
----------------------------------------------*/
.gradient_border { border: 1px solid transparent; border-radius: 20px; background: linear-gradient(white, white) padding-box, linear-gradient(45deg, #603512, #c89629, #faf290, #c89629, #603512) border-box; }


/*箱
----------------------------------------------*/
.box_wrapper { position: relative; width: fit-content; max-width: 700px; margin: 50px auto 30px; }
.box_title { background-color: #970013; color: #fff; padding: 6px 12px; font-size: 1.6rem; position: relative; display: inline-block; z-index: 2; box-sizing: border-box; }
.speech_box { position: relative; background-color: #d3ccd0; border: 2px solid #970013; box-shadow: 5px 5px 0 #970013; padding: 2em; padding-bottom: 30px; margin-top: -1px; font-size: 1.6rem; }
.speech_box::after { content: ""; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%) rotate(-45deg); width: 40px; height: 40px; background-color: #d3ccd0; border-left: 2px solid #970013; border-bottom: 2px solid #970013; z-index: 1; }

.m_story_body > .box_wrapper > .box_title  { background-color: #970013;}
.m_story_body > .box_wrapper > .speech_box { background-color: #d3ccd0; border-color: #970013; box-shadow: 5px 5px 0 #970013;}
.m_story_body > .box_wrapper > .speech_box::after { background-color: #d3ccd0; border-left: 2px solid #970013; border-bottom: 2px solid #970013;}

/*モーダル設定
----------------------------------------------*/
.video_trigger:hover { opacity: .8;}
.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100vw; height: 100vh; overflow: auto; background-color: rgba(0, 0, 0, 0.6); }
.modal_content { position: relative; background-color: #000; margin: 10% auto; padding: 0; border-radius: 8px; width: 90%; max-width: 640px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); }
.modal_content iframe { width: 100%; height: 360px; border: none; border-radius: 8px; }
.close { position: absolute; right: 12px; top: 10px; font-size: 24px; font-weight: bold; cursor: pointer; }