@charset "UTF-8";

/* Design page-specific styles */
body.design-page{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;color:#111}
.d-serif{font-family:"Sterling Display","Times New Roman",serif;font-weight:400}
.d-four{text-align:center}
.d-four .num{font-size:125px;line-height:.8}
.d-four h2{margin:20px 0 0}
.d-four h2 small{display:block;font-family:"Yu Mincho",serif;font-size:20px}
.d-points{padding:90px 0 0}
.d-point{max-width:800px;margin:0 auto 105px}
.d-point:last-child{margin-bottom:0}
.d-point h2,.d-point img,.d-point p{width:82%;margin-left:auto;margin-right:auto}
.d-point h2{text-align:center;font-family:"Yu Mincho",serif;font-size:25px;line-height:1.35;
    font-weight: 400;}
.d-point img{display:block;margin-top:35px;margin-bottom:0;border-radius:24px}
.d-point p{position:relative;z-index:2;margin-top:-50px;margin-bottom:0;font-size:14px;line-height:1.8}
.d-select{padding:0 0 90px;background:linear-gradient(145deg,#8fb4d0,#fff 42%)}
.d-select.section-spacing{margin-top:30px}
.d-select header{text-align:center}
.d-select header h2{margin:0;padding:0;line-height:1em}
.d-select header p{margin:7px 0 0;padding:0;font-family:"Yu Mincho",serif;font-size:20px;letter-spacing:.1em}
.d-select header:after,.d-choice h2:after{content:"";display:block;width:82%;height:1px;margin:30px auto 45px;background:#28669a}
.d-select__lead{font-size:14px;line-height:1.8}
.d-style{margin-top:80px}
.d-style h3{text-align:center;font-family:"Yu Mincho",serif;font-size:28px}
.d-style>img{display:block;width:100px;margin:20px auto}
.d-slider{position:relative}
.d-slider__track{display:flex;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.d-slider__track::-webkit-scrollbar{display:none}
.d-slide{min-width:100%;scroll-snap-align:start}
.d-slide img{display:block;width:95%;margin:auto}
.d-slide p{font-size:14px;line-height:1.8}
.d-slider button{position:absolute;top:42%;z-index:2;border:0;background:transparent;font-size:32px}
.d-slider .prev{left:0}
.d-slider .next{right:0}
.d-choice{padding:90px 0}
.d-choice h2{text-align:center;font-family:"Yu Mincho",serif;font-size:27px}
.d-choice>p{font-size:14px;line-height:1.8}
.d-options{display:grid;grid-template-columns:1fr 1fr;gap:45px 18px;margin-top:70px}
.d-option{text-align:center}
.d-option img{width:100%}
.d-option h3{font-family:"Yu Mincho",serif;font-size:19px}
.d-option p{text-align:left;font-size:13px;line-height:1.7}
.d-nav{background:linear-gradient(90deg,#7ca4c2,#226697);color:#fff}
.d-nav a{display:flex;justify-content:space-between;padding:24px;border-bottom:1px solid;color:inherit;text-decoration:none}
.d-contact{padding:90px 0}
.d-shop{padding:80px 0;background:#f7f7f7;text-align:center}
.d-shop a{display:block;max-width:520px;margin:16px auto;padding:20px;background:#000;border-radius:40px;color:#fff;text-decoration:none}

/* PC表示 */
@media (min-width:768px){
  .d-four .num{font-size:155px}

  .d-four h2 small{font-size:25px}
  .d-points{padding:110px 0 0}
  .d-points .d-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px 56px;width:min(calc(100% - 80px),1120px);max-width:none}
  .d-point{max-width:none;margin:0}
  .d-point h2,.d-point img,.d-point p{width:78%}
  .d-point h2{font-size:31px}
  .d-point img{margin-bottom:0}
  .d-point p{margin-top:-60px;font-size:var(--fs-body)}
  .d-points .d-point:last-child{grid-column:1 / -1;justify-self:center;width:calc((100% - 56px) / 2)}
  .d-select{padding:0 0 110px}
  .d-select.section-spacing{margin-top:90px}
  .d-select header h2{line-height:normal}
  .d-select header p{margin:1em 0;padding:0;font-size:27px;letter-spacing:normal}
  .d-select__lead{font-size:17px}
  .d-style{margin-top:70px}
  .d-styles{gap:72px}
  .d-slide img{width:90%}
  .d-slide p{font-size:var(--fs-body)}
  .d-slider button{top:42%;padding:8px;font-size:32px;line-height:1;transform:translateY(-50%)}
  .d-slider .prev{left:-12px}
  .d-slider .next{right:-12px}
  .d-choice{padding:110px 0}
  .d-choice h2{font-size:32px}
  .d-choice>p{max-width:900px;margin:50px auto 0;font-size:17px;line-height:2}
  .d-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 42px;margin-top:120px}
  .d-options--finish{display:flex;justify-content:center;gap:42px}
  .d-options--finish .d-option{width:calc((100% - 126px) / 4);flex:0 0 calc((100% - 126px) / 4)}
  .d-option h3{font-size:24px}
  .d-option p{font-size:var(--fs-body)}
  .d-contact{padding:100px 0}
}
@media (min-width:1100px){
}
/* スタイル説明 */
.d-style__text {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.8;
}

/* リング一覧ボタン */
.d-ring-links {
  display: grid;
  gap: 16px;
  max-width: 760px;
  margin: 70px auto 0;
}

/* d-choice の本文
   現在の .d-choice > p ではHTML構造上当たらないので修正 */
.d-choice > .d-inner > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}


/* PC */
@media (min-width: 768px) {

  .d-style__text {
    font-size: var(--fs-body);
    line-height: 1.8;
  }

  .d-ring-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin-top: 90px;
  }

  .d-choice > .d-inner > p {
    max-width: 900px;
    margin: 50px auto 0;
    font-size: 17px;
    line-height: 2;
  }

}