@charset "UTF-8";
/************************************************
  ベース
************************************************/
:root {
  --risou: #41417a; /* 変数を定義 */
  --red: #cc0000;
  --pink: #ff417a;
}
main {
  font-size: 1em;
  line-height: 2;
}
img, video {
  max-width: 100%;
  vertical-align: bottom;
}
section {
  margin: 0 auto 80px;
  width: 750px;
}
p {
  margin: 20px 0;
}
h1, h2, h3, h4 {
  text-align: center;
  font-family: 
    "Yu Mincho",           /* Windows / 一部Android */
    "游明朝体",            /* Mac・iOS */
    "ヒラギノ明朝 Pro",     /* Mac */
    "Hiragino Mincho Pro", /* Mac */
    "MS P明朝",            /* Windows標準 */
    "MS PMincho",          /* Windows標準 */
    serif;                 /* 上記がなければ一般的な明朝体 */
  line-height: 1.4;
  margin-bottom: 20px;
}
h1 {
  font-size: 4em;
  margin-bottom: 25px;
}
h1 > span {
  font-size: 0.5em;
}
h2 {
  color: var(--risou);
  font-size: 2.7em;
}
h2 > span {
  font-size: 0.9em;
}
h3 {
  font-size: 1.6em;
}
h4 {
  font-size: 1.5em;
  margin-top: 30px;
}
@media screen and (max-width: 750px) {
  section {
    margin: 0 auto 40px;
}
  h1 {
  font-size: 2em;
  }
  h1 > span {
    font-size: 0.5em;
  }
  h2 {
    font-size: 1.5em;
  }
  h3 {
    font-size: 1.9em;
  }
}

.sp-only {
  display: none;
}

p.profile {
  margin-top: 20px;
  padding: 20px;
  background: #f9f9f9;
}
p.interview {
  font-weight: bold;
  position: relative;
}

p.interview::before {
  content: "　　";
}
p.interview::after {
  position: absolute;
  content: "";
  width: 1.7em;
  height: 2px;
  top: 1em;
  background-color: #000000;
  left: 0;
}

.flex-container {
  display: flex;          /* Flexboxを有効にする */
  align-items: center;    /* 縦方向中央揃え */
  gap: 30px;              /* 左右の間隔 */
  flex-wrap: wrap;        /* 画面幅が狭いときに折り返す */
}

.flex-left picture {
  width: 380px;           /* 画像のサイズを調整 */
  height: auto;
  display: block;
}

.flex-right {
  flex: 1;                /* 残りのスペースを占める */
  width: 100%;
}

.pictures {
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 20px; /* 子要素間の隙間 */
}
.pictures picture {
  display: block;
}

.decoration-square {
  border:1px solid #000000;
}

.product-name {
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1.6;
}
.discount-rate {
  margin-right: 10px;
  font-weight: bold;
  color: var(--red);
  font-size: 1.6em;
}
.ex-tax-price {
  font-weight: bold;
  font-size: 1.4em;
}
.inc-tax-price {
}
.before-discount{
  color: #666666;
  position: relative;
  display: inline-block;
}
.before-discount::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;        /* 文字の中央に線 */
  height: 1px;
  background: #666666;
}

.product-area {
  line-height: 1;
}
.product-area > div {
  margin-top: 15px;
  margin-bottom: 10px;
}
.price {
  margin-bottom: 0!important;
}
.deal-tag span {
  font-weight: bold;
  padding: 3px 6px;
  margin-right: 5px;
  color: #ffffff;
  border-radius: 3px;
}
.deal-tag span.red {
  background: #cc0000;
  color: #ffffff;
}
.deal-tag span.black {
  background: #000000;
}
.buy-btn {
  margin-top: 20px;
  margin-bottom: 20px;
}
.buy-btn a {
  padding: 15px 40px;
  text-decoration: none;
  font-weight: bold;
  color: #ffffff;
  border-radius: 9999px;
  background: #41417a;
  background: var(--risou);
  display: inline-flex;   /* ← 横並びに */
  align-items: center;    /* ← 縦中央揃え */
  gap: 0.5em;             /* ← テキストとアイコンの間隔 */
}

.buy-btn a:hover {
  background: #545487;
}

.buy-btn a i {
  font-size: 1.1em;       /* アイコンサイズ調整 */
}

.movie-caption {
  font-weight: bold;
  color: #b33e5c;
  text-align: center;
  text-decoration: underline;
  margin-top: 0;
}

a picture:hover {
  opacity: 0.75;
}
/* 750px以下 */
@media screen and (max-width: 750px) {
  .pc-only {
    display: none;
}
  .sp-only {
    display: inline;
}
  main {
    padding: 15px;
  }
  section {
    width: 100%;
  }
  .flex-container {
    flex-direction: column; /* スマホは縦並び */
    align-items: flex-start;
  }
  .flex-left picture {
    width: 100%;            /* 幅いっぱいに広げる */
  }
  .buy-btn a {
    display: block;
    text-align: center;
  }
}
/************************************************
  first-view
************************************************/
#first-view {}
@media screen and (max-width: 750px) {}
/************************************************
  save01
************************************************/
#save01 {}
#save01 h2 {
  font-size: 1.5em;
  text-align: left;
  color: var(--risou); 
  margin-bottom: 10px;
}
@media screen and (max-width: 750px) {
  #save01 picture {
    width: 50%;
    margin: 0 auto;
  }
}
/************************************************
  features
************************************************/
#features {
  background: #efeff5;
  border-radius: 15px;
  padding: 20px 30px;
}
#features h2 {
  color: var(--pink);
  margin-top: 40px;
  margin-bottom: 10px;
}
#features h3 {
  font-size: 1.7em;
  margin: 50px 0 25px;
}
#features h3::before,
#features h3::after {
  content: "";
  display: inline-block;
  width: 70px;          /* 線の長さ */
  height: 1px;          /* 線の太さ */
  background: var(--risou);
  vertical-align: middle;
  margin: 0 10px;       /* 文字との余白 */
}
#features sup {
  font-size: 0.4em;
}
#features p {
  text-align: right;
  margin-top: -20px;
  font-size: 0.9em;
}
@media screen and (max-width: 750px) {
  #features {
  padding: 20px 15px
}
  #features h2 {
  margin-top: 10px;
}
  #features h3 {
  font-size: 1em;
  margin: 25px 0 10px;
}
  #features h3::before,
#features h3::after {
  width: 5px;          /* 線の長さ */
  margin: 0 2px;       /* 文字との余白 */
}
  #features sup {
  font-size: 0.5em;
}
  #features p {
  margin-top: unset;
  font-size: 0.7em;
  margin-top: -10px;
  margin-bottom: 10px;
}
}
/************************************************
  anime
************************************************/
#anime {}
#anime h2 {
  font-size: 1.7em;
}
@media screen and (max-width: 750px) {}
/************************************************
  bihada
************************************************/
#bihada {}
@media screen and (max-width: 750px) {}
/************************************************
  iyakushi
************************************************/
#iyakushi {
  background: #efeff5;
  border-radius: 15px;
  padding: 35px 30px;
}
#iyakushi .flex-right {
    margin-left: -80px;
    margin-right: 40px;
}
@media screen and (max-width: 750px) {
  #iyakushi {
    padding: 30px 30px 10px
  }
  #iyakushi .flex-right {
    margin-left: initial;
    margin-right: initial;
}
  #iyakushi h2 {
  font-size: 1.3em;
}
}
/************************************************
  pesticide-free-rice
************************************************/
#pesticide-free-rice {}
#pesticide-free-rice h2 {
  font-size: 2.6em;
}
#pesticide-free-rice h3 {
  font-size: 2em;
  margin: 50px 0 25px;
}
#pesticide-free-rice h3 span {
  color: var(--red);
}
@media screen and (max-width: 750px) {
  #pesticide-free-rice h2 {
  font-size: 2em;
}
#pesticide-free-rice h3 {
  font-size: 1.5em;
}
}
/************************************************
  risou-farm
************************************************/
#risou-farm {
}
#risou-farm h2 {
  color: #000000;
  padding: 8px;
}
#risou-farm h3 {
  font-size: 1.3em;
  margin: 25px 0;
}
#risou-farm .back-ground {
  background: #efeff5;
  border-radius: 0 0 15px 15px;
  padding: 20px 30px;
}
@media screen and (max-width: 750px) {}
/************************************************
  news-paper
************************************************/
#news-paper {}
#news-paper h3 {
  font-size: 2.1em;
}
@media screen and (max-width: 750px) {
  #news-paper h3 {
  font-size: 1.7em;
}
}
/************************************************
  topics
************************************************/
#topics {
  background: #efeff5;
  border-radius: 15px;
  padding: 20px 30px;
}

#topics .heading {
  color: var(--risou);
  font-size: 1.1em;
  font-weight: bold;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  text-align: center;
  margin-top: 0;
}

.align-center {
  text-align: center;
}

#topics h2 {
  font-size: 1.7em;
  color: var(--risou);
  position: relative;
  text-align: center;   /* 中央寄せ */
  display: inline-block; /* 擬似要素を合わせやすくする */
}

#topics h2::before,
#topics h2::after {
  content: "";
  display: inline-block;
  width: 80px;          /* 線の長さ */
  height: 1px;          /* 線の太さ */
  background: var(--risou);
  vertical-align: middle;
  margin: 0 10px;       /* 文字との余白 */
}
@media screen and (max-width: 750px) {
  #topics {
    padding: 20px 20px;
  }
  #topics h2::before,
  #topics h2::after {
    width: 70px;          /* 線の長さ */
  }
}
/************************************************
  tv
************************************************/
#tv {}
#tv h2 {
  font-size: 1.7em;
}
@media screen and (max-width: 750px) {
  #tv h2 {
  font-size: 1.1em;
}
}
/************************************************
  save01
************************************************/
#save02 {}
#save02 h2 {
  font-size: 1.5em;
  text-align: left;
  color: var(--risou); 
  margin-bottom: 10px;
}
@media screen and (max-width: 750px) {
  #save02 h3 {
  font-size: 1.3em;
}
  #save02 picture {
  width: 50%;
  margin: 0 auto;
}
}
/************************************************
  offer
************************************************/
#offer {}
@media screen and (max-width: 750px) {
  #offer h3 {
  font-size: 1.1em;
}
  #offer .notice {
    text-align: center;
  }
}
/************************************************
  product
************************************************/
#product {}
@media screen and (max-width: 750px) {}
/************************************************
  henkin
************************************************/
#henkin p {
  text-align: center;
}
@media screen and (max-width: 750px) {
  #henkin p {
  text-align: left;
  }
}
/************************************************
  ingredients
************************************************/
#ingredients {}
#ingredients p {
  margin: 0;
}
#ingredients h4 {
  font-size: 1.7em;
  color: var(--risou);
  position: relative;
  text-align: center;   /* 中央寄せ */
  display: inline-block; /* 擬似要素を合わせやすくする */
  margin: 15px 0;
}
#ingredients h4::before,
#ingredients h4::after {
  content: "";
  display: inline-block;
  width: 80px;          /* 線の長さ */
  height: 1px;          /* 線の太さ */
  background: var(--risou);
  vertical-align: middle;
  margin: 0 10px;       /* 文字との余白 */
}
@media screen and (max-width: 750px) {
  #ingredients h4 {
    font-size: 1em;
  }
    #ingredients h4::before,
    #ingredients h4::after {
    display: inline-block;
    width: 60px;          /* 線の長さ */
  }
}