@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

:root {
  --BegNaviBg:#139cff;
  --BegYellow:#fff023;
  --BegColNv:#0050a0;
  --BegColBl:#d9e5f1;
  --BegColPink:#f05a96;
  --BegColPink2:#f7acca;
}
main { font-family: "LINE Seed JP", sans-serif; font-weight: 700; font-size: var(--size28); background-color: #FFF }
aside { background-color: var(--BegNaviBg); font-family: "LINE Seed JP", sans-serif }
aside.pcNavi { display: flex; flex-direction:column }
aside.pcNavi .navList { margin: 0 }
.navHeader { background-color: var(--BegNaviBg) }
.navList { margin: 0 22vw; text-align: unset; font-size: var(--size24) }
.navList li { border-bottom: #FFF 2px dashed; padding: 0 min(5vw,1rem) }
.footWrap { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center }
nav.navCont { top: min(12.5vw,100px); padding-top: 1rem; margin-top: 0; background-color: var(--BegNaviBg) }
aside a.btn,nav a.btn { font-weight: 900; font-size: var(--size30); border-radius: 25px; padding: 1.5rem 2rem; line-height: 1 }
aside a.btn i,nav a.btn i { font-size: 70% }

/* contents */
.inner { width: min(90vw,750px); max-width: 100%; box-sizing: border-box; margin: auto }
a[name] { margin-top: 0; padding-top: 0 }
a.btnY { background-color: var(--BegYellow); color: var(--BegColNv) }
a.btnP { background-color: var(--BegColPink); color: #FFF; border-radius: 25px }
mark { font-weight: 900 }
mark.markY { background: linear-gradient(transparent 65%, var(--BegYellow) 65%) }
mark.markP { background: linear-gradient(transparent 65%, var(--BegColPink2) 65%) }
img[src*="Title.webp"] { height: auto }
.textBu { color: var(--BegColNv) }
ul.textKome { font-weight: 400 }

/* アコーディオン */
.accordion { margin-bottom: 1.5rem }
.accordion:last-of-type { margin-bottom: 0 }
.accordion[open] { background-color: var(--BegColBl); border-radius: min(8vw,50px) }
.accordion summary { background-color: var(--BegColNv); color: #FFF; border-radius: min(8vw,50px); display: flex; line-height: 1.3; text-align: left; padding: min(1rem) min(2.6rem) min(1rem) min(5vw,2rem); }
.accordion[open] summary { border-radius: min(8vw,50px) min(8vw,50px) 0 0 }
.accordion summary::after { content: "\f055"; font-size: var(--size40); height: auto; top: 33% }
.accordion[open] summary::after { content: "\f056" }
.accordion summary > img { width: 11%; padding-right: 1rem }
.accordion .inDoc { padding: min(4vw,2rem) }
.accordion .inDoc > p:last-of-type { margin-bottom: 0 }

/* about */
section#about { padding-top: min(2vw,20px) }

/* 特典（benefits） */
section#benefitsWrap { background-image: url(../image/2027/beginner/benefitsBg.webp); background-size: 200px auto; padding-top: min(5vw,100px) }
section#benefitsWrap .inner { background-color: #FFF; border-radius: 50px; padding: min(5vw,2rem); margin-top: max(-18vw,-150px); padding-top: min(18vw,150px) }
/* 会員種別（category） */
section#categoryWrap { background-image: url(../image/2027/beginner/categoryBg.webp); background-size: cover }
/* 入会方法（howto） */
section#howtoWrap { background-image: url(../image/2027/beginner/howtoBg.webp); background-size: cover; padding: 0 }
section#howtoWrap .innerWrap { padding: min(4vw,100px) min(4vw,100px) 0 }
section#howtoWrap .inner { border-radius: 0 0 min(5.5vw,50px) min(5.5vw,50px); background-color: #FFF; padding: 1.5rem; margin-bottom: 2rem; font-size: var(--size26); width: min(100%,750px) }

section#last { background-color: #fffabd; padding: 0 0 min(4vw,100px) }

@media screen and (max-width: 960px) {
  aside.pcNavi { display: none }
  a[name] { margin-top: max(-12.5vw,-100px); padding-top: min(12.5vw,100px) }
  img[src*="Title.webp"] { max-width: 100% }
}

/* FONT
.line-seed-jp-regular {
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}

400 Regular
700 Bold
800 ExtraBold
*/