@charset "UTF-8";

html {
    font-size: 100%;
}

* {
    box-sizing: border-box;
}

body {
    font-family:"Jaro", Arial, sans-serif, Helvetica ;
    font-size: 0.9em;
    color:#444;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

img {
    width: 100%;
    object-fit: cover;
    vertical-align: bottom;
}

a {
    text-decoration: none;
    color:#444;

}

li{
    list-style:none;
}

h1{
    font-size:2rem;
}

h2{
    font-size:1.5rem;
}

p {
    line-height:2rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*header*/
header{
    height:80px;
}

.menu {
    z-index:10;
    display: flex;
    justify-content: space-between;
    align-items:center;
    width:100%;
    padding:8px 80px;
    position: fixed;
    top:0;
    background-color: #ffffff;
    z-index:20;
}

.header_logo{
    display: flex;
    justify-content: flex-start;
}
.header_logo img{
    max-width: 60px;
    height:auto;
}
.icon img{
    max-width:40px;
    height:auto;
}

nav ul {
    list-style: none;
    display:flex;
    justify-content: flex-start;
    padding: 0 16px;
}
nav ul ul{
    display: block;
    padding:0;
}
nav ul li{
	position: relative;
}
nav ul li a{
    display:block;
    text-decoration:none;
    padding:8px 16px;
    transition: all .3s;
}
nav ul li li a{
    padding:10px 16px;
}
nav ul li a:hover{
    color:grey;
}
nav ul li.has-submenu > a {
    position: relative;
    padding-right: 24px; 
}
nav ul li.has-submenu > a::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    pointer-events: none;
}
nav li.has-submenu ul{
    position:absolute;
    left:0;
    top:100%;
    margin-top:6px;
    z-index:4;
    background-color:#ffffff;
    width:180px;
    border-radius: 5px;
    box-shadow: 2px 2px 4px grey;
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease;
}
nav li.has-submenu:hover > ul,
nav li.has-submenu ul li:hover > ul,
nav li.has-submenu:active > ul,
nav li.has-submenu ul li:active > ul{
    visibility: visible;
    opacity: 1;
}
nav li.has-submenu ul li a{
	border-bottom:1px solid rgba(128, 127, 127, 0.6);
}
nav li.has-submenu ul li:last-child > a{
    border-bottom:none;
}
nav li.has-submenu ul li a:hover,
nav li.has-submenu ul li a:active{
	background-color:rgb(248, 243, 243);
    width:100%;
}

.icon ul{
    display:flex;
    justify-content: flex-end;
    align-items: center;
    gap:24px;
}
.icon a:hover img{
    transform: scale(1.1);
    transition: 0.3s ease;
}

/*hbg-non responsive*/
.hbg-button{
    opacity:0;
    visibility: hidden;
    }
.nav-mask{
        text-align: center;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top:0;
        left:0;
        visibility: hidden;
        z-index:10;
        transition: 0.8s ease;
        opacity:0;
    }

/*main*/
.mainvisual img{
    width:100%;
    object-fit: cover;
    height: calc(100vh - 80px);
    display: block;
}
.mainvisual{
    width:100%;
    height:calc(100vh - 80px);
    position:relative;
}

.slick-dots {
    position: absolute;
    bottom: 20px; /*dot-position*/
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.slick-dots li button:before {
    color: #ccc; /* dot-color*/
    font-size: 12px;
    opacity: 0.75;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
    color: #ffd400; /* active-dot*/
}
.slick-slide{
    margin:0;
}
.slick-slide img {
    width: 100%;
    object-fit: cover;
    height: calc(100vh - 80px);
}

.catch_phrase h2 span {
    display: block;
    font-size: 5.5rem;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards;
}
.catch_phrase h2 span:nth-child(1) {
    animation-delay: 0.3s;
}
.catch_phrase h2 span:nth-child(2) {
    color: #ffd400;
    font-weight: bold;
    animation-delay: 0.9s;
}
.catch_phrase h2 span:nth-child(3) {
    animation-delay: 1.5s;
}
@keyframes fadeUp { 
    from {
    transform: translateY(20px);
    opacity: 0;
    }
    to {
    transform: translateY(0);
    opacity: 1;
    }
}
.catch_phrase{
    position:absolute;
    bottom:5%;
    left:10%;
}
.catch_phrase h2{
    font-size: 5rem;
    text-shadow:
    0 0 8px rgba(161, 158, 158, 0.6),  
    0 0 20px rgba(122, 121, 121, 0.4); 
    color:#ffffff;
}

.badge-inner{
position: fixed;
z-index: 3;
right: 20px;
bottom: 20px;
width: 180px;
height: 180px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #ffffff;
font-weight: bold;
transition: all 3s;
}
.badge {
    position: fixed;
    z-index: 2;
    right: 20px;
    bottom: 20px;
    background: url(../img/Icon_Book.png) no-repeat center;
    background-size: cover;
    width:180px;
    height:180px;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 3s;
}
.rotateRightZ {
    animation-name: rotateRightZAnime;
    animation-duration: 10s;
    animation-fill-mode: forwards;
}
@keyframes rotateRightZAnime{
0%{
    transform:rotateZ(0);}

    100%{
        transform:rotateZ(360deg);
    }
}

/*About*/
#about {
    text-align: center;
    padding:120px;
    position:relative;
}

.eng_title_about p{
    font-size:6.5em;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight:900;
    position:absolute;
    top: 20px;
    right:0;
    letter-spacing: 0;
    -webkit-text-stroke: 4px #ffd400;
    color:#ffffff;
}

.about-contents h2 {
    padding-top: 18px;
    padding-bottom: 16px;
    text-align: center;
    font-size: 2rem;
}
.about-contents p {
    word-break: keep-all;
    text-align: center;
    line-height: 2rem;
}

.about-contents {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 1.2s ease;
}
.about-contents.fadein {
    opacity: 1;
    transform: translateY(0);
}
@keyframes fadeUpAnime{
    from {
        opacity: 0;
        transform: translateY(30px);
        }
    
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*features*/
#features {
    padding: 50px 0 120px 80px;
    position:relative;
    background-color:#ffd400;
}
.feature-contents {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 1.2s ease;
}
.eng_title_feature p{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size:7em;
    font-weight:900;
    letter-spacing: 0;
    color:#ffffff;
    position:absolute;
    top:32px;
    left:0;
    writing-mode: vertical-lr;
}
#features h2 {
    text-align: center;
    padding-bottom: 50px;
    font-size: 2.2rem;
}
#features h3 {
    line-height: 1.3em;
    padding: 16px 24px 0;
    font-size: 1.5rem;
}

.feature-contents.fadein {
    opacity: 1;
    transform: translateY(0);
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(30px);
    }

to {
    opacity: 1;
    transform: translateY(0);
}
}

#features ul { 
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 20px;
}
#features li{
    text-align: center;
    background-color:#ffffff;
    border-radius: 20px;
    min-height: 450px;
    display: flex;
    flex-direction: column;
}
#features article {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.feature-details {
    min-height: 180px; 
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.zoomOut img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.4s ease-in-out;
}
.zoomOut a:hover img{
	transform: scale(1.1);
}
.zoomOut {
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.feature-details p{
    padding: 24px 24px;
    line-height: 2em;
    overflow-wrap: break-word;
}
.btnarrow4{
	position: relative;
    display: inline-block;
	padding: 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
}
.btnarrow4::before{
    content: '';
	position: absolute;
    bottom:-8px;
    left:15%;  
    width: 85%;
    height: 1px;
	background:#333;
    transition: all .3s;
}
.btnarrow4::after{
    content: '';
	position: absolute;
    bottom:-3px;
    right:0;
    width: 15px;
    height:1px;
	background:#333;
    transform: rotate(35deg);
    transition: all .3s;
}
.btnarrow4:hover::before{
    left:20%;
}
.btnarrow4:hover::after{
    right:-5%;
}
.view-more {
    margin-top: auto; /* 最下部に配置 */
    padding-bottom: 24px; /* ボタン下の余白調整 */
}

/*before_after*/
.before-after {
    background: #f7f7f7;
    padding: 60px 20px 80px;
    position:relative;
}

.before-after-title h2{
    text-align: center; 
    color:#444;    
    margin-bottom: 40px; 
    font-size:2em;
    padding-top:40px;
}

.eng_title_before-after p{
    font-size:6em;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight:900;
    position:absolute;
    top: 20px;
    right:0px;
    letter-spacing: 0;
    -webkit-text-stroke: 4px #ffd400;
    color:#ffffff;
}

.before-after-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.before-after-slider {
    width: 420px; 
    position: relative;
    overflow: hidden; 
    border-radius: 8px;
}

.slides {
    display: flex;
    width: 100%;
    transition: 0.5s;
}

.slide {
    width: 100%;
    flex-shrink: 0;
}

.slide img {
    width: 100%;
    height:auto;
    max-height:450px;             
    object-fit: cover; 
    object-position: center 10%;      /* 切らずに収める */
    border-radius: 8px;
    background-color: #eee;  
}

/* ラジオボタン非表示 */
input[type="radio"] {
    display: none;
}

  /* スライド切り替え */
#slide1:checked ~ .slides {
    transform: translateX(0%);
}
#slide2:checked ~ .slides {
    transform: translateX(-100%);
}
#slide3:checked ~ .slides {
    transform: translateX(-200%);
}

  /* 手動ナビゲーション（ドット） */
.navigation-manual {
    text-align: center;
    margin-top: 10px;
}

.navigation-manual label {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #bbb;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

input#slide1:checked ~ .navigation-manual label[for="slide1"],
input#slide2:checked ~ .navigation-manual label[for="slide2"],
input#slide3:checked ~ .navigation-manual label[for="slide3"] {
    background: #ffd400;
}

  /* text */
.before-after-text {
    width: 420px;
    padding: 10px;
}
.before-after-text p {
    font-size: 1.6em;
    line-height: 1.8em;
    color: #333;
    margin-bottom: 1.2em;
}
.before-after-text p strong {
    color: #222;
    font-weight: 600;
}
.before-after-text .case {
    background: #fffbe6;
    border-left: 5px solid #ffd400;
    padding: 10px 15px;
    border-radius: 4px;
}

/*追加２Case分*/
.before-after-case {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: 40px auto;
    padding-bottom: 40px;
}

.before-after-image-single {
    width: 420px;
    flex-shrink: 0;
}

.before-after-image-single img {
    width: 100%;
    height:auto;
    max-height: 450px;
    border-radius: 8px;
    background-color: #eee;
    object-position: center 10%;  
}
.before-after-text p.case.case-text {
    font-size: 1.5em;
    line-height: 1.7em;
    padding: 8px 12px;
}

/*facility*/
#facility {
    padding:80px 120px 100px;
    display:flex;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 1.2s ease;
    position:relative;
}
.eng_title_facility p{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size:7em;
    font-weight:900;
    letter-spacing: 0;
    color:#ffd400;
    position:absolute;
    top:40px;
    right:-1%;
    writing-mode: vertical-lr;
}

#facility.fadein {
    opacity: 1;
    transform: translateY(0);
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(30px);
    }

to {
    opacity: 1;
    transform: translateY(0);
}
}
.facility-wrap{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:24px;
}

.facility_details{
    width:100%;
    margin-right: 24px;
    background-color: #ffffff;
    box-shadow: 0px 0px 20px #444;
    padding:24px;
    height: 350px;
    border-radius: 5px;
}
.facility_details h2{
    text-align:center;
    margin-bottom: 32px;
}
.facility_details p{
    line-height: 2em;
    margin-bottom:32px;
}

#facility .facility_details::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 23em;
    background-color:#ffd400;
    border-radius: 5px;
    right: 25%;
    top: 20%;
    z-index: -1;
}

.facility_photo{
    width:100%;
    min-height:350px;
    background:url(../img/Equipement4.jpg) no-repeat center;
    background-size: cover;
    margin-left: 24px;
    margin-top:100px;
    border-radius: 5px;
}


/*trainers*/
#trainers {
    padding: 80px;
    background-color: #ffd400;
    position: relative;
}

.eng_title_trainer p{
    font-size: 6.5em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 900;
    position: absolute;
    top: 20px;
    left: 0px;
    letter-spacing: 0;
    -webkit-text-stroke: 4px #ffffff;
    color: #ffd400;
}

.trainers-details {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 1.2s ease;
}

.trainers-details.fadein {
    opacity: 1;
    transform: translateY(0);
}

    @keyframes fadeUpAnime {
    from {
    opacity: 0;
    transform: translateY(30px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
}

.trainer-details-title h2 {
    text-align: center;
    padding-bottom: 50px;
    padding-top: 20px;
    font-size:2.5rem;
}

#trainers ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 36px;
}

.trainers-details li {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background-color: #fff;
    height: 460px; 
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    perspective: 1000px; 
}
/*
.trainers-details li:hover {
    transform: translateY(-8px);
}*/

.card {
    display: block;
    width: 100%;
    height: 100%;
}

.card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width:100%;
    object-fit: cover;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    position: relative;
    border-radius: 12px;
}

.card:hover .card-inner {
    transform: rotateY(180deg); 
}

.card-front,
.card-back {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.card-front img {
    width:70%;
    height:auto;
    min-height:340px;
    object-fit:contain;
    margin-bottom:20px;
    flex-shrink: 0;
}

.comingsoon img {
    width:70%;
    height:auto;
    margin-bottom:20px;
    flex-shrink: 0;
    border-radius: 8px 8px 0 0;
}

.card-front h2 {
    margin: 0;
    font-size: 2em;
}

.card-front p {
    margin: 0;
    font-size: 1.5em;
    color: #666;
}

.card-back {
    background-color:#444;
    color: #fff;
    transform: rotateY(180deg); 
    font-size: 1.5em;
    text-align: center;
    width:100%;
}

/*training*/
#training {
    padding: 80px;
    position: relative;
}

.eng_title_training p{
    font-size: 6.5em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 900;
    position: absolute;
    top: 0px;
    right: 0px;
    letter-spacing: 0;
    -webkit-text-stroke: 4px #ffd400;
    color: #ffffff;
    writing-mode: vertical-lr;
}

.training-details-title h2{
    text-align: center;
    margin-bottom: 32px;
    font-size: 2rem;
}

.training-details{
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

.training-details ul {
    width:100%;
    max-width:840px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin:0 auto;
    padding:0;
}

.training-details li {
    display: flex;
    align-items: flex-start;
    border:4px solid #ffd400;
    border-radius: 8px;
    width:100%;
}

.step-number {
    font-size: 2em;
    font-weight: bold;
    margin: 24px;
    color: #fff;
    background: #ffd400;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.step-content {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
    justify-content: space-between;
}

.step-content img {
    width: 240px;
    height: 160px;
    object-fit: cover;
    border-radius: 0 5px 5px 0;
    flex-shrink: 0;
}

.step-content img.last {
    object-fit: contain;
    background-color: #f0eded;
}

.step-content h3 {
    margin: 0 0 8px;
    font-size: 1.5em;
}

.step-content span {
    font-size: 0.9em;
}

.step-content p {
    margin: 0;
    font-size: 1em;
}

.training_button {
    text-align: center;
    margin-top: 48px;
}

.training_button a {
    font-size: 1.5em;
    font-weight: 600;
    padding: 14px 28px;
    background-color:rgb(4, 185, 4);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.training_button a:hover {
    background-color:rgb(54, 173, 54);
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/*partnership*/
.partnership{
    background-color:#f7f7f7;
    padding:40px 0;
}

.partnership h2{
    text-align: center;
    padding: 24px 0;
    font-size: 2rem;
}

.partner-logos {
    text-align: center;
}

.logo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding:0 120px;
}

.logo-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
    background-color:#ffffff;
    padding:10px;
    box-sizing: border-box;
}

.logo-container img:hover {
    transform: scale(1.1);
}

.logo {
    width: 120px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    padding: 10px;
    box-sizing: border-box;
}

/*contact*/
#contact {
    padding:0px 120px 32px;
}

#contact h2{
    text-align: center;
    padding:32px 0;
    font-size: 2rem;
}
#contact h3{
    font-size:1.4em;
}

.address {
    text-align: center;
}

.dm{
    text-align:center;
}

.QR{
    display:flex;
    justify-items: center;
    gap:24px;
    flex-wrap:wrap;
    justify-content: center; 
    margin:24px auto;
}
.QR img{
    width: 200px !important;
    height: 200px !important;
    object-fit: contain;
}

#contact ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:0;
    width:160px;
    margin: 0 auto;
}

#contact ul li{
    line-height: 1.5em;
}

.icon-contact img{
    width:40px;
    height:40px;
}

@keyframes icons {
    0% {
    transform: scale(1);
    }

    100% {
    transform: scale(1.2);
    }
}

.icon-contact a:hover img{
    animation: icons 0.3s forwards;
}

/*footer*/
footer {
    background-color: #f8f8f8;
    padding: 20px 0;
    text-align: center;
}

footer small {
    font-size: 0.9rem;
    color: #777;
}

/*===========下層PAGE==========*/
/*Trainers page*/
.trainer-main img{
width:100vw;
height: calc(100vh - 250px);
}

.greeting{
    width:90%;
    margin: 0 auto;
    padding-bottom:30px;
}

.greeting h2{
    text-align: center;
    margin-top:30px;
}

.greeting p{
    text-align: center;
    line-height:1.8em;
    font-size:1.3em;            
    max-width: 100%;           
    word-break: break-word;
}

/*intro trainers*/
.trainer-intro1 {
    padding:16px 36px;
    background-color: #ffffff;
    border-radius: 0 12px 12px 0px;
    height: 450px;
}

/*gahiko*/
.gahiko_detail {
    position:relative;
    background-color: #ffd400;
    padding:120px 80px 40px 80px;
}

.gahiko-title h2{
    font-size:6.5em;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight:900;
    position:absolute;
    top: 0px;
    left:0%;
    letter-spacing: 0;
    -webkit-text-stroke: 4px #ffffff;
    color:#ffd400;
}
.introduction {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 0px; 
    align-items: start; 
}
.trainer_photo1 img {
    max-width: 100%; 
    height: 450px;
    border-radius: 12px 0 0 12px;
}
.trainer-intro1 h3{
    padding: 16px;
    text-align: center;
    font-size:1.4rem;

}
.trainer-intro p{
    padding-bottom: 16px;
    line-height:1.5em;
    word-wrap: normal;
}
.four-photos1{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    padding-bottom:40px;
    margin-left: 80px;
    transform: translateY(-25px);
    margin-bottom:100px;
}
.four-photos1 img{
    width:100%;
    height:280px;
    border-radius: 8px;
}

/*adam*/
.adam_detail{
    background-color: #ffd400;
    padding:120px 80px 40px 80px;
    position:relative;
}
.adam-title h2{
    font-size:6.5em;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-weight:900;
    position:absolute;
    top: 0px;
    right:0%;
    letter-spacing: 0;
    -webkit-text-stroke: 4px #ffffff;
    color:#ffd400;
}
.introduction2 {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 0px; 
    align-items: start; 
    position:relative;
}
.trainer_photo2 img {
    max-width: 100%; 
    height: 450px;
    border-radius: 12px 0 0 12px;
}

.trainer-intro2 {
    background-color: #ffffff;
    border-radius: 0 12px 12px 0px;
    height: 450px;
}
.trainer-intro2 h3{
    text-align: center;
    padding:16px;
    font-size:1.4rem;
}
.trainer-intro2 p {
    padding:0 16px;
    font-size: clamp(0.85em, 1vw + 0.5em, 1em);
    font-size:0.9em;
    font-weight: 100;
    padding-bottom: 16px;
    line-height:2em;
}

.four-photos {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding-bottom:30px;
    margin-left: 80px;
    transform:translateY(-25px);
}

.four-photos img{
    width:100%;
    height:280px;
    border-radius: 8px;
}

/*Service page*/
.wrapper-sub{
    padding: 0 20px;
    margin: 0 auto;
    box-sizing: border-box;
    max-width: 1200px;
}
#service {
    padding: 60px 0px;
}

#service h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 40px;
}

.plans {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.plan-img{
    border-radius: 12px;
    padding: 24px;
}
.plan-img img{
    width: 100%;
    height: auto;
    min-height:220px;
    object-fit: cover;
    border-radius:12px;
    transition: transform 0.5s ease;
}

.plan-card:hover img {
    transform: scale(1.05);          
}

.plan-text {
    padding: 16px;
    text-align: center;
}
.plan-card h3 {
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.plan-card p {
    font-size: 1rem;
    line-height: 1.8;
}
/* 注釈文 */
.attention {
    text-align: center;
    font-weight: 600;
    font-style: italic;
    padding: 40px 0;
    color: #333;
}

.attention a {
    color: #d10000;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.attention a:hover {
    color: #000;
}

  /* アニメーションの初期状態と定義 */
.plan-card {
    background-color: #ffd400;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transform: translateY(20px);
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
    transition: transform 0.3s ease;
    border-radius: 12px;
}

.plan-card:nth-child(2) {
    animation-delay: 0.2s;
}
.plan-card:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    to {
    transform: translateY(0);
    opacity: 1;
    }
}

.plan-card:hover {
    transform: scale(1.03);
}

.plan-img img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-radius:12px;
}

.plan-card:hover img {
    transform: scale(1.05);
}

/*Facility*/
.facility-introduction {
    text-align: center;
}

.facility-introduction h2{
    padding: 32px 0 16px 0;
}
.equipment-caption h3{
    font-size:1.2rem;
    padding-bottom:16px;
}
.facility-introduction p{
    line-height: 1.5em;
}

.facility-introduction p:last-child{
    padding-bottom:16px;
}

.slider {
    width:94%;
    margin:0 auto;
}

.slider img {
    width:60vw;
    height:auto;
    max-height: 450px;
}

.slider .slick-slide {
	transform: scale(0.8);
	transition: all .5s;
	opacity: 0.5;
}

.slider .slick-slide.slick-center{
	transform: scale(1);
	opacity: 1;
}

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    height: 15px;
    width: 15px;
}

.slick-prev {
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
    text-align:center;
	margin:0px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0px 5px;
}

/*
ul.slick-dots li button{
    color: transparent;
    outline: none;
    width:10px;
    height:10px;
    display:block;
    border-radius:50%;
    background-color:#ccc;
    padding:0;
}

ul.slick-dots li.slick-active button{
    background-color:#ffd400;
}*/

.slider li {
    text-align: center;
    margin-bottom: 40px;
}

.equipment-caption {
    background-color: #f9f9f9;
    padding: 16px;
    margin-top: 16px;
    border-radius: 8px;
    max-width: 60vw;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.equipment-caption h2 {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
}

.equipment-caption p {
    font-size: 0.95em;
    color: #555;
    line-height: 1.4em;
}

.facility-slider .slick-dots {
    position: relative;
    bottom: auto;
    margin-top: 40px; 
}

/*======responsive=======*/
@media(max-width: 1024px) {
    .nav {
        opacity:0;
        display:none;
    }

    .icon{
        opacity: 0;
    }

    .menu {
        z-index:10;
        display: flex;
        justify-content: space-between;
        align-items:center;
        width:100vw;
        position: fixed;
        top:0;
        background-color: #ffffff;
        z-index:20;
        padding: 8px 32px;
    }
    .header_logo {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    #navi ul {
        flex-direction: column;
        align-items: center;
    }

    /*hbg not open*/
    .hbg-button {
        height: 32px;
        width: 32px;
        cursor: pointer;
        position: relative;
        z-index: 30;
        position: fixed;
        top: 24px;
        right: 32px;
        transition: 0.3s;
        opacity:1;
        visibility: visible;
    }
    .hbg-button span{
        width:32px;
        height: 3px;
        display: block;
        background-color: black;
        border-radius: 2px;
        position: absolute;
        transition: 0.3s;
        }
    .hbg-button span:first-child{
        top:0;
    }
    .hbg-button span:nth-child(2){
        top:12px;
    }
    .hbg-button span:last-child{
        top:24px;
    }
    
    /*open*/
    .open .hbg-button span:first-child{
        top: 12px;
        transform: rotate(225deg);
    }
    .open .hbg-button span:nth-child(2){
        opacity: 0;
    }
    .open .hbg-button span:last-child{
        top: 12px;
        transform: rotate(-225deg);
    }
    .open .hbg-button span{
        background-color: white;
    }
    .open .mask {
        background-color: black;
        opacity: 0.8;
        width: 100vw;
        height: 100vh;
        cursor: pointer;
        transition: 0.3s;
        position:fixed;
        top: 0;
        left:0;
        z-index:20;
    }
        
    .open .nav-mask {
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top:0;
        left:0;
        visibility: visible;
        z-index:10;
        transition: 0.8s ease;
        opacity:1;
        line-height: 2em;
    }
    .open .nav-mask li a{
        color: white;
    }

    /*mainvisual*/
    .catch_phrase {
        left: 5%; 
    }
    .catch_phrase h2 span {
        font-size: 4rem; 
    }
    
    .badge,
    .badge-inner {
        width: 140px;  
        height: 140px;
        right: 16px;
        bottom: 16px;
    }
    /*about*/
    #about {
        padding: 80px 40px; 
    }
    .eng_title_about p {
        font-size: 5.5em; 
        -webkit-text-stroke: 3px #ffd400; 
        top: 15px; 
    }

    /*features*/
    #features {
        padding: 40px 20px 80px 40px; 
    }
    .eng_title_feature p {
        font-size: 4.5em; 
        top: 20px;         
        left: 8px;
    }
    #features h2 {
        padding-bottom: 40px;
        font-size: 2rem;
    }
    #features ul {
        grid-template-columns: 1fr 1fr; 
        column-gap: 16px;
        row-gap: 40px;
    }

    #features li {
        min-height: 400px; 
    }
    /*before-after*/
    .eng_title_before-after p {
        font-size: 4.5em; 
        top: 8px;
        right: 0px;
        -webkit-text-stroke: 2px #ffd400;
        }
        /*facility*/

    #facility {
        padding: 60px 40px;
      }
    

    
      .facility_details,
      .facility_photo {
        margin: 0;
        width: 100%;
      }
    
      .facility_photo {
        margin-top: 40px; 
        min-height: 250px;
      }
    
      .eng_title_facility p {
        font-size: 5em;
        top: 20px;
        right: 0;
    }
    /*trainers*/
    #trainers {
        padding: 60px 40px;
    }
    
    #trainers ul {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .eng_title_trainer p {
        font-size: 4.5em;
        top: 10px;
        -webkit-text-stroke: 3px #ffffff;
    }
    
    .trainer-details-title h2 {
        font-size: 2rem;
        padding-bottom: 30px;
    }

    .card-front img {
        width:60%;
        height:auto;
        min-height:340px;
        object-fit:contain;
        margin-bottom:20px;
        flex-shrink: 0;
    }
    /*trainings*/
    .eng_title_training p {
        font-size: 4.5em;
        top: 20px;
        right:0px;
      }
    

    #training {
        padding-left: 40px;
    }

    .step-content h3 {
        margin: 0 0 8px;
        font-size: 1.3em;
    }
    .step-content p {
        margin: 0;
        font-size: 0.9em;
    }
    .plans {
        grid-template-columns: repeat(2, 1fr);
        }
        #about {
            padding:80px;
        }
    /*trainers page*/
    .four-photos,
    .four-photos1 {
    grid-template-columns: repeat(2, 1fr);
    margin-left: 40px;
    margin-bottom:100px;
    }

    .four-photos img,
.four-photos1 img {
    width: 100%;
    height: 280px;
    object-fit: contain;
    background-color: #f8f8f8; 
    border-radius: 8px;
}

    .trainer-intro1 p {
        font-size: 0.9em;
        line-height: 2em;
    }
    .trainer-intro2 p {
        font-size: 0.85em;
        line-height: 1.8em;
    }
    .gahiko_detail {
        position:relative;
        background-color: #ffd400;
        padding:120px 40px 40px 40px;
    }
    .adam_detail {
        position:relative;
        background-color: #ffd400;
        padding:120px 40px 40px 40px;
    }
}

@media(max-width:830px){
    /*trainer page*/
    .trainer-intro1 p {
        font-size: 0.8em;
    }
    .trainer-intro2 p {
        font-size: 0.8em;
    }
}
        
@media (max-width: 768px) {
    .menu {
        padding: 8px 16px;
    }
    /*mainvisual*/
    .catch_phrase {
        left: 4%;
        bottom: 4%;
      }
    
      .catch_phrase h2 {
        font-size: 3rem; 
      }
    
      .catch_phrase h2 span {
        font-size: 3.5rem; 
      }
    
      .badge,
      .badge-inner {
        width: 120px;  
        height: 120px;
        right: 12px;
        bottom: 12px;
      }
      /*about*/
    #about {
        padding: 60px 20px; 
    }
    .eng_title_about p {
        font-size: 4.5em; 
        -webkit-text-stroke: 2.5px #ffd400;
        top: 12px;
    }
    .about-contents h2 {
        font-size: 1.7rem; 
    }
    .about-contents p {
        font-size: 0.95rem; 
        line-height: 1.6rem; 
    }
    /*features*/
    #features {
        padding: 30px 16px 60px 16px; 
    }
    .eng_title_feature p {
        font-size: 4.5em; 
        top: 0;
        left: -16px;
        writing-mode: horizontal-tb; 
        position: relative;
        margin-bottom: 16px;
        color: #ffffff; 
        -webkit-text-stroke: 1px transparent; 
    }

    #features h2 {
        font-size: 1.6rem;
        padding-bottom: 30px;
    }
    #features ul {
        grid-template-columns: 1fr; 
        gap: 24px;
    }
    #features li {
        min-height: auto; 
    }
    #features h3 {
        font-size: 1.3rem;
        padding: 12px 16px 0;
    }
    .features-details p {
        font-size: 0.95rem;
        padding: 16px 16px 24px;
        line-height: 1.5em;
    }

    /*before-after*/
    .before-after {
    padding: 60px 16px 40px;
    }

  /*＊縦並びスライダー */
    .before-after-container {
    flex-direction: column;
    gap: 24px;
    row-gap: 8px; 
    } 

  .before-after-slider,
  .before-after-text {
    width: 100%;
    max-width: 500px;  
  }

  .slide img,
  .before-after-image-single img {
    width: 100%;
    height: auto;
    object-fit: cover; 
    object-position: center; 
  }

  /*＊テキストサイズ調整 */
  .before-after-text p,
  .before-after-text p.case.case-text {
    font-size: 1.2em;
    line-height: 1.5em;
  }

    .before-after-case {
    flex-direction: column;
    gap: 24px;
    padding-bottom: 16px;
    margin: 16px auto;
    }

    .before-after-image-single {
    width: 100%;
    max-width: 500px;
    }

  /*＊背景文字サイズ調整 */
    .eng_title_before-after p {
    font-size: 4em; 
    top: 8px;
    right: 0px;
    -webkit-text-stroke: 2px #ffd400;
    }

  /*＊見出し中央に */
    .before-after-title h2 {
    font-size: 1.6em;
    padding-top: 24px;
    }

    .facility-wrap{
        gap:8px;
        display: flex;
        flex-direction: column-reverse;
    }
    #facility .facility_details::after {
        content: '';
        position: absolute;
        width: 50%;
        height: 23em;
        background-color:#ffd400;
        border-radius: 5px;
        right: 25%;
        top: 20%;
        z-index: -1;
        }
    .facility_photo{
        width:100%;
        min-height:350px;
        background:url(../img/Equipement4.jpg) no-repeat center;
        background-size: cover;
        margin-left: 0px;
        margin-top:8px;
        border-radius: 5px;
    }
    .card-front {
        overflow: hidden;
        padding: 20px;
        box-sizing: border-box;
      }

/*trainers*/
    #trainers {
    padding: 40px 20px;
    }

    #trainers ul {
        grid-template-columns: 1fr;
        gap: 24px;
        padding:0 20px;
    }
    .trainers-details li {
        width: 85%;
        margin: 0 auto;
        height: auto;
        min-height: 460px; 
    }
    .card-front {
        padding: 20px;
        box-sizing: border-box;
    }
    .card-front img {
        width: 100%;
        max-width:400px;
        height:auto;
        max-height:280px;
        object-fit:contain;
        margin-bottom:20px;            
        flex-shrink: 0;
        overflow: hidden;
    }
    
    .eng_title_trainer p {
        font-size: 3.5em;
        top: 8px;
        -webkit-text-stroke: 2.5px #ffffff;
    }

    .trainer-details-title h2 {
        font-size: 1.8rem;
        padding-bottom: 20px;
    }

    .step-content h3 {
        margin: 0 0 8px;
        font-size: 1.1em;
    }
    .step-content p {
        margin: 0;
        font-size:0.8em;
    }
    /*service page*/
    .plans {
        grid-template-columns: repeat(2, 1fr);
    }

    /*trainer page*/
    .trainer-intro1 p {
        font-size: 0.75em;
    }
    .trainer-intro2 p {
        font-size: 0.7em;
    }

}
@media(max-width: 750px) {
    #training {
      padding: 40px 20px; 
    }
  
    .eng_title_training p {
      font-size: 3.2em; 
      top: 10px;        
      right: 0;
      writing-mode: horizontal-tb; 
      text-align: right;
      -webkit-text-stroke: 2px #ffd400; 
    }
  
    .training-details ul {
      gap: 24px; 
    }
  
    .training-details li {
      padding: 0;             
      overflow: hidden;  
      align-items: stretch;
      width: 100%;  
      border: none;    
    }
  
    .step-number {
      font-size: 1.4em;    
      width: 36px;         
      height: 36px;
      margin: 0 auto 12px; 
    }
  
    .step-content {
    flex-direction: column; 
    gap: 0;                 
    align-items: stretch;  
    width: 100%;  
    padding-left:16px;        
    }

    .step-content p{
        padding-bottom:8px;
    }
  
    .step-content img {
      width: 100%;            
      height: auto;           
      max-height: 200px;      
      object-fit: cover;      
      border-radius: 6px;
      padding-bottom:24px;     
    }
  
    .step-content img.last {
      object-fit: contain;      
      background-color: #f0eded;
      max-height: 160px;        
    }



  /*【＊】数字デザイン調整 */
  .step-number {
    font-size: 1em;
    font-weight: bold;
    background: #ffd400;
    color: #fff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
  }
  

  .step-content span {
    font-size: 0.85em;
  }

  .step-content p {
    font-size: 0.9em;
    line-height: 1.6em;
  }

  .training_button {
    margin-top: 64px;
    margin-left: 40px;
  }

  .training_button a {
    font-size: 1.2em;
    padding: 10px 20px;
  }
  }

@media(max-width:672px){
    /*features*/
    .facility_details {
        padding: 16px;
        height: auto;
      }
    
      .facility_details h2 {
        font-size: 1.6rem;
        margin-bottom: 20px;
      }
    
      .facility_details p {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 24px;
      }
    
      .eng_title_facility p {
        font-size: 3.5em;
        top: 10px;
        right: -6%;
      }
    
      .facility_photo {
        min-height: 200px;
      }
    /*trainers*/
    /*===SmartPhone====*/
        /* ホバー時の回転アニメーションを無効化 */
        .card:hover .card-inner {
        transform: none;
        }
        /* 裏面カードは非表示にして、常に表側のみ表示 */
        .card-back {
        display: none !important;
        }
    .introduction {
        display: grid;
        grid-template-columns: 1fr; 
        gap: 0px; 
        align-items: start; 
    }
    .introduction2 {
        display: grid;
        grid-template-columns: 1fr; 
        gap: 0px; 
        align-items: start; 
    }
    .trainer_photo img {
        max-width: 100%; 
        height: 450px;
        border-radius: 12px;
    }
    .trainer-intro1 {
        background-color: #ffffff;
        border-radius:12px;
        height: auto;
    }
    .trainer-intro2 {
        background-color: #ffffff;
        border-radius:12px;
        height: auto;
    }
    .trainer-intro1 p {
        font-size: 1em;
        line-height:2em;
        height:auto;
    }
    .trainer-intro2 p {
        font-size: 1em;
        line-height: 1.4em;
    }
    .gahiko-title h2,
    .adam-title h2 {
      font-size: 4em;
    }
}

@media (max-width:430px){
    .menu{
        position: relative;
    }
    .hbg-button{
    position: absolute;
    top:36px;
    right: 16px;
    transform: translateY(-50%);
    z-index: 999；
}

    /*mainvisual*/
    .catch_phrase h2 span {
        font-size: 2.2rem; 
      }
    
      .catch_phrase h2 {
        font-size: 2rem;
      }
    
      .badge,
      .badge-inner {
        width: 90px;  
        height: 90px;
        right: 32px;
        bottom: 72px;
      }
     /*about*/
     #about {
        padding: 40px 16px; 
    }

    .about-contents h2 {
        font-size: 1.4rem;
    }
    .about-contents p {
        font-size: 0.9rem;
        line-height: 1.4rem;
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
    }
    .wrapper{
    max-width: 100%; 
    box-sizing: border-box;
    }

    /*service page*/
    .plans {
        grid-template-columns: 1fr;
    }
    .trainer-intro1 p,
    .trainer-intro2 p {
      font-size: 0.95em;
    }
    .trainer_photo1 img {
        border-radius: 12px 12px 0 0;
    }

    .trainer_photo2 img {
        border-radius: 12px 12px 0 0;
    }

    .trainer-intro1{
        border-radius: 0 0 12px 12px;
    }
    .trainer-intro2{
        border-radius: 0 0 12px 12px;
    }

}