@charset "utf-8";
/* ここからLP用 */
/* bodyのデフォルト余白を消す（左右8pxの余白が残ると片側が欠けやすい） */
/* はみ出し保険（横スクロール防止） */
html, body { 
margin: 0;
  width: 100%;
  overflow-x: hidden;
}
html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 16px;
}



*,
*::before,
*::after {
  box-sizing: inherit;
}



/* 画像は親幅に収める */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}


/* LP 背景 */
body#sodateru {
  background: url('img/mizuiro.jpg') repeat top left;
}

/* =========================
   PC（ベース）
   ========================= */
#wrapper {
  /* 行送りと段落間を変数で一元管理（単位なし） */
  --lh: 1.8;   /* 本文の行送り係数（1.7〜1.9目安） */
  --p-gap: 0.6;/* 段落間：行送りの何倍（PCは“今の半分”を狙って0.6） */

  font-size: 18px;
  line-height: var(--lh);

  width: 100%;
  max-width: 1000px;
  margin: 16px auto 0;
    --top-gap: 16px;                 /* 上マージン（PC） */
  margin: var(--top-gap) auto 0;
  background: #fff;
  padding: 0;
}

/* 段落の下マージン＝(行送り×係数) を em に変換して長さに */

#wrapper p{
  margin-top: 0;
  margin-bottom: calc(var(--p-gap) * var(--lh) * 1em);
  /* ← margin-left/right は書かない。auto を潰さないため */
}
/* PCでは強制改行を無効化（必要な所だけ <br class="keep"> を使う） */
#wrapper .content p br { display: none; }
#wrapper .content p br.keep { display: inline; }

/* 中身の横幅（可変） */
.content {
  width: 100%;
  max-width: 800px;
  margin: 48px auto;
  padding: 0;
}
/* 画像だけの <p> は段落間を控えめに */
#wrapper p:has(> img:only-child) {
  margin-bottom: calc(var(--p-gap) * var(--lh) * 0.6 * 1em);
}
/* =========================
   Tablet（〜999px）
   ========================= */
@media (max-width: 999px) {
  #wrapper {
    margin: 8px auto;
    /* タブレットは少しだけ段落間を戻す */
    --p-gap: 0.7;
  }
    #wrapper { --top-gap: 8px; margin: var(--top-gap) auto 0; }
	
  /* <br> 復活 */
  #wrapper .content p br { display: inline; }

  .content {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 16px;
  }
}


/* =========================
   Mobile（〜599px）
   ========================= */
@media (max-width: 599px) {
  #wrapper {
    font-size: 16px;
    --lh: 1.7;   /* SPは少し広めの行送り */
    --p-gap: 0.7;/* ★ご要望：段落は“半行分”の空き */
  }
  /* <br> はそのまま有効 */
  #wrapper .content p br { display: inline; }
#wrapper { --top-gap: 8px; margin: var(--top-gap) auto 0; }
  .content {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 12px;
  }
}



/* 見出し */
h2 {
  font-family: "游明朝体", "YuMincho", serif;
  color: #1fb4cc;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2em;
  margin:0 0 48px 0;
  text-align: center;
    background:url(img/water.png) no-repeat center top;
  height:158px;
  padding:52px 0;
}
h3{
	  font-family: "游明朝体", "YuMincho", serif;
	  font-size: 28px;
	  font-weight: 800;
  line-height: 1.2em;
  margin:60px 0 32px 0;
  text-align: center;
  padding:0 0 16px 0;
  border-bottom:2px solid #1fb4cc;

}

h4{
	  font-size: 22px;
	  font-weight: 800;
  line-height: 1.2em;
  margin: 24px 0;
  text-align: left;
  background:#E5E5E5;
  padding:4px 16px;
  border-radius:4px;
}

@media only screen and (max-width: 480px) {
  h2 {
    font-size: 36px;
	  padding:56px 0;
	    margin:0 0 8px 0;
  }
    h3 {
    font-size: 20px;
  }
    h4 {
    font-size: 18px;
  }
}

/* 見出し直後の段落をやや詰める */
h2 + p, h3 + p, h4 + p {
  margin-top: calc(var(--lh) * 0.25 * 1em);
}

/*蛍光カラー*/
.keikou{
	background:url(img/green.png) repeat-x 2px 0;
}
.ss{
	font-size:75%;
}
/*フロートを含む親要素にこのクラスを追加する*/
.clearfix:after{/*:after議事要素とcontentプロパティによってボックスの最後に.を生成。これをブロックボックスにして回り込みの解除を*/
content:".";
display:block;
height:0px;
clear:both;
visibility:hidden;
}
/*主に:after疑似要素をサポートしていなブラウザ向けのスタイル*/
.clearfix{display:inline-block;}
/*\*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/**/

.cap{
font-size:90%;
}
.right{
	text-align: right;
}
.red{
	color:#F00;
}
.blue{
	color:#03C;
}
.photoL{
	float:left;
	margin: 0 10px 0 0;
	display:block;
}
.photoLs{
	float:left;
	margin: 0 10px 0 0;
	display:block;
}

.photoR{
	float:right;
	margin:0 0 0 10px;
	display:block;
}
.photoRs{
	float:right;
	margin:0 0 0 10px;
	display:block;
}




/*画像ボタンにリンクが貼られていると、マウスオーバーで光って見えるスタイル*/
a:hover img{
opacity:0.7;
filter: alpha(opacity=70);
}



@media only screen and (max-width: 480px) {
.photoL{
	float:none;
	margin: 0 0 10px;
	display:block;
}

.photoR{
	float:none;
	margin:0 0 10px;
	display:block;
}


}

/* PC（ベース）：中央寄せ＋最大700px */
.cc{
  width: 100%;
  max-width: 700px;
  margin: 24px auto;
}
.cc_f{
  width: 100%;
  max-width: 780px;
  margin: 24px auto;
}
#wrapper p.cc_f{
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
  margin-bottom: 24px;
}

#wrapper p.cc{
  margin-left: auto;
  margin-right: auto;
  margin-top: 24px;
  margin-bottom: 24px;
}
.kokuti{
background:#fff;
color:red;
font-weight:700;
font-size:20px;
line-height:1.4em;
text-align:center;
padding:8px;
width:100%;
}

/* Mobile：幅制限を外して100%に */
@media (max-width: 599px){
  .cc,
  .cc_f{
    max-width: none;   /* ← ここがポイント。700px制限を解除 */
    width: 100%;

    padding-inline: 12px;
    
  }
  .kokuti{
background:#fff;
color:red;
font-weight:700;
font-size:20px;
line-height:1.4em;
text-align:center;
padding:8px;
width:100%;
}
}






.bd1{
		display:block;
	border:1px solid #6CC;

}
/* 囲み記事（やや小さめ） */
.kakomi{
  --lh-box: 1.7;   /* 行送り（箱内） */
  --gap-box: 0.55; /* 段落間は行送りの何倍か */
  font-size: 16px; /* 本文より一回り小さく */
  line-height: var(--lh-box);
  background:#ecf7f9;
  border:1px dotted #1fb4cc;
  padding:8px;
  margin:0 0 32px 0;
}

/* 感想欄（さらに小さめ） */
.kansou{
  --lh-box: 1.6;
  --gap-box: 0.5;
  font-size: 15px;
  line-height: var(--lh-box);
  padding:0;
  margin:0 0 16px 0;
}
/* 箱内の段落マージンを上書き（#wrapper p より強くするため IDを含める） */
#wrapper .kakomi p,
#wrapper .kansou p{
  margin: 0 0 calc(var(--gap-box) * var(--lh-box) * 1em);
}

/* 画像だけの段落はやや詰める（任意） */
#wrapper .kakomi p:has(> img:only-child),
#wrapper .kansou p:has(> img:only-child){
  margin-bottom: calc(var(--gap-box) * var(--lh-box) * 0.7 * 1em);
}

/* モバイルでさらに一段小さく＆行間少し広め */
@media (max-width: 599px){
  .kakomi{ font-size: 15px; --lh-box: 1.75; --gap-box: 0.5; }
  .kansou{ font-size: 14px; --lh-box: 1.65; --gap-box: 0.5; }
}
/*-------------------------
■grid2-1 2列一覧表示
----------------------------*/
.grid2-1 {
	display : block;
	margin : 0;
	padding : 0;
}
.grid2-1 div {
	margin : 0 0 1em 0;
}




@media screen and (min-width: 640px) {

.grid2-1 {
	display : grid;
	grid-template-columns : repeat(2, 49%);
	justify-content : space-between;
}
}

/*---------------------------
■3-1col 3列一覧表示
----------------------------*/
.grid3-1 {
	display : block;
}
.grid3-1 div {
	margin : 0 0 20px 0;
}
@media screen and (min-width: 640px) {
.grid3-1 {
	display : grid;
	grid-template-columns : repeat(3, 33%);
	justify-content : space-between;
}
}
/*----------------------
■3
-------------------------*/
.grid3 {
	display : grid;
	grid-template-columns : repeat(3, 33%);
	justify-content : space-between;
}
.grid3 div {
	margin : 0 0 10px 0;
}
@media screen and (min-width: 640px) {
.grid3 {
	display : grid;
	grid-template-columns : repeat(3, 33%);
	justify-content : space-between;
}
}


/*--------------------------
■4-1col 4列一覧表示
-----------------------*/
.grid4-1 {
	display : block;
}
.grid4-1 div {
	margin : 0 0 2em 0;
}
@media screen and (min-width: 640px) {
.grid4-1 {
	display : grid;
	grid-template-columns : repeat(4, 23%);
	justify-content : space-between;
}
}

/*--------------------------
■4-2col 4列一覧表示
-------------------------*/
.grid4-2 {
 display : grid;
 grid-template-columns : repeat(2, 49%);
 justify-content : space-between;
}
.grid4-2 div {
 margin : 0 0 2em 0;
}
@media screen and (min-width: 640px) {
.grid4-2 {
 display : grid;
 grid-template-columns : repeat(4, 24%);
 justify-content : space-between;
}
}
/*---------------------------
■5-1col 5列一覧表示
--------------------------*/
.grid5-1 {
	display : block;
}
.grid5-1 div {
	margin : 0 0 2em 0;
}
@media screen and (min-width: 640px) {
.grid5-1 {
	display : grid;
	grid-template-columns : repeat(5, 18%);
	justify-content : space-between;
}
}

/* 中身：固定800px→最大800px＋可変 */
.box{
  width: 100%;
  max-width: 700px;
  margin: 32px auto 16px auto;
  padding: 0 16px;   /* スマホで余白を確保 */
}
@media only screen and (max-width: 999px) {

  .box{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 16px;
  }
}
/* スマホ */
@media only screen and (max-width: 480px) {

  .box {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 12px; /* さらに少しだけ余白を絞る */
  }
}

.go-cart div{
	margin-bottom:48px;
	text-align:center;
}
.go-cart div p{
	margin:48px 0;
}

/*その他と主な共通部分は省略*/
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}





/* .cart_area を確実に画面幅いっぱいに */
.cart_area {
  width: 100%;
  margin: 0 0 32px 0;           /* 念のため */
  padding: 30px;
  background: #1fb4cc;
  box-sizing: border-box;
}
.tume{
  background: #A2DBBD!important;	
}

.btn,
a.btn,
button.btn {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-border-shadow--radius {
  border-radius: 100vh;
}
a.btn-border-shadow {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;

  background: #fff;
}

a.btn-border-shadow:before {
  position: absolute;
  top: -6px;
  left: -6px;

  width: 100%;
  height: 100%;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border: 3px solid #000;
  border-radius: 0.5rem;
}

a.btn-border-shadow--radius:before {
  border-radius: 100vh;
}

a.btn-border-shadow:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow:hover:before {
  top: 0;
  left: 0;
}

.copyright{
	background:#DFDFDF;
	width:100%;
	text-align:center;
	padding:48px 18px;
}
.name{
	font-size:18px;
	font-weight:600;
}

.cart_area, .cart_area * {
  word-break: break-word;      /* 長い英単語等でのはみ出し防止 */
  overflow-wrap: anywhere;
}


/*ページトップボタン*/
#page-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      background-color:#1fb4cc70; /* 丸の背景 */
  color: #fff;               /* アイコンの色（白） */
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
      z-index: 1000;
    }

    #page-top.show {
      opacity: 1;
      visibility: visible;
    }
	

.gl{
	padding-bottom:8px;
}


/* --- Lightbox base --- */
.lb-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  background: rgba(0,0,0,.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 99999;
}
.lb-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
@supports (backdrop-filter: blur(6px)) {
  .lb-overlay { backdrop-filter: blur(6px); }
}

.lb-figure {
  max-width: min(96vw, 1400px);
  max-height: 90vh;
}
.lb-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

.lb-caption {
  margin-top: .6rem;
  color: #fff;
  text-align: center;
  font-size: clamp(12px, 2vw, 16px);
}

.lb-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  color: #fff;
  display: grid; place-items: center;
  font-size: 22px;
  cursor: pointer;
}
.lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

body.lb-lock { overflow: hidden; }

/* --- loading spinner --- */
.lb-spinner {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: lb-spin 1s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }

/* ========== FAQ ========== */
.faq{
  margin: 32px 0 16px;
}
.faq-list{
  margin: 0;
  padding: 0;
}

/* 各項目：上下に十分な余白＋淡い仕切り線 */
.faq-item{
  padding: 16px 0 20px;
  border-top: 1px solid rgba(31,180,204,.25); /* #1fb4cc の薄い線 */
}
.faq-item:last-child{
  border-bottom: 1px solid rgba(31,180,204,.25);
}

/* Q / A 行は2カラム：ラベル / 本文 */
.faq dt,
.faq dd{
  display: grid;
  grid-template-columns: 44px 1fr; /* ラベル幅 / 本文 */
  column-gap: 12px;
  align-items: start;
  margin: 0; /* デフォルトの余白を打ち消す */
}

/* Qのテキストは少し太く */
.faq .q-text{
  font-weight: 700;
}

/* ラベル共通 */
.faq .badge{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-family: inherit;
  line-height: 1;
}

/* Q：水色の丸に白抜き */
.faq .badge.q{
  background: #1fb4cc;  /* サイトのアクセント色 */
  color: #fff;
  border-radius: 999px;
  letter-spacing: .08em;
}



/* 答えの段落は余白をリセット（全体のリズムに任せる） */
.faq dd p{
  margin: 0;
}

/* 文字サイズ・余白の微調整（SP） */
@media (max-width: 599px){
  .faq-item{ padding: 14px 0 18px; }
  .faq dt, .faq dd{
    grid-template-columns: 36px 1fr;
    column-gap: 10px;
  }
  .faq .badge{ width: 36px; height: 36px; }
}
.faq{
  --badge: 44px;                 /* 丸の直径（Q/Aの円） */
  --gap: 12px;                   /* ラベルと本文の間 */
  --line: rgba(31,180,204,.25);  /* 仕切り線の色 */
}

.faq dt, .faq dd{
  grid-template-columns: var(--badge) 1fr;
  column-gap: var(--gap);
}
.faq .badge{ width: var(--badge); height: var(--badge); }
.faq-item{ border-top: 1px solid var(--line); }
.faq-item:last-child{ border-bottom: 1px solid var(--line); }

/* ぎゅっと詰めたい時は .faq に compact を足すだけ */
.faq.compact{
  --badge: 36px;
  --gap: 10px;
  --line: rgba(31,180,204,.18);
}

/* PCだけ少し大きく見せたい例 */
@media (min-width: 1000px){
  .faq{ --badge: 48px; --gap: 14px; }
}
/* A：背景なし／ */
.faq .badge.a{

}
/* Aの色（ピンク）※変えていなければお好みで */
.faq .badge.a{ 
color: #f77ac0;
  font-size: 1.6em;

  font-weight: 800;
}

/* Aの本文だけ上に4pxあける（A丸はそのまま） */
.faq{ --a-text-gap-top: 16px; }     /* つまみ */

.faq dd p{
  margin: var(--a-text-gap-top) 0 0;  /* ← 上だけ加算、下は0のまま */
}