@charset "UTF-8";
/* RN WORKS common.css
  Breakpoints:
  - sm: max-width 740px
  - md: max-width 980px
*/
/* ===== Variables ===== */ :root {
  --container: 1200px;
  --gutter: 20px;
  /*--header-height: 110px;*/
  --text: #333333;
  --muted: #64748b;
  --bg: #ffffff;
  --soft: #efefef;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  --border: 1px solid rgba(15, 23, 42, 0.10);
  --font: ui-sans-serif, system-ui, -apple-system, "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", Arial, sans-serif;
}
@media (max-width: 740px) {
  :root {
    /*--header-height: 110px;*/
  }
}
/* ===== Base ===== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.header {
  height: var(--header-height);
}
.container {
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}
/* ===== Helpers ===== */
.c-muted {
  color: var(--muted);
}
.bg-soft {
  background: var(--soft);
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.w100 {
  width: 100%;
  display: inline-block;
}
.fw700 {
  font-weight: 700;
}
.lh120 {
  line-height: 1.2;
}
.lh140 {
  line-height: 1.4;
}
.lh170 {
  line-height: 1.7;
}
/* ===== Buttons (base) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: var(--border);
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}
.btn:active {
  transform: translateY(0);
  opacity: .9;
}
.btn--primary {
  background: #0f172a;
  color: #fff;
  border-color: transparent;
}
/* ===== Cards ===== */
.card {
  border-radius: var(--radius);
  border: var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}
/* ===== Spacing Utilities (important) ===== */
/* ===== Margin Top ===== */
.mt0 {
  margin-top: 0 !important;
}
.mt5 {
  margin-top: 5px !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt15 {
  margin-top: 15px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt25 {
  margin-top: 25px !important;
}
.mt30 {
  margin-top: 30px !important;
}
.mt35 {
  margin-top: 35px !important;
}
.mt40 {
  margin-top: 40px !important;
}
.mt45 {
  margin-top: 45px !important;
}
.mt50 {
  margin-top: 50px !important;
}
.mt60 {
  margin-top: 60px !important;
}
.mt70 {
  margin-top: 70px !important;
}
.mt80 {
  margin-top: 80px !important;
}
.mt90 {
  margin-top: 90px !important;
}
.mt100 {
  margin-top: 100px !important;
}
/* ===== Margin Bottom ===== */
.mb0 {
  margin-bottom: 0 !important;
}
.mb5 {
  margin-bottom: 5px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb15 {
  margin-bottom: 15px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb25 {
  margin-bottom: 25px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mb35 {
  margin-bottom: 35px !important;
}
.mb40 {
  margin-bottom: 40px !important;
}
.mb45 {
  margin-bottom: 45px !important;
}
.mb50 {
  margin-bottom: 50px !important;
}
.mb60 {
  margin-bottom: 60px !important;
}
.mb70 {
  margin-bottom: 70px !important;
}
.mb80 {
  margin-bottom: 80px !important;
}
.mb90 {
  margin-bottom: 90px !important;
}
.mb100 {
  margin-bottom: 100px !important;
}
/* padding */
.p10 {
  padding: 10px !important;
}
.p15 {
  padding: 15px !important;
}
.p20 {
  padding: 20px !important;
}
.py20 {
  padding-block: 20px !important;
}
.py30 {
  padding-block: 30px !important;
}
.py60 {
  padding-block: 60px !important;
}
.py90 {
  padding-block: 90px !important;
}
/* ===== Padding Top ===== */
.pt0 {
  padding-top: 0 !important;
}
.pt5 {
  padding-top: 5px !important;
}
.pt10 {
  padding-top: 10px !important;
}
.pt15 {
  padding-top: 15px !important;
}
.pt20 {
  padding-top: 20px !important;
}
.pt25 {
  padding-top: 25px !important;
}
.pt30 {
  padding-top: 30px !important;
}
.pt35 {
  padding-top: 35px !important;
}
.pt40 {
  padding-top: 40px !important;
}
.pt45 {
  padding-top: 45px !important;
}
.pt50 {
  padding-top: 50px !important;
}
.pt60 {
  padding-top: 60px !important;
}
.pt70 {
  padding-top: 70px !important;
}
.pt80 {
  padding-top: 80px !important;
}
.pt90 {
  padding-top: 90px !important;
}
.pt100 {
  padding-top: 100px !important;
}
/* ===== Padding Bottom ===== */
.pb0 {
  padding-bottom: 0 !important;
}
.pb5 {
  padding-bottom: 5px !important;
}
.pb10 {
  padding-bottom: 10px !important;
}
.pb15 {
  padding-bottom: 15px !important;
}
.pb20 {
  padding-bottom: 20px !important;
}
.pb25 {
  padding-bottom: 25px !important;
}
.pb30 {
  padding-bottom: 30px !important;
}
.pb35 {
  padding-bottom: 35px !important;
}
.pb40 {
  padding-bottom: 40px !important;
}
.pb45 {
  padding-bottom: 45px !important;
}
.pb50 {
  padding-bottom: 50px !important;
}
.pb60 {
  padding-bottom: 60px !important;
}
.pb70 {
  padding-bottom: 70px !important;
}
.pb80 {
  padding-bottom: 80px !important;
}
.pb90 {
  padding-bottom: 90px !important;
}
.pb100 {
  padding-bottom: 100px !important;
}
/* ===== Font size Utilities ===== */
.fz12 {
  font-size: 12px !important;
}
.fz14 {
  font-size: 14px !important;
}
.fz16 {
  font-size: 16px !important;
}
.fz18 {
  font-size: 18px !important;
}
.fz20 {
  font-size: 20px !important;
}
.fz22 {
  font-size: 22px !important;
}
.fz24 {
  font-size: 24px !important;
}
.fz28 {
  font-size: 28px !important;
}
.fz32 {
  font-size: 32px !important;
}
/* ===== Display helpers ===== */
._forSP {
  display: none !important;
}
._forPC {
  display: block !important;
}
.d-none {
  display: none !important;
}
.b-none {
  border: none !important;
}
/* ===== Grid System (12 columns) ===== */
.grid__wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
.gap10 {
  gap: 10px !important;
}
.gap20 {
  gap: 20px !important;
}
.gap30 {
  gap: 30px !important;
}
.align-center {
  align-items: center;
}
/* spans (PC) */
.span-1 {
  grid-column: span 1;
}
.span-2 {
  grid-column: span 2;
}
.span-3 {
  grid-column: span 3;
}
.span-4 {
  grid-column: span 4;
}
.span-5 {
  grid-column: span 5;
}
.span-6 {
  grid-column: span 6;
}
.span-7 {
  grid-column: span 7;
}
.span-8 {
  grid-column: span 8;
}
.span-9 {
  grid-column: span 9;
}
.span-10 {
  grid-column: span 10;
}
.span-11 {
  grid-column: span 11;
}
.span-12 {
  grid-column: span 12;
}
/* ===== Responsive: md (<=980) ===== */
@media (max-width: 980px) {
  .container {
    width: min(960px, calc(100% - (var(--gutter) * 2)));
  }
  .md-text-left {
    text-align: left !important;
  }
  .md-mt15 {
    margin-top: 15px !important;
  }
  .md-fz22 {
    font-size: 22px !important;
  }
  .md-fz28 {
    font-size: 28px !important;
  }
  .md-span-1 {
    grid-column: span 1;
  }
  .md-span-2 {
    grid-column: span 2;
  }
  .md-span-3 {
    grid-column: span 3;
  }
  .md-span-4 {
    grid-column: span 4;
  }
  .md-span-5 {
    grid-column: span 5;
  }
  .md-span-6 {
    grid-column: span 6;
  }
  .md-span-7 {
    grid-column: span 7;
  }
  .md-span-8 {
    grid-column: span 8;
  }
  .md-span-9 {
    grid-column: span 9;
  }
  .md-span-10 {
    grid-column: span 10;
  }
  .md-span-11 {
    grid-column: span 11;
  }
  .md-span-12 {
    grid-column: span 12;
  }
}
/* ===== Responsive: sm (<=740) ===== */
@media (max-width: 740px) {
  ._forSP {
    display: block !important;
  }
  ._forPC {
    display: none !important;
  }
  .sm-fz14 {
    font-size: 14px !important;
  }
  .sm-fz16 {
    font-size: 16px !important;
  }
  .sm-fz18 {
    font-size: 18px !important;
  }
  .sm-fz20 {
    font-size: 20px !important;
  }
  .sm-fz22 {
    font-size: 22px !important;
  }
  .sm-fz24 {
    font-size: 24px !important;
  }
  .sm-py40 {
    padding-block: 40px !important;
  }
  .sm-py60 {
    padding-block: 60px !important;
  }
  .sm-span-1 {
    grid-column: span 1;
  }
  .sm-span-2 {
    grid-column: span 2;
  }
  .sm-span-3 {
    grid-column: span 3;
  }
  .sm-span-4 {
    grid-column: span 4;
  }
  .sm-span-5 {
    grid-column: span 5;
  }
  .sm-span-6 {
    grid-column: span 6;
  }
  .sm-span-7 {
    grid-column: span 7;
  }
  .sm-span-8 {
    grid-column: span 8;
  }
  .sm-span-9 {
    grid-column: span 9;
  }
  .sm-span-10 {
    grid-column: span 10;
  }
  .sm-span-11 {
    grid-column: span 11;
  }
  .sm-span-12 {
    grid-column: span 12;
  }
  .pb0 {
    padding-bottom: 0 !important;
  }
  .sm-mt60 {
    margin-top: 60px !important;
  }
  .sm-mb30 {
    margin-bottom: 30px !important;
  }
}
/* ===== Flex Columns Base ===== */
.flex__wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
/* gap utilities（gridと揃える） */
.flex__wrapper.gap10 {
  gap: 10px !important;
}
.flex__wrapper.gap20 {
  gap: 20px !important;
}
.flex__wrapper.gap30 {
  gap: 30px !important;
}
/* alignment */
.flex__wrapper.align-center {
  align-items: center !important;
}
.flex__wrapper.justify-between {
  justify-content: space-between !important;
}
.flex__wrapper.justify-center {
  justify-content: center !important;
}
/* ===== Columns (12-based like grid) ===== */
.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}
.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
.col-5 {
  flex: 0 0 41.6667%;
  max-width: 41.6667%;
}
.col-7 {
  flex: 0 0 58.3333%;
  max-width: 58.3333%;
}
.col-4 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
.col-8 {
  flex: 0 0 66.6667%;
  max-width: 66.6667%;
}
.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
.flex__wrapper.is-2col > .col-6 {
  flex: 1 1 calc(50% - (var(--flex-gap, 30px) / 2));
  max-width: calc(50% - (var(--flex-gap, 30px) / 2));
}
.flex__wrapper.is-2col {
  --flex-gap: 30px;
  gap: var(--flex-gap);
}
/* ===== Responsive: md (<=980) ===== */
@media (max-width: 980px) {
  .md-col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .md-col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .flex__wrapper.is-2col > .md-col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* ===== Responsive: sm (<=740) ===== */
@media (max-width: 740px) {
  .sm-col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .sm-col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .sm-reverse {
    flex-direction: column-reverse !important;
  }
  .flex__wrapper.is-2col > .sm-col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}