@charset "utf-8";
/* CSS Document */
/* MPLUSRounded1c */
@font-face {
    font-family: "MPLUSRounded1c"; font-style: normal; font-weight: normal;
    src: url("../font/MPLUSRounded1c-Medium.ttf") format("opentype");
  }
  @font-face {
    font-family: "MPLUSRounded1c"; font-style: normal; font-weight: bold;
    src: url("../font/MPLUSRounded1c-ExtraBold.ttf") format("opentype");
  }
  @font-face {
    font-family: "MPLUSRounded1c"; font-style: normal; font-weight: 900;
    src: url("../font/MPLUSRounded1c-Black.ttf") format("opentype");
  }

/*-----------------------------
 common
-------------------------------*/
body{
    font-family: var(--font);
    color: var(--normal);
}
.wrap-main-sp{
	max-width: 750px;
	margin: 0 auto;
}
.wrap-main-pc{
	max-width: 1440px;
	margin: 0 auto;
}
.wrap-main-pc img, .wrap-main-sp img, .onetime-popup-main iframe, p, .modal-content iframe{
    display: block;
    margin: 0 auto;
}
.overlaid{
	position: relative;
	z-index: 1;
}
.abs{
	position: absolute;
}
body.open-popup, body.open-modal {
    overflow: hidden;
}
.bg-onetime-popup, .modal-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.open-popup .bg-onetime-popup, .open-modal .modal-overlay{
    display: block;
    opacity: 1;
    visibility: visible;
}
.onetime-popup, .modal-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 90%;
    min-width: calc(700 / 750 * 100vw);
}
.onetime-popup-main, .modal-content {
    position: relative;
    margin: 0px;
}
.onetime-popup-main-close {
    position: absolute;
    top: -20%;
    right: calc(30 / 750 * 100vw);
    width: calc(50 / 750 * 100vw);
    height: calc(50 / 750 * 100vw);
    transform: translateY(-50%);
    cursor: pointer;
    display: block;
}
.onetime-popup-main-close::before,
.onetime-popup-main-close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 2px;
    background-color: #fff;
    opacity: 0.8;
    content: "";
}
.onetime-popup-main-close::before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.onetime-popup-main-close::after {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.popup-movie{
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
}
.popup-movie iframe{
    width: 100%;
    height: 100%;
}
.notes{
    color: #f5ebdc;
    font-size: 2.1vw;
    line-height: 3.5vw;
    padding: calc(60 / 750 * 100vw) calc(45 / 750 * 100vw);
    background: url(../images/sp_img_11.png) center center / cover no-repeat fixed;;
}
.rmark{
    font-size: 1.8vw;
    vertical-align: super;
}
.btn-more{
    width: calc(543 / 750 * 100vw);
    padding: calc(20 / 750 * 100vw) calc(150 / 750 * 100vw);
    bottom: 26%;
    right: 14%;
    cursor: pointer;
}
.modal-close-x {
    position: absolute;
    top: -5%;
    right: calc(30 / 750 * 100vw);
    width: calc(35 / 750 * 100vw);
    height: calc(50 / 750 * 100vw);
    transform: translateY(-50%);
    cursor: pointer;
    display: block;
}
.modal-close-x::before,
.modal-close-x::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 2px;
    background-color: #f5ebdc;
    opacity: 0.8;
    content: "";
}
.modal-close-x::before {
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.modal-close-x::after {
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
#iframeContainer{
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    line-height: 0;
}
#iframeContainer iframe {width: 100%;
    width: 100%;
    height: 80vh;
    border: none;
    display: block;
}
/***** footer *****/
/** Root Setting **/
:root {
    --font: "MPLUSRounded1c", "Pretendard", sans-serif;
    --bg-base: #F5EBDC;
    --bg-light: #FFFCF8;
    --normal: #502314;
    --normal-rgb: 80, 35, 20;
    --primary: #D62300;
    --sub: #6F6F6F;
    --light: #89665B;
    --border: rgba(80, 35, 20, 0.1);
  }
  
  /** Tag Default */
  footer {font-family: var(--font); color: var(--normal); background-color: var(--bg-base);}
  footer {font-weight: bold; color: var(--normal); word-break: break-all;}
  a {display: inline-flex; align-items: center; justify-content: center; margin: 0; color: var(--normal); text-decoration: none; outline: none; cursor: pointer;}
  button {margin: 0; padding: 0; font: normal 1em var(--font); font-weight: bold; color: var(--normal); vertical-align: middle; background: 0; border: none; overflow: visible; cursor: pointer;}
  button:disabled {color: var(--disabled); background-color: rgba(var(--normal-rgb), 0.15); border: none; opacity: 1;}
  button:active {outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
  
  .footer {padding: 0; font-weight: bold; font-size: 12px; color: rgba(137, 102, 91, 0.7); background: var(--bg-light);}
  .footer a {font-weight: bold; color: rgba(137, 102, 91, 0.7);}
  .footer a:hover {color: var(--normal);}
  .footer a.txt_line {color: rgba(var(--normal-rgb), 0.7); text-decoration: underline;}
  
  .footer_menu_list {padding: 20px 0; font-weight: bold; opacity: 0.7;}
  .footer_menu_list > ul > li {position: relative; border-bottom: 1px solid var(--bg-base);}
  .footer_menu_list button { text-align: left;}
  .footer_menu_list a {font-weight: bold;}
  .list_title {position: relative; display: flex; align-items: center; height: 53px; padding-left: 20px; color: #502314;}
  .list_title span {flex: 1; font-size: .75rem !important;}
  .list_title button {width: 50px; height: 100%; text-indent: -999rem;}
  .list_title button::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
  .btn_acc::after {content: ""; position: absolute; top: 50%; right: 20px; width: 12px; height: 12px; margin-top: -6px; background: url("../images/ico_darrow01.svg") no-repeat center center; transition: all .3s linear;}
  .accordion_open .btn_acc::after {transform: rotate(180deg);}
  .btn_move01 {background: none;}
  
  .list_contents {height: 0; padding: 0; border-top: 1px solid var(--bg-base); opacity: 0; overflow: hidden; transition: all .3s linear;}
  .list_contents button {width: 100%; padding: 10px 40px; color: var(--light);}
  .accordion_open .list_contents {height: auto; padding: 10px 0; opacity: 1;}
  
  .footer .container {position: relative; max-width: 1620px; margin: 0 auto; padding: 20px;}
  .footer .terms_menu {margin-bottom: 40px; white-space: nowrap;}
  .footer .terms_menu a {position: relative; display: block; margin-bottom: 16px;}
  .footer .terms_menu a::before {content: ""; position: absolute; left: 0; top: -5px; width: 100%; height: calc(100% + 10px);}
  .footer .terms_menu .btn_recruit {display: none;}
  
  
  .footer .cont {position: relative;}
  .logo {display: inline-block;  width: 100%; height: 12px; margin-bottom: 16px; text-indent: -999em; background: url("../images/bg_logo_b.svg") no-repeat left center; background-size: contain !important;}
  .logo a {display: block;}
  .footer .info {flex: 1; line-height: 1.1;}
  .footer .info p:not(:last-child) {margin-bottom: 4px;}
  .footer .info a {margin-left: 10px;}
  
  .footer .link_area {display: flex; flex-direction: row; align-items: center; margin-top: 20px;}
  .footer .link_area button {width: 24px; height: 24px;}
  .footer .sns {display: flex; align-items: center;}
  .footer .sns > * {margin-left: 16px;}
  .footer .sns > *:first-child {margin-left: 0;}
  .btn_sns_insta {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_instagram.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
  .btn_sns_facebook {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_facebook.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
  .btn_sns_x {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_x.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
  .btn_sns_youtube {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_youtube.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
  .btn_sns_tictok {width: 32px; height: 32px; text-indent: -999em; background: url("../images/ico_sns_tictok.svg") no-repeat center center; background-size: contain; border-radius: 30px;}
  
  @media screen and (min-width: 640px) {
    .footer_menu_list .list_title {padding: 0 10px 0 30px;}
    .footer_menu_list .list_title .btn_acc::after {right: 30px;}
    .footer .container {padding: 20px 30px;}
    .footer .terms_menu {display: flex; margin-right: -20px; justify-content: flex-end;}
    .footer .terms_menu a {margin: 0; padding: 0 20px;}
    .footer .cont {position: relative; padding-right: 250px;}
    .footer h1 {margin-bottom: 10px;}
    .footer .logo {margin: 0;}
    .footer .link_area {position: absolute; right: 0; top: 50%; margin: -12px 0 0;}
    .footer .sns button {margin-left: 20px;}
  }
  
  @media screen and (min-width: 1024px) {
    .footer .terms_menu {display: flex; flex-direction: row; margin-bottom: 20px; padding-left: 207px; white-space: nowrap; align-items: center;}
    .footer .terms_menu a {position: relative; display: block; padding: 0 20px;}
    .footer .terms_menu a::before {content: ""; position: absolute; left: 0; top: -5px; width: 100%; height: calc(100% + 10px);}
  
  
    .footer_menu_list {display: none;}
    .footer .container {padding: 40px;}
    .footer .terms_menu {display: flex; flex-direction: row; margin-bottom: 20px; padding-left: 207px; white-space: nowrap;}
    .footer .terms_menu a {position: relative; display: flex; padding: 0 20px; align-items: center;}
    .footer .terms_menu a::before {display: none;}
    .footer .btn_recruit {display: flex; min-width: 95px; height: 34px; margin-left: auto; padding: 5px 38px 5px 12px; color: var(--normal); align-items: center; background: url("../images/ico_bt_link.svg") no-repeat right 12px center; background-color: rgba(var(--normal-rgb), 0.05); border-radius: 50px; opacity: 0.7;}
  
  
    .footer .cont {padding-right: 300px;}
    .footer h1 {margin-bottom: 20px;}
    .footer .logo {display: block; width: 200px; height: 24px;}
    .footer .info {line-height: 1.5;}
    .footer .info p:not(:last-child) {margin-bottom: 4px;}
    .footer .info a {margin-left: 10px;}
  
    .footer .link_area {top: auto; bottom: 0; margin: 0;}
    .footer .link_area button {width: 32px; height: 32px;}
    .footer .sns {display: flex; align-items: center;}
    .footer .sns button {margin-left: 30px;}
  }

@media screen and (min-width: 751px) {
    .pc { display: block !important; }
    .sp { display: none !important; }
    .wrap-main{
        margin: 0 auto;
        max-width: none;
    }
    .wrap-main img, .onetime-popup-main iframe, .wrap-main p, .modal-content iframe{
        display: block;
        margin: 0 auto;
        max-width: 750px;
    }
    .onetime-popup {
        top: 370px;
        min-width: 700px;
        width: auto;
    }
    .modal-wrap {
        top: 445px;
        min-width: 700px;
        width: auto;
    }
    .onetime-popup-main-close {
        right: 30px;
        width: 50px;
        height: 50px;
    }
    .modal-close-x {
        right: 30px;
        width: 35px;
        height: 50px;
    }
    .notes{
        padding: 20px 35px;
        font-size: 8.6px;
        background: url(../images/pc_img_10.png) center center / cover no-repeat fixed;;

    }
    .btn-more{
        width: calc(378 / 1280 * 100vw);
        padding: calc(15 / 1280 * 100vw) calc(90 / 1280 * 100vw);
        bottom: calc(87 / 1280 * 100vw);
        left: 50%;
        right: auto;
        transform: translateX(calc(-50%));
        cursor: pointer;
    }
    .notes{
        margin: 0 auto;
        padding: calc(80 / 1280 * 100vw) calc(235 / 1280 * 100vw);
        font-size: 1vw;
        line-height: 1.5vw;
    }
    .rmark{
        font-size: 0.8vw;
        vertical-align: super;
    }
}

@media screen and (min-width: 1281px) {
    .wrap-main-pc {
        margin: 0 0 !important;
        max-width: none;
        width: 100%;
    }
    .overlaid{
        width: 100%;
        overflow: hidden;
    }
    .overlaid img{
        width: 100%;
        height: auto;
    }
    /* .btn-more{
        width: 378px;
        padding: 15px 90px;
        bottom: 87px;
        left: 50%;
        right: auto;
        transform: translateX(calc(-50%));
        cursor: pointer;
    } */
    /* .notes{
        margin: 0 auto;
        max-width: 1280px;
        padding: 80px 235px;
        font-size: 12.5px;
        line-height: 21px;
    }
    .rmark{
        font-size: 10px;
        vertical-align: super;
    } */
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}