@charset "utf-8";
/*---------------------------------------------
TOP
---------------------------------------------*/
/* PC */
#top {
text-align: center;
position:relative;
}
#topVideo video {
background: #e1e1e1;
width: 100%;
max-width: 2000px;
height: auto;
z-index: -1;
}
audio, video {
display: inline-block;
}
.pcTopMaskArea {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background:#4c3b3b;
opacity: 0.2;
}
.pcTopTextArea {
position: absolute;
width: 1000px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.pcTopTextArea .text01 {
font-family: "Noto Serif JP", serif;
overflow-wrap: break-word;
word-break: normal;
font-weight: 400;
overflow-wrap: break-word;
word-break: normal;
font-size: 26px;
line-height: 140%;
color: #ffffff;
display: inline-block;
margin-top: 1px;
padding: 0 0 0 10px;
letter-spacing: 5px;
}
.pcTopTextArea h2 {
display:none;
}
.pcTopTextArea .image01 img {
display: block;
width: 320px;
margin: 0 auto 2em;
}
@media screen and (max-width:1440px) {/* タブレット */
#topVideo{
padding-top: 52px;
}
#topVideo video {
width: 100%;
height: 100%;
z-index: -1;
}
.pcTopTextArea {
position: absolute;
width: auto;
top: 54%;
left: 50%;
}
.pcTopTextArea .text01 {
font-size: 20px;
}
.pcTopTextArea .image01 img {
width: 200px;
margin: 0 auto 1em;
}
}
@media (max-width: 767px) { /* スマホ */
#topVideo{
overflow: hidden;
box-sizing: border-box;
}
#topVideo video {
width: 120% !important;/*140%*/
height: 90% !important;
z-index: -1;
margin: 0 auto;
text-align: center;
align-items: center;
position: relative;
top: 0;
left: -16%;
overflow: hidden;
box-sizing: border-box;
}
.pcTopTextArea .text01 {
font-size: 3.6vw;
letter-spacing: 2px;
}
.pcTopTextArea .image01 img {
width: 120px;
}
}

/* ----------------------------------
【HOME】共通
------------------------------------*/
#home_pr{
background: #dad8d8;
padding: 10px;
text-align: center;
font-size: 16px;
line-height: 1.4;
}
.scroll_area{
background:url(../img/scroll_01.png) center 0 repeat-x;
height: 52px;
padding-bottom: 7em;
text-indent: -4000px;
text-align: center;
}

@media (max-width: 767px) { /* スマホ */
#home_pr {
font-size: 14px;
padding: 10px;
}
}
/* ----------------------------------
【HOME】INTRO
------------------------------------*/
section#intro{
padding: 3em 0 1em;	
}
.intro_set{
width: 100%;
margin: 2em auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
align-content: flex-start;
align-items: stretch;
flex-direction: row;
justify-content: center;
}
.intro_set .intro_img{
width: 28%;
background-position: center;
background-size: cover;
}
.intro_set .intro_txt{
width: 44%;
padding: 2em;
text-align: center;
}
.r_title{
margin: 0 auto;
text-align: center;
}
.intro_set h4{
font-family: "Zen Maru Gothic", sans-serif;
text-align: center;
margin: 5px auto;
padding: 10px;
font-size: 140%;
font-weight: bold;
color: #806858;
}
.intro_btn_wrap{
justify-content: space-around;
width: 610px;
max-width: 100%;
}

@media screen and (max-width:768px) {
section#intro{
padding: 2em 0 1em;	
}
.intro_set {
width: 100%;
margin: 0 auto 2em;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
align-content: center;
align-items: center;
flex-direction: column;
justify-content: space-around;
}
.intro_set .intro_img {
width: 100%;
height: 200px;
}
.intro_set .intro_txt {
width:100%;
max-width: 450px;
padding: 3em 2em;
}
}
/*------------------------------------------
【HOME】犬スライダー
------------------------------------------*/
.slider-intro{

}
.slider-intro ul li img{
width: 300px;
padding: 10px;
}

/*------------------------------------------
【HOME】インスタスライダー
------------------------------------------*/
.slider-insta ul li img{
width: 300px;
padding: 10px;
}

/*------------------------------------------
【HOME】サービス
------------------------------------------*/
.service-ex {
width: 46%;
margin: 2%;
background: #fff;
padding:0;
line-height: 1.6;
border: #9f9893 4px double;
box-shadow: #999 5px 5px 0px;
}
.service-ex p {
padding: 1.5em;
}
.service-ex .title {
font-family: serif;
background: #9f9893 url(../img/icon_dog_2.png) no-repeat 14px center scroll;
font-size: 120%;
color: #ffffff;
letter-spacing: 2px;
border-bottom: none;
padding: 15px 10px 13px 60px;
line-height: 1.4;
font-weight: 600;
display: inline-block;
width: 100%;
margin-top: -10px;
margin-left: -10px;
}

@media screen and (max-width:1024px) {
.service-ex {
width: 100%;
margin: 1em auto 2.5em;
}
}
@media screen and (max-width:599px) {
.service-ex p {
padding: 1em;
}
}

/*------------------------------------------
【HOME】猫
------------------------------------------*/
#home_cat ul.plan_list li {
background:#fff;
padding: 1em 0;
margin: 1em auto 2em;
position: relative;
}
#home_cat ul.plan_list li .s-info{
width: 50%;
padding:1em 2em 1.5em;
}
#home_cat ul.plan_list li .plan_bg::after{
content: '';
position: absolute;
background: #e7e0db;
width: 80%;
height: 100%;
top: 0;
right: 0;
z-index: -1;
}
#home_cat ul.plan_list li .reverse::after{
left: 0;
}
#home_cat ul.plan_list li .s-images{
width: 50%;
margin-top: -44px;
margin-left: -40px;
}
#home_cat ul.plan_list li .title {
font-size:155%;
color: #185869;
border-bottom: #185869 1px solid;
padding: 0.4em 0 0.5em;
margin-bottom: 0.3em;
line-height: 1;
letter-spacing: 1px;
display: block;
font-weight: bold;
}
#home_cat ul.plan_list li .midashi {
color: #7e6b5a;
font-size:120%;
padding: 5px 0;
font-weight: normal;
}
#home_cat ul.plan_list li .midashi_c {
background: #bad9e2;
color: #175869;
font-weight: bold;
margin-bottom: 1%;
line-height: 150%;
padding: 1% 2%;
}
#home_cat ul.plan_list li .txt_c{
background: #d7e7ec;
padding: 0;
margin: 2% 0;
line-height: 150%;
}
#home_cat ul.plan_list li .txt_c p{
padding: 1% 2% ;
}
#home_cat ul.plan_list li a.btn_more {
display: block;
overflow: hidden;
background: #185869;
border: #fff 1px solid;
color: #fff;
text-align: center;
margin-top: 1em;
padding: 8px 15px;
width: 460px;
max-width: 100%;
line-height: 1.6;
}
#home_cat ul.plan_list li a.btn_more:hover {
background:#5a94a4;
}
#home_cat ul.plan_list li a.btn_more:before {
content: "\f101";
font-family: FontAwesome;
margin-right: 1em;
}
#home_cat ul.plan_list li a img {
width: 100%;
max-width: 100%;
-webkit-transition: 1.0s ease-out;
-moz-transition: 1.0s ease-out;
transition: 1.0s ease-out;
opacity: 1.0;
filter: alpha(opacity=100);
-ms-filter: "alpha( opacity=100 )";
}
#home_cat ul.plan_list li a:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}

@media screen and (max-width:1024px) {
/*縦ならび*/
#home_cat ul.plan_list li {
display: block;
width: 100%;
padding: 1em 0;
margin: 0 auto;
}

#home_cat ul.plan_list li a {
width: 100%;
max-height: 240px;
height: auto;
}
#home_cat ul.plan_list li .s-info{
width: 100%;
padding:2em;
padding-top: 0;
}
#home_cat ul.plan_list li .s-images {
width: 100%;
max-width: 500px;
padding: 1.5em;
text-align: center;
margin: 0 auto;
}
#home_cat ul.plan_list li .s-images img {
width: 100%;
max-width: 450px;
}
#home_cat ul.plan_list li .title {
margin-bottom: 0.7em;
}
#home_cat ul.plan_list li a.btn_more {
margin: 0 auto;
margin-top: 2em;
text-align: left;
}
#home_cat ul.plan_list li .plan_bg::after {
width: 100%;
top: 10%;
height: 90%;
}
}

@media screen and (max-width:599px) {
#home_cat ul.plan_list li .title {
font-size: 20px;
}
}

/*------------------------------------------
【HOME】INSTA
------------------------------------------*/
/*bnr*/
ul.insta_bnr{
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
align-content: space-around;
flex-direction: row;
justify-content: center;
align-items: stretch;
}
ul.insta_bnr li{
}
ul.insta_bnr li a img{
/*width: 338px;*/
max-width: 100%;
padding: 10px;
display: block;
}
@media screen and (max-width:1400px) {
ul.insta_bnr li a img{
width: 320px;
}
}
/*------------------------------------------
★【HOME】VOICE
------------------------------------------*/
#home_voice .flexbox {
background: #888380;
align-items: center;
}
#home_voice h2{
font-size: 340%;
margin-bottom: 10px;
}
#home_voice .box_a{
width: 40%;
background: #888380;
color: #fff;
text-align: center;
padding:30px 25px;
}
#home_voice .box_b{
width: 60%;
background: #fff;
text-align: center;
padding: 1em 3em;
}
#home_voice .box_a .btn_more a {
background: #ece6e2;
color: #3e3935;
font-weight: bold;
margin-top: 1.2em;
box-shadow: none;
}
#home_voice .box_a .btn_more a:before {
color: #3e3935;
content: "\f178";
content: "\f101";
}
#home_voice .box_a .btn_more a:hover {
opacity: 0.8;
}
@media screen and (max-width:1024px) {
#home_voice .box_a {
width: 100%;
padding: 2em 3em;
}
#home_voice .box_b {
width: 100%;
padding: 2em 3em;

}
}
/*スライダー*/
.slider-voice .slick-slide img {
display: block;
width:90%;
}
.slider-voice .slick-dotted.slick-slider{
margin-bottom:0;
}
@media screen and (max-width:599px) {
.slider-voice .slick-slide img {width:65%;}
}
@media screen and (max-width: 475px) {
.slider-voice .slick-slide img {width:260px;}
}
/*------------------------------------------
【HOME】GROOMER
------------------------------------------*/
.slider-staff{
width: 1600px;
}
.slider-staff ul{
overflow: hidden;
}
.slider-staff ul li a{
color: #333;
}
.slider-staff ul li img{
padding-right: 1em;
}
@media screen and (max-width:2024px) {
.slider-staff{
width:100%;
}
.slider-staff ul li img {
width: 300px;
}
}
@media screen and (max-width:768px) {
.slider-staff ul li img {
width: 280px;
}
}

/*　slick.css 上書き　*/
.slick-dots {
position: relative !important;
bottom: 0 !important;
}

.slick-prev:before, .slick-next:before {
font-size: 20px !important;
color:#6d6a67 !important;
}



/*-------------------------------------------
【HOME】サロンリスト①
-------------------------------------------*/
#home_salonlist ul.salon_list {
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
align-content: space-between;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}

#home_salonlist ul.salon_list li {
width: 46%;
max-width: 100%;
margin: 2%;
background: #e7e0db;
box-sizing: border-box;
/*position: relative;*/
}

#home_salonlist ul.salon_list li a {
display: block;
overflow: hidden;
/*pointer-events: none;*//*リンク無効化*/
}

#home_salonlist ul.salon_list li a img {
width: 100%;
max-width: 100%;
transition: 1.0s ease-out;
opacity: 1.0;
}

#home_salonlist ul.salon_list li a:hover img {
transform: scale(1.05);
opacity: 0.8;
filter: alpha(opacity=80);
overflow: hidden;
}

#home_salonlist ul.salon_list li .set {
padding: 1em;
}

#home_salonlist ul.salon_list li .title {
font-size: 100%;
line-height: 1.4;
color: #444444;
font-weight: bold;
}

#home_salonlist ul.salon_list li .txt {
font-size: 15px;
color: #666;
padding:0 0 5px;
line-height: 1.7;
}

#home_salonlist ul.salon_list li .sns-btn{
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
align-content: center;
flex-direction: row;
justify-content: space-between;
align-items: center;
line-height: 1;
}

#home_salonlist ul.salon_list li .sns-set a {
display: inline-block;
padding: 0;
margin: 0;
margin-right: 15px;
color: #6e6a67;
font-size: 30px;	
overflow: visible;
line-height: 1;
}

#home_salonlist ul.salon_list li .btn a{
/* position: absolute; */
bottom: -1px;
right: 0;
z-index: 1;
width: fit-content;
background: #6e6a67;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 8px 20px;
line-height: 1;
font-size: 15px;
}
#home_salonlist ul.salon_list li .btn a:hover{
opacity: 0.8;
}

@media screen and (max-width:1960px) {
#home_salonlist ul.salon_list li {
width: 47%;
margin:1.5%;
}
}

@media screen and (max-width:678px) {
#home_salonlist ul.salon_list li {
width: 100%;
max-width: 420px;
margin: 1em auto;
}
}

/*------------------------------------------
【共通】サロンリスト②　ご予約は各店舗へ
------------------------------------------*/
#reservation{
background: #cec7c4 url(../img/body_bg_02.jpg) no-repeat center center fixed;
background-size: cover;
}

/*ご予約は各店舗へ*/
ul.reservation-how{
margin: 2em auto;
}
ul.reservation-how li{
width: 20%;
text-align: center;
padding: 5px 10px;
margin: 0em 1em;
border: #6e6a67 2px solid;
border-radius: 50px;
}

/*サロンリスト*/
#reservation ul.salon_list {
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
align-content: space-between;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
}

#reservation ul.salon_list li {
width: 47%;
margin: 1.5%;
background: #ffffff;
border: #6d6a67 4px double;
box-sizing: border-box;
/* border-radius: 5px;*/
}

#reservation ul.salon_list li a {
display: none;
overflow: hidden;
/*pointer-events: none;*//*リンク無効化*/
}

#reservation ul.salon_list li a img {
width: 100%;
max-width: 100%;
transition: 1.0s ease-out;
opacity: 1.0;
}

#reservation ul.salon_list li a:hover img {
transform: scale(1.05);
opacity: 0.8;
filter: alpha(opacity=80);
overflow: hidden;
}

#reservation ul.salon_list li .set {
padding: 1em;
}

#reservation ul.salon_list li .title {
font-size: 100%;
line-height: 1.4;
color: #444444;
font-weight: bold;
}

#reservation ul.salon_list li .txt {
font-size: 96%;
color: #666;
padding:0 0 5px;
line-height: 1.7;
}

#reservation ul.salon_list li .sns-btn{
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
align-content: center;
flex-direction: row;
justify-content: space-between;
align-items: center;
line-height: 1;
}

#reservation ul.salon_list li .sns-set a {
display: inline-block;
padding: 0;
margin: 0;
margin-right: 15px;
color: #6e6a67;
font-size: 30px;	
overflow: visible;
line-height: 1;
}

#reservation ul.salon_list li .btn a{
display: inline-block;
/* position: absolute; */
bottom: -1px;
right: 0;
z-index: 1;
width: fit-content;
background: #6e6a67;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 8px 20px;
line-height: 1;
font-size: 15px;
}

@media screen and (max-width:1024px) {
#reservation{
background: #cec7c4 url(../img/body_bg_02.jpg) no-repeat center center fixed;
background-size: auto;
}
ul.reservation-how {
display: flex;
}
ul.reservation-how li {
width: 46%;
margin: 2%;
}
#reservation ul.salon_list li {
width: 48%;
margin: 1%;
}
}

@media screen and (max-width:768px) {
ul.reservation-how li {
width: 48%;
margin: 1%;
}
#reservation ul.salon_list li {
width: 96%;
margin: 2%;
}
}

/*------------------------------------------
【共通】　FAQ　よくある質問
------------------------------------------*/

.faqWrap .toggle_wrap {
width: 98%;
margin: 0 auto 1em;
border-radius: 0;
padding: 2px;
}
.faqWrap .toggle_wrap p.q {
font-size: 100%;
line-height: 1.6;
padding: 1em 2em 1em 1em;
font-weight: normal;
background: #dedbda;
border-radius: 8px;
}
.faqWrap .toggle_wrap p.q:before,
.faqWrap .toggle_wrap p.a:before{
content: "Q";
font-family: FontAwesome;
margin-right: 10px;
color: #ffffff;
background: #f18589;
padding: 5px 8px;
border-radius: 0px;
border-radius: 5px;
font-weight: normal;
}
.faqWrap .toggle_wrap p.a:before {
content: "A";
background: #a6937c;
border-radius:5px;
font-weight: normal;
}
.faqWrap .toggle_contents {
/*	background: #fff;*/
}

/* アコーディオン */
.faqWrap .toggle_switch {
position: relative;
cursor: pointer;
padding:8px 0;
}
.faqWrap .toggle_contents p {
text-align: left;
padding:0.5em 1em;
line-height: 2.0;
}
.faqWrap .toggle_switch::after {
content: "";
display: inline-block;
width: 18px;
height: 11px;
background: url(../img/arrow_down.png) no-repeat center center;
background-size: contain;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
transition: transform .2s;
}
.faqWrap .toggle_switch.open::after {
transform: rotateZ(180deg);
top: 46%;
}
.faqWrap .toggle_contents {
/*display: none;*/
display: block;
padding: 5px 0 5px;
/*background: #fff;*/
width: 100%;
margin: 0;
border-radius: 0 0 10px 10px;
}

@media screen and (max-width: 768px) {
.faqWrap .toggle_wrap p.q,
.faqWrap .toggle_wrap p.a {
font-size: 100%;
padding: 15px 30px 15px 15px;
}
.faqWrap .toggle_contents p {
padding: 0;
}
.faqWrap .toggle_switch::after {right: 5px;}
}


/*-------------------------------------------
【下層共通】ヘッダー画像
-------------------------------------------*/
#sub_top {
background:#55adc8 url(../img/sub_top_bg2.jpg) no-repeat center top scroll;
background:#adb5b5 url(../img/sub_top_bg1.jpg) no-repeat center top scroll;
background:#d9d6d4 url(../img/sub_top_bg.jpg) no-repeat center top scroll;
/*background-size: cover;*/
line-height: 1.2;
position: relative;
width: 100%;
}
#sub_top .overlay {
/*background: rgb(63 125 166 / 40%);*/
/*background: rgb(0 0 0 / 20%);*/
background: rgb(90 58 58 / 20%);
}
#sub_top h2{
font-size: 140%;
color: #fff;
/* text-shadow: #FFFFFF 3px 3px 2px; */
text-align: center;
font-weight: 700;
letter-spacing: 2px;
padding: 160px 0 55px;
width: fit-content;
margin: 0 auto;
}
#sub_top h2 .en {
display: block;
font-size: 60%;
padding-top: 5px;
letter-spacing: 2px;
color: #fff;
}

@media screen and (max-width:1441px) {
#sub_top {
background:#d9d6d4 url(../img/sub_top_bg.jpg) no-repeat center bottom scroll;
background-size: 130%;
}
#sub_top h2 {
font-size: 18px;
padding: 100px 0 35px;
}
}

@media screen and (max-width:599px) {
#sub_top {
background:#d9d6d4 url(../img/sub_top_bg_sp.jpg) no-repeat center bottom scroll;
background-size: 113%;
}
#sub_top h2 {
font-size: 4vw;
padding: 90px 0 25px;
letter-spacing: 1px;
}
}

/* ----------------------------------------
【下層共通】pankuzu
------------------------------------------- */
.pankuzu {
background: #efefef;
font-size: 14px;
width: 100%;
padding: 0.5em;
}
.pankuzu ul {
width: 96%;
max-width: 1280px;
margin-right: auto;
margin-left: auto;
}
.pankuzu li {
display: inline-block;
}
.pankuzu li a {
text-decoration:underline;
color: #432b18;
}
.pankuzu li::after {
content: ">";
padding-left: 10px;
padding-right: 10px;
}
.pankuzu li a:hover {
color: #432b18;
}
.pankuzu li i {
padding-right: 5px;
}
.pankuzu li:last-child::after {
display: none;
}

@media screen and (max-width:599px) {
.pankuzu {display: none;}
}
/*------------------------------------------
【下層】私たちについて
------------------------------------------*/
/*リスト*/
ul.plan_list li {
background:#fff;
padding: 0em 0;
margin: 5em auto 2em;
position: relative;
}
ul.plan_list li .s-info{
width: 50%;
padding: 45px;
}
ul.plan_list li .plan_bg::after{
content: '';
position: absolute;
background:#e6eaef;
width: 80%;
height: 100%;
top: 0px;
right: 0;
z-index: -1;
}
ul.plan_list li .reverse::after{
left: 0;
}
ul.plan_list li .s-images{
width: 50%;
top: -3em;
/* padding: 1.5em; */
position: relative;
}
ul.plan_list li .title {
font-size: 155%;
color: #554747;
border-bottom: #554747 1px solid;
padding: 0em 0 0.5em;
margin-bottom: 0.5em;
line-height: 1.6;
letter-spacing: 1px;
display: block;
font-weight: bold;
}
ul.plan_list li .midashi {
color: #7e6b5a;
font-size: 120%;
padding: 0.5em 0 0.5em;
font-weight: bold;
line-height: 1.6;
}
ul.plan_list li .midashi_c {
background: #bad9e2;
color: #175869;
font-weight: bold;
margin-bottom: 1%;
line-height: 150%;
padding: 1% 2%;
}
ul.plan_list li .txt{
font-size: 90%;
}
ul.plan_list li .txt_c{
background: #d7e7ec;
padding: 0;
margin: 2% 0;
line-height: 150%;
}
ul.plan_list li .txt_c p{
padding: 1% 2% ;
}
ul.plan_list li a.btn_more {
display: block;
overflow: hidden;
background: #185869;
border: #fff 1px solid;
color: #fff;
text-align: center;
margin-top: 1em;
padding: 8px 15px;
width: 460px;
max-width: 100%;
line-height: 1.6;
}
ul.plan_list li a.btn_more:hover {
background:#5a94a4;
}
ul.plan_list li a.btn_more:before {
content: "\f101";
font-family: FontAwesome;
margin-right: 1em;
}
ul.plan_list li a img {
width: 100%;
max-width: 100%;
-webkit-transition: 1.0s ease-out;
-moz-transition: 1.0s ease-out;
transition: 1.0s ease-out;
opacity: 1.0;
filter: alpha(opacity=100);
-ms-filter: "alpha( opacity=100 )";
}
ul.plan_list li a:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}

/**/
section#about_intro{
background: #d1d6dd;
}
.about_01{
background: #d1d6dd url(../img/about_01_bg.jpg) no-repeat center center scroll;
}
.about_01 .title_b {
font-size: 140%;
background: none;
padding: 0;
margin-bottom: 0.5em;
font-weight: bold;
}

@media screen and (max-width:1024px) {
.about_01 {
background: #d1d6dd url(../img/about_01_bg.jpg) no-repeat center bottom scroll;
background-size: contain;
}
.flexbox {
display: flex;
}
ul.plan_list li .s-info {
width: 65%;
padding: 0px 25px 25px;
}
ul.plan_list li .s-images {
width: 35%;
}
ul.plan_list li .title {
font-size: 140%;
}
ul.plan_list li .midashi {
font-size: 110%;
}
ul.plan_list li .midashi_c {
background: #bad9e2;
color: #175869;
font-weight: bold;
margin-bottom: 1%;
line-height: 150%;
padding: 1% 2%;
}
}
@media screen and (max-width:820px) {
.about_01 {
background: #d1d6dd url(../img/about_01_bg.jpg) no-repeat center bottom scroll;
background-size: contain;
padding-bottom: 145px !important;
}

.about_01 .title_b {
font-size: 120%;
}
ul.plan_list li .s-images{
top:0;
}
/*縦ならび*/
ul.plan_list li {
display: block;
width: 100%;
padding: 1em 0;
margin: 0 auto;
}

ul.plan_list li a {
width: 100%;
max-height: 240px;
height: auto;
}
ul.plan_list li .s-info{
width: 100%;
padding: 0 2em 1em;
}
ul.plan_list li .s-images{
width: 100%;
padding: 1.5em;
text-align: center;
}
ul.plan_list li .title {
margin-bottom: 0.7em;
}
ul.plan_list li a.btn_more {
margin: 0 auto;
margin-top: 2em;
text-align: left;
}
ul.plan_list li .plan_bg::after {
width: 100%;
top: 10%;
height: 90%;
}
}

@media screen and (max-width:599px) {
ul.plan_list li .title {
font-size: 20px;
}
}

/*-------------------------------------------
【下層】こだわり
-------------------------------------------*/
/*アニメーション*/
@media screen and (min-width:1200px) {
.ani_pc{}
.ani_sp{display:none;}
}
@media screen and (max-width:1200px) {
.ani_pc{display:none;}
.ani_sp{display:block;}
}

.kodawari .ani_img_area{
position: relative;
}
.kodawari .ani_img_01 img {
position: absolute;
top: -35px;
right: -40px;
z-index: 1;
max-width: 100%;
}

/*右から左にフェードイン*/
.kodawari .ani_img_01 img {
padding: 10px;
animation: fadeIn-r 3s ease 0.5s 1 normal backwards;
}
@keyframes fadeIn-r {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

/**/
ul.photogallery {
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
align-content: space-around;
align-items: stretch;
flex-direction: row;
justify-content: space-evenly;
}
ul.photogallery li{
width: 30%;
margin: 1.5%;
}
ul.photogallery li a img{
border-radius: 10px;
}
ul.photogallery li a {
opacity: 0.8;
}
ul.photogallery li a:hover{
opacity: 1.0;
}
/**/
#kodawari-gallery .pagination{display: none;}
/**/

.aroma_bg{
background: #dfecef;
background: #f4efe8 url(../img/bg-5.jpg) repeat center top scroll;
padding: 2em;
border-radius: 20px;
}
.aroma_bg2{
background: #f1f1f1;
background: #f4efe8 url(../img/bg-6.jpg) repeat center top scroll;
padding: 2em;
border-radius: 20px;
}
.aroma-4 ul li{
background: #ffffff;
width: 48%;
margin: 1.5em 1%;
padding: 1.5em;
border: #98c5cb 2px solid;
border-radius: 15px;
}
.aroma-4 ul li .title{
font-family: 'Kosugi Maru';
text-align: center;
background: #98c5cb;
color: #fff;
font-size: 140%;
font-weight: normal;
padding: 0.5em 1em 0.5em;
margin-bottom: 0.5em;
line-height: 1.4;
margin-top: -2em;
border-radius: 50px;
}
.foamy-point dl{
background: #fff;
border-radius: 15px;
margin-bottom: 2em;
border: #98c5cb 2px solid;
align-items: center;
}
.foamy-point dl dt img{
width: 250px;
}
.foamy-point dl dd .title{
background: transparent url(../img/title_b_bg.png) repeat-x bottom center scroll;
font-family: 'Kosugi Maru';
font-size: 140%;
color: #2a92a7;
font-weight: bold;
padding:5px 0 10px;
margin-bottom:10px;
line-height: 1.6;
}
@media screen and (max-width:1024px) {
.aroma-4 ul li {
width: 100%;
}
.aroma-4 ul li .title {
font-size: 120%;
padding: 0.5em 0.5em 0.5em;
}
}
@media screen and (max-width:599px) {
.aroma_bg {
padding: 1em;
}

ul.photogallery li{
width: 47%;
margin: 1.5%;
}
.foamy-point dl dt img {
max-width: 200px;
}
}

/*タオルひとつでワンランク上の仕上がり*/
.special{
background: #f4efe8 url(../img/kodawari-special-1.jpg) no-repeat center bottom scroll;
background-size: cover;
}
.bg-a{
padding: 2em 2em;
background: rgb(255 255 255 / 70%);
}
.bg-b{
padding: 2em 2em;
background:rgb(109 106 103 / 80%);
color: #fff;
}
.bg-b h2{
color: #fff;
margin: 0 0 0em;
background: none;
ont-size: 180%;
}
.bg-b .subtitle {
color: #ffe2ac;
}
@media screen and (max-width:599px) {
.aroma_bg {
padding: 1em;
}
.title_f {
font-size: 152%;
}
.bg-b{
padding: 1em;
}
}

/*-------------------------------
【HOME】はじめての方
-------------------------------*/
.step-area{
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
align-content: flex-start;
align-items: stretch;
flex-direction: row-reverse;
justify-content: center;
}
.step-set{
background: #f1f1f1;
padding: 1.5em;
}
.step-intro{
width: 50%;
min-height:145px;	
padding: 0 2em;
}
.step-left,
.step-right{
position:relative;
width: 50%;
padding:2em;
}
.step-left{
/*border-right: #ccc 1px solid;*/
top: 0em;
}
.step-right{
border-left: #ada68b 1px solid;
position: relative;
top: -10em;
}
.step-left-arrow,
.step-right-arrow{
position: absolute;
top:10%;
}
.step-left-arrow{
right: 0;
}
.step-right-arrow{
left: 0;
}
/**/
.step-title{
font-family: "Noto Serif JP", serif;
font-size: 130%;
font-weight: bold;
margin-bottom: 1em;
line-height: 1.4;
padding-bottom: 0.5em;
border-bottom: #b1a688 4px double;
}
.step-title .cap{
background: #b1a688;
padding: 4px 1em;
margin-right: 0.5em;
color: #fff;
border-radius: 5px;
line-height: 1;
font-size: 80%;
}
.step-img{
width: 100%;
max-width: 500px;
display: block;
margin: 0 auto;
}
.step-area p{
padding: 1em 0 0;
}

@media screen and (max-width:1100px) {
.step-intro {
width: 100%;
}
.step-area {
flex-direction: column
}
.step-left,
.step-right{
width: 100%;
padding: 1.5em 0;
top: 0;
border: none;
}
.step-set {
padding: 2em;
}
.step-left-arrow,
.step-right-arrow{
display: none;
}
.step-intro{
display: none;
}
}

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

}

/*-------------------------------
【下層】店舗情報（店舗情報）
-------------------------------*/
.information .shopmainimg {
width: 600px;
max-width: 100%;
margin: 0 auto;
box-shadow: rgb(113 113 113 / 20%) 15px 15px 0px;
display: block;  
}
.information .shop_name{
color: #e96054;
font-weight: bold;
line-height: 1;
font-size: 20px;
}
.information .tenpo_name{
font-weight: bold;
font-size: 300%;
letter-spacing: 0;
line-height: 1.4;
}
.information .info_txt {
font-size: 90%;
line-height: 2.0;
}
.information .info_tel{
font-weight: bold;
font-size: 180%;
line-height: 1.6;
color: #6d6a67;
}
.information .info_tel i{
font-size: 90%;
}
.information .info_btn{
width: 100%;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
align-content: space-around;
align-items: stretch;
flex-direction: row;
justify-content: space-between;
}
.information .info_btn a i{
margin-right: 0.5em;
font-size: 110%;
}
.information .info_btn a{/*変更後*/
width: 48%;
max-width: 94%;
color: #ffffff;
background-color: #6e6a67;
margin: 0.5em 0;
padding: 1em 1em;
line-height: 1.4;
letter-spacing:0;
font-weight: normal;
text-align: center;
text-decoration: none;
display: block;
border-radius: 5px;
box-sizing: border-box;
}
.information .info_btn a.link-3{
background-color: #a7988c;
}
.information .btn_more a{/*変更前*/
max-width: 260px;
margin: 10px 1.5% 0;
padding: 20px;
box-sizing: border-box;
}
.information .btn_more a:before {
content: "";
font-family: FontAwesome;
margin-right: 0em;
color: #fff;
}
.information .btn_insta a{
width: 260px;
margin:0.5em auto;
}
.information .info_txt dl dt{
font-weight: bold;
}

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

}

@media screen and (max-width:599px) {
.information .tenpo_name {
font-size: 9vw;
}
.information .shop_name {
font-size: 3.6vw;
margin-top: 1em;
}
.information .info_txt {
font-size: 100%;
line-height: 2.0;
}
.information .info_btn{
flex-direction: column
}
.information .info_btn a {
width: 94%;
margin: 0.8em 0;
padding: 1.0em 1em;
}
}
/*------------------------------------------
【下層】店舗紹介（料金表）
-------------------------------------------*/
#subPage section.price_set{
padding: 5em 0 0;
}
/**/
.shopcmimg{
width: 440px;
max-width: 100%;
display: block;
margin: 0 auto;
/*border-radius: 10px;*/
}
.serviceprice{
color: #e96054;
font-size: 120%;
font-weight: bold;
}

/**/
.price_table {
width: 100%;
text-align: center;
border-collapse: collapse;
border-spacing: 0;
background:#e5e4e1;
line-height: 1.6;
font-size:94%;
letter-spacing: 0;
}
.price_table thead th {
background: #cdcbc5;
/* color: #fff; */
font-weight: bold;
text-align: center;
padding:0.5em 1em;
font-size: 100%;
}
.price_table tr:nth-child(2n+1) {
background: #f3f3f3;
}
.price_table th,
.price_table td {
padding:0.5em 1em;
vertical-align: middle;
text-align: center;
border: #9d9892 1px solid;
}
.price_table th {
width: 20%;
text-align: left;
/*background: rgb(109 106 103 / 10%);*/
/* color: #fff; */
}

/*------　ポップアップ ------*/
#menu-3{
position: relative;
z-index: 10;
}
table.price_table{
position: relative;
}
/*------　openBtn ------*/
.popup button.openBtn{
position: relative;
background: #6d6a67;
color: #fff;
font-size: 90%;
margin-top: 5px;
padding: 0.5em;
line-height: 1;
cursor: pointer;
}
.popup button.closeBtn{
cursor: pointer;
background: #f1f1f1;
line-height: 1;
position: absolute;
right: 0;
top: 0;
clear: both;
}

/* ポップアップの中身 */
.popup .modalMask {
position: absolute;
/* top: 0; */
/* left: 0; */
width: fit-content;
height: fit-content;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* is-openついた時だけ表示 */
.popup .modalMask.is-open {
opacity: 1;
visibility: visible;
}

.popup .modalContent {
background-color: #fff;
padding: 1em;
width: 100%;
text-align: left;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.popup .modalContent h2{
font-weight: bold;
}
.popup .modalContent ul li{
font-size: 90%;
list-style: disc;
margin: 0 1em;
}

/* 中身の箱の初期状態：少し下に下げておく */
.modalContent {
transform: translateY(20px);
transition: transform 0.4s ease;
}

/* モーダルが開いた時：元の位置に戻す */
.modalMask.is-open .modalContent {
transform: translateY(0);
}

@media screen and (max-width:599px) {
.popup .modalMask {
position: absolute;
top: 9%;
left: 0;
padding: 1em;
width: 100%;
height: fit-content;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 100;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
}
/*//---------//*/

/*category_link*/
#price ul.category_link{
width: 100%;
margin: 0em auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
align-content: space-around;
align-items: stretch;
flex-direction: row;
justify-content: flex-start;
}
#price ul.category_link li{
width: fit-content;
margin: 1%;
}
#price ul.category_link li a {
width: auto;
padding: 0.8em 1.8em;
font-size: 100%;
/*font-weight: bold;*/
background: #ebad9a;
color: #fff;
border: #fff 1px solid;
box-shadow: #ccc 3px 3px 3px;
line-height: 1.4;
text-align: left;
border-radius: 5px;
display: inline-block;
/*font-family: "Zen Maru Gothic", sans-serif;*/
}

#price ul.category_link li a:before {
content: "\f107";
font-family: FontAwesome;
margin-right: 0.5em;
color: #fff;
}

/*エンジェルコース*/
.price_set ul.angel_link{
width: 100%;
margin: 0em auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
align-content: space-around;
align-items: stretch;
flex-direction: row;
justify-content: flex-start;
}
.price_set ul.angel_link li{
margin: 1%;
}
.price_set ul.angel_link li {
width: auto;
padding: 8px 10px;
font-size: 94%;
background: #e1d8c1;
color: #6c6357;
border: #9f8768 1px dashed;
line-height: 1.2;
text-align: left;
display: inline-block;
}

/*オプション*/
.option_box{
font-size: 94%;
}
.option_box .plan_set{
background: #efefef;
margin-bottom: 3em;
}
.option_box .plan_left{
width: 40%;
padding: 1.5em;
background-image: url(../img/plan_a_bg.png);
background-size: cover;
background-position: 0 center;
background-repeat: no-repeat;
text-align: center;
display: flex;
align-content: center;
flex-direction: column;
justify-content: center;
color: #fff;
}
.option_box .plan_right{
width: 60%;
padding: 1.5em;
}
.option_box .plan_subtitle{
font-size: 80%;
line-height: 1;
width: fit-content;
border: #fff 1px solid;
margin: 0 auto;
padding: 5px 25px;
border-radius: 5px;
}
.option_box .plan_title{
font-size: 240%;
font-weight: 600;
letter-spacing: 0;
/*border-top: #fff 1px solid;*/
border-bottom: #fff 1px solid;
width: fit-content;
margin: 0 auto;
padding: 0 1em;
}
.option_box .plan_price{
font-size: 120%;
font-weight: 600;
letter-spacing: 0;
}
.option_box .plan_txt{
line-height: 1.4;
display: inline;
color: #333;
background: rgb(255 255 255 / 60%);
width: fit-content;
margin: 0 auto;
padding: 5px 15px 7px;
border-radius: 5px;
}
/**/

@media screen and (max-width:1100px) {
.price-flexbox .inner {
padding: 0.5em;
}
.price .wrap{
width: 95%;
margin: 0 auto;
}
}
@media screen and (max-width: 940px){
/*オプション*/
.option_box .plan_left,.option_box .plan_right{width: 100%;padding: 2em;}
}
@media screen and (max-width: 768px){
/*横スクロール*/
.table-wrap {overflow-x: scroll;}
.price_table {font-size: 95%;margin: 1em auto;}
/*.price_table th{width: 30%;}*/
.price_table th, .price_table td {padding: 0.3em 0.5em;}
}

@media screen and (max-width:599px) {
#price ul.category_link li {margin: 8px;}
.option_box .plan_left,.option_box .plan_right{width: 100%;padding: 1.5em;}
}

/*------------------------------------------
【下層】店舗紹介（その他）
-------------------------------------------*/
/*--メッセージ--*/
.shop_message{
background: #f4efe8 url(../img/shop_message_bg.jpg) no-repeat right bottom scroll;
background-size: cover;
padding: 1.5em;
border-radius: 20px;
}
@media screen and (max-width:768px) {
.shop_message{
background: #f4efe8;
}
}
/*--こだわりのサービス--*/
.tenpo_service .title{
font-size: 200%;
background: transparent url(../img/title_b_bg.png) repeat-x bottom center scroll;
padding: 0 0 0.5em;
margin-bottom: 0.6em;
font-weight: bold;
letter-spacing: 0;
line-height: 1.4;
}

.tenpo_service .title::first-letter {
color: #554747;
color: #a28f7e;
font-size: 160%;
}
.tenpo_service .btn_more a {
margin: 1em 0;
padding: 0.8em 1.8em;
background-color: #a98e7b;
}