@import "./index.css";
.page_gap{min-height: 20rem;}
.transistion{transition: all .3s ease !important;}
.c_pri{color: var(--color-pri);}
.docomo{color: #CC0033;}

/* ************************************ Navi Bar Begin ************************************ */
.navibar{width: 100%;padding: 2rem 5rem;justify-content: space-between;position: fixed;top: 0;z-index: 100;}
.navibar_logo{min-width: 10rem;max-width: 10rem;}
.svg_logo{fill: var(--color-white);mix-blend-mode: difference;}
.navibar_logo.theme-white svg {fill: var(--color-black);}
.navibar_logo.theme-dark svg {fill: var(--color-white);}
.navibar_logo.theme-image svg {fill: var(--color-white);width: 100%;}
.navibar_logo:hover .svg_logo{fill: var(--color-pri);mix-blend-mode: normal}
.svg_logo #text *{fill: var(--color-dark);}

.navibar_link{padding: 1rem 7rem;gap: 5rem;border-radius: 50rem;background-color: #FFFCF1;box-shadow:0 2px 4px rgba(0, 0, 0, 0.3),0 0 10px rgba(0, 0, 0, 0.3);}
.navibar_link_group{gap: 5rem;overflow: hidden;}
.navibar_a{flex-direction: column;}
.navibar_a *{font-weight: 700;transition: all .3s ease !important;}
.navibar_p_1{color: var(--color-lightdark);}
.navibar_p_2{color: var(--color-dark);}
.navibar_a:hover *{color: var(--color-pri);}
@media (max-width: 800px) {
    .navibar{align-items: flex-start;padding: 2rem;}
    .navibar_link{flex-direction: column;padding: 3rem 1rem;gap: 0;transition: all .3s ease !important;}
    .navibar_link_group{flex-direction: column;max-height: 0rem;transition: all .3s ease !important;}
    .navibar_link.m_navi_show{gap: 5rem;}
    .m_navi_show .navibar_link_group{max-height: 70rem;padding-bottom: 2rem;}
}
/* ************************************ Navi Bar End ************************************ */
/* ************************************ Top Carol Begin ************************************ */
.top_carol{width: 100%;min-height: calc(var(--vh, 1vh) * 100);align-items: flex-end;padding-bottom: 5%;}
.top_carol_text{width: 50%;padding: 1rem 10rem;border-radius: 50rem;border: solid 1px var(--color-white);background-color: #ffffff2a;}
.top_carol_p{color: var(--color-white);text-align: center;}
.top_carol_vid{width: 100%;height: 100%;position: absolute;z-index: 0;top: 0;overflow: hidden;}
.top_carol_vid > video{width: 100%;height: 100%;object-fit: cover;}
@media (max-width: 800px) {
    .top_carol_text{width: 80%;padding: 1rem 2rem;}
}
/* ************************************ Top Carol End ************************************ */
/* ************************************ About Begin ************************************ */
.top_about{flex-direction: column;width: 100%;padding: 20rem 20rem;gap: 10rem;overflow: hidden;}
.about_content{width: 100%;gap: 10rem;align-items: flex-start;}
.about_content_text{flex-direction: column;align-items: flex-start;gap: 5rem;width: 55%;}
.about_content_p{flex-direction: column;align-items: flex-start;gap: 2rem;}
.about_title{padding-bottom: 1rem;}
.about_a_1{padding: 1rem 5rem;border-radius: 50rem;background-color: var(--color-pri);color: var(--color-white);}
.about_a_1:hover{background-color: var(--color-secon);}
.about_content_photo{flex-direction: column;justify-content: stretch;align-items: stretch;gap: 3rem;}
.about_img{width: 100%;height: 100%;object-fit: cover;}
.about_content_photo_bg{position: absolute;top: -5rem;right: -5rem;z-index: 0;scale: 1;animation: story_bg 360s linear infinite;}
.abour_photo{width: 100%;gap: 1rem;align-items: stretch;}
.abour_photo > div{width: 100%;aspect-ratio: 560/400;overflow: hidden;border-radius: .8rem;}
.top_about_pattern{width: auto;position: absolute;z-index: 0;}
.top_about_pattern img{scale: .5;}
@media (max-width: 1700px) {
    .top_about{padding: 20rem 15rem;}
}
@media (max-width: 1400px) {
    .top_about{padding: 20rem 10rem;}
}
@media (max-width: 1200px) {
    .top_about{padding: 20rem 5rem;}
}
@media (max-width: 1000px) {
    .top_about{padding: 20rem 2rem;}
}
@media (max-width: 800px) {
    .top_about{padding: 20rem 2rem;}
    .about_content{flex-direction: column-reverse;}
    .about_content_text{width: 100%;}
    .top_about_pattern{bottom: 30rem;right: 0;width: 40%;}
    .about_content{align-items: center;}
    .about_content_photo{width: 80%;flex-direction: row;gap: 1rem;}
}
/* ************************************ About End ************************************ */
/* ************************************ Infomation Begin ************************************ */
.top_info{flex-direction: column;width: 100%;padding: 20rem 20rem;gap: 10rem;background-color: var(--color-pink);}
.top_info_title{flex-direction: column;width: 100%;}
.top_info_title > p{text-align: center;}
.top_info_inner{flex-direction: column;width: 100%;gap: 3rem;}
.top_info_inner_line{width: 100%;align-items: stretch;gap: 3rem;}
.top_info_item{width: 100%;flex-direction: column;border-radius: 2rem;overflow: hidden;}
.top_info_item_photo{width: 100%;aspect-ratio: 420/300;}
.top_info_item_photo img{height: unset;aspect-ratio: 420/300;}
.top_info_item_text{flex-direction: column;align-items: flex-start;justify-content: flex-start;background-color: var(--color-white);padding: 5rem;width: 100%;height: 100%;}
@media (max-width: 1600px) {
    .top_info{padding: 20rem 15rem;}
}
@media (max-width: 1300px) {
    .top_info{padding: 20rem 15rem;}
    .top_info_item_text{padding: 3rem 3rem;}
}
@media (max-width: 1200px) {
    .top_info{padding: 20rem 10rem;}
}
@media (max-width: 1100px) {
    .top_info{padding: 20rem 5rem;}
}
@media (max-width: 800px) {
    .top_info{padding: 20rem 5rem;}
    .top_info_inner_line{flex-direction: column;}
    .top_info_item_text{padding: 2rem 2rem;min-width: 50%;}
    .top_info_item{flex-direction: row;align-items: stretch;}
    .top_info_item_photo{aspect-ratio: unset;}
    .top_info_item_photo img{height: 100%;aspect-ratio: unset;}
}
/* ************************************ Infomation End ************************************ */
/* ************************************ Concept Begin ************************************ */
.content_text{width: 60%;}
.concept_content_p,.concept_content_p > div{width: 100%;flex-direction: column;align-items: flex-start;justify-content: flex-start;}
.concept_content_p{gap: 3rem;}
.concept_content_p_title{margin-bottom: 5rem;gap: 5rem;}
.concept_content_p_text{gap: .5rem;}
.concept_photo_line{flex-direction: column;width: 100%;gap: 1rem;}
.concept_title_photo{width: 40%;}
.concept_title_photo > div{width: 100%;aspect-ratio: 650/400;border-radius: .8rem;overflow: hidden;}
@media (max-width: 800px) {
    .content_text{width: 100%;}
.concept_title_photo{width: 100%;}
}
/* ************************************ Concept End ************************************ */
/* ************************************ Story Begin ************************************ */
.top_story{align-items: flex-start;gap: 10rem;padding: 20rem;width: 100%;overflow: hidden;}
.top_story_text,.top_story_text_item,.top_story_text_item_linebreak{align-items: flex-start;flex-direction: row-reverse;}
.top_story_text_item_linebreak p{writing-mode: vertical-lr;text-orientation: upright;letter-spacing: 1rem;font-family: var(--font-JP2);text-wrap: nowrap;}
.top_story_text_item{gap: 2rem;}
.top_story_text_item_title{gap: 0;margin-left: 3rem;}
.top_story_text_item_title > p{line-height: 1.4;}
.top_story_zenmark{position: absolute;top: -2.3rem;right: -.2rem;}
.top_story_text{gap: 3rem;}
.top_story_photo{width: 100%;aspect-ratio: 882/824;}
.top_story_mask{-webkit-mask-box-image: url(../image/story_mask.svg);width: 100%;height: 100%;object-fit: cover;overflow: hidden;}
.top_story_mask video {width: 100%;height: 100%;object-fit: cover;}
.top_story_bg{position: absolute;z-index: 0;scale: 1.03;animation: story_bg 360s linear infinite;}
@keyframes story_bg{
    from{transform: rotateZ(0deg);}
    to{transform: rotateZ(3600deg);}
}
@keyframes story_bg_r{
    from{transform: rotateZ(0deg);}
    to{transform: rotateZ(-3600deg);}
}
@media (max-width: 1400px) {
    .top_story{padding: 20rem 15rem;}
}
@media (max-width: 1200px) {
    .top_story{padding: 20rem 10rem;}
}
@media (max-width: 1000px) {
    .top_story{padding: 20rem 5rem;gap: 5rem;}
}
@media (max-width: 800px) {
    .top_story{padding: 0rem 3rem;flex-direction: column;align-items: center;}
    .top_story_photo{width: 80%;}
    .m_top_story_photo{gap: 3rem;align-items: flex-start;}
    .top_story_photo{margin-top: 20rem;}
    .m_text_linebreak_1{margin-top: 4.8rem;}
    .m_text_linebreak_2{margin-top: 9.6rem;}
    .top_story_text_item_title{margin: 0;}
}
/* ************************************ Story End ************************************ */
/* ************************************ Access Begin ************************************ */
.top_access{width: 100%;gap: 10rem;padding: 20rem;}
.top_access_inner{flex-direction: column;align-items: flex-start;gap: 5rem;width: 100%;}
.top_access_title{color: var(--color-secon);}
.top_access_text{flex-direction: column;gap: 0;max-width: 100%;}
.top_access_text_line{width: 100%;padding: 3rem 1rem;border-top: solid 1px var(--color-cream);border-bottom: solid 1px var(--color-cream);gap: 5rem;justify-content: flex-start;}
.top_access_text_line + .top_access_text_line{border-top: none;}
.top_access_text_line > p{text-wrap: nowrap;}
.top_access_insta_QR{max-width: 15rem;}
.top_access_p_1{min-width: 20rem;text-align: left;justify-content: flex-start;}
.top_access_icon{gap: 2rem;overflow-wrap: break-word;max-width: 100%;flex-wrap: wrap;align-items: flex-start;overflow-wrap: break-word;}
.top_access_link{word-break: break-all !important;overflow-wrap: break-word;word-wrap: break-word;white-space: normal;display: block !important;max-width: 100%;}
.top_access_icon svg{fill: var(--color-dark);transition: all .3s ease !important;}
.top_access_icon a:hover svg{fill: var(--color-secon);}
.top_access_photo{flex-direction: column;width: 100%;gap: 3rem;}
.top_access_photo_item{width: 100%;aspect-ratio: 722/410;}
.top_access_photo_item iframe{width: 100%;height: 100%;object-fit: cover;}
@media (max-width: 1200px) {
    .top_access{padding: 20rem 10rem;}
}
@media (max-width: 1000px) {
    .top_access{padding: 20rem 5rem;}
}
@media (max-width: 800px) {
    .top_access{padding: 20rem 5rem;flex-direction: column;}
    .top_access_text_line > p{text-wrap: wrap;}
}
/* ************************************ Access End ************************************ */
/* ************************************ Concept Begin ************************************ */
.top_concept{width: 100%;flex-direction: column;padding: 20rem 10rem;background-color: var(--color-pink);gap: 5rem;}
.top_concept_inner p{text-align: center;}
.top_concept_innerr{flex-direction: column;gap: 3rem;width: 100%;}
.top_concept_line{width: 100%;gap: 3rem;align-items: stretch;}
.top_concept_item{width: 100%;align-items: stretch;border-radius: 3rem;overflow: hidden;}
.top_concept_photo{width: 100%;}
.top_concept_text{width: 100%;padding: 3rem;flex-direction: column;align-items: flex-start;background-color: var(--color-white);aspect-ratio: 1/1;}
.top_concept_text p{width: 100%;justify-content: flex-start;}
@media (max-width: 1400px) {
    .top_concept{padding: 20rem 5rem;}
}
@media (max-width: 800px) {
    .top_concept{padding: 20rem 2rem;}
    .top_concept_line{flex-direction: column;}
}
/* ************************************ Concept End ************************************ */
/* ************************************ Price Begin ************************************ */
.top_price{width: 100%;padding: 20rem 10rem;background-color: var(--color-pink);padding-top: 0;}
.top_price_box_cover{flex-direction: column;align-items: stretch;max-width: 1300px;gap: 10rem;}
.top_price_box{border-radius: 2rem;overflow: hidden;display: grid;grid-template-columns: 1fr 1fr 1fr;align-items: stretch;max-width: 1200px;}
.top_price_box_1{grid-template-areas:
    "header header header"
    "title_1 title_2 title_3"
    "item_1 item_2 item_3"
    "item_4 item_5 item_3"
    "item_6 item_7 item_7";
}
.top_price_box_2{grid-template-areas:
    "header header header"
    "title_1 title_2 title_3"
    "item_1 item_2 item_3"
    "item_4 item_2 item_3"
    "item_6 item_7 item_7";
}
.top_price_box > div{padding: 1rem 5rem;}
.top_price_title{background-color: #BBB1A2;color: var(--color-white);grid-area: header;}
.top_price_title p{align-items: flex-end;line-height: 1.4;display: inline-block;}
.top_price_title p span{display: inline-block;}
.top_price_item_2{grid-area: item_2;}
.top_price_item_3{grid-area: item_3;}
.top_price_item_7{grid-area: item_7;}

.top_price_line_1{background-color: #ECE6DC;color: var(--color-dark);}
.top_price_line_2{background-color:var(--color-white);color: var(--color-dark);}
.top_price_line_3{background-color:var(--color-white);color: var(--color-dark);}
.top_price_line_1 + .top_price_line_1{border-left: solid 1px var(--color-white);}
.top_price_line_2 + .top_price_line_2{border-top: solid 1px #ECE6DC;}
.top_price_line_3{border-top: solid 5px #ECE6DC;}
.top_price_line_border_l{border-left: solid 1px #ECE6DC;}

.top_price_box p{text-wrap: nowrap;text-align: center;}
@media (max-width: 1000px) {
    .top_price_box > div{padding: 1rem 3rem;}
}
@media (max-width: 800px) {
    .top_price{padding: 20rem 2rem;padding-top: 0;}
    .top_price_box,.top_price_inner{width: 100%;}
    .top_price_box > div{padding: 1rem 1rem;}
    .top_price_box p{text-wrap: wrap;text-align: center;}
}
/* ************************************ Price End ************************************ */
/* ************************************ Notes Begin ************************************ */
.top_notes{width: 100%;flex-direction: column;gap: 5rem;padding: 20rem 10rem;background-color: #F5F5F5;}
.top_notes_title{flex-direction: column;gap: 1rem;max-width: 100%;}
.top_notes_title p{text-align: center;max-width: 100%;}
.p_36 + .p_20{margin-top: 2rem;}
.top_notes_inner{flex-direction: column;gap: 3rem;width: 100%;}
.top_notes_line{width: 100%;gap: 3rem;align-items: stretch;}
.top_notes_item{width: 100%;padding: 3rem;gap: 2rem;justify-content: flex-start;background-color: var(--color-white);border-radius: 1rem;overflow: hidden;}
.top_notes_item_icon{width: 3.5rem;aspect-ratio: 1/1;pointer-events: none;}
.top_notes_item_text{flex-direction: column;gap: .5rem;align-items: flex-start;width: 100%;}
@media (max-width: 1300px) {
    .top_notes{padding: 20rem 10rem;}
}
@media (max-width: 1000px) {
    .top_notes{padding: 20rem 5rem;}
}
@media (max-width: 800px) {
    .top_notes{padding: 20rem 2rem;}
    .top_notes_line{flex-direction: column;}
}
/* ************************************ Notes End ************************************ */
/* ************************************ Footer Begin ************************************ */
.footer{flex-direction: column;align-items: flex-start;gap: 10rem;padding: 20rem 10rem;background-color: var(--color-secon);color: var(--color-creamtext);padding-bottom: 5rem;
--color-select: #333333;--color-selectbg: #fff;}
.footer_title{width: 100%;flex-direction: column;gap: 2rem;}
.footer_title p{text-align: center;}
.footer_logo{width: 25rem;}
.footer_logo svg{fill: var(--color-creamtext);width: 100%;}
.footer_insta_QR{max-width: 5rem;}
.footer_link{justify-content: flex-start;gap: 5rem;}
.footer_link_a{transition: all .3s ease !important;color: var(--color-creamtext);}
.footer_link_a:hover{color: var(--color-white);}
.footer_end{flex-direction: column;width: 100%;gap: 1rem;}
.footer_copy{width: 100%;justify-content: space-between;align-items: flex-end;}
.footer_sns{gap: 2rem;align-items: flex-end;}
.footer_sns_a svg{fill: var(--color-creamtext);transition: all .3s ease !important;}
.footer_sns_a:hover svg{fill: var(--color-white);}
.footer_end_copy{position: absolute;bottom: 0;}
@media (max-width: 1000px) {
    .footer{padding: 20rem 5rem;padding-bottom: 5rem;}
}
@media (max-width: 800px) {
    .footer{padding: 20rem 2rem;padding-bottom: 5rem;}
    .footer_link{flex-wrap: wrap;gap: 3rem 5rem;}
    .footer_end{gap: 3rem;}
    .footer_end_copy{position: relative;}
}
/* ************************************ Footer End ************************************ */
/* ************************************ Show Up Setup ************************************ */
.show_up{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.show_up.show{
    opacity: 1;
    transform: translate(0,0);
}
/* ************************************ Show Up Setup End ************************************ */