@charset "utf-8";

/* ---- 基本 ---- */
:root{
  --fs:1.25;              /* 文字の大きさの倍率。既定は「大」。lp.js が書き換える */
  --sumi:#1f2421;
  --midori:#1f6a4d;
  --kinari:#faf8f3;
  --sen:#e3e1d9;
  --kin:#a1803d;
  --bara:#c2577a;
  --bara-usu:#f8e4ea;
  --shiro:#ffffff;
  --line:0.0625rem;       /* 細い線。px を直に書かないため rem で持つ */
  --maru:0.5rem;
  --wide:54rem;           /* 中身の最大の幅 */
  --honbun:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;
  --midashi:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
}

html{
  font-size:calc(16px * var(--fs));
  -webkit-text-size-adjust:100%;
  background-color:var(--kinari);
  color:var(--sumi);
}

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

body{
  margin:0;
  background-color:var(--kinari);
  color:var(--sumi);
  font-family:var(--honbun);
  font-size:1.375rem;
  line-height:1.9;
  overflow-wrap:anywhere;
  /* 下に固定した帯のぶんだけ余白をとる */
  padding-bottom:calc(5.5rem + env(safe-area-inset-bottom));
}

img{max-width:100%;height:auto;display:block;}

h1,h2,h3{
  font-family:var(--midashi);
  font-weight:600;
  line-height:1.45;
  margin:0;
}

p{margin:0 0 1rem;}
ul,ol,dl{margin:0;padding:0;}
li{list-style:none;}

a{color:var(--midori);}

/* ---- ロゴ ---- */
.head{
  padding:1rem 1.25rem 0;
  background-color:var(--kinari);
}
.head__logo{
  width:11rem;      /* 横長 5:1 */
  height:auto;
  margin:0 auto;
}

/* ---- 写真と「イメージ」 ---- */
.shot{
  position:relative;
  margin:0;
  background-color:var(--sen);
  overflow:hidden;
}
.shot__note{
  position:absolute;
  right:0;
  bottom:0;
  margin:0;
  padding:0.15rem 0.5rem;
  background-color:rgba(31,36,33,0.72);
  color:var(--shiro);
  font-size:1.125rem;
  line-height:1.5;
  letter-spacing:0.05em;
}

/* ---- 1 いちばん上 ---- */
.hero{
  margin:0 0 3rem;
}
.shot--hero img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
}
.hero__body{
  max-width:var(--wide);
  margin:0 auto;
  padding:1.75rem 1.25rem 0;
}
.hero__title{
  font-size:2.6rem;
  margin:0 0 1rem;
  color:var(--sumi);
}
.hero__lead{
  margin:0 0 1.75rem;
}

/* ---- ボタン ---- */
.btns{
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem;
  margin:0;
}
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  padding:0.6rem 1.5rem;
  border-radius:var(--maru);
  border:var(--line) solid var(--midori);
  font-size:1.375rem;
  line-height:1.5;
  text-decoration:none;
  flex:1 1 13rem;
}
.btn--main{
  background-color:var(--midori);
  color:var(--shiro);
  border-color:var(--midori);
}
.btn--sub{
  background-color:var(--shiro);
  color:var(--midori);
}
.btn:focus-visible,.link:focus-visible,.fs__btn:focus-visible,.faq__q:focus-visible,.tel:focus-visible,.bar__btn:focus-visible{
  outline:0.1875rem solid var(--kin);
  outline-offset:0.125rem;
}

.link{
  display:inline-flex;
  align-items:center;
  min-height:2.75rem;      /* 44px 以上 */
  color:var(--midori);
  text-decoration:underline;
  text-underline-offset:0.2em;
}

/* ---- 節のかたち ---- */
.sec{
  max-width:var(--wide);
  margin:0 auto 3.5rem;
  padding:0 1.25rem;
}
.sec__title{
  font-size:2rem;
  margin:0 0 1.5rem;
  padding-bottom:0.5rem;
  border-bottom:var(--line) solid var(--sen);
  color:var(--sumi);
}
.sec__title--light{
  color:var(--shiro);
  border-bottom-color:rgba(255,255,255,0.45);
}

/* ---- 2 できること ---- */
.can{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}
.can__item{
  display:flex;
  gap:1rem;
  align-items:flex-start;
}
.ico{
  flex:0 0 auto;
  width:2.75rem;
  height:2.75rem;
  fill:none;
  stroke:var(--midori);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.can__text{min-width:0;}
.can__name{
  font-size:1.5rem;
  margin:0 0 0.35rem;
}
.can__text p{margin:0;}

/* ---- 3 贈る流れ ---- */
.flow{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}
.flow__list{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  min-width:0;
}
.flow__list li{
  display:flex;
  gap:0.9rem;
  align-items:flex-start;
}
.flow__num{
  flex:0 0 auto;
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  background-color:var(--midori);
  color:var(--shiro);
  font-family:var(--midashi);
  font-size:1.25rem;
  line-height:2.25rem;
  text-align:center;
}
.flow__list p{margin:0;min-width:0;}
.shot--flow img{
  width:100%;
  aspect-ratio:2 / 3;
  object-fit:cover;
}
.flow__after{
  margin:1.75rem 0 0;
  padding:1rem 1.25rem;
  background-color:var(--bara-usu);
  color:var(--sumi);
  border-left:0.25rem solid var(--bara);
}

/* ---- 4 こんな場面に ---- */
.scenes{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
}
.scene{min-width:0;}
.scene img{
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
}
.scene__name{
  font-size:1.75rem;
  margin:0.9rem 0 0.4rem;
  color:var(--midori);
}
.scene__text{margin:0 0 0.4rem;}

/* ---- 5 受け取った方には ---- */
.sec--got{
  max-width:none;
  padding:0;
}
.got{
  max-width:var(--wide);
  margin:0 auto;
  padding:2.5rem 1.25rem;
  background-color:var(--midori);
  color:var(--shiro);
}
.got__list{
  display:flex;
  flex-direction:column;
  gap:0.9rem;
}
.got__list li{
  padding-left:1.5rem;
  position:relative;
  color:var(--shiro);
}
.got__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.75em;
  width:0.5rem;
  height:0.5rem;
  border-radius:50%;
  background-color:var(--bara-usu);
}

/* ---- 6 料金 ---- */
.price{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}
.shot--price img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
}
.price__body{min-width:0;}
.price__list{
  margin:0 0 1.25rem;
  border-top:var(--line) solid var(--sen);
}
.price__row{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 1rem;
  justify-content:space-between;
  align-items:baseline;
  padding:0.9rem 0;
  border-bottom:var(--line) solid var(--sen);
}
.price__row dt{min-width:0;}
.price__row dd{
  margin:0;
  font-family:var(--midashi);
  font-size:1.75rem;
  color:var(--kin);
}
.price__note{
  margin:0 0 0.6rem;
  font-size:1.125rem;
  line-height:1.8;
}

/* ---- 7 よくある質問 ---- */
.faq{
  border-bottom:var(--line) solid var(--sen);
  background-color:var(--kinari);
  color:var(--sumi);
}
.faq__q{
  display:flex;
  align-items:center;
  gap:0.75rem;
  min-height:3rem;
  padding:0.9rem 0;
  cursor:pointer;
  font-family:var(--midashi);
  font-size:1.5rem;
  line-height:1.6;
  list-style:none;
}
.faq__q::-webkit-details-marker{display:none;}
.faq__q::before{
  content:"＋";
  flex:0 0 auto;
  color:var(--midori);
  font-family:var(--honbun);
  font-size:1.375rem;
}
.faq[open] .faq__q::before{content:"－";}
.faq__a{
  padding:0 0 1rem 2rem;
}
.faq__a p{margin:0;}

/* ---- 8 ご注文 ---- */
.sec--order{
  padding-top:2.5rem;
  padding-bottom:2.5rem;
  border-top:var(--line) solid var(--sen);
  border-bottom:var(--line) solid var(--sen);
}
.order__lead{margin:0 0 1.5rem;}
.order__tel{
  margin:0 0 0.5rem;
  text-align:center;
}
.tel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:3.5rem;
  padding:0.5rem 1rem;
  border-radius:var(--maru);
  background-color:var(--midori);
  color:var(--shiro);
  font-family:var(--midashi);
  /* 幅320pxでも電話番号が折れないように、狭い画面では小さくする */
  font-size:clamp(1.75rem, 9vw, 2.4rem);
  line-height:1.3;
  letter-spacing:0.02em;
  text-decoration:none;
}
.order__hours{
  margin:0 0 1.5rem;
  text-align:center;
  font-size:1.125rem;
}
.order__list{
  max-width:26rem;
  margin:0 auto;
}
.order__row{
  display:flex;
  flex-wrap:wrap;
  gap:0.25rem 1rem;
  padding:0.6rem 0;
  border-top:var(--line) solid var(--sen);
}
.order__row dt{
  flex:0 0 6rem;
  color:var(--midori);
}
.order__row dd{margin:0;min-width:0;}

/* ---- 9 下 ---- */
.foot{
  max-width:var(--wide);
  margin:0 auto;
  padding:2.5rem 1.25rem 2rem;
  text-align:center;
}
.foot__name{margin:0 0 0.4rem;}
.foot__addr{
  margin:0 0 2rem;
  font-size:1.125rem;
}
.fs{
  border-top:var(--line) solid var(--sen);
  padding-top:1.5rem;
}
.fs__label{
  margin:0 0 0.6rem;
  font-size:1.125rem;
}
.fs__btns{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.6rem;
}
.fs__btn{
  min-height:2.75rem;
  min-width:4.5rem;
  padding:0.4rem 0.9rem;
  border:var(--line) solid var(--midori);
  border-radius:var(--maru);
  background-color:var(--shiro);
  color:var(--midori);
  font-family:var(--honbun);
  font-size:1.25rem;
  line-height:1.5;
  cursor:pointer;
}
.fs__btn[aria-pressed="true"]{
  background-color:var(--midori);
  color:var(--shiro);
}

/* ---- 下に固定する帯（狭い画面だけ） ---- */
.bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:10;
  background-color:var(--kinari);
  border-top:var(--line) solid var(--sen);
  padding:0.6rem 1rem;
  padding-bottom:calc(0.6rem + env(safe-area-inset-bottom));
}
.bar__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  border-radius:var(--maru);
  background-color:var(--bara);
  color:var(--shiro);
  font-size:1.375rem;
  line-height:1.5;
  text-decoration:none;
}

/* ---- 広い画面 ---- */
@media (min-width:46em){
  .head{padding-top:1.5rem;}
  .head__logo{width:13rem;}
  .hero__title{font-size:3.2rem;}
  .hero__body{padding-top:2.25rem;}
  .btn{flex:0 0 auto;}

  .flow{flex-direction:row;align-items:flex-start;gap:2.5rem;}
  .flow__list{flex:1 1 auto;}
  .shot--flow{flex:0 0 38%;}

  .scenes{grid-template-columns:1fr 1fr;}

  .price{flex-direction:row;align-items:flex-start;gap:2.5rem;}
  .shot--price{flex:0 0 40%;}
  .price__body{flex:1 1 auto;}

  .got{border-radius:var(--maru);}

  /* 幅の広い画面では下の帯を出さない */
  .bar{display:none;}
  body{padding-bottom:0;}
}

@media (min-width:58em){
  .can{flex-direction:row;gap:2rem;}
  .can__item{flex:1 1 0;flex-direction:column;}
  .ico{width:3.25rem;height:3.25rem;}
}

/* ---- 動きを控える設定 ---- */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:0.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001s !important;
    scroll-behavior:auto !important;
  }
}