@charset "utf-8";
/* CSS Document */

/* ===============================
   #main5 専用レイアウト
================================ */


#main5 .product {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* 画像左 */
#main5 .product-image {
  width: 330px;
  flex-shrink: 0;
}

#main5 .product-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* テキスト右 */
#main5 .product-text {
  flex: 1;
}

/* ===== 見出し上書き（IDに勝つ） ===== */

#main5 .product-title {
	font-size: 1.2em;
	margin: 0 0 20px 0;
	border: none;
	padding: 0;
	background: none;
	color: #425C8B;
}

#main5 .product-subtitle {
	font-size: 0.9em;
	margin-bottom: 0px;
	border: none;
	padding: 0;
	background: none;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	color: #AAAFB9;
}

/* ボックス */
#main5 .product-box {
	border: 1px solid #E7E7E7;
	padding: 15px;
	margin-bottom: 20px;
}
#main5 .product-box p{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.mdtb01{
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	  border-collapse: separate;   /* ← これ重要 */
  border-spacing: 0 5px;      /* ← 縦だけ20pxあける */
}
.mdtb01 td{
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;	
}
.mds01{
	width: 20%;
	background-color: #DCD8CE;
}
.mds02{
	width: 80%;
	background-color: #F7F5F2;
	line-height: 2em;
}
/*写真配置*/
.image-grid{
	width: 90%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 40px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0px;
}

/* 画像サイズ統一 */
.item{
  aspect-ratio: 7 / 6;   /* 正方形。3/2などにも変更可能 */
  overflow: hidden;
}

.item img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* トリミングしてぴったり表示 */
  display: block;
}
/*画像右*/
.migi01{
	float: right;
	margin-right: 60px;
}
/*メカニズム*/

.glp1 p {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.glp1__title {
	display: inline-block;
	width: 220px;   /* ← ここを調整すると「：まで」が揃う */
	flex-shrink: 0; /* ← 幅を縮ませない */
	font-weight: 600;
	color: #29598B;
}

/*料金表*/
.mdp842-wrap{
  max-width: 900px;
  margin: 40px auto;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: #4b3f35;
}

.mdp842-table{
  width: 90%;
  border-collapse: collapse;
  background-color: #f6f1e8;
  border: 2px solid #8b6f5a;
}

#main5 .mdp842-table th{
  background-color: #d8c8b8;
  color: #3e3026;
  font-weight: 600;
  padding: 14px 10px;
  border: 1px solid #b89f8a;
  text-align: center;
}

#main5 .mdp842-table td{
  padding: 12px 10px;
  border: 1px solid #d2c3b4;
  text-align: center;
  background-color: #fcfaf7;
}

.mdp842-table tbody tr:nth-child(even) td{
  background-color: #f3ece3;
}

.mdp842-table td:first-child{
	text-align: center;
	padding-left: 16px;
}

.mdp842-note{
  margin-top: 15px;
  font-size: 0.9em;
  line-height: 1.7;
  color: #6a5748;
}
.kome01{
	color: #459CD3;
	padding-right: 5px;
}
#main5 .mdp842-note p{
	margin-bottom: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 50px;
}
/*問題点*/
/* 全体背景（必要なら） */
.cln-unit{
	margin-bottom: 50px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

/* 見出し */
.mdd01{
	color: #414141;
	text-align: left;
	font-size: 1.1em;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border-bottom: 2px solid #F3EFE8;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	font-weight: 600;
} 
.mdd02{
	color: #414141;
	text-align: left;
	font-size: 1.2em;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 0px;
	padding-top: 20px;
	padding-right: 10px;
	padding-left: 0px;
	font-weight: 600;
	margin-bottom: 0px;
} 
.mdd02 span{
	color: #DAE2E7;
	padding-right: 10px;
}
.cln-heading{
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #4B3F35;
    padding: 10px 18px;
    background-color: #D6CDC2;
    display: block;              /* ← blockにする */
    text-align: left;
    width: 300px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 0;            /* ← 念のため */
}

/* 枠付き本文 */
.cln-frame{
	margin-top: 0;               /* ← これ重要 */
	padding: 25px;
	background-color: #FDFCFB;
	border: 1px solid #D6CDC2;
	color: #444444;
	line-height: 2;
	box-shadow: 0 3px 8px rgba(0,0,0,0.04);
	text-align: left;
	font-size: 0.94em;
}
/*流れ*/
/* ====== TS FLOW 独立設計 ====== */
.tsflow {
	width: 90%;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
	box-sizing: border-box;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
}

.tsflow__wrap {
	max-width: 900px;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
}

.tsflow__item {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	padding-bottom: 60px;
	padding-top: 50px;
}

.tsflow__icon {
	width: 180px;
	flex-shrink: 0;
	margin-top: 0px;
}

.tsflow__icon img {
  width: 100%;
  height: auto;
  display: block;
}

.tsflow__content {
	flex: 1;

}

.tsflow__title {
	padding-top: 0px;
	padding-bottom: 10px;
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
	line-height: 1.4;
	text-align: left;
	color: #3A322E;
	margin-left: 20px;
}
.tsflow__title span{
	color: #9BB6CD;
	margin-right: 20px;
	font-size: 1.5em;
}

.tsflow__text {
	font-size: 15px;
	line-height: 1.8;
	text-align: left;
	padding-left: 20px;
}



.tsflow__point {
	display: inline-block;
	background: #fff200;
	padding: 6px 12px;
	margin-top: 12px;
	font-weight: bold;
	margin-left: 20px;		
}

.tsflow__note {
	padding-left: 20px;	
  font-size: 13px;
  color: #666;
  margin-top: 12px;
  line-height: 1.6;
}

/*ポイント*/
/* 全体 */
.glpflow{
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	text-align: center;	
}

/* 各項目 */
.glpflow__item{
	display: flex;
	gap: 0px;
	padding: 50px 0;
	border-bottom: 1px solid #E5EBF4; /* 横仕切り線 */
}
.linenone{
	border-bottom: 0px solid #E5EBF4; /* 横仕切り線 */
}
/* 左側 */
.glpflow__left{
  width: 35%;
  text-align: center;
}

.glpflow__title{
	font-size: 1.3em;
	font-weight: 600;
	margin-bottom: 20px;
	text-align: center;
	color: #555555;
}

.glpflow__left img{
  max-width: 150px;
  height: auto;
}

/* 右側 */
.glpflow__right{
  width: 70%;
  line-height: 1.8;
  font-size: 15px;
}
/*チェックリスト風*/
.checklist{
	list-style: none;
	padding-top: 0px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 15px;
	margin: 0;
}

.checklist li{
	position: relative;
	padding-left: 35px;
	margin-bottom: 15px;
	font-size: 16px;
	line-height: 1.2em;
	margin-top: 10px;
}

/* □ */
.checklist li::before{
	content: "□";
	position: absolute;
	left: 0;
	top: 0px;
	font-size: 1.5em;
	color: #D7DFF3;
}

/* ☑ */
.checklist li::after{
	content: "✓";
	position: absolute;
	left: 4px;
	top: 0px;
	font-size: 1.2em;
	color: #1C6AAA; /* 好きな色に変更OK */
}
/* =======================
   GLP-1 目次ナビ
======================= */

.glp-toc2{
	background-color: #F3F3F3;
	padding: 30px 30px;
	font-size: 14px;
	line-height: 2;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.glp-toc2__title{
	font-weight: 600;
	margin-bottom: 10px;
	text-align: left;
}

.glp-toc2__links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* リンク */
.glp-toc2__links a{
	color: #1a5fb4;
	text-decoration: none;
	transition: 0.2s;
}

/* ホバー */
.glp-toc2__links a:hover{
	opacity: 0.7;
	background-color: #D4E5F7;
}

/* 区切り */
.glp-toc2__sep{
	margin: 0 8px;
	color: #A3A3A3;
}
/*ボタン*/
.buttonts a{
	display: block;
	text-decoration: none;
	background-color: #227C8F;
	color: #FFFFFF;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
.buttonts a:hover{
	background-color: #A0BC70;	
}
.buttonts2 a{
	display: block;
	text-decoration: none;
	background-color: #227C8F;
	color: #FFFFFF;
	width: 300px;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	text-align: center;
}
.buttonts2 a:hover{
	background-color: #A0BC70;	
}
/* ===== スマホ対応 ===== */

@media (max-width: 768px) {
  #main5 .product {
    flex-direction: column;
    padding: 20px;     /* ← 内側余白を増やす */
  }
  #main5 .product-image {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
  }
/*写真配置*/	
	.image-grid{
    grid-template-columns: repeat(2, 1fr);
  }
	
/*見出し*/
	/* 見出し */
.mdd01{
	color: #414141;
	text-align: left;
	font-size: 1.1em;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	border-bottom: 2px solid #F3EFE8;
	padding-bottom: 0px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	font-weight: 600;
} 
.mdd02{
	color: #414141;
	text-align: left;
	font-size: 1.2em;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 0px;
	padding-top: 20px;
	padding-right: 10px;
	padding-left: 0px;
	font-weight: 600;
	margin-bottom: 0px;
} 
	/*メカニズム*/
	
  .glp1 p {
    display: block;   /* 横並び解除 */
  }

  .glp1__title {
    display: block;
    width: 100%;
    margin-bottom: 4px;
  }
/*料金表*/	
	

.mdp842-table{
	border-collapse: separate;
	border-spacing: 0;
	border-width: 0px;
	background-color: transparent;

  }

  .mdp842-table thead{
    display: none;
  }

 #main5 .mdp842-table tr{
  display: block;
  margin-bottom: 10px;
  border: 1px solid #d2c3b4;
  background-color: #fcfaf7;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);

}

  #main5 .mdp842-table td{
    display: flex;                 /* ← blockやめる */
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    border: none;
    border-bottom: 1px solid #e5d9cc;
  }

  .mdp842-table td:last-child{
    border-bottom: none;
  }

  .mdp842-table td::before{
    content: attr(data-label);
    font-weight: 600;
    color: #6a5748;
    margin-right: 10px;
  }
#main5 .mdp842-note p{
	margin-bottom: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
}
#main5 td.mds01{
	width: 95%;
	display: block;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-left: auto;
	margin-right: auto;
}
#main5 td.mds02{
	width: 95%;
	line-height: 2em;
	display: block;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-left: auto;
	margin-right: auto;
}
	
/*問題点*/
	    .cln-unit{
        width: 90%;
        margin-bottom: 35px;
    }

    .cln-heading{
        width: 300px;         
        min-width: unset;
        font-size: 1.05rem;
        padding: 12px 15px;
    }

    .cln-frame{
        padding: 20px;
        font-size: 0.9em;
        line-height: 1.9;
    }
	/*流れ*/
	  .tsflow {
	padding-top: 40px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;

  }

  .tsflow__item {
	flex-direction: column;
	gap: 0px;
	margin-bottom: 0px;
	padding-bottom: 20px;
	padding-top: 20px;
  }

  .tsflow__icon {
    width: 160px;
    margin: 0 auto;   /* 画像中央 */
  }

  .tsflow__content {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
  }

  .tsflow__title {
	font-size: 1.4em;
	margin-top: 0px;
	text-align: center;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
  }
	.tsflow__title  span{
	display: block;
	background-color: #9BB6CD;
	width: 100%;
	color: #FFFFFF;
	margin-bottom: 10px;
}
  .tsflow__text,
  .tsflow__note {
    padding-left: 0;
  }

  .tsflow__point {
    margin-left: 0;
  }
	/*ポイント*/
	
  .glpflow__item{
	flex-direction: column;
	gap: 0px;
	padding: 40px 0;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
  }

  .glpflow__left,
  .glpflow__right{
	width: 100%;
	text-align: left;
	
  }

  .glpflow__left{
    text-align: center;
  }

  .glpflow__title{
    margin-bottom: 15px;
  }
/*画像右を中央へ*/
.migi01{
	float: none;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	margin-bottom: 10px;
}
/*ボタン*/
.buttonts a{
width: 80%;

}
.buttonts2 a{
	width: 300px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}	
}