/* 基本CSS */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: #4e440a;
}
body {
     font-family: "Kosugi", sans-serif;
}
ul {
	list-style: none;
}
a{
	font-weight: 600;
	margin: 0 15px;
}
a:hover{
	color: #20b2aa;
}
h1 {
	font-size: 40px;
	color: #262626;
}
p {
	padding-bottom: 12px;
}
span {
	font-size:1.2em;
	padding: 0 5px;
	color: #f2cb05;
}
section {
	padding: 60px 0;
}
iframe{
	width: 100%;
}


img {
    max-width: 100%; /* 親要素の幅を超えない */
    height: auto;    /* 縦横比を維持 */
}


/* ヘッダー */
header {
 	width: 100%;
	background-color: #fff;
}
.title{
	width: 100%;
	max-width: 330px; /* でも330pxよりは大きくしない */
    	margin: 0 auto;
    	padding: 10px 0; /* 少し上下に余裕を持たせると綺麗です */
}

/* コンテンツ */
.site-title{
 	width: 100%;
	margin: 0 auto;
}

.container{
	max-width: 1200px; /* 1200pxまでは広がる */
    	width: 95%;        
    	margin: 0 auto;    /* 中央寄せ */

}
section h2, .txcenter{
	text-align: center;
	margin-bottom: 30px;
	font-size: 3.6em;
}
#sec3{
  	background-color: #f2f0e4;
 /* 左上(0,0)、右上(100,0)、右下(100,80)、左下(0,100)の順で結ぶ */
 clip-path: polygon(0 95%, 0 0, 100% 0, 100% 95%, 50% 100%);
}

#sec4{
background: linear-gradient(135deg, #e0c3fc 0%, #fad0c4 50%, #ffd1ff 100%);
clip-path: polygon(100% 90%, 49% 100%, 0 90%, 0 0, 100% 0);
}

#sec5{
	background-image: url('images/back.jpg');
    	background-size: cover;
    	display: flex;
    	justify-content: center;
    	align-items: center;
	background-attachment: fixed;
	margin: 30px;
}


#sec2{
padding: 10px;
}

/* セクション1 */
/* 画像が画面幅いっぱいに広がるように調整 */
.site-title img {
  	width: 100%;
  	height: auto;
  	display: block; /* 下の隙間を消す */
}



 /* 無料体験申し込みボタン */

.btn-reservation {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: space-between;
  	width: 100%;
  	max-width: 500px;
	margin: 25px auto;
  	padding: 15px;
  	background: linear-gradient(135deg, #F2B441 0%, #D98E04 100%);
  	color: #fff;
  	text-decoration: none;
  	border-radius: 10px; /* 角丸 */
  	position: relative;
  	box-shadow:0 4px 15px rgba(242, 180, 65, 0.3);
  	transition: transform 0.2s;
}

.btn-sub-text {
	color: #ffffff;
  	font-size: 14px;
  	margin-bottom: 5px;
}

.btn-main-text {
	color: #ffffff;
  	font-size: 24px;
  	font-weight: bold;
}

 /* 悩みありませんかゾーン */
.item-box-wrap{
	display: flex;
  flex-wrap: nowrap; /* 折り返さない設定にする */
  justify-content: space-between; /* 均等に並べる */
  gap: 10px; /* カード同士の隙間（数値はお好みで） */
}
.item-box{
	background-color: #fff;
	border-radius: 15px;
	frex: 1;
	max-width: 350px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.2);
	margin: 20px auto;

 /* カードの幅設定 */
    	width: 100%;               /* 基本は100% */
    	max-width: 350px;          /* 最大350px */


	display: flex;
	flex-direction: column; /* 中身（チェック・見出し・画像）を縦に並べる */
    	align-items: center;    /* ★これで中身がすべて「横方向の中央」に揃います */
    	text-align: center;
    	padding: 20px;
	box-sizing: border-box;    /* パディングを含めたサイズ計算 */
}
.item-box h3{
   	display: flex;       /* 文字とチェックを横に並べる */
	align-items: center;       /* チェックと文字を垂直中央に */
	font-size: 1.2em;
	color: #4e440a;
 	justify-content: center;
}


.item-box h3::before {
  	content: "";
	flex-shrink: 0;      /* チェックが潰れないように */
 	width: 18px;  /* チェックのサイズ */
  	height: 18px;
  	margin-right: 8px; /* 文字との隙間 */
  	background-color: #2E7D32; /* チェックの色（緑） */
  /* チェックマークの形に切り抜き */
  	clip-path: polygon(14% 44%, 0 58%, 33% 91%, 100% 24%, 86% 10%, 33% 63%);
}


.item-box img{
	width: 50%;
	height: auto;              /* 縦横比維持 */
  	align-items: center;
}

 /* セクション2*/
.catchphrase-box{
	text-align: center;
  	font-weight: bold;
  	font-size: 1.5rem;
  	color: #333;
}

.arrow-down {
  	width: 0;
  	height: 0;
  	border-left: 20px solid transparent;
  	border-right: 20px solid transparent;
  	border-top: 20px solid #ff4b2b; /* ジムのアクセントカラー */
  	margin: 10px auto 0;
}

.catchphrase-box p{
	line-height: 1.8; /* 文字サイズの1.8倍の高さにする（おすすめ） */
}
.catchphrase-box span{
	color: #262626;
	background: linear-gradient(transparent 70%, #fff3b0 60%); /* 黄色のマーカー */
 	font-weight: bold;
}


 /* セクション3の並び方 */
.row{
	display: flex;
  flex-wrap: nowrap; /* 折り返さない設定にする */
  justify-content: center; /* 均等に並べる */
  gap: 20px; /* カード同士の隙間（数値はお好みで） */
width: 100%;
    max-width: 1200px;      /* コンテンツ全体の最大幅（お好みで） */
    margin: 0 auto;         /* 親自体を中央寄せ */
}

.text-box{
flex: 1;
	border-radius: 30px;
	padding: 40px 20px;
	background-color: #fff;
 	 border-radius: 15px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.2);
	margin: 20px auto;
box-sizing: border-box; /* パディングを含めた幅計算にする */
  
  /* 影を3段階で重ねる */
  	box-shadow:     	3px 4px 0 #333,
    	inset 0 4px 10px rgba(255,255,255,0.5); /* ③ 上側の「ハイライト（光）」 */
}

.text-box p{
	font-size:20px;
	padding: 10px;
	text-align: center;
}

.label {
  display: inline-block;
  background: #a68b5b; /* 濃いめの色 */
  color: #fff;
  padding: 2px 12px;
  font-size: 15px;
  border-radius: 4px;
  margin-bottom: 10px;
  font-weight: bold;
}

.text-box h3{
font-size: 22px;
  padding-bottom: 10px;
}

.image-box{
clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 55% 90%, 50% 100%, 45% 90%, 0 90%);

}



#sec3 h2,#sec5 h2{
	background: rgba(255, 255, 255, 0.8);
	padding: 5px;
}





/*--セクション4*/
.item-box-wrap2{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 50px; 
	align-items: stretch;
	 padding: 40px 20px; 
	gap: 10px;
	margin: 10px auto;
	max-width: 800px;         /* カードの最大幅（お好みで） */
}


.item-box2{
	background-color:#fff;
	display: flex;
	align-items: center;
	border-radius: 20px;
  	padding: 10px; /* カード内の余白 */
	margin: 10;

	box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.step-image{
	flex:1;
}

.step-image img {
  width: 100%;              /* 親要素の幅いっぱいに広げる */
  height: auto;
  display: block;
	border-radius: 20px;
}



.item-box2 h3{
	min-height: 50px;
  	display: flex;
 	 align-items: center; /* 短いタイトルでも中央に来るように */
  	justify-content: center;
  	color: #0071bc;
  	font-weight: bold;
  	margin: 5;
  	padding: 5px;
	font-size:25px;
background: linear-gradient(transparent 50%, #fff3b0 60%); /* 黄色のマーカー */
}
.step-text{
flex: 1;                  /* 写真より少し広めにスペースを確保 */
  text-align: center;
  	line-height: 1.5;
  	padding: 10px;
}


/*--セクション5*/
.voice-container{
width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央寄せ */
}

.voice-box{
display: flex;
padding: 10px;
  gap: 10px;
width: 100%;
  max-width: 700px; 
}

.voice-box.reverse{
flex-direction: row-reverse;
}

.voice-text{
flex: 1;
background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  line-height: 1.6;
    display: flex;
    align-items: center;     /* 上下の中央 */
    justify-content: center; /* ★左右の中央（これを追加！） */
    text-align: center;      /* 念のためテキスト自体も中央揃えに */

}

.voice-text p{
margin: 0; 
    padding: 0;
text-align: center;
}


.voice-image {
  flex-shrink: 0;
  position: relative;
}
.voice-image img {
  width: 100px;
  height: 100px;
  border-radius: 15px; /* 角丸 */
  object-fit: cover;
  border: 4px solid #fff;
}

/* ピンクの丸バッジ（名前と年齢） */
.age-badge {
  position: absolute;
  bottom: -18px;
  right: -10px;
  background: #e91e63; /* 濃いピンク */
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.2;
}


/*--セクション6*/


.item-box-wrap3 {
  	display: flex;
flex-wrap: wrap;       /* ★折り返しを許可 */
justify-content: center;
    	gap: 20px;
width: 100%;
    	padding: 20px 10px;    /* 左右の余白 */
}
.item-box3 {
    	width: calc((100% - 80px) / 3); 
    	box-sizing: border-box; /* 枠線や余白を含めて計算 */
	/* --- ここから浮かせたデザインの指定 --- */
    	background-color: #ffffff;    /* 箱の背景を白にする */
    	border-radius: 12px;         /* 角を少し丸くする */
   	 padding: 30px 20px 20px;              
    
    /* 影の設定：右に0、下に4px、ぼかし10px、色は黒の透明度10% */
    	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
	position: relative;    /* ラベルの基準位置にする */
    	margin-top: 15px;      /* ラベルが上に飛び出す分の余白を確保 */
}


.item-box3 img {
  	width: 100%;
  	aspect-ratio: 3 / 2; /* 横3:縦2の比率で固定（必要に応じて調整） */
  	object-fit: cover;   /* 画像が歪まないように調整 */
	border-radius: 8px;
    	display: block;
}

.item-box3 h3{
	font-size: 1.2em;
	padding: 15px 15px;
	text-align: center;
	letter-spacing: -0.05em; /* 文字の間隔をわずかに詰めると入りやすくなります */
}

.item-box3 p{
	font-size: 1em;
	padding: 10px 15px;
	text-align: left;
	line-height: 1.6;      /* 行間を広げて読みやすく */
}
/* ラベル（STEPの部分） */
.step-label {
   	 position: absolute;    /* 親要素を基準に自由に配置 */
    	top: 0;                /* 一旦、親の真上に合わせる */
    	left: 50%;             /* 親の横幅50%の位置に配置 */
    	transform: translate(-50%, -50%); /* 自身の幅の半分戻して「中央」、高さの半分上げて「またぐ」 */
    	background-color: #f2cb05;
    	color: #ffffff;
    	font-size: 1em;
    	font-weight: bold;
    	padding: 5px 30px;     /* 横長にするために左右の余白を多めに */
    	border-radius: 50px;   /* カプセル型にする */
    	white-space: nowrap;   /* 改行を防ぐ */
}


/* セクション7 */
#sec

.QA{
    	background-color: #ffffff;    /* 箱の背景を白にする */
    	border-radius: 12px;         /* 角を少し丸くする */
   	padding: 30px 20px 20px;              
    
    /* 影の設定：右に0、下に4px、ぼかし10px、色は黒の透明度10% */
    	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    	margin-top: 15px;      /* ラベルが上に飛び出す分の余白を確保 */
overflow: hidden; /* 中身がはみ出ないように */
}

/* 質問部分（タップするところ） */
summary {
background-color:#ffffff;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
  list-style: none; /* デフォルトの三角形を消したい場合 */
  outline: none;
}

/* 答えの部分（開いた時だけ見える） */
.QA p {
  padding: 0 20px 20px;
  margin: 0;
   	background-color: #ffffff;
}

/* 三角形を自作する場合（おまけ） */
summary::before {
  content: "▼";
  margin-right: 10px;
  font-size: 0.8em;
}

#sec7{
background-color:#f2f0e4
}

/* セクション8 */



/* フッターー */
footer {
background: linear-gradient(135deg, #e0c3fc 0%, #fad0c4 50%, #ffd1ff 100%);
	padding: 60px 0;
	text-align: center;
}

/* 無料体験申し込みボタンラスト */

.btn-reservation-last {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: space-between;
  	width: 100%;
  	max-width: 500px;
	margin: auto;
  	padding: 15px;
background: linear-gradient(135deg, #F2B441 0%, #D98E04 100%);
  	color: #fff;
  	text-decoration: none;
  	border-radius: 10px; /* 角丸 */
  	position: relative;
  	box-shadow:rgba(242, 180, 65, 0.3);
  	transition: transform 0.2s;
}

.btn-sub-text-last {
	color: #ffffff;
  	font-size: 14px;
  	margin-bottom: 5px;
}

.btn-main-text-last {
	color: #ffffff;
  	font-size: 30px;
  	font-weight: bold;
}






/*	スマホCSS	*/
@media (max-width: 768px){
	.title{
	text-align: center;  /* 中の中身（ロゴ画像）を中央に寄せる */
  	width: 100%;         /* 親要素の幅をいっぱいにする */
	}
	.title img {
  	display: inline-block; /* text-alignを効かせるために必要 */
	}

	.site-title{
	  width:100%
	  padding: 15px;
	}
	 .item-box-wrap {
        margin: 20px 10px;     /* 外側の余白を狭める */
        flex-direction: column; /* 強制的に縦1列にする */
        align-items: center;
	}
    	　.item-box {
        max-width: 350px;       /* スマホ画面いっぱいに広げる */
	}
	section h2, .txcenter {
        font-size: 1.8em; /* スマホでは文字を小さく */
        margin-bottom: 20px;
	}

/* セクション3の話*/
	.row{
	   flex-direction: column !important; /* 強制的に縦並びに */
	margin-bottom: 70px;
        gap: 20px;
	}
	/* スマホでは全部「100%幅」にする */
    .text-box, .image-box {
        width: 92%;
	margin: 0px auto;
	}

    /* スマホでの文字サイズ調整 */
    .text-box {
        padding: 40px 20px; /* 余白をスマホサイズに */
	}



    .text-box p {
        font-size: 18px;
	}

/* セクション4の話*/
.item-box-wrap2 {
        flex-direction: column; /* ★縦並びに変更 */
        align-items: center;    /* ★中央寄せ */
        gap: 30px;              /* カード同士の上下の隙間 */
        padding: 40px 15px;     /* 左右のぎちぎちを解消 */
   	}

    .item-box2 {
        width: 100%;            /* ★幅をいっぱいにする */
        max-width: 350px;       /* PCと同じくらいのサイズで止める */
        flex: none;             /* ★横並び用の設定を解除 */
        margin: 0;              /* 余計なマージンをリセット */
    	}

    /* 文字サイズが大きすぎてはみ出す場合の微調整 */
    .item-box2 h3 {
        min-height: auto;       /* スマホでは高さ固定を解除 */
    }
    	
    .item-price {
        font-size: 24px;
        height: auto;           /* スマホでは高さ固定を解除 */
        margin: 15px 0;
    	}
/* セクション5〇の話*/
	.dami {
        flex-direction: column; /* ★スマホでは縦に並べる */
    	}

	#sec5 {
 /* 横位置 縦位置 の順で指定（% または px） */
    background-position: 60% 30%;
}

/* セクション6の話*/
	.item-box3 {
        width: 100%; /* 横幅いっぱいに広げて縦並びにする */
    	}

}