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


/* -------------------------
   メニュー
------------------------- */

/* 全体のコンテナ（背景色や余白） */
.pillow-menu-container {
  background-color: #EBEBEB; /* 画像に合わせた薄いグレー */
  padding: 40px 20px;
  text-align: center;
}

/* 「menu」タイトル部分 */
.pillow-menu-title {
  font-size: 18px;
  color: #555;
  margin-bottom: 25px;
  letter-spacing: 0.1em; /* 少し文字間隔を空ける */
}

/* リスト全体の枠組み */
.pillow-menu-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px; /* 破線の横幅の最大値 */
}

/* 各リストアイテムの破線設定 */
.menu-item {
  border-bottom: 1px dashed #999; /* 破線の色と太さ */
}

/* 一番最後の線の非表示 */
.menu-item:last-child {
  border-bottom: none;
}

/* リンクテキストの基本設定 */
.menu-item a {
  display: block;
  padding: 10px 10px;
  text-decoration: none;
  color: #333;
  transition: opacity 0.2s ease;
}

/* ホバー時のアクション（少し薄くする） */
.menu-item a:hover {
  opacity: 0.6;
}

/* 大項目（1, 2, 3, 4）のスタイル */
.main-item a {
  font-size: 18px;
  font-weight: bold;
}

/* 小項目（Step 1, 2, 3）のスタイル */
.sub-item a {
  font-size: 16px;
  font-weight: normal;
  color: #444; /* 大項目より少しだけ色を落ち着かせる */
}



/* -------------------------
   画像
------------------------- */
	
.step-image1{ margin: 0 auto; }	
		
.step-image2{ margin: 0 auto; }	



/* -------------------------
   タイトル
------------------------- */
	
.step-title {
	color: #ffffff;
	background-color: #303333;
}	
	
	
.step-title span {
	font-size: 70%;
	color: #ffffff;
	background-color: #303333;
}
	
.point-title {
	font-size: 110%;
	color: #303333;
	background-color: #EBEBEB;
	border-radius: 50px;
	width: fit-content;
	padding: 5px 25px; 
	font-weight: bold; 
	margin: 0 auto; 
	margin-bottom: 40px;
}
	
.point-title2 {
	font-size: 110%;
	color: #303333;
	padding: 5px 25px;  
	font-weight: bold;
	margin: 0 auto; 
	margin-bottom: 30px;
}
	
.point-title-wh {
	font-size: 110%;
	color: #303333;
	background-color: #fff;
	border-radius: 50px;
	width: fit-content;
	padding: 5px 25px; 
	font-weight: bold; 
	margin: 0 auto; 
	margin-bottom: 40px;
}	



/* -------------------------
  STEP2 ３つのポイント円イラスト
------------------------- */
	
.circle-list {
    display: flex;
    justify-content: center;
	margin: 10px 0px 15px;
}	
	
	
.circle {	
	position: relative;/* ←文字の親要素に指定 */
	display: inline-block;
	width: 200px;
    height: 200px; 
    border: 2px solid;/* ←上下20pxのボーダー */
	border-color: #303333;
    background-color: #fff;
    border-radius: 50%; 
    margin: 0 5px;
    text-align: center;
    line-height: 196px;/* ←円の高さ200px - 上下のボーダー4px */
		
}
	
	
.circle span {
    position: absolute;
	display: inline-block;
    top: 18%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	text-align:center;
	width: 196px;
	height: 196px;
	font-size: 120%;
	color: #333333;
	font-weight: bold;
}
	
.circle img {
    position: absolute;
	display: inline-block;
    top: 55%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
	
	
	
	
/* -------------------------
 STEP2-1 頭・首・肩の３点で支える
------------------------- */
	
.neshisei {
    border: 2px solid;/* ←上下20pxのボーダー */
	border-radius: 50px;
	padding: 5% 5%; 
	width: 90%;
	margin: 0 auto;
}	
	
.neshisei-box {	
	display: flex;
}	
	
.neshisei-content {	
	width: 45%;
	margin: 0 auto;
}
	
.neshisei-content img {	
	margin: 0 auto 5px;
}	
	
.neshisei-content span {	
	font-size: 110%;
	font-weight: bold;
	line-height: 2;
}
	
	

	

/* -------------------------
  STEP2-1 高さチェックポイント
------------------------- */	
		
/* ラジオボタンを非表示にする */
.hikaku-image-gallery input[type="radio"] {
  display: none;
}

/* ボタンのデザイン */
.hikaku-image-gallery label {
  display: inline-block;
  padding: 10px 20px;
  border: 1.5px solid; 
  background-color: #ffffff;
  cursor: pointer;
  border-radius: 50px;
  margin-right: 5px;
  transition: background-color 0.3s;
}

/* 選択されたボタンのスタイル */
.hikaku-image-gallery input[type="radio"]:checked + label {
  background-color: #007bff;
  color: #fff;
}

/* 画像の表示・非表示エリア */
.hikaku-images { 
  position: relative;
  width: 90%;
  max-width: 600px;
  aspect-ratio: 800 / 456;
  height: auto;
  margin: 30px auto;
}

.hikaku-images img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* ボタンが押された（選択された）時の画像の表示 */
/* -------------------------
   1つ目の画像切り替え
------------------------- */
/* 最初の画像を表示 */
.hikaku-image-gallery:has(#height1-1:checked)
.hikaku-images #img1,

.hikaku-image-gallery:has(#height1-2:checked)
.hikaku-images #img2,

.hikaku-image-gallery:has(#height1-3:checked)
.hikaku-images #img3 {
  opacity: 1;
  visibility: visible;
}

	
/* -------------------------
   2つ目の画像切り替え
------------------------- */
/* 最初の画像を表示 */
.hikaku-image-gallery:has(#height2-1:checked)
.hikaku-images #img4,

.hikaku-image-gallery:has(#height2-2:checked)
.hikaku-images #img5,

.hikaku-image-gallery:has(#height2-3:checked)
.hikaku-images #img6 {
  opacity: 1;
  visibility: visible;
}
	
	
	
.neshisei-setumei span {
	font-size: 110%;
	font-weight: bold;
	line-height: 2;
		
	}	
	
	
	
/* -------------------------
  アコーディオン　開く説明部分
------------------------- */	
	
.accordion summary{
	font-size: 110%;
	margin: auto;
	width: 90%;
	height: auto;
	border:solid #303333 1px;
	border-radius: 25px;
	background-color: #fff;
	position: relative;
	list-style: none; /* デフォルトの三角形アイコンを消します */
	padding: 15px 15px 15px 15px;
	cursor: pointer; /* ポインターを指さしマークに変更 */
	text-align: center;
	transition: 0.2s;
}	
	
.accordion summary::-webkit-details-marker {
	display: none; /* Safariで表示されるデフォルトの三角形アイコンを消します */
}

.accordion summary::after{
	position: absolute;
	width: 15px;
	height: 15px;
	top: calc(50% - 10px);
	right: 25px;
	border-right: 1px solid #303333;
	border-bottom: 1px solid #303333;
	box-sizing: border-box;
	content: "";
	transform: rotate(45deg);
	transition: top 0.4s ease-out, transform 0.4s ease-out;
}
	
	
.accordion details[open] summary {
	border-bottom-color: #ddd;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}		
	

.accordion details[open] summary::after{
	top: calc(50% - 5px);
	transform: rotate(-135deg);
}

.accordion .contents{
	padding: 5px 15px 8px 15px;
	background: #fff;
	border:solid #303333 1px;
	border-radius: 0 0 25px 25px;
	border-top: none;
	margin: auto;
	width: 90%;
}
	
/* -------------------------
  STEP2-2 
------------------------- */
	
.point2	{
	background: #EBEBEB;}

	
/* 形状で選ぶ　サイズで選ぶ */	
	
.katati-box	 {	
	display: flex;
	justify-content: space-between;
	margin: 0 auto 50px;
}
		
	
.katati-content {
	width: 47%;
}
	
.katati-content img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto 10px;
}	
		
	
.katati-content p {	
	text-align: left;
	line-height: 1.8;
	margin: 0;
	padding: 0 0px;

}	
	
.katati-content h3 {	
	display: block;
	font-size: 110%;
	font-weight: bold;
	text-align: center;
	margin: 10 0px;
}
	
.katati-content h3 span {	
	font-size: 80%;
	
}

	
/* -------------------------
  STEP2-3 
------------------------- */	
	
/* 中材の特徴　カード */		
	
.nakazai-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	width: 90%;
	margin: 0 auto;
}
	
.nakazai-list > a {
	display: block;
	color: inherit;
	text-decoration: none;
}	
	


.nakazai-card {
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: 8px;
	text-decoration: none;
}		
	
	
.nakazai-card img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto 10px;
}

.nakazai-card h3 {
	text-align: center;
	font-size: 110%;
	margin: 0 0;
}	
	

.nakazai-card p {
	font-size: 90%;
	line-height: 1.7;
	margin: 0;
	text-align: left;
}
	

/* 好みで選ぶ　比較表 */		
	
.hikaku-table-wrap {
	width: 90%;
	max-width: 1000px;
	margin: 30px auto;
	overflow-x: auto;
}
	
.hikaku-table  {
	width: 100%;
	border-collapse: collapse;

}
	
.hikaku-table th,td  {
	padding: 12px 10px;
	border: 1px solid #ddd;
	text-align: center;
	font-size: 100%;
	line-height: 1.5;
}	
	
	
.hikaku-table th {
	font-weight: bold;
	font-size: 110%;
	color: #303333;
	background: #f8f9f9;
}
	
	
.hikaku-table th:nth-child(3),
.hikaku-table th:nth-child(4),
.hikaku-table th:nth-child(5),
.hikaku-table td:nth-child(3),
.hikaku-table td:nth-child(4),
.hikaku-table td:nth-child(5) {
	width: 10%;
	white-space: nowrap;
}	
	
	
/* -------------------------
  最後のリンク 
------------------------- */	
	

/* 全体のコンテナ設定 */
.pillow-finder {
  background-color: #EBEBEB; /* 背景の薄いグレー */
  width: 100%;          /* スマホ〜PCまで見やすい幅に制限 */
  margin: 0 auto;            /* 画面の中央に配置 */
  padding: 40px 20px;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #333;
  box-sizing: border-box;
}


/* 各セクションの余白 */
.finder-section {
  width: 95%; 
  margin: 0 auto 35px;
}

/* セクションタイトル（高さ、形など）と下線 */
.section-title {
  text-align: center;
  font-size: 110%;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 0px;
  border-bottom: 2px solid #aaa; /* ここでタイトルの下線を引く */
}

/* ボタンを並べるグリッドレイアウト */
.button-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列を均等幅で配置 */
}

/* 一番下の1つだけあるボタン用の設定 */
.button-grid.single-col {
  display: flex;
  justify-content: center;
}
.button-grid.single-col .btn {
  /* 2列のボタンと同じ幅にするための計算 (50%幅 - gapの半分) */
  width: calc(50% - 15px); 
}

/* ボタンの共通スタイル */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #777;
  border-radius: 999px; /* 完全な角丸 */
  padding: 12px 10px;
  color: #333;
  text-decoration: none;
  font-size: 110%;
  transition: background-color 0.2s;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.3;
}

/* ホバー時のアクション */
.btn:hover {
  background-color: #f5f5f5;
}

	
	

	
	
	
/* pc */ /*768px*/	
@media screen and (min-width: 769px) {	
.step-image1 {width: 50%;}	
.step-image2 {width: 80%;}	
.step-title {
	font-size: 1.7em;
	border-radius: 50px;
	padding: 15px;
	margin-bottom: 40px;
}
	
.katati-box	 {	
	width: 85%;
	gap: 6%;
}
	
	
.button-grid {
  gap: 30px;                             /* ボタン同士の隙間 */
}	

	
}



/* スマホ */	
@media only screen and (max-width: 768px) {	
	
	
	
 .main-item a {
    font-size: 16px;
  }
  .sub-item a {
    font-size: 14px;
  }
  .menu-item a {
    padding: 5px 5px;
  }	
	
.step-image1 {width: 90%;}	
.step-image2 {width: 90%;}
.step-title {
	font-size: 1.4em;
	padding: 15px;
	margin-bottom: 40px;
}
	
	
.point {
        text-align: center;
    }
	
	
/* -------------------------
  STEP2 ３つのポイント円イラスト
------------------------- */	

    .circle {
        width: calc((100% - 30px) / 3);
        height: auto;
		border: 1px solid;/* ←上下20pxのボーダー */
		border-color: #303333;
        aspect-ratio: 1 / 1;
        box-sizing: border-box;
        margin: 0 3px;
        line-height: normal;
        vertical-align: top;
    }

    .circle span {
        width: 100%;
        height: auto;
        top: 20%;
        font-size: 90%;
        line-height: 1.2;
        transform: none;
    }

    .circle img {
        width: 90% !important;
        height: auto;
        top: 58%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

	
/* -------------------------
 STEP2-1 頭・首・肩の３点で支える
------------------------- */	
	
.neshisei {
    border: 1px solid;/* ←上下20pxのボーダー */
	border-radius: 25px;
	padding: 5% 5%; 
	width: 90%;
	margin: 0 auto;
}
	
.neshisei-content {	
	font-size: 75%;
	line-height: 1.6;
}	
	
	
	
/* -------------------------
  STEP2-2 
------------------------- */
	
	
.katati-box	 {	
	width: 85%;
	gap: 5%;
	margin-bottom: 35px;
}	
	
.katati-content {
		width: 47.5%;
}	
	
.katati-content h3 {
	font-size: 90%;
	margin-bottom: 5px;
	line-height: 1.7;
}	
	
.katati-content p {	
	font-size:80%;
	line-height: 1.7;
	padding: 0px;
}
	
	
/* -------------------------
  STEP2-3 
------------------------- */	
	
/* 中材の特徴　カード */		
	
	
.nakazai-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 15px;
		width: 90%;
	}

	.nakazai-card {
		padding: 12px;
	}

	.nakazai-card h3 {
		font-size: 90%;
	}

	.nakazai-card p {
		font-size: 75%;
		line-height: 1.6;
	}
	
	
	
	
/* 好みで選ぶ　比較表 */		
	
	
	.hikaku-table-wrap {
		width: 95%;
		overflow-x: auto;
	}

	.hikaku-table {
		width: 700px;
	}

	.hikaku-table th,
	.hikaku-table td {
		padding: 8px 5px;
	}
	
	.hikaku-table th {
		font-size: 90%;
	}
	
	.hikaku-table td {
		font-size: 80%;
	}
	
	.hikaku-table th:first-child,
	.hikaku-table td:first-child {
		position: sticky;
		left: 0;
		background: #f8f9f9;
		z-index: 1;
	}
	

	
	
/* -------------------------
  最後のリンク 
------------------------- */		
	
	
/* 全体のコンテナ設定 */
.pillow-finder {
  width: 100%;          /* スマホ〜PCまで見やすい幅に制限 */
  margin: 0 auto;            /* 画面の中央に配置 */
  padding: 40px 15px;
}


/* 各セクションの余白 */
.finder-section {
  width: 100%; 
  margin: 0 auto 35px;
}	
	
	
	
.button-grid {
  gap: 8px;                 /* ボタン同士の隙間 */
}
	
	
.btn {
  padding: 10px 10px;
  font-size: 90%;
  line-height: 1.2;
}
	
	

}	


	
	
@media screen and (min-width: 768px){
.br-sp {display: none; }	
}