@charset "UTF-8";

:root {
  --white-color: #fff;
  --black-color: #231815;

  --primary-color-600: #01a13f;
  --primary-color-500: #50c310;
  --primary-color-400: #c9eccb;
  --primary-color-300: #def5e7;

  --gray-color-700: #4d4d4d;
  --gray-color-500: #b0b0b0;
  --gray-color-300: #cccccc;
  --gray-color-200: #d0d0d0;
  --gray-color-150: #e9e8e8;
  --gray-color-100: #f1f1f1;

  --orange-color-500: #ff6200;

  --yellow-color-300: #FEF5CC;
  --yellow-color-100: #faf6f1;

  --disable-color: var(--gray-color-300);
  --back-color: var(--gray-color-300);
  --font-size: 16;
}

/* ==========================================================================
  FONT
========================================================================== */
@media all and (min-width: 768px), print{
  html {
    overflow-x: hidden;
    font-size: calc(16 / 1440 * 100vw);
  }
}
@media screen and (max-width: 767px){
  html {
    overflow-x: hidden;
    font-size: calc(16 / 375 * 100vw);
  }
}
body {
  overflow-x: hidden;
  font-size: 1rem;
  color: var(--black-color, #020111);
  font-weight: 500;
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  overflow-x: hidden;
}

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

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

html {
  font-family: serif;
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--black-color, #020111);
  font-weight: 500;
  font-family: 'Noto Sans JP', 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;
  cursor: pointer;
}

button:focus {
  outline: none;
}

input,
button,
select,
textarea {
  line-height: inherit;
}

input[type='text'],
input[type='submit'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
}

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


/* --------------------------------------------------------------------------
  非表示
-------------------------------------------------------------------------- */

.u-hide {
  display: none !important;
}

/* --------------------------------------------------------------------------
  行揃え
-------------------------------------------------------------------------- */

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

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

.u-right {
  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 !important;
}

.u-bold {
  font-weight: 700 !important;
}
.u-w-500 {
  font-weight: 500 !important;
}

strong {
  font-weight: bold;
}

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

/* primary */
.u-color-primary {
  color: var(--primary-color-500);
}

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

/* --------------------------------------------------------------------------
  ボタン非活性化
-------------------------------------------------------------------------- */
.c-btn.u-disabled {
  --btn-bg-color: var(--gray-color-500)!important;
  pointer-events: none!important;
}
.c-btn.u-disabled .c-btn__body {
  padding: calc(8 / var(--font-size) * 1rem) calc(var(--btn-px) / var(--font-size) * 1rem)!important;
}

.c-btn.u-already {
  --btn-bg-color: var(--gray-color-500)!important;
  pointer-events: none!important;
}
.c-btn.u-already .c-btn__body {
  padding: calc(8 / var(--font-size) * 1rem) calc(var(--btn-px) / var(--font-size) * 1rem)!important;
}

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

/* --------------------------------------------------------------------------
  CONTAINER
-------------------------------------------------------------------------- */

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

@media screen and (max-width: 767px){
  .l-main-container {
  }
  .l-main-container__in {
  }
  .l-main-container__in:before {
  }
}

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

@media all and (min-width: 768px), print{
  .l-sec {
    position: relative;
    overflow: hidden;
  }
  .l-sec:not(:last-child)::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - calc(15 / var(--font-size) * 1rem));
    height: calc(10 / var(--font-size) * 1rem);
    background: url(../img/common/border.png) no-repeat bottom / 100%;
  }
  .l-sec__in {
    padding: 0 calc(15 / var(--font-size) * 1rem);
  }
  .l-sec__body {
    padding: calc(64 / var(--font-size) * 1rem) 0;
  }
  .l-sec__header {
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px){
  .l-sec {
    position: relative;
    overflow: hidden;
  }
  .l-sec:not(:last-child)::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - calc(15 / var(--font-size) * 1rem));
    height: calc(10 / var(--font-size) * 1rem);
    background: url(../img/common/border.png) no-repeat bottom / 100%;
  }
  .l-sec__in {
    padding: 0 calc(15 / var(--font-size) * 1rem);
  }
  .l-sec__body {
    padding: calc(50 / var(--font-size) * 1rem) 0;
  }
  .l-sec__header {
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
  HEADER
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print{
  .gheader {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 101;
  }
  .gheader-logo {
    width: calc(120 / var(--font-size) * 1rem);
  }
}
@media screen and (max-width: 767px){
  .gheader {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 101;
  }
  .gheader-logo {
    width: calc(60 / var(--font-size) * 1rem);
  }
}


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

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

@media all and (min-width: 768px), print{
  .c-txt {
    --txt-font-size: 14;
    --txt-line-height: 1.8;
    display: block;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
    line-height: var(--txt-line-height);
  }

  /* size-L */
  .c-txt-size--l {
    --txt-font-size: 18;
  }
  .c-txt-size--xl {
    --txt-font-size: 20;
  }
  .c-txt-size--xxl {
    --txt-font-size: 26;
  }
  .c-txt-size--xxxl {
    --txt-font-size: 30;
  }
  /* size-M */
  .c-txt-size--m {
    --txt-font-size: 14;
  }
  /* size-S */
  .c-txt-size--s {
    --txt-font-size: 14;
  }
  .c-txt-size--xs {
    --txt-font-size: 10;
  }

  /* line-height-L */
  .c-txt-lh--l {
    --txt-line-height: 2.2;
  }
  /* line-height-M */
  .c-txt-lh--m {
    --txt-line-height: 1.8;
  }
  /* line-height-S */
  .c-txt-lh--s {
    --txt-line-height: 1.4;
  }
}
@media screen and (max-width: 767px){
  .c-txt {
    --txt-font-size: 14;
    --txt-line-height: 1.8;
    display: block;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1rem);
    line-height: var(--txt-line-height);
  }

  /* size-L */
  .c-txt-size--l {
    --txt-font-size: 18;
  }
  .c-txt-size--xl {
    --txt-font-size: 20;
  }
  .c-txt-size--xxl {
    --txt-font-size: 26;
  }
  .c-txt-size--xxxl {
    --txt-font-size: 30;
  }
  /* size-M */
  .c-txt-size--m {
    --txt-font-size: 14;
  }
  /* size-S */
  .c-txt-size--s {
    --txt-font-size: 14;
  }
  .c-txt-size--xs {
    --txt-font-size: 10;
  }

  /* line-height-L */
  .c-txt-lh--l {
    --txt-line-height: 2.2;
  }
  /* line-height-M */
  .c-txt-lh--m {
    --txt-line-height: 1.8;
  }
  /* line-height-S */
  .c-txt-lh--s {
    --txt-line-height: 1.4;
  }
}

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

@media all and (min-width: 768px), print{
  .c-list {
    --list-font-size: 16;
    --list-line-height: 1.5;
    --list-gap-x: 0;
    --list-gap-y: 0;
  }
  .c-list--desc {
    --list-desc-color: var(--black-color);
  }
  .c-list--num {
    counter-reset: number 0;
  }
  .c-list--flex {
    --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:not(.c-list--flex) .c-list-item + .c-list-item {
    margin-top: calc(var(--list-gap-y) / var(--font-size) * 1rem);
  }
  .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--num .c-list-item::before {
    counter-increment: number 1;
    content: counter(number) '.';
  }
  .c-list-item__in {
  }
  .c-list-item__in > a {
    color: var(--primary-color);
    text-decoration: underline;
  }
  .c-list-item__in > a:hover {
    text-decoration: none;
  }

  /* L */
  .c-list--l {
    --list-font-size: 28;
  }
  /* m */
  .c-list--m {
    --list-font-size: 15;
  }
  /* s */
  .c-list--s {
    --list-font-size: 14;
  }
  /* xs */
  .c-list--xs {
    --list-font-size: 12;
  }
  /* xxs */
  .c-list--xxs {
    --list-font-size: 11;
  }

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

  .c-num-list {
    --num-list-font-size: 17;
    --num-list-color: var(--primary-color);
    --num-list-rate: var(--num-list-font-size) / 17;
    --num-list-gap-x: 0;
    --num-list-gap-y: 12;
  }
  .c-num-list__dl {
    position: relative;
    display: flex;
  }
  .c-num-list__dl + .c-num-list__dl {
    margin-top: calc(var(--num-list-gap-y) * var(--num-list-rate) / var(--font-size) * 1rem);
  }
  .c-num-list__dt {
    margin-right: calc(10 * var(--num-list-rate) / var(--font-size) * 1rem);
    padding-left: calc(5 * var(--num-list-rate) / var(--font-size) * 1rem);
    padding-bottom: calc(5 * var(--num-list-rate) / var(--font-size) * 1rem);
  }
  .c-num-list__icon {
    position: relative;
    width: calc(35 * var(--num-list-rate) / var(--font-size) * 1rem);
    height: calc(35 * var(--num-list-rate) / var(--font-size) * 1rem);
    color: var(--white-color);
    font-weight: bold;
    font-size: calc(18 * var(--num-list-rate) / var(--font-size) * 1rem);
    line-height: 1;
    display: flex;
    justify-content: center;
    z-index: 1;
    padding-top: calc(7 * var(--num-list-rate) / var(--font-size) * 1rem);
  }
  .c-num-list__icon::before,
  .c-num-list__icon::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 9999px;
    width: 100%;
    height: 100%;
  }
  .c-num-list__icon::before {
    background-color: var(--num-list-color);
    z-index: -1;
  }
  .c-num-list__icon::after {
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 0);
    background-image: repeating-linear-gradient(
      135deg,
      transparent,
      transparent calc(1 / var(--font-size) * 1rem),
      var(--num-list-color) calc(2 / var(--font-size) * 1rem),
      var(--num-list-color) calc(2 / var(--font-size) * 1rem)
    );
    margin-top: calc(5 * var(--num-list-rate) / var(--font-size) * 1rem);
    margin-left: calc(5 * var(--num-list-rate) / var(--font-size) * 1rem);
    z-index: -2;
  }
  .c-num-list__dd {
    line-height: 1.3;
    font-size: calc(var(--num-list-font-size) / var(--font-size) * 1rem);
    color: var(--num-list-color);
    font-weight: bold;
    margin-top: calc(8 * var(--num-list-rate) / var(--font-size) * 1rem);
  }
  .c-num-list__dd > small {
    font-size: calc(15 / 17 * 1em);
    line-height: 1.2;
  }
}
@media screen and (max-width: 767px){
  .c-list {
    --list-font-size: 16;
    --list-line-height: 1.5;
    --list-gap-x: 0;
    --list-gap-y: 0;
  }
  .c-list--desc {
    --list-desc-color: var(--black-color);
  }
  .c-list--num {
    counter-reset: number 0;
  }
  .c-list--flex {
    --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:not(.c-list--flex) .c-list-item + .c-list-item {
    margin-top: calc(var(--list-gap-y) / var(--font-size) * 1rem);
  }
  .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--num .c-list-item::before {
    counter-increment: number 1;
    content: counter(number) '.';
  }
  .c-list-item__in {
  }
  .c-list-item__in > a {
    color: var(--primary-color);
    text-decoration: underline;
  }
  .c-list-item__in > a:hover {
    text-decoration: none;
  }

  /* L */
  .c-list--l {
    --list-font-size: 28;
  }
  /* m */
  .c-list--m {
    --list-font-size: 15;
  }
  /* s */
  .c-list--s {
    --list-font-size: 14;
  }
  /* xs */
  .c-list--xs {
    --list-font-size: 12;
  }
  /* xxs */
  .c-list--xxs {
    --list-font-size: 11;
  }

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

  .c-num-list {
    --num-list-font-size: 17;
    --num-list-color: var(--primary-color);
    --num-list-rate: var(--num-list-font-size) / 17;
    --num-list-gap-x: 0;
    --num-list-gap-y: 12;
  }
  .c-num-list__dl {
    position: relative;
    display: flex;
  }
  .c-num-list__dl + .c-num-list__dl {
    margin-top: calc(var(--num-list-gap-y) * var(--num-list-rate) / var(--font-size) * 1rem);
  }
  .c-num-list__dt {
    margin-right: calc(10 * var(--num-list-rate) / var(--font-size) * 1rem);
    padding-left: calc(5 * var(--num-list-rate) / var(--font-size) * 1rem);
    padding-bottom: calc(5 * var(--num-list-rate) / var(--font-size) * 1rem);
  }
  .c-num-list__icon {
    position: relative;
    width: calc(35 * var(--num-list-rate) / var(--font-size) * 1rem);
    height: calc(35 * var(--num-list-rate) / var(--font-size) * 1rem);
    color: var(--white-color);
    font-weight: bold;
    font-size: calc(18 * var(--num-list-rate) / var(--font-size) * 1rem);
    line-height: 1;
    display: flex;
    justify-content: center;
    z-index: 1;
    padding-top: calc(7 * var(--num-list-rate) / var(--font-size) * 1rem);
  }
  .c-num-list__icon::before,
  .c-num-list__icon::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 9999px;
    width: 100%;
    height: 100%;
  }
  .c-num-list__icon::before {
    background-color: var(--num-list-color);
    z-index: -1;
  }
  .c-num-list__icon::after {
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 0);
    background-image: repeating-linear-gradient(
      135deg,
      transparent,
      transparent calc(1 / var(--font-size) * 1rem),
      var(--num-list-color) calc(2 / var(--font-size) * 1rem),
      var(--num-list-color) calc(2 / var(--font-size) * 1rem)
    );
    margin-top: calc(5 * var(--num-list-rate) / var(--font-size) * 1rem);
    margin-left: calc(5 * var(--num-list-rate) / var(--font-size) * 1rem);
    z-index: -2;
  }
  .c-num-list__dd {
    line-height: 1.3;
    font-size: calc(var(--num-list-font-size) / var(--font-size) * 1rem);
    color: var(--num-list-color);
    font-weight: bold;
    margin-top: calc(8 * var(--num-list-rate) / var(--font-size) * 1rem);
  }
  .c-num-list__dd > small {
    font-size: calc(15 / 17 * 1em);
    line-height: 1.2;
  }
}

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

@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 screen and (max-width: 767px){
  .c-note {
    --note-txt-font-size: 16;
    --note-position: start;
  }
  .c-note-txt {
    font-size: calc(var(--note-txt-font-size) / var(--font-size) * 1rem);
    display: flex;
    justify-content: var(--note-position);
  }
  .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;
  } 
}

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

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

@media all and (min-width: 768px), print{
  .c-btn {
    --btn-bg-color: var(--primary-color-500);
    --btn-border-color: unset;
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
    --btn-arrow-bg-color: var(--white-color);
    --btn-border-width: 2;
    --btn-txt-font-size: 16;
    --btn-min-height: 60;
    --btn-px: 12;
    --btn-ico-size: 12;
    --btn-radius: 999;

    display: block;
    width: 100%;
    transition: all 0.2s;
  }
  .c-btn.c-btn--border {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--primary-color-600);
    --btn-txt-color: var(--primary-color-600);
    --btn-arrow-color: var(--primary-color-600);
    --btn-arrow-bg-color: var(--primary-color-600);
    --btn-border-width: 2;
    --btn-txt-font-size: 16;
    --btn-min-height: 72;
    --btn-px: 12;
    --btn-ico-size: 12;
    --btn-radius: 10;
  }
  .c-btn__in {
    background: var(--btn-bg-color);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
    border: calc(var(--btn-border-width) / var(--font-size) * 1rem) solid var(--btn-border-color);
    height: 100%;
  }
  .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__wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .c-btn--back .c-btn-txt {
    text-align: center;
  }
  .c-btn-txt {
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(20 / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .c-btn-txt.c-btn-txt--l {
    height: calc(23 / var(--font-size) * 1rem);
  }
  .c-btn-txt.c-btn-txt--s {
    height: calc(14 / var(--font-size) * 1rem);
  }
  .c-btn-txt + .c-btn-txt {
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  .c-btn-txt__label {
    position: relative;
    height: 100%;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .c-btn-txt__label img {
    width: 100%;
    height: 100%;
  }
  .c-btn-ico {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: calc(26 / var(--font-size) * 1rem);
    width: calc(var(--btn-px) / var(--font-size) * 1rem);
    height: calc(var(--btn-px) / var(--font-size) * 1rem);
    transition: all 0.3s;
  }
  .c-btn.c-btn--left .c-btn-ico {
    position: absolute;
    top: 50%;
    left: 0;
    margin-left: calc(26 / var(--font-size) * 1rem);
    width: calc(var(--btn-px) / var(--font-size) * 1rem);
    height: calc(var(--btn-px) / var(--font-size) * 1rem);
    transform: scaleX(-1) translateY(-50%);
  }
  .c-btn-ico__label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .c-btn-ico__label img {
    height: 100%;
  }
  .c-btn .c-btn-txt__label .is-disabled,
  .c-btn .c-btn-txt__label .is-already {
    display: none;
  }
  .c-btn.u-disabled .c-btn-txt__label .is-active,
  .c-btn.u-disabled .c-btn-txt__label .is-already {
    display: none;
  }
  .c-btn.u-disabled .c-btn-txt__label .is-disabled {
    display: block;
  }
  .c-btn.u-already .c-btn-txt__label .is-active,
  .c-btn.u-already .c-btn-txt__label .is-disabled {
    display: none;
  }
  .c-btn.u-already .c-btn-txt__label .is-already {
    display: block;
  }
  .c-btn.c-btn--pdf .c-btn-txt {
    margin-right: calc(20 / var(--font-size) * 1rem);
  }
  .c-btn-ico.c-btn-ico--pdf {
    margin-right: calc(54 / var(--font-size) * 1rem);
    width: calc(14.5 / var(--font-size) * 1rem);
    height: calc(16.5 / var(--font-size) * 1rem);
  }
  .c-btn-txt.c-btn-txt--window .c-btn-txt__label::after {
    content: "";
    position: absolute;
    right: calc(-20 / var(--font-size) * 1rem);
    display: inline-block;
    background: url(../img/common/ico_window.svg) no-repeat bottom / 100%;
    width: calc(11.5 / var(--font-size) * 1rem);
    height: calc(11.5 / var(--font-size) * 1rem);
  }

  /* ellipse */
  .c-btn--ellipse {
    --btn-radius: 9999;
  }

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

  /* back */
  .c-btn--back .c-btn-ico {
    margin-left: calc(26 / var(--font-size) * 1rem);
    right: auto;
    left: 0;
    transform: translateY(-50%) rotate(180deg);
  }
  .c-btn--back.c-btn--back-bk {
    --btn-bg-color: var(--back-color);
    --btn-border-color: var(--back-color);
  }

  /* down */
  .c-btn--down .c-btn-ico {
    transform: translateY(-50%) rotate(90deg);
  }

  /* primary */
  .c-btn--primary {
    --btn-bg-color: var(--primary-color);
  }

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

  /* harenohi */
  .c-btn--harenohi {
    --btn-bg-color: var(--orange-color-500);
  }
  .c-btn--harenohi .c-btn__body {
    padding-right: calc(36 / var(--font-size) * 1rem);
  }
  .c-btn--harenohi .c-btn-txt {
    width: calc(280 / var(--font-size) * 1rem);
  }
}
@media screen and (max-width: 767px){
  .c-btn {
    --btn-bg-color: var(--primary-color-500);
    --btn-border-color: unset;
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
    --btn-arrow-bg-color: var(--white-color);
    --btn-border-width: 2;
    --btn-txt-font-size: 16;
    --btn-min-height: 55;
    --btn-px: 12;
    --btn-ico-size: 12;
    --btn-radius: 999;

    display: block;
    width: 100%;
    transition: all 0.2s;
  }
  .c-btn.c-btn--border {
    --btn-bg-color: var(--white-color);
    --btn-border-color: var(--primary-color-600);
    --btn-txt-color: var(--primary-color-600);
    --btn-arrow-color: var(--primary-color-600);
    --btn-arrow-bg-color: var(--primary-color-600);
    --btn-border-width: 2;
    --btn-txt-font-size: 16;
    --btn-min-height: 80;
    --btn-px: 12;
    --btn-ico-size: 12;
    --btn-radius: 15;
  }
  .c-btn__in {
    background: var(--btn-bg-color);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1rem);
    border: calc(var(--btn-border-width) / var(--font-size) * 1rem) solid var(--btn-border-color);
    height: 100%;
  }
  .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__wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .c-btn--back .c-btn-txt {
    text-align: center;
  }
  .c-btn-txt {
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(18 / var(--font-size) * 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .c-btn-txt.c-btn-txt--l {
    height: calc(23 / var(--font-size) * 1rem);
  }
  .c-btn-txt.c-btn-txt--s {
    height: calc(14 / var(--font-size) * 1rem);
  }
  .c-btn-txt + .c-btn-txt {
    margin-top: calc(8 / var(--font-size) * 1rem);
  }
  .c-btn-txt__label {
    position: relative;
    height: 100%;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .c-btn-txt__label img {
    width: 100%;
    height: 100%;
  }
  .c-btn-ico {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: calc(26 / var(--font-size) * 1rem);
    width: calc(var(--btn-px) / var(--font-size) * 1rem);
    height: calc(var(--btn-px) / var(--font-size) * 1rem);
    transition: all 0.3s;
  }
  .c-btn.c-btn--left .c-btn-ico {
    position: absolute;
    top: 50%;
    left: 0;
    margin-left: calc(26 / var(--font-size) * 1rem);
    width: calc(var(--btn-px) / var(--font-size) * 1rem);
    height: calc(var(--btn-px) / var(--font-size) * 1rem);
    transform: scaleX(-1) translateY(-50%);
  }
  .c-btn-ico__label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .c-btn-ico__label img {
    height: 100%;
  }
  .c-btn .c-btn-txt__label .is-disabled,
  .c-btn .c-btn-txt__label .is-already {
    display: none;
  }
  .c-btn.u-disabled .c-btn-txt__label .is-active,
  .c-btn.u-disabled .c-btn-txt__label .is-already {
    display: none;
  }
  .c-btn.u-disabled .c-btn-txt__label .is-disabled {
    display: block;
  }
  .c-btn.u-already .c-btn-txt__label .is-active,
  .c-btn.u-already .c-btn-txt__label .is-disabled {
    display: none;
  }
  .c-btn.u-already .c-btn-txt__label .is-already {
    display: block;
  }
  .c-btn.c-btn--pdf .c-btn-txt {
    margin-right: calc(20 / var(--font-size) * 1rem);
  }
  .c-btn-ico.c-btn-ico--pdf {
    margin-right: calc(54 / var(--font-size) * 1rem);
    width: calc(14.5 / var(--font-size) * 1rem);
    height: calc(16.5 / var(--font-size) * 1rem);
  }
  .c-btn-txt.c-btn-txt--window .c-btn-txt__label::after {
    content: "";
    position: absolute;
    right: calc(-20 / var(--font-size) * 1rem);
    display: inline-block;
    background: url(../img/common/ico_window.svg) no-repeat bottom / 100%;
    width: calc(11.5 / var(--font-size) * 1rem);
    height: calc(11.5 / var(--font-size) * 1rem);
  }

  /* ellipse */
  .c-btn--ellipse {
    --btn-radius: 9999;
  }

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

  /* back */
  .c-btn--back .c-btn-ico {
    margin-left: calc(26 / var(--font-size) * 1rem);
    right: auto;
    left: 0;
    transform: translateY(-50%) rotate(180deg);
  }
  .c-btn--back.c-btn--back-bk {
    --btn-bg-color: var(--back-color);
    --btn-border-color: var(--back-color);
  }

  /* down */
  .c-btn--down .c-btn-ico {
    transform: translateY(-50%) rotate(90deg);
  }

  /* primary */
  .c-btn--primary {
    --btn-bg-color: var(--primary-color);
  }

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

  /* harenohi */
  .c-btn--harenohi {
    --btn-bg-color: var(--orange-color-500);
  }
  .c-btn--harenohi .c-btn__body {
    padding-right: calc(36 / var(--font-size) * 1rem);
  }
  .c-btn--harenohi .c-btn-txt {
    width: calc(240 / var(--font-size) * 1rem);
  }
}

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

/* --------------------------------------------------------------------------
  svg
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print{
  .c-svg {
    --svg-color: var(--c-white);
    --svg-w: 0;
    --svg-h: 0;
  
    position: relative;
    display: block;
    width: 100%;
  }
  .c-svg::before {
    display: block;
    padding-top: calc(var(--svg-h) / var(--svg-w) * 100%);
    content: '';
  }
  .c-svg > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: var(--svg-color);
  }
}
@media screen and (max-width: 767px){
  .c-svg {
    --svg-color: var(--c-white);
    --svg-w: 0;
    --svg-h: 0;
  
    position: relative;
    display: block;
    width: 100%;
  }
  .c-svg::before {
    display: block;
    padding-top: calc(var(--svg-h) / var(--svg-w) * 100%);
    content: '';
  }
  .c-svg > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: var(--svg-color);
  }
}