@charset "utf-8";
body {
	font: normal 18px/1.7 "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	text-align: left;
	color:#231815;
	text-align: justify;
	overflow-x: hidden;
  font-weight: 500;
}
/* ▼フォント変数 */
:root {
  --font-mincho: 'Shippori Mincho', serif;
  --font-gothic: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
}

.v-mincho { 
  font-family: var(--font-mincho);
}

.v-gothic { 
  font-family: var(--font-gothic);
}

:root {
  /* SP（スマホ）デフォルト */
  --fs-bodycopy: 18px 1.7;
  --lh-bodycopy: 30px 1.7;
}



@media (min-width: 769px) {
  :root {
    /* PC用に上書き */
    --fs-bodycopy: 16px;
    --lh-bodycopy: 28px;
  }
}

.bodycopy {
  font-size: var(--fs-bodycopy);
  line-height: var(--lh-bodycopy);
}


.fl_left {
	float: left;
}
.fl_right {
	float: right;
}
.ov_hd {
	overflow: hidden;
}
.bg_none {
	background-image: none!important;
}
a.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.center {
	text-align: center;
}
.right {
	text-align:right;
}
.line_0 {
	line-height: 0;
}
.zindex {
	z-index: 200;
}
input[type=radio] {
	width: 15px;
	height: 15px;
	vertical-align: middle;
}
input[type=image]:hover{
		opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	}


/* ----------------------------------------------------

    text

---------------------------------------------------- */
em {
	text-decoration: underline;
  font-style: normal;
}


.ul{
	text-decoration: underline;

}
.bd_red {
	border-bottom: 1px solid #FF0004;
	padding-bottom: 2px;
}
.bd_red02 {
	border-bottom: 3px solid #FF0004;
	padding-bottom: 0px;
}
.red {
	color: #ff0000;
}
.brown {
	color: #B6905B;
  font-weight: bold;
}

.orange {
	color: #f29600;
	font-weight: bold;
}

.green {
	color: #039ca2;
	font-weight: bold;
}

.gray {
	color:#666666;
}
.bold {
	font-weight: bold;
}
strong {
	font-weight: bold;
}
.strike {
	text-decoration: line-through;
}
.ac {
	text-align: center !important;
}
.ar {
	text-align: right !important;
}
.al {
	text-align: left !important;
}
.bold {
	font-weight: bold !important;
  color: #00479d;
}
.font10 {
	font-size: 10px !important;
}
.font11 {
	font-size: 11px !important;
}
.font12 {
	font-size: 12px !important;
}
.font13 {
	font-size: 13px !important;
}
.font14 {
	font-size: 14px !important;
}
.font15 {
	font-size: 15px !important;
}
.font16 {
	font-size: 16px !important;
}
.font17 {
	font-size: 17px !important;
	line-height:150%;
}
.font18 {
	font-size: 18px !important;
}
.font19 {
	font-size: 19px !important;
}
.font20 {
	font-size: 20px !important;
}
.font21 {
	font-size: 21px !important;
}
.font22 {
	font-size: 22px !important;
}
.font23 {
	font-size: 23px !important;
}
.font24 {
	font-size: 24px !important;
}
.font25 {
	font-size: 25px !important;
}
.font26 {
	font-size: 26px !important;
}
.font27 {
	font-size: 27px !important;
}
.font28 {
	font-size: 28px !important;
}
.font29 {
	font-size: 29px !important;
}
.font30 {
	font-size: 30px !important;
}
.font32 {
	font-size: 32px !important;
}
/* ----------------------------------------------------

    float

---------------------------------------------------- */
.fr {
	float: right !important;
}
.fl {
	float: left !important;
}
.clear {
	clear: both;
}
img {
	line-height: 0;
	padding: 0;
	margin: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;/*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}



/* ----------------------------------------------------
共通項目
---------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main{
	max-width: 2700px;
	margin: 0 auto;

}

.wrap{
	width: 750px;
	margin: 0 auto;
}

@media (max-width: 768px){
	.wrap{
    width: 92vw;        /* 画面に合わせて縮む */
    max-width: none; 
}
}

.sec img{
	width: 100%;
	margin: 0 auto;
}

/* ----------------------------------------------------
    FV
---------------------------------------------------- */

/* 画面には見せないが、スクリーンリーダーには読ませる */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.sec.sec01{
  position: relative;
  margin-inline: calc(50% - 50vw); 
  width: 100vw;
  overflow: hidden;
  background: url("../images/sec01_bg.jpg") top center repeat-x;
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 40px;
}

/* ------- FV（共通） ------- */
.fv picture, .fv img{
  display:block;
  width:60%;
  height:auto;
  margin:0 auto;
}


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


.fv_02{
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(140px, 20vw, 250px); 
  pointer-events: none;
}

.fv_02 picture, .fv_02 img{
  display:block;
  width:100%;
  height:auto;
}

/* 左上の文化庁ロゴ */
.fv_logo{
  position: absolute;
  top: clamp(8px, 2vw, 24px);  
  left: clamp(8px, 2vw, 24px);   
  width: clamp(70px, 10vw, 130px);                 
}


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

@media (max-width:768px){
.fv picture, .fv img{
  width:100%;
  margin-top: 20px;
  position: relative;
  z-index: 10;
}

  .fv_02{
    bottom: 75vw;
  }
}


/* ----------------------------------------------------
sec02
---------------------------------------------------- */
.sec.sec02{
  position: relative;
  background: url("../images/sec02_bg.jpg") top center no-repeat;
  background-size: cover;
  overflow: hidden;
  padding:120px 0 140px;
  margin-inline: calc(50% - 50vw); 
  width: 100vw;                     
  overflow: hidden;                 
  background-size: cover;
  background-repeat: no-repeat;
}



/* ▼テキスト段の並び */
/* 段並びの土台 */
.v-columns{
  display:flex;
  flex-direction: row-reverse; 
  justify-content:center;
  align-items:flex-start;      
  gap: clamp(12px, 2.2vw, 28px);
  position:relative;
  z-index:2;

}

/* 縦書き基本 */
.v-heading{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color:#EBE1D3;
  text-shadow: 0 0 6px rgba(0,0,0,.45), 2px 2px 6px rgba(0,0,0,.5);
  line-height:1.9;
  margin:0; 
  font-feature-settings: "palt"; 
}

/* 強弱（サイズ/太さ） */
.v-heading--main{
  font-size: clamp(20px, 2.1vw, 25px);
  font-weight:800;
  letter-spacing:.15em;
}

.v-strong {
  font-size: 1.2em;     
  font-weight: 800;    
  letter-spacing: 0.05em; 
}


/* キーワード強調（帯ハイライト） */
.v-heading--sub .strong{
  font-weight:900;
  padding-inline: .2em;
  background: linear-gradient(transparent 0 10%, rgba(239, 228, 213, 0.22) 10% 90%, transparent 90% 100%);
  box-decoration-break: clone; 
}
/* 特定フレーズの強調 */

/* 段の太さ */
.v-thick   { inline-size: 2.2em; } 
.v-normal  { inline-size: 1.6em; }
.v-skinny  { inline-size: 1.3em; } 

/* 縦位置の微調整 */
.v-offset-0{ margin-block-start: 0; }
.v-offset-s{ margin-block-start: .8rem; }
.v-offset-m{ margin-block-start: 1.6rem; }
.v-offset-l{ margin-block-start: 2.4rem; }
.v-offset-xl{ margin-block-start: 3.2rem; }

/* 行を縦に */
.v-lines{
  display: inline-flex;
  flex-direction: column;    
  white-space: nowrap;        
}

.v-line{
  display: block;             
}


.v-indent-2{ margin-inline-start: 2em; }
.v-indent-3{ margin-inline-start: 3em; }
.v-indent-4{ margin-inline-start: 4em; }
.v-indent-5{ margin-inline-start: 5em; }
.v-indent-6{ margin-inline-start: 6em; }


/* ▼画像はテキストの下層に配置 */
.hotspring-photos{
  position: relative;
  z-index: 1;
  min-height: 280px;
}

.hotspring-photo{
  position: absolute;
  bottom: 0;
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity .7s ease, transform .7s ease;
}

.hotspring-photo img {
  width: 100%;
  height: auto;  
  display: block;
}

.hPhoto--left { 
  left: 0; 
  width: clamp(220px, 30vw, 440px); 
}

.hPhoto--right {
  right: 0;
  width: clamp(200px, 27vw, 400px); 
  bottom: -80px;
}

.hotspring-photo.is-inview{
  opacity: 1;
  transform: none;
}


@media (max-width: 768px){
  .sec02 .v-pair{
    display: flex;
    flex-direction: row-reverse;  /* ← 並びを逆にする */
    justify-content: center;
    gap: 1.6em;
  }

  .sec02 .v-pair .pair-item{
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  .hotspring-photos{
  position: relative;
  z-index: 1;
  min-height: 150px;
}
}


/* ----------------------------------------------------
sec03
---------------------------------------------------- */
.sec.sec03{
  background: url("../images/sec03_bg.jpg") top center no-repeat;
  position: relative;            
  padding-top: 48px;
  margin-inline: calc(50% - 50vw); 
  width: 100vw;                    
  overflow: hidden;                
  background-size: cover;
  background-repeat: no-repeat;
  padding-top:clamp(60px,6vw, 80px);
}

.sec03::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);    
  width: 100vw;                  
  height: 8px;                  
  background: url("../images/sec03_border.png") repeat-x center/auto 100%;
  z-index: 1;
}

/* --- タイトル--- */
.sec03_title{
  margin: 0 0 18px;
  text-align: center;
  font-size: clamp(18px, 4.2vw, 33px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .15em;
  color: transparent;
  background: linear-gradient(
    90deg,
    #421314 0%,
    #6F4B26 10%,
    #B1954F 40%,  
    #B1954F 70%,   
    #A38358 85%,
    #8D5429 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
}


.sec03-strong{
  display: block;
  margin-top: 6px;
  font-size: clamp(40px, 6vw, 50px);
  font-weight: 600;
  line-height: 1.3;
}

.sec03_body{
  display: grid;
  grid-template-columns: 1fr minmax(320px, 1fr);
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
  margin-top: 8px;
}

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

.sec03_copy{
  display: grid;
  gap: 10px;
}
.sec03_sub {
  margin: 0 0 18px;
  font-size: clamp(15px, 2vw, 32px);
  font-weight: 700;
  color: #4e3b1c; 
  position: relative; 
  display: inline-block;
  font-size: 27px;
  padding-bottom: 10px;
}

/* H3の文字幅に合わせた金ボーダー */
.sec03_sub::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;  
  width: 100%;  
  height: 2px;  
  background: linear-gradient(
    90deg,
    #421314 0%,
    #6F4B26 20%,
    #B1954F 60%,
    #A38358 80%,
    #8D5429 100%
  );
}

.sec03_text{
  margin: 0;
  color: #333;
}

@media (max-width: 768px){
  .sec03_body{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 12px;
  }
  .sec03_photo{ order: 1; }
  .sec03_copy { order: 2; }

  .sec03_sub{
    margin: 8px 0 10px;
    font-size: clamp(26px, 5.2vw, 24px);
    padding-bottom: 8px;
    text-align: center;
  }

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

/* グラフブロック01*/
:root{
  --sec03-head-w: clamp(180px, 25vw, 400px); 
}

.sec03_head{
  display:block;
  width: var(--sec03-head-w);
  margin: 0 auto 24px;             
  padding: 5px 0;
  font-size: clamp(20px, 2.4vw, 20px);
  font-weight: 800;
  color: #fff;

  /* 指定の角度/色。B1954Fを厚めに配分 */
  background: linear-gradient(
    50deg,
    #DAC184 0%,
    #B1954F 25%,
    #B1954F 100%
  );

  box-shadow: 0 2px 8px rgba(0,0,0,.08); 
}


/* グラフブロック全体（白カード） */
.sec03_cont{
  margin: 30px;
  padding: clamp(10px, 3vw, 28px);
  background: rgba(255,255,255,.9);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}

/* 行の基本レイアウト：左=画像 / 右=テキスト */
.sec03_row{
  display: grid;
  grid-template-columns: 300px 1fr;   
  gap: clamp(16px, 2.5vw, 32px);
  align-items: start;
  grid-template-areas: "img text";
}

/* 反転（右=画像 / 左=テキスト） */
.sec03_cont.is-reverse .sec03_row{
  grid-template-columns: 1fr 300px;  
  grid-template-areas: "text img";
}

/* 画像 */
.sec03_graph{ 
  grid-area: img; 
  margin: 0;
  max-width: 300px;   
  justify-self: center;
}
.sec03_graph img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* テキスト */
.sec03_desc{ 
  grid-area: text; 
  margin: 0; 
  text-align: left; 
}
.sec03_graph.graph--small{
  max-width: 240px;
}


@media (max-width: 768px){
  .sec03_cont{
    margin: 20px 0px;
  }

  .sec03_row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;      /* テキストも中央寄せ */
  }

  .sec03_graph {
    order: 1;                /* 画像を先に */
    width: 100%;             /* 横幅いっぱい */
    max-width: 480px;        /* ただし上限は適度に */
  }

  .sec03_desc {
    order: 2;                /* テキストを後に */
    margin: 5px auto;
  }

  .sec03_head {
      text-align: center;
      width: 320px;
      padding: 5px 0;
      margin-top: 5px;
  }
}


/* ホルミシス効果が期待できる症状*/

/* タイトル帯*/
.sec03_title_2{
  position: relative;
  margin: 32px 0 20px;
  margin-inline: calc(50% - 50vw); 
  width: 100vw;
  background: linear-gradient(90deg, #EADCBA 30%, #B1954F 100%);
  box-shadow: 0 3px 14px rgba(0,0,0,.08);
  overflow: visible;              
}

/* 内側ラッパ：ページ幅に合わせて中央寄せ */
.sec03_title_2-inner{
  position: relative;
  max-width: 1000px;             
  width: min(92vw, 1000px);
  margin: 0 auto;
  min-height: clamp(46px, 6vw, 72px);      
  padding-block: clamp(6px, 1.1vw, 10px);    
  display: flex;
  align-items: center;
  justify-content: center;       
}

/*左に配置して上下にはみ出させる */
.title-ornament{
  position: absolute;
  left: 5%;                       
  top: 60%;
  transform: translate(0%, -60%);
  width: clamp(64px, 30vw, 150px);
  height: auto;
  pointer-events: none;
}


.title-ornament img{display:block; width:100%; height:auto;}


/* 見出し：うっすら白い光彩 */
.sec03-strong_2{
  margin: 0;
  font-size: clamp(22px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: .06em;
  color: #1A1A1A;
  text-align: center;
  text-shadow:
    0 0 5px rgba(255,255,255,.7),
    0 0 8px rgba(255,255,255,.35);
}


.symptoms-card{
  background:
    url("../images/sec03_bg_02.png") center/cover no-repeat;
  border-radius: 14px;
  padding: clamp(5px, 10vw, 28px);
  position: relative;
  isolation: isolate;
}

/* リスト：4カラムのグリッド */
.symptom-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: clamp(3px, 8vw, 20px);
  row-gap: clamp(3px, 1.8vw, 15px);
  font-size: clamp(12px, 1.3vw, 16px);
  line-height: 1.9;
  color: #1a1a1a;
}

/* 各項目：金色の縦バーを疑似要素で */
.symptom-list li{
  display: flex;
  align-items: center;
  gap: .6em;
  white-space: nowrap;          
}

.symptom-list li::before{
  content: "";
  inline-size: 6px;             
  block-size: 1.1em;            
  border-radius: 1px;
  background: #8B784D;
  flex: 0 0 auto;
}

/* 備考 */
.symptom-notes{
  margin: 10px 6px 0;
  font-size: clamp(8px, 1.5vw, 13px);
  line-height: 1.7;
  color: #4b4b4b;
}


@media (max-width: 768px){
  .sec03_title_2-inner {
    display: flex;
    flex-direction: row; 
    align-items: center;
    min-height: auto;
    text-align: left;
    position: relative; 
  }

  .title-ornament {
    position: absolute; 
    top: 50%;
    left: -5%;
    transform: translateY(-50%);
    width: 120px; 
    height: auto;
  }

  .sec03-strong_2 {
    font-size: 28px;
    line-height: 1.4;
    text-align: left;
    margin-left: 100px; 
  }

  .symptom-list {
    grid-template-columns: repeat(3, 1fr);
    font-size: 13px;
  }
.symptom-list li::before{
  content: "";
  inline-size: 4px;             
  block-size: 1.1em;            
  border-radius: 1px;
  background: #8B784D;
  flex: 0 0 auto;
}

/* リスト：4カラムのグリッド */
.symptom-list{
  column-gap: clamp(3px, 8vw, 5px);
}

/* 備考 */
.symptom-notes{
  margin: 1px 0;
  line-height: 1.2;
}

.symptoms-card{
  padding:20px 10px;
  position: relative;
  isolation: isolate;
}

}


/* ===== 医師が薦めるラドン温湿浴 ===== */

:root{
  --rec-bg-w: 80vw;              /* 背景の横幅（画面比） */
  --rec-cut: 38px;               /* 右上の切り抜きサイズ */
  --rec-radius: 14px;        
  --rec-shadow: 0 10px 24px rgba(0,0,0,.14);
  --grad-a: #EADCBA;             /* グラデ開始色 */
  --grad-b: #B1954F;             /* グラデ終了色 */
}

/* セクション土台 */
.rec-sec{
  position: relative;
  padding: clamp(22px, 3vw, 36px) 0;
  margin: 30px 0 80px;
}

/* ==== 背景（右上カット四角形） ==== */
.rec-sec.noimage::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left: calc(50% - 50vw);
  width: var(--rec-bg-w);

  clip-path: polygon(
    0 0,
    calc(100% - var(--rec-cut)) 0,
    100% var(--rec-cut),
    100% 100%,
    0 100%
  );
  background: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%);
}


/* ==== 前面のコンテンツ ==== */
.rec-grid{
  position: relative;
  z-index:1;
  max-width: 750px;
  margin-left: clamp(20px, 6vw, 20px);
  margin-right: clamp(16px, 4vw, 20px);
  display:grid;
  grid-template-columns: minmax(190px, 160px) 1fr auto; /* 本 / 本文 / 縦見出し */
  gap: clamp(14px, 2.5vw, 28px);
  align-items: center;
}

/* 左：本 */
.rec-photo{ margin:0; }
.rec-photo img{ display:block; width:100%; height:auto; 
max-width: 200px;}

/* 中央：本文 */
.rec-copy{
  color:#1A1A1A;   
  font-size: clamp(15px, 1.15vw, 16px);
}


.rec-vtitle-wrap{
  display: flex;
  gap: 14px;           
  justify-content: flex-end;
  overflow: visible;     
}

/* 縦書きタイトルの親ラッパー */
.rec-vtitle-wrap{
  position: relative;
  margin-top: -20%;        
  gap: clamp(6px, 1vw,8px);
  justify-content: flex-end;
  align-items: flex-start;
  overflow: visible;
}

/* 縦書きタイトル共通 */
.rec-vtitle-pill{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: linear-gradient(180deg, #FFFEFD 80%, #fee6c6 100%);
  color: #6A4A1F;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px); 
  letter-spacing: 0.2em;             
  padding: clamp(4px, 5vw, 40px) clamp(5px, 0.5vw, 14px);
  box-shadow: 6px 6px 12px rgba(144, 122, 93, 0.4); 
  margin-top: 10px;
}

/* 右側のタイトル（医師が薦める）だけ下げる */
.rec-vtitle-pill.pill--offset{
  margin-top: -50%;
}


@media (max-width: 768px){
  .rec-grid{
    grid-template-columns: 120px 1fr;  
    grid-template-areas:
      "photo vtitle"
      "copy  copy";
    gap: 12px 14px;
    align-items: start;
    max-width: 92vw;
    margin: 0 auto;
  }

  .rec-sec{
  margin: 30px 0;
}

  .rec-photo{ grid-area: photo; }
  .rec-copy { grid-area: copy; }
  .rec-vtitle-wrap{ 
    grid-area: vtitle; 
    margin-top: 0;
    justify-content: flex-end; 
    gap: 6px;
  }

  /* 本のサイズ調整 */
  .rec-photo img{
    width: 170%;
    max-width: 300px;
    height: auto;
  }

  /* 縦書きピル（タイトル）をやや小さめに */
  .rec-vtitle-pill{
    font-size: 30px;
    letter-spacing: .3em;
    padding: 20px 6px;
    box-shadow: 4px 4px 10px rgba(144,122,93,.35);
  }

  /* 右側のタイトル（医師が薦める）だけ下げる */
  .rec-vtitle-pill.pill--offset{
    margin-top: -20%;
  }


  /* 背景帯（右上カット）はSPでも背面に出るように幅を少し広げるなら任意で */
  .rec-sec.noimage::before{
    width: 100vw;     /* 画面いっぱい */
    left: calc(50% - 50vw);
  }
}

/* CTA */
.sec03_cta{
  margin-top: clamp(20px, 4vw, 40px);
  text-align: center;
  margin-bottom: 80px;
}
.sec03_cta .cta{
  display:inline-block;
  line-height:0;         
  transition: transform .18s ease, filter .18s ease;
}
.sec03_cta .cta img{
  width: clamp(240px, 44vw, 520px);
  height:auto;
  display:block;
}
.sec03_cta .cta:hover{
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
}

@media (max-width: 768px){
.sec03_cta .cta img{
  width: 100%;
}
.sec03_cta{
  margin-top: clamp(20px, 4vw, 40px);
  text-align: center;
  margin-bottom: 40px;
}

}


/*  sec04 北投石の産地の違い */

/* ===== sec04 共通 ===== */
.sec.sec04{
  background: url("../images/sec04_bg.jpg") top center no-repeat;
  position: relative;
  /* 背景をページいっぱい */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  background-size: cover;
  padding: clamp(36px, 6vw, 80px) 0;
}

/* タイトル */
.sec04_title{
  text-align: center;
  margin: 0 0 clamp(24px, 4vw, 30px);
  line-height: 1.6;
  margin-bottom: 70px;
}

.sec04_overline{
  font-size: clamp(20px, 1.8vw, 40px);
  letter-spacing: .25em;
  color: #8c7a62;
  font-weight: 700;
}

.sec04_strong{
  display: inline-block;
  position: relative;        
  padding-bottom: 18px;     
  margin-top: .2em;
  font-size: clamp(33px, 3.8vw, 50px);
  letter-spacing: .15em;
  color: #1a1a1a;
  font-weight: 500;
}

/* 下のグラデーション線 */
.sec04_strong::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10%;
  transform:translateX(-50%);
  width: clamp(120px, 3.8vw, 160px);           
  height: 2px;
  background: linear-gradient(to right, #C8AB84, #B6905B);
}


.sec04_sub{
  margin: 0 0 18px;
  font-size: clamp(28px, 2.6vw, 32px);
  font-weight: 600;
  color: #B6905B; 
  position: relative;   
  display: inline-block; 
  padding-bottom: 10px;
  line-height: 1.5;
}



/* H3の文字幅に合わせた金ボーダー */
.sec04_sub::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px; 
  width: 100%;   
  height: 2px; 
  background: linear-gradient(
    90deg,
    #421314 0%,
    #6F4B26 20%,
    #B1954F 60%,
    #A38358 80%,
    #8D5429 100%
  );
}


/* 2カラム構成（上段2つ / 中段テキスト+箱 / 下段カード） */
.sec04_grid{
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); 
  column-gap: clamp(14px, 2.4vw, 32px); 
  row-gap: clamp(16px, 3vw, 32px);
  align-items: start;     
  max-width: 1000px;
  margin: 0 auto 20px;
}

/* 1段目：地図（左）／リード（右） */
.sec04_grid .map  {
  grid-column: 1;
  grid-row: 1; 
}
.sec04_grid .lead {
  grid-column: 2;
  grid-row: 1;
}

/* 2段目：note（左）／箱写真（右） ←ここがポイント */
.sec04_grid .note {
  grid-column: 1;
  grid-row: 2; 
  align-self: start; 
}
.sec04_grid .box  { 
  grid-column: 2; 
  grid-row: 2; 
  align-self: start; 
  justify-self: start; 
}

/* 画像 */
.sec04_photo{ 
  margin: 0; 
}

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

/* noteの文字まわり（必要なら微調整） */
.note{
  margin: 0;
}

.sec04_photo.box{
  max-width: 300px; 
}

.sec04_photo.box img{
  width: 100%;
  height: auto;
}

.sec04_photo.card{
  max-width: 600px;   
    margin: auto;
}

.sec04_photo.box img{
  width: 100%;
  height: auto;
}



@media (max-width: 768px){
  .sec04_grid{
    grid-template-columns: 1fr;
    max-width: 92vw;
  }
  .sec04_grid .map{
    grid-column: 1;
    grid-row: 1; 
  }
  .sec04_grid .lead{
    grid-column: 1;
    grid-row: 2; 
  }
  .sec04_grid .box{ 
    grid-column: 1; 
    grid-row: 3; 
        justify-self: center;   /* ← 横中央にする */
  }  
  .sec04_grid .note{ 
    grid-column: 1; 
    grid-row: 4; 
  } 
  .sec04_sub{
    display: block; 
    text-align: center;
    margin-inline: auto; 
    margin-bottom: 30px;
  }

  .sec04_sub::after{
    width: 85%;
    left: 50%;
    transform: translateX(-50%);
  }

  .sec04_photo.card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sec04_photo.card img {
    height: 450px;   /* 縦サイズを指定 */
    width: auto;     /* 横幅は自動計算（比率維持） */
    max-width: none; /* デフォルトのmax-width制限を解除 */
    display: block;
    margin: 0 auto;  /* 中央寄せ */
  }
    /* 横スクロール可能にする */
  /* 横スクロール容器 */
  .hscroll{
    position: relative;
    overflow-x: auto;
    overflow-y: visible;      /* ← ここを visible に */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 34px;     /* ← ヒント分の下余白を確保 */
    margin-bottom: 8px;       /* セクションとの間隔 */
  }
  .hscroll::-webkit-scrollbar{ display:none; }

  /* 画像は縦基準で縮小・比率維持 */
  .hscroll img{
    height: 240px;            /* お好みで 200–260px など */
    width: auto;
    display: block;
    margin: 0 auto;
  }

  /* スクロールヒント（画像の“内側・下部”に表示） */
  .scroll-hint{
    position: absolute;
    left: 50%;
    bottom: 6px;              /* ← マイナスにしない */
    transform: translateX(-50%);
    font-size: 13px;
    color: #333;
    background: rgba(255,255,255,.9);  /* 影は無し */
    padding: 6px 12px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    z-index: 2;
    animation: fadeHint 2.5s infinite;
    pointer-events: none;      /* タップを邪魔しない */
  }
  .scroll-hint .finger{
    display:inline-block;
    font-size: 18px;
    color: #666;          /* ← 灰色にする */
    animation: swipe 1.5s infinite;
  }

  @keyframes fadeHint{ 0%,100%{opacity:.4} 50%{opacity:1} }
  @keyframes swipe{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(12px)} }

  @media (prefers-reduced-motion:reduce){
    .scroll-hint, .scroll-hint .finger{ animation:none; }
  }
}





/* ===== sec05 ===== */
.sec.sec05{
  position: relative;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  background: url("../images/sec05_bg.jpg")center/cover no-repeat;
  padding: clamp(48px, 8vw, 120px) 0 clamp(10px, 8vw, 120px);
}

/* タイトル＆オーナメント */
.sec05_title{
  margin-bottom: clamp(24px, 5vw, 48px); 
}

.sec05_title-inner{
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding-top: clamp(70px, 10vw, 110px);
}

.sec05_title .title-ornament{
  position: absolute;
  inset: 0 auto auto 50%;
  transform: translate(-50%,-35%);      
  width: clamp(90px, 30vw, 180px);    
  pointer-events: none;
}

.sec05_title .title-ornament img{
  display:block; 
  width:100%; 
  height:auto; 
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
}

.sec05_title h2{
  margin: 0;
  font-weight: 500;
  line-height: 1.2;
  font-size: clamp(18px, 2.4vw, 26px); 
  color: #EBE1D3;
}

.sec05_title h2 .brown{
  display:block;
  font-size: clamp(28px, 5vw, 50px);   
  letter-spacing: .18em;
  color: #EBE1D3;
  position: relative;
  margin-top: .35em;
  padding-bottom: .5em;
    font-weight: 500;
}


.sec05_title h2 .brown::after{
  /* ゴールドの下線 */
  content:"";
  position:absolute;
  left:50%;
  bottom:-15%;
  transform: translateX(-50%);
  width: clamp(90px, 16vw, 160px);
  height: 2px;
  background: linear-gradient(90deg, #EBE1D3 60%, #B89360 100%);
}

/* 白カード（左画像／右テキスト） */
.sec05_card{
  max-width: 1120px;
  margin: clamp(40px, 4vw, 36px) auto;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  padding: clamp(16px, 3vw, 28px);
}

.sec05_row{
  display: grid;
  grid-template-columns: minmax(280px, 320px) 1fr;
  gap: clamp(14px, 3vw, 36px);
  align-items: center;
}
.sec05_graph{ margin: 0; }
.sec05_graph img{ display:block; width:100%; height:auto;
max-width: 350px;}

.sec05_desc{
  margin: 0;
}


/* CTA */
.sec05_cta{
  margin-top: clamp(20px, 4vw, 40px);
  text-align: center;
}
.sec05_cta .cta{
  display:inline-block;
  line-height:0;           
  transition: transform .18s ease, filter .18s ease;
}
.sec05_cta .cta img{
  width: clamp(240px, 44vw, 520px);
  height:auto;
  display:block;
}
.sec05_cta .cta:hover{
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
}

/* SP */
@media (max-width: 768px){
  .sec05_row{
    grid-template-columns: 1fr;
    text-align: left;
  }

.sec05_cta .cta img{
  width: 100%;
}
.sec05_cta{
  margin-bottom: 20px;
}
}


/* ===== sec06 ===== */

.sec06{
  padding: 80px 0;
  background: url("../images/sec06_bg.jpg")center/cover no-repeat;
}
/* タイトル */
.sec06_title{
  text-align:center;
  margin:0 0 clamp(60px,5vw,80px);
  line-height:1.6;
}

.sec06_overline{
  font-size: clamp(20px, 2vw, 28px);  
  letter-spacing:.2em;
  color:#1a1a1a;
  font-weight:500;
  display:inline-block;
  margin-bottom:.4em;
}

.sec06_strong{
  font-size: clamp(34px, 4.2vw, 50px); 
  font-weight:5600;
  color:#1a1a1a;
  position:relative;
  display:inline-block;
  padding-bottom:14px;
  letter-spacing: 0.15em; 
}

.sec06_strong::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-15%;
  transform:translateX(-50%);
  width: clamp(90px, 12vw, 160px);
  height:2px;
  background: linear-gradient(90deg, #C8AB84 0%, #B6905B 100%);
}

/* カード */
.sec06_card{ position:relative;
  margin-bottom:clamp(40px,6vw,56px);
}


.sec06_row{ display:flex; flex-direction:column; gap:20px; }

/* 2枚目だけ反転 */
.sec06_card.is-reverse .sec06_row{
  grid-template-areas: "img copy";
}
/* 左：番号と見出し */
.sec06_copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start; /* 左揃え */
  gap:10px;
}
.sec06_namber{ margin:0; }
.sec06_namber img{
  display:block; 
  height: clamp(23px, 30vw, 50px); 
  width:auto; 
}

.sec06_desc{
  margin:0;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height:1.6;
  font-weight:700;
  color:#6F4B26;
  letter-spacing: 0.15em; 
}

/* 本文＋画像を横並び */
.sec06_textrow{
  display:flex;
  justify-content:space-between;
  gap: clamp(16px, 3vw, 36px);
  align-items:flex-start;
}

/* テキスト60% */
.sec06_textrow p{
  flex: 0 0 50%;
  max-width: 50%;
  margin: 0;
}

/* 画像40% */
.sec06_graph{
  flex: 0 0 50%;
  max-width: 50%;
  margin:0;
}

.sec06_graph img {
  display: block;
  max-width: 100%;  
  height: auto;
  object-fit: contain;
}

/* --- カード2と3だけ小さめにする --- */
.sec06_card.is-reverse .sec06_graph img,
.sec06_graph_size{
  width: auto;      
  max-width: 250px;  
  max-height: 240px; 
  margin: 0 auto;  
}

/* --- 2枚目だけレイアウト反転 --- */
.sec06_card.is-reverse .sec06_textrow{
  flex-direction: row-reverse;         
}

/* 2枚目の見出しブロックは右寄せ（番号も右に揃う） */
.sec06_card.is-reverse .sec06_copy{
  align-items: flex-end;             
  text-align: right;                 
}
.sec06_card.is-reverse .sec06_namber img{
  margin-left: auto;                  
}

/* 装飾：通常は右側、2枚目(is-reverse)は左側に出す */
.sec06_decor{
  position:absolute;
  left: var(--x, 80%);
  top:  var(--y, -20px);
  width: var(--size, 120px);
  pointer-events:none;
  z-index:2;
}
.sec06_card.is-reverse .sec06_decor{
  left: auto;                           
  right: var(--x-rev, 72%);            
  top:  var(--y-rev, -10px);
    width: var(--size, 160px);
}


.sec06 > .sec06_card:last-of-type {
  margin-bottom:0;
}


@media (max-width:768px){
  .sec06{
  padding: 40px 0;
}

  .sec06_textrow{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 12px;
  }

  /* 画像を先に表示 */
  .sec06_textrow .sec06_graph {
    order: 1;
    width: 100%;
    max-width: 92vw;
    margin: 12px auto 0;
  }

  /* テキストを後に表示 */
  .sec06_textrow p {
    order: 2;
    flex: none;
    max-width: 92vw;
    width: 100%;
    margin: 0 auto;
    text-align: left;
  }

  .sec06_graph{
    flex:none;
    width:100%;
    margin-top:12px;
  }

  .sec06{
  padding: 40px 0;
}

 /* 共通：縦積み＆中央寄せ */
  .sec06_row{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }


  /* ── ① 番号（sec06_namber）を中央に固定 ── */
  .sec06_namber{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  /* is-reverseで付いていた右寄せを無効化（優先度を上げて上書き） */
  .sec06_card.is-reverse .sec06_namber,
  .sec06_card.is-reverse .sec06_copy{
    align-items: center !important;
    text-align: center !important;
  }
  .sec06_card.is-reverse .sec06_namber img{
    margin-left: 0 !important;
  }


  /* ── ② 2枚目の画像が消える（極端に小さくなる）対策 ──
     反転カード用の「横並び/縮小」指定を完全リセット */
  .sec06_card.is-reverse .sec06_textrow{
    flex-direction: column !important;   /* row-reverse を打ち消す */
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .sec06_graph{
    flex: none !important;
    width: 100% !important;
    max-width: 92vw !important;
    margin: 12px auto 0 !important;
  }
    .sec06_card .sec06_namber{
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .sec06_graph_size{
    margin-bottom: 60px;
  }

   /* すべてのカードを中央寄せ */
  .sec06_copy{
    align-items: center !important;
    text-align: center !important;
  }
  .sec06_namber{
    margin: 0 auto !important;
    display: flex;
    justify-content: center !important;
    width: 100%;
  }
  .sec06_namber img{
    margin: 0 auto !important;
    display: block;
  }

  /* 反転(is-reverse)も強制で中央寄せ */
  .sec06_card.is-reverse .sec06_copy{
    align-items: center !important;
    text-align: center !important;
  }
  .sec06_card.is-reverse .sec06_namber img{
    margin: 0 auto !important;
  }
}




/* ===== sec07お客様の声 ===== */


.sec07{
  background: url("../images/sec07_bg.jpg")center/cover no-repeat;
  padding: 80px 0;
}


/* タイトル */
.sec07_title{
  text-align:center;
  line-height:1.6;
  margin-bottom:100px;
}

.sec07_overline{
  font-size: clamp(18px, 2vw, 25px);  
  letter-spacing:.2em;
  color:#8B784D;
  font-weight:650;
  display:inline-block;
  margin-bottom:.4em;
}

.sec07_strong{
  font-size: clamp(38px, 4.2vw, 50px); 
  color:#1A1A1A;
  position:relative;
  display:inline-block;
  padding-bottom:14px;
  letter-spacing: 0.15em; 
  font-weight:500;
}

.sec07_mini{
  font-size: clamp(18px, 2vw, 23px); 
  color:#1A1A1A;
}


.sec07_strong::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-80%;
  transform:translateX(-50%);
  width: clamp(120px, 12vw, 160px);
  height:2px;
  background: linear-gradient(90deg, #C8AB84 0%, #B6905B 100%);
}


/* 白いカード */
.sec07_card{
  background:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  max-width: 1040px;
  margin: 0 auto clamp(28px,3vw,20px);
  padding: clamp(16px,3vw,28px);
}

/* 上段：アイコン + タイトルブロックを2カラムに */
.sec07_head{
  display:grid;
  grid-template-columns: clamp(80px,12vw,140px) 1fr;
  gap: clamp(12px,2.4vw,24px);
  align-items: center;
  margin-bottom: clamp(12px,2.8vw,22px);
}

.sec07_icon{ margin:0; }
.sec07_icon img{
  display:block;
  width:100%;
  height:auto;
  object-fit: cover;
}

/* タイトル＋下線＋年齢 */
.sec07_titlebox{
  align-self:flex-start;
}


.sec07_cardtitle{
  position:relative;
  margin: 0 0 .6em 0;
  font-size: clamp(19px,2vw,24px);
  font-weight: 700;
  line-height: 1.6;
}


.sec07_cardtitle::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width: clamp(310px, 33vw, 500px);
  height: 2px;
  background: linear-gradient(90deg,#C8AB84 0%, #B6905B 100%);
  border-radius: 2px;
}

.sec07_meta{
  margin: .9em 0 0;
  font-size: clamp(17px,1.6vw,18px);
  font-weight: 600;
  color:#222;
}

/* 下段：本文 */
.sec07_body p{
  margin: 0;
}

/* 右下に回り込ませる画像 */
.sec07_graph{
  float: right;                         
  width: clamp(160px, 26vw, 300px);     
  margin: clamp(6px,1vw,10px) 0 clamp(6px,1vw,10px) clamp(12px,2vw,20px); /* 上右下左 */
}
.sec07_graph img{
  display:block;
  width:100%;
}

/* 回り込み解除 */
.sec07_card::after{
  content:"";
  display:block;
  clear: both;
}

@media (max-width:768px){
  /* sec07_head を縦積み → タイトルの下にまとめる */
  .sec07{
    padding: 40px 0;
  }

    .sec07_head{
    display: block;
    text-align: center;
  }

  .sec07_strong::after{
  bottom:-110%;
}

  .sec07_graph{ float: none; margin: 0; }
  .sec07_title{
    margin-bottom:40px;
  }
  
  .sec07_graph.only-sp {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px auto; 
    width: 100%;     
  }

  .sec07_graph.only-sp img {
    width: 100%;        /* 希望サイズに固定 */
    height: auto;        /* 縦横比を維持 */
    display: block;
    margin: 0 auto;      /* 念のため中央寄せ */
  }
    article.sec07_card:nth-of-type(n+4) .sec07_head{
    display: flex !important;          /* 既存の block を上書き */
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    margin-bottom: 18px;
  }
  article.sec07_card:nth-of-type(n+4) .sec07_titlebox{ order: 1; }
  article.sec07_card:nth-of-type(n+4) .sec07_icon{
    order: 2;
    width: 200px;  
    margin: 0 auto;
  }
  article.sec07_card:nth-of-type(n+4) .sec07_icon img{
    width: 100%;
    height: auto;
    display: block;
  }

}



/* ===== sec08 プレゼント ===== */
.sec08{
  position: relative;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
  padding: 80px 0 100px;
  background: url("../images/sec08_bg.jpg") center top no-repeat;
  background-size: cover;
  width: 100vw;                   
}


/* レイアウト */
.sec08_grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 80px);
  align-items: center;
  max-width: 750px;
  margin: 0 auto;
}

/* 左の箱画像 */
.sec08_photo{
  margin: 0;
}

.sec08_photo img{ 
  display:block; 
  width: 90%;
  height:auto;
}

/* 右の縦書きタイトル */
.sec08_title{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(17px, 3vw, 25px);
  line-height: 2;
  color:#EBE1D3;
  font-weight: 500;
  letter-spacing: 7px;
}


.sec08_strong{
  font-size: clamp(28px, 3vw, 45px);
  font-weight: 700;
  color: #EBE1D3;
}


/* ========== ギフト説明カード ========== */

.gift-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: clamp(16px, 3vw, 32px);
  max-width: 750px;
  margin: clamp(28px, 5vw, 30px) auto 0;
}

.gift-card{
  background: #F2F2F2;                
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: flex;
  flex-direction: column;               
  min-height: 100%;
}

.gift-card__img{ margin: 0; }
.gift-card__img img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;              
  object-fit: cover;
}

.gift-card__txt{
  padding: clamp(14px, 2.4vw, 30px);
}

/* ========== 無料の熨斗 ========== */
.noshi-grid{
  position: relative;           
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(200px, 360px) 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
  max-width: 750px;
  margin: 50px auto 0;
  padding: 0 clamp(12px, 3vw, 20px);
}

.noshi-title{
  margin: clamp(10px, 5vw, 20px) auto clamp(12px, 2.2vw, 20px);
  font-size: clamp(30px, 2.6vw, 33px);
  color: #EBE1D3;                
}

.noshi-img{
  margin: 0;
}
.noshi-img img{
  display: block;
  width: 60%;
  height: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  background: #fff;             
}

.noshi-txt p{
  margin: .4em 0 0;
  color: #EDEDED;
}


.noshi_syurui{
  width: 40%;
  margin: auto;
}

.freeshipping{
  width: 40%;
  margin:50px auto;
}


/* ========== スマホ ========== */
@media (max-width: 768px){
  .sec08{
  padding: 40px 10px;               
}

.sec08_photo img{ 
  width: 160%;
}

  /* 写真だけ少し下へ */
  .sec08_grid{ align-items: start; }    
  .sec08_photo{ margin-top: 50px; }     


/* 縦書きタイトル */
  .gift-grid{
    grid-template-columns: 1fr;
  }
  .noshi-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px auto 0;

  }

  .noshi-title {
    order: 1;
    text-align: center;
    margin-bottom: 12px;
  }

  .noshi-img {
    order: 2;
    width: 100%;
  }

  .noshi-txt {
    order: 3;
  }

  .noshi-img img{
    width: 70%;              /* SPは大きめに */
    max-width: 520px;
    margin: 0 auto;
  }
  .noshi_syurui{
  width: 100%;
  margin-bottom: 40px;
}
.freeshipping{
  width: 100%;
  margin: 20px 0 40px;
}
}


/* ===== sec09 よくある質問 ===== */
.sec09 {
  position: relative;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  padding: 80px 0 10px;
  text-align: center;
  z-index: 0; /* コンテンツより下 */
}

.sec09::before {
  content: "";
  position: absolute;
  inset: 0; /* 全体を覆う */
  background: url("../images/sec09_bg.jpg") center top / cover no-repeat;
  z-index: -1; /* 背景を下に */
  pointer-events: none;
}

/* タイトル */
.sec09_strong{
  font-size: clamp(38px, 4.5vw, 56px);
  font-weight: 600;
  color: #1A1A1A;
  letter-spacing: .12em;
  margin: 0 0 .1em 0;
}

.sec09_overline{
  font-size: clamp(25px, 2.5vw, 30px);
  color: #8B784D;  
  font-weight: 600;
  letter-spacing: .15em;
  margin: 0;
}

/* ===== FAQ ===== */
.faq{
  margin: 50px auto;
}

/* 各アイテムの箱（白地×薄い枠） */
.faq-item{
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(0,0,0,.12);
  margin: 0 0 clamp(10px, 2vw, 16px);
}

/* summary行（Qの行） */
.faq-item > summary{
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 40px 1fr 24px; 
  align-items: center;
  gap: 8px;
  padding: clamp(12px, 2.4vw, 18px) clamp(12px, 2.4vw, 18px);
  position: relative;
}

/* デフォルトの三角を消す */
.faq-item > summary::-webkit-details-marker{ display:none; }

/* Qマーク・質問テキスト */
.faq-qmark{
  font-weight: 700;
  color: #333;
  text-align: center;
}
.faq-qtext{
  color:#1A1A1A;
  text-align: left;
}

/* 右端のアイコン（閉じている時：∨） */
.faq-item > summary::after{
  content: "﹀";
  font-size: 20px;
  color: #333;
  justify-self: end;
  transform: translateY(1px);
}

/* 開いたら「−」 */
.faq-item[open] > summary::after{
  content: "−";
  font-size: 22px;
  transform: translateY(-1px);
}

/* Answer部（Aの行） */
.faq-ans{
  display: grid;
  grid-template-columns: 40px 1fr; /* A / 本文 */
  gap: 8px;
  padding: clamp(12px, 2.4vw, 18px) clamp(12px, 2.4vw, 18px) clamp(16px, 2.8vw, 22px);
  border-top: 1px solid rgba(0,0,0,.08); /* 質問との区切り線 */
  text-align: left;
}
.faq-amark{
  font-weight: 700;
  text-align: center;
}
.faq-ans p{
  margin: 0;
}

/* 仕上げ */
.faq-item{
  border-radius: 4px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* SP調整 */
@media (max-width: 768px){
  .sec09 {
    padding: 40px 0 10px;
  }

  .faq-item > summary{
    grid-template-columns: 28px 1fr 22px;
  }
  .faq-ans{
    grid-template-columns: 28px 1fr;
  }
}



/* 商品に関するお問い合わせはこちら */
/* 全体 */
.sec10 { 
  padding: clamp(32px,6vw,80px) 0; 
  background:#faf7f0;
}

.cta-wrap { 
  max-width: 980px; 
  margin: 0 auto; 
  padding: 0 20px; 
  text-align:center;
}

.sec10_title { 
  margin:0 0 10px; 
  font-size: clamp(30px,3.4vw,42px);
  font-weight: 600;
}


.sec10_sub {
  font-size: clamp(20px,3.4vw,22px);
}


/* 強調スタイル */
.sec10_sub.highlight {
  display: inline;
  font-weight: 600;
  border-bottom: 2px solid #B6905B; /* 下線を指定の色で */
}

/* PCは2カラム、SPは縦積み */
.cta-grid {
  display: grid;
  grid-template-columns: auto auto; 
  gap:10px;                       
  justify-content: center;         
  align-items: center;
  margin: 40px 0;
}


.cta-left, .cta-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px){
  .cta-grid { grid-template-columns: .8fr; }
  .faq{
  margin: 30px auto 50px;
}
}




/* ボタン共通 */
.btn {
  display:block;
  width: 360px;
  max-width: 100%;
  margin: 0 auto 5px;
  padding: 8px 20px;
  border-radius: 30px;
  color:#fff; text-decoration:none;
  position: relative;
  transition: transform .08s ease, opacity .2s ease;
}
.btn:hover { 
  transform: translateY(-1px); 
  opacity:.96; 
}

.btn .btn-main { 
  display:block; 
  font-weight:700; 
  font-size: clamp(20px,2vw,22px); 
}

.btn .btn-note { 
  display:block; 
  font-size: 15px; 
  opacity:.9; 
  margin-top:1px; 
}
.btn .btn-arrow { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size: 26px; }

.btn-line { background:#06C755; } /* LINEグリーン */
.btn-form { background:#1a1a1a; }    /* 黒 */

/* QR */
.cta-qr { margin:10px 0; text-align:center; }
.cta-qr img { max-width: 200px; width:100%; height:auto; }
.cta-qr figcaption { margin-top:8px; font-size:18px; color:#444; line-height:1.7;
}
.cta-qr figcaption.strong {
  font-weight: 600;
}


.sec06,
.sec07,
.sec08,
.sec10 {
  position: relative;
  margin-inline: calc(50% - 50vw); /* ビューポート基準に */
  width: 100vw;                    /* 横幅を画面全体に */
}

.only-sp{
  display: none;
}
.only-pc{
  display: block;
}

@media (max-width: 768px){
  .only-sp {
    display:block;
  }

  .only-pc {
    display: none;
  }
}


/* ===== フッター ===== */
.footer {
  background: #1a1a1a;  
  text-align: center;   
  padding: 20px 10px;         
  color: #fff;         
  font-size: 13px;
}

.footer a {
  color: #fff;       
  text-decoration: none;
  margin: 0 8px;
}

.footer a:hover { 
  text-decoration: underline;
}

.footer .small {
  margin-top: 8px;
  font-size: 12px;
  color: #ccc;       
}


/* ===== プライバシーポリシー ===== */

.plivacypolicy {
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: #222;
  line-height: 1.8;
  padding: 60px 20px;
  background: #fafafa;
}

.plivacypolicy .article {
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  padding: 40px 28px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

/* 見出し */
.plivacypolicy h1 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6F4B26;
}

.plivacypolicy h2 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 1.8em 0;
  line-height: 1.9;
}

.plivacypolicy h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 2em 0 0.6em;
  color: #333;
  border-left: 4px solid #B6905B;
  padding-left: 0.6em;
}

/* 段落 */
.plivacypolicy p {
  margin: 0 0 1.5em;
  font-size: 0.95rem;
  color: #333;
}

/* サイトTOPリンク */
.plivacypolicy a {
  display: inline-block;
  margin-top: 40px;
  padding: 12px 28px;
  background: #B6905B;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: 4px;
  transition: background 0.3s;
}
.plivacypolicy a:hover {
  background: #6F4B26;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .plivacypolicy {
    padding: 40px 14px;
  }
  .plivacypolicy .article {
    padding: 28px 18px;
  }
  .plivacypolicy h1 {
    font-size: 1.6rem;
  }
  .plivacypolicy h2 {
    font-size: 1rem;
  }
  .plivacypolicy h3 {
    font-size: 1.05rem;
  }
}

/* ===== 特商法 ===== */
/* ページ全体中央寄せ */
.tokushohobg {
  background: #FAF7F0;
  min-height: 100vh; /* 全画面高さ */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 16px;
}

/* カード本体 */
.tokushoho {
  width: 100%;
  max-width: 900px;
  background: #fff;
  border-radius: 12px;
  padding: 40px 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  animation: fadeIn 0.6s ease;
}

/* タイトル */
.tokushoho > h1 {
  font-size: 26px;
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
  color: #333;
  letter-spacing: 1px;
}

/* 定義リスト（2カラム揃え） */
.tokushoho-list .row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px 16px;
  padding: 14px 0;
  border-bottom: 1px dashed #e0e0e0;
}
.tokushoho-list dt {
  font-weight: bold;
  color: #555;
}
.tokushoho-list dd {
  margin: 0;
  color: #333;
  line-height: 1.7;
}

/* 戻るリンクをボタン風に */
.backlink {
  text-align: center;
  margin-top: 32px;
}
.backlink a {
  display: inline-block;
  padding: 10px 20px;
  background: #f8f8f8;
  border-radius: 8px;
  color: #444;
  text-decoration: none;
  border: 1px solid #ddd;
  transition: 0.2s;
}
.backlink a:hover {
  background: #eee;
  border-color: #ccc;
}

/* フェードイン演出 */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: translateY(0);}
}

/* スマホ表示 */
@media (max-width: 768px) {
  .tokushoho {
    padding: 24px 16px;
  }
  .tokushoho > h1 {
    font-size: 20px;
  }
  .tokushoho-list .row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 0;
  }
}