/* 基本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: #0F1821;
}
.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: #262626;

	position: relative;
  	background-color: #000;
  	overflow: hidden; /* はみ出た三角形を隠す */
	z-index: 1;
}
#sec3::before {
  	content: "";
  	position: absolute;
  	top: 80px;
  	left: 0;
 	 width: 100%;
  	height: 60%; /* 斜めパーツの縦幅（お好みで） */
  	background-color: #f2cb05;
  	clip-path: polygon(0 0, 60% 0, 70% 60%, 0 80%);
  	z-index: -1; /* 背景（黒）とコンテンツの間に挟む */
	filter: blur(30px); /* ぼかす */
  	
}

#sec3::after {
  	content: "";
 	 position: absolute;
  	bottom: 20px;
  	right: 0;
  	width: 40%;   /* 横幅 */
  	height: 50%;  /* 縦幅 */
  	background-color: #f2cb05; /* 下は少し暗めにすると奥行きが出ます */
  	clip-path: polygon(100% 0, 190% 150%, 0 60%); /* 右下の三角形 */
  	z-index: -1;
	filter: blur(30px); /* ぼかす */
  	
}







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


#sec2{
}

/* セクション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(to bottom, #4CAF50, #2E7D32); /* 緑のグラデーション */
  	color: #fff;
  	text-decoration: none;
  	border-radius: 10px; /* 角丸 */
  	position: relative;
  	box-shadow: 0 4px 0 #1B5E20; /* 立体感を出す影 */
  	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: wrap;
	justify-content: center;
	padding: 10px;
	margin: 30px auto;
	width:100%;
}
.item-box{
	background-color: #fff;
	border-radius: 15px;
	width: 100%;
	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.5em;
	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: 100%;
	height: auto;              /* 縦横比維持 */
  	align-items: center;
}

 /* 解決できますゾーン*/
.catchphrase{
  	text-align: center;
	background: #ffffff;
   	padding: 60px 15px 0; /* 下の余白をなくす */

}

.catchphrase h2 {
 	font-size: 2.3em;
  	color: #666;
  	margin-bottom: 10px;
  	letter-spacing: 0.1em;
}

.catchphrase p {
  	font-size: 1.5rem;
  	font-weight: bold;
  	color: #b89c5a; /* 画像のようなゴールド・ブラウン系 */
  	line-height: 1.5;
/* ここがポイント！下の要素に食い込ませる */
  	margin-bottom: -100px; 
  	position: relative;
  	z-index: 10;
}




 /* セクション2*/

.catchphrase-box{
  	background: #f4f4f4;
  	padding: 50px 20px; /* 上に余裕を持たせて食い込みを受け止める */
  	text-align: center;
 	background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("images/jymback.jpg");
  	background-size: cover;
  	background-position: center;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	color: white;
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}

.catchphrase-box h2{
	color: white;
	line-height: 1.5;
}

.catchphrase-box span{
	font-weight: 900;
  	line-height: 1.2;
}

 /* セクション3の並び方 */
.row {
  	display: flex;
	flex-wrap: wrap;
  	align-items: center; /* 上下中央揃え */
  	justify-content: space-between; /* 両端に寄せる */
}

/* 偶数番目の要素（#2, #4...）だけ左右を入れ替える */
.row:nth-child(odd) {
  	flex-direction: row-reverse;
}

/* 各要素の幅を50%ずつに設定 */
.text-box, .image-box {
  	width: 48%;/* 合計を100%未満にする（例: 45% + 45% = 90% で、残りの10%が余白になる） */
	box-sizing: border-box; /* パディングを含めた幅計算 */
}

.text-box{
	border-radius: 0 30px; /* 左上&右下は0（直角）、右上&左下は20px（丸い） */
	padding: 60px 40px;
	background-color: #fff;
  
  
  /* 影を3段階で重ねる */
  	box-shadow:     	0 10px 0 #333,
    	0 15px 30px rgba(0,0,0,0.4), /* ② 遠くまで広がる「深い影」 */
    	inset 0 4px 10px rgba(255,255,255,0.5); /* ③ 上側の「ハイライト（光）」 */
}

.text-box p{
	font-size:20px;
}
.text-box h3{
	font-size:30px;
	padding: 10px;
}

/* 画像が枠に収まるように設定 */

.image-box img {
 	width: 100%;
  	height: auto;
    	display: block;
}
#sec3 h2,#sec5 h2{
	background-color: #ffffff;
	padding: 5px;
}



/*--セクション4*/
.item-box-wrap2{
	background-color:#84bf04;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 50px; 
	align-items: stretch;
	 padding: 40px 20px; 
}
.item-box2{
	background-color: #ffffff;
	display: flex;
  	flex-direction: column; /* 中身を縦に並べる */
	border-radius: 30px;
  	padding: 5px; /* カード内の余白 */
	margin: 10;
	flex: 1;
	box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.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;
}
.item-price {
  	height: 20px; /* ここを統一することで、その下の説明文の開始位置が揃う */
  	display: flex;
 	align-items: center;
  	justify-content: center;
  	margin: 5px;
	font-size:28px;
}

.item-box2 p{
	text-align: left; /* 左揃えにする */
  	line-height: 1.5;
 	margin-top: auto; /* 説明文を箱のいちばん下に寄せたい場合に有効 */
  	padding: 10px;
}


/*--セクション5〇*/
.dami{
	display: flex;
	flex-wrap; wrap;
	justify-content: center;
	align-items: center;
    	padding: 20px 0;
	width: 100%; 
}

.dami img{
	width: 300px;          /* 元のサイズを維持 */
    	max-width: 80%;        /* スマホ画面からはみ出さないように制限 */
    	height: auto;
    	border-radius: 50%;
    	margin: 20px auto;     /* ★上下に余白、左右はautoで中央寄せを確実に */
    	display: block;        /* ★ブロック要素化して中央寄せを効きやすくする */
}
.point p{
	text-align: center;
	color: #ffffff;
	font-size: 1.5em;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}
.text-highlight{
color: #ff4500; /* OKの部分だけオレンジ色にする */
  font-weight: bold; /* 太字にするとより目立ちます */
}



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


.item-box-wrap3 {
  	display: flex;
	flex-wrap: wrap;       /* ★折り返しを許可 */
    	gap: 20px;
    	padding: 20px 10px;    /* 左右の余白 */
}
.item-box3 {
    /* (全体100% - 隙間20px × 4箇所) / 5枚 = 1枚あたりの幅 */
    	width: calc((100% - 80px) / 5); 
    	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: left;
	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;   /* 改行を防ぐ */
}


/* フッターー */
footer {
	background-color: #84bf04;
	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: 700px;
	margin: 50px auto 0;
  	padding: 15px;
  	background: linear-gradient(to bottom, #4CAF50, #2E7D32); /* 緑のグラデーション */
  	color: #fff;
  	text-decoration: none;
  	border-radius: 10px; /* 角丸 */
  	position: relative;
  	box-shadow: 0 4px 0 #1B5E20; /* 立体感を出す影 */
  	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: 16px;
	}

/* セクション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 {
        font-size: 20px;
        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%; /* 横幅いっぱいに広げて縦並びにする */
    	}

}