@charset "UTF-8";

#wrap{letter-spacing:0.06em;color:#141414;}
#wrap a{text-decoration: none;}
#wrap img{width:100%;height:auto;vertical-align:top;}
#wrap .inner{ padding: 180px 80px; max-width: 1280px; box-sizing: border-box; margin: auto;}
#wrap > .img_wrap{ width: 100%;}

#wrap .flex{ display: flex;}
#wrap .en{ font-family: 'Barlow', sans-serif; font-weight: 500;}
#wrap h2.sec_ttl{ font-size: 33px; font-weight: 900;}
@media screen and (max-width: 1279px) {
#wrap .inner{ padding: 140px 60px;}
}
@media screen and (max-width: 980px) {
#wrap .inner{ padding: 140px 40px;}
}


@media screen and (max-width: 767px) {
#wrap .inner{ padding: 70px 30px;}
#wrap h2.sec_ttl{ font-size: 20px;}
}

@media screen and (max-width: 374px) {
#wrap .inner{ padding: 60px 20px;}
#wrap h2.sec_ttl{ font-size: 18px;}
}

/*-------------------------
__top_main
-------------------------*/
/*-------------------------
__mv
-------------------------*/
#wrap #mv{ background: linear-gradient(rgba(245, 246, 247, 0.2), rgba(245, 246, 247, 0.2)), url("/oroom/images/mv_bg@2x.jpg") center / cover no-repeat; height: 100vh; min-height: 750px; background-blend-mode: multiply;}
#wrap #mv .inner{ padding: 80px; position: relative; height: 100%; display: flex; align-items: flex-end;}
#wrap #mv .inner .mv_ttl{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#wrap #mv .inner .mv_ttl .ttl_wrap{ }
#wrap #mv .inner .mv_ttl .ttl_wrap img{ }
#wrap #mv .inner .mv_ttl .btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 700px; min-width: 540px; height: 95px; background: #fff; border-radius: 9999px; font-size: 25px; transition: .3s; color: var(--main);}
#wrap #mv .inner .mv_ttl .btn .arrow { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 76px; height: 76px; border: 1px solid var(--main); border-radius: 50%; background: #fff;}
/* 横棒 */
#wrap #mv .inner .mv_ttl .btn .arrow::before { content: ""; position: absolute; top: 50%; left: 29px; width: 19px; height: 3px; background: var(--main); transform: translateY(-50%); border-radius: 999px;}
/* 矢印 */
#wrap #mv .inner .mv_ttl .btn .arrow::after { content: ""; position: absolute; top: 50%; right: 28px; width: 10px; height: 10px; border-top: 3px solid var(--main); border-right: 3px solid var(--main); transform: translateY(-50%) rotate(45deg);}
#wrap #mv .inner .flex{ width: 100%; justify-content: space-between; align-items: center;}
#wrap #mv .inner .flex a.scroll{ color: var(--yellow); font-size: 10px; padding: 5px 0 5px 20px; border-left: 1px solid var(--yellow);}
#wrap #mv .inner .flex .img_wrap{ }
#wrap #mv .inner .flex .img_wrap img{ }

@media screen and (max-width: 1279px) {
}

@media screen and (min-width:768px) {
#wrap #mv .inner .mv_ttl a:hover{ background: var(--main); color: #fff;}
}
@media screen and (max-width: 767px) {
#wrap #mv{ background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("/oroom/images/mv_bg@2x.jpg") center / cover no-repeat;}

#wrap #mv .inner{ padding: 60px 30px;}
#wrap #mv .inner .mv_ttl{ width: 100%; padding: 40px; box-sizing: border-box;}
#wrap #mv .inner .mv_ttl .ttl_wrap{ width: 100%;}
#wrap #mv .inner .mv_ttl .btn { height: 50px; font-size: 14px; min-width: initial;}
#wrap #mv .inner .mv_ttl .btn .arrow { right: 20px; width: 10px; height: 10px; border: none; border-radius: 50%; background: none}
#wrap #mv .inner .mv_ttl .btn .arrow::before { left: auto; right: 0; width: 10px; height: 2px; background: none;}
#wrap #mv .inner .mv_ttl .btn .arrow::after { right: 0; width: 7.5px; height: 7.5px; border-top: 2px solid var(--main); border-right: 2px solid var(--main);}

#wrap #mv .inner .flex a.scroll{ color: #fff;}
#wrap #mv .inner .flex .img_wrap{ width: 132px;}
}

@media screen and (max-width: 374px) {
#wrap #mv .inner .mv_ttl{ padding: 20px;}
#wrap #mv .inner .flex a.scroll{ font-size: 9px;}
}

/*-------------------------
__whats
-------------------------*/
#wrap #whats{ background: var(--main);}
#wrap #whats .inner{}
#wrap #whats .inner > .flex{ justify-content: space-between; margin-bottom: 120px;}
#wrap #whats .inner > .flex .sec_ttl_wrap{ flex: 1;}
#wrap #whats .inner > .flex .sec_ttl_wrap .ttl_wrap{ max-width: 300px; margin-bottom: 50px;}
#wrap #whats .inner > .flex .sec_ttl_wrap .ttl_wrap img{}
#wrap #whats .inner > .flex .sec_ttl_wrap .sec_ttl{ font-size: 33px; color: #fff; text-align: left; line-height: 1.6; font-weight: 900;}
#wrap #whats .inner > .flex .img_wrap{ width: 446px;}
#wrap #whats .inner > .flex .img_wrap img{}

#wrap #whats .inner .parent{  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0;}
#wrap #whats .inner .parent div img{ display: block; width: 100%; height: 100%; object-fit: cover;}
#wrap #whats .inner .parent .img1{ grid-area: 1 / 1 / 4 / 4;}
#wrap #whats .inner .parent .img2{ grid-area: 1 / 4 / 4 / 7;}
#wrap #whats .inner .parent .img3{ grid-area: 4 / 1 / 6 / 3;}
#wrap #whats .inner .parent .img4{ grid-area: 4 / 3 / 6 / 5;}
#wrap #whats .inner .parent .img5{ grid-area: 4 / 5 / 6 / 7;}
#wrap #whats .inner .kome{ font-size: 12px; color: #fff; text-align: right; margin: 10px 0 80px;}

#wrap #whats .inner > .flex.ttl{ align-items: center;}
#wrap #whats .inner > .flex.ttl .line{ width: min(8%, 72px);}
#wrap #whats .inner > .flex.ttl .sec_ttl{ font-size: min(2.2vw, 33px); font-weight: 900; color: #fff;}

#wrap #whats .inner .plan_list{}
#wrap #whats .inner .plan_list .flex + .flex{ margin-top: 60px;}
#wrap #whats .inner .plan_list .flex{ gap: 100px;}
#wrap #whats .inner .plan_list .flex .txt_wrap{ text-align: left; color: #fff;}
#wrap #whats .inner .plan_list .flex .txt_wrap .plan_ttl{ font-size: 24px; font-weight: 900; line-height: 1.8; margin-bottom: 30px;}
#wrap #whats .inner .plan_list .flex .txt_wrap .plan_txt{ font-size: 13px; line-height: 2;}
#wrap #whats .inner .plan_list .flex .img_wrap{}
#wrap #whats .inner .plan_list .flex .img_wrap img{}

@media screen and (max-width: 1279px) {
#wrap #whats .inner > .flex{ gap: 20px;}
#wrap #whats .inner > .flex .sec_ttl_wrap .sec_ttl{ font-size: 24px;}
#wrap #whats .inner > .flex .img_wrap{ width: 400px;}
#wrap #whats .inner .plan_list .flex{ gap: 60px;}
}

@media screen and (max-width: 980px) {
#wrap #whats .inner > .flex .sec_ttl_wrap .sec_ttl{ font-size: 21px;}
#wrap #whats .inner > .flex .img_wrap{ width: 300px;}
#wrap #whats .inner .plan_list .flex .txt_wrap .plan_ttl{ font-size: 21px;}
}
@media screen and (max-width: 767px) {
#wrap #whats .inner > .flex{ margin-bottom: 60px; flex-wrap: wrap; justify-content: center; gap: 60px;}
#wrap #whats .inner > .flex .sec_ttl_wrap{ width: 100%; flex: auto;}
#wrap #whats .inner > .flex .sec_ttl_wrap .ttl_wrap{ max-width: 215px; margin: 0 auto 45px;}
#wrap #whats .inner > .flex .sec_ttl_wrap .sec_ttl{ font-size: 20px;  text-align: center;}
#wrap #whats .inner > .flex .img_wrap{ width: 100%; max-width: 315px;}

#wrap #whats .inner .parent{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, 1fr); gap: 5px;}
#wrap #whats .inner .parent .img1 { grid-area: 1 / 1 / 3 / 4;}
#wrap #whats .inner .parent .img2 { grid-area: 3 / 1 / 5 / 4;}
#wrap #whats .inner .parent .img3 { grid-area: 5 / 1 / 7 / 3;}
#wrap #whats .inner .parent .img4 { grid-area: 5 / 3 / 6 / 4;}
#wrap #whats .inner .parent .img5 { grid-area: 6 / 3 / 7 / 4;}

#wrap #whats .inner .kome{ margin: 5px 0 70px;}

#wrap #whats .inner > .flex.ttl{ display: block; line-height: 1.8; position: relative; margin-bottom: 90px;}
#wrap #whats .inner > .flex.ttl::before{ content: ""; position: absolute; top: 50%; left: 50%; width: 160px; height: 160px; border: 1px solid #fff; border-radius: 50%; transform: translate(-50%, -50%);}
#wrap #whats .inner > .flex.ttl .line{ display: none;}
#wrap #whats .inner > .flex.ttl .sec_ttl{ font-size: 20px;}

#wrap #whats .inner .plan_list .flex{ gap: 40px; flex-wrap: wrap;}
#wrap #whats .inner .plan_list .flex .txt_wrap{ width: 100%;}
#wrap #whats .inner .plan_list .flex .txt_wrap .plan_ttl{ font-size: 16px; padding-left: 25px; border-left: 2.5px solid #fff; box-sizing: border-box;}
#wrap #whats .inner .plan_list .flex .txt_wrap .plan_txt br{ display: none;}
}
@media screen and (max-width: 374px) {
#wrap #whats .inner > .flex .sec_ttl_wrap .sec_ttl{ font-size: 18px;}
#wrap #whats .inner .plan_list .flex .txt_wrap .plan_ttl{ font-size: 14px; padding-left: 20px; border-left: 2px solid #fff;}
}
/*-------------------------
__stylist
-------------------------*/
#wrap #stylist{}
#wrap #stylist .inner{}
#wrap #stylist .inner .sec_ttl_wrap{ text-align: left;}
#wrap #stylist .inner .sec_ttl_wrap .img_wrap{ width: 264px; margin-bottom: 50px;}
#wrap #stylist .inner .sec_ttl_wrap .img_wrap img{}
#wrap #stylist .inner .sec_ttl_wrap .sec_ttl{ margin-bottom: 50px; line-height: 1.6;}
#wrap #stylist .inner .sec_ttl_wrap .sec_txt{ font-size: 13px; line-height: 2; margin-bottom: 120px;}

#wrap #stylist .inner .stylist_list{ gap: 60px;}
#wrap #stylist .inner .stylist_list li{ text-align: left; display: flex; flex-direction: column; gap: 20px;}
#wrap #stylist .inner .stylist_list li .img_wrap{}
#wrap #stylist .inner .stylist_list li .img_wrap img{}
#wrap #stylist .inner .stylist_list li .detail{ font-size: 13px; line-height: 2;}
#wrap #stylist .inner .stylist_list li .name{ font-size: 22px; margin-bottom: 120px;}

#wrap #stylist .inner .bg_black{ background: var(--black); padding: 56px 0; color: #fff; font-size: min(2.2vw, 33px); font-weight: 900; border-radius: 999px; margin-bottom: 120px;}

#wrap #stylist .inner .faq{}
#wrap #stylist .inner .faq .question{}
#wrap #stylist .inner .faq .question .flex { gap: 40px; align-items: center;}
#wrap #stylist .inner .faq .question .flex .q_ttl{ font-size: 33px; font-weight: 900; text-align: left;}
#wrap #stylist .inner .faq .question .flex > .en{ font-size: 31px; font-weight: 800; color: #fff; position: relative; width: 52px; height: 52px; background: var(--black); border-radius: 50%; display: flex; justify-content: center; align-items: center; padding-bottom: 5px; box-sizing: border-box;}
#wrap #stylist .inner .faq .question .questionnaire{ margin-bottom: 120px; margin-top: 90px;}
#wrap #stylist .inner .faq .question .questionnaire li{ background: var(--main); padding: 40px 0; box-sizing: border-box; width: 50%; border-radius: 10px; color: #fff; text-align: left; justify-content: center; gap: 40px; align-items: center;}
#wrap #stylist .inner .faq .question .questionnaire li .left{ font-size: 20px; line-height: 2; font-weight: 900;}
#wrap #stylist .inner .faq .question .questionnaire li .right{ display: flex; align-items: center; gap: 20px}
#wrap #stylist .inner .faq .question .questionnaire li .right span{ font-size: 13px; writing-mode: vertical-rl; position: relative; display: inline-block; padding: 20px 0 0; height: 80px; box-sizing: border-box; font-weight: 900;}

#wrap #stylist .inner .faq .question .questionnaire li .right span::before,
#wrap #stylist .inner .faq .question .questionnaire li .right span::after { content: ""; position: absolute; left: 50%; width: 20px; height: 2px; background: #fff; transform: translateX(-50%) rotate(45deg);}
#wrap #stylist .inner .faq .question .questionnaire li .right span::before { top: 0; transform: translateX(-50%) rotate(45deg);}
#wrap #stylist .inner .faq .question .questionnaire li .right span::after { bottom: 0; transform: translateX(-50%) rotate(-45deg);}

#wrap #stylist .inner .faq .question .questionnaire li .right .per{ font-size: 58px; font-weight: 800;}
#wrap #stylist .inner .faq .question .questionnaire li .right .per em{ font-size: 120px;}

#wrap #stylist .inner .faq .answer{}
#wrap #stylist .inner .faq .answer > .flex{ gap: 120px; position: relative;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap{ flex: 1;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap .flex{ gap: 40px; align-items: center;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap .flex .a_ttl{ font-size: 33px; font-weight: 900; text-align: left;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap .flex .en{ font-size: 31px; font-weight: 800; color: #fff; position: relative; width: 52px; height: 52px; background: var(--black); border-radius: 50%; display: flex; justify-content: center; align-items: center; padding-bottom: 5px; box-sizing: border-box;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap .a_txt{ font-size: 13px; line-height: 2; text-align: left; margin-top: 60px;}
#wrap #stylist .inner .faq .answer > .flex > .img_wrap{ width: 265px;}

#wrap #stylist .inner .faq .answer > .flex .img_wrap img{}
#wrap #stylist .inner .faq .answer > .flex .pos_ab{position: absolute;top: 220px;left: 0; font-weight: 900;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .p_ttl{ font-size: 24px; margin-bottom: 30px; text-align: center;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .p_ttl span{ position: relative; display: inline-block; padding: 16px 0;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .p_ttl span::before,
#wrap #stylist .inner .faq .answer > .flex .pos_ab .p_ttl span::after { content: ""; position: absolute; width: 24px; height: 2px; background: var(--black);}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .p_ttl span::before { top: 50%; transform: translateY(-50%) rotate(-55deg); right: -35px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .p_ttl span::after { top: 50%; transform: translateY(-50%) rotate(55deg); left: -35px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .flex{ gap: 30px; align-items: center;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .flex .txt{ font-size: 26px; line-height: 2;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .flex .img_wrap{}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .flex .img_wrap img{}


@media screen and (max-width: 1279px) {
#wrap #stylist .inner .faq .question .flex .q_ttl{ font-size: 24px;}
#wrap #stylist .inner .faq .question .flex > .en{ font-size: 22px; width: 40px; height: 40px;}
#wrap #stylist .inner .faq .question .questionnaire li .left { font-size: 17px;}
#wrap #stylist .inner .faq .question .questionnaire li .right .per { font-size: 40px;}
#wrap #stylist .inner .faq .question .questionnaire li .right .per em { font-size: 80px;}

#wrap #stylist .inner .faq .answer > .flex .ttl_wrap .flex .a_ttl{ font-size: 24px; font-weight: 900; text-align: left;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap .flex .en{ font-size: 22px; width: 40px; height: 40px;}

#wrap #stylist .inner .faq .answer > .flex{ gap: 60px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .flex .img_wrap { width: 320px;}
}
@media screen and (max-width: 980px) {
#wrap #stylist .inner .sec_ttl_wrap .sec_ttl { font-size: 24px;}
#wrap #stylist .inner .stylist_list { gap: 20px;}
#wrap #stylist .inner .faq .question .flex { gap: 20px;}
#wrap #stylist .inner .faq .question .flex .q_ttl { font-size: 18px;}
#wrap #stylist .inner .faq .question .questionnaire li { gap: 20px;}
#wrap #stylist .inner .faq .question .questionnaire li .left { font-size: 14px;}

#wrap #stylist .inner .faq .answer > .flex { gap: 20px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab { top: 260px;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap .flex .a_ttl { font-size: 18px;}

#wrap #stylist .inner .faq .answer > .flex .pos_ab .p_ttl{ font-size: 18px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .flex .txt { font-size: 18px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .flex .img_wrap { width: 230px;}
}
@media screen and (max-width: 767px) {
#wrap #stylist .inner .sec_ttl_wrap .img_wrap{ width: 190px; margin: 0 auto 45px;}
#wrap #stylist .inner .sec_ttl_wrap .sec_ttl{ font-size: 18px; text-align: center; margin-bottom: 45px;}
#wrap #stylist .inner .sec_ttl_wrap .sec_txt{ margin-bottom: 60px;}

#wrap #stylist .inner .stylist_list{ gap: 40px; flex-direction: column; align-items: center; margin-bottom: 60px;}

#wrap #stylist .inner .stylist_list li .img_wrap{ width: 140px; height: 130px;}
#wrap #stylist .inner .stylist_list li .detail{ font-size: 9px;}
#wrap #stylist .inner .stylist_list li .name{ font-size: 16px; margin-bottom: 0;}

#wrap #stylist .inner .bg_black{ padding: 25px 0; color: #fff; font-size: 16px; margin-bottom: 60px; line-height: 1.8;}

#wrap #stylist .inner .faq .question .flex{ gap: 20px;}
#wrap #stylist .inner .faq .question .flex .q_ttl{ line-height: 1.8;}
#wrap #stylist .inner .faq .question .flex > .en{ font-size: 16px;  width: 30px; height: 30px; padding-bottom: 2px;}
#wrap #stylist .inner .faq .question .questionnaire{ margin-bottom: 60px; margin-top: 40px; flex-direction: column; align-items: center;}
#wrap #stylist .inner .faq .question .questionnaire li{  padding: 25px 0; width: 100%; border-radius: 6px; gap: 20px; max-width: 315px;}
#wrap #stylist .inner .faq .question .questionnaire li .left{ font-size: 12px; }
#wrap #stylist .inner .faq .question .questionnaire li .right{ display: flex; align-items: center; gap: 15px}
#wrap #stylist .inner .faq .question .questionnaire li .right span{ font-size: 8.2px; padding: 10px 0 0; height: 48px;}
#wrap #stylist .inner .faq .question .questionnaire li .right span::before,
#wrap #stylist .inner .faq .question .questionnaire li .right span::after { width: 10px; height: 1.2px;}
#wrap #stylist .inner .faq .question .questionnaire li .right .per{ font-size: 30px;}
#wrap #stylist .inner .faq .question .questionnaire li .right .per em{ font-size: 75px;}

#wrap #stylist .inner .faq .answer{}
#wrap #stylist .inner .faq .answer > .flex{ gap: 40px; flex-direction: column; align-items: center;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap{ flex: 1;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap .flex{ gap: 20px;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap .flex .a_ttl{ font-size: 18px;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap .flex .en{ font-size: 16px; width: 30px; height: 30px; padding-bottom: 2px;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap .a_txt{ margin-top: 40px;}

#wrap #stylist .inner .faq .answer > .flex > .img_wrap{ width: 240px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab{ position: initial; padding: 0 20px; box-sizing: border-box;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .p_ttl{ font-size: 15px; margin-bottom: 20px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .p_ttl span::before,
#wrap #stylist .inner .faq .answer > .flex .pos_ab .p_ttl span::after { width: 17px; height: 2px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .p_ttl span::before { right: -20px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .p_ttl span::after { left: -20px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .flex{ flex-direction: column; gap: 20px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .flex .txt{ font-size: 13px;}
#wrap #stylist .inner .faq .answer > .flex .pos_ab .flex .img_wrap{ max-width: 315px;}
}
@media screen and (max-width: 374px) {
#wrap #stylist .inner .faq .question .flex .q_ttl{ font-size: 16px;}
#wrap #stylist .inner .faq .answer > .flex .ttl_wrap .flex .a_ttl{ font-size: 16px;}
}
/*-------------------------
__charm
-------------------------*/
#wrap #charm{}
#wrap #charm .inner{}
#wrap #charm .inner .sec_ttl{ width: 480px; margin: 0 auto 120px;}
#wrap #charm .inner .sec_ttl img{}
#wrap #charm .inner .charm_list{}
#wrap #charm .inner .charm_list > .flex{ background-color: var(--gray); align-items: center; padding: 50px 80px 50px 160px; box-sizing: border-box; border-radius: 20px; margin-left: 40px; position: relative;}
#wrap #charm .inner .charm_list > .flex + .flex{ margin-top: 60px;}
#wrap #charm .inner .charm_list > .flex > p{ font-size: 30px; color: #fff; background: var(--main); border-radius: 10px 100px 100px 10px; padding: 25px 30px 25px 90px; box-sizing: border-box; position: absolute; top: 50%; left: -40px; transform: translateY(-50%);}
#wrap #charm .inner .charm_list > .flex > p span.en{ font-weight: 700;}
#wrap #charm .inner .charm_list .flex .flex{ gap: 120px;}
#wrap #charm .inner .charm_list .flex .flex .txt_wrap{ text-align: left; justify-content: center; display: flex; flex-direction: column; flex: 1;}
#wrap #charm .inner .charm_list .flex .flex .txt_wrap .charm_ttl{ font-size: 24px; font-weight: 900; margin-bottom: 30px; line-height: 1.8;}
#wrap #charm .inner .charm_list .flex .flex .txt_wrap .charm_txt{ font-size: 13px; line-height: 2;}
#wrap #charm .inner .charm_list .flex .flex .img_wrap{ width: 160px; margin: auto;}
#wrap #charm .inner .charm_list .flex .flex .img_wrap img{}
@media screen and (max-width: 1279px) {
#wrap #charm .inner .charm_list .flex .flex{ gap: 60px;}
}
@media screen and (max-width: 980px) {
#wrap #charm .inner .sec_ttl { width: 480px; margin: 0 auto 80px;}

#wrap #charm .inner .charm_list > .flex { padding: 40px 40px 40px 90px; margin-left: 20px;}
#wrap #charm .inner .charm_list > .flex + .flex { margin-top: 40px;}
#wrap #charm .inner .charm_list > .flex > p { font-size: 18px; padding: 20px 25px 20px 50px; left: -20px;}
#wrap #charm .inner .charm_list .flex .flex { gap: 30px;}
#wrap #charm .inner .charm_list .flex .flex .txt_wrap .charm_ttl { font-size: 18px; margin-bottom: 20px;}
#wrap #charm .inner .charm_list .flex .flex .img_wrap { width: 140px;}

}
@media screen and (max-width: 767px) {
#wrap #charm .inner{ padding: 0 30px 70px;}
#wrap #charm .inner .sec_ttl{ width: 300px; margin: 0 auto 60px;}
#wrap #charm .inner .charm_list > .flex{ flex-direction: column; padding: 95px 30px 30px; border-radius: 15px; margin-left: 0;}
#wrap #charm .inner .charm_list > .flex + .flex{ margin-top: 30px;}
#wrap #charm .inner .charm_list > .flex > p{ font-size: 19px; border-radius: 6px 6px 100px 100px; padding: 40px 20px 15px 20px; top: -10px; left: 50%; transform: translateX(-50%);}
#wrap #charm .inner .charm_list .flex .flex{ gap: 50px; flex-direction: column-reverse; align-items: center;}
#wrap #charm .inner .charm_list .flex .flex .txt_wrap{ width: 100%;}
#wrap #charm .inner .charm_list .flex .flex .txt_wrap .charm_ttl{ font-size: 16px; margin-bottom: 20px; line-height: 1.8;}
#wrap #charm .inner .charm_list .flex .flex .txt_wrap .charm_txt{ font-size: 12px;}
#wrap #charm .inner .charm_list .flex .flex .img_wrap{ width: 160px;}
}
@media screen and (max-width: 374px) {
#wrap #charm .inner{ padding: 0 20px 60px;}
#wrap #charm .inner .charm_list .flex .flex .txt_wrap .charm_ttl{ font-size: 13px;}
}
/*-------------------------
__works
-------------------------*/
#wrap #works{ position: relative;}
#wrap #works .sec_ttl.en{ font-size: 50px; color: var(--main); margin-bottom: 120px;}
#wrap #works .yl_btn{ position: absolute; flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:18px; width:160px; height:48px; border-radius:999px; background:#fff; color:var(--black); font-weight:700; font-size: 12px; border: 1px solid var(--yellow); padding-right: 20px; box-sizing: border-box; top: 0; right: 80px; transition: .3s;}
#wrap #works .yl_btn .arrow{ position: absolute; right:20px; top:50%; width:10px; height:10px;}
#wrap #works .yl_btn .arrow::before { content: ""; position: absolute; top: 0; right: 0; width: 10px; height: 2px; background: var(--black); transform: translateY(-50%); border-radius: 999px;}
#wrap #works .yl_btn .arrow::after { content: ""; position: absolute; top: -4.5px; right: 0; width: 7px; height: 7px; border-top: 2px solid var(--black); border-right: 2px solid var(--black); transform: rotate(45deg);}

#wrap #works .swiper{ margin-bottom: 140px;}
#wrap #works .swiper .swiper-wrapper{}
#wrap #works .swiper .swiper-wrapper .swiper-slide{ width: 58%;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card{ display:block; overflow:hidden; border-radius:30px; text-decoration:none; color:#fff; background: var(--main);}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_img{ display:block; width:100%; aspect-ratio:6/4; overflow: hidden; margin: 0;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_img img{ width: 100%; height: 100%; object-fit: cover; transition: .5s;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body{ padding:40px; display:flex; justify-content:space-between; align-items:flex-end; gap:40px;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body .works_card_info{ width: calc(100% - 180px); text-align: left;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body .works_card_info .works_card_no{ margin-bottom:18px; font-size:12px; letter-spacing:.08em;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body .works_card_info .works_card_ttl{ font-size:20px; font-weight:700; line-height:1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body .works_card_btn{ flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:18px; width:140px; height:48px; border-radius:999px; background:#fff; color:var(--black); font-weight:700; font-size: 12px; position: relative; padding-right: 20px; box-sizing: border-box; transition: .3s;}

#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body .works_card_btn .arrow{ position: absolute; right:20px; top:50%; width:10px; height:10px;}
/* 横棒 */
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body .works_card_btn .arrow::before { content: ""; position: absolute; top: 0; right: 0; width: 10px; height: 2px; background: var(--main); transform: translateY(-50%); border-radius: 999px;}
/* 矢印 */
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body .works_card_btn .arrow::after { content: ""; position: absolute; top: -4.5px; right: 0; width: 7px; height: 7px; border-top: 2px solid var(--main); border-right: 2px solid var(--main); transform: rotate(45deg);}
#wrap #mv .inner .flex{ width: 100%; justify-content: space-between;}

/* #wrap #works .inner .property_list_wrap{ background: var(--main); padding: 70px 60px; box-sizing: border-box; border-radius: 30px;}
#wrap #works .inner .property_list_wrap .flex{ gap: 50px; align-items: center; justify-content: space-between;}
#wrap #works .inner .property_list_wrap .flex .img_wrap{ max-width: 150px;}
#wrap #works .inner .property_list_wrap .flex .img_wrap img{}
#wrap #works .inner .property_list_wrap .flex .list_ttl_wrap{ text-align: left; color: #fff;}
#wrap #works .inner .property_list_wrap .flex .list_ttl_wrap .list_ttl{ font-size: 30px; font-weight: 900; margin-bottom: 30px;}
#wrap #works .inner .property_list_wrap .flex .list_ttl_wrap .list_txt{ font-size: 20px; line-height: 2;}
#wrap #works .inner .property_list_wrap .flex .y_btn{ flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:18px; border-radius:999px; color: var(--black); position: relative; background: var(--yellow); width: 275px; height: 74px; font-size: 18px; font-weight: 900; padding-right: 20px; box-sizing: border-box; transition: .3s;}
#wrap #works .inner .property_list_wrap .flex .y_btn .arrow{ position:absolute; right:30px; top:50%; width:15px; height:15px;}
#wrap #works .inner .property_list_wrap .flex .y_btn .arrow::before { content: ""; position: absolute; top: 2px; right: 0; width: 15px; height: 3px; background: var(--black); border-radius: 999px;}
#wrap #works .inner .property_list_wrap .flex .y_btn .arrow::after { content: ""; position: absolute; top: -3px; right: 0; width: 10px; height: 10px; border-top: 3px solid var(--black); border-right: 3px solid var(--black); transform: rotate(45deg);}
#wrap #mv .inner .flex{ width: 100%; justify-content: space-between;} */

#wrap #works > .img_wrap{}
#wrap #works > .img_wrap img{}

@media screen and (max-width: 1279px) {
/* #wrap #works .inner .property_list_wrap .flex { gap: 30px;}
#wrap #works .inner .property_list_wrap .flex .list_ttl_wrap .list_ttl { font-size: 24px;}
#wrap #works .inner .property_list_wrap .flex .list_ttl_wrap .list_txt { font-size: 18px;} */
}
@media screen and (max-width: 980px) {
#wrap #works .sec_ttl.en { font-size: 34px; margin-bottom: 80px;}

#wrap #works .swiper{ margin-bottom: 80px;}
/* #wrap #works .inner .property_list_wrap { padding: 50px 30px;}
#wrap #works .inner .property_list_wrap .flex { flex-wrap: wrap;}
#wrap #works .inner .property_list_wrap .flex .y_btn { width: 100%;} */
}

@media screen and (min-width:768px) {
#wrap #works .yl_btn:hover{ background: var(--yellow);}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card:hover .works_card_img img{ transform: scale(1.05);}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card:hover .works_card_body .works_card_btn{ background: var(--yellow);}
/* #wrap #works .inner .property_list_wrap .flex .y_btn:hover{background: #fff;} */
}

@media screen and (max-width: 767px) {
#wrap #works .sec_ttl.en{ font-size: 30px; margin-bottom: 40px;}
#wrap #works .yl_btn{ position: relative; color:var(--main); border: 1px solid var(--main); right: auto; margin: 45px auto;}
#wrap #works .yl_btn .arrow{ position: absolute; right:20px; top:50%; width:10px; height:10px;}
#wrap #works .yl_btn .arrow::before { background: var(--main);}
#wrap #works .yl_btn .arrow::after { width: 7px; height: 7px; border-top: 2px solid var(--main); border-right: 2px solid var(--main);}

#wrap #works .swiper{ margin-bottom: 60px;}
#wrap #works .swiper .swiper-wrapper .swiper-slide{ width: 82%;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card{ border-radius:10px;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body{ padding:20px; flex-direction: column; gap:20px;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body .works_card_info{ width: 100%;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body .works_card_info .works_card_no{ margin-bottom:10px; font-size:9px;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body .works_card_info .works_card_ttl{ font-size:13px;}
#wrap #works .swiper .swiper-wrapper .swiper-slide .works_card .works_card_body .works_card_btn{ width:100%; height:36px; font-size: 9px;}

/* #wrap #works .inner .property_list_wrap{ padding: 40px 45px; border-radius: 15x;}
#wrap #works .inner .property_list_wrap .flex{ gap: 30px; flex-direction: column;}
#wrap #works .inner .property_list_wrap .flex .img_wrap{ max-width: 220px;}
#wrap #works .inner .property_list_wrap .flex .list_ttl_wrap{ text-align: center;}
#wrap #works .inner .property_list_wrap .flex .list_ttl_wrap .list_ttl{ font-size: 18px; margin-bottom: 20px;}
#wrap #works .inner .property_list_wrap .flex .list_ttl_wrap .list_txt{ font-size: 13px;}
#wrap #works .inner .property_list_wrap .flex .y_btn{ color: var(--main); background: var(--yellow); width: 100%; height: 48px; font-size: 14px; padding-right: 20px; box-sizing: border-box; transition: .3s;}
#wrap #works .inner .property_list_wrap .flex .y_btn .arrow::before { background: var(--main)}
#wrap #works .inner .property_list_wrap .flex .y_btn .arrow::after { width: 10px; height: 10px; border-top: 3px solid var(--main); border-right: 3px solid var(--main);} */

#wrap #works > .img_wrap{}
#wrap #works > .img_wrap img{}


}
@media screen and (max-width: 374px) {
}

/*-------------------------
__oroom
-------------------------*/
#wrap #oroom{ background: var(--main);}
#wrap #oroom .inner:first-child{ padding: 120px 80px 0;}
#wrap #oroom .inner:last-child{ padding: 0 80px 120px;}
#wrap #oroom .inner .sec_ttl{ max-width: 300px; margin: 0 auto 90px;}
#wrap #oroom .inner .sec_ttl img{}
#wrap #oroom .inner .sec_subttl{ font-size: 28px; font-weight: 900; color: #fff; position: relative; display: inline-block; margin-bottom: 120px;}
#wrap #oroom .inner .sec_subttl::before,
#wrap #oroom .inner .sec_subttl::after { content: ""; position: absolute; width: 34px; height: 2px; background: #fff;}
#wrap #oroom .inner .sec_subttl::before { top: 50%; transform: translateY(-50%) rotate(-55deg); right: -40px;}
#wrap #oroom .inner .sec_subttl::after { top: 50%; transform: translateY(-50%) rotate(55deg); left: -40px;}

#wrap #oroom .swiper{ max-width: 1280px; padding: 0 80px; box-sizing: border-box;}
#wrap #oroom .swiper .swiper-wrapper{ gap: 30px;}
#wrap #oroom .swiper .swiper-wrapper .swiper-slide{ width: calc((100% - 120px) / 5);}
#wrap #oroom .swiper .swiper-wrapper .swiper-slide .img_wrap{ width: 100%; height: auto; overflow: hidden; aspect-ratio: 1 / 1; margin: 0;}
#wrap #oroom .swiper .swiper-wrapper .swiper-slide .img_wrap img{ width: 100%; height: 100%; object-fit: cover;}
#wrap #oroom .swiper .swiper-wrapper .swiper-slide .info{ text-align: left; margin-top: 30px; color: #fff;}
#wrap #oroom .swiper .swiper-wrapper .swiper-slide .info .detail{ font-size: 12px; line-height: 2;}
#wrap #oroom .swiper .swiper-wrapper .swiper-slide .info .name{ font-size: 13px; margin-top: 20px;}

#wrap #oroom .inner .kaglog{ gap: 165px; align-items: center; margin-top: 90px;}
#wrap #oroom .inner .kaglog .img_wrap{ max-width: 230px;}
#wrap #oroom .inner .kaglog .img_wrap img{}
#wrap #oroom .inner .kaglog .txt_wrap{ color: #fff; text-align: left; flex: 1;}
#wrap #oroom .inner .kaglog .txt_wrap .kaglog_ttl{ font-size: 20px; font-weight: 900; margin-bottom: 35px;}
#wrap #oroom .inner .kaglog .txt_wrap .kaglog_txt{ font-size: 13px; line-height: 2;}

#wrap .link_wrap{ background-color: var(--gray);}
#wrap .link_wrap .img_wrap{}
#wrap .link_wrap .img_wrap img{}
#wrap .link_wrap .inner{ padding: 180px 20px 80px;}
#wrap .link_wrap .inner a{ padding: 50px 0; background: var(--main); box-sizing: border-box; border-radius: 20px; max-width: 960px; display: block; margin: auto; position: relative; transition: .3s;}
/* 横棒 */
#wrap .link_wrap .inner a::before{ content: ""; position: absolute; top: 50%; right: 50px; width: 19px; height: 3px; background: #fff; transform: translateY(-50%); border-radius: 999px; transition: .3s;}
/* 矢印 */
#wrap .link_wrap .inner a::after { content: ""; position: absolute; top: 50%; right: 50px; width: 10px; height: 10px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: translateY(-50%) rotate(45deg); transition: .3s;}
#wrap .link_wrap .inner a span{ font-size: 20px; font-weight: 900; display: block; color: #fff; transition: .3s;}
#wrap .link_wrap .inner p{ font-size: 12px; color: var(--main); margin-top: 90px;}
#wrap .link_wrap .inner p .en{}

@media screen and (max-width: 1279px) {
#wrap #oroom .inner:first-child{ padding: 100px 60px 0;}
#wrap #oroom .swiper{ padding: 0 60px;}
#wrap #oroom .inner .kaglog { gap: 60px;}
}
@media screen and (max-width: 980px) {
#wrap #oroom .inner:first-child{ padding: 80px 40px 0;}
#wrap #oroom .swiper{ padding: 0 40px;}
}

@media screen and (min-width:768px) {
#wrap .link_wrap .inner a:hover{ background: var(--yellow);}
#wrap .link_wrap .inner a:hover span{ color: var(--main);}
#wrap .link_wrap .inner a:hover::before{ background: var(--main);}
#wrap .link_wrap .inner a:hover::after { border-top: 3px solid var(--main); border-right: 3px solid var(--main);}
}

@media screen and (max-width: 767px) {
#wrap #oroom .inner:first-child{ padding: 50px 30px 0;}
#wrap #oroom .inner:last-child{ padding: 0 30px 50px;}
#wrap #oroom .inner .sec_ttl{ max-width: 180px; margin: 0 auto 60px;}
#wrap #oroom .inner .sec_ttl img{}
#wrap #oroom .inner .sec_subttl{ font-size: 14px; margin-bottom: 60px; line-height: 1.8;}
#wrap #oroom .inner .sec_subttl::before,
#wrap #oroom .inner .sec_subttl::after { width: 34px; height: 1.5px;}

#wrap #oroom .swiper{ padding: 0; width: auto; overflow:hidden; max-width:none; padding:0;}
#wrap #oroom .swiper .swiper-wrapper{ gap: 0; display: flex;}
#wrap #oroom .swiper .swiper-wrapper .swiper-slide{ width: 40%;}
#wrap #oroom .swiper .swiper-wrapper .swiper-slide .info{ margin-top: 20px;}
#wrap #oroom .swiper .swiper-wrapper .swiper-slide .info .detail{ font-size: 9px;}
#wrap #oroom .swiper .swiper-wrapper .swiper-slide .info .name{ font-size: 10px; margin-top: 10px;}

#wrap #oroom .inner .kaglog{ gap: 60px; flex-direction: column; margin-top: 60px;}
#wrap #oroom .inner .kaglog .img_wrap{ max-width: 145px; flex-shrink:0;}
#wrap #oroom .inner .kaglog .txt_wrap .kaglog_ttl{ font-size: 16px; margin-bottom: 25px; line-height: 1.8; text-align: center;}
#wrap #oroom .inner .kaglog .txt_wrap .kaglog_txt{ font-size: 12px;}

#wrap .link_wrap{ background-color: var(--yellow);}
#wrap .link_wrap .inner{ padding: 80px 30px;}
#wrap .link_wrap .inner a{ padding: 40px 20px; background: none; border: 2px solid var(--main);}
#wrap .link_wrap .inner a::before{ background: var(--main);}
#wrap .link_wrap .inner a::after { width: 10px; height: 10px; border-top: 3px solid var(--main); border-right: 3px solid var(--main);}
#wrap .link_wrap .inner a::before{ right: 20px;}
#wrap .link_wrap .inner a::after { right: 20px;}
#wrap .link_wrap .inner a span{ font-size: 18px; color: var(--main);}
#wrap .link_wrap .inner p{ font-size: 9px; margin-top: 40px;}
#wrap .link_wrap .inner p .en{}
}
@media screen and (max-width: 429px) {
#wrap .link_wrap .inner a span{ font-size: 14px;}
}
@media screen and (max-width: 374px) {
#wrap #oroom .inner:first-child{ padding: 50px 20px 0;}
#wrap #oroom .inner:last-child{ padding: 0 20px 50px;}
#wrap .link_wrap .inner a span { font-size: 13px;}
#wrap .link_wrap .inner{ padding: 60px 20px 60px;}
}