@charset "UTF-8";
:root {
  --white-color: #fff;
  --black-color: #000;
  --gray-color-600: #5E6063;
  --gray-color-500: #4C4C4C;
  --gray-color-400: #D9D9D9;
  --gray-color-300: #CCC;
  --gray-color-200: #E0E0E0;
  --gray-color-100: #F7F7F7;
  --primary-color-500: #2C7BCF;
  --primary-color-300: #E3F0FF;
  --primary-color-100: #EBF4FF;
  --secondary-color-600: #ff8400;
  --secondary-color-500: #F9A928;
  --secondary-color-100: #FEF3E1;
 --tertiary-color-500:#7da34c;
 --tertiary-color-100:#eef8e2;
  --font-size: 16;
}
/* ==========================================================================
  ELEMENT RESET
========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-family: serif;
  scroll-padding-top: calc(160 / var(--font-size) * 1rem);
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--black-color);
  font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1em;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 0;
}
dd {
  margin-left: 0;
}
ol,
ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a {
  outline: 0;
}
a:focus,
button:focus {
  outline: 0;
}
em {
  font-style: normal;
}
figure {
  margin: 0;
}
table {
  border-collapse: collapse;
}
button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
button:focus {
  outline: none;
}
input,
button,
select,
textarea {
  line-height: inherit;
}
textarea {
  resize: vertical;
}
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  line-height: inherit;
}
hr {
  margin: 0;
}
hr {
  margin: 5rem 0;
  border: 1px #ccc solid;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
video {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
@media all and (min-width: 768px),print{
  a[href^="tel:"]{
    pointer-events: none;
  }
}
/* ==========================================================================
  MEDIA QUERIES
========================================================================== */
/*
@media all and (min-width: 768px),print {
}
@media all and (min-width: 1025px) {
}
@media all and (min-width: 1366px) {
}
@media all and (min-width: 1600px) {
}
@media all and (min-width: 768px) and (max-width: 1024px) {
}
@media screen and (max-width: 767px) {
}
@media all and (max-width: 374px) {
}
@media all and (min-width: 640px) and (max-width: 767px) {
}
*/

/* ==========================================================================
  UTILL
========================================================================== */
/* 画像置換 */
.u-ir {
  display: block;
  overflow: hidden;
  font: 0/0 a;
  white-space: nowrap;
  text-indent: 100%;
}

/* PC、タブレットで画像置換 */
@media all and (min-width: 768px), print {
  .u-ir--tab-pc {
    display: block;
    overflow: hidden;
    font: 0/0 a;
    white-space: nowrap;
    text-indent: 100%;
  }
}
/* --------------------------------------------------------------------------
  非表示
-------------------------------------------------------------------------- */
/* PCで非表示 */
@media all and (min-width: 1025px), print {
  .u-hide-pc {
    display: none;
  }
}
/* PC、タブレットで非表示 */
@media all and (min-width: 768px), print {
  .u-hide-tab-pc {
    display: none;
  }
}
/* タブレットのみ非表示 */
@media all and (min-width: 768px) and (max-width: 1024px) {
  .u-hide-tab {
    display: none;
  }
}
/* SPで非表示 */
@media screen and (max-width: 767px) {
  .u-hide-sp {
    display: none;
  }
}
/* --------------------------------------------------------------------------
  行揃え
-------------------------------------------------------------------------- */
.u-center {
  text-align: center;
}
/* TAB,PCのみテキストセンター */
@media all and (min-width: 768px), print {
  .u-center-tab-pc {
    text-align: center;
  }
}
/* SPのみテキストセンター */
@media screen and (max-width: 767px) {
  .u-center-sp {
    text-align: center;
  }
}
.u-left {
  text-align: left;
}
/* TAB,PCのみテキストセンター */
@media all and (min-width: 768px), print {
  .u-left-tab-pc {
    text-align: left;
  }
}
/* SPのみテキストセンター */
@media screen and (max-width: 767px) {
  .u-left-sp {
    text-align: left;
  }
}
.u-justify {
  text-align: justify;
  text-justify: inter-ideograph;
}
.u-combine {
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
}
/* --------------------------------------------------------------------------
  強調
-------------------------------------------------------------------------- */
.u-strong {
  font-weight: bold;
}
.u-bold {
  font-weight: bold;
}
.u-normal{
  font-weight: normal;
}
.u-txt-underline{
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  .u-bold-sp{
    font-weight: bold;
  }
  .u-normal-sp{
    font-weight: normal;
  }
}

/* --------------------------------------------------------------------------
  背景
-------------------------------------------------------------------------- */
/* primary */
.u-bg-primary-500 {
  background-color: var(--primary-color-500);
}
.u-bg-primary-400 {
  background-color: var(--primary-color-400);
}
.u-bg-primary-300 {
  background-color: var(--primary-color-300);
}
.u-bg-primary-200 {
  background-color: var(--primary-color-200);
}
.u-bg-primary-100 {
  background-color: var(--primary-color-100);
}
/* secondary */
.u-bg-secondary-500 {
  background-color: var(--secondary-color-500);
}
.u-bg-secondary-400 {
  background-color: var(--secondary-color-400);
}
.u-bg-secondary-300 {
  background-color: var(--secondary-color-300);
}
.u-bg-secondary-200 {
  background-color: var(--secondary-color-200);
}
.u-bg-secondary-100 {
  background-color: var(--secondary-color-100);
}
/* gray */
.u-bg-gray-500 {
  background-color: var(--gray-color-500);
}
.u-bg-gray-400 {
  background-color: var(--gray-color-400);
}
.u-bg-gray-300 {
  background-color: var(--gray-color-300);
}
.u-bg-gray-200 {
  background-color: var(--gray-color-200);
}
.u-bg-gray-100 {
  background-color: var(--gray-color-100);
}

/* --------------------------------------------------------------------------
  文字色
-------------------------------------------------------------------------- */
/* primary */
.u-txt-primary {
  color: var(--primary-color-500);
}
/* secondary */
.u-txt-secondary {
  color: var(--secondary-color-500);
}

.u-txt-secondary-02 {
  color: var(--secondary-color-600);
}

.u-txt-red {
  color: #EF2525;
}
.u-txt-orange {

}
.u-txt-white {
  color: var(--white-color);
}

/* --------------------------------------------------------------------------
  マージン
-------------------------------------------------------------------------- */
.u-mt-0 {
  margin-top: 0!important;
}

/* --------------------------------------------------------------------------
  フォント
-------------------------------------------------------------------------- */
body,
button,
input,
optgroup,
select,
textarea {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  font-family: YakuHanJP_Noto, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
.u-font-yh {
  font-family: YakuHanJP_Noto, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
.u-font-en {
  font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
  ROOT FONT SIZE
-------------------------------------------------------------------------- */
/* 16px */
html {
  font-size: 16px;
}
body {
  font-size: 1rem;
}
@media all and (min-width: 1800px) {
  /* 14px */
  /* html {
    font-size: 18px;
  } */
}
@media all and (min-width: 768px) and (max-width: 1365px) {
  /* 14px */
  html {
    font-size: 14px;
  }
}
@media all and (min-width: 640px) and (max-width: 767px) {
  /* 16px */
  /* html {
    font-size: 16px;
  } */
}
@media all and (max-width: 639px) {
  /* 14px */
  /* html {
    font-size: 14px;
  } */
}
@media all and (max-width: 374px) {
  /* 13px */
  /* html {
    font-size: 13px;
  } */
}


/* ==========================================================================
  HEADER COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  見出し
-------------------------------------------------------------------------- */
/* LV2 */
@media all and (min-width: 768px), print {
  .c-header-lv2 {
    --header-size: 24;
    --header-pt: 22;
    --header-deco-color: var(--primary-color-500);
  }
  .c-header-lv2__in {
    position: relative;
    display: block;
    padding-top: calc(var(--header-pt) / var(--font-size) * 1rem);
  }
  .c-header-lv2__in::before {
    content: "";
    display: block;
    width: calc(80 / var(--font-size) * 1rem);
    height: calc(4 / var(--font-size) * 1rem);
    border-radius: calc(2 / var(--font-size) * 1rem);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--header-deco-color);
  }
  .c-header-lv2__txt {
    font-weight: bold;
    font-size: calc(var(--header-size) / var(--font-size) * 1rem);
    line-height: 1.4;
  }
  .c-header-lv2--center{
    text-align: center;
  }
  .c-header-lv2--center .c-header-lv2__in::before{
    left: 50%;
    transform: translateX(-50%);
  }
  
  .c-header-lv2--l{
    --header-size: 28;
  }
}
@media screen and (max-width: 767px) {
  .c-header-lv2 {
    --header-size: 20;
    --header-pt: 19;
    --header-deco-color: var(--primary-color-500);
  }
  .c-header-lv2__in {
    position: relative;
    display: block;
    padding-top: calc(var(--header-pt) / var(--font-size) * 1rem);
  }
  .c-header-lv2__in::before {
    content: "";
    display: block;
    width: calc(64 / var(--font-size) * 1rem);
    height: calc(4 / var(--font-size) * 1rem);
    border-radius: calc(2 / var(--font-size) * 1rem);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--header-deco-color);
  }
  .c-header-lv2__txt {
    font-weight: bold;
    font-size: calc(var(--header-size) / var(--font-size) * 1rem);
    line-height: 1.4;
  }
  .c-header-lv2--center{
    text-align: center;
  }
  .c-header-lv2--center .c-header-lv2__in::before{
    left: 50%;
    transform: translateX(-50%);
  }
  .c-header-lv2--left-sp {
    text-align: left;
  }
  .c-header-lv2--left-sp .c-header-lv2__in::before{
    left: 0;
    transform: translateX(0);
  }
  
  .c-header-lv2--l{
    --header-size: 28;
  }

  .c-header-lv2--m-sp{
    --header-size: 24;
  }

  .c-header-lv2--s-sp{
    --header-size: 20;
    --header-pt: 12;
  }
}

/* LV3 */
@media all and (min-width: 768px), print {
  .c-header-lv3 {
    --header-size: 20;
    --header-line-height: 1.5;
    --header-deco-color: var(--primary-color-500);
  }
  .c-header-lv3__in {
    display: block;
    position: relative;
    display: flex;
  }
  .c-header-lv3__in::before {
    content: "";
    display: block;
    width: calc(40 / var(--font-size) * 1rem);
    height: calc(3 / var(--font-size) * 1rem);
    background-color: var(--header-deco-color);
    flex-shrink: 0;
    margin-top: calc((var(--header-size) * var(--header-line-height) - 4) / 2 / var(--font-size) * 1rem);
    border-radius: 9999px;
  }
  .c-header-lv3__txt {
    font-size: calc(var(--header-size) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: var(--header-line-height);
    padding-left: calc(16 / var(--font-size) * 1rem);
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .c-header-lv3 {
    --header-size: 20;
    --header-line-height: 1.5;
    --header-deco-color: var(--primary-color-500);
  }
  .c-header-lv3__in {
    display: block;
    position: relative;
    display: flex;
  }
  .c-header-lv3__in::before {
    content: "";
    display: block;
    width: calc(40 / var(--font-size) * 1rem);
    height: calc(3 / var(--font-size) * 1rem);
    background-color: var(--header-deco-color);
    flex-shrink: 0;
    margin-top: calc((var(--header-size) * var(--header-line-height) - 4) / 2 / var(--font-size) * 1rem);
    border-radius: 9999px;
  }
  .c-header-lv3__txt {
    font-size: calc(var(--header-size) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: var(--header-line-height);
    padding-left: calc(16 / var(--font-size) * 1rem);
    display: block;
  }
}

/* LV4 */
@media all and (min-width: 768px), print {
  .c-header-lv4 {
    --header-size: 28;
    --header-ico-size: 18;
    --header-line-height: 1.5;
    --gap:16;
  }
  .c-header-lv4__in {
    display: block;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--gap) / var(--font-size) * 1rem);
  }
  .c-header-lv4__ico{
    width: calc(var(--header-ico-size) / var(--font-size) * 1rem);
  }
  .c-header-lv4__txt {
    font-size: calc(var(--header-size) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: var(--header-line-height);
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .c-header-lv4 {
    --header-size: 24;
    --header-ico-size: 18;
    --header-icon-size: 96;
    --header-line-height: 1.3;
    --gap: 13;
  }
  .c-header-lv4__in {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: calc(var(--gap) / var(--font-size) * 1rem);
    flex-direction: column;
  }
  .c-header-lv4__ico{
    width: calc(var(--header-ico-size) / var(--font-size) * 1rem);
  }
  .c-header-lv4__icon {
    width: calc(var(--header-icon-size) / var(--font-size) * 1rem);
  }
  .c-header-lv4__txt {
    font-size: calc(var(--header-size) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: var(--header-line-height);
    display: block;
    text-align: center;
  }
}

/* LV5 */
@media all and (min-width: 768px), print {
  .c-header-lv5{
    --box-bg-color: var(--gray-color-100);
    --box-border-color: var(--gray-color-100);
    --box-radius: 16;
    --txt-font-size: 24;
    --txt-line-height: 1.5;

    display: block;
    width: 100%;
  }
  .c-header-lv5__in{
    background-color: var(--box-bg-color);
    border-radius: calc(var(--box-radius) / var(--font-size)* 1rem);
    border: calc(1 / var(--font-size)* 1rem) solid var(--box-border-color);
    height: 100%;
    padding: calc(16 / var(--font-size)* 1rem) calc(24 / var(--font-size)* 1rem);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    gap: calc(8 / var(--font-size)* 1rem);
  }
  .c-header-lv5__in:has(.c-header-lv5-ico){
    position: relative;
    padding-right: calc(160 / var(--font-size)* 1rem);
  }
  .c-header-lv5__ico{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: calc(24 / var(--font-size)* 1rem);
  }
  .c-header-lv5__ico.c-header-lv5__ico--2row{
    flex-direction: column;
    row-gap: calc(8 / var(--font-size) * 1rem);
  }
  .c-header-lv5:has(.c-header-lv5__ico--2row) .c-header-lv5__in {
    min-height: calc(110 / var(--font-size) * 1rem);
    justify-content: center;
  }
  .c-header-lv5-ico{
    width: calc(120 / var(--font-size)* 1rem);
    width: fit-content;
    min-width: calc(120 / var(--font-size)* 1rem);
    background-color: var(--primary-color-500);
    border-radius: 9999px;
    flex-shrink: 0;
  }
  .c-header-lv5__ico.c-header-lv5__ico--2row{
  }
  .c-header-lv5:has(.c-header-lv5__ico--2row) .c-header-lv5__in {
  }
  .c-header-lv5-ico__in{
    padding: calc(8 / var(--font-size)* 1rem) calc(16 / var(--font-size)* 1rem);
  }
  .c-header-lv5-ico__label{
    text-align: center;
    font-size: calc(16 / var(--font-size)* 1rem);
    color: var(--white-color);
    font-weight: bold;
  }
  .c-header-lv5__header{
  }
  .c-header-lv5__header:has(.c-header-lv5-ico){
    display: flex;
  }
  .c-header-lv5__txt{
    font-size: calc(var(--txt-font-size) / var(--font-size)* 1rem);
    line-height: var(--txt-line-height);
    overflow-wrap: break-word;
    color: var(--primary-color-500);
    font-weight: bold;
  }
  .c-header-lv5--border-none{
    --box-border-color: transparent!important;
  }
  .c-header-lv5--white{
    --box-bg-color: var(--white-color);
    --box-border-color: var(--white-color);
  }
  .c-header-lv5--primary{
    --box-bg-color: var(--primary-color-100);
    --box-border-color: var(--primary-color-500);
  }
  .c-header-lv5--secondary{
    --box-bg-color: var(--secondary-color-100);
    --box-border-color: var(--secondary-color-500);
  }
}
@media screen and (max-width: 767px) {
  .c-header-lv5{
    --box-bg-color: var(--gray-color-100);
    --box-border-color: var(--gray-color-100);
    --box-radius: 12;
    --txt-font-size: 20;
    --txt-line-height: 1.5;

    display: block;
    width: 100%;
  }
  .c-header-lv5__in{
    background-color: var(--box-bg-color);
    border-radius: calc(var(--box-radius) / var(--font-size)* 1rem);
    border: calc(1 / var(--font-size)* 1rem) solid var(--box-border-color);
    height: 100%;
    padding: calc(16 / var(--font-size)* 1rem) calc(24 / var(--font-size)* 1rem);
    transition: all 0.2s;
  }
  .c-header-lv5__ico{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: calc(8 / var(--font-size) * 1rem);
    margin-bottom: calc(8 / var(--font-size)* 1rem);
  }
  .c-header-lv5-ico{
    width: calc(100 / var(--font-size)* 1rem);
    width: fit-content;
    min-width: calc(100 / var(--font-size)* 1rem);
    background-color: var(--primary-color-500);
    border-radius: 9999px;
    flex-shrink: 0;
  }
  .c-header-lv5-ico__in{
    padding: calc(6 / var(--font-size)* 1rem) calc(16 / var(--font-size)* 1rem);
  }
  .c-header-lv5-ico__label{
    text-align: center;
    font-size: calc(12 / var(--font-size)* 1rem);
    color: var(--white-color);
    font-weight: bold;
  }
  .c-header-lv5__header{
    margin-bottom: calc(6 / var(--font-size)* 1rem);
  }
  .c-header-lv5__header:has(.c-header-lv5-ico){
    display: flex;
  }
  .c-header-lv5__txt{
    font-size: calc(var(--txt-font-size) / var(--font-size)* 1rem);
    line-height: var(--txt-line-height);
    overflow-wrap: break-word;
    color: var(--primary-color-500);
    font-weight: bold;
  }
  .c-header-lv5--border-none{
    --box-border-color: transparent!important;
  }
  .c-header-lv5--white{
    --box-bg-color: var(--white-color);
    --box-border-color: var(--white-color);
  }
  .c-header-lv5--primary{
    --box-bg-color: var(--primary-color-100);
    --box-border-color: var(--primary-color-500);
  }
  .c-header-lv5--secondary{
    --box-bg-color: var(--secondary-color-100);
    --box-border-color: var(--secondary-color-500);
  }
}

/* タイトル */
@media all and (min-width: 768px), print {
  .c-header-title {
    /* --header-font-size: 30; */
    --header-font-size: 36;
    --header-color: var(--primary-color-500);
  }
  .c-header-title__label {
    color: var(--header-color);
    font-size: calc(var(--header-font-size) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 1.5;
  }

  /* large */
  /* .c-header-title--l {
    --header-font-size: 34;
  } */

  /* size */
  .c-header-title--m {
    --header-font-size: 28;
  }
  .c-header-title--s {
    --header-font-size: 24;
  }

  /* color */
  .c-header-title--black {
    --header-color: var(--black-color);
  }
}
@media screen and (max-width: 767px) {
  .c-header-title {
    /* --header-font-size: 30; */
    --header-font-size: 36;
    --header-color: var(--primary-color-500);
  }
  .c-header-title__label {
    color: var(--header-color);
    font-size: calc(var(--header-font-size) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 1.5;
  }

  /* large */
  /* .c-header-title--l {
    --header-font-size: 34;
  } */

  /* size */
  .c-header-title--m {
    --header-font-size: 28;
  }
  .c-header-title--s {
    --header-font-size: 24;
  }

  /* color */
  .c-header-title--black {
    --header-color: var(--black-color);
  }
}

/* PAGE */
@media all and (min-width: 768px), print {
  .page-hero {
    --hero-bg-color: var(--tertiary-color-100);

    position: relative;
    overflow: hidden;
    height: calc(178 / var(--font-size)* 1rem);
    margin-bottom: calc(80 / var(--font-size) * 1rem);
  }
  .page-hero:has(+ .l-page .l-page__head){
    margin-bottom: calc(32 / var(--font-size) * 1rem);
  }
  .page-hero::before {
    content: "";
    display: block;
    width: calc(1440 / var(--font-size) * 1rem);
    height: 100%;
    background-image: url(../img/common/hero.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
  .page-hero::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--hero-bg-color);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  .page-hero__in {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(10 / var(--font-size) * 1rem);
  }
  .page-hero__txt{
    text-align: center;
  }
  .page-hero__txt__label{
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: bold;
    color: var(--primary-color-500);
  }
  .page-hero__header {
  }
  .page-hero__header-title {
    display: block;
    position: relative;
    text-align: center;
  }
  .page-hero__header-title__label {
    font-size: calc(32 / var(--font-size) * 1rem);
    font-weight: bold;
    color: var(--gray-color-600);
  }
}
@media screen and (max-width: 767px) {
  .page-hero {
    --hero-bg-color: var(--tertiary-color-100);

    position: relative;
    overflow: hidden;
    height: calc(100 / var(--font-size)* 1rem);
    margin-bottom: calc(40 / var(--font-size) * 1rem);
  }
  .page-hero:has(+ .l-page .l-page__head){
    margin-bottom: calc(16 / var(--font-size) * 1rem);
  }
  .page-hero::before {
    content: "";
    display: block;
    width: calc(477 / var(--font-size) * 1rem);
    height: 100%;
    background-image: url(../img/common/hero_sp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
  }
  .page-hero::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--hero-bg-color);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  .page-hero__in {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(6 / var(--font-size) * 1rem);
  }
  .page-hero__txt{
    text-align: center;
  }
  .page-hero__txt__label{
    font-size: calc(11 / var(--font-size) * 1rem);
    font-weight: bold;
    color: var(--primary-color-500);
  }
  .page-hero__header {
  }
  .page-hero__header-title {
    display: block;
    position: relative;
    text-align: center;
  }
  .page-hero__header-title__label {
    font-size: calc(24 / var(--font-size) * 1rem);
    font-weight: bold;
    color: var(--gray-color-600);
  }
}


/* ==========================================================================
  TEXT COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  テキスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-txt {
    --txt-font-size: 16;
    --txt-line-height: 1.5;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
    line-height: var(--txt-line-height);
    overflow-wrap: break-word;
  }
  .c-txt sub,
  .c-txt sub {
    font-size: 0.5em;
  }

  .c-txt sub{
    top: -0.5em;
  }

  .c-txt sub {
    bottom: -0.1em;
  }

  .c-txt a {
    text-decoration: underline;
    color: var(--primary-color-500);
  }
  .c-txt a:hover {
    text-decoration: none;
  }

  /* L */
  .c-txt--xxxxl {
    --txt-font-size: 36;
  }
  .c-txt--xxxl {
    --txt-font-size: 28;
  }
  .c-txt--xxl {
    --txt-font-size: 24;
  }
  .c-txt--xl {
    --txt-font-size: 20;
  }
  .c-txt--l {
    --txt-font-size: 18;
  }

  /* M */
  .c-txt--m {
    --txt-font-size: 16;
  }

  /* S */
  .c-txt--s {
    --txt-font-size: 14;
  }
  .c-txt--xs {
    --txt-font-size: 12;
  }
  .c-txt--xxs {
    --txt-font-size: 11;
  }
  .c-txt--xxxs {
    --txt-font-size: 10;
  }

}
@media screen and (max-width: 767px) {
  .c-txt {
    --txt-font-size: 16;
    --txt-line-height: 1.5;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
    line-height: var(--txt-line-height);
    overflow-wrap: break-word;
  }
  .c-txt sub,
  .c-txt sub {
    font-size: 0.5em;
  }

  .c-txt sub{
    top: -0.5em;
  }

  .c-txt sub {
    bottom: -0.1em;
  }

  .c-txt a {
    text-decoration: underline;
    color: var(--primary-color-500);
  }
  .c-txt a:hover {
    text-decoration: none;
  }

  /* L */
  .c-txt--xxxxl {
    --txt-font-size: 36;
  }
  .c-txt--xxxl {
    --txt-font-size: 28;
  }
  .c-txt--xxl {
    --txt-font-size: 24;
  }
  .c-txt--xl {
    --txt-font-size: 20;
  }
  .c-txt--l {
    --txt-font-size: 18;
  }

  /* M */
  .c-txt--m {
    --txt-font-size: 16;
  }

  /* S */
  .c-txt--s {
    --txt-font-size: 14;
  }
  .c-txt--xs {
    --txt-font-size: 12;
  }
  .c-txt--xxs {
    --txt-font-size: 11;
  }
  .c-txt--xxxs {
    --txt-font-size: 10;
  }

  
  /* only SP */
  /* L */
  .c-txt--xxxxl-sp {
    --txt-font-size: 36;
  }
  .c-txt--xxxl-sp {
    --txt-font-size: 28;
  }
  .c-txt--xxl-sp {
    --txt-font-size: 24;
  }
  .c-txt--xl-sp {
    --txt-font-size: 20;
  }
  .c-txt--l-sp {
    --txt-font-size: 18;
  }

  /* M */
  .c-txt--m-sp {
    --txt-font-size: 16;
  }

  /* S */
  .c-txt--s-sp {
    --txt-font-size: 14;
  }
  .c-txt--xms-sp{
    --txt-font-size: 13;
  }
  .c-txt--xs-sp {
    --txt-font-size: 12;
  }
  .c-txt--xxs-sp {
    --txt-font-size: 11;
  }
  .c-txt--xxxs-sp {
    --txt-font-size: 10;
  }

}
/* --------------------------------------------------------------------------
  テキスト 番号強調
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
}
@media screen and (max-width: 767px) {
}
/* --------------------------------------------------------------------------
  リスト テキスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-list {
    --list-font-size: 16;
    --list-line-height: 1.6;
  }
  .c-list--desc {
    --list-desc-color: var(--primary-color-500);
  }
  .c-list-item {
    position: relative;
    display: flex;
    font-size: calc(var(--list-font-size) / var(--font-size) * 1rem);
    line-height: var(--list-line-height);
  }
  .c-list-item + .c-list-item{
    margin-top: calc((var(--list-font-size) / 2) / var(--font-size) * 1rem);
  }
  .c-list--margin-none .c-list-item + .c-list-item{
    margin-top: 0;
  }
  .c-list-item::before {
    content: "・";
  }
  .c-list--desc .c-list-item::before {
    content: "";
    display: block;
    width: calc((var(--list-font-size) - 4) / var(--font-size) * 1rem);
    height: calc((var(--list-font-size) - 4) / var(--font-size) * 1rem);
    border-radius: calc(4 / var(--font-size) * 1rem);
    background-color: var(--list-desc-color);
    margin-top: calc(((var(--list-font-size) + 3) * var(--list-line-height) - var(--list-font-size)) / 2 / var(--font-size) * 1rem);
    margin-right: calc(6 * var(--list-font-size) / var(--font-size) / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .c-list--none .c-list-item::before,
  .c-list--num .c-list-item::before {
    content: "";
    display: none;
  }
  .c-list-item__ico {
    margin-right: calc(5 / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .c-list--num .c-list-item__ico {
    width: auto;
  }
  .c-list-item__in {
  }

  /* L */
  .c-list--l {
    --list-font-size: 18;
  }
  /* m */
  .c-list--m {
    --list-font-size: 16;
  }
  /* s */
  .c-list--s {
    --list-font-size: 14;
  }
  /* xs */
  .c-list--xs {
    --list-font-size: 12;
  }
}
@media screen and (max-width: 767px) {
  .c-list {
    --list-font-size: 16;
    --list-line-height: 1.6;
  }
  .c-list--desc {
    --list-desc-color: var(--primary-color-500);
  }
  .c-list-item {
    position: relative;
    display: flex;
    font-size: calc(var(--list-font-size) / var(--font-size) * 1rem);
    line-height: var(--list-line-height);
  }
  .c-list-item + .c-list-item{
    margin-top: calc((var(--list-font-size) / 2) / var(--font-size) * 1rem);
  }
  .c-list--margin-none .c-list-item + .c-list-item{
    margin-top: 0;
  }
  .c-list-item::before {
    content: "・";
  }
  .c-list--desc .c-list-item::before {
    content: "";
    display: block;
    width: calc((var(--list-font-size) - 4) / var(--font-size) * 1rem);
    height: calc((var(--list-font-size) - 4) / var(--font-size) * 1rem);
    border-radius: calc(4 / var(--font-size) * 1rem);
    background-color: var(--list-desc-color);
    margin-top: calc(((var(--list-font-size) + 3) * var(--list-line-height) - var(--list-font-size)) / 2 / var(--font-size) * 1rem);
    margin-right: calc(6 * var(--list-font-size) / var(--font-size) / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .c-list--none .c-list-item::before,
  .c-list--num .c-list-item::before {
    content: "";
    display: none;
  }
  .c-list-item__ico {
    margin-right: calc(5 / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .c-list--num .c-list-item__ico {
    width: auto;
  }
  .c-list-item__in {
  }

  /* L */
  .c-list--l {
    --list-font-size: 18;
  }
  /* m */
  .c-list--m {
    --list-font-size: 16;
  }
  /* s */
  .c-list--s {
    --list-font-size: 14;
  }
  /* xs */
  .c-list--xs {
    --list-font-size: 12;
  }

  /* L */
  .c-list--l-sp {
    --list-font-size: 18;
  }
  /* m */
  .c-list--m-sp {
    --list-font-size: 16;
  }
  /* s */
  .c-list--s-sp {
    --list-font-size: 14;
  }
  /* xs */
  .c-list--xs-sp {
    --list-font-size: 12;
  }

}
/* --------------------------------------------------------------------------
  番号付きリスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-num-list {
    --num-list-font-size: 16;
    --num-list-color: var(--primary-color-500);
  }
  .c-num-list__dl {
    position: relative;
    padding-left: 2rem;
  }
  .c-num-list__dt {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.95em;
    color: var(--white-color);
    font-weight: bold;
    font-size: 0.75rem;
    line-height: 1.95;
    text-align: center;
    background-color:  var(--num-list-color);
    border-radius: 9999px;
  }
  .c-num-list__dd {
    line-height: 1.5;
    font-size: calc(var(--num-list-font-size) / var(--font-size) * 1rem);
  }
}
@media screen and (max-width: 767px) {
  .c-num-list {
    --num-list-font-size: 16;
    --num-list-color: var(--primary-color-500);
  }
  .c-num-list__dl {
    position: relative;
    padding-left: 2rem;
  }
  .c-num-list__dt {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.95em;
    color: var(--white-color);
    font-weight: bold;
    font-size: 0.75rem;
    line-height: 1.95;
    text-align: center;
    background-color:  var(--num-list-color);
    border-radius: 9999px;
  }
  .c-num-list__dd {
    line-height: 1.5;
    font-size: calc(var(--num-list-font-size) / var(--font-size) * 1rem);
  }
}
/* --------------------------------------------------------------------------
  説明リスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-descript-list {
    --descript-font-size: 16;
    --descript-dt-width: 130;
  }
  .c-txt + .c-descript-list {
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .c-descript-list__dl {
    display: flex;
    font-size: calc(var(--descript-font-size) / var(--font-size) * 1rem);
    line-height: 1.5;
  }
  .c-descript-list__dl + .c-descript-list__dl {
    margin-top: calc(10 / var(--font-size) * 1rem);
  }
  .c-descript-list__dt {
    flex-shrink: 0;
    font-weight: bold;
    margin-right: calc(10 / var(--font-size) * 1rem);
    width: calc(var(--descript-dt-width) / var(--font-size) * 1rem);
  }
  .c-descript-list__dd {
  }

  /* size */
  .c-descript-list--m {
    --descript-font-size: 16;
  }

  /* width */
  .c-descript-list--w-middle {
    --descript-dt-width: 180;
  }
}
@media screen and (max-width: 767px) {
  .c-descript-list {
    --descript-font-size: 16;
    --descript-dt-width: 130;
  }
  .c-txt + .c-descript-list {
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .c-descript-list__dl {
    display: flex;
    font-size: calc(var(--descript-font-size) / var(--font-size) * 1rem);
    line-height: 1.5;
    flex-direction: column;
  }
  .c-descript-list__dl + .c-descript-list__dl {
    margin-top: calc(10 / var(--font-size) * 1rem);
  }
  .c-descript-list__dt {
    flex-shrink: 0;
    font-weight: bold;
    margin-right: calc(10 / var(--font-size) * 1rem);
    width: calc(var(--descript-dt-width) / var(--font-size) * 1rem);
  }
  .c-descript-list__dd {
  }

  /* size */
  .c-descript-list--m {
    --descript-font-size: 16;
  }

  /* width */
  .c-descript-list--w-middle {
    --descript-dt-width: 180;
  }
}
/* --------------------------------------------------------------------------
  注釈 テキスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-note {
    --note-txt-font-size: 16;
    --note-position: start;
  }
  .c-note-txt {
    font-size: calc(var(--note-txt-font-size) / var(--font-size) * 1rem);
    display: flex;
    justify-content: var(--note-position);
    line-height: 1.5;
  }
  .c-note-txt::before {
    content: "※";
  }
  .c-note-txt__label {
  }

  /* CENTER */
  .c-note--center {
    --note-position: center;
  }

  /* M */
  .c-note--m {
    --note-txt-font-size: 16;
  }
  /* MS */
  .c-note--ms {
    --note-txt-font-size: 15;
  }
  /* S */
  .c-note--s {
    --note-txt-font-size: 14;
  }
  /* XS */
  .c-note--xs {
    --note-txt-font-size: 12;
  }
  /* XXS */
  .c-note--xxs {
    --note-txt-font-size: 11;
  }
  /* XXXS */
  .c-note--xxxs {
    --note-txt-font-size: 10;
  }

}
@media screen and (max-width: 767px) {
  .c-note {
    --note-txt-font-size: 16;
    --note-position: start;
  }
  .c-note-txt {
    font-size: calc(var(--note-txt-font-size) / var(--font-size) * 1rem);
    display: flex;
    justify-content: var(--note-position);
    line-height: 1.5;
  }
  .c-note-txt::before {
    content: "※";
  }
  .c-note-txt__label {
  }

  /* CENTER */
  .c-note--center {
    --note-position: center;
  }

  /* M */
  .c-note--m {
    --note-txt-font-size: 16;
  }
  /* MS */
  .c-note--ms {
    --note-txt-font-size: 15;
  }
  /* S */
  .c-note--s {
    --note-txt-font-size: 14;
  }
  /* XS */
  .c-note--xs {
    --note-txt-font-size: 12;
  }
  /* XXS */
  .c-note--xxs {
    --note-txt-font-size: 11;
  }
  /* XXXS */
  .c-note--xxxs {
    --note-txt-font-size: 10;
  }

  /* M */
  .c-note--m-sp {
    --note-txt-font-size: 16;
  }
  /* MS */
  .c-note--ms-sp {
    --note-txt-font-size: 15;
  }
  /* S */
  .c-note--s-sp {
    --note-txt-font-size: 14;
  }
  /* XS */
  .c-note--xs-sp {
    --note-txt-font-size: 12;
  }
  /* XXS */
  .c-note--xxs-sp {
    --note-txt-font-size: 11;
  }
  /* XXXS */
  .c-note--xxxs-sp {
    --note-txt-font-size: 10;
  }

}


/* ==========================================================================
  BUTTON COMPONENT
========================================================================== */

/* --------------------------------------------------------------------------
  レイアウト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-btn-list {
    --col: 1;
    --gap-x: 32;
    --gap-y: 32;
    display: flex;
    gap: calc(var(--gap-y) / var(--font-size) * 1rem) calc(var(--gap-x) / var(--font-size) * 1rem);
    flex-wrap: wrap;
  }
  .c-btn-list-item {
    width: calc((100% - var(--gap-x) / var(--font-size) * 1rem * (var(--col) - 1)) / var(--col));
  }

  /* postion */
  .c-btn-list--center {
    justify-content: center;
  }
  .c-btn-list--right{
    justify-content: flex-end;
  }

  /* col */
  .c-btn-list--2col {
    --col: 2;
  }
  .c-btn-list--3col {
    --col: 3;
  }
  .c-btn-list--4col {
    --col: 4;
  }
  .c-btn-list--5col {
    --col: 5;
  }

  /* width */
  .c-btn-list-item--s{
    width: calc(120 / var(--font-size) * 1rem);
  }
  .c-btn-list-item--m{
    width: calc(174 / var(--font-size) * 1rem);
  }
  .c-btn-list-item--l{
    width: calc(255 / var(--font-size) * 1rem);
  }
  .c-btn-list-item--xl{
    width: calc(320 / var(--font-size) * 1rem);
  }
  .c-btn-list-item--xxl{
    width: calc(424 / var(--font-size) * 1rem);
  }
  .c-btn-list-item--auto{
    width: initial;
  }

  .c-btn-list-item__date{
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
}
@media screen and (max-width: 767px) {
  .c-btn-list {
    --col: 1;
    --gap-x: 32;
    --gap-y: 32;
    display: flex;
    gap: calc(var(--gap-y) / var(--font-size) * 1rem) calc(var(--gap-x) / var(--font-size) * 1rem);
    flex-wrap: wrap;
  }
  .c-btn-list-item {
    width: calc((100% - var(--gap-x) / var(--font-size) * 1rem * (var(--col) - 1)) / var(--col));
  }

  /* postion */
  .c-btn-list--center {
    justify-content: center;
  }
  .c-btn-list--right{
    justify-content: flex-end;
  }

  /* col */
  .c-btn-list--2col {
    --col: 2;
  }
  .c-btn-list--3col {
    --col: 3;
  }
  .c-btn-list--4col {
    --col: 4;
  }
  .c-btn-list--5col {
    --col: 5;
  }

  /* width */
  .c-btn-list-item--s{
    width: 100%;
    max-width: calc(120 / var(--font-size) * 1rem);
  }
  .c-btn-list-item--m{
    width: 100%;
    max-width: calc(164 / var(--font-size) * 1rem);
  }
  .c-btn-list-item--l{
    width: 100%;
    max-width: calc(255 / var(--font-size) * 1rem);
  }
  .c-btn-list-item--xl{
    width: 100%;
    max-width: calc(220 / var(--font-size) * 1rem);
  }
  .c-btn-list-item--xxl{
    width: 100%;
    max-width: calc(240 / var(--font-size) * 1rem);
  }
  .c-btn-list-item--auto{
    width: initial;
    max-width: initial;
  }

  .c-btn-list-item__date{
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
}
/* --------------------------------------------------------------------------
  ボタン
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-btn {
    --btn-bg-color: var(--primary-color-500);
    --btn-border-color: var(--primary-color-500);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--btn-bg-color);
    --btn-bg-arrow-color: var(--white-color);
    --btn-txt-font-size: 16;
    --btn-min-height: 64;
    --btn-px: 19;
    --btn-ico-size: 19;
    --btn-radius: 16;

    display: block;
    width: 100%;
  }
 
.c-btn--secondary{
 --btn-bg-color: var(--secondary-color-500);
 --btn-border-color: var(--secondary-color-500);
}
.c-btn--tertiary{
 --btn-bg-color: var(--tertiary-color-500);
 --btn-border-color: var(--tertiary-color-500);
}
  .c-btn[disabled]{
      pointer-events: none;
    --btn-bg-color: var(--gray-color-300);
    --btn-border-color: var(--gray-color-300);
	--btn-txt-font-size: 20;  
  }
  .c-btn:hover {
    --btn-bg-color: var(--white-color);
    --btn-txt-color: var(--btn-border-color);
    --btn-arrow-color: var(--btn-bg-color);
    --btn-bg-arrow-color: var(--btn-border-color);
  }
  .c-btn__in {
    background-color: var(--btn-bg-color);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
    border: calc(1 / var(--font-size) * 1rem) solid var(--btn-border-color);
    height: 100%;
    transition: all 0.2s;
  }
  .c-btn__body {
    position: relative;
    min-height: calc(var(--btn-min-height) / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(8 / var(--font-size) * 1rem) calc(var(--btn-px) / var(--font-size) * 1rem);
  }
  .c-btn:has(.c-btn-arrow) .c-btn__body {
    padding: calc(8 / var(--font-size) * 1rem) calc((var(--btn-px) + (var(--btn-px) / 2)) / var(--font-size) * 1rem) calc(8 / var(--font-size) * 1rem) calc(var(--btn-px) / var(--font-size) * 1rem);
  }
  .c-btn-txt {
    color: var(--btn-txt-color);
    text-align: center;
    width: 100%;
    transition: all 0.2s;
  }
  .c-btn-txt__label {
    font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 1.5;
  }
  .c-btn-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    flex-shrink: 0;
    width: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
    height: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
    margin-right: calc(var(--btn-px) / var(--font-size) * 1rem);
  }
  .c-btn-arrow__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .c-btn-arrow__label .c-svg {
    width: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
    fill: var(--btn-bg-arrow-color);
    transition: all 0.2s;
  }

  /* square */
  .c-btn--square {
    --btn-radius: 8;
  }

  /* fontsize */
  .c-btn--xxxl {
    --btn-txt-font-size: 24;
    --btn-min-height: 80;
  }
  .c-btn--xxl {
    --btn-txt-font-size: 20;
    --btn-min-height: 80;
  }
  .c-btn--xl {
    --btn-txt-font-size: 18;
  }
  .c-btn--l {
    --btn-txt-font-size: 16;
    --btn-min-height: 88;
  }
  .c-btn--m {
    --btn-txt-font-size: 16;
  }
  .c-btn--s {
    --btn-txt-font-size: 14;
    --btn-min-height: 40;
    --btn-radius: 8;
    --btn-px: 15;
    --btn-ico-size: 15;
  }
  .c-btn--xs {
    --btn-txt-font-size: 12;
    --btn-min-height: 32;
    --btn-radius: 6;
    --btn-px: 12;
    --btn-ico-size: 12;
  }

  /* color */
  .c-btn--stroke {
    --btn-bg-color: var(--white-color);
    --btn-txt-color: var(--btn-border-color);
    --btn-arrow-color: var(--btn-border-color);
  }
  .c-btn--stroke:hover {
    --btn-bg-color: var(--btn-border-color);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
  }

  .c-btn--white {
    --btn-bg-color: var(--white-color);
    --btn-txt-color: var(--gray-color-500);
    --btn-arrow-color: var(--gray-color-500);
  }

  /* back */
  .c-btn--back .c-btn-arrow {
    left: 0;
    right: unset;
    transform: translateY(-50%) rotate(180deg);
    margin-right: initial;
    margin-left: calc(var(--btn-px) / var(--font-size)* 1rem);
  }
  .c-btn--back:has(.c-btn-arrow) .c-btn__body{
    padding: calc(8 / var(--font-size)* 1rem) calc(var(--btn-px) / var(--font-size)* 1rem) calc(8 / var(--font-size)* 1rem) calc((var(--btn-px) + var(--btn-px)) / var(--font-size)* 1rem);
  }

  /* disable */
  .c-btn--disable {
    --btn-bg-color: var(--gray-color-100);
    --btn-border-color: var(--gray-color-100);
    --btn-txt-color: var(--gray-color-600);
    --btn-bg-arrow-color: var(--gray-color-600);
    pointer-events: none;
  }
  .c-btn--disable--border{
    --btn-border-color: var(--gray-color-600);
  }

  /* center */
  .c-btn--center .c-btn-arrow {
    position: initial;
    top: initial;
    right: initial;
    transform: initial;
    margin-right: initial;
    margin-left: initial;
  }
  .c-btn--center .c-btn-txt{
    width: auto;
  }
  .c-btn--center .c-btn__body{
    gap: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
  }
  .c-btn--center.c-btn--back .c-btn__body{
    flex-direction: row-reverse;
  }
  .c-btn--center.c-btn--back .c-btn-arrow {
    position: relative;
    transform: rotate(180deg);
    margin-right: initial;
    margin-left: initial;
  }
  .c-btn--center:has(.c-btn-arrow) .c-btn__body {
    padding: calc(8 / var(--font-size) * 1rem) calc(var(--btn-px) / var(--font-size) * 1rem) calc(8 / var(--font-size) * 1rem);
  }
}
@media screen and (max-width: 767px) {
  .c-btn {
    --btn-bg-color: var(--primary-color-500);
    --btn-border-color: var(--primary-color-500);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--btn-bg-color);
    --btn-bg-arrow-color: var(--white-color);
    --btn-txt-font-size: 16;
    --btn-min-height: 56;
    --btn-px: 16;
    --btn-ico-size: 16;
    --btn-radius: 12;

    display: block;
    width: 100%;
  }
 

.c-btn--secondary{
 --btn-bg-color: var(--secondary-color-500);
 --btn-border-color: var(--secondary-color-500);
}
.c-btn--tertiary{
 --btn-bg-color: var(--tertiary-color-500);
 --btn-border-color: var(--tertiary-color-500);
}
  .c-btn[disabled]{
      pointer-events: none;
    --btn-bg-color: var(--gray-color-300);
    --btn-border-color: var(--gray-color-300);
  }
  .c-btn:hover {
    --btn-bg-color: var(--white-color);
    --btn-txt-color: var(--btn-border-color);
    --btn-arrow-color: var(--btn-bg-color);
    --btn-bg-arrow-color: var(--btn-border-color);
  }
  .c-btn__in {
    background-color: var(--btn-bg-color);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
    border: calc(1 / var(--font-size) * 1rem) solid var(--btn-border-color);
    height: 100%;
    transition: all 0.2s;
  }
  .c-btn__body {
    position: relative;
    min-height: calc(var(--btn-min-height) / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(8 / var(--font-size) * 1rem) calc(var(--btn-px) / var(--font-size) * 1rem);
  }
  .c-btn:has(.c-btn-arrow) .c-btn__body {
    padding: calc(8 / var(--font-size) * 1rem) calc((var(--btn-px) + (var(--btn-px) / 2)) / var(--font-size) * 1rem) calc(8 / var(--font-size) * 1rem) calc(var(--btn-px) / var(--font-size) * 1rem);
  }
  .c-btn-txt {
    color: var(--btn-txt-color);
    text-align: center;
    width: 100%;
    transition: all 0.2s;
  }
  .c-btn-txt__label {
    font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 1.5;
  }
  .c-btn-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    flex-shrink: 0;
    width: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
    height: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
    margin-right: calc(var(--btn-px) / var(--font-size) * 1rem);
  }
  .c-btn-arrow__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .c-btn-arrow__label .c-svg {
    width: calc(var(--btn-ico-size) / var(--font-size) * 1rem);
    fill: var(--btn-bg-arrow-color);
    transition: all 0.2s;
  }

  /* square */
  .c-btn--square {
    --btn-radius: 8;
  }

  /* fontsize */
  .c-btn--xxxl {
    --btn-txt-font-size: 18;
    --btn-min-height: 62;
  }
  .c-btn--xxl {
    --btn-txt-font-size: 16;
    --btn-min-height: 62;
  }
  .c-btn--xl {
    --btn-txt-font-size: 16;
    --btn-min-height: 54;
  }
  .c-btn--l {
    --btn-txt-font-size: 16;
    --btn-min-height: 88;
  }
  .c-btn--m {
    --btn-txt-font-size: 16;
  }
  .c-btn--s {
    --btn-txt-font-size: 14;
    --btn-min-height: 40;
    --btn-radius: 6;
    --btn-px: 13;
    --btn-ico-size: 13;
  }
  .c-btn--xs {
    --btn-txt-font-size: 12;
    --btn-min-height: 32;
    --btn-radius: 6;
    --btn-px: 12;
    --btn-ico-size: 12;
  }

  /* color */
  .c-btn--stroke {
    --btn-bg-color: var(--white-color);
    --btn-txt-color: var(--btn-border-color);
    --btn-arrow-color: var(--btn-border-color);
  }
  .c-btn--stroke:hover {
    --btn-bg-color: var(--btn-border-color);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
  }

  .c-btn--white {
    --btn-bg-color: var(--white-color);
    --btn-txt-color: var(--gray-color-500);
    --btn-arrow-color: var(--gray-color-500);
  }

  /* back */
  .c-btn--back .c-btn-arrow {
    left: 0;
    right: unset;
    transform: translateY(-50%) rotate(180deg);
    margin-right: initial;
    margin-left: calc(var(--btn-px) / var(--font-size)* 1rem);
  }
  .c-btn--back:has(.c-btn-arrow) .c-btn__body{
    padding: calc(8 / var(--font-size)* 1rem) calc(var(--btn-px) / var(--font-size)* 1rem) calc(8 / var(--font-size)* 1rem) calc((var(--btn-px) + var(--btn-px)) / var(--font-size)* 1rem);
  }

  /* disable */
  .c-btn--disable {
    --btn-bg-color: var(--gray-color-100);
    --btn-border-color: var(--gray-color-100);
    --btn-txt-color: var(--gray-color-600);
    --btn-bg-arrow-color: var(--gray-color-600);
    pointer-events: none;
  }
  .c-btn--disable--border{
    --btn-border-color: var(--gray-color-600);
  }

  /* center */
  .c-btn--center .c-btn-arrow {
    position: initial;
    top: initial;
    right: initial;
    transform: initial;
    margin-right: initial;
    margin-left: initial;
  }
  .c-btn--center .c-btn-txt{
    width: auto;
  }
  .c-btn--center .c-btn__body{
    gap: calc((var(--btn-ico-size) / 2) / var(--font-size) * 1rem);
  }
  .c-btn--center.c-btn--back .c-btn__body{
    flex-direction: row-reverse;
  }
  .c-btn--center.c-btn--back .c-btn-arrow {
    position: relative;
    transform: rotate(180deg);
    margin-right: initial;
    margin-left: initial;
  }
  .c-btn--center:has(.c-btn-arrow) .c-btn__body {
    padding: calc(8 / var(--font-size) * 1rem) calc(var(--btn-px) / var(--font-size) * 1rem) calc(8 / var(--font-size) * 1rem);
  }
}
/* --------------------------------------------------------------------------
  ダウンロードボタン
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-doc-btn {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--gray-color-600);
    --btn-ico-color: var(--gray-color-600);
    --btn-txt-color: var(--gray-color-600);
    --btn-dl-color: var(--gray-color-600);
    --btn-txt-font-size: 18;
    --btn-radius: 12;
  }
  .c-doc-btn[disabled]{
    pointer-events: none;
    filter: grayscale(1) contrast(0.85);
  }
  .c-doc-btn:hover {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--primary-color-500);
    --btn-ico-color: var(--white-color);
    --btn-txt-color: var(--primary-color-500);
    --btn-dl-color: var(--primary-color-500);
  }
  .c-doc-btn__in {
    background-color: var(--btn-bg-color);
    border: calc(1 / var(--font-size) * 1rem) solid var(--btn-border-color);
    padding: calc(20 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
    transition: all 0.2s;
  }
  .c-doc-btn__body {
    display: flex;
    align-items: center;
  }
  .c-doc-btn-ico {
    width: calc(23 / var(--font-size) * 1rem);
    height: calc(23 / var(--font-size) * 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: calc(8 / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .c-doc-btn-ico__label {
    width: calc(20 / var(--font-size) * 1rem);
  }
  .c-doc-btn-ico__label svg {
    fill: var(--btn-ico-color);
    transition: all 0.2s;
  }
  .c-doc-btn-txt {
    width: 100%;
  }
  .c-doc-btn-txt__label {
    font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1rem);
    line-height: 1.5;
    font-weight: bold;
    color: var(--btn-txt-color);
    transition: all 0.2s;
  }
  .c-doc-btn-dl {
    margin-left: calc(24 / var(--font-size) * 1rem);
    width: calc(20 / var(--font-size) * 1rem);
    height: calc(20 / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: all 0.2s;
  }
  .c-doc-btn-dl__label {
    width: calc(20 / var(--font-size) * 1rem);
  }
  .c-doc-btn-dl__label svg {
    fill: var(--btn-dl-color);
    transition: all 0.2s;
  }

  /* サイズ */
  .c-doc-btn--xl {
    --btn-txt-font-size: 22;
  }
  .c-doc-btn--l {
    --btn-txt-font-size: 20;
  }
  .c-doc-btn--m {
    --btn-txt-font-size: 18;
  }
  .c-doc-btn--s {
    --btn-txt-font-size: 16;
  }
  .c-doc-btn--xs {
    --btn-txt-font-size: 14;
  }
}
@media screen and (max-width: 767px) {
  .c-doc-btn {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--gray-color-600);
    --btn-ico-color: var(--gray-color-600);
    --btn-txt-color: var(--gray-color-600);
    --btn-dl-color: var(--gray-color-600);
    --btn-txt-font-size: 18;
    --btn-radius: 12;
  }
  .c-doc-btn[disabled]{
    pointer-events: none;
    filter: grayscale(1) contrast(0.85);
  }
  .c-doc-btn:hover {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--primary-color-500);
    --btn-ico-color: var(--white-color);
    --btn-txt-color: var(--primary-color-500);
    --btn-dl-color: var(--primary-color-500);
  }
  .c-doc-btn__in {
    background-color: var(--btn-bg-color);
    border: calc(1 / var(--font-size) * 1rem) solid var(--btn-border-color);
    padding: calc(12 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
    transition: all 0.2s;
  }
  .c-doc-btn__body {
    display: flex;
    align-items: center;
  }
  .c-doc-btn-ico {
    width: calc(23 / var(--font-size) * 1rem);
    height: calc(23 / var(--font-size) * 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: calc(8 / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .c-doc-btn-ico__label {
    width: calc(20 / var(--font-size) * 1rem);
  }
  .c-doc-btn-ico__label svg {
    fill: var(--btn-ico-color);
    transition: all 0.2s;
  }
  .c-doc-btn-txt {
    width: 100%;
  }
  .c-doc-btn-txt__label {
    font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1rem);
    line-height: 1.5;
    font-weight: bold;
    color: var(--btn-txt-color);
    transition: all 0.2s;
  }
  .c-doc-btn-dl {
    margin-left: calc(24 / var(--font-size) * 1rem);
    width: calc(20 / var(--font-size) * 1rem);
    height: calc(20 / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: all 0.2s;
  }
  .c-doc-btn-dl__label {
    width: calc(20 / var(--font-size) * 1rem);
  }
  .c-doc-btn-dl__label svg {
    fill: var(--btn-dl-color);
    transition: all 0.2s;
  }

  /* サイズ */
  .c-doc-btn--xl {
    --btn-txt-font-size: 22;
  }
  .c-doc-btn--l {
    --btn-txt-font-size: 20;
  }
  .c-doc-btn--m {
    --btn-txt-font-size: 18;
  }
  .c-doc-btn--s {
    --btn-txt-font-size: 16;
  }
  .c-doc-btn--xs {
    --btn-txt-font-size: 14;
  }

  .c-doc-btn--sp-xxs{
    --btn-txt-font-size: 13;
  }
}

/* --------------------------------------------------------------------------
  アイコンボタン
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-ico-btn {
    --btn-base-color: var(--primary-color-500);
    --btn-bg-color: var(--primary-color-300);
    --btn-border-color: var(--primary-color-300);
    --btn-txt-color: var(--btn-base-color);
    --btn-arrow-color: var(--btn-base-color);
    --btn-txt-font-size: 22;
    --btn-min-height: 136;
    --btn-px: 24;
    --btn-ico-size: 12;
    --btn-radius: 16;
    --btn-rate: var(--btn-txt-font-size) / 22;

    display: block;
    width: 100%;
  }
  .c-ico-btn:hover {
    --btn-border-color: var(--btn-base-color);
    --btn-bg-color: var(--btn-base-color);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
  }
  .c-ico-btn__in {
    background-color: var(--btn-bg-color);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
    border: calc(1 / var(--font-size) * 1rem) solid var(--btn-border-color);
    height: 100%;
    transition: all 0.2s;
  }
  .c-ico-btn__body {
    position: relative;
    min-height: calc(var(--btn-min-height) * var(--btn-rate) / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(20 * var(--btn-rate) / var(--font-size) * 1rem) calc(var(--btn-px) * var(--btn-rate) / var(--font-size) * 1rem);
  }
  .c-ico-btn-img {
    width: calc(96 * var(--btn-rate) / var(--font-size) * 1rem);
    height: calc(96 * var(--btn-rate) / var(--font-size) * 1rem);
    background-color: var(--white-color);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
    flex-shrink: 0;
    margin-right: calc(24 * var(--btn-rate) / var(--font-size) * 1rem);
  }
  .c-ico-btn-img__label {
  }
  .c-ico-btn-txt {
    color: var(--btn-txt-color);
    text-align: left;
    width: 100%;
    transition: all 0.2s;
  }
  .c-ico-btn-txt__sub-label {
    font-size: calc(15 * var(--btn-rate) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 1.5;
    display: block;
    margin-bottom: calc(4 * var(--btn-rate) / var(--font-size) * 1rem);
  }
  .c-ico-btn-txt__label {
    font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 1.5;
  }
  .c-ico-btn-arrow {
    width: calc(26 * var(--btn-rate) / var(--font-size) * 1rem);
    height: calc(26 * var(--btn-rate) / var(--font-size) * 1rem);
    border: var(--btn-arrow-color) calc(1 / var(--font-size) * 1rem) solid;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s;
  }
  .c-ico-btn-arrow__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .c-ico-btn-arrow__label .c-svg {
    width: calc(var(--btn-ico-size) * var(--btn-rate) / var(--font-size) * 1rem);
    fill: var(--btn-arrow-color);
    transition: all 0.2s;
  }

  /* color */
  .c-ico-btn--introduction {
    --btn-base-color: var(--other-primary-color-500);
    --btn-bg-color: var(--other-primary-color-200);
    --btn-border-color: var(--other-primary-color-200);
  }

  /* size */
  .c-ico-btn--l {
    --btn-txt-font-size: 24;
  }
  .c-ico-btn--m {
    --btn-txt-font-size: 22;
  }
  .c-ico-btn--s {
    --btn-txt-font-size: 18;
  }
  .c-ico-btn--xs {
    --btn-txt-font-size: 16;
  }
  .c-ico-btn--xxs {
    --btn-txt-font-size: 14;
  }
}
@media screen and (max-width: 767px) {
  .c-ico-btn {
    --btn-base-color: var(--primary-color-500);
    --btn-bg-color: var(--primary-color-300);
    --btn-border-color: var(--primary-color-300);
    --btn-txt-color: var(--btn-base-color);
    --btn-arrow-color: var(--btn-base-color);
    --btn-txt-font-size: 22;
    --btn-min-height: 136;
    --btn-px: 24;
    --btn-ico-size: 12;
    --btn-radius: 16;
    --btn-rate: var(--btn-txt-font-size) / 22;

    display: block;
    width: 100%;
  }
  .c-ico-btn:hover {
    --btn-border-color: var(--btn-base-color);
    --btn-bg-color: var(--btn-base-color);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
  }
  .c-ico-btn__in {
    background-color: var(--btn-bg-color);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
    border: calc(1 / var(--font-size) * 1rem) solid var(--btn-border-color);
    height: 100%;
    transition: all 0.2s;
  }
  .c-ico-btn__body {
    position: relative;
    min-height: calc(var(--btn-min-height) * var(--btn-rate) / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(20 * var(--btn-rate) / var(--font-size) * 1rem) calc(var(--btn-px) * var(--btn-rate) / var(--font-size) * 1rem);
  }
  .c-ico-btn-img {
    width: calc(96 * var(--btn-rate) / var(--font-size) * 1rem);
    height: calc(96 * var(--btn-rate) / var(--font-size) * 1rem);
    background-color: var(--white-color);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
    flex-shrink: 0;
    margin-right: calc(24 * var(--btn-rate) / var(--font-size) * 1rem);
  }
  .c-ico-btn-img__label {
  }
  .c-ico-btn-txt {
    color: var(--btn-txt-color);
    text-align: left;
    width: 100%;
    transition: all 0.2s;
  }
  .c-ico-btn-txt__sub-label {
    font-size: calc(15 * var(--btn-rate) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 1.5;
    display: block;
    margin-bottom: calc(4 * var(--btn-rate) / var(--font-size) * 1rem);
  }
  .c-ico-btn-txt__label {
    font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 1.5;
  }
  .c-ico-btn-arrow {
    width: calc(26 * var(--btn-rate) / var(--font-size) * 1rem);
    height: calc(26 * var(--btn-rate) / var(--font-size) * 1rem);
    border: var(--btn-arrow-color) calc(1 / var(--font-size) * 1rem) solid;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s;
  }
  .c-ico-btn-arrow__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .c-ico-btn-arrow__label .c-svg {
    width: calc(var(--btn-ico-size) * var(--btn-rate) / var(--font-size) * 1rem);
    fill: var(--btn-arrow-color);
    transition: all 0.2s;
  }

  /* color */
  .c-ico-btn--introduction {
    --btn-base-color: var(--other-primary-color-500);
    --btn-bg-color: var(--other-primary-color-200);
    --btn-border-color: var(--other-primary-color-200);
  }

  /* size */
  .c-ico-btn--l {
    --btn-txt-font-size: 24;
  }
  .c-ico-btn--m {
    --btn-txt-font-size: 22;
  }
  .c-ico-btn--s {
    --btn-txt-font-size: 18;
  }
  .c-ico-btn--xs {
    --btn-txt-font-size: 16;
  }
  .c-ico-btn--xxs {
    --btn-txt-font-size: 14;
  }
}

/* --------------------------------------------------------------------------
  テキストボタン
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-link-btn {
    --link-arrow-color: var(--primary-color-500);
    --link-txt-color: var(--black-color);
    --link-font-size: 16;
    display: inline-block;
    vertical-align: text-top;
  }
  a.c-link-btn:hover {
    --link-txt-color: var(--link-arrow-color);
  }
  .c-link-btn__in{
    display: flex;
    align-items: center;
    gap: calc(4 / var(--font-size) * 1rem);
  }
  .c-link-btn-ico {
    width: calc(16 / var(--font-size) * 1rem);
    height: calc(16 / var(--font-size) * 1rem);
    display: inline-block;
  }
  .c-link-btn-ico__label {
    display: flex;
    justify-content: center;
    align-self: center;
    height: 100%;
  }
  .c-link-btn-ico__label svg {
    fill: var(--link-arrow-color);
  }
  .c-link-btn-txt {
    display: inline-block;
  }
  .c-link-btn-txt__label {
    font-size: calc(var(--link-font-size) / var(--font-size) * 1rem);
    color: var(--link-txt-color);
    transition: all 0.2s;
    display: inline-block;
    text-decoration: underline;
  }
  .c-link-btn-txt__ico {
    display: inline-block;
    width: calc(24 * var(--link-font-size) / 14 / var(--font-size) * 1rem);
    vertical-align: text-top;
  }
  .c-link-btn-txt__ico svg {
    fill: var(--link-arrow-color);
  }

  /* color */
  .c-link-btn--other {
    --link-arrow-color: var(--other-primary-color-500);
  }

  /* size */
  .c-link-btn--l {
    --link-font-size: 18;
  }
  .c-link-btn--m {
    --link-font-size: 16;
  }
  .c-link-btn--s {
    --link-font-size: 14;
  }
  .c-link-btn--xs {
    --link-font-size: 12;
  }
  .c-link-btn--xxs {
    --link-font-size: 11;
  }
}
@media screen and (max-width: 767px) {
  .c-link-btn {
    --link-arrow-color: var(--primary-color-500);
    --link-txt-color: var(--black-color);
    --link-font-size: 16;
    display: inline-block;
    vertical-align: text-top;
  }
  a.c-link-btn:hover {
    --link-txt-color: var(--link-arrow-color);
  }
  .c-link-btn__in{
    display: flex;
    align-items: center;
    gap: calc(4 / var(--font-size) * 1rem);
  }
  .c-link-btn-ico {
    width: calc(16 / var(--font-size) * 1rem);
    height: calc(16 / var(--font-size) * 1rem);
    display: inline-block;
  }
  .c-link-btn-ico__label {
    display: flex;
    justify-content: center;
    align-self: center;
    height: 100%;
  }
  .c-link-btn-ico__label svg {
    fill: var(--link-arrow-color);
  }
  .c-link-btn-txt {
    display: inline-block;
  }
  .c-link-btn-txt__label {
    font-size: calc(var(--link-font-size) / var(--font-size) * 1rem);
    color: var(--link-txt-color);
    transition: all 0.2s;
    display: inline-block;
    text-decoration: underline;
  }
  .c-link-btn-txt__ico {
    display: inline-block;
    width: calc(24 * var(--link-font-size) / 14 / var(--font-size) * 1rem);
    vertical-align: text-top;
  }
  .c-link-btn-txt__ico svg {
    fill: var(--link-arrow-color);
  }

  /* color */
  .c-link-btn--other {
    --link-arrow-color: var(--other-primary-color-500);
  }

  /* size */
  .c-link-btn--l {
    --link-font-size: 18;
  }
  .c-link-btn--m {
    --link-font-size: 16;
  }
  .c-link-btn--s {
    --link-font-size: 14;
  }
  .c-link-btn--xs {
    --link-font-size: 12;
  }
  .c-link-btn--xxs {
    --link-font-size: 11;
  }

  /* only SP */
  /* L */
  .c-link-btn--l-sp {
    --link-font-size: 18;
  }

  /* M */
  .c-link-btn--m-sp {
    --link-font-size: 16;
  }

  /* S */
  .c-link-btn--s-sp {
    --link-font-size: 14;
  }
  .c-link-btn--xs-sp {
    --link-font-size: 12;
  }
  .c-link-btn--xxs-sp {
    --link-font-size: 11;
  }
}
/* ==========================================================================
  TABLE COMPONENT
========================================================================== */
@media all and (min-width: 768px), print {
  .c-table {
  }
  * + .c-table {
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .c-table__in {
  }
  .c-table__header {
    margin-bottom: calc(10 / var(--font-size) * 1rem);
  }
  .c-table__body {
  }
  .c-table-chart {
    border-radius: calc(16 / var(--font-size) * 1rem);
    overflow: hidden;
    border: var(--white-color) calc(2 / var(--font-size) * 1rem) solid;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--tertiary-color-100);
    width: 100%;
  }
  .c-table-chart__thead {
  }
  .c-table-chart__thead + .c-table-chart__tbody {
  }
  .c-table-chart__thead + .c-table-chart__tbody .c-table-chart__tr:first-child .c-table-chart-cell{
    border-top: var(--white-color) calc(2 / var(--font-size) * 1rem) solid;
  }
  .c-table-chart__thead .c-table-chart__tr {
    text-align: left;
  }
  .c-table-chart__tr {
  }
  .c-table-chart__tr + .c-table-chart__tr .c-table-chart-cell {
    border-top: var(--white-color) calc(2 / var(--font-size) * 1rem) solid;
  }
  .c-table-chart-cell {
    padding: calc(16 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
  }
  .c-table-chart-cell + .c-table-chart-cell {
    border-left: var(--white-color) calc(2 / var(--font-size) * 1rem) solid;
  }
  .c-table__footer {
    margin-top: calc(10 / var(--font-size) * 1rem);
  }
  .c-table-chart__col-half{
    width: 50%;
  }
  .c-table-chart__col-s{
    width: calc(120 / var(--font-size) * 1rem);
  }
  .c-table-chart__col-m{
    width: calc(280 / var(--font-size) * 1rem);
  }
  .c-table-chart__col-l{
    width: calc(320 / var(--font-size) * 1rem);
  }
}
@media screen and (max-width: 767px) {
  .c-table {
  }
  .is-sp-sticky.c-table {
    margin-left: calc(-20 / var(--font-size) * 1rem);
    margin-right: calc(-20 / var(--font-size) * 1rem);
  }
  * + .c-table {
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .c-table__in {
  }
  .c-table__header {
    margin-bottom: calc(10 / var(--font-size) * 1rem);
  }
  .is-sp-sticky .c-table__header {
    padding-left: calc(20 / var(--font-size) * 1rem);
    padding-right: calc(20 / var(--font-size) * 1rem);
  }
  .c-table__body {
  }
  .is-sp-sticky .c-table__in {
    overflow-x: scroll;
  }
  .is-sp-sticky .c-table__body{
    padding-left: calc(20 / var(--font-size) * 1rem);
    padding-right: calc(20 / var(--font-size) * 1rem);
  }
  .c-table-chart {
    border-radius: calc(16 / var(--font-size) * 1rem);
    overflow: hidden;
    border: var(--white-color) calc(2 / var(--font-size) * 1rem) solid;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--tertiary-color-100);
    width: 100%;
  }
  .is-sp-sticky .c-table__body {
    min-width: calc(660 / var(--font-size) * 1rem);
  }
  .is-sp-sticky--l .c-table__body {
    min-width: calc(920 / var(--font-size) * 1rem);
  }
  .c-table-chart__thead {
  }
  .c-table-chart__thead + .c-table-chart__tbody {
  }
  .c-table-chart__thead + .c-table-chart__tbody .c-table-chart__tr:first-child .c-table-chart-cell{
    border-top: var(--white-color) calc(2 / var(--font-size) * 1rem) solid;
  }
  .c-table-chart__thead .c-table-chart__tr {
    text-align: left;
  }
  .c-table-chart__tr {
  }
  .c-table-chart__tr + .c-table-chart__tr .c-table-chart-cell {
    border-top: var(--white-color) calc(2 / var(--font-size) * 1rem) solid;
  }
  .c-table-chart-cell {
    padding: calc(13 / var(--font-size) * 1rem) calc(13 / var(--font-size) * 1rem);
  }
  .is-sp-sticky .c-table-chart-cell--sticky {
    position: sticky;
    left: 0;
  }
  .c-table-chart-cell + .c-table-chart-cell {
    border-left: var(--white-color) calc(2 / var(--font-size) * 1rem) solid;
  }
  .c-table__footer {
    margin-top: calc(10 / var(--font-size) * 1rem);
  }
  .is-sp-sticky .c-table__footer {
    padding-left: calc(20 / var(--font-size) * 1rem);
    padding-right: calc(20 / var(--font-size) * 1rem);
  }
  .c-table-chart__col-half{
    width: 50%;
  }
  .c-table-chart__col-s{
    width: calc(120 / var(--font-size) * 1rem);
  }
  .c-table-chart__col-m{
    width: calc(280 / var(--font-size) * 1rem);
  }
  .c-table-chart__col-l{
    width: calc(320 / var(--font-size) * 1rem);
  }
}


/* ==========================================================================
  BOX COMPONENT
========================================================================== */
@media all and (min-width: 768px), print {
  .c-box{
    --box-bg-color: var(--gray-color-100);
    --box-border-color: var(--gray-color-100);
    --box-radius: 16;

    display: block;
    width: 100%;
  }
  .c-box__in{
    background-color: var(--box-bg-color);
    border-radius: calc(var(--box-radius) / var(--font-size)* 1rem);
    border: calc(1 / var(--font-size)* 1rem) solid var(--box-border-color);
    height: 100%;
    padding: calc(24 / var(--font-size)* 1rem);
    transition: all 0.2s;
  }
  .c-box__header{
    margin-bottom: calc(12 / var(--font-size)* 1rem);
  }
  .c-box__header:has(.c-box-ico){
    display: flex;
  }
  .c-box--border-none{
    --box-border-color: transparent!important;
  }
  .c-box--white{
    --box-bg-color: var(--white-color);
    --box-border-color: var(--white-color);
  }
  .c-box--primary{
    --box-bg-color: var(--primary-color-100);
    --box-border-color: var(--primary-color-500);
  }
  .c-box--secondary{
    --box-bg-color: var(--secondary-color-100);
    --box-border-color: var(--secondary-color-500);
  }
 .c-box--tertiary{
    --box-bg-color: var(--tertiary-color-100);
    --box-border-color: var(--tertiary-color-500);
  }
  .c-box--red{
    --box-bg-color: #FFEFEF;
    --box-border-color: #EF2525;
  }
  .c-box--red .c-list--desc .c-list-item::before{
    background-color: #EF2525;
  }
  .c-box-ico{
    width: calc(38 / var(--font-size)* 1rem);
    height: calc(38 / var(--font-size)* 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    flex-shrink: 0;
  }
  .c-box-ico__label{
    width: calc(24 / var(--font-size)* 1rem);
  }
  .l-sec:first-child  .c-box--red{
    margin-bottom: calc(40 / var(--font-size) * 1rem);
  }
}
@media screen and (max-width: 767px) {
  .c-box{
    --box-bg-color: var(--gray-color-100);
    --box-border-color: var(--gray-color-100);
    --box-radius: 12;

    display: block;
    width: 100%;
  }
  .c-box__in{
    background-color: var(--box-bg-color);
    border-radius: calc(var(--box-radius) / var(--font-size)* 1rem);
    border: calc(1 / var(--font-size)* 1rem) solid var(--box-border-color);
    height: 100%;
    padding: calc(24 / var(--font-size)* 1rem);
    transition: all 0.2s;
  }
  .c-box__header{
    margin-bottom: calc(12 / var(--font-size)* 1rem);
  }
  .c-box__header:has(.c-box-ico){
    display: flex;
  }
  .c-box--border-none{
    --box-border-color: transparent!important;
  }
  .c-box--white{
    --box-bg-color: var(--white-color);
    --box-border-color: var(--white-color);
  }
  .c-box--primary{
    --box-bg-color: var(--primary-color-100);
    --box-border-color: var(--primary-color-500);
  }
  .c-box--secondary{
    --box-bg-color: var(--secondary-color-100);
    --box-border-color: var(--secondary-color-500);
  }
 .c-box--tertiary{
    --box-bg-color: var(--tertiary-color-100);
    --box-border-color: var(--tertiary-color-500);
  }
  .c-box--red{
    --box-bg-color: #FFEFEF;
    --box-border-color: #EF2525;
  }
  .c-box--red .c-list--desc .c-list-item::before{
    background-color: #EF2525;
  }
  .c-box-ico{
    width: calc(32 / var(--font-size)* 1rem);
    height: calc(32 / var(--font-size)* 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    flex-shrink: 0;
  }
  .c-box-ico__label{
    width: calc(20 / var(--font-size)* 1rem);
  }
  .l-sec:first-child  .c-box--red{
    margin-bottom: calc(32 / var(--font-size) * 1rem);
  }
}
/* ==========================================================================
  COLUMN COMPONENT
========================================================================== */
@media all and (min-width: 768px), print {
  .c-column{
    --gap:32;

    display: flex;
    gap: calc(var(--gap) / var(--font-size)* 1rem);
  }
  .c-column + .c-column{
    margin-top: calc(40 / var(--font-size)* 1rem);
  }
  .c-column--justify-center{
    justify-content: center!important;
  }
  .c-column--align-center{
    align-items: center!important;
  }
  .c-column--align-end{
    align-items: end!important;
  }
  .c-column-item--m{
    width: calc(243 / var(--font-size)* 1rem);
    flex-shrink: 0;
  }
  .c-column-item--auto{
    flex: auto;
  }
  .c-column-item--100{
    width: 100%;
  }
  .c-column-item--flex-1{
    flex: 1;
  }

  .c-column--gap-s{
    --gap:16;
  }
  .c-column-item--del .c-txt--m:not(.u-txt-red){
    text-decoration: line-through;
  }
  .c-column--del.c-column{
    position: relative;
  }
  .c-column--del.c-column::before{
    position: absolute;
    content: '';
    height: 1px;
    width: 100%;
    background-color: #333;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .c-column{
    --gap:32;

    display: flex;
    gap: calc(var(--gap) / var(--font-size)* 1rem);
  }
  .c-column + .c-column{
    margin-top: calc(40 / var(--font-size)* 1rem);
  }
  .c-column--justify-center{
    justify-content: center!important;
  }
  .c-column--align-center{
    align-items: center!important;
  }
  .c-column--sp-align-center{
    align-items: center!important;
  }
  .c-column--align-end{
    align-items: end!important;
  }
  .c-column-item--m{
    width: 100%;
    max-width: calc(243 / var(--font-size)* 1rem);
    flex-shrink: 0;
  }
  .c-column-item--auto{
    flex: auto;
  }
  .c-column-item--100{
    width: 100%;
  }
  .c-column-item--flex-1{
    flex: 1;
  }

  .c-column--sp-direction-column{
    flex-direction: column;
  }

  .c-column--gap-s{
    --gap:16;
  }
  .c-column-item--del .c-txt--m:not(.u-txt-red){
    text-decoration: line-through;
  }
  .c-column--del.c-column .c-txt--m,
  .c-column--del.c-column .c-txt--l,
  .c-column--del.c-column .c-txt--xl{
    text-decoration: line-through;
  }
}
/* ==========================================================================
  TAB COMPONENT
========================================================================== */
@media all and (min-width: 768px), print {
  .c-tab{
    --tab-bg-color: var(--primary-color-300);
    --tab-txt-color: var(--primary-color-500);
    --tab-height: 48;
    --btn-ico-size:15;
    --btn-bg-arrow-color:var(--primary-color-500);
    border-bottom: calc(1 / var(--font-size)* 1rem) solid var(--gray-color-400);
  }
  .c-tab__list__inner{
    display: flex;
    justify-content: center;
    gap: calc(8 / var(--font-size)* 1rem);
    align-items: flex-end;
    padding: 0 calc(20 / var(--font-size)* 1rem);
  }
  .c-tab__list-item{
    flex: 1;
  }
  .c-tab__list-item--active{
    --tab-bg-color: var(--primary-color-500);
    --tab-txt-color: var(--white-color);
    --tab-height: 56;
    --btn-bg-arrow-color: var(--white-color);
    pointer-events: none;
  }
  .c-tab__list-item--active .c-tab-btn-arrow{
    transform: rotate(90deg);
  }
  .c-tab-btn{
    display: block;
    position: relative;
    width: 100%;
    max-width: calc(400 / var(--font-size)* 1rem);
    background-color: var(--tab-bg-color);
    border-radius: calc(12 / var(--font-size)* 1rem) calc(12 / var(--font-size)* 1rem) 0 0;
  }
  .c-tab-btn__body{
    height: calc(var(--tab-height) / var(--font-size)* 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(8 / var(--font-size)* 1rem);
  }
  .c-tab-btn__text{
    color: var(--tab-txt-color);
    font-weight: bold;
    font-size: calc(17 / var(--font-size)* 1rem);
  }
  .c-tab-btn-arrow{
    flex-shrink: 0;
    width: calc(var(--btn-ico-size) / var(--font-size)* 1rem);
    height: calc(var(--btn-ico-size) / var(--font-size)* 1rem);
    margin-right: calc(var(--btn-px) / var(--font-size)* 1rem);
  }
  .c-tab-btn-arrow__label{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .c-tab-btn-arrow__label .c-svg{
    width: calc(var(--btn-ico-size) / var(--font-size)* 1rem);
    fill: var(--btn-bg-arrow-color);
    transition: all 0.2s;
  }
}
@media screen and (max-width: 767px) {
  .c-tab{
    --tab-bg-color: var(--primary-color-300);
    --tab-txt-color: var(--primary-color-500);
    --tab-height: 48;
    --btn-ico-size:15;
    --btn-bg-arrow-color:var(--primary-color-500);
    border-bottom: calc(1 / var(--font-size)* 1rem) solid var(--gray-color-400);
  }
  .c-tab__list{
    padding: 0 calc(20 / var(--font-size)* 1rem);
  }
  .c-tab__list__inner{
    display: flex;
    justify-content: center;
    gap: calc(3 / var(--font-size)* 1rem);
    align-items: flex-end;
  }
  .c-tab__list-item{
    width: 100%;
    max-width: calc(162 / var(--font-size)* 1rem);
  }
  .c-tab__list-item--active{
    --tab-bg-color: var(--primary-color-500);
    --tab-txt-color: var(--white-color);
    --tab-height: 56;
    --btn-bg-arrow-color: var(--white-color);
    pointer-events: none;
  }
  .c-tab__list-item--active .c-tab-btn-arrow{
    transform: rotate(90deg);
  }
  .c-tab-btn{
    display: block;
    position: relative;
    background-color: var(--tab-bg-color);
    border-radius: calc(12 / var(--font-size)* 1rem) calc(12 / var(--font-size)* 1rem) 0 0;
  }
  .c-tab-btn__inner{
    padding: calc(4 / var(--font-size)* 1rem);
  }
  .c-tab-btn__body{
    height: 100%;
    min-height: calc(var(--tab-height) / var(--font-size)* 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(2 / var(--font-size)* 1rem);
  }
  .c-tab-btn__text{
    color: var(--tab-txt-color);
    font-weight: bold;
    font-size: calc(12 / var(--font-size)* 1rem);
  }
  .c-tab-btn-arrow{
    flex-shrink: 0;
    width: calc(var(--btn-ico-size) / var(--font-size)* 1rem);
    height: calc(var(--btn-ico-size) / var(--font-size)* 1rem);
    margin-right: calc(var(--btn-px) / var(--font-size)* 1rem);
  }
  .c-tab-btn-arrow__label{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .c-tab-btn-arrow__label .c-svg{
    width: calc(var(--btn-ico-size) / var(--font-size)* 1rem);
    fill: var(--btn-bg-arrow-color);
    transition: all 0.2s;
  }
}
/* ==========================================================================
  SEARCH COMPONENT
========================================================================== */
@media all and (min-width: 768px), print {
  .c-search-box{
    background-color: var(--white-color);
    border: calc(2 / var(--font-size)* 1rem) solid var(--gray-color-600);
    border-radius: calc(12 / var(--font-size)* 1rem);
  }
  .c-search-box__in{
    padding: calc(12 / var(--font-size)* 1rem);
    display: flex;
    gap: calc(12 / var(--font-size)* 1rem);
  }
  .c-search-box__body{
    flex: 1;
    position: relative;
  }
  .c-search-box-input {
    width: 100%;
    height: 100%;
    appearance: none;
    border: none;
    padding: 0 calc(12 / var(--font-size)* 1rem);
    margin: 0;
    background: none!important;
    font: inherit;
    outline: none;
  }
  .c-search-box-icon::after {
    content: "×";
    font-size: calc(16 / var(--font-size)* 1rem);
    font-weight: 700;
    position: absolute;
    right: 0;
    margin-right: calc(18 / var(--font-size)* 1rem);
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color-500);
    display: none;
    pointer-events: none;
  }
  .c-search-box-input::-webkit-search-cancel-button {
    appearance: none;
    padding: calc(10 / var(--font-size)* 1rem);
    cursor: pointer;
  }  
  .c-search-box__body .c-search-box-input:not(:placeholder-shown) + ::after {
    display: block;
  }
  .c-search-box-btn{
    --btn-txt-color: var(--white-color);
    --btn-bg-color: var(--primary-color-500);
    --btn-border-color: var(--btn-txt-color);
    border: calc(1 / var(--font-size)* 1rem) solid var(--btn-border-color);
    background-color: var(--btn-bg-color);
    color: var(--btn-txt-color);
    padding: calc(13 / var(--font-size)* 1rem) calc(18 / var(--font-size)* 1rem);
    border-radius: calc(6 / var(--font-size)* 1rem);
    transition: 0.2s all;
  }
  .c-search-box-btn:hover{
    --btn-bg-color: var(--white-color);
    --btn-txt-color: var(--primary-color-500);
  }
  .c-search-box-btn-txt{
    font-weight: 500;
    font-size: calc(14 / var(--font-size)* 1rem);
  }
}
@media screen and (max-width: 767px) {
  .c-search-box{
    background-color: var(--white-color);
    border: calc(1 / var(--font-size)* 1rem) solid var(--gray-color-600);
    border-radius: calc(10 / var(--font-size)* 1rem);
  }
  .c-search-box__in{
    padding: calc(6 / var(--font-size)* 1rem);
    display: flex;
    gap: calc(8 / var(--font-size)* 1rem);
  }
  .c-search-box__body{
    flex: 1;
    position: relative;
  }
  .c-search-box-input {
    width: 100%;
    height: 100%;
    appearance: none;
    border: none;
    padding: 0 calc(8 / var(--font-size)* 1rem);
    margin: 0;
    background: none!important;
    font: inherit;
    outline: none;
  }
  .c-search-box-icon::after {
    content: "×";
    font-size: calc(16 / var(--font-size)* 1rem);
    font-weight: 700;
    position: absolute;
    right: 0;
    margin-right: calc(13 / var(--font-size)* 1rem);
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color-500);
    display: none;
    pointer-events: none;
  }
  .c-search-box-input::-webkit-search-cancel-button {
    appearance: none;
    padding: calc(10 / var(--font-size)* 1rem);
  }  
  .c-search-box__body .c-search-box-input:not(:placeholder-shown) + ::after {
    display: block;
  }
  .c-search-box-btn{
    background-color: var(--primary-color-500);
    color: var(--white-color);
    padding: calc(13 / var(--font-size)* 1rem) calc(14 / var(--font-size)* 1rem);
    border-radius: calc(6 / var(--font-size)* 1rem);
  }
  .c-search-box-btn-txt{
    font-weight: 500;
    font-size: calc(14 / var(--font-size)* 1rem);
  }
}
/* ==========================================================================
  IMG SVG COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  img
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-figure{
  }
  .c-figure__head{
  }
  .c-figure__note{
    margin-top: calc(16 / var(--font-size)* 1rem);
  }
  .c-figure__footer{
    margin-top: calc(16 / var(--font-size)* 1rem);
  }
  .c-img {
  }
  .c-img__label {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .c-figure{
  }
  .c-figure__head{
  }
  .c-figure__note{
    margin-top: calc(16 / var(--font-size)* 1rem);
  }
  .c-figure__footer{
    margin-top: calc(24 / var(--font-size)* 1rem);
  }
  .c-img {
  }
  .c-img__label {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
  svg
-------------------------------------------------------------------------- */
.c-svg {
  position: relative;
  display: block;
  width: 100%;
}
.c-svg::before {
  display: block;
  padding-top: 100%;
  content: '';
}
.c-svg > svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
  COMMON COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  GLOBAL HEADER
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  /* 簡易版 */
  .gheader.gheader--simple {
    border-bottom: calc(4 / var(--font-size) * 1rem) solid var(--primary-color-500);
  }
  .gheader--simple .gheader__in {
    padding: calc(20 / var(--font-size) * 1rem) 0;
  }
  .gheader--simple .gheader__body {
    padding: 0 calc(20 / var(--font-size) * 1rem);
  }
  .gheader--simple .gheader-title {
  }
  .gheader--simple .gheader-title__label {
    font-size: calc(22 / var(--font-size) * 1rem);
  }
  /* メイン */
  .gheader {
    --gheader-main-color: var(--primary-color-500);
    --gheader-hover-color: #95C3E8;
    --gheader-other-color: var(--other-primary-color-500);
 background: var(--tertiary-color-100);
   height: calc(122 / var(--font-size) * 1rem);
  }
  .gheader-container {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: calc(122 / var(--font-size) * 1rem);
   z-index: 999;
  }
  .gheader-container__in{
   position: relative;
   width: 96vw;
   max-width: 1050px;
   padding: calc(12 / var(--font-size) * 1rem) 0 0;
   margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
  .gheader-title-txt {
    min-width: calc(150 / var(--font-size) * 1rem);
    max-width: calc(200 / var(--font-size) * 1rem);
  }
  .gheader-top {
   position: relative;
   z-index: 1;
   border-radius: calc(16 / var(--font-size)* 1rem);
   background: var(--white-color);
    width: calc(233 / var(--font-size) * 1rem);
    flex-shrink: 6;
    position: relative;
    padding: calc(26 / var(--font-size) * 1rem) 0 calc(26 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
  }
  .gheader-top__in {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .gheader-btn {
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
  .gheader-hamburger-menu {
    display: none;
  }
  .gheader-btn-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(10 / var(--font-size) * 1rem);
  }
  .gheader-btn-list-item {
    transition: all .2s;
  }
  .gheader-btn-list-item-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-color);
    border: calc(1 / var(--font-size) * 1rem) solid var(--gheader-main-color);
    border-radius: calc(14 / var(--font-size) * 1rem);
    width: calc(100 / var(--font-size) * 1rem);
    padding: calc(6.5 / var(--font-size) * 1rem) 0;
    transition: all .2s;
  }
  .gheader-btn-list-item-txt__label {
    color: var(--gheader-main-color);
    font-size: calc(13 / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 1;
  }
  .gheader-btn-list-item:hover .gheader-btn-list-item-txt {
    background: var(--gheader-main-color);
    transition: all .2s;
  }
  .gheader-btn-list-item:hover .gheader-btn-list-item-txt__label {
    transition: all .2s;
    color: var(--white-color);
  }
  .gheader-nav{
    width: 100%;
    max-width: calc(720 / var(--font-size) * 1rem);
  }
  .gheader-nav__in{
   position: relative;
  }
  .gheader-nav-list {
    display: flex;
    justify-content: flex-end;
   align-items: center;
   height: calc(56 / var(--font-size) * 1rem);
   padding-right: calc(18 / var(--font-size) * 1rem);
   gap: calc(32 / var(--font-size) * 1rem);
  }
 .gheader-nav-list::before{
  content: "";
  display: block;
  border-radius:calc(16 / var(--font-size) * 1rem);
  background: var(--white-color);
  width: min(96vw,1050px);
  height: 100%;
  box-shadow: 3px 6px 0 0px rgba(16,8,13,.1);
  position: absolute;
  right: 0;
  bottom: 0;
 }
  .gheader-nav-list-item {
    position: relative;
    transition: all .2s;
  }
  .gheader-nav-list-item a:hover .gheader-nav-list-item__label {
    color: var(--gheader-hover-color);
  }
  .gheader-nav-list-item__label {
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: bold;
    color: var(--primary-color-500);
    transition: all .2s;
  }
  .gheader-nav-list-item.gheader-nav-list-item--active {
    pointer-events: none;
  }
  .gheader-nav-list-item.gheader-nav-list-item--active .gheader-nav-list-item__label {
    color: var(--gheader-main-color);
  }
  .gheader-nav-list-item__ico {
    display: none;
  }
  .gheader-nav-list-sub {
    position: absolute;
    background-color: var(--primary-color-500);
    width: calc(240 / var(--font-size) * 1rem);
    z-index: 1;
    margin-top: calc(20 / var(--font-size) * 1rem);
    padding: calc(8 / var(--font-size) * 1rem) 0;
    border-radius: 0 0 calc(12 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem);
    overflow: hidden;
  }
  .gheader-nav-list-sub--2col{
    width: calc(460 / var(--font-size) * 1rem);
  }
  .gheader-nav-list-sub--2col__in {
    display: flex;
    justify-content: center;
  }
  .gheader-nav-list-sub-col + .gheader-nav-list-sub-col {
    position: relative;
  }
  .gheader-nav-list-sub-col + .gheader-nav-list-sub-col::before {
    content: '';
    position: absolute;
    height: calc((100% - calc(40 / var(--font-size) * 1rem)));
    left: calc(-2 / var(--font-size) * 1rem);
    top: 50%;
    transform: translateY(-50%);
    width: calc(2 / var(--font-size) * 1rem);
    border-radius: calc(2 / var(--font-size) * 1rem);
    background-color: var(--white-color);
  }
  .gheader-nav-list-sub-item {
    position: relative;
    transition: all .2s;
  }
  .gheader-nav-list-sub-item--disable a{
    pointer-events: none;
  }
  .gheader-nav-list-sub-item--disable a .gheader-nav-list-sub-item__label{
    color: var(--gray-color-300);
  }
  .gheader-nav-list-sub-item a{
    display: block;
    padding: calc(20 / var(--font-size) * 1rem);
  }
  .gheader-nav-list-sub-item a:hover .gheader-nav-list-sub-item__label {
    color: var(--gheader-hover-color);
  }
  .gheader-nav-list-sub-item__label {
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: bold;
    color: var(--white-color);
    transition: all .2s;
  }
  .gheader-nav-list-sub-item.gheader-nav-list-sub-item--active {
    pointer-events: none;
  }
  .gheader-nav-list-sub-item.gheader-nav-list-sub-item--active .gheader-nav-list-sub-item__label {
    color: var(--gheader-main-color);
  }
  .gheader-nav-list-sub-item__ico {
    display: none;
  }
  .gheader-nav-btn {
    width: calc(156 / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .gheader-nav-btn .c-btn:hover{
    --btn-bg-color: var(--primary-color-500);
    --btn-border-color: var(--white-color);
  }
  .gheader-business-btn-list {
    position: absolute;
    display: flex;
    bottom: 0;
    right: calc(24 / var(--font-size) * 1rem);
  }
  .gheader-business-btn-list-item {
    --gheader-btn-bg-color: var(--gray-color-100);
    --gheader-btn-txt-color: var(--gray-color-600);
    --gheader-btn-border-color: var(--gray-color-100);

    width: calc(160 / var(--font-size) * 1rem);
  }
  .gheader-business-btn-list-item + .gheader-business-btn-list-item {
    margin-left: calc(10 / var(--font-size) * 1rem);
  }
  .gheader-business-btn-list-item.gheader-business-btn-list-item--active {
    pointer-events: none;
    --gheader-btn-txt-color: var(--white-color);
    --gheader-btn-bg-color: var(--gheader-main-color);
    --gheader-btn-border-color: var(--gheader-btn-bg-color);
  }
  .gheader-business-btn-list-item:hover {
    --gheader-btn-txt-color: var(--white-color);
    --gheader-btn-bg-color: var(--gheader-other-color);
    --gheader-btn-border-color: var(--gheader-btn-bg-color);
  }
  .gheader-business-btn-list-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--gheader-btn-bg-color);
    border-radius: calc(16 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem) 0 0;
    padding: calc(6 / var(--font-size) * 1rem);
    transition: all 0.2s;
    border: calc(4 / var(--font-size) * 1rem) solid var(--gheader-btn-border-color);
  }
  .gheader-business-btn-list-item-txt__label {
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 1.4;
    color: var(--gheader-btn-txt-color);
    transition: all 0.2s;
  }
 
 .gheader-nav-top{
  position: absolute;
  bottom: 100%;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap:0 7px;
  margin-bottom: calc(12 / var(--font-size) * 1rem);
 }
 .gheader-nav-top li{
  width: min(22vw,246px);
 }
 .gheader-nav-top li a{
  position: relative;
  border-radius: calc(16 / var(--font-size)* 1rem);
  display: grid;
 place-content: center;
  background: var(--primary-color-500);
  height: calc(43 / var(--font-size)* 1rem);
  color: var(--white-color);
  font-size: calc(15 / var(--font-size) * 1rem);
  font-weight: 500;
  text-align: center;
 }
 .gheader-nav-top li a::after{
  content: "";
  display: block;
clip-path: polygon(0 0, 50% 100%, 100% 0);
  background: var(--white-color);
  width: calc(7 / var(--font-size) * 1rem);
  height: calc(6 / var(--font-size) * 1rem);
  position: absolute;
  top: 0;
  bottom: 0;
 right: calc(10 / var(--font-size) * 1rem);
  margin: auto;
 }
 .gheader-nav-top li:nth-of-type(2) a{
  background: var(--secondary-color-500);
 }
 .gheader-nav-top li:nth-of-type(3) a{
  
  background: var(--tertiary-color-500);
 }
 /*grayout*/
 .gheader-nav-top li.grayed-out a{
  pointer-events: none;
  background: #999;
 }
 
}
@media all and (min-width: 768px) and (max-width: 960px){
  .gheader-nav-list{
    gap: calc(16 / var(--font-size)* 1rem);
  }
}
@media screen and (max-width: 767px) {
  /* 簡易版 */
  .gheader.gheader--simple {
    border-bottom: calc(4 / var(--font-size) * 1rem) solid var(--primary-color-500);
  }
  .gheader--simple .gheader__in {
    padding: calc(15 / var(--font-size) * 1rem) 0;
  }
  .gheader--simple .gheader__body {
    padding: 0 calc(15 / var(--font-size) * 1rem);
  }
  .gheader--simple .gheader-title {
  }
  .gheader--simple .gheader-title__label {
    font-size: calc(18 / var(--font-size) * 1rem);
    line-height: 1.4;
  }

  /* メイン */
  body.is-fixed {
    overflow: hidden;
  }
  .gheader {
    --gheader-main-color: var(--primary-color-500);
    --gheader-other-color: var(--other-primary-color-500);
   height: calc(50 / var(--font-size) * 1rem);
  }
  .gheader-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
    background-color: var(--white-color);
   height: calc(50 / var(--font-size) * 1rem);
   z-index: 999;
  }
  .gheader-container__in {
    padding: 0;
  }
  .gheader-top {
    position: relative;
  }
  .gheader-top__in {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .gheader-title-txt {
    padding: calc(6 / var(--font-size) * 1rem) 0;
    margin-left: calc(8 / var(--font-size) * 1rem);
  }
  .gheader-hamburger-menu-title-txt {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(32 / var(--font-size) * 1rem) 0 calc(20 / var(--font-size) * 1rem);
  }
  .gheader-title-txt__label {
    width: calc(130 / var(--font-size) * 1rem);
  }
  .gheader-hamburger-menu-title-txt__label {
    width: calc(148 / var(--font-size) * 1rem);
  }
  .gheader-btn {
    display: none;
  }
  .gheader-btn-list {
  }
  .gheader-btn-list-item {
  }
  .gheader-btn-list-item-txt {
  }
  .gheader-btn-list-item-txt__label {
  }
  .gheader-hamburger-menu {
    position: relative;
    width: calc(28 / var(--font-size) * 1rem);
    height: calc(32 / var(--font-size) * 1rem);
    margin-right: calc(16 / var(--font-size) * 1rem);
  }
  .gheader-hamburger-menu__in {
    display: block;
    height: 100%;
    position: relative;
  }
  .gheader-hamburger-menu__in::before {
    content: "メニュー";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4em;
    transform: translateX(-50%);
    margin-bottom: calc(-6 / var(--font-size) * 1rem);
    font-size: calc(9 / var(--font-size) * 1rem);
    text-align: center;
    white-space: nowrap;
  }
  .gheader-hamburger-menu__ico {
    position: relative;
    display: block;
    height: 100%;
  }
  .gheader-hamburger-menu__ico::before,
  .gheader-hamburger-menu__ico::after {
    content: "";
    display: block;
    width: 100%;
    height: calc(2 / var(--font-size) * 1rem);
    border-radius: 9999px;
    background-color: var(--gheader-main-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0);
    transition: all 0.3s ease-in-out;
  }
  .gheader-hamburger-menu__ico::before {
    margin-top: calc(-6 / var(--font-size) * 1rem);
  }
  .gheader-hamburger-menu__ico::after {
    margin-top: calc(6 / var(--font-size) * 1rem);
  }
  .is-hamburger-open .gheader-hamburger-menu__ico::before {
    margin-top: 0;
    transform: translateY(-50%) rotate(30deg);
  }
  .is-hamburger-open .gheader-hamburger-menu__ico::after {
    margin-top: 0;
    transform: translateY(-50%) rotate(-30deg);
  }
  .gheader-hamburger-menu__ico-label {
    display: block;
    width: 100%;
    height: calc(2 / var(--font-size) * 1rem);
    border-radius: 9999px;
    background-color: var(--gheader-main-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .gheader-hamburger-menu-nav {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(28 / var(--font-size) * 1rem);
    height: calc(32 / var(--font-size) * 1rem);
    margin-right: calc(16 / var(--font-size) * 1rem);
  }
  .gheader-hamburger-menu-nav__in {
    display: block;
    height: 100%;
    position: relative;
  }
  .gheader-hamburger-menu-nav__in::before {
    content: "とじる";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4em;
    transform: translateX(-50%);
    margin-bottom: calc(-6 / var(--font-size) * 1rem);
    font-size: calc(9 / var(--font-size) * 1rem);
    text-align: center;
    white-space: nowrap;
  }
  .gheader-hamburger-menu-nav__ico {
    position: relative;
    display: block;
    height: 100%;
  }
  .gheader-hamburger-menu-nav__ico::before,
  .gheader-hamburger-menu-nav__ico::after {
    content: "";
    display: block;
    width: 100%;
    height: calc(2 / var(--font-size) * 1rem);
    border-radius: 9999px;
    background-color: var(--gheader-main-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0);
    transition: all 0.3s ease-in-out;
  }
  .gheader-hamburger-menu-nav__ico::before {
    margin-top: 0;
    transform: translateY(-50%) rotate(30deg);
  }
  .gheader-hamburger-menu-nav__ico::after {
    margin-top: 0;
    transform: translateY(-50%) rotate(-30deg);
  }
  .gheader-hamburger-menu-nav__ico-label {
    display: block;
    width: 100%;
    height: calc(2 / var(--font-size) * 1rem);
    border-radius: 9999px;
    background-color: var(--gheader-main-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .gheader-hamburger-menu-nav__ico-label {
    display: none;
  }
  .gheader-business-btn {
    display: none;
  }
  .gheader-business-btn-list {
  }
  .gheader-business-btn-list-item {
  }
  .gheader-business-btn-list-item--offer {
  }
  .gheader-business-btn-list-txt {
  }
  .gheader-business-btn-list-item-txt__label {
  }
  .gheader-business-btn-list-item--user {
  }
  .gheader-nav {
    display: block;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: all 0.3s ease-in-out;
    transform: translateX(100%);
    visibility: hidden;
    background-color: var(--primary-color-100);
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .is-hamburger-open .gheader-nav {
    transform: translateX(0);
    z-index: 100;
    visibility: visible;
  }
  .gheader-nav__in {
    height: 100%;
    padding: calc(18 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
  }
  .is-hamburger-active .gheader-nav__in {
    padding-bottom: calc(16 / var(--font-size) * 1rem);
  }
  .gheader-nav-list {
    background-color: var(--white-color);
    border-radius: calc(10 / var(--font-size) * 1rem);
    padding: calc(7 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem) calc(7 / var(--font-size) * 1rem);
  }
  .gheader-nav-list-sub {
    padding-bottom: calc(7 / var(--font-size) * 1rem)
  }
  .gheader-nav-list-sub-item {

  }
  .gheader-nav-list-sub-item--disable a{
    pointer-events: none;
  }
  .gheader-nav-list-sub-item--disable a .gheader-nav-list-sub-item__label{
    color: var(--gray-color-300);
  }
  .gheader-nav-list-sub-item--disable a .gheader-nav-list-sub-item__ico::before{
    background: var(--gray-color-300);
  }
  .gheader-nav-list-item {
  }
  .gheader-nav-list-item + .gheader-nav-list-item {
    border-top: 1px solid var(--gray-color-200);
  }
  .gheader-nav-list-item a {
    color: var(--gray-color-600);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(15 / var(--font-size)* 1rem) calc(0 / var(--font-size)* 1rem) calc(16 / var(--font-size)* 1rem);
  }
  .gheader-nav-list-item:has(.gheader-nav-list-sub) > a {
    padding: calc(9 / var(--font-size)* 1rem) 0 calc(4 / var(--font-size)* 1rem);
  }
  .gheader-nav-list-sub-item a {
    color: var(--gray-color-600);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(8 / var(--font-size)* 1rem) 0 calc(8 / var(--font-size)* 1rem) calc(18 / var(--font-size)* 1rem);
  }
  .gheader-nav-list-item + .gheader-nav-list-item {
  }
  .gheader-nav-list-item__label {
    font-size: calc(16 / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 1.5;
  }
  .gheader-nav-list-sub-item__label {
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 400;
  }
  .gheader-nav-list-item--active .gheader-nav-list-item__label {
    color: var(--gheader-main-color);
  }
  .gheader-nav-list-item__ico {
    display: block;
    width: calc(16 / var(--font-size) * 1rem);
    margin-right: calc(3 / var(--font-size) * 1rem);
    fill: var(--primary-color-500);
  }
  .gheader-nav-list-sub-item__ico {
    display: block;
    width: calc(16 / var(--font-size) * 1rem);
    margin-right: calc(3 / var(--font-size) * 1rem);
    fill: var(--white-color);
    position: relative;
  }
  .gheader-nav-list-sub-item__ico::before {
    content: "";
    width: 80%;
    height: 80%;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary-color-500);
  }
  .gheader-nav-login {
    margin: calc(60 / var(--font-size) * 1rem) auto auto;
    width: calc(235 / var(--font-size) * 1rem);
  }
  .gheader-nav-login .c-btn {
    --btn-px: 12;
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--primary-color-500);
    --btn-txt-color: var(--primary-color-500);
  }
  .gheader-nav-btn {
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .gheader-nav-btn .c-btn {
    --btn-txt-font-size: 16;
    --btn-px: 12;
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--white-color);
  }
  .gheader-nav-btn .c-btn__in {
    min-height: unset;
    height: auto;
    padding: calc(13 / var(--font-size)* 1rem) calc(10 / var(--font-size)* 1rem) calc(15 / var(--font-size)* 1rem) calc(11 / var(--font-size)* 1rem);
  }
  .gheader-nav-btn .c-btn-txt {
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
 
 .gheader-nav-top{
  margin-top:  calc(26 / var(--font-size)* 1rem);
 }
 .gheader-nav-top li + li{
  margin-top: calc(10 / var(--font-size)* 1rem);
 }
 .gheader-nav-top li a{
  position: relative;
  border-radius: calc(10 / var(--font-size)* 1rem);
  display: grid;
 place-content: center;
  background: var(--primary-color-500);
  height: calc(43 / var(--font-size)* 1rem);
  color: var(--white-color);
  font-size: calc(15 / var(--font-size) * 1rem);
  font-weight: 500;
  text-align: center;
 }
 .gheader-nav-top li a::after{
  content: "";
  display: block;
clip-path: polygon(0 0, 50% 100%, 100% 0);
  background: var(--white-color);
  width: calc(7 / var(--font-size) * 1rem);
  height: calc(6 / var(--font-size) * 1rem);
  position: absolute;
  top: 0;
  bottom: 0;
 right: calc(10 / var(--font-size) * 1rem);
  margin: auto;
 }
 .gheader-nav-top li:nth-of-type(2) a{
  background: var(--secondary-color-500);
 }
 .gheader-nav-top li:nth-of-type(3) a{
  
  background: var(--tertiary-color-500);
 }
 /*grayout*/
 .gheader-nav-top li.grayed-out a{
  pointer-events: none;
  background: #999;
 }
 
  .gheader-nav-bottom {
    margin-top: calc(26 / var(--font-size)* 1rem);
  }
  .gheader-nav-bottom-list-item + .gheader-nav-bottom-list-item {
    margin-top: calc(16 / var(--font-size)* 1rem);
  }
  .gheader-nav-bottom-list-item > a {
    color: var(--gray-color-600);
    font-size: calc(14 / var(--font-size)* 1rem);
    display: flex;
    gap: calc(12 / var(--font-size)* 1rem);
    align-items: center;
    padding: 0;
  }
  .gheader-nav-bottom-list-item__ico {
    width: calc(15 / var(--font-size)* 1rem);
    fill: var(--primary-color-100);
    position: relative;
  }
  .gheader-nav-bottom-list-item__ico::before {
    content: "";
    width: 80%;
    height: 80%;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary-color-500);
  }
  .gheader-nav-close {
    margin-top: calc(42 / var(--font-size)* 1rem);
    padding-bottom: calc(40 / var(--font-size)* 1rem);
  }
  .gheader-nav-close__btn {
    border-radius: calc(8 / var(--font-size)* 1rem);
    background-color: var(--primary-color-500);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 / var(--font-size)* 1rem);
    width: calc(134 / var(--font-size)* 1rem);
    padding: calc(10 / var(--font-size)* 1rem) calc(10 / var(--font-size)* 1rem) calc(10 / var(--font-size)* 1rem) calc(20 / var(--font-size)* 1rem);
  }
  .gheader-nav-close__label {
    color: var(--white-color);
    font-weight: 700;
    font-size: calc(13 / var(--font-size)* 1rem);
  }
  .gheader-nav-close__ico {
    display: block;
    width: calc(12 / var(--font-size)* 1rem);
    height: calc(12 / var(--font-size)* 1rem);
    border-radius: 50%;
    background-color: var(--white-color);
    position: relative;
    cursor: pointer;
    padding: 0;
  }
  
  .gheader-nav-close__ico::before,
  .gheader-nav-close__ico::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(8 / var(--font-size)* 1rem);
    height: 2px;
    background-color: var(--primary-color-500);
    transform-origin: center;
  }
  
  .gheader-nav-close__ico::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  
  .gheader-nav-close__ico::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
  SIDE-NAV
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-side-nav {
    position: sticky;
    top: calc(160 / var(--font-size) * 1rem);
  }
  .c-side-nav__in {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
  }
  .c-side-nav__in::-webkit-scrollbar {
    display: none;
  }
  .c-side-nav__body {
    background-color: var(--tertiary-color-100);
    border-radius: calc(8 / var(--font-size) * 1rem);
  }
  .c-side-nav__content {
  }
  .c-side-nav-title{
    padding: calc(32 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    position: relative;
    border-bottom: calc(4 / var(--font-size) * 1rem) var(--white-color) solid;
  }
  .c-side-nav-title-txt{
    font-size: calc(15 / var(--font-size) * 1rem);
    color: var(--primary-color-500);
    font-weight: bold;
  }
  .c-side-nav-list {
    padding: calc(14 / var(--font-size) * 1rem) 0;
  }
  .c-side-nav-item {
    --nav-font-size:13;
    position: relative;
  }
  .c-side-nav-item.is-nav-active {
    pointer-events: none;
  }
  .c-side-nav-item.is-nav-active .c-side-nav-item-txt{
    color: var(--primary-color-500);
  }
  .c-side-nav-item__in {
    display: flex;
    position: relative;
    gap: calc(2 / var(--font-size) * 1rem);
    padding: calc(10 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
  }
  .c-side-nav-item-arrow{
    width: calc(12 / var(--font-size)* 1rem);
    height: calc(var(--nav-font-size) * 1.15 / var(--font-size)* 1rem);
    flex-shrink: 0;
  }
  .c-side-nav-item-arrow__label{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: calc(9999 / var(--font-size)* 1rem);
    transition: all 0.2s;
  }
  .c-side-nav-item-arrow__label .c-svg{
    width: calc(8 / var(--font-size)* 1rem);
    fill: var(--primary-color-500);
    transition: all 0.2s;
  }
  .c-side-nav-item-txt {
    position: relative;
    z-index: 1;
    font-size: calc(var(--nav-font-size) / var(--font-size) * 1rem);
    font-weight: bold;
    color: var(--gray-color-600);
  }
  .c-side-nav-item .c-side-nav-list{
    padding: 0 0 0 calc(16 / var(--font-size) * 1rem);
  }
  .c-side-nav-item .c-side-nav-list .c-side-nav-item-arrow{
    display: none;
  }
  .c-side-nav-item .c-side-nav-list .c-side-nav-item__in::before{
    content: "・";
    position: relative;
    z-index: 1;
    font-size: calc(var(--nav-font-size) / var(--font-size)* 1rem);
    font-weight: bold;
    color: var(--primary-color-500);
  }
}
@media screen and (max-width: 767px) {
  .c-side-nav {
    position: sticky;
    top: calc(80 / var(--font-size) * 1rem);
  }
  .c-side-nav__in {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none;
  }
  .c-side-nav__in::-webkit-scrollbar {
    display: none;
  }
  .c-side-nav__body {
    background-color: var(--primary-color-100);
    border-radius: calc(8 / var(--font-size) * 1rem);
  }
  .c-side-nav__content {
  }
  .c-side-nav-title{
    padding: calc(32 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    position: relative;
    border-bottom: calc(4 / var(--font-size) * 1rem) var(--white-color) solid;
  }
  .c-side-nav-title-txt{
    font-size: calc(15 / var(--font-size) * 1rem);
    color: var(--primary-color-500);
    font-weight: bold;
  }
  .c-side-nav-list {
    padding: calc(14 / var(--font-size) * 1rem) 0;
  }
  .c-side-nav-item {
    --nav-font-size:13;
    position: relative;
  }
  .c-side-nav-item.is-nav-active {
    pointer-events: none;
  }
  .c-side-nav-item.is-nav-active .c-side-nav-item-txt{
    color: var(--primary-color-500);
  }
  .c-side-nav-item__in {
    display: flex;
    position: relative;
    gap: calc(2 / var(--font-size) * 1rem);
    padding: calc(10 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
  }
  .c-side-nav-item-arrow{
    width: calc(12 / var(--font-size)* 1rem);
    height: calc(var(--nav-font-size) * 1.15 / var(--font-size)* 1rem);
    flex-shrink: 0;
  }
  .c-side-nav-item-arrow__label{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: calc(9999 / var(--font-size)* 1rem);
    transition: all 0.2s;
  }
  .c-side-nav-item-arrow__label .c-svg{
    width: calc(8 / var(--font-size)* 1rem);
    fill: var(--primary-color-500);
    transition: all 0.2s;
  }
  .c-side-nav-item-txt {
    position: relative;
    z-index: 1;
    font-size: calc(var(--nav-font-size) / var(--font-size) * 1rem);
    font-weight: bold;
    color: var(--gray-color-600);
  }
  .c-side-nav-item .c-side-nav-list{
    padding: 0 0 0 calc(16 / var(--font-size) * 1rem);
  }
  .c-side-nav-item .c-side-nav-list .c-side-nav-item-arrow{
    display: none;
  }
  .c-side-nav-item .c-side-nav-list .c-side-nav-item__in::before{
    content: "・";
    position: relative;
    z-index: 1;
    font-size: calc(var(--nav-font-size) / var(--font-size)* 1rem);
    font-weight: bold;
    color: var(--primary-color-500);
  }
}
/* --------------------------------------------------------------------------
  NEWS
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-news {
  }
  .c-news__in {
  }
  .c-news-list {
  }
  .c-news-list-item {
    padding: calc(16 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
    border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-300)
  }
  .c-news-list-item__in {
  }
  .c-news-detail {
  }
  .c-news-detail__dl {
    display: flex;
    gap: calc(24 / var(--font-size) * 1rem);
  }
  .c-news-detail__dt {
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 500;
    line-height: 1.8;
    flex-shrink: 0;
    width: calc(110 / var(--font-size) * 1rem);
  }
  .c-news-detail__dd {
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 400;
    line-height: 1.8;
  }
  [data-list-type="pickup"] .c-news-detail__dt + .c-news-detail__dd {
    margin-left: calc(48 / var(--font-size) * 1rem);
  }
  .c-news-detail__dd a {
    text-decoration: underline;
  }
  .c-news-detail__dd a:hover {
    text-decoration: none;
  }
}
@media screen and (max-width: 767px) {
  .c-news {
  }
  .c-news__in {
  }
  .c-news-list {
  }
  .c-news-list-item {
    padding: calc(16 / var(--font-size) * 1rem) 0;
    border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-300)
  }
  .c-news-list-item__in {
  }
  .c-news-detail {
  }
  .c-news-detail__dl {
  }
  .c-news-detail__dt {
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 500;
    line-height: 1.8;
    flex-shrink: 0;
    width: calc(110 / var(--font-size) * 1rem);
  }
  .c-news-detail__dd {
    font-size: calc(14 / var(--font-size) * 1rem);
    font-weight: 400;
    line-height: calc(22.4 / 14);
    word-break: break-all;
    padding-top: calc(6 / var(--font-size) * 1rem);
  }
  [data-list-type="pickup"] .c-news-detail__dt + .c-news-detail__dd {
    margin-left: calc(48 / var(--font-size) * 1rem);
  }
  .c-news-detail__dd a {
    text-decoration: underline;
  }
  .c-news-detail__dd a:hover {
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------
  BREADCRUMB
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .breadcrumb-sec {
  }
  .breadcrumb-sec__in {
    padding: calc(16 / var(--font-size) * 1rem) 0;
  }
  .breadcrumb-sec__body {
    padding: 0 calc(32 / var(--font-size) * 1rem);
  }
  .breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(6 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem);
  }
  .breadcrumb-list-item {
    position: relative;
  }
  .breadcrumb-list-item + .breadcrumb-list-item {
    padding-left: calc(12 / var(--font-size) * 1rem);
  }
  .breadcrumb-list-item + .breadcrumb-list-item::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-mask: url("../img/common/breadcrumb_arrow.svg");
    mask: url("../img/common/breadcrumb_arrow.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    width: calc(5 / var(--font-size) * 1rem);
    height: calc(8 / var(--font-size) * 1rem);
    background-color: var(--secondary-color-500);
  }
  .cat-user .breadcrumb-list-item + .breadcrumb-list-item::before {
    background-color: var(--gray-color-600);
  }
  .breadcrumb-list-item__in {
  }
  .breadcrumb-list-txt {
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: 500;
    color: var(--secondary-color-500);
  }
  .cat-user .breadcrumb-list-txt {
    color: var(--gray-color-500);
  }
}
@media screen and (max-width: 767px) {
  .breadcrumb-sec {
  }
  .breadcrumb-sec__in {
    padding: calc(16 / var(--font-size) * 1rem) 0;
  }
  .breadcrumb-sec__body {
    padding: 0 calc(32 / var(--font-size) * 1rem);
  }
  .breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(6 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem);
  }
  .breadcrumb-list-item {
    position: relative;
  }
  .breadcrumb-list-item + .breadcrumb-list-item {
    padding-left: calc(12 / var(--font-size) * 1rem);
  }
  .breadcrumb-list-item + .breadcrumb-list-item::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-mask: url("../img/common/breadcrumb_arrow.svg");
    mask: url("../img/common/breadcrumb_arrow.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    width: calc(5 / var(--font-size) * 1rem);
    height: calc(8 / var(--font-size) * 1rem);
    background-color: var(--secondary-color-500);
  }
  .cat-user .breadcrumb-list-item + .breadcrumb-list-item::before {
    background-color: var(--gray-color-600);
  }
  .breadcrumb-list-item__in {
  }
  .breadcrumb-list-txt {
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: 500;
    color: var(--secondary-color-500);
  }
  .cat-user .breadcrumb-list-txt {
    color: var(--gray-color-500);
  }
}

/* --------------------------------------------------------------------------
  CONTACT
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .contact-sec {
    background: var(--gray-color-100);
    position: relative;
  }
  .contact-sec__in {
    padding-top: calc(56 / var(--font-size) * 1rem);
    padding-bottom: calc(80 / var(--font-size) * 1rem);
    position: relative;
  }
  /* main */
  .contact-sec-main {
    max-width: calc(1064 / var(--font-size) * 1rem);
    margin: auto;
    padding: 0 calc(20 / var(--font-size) * 1rem);
  }
  .contact-sec-main__header {
    margin-bottom: calc(64 / var(--font-size) * 1rem);
  }
  .contact-sec-main__content {
  }
  .contact-sec-txt {
    font-size: calc(14 / var(--font-size) * 1rem);
    text-align: center;
    margin-bottom: calc(40 / var(--font-size) * 1rem);
  }
  .contact-sec-btn {
    width: calc(370 / var(--font-size) * 1rem);
    margin: auto;
  }
  .contact-sec-btn .c-btn{
    --btn-px: 42;
  }
  .contact-sec-phone {
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
  .contact-sec-phone__in {
  }
  .contact-phone-list {
  }
  .contact-phone-list-item {
    background-color: var(--white-color);
    border-radius: calc(24 / var(--font-size) * 1rem);
  }
  .contact-phone-list-item + .contact-phone-list-item {
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  .cat-user .contact-phone-list-item--introduction,
  .contact-phone-list-item--offer {
    display: block;
  }
  .cat-user .contact-phone-list-item--offer,
  .contact-phone-list-item--introduction {
    display: none;
  }
  [data-page="top"] .contact-phone-list-item,
  [data-page="faq"] .contact-phone-list-item,
  [data-page="privacypolicy"] .contact-phone-list-item {
    display: block;
  }
  .contact-phone-list-item__in {
    padding: calc(36 / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
  }
  .contact-phone__header {
    width: calc(227 / var(--font-size) * 1rem);
    border-right: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-200);
    margin-right: calc(24 / var(--font-size) * 1rem);
  }
  .contact-phone__header-in {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .contact-phone__header-title {
    font-size: calc(13 / var(--font-size) * 1rem);
    font-weight: bold;
  }
  .contact-phone__body {
  }
  .contact-phone-num {
    display: flex;
    align-items: center;
  }
  .contact-phone-num__txt {
    font-size: calc(32 / var(--font-size) * 1rem);
    font-weight: bold;
    color: var(--primary-color-500);
    letter-spacing: calc(0.8 / var(--font-size) * 1rem);
    line-height: 1;
  }
  .contact-phone-num__note {
    font-size: calc(10 / var(--font-size) * 1rem);
    letter-spacing: calc(0.8 / var(--font-size) * 1rem);
    margin-left: calc(8 / var(--font-size) * 1rem);
    margin-top: calc(3 / var(--font-size) * 1rem);
  }
  .contact-sec-time {
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
  .contact-sec-time__in {
  }
  .contact-time-txt {
    font-size: calc(18 / var(--font-size) * 1rem);
    text-align: center;
    font-weight: bold;
  }
  .contact-time-note {
    margin-top: calc(16 / var(--font-size) * 1rem);
  }

  /* footer */
  .contact-sec-footer {
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
  .contact-sec-footer__in {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 calc(20 / var(--font-size) * 1rem);
  }
  .contact-footer-logo {
    display: flex;
    gap: calc(8 / var(--font-size) * 1rem);
  }
  .contact-footer-logo__label {
    width: calc(106 / var(--font-size) * 1rem);
    border-radius: calc(4 / var(--font-size) * 1rem);
    overflow: hidden;
  }
  .contact-footer-logo__label.contact-footer-logo__label--kaji {
    width: calc(133 / var(--font-size) * 1rem);
  }
  .contact-footer-link {
    --footer-link-color: var(--secondary-color-500);
  }
  .cat-user .contact-footer-link {
    --footer-link-color: var(--gray-color-600);
  }
  .contact-footer-link-list {
    display: flex;
    align-items: center;
  }
  .contact-footer-link-list-item {
  }
  .contact-footer-link-list-item + .contact-footer-link-list-item {
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
  .contact-footer-link-list-txt {
    display: flex;
    align-items: center;
  }
  .contact-footer-link-list-txt__ico {
    width: calc(8 / var(--font-size) * 1rem);
    margin-right: calc(8 / var(--font-size) * 1rem);
  }
  .contact-footer-link-list-txt__ico svg {
    fill: var(--footer-link-color);
  }
  .contact-footer-link-list-txt__label {
    font-size: calc(10 / var(--font-size) * 1rem);
    color: var(--footer-link-color);
  }
}
@media screen and (max-width: 767px) {
  .contact-sec {
    background: var(--gray-color-100);
    position: relative;
  }
  .contact-sec__in {
    padding-top: calc(40 / var(--font-size) * 1rem);
    padding-bottom: calc(64 / var(--font-size) * 1rem);
    position: relative;
    margin-top: 0;
  }
  .contact-sec .c-header-lv2__in {
    padding-top: calc(18 / var(--font-size)* 1rem);
  }
  .contact-sec .contact-sec-main__header {
    margin-bottom: calc(36 / var(--font-size)* 1rem);
  }
  .contact-sec .contact-sec-btn .c-btn {
    --btn-ico-size: 16;
    --btn-min-height: 54;
  }
  .contact-sec .contact-sec-btn .c-btn__body {
    gap: calc(7 / var(--font-size)* 1rem);
    padding: 0;
  }
  .contact-sec .contact-sec-btn .c-btn-txt {
    width: auto;
    margin-left: calc(12 / var(--font-size)* 1rem);
  }
  .contact-sec .contact-sec-btn .c-btn-arrow {
    position: relative;
    margin-right: 0;
    height: 100%;
    transform: translateY(0);
  }
  .contact-sec .contact-sec-btn .c-btn-arrow__label {
    background-color: inherit;
  }
  .contact-sec .contact-sec-btn .c-svg {
    fill: var(--white-color)
  }
  .contact-sec .c-header-lv2__in {
    text-align: center;
  }
  .contact-sec .c-header-lv2__in::before {
    width: calc(64 / var(--font-size) * 1rem);
    left: 50%;
    transform: translateX(-50%);
  }
  /* pagetop */
  .contact-sec-pagetop {
    --pagetop-arrow-color: var(--white-color);
    --pagetop-bg-color: var(--primary-color-500);
    position: absolute;
    top: 0;
    bottom: unset;
    width: 100%;
  }
  .contact-sec-pagetop.is-fix {
    position: fixed;
    top: unset;
    bottom: calc(40 / var(--font-size) * 1rem);
  }
  .contact-sec-pagetop__in {
    margin: auto;
    position: relative;
  }
  .contact-sec-pagetop-arrow {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-50%);
    width: calc(44 / var(--font-size) * 1rem);
    height: calc(44 / var(--font-size) * 1rem);
    background-color: var(--pagetop-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: calc(15 / var(--font-size) * 1rem);
  }
  .contact-sec-pagetop-arrow__label {
    width: calc(14 / var(--font-size) * 1rem);
    transform: rotate(-90deg);
  }
  .contact-sec-pagetop-arrow svg {
    fill: var(--pagetop-arrow-color);
  }
  /* main */
  .contact-sec-main {
    margin: auto;
    padding: 0 calc(15 / var(--font-size) * 1rem);
  }
  .contact-sec-main__header {
    margin-bottom: calc(26 / var(--font-size) * 1rem);
  }
  .contact-sec-main__content {
  }
  .contact-sec-txt {
    font-size: calc(14 / var(--font-size) * 1rem);
    text-align: center;
    margin-bottom: calc(24 / var(--font-size) * 1rem);
  }
  .contact-sec-btn {
    max-width: calc(306 / var(--font-size) * 1rem);
    margin: auto;
  }
  .contact-sec-phone {
    margin-top: calc(28 / var(--font-size) * 1rem);
  }
  .contact-sec-phone__in {
  }
  .contact-phone-list {
  }
  .contact-phone-list-item {
    background-color: var(--white-color);
    border-radius: calc(12 / var(--font-size) * 1rem);
  }
  .cat-user .contact-phone-list-item--introduction,
  .contact-phone-list-item--offer {
    display: block;
  }
  .cat-user .contact-phone-list-item--offer,
  .contact-phone-list-item--introduction {
    display: none;
  }
  [data-page="top"] .contact-phone-list-item,
  [data-page="faq"] .contact-phone-list-item,
  [data-page="privacypolicy"] .contact-phone-list-item {
    display: block;
  }
  .contact-phone-list-item + .contact-phone-list-item {
    margin-top: calc(10 / var(--font-size) * 1rem);
  }
  .contact-phone-list-item__in {
    padding: calc(20 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
  }
  .contact-phone__header {
    margin-bottom: calc(12 / var(--font-size) * 1rem);
  }
  .contact-phone__header-in {
  }
  .contact-phone__header-title {
    text-align: center;
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: bold;
  }
  .contact-phone__body {
  }
  .contact-phone-num {
  }
  .contact-phone-num__txt {
    font-size: calc(32 / var(--font-size) * 1rem);
    font-weight: bold;
    color: var(--primary-color-500);
    letter-spacing: calc(0.8 / var(--font-size) * 1rem);
    line-height: 1;
    text-align: center;
  }
  .contact-phone-num__note {
    text-align: center;
    font-size: calc(10 / var(--font-size) * 1rem);
    letter-spacing: calc(0.8 / var(--font-size) * 1rem);
    margin-top: calc(12 / var(--font-size) * 1rem);
    line-height: 1;
  }
  .contact-sec-time {
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .contact-sec-time__in {
  }
  .contact-time-txt {
    font-size: calc(16 / var(--font-size) * 1rem);
    line-height: 1.8;
    text-align: center;
    font-weight: bold;
  }
  .contact-time-note {
    margin-top: calc(6 / var(--font-size) * 1rem);
  }
  .contact-time-note .c-note--xs {
    --note-txt-font-size: 10;
  }

  /* footer */
  .contact-sec-footer {
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .contact-sec-footer__in {
    padding: 0 calc(15 / var(--font-size) * 1rem);
  }
  .contact-footer-logo {
    display: flex;
    justify-content: center;
    gap: calc(8 / var(--font-size) * 1rem);
  }
  .contact-footer-logo__label {
    width: calc(106 / var(--font-size) * 1rem);
    margin: auto;
    border-radius: calc(4 / var(--font-size) * 1rem);
    overflow: hidden;
  }
  .contact-footer-logo__label.contact-footer-logo__label--kaji {
    width: calc(133 / var(--font-size) * 1rem);
  }
  .contact-footer-link {
    margin-top: calc(16 / var(--font-size) * 1rem);
    --footer-link-color: var(--secondary-color-500);
  }
  .cat-user .contact-footer-link {
    --footer-link-color: var(--gray-color-600);
  }
  .contact-footer-link-list {
    display: flex;
    align-items: center;
  }
  .contact-footer-link-list-item {
  }
  .contact-footer-link-list-item + .contact-footer-link-list-item {
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
  .contact-footer-link-list-txt {
    display: flex;
    align-items: center;
  }
  .contact-footer-link-list-txt__ico {
    width: calc(8 / var(--font-size) * 1rem);
    margin-right: calc(8 / var(--font-size) * 1rem);
  }
  .contact-footer-link-list-txt__ico svg {
    fill: var(--footer-link-color);
  }
  .contact-footer-link-list-txt__label {
    font-size: calc(10 / var(--font-size) * 1rem);
    color: var(--footer-link-color);
  }
}

/* --------------------------------------------------------------------------
  GLOBAL FOOTER
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .gfooter {
    position: relative;
  }
  .gfooter__in {
    position: relative;
  }
  /* pagetop */
  .gfooter-pagetop {
    --pagetop-txt-color: var(--white-color);
    --pagetop-arrow-color: var(--white-color);
    --pagetop-border-color: var(--primary-color-500);
    --pagetop-bg-color: var(--primary-color-500);
    position: absolute;
    top: initial;
    bottom: 0;
    width: 100%;
    margin-bottom: calc(140 / var(--font-size) * 1rem);
    padding-right: calc(20 / var(--font-size) * 1rem);
  }
  .gfooter-pagetop:hover{
    --pagetop-txt-color: var(--primary-color-500);
    --pagetop-arrow-color: var(--primary-color-500);
    --pagetop-border-color: var(--primary-color-500);
    --pagetop-bg-color: var(--white-color);
    transition: 0.2s all;
  }
  .gfooter-pagetop.is-fix .gfooter-pagetop-arrow {
    position: fixed;
    top: unset;
    bottom: 0;
    right: 0;
    margin-bottom: calc(30 / var(--font-size) * 1rem);
    margin-right: calc(30 / var(--font-size) * 1rem);
  }
  .gfooter-pagetop.is-fix .gfooter-pagetop__in{
    max-width: initial;
  }
  .gfooter-pagetop__in {
    max-width: calc(1256 / var(--font-size) * 1rem);
    padding: 0 calc(20 / var(--font-size) * 1rem);
    margin: auto;
    position: relative;
  }
  .gfooter-pagetop-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(40 / var(--font-size) * 1rem);
    height: calc(40 / var(--font-size) * 1rem);
    background-color: var(--pagetop-bg-color);
    border: calc(1 / var(--font-size) * 1rem) solid var(--pagetop-border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    flex-direction: column;
  }
  .gfooter-pagetop-arrow__label {
    width: calc(13 / var(--font-size) * 1rem);
    transform: rotate(-90deg);
    margin-top: calc(-4 / var(--font-size) * 1rem);
  }
  .gfooter-pagetop-arrow svg {
    fill: var(--pagetop-arrow-color);
    transition: 0.2s all;
  }
  .gfooter-pagetop-arrow-txt__label{
    font-size: calc(10 / var(--font-size) * 1rem);
    color: var(--pagetop-txt-color);
    font-weight: 700;
    transition: 0.2s all;
  }
  .gfooter__body {
    background-color: var(--white-color);
    max-width: calc(1064 / var(--font-size)* 1rem);
    margin: auto;
    padding: calc(46 / var(--font-size) * 1rem) calc(20 / var(--font-size)* 1rem) calc(64 / var(--font-size) * 1rem);
  }
  .gfooter-nav-list{
    --gap:48;
    display: flex;
    justify-content: center;
    gap: calc(var(--gap) / var(--font-size)* 1rem);
  }
  .gfooter-nav-list-item{
    position: relative;
    font-size: calc(12 / var(--font-size)* 1rem);
    font-weight: bold;
  }
  .gfooter-nav-list-item a{
    transition: 0.2s all;
  }
  .gfooter-nav-list-item a:hover{
    color: var(--primary-color-500);
  }
  .gfooter-nav-list-item + .gfooter-nav-list-item::before{
    content: "";
    position: absolute;
    left: calc((var(--gap) / 2 * -1) / var(--font-size)* 1rem);
    top: 50%;
    width: calc(2 / var(--font-size)* 1rem);
    height: 100%;
    transform: translateY(-50%);
    background-color: var(--gray-color-200);
  }
  .gfooter-logo{
    width: calc(200 / var(--font-size)* 1rem);
    margin: calc(64 / var(--font-size)* 1rem) auto 0;
  }
  .gfooter-msg {
    text-align: center;
    margin-bottom: calc(32 / var(--font-size) * 1rem);
  }
  .gfooter-msg-txt {
    color: var(--white-color);
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 2;
  }
  .gfooter__footer{
    padding: calc(16 / var(--font-size) * 1rem) 0;
    background-color: var(--tertiary-color-100);
  }
  .gfooter-copyright {
    text-align: center;
  }
  .gfooter-copyright-txt {
    color: var(--black-color);
    font-size: calc(10 / var(--font-size) * 1rem);
    line-height: 1.5;
  }
}
@media screen and (max-width: 767px) {
  .gfooter {
    background-color: var(--primary-color-400);
    margin-bottom: calc(64 / var(--font-size) * 1rem);
  }
  .gfooter__in {
    position: relative
  }
  .gfooter__body {
    padding: calc(30 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem) calc(74 / var(--font-size) * 1rem);
  }
  .gfooter-nav {
    margin-bottom: calc(52 / var(--font-size) * 1rem);
  }
  .gfooter-nav-list{
    --gap:48;
    display: flex;
    justify-content: center;
    gap: calc(var(--gap) / var(--font-size)* 1rem);
  }
  .gfooter-nav-list-item{
    position: relative;
    font-size: calc(12 / var(--font-size)* 1rem);
    font-weight: bold;
  }
  .gfooter-nav-list-item + .gfooter-nav-list-item::before{
    content: "";
    position: absolute;
    left: calc((var(--gap) / 2 * -1) / var(--font-size)* 1rem);
    top: 50%;
    width: calc(2 / var(--font-size)* 1rem);
    height: 100%;
    transform: translateY(-50%);
    background-color: var(--gray-color-200);
  }
  .gfooter-title-txt {
    width: calc(161 / var(--font-size) * 1rem);
    margin: 0 auto;
  }
  .gfooter-msg {
    text-align: center;
    margin-bottom: calc(20 / var(--font-size) * 1rem);
  }
  .gfooter-msg-txt {
    color: var(--white-color);
    font-size: calc(12 / var(--font-size) * 1rem);
    font-weight: bold;
    line-height: 2;
  }
  .gfooter__footer{
    padding: calc(18 / var(--font-size)* 1rem) 0 calc(18 / var(--font-size)* 1rem) 0;
    background-color: var(--tertiary-color-100);
  }
  .gfooter-copyright {
    text-align: center;
  }
  .gfooter-copyright-txt {
    color: var(--black-color);
    font-size: calc(10 / var(--font-size) * 1rem);
    font-weight: 500;
    line-height: 1;
  }
  .gfooter-pagetop {
    --pagetop-txt-color: var(--white-color);
    --pagetop-arrow-color: var(--white-color);
    --pagetop-bg-color: var(--primary-color-500);
    position: absolute;
    top: initial;
    bottom: 0;
    width: 100%;
    margin-bottom: calc(80 / var(--font-size) * 1rem);
  }
  .gfooter-pagetop.is-fix .gfooter-pagetop-arrow {
    position: fixed;
    top: unset;
    bottom: 0;
    margin-bottom: calc(56 / var(--font-size) * 1rem);
  }
  .gfooter-pagetop__in {
    position: relative;
  }
  .gfooter-pagetop-arrow {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-50%);
    width: calc(40 / var(--font-size) * 1rem);
    height: calc(40 / var(--font-size) * 1rem);
    background-color: var(--pagetop-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: calc(8 / var(--font-size) * 1rem);
    flex-direction: column;
  }
  .gfooter-pagetop-arrow__label {
    width: calc(13 / var(--font-size) * 1rem);
    transform: rotate(-90deg);
    margin-top: calc(-4 / var(--font-size) * 1rem);
  }
  .gfooter-pagetop-arrow svg {
    fill: var(--pagetop-arrow-color);
  }
  .gfooter-pagetop-arrow-txt__label{
    font-size: calc(10 / var(--font-size) * 1rem);
    color: var(--pagetop-txt-color);
    font-weight: 700;
  }
  .gfooter-fixed-nav{
    position: fixed;
    top: unset;
    bottom: 0;
    width: 100%;
    background-color: var(--white-color);
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-200);
  }
  .gfooter-fixed-nav-list{
    display: flex;
  }
  .gfooter-fixed-nav-list-item{
    flex: 1;
  }
  .gfooter-fixed-nav-list-item a{
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(64 / var(--font-size) * 1rem);
    font-size: calc(11 / var(--font-size) * 1rem);
    color: var(--gray-color-600);
    font-weight: 700;
    text-align: center;
    padding-bottom: calc(26 / var(--font-size) * 1rem);
  }
}


/* ==========================================================================
  LAYOUT
========================================================================== */

/* --------------------------------------------------------------------------
  PAGE
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .main-container{
    overflow-x: clip;
  }
  .page-container {
  }
  .page-container__in {
    padding-bottom: calc(120 / var(--font-size) * 1rem);
  }
  .page-container__header {
    margin-top: calc(90 / var(--font-size) * 1rem);
    margin-bottom: calc(60 / var(--font-size) * 1rem);
  }
  /* page */
  .l-page {
    max-width: calc(1120 / var(--font-size) * 1rem);
    margin: 0 auto calc(120 / var(--font-size) * 1rem);
  }
  .l-page__head{
    margin-bottom: calc(40 / var(--font-size) * 1rem);
  }
  .l-page__body{
    display: flex;
  }
  .l-page__footer{
    margin-top: calc(126 / var(--font-size) * 1rem);
  }
  .l-page-nav {
    width: calc(252 / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .l-page-main {
    width: 100%;
  }  
  /* sec */
  .l-page-sec {
  }
  .l-page-sec + .l-page-sec {
    margin-top: calc(96 / var(--font-size) * 1rem);
  }
  .l-page-sec__in {
    max-width: calc(1000 / var(--font-size) * 1rem);
    margin: auto;
    padding: 0 calc(20 / var(--font-size) * 1rem);
  }
  .l-page-sec__header {
    margin-bottom: calc(48 / var(--font-size) * 1rem);
  }
  .l-page-sec__content {
  }
  .l-page-sec__footer {
    margin-top: calc(60 / var(--font-size) * 1rem);
  }
  /* block */
  .l-block__header{
    margin-bottom: calc(48 / var(--font-size) * 1rem);
  }
  .l-block__content + .l-block__content{
    margin-top: calc(64 / var(--font-size) * 1rem);
  }
  .l-block__element + .l-block__element{
    margin-top: calc(48 / var(--font-size) * 1rem);
  }
  .l-block__element + .l-block__element--content{
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
  .l-block__group + .l-block__group{
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .l-block__unit + .l-block__unit{
    margin-top: calc(20 / var(--font-size) * 1rem);
  }
  /* box */
  .l-page-box {
  }
  * + .l-page-box {
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .l-page-box + .l-page-box {
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .l-page-box__in {
  }
  .l-page-box__body {
  }
  .l-page-box__header {
    margin-bottom: calc(16 / var(--font-size) * 1rem);
  }
  .page-container__footer {
    margin-top: calc(60 / var(--font-size) * 1rem);
  }
  .page-container__footer-btn {
    display: flex;
    justify-content: center;
  }
  .page-container__footer-btn .c-btn {
    width: calc(320 / var(--font-size) * 1rem);
  }
}
@media all and (min-width: 768px) and (max-width: 960px){
  .l-page-nav{
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .page-container {
  }
  .page-container__in {
    padding-bottom: calc(120 / var(--font-size) * 1rem);
  }
  .page-container__header {
    margin-top: calc(90 / var(--font-size) * 1rem);
    margin-bottom: calc(60 / var(--font-size) * 1rem);
  }
  /* page */
  .l-page {
    max-width: calc(1120 / var(--font-size) * 1rem);
    margin: 0 auto calc(80 / var(--font-size) * 1rem);
  }
  .l-page__head{
    margin-bottom: calc(32 / var(--font-size) * 1rem);
  }
  .l-page__body{
    display: flex;
  }
  .l-page__footer{
    margin-top: calc(80 / var(--font-size) * 1rem);
  }
  .l-page-nav{
    display: none;
  }
  .l-page-main {
    width: 100%;
  }  
  /* sec */
  .l-page-sec {
  }
  .l-page-sec + .l-page-sec {
    margin-top: calc(96 / var(--font-size) * 1rem);
  }
  .l-page-sec__in {
    max-width: calc(1000 / var(--font-size) * 1rem);
    margin: auto;
    padding: 0 calc(20 / var(--font-size) * 1rem);
  }
  .l-page-sec__header {
    margin-bottom: calc(48 / var(--font-size) * 1rem);
  }
  .l-page-sec__content {
  }
  .l-page-sec__footer {
    margin-top: calc(60 / var(--font-size) * 1rem);
  }
  /* block */
  .l-block__header{
    margin-bottom: calc(32 / var(--font-size) * 1rem);
  }
  .l-block__content + .l-block__content{
    margin-top: calc(64 / var(--font-size) * 1rem);
  }
  .l-block__element + .l-block__element{
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .l-block__element + .l-block__element--content{
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .l-block__element + .l-block__element--margin-s-sp{
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .l-block__element--margin-s-sp + .l-block__element--margin-s-sp{
    margin-top: calc(24 / var(--font-size) * 1rem);
  }
  .l-block__group + .l-block__group{
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
  .l-block__unit + .l-block__unit{
    margin-top: calc(4 / var(--font-size) * 1rem);
  }
  /* box */
  .l-page-box {
  }
  * + .l-page-box {
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .l-page-box + .l-page-box {
    margin-top: calc(32 / var(--font-size) * 1rem);
  }
  .l-page-box__in {
  }
  .l-page-box__body {
  }
  .l-page-box__header {
    margin-bottom: calc(16 / var(--font-size) * 1rem);
  }
  .page-container__footer {
    margin-top: calc(60 / var(--font-size) * 1rem);
  }
  .page-container__footer-btn {
    display: flex;
    justify-content: center;
  }
  .page-container__footer-btn .c-btn {
    width: calc(320 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  SECTION
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .l-sec {
  }
  .l-sec-wrap{
    padding-top: calc(80 / var(--font-size) * 1rem);
    padding-bottom: calc(80 / var(--font-size) * 1rem);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
  }
  .l-sec + .l-sec-wrap{
    margin-top: calc(80 / var(--font-size) * 1rem);
  }
  .l-sec + .l-sec{
    margin-top: calc(80 / var(--font-size) * 1rem);
  }
  .l-sec-wrap .l-sec + .l-sec{
    position: relative;
    padding-top: calc(80 / var(--font-size) * 1rem);
  }
  .l-sec-wrap .l-sec + .l-sec::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: calc(4 / var(--font-size) * 1rem);
    border-top: #666 dotted calc(4 / var(--font-size) * 1rem);
  }
  .l-sec--content + .l-sec{
    margin-top: calc(120 / var(--font-size) * 1rem);
  }
  .l-sec + .l-sec--footer{
    margin-top: calc(120 / var(--font-size) * 1rem);
  }
  .l-sec__in {
    max-width: calc(1064 / var(--font-size) * 1rem);
    margin: auto;
    padding: 0 calc(20 / var(--font-size) * 1rem);
  }
  .l-page:has(.l-page-nav) .l-sec__in{
    padding: 0 calc(20 / var(--font-size) * 1rem) 0 calc(72 / var(--font-size) * 1rem);
  }
  .l-sec__header {
    margin-bottom: calc(60 / var(--font-size) * 1rem);
  }
  .l-sec__header + .l-sec__body {
    padding: calc(90 / var(--font-size) * 1rem) 0;
  }
  .l-sec__content {

  }
  .l-sec__footer{
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
}
@media all and (min-width: 768px) and (max-width: 960px){
  .l-page:has(.l-page-nav) .l-sec__in{
    padding: 0 calc(20 / var(--font-size)* 1rem);
  }
}
@media screen and (max-width: 767px) {
  .l-sec {
  }
  .l-sec-wrap{
    padding-top: calc(40 / var(--font-size) * 1rem);
    padding-bottom: calc(64 / var(--font-size) * 1rem);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
  }
  .l-sec + .l-sec-wrap{
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
  .l-sec + .l-sec{
    margin-top: calc(80 / var(--font-size) * 1rem);
  }
  .l-sec-wrap .l-sec + .l-sec{
    position: relative;
    padding-top: calc(56 / var(--font-size) * 1rem);
    margin-top: calc(56 / var(--font-size) * 1rem);
  }
  .l-sec-wrap .l-sec + .l-sec::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: calc(4 / var(--font-size) * 1rem);
    border-top: #666 dotted calc(4 / var(--font-size) * 1rem);
  }
  .l-sec--content + .l-sec{
    margin-top: calc(80 / var(--font-size) * 1rem);
  }
  .l-sec + .l-sec--footer{
    margin-top: calc(80 / var(--font-size) * 1rem);
  }
  .l-sec__in {
    max-width: calc(1064 / var(--font-size) * 1rem);
    margin: auto;
    padding: 0 calc(20 / var(--font-size) * 1rem);
  }
  .l-page:has(.l-page-nav) .l-sec__in{
    padding: 0 calc(20 / var(--font-size)* 1rem);
  }
  .l-sec__header {
    margin-bottom: calc(60 / var(--font-size) * 1rem);
  }
  .l-sec__header + .l-sec__body {
    padding: calc(90 / var(--font-size) * 1rem) 0;
  }
  .l-sec__content {

  }
  .l-sec__footer{
    margin-top: calc(40 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  ACCORDION
-------------------------------------------------------------------------- */

.js-accordion {
}

.js-accordion.is-accordion-active {
}

.js-accordion-trigger {
  cursor: pointer;
}

.js-accordion-container {
  transition: all 0.3s;
  display: none;
  visibility: hidden;
  overflow: hidden;
}
.js-accordion.is-accordion-active .js-accordion-container {
  display: block;
  visibility: visible;
}

@media all and (min-width: 768px), print {
  .js-header-accordion {
  }

  .js-header-accordion.is-accordion-active {
  }

  .js-header-accordion-trigger {
    cursor: pointer;
    pointer-events: auto;
  }

  .js-header-accordion-container {
    transition: all 0.3s;
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .js-header-accordion.is-accordion-active .js-header-accordion-container {
    display: block;
    opacity: 1;
    visibility: visible;
  }
}

/* ==========================================================================
  PAGER
========================================================================== */

.c-pager {
  margin-top: calc(40 / var(--font-size) * 1rem);
}
.c-pager__in {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(30 / var(--font-size) * 1rem);
}
.c-pager-arrow {
  --pager-arrow-bg-color: var(--white-color);
  --pager-arrow-ico-color: var(--primary-color-500);
  --pager-arrow-border-color: var(--primary-color-500);

  width: calc(24 / var(--font-size) * 1rem);
  height: calc(24 / var(--font-size) * 1rem);
  border: calc(1 / var(--font-size) * 1rem) solid var(--pager-arrow-border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(1 / var(--font-size) * 1rem);
  background-color: var(--pager-arrow-bg-color);
  transition: all 0.3s;
}
.c-pager-arrow--prev {
  transform: rotate(180deg);
}
.c-pager-arrow--next {
}
.c-pager-arrow:hover {
  --pager-arrow-ico-color: var(--white-color);
  --pager-arrow-bg-color: var(--pager-arrow-border-color);
}
.c-pager-arrow--disable {
  --pager-arrow-ico-color: var(--gray-color-200);
  --pager-arrow-border-color: var(--gray-color-200);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.c-pager-arrow__label {
  width: calc(10 / var(--font-size) * 1rem);
  height: calc(10 / var(--font-size) * 1rem);
}
.c-pager-arrow svg {
  fill: var(--pager-arrow-ico-color);
  transition: all 0.3s;
}
.c-pager-num {
  display: flex;
  align-items: center;
  gap: calc(16 / var(--font-size) * 1rem);
}
.c-pager-num-txt {
  font-size: calc(18 / var(--font-size) * 1rem);
  font-weight: bold;
  color: var(--gray-color-500);
  transition: all 0.3s;
}
.c-pager-num-txt:hover {
  color: var(--primary-color-500);
}
.c-pager-num-txt--active.c-pager-num-txt {
  color: var(--primary-color-500);
}