@charset "UTF-8";

/* Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Zen+Maru+Gothic:wght@700&display=swap');

:root {
  --white-color: #fff;
  --black-color: #000;
  --gray-color-500: #616467;
  --gray-color-400: #b4b4b4;
  --gray-color-300: #d8d8d8;
  --gray-color-200: #f2f2f2;
  --gray-color-100: #fafafa;
  --primary-color-500: #00a03f;
  --primary-color-400: #4fd383;
  --primary-color-300: #91dcae;
  --primary-color-200: #d3f6e1;
  --primary-color-100: #eff9f2;
  --secondary-color-500: #abb500;
  --secondary-color-400: #d0d762;
  --secondary-color-300: #e4e899;
  --secondary-color-200: #f0f2c9;
  --secondary-color-100: #f7f8e9;
  --yellow-color: #F9FF7A;
  --orange-color: #ff8a00;
  --orange-color-02: #f1950c;
  --orange-color-03: #FFFDF4;
  --orange-color-20: #FFF5DC;
  --orange-color-100: #F1950C;
  --red-color: #d83347;
  --purple-color:#7958FA;
  --purple-color-02:#8169E0;
  --purple-color-20:#F3F0FF;
  --purple-color-50:#CCC2F3;
  --purple-color-100:#FBFAFF;
  --purple-grade:linear-gradient(to right,#D0ABFF 0%,#7958FA 50%,#7958FA 100%);
  --green-grade:linear-gradient(to right,#D0DD65 0%,#00A040 100%);
  --green-grade-vertical:linear-gradient(to bottom,#D0DD65 0%,#00A040 100%);
  --success-color: #3995d2;
  --warning-color: #be8a02;
  --border-color: #e2e2e2;
  --font-size: 16;
  --font-zen-maru-gothic: 'Zen Maru Gothic', serif;
}

/* ==========================================================================
  ELEMENT RESET
========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--black-color, #000);
  font-weight: 400;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

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;
}

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;
}

/* ==========================================================================
  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 all 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 all 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 all and (max-width: 767px) {
  .u-left-sp {
    text-align: left;
  }
}


.u-right {
  text-align: right;
}

/* TAB,PCのみテキスト右寄せ */

@media all and (min-width: 768px), print {
  .u-right-tab-pc {
    text-align: right;
  }
}

/* SPのみテキスト右寄せ */

@media all and (max-width: 767px) {
  .u-right-sp {
    text-align: right;
  }
}

.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: 700;
}

.u-bold {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
  背景
-------------------------------------------------------------------------- */

.u-bg-white {
  background-color: var(--white-color) !important;
}


/* primary */

.u-bg-primary-500 {
  background-color: var(--primary-color-500) !important;
}

.u-bg-primary-400 {
  background-color: var(--primary-color-400) !important;
}

.u-bg-primary-300 {
  background-color: var(--primary-color-300) !important;
}

.u-bg-primary-200 {
  background-color: var(--primary-color-200) !important;
}

.u-bg-primary-100 {
  background-color: var(--primary-color-100) !important;
}

/* secondary */

.u-bg-secondary-500 {
  background-color: var(--secondary-color-500) !important;
}

.u-bg-secondary-400 {
  background-color: var(--secondary-color-400) !important;
}

.u-bg-secondary-300 {
  background-color: var(--secondary-color-300) !important;
}

.u-bg-secondary-200 {
  background-color: var(--secondary-color-200) !important;
}

.u-bg-secondary-100 {
  background-color: var(--secondary-color-100) !important;
}


.u-bg-orange-20{
  background-color: var(--orange-color-20) !important;
}
.u-bg-orange-03{
  background-color: var(--orange-color-03) !important;
}

.u-bg-purple-20 {
  background-color: var(--purple-color-20) !important;
}
.u-bg-purple-50 {
  background-color: var(--purple-color-50) !important;
}


/* --------------------------------------------------------------------------
  テキストカラー
-------------------------------------------------------------------------- */

/* primary */

.u-color-primary-500 {
  color: var(--primary-color-500) !important;
}

.u-color-primary-400 {
  color: var(--primary-color-400) !important;
}

.u-color-primary-300 {
  color: var(--primary-color-300) !important;
}

.u-color-primary-200 {
  color: var(--primary-color-200) !important;
}

.u-color-primary-100 {
  color: var(--primary-color-100) !important;
}

/* secondary */

.u-color-secondary-500 {
  color: var(--secondary-color-500) !important;
}

.u-color-secondary-400 {
  color: var(--secondary-color-400) !important;
}

.u-color-secondary-300 {
  color: var(--secondary-color-300) !important;
}

.u-color-secondary-200 {
  color: var(--secondary-color-200) !important;
}

.u-color-secondary-100 {
  color: var(--secondary-color-100) !important;
}

.u-color-orange {
  color: var(--orange-color-100) !important;
}
.u-color-red {
  color: var(--red-color) !important;
}
.u-color-success {
  color: var(--success-color) !important;
}
.u-color-warning {
  color: var(--warning-color) !important;
}
.u-color-purple{
  color: var(--purple-color) !important;
}

.u-color-black{
  color: var(--black-color) !important;
}

/* --------------------------------------------------------------------------
  フォント
-------------------------------------------------------------------------- */

.u-zen-maru-gothic {
  font-family: 'Zen Maru Gothic', serif;
}

/* --------------------------------------------------------------------------
  マージン
-------------------------------------------------------------------------- */

.u-mb-0{
  margin-bottom: calc(0 / var(--font-size) * 1rem) !important;
}
.u-mb-0_5{
  margin-bottom: calc(10 / var(--font-size) * 1rem) !important;
}
.u-mb-1 {
  margin-bottom: calc(20 / var(--font-size) * 1rem) !important;
}
.u-mb-1_5 {
  margin-bottom: calc(25 / var(--font-size) * 1rem) !important;
}
.u-mb-2 {
  margin-bottom: calc(30 / var(--font-size) * 1rem) !important;
}
.u-mb-2_5 {
  margin-bottom: calc(35 / var(--font-size) * 1rem) !important;
}
.u-mb-3 {
  margin-bottom: calc(40 / var(--font-size) * 1rem) !important;
}
.u-mb-3_5 {
  margin-bottom: calc(45 / var(--font-size) * 1rem) !important;
}
.u-mb-4 {
  margin-bottom: calc(50 / var(--font-size) * 1rem) !important;
}

@media all and (max-width: 767px) {
  .u-mb-0_5{
    margin-bottom: calc(10 / var(--font-size) * 0.875rem) !important;
  }
  .u-mb-1 {
    margin-bottom: calc(20 / var(--font-size) * 0.875rem) !important;
  }
  .u-mb-1_5 {
    margin-bottom: calc(25 / var(--font-size) * 0.875rem) !important;
  }
  .u-mb-2 {
    margin-bottom: calc(30 / var(--font-size) * 0.875rem) !important;
  }
  .u-mb-2_5 {
    margin-bottom: calc(35 / var(--font-size) * 0.875rem) !important;
  }
  .u-mb-3 {
    margin-bottom: calc(40 / var(--font-size) * 0.875rem) !important;
  }
  .u-mb-3_5 {
    margin-bottom: calc(45 / var(--font-size) * 0.875rem) !important;
  }
  .u-mb-4 {
    margin-bottom: calc(50 / var(--font-size) * 1rem) !important;
  }
}

/* --------------------------------------------------------------------------
  アイコン
-------------------------------------------------------------------------- */

.u-icon{
  display: inline-block;
  background-size:contain;
  background-position:center center;
  background-repeat:no-repeat;
  mask-size:contain;
  mask-position:center center;
  mask-repeat:no-repeat;
  margin-left: calc(2 / var(--font-size) * 1rem);
  margin-right: calc(2 / var(--font-size) * 1rem);
}

.u-icon.--icon-shoene-mark{
  background-image: url(/assets/img/common/ico_shoene-mark.png);
  width:calc(17.5 / var(--font-size) * 1rem);
  height:calc(18.5 / var(--font-size) * 1rem);
  position: relative;
  top:calc(3.5 / var(--font-size) * 1rem);
}

@media all and (max-width: 767px) {
}

/* --------------------------------------------------------------------------
  border
-------------------------------------------------------------------------- */

.u-border-left{
  border-left: var(--gray-color-400) calc(1 / var(--font-size)* 1rem) solid !important;
}
.u-border-bottom{
  border-bottom: var(--gray-color-400) calc(1 / var(--font-size)* 1rem) solid !important;
}
.u-border-right{
  border-right: var(--gray-color-400) calc(1 / var(--font-size)* 1rem) solid !important;
}

.u-no-border-left{
  border-left: 0 !important;
}
.u-no-border-bottom{
  border-bottom: 0 !important;
}
.u-no-border-right{
  border-right: 0 !important;
}

@media all and (max-width: 767px) {
  .u-no-border-left-sp{
    border-left:0 !important;
  }
}


.u-marker{
  padding-bottom: calc(6 / var(--font-size)* 1rem);
  background: linear-gradient(transparent 80%, var(--yellow-color) 80%);
}

@media all and (max-width: 767px) {
  .u-marker{
    padding-bottom: calc(3 / var(--font-size)* 1rem);
    background: linear-gradient(transparent 70%, var(--yellow-color) 70%);
  }
}

/* --------------------------------------------------------------------------
  vertical-align
-------------------------------------------------------------------------- */


.u-vertical-align-top{
  vertical-align: top;
}

.u-vertical-align-middle{
  vertical-align: middle;
}

.u-vertical-align-bottom{
  vertical-align: bottom;
}

/* --------------------------------------------------------------------------
  flex
-------------------------------------------------------------------------- */

.u-flex{
  display: flex;
}
.u-justify-content-center{
  justify-content: center;
}
.u-justify-content-flex-end{
  justify-content: flex-end;
}


@media all and (min-width: 768px), print {
  .u-flex-pc{
    display: flex;
  }
  .u-justify-content-center-pc{
    justify-content: center;
  }
  .u-justify-content-flex-end-pc{
    justify-content: flex-end;
  }
}
@media all and (max-width: 767px) {
  .u-flex-sp{
    display: flex;
  }
  .u-justify-content-center-sp{
    justify-content: center;
  }
  .u-justify-content-flex-end-sp{
    justify-content: flex-end;
  }
}

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

/* --------------------------------------------------------------------------
  MAIN
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .main-container {
  }
  .main-container__in {
  }
}

@media all and (max-width: 767px) {
}

/* --------------------------------------------------------------------------
  SECTION
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .l-page-sec {
  }
  .l-page-sec.--l-page-sec-pc-wide .l-page-sec__body {
    padding: calc(96 / var(--font-size) * 1rem) 0;
  }
  .l-page-sec.--l-page-sec-pc-wide-bottom .l-page-sec__body {
    padding-bottom: calc(96 / var(--font-size) * 1rem);
  }
  .l-page-sec:first-child .l-page-sec__body {
    padding-top: calc(96 / var(--font-size) * 1rem);
  }
  .l-page-sec__in {
    max-width: calc(1060 / var(--font-size) * 1rem);
    margin: auto;
    padding: 0 calc(20 / var(--font-size) * 1rem);
  }
  .l-page-sec__body {
    padding: calc(48 / var(--font-size) * 1rem) 0;
  }
  .l-page-sec__header {
    margin-bottom: calc(40 / var(--font-size) * 1rem);
  }
  .l-page-sec__content {
  }
  .sec-button {
    max-width: calc(320 / var(--font-size) * 1rem);
    margin-top: calc(48 / var(--font-size) * 1rem);
    margin-left: auto;
    margin-right: auto;
  }

  /** **/
  .l-block + .l-block{
    margin-top: calc(96 / var(--font-size) * 1rem);
  }
}

@media all and (max-width: 767px) {
  .l-page-sec {
  }
  .l-page-sec.--l-page-sec-sp-wide .l-page-sec__body {
    padding: calc(56 / var(--font-size) * 1rem) 0;
  }
  .l-page-sec.--l-page-sec-sp-wide-bottom .l-page-sec__body {
    padding-bottom: calc(56 / var(--font-size) * 1rem);
  }
  .l-page-sec:first-child .l-page-sec__body {
    padding-top: calc(56 / var(--font-size) * 1rem);
  }
  .l-page-sec__in {
    margin: auto;
    padding: 0 calc(16 / var(--font-size) * 1rem);
  }
  .l-page-sec__body {
    padding: calc(28 / var(--font-size) * 1rem) 0;
  }
  .l-page-sec__header {
    margin-bottom: calc(24 / var(--font-size) * 1rem);
  }
  .l-page-sec__content {
  }
  .sec-button {
    max-width: calc(320 / var(--font-size) * 1rem);
    margin-top: calc(48 / var(--font-size) * 1rem);
    margin-left: auto;
    margin-right: auto;
  }

  /** **/
  .l-block + .l-block{
    margin-top: calc(48 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  BTN
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .l-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;
    justify-content: center;
  }
  .l-btn-list-item {
    width: calc((100% - var(--gap-x) / var(--font-size) * 1rem * (var(--col) - 1)) / var(--col));
  }

  /* postion */
  .l-btn-list--left {
    justify-content: left;
  }

  /* col */
  .l-btn-list--1col {
    --col: 1;
    --gap-x: 69;
    --gap-y: 69;
  }
  .l-btn-list--1col .l-btn-list-item {
    width: calc(387 / var(--font-size) * 1rem);
  }
  .l-btn-list--2col {
    --col: 2;
    --gap-x: 69;
    --gap-y: 40;
  }
  .l-btn-list--3col {
    --col: 3;
  }
  .l-btn-list--4col {
    --col: 4;
  }
  .l-btn-list--5col {
    --col: 5;
  }
  .l-btn-list--auto .l-btn-list-item {
    width: auto;
  }

  .l-btn-list.--size-m{
    --gap-x: 85;
  }
  .l-btn-list.--size-m .l-btn-list-item{
    max-width: calc(320 / var(--font-size) * 1rem);
  }

  /** wrapper **/
  .l-btn-2col-sec{
    max-width: calc(844 / var(--font-size)* 1rem);
    margin-top: calc(48 / var(--font-size)* 1rem);
    margin-left: auto;
    margin-right: auto;
  }
}

@media all and (max-width: 767px) {
  .l-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;
    justify-content: center;
  }
  .l-btn-list-item {
    width: calc((100% - var(--gap-x) / var(--font-size) * 1rem * (var(--col) - 1)) / var(--col));
  }

  /* postion */
  .l-btn-list--left {
    justify-content: left;
  }

  /* col */
  .l-btn-list--2col {
    --col: 2;
  }
  .l-btn-list--3col {
    --col: 3;
  }
  .l-btn-list--4col {
    --col: 4;
  }
  .l-btn-list--5col {
    --col: 5;
  }
  .l-btn-list--auto .l-btn-list-item {
    width: auto;
  }

  .l-btn-list--sp-1col {
    --col: 1 !important;
    --gap-x: 16;
    --gap-y: 16;
  }
  .l-btn-list--sp-1col .l-btn-list-item{
    max-width:calc(300 / var(--font-size) * 1rem);
  }
}

/* ==========================================================================
  HEADER COMPONENT
========================================================================== */

/* --------------------------------------------------------------------------
  その他
-------------------------------------------------------------------------- */

/* LV2 */

@media all and (min-width: 768px), print {
  .c-header-simple-title {
    --header-size: 36;
    --header-color: var(--primary-color-500);
    --header-deco-color: var(--primary-color-500);
  }
  .c-header-simple-title__label {
    font-family: var(--font-zen-maru-gothic);
    font-size: calc(var(--header-size) / var(--font-size) * 1rem);
    font-weight: 700;
    color: var(--header-color);
    line-height: 1.4;
    text-align: center;
    position: relative;
    display: block;
    padding-bottom: calc(35 / var(--font-size) * 1rem);
  }
  .c-header-simple-title__label:after {
    content: '';
    background-image: url(/assets/img/common/ico_wakaba_02_pc.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: calc(42 / var(--font-size) * 1rem);
    height: calc(15 / var(--font-size) * 1rem);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  /** no-leaf **/
  .c-header-simple-title.--no-leaf .c-header-simple-title__label{
    padding-bottom: 0;
  }
  .c-header-simple-title.--no-leaf .c-header-simple-title__label:after{
    content:none;
  }

  /** color **/
  .c-header-simple-title.--purple .c-header-simple-title__label{
    color:var(--purple-color);
  }
  .c-header-simple-title.--purple .c-header-simple-title__label:after{
    background-image: url(/assets/img/common/ico_wakaba_02_purple_pc.png);
  }

  .c-header-simple-title.--orange .c-header-simple-title__label{
    color:var(--orange-color-100);
  }
  .c-header-simple-title.--orange .c-header-simple-title__label:after{
    background-image: url(/assets/img/common/ico_wakaba_02_orange_pc.png);
  }
}

@media all and (max-width: 767px) {
  .c-header-simple-title {
    --header-size: 28;
    --header-color: var(--primary-color-500);
    --header-deco-color: var(--primary-color-500);
  }
  .c-header-simple-title__label {
    font-family: var(--font-zen-maru-gothic);
    font-size: calc(var(--header-size) / var(--font-size) * 1rem);
    font-weight: 700;
    color: var(--header-color);
    line-height: 1.5;
    text-align: center;
    position: relative;
    display: block;
    padding-bottom: calc(35 / var(--font-size) * 1rem);
  }
  .c-header-simple-title__label:after {
    content: '';
    background-image: url(/assets/img/common/ico_wakaba_02_pc.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    width: calc(42 / var(--font-size) * 1rem);
    height: calc(15 / var(--font-size) * 1rem);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  /** no-leaf **/
  .c-header-simple-title.--no-leaf .c-header-simple-title__label{
    padding-bottom: 0;
  }
  .c-header-simple-title.--no-leaf .c-header-simple-title__label:after{
    content:none;
  }

  /** color **/
  .c-header-simple-title.--purple .c-header-simple-title__label{
    color:var(--purple-color);
  }
  .c-header-simple-title.--purple .c-header-simple-title__label:after{
    background-image: url(/assets/img/common/ico_wakaba_02_purple_pc.png);
  }

  .c-header-simple-title.--orange .c-header-simple-title__label{
    color:var(--orange-color-100);
  }
  .c-header-simple-title.--orange .c-header-simple-title__label:after{
    background-image: url(/assets/img/common/ico_wakaba_02_orange_pc.png);
  }
}

/* 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-400);
  }
  .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(4 / 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: 700;
    line-height: var(--header-line-height);
    padding-left: calc(20 / var(--font-size) * 1rem);
    display: block;
  }
}

@media all and (max-width: 767px) {
}

/* タイトル */

@media all and (min-width: 768px), print {
  .c-header-title {
    --header-font-size: 34;
    --header-color: var(--black-color);

    text-align: center;
  }
  .c-header-title__label {
    color: var(--header-color);
    font-size: calc(var(--header-font-size) / var(--font-size) * 1rem);
    font-weight: bold;
  }

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

@media all and (max-width: 767px) {
}

/* ==========================================================================
  TEXT COMPONENT
========================================================================== */

/* --------------------------------------------------------------------------
  テキスト
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .c-txt {
    --txt-font-size: 16;
    --txt-line-height: 1.8;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
    line-height: var(--txt-line-height);
    word-break: break-all;
  }
  .c-txt sub,
  .c-txt sub {
    font-size: 0.5em;
  }

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

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

  /* L */
  .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 all and (max-width: 767px) {
  .c-txt {
    --txt-font-size: 16;
    --txt-line-height: 1.8;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
    line-height: var(--txt-line-height);
    word-break: break-all;
  }
  .c-txt sub,
  .c-txt sub {
    font-size: 0.5em;
  }

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

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

  /* L */
  .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;
  }

  /* sp */
  .c-txt--l-sp {
    --txt-font-size: 20;
  }
  .c-txt--m-sp {
    --txt-font-size: 16;
  }
  .c-txt--s-sp{
    --txt-font-size: 14;
  }
  .c-txt--xs-sp{
    --txt-font-size: 12;
  }
  .c-txt--xxs-sp{
    --txt-font-size: 10;
  }
}

/* --------------------------------------------------------------------------
  リスト テキスト
-------------------------------------------------------------------------- */

@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--flex .c-list-item__in {
    display: flex;
  }
  .c-list-item__ico {
    flex-shrink: 0;
  }
  .c-list-item__text {
  }
  .c-list--gap {
    --list-gap-x: 24;
    --list-gap-y: 24;

    display: flex;
    gap: calc(var(--list-gap-y) / var(--font-size) * 1rem) calc(var(--list-gap-x) / var(--font-size) * 1rem);
    flex-wrap: wrap;
  }
  .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::before {
    content: '・';
  }
  .c-list--desc .c-list-item::before {
    content: '';
    display: block;
    width: calc(var(--list-font-size) / var(--font-size) * 1rem);
    height: calc(var(--list-font-size) / var(--font-size) * 1rem);
    border-radius: 9999px;
    background-color: var(--list-desc-color);
    margin-top: calc((var(--list-font-size) * 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--num .c-list-item__ico {
    min-width: calc(20 / var(--font-size) * 1rem);
  }
  .c-list-item__in {
    margin-left:calc(5 / var(--font-size) * 1rem);
  }
  .c-list-item__in > a {
    color: var(--primary-color-500);
    text-decoration: underline;
  }
  .c-list-item__in > a:hover {
    text-decoration: none;
  }

  /* 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;
  }
  .c-list--xxs {
    --list-font-size: 11;
  }
  .c-list--xxxs {
    --list-font-size: 10;
  }

  /* マージン */
  .c-list--gs {
    --gap-y: 10;
  }
  .c-list--center .c-list-item {
    justify-content: center;
  }
}

@media all 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--flex .c-list-item__in {
    display: flex;
  }
  .c-list-item__ico {
    flex-shrink: 0;
  }
  .c-list-item__text {
  }
  .c-list--gap {
    --list-gap-x: 24;
    --list-gap-y: 24;

    display: flex;
    gap: calc(var(--list-gap-y) / var(--font-size) * 1rem) calc(var(--list-gap-x) / var(--font-size) * 1rem);
    flex-wrap: wrap;
  }
  .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::before {
    content: '・';
  }
  .c-list--desc .c-list-item::before {
    content: '';
    display: block;
    width: calc(var(--list-font-size) / var(--font-size) * 1rem);
    height: calc(var(--list-font-size) / var(--font-size) * 1rem);
    border-radius: 9999px;
    background-color: var(--list-desc-color);
    margin-top: calc((var(--list-font-size) * 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--num .c-list-item__ico {
    min-width: calc(20 / var(--font-size) * 1rem);
  }
  .c-list-item__in {
    margin-left: calc(5 / var(--font-size) * 1rem);
  }
  .c-list-item__in > a {
    color: var(--primary-color-500);
    text-decoration: underline;
  }
  .c-list-item__in > a:hover {
    text-decoration: none;
  }

  /* 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;
  }

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

  /* マージン */
  .c-list--gs {
    --gap-y: 10;
  }
  .c-list--center .c-list-item {
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
  番号付きリスト
-------------------------------------------------------------------------- */

@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: 700;
    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 (max-width: 767px) {
}

/* --------------------------------------------------------------------------
  注釈 テキスト
-------------------------------------------------------------------------- */

@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);
  }
  .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;
  }
  /* 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 all and (max-width: 767px) {
}

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

/* --------------------------------------------------------------------------
  ボタン
-------------------------------------------------------------------------- */

@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(--white-color);
    --btn-txt-font-size: 16;
    --btn-min-height: 68;
    --btn-px: 62;
    --btn-ico-size: 20;
    --btn-radius: 9999;

    display: block;
    width: 100%;
  }
  a.c-btn:hover,
  a .c-btn:hover,
  button.c-btn:hover {
    --btn-bg-color: var(--white-color);
    --btn-txt-color: var(--btn-border-color);
    --btn-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-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%);
    width: calc(var(--btn-px) / var(--font-size) * 1rem);
    height: calc(var(--btn-min-height) / 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);
    transition: all 0.2s;
  }
  .c-btn-arrow__label .c-svg svg {
    fill: var(--btn-arrow-color);
  }


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

  /* fontsize */
  .c-btn--xl {
    --btn-txt-font-size: 18;
  }
  .c-btn--l {
    --btn-txt-font-size: 16;
    --btn-min-height: 88;
    --btn-px: 78;
  }
  .c-btn--m {
    --btn-txt-font-size: 16;
  }
  .c-btn--s {
    --btn-txt-font-size: 13;
    --btn-min-height: 48;
  }
  .c-btn--xs {
    --btn-txt-font-size: 12;
    --btn-min-height: 40;
  }
  .c-btn--xs .c-btn-arrow {
    display: none;
  }
  .c-btn-date{
    margin-top: calc(12 / var(--font-size) * 1rem);
  }

  /* color */
  .c-btn.c-btn--stroke,
  .c-btn.c-btn--stroke,
  .c-btn.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.c-btn--stroke:hover,
  .c-btn.c-btn--stroke:hover,
  .c-btn.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.c-btn--orange {
    --btn-bg-color: var(--orange-color-02);
    --btn-border-color: var(--orange-color-02);
  }
  .c-btn.c-btn--green-white {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--primary-color-500);
    --btn-txt-color: var(--primary-color-500);
    --btn-arrow-color: var(--primary-color-500);
  }
  a.c-btn--green-white:hover,
  a .c-btn--green-white:hover,
  button.c-btn--green-white:hover {
    --btn-bg-color: var(--primary-color-500);
    --btn-border-color: var(--primary-color-500);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
  }

  /* back */
  .c-btn--back .c-btn-arrow {
    left: 0;
    right: unset;
    transform: translateY(-50%) rotate(180deg);
  }

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

  /* pdf */
  .c-btn--pdf {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--white-color);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--white-color);
    --btn-txt-font-size: 17;
    --btn-min-height: 83;
    --btn-px: 62;
    --btn-ico-size: 30;
    --btn-radius: 20;
    filter: drop-shadow(calc(1 / var(--font-size) * 1rem) calc(1 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem) rgba(0, 0, 0, 0.08));
    transition: 0.3s ease;
  }
  .c-btn--pdf .c-btn-txt {
    text-align: left;
  }
  .c-btn--pdf .c-btn-arrow {
    width: calc(30 / var(--font-size) * 1rem);
    height: calc(34 / var(--font-size) * 1rem);
    right: calc(45 / var(--font-size) * 1rem);
  }
  .c-btn--pdf .c-btn__body{
    padding-left: calc(33 / var(--font-size)* 1rem);
    padding-right: calc(78 / var(--font-size)* 1rem);
  }
  a.c-btn--pdf:hover,
  a .c-btn--pdf:hover,
  button.c-btn--pdf:hover {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--white-color);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--white-color);
    opacity: 0.7;
  }

  /* banner */
  .c-btn--banner {
    --btn-bg-color: var(--primary-color-100);
    --btn-border-color: var(--primary-color-100);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--primary-color-500);
    --btn-txt-font-size: 24;
    --btn-min-height: 100;
    --btn-px: 62;
    --btn-ico-size: 46;
    --btn-radius: 24;
    transition: 0.3s ease;
  }
  .c-btn--banner .c-btn-txt {
    font-family: var(--font-zen-maru-gothic);
  }
  .c-btn--banner .c-btn-arrow {
    width: calc(20 / var(--font-size) * 1rem);
    height: calc(20 / var(--font-size) * 1rem);
    right: calc(60 / var(--font-size) * 1rem);
  }
  .c-btn--banner .c-btn__body{
    padding-left: calc(60 / var(--font-size)* 1rem);
    padding-right: calc(76 / var(--font-size)* 1rem);
  }
  a.c-btn--banner:hover,
  a .c-btn--banner:hover,
  button.c-btn--banner:hover {
    --btn-bg-color: var(--primary-color-100);
    --btn-border-color: var(--primary-color-100);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--primary-color-500);
    opacity: 0.7;
  }

  .c-btn--banner.--banner-orange{
    --btn-bg-color: var(--orange-color-20);
    --btn-arrow-color: var(--orange-color-100);
  }
  a.c-btn--banner.--banner-orange:hover,
  a .c-btn--banner.--banner-orange:hover,
  button.c-btn--banner.--banner-orange:hover {
    --btn-bg-color: var(--orange-color-20);
    --btn-border-color: var(--orange-color-20);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--orange-color-100);
    opacity: 0.7;
  }

  .c-btn--banner.c-btn--disable .c-btn__in{
    position: relative;
    overflow:hidden;
  }
  .c-btn--banner.c-btn--disable .c-btn__in:before{
    content:"";
    background-color: var(--gray-color-400);
    opacity:0.5;
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    z-index:10;
  }

  /** download **/
  .c-btn--download{
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--white-color);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--white-color);
    --btn-txt-font-size: 17;
    --btn-min-height: 83;
    --btn-px: 62;
    --btn-ico-size: 30;
    --btn-radius: 20;
    filter: drop-shadow(calc(1 / var(--font-size)* 1rem) calc(1 / var(--font-size)* 1rem) calc(10 / var(--font-size)* 1rem) rgba(0, 0, 0, 0.08));
    transition: 0.3s ease;
  }
  .c-btn--download .c-btn__body {
    padding: calc(8 / var(--font-size)* 1rem) calc(65 / var(--font-size)* 1rem) calc(8 / var(--font-size)* 1rem) calc(22 / var(--font-size)* 1rem);
  }
  .c-btn--download .c-btn-arrow__label .c-svg {
    width: calc(17 / var(--font-size) * 1rem);
  }
  .c-btn--download .c-btn-arrow__label{
    background-color: var(--black-color);
    mask-image: url(/assets/img/common/ico_download-arrow.svg);
    mask-size:calc(17 / var(--font-size) * 1rem);
    mask-position:calc(12 / var(--font-size) * 1rem) center;
    mask-repeat:no-repeat;
  }
  .c-btn--download .c-btn-txt{
    text-align:left;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .c-btn-txt__type{
    background-color: var(--orange-color-100);
    padding:calc(3 / var(--font-size) * 1rem) 0;
    border-radius:calc(5 / var(--font-size) * 1rem);
    font-size:calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
    text-align: center;
    color:var(--white-color);
    display: block;
    width: calc(49 / var(--font-size) * 1rem);
    height: calc(23 / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .c-btn-txt__type.--jpg{
    background-color: var(--orange-color-100);
  }
  .c-btn-txt__type.--png{
    background-color: var(--primary-color-500);
  }

  a.c-btn--download:hover,
  a .c-btn--download:hover,
  button.c-btn--download:hover {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--white-color);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--black-color);
    opacity: 0.7;
  }

}

@media all 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(--white-color);
    --btn-txt-font-size: 16;
    --btn-min-height: 58;
    --btn-px: 52;
    --btn-ico-size: 20;
    --btn-radius: 9999;

    display: block;
    width: 100%;
  }
  a.c-btn:hover,
  a .c-btn:hover,
  button.c-btn:hover {
    --btn-bg-color: var(--white-color);
    --btn-txt-color: var(--btn-border-color);
    --btn-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) calc(8 / var(--font-size) * 1rem) calc(45 / 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: calc(5 / var(--font-size) * 1rem);
    transform: translateY(-50%);
    width: calc(var(--btn-px) / var(--font-size) * 1rem);
    height: calc(var(--btn-min-height) / 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);
    transition: all 0.2s;
  }
  .c-btn-arrow__label .c-svg svg {
    fill: var(--btn-arrow-color);
  }

  /* square */
  .c-btn--square {
    --btn-radius: 8;
  }
  .c-btn.c-btn--orange {
    --btn-bg-color: var(--orange-color-02);
    --btn-border-color: var(--orange-color-02);
  }
  .c-btn.c-btn--green-white {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--primary-color-500);
    --btn-txt-color: var(--primary-color-500);
    --btn-arrow-color: var(--primary-color-500);
  }

  /* fontsize */
  .c-btn--xl {
    --btn-px: 40;
    --btn-txt-font-size: 16;
  }
  .c-btn--xl .c-btn-arrow {
    right: calc(10 / var(--font-size) * 1rem);
  }

  .c-btn--l {
    --btn-txt-font-size: 16;
    --btn-min-height: 88;
    --btn-px: 78;
  }
  .c-btn--m {
    --btn-txt-font-size: 16;
  }
  .c-btn--s {
    --btn-txt-font-size: 13;
    --btn-min-height: 48;
  }
  .c-btn--xs {
    --btn-txt-font-size: 12;
    --btn-min-height: 40;
  }
  .c-btn--xs .c-btn-arrow {
    display: none;
  }

  .c-btn--m-sp {
    --btn-txt-font-size: 16;
  }
  .c-btn--s-sp {
    --btn-txt-font-size: 15;
  }
  .c-btn--s-sp .c-btn__body{
    padding-left: calc(30 / var(--font-size)* 1rem);
    padding-right: calc(48 / var(--font-size)* 1rem);
  }
  .c-btn--xs-sp {
    --btn-txt-font-size: 12;
  }
  .c-btn--xs-sp .c-btn-arrow {
    display: none;
  }

  .c-btn-date{
    margin-top: calc(12 / var(--font-size) * 1rem);
  }
  .c-btn.--sp-long .c-btn__body {
    padding-left: calc(20 / var(--font-size)* 1rem);
    padding-right: calc(52 / var(--font-size)* 1rem);
  }


  /* 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);
  }

  /* back */
  .c-btn--back .c-btn-arrow {
    left: 0;
    right: unset;
    transform: translateY(-50%) rotate(180deg);
  }

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

  /* pdf */
  .c-btn--pdf {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--white-color);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--white-color);
    --btn-txt-font-size: 17;
    --btn-min-height: 63;
    --btn-px: 29;
    --btn-ico-size: 30;
    --btn-radius: 10;
    filter: drop-shadow(calc(1 / var(--font-size) * 1rem) calc(1 / var(--font-size) * 1rem) calc(10 / var(--font-size) * 1rem) rgba(0, 0, 0, 0.08));
    transition: 0.3s ease;
  }
  .c-btn--pdf .c-btn-txt {
    text-align: left;
  }
  .c-btn--pdf .c-btn-arrow {
    width: calc(25 / var(--font-size) * 1rem);
    height: calc(28 / var(--font-size) * 1rem);
    right: calc(34 / var(--font-size) * 1rem);
  }
  .c-btn--pdf .c-btn__body{
    padding: calc(8 / var(--font-size) * 1rem) calc(var(--btn-px) / var(--font-size) * 1rem);
  }
  .c-btn--pdf.--sp-long .c-btn__body{
    padding-left: calc(10 / var(--font-size)* 1rem);
    padding-right: calc(62 / var(--font-size)* 1rem);
  }
  a.c-btn--pdf:hover,
  a .c-btn--pdf:hover,
  button.c-btn--pdf:hover {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--white-color);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--white-color);
  }

  /* banner */
  .c-btn--banner {
    --btn-bg-color: var(--primary-color-100);
    --btn-border-color: var(--primary-color-100);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--primary-color-500);
    --btn-txt-font-size: 24;
    --btn-min-height: 100;
    --btn-px: 62;
    --btn-ico-size: 46;
    --btn-radius: 10;
    transition: 0.3s ease;
  }
  .c-btn--banner .c-btn-txt {
    font-family: var(--font-zen-maru-gothic);
  }
  .c-btn--banner .c-btn-txt__label{
    font-size: calc(20 / var(--font-size)* 1rem);
  }
  .c-btn--banner .c-btn-arrow {
    width: calc(20 / var(--font-size) * 1rem);
    height: calc(20 / var(--font-size) * 1rem);
    right: calc(26 / var(--font-size) * 1rem);
  }
  .c-btn--banner .c-btn__body{
    padding-left: calc(15 / var(--font-size)* 1rem);
    padding-right: calc(63 / var(--font-size)* 1rem);
    min-height: calc(80 / var(--font-size)* 1rem);
  }
  .c-btn--banner .c-btn-icon{
    width: calc(50 / var(--font-size) * 1rem);
    height: calc(50 / var(--font-size) * 1rem);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .c-btn-icon.--store img,
  .c-btn-icon.--store svg{
    width: calc(25 / var(--font-size) * 1rem);
    height: calc(32 / var(--font-size) * 1rem);
  }
  .c-btn-icon.--faq img,
  .c-btn-icon.--faq svg{
    width: calc(46 / var(--font-size) * 1rem);
    height: calc(34 / var(--font-size) * 1rem);
  }

  a.c-btn--banner:hover,
  a .c-btn--banner:hover,
  button.c-btn--banner:hover {
    --btn-bg-color: var(--primary-color-100);
    --btn-border-color: var(--primary-color-100);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--primary-color-500);
    opacity: 0.7;
  }

  .c-btn--banner.--banner-orange{
    --btn-bg-color: var(--orange-color-20);
    --btn-arrow-color: var(--orange-color-100);
  }
  a.c-btn--banner.--banner-orange:hover,
  a .c-btn--banner.--banner-orange:hover,
  button.c-btn--banner.--banner-orange:hover {
    --btn-bg-color: var(--orange-color-20);
    --btn-border-color: var(--orange-color-20);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--orange-color-100);
    opacity: 0.7;
  }

  .c-btn--banner.c-btn--disable .c-btn__in{
    position: relative;
    overflow:hidden;
  }
  .c-btn--banner.c-btn--disable .c-btn__in:before{
    content:"";
    background-color: var(--gray-color-400);
    opacity:0.5;
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    z-index:10;
  }


  /** download **/
  .c-btn--download{
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--white-color);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--white-color);
    --btn-txt-font-size: 17;
    --btn-min-height: 65;
    --btn-px: 62;
    --btn-ico-size: 30;
    --btn-radius: 10;
    filter: drop-shadow(calc(1 / var(--font-size)* 1rem) calc(1 / var(--font-size)* 1rem) calc(10 / var(--font-size)* 1rem) rgba(0, 0, 0, 0.08));
    transition: 0.3s ease;
  }
  .c-btn--download .c-btn__body {
    padding: calc(8 / var(--font-size)* 1rem) calc(63 / var(--font-size)* 1rem) calc(8 / var(--font-size)* 1rem) calc(34 / var(--font-size)* 1rem);
  }
  .c-btn--download .c-btn-arrow{
    right: calc(-4 / var(--font-size)* 1rem);
  }
  .c-btn--download .c-btn-arrow__label .c-svg {
    width: calc(17 / var(--font-size) * 1rem);
  }
  .c-btn--download .c-btn-arrow__label{
    background-color: var(--black-color);
    mask-image: url(/assets/img/common/ico_download-arrow.svg);
    mask-size:calc(17 / var(--font-size) * 1rem);
    mask-position:calc(12 / var(--font-size) * 1rem) center;
    mask-repeat:no-repeat;
  }
  .c-btn--download .c-btn-txt{
    text-align:left;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .c-btn-txt__type{
    background-color: var(--orange-color-100);
    padding:calc(3 / var(--font-size) * 1rem) 0;
    border-radius:calc(5 / var(--font-size) * 1rem);
    font-size:calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
    text-align: center;
    color:var(--white-color);
    display: block;
    width: calc(49 / var(--font-size) * 1rem);
    height: calc(23 / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .c-btn-txt__type.--jpg{
    background-color: var(--orange-color-100);
  }
  .c-btn-txt__type.--png{
    background-color: var(--primary-color-500);
  }

  a.c-btn--download:hover,
  a .c-btn--download:hover,
  button.c-btn--download:hover {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--white-color);
    --btn-txt-color: var(--black-color);
    --btn-arrow-color: var(--black-color);
    opacity: 0.7;
  }
}

@media all and (max-width: 350px) {
  .c-btn--pdf{
    --btn-txt-font-size: 14;
  }
  .c-btn--pdf.--sp-long .c-btn__body {
    padding-right: calc(42 / var(--font-size)* 1rem);
  }
  .c-btn--pdf .c-btn-arrow {
    right: calc(17 / var(--font-size)* 1rem);
  }
  .c-btn--xl {
    --btn-px: 30;
  }
}

/* --------------------------------------------------------------------------
  テキストリンク
-------------------------------------------------------------------------- */

.u-text-link {
  text-decoration: underline;
}

.u-underline{
  text-decoration: underline;
}

.u-text-color-link {
  color: var(--primary-color-500);
  text-decoration: underline;
}

@media all and (min-width: 768px), print {
  .u-text-link,
  .u-text-color-link {
    transition: ease 0.3s;
  }
  .u-text-link:hover,
  .u-text-color-link:hover {
    opacity: 0.7;
  }
}

/* --------------------------------------------------------------------------
  カーソルつきテキストリンク
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .c-cursor-button__link{
    display: flex;
    transition:0.3s ease;
  }
  .c-cursor-button__link:hover{
    opacity:0.7;
  }
  .c-cursor-button__label{
    font-size:calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .c-cursor-button__icon{
    fill: var(--primary-color-500);
    border: calc(1 / var(--font-size)* 1rem) solid var(--primary-color-500);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(20 / var(--font-size)* 1rem);
    height: calc(20 / var(--font-size)* 1rem);
    flex-shrink: 0;
    margin-left: calc(12 / var(--font-size)* 1rem);
  }
  .c-cursor-button__icon svg{
    max-width: calc(10 / var(--font-size)* 1rem);
    max-height: calc(6 / var(--font-size)* 1rem);
  }
}
@media all and (max-width: 767px) {
  .c-cursor-button__link{
    display: flex;
    transition:0.3s ease;
  }
  .c-cursor-button__link:hover{
    opacity:0.7;
  }
  .c-cursor-button__label{
    font-size:calc(14 / var(--font-size) * 1rem);
    font-weight: 700;
  }
  .c-cursor-button__icon{
    fill: var(--primary-color-500);
    border: calc(1 / var(--font-size)* 1rem) solid var(--primary-color-500);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(20 / var(--font-size)* 1rem);
    height: calc(20 / var(--font-size)* 1rem);
    flex-shrink: 0;
    margin-left: calc(12 / var(--font-size)* 1rem);
  }
  .c-cursor-button__icon svg{
    max-width: calc(10 / var(--font-size)* 1rem);
    max-height: calc(6 / var(--font-size)* 1rem);
  }
}
/* --------------------------------------------------------------------------
  テキストボタン
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .c-link-btn {
    --link-arrow-color: var(--white-color);
    --link-font-size: 14;
    --link-rate: var(--link-font-size) / 14;
    --link-txt-color: var(--black-color);
  }
  a.c-link-btn:hover,
  a .c-link-btn:hover {
    --link-txt-color: var(--link-arrow-color);
  }
  .c-link-btn__in {
    display: flex;
  }
  .c-link-btn-ico {
    width: calc(26 * var(--link-rate) / var(--font-size) * 1rem);
    height: calc(26 * var(--link-rate) / var(--font-size) * 1rem);
    border: calc(1 / var(--font-size) * 1rem) solid var(--link-arrow-color);
    border-radius: 50%;
    margin-right: calc(8 / var(--font-size) * 1rem);
    flex-shrink: 0;
  }
  .c-link-btn-ico__label {
    display: flex;
    justify-content: center;
    align-self: center;
    height: 100%;
  }
  .c-link-btn-ico__label .c-svg {
    width: calc(20 / var(--font-size) * 1rem);
  }
  .c-link-btn-ico__label svg {
    fill: var(--link-arrow-color);
  }
  .c-link-btn-txt {
  }
  .c-link-btn-txt__label {
    font-size: calc(var(--link-font-size) / var(--font-size) * 1rem);
    line-height: 1.8;
    color: var(--link-txt-color);
    transition: all 0.2s;
    display: inline-block;
  }
  .c-link-btn-txt__ico {
    display: inline-block;
    width: calc(24 * var(--link-rate) / var(--font-size) * 1rem);
    vertical-align: text-top;
  }
  .c-link-btn-txt__ico svg {
    fill: var(--link-arrow-color);
  }

  /* fontsize */
  .c-link-btn--l {
    --link-font-size: 16;
  }
  .c-link-btn--m {
    --link-font-size: 14;
  }
  .c-link-btn--s {
    --link-font-size: 12;
  }
}

@media all and (max-width: 767px) {
}

/* ==========================================================================
  TABLE COMPONENT
========================================================================== */

@media all and (min-width: 768px), print {
  .c-table {
  }
  .c-table + .c-table{
    margin-top: calc(28 / 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) calc(16 / var(--font-size) * 1rem) 0 0;
    overflow: hidden;
    border: var(--gray-color-400) calc(1 / var(--font-size) * 1rem) solid;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--white-color);
    width: 100%;
  }
  .c-table-chart__thead {
  }
  .c-table-chart__thead th,
  .c-table-chart__thead td{
    border-bottom: var(--gray-color-400) calc(1 / var(--font-size) * 1rem) solid;
  }
  .c-table-chart__thead + .c-table-chart__tbody {
    border-top: var(--gray-color-400) calc(1 / 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(--gray-color-400) calc(1 / 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(--gray-color-400) calc(1 / var(--font-size) * 1rem) solid;
  }
  .c-table__footer {
    margin-top: calc(10 / var(--font-size) * 1rem);
  }

  .table-cell-size {
  }
  .table-cell-size--l {
    width: calc(272 / var(--font-size) * 1rem);
  }
  .table-cell-size--m {
    width: calc(200 / var(--font-size) * 1rem);
  }
  .table-cell-size--s {
    width: calc(100 / var(--font-size) * 1rem);
  }

  /** no-border-radius **/
  .c-table.--no-border-radius .c-table-chart,
  .c-table.--no-border-radius .c-table-chart th,
  .c-table.--no-border-radius .c-table-chart td,
  .c-table.--no-border-radius .c-table-chart-cell + .c-table-chart-cell{
    border-radius:0;
  }

  /** padding-size-l **/
  .c-table.--padding-size-l .c-table-chart-cell {
    padding: calc(22 / var(--font-size)* 1rem) calc(38 / var(--font-size)* 1rem);
  }
  .c-table.--padding-size-l .c-table__footer{
    padding-left: calc(20 / var(--font-size)* 1rem);
    padding-right: calc(20 / var(--font-size)* 1rem);
  }

  /** color **/
  .c-table.--color-purple .c-table-chart,
  .c-table.--color-purple .c-table-chart th,
  .c-table.--color-purple .c-table-chart td,
  .c-table.--color-purple .c-table-chart-cell + .c-table-chart-cell{
    border-color:var(--purple-color);
  } 
}

@media all and (max-width: 767px) {
  .c-table {
  }
  .c-table + .c-table{
    margin-top: calc(28 / 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) calc(16 / var(--font-size) * 1rem) 0 0;
    overflow: hidden;
    border: var(--gray-color-400) calc(1 / var(--font-size) * 1rem) solid;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--white-color);
    width: 100%;
  }
  .c-table-chart__thead {
  }
  .c-table-chart__thead th,
  .c-table-chart__thead td{
    border-bottom: var(--gray-color-400) calc(1 / var(--font-size) * 1rem) solid;
  }
  .c-table-chart__thead + .c-table-chart__tbody {
    border-top: var(--gray-color-400) calc(1 / 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(--gray-color-400) calc(1 / 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(--gray-color-400) calc(1 / var(--font-size) * 1rem) solid;
  }
  .c-table__footer {
    margin-top: calc(10 / var(--font-size) * 1rem);
  }

  /** **/

  .c-table--sp-scroll .c-table__body{
    overflow-x: scroll;
  }
  .c-table--sp-scroll.c-table .c-table__body > table {
    width: calc(800 / var(--font-size) * 1rem);
  }

  .c-table--sp-stick{
  }
  .c-table--sp-stick.c-table .c-table__body{
    overflow-x: scroll;
  }
  .c-table--sp-stick.c-table .c-table__body > table {
    border-spacing: 0;
    width: calc(800 / var(--font-size) * 1rem);
  }
  .c-table--sp-stick .c-table__body {
  }
  .c-table--sp-stick__target{
    border-right: 1px solid var(--main-border-color);
    position: sticky;
    left: 0;
    z-index: 100;
  }
  .c-table--sp-width--s{
    width: 3.5rem!important;
  }
  .c-table--sp-width--m{
    width: 5rem!important;
  }
  .c-table--sp-width--l{
    width: 5.5rem!important;
  }
  .c-table--sp-width--xl{
    width: 7rem!important;
  }
  .c-table--sp-width--xxl{
    width: 9rem!important;
  }

  /** **/

  .table-cell-size {
  }
  .table-cell-size--l {
    width: calc(272 / var(--font-size) * 1rem);
  }
  .table-cell-size--m {
    width: calc(200 / var(--font-size) * 1rem);
  }
  .table-cell-size--s {
    width: calc(100 / var(--font-size) * 1rem);
  }
  /** --sp-vertical **/
  .c-table-chart__tr.--sp-vertical,
  .c-table-chart__tr.--sp-vertical th,
  .c-table-chart__tr.--sp-vertical td{
    display: block;
  }

  .c-table-chart__tr.--sp-vertical th + *,
  .c-table-chart__tr.--sp-vertical td + *{
    border-top: calc(1 / var(--font-size)* 1rem) solid var(--gray-color-400);
  }

  /** no-border-radius **/
  .c-table.--no-border-radius .c-table-chart,
  .c-table.--no-border-radius .c-table-chart th,
  .c-table.--no-border-radius .c-table-chart td,
  .c-table.--no-border-radius .c-table-chart-cell + .c-table-chart-cell{
    border-radius:0;
  }

  /** padding-size-l **/
  .c-table.--padding-size-l .c-table-chart-cell{
    padding: calc(16 / var(--font-size)* 1rem) calc(22 / var(--font-size)* 1rem);
  }
  .c-table.--padding-size-l .c-table__footer{
  }

  /** color **/
  .c-table.--color-purple .c-table-chart,
  .c-table.--color-purple .c-table-chart th,
  .c-table.--color-purple .c-table-chart td,
  .c-table.--color-purple .c-table-chart-cell + .c-table-chart-cell{
    border-color:var(--purple-color);
  }

  /** --sp-vertical + padding-size-l **/
  .c-table.--padding-size-l .c-table-chart__tr.--sp-vertical th.c-table-chart-cell{
    padding: calc(24 / var(--font-size)* 1rem) calc(16 / var(--font-size)* 1rem);
  }
  .c-table.--padding-size-l .c-table-chart__tr.--sp-vertical td.c-table-chart-cell{
    padding: calc(16 / var(--font-size)* 1rem) calc(16 / var(--font-size)* 1rem);
  }
}

/** scroll-bar **/

/*----- scrollable table -----*/

.c-table--bar-scrollbar {
	margin-bottom: 30px;
	height: 16px;
	overflow-x: scroll;
	overflow-y: hidden;
	width: 100%;
}
.c-table--bar-scrollbar .c-table--bar-scrollbar__inner {
	height: 1px;
	width: 768px;
}

/** common **/
.c-table--bar-scrollable {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}
.c-table--bar-scrollable::-webkit-scrollbar {
	height: 10px;
}
.c-table--bar-scrollable::-webkit-scrollbar-track {
	margin: 0 2px;
	background: #f5f5f5;
	border-radius: 5px;
}
.c-table--bar-scrollable::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: #2bb673;
}

/** /common **/

.c-table--bar-scrollable {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 30px;
	width: 100%;
}
.c-table--bar-scrollable .c-table--bar-scrollable-inner {
}

/*-----scrollable table: scrollbars' style -----*/
.c-table--bar-scrollbar::-webkit-scrollbar,
.c-table--bar-scrollable::-webkit-scrollbar {
	height: 10px;
}
.c-table--bar-scrollbar::-webkit-scrollbar-track,
.c-table--bar-scrollable::-webkit-scrollbar-track {
	margin: 0 2px;
	background: var(--gray-color-100);
	border-radius: 5px;
}
.c-table--bar-scrollbar::-webkit-scrollbar-thumb,
.c-table--bar-scrollable::-webkit-scrollbar-thumb {
	background: var(--gray-color-300);
	border-radius: 5px;
}

@media all and (min-width: 768px), print {
}
@media all and (max-width: 767px) {
}

/* ==========================================================================
  IMG SVG COMPONENT
========================================================================== */

/* --------------------------------------------------------------------------
  img
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .c-img {
  }
  .c-img__label {
    width: 100%;
  }
  .c-img__caption {
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
}

@media all and (max-width: 767px) {
  .c-img {
  }
  .c-img__label {
    width: 100%;
  }
  .c-img__caption {
    margin-top: calc(16 / var(--font-size) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  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%;
}

/* ==========================================================================
  NEWS COMPONENT
========================================================================== */

@media all and (min-width: 768px), print {
  .c-news-list {
    --news-list-font-size: 14;
    width: 100%;
  }
  .c-news-list__item {
    display: flex;
    margin-top: calc(17 / var(--font-size) * 1rem);
  }
  .c-news-list__item:first-child {
    margin-top: 0;
  }
  .c-news-list__item__date {
    color: var(--orange-color-100);
    font-size: calc(var(--news-list-font-size) / var(--font-size) * 1rem);
    font-weight: 500;
    line-height: 1.8;
    max-width: calc(112 / var(--font-size) * 1rem);
    width: 100%;
  }
  .c-news-list__item__text {
    font-size: calc(var(--news-list-font-size) / var(--font-size) * 1rem);
    line-height: 1.8;
    max-width: calc(680 / var(--font-size) * 1rem);
    width: 100%;
  }
  .c-news-list__item__date + .c-news-list__item__text{
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
  .c-news-list__item__text a {
    text-decoration: underline;
  }
}

@media all and (max-width: 767px) {
  .c-news-list {
    --news-list-font-size: 14;
    width: 100%;
  }
  .c-news-list__item {
    margin-top: calc(17 / var(--font-size) * 1rem);
  }
  .c-news-list__item:first-child {
    margin-top: 0;
  }
  .c-news-list__item__date {
    color: var(--orange-color-100);
    font-size: calc(var(--news-list-font-size) / var(--font-size) * 1rem);
    font-weight: 500;
    line-height: 1.8;
  }
  .c-news-list__item__text {
    font-size: calc(var(--news-list-font-size) / var(--font-size) * 1rem);
    line-height: 1.8;
  }
  .c-news-list__item__date + .c-news-list__item__text{
    margin-top: calc(5 / var(--font-size) * 1rem);
  }
  .c-news-list__item__text a {
    text-decoration: underline;
  }
}

/* ==========================================================================
  EXPLANATION LIST COMPONENT
========================================================================== */

@media all and (min-width: 768px), print {
  .c-explanation-list {
    --explanation-list-bg-color: var(--primary-color-100);
    --explanation-list-end-bg-color: rgba(135, 135, 135, 0.8);
    --explanation-list-font-size: 14;
    --explanation-list-font-size-02: 16;
    width: 100%;
  }
  .c-explanation-list__item {
    background-color: var(--explanation-list-bg-color);
    padding: calc(23 / var(--font-size) * 1rem) calc(48 / var(--font-size) * 1rem);
    display: flex;
    border-radius: calc(16 / var(--font-size) * 1rem);
    margin-top: calc(24 / var(--font-size) * 1rem);
    position: relative;
  }
  .c-explanation-list__item.c-explanation-list__item__end::before {
    position: absolute;
    content: '受付終了';
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-color);
    width: 100%;
    height: 100%;
    background-color: var(--explanation-list-end-bg-color);
    z-index: 2;
    top: 0;
    left: 0;
    border-radius: calc(16 / var(--font-size) * 1rem);
    font-size: calc(var(--explanation-list-font-size-02) / var(--font-size) * 1rem);
    font-family: var(--font-zen-maru-gothic);
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  .c-explanation-list__item:first-child {
    margin-top: 0;
  }
  .c-explanation-list__overview {
    display: flex;
  }
  .c-explanation-list__overview__title {
    font-family: var(--font-zen-maru-gothic);
    color: var(--primary-color-500);
    font-size: calc(var(--explanation-list-font-size) / var(--font-size) * 1rem);
    font-weight: 500;
  }
  .c-explanation-list__overview__text {
    font-size: calc(var(--explanation-list-font-size-02) / var(--font-size) * 1rem);
    max-width: calc(294 / var(--font-size) * 1rem);
    width: 100%;
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
  .c-explanation-list__overview.--type-01 {
    max-width: calc(376 / var(--font-size) * 1rem);
    width: 100%;
  }
  .c-explanation-list__overview.--type-01 .c-explanation-list__overview__title {
    max-width: calc(60 / var(--font-size) * 1rem);
    width: 100%;
  }
  .c-explanation-list__overview.--type-01 .c-explanation-list__overview__text {
    max-width: calc(294 / var(--font-size) * 1rem);
    width: 100%;
  }
  .c-explanation-list__overview.--type-02 {
    padding-left: calc(30 / var(--font-size) * 1rem);
    margin-left: calc(30 / var(--font-size) * 1rem);
    max-width: calc(514 / var(--font-size) * 1rem);
    width: 100%;
    position: relative;
  }
  .c-explanation-list__overview.--type-02:before {
    content: '';
    background-color: var(--border-color);
    display: block;
    width: calc(1 / var(--font-size) * 1rem);
    height: calc(100% + calc(12 / var(--font-size) * 1rem));
    min-height: calc(32 / var(--font-size) * 1rem);
    position: absolute;
    top: calc(-6 / var(--font-size) * 1rem);
    left: 0;
  }
  .c-explanation-list__overview.--type-02 .c-explanation-list__overview__title {
    max-width: calc(30 / var(--font-size) * 1rem);
    width: 100%;
  }
  .c-explanation-list__overview.--type-02 .c-explanation-list__overview__text {
    max-width: calc(440 / var(--font-size) * 1rem);
    width: 100%;
  }
}

@media all and (max-width: 767px) {
  .c-explanation-list {
    --explanation-list-bg-color: var(--primary-color-100);
    --explanation-list-end-bg-color: rgba(135, 135, 135, 0.8);
    --explanation-list-font-size: 14;
    --explanation-list-font-size-02: 18;
    width: 100%;
  }
  .c-explanation-list__item {
    background-color: var(--explanation-list-bg-color);
    padding: calc(20 / var(--font-size) * 1rem) calc(15 / var(--font-size) * 1rem);
    border-radius: calc(16 / var(--font-size) * 1rem);
    margin-top: calc(24 / var(--font-size) * 1rem);
    position: relative;
  }
  .c-explanation-list__item.c-explanation-list__item__end::before {
    position: absolute;
    content: '受付終了';
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-color);
    width: 100%;
    height: 100%;
    background-color: var(--explanation-list-end-bg-color);
    z-index: 2;
    top: 0;
    left: 0;
    border-radius: calc(16 / var(--font-size) * 1rem);
    font-size: calc(var(--explanation-list-font-size-02) / var(--font-size) * 1rem);
    font-family: var(--font-zen-maru-gothic);
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  .c-explanation-list__item:first-child {
    margin-top: 0;
  }
  .c-explanation-list__overview {
  }
  .c-explanation-list__overview__title {
    font-family: var(--font-zen-maru-gothic);
    color: var(--primary-color-500);
    font-size: calc(var(--explanation-list-font-size) / var(--font-size) * 1rem);
    font-weight: 500;
    text-align: center;
  }
  .c-explanation-list__overview__text {
    font-size: calc(var(--explanation-list-font-size-02) / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
    margin-top: calc(4 / var(--font-size) * 1rem);
  }
  .c-explanation-list__overview.--type-01 {
  }
  .c-explanation-list__overview.--type-01 .c-explanation-list__overview__title {
  }
  .c-explanation-list__overview.--type-01 .c-explanation-list__overview__text {
  }
  .c-explanation-list__overview.--type-02 {
    padding-top: calc(14 / var(--font-size) * 1rem);
    margin-top: calc(14 / var(--font-size) * 1rem);
    position: relative;
  }
  .c-explanation-list__overview.--type-02:before {
    content: '';
    background-color: var(--border-color);
    display: block;
    width: 100%;
    height: calc(1 / var(--font-size) * 1rem);
    position: absolute;
    top: calc(0 / var(--font-size) * 1rem);
    left: 0;
  }
  .c-explanation-list__overview.--type-02 .c-explanation-list__overview__title {
  }
  .c-explanation-list__overview.--type-02 .c-explanation-list__overview__text {
  }
}

/* ==========================================================================
  NEWS COMPONENT
========================================================================== */

@media all and (min-width: 768px), print {
  .c-overview-list {
    --overview-list-font-size: 16;
    width: 100%;
  }
  .c-overview-list__item {
    padding: calc(16 / var(--font-size) * 1rem) 0;
    border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--border-color);
    display: flex;
  }
  .c-overview-list__item:first-child {
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--border-color);
  }
  .c-overview-list__item__title {
    font-family: var(--font-zen-maru-gothic);
    font-size: calc(var(--overview-list-font-size) / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1.8;
    max-width: calc(223 / var(--font-size) * 1rem);
    width: 100%;
  }
  .c-overview-list__item__text {
    font-size: calc(var(--overview-list-font-size) / var(--font-size) * 1rem);
    line-height: 1.8;
    max-width: calc(773 / var(--font-size) * 1rem);
    width: 100%;
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
}

@media all and (max-width: 767px) {
  .c-overview-list {
    --overview-list-font-size: 16;
    width: 100%;
  }
  .c-overview-list__item {
    padding: calc(20 / var(--font-size) * 1rem) 0;
    border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--border-color);
  }
  .c-overview-list__item:first-child {
    border-top: calc(1 / var(--font-size) * 1rem) solid var(--border-color);
  }
  .c-overview-list__item__title {
    font-family: var(--font-zen-maru-gothic);
    font-size: calc(var(--overview-list-font-size) / var(--font-size) * 1rem);
    font-weight: 700;
    line-height: 1.8;
    text-align: center;
  }
  .c-overview-list__item__text {
    font-size: calc(var(--overview-list-font-size) / var(--font-size) * 1rem);
    line-height: 1.8;
    text-align: center;
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
}

/* ==========================================================================
  FLOW LIST
========================================================================== */

@media all and (min-width: 768px), print {
  .c-flow-list {
    --flow-list-font-size: 16;
    max-width:calc(458 / var(--font-size) * 1rem);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .c-flow-list__item {
    padding: calc(6 / var(--font-size) * 1rem) 0;
    background-color: var(--purple-color-20);
    border-radius:calc(20 / var(--font-size) * 1rem);
    text-align: center;
    margin-top: calc(23 / var(--font-size) * 1rem);
    position: relative;
  }
  .c-flow-list__item:before{
    content:"";
    background-color: var(--purple-color-50);
    mask-image: url(/assets/img/common/ico_tri_round.svg);
    mask-size:contain;
    mask-position:center center;
    mask-repeat:no-repeat;
    display: block;
    width:calc(30 / var(--font-size) * 1rem);
    height:calc(15 / var(--font-size) * 1rem);
    position: absolute;
    left:0;
    right:0;
    bottom:calc(-20 / var(--font-size) * 1rem);
    margin:0 auto;
  }
  .c-flow-list__item:last-child:before {
    content:none;
  }
}

@media all and (max-width: 767px) {
  .c-flow-list {
    --flow-list-font-size: 16;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .c-flow-list__item {
    padding: calc(6 / var(--font-size) * 1rem) 0;
    background-color: var(--purple-color-20);
    border-radius:calc(20 / var(--font-size) * 1rem);
    text-align: center;
    margin-top: calc(23 / var(--font-size) * 1rem);
    position: relative;
  }
  .c-flow-list__item:before{
    content:"";
    background-color: var(--purple-color-50);
    mask-image: url(/assets/img/common/ico_tri_round.svg);
    mask-size:contain;
    mask-position:center center;
    mask-repeat:no-repeat;
    display: block;
    width:calc(26 / var(--font-size) * 1rem);
    height:calc(12 / var(--font-size) * 1rem);
    position: absolute;
    left:0;
    right:0;
    bottom:calc(-18 / var(--font-size) * 1rem);
    margin:0 auto;
  }
  .c-flow-list__item:last-child:before {
    content:none;
  }
}

/* ==========================================================================
  DESCRIPTION LIST
========================================================================== */

@media all and (min-width: 768px), print {
  .c-description-list {
    --description-list-font-size: 16;
    padding-bottom: calc(16 / var(--font-size) * 1rem);
    border-bottom:calc(1 / var(--font-size) * 1rem) solid var(--purple-color);
  }
  .c-description-list + .c-description-list{
    padding-top: calc(16 / var(--font-size) * 1rem);
  }
  .c-description-list:last-child{
    padding-bottom: 0;
    border-bottom:0;
  }
  .c-description-list__title {
    font-weight: 700;
  }
  .c-description-list__text{

  }
}
@media all and (max-width: 767px) {
  .c-description-list {
    --description-list-font-size: 16;
    padding-bottom: calc(16 / var(--font-size) * 1rem);
    border-bottom:calc(1 / var(--font-size) * 1rem) solid var(--purple-color);
  }
  .c-description-list + .c-description-list{
    padding-top: calc(16 / var(--font-size) * 1rem);
  }
  .c-description-list:last-child{
    padding-bottom: 0;
    border-bottom:0;
  }
  .c-description-list__title {
    font-weight: 700;
  }
  .c-description-list__text{

  }
}

/* ==========================================================================
  TABLE HEAD ICON
========================================================================== */

@media all and (min-width: 768px), print {
  .c-table-head-icon-title {
    display:flex;
    align-items:center;
  }
  .c-table-head-icon-title.--adjust{
    margin-right: calc(-20 / var(--font-size) * 1rem);
  }

  .c-table-head-icon-title__icon{
    mask-size:contain;
    mask-position:center center;
    mask-repeat:no-repeat !important;
    max-width:calc(100 / var(--font-size) * 1rem);
    width:100%;
  }

  .c-table-head-icon-title__icon.--purple{
    background:var(--purple-grade);
  }

  /** **/
  .c-table-head-icon-title__icon.--icon-aircon{
    mask-image: url(/assets/img/common/ico_aircon.svg);
    max-width:calc(102 / var(--font-size) * 1rem);
    height:calc(53 / var(--font-size) * 1rem);
    margin-left: calc(-8 / var(--font-size) * 1rem);
  }
  .c-table-head-icon-title__icon.--icon-refrigerator{
    mask-image: url(/assets/img/common/ico_refrigerator.svg);
    max-width:calc(52 / var(--font-size) * 1rem);
    height:calc(82 / var(--font-size) * 1rem);
    margin-left: calc(12 / var(--font-size) * 1rem);
  }
  .c-table-head-icon-title__icon.--icon-water-heater{
    mask-image: url(/assets/img/common/ico_water-heater.svg);
    max-width:calc(53 / var(--font-size) * 1rem);
    height:calc(84 / var(--font-size) * 1rem);
    margin-left: calc(12 / var(--font-size) * 1rem);
  }
  .c-table-head-icon-title__icon.--icon-led{
    mask-image: url(/assets/img/common/ico_led.svg);
    max-width:calc(79 / var(--font-size) * 1rem);
    height:calc(51 / var(--font-size) * 1rem);
    margin-left: calc(0 / var(--font-size) * 1rem);
  }

  .c-table-head-icon-title__icon.--icon-aircon + .c-table-head-icon-title__label{
    margin-left: calc(25 / var(--font-size) * 1rem);
  }
  .c-table-head-icon-title__icon.--icon-refrigerator + .c-table-head-icon-title__label{
    margin-left: calc(58 / var(--font-size) * 1rem);
  }
  .c-table-head-icon-title__icon.--icon-water-heater + .c-table-head-icon-title__label{
    margin-left: calc(58 / var(--font-size) * 1rem);
  }
  .c-table-head-icon-title__icon.--icon-led + .c-table-head-icon-title__label{
    margin-left: calc(21 / var(--font-size) * 1rem);
  }
}

@media all and (max-width: 767px) {
  .c-table-head-icon-title {
    display:flex;
    align-items:center;
    justify-content: center;
  }
  .c-table-head-icon-title.--adjust{
  }

  .c-table-head-icon-title__icon{
    mask-size:contain;
    mask-position:center center;
    mask-repeat:no-repeat !important;
    max-width:calc(100 / var(--font-size) * 1rem);
    width:100%;
  }

  .c-table-head-icon-title__icon.--purple{
    background:var(--purple-grade);
  }

  /** **/
  .c-table-head-icon-title__icon.--icon-aircon{
    mask-image: url(/assets/img/common/ico_aircon.svg);
    max-width:calc(102 / var(--font-size) * 1rem);
    height:calc(53 / var(--font-size) * 1rem);
    margin-left: calc(-25 / var(--font-size) * 1rem);
  }
  .c-table-head-icon-title__icon.--icon-refrigerator{
    mask-image: url(/assets/img/common/ico_refrigerator.svg);
    max-width:calc(52 / var(--font-size) * 1rem);
    height:calc(82 / var(--font-size) * 1rem);
  }
  .c-table-head-icon-title__icon.--icon-water-heater{
    mask-image: url(/assets/img/common/ico_water-heater.svg);
    max-width:calc(53 / var(--font-size) * 1rem);
    height:calc(84 / var(--font-size) * 1rem);
  }
  .c-table-head-icon-title__icon.--icon-led{
    mask-image: url(/assets/img/common/ico_led.svg);
    max-width:calc(79 / var(--font-size) * 1rem);
    height:calc(51 / var(--font-size) * 1rem);
  }

  .c-table-head-icon-title__icon.--icon-aircon + .c-table-head-icon-title__label{
    margin-left: calc(25 / var(--font-size) * 1rem);
  }
  .c-table-head-icon-title__icon.--icon-refrigerator + .c-table-head-icon-title__label{
    margin-left: calc(58 / var(--font-size) * 1rem);
  }
  .c-table-head-icon-title__icon.--icon-water-heater + .c-table-head-icon-title__label{
    margin-left: calc(58 / var(--font-size) * 1rem);
  }
  .c-table-head-icon-title__icon.--icon-led + .c-table-head-icon-title__label{
    margin-left: calc(21 / var(--font-size) * 1rem);
  }
}

/* ==========================================================================
  TABLE HEAD ICON
========================================================================== */

@media all and (min-width: 768px), print {
  .c-table-text-link-button-list{
    
  }
  .c-table-text-link-button{
    display: inline-block;
  }
  .c-table-text-link-button__link{
    display: block;
  }
  .c-table-text-link-button__in{
    display:flex;
    align-items:center;
  }
  .c-table-text-link-button__icon{
    max-width:calc(26 / var(--font-size) * 1rem);
    width:100%;
  }
  .c-table-text-link-button__icon img,
  .c-table-text-link-button__icon svg{
    max-width:100%;
    max-height:100%;
  }

  .c-table-text-link-button__icon.--ico-excel{
    max-width:calc(26 / var(--font-size) * 1rem);
  }
  .c-table-text-link-button__label{
    text-decoration: underline;
    margin-left:calc(15 / var(--font-size) * 1rem);
  }

  .c-table-text-link-button-list .c-table-text-link-button + .c-table-text-link-button{
    margin-top:calc(40 / var(--font-size) * 1rem);
  }
}

@media all and (max-width: 767px) {
  .c-table-text-link-button-list{
    
  }
  .c-table-text-link-button{
    display: inline-block;
  }
  .c-table-text-link-button__link{
    display: block;
  }
  .c-table-text-link-button__in{
    display:flex;
    align-items:center;
  }
  .c-table-text-link-button__icon{
    max-width:calc(26 / var(--font-size) * 1rem);
    width:100%;
  }
  .c-table-text-link-button__icon img,
  .c-table-text-link-button__icon svg{
    max-width:100%;
    max-height:100%;
  }

  .c-table-text-link-button__icon.--ico-excel{
    max-width:calc(26 / var(--font-size) * 1rem);
  }
  .c-table-text-link-button__label{
    text-decoration: underline;
    margin-left:calc(15 / var(--font-size) * 1rem);
  }

  .c-table-text-link-button-list .c-table-text-link-button + .c-table-text-link-button{
    margin-top:calc(40 / var(--font-size) * 1rem);
  }
}


/* ==========================================================================
  PAGE SWITCH
========================================================================== */

@media all and (min-width: 768px), print {
  .c-page-switch{
    margin-top: calc(100 / var(--font-size) * 1rem);
  }
  .c-page-switch__in{
  }
  .c-page-switch__body{
    border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-400);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap: wrap;
  }
  .c-page-switch__button{
    max-width:calc(189 / var(--font-size) * 1rem);
    height:calc(50 / var(--font-size) * 1rem);
    width:100%;
  }
  .c-page-switch__button__link{
    text-align: center;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    position: relative;
    transition:0.3s ease;
  }
  .c-page-switch__button__link:before{
    content:"";
    background-color: var(--primary-color-500);
    display: block;
    width:100%;
    height:calc(5 / var(--font-size) * 1rem);
    position: absolute;
    left:0;
    bottom:calc(-2.5 / var(--font-size) * 1rem);
    content:none;
  }
  .c-page-switch__button__label{
    font-family: var(--font-zen-maru-gothic);
    font-size: calc(24 / var(--font-size)* 1rem);
    font-weight: 700;
    color: var(--gray-color-400);
  }
  .c-page-switch__button__link:hover{
    opacity:0.7;
  }

  /** **/
  .c-page-switch__button.--is-current .c-page-switch__button__link{
    pointer-events: none;
  }
  .c-page-switch__button.--is-current .c-page-switch__button__link:before{
    content:"";
  }
  .c-page-switch__button.--is-current .c-page-switch__button__label{
    color:var(--primary-color-500);
  }
}

@media all and (min-width: 768px) and (max-width: 810px) {
  .c-page-switch__button {
    max-width: calc(100% / 4);
  }
}

@media all and (max-width: 767px) {
  .c-page-switch{
    margin-top: calc(30 / var(--font-size) * 1rem);
  }
  .c-page-switch__in{
    padding: 0 calc(20 / var(--font-size)* 1rem);
  }
  .c-page-switch__body{
    border-bottom: calc(1 / var(--font-size) * 1rem) solid var(--gray-color-400);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap: wrap;
  }
  .c-page-switch__button{
    max-width:calc(100% / 4);
    height: calc(55 / var(--font-size) * 1rem);
    width:100%;
  }
  .c-page-switch__button__link{
    text-align: center;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    position: relative;
    transition:0.3s ease;
  }
  .c-page-switch__button__link:before{
    content:"";
    background-color: var(--primary-color-500);
    display: block;
    width:100%;
    height: calc(3 / var(--font-size) * 1rem);
    position: absolute;
    left:0;
    bottom: calc(-1.5 / var(--font-size) * 1rem);
    content:none;
  }
  .c-page-switch__button__label{
    font-family: var(--font-zen-maru-gothic);
    font-size: calc(20 / var(--font-size) * 1rem);
    font-weight: 700;
    color: var(--gray-color-400);
  }
  .c-page-switch__button__link:hover{
    opacity:0.7;
  }

  /** **/
  .c-page-switch__button.--is-current .c-page-switch__button__link{
    pointer-events: none;
  }
  .c-page-switch__button.--is-current .c-page-switch__button__link:before{
    content:"";
  }
  .c-page-switch__button.--is-current .c-page-switch__button__label{
    color:var(--primary-color-500);
  }
}

@media all and (max-width: 600px) {
  .c-page-switch__button{
    max-width:calc(100% / 4);
    height: 11vw;
  }
  .c-page-switch__button__label{
    font-size: 3.5vw;
  }
}

/* ==========================================================================
  CATEGORY SWITCH
========================================================================== */

@media all and (min-width: 768px), print {
  .c-category-switch{
    margin-top: calc(30 / var(--font-size) * 1rem);
  }
  .c-category-switch__in{
    padding: 0 calc(20 / var(--font-size)* 1rem);
  }
  .c-category-switch__body{
    max-width: calc(740 / var(--font-size)* 1rem);
    width:100%;
    display:flex;
    flex-wrap: wrap;
    gap: calc(10 / var(--font-size)* 1rem);
    margin: 0 auto;
  }
  .c-category-switch__button{
    max-width:calc(177 / var(--font-size) * 1rem);
    height:calc(60 / var(--font-size) * 1rem);
    width:100%;
  }
  .c-category-switch__button__link{
    border:calc(1 / var(--font-size) * 1rem) solid var(--gray-color-400);
    border-radius:calc(10 / var(--font-size) * 1rem);
    text-align: center;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    position: relative;
    transition:0.3s ease;
  }
  .c-category-switch__button__label{
    color: var(--gray-color-400);
  }
  .c-category-switch__button__link:hover{
    opacity:0.7;
  }

  /** **/
  .c-category-switch__button.--is-current .c-category-switch__button__link{
    background-color: var(--secondary-color-300);
    border-color:var(--secondary-color-300);
    pointer-events: none;
  }
  .c-category-switch__button.--is-current .c-category-switch__button__label{
    color:var(--black-color);
  }
}

@media all and (max-width: 767px) {
  .c-category-switch{
    margin-top: calc(30 / var(--font-size) * 1rem);
  }
  .c-category-switch__in{
    padding: 0 calc(20 / var(--font-size)* 1rem);
  }
  .c-category-switch__body{
    max-width: calc(740 / var(--font-size)* 1rem);
    width:100%;
    display:flex;
    flex-wrap: wrap;
    gap: calc(10 / var(--font-size)* 1rem);
    margin: 0 auto;
  }
  .c-category-switch__button{
    max-width:calc(100% / 2 - calc(5 / var(--font-size) * 1rem));
    height:calc(52 / var(--font-size) * 1rem);
    width:100%;
  }
  .c-category-switch__button__link{
    border:calc(1 / var(--font-size) * 1rem) solid var(--gray-color-400);
    border-radius:calc(10 / var(--font-size) * 1rem);
    text-align: center;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    position: relative;
    transition:0.3s ease;
  }
  .c-category-switch__button__label{
    color: var(--gray-color-400);
    font-size:calc(14 / var(--font-size) * 1rem);
  }
  .c-category-switch__button__link:hover{
    opacity:0.7;
  }

  /** **/
  .c-category-switch__button.--is-current .c-category-switch__button__link{
    background-color: var(--secondary-color-300);
    border-color:var(--secondary-color-300);
    pointer-events: none;
  }
  .c-category-switch__button.--is-current .c-category-switch__button__label{
    color:var(--black-color);
  }
}


/* ==========================================================================
  PAGENATION
========================================================================== */

@media all and (min-width: 768px), print {
  /* ページネーション  */
  .c-pagination-desc {
    margin-top: calc(48 / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
  }
  .c-pagination-button {
    width: calc(43 / var(--font-size) * 1rem);
    min-width: calc(43 / var(--font-size) * 1rem);
    height: calc(43 / var(--font-size) * 1rem);
    border-radius: 100%;
    box-sizing: border-box;
    transition: all 0.3s;
    position: relative;
    top:calc(1 / var(--font-size) * 1rem);
  }
  .c-pagination-button--prev {
    margin-right: calc(12 / var(--font-size) * 1rem);
  }
  .c-pagination-button--next {
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
  .c-pagination-button__ico {
    width: 100%;
    height: 100%;
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .c-pagination-button:hover {
    background-color: var(--secondary-color-300);
    border-color: var(--secondary-color-300);
  }
  .c-pagination-button-list {
    display: flex;
    flex-wrap:wrap;
    margin-top: calc(-5 / var(--font-size) * 1rem);
    margin-left: calc(-12 / var(--font-size) * 1rem);
  }
  .c-pagination-button-list__item {
    width: calc(43 / var(--font-size) * 1rem);
    height: calc(43 / var(--font-size) * 1rem);
    margin-top: calc(5 / var(--font-size) * 1rem);
    margin-left: calc(24 / var(--font-size) * 1rem);
  }
  .c-pagination-button-list__item a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: calc(14 / var(--font-size) * 1rem);
    background-color: var(--color-white);
    border:calc(1 / var(--font-size) * 1rem) solid var(--gray-color-400);
    line-height: 1;
    transition: all 0.3s;
    vertical-align: middle;
    border-radius:100%;
  }
  .c-pagination-button-list__item a:hover {
    background-color: var(--gray-color-400);
    color: var(--color-white);
  }
  .c-pagination-button-list__item--current a {
    border:calc(1 / var(--font-size) * 1rem) solid var(--secondary-color-300);
    background-color: var(--secondary-color-300);
    color: var(--color-white);
    pointer-events: none;
  }
  .c-pagination-button-list__item--dot,
  .c-pagination-button-list__item--dot + .c-pagination-button-list__item{
    margin-left: calc(7 / var(--font-size) * 1rem);
  }
  .c-pagination-button-list__item--dot a{
    pointer-events:none;
    border:0;
  }
  .c-pagination-button-list__item:first-child{
    margin-left: calc(12 / var(--font-size)* 1rem);
  }
  .c-pagination-button--prev .c-pagination-button__ico::before{
    content: "";
    border:calc(1 / var(--font-size) * 1rem) solid var(--black-color);
    border-right:0;
    border-bottom:0;
    display: block;
    width:calc(14 / var(--font-size) * 1rem);
    min-width:calc(14 / var(--font-size) * 1rem);
    height:calc(14 / var(--font-size) * 1rem);
    transform:rotate(-45deg);
    transition: all 0.3s;
  }
  .c-pagination-button--prev .c-pagination-button__ico:hover::before {
    border:calc(1 / var(--font-size) * 1rem) solid var(--color-white);
    border-right:0;
    border-bottom:0;
    transition: all 0.3s;
  }
  .c-pagination-button--next .c-pagination-button__ico::before{
    content: "";
    border:calc(1 / var(--font-size) * 1rem) solid var(--black-color);
    border-left:0;
    border-bottom:0;
    display: block;
    width:calc(14 / var(--font-size) * 1rem);
    min-width:calc(14 / var(--font-size) * 1rem);
    height:calc(14 / var(--font-size) * 1rem);
    transform:rotate(45deg);
    margin:auto 0;
  }
  .c-pagination-button--next .c-pagination-button__ico:hover::before {
    border:calc(1 / var(--font-size) * 1rem) solid var(--color-white);
    border-left:0;
    border-bottom:0;
    transition: all 0.3s;
  }
}

@media all and (max-width: 767px), print {
  /* ページネーション  */
  .c-pagination-desc {
    margin-top: calc(48 / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
  }
  .c-pagination-button {
    width: calc(34 / var(--font-size) * 1rem);
    min-width: calc(43 / var(--font-size) * 1rem);
    height: calc(34 / var(--font-size) * 1rem);
    border-radius: 100%;
    box-sizing: border-box;
    transition: all 0.3s;
    position: relative;
    top:calc(1 / var(--font-size) * 1rem);
  }
  .c-pagination-button--prev {
    margin-right: calc(5 / var(--font-size) * 1rem);
  }
  .c-pagination-button--next {
    margin-left: calc(5 / var(--font-size) * 1rem);
  }
  .c-pagination-button__ico {
    width: 100%;
    height: 100%;
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .c-pagination-button:hover {
    background-color: var(--secondary-color-300);
    border-color: var(--secondary-color-300);
  }
  .c-pagination-button-list {
    display: flex;
    flex-wrap:wrap;
    margin-top: calc(-5 / var(--font-size) * 1rem);
    margin-left: calc(-12 / var(--font-size) * 1rem);
  }
  .c-pagination-button-list__item {
    width: calc(34 / var(--font-size) * 1rem);
    height: calc(34 / var(--font-size) * 1rem);
    margin-top: calc(5 / var(--font-size) * 1rem);
    margin-left: calc(11 / var(--font-size) * 1rem);
  }
  .c-pagination-button-list__item a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: calc(12 / var(--font-size) * 1rem);
    background-color: var(--color-white);
    border:calc(1 / var(--font-size) * 1rem) solid var(--gray-color-400);
    line-height: 1;
    transition: all 0.3s;
    vertical-align: middle;
    border-radius:100%;
  }
  .c-pagination-button-list__item a:hover {
    background-color: var(--gray-color-400);
    color: var(--color-white);
  }
  .c-pagination-button-list__item--current a {
    border:calc(1 / var(--font-size) * 1rem) solid var(--secondary-color-300);
    background-color: var(--secondary-color-300);
    color: var(--color-white);
    pointer-events: none;
  }
  .c-pagination-button-list__item--dot,
  .c-pagination-button-list__item--dot + .c-pagination-button-list__item{
    margin-left: calc(7 / var(--font-size) * 1rem);
  }
  .c-pagination-button-list__item--dot a{
    pointer-events:none;
    border:0;
  }
  .c-pagination-button-list__item:first-child{
    margin-left: calc(12 / var(--font-size)* 1rem);
  }
  .c-pagination-button--prev .c-pagination-button__ico::before{
    content: "";
    border:calc(1 / var(--font-size) * 1rem) solid var(--black-color);
    border-right:0;
    border-bottom:0;
    display: block;
    width: calc(10 / var(--font-size) * 1rem);
    min-width: calc(10 / var(--font-size) * 1rem);
    height: calc(10 / var(--font-size) * 1rem);
    transform:rotate(-45deg);
    transition: all 0.3s;
  }
  .c-pagination-button--prev .c-pagination-button__ico:hover::before {
    border:calc(1 / var(--font-size) * 1rem) solid var(--color-white);
    border-right:0;
    border-bottom:0;
    transition: all 0.3s;
  }
  .c-pagination-button--next .c-pagination-button__ico::before{
    content: "";
    border:calc(1 / var(--font-size) * 1rem) solid var(--black-color);
    border-left:0;
    border-bottom:0;
    display: block;
    width: calc(10 / var(--font-size) * 1rem);
    min-width: calc(10 / var(--font-size) * 1rem);
    height: calc(10 / var(--font-size) * 1rem);
    transform:rotate(45deg);
    margin:auto 0;
  }
  .c-pagination-button--next .c-pagination-button__ico:hover::before {
    border:calc(1 / var(--font-size) * 1rem) solid var(--color-white);
    border-left:0;
    border-bottom:0;
    transition: all 0.3s;
  }
}

@media all and (max-width: 350px), print {
  .c-pagination-button {
    width: calc(28 / var(--font-size)* 1rem);
    min-width: calc(32 / var(--font-size)* 1rem);
    height: calc(28 / var(--font-size)* 1rem);
    top: calc(4 / var(--font-size)* 1rem);
  }
}

/* ==========================================================================
  NUMBER TITLE
========================================================================== */

@media all and (min-width: 768px), print {
  .c-number-title{
    display:flex;
    align-items:center;
  }
  .c-number-title__number{
    background-color: var(--primary-color-500);
    border-radius:100%;
    font-family: var(--font-zen-maru-gothic);
    font-size:calc(20 / var(--font-size)* 1rem);
    font-weight: 700;
    color:var(--white-color);
    width:calc(36 / var(--font-size)* 1rem);
    height:calc(36 / var(--font-size)* 1rem);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink: 0;
  }
  .c-number-title__label{
    color: var(--primary-color-500);
    font-family: var(--font-zen-maru-gothic);
    font-size:calc(20 / var(--font-size)* 1rem);
    font-weight: 700;
    margin-left: calc(9 / var(--font-size)* 1rem);
  }

  /** **/
  .c-number-title.--center{
    justify-content: center;
  }
}

@media all and (max-width: 767px) {
  .c-number-title{
    display:flex;
    align-items:center;
  }
  .c-number-title__number{
    background-color: var(--primary-color-500);
    border-radius:100%;
    font-family: var(--font-zen-maru-gothic);
    font-size:calc(20 / var(--font-size)* 1rem);
    font-weight: 700;
    color:var(--white-color);
    width:calc(36 / var(--font-size)* 1rem);
    height:calc(36 / var(--font-size)* 1rem);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink: 0;
  }
  .c-number-title__label{
    color: var(--primary-color-500);
    font-family: var(--font-zen-maru-gothic);
    font-size:calc(20 / var(--font-size)* 1rem);
    font-weight: 700;
    margin-left: calc(9 / var(--font-size)* 1rem);
  }

  /** **/
  .c-number-title.--center{
    justify-content: center;
  }
}

/* ==========================================================================
  CUSHION
========================================================================== */

@media all and (min-width: 768px), print {
  .c-cushion{
    padding: calc(45 / var(--font-size) * 1rem) calc(28 / var(--font-size) * 1rem);
    border-radius:calc(22 / var(--font-size) * 1rem);
  }
  .c-cushion__body{

  }
  .c-cushion-list{
    display: flex;
    flex-wrap: wrap;
    gap:calc(30 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem);
    justify-content: center;
  }
  .c-cushion-list.--max-width-826{
    max-width:calc(826 / var(--font-size) * 1rem);
    margin-left: auto;
    margin-right: auto;
  }
  .c-cushion-list .c-cushion{
    padding: calc(20 / var(--font-size) * 1rem) calc(28 / var(--font-size) * 1rem) calc(40 / var(--font-size) * 1rem) calc(28 / var(--font-size) * 1rem);
    width:calc(100% / 2 - calc(15 / var(--font-size) * 1rem));
  }
}

@media all and (max-width: 767px) {
  .c-cushion{
    padding: calc(30 / var(--font-size) * 1rem) calc(15 / var(--font-size) * 1rem);
    border-radius:calc(20 / var(--font-size) * 1rem);
  }
  .c-cushion__body{

  }
  .c-cushion.--size-960{
    padding: calc(24 / var(--font-size) * 1rem);
    border-radius:calc(10 / var(--font-size) * 1rem);
  }

  .c-cushion .c-block-heading{
    display: block;
  }

  .c-cushion-list{
    display: flex;
    flex-wrap: wrap;
    gap:calc(30 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem);
    justify-content: center;
  }
  .c-cushion-list.--max-width-826{
  }
  .c-cushion-list .c-cushion{
    padding: calc(20 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
    width:100%;
  }
}



/* --------------------------------------------------------------------------
   modal common
-------------------------------------------------------------------------- */
html.is-modal-opened {
  overflow: hidden;
}
.js-modal-container {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: -19999;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}
.is-modal-opened .js-modal-container.is-modal-shown {
  z-index: 19999;
}
.js-modal {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  visibility: hidden;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-duration: 1s;
  transition-property: visibility;
}
.js-modal.is-modal-active {
  visibility: visible;
}
.js-modal-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 0;
  transition-delay: 0.25s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-duration: 0.75s;
  transition-property: opacity;
  will-change: opacity;
}
.is-modal-active .js-modal-bg {
  z-index: 1;
  opacity: 1;
  transition-delay: 0s;
}
.js-modal-main{
  display: none;
}
.js-modal-main.is-modal-active{
  display: block;
}
.js-modal-body {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  opacity: 0;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-duration: 0.9s;
  transition-property: opacity;
}
.is-modal-active .js-modal-body {
  opacity: 1;
  transition-delay: 0.1s;
}
.js-modal-scroll {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
  Modal
-------------------------------------------------------------------------- */

.modal .l-section__body {
  background: var(--white-color);
}

@media all and (min-width: 759.1px), print {
  .modal__scroll-in {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .modal-main {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: calc(760 / var(--font-size) * 1rem);
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(10 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem) calc(50 / var(--font-size) * 1rem);
    margin: 0 auto;
  }
  .modal-main__in{
    position: relative;
  }
  .l-modal-body {
    background: var(--white-color);
    border-radius: calc(12 / var(--font-size) * 1rem);
    overflow: hidden;
    transform: translate3d(0, 0, 0);
  }
  .modal__close{
    display: flex;
    justify-content: flex-end;
    margin: 0 0 calc(10 / var(--font-size) * 1rem) 0;
  }
  .modal-close-btn{
    width: calc(35 / var(--font-size) * 1rem);
    height: calc(35 / var(--font-size) * 1rem);
    margin-left: auto;
    cursor: pointer;
    position: relative;
    transition:0.3s ease;
  }
  .modal-close-btn:hover{
    opacity:0.7;
  }
  .modal-close-btn:before,
  .modal-close-btn:after{
    content:"";
    background-color: var(--white-color);
    display: block;
    width: calc(35 / var(--font-size) * 1rem);
    height: calc(2 / var(--font-size) * 1rem);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    background-color: var(--white-color);
    margin: auto;
  }
  .modal-close-btn:before{
    transform: rotate(45deg);
  }
  .modal-close-btn:after{
    transform: rotate(-45deg);
  }
  .modal-close-btn__ico svg{
    fill: var(--white-color);
  }

  .modal .l-section__body {
    padding: calc(32 / var(--font-size) * 1rem) calc(48 / var(--font-size) * 1rem);
    width: calc(900 / var(--font-size) * 1rem);
  }
  .modal-main .--y-movie .l-section__body{
    background:transparent;
    padding: 0;
  }
  .modal-main .--y-movie .l-section__body video,
  .modal-main .--y-movie .l-section__body iframe{
    width:100%;
    height:calc(506 / var(--font-size) * 1rem);
    vertical-align: bottom;
  }
}


@media all and (min-width: 759.1px) and (max-width: 980px) {
  .modal .l-section__body {
    width: 90vw;
  }
  .modal-main .--y-movie .l-section__body video, .modal-main .--y-movie .l-section__body iframe {
    height: 50.5vw;
  }
}


@media all and (max-width: 759px) {
  .modal__scroll-in {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .modal-main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
  }
  .modal-main__in{
    position: relative;
  }
  .modal__close{
    display: flex;
    justify-content: flex-end;
    margin: 0 0 calc(2 / var(--font-size) * 1rem) 0;
    padding: calc(5 / var(--font-size) * 1rem) 0;
  }
  .modal-close-btn{
    width: calc(35 / var(--font-size) * 1rem);
    height: calc(35 / var(--font-size) * 1rem);
    margin-left: auto;
    cursor: pointer;
    position: relative;
    transition:0.3s ease;
  }
  .modal-close-btn:before,
  .modal-close-btn:after{
    content:"";
    background-color: var(--white-color);
    display: block;
    width: calc(35 / var(--font-size) * 1rem);
    height: calc(2 / var(--font-size) * 1rem);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    margin: auto;
  }
  .modal-close-btn:before{
    transform: rotate(45deg);
  }
  .modal-close-btn:after{
    transform: rotate(-45deg);
  }
  .modal-close-btn__ico svg{
    fill: var(--white-color);
  }
  .modal-close-btn__ico svg{
    fill: var(--white-color);
  }

  .modal .l-section__body {
    padding: calc(20 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
    width: 85.333vw;
  }
  .modal-main .--y-movie .l-section__body{
    background:transparent;
    padding: 0;
  }
  .modal-main .--y-movie .l-section__body video,
  .modal-main .--y-movie .l-section__body iframe{
    width:100%;
    height:47.733vw;
    vertical-align: bottom;
  }

}


/* --------------------------------------------------------------------------
  Accordion
-------------------------------------------------------------------------- */

.js-accordion-container{
  transition:0.3s ease;
  overflow:hidden;
}