@charset "utf-8";

/* ここからタイトル */
.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(70px + 70px);
}

.title h1 {
  font-size: 32px;
  font-weight: bold;
  text-transform: capitalize;
}

/* ここまでタイトル */

/* ここからコンテンツ */
/* ここからコンテンツ＞ブリザーブドフラワー */
.shop-contents {
  /* border: 1px solid #bddb15; */
  max-width: calc(80% - 140px);
  margin-top: 70px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  /* flex-direction: row-reverse; */
  justify-content: space-between;
}

.shop-item {
  /* border: 1px solid #1815db; */
  flex-grow: 1;
  max-width: 1040px;
  margin-left: 70px;
}

.shop-item h2 {
  font-size: 22px;
  font-weight: bold;
  text-transform: capitalize;
}

.shop-item h2::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background-color: #000;
  margin-top: 15px;
}

.item-group {
  /* border: 1px solid #db1515; */
  /* width: 100%; */
}

.item-list {
  /* border: 1px solid #000; */
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 320px);
  column-gap: 32px;
  row-gap: 40px;
}


/* 写真を表示するエリアの基本設定 */
.photo-area {
  /* border: 1px solid #000; */
  width: 320px;
  height: 240px;
  background-size: cover;
  transition: background-image 0.2s ease;
}

/* ラジオボタンを非表示にする */
input[type="radio"] {
  display: none;
}

/* カラー選択ボタンの見た目 */
.color-box {
  /* border: 1px solid #000; */
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  margin: 10px 5px;

}

.red {
  background-color: #DA101F;
}

.pink {
  background-color: #F3B0A9;
}

.blue {
  background-color: #0B3B77;
}

.light-blue {
  background-color: #9CC4CF;
}

.purple {
  background-color: #6D578B;
}

.green {
  background-color: #8BAB8D;
}

.orange {
  background-color: #F77D29;
}

.yellow {
  background-color: #F1D672;
}

/* バルーンドーム */
#balloon-dome-red:checked~.photo-area {
  background-image: url(../image/balloon-dome01.jpg);
}

#balloon-dome-blue:checked~.photo-area {
  background-image: url(../image/balloon-dome02.jpg);
}

#balloon-dome-orange:checked~.photo-area {
  background-image: url(../image/balloon-dome03.jpg);
}

/* ガラスの靴 */
#glass-shoes-pink:checked~.photo-area {
  background-image: url(../image/glass-shoes01.jpg);
}

#glass-shoes-light-blue:checked~.photo-area {
  background-image: url(../image/glass-shoes02.jpg);
}

#glass-shoes-yellow:checked~.photo-area {
  background-image: url(../image/glass-shoes03.jpg);
}

/* フラワーボックス */
#flower-box-red:checked~.photo-area {
  background-image: url(../image/flower-box01.jpg);
}

#flower-box-blue:checked~.photo-area {
  background-image: url(../image/flower-box02.jpg);
}

#flower-box-orange:checked~.photo-area {
  background-image: url(../image/flower-box03.jpg);
}

/* ハート */
#heart-pink:checked~.photo-area {
  background-image: url(../image/heart01.jpg);
}

#heart-light-blue:checked~.photo-area {
  background-image: url(../image/heart02.jpg);
}

#heart-green:checked~.photo-area {
  background-image: url(../image/heart03.jpg);
}

/* ドッグ */
#dog-pink:checked~.photo-area {
  background-image: url(../image/dog01.jpg);
}

#dog-light-blue:checked~.photo-area {
  background-image: url(../image/dog02.jpg);
}

#dog-yellow:checked~.photo-area {
  background-image: url(../image/dog03.jpg);
}

/* 香水ボトル */
#perfume-bottle-red:checked~.photo-area {
  background-image: url(../image/perfume-bottle01.jpg);
}

#perfume-bottle-blue:checked~.photo-area {
  background-image: url(../image/perfume-bottle02.jpg);
}

#perfume-bottle-purple:checked~.photo-area {
  background-image: url(../image/perfume-bottle03.jpg);
}

.item-list dl {
  margin-top: 20px;
}

.item-list dt {
  font-weight: bold;
}

.item-list dd {
  font-size: 13px;
  line-height: 20px;
  margin-top: 10px;
}

/* ここからコンテンツ＞メニュー */

.shop-menu {}

.shop-menu-inner {
  padding-left: 16px;
}

.shop-menu-inner h2 {
  font-size: 22px;
  font-weight: bold;
  text-transform: capitalize;
}

.shop-menu-inner details {
  margin-top: 16px;
}

/* summary（クリックする箇所）の装飾 */
.shop-menu-inner summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  white-space: nowrap;
  text-transform: capitalize;
}

/* 閉じる時の三角マークを独自に追加したい場合 */
.shop-menu-inner summary::after {
  content: " +";
}

.shop-menu-inner details[open] summary::after {
  content: " -";
}

/* スライド演出（高さの変更にアニメーションを適用） */
.shop-menu-inner details ul {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  font-size: 15px;
  margin-left: 16px;
}

.shop-menu-inner details li {
  padding-top: 8px;
}

.shop-menu-inner details li:hover {
  color: #C8AAB1;
}

/* 開いた時の状態 */
.shop-menu-inner details[open] ul {
  max-height: 200px;
  /* 中身の量に合わせて十分な高さを指定 */
}

/* ここまでコンテンツ */

.footer {
  margin-top: 100px;
}

/* ここからモバイルのレイアウト */
@media (max-width: 700px) {
  .shop-contents {
    /* border: 1px solid #0B3B77; */
    /* display: block; */
    flex-direction: column-reverse;
    max-width: 100%;
    margin-top: 60px;
  }

  .shop-item {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  .shop-menu {
    background-color: #f8f8f8;
    margin-top: 60px;
    margin-right: 0;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .shop-menu-inner {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ここからモバイル商品詳細ページのCSS */

  .item-list {
    display: block;
  }

  .item-group,
  .item-list li {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .item-list li {
    margin-top: 32px;
  }

  .item-area img {
    width: 100%;
    max-width: 100%;
  }

  .about-item {
    margin-left: 0px;
    margin-top: 20px;
  }

  .about-item a {
    width: 100%;
  }

  .shop-item {}

  .footer {
    margin-top: 0px;
  }
}

/* ここまで商品詳細ページ */