@charset "UTF-8";

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
汎用
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
html, body, div, span, object, iframe, article, aside, canvas, details, pre, figcaption, figure,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, input, textarea, select, button, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {font-size: 14px;}

/*sp限定*/
.pc, .tablet {display: none!important;}

/*コンテナ*/
.container {width: calc(100% - 32px); max-width: 640px;}

@media screen and (min-width: 679px) {
	.container {max-width: 98%;}
}

/*改行用inline-block*/
.i-b {display: inline-block;}

/*--------------------------------------------------------------------------
部品
--------------------------------------------------------------------------*/
/*------------------------------------
汎用見出し
------------------------------------*/

body.fixed {position: fixed; width: 100%; height: 100%;}

/*------------------------------------
logo_loader
------------------------------------*/
#logo_loader .f_logo {width: 90%; max-width: 400px; animation: loadLogoSp 3s forwards;}
#logo_loader .f_logo:before {opacity: 0;}
@keyframes loadLogoSp {0% {opacity: 0;} 20% {opacity: 0;} 50% {opacity: 1;}}

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {position: relative; z-index: 4;}
header #hamburger {width: 50px; height: 50px; position: fixed; top: 0px; right: 0px; padding: 15px 0; background: #d35017; box-sizing: border-box; flex-direction: column; justify-content: space-between; align-items: center; z-index: 9002;}
header #hamburger:hover {cursor: pointer;}
header #hamburger div {position: absolute; width: 26px; height: 2px; left: 50%; margin-left: -13px; background: #fff; border-radius: 3px; transition: .5s ease;}

header #hamburger div:nth-child(1) {top: 12px; transition-delay: .5s,0s;}
header #hamburger div:nth-child(2) {top: 22px; transition: opacity .3s ease .5s;}
header #hamburger div:nth-child(3) {top: 32px; transition-delay: .5s,0s;}
.open-drawer header #hamburger div {transition-delay: 0s,.5s;}
.open-drawer header #hamburger div:nth-child(1) {top: 22px; transform: rotate(45deg);}
.open-drawer header #hamburger div:nth-child(2) {opacity: 0;}
.open-drawer header #hamburger div:nth-child(3) {top: 22px; transform: rotate(-405deg);}

header .container {width: 100%; max-width: 800px; height: 100vh; margin: 0; position: fixed; top: 0; right: 0; transform: translateX(100%); transition: .5s ease;}
.open-drawer header .container {transform: translateX(0);}
header .inner {height: 100vh; flex-direction: column; justify-content: center; background: rgb(255 255 255 / 95%);}

header .site-title {width: 240px; margin-bottom: 10px;}

header nav#global-nav ul {margin: 40px 0 30px;}
header nav#global-nav ul {flex-direction: column;}
header nav#global-nav ul li {margin-bottom: 12px;}
header nav#global-nav ul li a {padding: 5px; font-size: 20px;}

header .inner .contact {max-width: 100%; padding: 10px 30px; box-sizing: border-box; font-size: 20px;}

@media screen and (min-width: 640px) {
	header #nav-drawer #global-nav {max-width: 360px; margin: 0 auto 5vh;}
	header #nav-drawer #global-nav ul li {margin: 15px 0;}
	header #nav-drawer .info {padding: 1.375em 7.5% 1.5em;}
	header #nav-drawer .info .office-info .address br {display: none;}
}

/*--------------------------------------------------------------------------
トグルヘッダー
--------------------------------------------------------------------------*/
.toggle-header {display: none;}

/*--------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------*/
footer {padding: 45px 0 0;}
footer .container {display: flex; flex-direction: column; align-items: center;}

footer .inner-box {flex-direction: column; align-items: center;}

footer .inner-box .site-logo {display: block; width: 280px; max-width: 100%; margin-bottom: 30px;}
footer .inner-box .site-name {font-size: 1.5em; margin-bottom: 10px;}
footer .inner-box .address {text-align: center;}

footer .inner {display: flex; flex-direction: column; align-items: center;}
footer .inner .office-info {margin-bottom: 20px; display: flex; flex-direction: column; align-items: center;}
footer .inner .office-info h3 {font-size: 18px;}
footer .contact-area .contact-banner {margin-bottom: 20px;}
footer .contact.tel {width: 262px; max-width: 100%; margin: 0 auto;}
footer .contact-area .contact.tel a {margin-bottom: 30px; font-size: 24px;}
footer .contact-area .contact.tel a:before {width: 32px; height: 25px;}
footer .socials {margin-bottom: 30px;}
footer .socials img {width: 30px;}
footer .site-map {margin: 0 0 30px 40px;}
footer .site-map ul {flex-direction: column;}
footer .site-map ul li {font-size: 18px;}
footer .copyright {padding: 16px 0 16px; font-size: 10px;}

@media screen and (min-width: 640px) {
	footer .site-map.flex {flex-direction: row;}
}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*------------------------------------
ロゴ
------------------------------------*/
.logo-wrap {width: calc(100% - 50px); height: 60px; padding: 10px 0; display: flex; align-items: center; justify-content: center;}
.logo-wrap.sp .logo {height: 90%; width: auto;}

/*------------------------------------
HERO HERDER
------------------------------------*/
#lp #top-slider .top-silder-item .img {padding-top: 66.6666%;}
#lp #top-slider .top-silder-item .img img {top: 0;}
#lp #top-slider .top-silder-item .txt-wrap .txt {letter-spacing: 2px;}

@media screen and (min-width: 550px) {
	#lp #top-slider .top-silder-item .txt-wrap .txt {font-size: 28px;}
}
@media screen and (min-width: 440px) and (max-width: 549px) {
	#lp #top-slider .top-silder-item .txt-wrap .txt {font-size: 22px;}
}
@media screen and (min-width: 330px) and (max-width: 439px) {
	#lp #top-slider .top-silder-item .txt-wrap .txt {font-size: 18px;}
}
@media screen and (max-width: 329px) {
	#lp #top-slider .top-silder-item .txt-wrap .txt {font-size: 16px;}
}

/*------------------------------------
感染予防について
------------------------------------*/
#lp .temporary {padding: 5vh 0;}
@media screen and (max-width: 440px) {
	#lp .temporary .container {width: 100%; max-width: 100%;}
}

/*------------------------------------
お悩みをお持ちではありませんか
------------------------------------*/
#lp .your-worries {background: #fff;}
#lp .your-worries img.sp {width: 100%;}
#lp .your-worries .deco {display: none;}

/*------------------------------------
解決できます
------------------------------------*/
#lp .solution .sec-title-wrap .sec-title {margin: 50px 0 30px;}

#lp .solution .sec-title-wrap .sec-title .bg-orange {width: 180px; margin-left: -90px; padding: 8px 0; top: -24px; font-size: 20px;}
#lp .solution .sec-title-wrap .sec-title .bg_gray {max-width: 400px; padding: 28px 0 12px; font-size: 22px;}
#lp .solution .sec-title-wrap .sec-title .bg_gray .large-txt {margin-right: 3px; font-size: 36px;}

#lp .solution .solution-list {flex-direction: column;}
#lp .solution .solution-list li {margin-bottom: 40px;}
#lp .solution .solution-list li .list-title, #lp .solution .solution-list li .details {max-width: 600px; margin: 0 auto;}
#lp .solution .solution-list li .list-title {font-size: 22px; letter-spacing: 4px;}
#lp .solution .solution-list li .list-title span {margin-right: 10px; font-size: 22px;}
#lp .solution .solution-list li .details {font-size: 18px; line-height: 1.7;}

@media screen and (min-width: 760px) {
	#lp .solution .solution-list-wrap {overflow-x: scroll;}
	#lp .solution .solution-list-wrap::-webkit-scrollbar {height: 10px; background: #eee; border-radius: 5px;}
	#lp .solution .solution-list-wrap::-webkit-scrollbar-thumb {height: 10px; background: #2e2418; border-radius: 5px;}
	#lp .solution .solution-list {min-width: 1020px; flex-direction: row; justify-content: space-between;}
	#lp .solution .solution-list li {width: 32%;min-width: 260px;}
	#lp .solution .solution-list li .list-title ,
	#lp .solution .solution-list li .list-title span {font-size: 20px;}
	#lp .solution .solution-list li .details {font-size: 16px;}
}
@media screen and (max-width: 760px) {
	#lp .solution .solution-list li .contents-img{height: 220px;}
	#lp .solution .solution-list li{margin-right: 0 !important;}
}
@media screen and (max-width: 329px) {
	#lp .solution .sec-title-wrap .sec-title .bg-orange {width: 160px; font-size: 15px;}
	#lp .solution .sec-title-wrap .sec-title .bg_gray {font-size: 18px;}
	#lp .solution .sec-title-wrap .sec-title .bg_gray .large-txt {font-size: 30px;}
}

/*------------------------------------
会社概要
------------------------------------*/
#lp .about-us {padding: 10vh 0 5vh;}
#lp .about-us {margin-top: -1px;}
#lp .about-us .deco.about-us-top {top: -1vh;}
#lp .about-us .sec-title {width: 520px; max-width: 100%; margin: 0px auto 4vh; padding: 20px 4px; box-sizing: border-box; font-size: 18px; letter-spacing: 2px;}

@media screen and (min-width: 679px) {
	#lp .about-us {padding: 20vh 0 10vh;}
	#lp .about-us .sec-title {margin: 0px auto 7vh; font-size: 20px; letter-spacing: 6px;}
}

@media screen (min-width: 330px) and (max-width: 400px) {
	#lp .about-us .sec-title {font-size: 16px; letter-spacing: 3px;}
}
@media screen and (max-width: 329px) {
	#lp .about-us .sec-title {font-size: 15px; letter-spacing: 1.2px;}
}

/*------------------------------------
entry
------------------------------------*/
#lp .sec-title.type01 {margin-bottom: 50px;}
#lp .sec-title.type01 .en {margin: 30px 0 5px; font-size: 70px; letter-spacing: 8px;}
#lp .sec-title.type01 .ja {font-size: 20px; letter-spacing: 4px;}

#lp .sec-sec-title.type01 .ja {font-size: 24px; letter-spacing: 4px;}
#lp .sec-sec-title.type01 .en {letter-spacing: 4px;}

#lp .entry {padding: 40px 0 120px;}
#lp .entry .entry-flow .entry-flow-list {flex-direction: column;}
#lp .entry .entry-flow .entry-flow-list li {width: 320px; max-width: 100%; height: 320px; margin: 0 auto 90px; padding: 66px 30px 30px;}
#lp .entry .entry-flow .entry-flow-list li .icon_arrow {bottom: -50px;}
#lp .entry .entry-flow .entry-flow-list li .icon_arrow img {width: 20px; transform: rotate(90deg);}

#lp .entry .rate-plan .sec-sec-title.type01 {margin-bottom: 40px;}
#lp .entry .rate-plan .plan-list-wrap {margin-bottom: 20px; padding-top: 30px; overflow-x: auto;}
#lp .entry .rate-plan .payment-list li {margin-bottom: 10px; line-height: 1.7;} 
/* 2025/02/05変更 */
/* #lp .entry .rate-plan .plan-list-wrap::-webkit-scrollbar {height: 10px; background: #eee; border-radius: 5px;}
#lp .entry .rate-plan .plan-list-wrap::-webkit-scrollbar-thumb {height: 10px; background: #2e2418; border-radius: 5px;}
#lp .entry .rate-plan .plan-list-wrap .plan-list {min-width: 1060px;}
*/

@media screen and (min-width: 679px) {
	#lp .sec-title.type01 {margin-bottom: 100px;}
	#lp .entry .entry-flow .sec-sec-title.type01 {margin-bottom: 40px;}
	#lp .entry .entry-flow .entry-flow-list {display: none;}
	#lp .trainer .trainer-list li.trainer-list-item:not(:last-child) {margin-bottom: 120px;}
	#lp .entry .entry-flow .step123.tablet {display: block!important; margin-bottom: 60px; padding-top: 39.7%;}
	#lp .entry .entry-flow .step123.tablet img {top: 0;}
	#lp .entry {padding: 60px 0 150px;}
	#lp .entry .rate-plan .payment-list {width: 640px; margin: 0 auto 30px;}
}
/* 2025/02/05変更 */
@media screen and (max-width: 420px) {
	#lp .entry .rate-plan .plan .plan-title {height: 70px;}
	#lp .entry .rate-plan .plan .yearly .plan_fee, #lp .entry .rate-plan .plan .monthly .plan_fee, #lp .entry .rate-plan .plan .daily .plan_fee {line-height: 1.1;}
	#lp .entry .rate-plan .plan .group.yearly, #lp .entry .rate-plan .plan .m-d {padding: 12px 0;}
	/* #lp .entry .rate-plan .plan-list-wrap .plan-list {padding: 0 calc(50vw - 140px);}
	#lp .entry .rate-plan .plan-list .list-item .plan-title {height: 70px;}
	#lp .entry .rate-plan .plan-list .list-item .yearly .plan_fee, #lp .entry .rate-plan .plan-list .list-item .monthly .plan_fee, #lp .entry .rate-plan .plan-list .list-item .daily .plan_fee {line-height: 1.1;}
	#lp .entry .rate-plan .plan-list .list-item .group.yearly, #lp .entry .rate-plan .plan-list .list-item .m-d {padding: 12px 0;}
	#lp .entry .rate-plan .plan-list .list-item .target {height: 60px;}
	#lp .entry .rate-plan .plan-list .list-item .strength {height: 120px;} */
}

/*------------------------------------
Trainer トレーナー
------------------------------------*/
#lp .trainer {margin-top: -2px; padding: 10px 0 40px;}
#lp .trainer .trainer-list-item {flex-direction: column;}

#lp .trainer .trainer-list {max-width: 400px; margin: 0 auto;}
#lp .trainer .trainer-list .trainer-list-item:nth-child(odd) .figure .number {left: 0%;}
#lp .trainer .trainer-list .trainer-list-item .figure .svg.photo {width: 87%;}
#lp .trainer .trainer-list .trainer-list-item:nth-child(odd) .figure .svg.photo {margin: 22px 0% 0 auto;}
#lp .trainer .trainer-list .trainer-list-item .figure .caption {width: 67.4%; max-width: 257px; bottom: -40px;}
#lp .trainer .trainer-list li .white-back {font-size: 20px;}
#lp .trainer .trainer-list li .profile .position li,
#lp .trainer .trainer-list li .profile .position li span {font-size: 22px;}
#lp .trainer .trainer-list li .profile .profile-list dt {width: 74px; font-size: 18px;}
#lp .trainer .trainer-list li .profile .profile-list dd {width: calc(100% - 74px); font-size: 18px;}
#lp .trainer .trainer-list li .profile .message {font-size: 18px; line-height: 1.7;}

@media screen and (min-width: 679px) {
	#lp .trainer .trainer-list {max-width: 640px;}
	#lp .trainer .trainer-list li .profile .profile-list dd .sp {display: none;}
}

/*------------------------------------
User's voice
------------------------------------*/
#lp .users-voice .deco.users-voice-left-side {left: 2%;}
#lp .users-voice .sec-title {margin: 60px 0 20px;}
#lp .users-voice .sec-title span {display: block; text-align: center;}
#lp .users-voice .sec-title .ja {font-size: 36px; letter-spacing: 10px;}
#lp .users-voice .sec-title .en {font-size: 20px;}
#lp .users-voice #users-voice-slider li dl {max-width: 350px; margin: 0 auto;}
#lp .users-voice #users-voice-slider li dl .number-area {margin-bottom: 20px; padding-left: 5px;}
#lp .users-voice #users-voice-slider li dl .number-area .number:before {width: 50px; left: -21px;}
#lp .users-voice #users-voice-slider li dl dd {height: 320px; position: relative;}
#lp .users-voice #users-voice-slider li dl dd .c-voice-h {font-size: 22px;}
#lp .users-voice #users-voice-slider li dl dd .c-voice {font-size: 18px;}
#lp .users-voice #users-voice-slider li dl dd .c-profile {width: calc(100% - 1em); bottom: 0; font-size: 18px;}
#lp .users-voice #users-voice-slider.slick-dotted.slick-slider {padding-bottom: 40px;}
#lp .users-voice #users-voice-slider .slick-dots {bottom: 0;}
#lp .users-voice #users-voice-slider .slick-dots li {margin: 0 8px;}
#lp .users-voice #users-voice-slider .slick-dots li button:before {font-size: 18px;}

@media screen and (min-width: 680px) {
	#lp .users-voice .deco.users-voice-left-side {height: 81%; top: 5%; opacity: .3!important;}
	#lp .users-voice #users-voice-slider .slick-list.draggable:before {content: ""; width: calc(50vw - 50%); height: 100%; display: block; background: #fff; position: absolute; right: 100%; z-index: 2;}
	#lp .users-voice .u-v-inner {padding-left: 160px;}
	#lp .users-voice #users-voice-slider {width: 48%; min-width: 330px;}
	#lp .users-voice #users-voice-slider .slick-list.draggable {overflow: visible;}
	#lp .users-voice #users-voice-slider li dl {padding: 0 7% 30px;}
	#lp .users-voice #users-voice-slider li dl dd {height: 380px;}
	#lp .users-voice #users-voice-slider .slick-dots {margin-left: 17vw;}
}
@media screen and (min-width: 441px) and (max-width: 679px) {
	#lp .users-voice .deco.users-voice-left-side {height: 88%; top: 3%; z-index: -1; opacity: .3!important;}
}
@media screen and (max-width: 440px) {
	#lp .users-voice .deco.users-voice-left-side {height: 96%; top: 0;}
	#lp .users-voice .deco.users-voice-left-side {opacity: .3!important; z-index: -1;}
}
@media screen and (max-width: 339px) {
	#lp .users-voice #users-voice-slider li dl dd {height: auto;}
	#lp .users-voice #users-voice-slider li dl dd .c-voice-h {font-size: 21px;}
	#lp .users-voice #users-voice-slider li dl dd .c-profile {bottom: -3em;}
}

/*------------------------------------
Contact お問い合わせ
------------------------------------*/
#lp .contact {
	background-position: 65% 50%;
}
#lp .contact .inner .message {margin-bottom: 30px; font-size: 18px;}
#lp .contact .inner .contact-btn .svg.phone {margin: 0 8px 0 2px;}
#lp .contact .inner .contact-btn .phone-number {font-size: 26px;}

@media screen and (max-width: 470px) {
	#lp .contact .inner .message {max-width: 265px;}
}
@media screen and (max-width: 400px) {
	#lp .contact .inner .contact-btn {max-width: 96%;}
	#lp .counter-measures .counter-measures-list li span {font-size: 14px; line-height: 1.2;}
}

/*------------------------------------
Access 店舗情報
------------------------------------*/
#lp .access {padding-bottom: 40px;}
#lp .access .inner {max-width: 540px; margin: 0 auto; padding-bottom: 20px; flex-direction: column;}
#lp .access table thead, #lp .access table thead th {width: 146px;}
#lp .access table th, #lp .access table td {font-size: 18px;}
#lp .access .inner .access-info-wrap {margin-bottom: 80px;}
#lp .access .address-wrap .marker-icon {width: 28px;}
/*#lp .access .inner .google-map .frame {padding-top: 100%;}*/
#lp .access .inner .google-map-wrap {width: 100%; height: 50vh; max-height: 600px;}
#lp .access .inner .google-map-wrap .open-google-map {width: 190px; max-width: 100%;}

@media screen and (min-width: 679px) {
	#lp .access {padding-bottom: 60px;}
	#lp .access table {margin: 0 auto 20px;}
	#lp .access table thead, #lp .access table thead th {width: 147px;}
	#lp .access .google-map {margin: 0 auto;}
}
@media screen and (max-width: 400px) {
	#lp .access .address-wrap .marker-icon {width: 26px;}
}

/*------------------------------------
新型コロナウイルス感染予防対策について
------------------------------------*/
#lp .counter-measures {padding: 60px 0;}
#lp .counter-measures .sec-title {margin-bottom: 30px; font-size: 20px;}
#lp .counter-measures p {margin-bottom: 40px; font-size: 16px; line-height: 1.7;}
#lp .counter-measures .counter-measures-list {margin: 0 auto; flex-wrap: wrap; justify-content: space-between;}
#lp .counter-measures .counter-measures-list li {width: 49.5%; margin-bottom: 1%;}
#lp .counter-measures .counter-measures-list li.fadeInLeft:nth-child(2n) {animation-delay: .2s}

@media screen and (min-width: 679px) {
	#lp .counter-measures .counter-measures-list {flex-wrap: nowrap;}
}
@media screen and (max-width: 340px) {
	#lp .counter-measures .sec-title {position: relative; letter-spacing: 4px; text-align: center;}
	#lp .counter-measures .sec-title:before {left: 100%; position: absolute;}
	#lp .counter-measures .sec-title:after {position: absolute; right: 100%;}
}

/*--------------------------------------------------------------------------
404.php
--------------------------------------------------------------------------*/
#notfound h2, #notfound h3 {text-align: center;}
@media screen and (min-width: 840px) {
	#notfound {padding: 90px 0;}
	#notfound ul {max-width: 100%; flex-wrap: nowrap;}
	#notfound ul li {width: 24%;}
	#notfound ul li a {font-size: 18px;}
}
@media screen and (max-width: 839px) {
	#notfound {padding: 40px 0;}
	#notfound ul {max-width: 420px; margin: 0 auto; flex-wrap: wrap;}
	#notfound ul li {margin-bottom: 4px;}
	#notfound ul li a {font-size: 20px;}
}
@media screen and (min-width: 440px) and (max-width: 839px) {
	#notfound ul li {width: calc(50% - 2px);}
}
@media screen and (max-width: 440px) {
	#notfound ul {max-width: 210px;}
	#notfound ul li {width: 100%;}
}