/* ==============================
  base
============================== */
@import url("https://fonts.googleapis.com/css?family=EB+Garamond:400,400i");
@import url("https://fonts.googleapis.com/css2?family=Julee&display=swap");
body{
    font-family: 'Zen Old Mincho', Osaka, arial, sans-serif;
    margin: 0;
}
img{
    width: 100%;
    vertical-align: bottom;
}
p {
    margin: 0;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;tab-size:2}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}



/*=== 9-1-2 丸が動いてスクロールを促す ====*/

.scrolldown2 {
    position: absolute;
    bottom: 38%;
    left: 50%;
}

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

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:30%;
  left:50%;
}
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:10px;
  bottom:10px;
    /*テキストの形状*/
  color: #333;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#333;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:2px;
  height: 50px;
  background:#333;
}

#left_wrap,
#right_wrap{
    display: none;
}

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

    #header,
    #header:before{
 
    }
    
}

p.store_select_intro_txt {
    position: absolute;
    top: 16%;
    text-align: right;
    right: 10px;
}
.store_select_intro {
    position: relative;
    margin-bottom: 10%;
}
.store_directry {
    padding: 10% 0;
    background: #f6f6f8;
}
.store_directry_intro {
    position: relative;
    margin-bottom: 10%;
}
p.store_directry_intro_txt {
    position: absolute;
    top: 14%;
    text-align: left;
    left: 10px;
}
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
    margin: 0 auto;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.movie-box {
    position: relative;
}
video.intro-movie {
    width: 95%;
    margin: 0 auto 4%;
}
.fixed-cv {
    position: fixed;
    bottom: 0px;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 10;
}
.fixed-cv a.cvbt {
    text-decoration: none;
    display: block;
    background: #202033;
    width: fit-content;
    padding: 12px 1em;
    color: #fff;
    font-weight: 600;
    margin: 0 auto;
    width: 80%;
    background: -moz-linear-gradient(top, #c7af60, #c29e43);
    background: -webkit-linear-gradient(top, #c7af60, #c29e43);
    background: linear-gradient(to bottom, #c7af60, #c29e43);
    text-shadow: 1px 1px 15px rgba(95, 76, 21, 0.4);
}
.is-hidden {
  visibility: hidden;
  opacity: 0;
}
/*スクロールダウン全体の場所*/
.scrolldown1 {
    position: absolute;
    right: 7%;
    bottom: 10%;
    height: 90px;
    z-index: 100;
}
/*Scrollテキストの描写*/
.scrolldown1 span {
    position: absolute;
    left: -7px;
    top: -38px;
    color: #eee;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    writing-mode: vertical-rl;
}

/* 線の描写 */
.scrolldown1::after{
    content: "";
    /*描画位置*/
    position: absolute;
    top: 0;
    /*線の形状*/
    width: 1px;
    height: 60px;
    background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 1.4s ease-in-out infinite;
    opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
    0%{
        height:0;
        top:0;
        opacity: 0;
    }
    30%{
        height:60px;
        opacity: 1;
    }
    100%{
        height:0;
        top:90px;
        opacity: 0;
    }
}
/* スクロールアニメーション */
.fadeIn{
  filter:blur(4px);
  opacity: 0;
  transform: scale(1) translate3d(0, 10px, 0);
  transition: all 1s ease-in-out ;
}

.left{
   transform: scale(1) translate3d(-50px, 0px, 0);
   transition: all 1s ease-in-out ;
}

.right{
    transform: scale(1) translate3d(50px, 0px, 0);
}

.on{
  filter:blur(0);
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
  transition: all 0.8s ease-in-out;
}
/*-- CSSここから --*/

a.cvbt {
    text-decoration: none;
    display: block;
    width: 80%;
    color: #fff;
    padding: 5%;
    margin: 0 auto 10px;
    background: -moz-linear-gradient(top, #c7af60, #c29e43);
    background: -webkit-linear-gradient(top, #c7af60, #c29e43);
    background: linear-gradient(to bottom, #c7af60, #c29e43);
      text-shadow: 1px 1px 15px rgba(95, 76, 21, 0.4);
    border-radius: 50px;
    text-align: center;
}
/*開閉用ボタン（ハンバーガーボタン）*/
.menu-btn {
    position: fixed;
    top: 10px;
    right: 3%;
    width: 40px;
    height:40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 102;
    background: rgba(184,170,139,0.8);
    -webkit-transition: all 3s ease-in-out;
    transition: all .3s ease-in-out;
}
.menu-btn-store {
    position: fixed;
    top: 10px;
    right: 15%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    background: rgba(184,170,139,0.8);
    -webkit-transition: all 3s ease-in-out;
    transition: all .3s ease-in-out;
}
.menu-btn-store img {
    width: 16px;
    padding: 1px;
    position: absolute;
    top: 5%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.menu-btn-line {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 2px;
width: 60%;
background: #fff;
-webkit-transition: all 3s ease-in-out;
transition: all .3s ease-in-out;
}
.menu-btn-line::before,
.menu-btn-line::after {
content: "";
height: 2px;
width: 100%;
background: #fff;
position: absolute;
left: 0;
-webkit-transition: inherit;
transition: inherit;
}
.menu-btn-line::before{
top: -7px;
}
.menu-btn-line::after{
top: 7px;
}

/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu {
-webkit-transition: all .5s;
transition: all .5s;
visibility: visible;
opacity: 1;
    z-index: 101;
}
.open .menu-btn {
    background: rgba(184,170,139,0.8);
}
.open .menu-btn-line{
background-color: transparent;
}
.open .menu-btn-line::before,
.open .menu-btn-line::after {
top: 0;
background: #fff
}
.open .menu-btn-line::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .menu-btn-line::after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/*開いたメニュー*/
.menu {
position: fixed;
/*display: flex;*/
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:#fff;
-webkit-transition: all .5s;
transition: all .5s;
visibility: hidden;
opacity: 0;
z-index: 100;
}
.menu_inner {
    padding: 5% 5%;
}
.menu ul {
/*    transform: translateY(10%);*/
    padding: 0;
    list-style-type: none;
    width: 100%;
    margin-bottom: 40px;
}
.menu li {
    width: 100%;
    height: 40px;
    line-height: 50px;
    text-align: left;
    font-size: 14px;
}
.menu li a {
        display: block;
    font-size: 18px;
    color: #000;
    text-decoration: none;
    -webkit-transition: all .2s;
    transition: all .2s;
    position: relative;
    display: inline-block;
    padding: 0 0 0 24px;
}
.menu li a:before {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 17px;
    height: 2px;
    background-color: #b79653;
    left: 0;
}
.menu li a:hover {
transform: translateX(5px);
-webkit-transition: all .2s;
transition: all .2s;
}
p.menu_logo {
    width: 150px;
    margin-bottom: 20px;
}
p.menu_logo_foot {
    width: 200px;
}

.tab-content, .sub-tab-content {
  display: none; /* 全てのタブ内容を初期状態で非表示にする */
  opacity: 0;
  transition: opacity 0.5s;
}

.tab-content.active, .sub-tab-content.active {
  display: block; /* アクティブなタブの内容のみ表示 */
  opacity: 1;
}
button.tab-button {
    width: 48%;
    text-align: center;
    border: solid 1px #7c5851;
    border-radius: 10px;
    padding: 5px 0;
    margin-bottom: 3%;
    color: #7c5851;
}
.tab-buttons button.tab-button.active {
    background: #7c5851;
    color: #fff;
}
.sub-tab-buttons {
    width: 80%;
    margin: 0 auto 2%;
    justify-content: space-between;
    display: flex;
}
.sub-tab-buttons .sub-tab-button.active {
  font-weight: bold;
}

.copyright {
    border-top: solid 1px #fff;
    padding-top: 1em;
    font-size: 12px;
    text-align: center;
    margin-bottom: 0;
}
/* 初期状態での透明度と遷移効果 */
.menu-btn-store, .menu-btn {
  transition: opacity 0.5s ease-in-out;
  opacity: 1; /* 初期状態では完全に表示 */
}

/* フェードアウト用のクラス */
.hide-on-scroll {
  opacity: 0 !important; /* 完全に透明 */
  pointer-events: none; /* クリック等のイベントを無効に */
}

footer {
    background-color: #393939;
    color: #fff;
    padding: 10% 0 2%;
}
p.foot_logo {
    width: 60%;
    margin: 0 auto 10%;
}
p.foot_txt {
    text-align: center;
    margin-bottom: 10%;
    font-size: 14px;
}
p.foot_link {
    text-align: center;
    margin-bottom: 10%;
    font-size: 13px;
}
p.foot_link a {
    text-decoration: none;
}
p.foot_caution {
    font-size: 13px;
    width: 80%;
    margin: 0 auto 5%;
}


/* モーダルのスタイル */
.modal {
    display: none; /* デフォルトは非表示 */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 背景を暗くする */
    overflow: hidden; /* モーダル全体がスクロールしないようにする */
}

/* モーダルコンテンツ */
.modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90%;
    max-width: 500px; /* モーダルの幅 */
    max-height: 70%; /* モーダルの高さを70%に制限 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.4s; /* アニメーション */
    overflow-y: auto; /* コンテンツ部分にスクロールを許可 */
}

/* 閉じるボタン */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
}

/* フェードインのアニメーション */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-content h2 {
    font-size: 22px;
    margin-bottom: 10%;
}
dl.stylist_day {
    margin-bottom: 5%;
}
dt.stylist_day_dt {
    font-size: 16px;
    border-bottom: 1px solid #000;
    margin-bottom: 3%;
}
/*-- CSSここから --*/

section#header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 2.5%;
}
h1.head_logo {
    width: 20%;
}
p.header_txt {
    position: absolute;
    bottom: 4%;
    text-align: center;
    line-height: 1.8em;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    font-size: 14px;
}
ul.head_cv {
    display: flex;
    justify-content: space-between;
    width: 60%;
}
p.tel_bt_fix {
    position: fixed;
    width: 140px;
    bottom: 9%;
    right: 8px;
    z-index: 2;
}
@media screen and (max-width: 390px) {
ul.head_cv {
    display: flex;
    justify-content: space-between;
    width: 65%;
}
p.tel_bt_fix {
    position: fixed;
    width: 140px;
    bottom: 9%;
    right: 8px;
    z-index: 2;
}
}
@media screen and (max-width: 375px) {
ul.head_cv {
    display: flex;
    justify-content: space-between;
    width: 68%;
}
p.tel_bt_fix {
    position: fixed;
    width: 140px;
    bottom: 11%;
    right: 8px;
    z-index: 2;
}
}
li.head_cv_li a {
    display: block;
    background: #40342F;
    padding: 5px 1em;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    border-radius: 10px;
}
section#topkv {
    position: relative;
    margin-bottom: 10%;
}

.top_list_box {
    margin-top: -33%;
    position: relative;
}
h3.top_list_head3 {
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    width: fit-content;
    padding: 5px 2em;
    margin: 0 auto 5%;
    border-radius: 10px;
    letter-spacing: 2px;
}
ul.top_list_ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
li.top_list_li {
    width: 32.333%;
    margin-bottom: 1%;
}

h3.intro_head3 {
    text-align: center;
    font-weight: 300;
    margin-bottom: 7%;
    letter-spacing: 1px;
}
p.intro_txt {
    width: 90%;
    margin: 0 auto 5%;
    text-align: center;
    font-size: 14px;
}
p.intro_img {
    width: 100px;
    margin: 0 auto 5%;
}
ul.cvbt_ul {
    width: 95%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto 10px;
}

li.cvbt_ul_li {
    width: 49%;
}
li.cvbt_ul_li a {
    display: block;
    text-align: center;

    font-size: 14px;
    text-decoration: none;
    border-radius: 5px;
    color: #fff;
}
.fixed-cv li.cvbt_ul_li a {
    display: block;
    text-align: center;
    padding:5px;
    background: #40342F;
    font-size: 14px;
    text-decoration: none;
    border-radius: 5px;
    color: #fff;
}
p.intro_cv_p {
    width: 90%;
    margin: 0 auto 10%;
}
p.intro_cv_p a {
    display: block;
    text-align: center;
    background: #40342F;
    margin: 0 initial;
    padding: 5px;
    font-size: 14px;
    text-decoration: none;
    border-radius: 5px;
    color: #fff;
}
p.destiny_line_mv {
    margin-bottom: 10%;
}

h3.destiny_line_head3 {
    width: 90%;
    margin: 0 auto 10%;
    font-size: 16px;
    font-weight: 300;
}
p.destiny_line_txt {
    width: 90%;
    margin: 0 auto 10%;
    font-size: 12px;
    line-height: 1.8em;
}

.swiper_outbrand {
    margin-bottom: 5%;
}

section#styleist {
    padding: 10% 0;
}

.stylist_mv_box {
    margin-bottom: 10%;
}
p.stylist_txt {
    width: 90%;
    margin: 0 auto 5%;
    font-size: 12px;
}

dd.stylist_day_dd {
    font-size: 14px;
}
.stylist_yarigai_box {
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    margin: 0 auto 10%;
    justify-content: space-between;
}
ul.stylist_yarigai_ul {
    width: 80%;
}
li.stylist_yarigai_li {
    margin-bottom: 8%;
}
h3.stylist_head4 {
    width: 10%;
    text-orientation: upright;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 15px;
    border-right: 1px solid #40342f;
    border-left: 1px solid #40342f;
    text-align: center;
    padding: 5px;
    color: #40342f;
}

button.openModalBtn {
    border: solid 1px;
    padding: 5px 1em;
    font-size: 14px;
    margin: 0 auto 5%;
    width: 85%;
    display: block;
    text-align: center;
}

h3.stylist_head3 {
    font-size: 14px;
    margin: 0 auto 10%;
    width: 90%;
    color: #666;
    text-wrap: inherit;
}

p.stylist_staff {
    width: 90%;
    margin: 0 auto 5%;
}

h2.benefitpoint_head2 {
    background: #40342f;
    padding: 5px 0;
    text-align: center;
    font-size: 16px;
    margin-bottom: 5%;
    color: #fff;
}

h2.benefitpoint_head2 span {
    font-size: 28px;
    font-style: italic;
}

p.benefitpoint_txt {
    width: 90%;
    margin: 0 auto 10%;
}

.benefitpoint_01_box {
    width: 90%;
    margin: 0 auto 10%;
}
p.benefitpoint_num {
    font-size: 30px;
    font-style: italic;
    display: flex;
    align-items: center;
}
p.benefitpoint_num:after {
    content: "";
    flex-grow: 1;
    height: 1px;
    display: block;
}
p.benefitpoint_num:after {
    margin-left: .4em;
    background: #c7af60;
}

h3.benefitpoint_01_head3 {
    font-size: 18px;
    margin-bottom: 2%;
    font-weight: 300;
}
h3.benefitpoint_01_head3 span {
    font-size: 26px;
    padding: 0 3px;
}

p.benefitpoint_01_box_txt {
    font-size: 13px;
    margin-bottom: 5%;
}


p.benefitpoint_headtxt{
    width: 90%;
    margin: 0 auto 10%;
    color: #666;
}
p.benefitpoint_01_box_img {
    margin-bottom: 5%;
}
h3.benefitpoint_02_head3 {
    border-top: solid 1px #40342f;
    border-bottom: solid 1px #40342f;
    text-align: center;
    width: 90%;
    margin: 0 auto 5%;
    padding: 5px;
    font-size: 16px;
    font-weight: 300;
}
dl.benefitpoint_02_dl {
    width: 90%;
    margin: 0 auto 5%;
}
dt.benefitpoint_02_dt {
    background: #ece6d0;
    padding: 5px;
    margin-bottom: 9px;
}
dd.benefitpoint_02_dd {
    font-size: 14px;
}

p.benefitpoint_02_txt {
    width: 90%;
    margin: 0 auto 10%;
    font-size: 14px;
}

p.benefitpoint_flex_box_img {
    width: 90%;
    margin: 0 auto 5%;
}
dl.benefitpoint_03_dl {
    width: 90%;
    margin: 0 auto 10%;
}
dt.benefitpoint_03_dt {
    font-size: 24px;
    margin-bottom: 5%;
}
dt.benefitpoint_03_dt span {
    font-size: 46px;
}
dd.benefitpoint_03_dd {
    padding: 5px;
    font-size: 13px;
    background: #f8f8f8;
}

h3.place_recruit {
    text-align: center;
    color: #40342f;
    margin-bottom: 10%;
}

ul.place_recruit_ul {
    margin-bottom: 10%;
}

li.place_recruit_li {
    margin-bottom: 10%;
}
.place_area_box {
    width: 90%;
    margin: 0 auto 10%;
    padding: 13px;
}

dl.place_area_dl {
    margin-bottom: 5%;
}
p.place_shiryo {
    margin-bottom: 10%;
}

h3.recruit_head3 {
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    text-align: center;
    padding: 5px;
    margin-bottom: 20px;
}

dt.recruit_dt {
    background: #e3d9b7;
    padding: 5px 0.5em;
    margin-bottom: 10px;
}
dd.recruit_dd {
    font-size: 14px;
    padding: 0 1em;
}
dt.recruit2_dt {
    font-size: 24px;
    border-bottom: dotted 1px;
}

dd.recruit2_dd {
    font-size: 14px;
    padding: 0.5em;
}

.mensetsubox {
    border: solid 1px #ddd;
    margin: 0 auto 10%;
    padding: 1em;
}

h4.mensetsubox_head4 {
    font-size: 18px;
}
h5.mensetsubox_head5 {
margin: 1em 0.5em;
    background: #e3d9b7;
    width: fit-content;
    padding: 5px 0.5em;
    border-radius: 30px;
    font-size: 13px;
}
ul.mensetsubox_ul {
    padding: 0 1em;
}
li.mensetsubox_li {
    margin-bottom: 5px;
}
.mensetsu_flowbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.mensetsu_flow01 {
    width: 48%;
    position: relative;
}
.mensetsu_flow01::after {
    content: '';
    width: 25px;
    height: 25px;
    margin-top: -5px;
    border-top: solid 2px #555;
    border-right: solid 2px #555;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: -6px;
}
.mensetsu_flow02 {
    width: 47%;
}
.triangle {
    width: 0px;
    height: 0;
    border-style: solid;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    border-top: 25px solid #c29e43;
    border-bottom: 0;
    display: block;
    margin: 0 auto 4%;
}
.youtube {
    width: 90%;
    aspect-ratio: 16 / 9;
    margin-bottom: 5%;
    margin: 0 auto;
}

.youtube iframe {
    width: 100%;
    height: 100%;
}

dl.place_area_dl {
    margin-bottom: 5%;
}
dt.place_area_dt {
    background: #ddd;
    padding: 0.5em;
    margin-bottom: 2%;
    color: #fff;
    font-weight: bold;
}
dt.place_area_dt.area_tohoku {
    background: #619feb;
}
dt.place_area_dt.area_kanto {
    background: #3da942;
}
dt.place_area_dt.area_chukyo {
    background: #99cc33;
}
dt.place_area_dt.area_kansai {
    background: #f2c100;
}
dt.place_area_dt.area_chugoku {
    background: #ff9900;
}
dt.place_area_dt.area_kyushu {
    background: #ff6460;
}
dt.place_area_dd {
    padding: 0 0.5em;
}
.pointbox01,
.pointbox02,
.pointbox03 {
    position: relative;
    margin-bottom: 10%;
}
p.point_txt {
    text-align: left;
    width: 80%;
    position: absolute;
    bottom: 15%;
    left: 8%;
}
p.point_txt2 {
    text-align: left;
    width: 80%;
    position: absolute;
    bottom: 15%;
    left: 10%;
}
h2.voice_ttl {
    margin-bottom: 5%;
}
.voice_box {
    width: 90%;
    margin: 0 auto 5%;
    background: #f4f4f4;
    padding: 10px;
}
p.voice_img {
    margin-bottom: 10px;
}

.voice_databox {
    background: #fff;
    padding: 10px;
    margin-bottom: 10px;
}
ul.voice_databox_ul {
    display: flex
;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
}
li.voice_databox_li {
    width: 49%;
}
dl.voice_databox_dl {
    font-size: 14px;
}
dt.voice_databoxdt {
    color: #40342f;
}

dt.voice_dt {
    color: #40342f;
    border-bottom: solid 1px;
    margin-bottom: 10px;
    padding-bottom: 10px;
}



/*-- PC --*/
@media screen and (min-width: 769px) {
div#lp-main {
    max-width: 40.5rem;
    margin: 0 auto;
}


#left_wrap {
    display: block;
    width: calc((100% - 40.5rem) / 2);
    /* width: calc((100% - 50rem) / 2); */
    margin: 0;
}
#right_wrap {
    display: block;
    width: calc((100% - 40.5rem) / 2);
    /* width: calc((100% - 50rem) / 2); */
    margin: 0;
}
#left_wrap .left_image-wrap {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    position: absolute;
}
#left_wrap {
    /* padding: 10rem 8rem 9rem 8rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 2.5rem;
}
#right_wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
}
#right_wrap .right_image-wrap {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    position: absolute;
}
#left_wrap .left_image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#left_wrap .left_image:nth-of-type(1) {
    background-image: url(../img/pc_side/lp_bg_left.jpg);
}
#left_wrap .left_image:nth-of-type(2) {
    background-image: url(../img/pc_side/lp_bg_left2.jpg);
}
#left_wrap .left_image:nth-of-type(3) {
    background-image: url(../img/pc_side/lp_bg_left3.jpg);
}
#left_wrap .left_image:nth-of-type(4) {
    background-image: url(../img/pc_side/lp_bg_left4.jpg);
}
#left_wrap .left_image {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    opacity: 0;
    transition: 1s all ease-in-out;
}
#right_wrap .right_image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#right_wrap .right_image:nth-of-type(1) {
    background-image: url(../img/pc_side/lp_bg_right.jpg);
}
#right_wrap .right_image:nth-of-type(2) {
    background-image: url(../img/pc_side/lp_bg_right2.jpg);
}
#right_wrap .right_image:nth-of-type(3) {
    background-image: url(../img/pc_side/lp_bg_right3.jpg);
}
#right_wrap .right_image:nth-of-type(4) {
    background-image: url(../img/pc_side/lp_bg_right4.jpg);
}
#right_wrap .right_image {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    opacity: 0;
    transition: 1s all ease-in-out;
}
#left_wrap .left_image.on,
#right_wrap .right_image.on {
    opacity: 1;
}
footer {
    background-color: #393939;
    color: #fff;
    padding: 10% 0 2%;
    max-width: 40.5rem;
    margin: 0 auto;
}

h1.head_logo {
    width: 12%;
}
ul.head_cv {
    display: flex;
    justify-content: space-between;
    width: 43%;
}
li.head_cv_li a {
    display: block;
    background: #40342F;
    padding: 5px 1em;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    border-radius: 10px;
}
p.benefitpoint_01_box_txt {
    font-size: 16px;
}
p.benefitpoint_num {
    font-size: 30px;
    font-style: italic;
    display: flex;
    align-items: center;
    margin-bottom: 2%;
}
h3.benefitpoint_01_head3 {
    font-size: 26px;
    margin-bottom: 3%;
    font-weight: 300;
}
h3.benefitpoint_01_head3 span {
    font-size: 45px;
    padding: 0 3px;
}
h3.stylist_head4 {
    width: 7%;
    text-orientation: upright;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 24px;
    border-right: 1px solid #40342f;
    border-left: 1px solid #40342f;
    text-align: center;
    text-justify: inter;
    text-justify: inter-ideograph;
    padding: 5px;
    color: #40342f;
}
div.fixed-cv ul.cvbt_ul {
    width: 33%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto 10px;
}
h3.stylist_head4 {
    width: 7%;
    text-orientation: upright;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 24px;
    border-right: 1px solid #40342f;
    border-left: 1px solid #40342f;
    text-align: center;
    text-justify: inter;
    text-justify: inter-ideograph;
    padding: 5px;
    color: #40342f;
}
dl.recruit_dl {
    margin-bottom: 5%;
}
ul.head_cv {
    display: flex;
    justify-content: space-between;
    width: 70%;
}
}