/* =========================
   STORY
   なぜGiveNoTaneを始めるのか
========================= */


/* =========================
   ページ全体
========================= */

.story-page{
  margin:0;
  padding:0;
}

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


/* =========================
   4色背景
========================= */

.story-tone-1{
  background:#fffdf8;
}

.story-tone-2{
  background:#eef4eb;
}

.story-tone-3{
  background:#f7f3ea;
}

.story-tone-4{
  background:#f4eee8;
}


/* =========================
   HERO
========================= */

.story-hero{
  padding:90px 20px 80px;
  text-align:center;
}

.story-hero .container{
  max-width:1050px;
  margin:0 auto;
}

.story-hero .kicker{
  display:block;
  margin:0 0 12px;
  color:var(--accent-dark);
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
}

.story-hero h1{
  max-width:900px;
  margin:0 auto 30px;
  font-size:clamp(2.5rem,5vw,4.6rem);
  line-height:1.25;
}

.story-lead{
  margin:0;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;
  font-size:clamp(1.3rem,2.5vw,1.8rem);
  font-weight:600;
  line-height:1.8;
}

.story-main-image{
  max-width:760px;
  margin:52px auto 0;
}

.story-main-image img{
  display:block;
  width:100%;
  height:auto;
}


/* =========================
   共通セクション
========================= */

.story-block{
  width:100%;
  padding:82px 20px;
}

.story-block > .container{
  width:100%;
  max-width:1050px;
  margin:0 auto;
}

.story-narrow{
  max-width:780px !important;
}

.story-block p{
  margin:0 0 1.35em;
  font-size:16px;
  line-height:2;
}

.story-block p:last-child{
  margin-bottom:0;
}

.story-block h2{
  margin:0 0 34px;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  line-height:1.4;
}

.story-emphasis{
  margin:32px 0 !important;
  color:var(--accent-dark);
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;
  font-size:clamp(1.25rem,2.4vw,1.6rem) !important;
  font-weight:700;
  line-height:1.9 !important;
}

.story-question{
  margin:30px 0 !important;
  color:var(--text);
  font-size:18px !important;
  font-weight:700;
  line-height:1.9 !important;
}


/* =========================
   年代
========================= */

.story-year{
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:50px;
  align-items:start;
}

.story-year-label{
  padding-top:8px;
}

.story-year-label span{
  display:block;
  color:var(--accent-dark);
  font-size:2.2rem;
  font-weight:800;
  line-height:1;
}

.story-year-label strong{
  display:block;
  margin-top:10px;
  font-size:15px;
  letter-spacing:.08em;
}

.story-year-content{
  min-width:0;
}

.story-year-content h2{
  margin:0 0 32px;
  font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1.4;
}

.story-year-content p{
  margin:0 0 1.35em;
  font-size:16px;
  line-height:2;
}


/* =========================
   石巻写真
========================= */

.story-photo{
  margin:44px 0 0;
}

.story-photo img{
  display:block;
  width:70%;
  height:auto;
}

.story-photo p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
  text-align:left;
}


/* =========================
   WHY GiveNoTane
========================= */

.story-givenotane{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:56px;
  align-items:center;
}

.story-givenotane-image img{
  display:block;
  width:100%;
  height:auto;
}

.story-givenotane-text .kicker{
  margin:0 0 10px;
  color:var(--accent-dark);
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
}

.story-givenotane-text h2{
  margin:0 0 28px;
  font-size:clamp(1.8rem,3vw,2.8rem);
  line-height:1.4;
}

.story-givenotane-text p{
  margin:0 0 1.25em;
  font-size:16px;
  line-height:2;
}

.story-give-word{
  margin:32px 0 18px !important;
  color:var(--accent-dark);
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;
  font-size:1.6rem !important;
  font-weight:700;
}


/* =========================
   設立支援
========================= */

.story-foundation{
  max-width:780px !important;
}

.story-foundation h2{
  margin:0 0 34px;
}

.story-support-button{
  margin-top:44px;
  text-align:center;
}

.story-support-button .btn{
  min-width:320px;
  min-height:54px;
}


/* =========================
   SHARE
========================= */

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

.story-share > .container{
  max-width:900px;
}

.story-share .kicker{
  display:block;
  margin:0 0 12px;
  color:var(--accent-dark);
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  text-align:center;
}

.story-share h2{
  max-width:820px;
  margin:0 auto 24px;
  text-align:center;
}

.story-share > .container > p{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.story-share-message{
  margin-top:24px !important;
  font-weight:700;
}

.story-share-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  width:100%;
  margin:34px auto 0;
}

.story-share-btn{
  appearance:none;
  -webkit-appearance:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:150px;
  height:50px;

  margin:0;
  padding:0 18px;

  border:1px solid var(--accent);
  border-radius:999px;

  background:#fff;
  color:var(--accent-dark);

  font-family:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1;

  text-align:center;
  text-decoration:none;

  cursor:pointer;

  transition:
    background .2s,
    color .2s,
    border-color .2s,
    transform .2s;
}

.story-share-btn:hover{
  background:var(--accent-dark);
  border-color:var(--accent-dark);
  color:#fff;
  transform:translateY(-2px);
}


/* =========================
   タブレット
========================= */

@media(max-width:800px){

  .story-year{
    grid-template-columns:1fr;
    gap:24px;
  }

  .story-givenotane{
    grid-template-columns:1fr;
    gap:36px;
  }

  .story-givenotane-image{
    max-width:460px;
    margin:0 auto;
  }

}


/* =========================
   スマートフォン
========================= */

@media(max-width:640px){

  .story-hero{
    padding:65px 20px 55px;
  }

  .story-hero h1{
    font-size:2.45rem;
  }

  .story-lead{
    font-size:1.25rem;
  }

  .story-main-image{
    margin-top:38px;
  }

  .story-block{
    padding:60px 20px;
  }

  .story-block p,
  .story-year-content p,
  .story-givenotane-text p{
    font-size:16px;
    line-height:1.9;
  }

  .story-year-label span{
    font-size:1.9rem;
  }

  .story-year-label strong{
    font-size:15px;
  }

  .story-question{
    font-size:17px !important;
  }

  .story-givenotane{
    gap:30px;
  }

  .story-support-button .btn{
    width:100%;
    min-width:0;
  }

  .story-share{
    text-align:left;
  }

  .story-share .kicker,
  .story-share h2,
  .story-share > .container > p{
    text-align:left;
  }

  .story-share > .container > p{
    margin-left:0;
    margin-right:0;
  }

  .story-share-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .story-share-btn{
    width:100%;
    min-width:0;
    transform:none;
  }

  .story-share-btn:hover{
    transform:none;
  }

}