@charset "UTF-8";
:root {
  --white-color: #fff;
  --black-color: #000;
  --main-color-500: #402d1d;
  --main-color-100: #af7c50;
  --no-sugar-color-100: #7cccd9;
  --no-sugar-color-10: #e8f2f2;
  --original-color-100: #eaaa58;
  --original-color-10: #f8edde;
  --triple-color-100: #0b99e6;
  --triple-color-10: #e3f2f9;
  --font-size: 16;
  --font-zen-kaku:'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-zen-maru:'Zen Maru Gothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --bg-rough: url("../img/bg_rough.png") no-repeat top / cover;
  --bg-wood: url("../img/bg_wood.png") repeat top / calc(1440 / var(--font-size) * 1em);
}
@media all and (max-width: 767px) {
  :root {
    --bg-rough: url("../img/bg_rough_sp.png") repeat top / cover;
  }
}
.main-container {
  overflow: hidden;
}
/* ==========================================================================
  ELEMENT RESET
========================================================================== */
.main-container ol,
.main-container ul,
.main-container dl {
  margin-top: 0;
  margin-bottom: 0;
}
.main-container dd {
  margin-left: 0;
}
.main-container ol,
.main-container ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.main-container a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.main-container a {
  outline: 0;
}
.main-container a:focus,
.main-container button:focus {
  outline: 0;
}
.main-container em {
  font-style: normal;
}
.main-container figure {
  margin: 0;
}
.main-container table {
  border-collapse: collapse;
}
.main-container button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.main-container button:focus {
  outline: none;
}
.main-container input,
.main-container button,
.main-container select,
.main-container textarea {
  line-height: inherit;
}
.main-container textarea {
  resize: vertical;
}
.main-container fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.main-container legend {
  display: block;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  line-height: inherit;
}
.main-container hr {
  margin: 0;
}
.main-container img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
/* --------------------------------------------------------------------------
  非表示
-------------------------------------------------------------------------- */
/* 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-bold {
  font-weight: 700;
}
.u-black {
  font-weight: 900;
}

/* --------------------------------------------------------------------------
  背景
-------------------------------------------------------------------------- */
/* main */
.u-bg-white {
  background-color: var(--white-color);
}
.u-bg-main-100 {
  background-color: var(--main-color-100);
}
.u-bg-main-10 {
  background-color: var(--main-color-10);
}

/* color */
.u-color-white {
  color: var(--white-color);
}
.u-color-main-500 {
  color: var(--main-color-500);
}
.u-color-main-100 {
  color: var(--main-color-100);
}
.u-color-main-10 {
  color: var(--main-color-10);
}


/* --------------------------------------------------------------------------
  フォント
-------------------------------------------------------------------------- */
.main-container button,
.main-container input,
.main-container optgroup,
.main-container select,
.main-container textarea {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
.main-container h1,
.main-container h2,
.main-container h3,
.main-container h4,
.main-container h5,
.main-container h6 {
  font-weight: 700;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
.u-font-zen-kaku {
  font-family: var(--font-zen-kaku);
}
.u-font-zen-maru {
  font-family: var(--font-zen-maru);
}

.u-space{
  letter-spacing: -3px;
}

/* --------------------------------------------------------------------------
  ROOT FONT SIZE
-------------------------------------------------------------------------- */
/* 16px */
.shokubutsusei-milk {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
body {
  font-size: 1rem;
}
@media all and (min-width: 768px) and (max-width: 1064px) {
  /* 13px */
  .shokubutsusei-milk {
    font-size: calc(100vw * var(--font-size) / 1064);
  }
}
@media all and (max-width: 767px) {
  /* 13px */
  .shokubutsusei-milk {
    font-size: calc(100vw * var(--font-size) / 750);
  }
}


/* ==========================================================================
  HEADER COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  見出し
-------------------------------------------------------------------------- */
/* LV2 */
@media all and (min-width: 768px), print {
  .c-header-lv2 {
    --header-size: 28;
    --ico-w: 53;
    --ico-h: 48;
  }
  .c-header-lv2__in {
    position: relative;
    display: block;
    padding-top: calc(52 / var(--font-size) * 1em);
  }
  .c-header-lv2-txt__sub {
    width: calc(262 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .c-header-lv2-txt {
    position: relative;
    padding-top: calc(64 / var(--font-size) * 1em);
  }
  .c-header-lv2-txt::before {
    content: "";
    display: block;
    width: calc(var(--ico-w) / var(--font-size) * 1em);
    padding-top: calc(var(--ico-h) / var(--font-size) * 1em);
    background: url("../img/about_what_deco_ttl.png") no-repeat center / contain;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  .c-header-lv2-txt__label {
    position: relative;
    display: block;
    text-align: center;
    font-size: calc(var(--header-size) / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    letter-spacing: calc(50 / 1000 * 1em);
  }
}
@media all and (max-width: 767px) {
  .c-header-lv2 {
    --header-size: 32;
    --ico-w: 62;
    --ico-h: 56;
  }
  .c-header-lv2__in {
    position: relative;
    display: block;
    padding-top: calc(52 / var(--font-size) * 1em);
  }
  .c-header-lv2-txt__sub {
    width: calc(298 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc(-10 / var(--font-size) * 1em);
  }
  .c-header-lv2-txt {
    position: relative;
    padding-top: calc(68 / var(--font-size) * 1em);
  }
  .c-header-lv2-txt::before {
    content: "";
    display: block;
    width: calc(var(--ico-w) / var(--font-size) * 1em);
    padding-top: calc(var(--ico-h) / var(--font-size) * 1em);
    background: url("../img/about_what_deco_ttl.png") no-repeat center / contain;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  .c-header-lv2-txt__label {
    position: relative;
    display: block;
    text-align: center;
    font-size: calc(var(--header-size) / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    letter-spacing: calc(50 / 1000 * 1em);
  }
}

/* タイトル */
@media all and (min-width: 768px), print {
  .c-header-title {
    --header-size: 24;
    --header-w: 296;
    position: relative;
    padding-top: calc(51 / var(--font-size) * 1em);
  }
  .c-header-title::before {
    content: "";
    display: block;
    width: calc(85 / var(--font-size) * 1em);
    padding-top: calc(35 / var(--font-size) * 1em);
    background: url("../img/c-header_deco_ttl.png") no-repeat center / contain;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  .c-header-title__in {
    position: relative;
    display: block;
    text-align: center;
    font-size: calc(var(--header-size) / var(--font-size) * 1em);
  }
  .c-header-title-sub-txt {
    margin-top: calc(25 / var(--header-size) * 1em);
  }
  .c-header-title-sub-txt__in {
    background: var(--black-color);
    display: inline-block;
    padding: calc(4 / var(--header-size) * 1em) calc(14 / var(--header-size) * 1em);
    border-radius: calc(5 / var(--header-size) * 1em);
  }
  .c-header-title-sub-txt__label {
    color: var(--white-color);
    font-weight: bold;
    font-size: calc(var(--header-size) / var(--header-size) * 1em);
    font-family: var(--font-zen-maru);
    letter-spacing: calc(50 / 1000 * 1em);
    padding-top: calc(1 / var(--header-size) * 1em);
    padding-bottom: calc(3 / var(--header-size) * 1em);
  }
  .c-header-title-sub-txt__label--small {
    font-size: 75%;
  }
  .c-header-title__txt {
    margin: 0 auto;
    width: calc(var(--header-w) / var(--header-size) * 1em);
  }
}
@media all and (max-width: 767px) {
  .c-header-title {
    --header-size: 24;
    --header-w: 296;
    position: relative;
    padding-top: calc(51 / var(--font-size) * 1em);
  }
  .c-header-title::before {
    content: "";
    display: block;
    width: calc(85 / var(--font-size) * 1em);
    padding-top: calc(35 / var(--font-size) * 1em);
    background: url("../img/c-header_deco_ttl.png") no-repeat center / contain;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }
  .c-header-title__in {
    position: relative;
    display: block;
    text-align: center;
    font-size: calc(var(--header-size) / var(--font-size) * 1em);
  }
  .c-header-title-sub-txt {
    margin-top: calc(26 / var(--header-size) * 1em);
  }
  .c-header-title-sub-txt__in {
    background: var(--black-color);
    display: inline-block;
    padding: calc(6 / var(--header-size) * 1em) calc(14 / var(--header-size) * 1em);
    border-radius: calc(8 / var(--header-size) * 1em);
  }
  .c-header-title-sub-txt__label {
    color: var(--white-color);
    font-weight: bold;
    font-size: calc(var(--header-size) / var(--header-size) * 1em);
    font-family: var(--font-zen-maru);
    letter-spacing: calc(-20 / 1000 * 1em);
  }
  .c-header-title-sub-txt__label--small {
    font-size: 75%;
  }
  .c-header-title__txt {
    margin: 0 auto;
    width: calc(var(--header-w) / var(--header-size) * 1em);
  }
}

/* ==========================================================================
  TEXT COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  テキスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-txt {
    --txt-font-size: 16;
    --txt-line-height: 1.8;
    --txt-font-famliy: var(--font-zen-kaku);
    font-size: calc(var(--txt-font-size) * 1px);
    line-height: var(--txt-line-height);
    font-family: var(--txt-font-famliy);
    letter-spacing: calc(50 / 1000 * 1em);
  }
  .c-txt sub,
  .c-txt sub {
    font-size: 0.5em;
  }

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

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

  .c-txt a {
    word-break: break-all;
  }

  /* L */
  .c-txt--xxxxl {
    --txt-font-size: 28;
  }
  .c-txt--xxxl {
    --txt-font-size: 24;
  }
  .c-txt--xxl {
    --txt-font-size: 22;
  }
  .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;
  }
  .u-text-link {
    text-decoration: underline;
  }
  .u-text-link:hover {
    text-decoration: none;
  }

}
@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) * 1em);
    line-height: var(--txt-line-height);
    font-family: var(--font-zen-kaku);
    font-weight: 500;
  }
  .c-txt sub,
  .c-txt sub {
    font-size: 0.5em;
  }

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

  .c-txt sub {
    bottom: -0.1em;
  }
  .c-txt a {
    word-break: break-all;
  }

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

  /* M */
  .c-txt--m {
    --txt-font-size: 32;
  }
  .c-txt--m-sp {
    --txt-font-size: 32;
  }
  .c-txt--s-sp {
    --txt-font-size: 28;
  }

  /* S */
  .c-txt--s {
    --txt-font-size: 28;
  }
  .c-txt--xs {
    --txt-font-size: 24;
  }
  .c-txt--xxs {
    --txt-font-size: 22;
  }
  .c-txt--xxxs {
    --txt-font-size: 20;
  }

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

}

/* --------------------------------------------------------------------------
  リスト テキスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-list {
    --list-font-size: 16;
    --list-line-height: 1.6;
    --list-rate: var(--list-font-size) / 16;
    --list-desc-color: var(--main-color-100);
    --gap-y: 6;
    --gap-x: 0;
  }
  .c-list-item {
    position: relative;
    display: flex;
    font-size: calc(var(--list-font-size) / var(--font-size) * 1em);
    line-height: var(--list-line-height);
  }
  .c-list-item + .c-list-item {
    margin-top: calc(var(--gap-y) / var(--font-size) * 1em);
  }
  .c-list-item::before {
    content: "・";
  }
  .c-list--desc .c-list-item::before {
    content: "";
    display: block;
    width: calc(var(--list-font-size) / var(--font-size) * 1em);
    height: calc(var(--list-font-size) / var(--font-size) * 1em);
    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) * 1em);
    margin-right: calc(6 * var(--list-font-size) / var(--font-size) / var(--font-size) * 1em);
    flex-shrink: 0;
  }
  .c-list-item-head {
    flex-shrink: 0;
  }
  .c-list-item__in {
  }

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

}
@media all and (max-width: 767px) {
  .c-list {
    --list-font-size: 16;
    --list-line-height: 1.6;
    --list-rate: var(--list-font-size) / 16;
    --list-desc-color: var(--main-color-100);
    --gap-y: 6;
    --gap-x: 0;
  }
  .c-list-item {
    position: relative;
    display: flex;
    font-size: calc(var(--list-font-size) / var(--font-size) * 1em);
    line-height: var(--list-line-height);
  }
  .c-list-item + .c-list-item {
    margin-top: calc(var(--gap-y) / var(--font-size) * 1em);
  }
  .c-list-item::before {
    content: "・";
  }
  .c-list--desc .c-list-item::before {
    content: "";
    display: block;
    width: calc(var(--list-font-size) / var(--font-size) * 1em);
    height: calc(var(--list-font-size) / var(--font-size) * 1em);
    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) * 1em);
    margin-right: calc(6 * var(--list-font-size) / var(--font-size) / var(--font-size) * 1em);
    flex-shrink: 0;
  }

  .c-list-item-head {
    flex-shrink: 0;
  }
  .c-list-item__in {
  }

  /* L */
  .c-list--l {
    --list-font-size: 16;
  }
  /* m */
  .c-list--m{
    --list-font-size: 15;
  }
  /* s */
  .c-list--s,
  .c-list--s-sp {
    --list-font-size: 14;
  }
  /* xs */
  .c-list--xs {
    --list-font-size: 10;
  }
  /* SP時のみ */
  /* L */
  .c-list-sp--l {
    --list-font-size: 16;
  }
  /* m */
  .c-list-sp--m {
    --list-font-size: 14;
  }
  /* s */
  .c-list-sp--s {
    --list-font-size: 12;
  }
  /* xs */
  .c-list-sp--xs {
    --list-font-size: 10;
  }
}
/* --------------------------------------------------------------------------
  注釈 テキスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-note {
    --note-txt-font-size: 16;
    --note-position: start;
    --note-txt-font-family: var(--font-zen-kaku);
  }
  .c-note-txt {
    font-size: calc(var(--note-txt-font-size) / var(--font-size) * 1em);
    line-height: 1.6;
    display: flex;
    justify-content: var(--note-position);
    font-family: var(--note-txt-font-family);
    letter-spacing: calc(50 / 1000 * 1em);
  }
  .c-note-txt::before {
    content: "※";
  }
  .c-note--deco .c-note-txt::before {
    content: "＊";
  }
  .c-note-txt__label {
  }

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

  /* 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) {
  .c-note {
    --note-txt-font-size: 16;
    --note-position: start;
  }
  .c-note-txt {
    font-size: calc(var(--note-txt-font-size) / var(--font-size) * 1em);
    line-height: 1.6;
    display: flex;
    justify-content: var(--note-position);
    font-weight: 500;
    font-family: var(--font-zen-kaku);
  }
  .c-note-txt::before {
    content: "※";
  }
  .c-note--deco .c-note-txt::before {
    content: "＊";
  }
  .c-note-txt__label {
  }

  /* CENTER */
  .c-note--center {
    --note-position: center;
  }
  .c-note-txt--center {
    text-align: center;
  }
  .c-note--end {
    --note-position: end;
  }

  /* M */
  .c-note--m {
    --note-txt-font-size: 32;
  }
  /* S */
  .c-note--s {
    --note-txt-font-size: 28;
  }
  /* XS */
  .c-note--xs {
    --note-txt-font-size: 24;
  }
  /* XXS */
  .c-note--xxs {
    --note-txt-font-size: 22;
  }
  /* XXXS */
  .c-note--xxxs {
    --note-txt-font-size: 20;
  }

}


/* ==========================================================================
  BUTTON COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  レイアウト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .l-btn-list {
    --col: 1;
    --gap-x: 16;
    --gap-y: 16;

    display: flex;
    justify-content: center;
    gap: calc(var(--gap-y) /var(--font-size) * 1em) calc(var(--gap-x) /var(--font-size) * 1em);
  }
  .l-btn-list.l-btn-list--ico {
    justify-content: start;
  }
  .l-btn-list-item {
    width: calc((100% - (var(--gap-x) / var(--font-size) * 1em) * (var(--col) - 1)) / var(--col));
  }

  /* modifier */
  .l-btn-list--wrap {
    flex-wrap: wrap;
  }
  .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--6col {
    --col: 6;
  }

  .l-btn-list--auto .l-btn-list__item {
    width: auto;
  }
}
@media all and (max-width: 767px) {
  .l-btn-list {
    --col: 1;
    --gap-x: 22;
    --gap-y: 16;

    display: flex;
    justify-content: center;
    gap: calc(var(--gap-y) /var(--font-size) * 1em) calc(var(--gap-x) /var(--font-size) * 1em);
  }
  .l-btn-list.l-btn-list--ico {
    justify-content: start;
  }
  .l-btn-list-item {
    width: calc((100% - (var(--gap-x) / var(--font-size) * 1em) * (var(--col) - 1)) / var(--col));
  }

  /* modifier */
  .l-btn-list--wrap {
    flex-wrap: wrap;
  }
  .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--6col {
    --col: 6;
  }
  .l-btn-list--1col-sp {
    --col: 1;
  }
  .l-btn-list--2col-sp {
    --col: 2;
  }
  .l-btn-list--3col-sp {
    --col: 3;
  }
  .l-btn-list--4col-sp {
    --col: 4;
  }
  .l-btn-list--5col-sp {
    --col: 5;
  }
  .l-btn-list--6col-sp {
    --col: 6;
  }

  .l-btn-list--auto .l-btn-list__item {
    width: auto;
  }
}


/* --------------------------------------------------------------------------
  ボタン
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-btn {
    --btn-bg-color: var(--main-color-100);
    --btn-border-color: var(--main-color-100);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
    --btn-txt-font-size: 16;
    --btn-min-height: 62;
    --btn-radius: 9999;
    --btn-px: 28;

    display: block;
  }
  a.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: var(--btn-bg-color);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1em);
    border: calc(1 / var(--font-size) * 1em) solid var(--btn-border-color);
    height: 100%;
    transition: all 0.3s;
  }
  .c-btn__body {
    position: relative;
    min-height: calc(var(--btn-min-height) / var(--font-size) * 1em);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(8 / var(--font-size) * 1em) calc(var(--btn-px) / var(--font-size) * 1em);
  }
  .c-btn-txt {
    color: var(--btn-txt-color);
    text-align: center;
    width: 100%;
    transition: all 0.3s;
  }
  .c-btn-txt__label {
    font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: calc(5 / 1000 * 1em);
  }
  .c-btn-txt--sub {
    text-align: center;
    line-height: 1;
  }
  .c-btn-txt__label--sub {
    color: var(--btn-txt-color);
    font-size: calc(14 / var(--font-size) * 1em);
    font-family: var(--font-zen-kaku);
    font-weight: bold;
    letter-spacing: calc(50 / 1000 * 1em);
  }
  .c-btn-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: calc(var(--btn-px) / var(--font-size) * 1em);
    height: calc(var(--btn-min-height) / var(--font-size) * 1em);
  }
  .c-btn-arrow__label {
    display: flex;
    align-items: center;
    margin-left: calc(4 / var(--font-size) * 1em);
    height: 100%;
  }

  .c-btn-arrow__label .c-svg {
    width: calc(14 / var(--font-size) * 1em);
    fill: var(--btn-arrow-color);
    transition: all 0.3s;
  }
  /* down */
  .c-btn-arrow--down .c-btn-arrow__label .c-svg {
    --btn-arrow-rotate: 90deg;
  }
  /* back */
  .c-btn-arrow--back .c-btn-arrow__label .c-svg {
    --btn-arrow-rotate: 180deg;
    transform: rotate(var(--btn-arrow-rotate));
  }
  .c-btn--pdf .c-btn-arrow {
    position: static;
    transform: translate(0);
    width: auto;
    height: auto;
  }
  .c-btn--pdf .c-btn-txt {
    width: auto;
  }
  .c-btn--pdf .c-btn-arrow__label {
    margin-left: 0;
    margin-right: calc(14 / var(--font-size) * 1em);
  }
  .c-btn--pdf .c-btn__body {
    padding: calc(8 / var(--font-size) * 1em) calc(20 / var(--font-size) * 1em);
  }
  .c-btn-arrow--back .c-btn-arrow,
  .c-btn--pdf .c-btn-arrow {
    left: 0;
  }

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

  /* fontsize */
  .c-btn--xl {
    --btn-txt-font-size: 20;
  }
  .c-btn--l {
    --btn-txt-font-size: 18;
  }
  .c-btn--m {
    --btn-txt-font-size: 16;
  }
  .c-btn--s {
    --btn-txt-font-size: 13;
  }
  .c-btn--xs {
    --btn-txt-font-size: 12;
  }

  /* color */
  .c-btn--stroke {
    --btn-bg-color: var(--white-color);
    --btn-txt-color: var(--btn-border-color);
    --btn-arrow-color: var(--btn-border-color);
  }
  a.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--yellow {
    --btn-bg-color: var(--yellow-color-100);
    --btn-border-color: var(--yellow-color-100);
  }
  .c-btn--red {
    --btn-bg-color: var(--red-color-100);
    --btn-border-color: var(--red-color-100);
  }
}
@media all and (max-width: 767px) {
  .c-btn {
    --btn-bg-color: var(--main-color-100);
    --btn-border-color: var(--main-color-100);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
    --btn-txt-font-size: 16;
    --btn-min-height: 88;
    --btn-radius: 9999;
    --btn-px: 50;

    display: block;
  }
  .c-btn__in {
    background: var(--btn-bg-color);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1em);
    border: calc(1 / var(--font-size) * 1em) solid var(--btn-border-color);
    height: 100%;
    transition: all 0.3s;
  }
  .c-btn__body {
    position: relative;
    min-height: calc(var(--btn-min-height) / var(--font-size) * 1em);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(8 / var(--font-size) * 1em) calc(var(--btn-px) / var(--font-size) * 1em);
  }
  .c-btn-txt {
    color: var(--btn-txt-color);
    text-align: center;
    width: 100%;
    transition: all 0.3s;
  }
  .c-btn-txt__label {
    font-size: calc(var(--btn-txt-font-size) / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: calc(5 / 1000 * 1em);
    font-feature-settings: "palt";
  }
  .c-btn-txt--sub {
    text-align: center;
    line-height: 1;
    margin-top: calc(4 / var(--font-size) * 1em);
  }
  .c-btn-txt__label--sub {
    color: var(--btn-txt-color);
    font-size: calc(22 / var(--font-size) * 1em);
    font-family: var(--font-zen-kaku);
    font-weight: bold;
    letter-spacing: calc(50 / 1000 * 1em);
  }
  .c-btn-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: calc(var(--btn-px) / var(--font-size) * 1em);
    height: calc(var(--btn-min-height) / var(--font-size) * 1em);
  }
  .c-btn-arrow__label {
    display: flex;
    align-items: center;
    margin-left: calc(12 / var(--font-size) * 1em);
    height: 100%;
  }

  .c-btn-arrow__label .c-svg {
    width: calc(24 / var(--font-size) * 1em);
    fill: var(--btn-arrow-color);
    transition: all 0.3s;
  }

  /* fontsize */
  .c-btn--l {
    --btn-txt-font-size: 28;
  }
  .c-btn--m {
    --btn-txt-font-size: 24
  }
}

/* ==========================================================================
  IMG SVG COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  img
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-img {
  }
  .c-img__label {
    width: 100%;
  }
}
@media all and (max-width: 767px) {
  .c-img {
  }
  .c-img__label {
    width: 100%;
  }
}

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

/* --------------------------------------------------------------------------
  SECTION
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .l-sec {
  }
  .l-sec__in {
    max-width: calc(1064 / var(--font-size) * 1em);
    padding: 0 calc(20 / var(--font-size) * 1em);
    margin: auto;
  }
  .l-sec__body {
    padding: calc(80 / var(--font-size) * 1em) 0 calc(82 / var(--font-size) * 1em);
  }
  .l-sec__header {
    margin-bottom: calc(56 / var(--font-size) * 1em);
  }
  .l-sec__content {

  }
  .contact-sec__body {
    padding: calc(48 / var(--font-size) * 1em) 0 calc(53 / var(--font-size) * 1em);
  }
}
@media all and (max-width: 767px) {
  .l-sec {
  }
  .l-sec__in {
    width: 100%;
    padding: 0 calc(30 / var(--font-size) * 1em);
    margin: auto;
  }
  .l-sec__body {
    padding: calc(80 / var(--font-size) * 1em) 0 calc(88 / var(--font-size) * 1em);
  }
  .l-sec__header {
    margin-bottom: calc(32 / var(--font-size) * 1em);

  }
  .l-sec__content {

  }
}

footer .ftTop {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
  FADE-IN
-------------------------------------------------------------------------- */
.fadein-contents {
  opacity: 0;
  transform: translateY(calc(40 / var(--font-size) * 1em));
  transition: all .7s ease;
}
.fadein-contents.fadein-active {
  opacity: 1;
  transform: translateY(0);
}