@charset "utf-8";

/* フェードイン(初期値) */
.js-fadeUp { opacity: 0; transform: translateY(3rem); transition: opacity .8s, transform .8s; }
.js-fadeUp.is-inview { opacity: 1; transform: translateY(0); transition-delay: .5s; }
.js-fadeLeft { opacity: 0; transform: translateX(3rem); transition: opacity .8s, transform .8s; }
.js-fadeLeft.is-inview { opacity: 1; transform: translateX(0); transition-delay: .5s; }
.js-fadeRight { opacity: 0; transform: translateX(-3rem); transition: opacity .8s, transform .8s; }
.js-fadeRight.is-inview { opacity: 1; transform: translateX(0); transition-delay: .5s; }

.is-inview.js-list01 { transition-delay: .5s !important; }
.is-inview.js-list02 { transition-delay: .75s !important; }
.is-inview.js-list03 { transition-delay: 1s !important; }
.is-inview.js-list04 { transition-delay: 1.25s !important; }
.is-inview.js-list05 { transition-delay: 1.5s !important; }
.is-inview.js-list06 { transition-delay: 1.75s !important; }
.is-inview.js-list07 { transition-delay: 2s !important; }
.is-inview.js-list08 { transition-delay: 2.25s !important; }

img { max-width: 100%; }
h1.tit { display: none }
.page { max-width: 100%; padding:0; }

.hamonband { max-width: 960px; padding:0 auto 10rem; margin: 0 auto; }
.hamonband * { letter-spacing: 0; }

.hb_catch { padding:5rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.hb_catch h2 { font-size: 1.3571428571429rem; font-weight: 500; line-height: 1.25; }
.hb_catch h2 small { font-size: 1.1428571428571rem; font-weight: inherit; display: inline-block; line-height: 1.25; }
.hb_catch h2 em { font-size:1.7142857142857rem; font-weight: inherit; display: inline-block; line-height: 1.25; }
.hb_catch h2 em.markey { position: relative; z-index: 10; }
.hb_catch h2 em.markey::before { content: ""; display: block; position: absolute; left: 0; bottom: -1px; width: 100%; height: 8px; overflow: hidden; line-height: 1px; font-size: 1px; background: linear-gradient(to right,  rgba(226,149,146,1) 0%,rgba(226,149,146,0) 100%); z-index: -10; }

.hb_kv { border: 1px solid rgba(0, 0, 0, .2); text-align: center; margin: 0 auto; }

.hb_caption { max-width: 760px; margin: 5rem auto; background: url(/static/images/hamonband/caption_bg@2x.png) center/cover no-repeat; padding: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.hb_caption .cont { width: calc((100% - 20px) / 3); background: #fff; padding:1.5rem 1rem; }
.hb_caption h2 { text-align: center; line-height: 1.5; margin: 0 auto 1.5rem; }
.hb_caption h2 small { color: #E28282; font-size:0.78571428571429rem; }
.hb_caption ul { margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.hb_caption p { line-height: 1.8; margin: 0 auto 1.5rem; }

.hb_point { max-width: 760px; margin: 5rem auto; display: flex; }
.hb_point .cont { width: calc(100% / 2); padding: 0 2rem 0 0; }
.hb_point .cont h2 { position: relative; min-height: 40px; width: 100%; margin: 0 auto 2rem; display: flex; align-items: center; padding: 0 0 0 55px; font-size: 1.1428571428571rem; }
.hb_point .cont h2::before { content: ""; display: block; position: absolute; left: 15px; top:0; width: 20px; height: 40px; background-color: #4F9723; transform: skewX(-35deg); }
.hb_point .cont dt { padding: 0 0 0 2rem; margin: 0 auto 1rem; position: relative; }
.hb_point .cont dt::before { content: "1."; position: absolute; left: 0; top:0; font-size: 1.7142857142857rem; color: #53992A; font-weight: 600; }
.hb_point .cont dd { margin: 0 auto 1rem; text-align: center; }
.hb_point .cont ul { margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.hb_point .cont p { margin: 0 auto 1rem; line-height: 1.75; }
.hb_point .cont aside h3 { font-size: 0.85714285714286rem; line-height: 1.5; }
.hb_point .cont aside p { font-size: 0.85714285714286rem; }
.hb_point .cont:nth-of-type(2) { border-left: 1px solid rgba(0, 0, 0, .2); padding: 0 0 0 2rem; }
.hb_point .cont dl:nth-of-type(2) dt::before { content: "2."; position: absolute; left: 0; top:0; font-size: 1.7142857142857rem; color: #53992A; font-weight: 600; }

.hb_note { margin: 0 auto 5rem; }
.hb_note h2 { border: 1px solid rgba(0, 0, 0, .4); padding: 1rem; line-height: 1; font-weight: 500; margin: 0 auto 2.5rem; position: relative; }
.hb_note h2::before { content: ""; display: block; width: 4px; height: 20px; background: #53992A; font-size: 1px; position: absolute; left: 0; top:calc(50% - 10px); }
.hb_note ul { position: relative; background: url(/static/images/hamonband/howto_bg.png) right bottom no-repeat; background-size: 173.03px 230px; }
.hb_note ul li { position: relative; padding: 0 0 0 20px; margin: .5em 0; }
.hb_note ul li::before{ content: ""; display: block; width: 8px; height: 8px; font-size: 1px; border-radius: 50%; background: #8EAF7A; position: absolute; left: 5px; top:7px; }
.hb_note .inr { display: flex; flex-wrap: wrap; }
.hb_note .inr dl { display: flex; flex-wrap: wrap; width: calc(100% / 3); border-left: 1px solid rgba(0, 0, 0, .2); padding: 0 0 0 1rem; }
.hb_note .inr dt { width: 10rem; }
.hb_note .inr dd { width: calc(100% - 11rem); }
.hb_note .inr dd::before { content: "："; }
.hb_note .inr dl:nth-of-type(1),
.hb_note .inr dl:nth-of-type(4) { border: none; padding-left: 0; }




/* ─────────────────────────────────
1000px以下の動作
───────────────────────────────── */
@media print, screen and (max-width:1200px){
  .hamonband { padding:0 auto 4rem; border-bottom: 1px solid rgba(0, 0, 0, .2); }
  .hb_kv { border: none; border-top: 1px solid rgba(0, 0, 0, .2); }
  .hb_catch { padding:2.5rem 1rem; flex-direction: column-reverse; }
  .hb_catch h2 { width: 100%; }
  .hb_logo { width: 100%; margin: 0 auto 1rem; }

  .hb_caption { margin: 0 auto; }
  .hb_caption .cont { width: 100%; }
  .hb_caption p { margin-bottom: 0; }
  .hb_point { display: block; margin:2rem; }
  .hb_point .cont { width: 100%; padding: 0; margin: 0 auto 2rem; }
  .hb_point .cont:nth-of-type(2) { border:none; border-top: 1px solid rgba(0, 0, 0, .2); padding:2rem 0 0; }
  .hb_note { margin: 2rem; }
  .hb_note .inr { display: block; }
  .hb_note .inr dl { display: flex; flex-wrap: wrap; width: 100%; border:none; padding: 0; margin: 0 auto .5em; }
}




/* ─────────────────────────────────
640px以下の動作
───────────────────────────────── */
@media print, screen and (max-width:640px){
}