@charset "UTF-8";

:root {--mincho: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif; --gothic: 'Noto Sans Japanese', 游ゴシック体, YuGothic, 'Yu Gothic', "游ゴシック Medium", "Yu Gothic Medium", 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
.pc { display: block; }
.sp { display: none; }

.headspa-cam .midashi01 { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); } 
.headspa-cam .midashi01 span { display: block; } 
.headspa-cam .midashi04 { margin-bottom: 30px; }
.headspa-cam .midashi04 .en { margin-bottom: 10px; color: #512400; font-size: 40px; font-family: var(--mincho); }
.headspa-cam .midashi04 .jp { margin-left: 10px; font-size: 16px; font-family: var(--mincho); letter-spacing: .02em; }
.headspa-cam h3.midashi04 .jp { display: block; margin-left: 0; }

.headspa-cam .btn { width: fit-content; padding: 12px 16px; color: #fff; font-size: 15px; background: #957a2e; transition: all .6s; cursor: pointer; z-index: 10; }
.headspa-cam .btn:hover { opacity: 0.8; }

.headspa-cam { padding-top: 40px; overflow: hidden; }

.headspa-cam .intro { position: relative;width: 960px;margin: 0 auto 50px; }
.headspa-cam .intro02::after { display: none; }
.headspa-cam .intro::after { content: ''; width: 0.5px; height: 70px; background: #000; position: absolute; left: 50%; bottom: -90px; -webkit-animation: scroll-line 3.5s cubic-bezier(0.76, 0.06, 0, 1) infinite forwards; animation: scroll-line 3.5s cubic-bezier(0.76, 0.06, 0, 1) infinite forwards; }
.headspa-cam .intro .flex { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.headspa-cam .intro img { width: 320px; margin-bottom: 80px; }
.headspa-cam .intro-content { width: 560px; margin-bottom: 60px; }
.headspa-cam .intro-content .lead { margin-bottom: 20px; color: #000; font-size: 24px; font-family: var(--mincho); font-weight: bold; line-height: 1.6; }
.headspa-cam .intro-content .intro-text { margin-bottom: 10px; font-size: 15px; line-height: 1.8; }
.headspa-cam .intro-content .intro-text b { color: #b23b3b; }
.headspa-cam .intro-content .text-jp { margin-bottom: 30px; font-size: 15px; line-height: 1.8; }
.headspa-cam .contact-area { width: 580px; margin: 0 auto; }
.headspa-cam .btn { width: 500px; margin-bottom: 10px; padding: 20px; background: #000 url(../images/arrow.png)no-repeat center right 30px; background-size: 50px; }
.headspa-cam .btn .en { color: #fff; display: block; font-size: 24px; font-family: var(--mincho); }
.headspa-cam .btn .jp { color: #fff; }
.headspa-cam .contact-text .en { display: block; font-weight: bold; }
.headspa-cam .contact-tel { margin: 20px 0; }

@-webkit-keyframes scroll-line { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: scaleY(0); transform: scaleY(0); }
50% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: scaleY(1); transform: scaleY(1); }
75% { -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: scaleY(1); transform: scaleY(1); }
100% { -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: scaleY(0); transform: scaleY(0); } }
@keyframes scroll-line { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: scaleY(0); transform: scaleY(0); }
50% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: scaleY(1); transform: scaleY(1); }
75% { -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: scaleY(1); transform: scaleY(1); }
100% { -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-transform: scaleY(0); transform: scaleY(0); } }

.headspa-cam .focus { margin-bottom: 60px; padding: 40px; text-align: center; background: #f1f1f1; }
.headspa-cam .focus .focus-text { margin-bottom: 20px; }
.headspa-cam .focus .contact-text { margin-bottom: 20px; }
.headspa-cam .focus .contact-text .en { display: block; font-size: 20px; font-weight: bold; }
.headspa-cam .focus .btn { width: 580px; margin: auto; }

.headspa-cam .treatment { margin-bottom: 80px; }
.headspa-cam .treatment .midashi04 .jp { margin-left: 0; display: block; }
.headspa-cam .treatment .flex { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.headspa-cam .treatment .treatment-contents { padding: 30px 40px; background: #f8f4eb; border: 1px solid #d3c393; }
.headspa-cam .treatment .treatment-contents { width: 80%; }
.headspa-cam .treatment .treatment-contents li { margin-bottom: 18px; padding-bottom: 8px; font-size: 16px; border-bottom: 1px dashed #b0aea8; }
.headspa-cam .treatment .treatment-contents li:last-child { margin-bottom: 0; padding-bottom: 0; font-size: 14px; border-bottom: none; }
.headspa-cam .treatment b { font-size: 110%; font-weight: bold; }
.headspa-cam .treatment .indicator { width: 18%; margin-left: -20px; }
.headspa-cam .treatment .indicator li {margin-bottom: 60px;padding: 8px;text-align: center;background: #fff;border: 1px solid #000;position: relative;}
.headspa-cam .treatment .indicator li:first-child::before {content: '';width: 1px;height: 100%;background: #000;position: absolute;bottom: -70px;left: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}
.headspa-cam .treatment .indicator li:first-child::after {content: "";position: absolute;bottom: -13px;left: 86px;width: 1px;height: 12px;background: #111;border-radius: 3px;transform: rotate(140deg);transform-origin: left bottom;}
.headspa-cam .treatment .indicator li:nth-child(2) {width: fit-content;margin: 0 auto 60px;padding: 8px 20px;}
.headspa-cam .treatment .indicator li:last-child { margin-bottom: 0; }
.headspa-cam .treatment .indicator li:last-child::before {content: '';width: 1px;height: 100%;background: #000;position: absolute;top: -32px;left: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}
.headspa-cam .treatment .indicator li:last-child::after {content: "";position: absolute;top: -25px;left: 86px;width: 1px;height: 12px;background: #111;border-radius: 3px;transform: rotate(40deg);transform-origin: left bottom;}

.headspa-cam .recommend { margin-bottom: 80px; }
.headspa-cam .recommend .midashi04 { margin-bottom: 60px; }
.headspa-cam .recommend .midashi04 span { display: block; }
.headspa-cam .recommend .midashi04 .jp { margin-left: 0; }
.headspa-cam .recommend .in { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-start; align-items: flex-start; -webkit-flex-wrap: wrap; flex-wrap: wrap; position: relative; }
.headspa-cam .recommend img { width: 380px; }
.headspa-cam .recommend .info-cam { width: 520px; }
.headspa-cam .recommend .menu-title { margin-bottom: 30px; padding-left: 28px; color: #281706; font-size: 26px; font-family: var(--mincho); font-weight: bold; position: relative; }
.headspa-cam .recommend .menu-title .en { font-size: 120%; font-family: var(--mincho); font-weight: bold; line-height: 1.4; }
.headspa-cam .recommend .menu-title::before {content: '01';color: #bdb5ad;font-size: 15px;font-family: var(--mincho);letter-spacing: .05rem;position: absolute;top: -8px;left: 2px;z-index: 99999;}
.headspa-cam .recommend .menu-title span { display: block; font-size: 18px; }
.headspa-cam .recommend .recommend_box { margin-bottom: 140px; position: relative; }
.headspa-cam .recommend .recommend_box:nth-of-type(2) { padding-bottom: 20px; }
.headspa-cam .recommend .recommend_box:last-child { margin-bottom: 80px; }
.headspa-cam .recommend .recommend_box::after { content: ''; width: 90%; height: 0.5px; background: #000; position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); }
.headspa-cam .recommend .recommend_box:last-child::after { display: none; }
.headspa-cam .recommend .recommend_box:nth-of-type(2) .menu-title::before { content: '02'; }
.headspa-cam .recommend .recommend_box:nth-of-type(3) .menu-title::before { content: '03'; }
.headspa-cam .recommend_box dl { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 0.5px dashed #281706; }
.headspa-cam .recommend_box dt { width: fit-content; margin-bottom: 4px; padding: 4px 8px; color: #281706; font-weight: bold; border: 0.5px solid #281706; }
.headspa-cam .recommend_box .price dd p { margin-bottom: 0; color: #b23b3b; font-size: 30px; font-family: var(--mincho); font-weight: bold; }
.headspa-cam .recommend_box .price dd span {padding: 7px 10px;color: #fff;font-size: 80%;font-family: var(--gothic); font-weight: bold;line-height: 1;background: #b23b3b;}
.headspa-cam .recommend_box .price .tax { color: #000; font-size: 90%; font-family: var(--gothic); }
.headspa-cam .recommend_box img { margin-bottom: 40px; }
.headspa-cam .recommend_box .btn { width: 340px; text-align: center; background-position: 315px 14px; }
.headspa-cam .recommend_box .deco { margin-bottom: 20px; position: absolute; bottom: -20px; right: 160px;  display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.headspa-cam .recommend_box:nth-of-type(2) .deco {left: -430px;bottom: -28px;}
.headspa-cam .recommend_box:nth-of-type(3) .deco {right: 20px;bottom: 30px;}
.headspa-cam .recommend_box:nth-of-type(2) .deco span.l02 { margin: 2px 16px 0; }
.headspa-cam .recommend_box .deco span { margin: 0 20px; display: inline-block; font-size: 26px; font-family: var(--mincho); position: relative; }
.headspa-cam .recommend_box .deco span.body { margin: 0 18px; }
.headspa-cam .recommend_box .deco span.l02 { margin: 0 16px; text-align: center; line-height: 1; }
.headspa-cam .recommend_box .deco span::after { content: ''; height: 100px; width: 100px; border: 0.5px solid #281706; border-radius: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);  }

.headspa-cam .deco-items { width: 100%; }
.headspa-cam .deco-item { width: 960px; margin: 90px 0 50px 15px; padding: 12px 0 10px; opacity: 0.2; }
.headspa-cam .deco-item p { color: #635215; font-size: 50px; font-family: var(--mincho); text-align: center; letter-spacing: 0.01rem; }

/* sp
------------------------------------------------------------------*/
@media screen and (max-width: 736px) {

.pc { display: none; }
.sp { display: block; }

.headspa-cam { width: 90%; margin: 0 auto; }
.headspa-cam .hero .midashi01 .jp { font-size: 4.2vw; }
.headspa-cam .midashi04 { font-size: 6vw; margin-bottom: 6vw; line-height: 1.4; }
.headspa-cam .midashi04 .en {display: block;margin-bottom: 0;font-size: 8vw;}
.headspa-cam .midashi04 .jp {margin-left: 0;font-size: 5vw;}

.headspa-cam .intro {width: 100%;margin: 0 auto 10vw;}
.headspa-cam .intro::after {height: 14vw;bottom: -18vw;}
.headspa-cam .intro img {width: 80%;margin: 0 auto 8vw;}
.headspa-cam .intro-content { width: 100%; margin: 0; }
.headspa-cam .intro-content .lead { margin-bottom: 5vw; font-size: 5vw; }
.headspa-cam .intro-content .intro-text { margin-bottom: 6vw; font-size: 3.5vw; }
.headspa-cam .contact-area {width: 100%;margin: 0 auto 14vw;}
.headspa-cam .intro .btn { width: 90%; margin: 0 auto; padding: 3vw 6vw; color: #fff; text-align: center; background-position: bottom 5px right 15px; background-size: 30px; }
.headspa-cam .focus .btn { width: 86%; background-position: bottom 35px right 5px; background-size: 30px; }

.headspa-cam .treatment { margin-bottom: 12vw; }
.headspa-cam .treatment .flex { -webkit-align-items: flex-start; align-items: flex-start; }
.headspa-cam .treatment .treatment-contents { padding: 6vw 4vw; }
.headspa-cam .treatment .treatment-contents li { margin-bottom: 4vw; padding-bottom: 2vw; font-size: 3.6vw; }
.headspa-cam .treatment .indicator { width: 22%; margin: 2% 0 0 -2%; }
.headspa-cam .treatment .indicator li {margin-bottom: 32vw;padding: 6%;}
.headspa-cam .treatment .indicator li:first-child {margin-bottom: 15vw;padding: 6%;}
.headspa-cam .treatment .indicator li:first-child::before { height: 80%; bottom: -70px; }
.headspa-cam .treatment .indicator li:first-child::after { bottom: -9px; left: 37px; }
.headspa-cam .treatment .indicator li:nth-child(2) { width: fit-content; margin: 0 auto 15vw; padding: 6% 12%; }
.headspa-cam .treatment .indicator li:last-child { margin-bottom: 0; }
.headspa-cam .treatment .indicator li:last-child::before { height: 80%; top: -30px; }
.headspa-cam .treatment .indicator li:last-child::after { top: -23px; left: 36px; }

.headspa-cam .recommend { margin-bottom: 14vw; }
.headspa-cam .recommend .midashi04 { margin-bottom: 8vw; }
.headspa-cam .recommend img { width: 100%; }
.headspa-cam .recommend .info-cam { width:100%; }
.headspa-cam .recommend .menu-title { margin-bottom: 4vw; padding-left: 5vw; font-size: 6vw; }
.headspa-cam .recommend .recommend_box:nth-of-type(3) .menu-title { margin-bottom: 8vw; }
.headspa-cam .recommend .menu-title::before { font-size: 3.5vw; top: -4vw; left: 1vw;}
.headspa-cam .recommend .menu-title span { font-size: 4vw; }
.headspa-cam .recommend .recommend_box {margin-bottom: 14vw;padding-bottom: 10vw;}
.headspa-cam .recommend .recommend_box::after { content: ''; width: 90%; bottom: -40px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); }
.headspa-cam .recommend .recommend_box:nth-of-type(2) { padding-bottom: 10vw; }
.headspa-cam .recommend dl { margin-bottom: 4vw; }
.headspa-cam .recommend dt { margin-bottom: 2vw; padding: 2vw 4vw; }
.headspa-cam .recommend .price dd p { margin-bottom: 2vw; font-size: 5.8vw; }
.headspa-cam .recommend .price dd span { padding: 2vw 4vw; }
.headspa-cam .recommend img { margin-bottom: 8vw; }
.headspa-cam .recommend .btn {width: 90%;position: absolute;bottom: -15vw; background-size: 30px; background-position: center right 15px; }
.headspa-cam .recommend_box .in .info-image { order: -1; }
.headspa-cam .recommend_box .deco {display: none;}
.headspa-cam .recommend .recommend_box:last-child { margin-bottom: 0; }
.headspa-cam .recommend_box .deco span {margin: 0 5vw;display: inline-block;font-size: 4vw;font-family: var(--mincho);position: relative;}
.headspa-cam .recommend_box .deco span.body {margin: 0 3vw;}
.headspa-cam .recommend_box .deco span.l02 {margin: 0 1vw;text-align: center;line-height: 1;}
.headspa-cam .recommend_box .deco span::after {content: '';height: 16vw;width: 16vw;border: 0.5px solid #281706;border-radius: 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}

.headspa-cam .deco-item {width: 130vw;margin: 0 0 5vw;font-size: 10vw;overflow: hidden;}
.headspa-cam .deco-item p {font-size: 8.5vw;line-height: 1.2;}

}