/* ================================
   催事テンプレート2026
   メインビジュアルCSS
================================ */
/* 共通 */
html{
    scrollbar-width: none;
}
html::-webkit-scrollbar{
    display:none;
}
@media only screen and (max-width: 599px) {
    .sp_only {
        display: block !important;
    }
    .sp_tablet_only {
        display: block !important;
    }
    .tablet_only {
        display: none !important;
    }
    .pc_only {
        display: none !important;
    }
    .pc_tablet_only {
        display:none !important;
    }
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
    .sp_only {
        display: none !important;
    }
    .sp_tablet_only {
        display: block !important;
    }
    .tablet_only {
        display: block !important;
    }
    .pc_only {
        display: none !important;
    }
    .pc_tablet_only {
        display:block !important;
    }
}
@media only screen and (min-width: 1025px) {
    .sp_only {
        display: none !important;
    }
    .sp_tablet_only {
        display: none !important;
    }
    .tablet_only {
        display: none !important;
    }
    .pc_only {
        display: block !important;
    }
    .pc_tablet_only {
        display:block !important;
    }
}
#pagetop {
    display: none !important;
}
#footer {
    margin-top: -32px !important;
}
.footer__spMenu__foot{
    margin-top: 0 !important;
}
@media only screen and (max-width: 599px) {
    #footer {
        margin-top: 0 !important;
    }
}
/* ================================
   カスタムヘッダー
================================ */
.f_menu {
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 35px 50px 10px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 900;
    transition: background 0.5s ease; 
}
.f_menu.scrolled {
    background: rgba(255, 255, 255, 0.9);
}
.f_menu .c_logo {
    position: fixed;
    top: 25px;
    left: 50px;
    max-width: 210px;
    z-index: 10;
    transition: filter 1s ease; 
}
.f_menu.scrolled .c_logo {
    filter: invert(0.5);
}
.f_menu ul {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.f_menu li {
    padding: 0 1em;
}
.f_menu li a {
    font-size: 16px !important;
    letter-spacing: 1px;
    color: #fff;
    font-weight: bold;
    transition: color 1s ease; 
}
.f_menu.scrolled li a {
    color: #222;
}
.f_lead {
    position: fixed;
    bottom: 160px;
    right: 2em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 16px !important;
    color: #222;
    font-family: "Urbanist", sans-serif;
    letter-spacing: 2px;
    z-index: 10;
    transition: color 1s ease; 
}
.f_menu.scrolled + .f_lead {
    color: #222;
}
/* 疑似要素のスタイル */
.f_lead::after {
    position: absolute;
    content: "";
    bottom: -70px;
    right: 14px;
    height: 50px;
    width: 1px;
    background: #222;
    transition: background 1s ease;
    animation: scroll 3s infinite;
    -webkit-animation: scroll 5s infinite;
}
@keyframes scroll {
    0%   { opacity: 0; transform: translateY(-100%); }
    /*25%  { opacity: 1; transform: translateY(0); }*/
    45%  { opacity: 1; transform: translateY(0); }
    /*75%  { opacity: .5; transform: translateY(100%); }*/
    100% { opacity: 0; transform: translateY(100%); }
}
@-webkit-keyframes scroll {
    0%   { opacity: 0; transform: translateY(-100%); }
    /*25%  { opacity: 1; transform: translateY(0); }*/
    45%  { opacity: 1; transform: translateY(0); }
    /*75%  { opacity: .5; transform: translateY(100%); }*/
    100% { opacity: 0; transform: translateY(100%); }
}
@media screen and (min-width: 600px) and (max-width: 1024px){
    .f_menu {
        padding: 35px 20px 10px;
    }
    .f_menu .c_logo {
        left: 30px;
        filter: invert(1);
    }
}
@media only screen and (max-width: 599px) {
    .f_menu {
        padding: 20px 20px 10px;
    }
    .f_menu .c_logo {
        top: 20px;
        left: 20px;
        filter: invert(1);
    }
    /*.f_menu ul {
        display: none;
    }*/
    .sp_header{
        width: 100%;
        height: 50px;
        position: fixed;
        background: none;
        z-index: 990;
        transition: background 0.5s ease; 
    }
    .h_logo{
        display: block;
        width: 160px;
        position: fixed;
        top: 15px;
        left: 10px;
        z-index: 998;
    }
    .menuButton {
        display: block;
        height: 50px;
        width: 50px;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 998;
    }
    .menuButton div {
        height: 1px;
        width: 30px;
        background: #fff;
        position: absolute;
        top: 50%;
        right: 20%;
        transform: translate(-50%, -50%);
        transition: ease-out .3s;
    }
    .menuButton div:nth-of-type(1) {
        transform: translate(-0%,-10px);
    }
    .menuButton div:nth-of-type(2) {
        transform: translate(-0%,0);
    }
    .menuButton div:nth-of-type(3) {
        transform: translate(-0%,10px);
    }
    .menuButton.active {
        background: #3d3d3d;
    }
    .menuButton.active div:nth-of-type(1) {
        transform: rotate(45deg) translate(-5px, -10px);
        transform-origin: 0% 50%;
        background: #fff;
    }
    .menuButton.active div:nth-of-type(2) {
        opacity: 0;
        transition: translate(-50%, -50%);
    }
    .menuButton.active div:nth-of-type(3) {
        transform: rotate(-45deg) translate(-5px, 10px);
        transform-origin: 0% 50%;
        background: #fff;
    }
    nav {
        opacity: 0;
        visibility: hidden;
        transition: .8s;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100vh;
        font-size: 20px;
        z-index: 900;
    }
    nav ul {
        height: 100%;
        margin: 0;
        padding: 0;
        background: rgba(255,255,255,.5);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    nav ul li a {
        display: block;
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        color: #222;
        text-decoration: none;
        letter-spacing: 1px;
        font-weight: bold;
        transition: .5s;
    }
    nav ul li a:hover{
        background: #fff;
        color: #333;
    }
    nav.active {
        opacity: 0.9;
        visibility: visible;
        right: 0;
    }

    .sp_header.scrolled {
        background: rgba(255, 255, 255, .9);
    }
    .sp_header.scrolled .h_logo {
        filter: invert(0.7);
    }
    /* scrolledクラスが付与された場合に疑似要素の背景色を変更 */
    .sp_header.scrolled .menuButton div{
        background: #222;
    }
    .sp_header.scrolled .menuButton.active div:nth-of-type(1) ,
    .sp_header.scrolled .menuButton.active div:nth-of-type(3) {
        background: #fff;
    }
    .f_lead {
        position: absolute;
        bottom: 120px;
        right: 1em;
        font-size: 14px !important;
        font-weight: 200;
        display: none;
    }
    .f_lead::after {
        right: 12px;
    }
}
/* ================================
   メインビジュアル
================================ */
.recommend_main .mv_wrap {
    position: relative;
    width: 100%;
}
.recommend_main .main_visual.show {
    position: relative;
    width: 100%;
    height: 100vh !important;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
}
/* 背景画像 */
.recommend_main .main_visual.show .image{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:0;
}
.recommend_main .main_visual.show .image_sp {
    position: absolute;
    top:0;
    left:0;
    width:200%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:0;
}
/* PC画像アニメーション */
.recommend_main .main_visual.show .image {
    animation-name:event_mv_anime;
    animation-duration:21s;
    animation-iteration-count:infinite;
}
.recommend_main .main_visual.show .image:nth-of-type(2){
    animation-delay:5s;
}
.recommend_main .main_visual.show .image:nth-of-type(3){
    animation-delay:10s;
}
/* SP画像アニメーション */
.recommend_main .main_visual.show .image_sp {
    animation-name:event_mv_anime_sp;
    animation-duration:21s;
    animation-iteration-count:infinite;
}
.recommend_main .main_visual.show .image_sp:nth-of-type(2){
    animation-delay:7s;
}
.recommend_main .main_visual.show .image_sp:nth-of-type(3){
    animation-delay:14s;
}
/* PCアニメーション01 */
@keyframes event_mv_anime {
    0% {
        opacity:0;
        transform:scale(1);
    }
    25% {
        opacity:1;
    }
    100% {
        opacity:0;
        transform:scale(1.1);
    }
}
/* PCアニメーション02 */
@keyframes event_mv_anime02 {
    0% {
        opacity:0;
        transform:translateX(-10%)scale(1.2);
    }
    25% {
        opacity:1;
    }
    100% {
        opacity:0;
        transform:translateX(0px)scale(1.2);
    }
}
/* PCアニメーション03 */
@keyframes event_mv_anime03 {
    0% {
        opacity:0;
    }
    25% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
/* SPアニメーション01 */
@keyframes event_mv_anime_sp {
    0% {
        opacity:0;
        transform:scale(1);
    }
    25% {
        opacity:1;
    }
    100% {
        opacity:0;
        transform:scale(1.1);
    }
}
/* SPアニメーション02 */
@keyframes event_mv_anime_sp02 {
    0% {
        opacity:0;
        transform:translateX(-15%);
    }
    25% {
        opacity:1;
    }
    100% {
        opacity:0;
        transform:translateX(0);
    }
}
/* SPアニメーション03 */
@keyframes event_mv_anime_sp03 {
    0% {
        opacity:0;
    }
    25% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
/* ================================
   タイトル
================================ */
.recommend_main .main_title.show {
    position:absolute;
    top:48%;
    width: max-content;
    z-index:10;
    visibility:visible;
    opacity:1;
}
.recommend_main .main_title h1 {
    margin:0 0 60px;
    text-align:center;
    letter-spacing:4px;
    line-height:1.2;
}
.recommend_main .main_title h1 span {
    display: block;
    padding: 10px 0;
    font-size: 0.8em;
}
.recommend_main .main_title h1 img {
    display: block;
    margin: 0 auto;
    padding-bottom: 20px;
}
.recommend_main .main_title p {
    margin-top:-1em;
    text-align:center;
}
/* ================================
   予約ボタン
================================ */
.recommend_main .coordinate_benefit {
    position:absolute;
    width:100%;
    bottom:18%;
    display:flex;
    justify-content:center;
    z-index:20;
}
.recommend_main .coordinate_benefit a {
    width:100%;
    max-width:230px;
    padding:1%;
    filter:drop-shadow(-3px 4px 6px rgba(0,0,0,.3));
    transition:.5s;
}
.recommend_main .coordinate_benefit a:hover {
    transform:translateY(-10px);
}
.recommend_main .coordinate_benefit img {
    width:100%;
}
.recommend_main .scroll {
    position:absolute;
    right:50%;
    bottom:11%;
    transform:translateX(50%);
}
.recommend_main .scroll span {
    font-size:30px;
    color:#fff;
}
@media screen and (max-width:599px){
    .recommend_main .main_visual.show {
        height:100vh !important;
    }
    .recommend_main .main_title.show {
        width: 90%;
        top: 40%;
    }
    .recommend_main .main_title h1 {
        margin-bottom:36px;
    }
    .recommend_main .main_title h1 span {
        font-size:0.8em;
    }
    .recommend_main .main_title h1 img {
        width:100% !important;
    }
    .recommend_main .main_title p {
        line-height: 1.6;
        padding: 6px 16px;
    }
    .recommend_main .coordinate_benefit {
        top:45%;
        bottom:auto;
        flex-wrap:wrap;
    }
    .recommend_main .coordinate_benefit a {
        max-width:160px;
    }
}
/* ================================
   予約ボタン デザイン
================================ */
.benefit_card{
    bottom: 2%;
    right: 1%;
    width: 550px;
    height: 180px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    opacity: 0;
    animation: show_benefit 3s ease-in-out forwards;
    animation-delay: 1s;
    z-index: 500;
    border: 5px solid;
}
@keyframes show_benefit {
    0% {
        opacity: 0;
        transform: scale(1.1);
        filter:blur(3px) drop-shadow(5px 6px 4px rgba(0,0,0,.3));
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter:blur(0) drop-shadow(5px 6px 4px rgba(0,0,0,.3));
    }
}
.benefit_card .main_reserve{
    position: absolute;
    top: 50%;
    transform: translateY(-45%);
    right: 1%;
    width: 260px;
    height: 70px;
}
.benefit_card .main_reserve a{
    position: absolute;
    height: 70px;
    right: 16px;
    width: 260px;
    border-radius: 20px;
    display: inline-block;
    line-height: 3.8;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background: #ca0000;
    color: #fff;
    overflow: hidden;
}
.benefit_card .main_reserve a::before {
    position: absolute;
    content: '';
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-45deg);
    animation: nyainy-btn 3.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite;
}
.benefit_card img{
    width: 100%;
    filter: drop-shadow(-3px 4px 6px rgba(0, 0, 0, .3));
}
.benefit_card .cb_txt_top{
    position: absolute;
    top: 0%;
    width: 50%;
    padding: 2% 3%;
}
.benefit_card .cb_txt_top p{
    padding: 2px 5px;
    text-align: center;
}
.benefit_card .cb_txt{
    position: absolute;
    width: 50%;
    top: 50%;
    transform: translateY(-45%);
    padding: 5% 3%;
}
.benefit_card .cb_txt h2{
    text-align: center;
    line-height: 1;
}
.benefit_card .cb_txt_bottom{
    position: absolute;
    bottom: 0%;
    width: 100%;
    padding: 3% 3% 1%;
}
.benefit_card .cb_txt_bottom > p{
    text-align: left;
}
@media only screen and (max-width:599px) {
    .benefit_card{
        position: absolute;
        bottom: 1%;
        right: 2%;
        transform: initial;
        width: 75%;
        height: 150px;
        opacity: 0;
        animation-delay: 1s;
        border: 2px solid;
    }
    .benefit_card .main_reserve {
        position: absolute;
        top: initial;
        bottom: 10px;
        right: initial;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 30px;
    }
    .benefit_card .main_reserve a {
        position: absolute;
        height: 30px;
        top: 0;
        right: initial;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        border-radius: 20px;
        display: inline-block;
        line-height: 2;
        font-size: 16px;
        font-weight: bold;
        background: #e00515;
        color: #fff;
        overflow: hidden;
    }
    .benefit_card .cb_txt_top {
        width: 65%;
        height: 60px;
        display: flex;
        align-items: center;
        text-align: center;
    }
    .benefit_card .cb_txt_top p{
        width: 95%;
    }
    .benefit_card .cb_txt {
        width: 45%;
        height: 45px;
        top: 20%;
        right: 0;
        padding: 0% 3%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .benefit_card .cb_txt p{
        padding: 2px 10px;
        text-align: center;
    }
    .benefit_card .cb_txt_bottom {
        width: 95%;
        left: 50%;
        top: 52%;
        transform: translate(-50%, -45%);
        bottom: initial;
        padding: 3%;
    }
    .benefit_card .cb_txt_bottom > p{
        max-height: 50px;
    }
    .benefit_card .cb_txt_bottom > p span{
        line-height: 1.4;
    }
}
/*************バナーデザイン02**************/
.benefit_card02 {
    bottom: 2%;
    right: 1%;
    width: 300px;
    padding-bottom: 90px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    opacity: 0;
    animation: show_benefit 3s ease-in-out forwards;
    animation-delay: 1s;
    z-index: 500;
    border: 5px solid;
}
.benefit_card02 .cb_txt_top {
    position: relative;
    top: initial;
    width: 100%;
    padding: 5% 3% 1%;
}
.benefit_card02 .cb_txt_top p{
    padding: 2px 5px;
    text-align: center;
}
.benefit_card02 .cb_txt {
    position: relative;
    width: 100%;
    top: initial;
    transform: initial;
    padding: 5% 3% 2%;
}
.benefit_card02 .cb_txt h2{
    padding: 0 5% 0;
    text-align: center;
    line-height: 1;
}
.benefit_card02 .cb_txt_bottom {
    position: relative;
    bottom: initial;
    width: 100%;
    padding: 0 5% 1%;
}
.benefit_card02 .cb_txt_bottom > p{
    line-height: 1.7;
}
.benefit_card02 .main_reserve {
    position: absolute;
    bottom: 4px;
    top: initial;
    transform: initial;
    right: 0%;
    width: 100%;
    height: 70px;
}
.benefit_card02 .main_reserve a {
    position: absolute;
    height: 56px;
    right: 16px;
    width: 260px;
    border-radius: 20px;
    display: inline-block;
    line-height: 3;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background: #ca0000;
    color: #fff;
    overflow: hidden;
}
@media only screen and (max-width:599px) {
    .benefit_card02 {
        bottom: 1%;
        right: 2%;
        width: 50%;
        padding-bottom: 33px;
        border: 2px solid;
    }
    .benefit_card02 .cb_txt_top {
        padding: 3% 3% 1%;
    }
    .benefit_card02 .cb_txt {
        padding: 3% 1%;
    }
    .benefit_card02 .main_reserve {
        position: absolute;
        bottom: 6px;
        top: initial;
        transform: translateX(50%);
        right: 50%;
        width: 100%;
        height: 26px;
    }
    .benefit_card02 .main_reserve a {
        position: absolute;
        height: 26px;
        right: 50%;
        transform: translateX(50%);
        width: 90%;
        line-height: 2;
        font-size: 13px;
    }
}
/*************バナーデザイン03**************/
.benefit_card03 {
    bottom: 2%;
    right: 1%;
    width: 90%;
    max-width: 700px;
    padding: 8px 15px 8px 5px;
    z-index: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
}
.benefit_card03 .cb_txt_top {
    position: relative;
    top: 0%;
    width: auto;
    padding: 0;
}
.benefit_card03 .cb_txt_top p {
    padding: 2px 5px;
    text-align: left;
}
.benefit_card03 .cb_txt {
    position: relative;
    width: auto;
    transform: initial;
    padding: 0 1%;
}
.benefit_card03 .cb_txt h2 {
    padding: 2px 5px;
}
.benefit_card03 .cb_txt_bottom {
    position: relative;
    bottom: 0%;
    width: auto;
    padding: 0 1%;
}
.benefit_card03 .cb_txt_bottom p {
    text-align: left;
}
.benefit_card03 .main_reserve {
    position: initial;
    transform: initial;
    height: initial;
    width: 40%;
    margin: 0 5px 0 10px;
    padding: 3px 0;
    background: #e00515;
}
.benefit_card03 .main_reserve a {
    position: relative;
    width: 100%;
    height: initial;
    border-radius: initial;
    display: inline-block;
    line-height: initial;
    background: initial;
    color: #fff;
    overflow: initial;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}
@media only screen and (max-width:599px) {
    .benefit_card03 {
        bottom: 1%;
        right: 2%;
        width: 85%;
        padding: 8px;
        padding-bottom: 35px;
    }
    .benefit_card03 .main_reserve {
        position: absolute;
        transform: initial;
        height: 26px;
        bottom: 0px;
        width: 100%;
        margin: 0 auto;
        padding: 3px 0;
        background: #e00515;
    }
    .benefit_card03 .main_reserve a {
        font-size: 13px;
    }
}
/* ================================
   特典エリア
================================ */
.tokuten_container{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--section-bg);
}
.tokuten_container::before{
    content: "";
    display: var(--top-gradient-display);
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(
        to top,
        var(--section-bg) 0%,
        transparent 100%
    );
}
.tokuten_container .t_head{
    position: relative;
    margin: -3em 0 20px;
    padding: 10px 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--head-bg);
}
.tokuten_container .t_head p{
    line-height: 1.2 !important;
    color: var(--head-subtitle-color);
    font-size: var(--head-subtitle-size);
}
.tokuten_container .t_head h2{
    line-height: 1.4 !important;
    font-family: var(--title-font-family);
    font-weight: var(--title-weight);
    color: var(--head-title-color);
    font-size: var(--head-title-size);
}
.tokuten_container ul{
    width: 100%;
    max-width: 1380px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    padding: 1% 3% 0;
}
/* 1列 */
.tokuten_container ul.layout1 li{
    width:100%;
}
/* 2列 */
.tokuten_container ul.layout2 {
    max-width:1120px;
}
.tokuten_container ul.layout2 li{
    width:48%;
}
/* 3列 */
.tokuten_container ul.layout3 li{
    width:31.3%;
}
/* 1列 → 2列 → 2列 */
.tokuten_container ul.layout4 {
    max-width:1120px;
}
.tokuten_container ul.layout4 li:first-child{
    width:100%;
}
.tokuten_container ul.layout4 li:not(:first-child){
    width:48%;
}
/* 2列 → 1列 → 1列 */
.tokuten_container ul.layout5 {
    max-width:1120px;
}
.tokuten_container ul.layout5 li:last-child{
    width:100%;
}
.tokuten_container ul.layout5 li:not(:last-child){
    width:48%;
}
.tokuten_container ul li{
    min-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 1%;
    padding: 2%;
    background: var(--item-bg);
}
.tokuten_container ul li .tokuten_wrap{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.tokuten_container ul li .tokuten_wrap .t_text{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.tokuten_container ul li .tokuten_wrap .t_text p{
    color: var(--subtitle-color);
    font-size: var(--subtitle-size);
}
.tokuten_container ul li .tokuten_wrap .t_text h3{
    color: var(--title-color);
    font-size: var(--title-size);
    font-family: var(--title-font-family);
    font-weight: var(--title-weight);
}
.tokuten_container ul li .tokuten_wrap .t_disc{
    padding: 1% 0 0;
    color: var(--desc-color);
    font-size: var(--desc-size);
}
.tokuten_container ul li .t_note{
    width: 100%;
    padding: 2% 0 0;
    color: var(--note-color);
    font-size: var(--note-size);
    text-align: right;
}
.tokuten_container ul li .t_note.is-center{
    text-align:center;
}
.tokuten_container ul li img{
    width: 100%;
    padding: 2% 0 0;
    }
.tokuten_container .t_notice{
    width: 100%;
    padding: 0.5% 6% 2%;
    font-size: 12px;
    text-align: right;
    color: var(--notice-color);
}
@media (max-width:599px){
    .tokuten_container ul{
        padding: 3% 3% 5%;
    }
    .tokuten_container ul li .tokuten_wrap .t_text p{
        font-size: var(--subtitle-size-sp);
    }
    .tokuten_container ul li .tokuten_wrap .t_text h3{
        font-size: var(--title-size-sp);
    }
    .tokuten_container ul li .tokuten_wrap .t_disc{
        font-size: var(--desc-size-sp);
    }
    .tokuten_container ul li .t_note{
        font-size: var(--note-size-sp);
    }
}
/* ================================
   見出しエリア
================================ */
.headline{
    position: relative;
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--h-background);
    z-index: 400;
}
.headline::after{
    content: "";
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--top-gradient);
}
.headline .i_head{
    position: relative;
    margin: -30px 0 30px;
    padding: 20px 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--i-head-bg);
    z-index: 10;
}
.headline .i_head p{
    padding-bottom: 5px;
    line-height: 1.2 !important;
    color: var(--i-subtitle-color);
    font-size: var(--i-subtitle-size);
}
.headline .i_head h2{
    line-height: 1.4 !important;
    color: var(--i-title-color);
    font-size: var(--i-title-size);
    font-family: var(--i-font-family);
    font-weight: var(--i-font-weight);
    text-align: center;
}
@media (max-width:599px){
    .headline .i_head{
        margin: -30px 0 0px;
        padding: 10px 5%;
    }
    .headline .i_head p{
        font-size: var(--i-subtitle-size-sp) ;
    }
    .headline .i_head h2{
        font-size: var(--i-title-size-sp) ;
    }
}
/* ================================
   リードエリア
================================ */
.lead_container{
    position: relative;
    width: 100%;
    padding: 7em 0;
    height: 110vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lead_container::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--lead-bg-color);
    z-index: -10;
}
.lead_container .lead{
    position: relative;
    width: 100%;
    padding: 0 4em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 100;
}
.lead_container .lead > h2{
    font-size: var(--lead-title-size);
    color: var(--lead-title-color);
    font-family: var(--lead-title-font-family);
    font-weight: var(--lead-title-weight);
    text-align:center;
    line-height:1.4;
    opacity:0;
    transform:translateY(20px);
    transition:1.5s;
}
.lead_container .lead > p{
    font-size: var(--lead-text-size);
    color: var(--lead-text-color);
    line-height:2.4;
    text-align:center;
    margin-top:3em;
    opacity:0;
    transform:translateY(20px);
    transition:2s;
}
.lead_container .lead > h2.show,
.lead_container .lead > p.show{
    transform: translateY(0);
    opacity: 1;
}
.bg-slideshow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}
.bg-slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: fadeSlideshow 15s infinite;
}
.bg-slideshow img:nth-child(1) { animation-delay: 0s; }
.bg-slideshow img:nth-child(2) { animation-delay: 5s; }
.bg-slideshow img:nth-child(3) { animation-delay: 10s; }
@keyframes fadeSlideshow {
    0%   { opacity: 0; }
    13%  { opacity: 1; }   
    40%  { opacity: 1; }   
    66%  { opacity: 0; }
    100% { opacity: 0; }
}
.bg-slideshow.is-static img{
    animation:none;
    opacity:0;
}
.bg-slideshow.is-static img:first-child{
    opacity:1;
}

.reverse{
    flex-direction: row-reverse !important;
}
@media screen and (max-width: 599px){
    .lead_container .lead > h2{
        font-size: var(--lead-title-size-sp);
    }
    .lead_container .lead > p{
        font-size: var(--lead-text-size-sp);
    }
}
@media screen and (max-width: 1024px){
    .lead_container{
        flex-direction: column !important;
        height: 100vh;
        padding: 5em 0;
    }
    .lead_container .lead{
        width: 100%;
        padding: 5em 5%;
    }
}
/************デザイン02************/
.lead_container.design02 .lead{
    position:absolute;
    right:3%;
    width:50%;
    padding:0 4em;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.lead_container.design02 .bg-slideshow{
    position:absolute;
    top:50%;
    left:5%;
    transform:translateY(-50%);
    width:40%;
    height:50%;
}
@media screen and (max-width:1024px){
    .lead_container.design02{
        height: auto;
    }
    .lead_container.design02 .lead{
        position:relative;
        right:0;
        width:100%;
    }
    .lead_container.design02 .bg-slideshow{
        position:relative;
        top:initial;
        left:initial;
        transform:none;
        width:85%;
        height:200px;
        margin: 10% 0 0;
    }
}

/* ================================
   商品紹介エリア
================================ */
.c-product_ec{
    padding: 0;
}
.c-product_ec > .inner{
    padding: 2% 0;
}
.c-product_ec .i_head{
    position: relative;
    width: fit-content;
    margin: 0 auto;
    padding: 1.5% 5% 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--i_head-bg);
}
.c-product_ec .i_head p{
    line-height: 1.2 !important;
}
.c-product_ec .i_head h2{
    line-height: 1.4 !important;
    font-family: var(--i_title-font-family);
    font-weight: var(--i_title-weight);
}
.c-product_ec .mt40{
    margin-top: 0;
    margin-bottom: 40px;
    border: 1px solid #e6e6e6;
}
.c-product_ec .product__list {
    max-width: 1380px;
    margin: 0 auto;
    padding: 2% 3% 2.5%;
    flex-wrap: wrap;
    justify-content: center;
}
.product__img {
    border: none;
}
.c-product_ec .product__item{
    position: relative;
}
.component:not(.localnav-lg):not(.benefits) [class*='col'] {
    padding: 10px;
    margin: 20px 10px;
    background: #fff;
}
.c-product_ec .product__item .product__img {
    width: 100%;
}
.c-product_ec .product__item .product__img img {
    filter: brightness(1.05);
}
.c-product_ec .product__item:not(:nth-child(2n)){
    margin-right: 0;
    border-right: 1px solid #e6e6e6;
}
.c-product_ec a:hover{
    opacity: 1 !important;
}
.product__content{
    width: 90%;
    margin: 0em auto 1em;
    padding: 0;
}
.product__btnbox{
    display: flex;
    justify-content: flex-end;
}
.c-product_ec .product__btn {
    width: auto;
    margin: 1em 0 0;
    padding: 3px 10px;
    font-size: 13px;
    border: none;
    border-radius: initial;
    max-width: initial;
    font-weight: normal;
    text-align: right;
    display: block;
}
.c-product_ec .product__btn:hover {
    border: initial !important;
    opacity: initial !important;
}
.c-product_ec .product__name{
    padding-left: 0;
    padding-bottom: 10px;
    text-align: var(--name-align);
}
.c-product_ec .product__name::before{
    display: none;
}
.c-product_ec .product__name span{
    font-size: 0.9em;
}
.c-product_ec .product__text{
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.c-product_ec .product__text.is-open {
    display: block;
    -webkit-line-clamp: initial;
    -webkit-box-orient: initial;
    overflow: visible;
}
.c-product_ec .product__text img{
    position: absolute;
    top: 5%;
    left: 8%;
    width: 120px;
    height: 40px;
    object-fit: contain;
    object-position: left top;
}
.c-product_ec .product__price {
    margin-bottom: -5px;
}
.price_value.is-special{
    text-decoration: line-through;
}
.product__special_price{
    margin-top: 4px;
    font-size:18px;
    color:#ca0000;
    font-weight:bold;
}
.product__special_price span{
    font-size:14px;
}
.c-product_ec .product__notes.product__notes_size {
    margin-top: 5px !important;
}
.product__brand{
    max-height: 40px;
    margin-bottom: 5px;
}
.product__brand img{
    max-height: 40px;
    object-fit: contain;
}
.i_notice{
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 4.5% 2.5%;
    text-align: right;
    font-size: 12px;
}
.c-product_ec .product__item.col1_pc {
    align-items: flex-end;
}
.c-product_ec .product__item.col1_pc .product__name a{
    font-size: 20px;
}
.c-product_ec .product__item.col1_pc .price_value{
    font-size: 20px;
    text-align: right;
}
.c-product_ec .product__item.col1_pc .price__notes{
    font-size: 18px;
}
.c-product_ec .product__item.col1_pc .price__text{
    font-size: 16px;
}
@media only screen and (max-width: 750px) {
    .c-product_ec .product__item {
        width: 44%;
        border-right: none !important;
    }
    .c-product_ec .product__list {
        padding: 5% 0% 8%;
    }
    .component:not(.localnav-lg):not(.benefits) [class*='col'] {
       margin: 20px 10px;
       padding: 10px 20px;
    }
    .c-product_ec .product__btn{
        font-size: 12px;
        padding: 5px 10px;
    }
    .mt40 {
        margin-top: 0 !important;
    }
    .c-product_ec .product__text img{
        width: 80px;
        height: 30px;
        object-fit: contain;
    }
    .c-product_ec .product__item .product__name {
        font-size: 13px;
    }
    .i_notice{
        padding: 0 4.5% 8%;
    }
}
@media only screen and (min-width: 751px) {
    .c-product_ec .product__item {
        width: 23.4%;
        min-width: 240px;
        background: #fff;
    }
    .c-product_ec .product__item.col2_pc {
        width: 47.5%;
    }
    .c-product_ec .product__item.col3_pc {
        width: 31.7%;
    }
    .c-product_ec .product__item:not(:nth-child(4n)){
        margin-right: 1%;
        margin-left: 1%;
    }
    .c-product_ec .product__item.col1_pc .product__content {
        padding: 3% 2%;
    }
    .c-product_ec .product__list {
        justify-content: center;
    }
    .c-product_ec .product__btn:hover {
        color: initial !important;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px){
  .c-product_ec .product__item{
          width: 30%;
          min-width: 220px;
  }
}
.slick-slider .slick-track {
    display: flex;
}
.slick-slider .slick-list {
    display: flex;
}
.slick-prev{
    left: 5px !important;
    z-index: 10;
}
.slick-next{
    right: 5px !important;
    z-index: 10;
}
.slick-prev:before, .slick-next:before {
    color: #666;
}
/* ================================
   店舗紹介
================================ */
.info_wrap{
    width: 100%;
    padding: 7% 3%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info_container{
    width: 100%;
    max-width: 1420px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.info_container .info_l{
    width: 40%;
    padding: 0 3% 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.info_container .info_l h3{
    font-family: 'Cormorant', serif;
    font-size: 60px;
    font-weight: bold;
    color: var(--shop-text-color);
}
.info_container .info_l p{
    padding: 1% 0;
    font-size: 16px;
    text-align: left;
    color: var(--shop-text-color);
}
.info_container .info_l .shop_name{
    font-size: 26px;
    font-weight: bold;
    color: var(--shop-text-color);
}
.info_container .info_l .access{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.info_container .info_l .access p{
    font-size: 14px;
    color: var(--shop-text-color);
}
.info_container .info_l .disc{
    width: 100%;
    padding: 1% 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.info_container .info_l .disc p{
    font-size: 18px;
    line-height: 1.8;
    color: var(--shop-text-color);
}
.info_container .info_l .disc p span{
    font-weight: bold;
}
.info_container .info_l .info_btn{
    position: relative;
    width: 100%;
    padding: 3% 0;
    display: flex;
    justify-content: flex-start;
}
.info_container .info_l .info_btn a{
    padding:1% 3%;
    background: var(--shop-btn-bg);
    color: var(--shop-btn-color);
    transition:.3s;
}
.info_container .info_l .info_btn a:hover{
    background: var(--shop-btn-color);
    color: var(--shop-btn-bg);
}
.info_container .info_r{
    width: 50%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.info_container .info_r iframe{
    width: stretch !important;
    border-radius: 20px;     
}
@media only screen and (max-width: 599px) {
    .info_wrap {
        padding: 15% 0;
    }
    .info_container {
        flex-direction: column;
        overflow: hidden;
    }
    .info_container .info_l {
        width: 90%;
        padding: 0;
        margin: 0 auto;
    }
    .info_container .info_l h3 {
        font-size: 36px;
        line-height: 1;
    }
    .info_container .info_l .shop_name {
        font-size: 20px;
    }
    .info_container .info_l p {
        font-size: 14px;
    }
    .info_container .info_l .access p:first-of-type {
        width: 100%;
    }
    .info_container .info_l .access p:last-of-type {
        width: 100%;
    }
    .info_container .info_r {
        width: 90%;
        height: 300px;
        margin: 5% 0 0;
    }
    .info_container .info_r iframe{
        width: 340px !important;
        margin: 0 auto;
        border-radius: 20px;     
    }
}
@media only screen and (min-width: 750px) and (max-width: 1024px) {
    .info_wrap {
        padding: 15% 0;
    }
    .info_container {
        flex-direction: column;
    }
    .info_container .info_l {
        width: 90%;
        padding: 0;
        margin: 0 auto;
    }
    .info_container .info_l h3 {
        font-size: 36px;
        line-height: 1;
    }
    .info_container .info_l .shop_name {
        font-size: 20px;
    }
    .info_container .info_l p {
        font-size: 14px;
    }
    .info_container .info_l .access p:first-of-type {
        width: 20%;
    }
    .info_container .info_l .access p:last-of-type {
        width: 80%;
    }
    .info_container .info_r {
        width: 90%;
        height: 300px;
        margin: 5% 0 0;
    }
}
/* ================================
   キャッチコピー
================================ */
.loop {
    padding-bottom: 0px;
    overflow: hidden;
}
.loop__box {
    display: flex;
    width: 100vw;
}
.loop__box img {
    min-width: 100vw;
}
.loop__box img:first-child {
    animation: loop var(--catch-speed) linear infinite;
    animation-delay: calc(var(--catch-speed) / -2);
}

.loop__box img:last-child {
    animation: loop2 var(--catch-speed) linear infinite;
}
@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}
@media only screen and (max-width:599px) {
    .loop__box {
        display: flex;
        width: 300vw;
        /*height: 70vh;*/
    }
}
.catch_container{
    position: relative;
    width: 100%;
    height: var(--catch-height);
    padding: 0;
}
.catch_wrap.show > img,
.catch_wrap.show .viewContents_right{
    transform: none;
    opacity: 1;
}
.catch_wrap{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    filter: brightness(var(--catch-brightness));
}
.catch_wrap::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fff;
}
.catch_wrap > img{
    width: 100%;
    height: 100%;
    max-height: var(--catch-height);
    object-fit: cover;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    transition: 1s;
}
.viewContents{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.view_txt {
    opacity: 0;
    visibility: hidden;
    transition: 1.4s;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 95%;
    height: 100%;
}
.view_txt.show {
    opacity: 1;
    visibility: visible;
}
.view_txt h3{
    line-height: 1.5;
    text-align: center;
    color: var(--catch-title-color);
    font-size: var(--catch-title-size);
    font-family: var(--catch-title-font-family);
    font-weight: var(--catch-title-weight);
}
.view_txt a{
    margin-top: 1em;
    padding: 0.8em 2em;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
    color: #fff;
    background: linear-gradient(to right, #874e48, #551711 50%, #fff 50%, #fff);
    background-size: 200% 100%; 
    transition: background-position 0.5s ease, color 0.5s ease;
    background-position: left;
    border-radius: 30px;
}
.view_txt a:hover{
    background-position: -100% 0; 
    color: #551711;
    transition: background-position 0.5s ease, color 0.5s ease;
}
@media only screen and (max-width:599px) {
    .catch_container{
        height: var(--catch-mobile-height);
    }
    .catch_wrap{
        height: var(--catch-mobile-height);
    }
    .viewContents{
        position: absolute;
        width: 100%;
        height: 100%;
        top: initial;
        left: 0;
        bottom: 1em;
    }
    .view_txt {
        position: initial;
        width: 100%;
        height: 100%;
        margin: 2em 0 2em;
        left: auto;
        box-shadow: initial;
        background-color: initial;
    }
    .view_txt h3{
        width: 100%;
        padding-top: 1em;
        font-size: var(--catch-title-size-sp);
    }
}
/* ================================
   コンバージョンエリア
================================ */
.to_index{
    position: relative;
    width: 100%;
    background: var(--cta-background);
    transition: 2s;
}
.to_index::before{
    content: "";
    position: absolute;
    top: 0;
    left: -10vw;
    width: 0;
    height: 100%;
    background: var(--cta-before-background);
    z-index: 0;
    transition: 1s;
    /*filter: brightness(0.8) hue-rotate(350deg);*/
}
.to_index.show::before{
    content: "";
    position: absolute;
    width: 100vw;
    left: 0;
}
.to_index ul{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 4em 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
    color: #fff;
}
.to_index li{
    z-index: 2;
}
.to_index li:first-child{
    width: 50%;
    padding: 1em;
}
.to_index li:last-child{
    position: relative;
    width: 50%;
    margin: 2%;
    padding: 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.to_index li:last-child h2{
    text-align: center;
    line-height: 1.7;
    opacity: 0;
    transform: translateY(50px);
    transition: 2s;
    transition-delay: 1.5s;
    color: var(--cta-title-color);
    font-size: var(--cta-title-size);
    font-family: var(--cta-title-font-family);
    font-weight: var(--cta-title-weight);
}
.to_index li:last-child p{
    padding: 2% 0 3%;
    text-align: left;
    opacity: 0;
    transform: translateY(50px);
    transition: 2s;
    transition-delay: 1.5s;
    color: var(--cta-text-color);
    font-size: var(--cta-text-size);
}
.to_index li:last-child p span{
    display: inline-block;
}
.to_index li:last-child a{
    position: relative;
    height: 70px;
    width: 260px;
    margin: 20px 0 0;
    border-radius: 20px;
    display: inline-block;
    line-height: 3.8;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    background: #ca0000;
    color: #fff;
    overflow: hidden;
    opacity: 0 !important;
    transition: 2s;
    transition-delay: 1.5s;
    transform: translateY(50px);
}
.to_index li:last-child a::before{
    position: absolute;
    content: '';
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-45deg);
    animation: nyainy-btn 3.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite;
}
.to_index.show li:last-child h2,
.to_index.show li:last-child p,
.to_index.show li:last-child a{
    opacity: 1 !important;
    transform: none;
}
.to_index li:last-child .top_line{
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background: #fff;
    transition: 2s;
    transition-delay: 1.5s;
}
.to_index.show li:last-child .top_line{
    width: 100%;
}
.to_index li:last-child .bottom_line{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0%;
    height: 1px;
    background: #fff;
    transition: 2s;
    transition-delay: 1.5s;
}
.to_index.show li:last-child .bottom_line{
    width: 100%;
}
.to_index li:last-child .top_line,
.to_index li:last-child .bottom_line{
    background: var(--cta-line-color);
}
@media only screen and (max-width:599px) {
    .to_index {
        margin: -1.5em 0 0 0;
    }
    .to_index ul{
        flex-direction: column;
        padding: 2em 0;
    }
    .to_index li:first-child{
        width: 90%;
        margin: 0 auto;
    }
    .to_index li:first-child img{
        width: 100%;
        height: 180px;
        object-fit: cover;
    }
    .to_index li:last-child{
        width: 90%;
        margin: 1em auto;
        align-items: center;
    }
    .to_index li:last-child h2{
        padding: .5em 0 0;
        text-align: center;
        font-size: var(--cta-title-size-sp);
    }
    .to_index li:last-child p{
        padding: 1.5em 0 2em;
        font-size: var(--cta-text-size-sp);
    }
    .to_index li:last-child a{
        width: 80%;
        margin-top: initial;
        margin: 0 auto 1em;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px){
    .to_index ul{
        flex-direction: column;
        align-items: center;
    }
    .to_index li:first-child {
        width: 70%;
    }
    .to_index li:last-child p {
    padding: 1em 0 1em;
    }
    .to_index li:first-child img{
        width: 100%;
        height: 260px;
        object-fit: cover;
    }
    .to_index li:last-child {
        width: 70%;
    }
    .to_index li:last-child a {
    height: 70px;
    line-height: 3.5;
    }
}
/* ================================
   コーディネートサービス
================================ */
.menu_container{ 
    position: relative;
    width: 100%;
    margin: 0em auto 0;
    padding: 5% 3% 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    background: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/02/05171330/bg_curtain.webp);
}
.menu_container h2{
    position: relative;
    width: 100%;
    max-width: 1380px;
    padding: 100px 3%;
    text-align: right;
    font-size: 72px;
    margin: -32px;
    font-weight: 100;
    color: #b5a00b;
    opacity: 0;
    transition: 2s;
}
.menu_container h2.show{
    opacity: 1;
}
.menu_container h2::after{
    position: absolute;
    content: "コーディネート サービス";
    top: 80px;
    right: 3.3%;
    font-size: 26px;
    font-weight: 500;
}
.menu_container ul{
    position: relative;
    width: 100%;
    max-width: 1380px;
    padding: 0 3%;
    padding-bottom: 10em;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    opacity: 0;
    /*transform: translateX(-20px);*/
    transition: 2s;
}
.menu_container ul.show{
    transform: none;
    opacity: 1;
}
.menu_container ul:nth-of-type(2n){
    padding: 0 3% 10em;
}
.menu_container ul li{
    width: 40%;
    z-index: 2;
    color: #4c551b;
}
.menu_container ul li:last-child{
    width: 60%;
    padding: 0 0 0 7%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.menu_container .reverse li:last-child{
    padding: 0 7% 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.menu_container ul li img{
    width: 100%;
}
.menu_container ul li:last-child > img{
    width: 100%;
    opacity: 0 !important;
    transform: translateY(10px);
    transition: 2s;
}
.menu_container ul.show li:last-child > img.show{
    transform: none;
    opacity: 1 !important;
}
.menu_container ul li h3{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300 !important;
    font-style: normal;
    font-size: 2.5em !important;
    text-align: right;
    line-height: 1.7;
}
.menu_container ul li p{
    width: 100%;
    padding: 2em 0 2em;
    font-size: 16px !important;
    line-height: 1.8;
    text-align: left;
}
.menu_container ul li a{
    width: 42%;
    margin-top: 1em;
    padding: 5px 20px;
    font-family: "Urbanist", sans-serif;
    letter-spacing: 2px;
    color: #fff;
    text-align: center;
    font-size: 16px !important;
    background: linear-gradient(to right, #c9cdb0, #737f2c 50%, #fff 50%, #fff);
    background-size: 200% 100%; 
    transition: background-position 0.5s ease, color 0.5s ease;
    background-position: 0 0;
    border-radius: 30px;
}
.menu_container ul li a:hover{
    background-position: -100% 0; 
    color: #836b13;
    transition: background-position 0.5s ease, color 0.5s ease;
}
.menu_container li .Bname_wrap{
    width: 100%;
    padding: 5% 0 1%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.menu_container li .Bname_wrap h3{
    font-size: 16px !important;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300 !important;
    font-style: normal;
    background: #b5a00b;
    color: #fff;
    padding: 3px 10px;
}
.menu_container li .Bname_wrap h3 span{
    font-size: 12px !important;
}
.menu_container li .Bname_wrap img{
    max-width: 25px;
    margin-left: 10px;
}
.menu_container li .notice_area{
    position: relative;
    width: 100%;
    min-height: 220px;
    padding: 1.5em 1em;
    background: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/05/14102106/bg_dark.webp);
    background-size: contain;
    border-radius: 15px;
    overflow: hidden;
}
.menu_container li .notice_area h4{
    position: relative;
    width: 100%;
    z-index: 10;
    text-align: center;
}
.menu_container li .notice_area p{
    position: relative;
    width: 80%;
    font-size: 14px !important;
    padding: 1em 2% 0;
    z-index: 10;
}
.menu_container li .notice_area .textcenter{
    left: 50%;
    transform: translateX(-50%);
}
.menu_container li .notice_area img{
    position: absolute;
    max-width: 260px;
    max-height: 220px;
    object-fit: cover;
    bottom: 5%;
    right: -2%;
    z-index: 0;
    opacity: 0.3;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 70%);
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 75%);
}
.menu_container li .notice_area .m_logo{
    position: relative;
    max-width: 100%;
    bottom: initial;
    right: initial;
    padding: 2%;
    opacity: 1;
    -webkit-mask-image: initial;
    mask-image: initial;
}

.menu_container .c_detail{
    position: relative;
    width: 100%;
    max-width: 1380px;
    margin-top: -2em;
    padding: 0 3%;
    padding-bottom: 10em;
    display: flex;
    justify-content: center;
    align-items: stretch;
    opacity: 0;
    transform: translateY(20px);
    transition: 2s;
}
.menu_container .c_detail.show{
    opacity: 1;
    transform: translateY(-30px);
}
.menu_container .c_detail li{
    position: relative;
    width: 25%;
    margin: 1%;
    background: rgba(255, 255, 255, .7);
    color: #222;
    border: 1px solid #b5a00b;
}
.menu_container .c_detail li:last-child{
    width: 25%;
    margin: 1%;
    padding: initial;
    align-items: center;
    justify-content: flex-start;
}
.menu_container .c_detail li img,
.menu_container .c_detail li:last-child img{
    width: 100%;
    transform: translateY(0);
    opacity: 1 !important;
}
.menu_container .c_detail li h4{
    position: relative;
    width: 100%;
    padding: 2em 1em 0;
    font-size: 19px !important;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400 !important;
    font-style: normal;
}
.menu_container .c_detail li p{
    font-size: 14px !important;
    padding: 1em 1.5em 1.5em;
}
.menu_container .c_detail li .c_obi{
    position: absolute;
    top: -15%;
    left: 0;
    padding: 7px 25px 7px 5px;
    border: 1px solid #b5a00b;
    border-left: none;
    border-radius: 0px 15px 15px 0;
    font-size: 14px !important;
    font-weight: bold;
    color: #fff;
    background: #b5a00b;
}
.menu_container .col2 li{
    width: 50%;
    display: flex;
    border: 1px solid #b5a00b;
}
.menu_container .col2 li:last-child{
    width: 50%;
    display: flex;
    flex-direction: initial;
}
.menu_container .col2 li > div{
    padding: 2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.menu_container .col2 li img,
.menu_container .col2 li:last-child img{
    width: 57%;
    object-fit: cover;
}
.menu_container .col2 li h4{
    padding: 2em 1em 0;
}
.menu_container .col2 li p{
    font-size: 14px !important;
}
.menu_container .col2 li .c_obi{
    left: 0;
    top: 61%;
}
.menu_container .forexample{
    width: 100%;
    max-width: 1380px;
    padding: 0 3%;
    opacity: 0;
    transform: translateY(-20px);
    transition: 1s;
}
.menu_container .forexample.show{
    opacity: 1;
    transform: translateY(-80px);
}
.menu_container .forexample p{
    position: relative;
    color: #b5a00b;
    font-size: 22px;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400 !important;
    font-style: normal;
}
.menu_container .forexample p::before{
    content: "";
    position: absolute;
    width: 25%;
    height: 1px;
    top: 50%;
    left: 3%;
    background: #b5a00b;
}
.menu_container .forexample p::after{
    content: "";
    position: absolute;
    width: 25%;
    height: 1px;
    top: 50%;
    right: 3%;
    background: #b5a00b;
}
.img-frame{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 500px;
    overflow: hidden;
    margin: 0 auto;
}
.l_frame{
    min-height: 600px;
}
.img-01, .img-02, .img-03,.img-04, .img-05, .img-06,.img-07, .img-08, .img-09, .img-10, .img-11, .img-12{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: scale(1); 
}
.img-frame > p{
    position: absolute;
    padding: 1em 0 !important;
    bottom: 16%;
    left: 2%;
    font-weight: normal;
    letter-spacing: 0.5px;
    color: #4c551b;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
.img-frame > p::after{
    position: absolute;
    content: "";
    width: 1px;
    height: 75px;
    top: 180px;
    left: 50%;
    background: #4c551b;
}
/*-------------- アドバイザー画像 ----------------*/
.img-01{
    background-image: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/04/24134923/image01.webp);
    animation: slide-animation 12s infinite;
}
.img-02{
    background-image: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/04/24134934/image02.webp);
    animation: slide-animation 12s infinite 4s;
}
.img-03{
    background-image: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/04/24134944/image03.webp);
    animation: slide-animation 12s infinite 8s;
}
/*-------------- スリープアドバイザー画像 ----------------*/
.img-04{
    background-image: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/04/24153955/image04.webp);
    animation: slide-animation 12s infinite;
}
.img-05{
    background-image: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/08/12135120/adviser01.jpg);
    animation: slide-animation 12s infinite 4s;
}
.img-06{
    background-image: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/04/24154017/image06.webp);
    animation: slide-animation 12s infinite 8s;
}
/*-------------- カーテンアドバイザー画像 ----------------*/
.img-07{
    background-image: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/04/25111610/image07.webp);
    animation: slide-animation 12s infinite;
}
.img-08{
    background-image: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/04/25111621/image08.webp);
    animation: slide-animation 12s infinite 4s;
}
.img-09{
    background-image: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/04/25111630/image09.webp);
    animation: slide-animation 12s infinite 8s;
}
/*-------------- 照明アドバイザー画像 ----------------*/
.img-10{
    background-image: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/04/25123642/image10.webp);
    animation: slide-animation 12s infinite;
}
.img-11{
    background-image: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/04/25123653/image11.webp);
    animation: slide-animation 12s infinite 4s;
}
.img-12{
    background-image: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/04/25123702/image12.webp);
    animation: slide-animation 12s infinite 8s;
}
@keyframes slide-animation {
    0% { opacity: 0; transform: scale(1); }
    25% { opacity: 1;}
    33.33% { opacity: 1;}
    50% { opacity: 0;}
    100% { opacity: 0; transform: scale(1.1); }
}
@media screen and (min-width: 600px) and (max-width: 1024px){
    .menu_container h2{
        padding: 100px 0 0px;
        font-size: 50px;
        line-height:2.5;
    }
    .menu_container ul {
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 4em 0 2em;
    }
    .menu_container ul:nth-of-type(2n){
        padding: 4em 0 2em;
    }
    .menu_container ul li {
        width: 100%;
        margin: 0 auto;
    }
    .menu_container ul li:last-child {
        width: 100%;
        padding: 0 3%;
    }
    .menu_container ul li h3 {
        margin: 0 auto;
        padding-top: .5em;
        font-size: 28px !important;
        line-height: 1.5;
        font-weight: 400;
    }
    .menu_container .c_detail{
        flex-direction: initial;
        flex-wrap: wrap;
    }
    .menu_container .c_detail li {
        width: 45%;
        flex-direction: column;
    }
    .menu_container .c_detail li:last-child {
        width: 45%;
        flex-direction: column;
    }
    .menu_container .c_detail li img{
        width: 100%;
    }
    .menu_container .c_detail li:last-child img{
        width: 100%;
    }
    .menu_container .img-frame {
        width: 80%;
        min-height: 480px;
    }
    .menu_container li .Bname_wrap {
        padding: 8% 0 1%;
        justify-content: center;
    }
    .menu_container .reverse li:last-child{
        padding: 0 3%;
    }
    .menu_container .forexample {
        padding: 8em 0 0;
    }
    .menu_container .col2 li .c_obi {
        top: 52%;
    }
    .menu_container .forexample p::before{
        display: none;
    }
    .menu_container .forexample p::after{
        display: none;
    }
    .img-frame > p{
        writing-mode: initial;
        bottom: 0;
        left: 5%;
    }
    .img-frame > p::after {
        top: initial;
        bottom: 50%;
        left: 110%;
        width: 120px;
        height: 1px;
    }
}
@media only screen and (max-width:599px) {
    .menu_container {
        margin: 0 auto;
    }
    .menu_container h2{
        font-size: 38px;
        padding: 100px 0 50px;
        text-align: center;
        line-height: 1.2;
    }
    .menu_container h2::after {
        width: 100%;
        top: 74px;
        right: initial;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        font-weight: bold;
    }
    .menu_container .forexample p{
        padding-top: 2em;
        font-size: 20px;
    }
    .menu_container .forexample p::before{
        display: none;
    }
    .menu_container .forexample p::after{
        display: none;
    }
    .menu_container ul {
        justify-content: center;
        align-items: center;
        flex-direction: column !important;
        padding: 2em 0 8em;
    }
    .menu_container ul:nth-of-type(2n){
        padding: 1em 0 5em;
    }
    .menu_container ul li {
        width: 93%;
        margin: 0 auto;
    }
    .menu_container ul li:last-child {
        width: 100%;
        padding: 0 3%;
    }
    .menu_container ul li h3 {
        margin: 0 auto;
        padding-top: 8px;
        font-size: 24px !important;
        line-height: 1.5;
        font-weight: 400;
    }
    .menu_container ul li p {
        padding: 1em 0 2em;
    }
    .menu_container .img-frame {
        min-height: 280px;
    }
    .menu_container li .Bname_wrap {
        padding: 8% 0 1%;
    }
    .menu_container .reverse li:last-child{
        padding: 0 3%;
    }
    .img-frame > p{
        writing-mode: initial;
        bottom: 0;
        left: 5%;
    }
    .img-frame > p::after {
        top: initial;
        bottom: 50%;
        left: 110%;
        width: 120px;
        height: 1px;
    }
    .menu_container .c_detail {
        align-items: center;
    }
    .menu_container .c_detail li {
        width: 82%;
        margin: 0 0 10%;
        flex-direction: column;
    }
    .menu_container .c_detail li:last-child {
        width: 82%;
        margin: 0 0 10%;
        flex-direction: column;
    }
    .menu_container .col2 li img{
        width: 100%;
    }
    .menu_container .col2 li:last-of-type img{
        width: 100%;
    }
    .menu_container .col2 li .c_obi {
        top: 52%;
    }
    .menu_container li .notice_area .textcenter{
        width: 95%;
        padding: 1em 2%;
    }
    .menu_container .forexample {
        padding: 0;
    }
}
.reverse{
    flex-direction: row-reverse !important;
}
/* ================================
   サービス
================================ */
.background_shop {
    position: relative;
    background-size: contain;
    background-attachment: fixed;
    color: #222;
    overflow: hidden;
    background: url(https://idc-otsuka.s3.ap-northeast-1.amazonaws.com/wp/wp-content/uploads/2025/02/05171330/bg_curtain.webp);
    z-index: 190;
}
.text_container{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 300;
}
.leadtext_container{
    width: 100%;
    height: 75vh;
}
.text_container .text_wrap{
    position: relative;
    padding: 10em 8em;
    text-align: center;
    height: 52vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
} 
.text_container .text_wrap.show > h3,
.text_container .text_wrap.show > p,
.text_container .text_wrap.show .small_tit,
.text_container .text_wrap.show .small_tit_line{
    transform: none;
    opacity: 1;
}
.text_container .text_wrap > h3{
    position: relative;
    font-size: 3em;
    line-height: 1.4;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300 !important;
    font-style: normal;
    opacity: 0;
    transform: translateY(20px);
    transition: 1.5s;
    transition-delay: 1.5s;
    z-index: 100;
}
.text_container .text_wrap > p{
    max-width: 820px;
    margin: 0 auto;
    margin-top: 2em;
    font-size: 18px;
    line-height: 1.8;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: 1.5s;
    transition-delay: 1.5s;
    z-index: 100;
}
.text_container .small_tit{
    margin-bottom: 3em;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .18em;
    line-height: 16px;
    text-transform: uppercase;
    opacity: 0;
    transition: 1s;
}
.text_container .small_tit > p{
    text-align: center;
}
.text_container .small_tit_line{
    width: 30px;
    height: 1px;
    margin: -2em auto 2em;
    background-color: #dcdcdc;
    opacity: 0;
    transition: 1s;
    display: none;
}
.text_container .text_wrap .bg_object{
    position: absolute;
    top: -12%;
    left: 0;
    -webkit-mask-image: radial-gradient(ellipse at center, 
        rgba(0, 0, 0, 1) 20%, 
        rgba(0, 0, 0, 0) 70%);
    mask-image: radial-gradient(ellipse at center, 
        rgba(0, 0, 0, 1) 20%, 
        rgba(0, 0, 0, 0) 70%);
    opacity: 1;
    transition: 3s;
    transition-delay: 2.5s;
}
.text_container .text_wrap.show .bg_object.show{
    transform: none;
    opacity: 0.15;
}
.s_service{
    padding: 5% 0 0 !important;
}
.service_container{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 100px;
}
.service_container > ul{
    position: relative;
    margin: 1em 0;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    align-items: stretch;
    z-index: 350;
}
.service_container > ul li{
    position: relative;
    width: 370px;
    padding: 1%;
    margin: 1.7%;
    background: #fff;
}
.service_container > ul li img{
    width: 100%;
}
.service_container > ul li .shop_wrap{
    padding: 0 1em 1.5em;
}
.service_container > ul li h3{
    padding-top: 1em;
    font-size: 20px;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300 !important;
    font-style: normal;
}
.service_container > ul li h4{
    width: 100%;
    margin-top: 1em;
    padding: 0.5em;
    font-size: 14px;
    font-weight: normal;
    background: #eee;
    line-height: 1;
}
.service_container > ul li p{
    padding: 1em 0;
    font-size: 14px;
    text-align: left;
}
.secondary_container .service_line{
    position: relative;
    width: 100%;
    margin-top: 4em;
    font-family: "Urbanist", sans-serif;
}
.secondary_container .service_line::before{
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background-color: #222;
    position: absolute;
    top: 50%;
    left: 5%;
    opacity: 0;
    transition: 2s;
}
.secondary_container .service_line.show::before{
    width: 34%;
    opacity: 1;
}
.secondary_container .service_line::after{
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background-color: #222;
    position: absolute;
    top: 50%;
    right: 5%;
    opacity: 0;
    transition: 2s;
}
.secondary_container .service_line.show::after{
    width: 34%;
    opacity: 1;
}
@media only screen and (max-width:599px) {
    .text_container .text_wrap {
        padding: 15% 5% 10%;
        height: initial;
    }
    .text_container .text_wrap > h3{
        font-size: 24px;
        transition-delay: 1s;
    }
    .text_container .text_wrap > p{
        max-width: 95%;
        font-size: 14px;
        text-align: left;
        transition-delay: 1s;
    }
    .text_container .text_wrap .bg_object {
        width: 200%;
        height: auto;
        top: 5%;
        left: 50%;
        transform: translateX(-50%) !important;
        overflow: hidden;
    }
    .secondary_container .service_line.show::before{
        width: 27%;
    }
    .secondary_container .service_line.show::after{
        width: 27%;
    }
    .service_container {
        padding-bottom: 0;
    }
    .service_container > ul{
        padding: 0 5%;
    }
    .service_container > ul li {
        width: 100%;
        margin: 0 0 3em;
        padding: 0;
    }
    .service_container > ul li .shop_wrap {
        padding: 0 2em 1.5em;
    }
    .service_container > ul li img {
        width: 100%;
        max-height: 200px;
        object-fit: cover;
    }
    .service_container > ul li h4{
        width: 100%;
        margin: 0 auto;
        margin-top: 1em;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px){
    .service_container > ul li {
        width: 43%;
    }
    .text_container .text_wrap {
        height: 25vh;
        padding: 12em 4em 10em;
    }
    .text_container .text_wrap > h3{
        font-size: 2.5em;
    }
}
/* ================================
   余白
================================ */
.component.event_space{
    width:100%;
    height:100px;
}