@charset "utf-8";

/* ==========================================================================
   important.css
   共通設定 / デザイントークン / 汎用ユーティリティ
   ========================================================================== */

/* ----------------------------------------
   Design Tokens
---------------------------------------- */
:root {
  --color-text: #333;
  --color-dark: #313c4a;
  --color-navy: #1f2c38;
  --color-gold: #b6a151;
  --color-gold-dark: #9f8636;
  --color-red: #d70a11;
  --color-cream: #f8f3e5;
  --color-paper: #faf7f0;
  --color-gray: #f6f6f6;

  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;

  --inner: 1000px;
}

/* ----------------------------------------
   Base
---------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.75;
  background: #fff;
}

p {
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.03em;
}

/* ----------------------------------------
   Typography
---------------------------------------- */

/* heading reset */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: inherit;
}

/* h1 */
h1 {
  font-family: var(--font-sans);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

/* h2 */
h2 {
  font-family: var(--font-sans);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

/* h3 */
h3 {
  font-family: var(--font-sans);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

/* h4 */
h4 {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

/* h5 */
h5 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

/* h6 */
h6 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

/* sub（英字上ラベル） */
.sub {
  margin: 0 0 8px;

  color: var(--color-gold);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

/* title（セクション見出し） */
.title {
  margin: 0;

  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

/* box title（カード・ボックス内タイトル） */
/*.box_title {
  margin: 0;

  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
}*/

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

#contents,
.lp {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;
}

/* ----------------------------------------
   Common Section Layout
---------------------------------------- */
.intro,
.problem,
.profile,
.program,
.comparison,
.portfolio,
.report,
.howto,
.member-voice,
.plan,
.flow,
.faq,
.vision,
.cta,
.footer {
  width: 100%;
}

.intro__inner,
.problem__inner,
.profile__inner,
.program__inner,
.comparison__inner,
.portfolio__inner,
.report__inner,
.howto__inner,
.member-voice__inner,
.plan__inner,
.flow__inner,
.faq__inner,
.vision__inner,
.cta__inner,
.footer__inner {
  width: min(var(--inner), calc(100% - 40px));
  margin: 0 auto;
}

/* ----------------------------------------
   Common Heading
---------------------------------------- */
.intro__title,
.problem__title,
.profile__title,
.program__title,
.comparison__title,
.portfolio__title,
.report__title,
.howto__title,
.member-voice__title,
.plan__title,
.flow__title,
.faq__title,
.vision__title,
.cta__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .08em;
}

.profile__label,
.program__label,
.comparison__label,
.portfolio__label,
.report__label,
.howto__label,
.member-voice__label,
.plan__label,
.flow__label,
.faq__label,
.vision__label,
.cta__label {
  margin: 0 0 8px;
  color: var(--color-gold);
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: .12em;
  text-align: center;
}

/* ----------------------------------------
   Text Utilities
---------------------------------------- */
.align_l { text-align: left; }
.align_r { text-align: right; }
.align_c,
.center { text-align: center; }

.red { color: var(--color-red); }
.blue { color: #0B407D; }
.black { color: #2D2D2D; }
.white { color: #fff; }
.gold,
.yellow { color: var(--color-gold); }

.bold { font-weight: 700; }
.no_bold { font-weight: 400; }
.under { text-decoration: underline; }
.small { font-size: 80%; }

.font_m,
.font_serif {
  font-family: var(--font-serif);
}

a.n_link {
  color: #0041FF;
  border-bottom: solid 1px;
}

/* ----------------------------------------
   Layout Utilities
---------------------------------------- */
.ov_h { overflow: hidden; }
.fr { float: right; }
.fl { float: left; }
.clearb { clear: both; }
.position_re { position: relative; }

.aligncenter {
  display: block;
  margin: 0 auto;
}

.cf::before,
.cf::after {
  content: "";
  display: table;
}

.cf::after {
  clear: both;
}

/* ----------------------------------------
   Width Utilities
---------------------------------------- */
.w5 { width: 5%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w50 { width: 50%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w90 { width: 90%; }
.w95 { width: 95%; }
.w100 { width: 100%; }

/* ----------------------------------------
   Box Utilities
---------------------------------------- */
.red_box {
  display: block;
  padding: 1em;
  border: solid 1px #f22;
  background: #fffee5;
}

.gray_box {
  display: block;
  padding: 1em;
  background: #f2f2f2;
  font-size: 80%;
}

.blue_bgtext {
  display: inline-block;
  padding: .3em .5em;
  border-radius: 15px;
  background: #4c6c92;
  color: #fff;
  font-size: 85%;
  font-weight: 700;
}

.shadow_box {
  box-shadow: 2px 2px 3px #9e9e9e;
}

.scroll_box {
  max-height: 11em;
  overflow: auto;
  padding: 1em;
  border: solid 1px #b7b7b7;
  box-sizing: border-box;
  background: #fff;
  margin: 0 0 1em;
}

/* ----------------------------------------
   Margin Utilities
   必要最低限だけ残す。足りない場合は既存ルールを追加。
---------------------------------------- */
.mt0 { margin-top: 0; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mt60 { margin-top: 60px; }
.mt70 { margin-top: 70px; }
.mt80 { margin-top: 80px; }
.mt90 { margin-top: 90px; }
.mt100 { margin-top: 100px; }

.mb0 { margin-bottom: 0; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb90 { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }

.nmt10 { margin-top: -10px; }
.nmt20 { margin-top: -20px; }
.nmt30 { margin-top: -30px; }
.nmt40 { margin-top: -40px; }
.nmt50 { margin-top: -50px; }

.nmb10 { margin-bottom: -10px; }
.nmb20 { margin-bottom: -20px; }
.nmb30 { margin-bottom: -30px; }
.nmb40 { margin-bottom: -40px; }
.nmb50 { margin-bottom: -50px; }

/* ----------------------------------------
   Padding Utilities
---------------------------------------- */
.pt0 { padding-top: 0; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }
.pt60 { padding-top: 60px; }
.pt70 { padding-top: 70px; }
.pt80 { padding-top: 80px; }
.pt90 { padding-top: 90px; }
.pt100 { padding-top: 100px; }

.pb0 { padding-bottom: 0; }
.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }
.pb60 { padding-bottom: 60px; }
.pb70 { padding-bottom: 70px; }
.pb80 { padding-bottom: 80px; }
.pb90 { padding-bottom: 90px; }
.pb100 { padding-bottom: 100px; }

/* ----------------------------------------
   SP
---------------------------------------- */
@media screen and (max-width: 760px) {
  :root {
    --inner: 100%;
  }

  .intro__inner,
  .problem__inner,
  .profile__inner,
  .program__inner,
  .comparison__inner,
  .portfolio__inner,
  .report__inner,
  .howto__inner,
  .member-voice__inner,
  .plan__inner,
  .flow__inner,
  .faq__inner,
  .vision__inner,
  .cta__inner,
  .footer__inner {
    width: calc(100% - 28px);
  }

  .sp_mt {
    margin-top: 70px;
  }

  .gray_box {
    text-align: left;
  }

  .aligncenter {
    max-width: 100%;
  }
}

/* ----------------------------------------
   スマホの時だけ改行させるクラス
---------------------------------------- */
.br-sp {
    display: none;
}

@media (max-width: 760px) {
    .br-sp {
        display: block;
    }
}