/* -----------------------------------
①全体設定
----------------------------------- */
* {
  box-sizing: border-box;
}
html {
  line-height: 1;
}
/* -----------------------------------
②枠組み設定（箱）
----------------------------------- */
.container {
  max-width: 950px;
  margin: 0 auto;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
}
.main-content-inner {
  margin: 0 auto;
  padding: 0 4%; /* スマホで見た時に左右に最低限確保する余白（約15px〜20px相当） */
}
.bg-gradient {
  background: linear-gradient(rgba(255, 255, 255), rgba(231, 142, 137, 0.3)); /*グラデーション背景 */
  margin-bottom: 30px;
}
.content {
  padding: 0 0 60px 0;
}
/*各サイズページのみ*/
.content-item:not(:last-child){
	  padding: 0 0 20px 0;
}

/* -----------------------------------
③個別セクションの設定（要素/class/id特定のパーツ）
----------------------------------- */
body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333333;
  -webkit-font-smoothing: antialiased;
}
img {
  width: 100%;
  height: auto;
  display: block; /* これを追加 */
}
.explation{
	margin-bottom: 20px;
}
.banner{
	width:80%; 
	max-width: 900px; 
	margin: 0 auto; 
}
h2 {
  text-align: center;
  font-family: 'Noto Serif JP', "Hiragino Mincho ProN", "Yu Mincho", serif;
  letter-spacing: 0.05em; /* 文字の間隔を少し開けて上品に */
  padding: 0 0 15px 0;
  margin: 0 0 20px 0;
  font-size: 2rem;
  color: #e78e89;
  border-bottom: 1px solid #e99b97;
}
h3 {
  text-align: left;
  font-size: 1.5rem;
  color: darkred;
  font-weight: bold;
  margin: 0 0 15px 0;
}
h4 {
  text-align: center;
  font-family: 'Noto Serif JP', "Hiragino Mincho ProN", "Yu Mincho", serif;
  letter-spacing: 0.05em; /* 文字の間隔を少し開けて上品に */
  padding: 0;
  margin: 10px 0;
  font-size: 1.2rem;
  color: #333;
}

h5 {
	display: inline-block;      /* 重要：横幅を文字の長さに合わせる */
  font-family: 'Noto Serif JP', "Hiragino Mincho ProN", "Yu Mincho", serif;
  letter-spacing: 0.05em; /* 文字の間隔を少し開けて上品に */
  margin: 0 0 10px 0;
  font-size: 1.8rem;
  color: #e78e89;
	border-left: 6px solid #e78e89; /* 縦棒の太さと色（ブランドカラー） */
  padding-left: 10px;            /* 縦棒とテキストの間の余白 */
}
h6 {
  text-align: left;
  letter-spacing: 0.05em; /* 文字の間隔を少し開けて上品に */
  padding: 0;
  margin: 0 0 5px 0;
  font-size: 1.2rem;
  color: #333;
}
a{
	text-decoration: none;
}
p {
  line-height: 1.8em; 
  margin: 0;
  padding: 0;
  font-size: 20px;
}
small {
		display: block;    /* ブロック要素にすることで行間の制御をしやすくする */
  font-size: 0.8rem;
	line-height: 1em;
}
.note{
	line-height: 1.5em; 
}
ul {
  font-size: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/*パンくずリストの調整*/
.breadcrumb {
  margin: 10px 0 5px; /* 下マージンを追加してナビゲーションとの間隔を確保 */
  padding-left: 10px; /*左に余白を追加*/
}
.breadcrumb ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
.breadcrumb li {
  margin-right: 5px; /* 項目間の間隔を調整 */
}
.breadcrumb li:not(:last-child)::after {
  content: "＞"; /* 区切り文字 */
  margin-left: 5px;
}
.breadcrumb a {
  text-decoration: none;
  color: #B7B7B7; /* 色はお好みで */
}
.breadcrumb a:hover {
  color: #333;
}
/* インスタ */
.instagram-section {
  max-width: 180px;
  margin: 0 auto;
  text-align: center;
}
.instagram-section img {
  max-width: 100px;
  margin: 0 auto;
}
.split-item{
	text-align: center;
}
/* ラインナップのデザイン調整 */
.lineup-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 均等に2つの列を作る */
  gap: 1rem; /* カード同士の隙間（お好みで調整） */
}
/* 吸水実験のデザイン調整 */
.cellulose-content, .design-content, .cuticle-content {
  display: grid; /* グリッドレイアウトを使用 */
  grid-template-columns: repeat(2, 1fr); /* 2列に分割 */
  grid-template-areas: "text image"; /* グリッドエリアを定義 */
  gap: 1rem; /* グリッドアイテム間の隙間 */
}
/*  以下後から注意見直す　*/
.cellulose-content, .cuticle-content, .design-content p {
  text-align: left;
}
.cellulose-content img {
  grid-area: image;
  max-width: 100%; /* max-widthのみでOK */
  height: auto;
}
.cellulose-content h2 {
  grid-area: text; /* 見出しをテキストエリアに配置 */
}
.cellulose {
  font-weight: 600;
  margin-top: 20px;
	}

.highlight {
  font-weight: bold;
  color: #ff0000;
}
/* iframeコンテナスタイル */
.video-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 80vh; /* 画面の縦幅の80%を最大高さに設定 */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* iframeスタイル */
iframe {
  width: auto;
  height: 100%; /* コンテナの高さに合わせて調整 */
  aspect-ratio: 9/16; /* アスペクト比を維持 */
  border: none;
}
/* 販売ページセクション */
.sales-section {
  margin: 25px 0 50px;
}
.sales-section p {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: darkred;
}
section:last-of-type {
  padding-bottom: 30px;
}
.element {
  text-align: center !important;
  color: red;
  animation: tikatika 1s step-end infinite;
}
@keyframes tikatika {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* ボタンコンテナ */
.button-container {
  display: flex; /* フレックスボックスの設定 */
  justify-content: center; /* 初期状態で中央揃え */
  gap: 10px; /* ボタン間の余白 */
  flex-direction: row;
}
/* ボタンスタイル */
.button {
  display: inline-block;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  border-radius: 100vh;
  text-decoration: none;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* X方向へのオフセット, Y方向へのオフセット, ぼかし, 色 */
  transition: box-shadow 0.3s ease; /* ホバー時のアニメーションを追加 */
}
.btn-mini {
  /* ① フレックスボックスを使って文字をど真ん中に配置 */
  display: flex; 
  justify-content: center;
  align-items: center;

  /* ② 横幅を親要素の80%にし、marginで中央に配置 */
  width: 80%;
  margin: 0 auto; /* 左右の余白を自動(auto)にして中央揃え */

  /* ③ 縦幅を可変にする（上下の余白のみ指定、左右はwidthで決まるので0） */
  /* clamp(最小値, 画面幅に応じた値, 最大値) で微妙に高さを変えられます */
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  font-size: clamp(0.9rem, 1.8vw, 1.5rem); /* 文字サイズも少し調整 */
  background-color: #adadad;
  color: #fff;
  letter-spacing: 0.1em;
  font-weight: bold; /* ボタンの文字は少し太い方が押しやすいです */
  
  transition: background-color 0.3s ease;
}
.btn-center-layout {
  text-align: center;
  margin: 0; /* 上下の余白 */
  width: 100%; /* 親要素いっぱいの幅を持つ */
}
.btn-square {
	/* clamp関数を使うと「最小、推奨(可変)、最大」を1行で指定できます */
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  display: inline-block;
  background-color: #e78e89;
  padding: 0.8rem 5rem;
  color: #fff;
  letter-spacing: 0.1em;
  text-decoration: none;
}
/* アイコン（iタグ）個別の設定 */
.btn-square i {
  font-size: 1em;
  margin-right: 0.2em;
}

/* 各ボタンのスタイル */
.rakuten {
  background-color: #bf0000; /* 楽天市場: 赤 */
}
.yahoo {
  background-color: #FF9900; /* Yahoo!ショッピング: オレンジ */
}
.amazon {
  background-color: #1377CD; /* Amazon: 青 */
}
/* pdfリンクの紫ボタン */
.pdf {
  text-align: left;
  font-weight: 600;
  padding: 0 0 0 1vw;
  margin: 20px 0 0;
}
a.btn-purple {
  display: inline-block;
  color: #fff;
  background: #664564;
  text-decoration: none;
  font-weight: bold;
  border-radius: 3px;
  text-align: center;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease; /* transitionはここに1回書けばOK */
  font-size: 20px; /* 16pxから20pxに変更 */
  padding: 0.2em 0.8em; /* 0.5emから0.2emに変更 */
  margin: 10px auto; /* 5pxから10pxに変更 */
}
a.btn-purple:after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: -3px 0 0 5px;
  background: url("images/drytowel/btn.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.btn-purple:hover {
  background: #7a2e17;
  box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5); /* ホバー時の影を調整 */
}
/* ボタンホバー時のエフェクト */
.button:hover {
  opacity: 0.5;
}
a:hover {
  opacity: 0.5;
}

/* フッターセクション */
footer {
  padding: 30px 0;
  text-align: center;
  width: 100%;
  bottom: 0;
}
.footer-inner {
  border-top: 1px solid #C4C7C5;
  margin: 0 2%;
  padding: 20px 0 0 0;
}
.footer-container {
  margin: 5px 0;
  display: flex; /* リンクを横並びに */
  justify-content: center; /* 中央揃え */
  flex-wrap: wrap; /* 横幅が足りない場合に折り返す */
}
.footer-container a {
  color: #333; /* リンクの色 */
  font-size: 16px;
  text-decoration: none; /* 下線を削除 */
  margin: 10px; /* リンク間の間隔を調整 */
  transition: color 0.3s ease; /*ホバー時の色変化*/
}
.contact-link {
  /* clamp関数を使うと「最小、推奨(可変)、最大」を1行で指定できます */
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: #333;
  font-weight: bold;
  text-decoration: none;
  display: inline-flex; /* アイコンと文字の垂直位置を合わせやすくします */
  align-items: center; /* 垂直方向の中央揃え */
}
/* アイコン（iタグ）個別の設定 */
.contact-link i {
  /* 親の文字サイズに対して 1.5倍 の大きさに設定 */
  font-size: 1.5em;
  /* アイコンと文字の間の余白（トラッキング感覚で調整してください） */
  margin-right: 0.2em;
  /* アイコンだけ画面幅でもっとダイナミックに変えたい場合 */
  /* font-size: clamp(1.2rem, 4vw, 2rem); */
}
.footer-container a:hover {
  color: #999; /*ホバーの色*/
}
/* フッターボトム */
.footer-bottom {
  margin-top: 0px;
  padding-top: 0px;
  color: #666;
  margin-bottom: 50px;
}
.footer-bottom p {
  font-size: 16px;
}
#page_top {
  position: fixed;
	  width: 100px; /* PCでは幅を大きく */
  height: 100px; /* PCでは高さを大きく */
  right: auto;        /* 画面右端からの指定を解除 */
right: max(20px, calc(50% - 450px));
  bottom: 50px;
  background: #9a5e35;
  opacity: 0.8;
  z-index: 9999;
  display: none; /* JSで制御 */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
	transition: opacity 0.3s ease;
}
#page_top a::before {
  font-size: 60px; /* PCではアイコンサイズを大きく */
}
.header-nav {
  flex-direction: row; /* 横並び */
  padding: 0 10px;
}
.header-nav ul li img {
  width: 100%;
  max-width: 280px;
  height: auto;
  filter: drop-shadow(5px 5px 5px #aaa);
}
.cellulose-content img:hover {
  transform: scale(1.3);
  transition: transform 0.3s ease-in-out;
}
/* -----------------------------------
   ④レスポンシブ対応
----------------------------------- */
/*スマホ・タブレット用スタイル (768px以下)*/
@media (max-width: 768px) {
  /* ページトップへ戻るボタン (スマホサイズ) */
  #page_top {
    width: 60px;
    height: 60px;
    bottom: 20px;
  }
  #page_top a::before {
    font-size: 30px;
  }
  h1 {
    margin: 0;
  }
  h2{
    font-size: 5vw;
	padding: 0 0 10px 0;
  margin: 15px 0;
  }
 h3 {
    font-size: 4vw;
    margin: 10px;
  }
	h4{
	    font-size: 3vw;	
		  margin: 5px 0;
	}
h5 {
		font-size: 3vw;	
	}
	h6 {
		font-size: 2vw;	
	}
  p {
    line-height: 1.8em;
    font-size: 16px;
  }
  /* ヘッダー・ナビゲーション */
  header h1 img {
    max-width: 100%;
  }
.btn-center-layout {
  margin: 10px 0 0 0 ; 
}
  #target-image {
    padding: 0;
  }
  .header-nav {
    margin-top: 30px;
  }
  .header-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .header-nav img {
    max-width: 60%; /* パーセント指定を優先 */
    height: auto;
  }
  /* コンテンツエリア */
  .content {
    padding: 0 0 30px 0;
  }

  .pdf {
    padding: 5px;
    margin: 5px;
  }
  a.btn-purple {
    font-size: 16px;
    padding: 0.5em 0.8em;
    margin: 5px auto;
  }
  /* グリッドレイアウト（吸水実験など） */
  .cellulose-content, .cuticle-content, .design-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "image";
  }
  /* 動画 */
  .video-container {
    height: 70vh;
  }
  /* フッター */
  .footer-container {
    flex-direction: column;
    align-items: center;
  }
  .footer-container a {
    margin: 5px 0;
  }
  .footer-bottom p {
    font-size: 12px;
    line-height: 1;
    color: #888;
  }
}

#page_top a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
#page_top a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#page_top:hover {
  opacity: 0.5;
}
/* スマートフォンサイズ */
@media (max-width: 480px) {
/* グリッドレイアウト（商品ラインナップ） */
  .lineup-content {
    grid-template-columns: 1fr;
  }
  p {
    font-size: 13px;
  }
  h3 {
    font-size: 6vw;
    margin: 5px;
  }
  h2 {
    font-size: 6vw;
    margin: 5px;
  }
  .breadcrumb ul li {
    font-size: 12px;
  }
  .header-nav img {
    width: 60%;
  }


  .button-container {
    flex-direction: column; /* ★スマホは「縦並び」に上書き */
    align-items: center; /* 縦並びのときにボタンを中央に寄せる */
  }
}