@charset "UTF-8";
/* webfont */
@import url("//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&display=swap");
@import url("//fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
@import url('//fonts.googleapis.com/css2?family=EB+Garamond:ital@0;1&family=Shippori+Mincho:wght@400;500;600;700&family=Zen+Kurenaido&display=swap" rel="stylesheet');
@import url("//cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanjp.min.css");
@import url("//cdn.jsdelivr.net/npm/yakuhanjp@4.1.1/dist/css/yakuhanmp.css");
@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
/* local */
/* use
-----------------------------------------------------------------*/
/*==========================================================================

   mixin

===========================================================================*/
/*==========================================================================

   keyframes

===========================================================================*/
/*--------------------------------------------------------------------------
   html
---------------------------------------------------------------------------*/
html {
  position: relative;
  min-height: 100%;
  font-size: 62.6%;
}
@media only screen and (max-width: 767px) {
  html {
    width: 100%;
    height: 100%;
  }
}
html.is-menuopen {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*--------------------------------------------------------------------------
   head
---------------------------------------------------------------------------*/
head {
  font-family: "pc";
}
@media only screen and (max-width: 767px) {
  head {
    font-family: "sp";
  }
}

/*--------------------------------------------------------------------------
   body
---------------------------------------------------------------------------*/
body {
  color: #56524E;
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Osaka, Verdana, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (max-width: 767px) {
  body {
    width: 100%;
    min-width: 320px;
    height: auto;
    font-size: 12px;
    line-height: 1.5;
  }
}

.os-mac body {
  font-weight: 400;
}

/*--------------------------------------------------------------------------
   a
---------------------------------------------------------------------------*/
a {
  outline: none;
  color: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a:link, a:visited {
  text-decoration: none;
}

/*--------------------------------------------------------------------------
   reset
---------------------------------------------------------------------------*/
* {
  word-wrap: break-word;
  outline: none;
}

img {
  vertical-align: top;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}

/* Placeholder
-----------------------------------------------*/
::-webkit-input-placeholder {
  color: #B7BEC4;
}

::-moz-placeholder {
  color: #B7BEC4;
}

:-ms-input-placeholder {
  color: #B7BEC4;
}

:-moz-placeholder {
  color: #B7BEC4;
}

/*--------------------------------------------------------------------------
   selection
---------------------------------------------------------------------------*/
::-moz-selection {
  background-color: #b3d4fc;
  color: #fff;
  text-shadow: none;
}

::selection {
  background-color: #b3d4fc;
  color: #fff;
  text-shadow: none;
}

/* ----------------------------------------------------------------------------------------------------

Super Form Reset

A couple of things to watch out for:

- IE8: If a text input doesn't have padding on all sides or none the text won't be centered.
- The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders.
- You NEED to set the font-size and family on all form elements
- Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs
- You can style the upload button in webkit using ::-webkit-file-upload-button
- ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out.
- IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block.
- By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs

----------------------------------------------------------------------------------------------------*/
input,
label,
select,
button,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  border: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  background: none;
  /* iOSのデフォルト文字色（青系のシステムカラー）を打ち消し、親の color を継承 */
  color: inherit;
  font: inherit;
  -webkit-text-fill-color: currentColor;
}

/* Remove the stupid outer glow in Webkit */
input:focus,
select:focus,
textarea:focus {
  outline: 0;
}

/* Box Sizing Reset
-----------------------------------------------*/
/* All of our custom controls should be what we expect them to be */
input,
textarea {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* These elements are usually rendered a certain way by the browser */
button,
input[type=reset],
input[type=button],
input[type=submit],
input[type=checkbox],
input[type=radio],
select {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* Text Inputs
-----------------------------------------------*/
/* Button Controls
-----------------------------------------------*/
input[type=checkbox],
input[type=radio] {
  width: 13px;
  height: 13px;
}

/* File Uploads
-----------------------------------------------*/
/* Search Input
-----------------------------------------------*/
/* Make webkit render the search input like a normal text field */
input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
}

/* Turn off the recent search for webkit. It adds about 15px padding on the left */
::-webkit-search-decoration {
  display: none;
}

/* Buttons
-----------------------------------------------*/
button,
input[type=reset],
input[type=button],
input[type=submit] {
  /* Fix IE7 display bug */
  overflow: visible;
  width: auto;
  /* iOS で button が disabled 時に半透明青になるのを抑止 */
  cursor: pointer;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  opacity: 1;
}
button:disabled,
input[type=reset]:disabled,
input[type=button]:disabled,
input[type=submit]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* IE8 and FF freak out if this rule is within another selector */
::-webkit-file-upload-button {
  padding: 0;
  border: 0;
  background: none;
}

/* Textarea
-----------------------------------------------*/
textarea {
  /* Move the label to the top */
  vertical-align: top;
  /* Turn off scroll bars in IE unless needed */
  overflow: auto;
}

/* Selects
-----------------------------------------------*/
select[multiple] {
  /* Move the label to the top */
  vertical-align: top;
}

/* use
-----------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   l-page
---------------------------------------------------------------------------*/
.is-loading .l-page-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* media query -> sp
=================================================================*/
@media only screen and (max-width: 767px) {
  .l-page-wrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .l-page {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .is-loading .l-page {
    overflow-y: hidden;
  }
}
/* use
-----------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   l-wrap
---------------------------------------------------------------------------*/
.l-wrap {
  position: relative;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.l-wrap-l {
  position: relative;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

.l-wrap-s {
  position: relative;
  max-width: 954px;
  margin: 0 auto;
  padding: 0 10px;
}

/* media query -> sp
=================================================================*/
@media only screen and (max-width: 767px) {
  .l-wrap {
    max-width: none;
    padding: 0 20px;
  }
  .l-wrap-l {
    max-width: none;
    padding: 0 20px;
  }
  .l-wrap-s {
    max-width: none;
    padding: 0 20px;
  }
}
/*--------------------------------------------------------------------------
   l-grid
---------------------------------------------------------------------------*/
.l-grid {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  *zoom: 1;
}
.l-grid:after {
  content: "";
  display: table;
  clear: both;
}
.l-grid__item {
  display: block;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  float: left;
}

.l-grid__item--1of2 {
  width: 50%;
}
.l-grid__item--1of3 {
  width: 33.33333333%;
}
.l-grid__item--1of4 {
  width: 25%;
}
.l-grid__item--1of5 {
  width: 20%;
}
.l-grid__item--1of6 {
  width: 16.66666666%;
}

/*--------------------------------------------------------------------------
   l-grid
---------------------------------------------------------------------------*/
.l-inline-grid {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  white-space: nowrap;
}
.l-inline-grid__item {
  display: inline-block;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

.l-inline-grid__item--1of2 {
  width: 50%;
}
.l-inline-grid__item--1of3 {
  width: 33.33333333%;
}
.l-inline-grid__item--1of4 {
  width: 25%;
}
.l-inline-grid__item--1of5 {
  width: 20%;
}
.l-inline-grid__item--1of6 {
  width: 16.66666666%;
}

/*--------------------------------------------------------------------------
   l-flex-grid
---------------------------------------------------------------------------*/
.l-flex-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.l-flex-grid__item {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

.l-flex-grid__item--full {
  width: 100%;
}
.l-flex-grid__item--1of2 {
  width: 50%;
}
.l-flex-grid__item--1of3 {
  width: 33.33333333%;
}
.l-flex-grid__item--1of4 {
  width: 25%;
}
.l-flex-grid__item--1of5 {
  width: 20%;
}
.l-flex-grid__item--1of6 {
  width: 16.66666666%;
}

/*--------------------------------------------------------------------------
   c-btn
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.c-btn {
  width: 200px;
  height: 50px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .c-btn {
    width: 160px;
  }
}
.c-btn a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.c-btn__ico {
  margin-right: 10px;
  line-height: 1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.c-btn__ico svg {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.c-btn__txt {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  line-height: 1;
}
.c-btn--en .c-btn__txt {
  color: #393939;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  letter-spacing: 0.84px;
}
.c-btn--black a {
  background: #000;
  border: 2px solid #000;
  color: #fff;
}
.c-btn--black a .c-btn__ico svg {
  fill: #fff;
}
.mode-pc .c-btn--black a:hover, .mode-sp .c-btn--black a:active {
  background: #fff;
}
.mode-pc .c-btn--black a:hover .c-btn__ico svg, .mode-sp .c-btn--black a:active .c-btn__ico svg {
  fill: #393939;
}
.mode-pc .c-btn--black a:hover .c-btn__txt, .mode-sp .c-btn--black a:active .c-btn__txt {
  color: #393939;
}
.c-btn--white a {
  background: #fff;
  color: #393939;
}
.c-btn--white a .c-btn__ico svg {
  fill: #393939;
}
.mode-pc .c-btn--white a:hover, .mode-sp .c-btn--white a:active {
  background: #000;
}
.mode-pc .c-btn--white a:hover .c-btn__ico svg, .mode-sp .c-btn--white a:active .c-btn__ico svg {
  fill: #fff;
}
.mode-pc .c-btn--white a:hover .c-btn__txt, .mode-sp .c-btn--white a:active .c-btn__txt {
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .c-btn--small {
    width: 100%;
  }
}
.c-btn--middle {
  width: 240px;
}
.c-btn--down a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 25px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(45deg) translateY(calc(-50% - 5px));
          transform: rotate(45deg) translateY(calc(-50% - 5px));
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .c-btn--down a:hover::after, .mode-sp .c-btn--down a:active::after {
  border-right: 2px solid #222;
  border-bottom: 2px solid #222;
}

.c-btn-more {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  letter-spacing: 0.84px;
}
.c-btn-more a,
.c-btn-more span {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}
.c-btn-more a::after,
.c-btn-more span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #7B7A78;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .c-btn-more a:hover::after, .mode-sp .c-btn-more a:active::after,
.mode-pc .c-btn-more span:hover::after,
.mode-sp .c-btn-more span:active::after {
  left: 100%;
  width: 0;
}

/*--------------------------------------------------------------------------
   form
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
input,
button,
select,
textarea {
  border-radius: 0;
  -ms-appearance: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

form input,
form textarea {
  border: 0;
}

input[type=checkbox],
input[type=radio] {
  position: absolute;
  opacity: 0;
}

/* 入力 */
.c-input {
  width: 100%;
  height: 60px;
  padding: 0 10px 0 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  font-size: 16px;
}
@media only screen and (max-width: 767px) {
  .c-input {
    height: 50px;
    padding: 5px 15px;
    font-size: 14px;
  }
}

.c-textarea {
  width: 100%;
  max-height: 240px;
  padding: 16px 10px 15px 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  font-size: 16px;
  overflow: auto;
}
@media only screen and (max-width: 767px) {
  .c-textarea {
    max-height: 200px;
    padding: 10px 12px;
    font-size: 14px;
  }
}

.c-input.ipt-err,
.c-textarea.ipt-err {
  background-color: #ffe4e4;
}

/* radio */
.c-radio + label {
  position: relative;
  display: inline-block;
  padding-left: 30px;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
}
.c-radio + label::before, .c-radio + label::after {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  content: "";
}
.c-radio + label::before {
  left: 0;
  width: 20px;
  height: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 1px solid #b7b7b7;
  background: #fff;
}
.c-radio + label::after {
  left: 4px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background-color: #bbb;
  opacity: 0;
}
.c-radio:checked + label::after {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.radio-list__item {
  display: block;
}
.radio-list__item label span {
  position: relative;
  display: inline-block;
  padding-left: 30px;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .radio-list__item label span {
    padding-left: 25px;
  }
}
.radio-list__item label span::before, .radio-list__item label span::after {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  content: "";
}
.radio-list__item label span::before {
  left: 0;
  width: 20px;
  height: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 1px solid #b7b7b7;
  background: #fff;
}
@media only screen and (max-width: 767px) {
  .radio-list__item label span::before {
    width: 18px;
    height: 18px;
  }
}
.radio-list__item label span::after {
  left: 4px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background-color: #bbb;
  opacity: 0;
}
@media only screen and (max-width: 767px) {
  .radio-list__item label span::after {
    width: 10px;
    height: 10px;
    margin-top: -5px;
  }
}
.radio-list__item label input:checked + span::after {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* checkbox */
.c-checkbox {
  visibility: hidden;
  position: absolute;
}
.c-checkbox + label {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  padding-left: 30px;
  vertical-align: middle;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .c-checkbox + label {
    padding-left: 28px;
  }
}
.c-checkbox + label::before {
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #b7b7b7;
  background: #fff;
  content: "";
}
@media only screen and (max-width: 767px) {
  .c-checkbox + label::before {
    top: 0;
    width: 20px;
    height: 20px;
  }
}
.c-checkbox + label::after {
  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  width: 8px;
  height: 16px;
  border-right: 3px solid #bbb;
  border-bottom: 3px solid #bbb;
  content: "";
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  opacity: 0;
}
@media only screen and (max-width: 767px) {
  .c-checkbox + label::after {
    top: 2px;
    left: 6px;
    width: 8px;
    height: 14px;
  }
}

.c-checkbox:checked + label::after {
  opacity: 1;
}

.mwform-checkbox-field .c-checkbox + span {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  padding-left: 30px;
  vertical-align: middle;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .mwform-checkbox-field .c-checkbox + span {
    padding-left: 28px;
  }
}
.mwform-checkbox-field .c-checkbox + span::before {
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #b7b7b7;
  background: #fff;
  content: "";
}
@media only screen and (max-width: 767px) {
  .mwform-checkbox-field .c-checkbox + span::before {
    top: 0;
    width: 20px;
    height: 20px;
  }
}
.mwform-checkbox-field .c-checkbox + span::after {
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 8px;
  height: 14px;
  border-right: 3px solid #bbb;
  border-bottom: 3px solid #bbb;
  content: "";
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  opacity: 0;
}
@media only screen and (max-width: 767px) {
  .mwform-checkbox-field .c-checkbox + span::after {
    top: 2px;
    left: 6px;
    width: 8px;
    height: 14px;
  }
}
.mwform-checkbox-field .c-checkbox:checked + span::after {
  opacity: 1;
}

/* select */
.c-select {
  position: relative;
  display: inline-block;
  width: 220px;
  height: 70px;
  background-color: #eee;
}
@media only screen and (max-width: 767px) {
  .c-select {
    height: 50px;
  }
}
.c-select.ipt-err {
  background-color: #ffe4e4;
}
.c-select::before {
  position: absolute;
  display: inline-block;
  content: "";
  pointer-events: none;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 14px;
  height: 8px;
  background: url("../../assets/img/common/ico_arrow_select.svg") no-repeat 0 0/cover;
}
@media only screen and (max-width: 767px) {
  .c-select::before {
    right: 14px;
  }
}
.c-select select {
  width: 100%;
  height: 70px;
  padding: 0 0 0 15px;
  font-size: 16px;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .c-select select {
    height: 50px;
    padding-left: 10px;
    font-size: 14px;
  }
}

/* 幅 */
.ipt-w132 {
  width: 132px;
}
@media only screen and (max-width: 767px) {
  .ipt-w132 {
    width: 70px;
  }
}

.ipt-w220 {
  width: 220px;
}
@media only screen and (max-width: 767px) {
  .ipt-w220 {
    width: 100%;
  }
}

.ipt-w270 {
  width: 270px;
}
@media only screen and (max-width: 767px) {
  .ipt-w270 {
    width: 100%;
  }
}

.ipt-w320 {
  width: 320px;
}
@media only screen and (max-width: 767px) {
  .ipt-w320 {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .ipt-sp-w70 {
    width: 70px;
  }
}

@media only screen and (max-width: 767px) {
  .ipt-sp-w100 {
    width: 150px;
  }
}

@media only screen and (max-width: 767px) {
  .ipt-sp-w150 {
    width: 150px;
  }
}

@media only screen and (max-width: 767px) {
  .ipt-sp-w200 {
    width: 200px;
  }
}

/*--------------------------------------------------------------------------
  c-hdg
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.c-hdg-ico {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.c-hdg-ico__ico {
  line-height: 1;
}
.c-hdg-ico__txt {
  margin-left: 10px;
}
@media only screen and (max-width: 767px) {
  .c-hdg-ico__txt {
    margin-left: 6px;
  }
}
.c-hdg-ico--line {
  padding-bottom: 15px;
  border-bottom: 1px solid #7B7A78;
}
@media only screen and (max-width: 767px) {
  .c-hdg-ico--line {
    padding-bottom: 10px;
  }
}

.c-side-hdg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: clamp(12.5px, 1.953125vw, 25px);
}
.c-side-hdg__ico {
  width: 30px;
  line-height: 1;
}
.c-side-hdg__ico img {
  width: 100%;
  height: auto;
}
.c-side-hdg__ja {
  margin-top: 10px;
  font-size: clamp(8.5px, 1.328125vw, 17px);
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 1.4;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .c-side-hdg__ja {
    font-size: 15px;
  }
}
.c-side-hdg__en {
  margin-top: 5px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.92px;
}
.c-hdg-section {
  position: relative;
  margin-bottom: clamp(50px, 6.9444444444vw, 100px);
  font-size: clamp(13px, 1.8055555556vw, 26px);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  .c-hdg-section {
    font-size: 22px;
    letter-spacing: normal;
  }
}
.c-hdg-section::after {
  content: "";
  position: absolute;
  bottom: -17px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 44px;
  height: 3px;
  background: #bbb;
}
@media only screen and (max-width: 767px) {
  .c-hdg-section::after {
    height: 2px;
  }
}
.c-hdg-section._white {
  color: #fff;
}

/*--------------------------------------------------------------------------
  c-layout-
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.c-layout-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: clamp(50px, 7.8125vw, 100px);
}
@media only screen and (max-width: 767px) {
  .c-layout-flex {
    display: block;
  }
}
.c-layout-flex__main {
  width: 70.3%; /*900*/
}
@media only screen and (max-width: 767px) {
  .c-layout-flex__main {
    width: auto;
  }
}
.c-layout-flex__sub {
  width: 23.4%;
  margin-left: auto;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
@media screen and (max-width: 1280px) {
  .c-layout-flex__sub {
    width: 28%;
  }
}
@media only screen and (max-width: 767px) {
  .c-layout-flex__sub {
    width: auto;
    margin: 60px 0 0;
  }
}

/*--------------------------------------------------------------------------
  c-bg
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.c-bg._bg-black {
  background: #222;
}
.c-bg._bg-gray {
  background: #444;
}
.c-bg._bg-ivory {
  background: #F6F6F4;
}

/*--------------------------------------------------------------------------
  c-caption
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
figure {
  position: relative;
}

.c-caption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 12px;
  color: #fff;
}
.c-caption._left {
  right: inherit;
  left: 10px;
}
.c-caption._black {
  color: #333;
}

/*--------------------------------------------------------------------------
  c-bg
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.c-list-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
@media only screen and (max-width: 767px) {
  .c-list-check {
    gap: 6px;
  }
}
.c-list-check__item {
  position: relative;
  padding-left: 22px;
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: 0.84px;
}
@media only screen and (max-width: 767px) {
  .c-list-check__item {
    font-size: 13px;
  }
}
.c-list-check__item::before {
  position: absolute;
  top: 0px;
  left: 0;
  width: 16px;
  height: 16px;
  content: "";
  background: url("../img/common/ico_check.svg") no-repeat 50% 50%/contain;
}

.c-list-tag {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 5px;
}
.c-list-tag__item {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .c-list-tag__item {
    font-size: 11px;
  }
}

/*--------------------------------------------------------------------------
  m-special
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-special {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  aspect-ratio: 144/47;
  background: url(../img/top/bg_special_pc.webp) no-repeat 50% 50%/cover;
}
@media only screen and (max-width: 767px) {
  .m-special {
    aspect-ratio: 375/732;
    background: url(../img/top/bg_special_sp.webp) no-repeat 50% 50%/cover;
  }
}
.m-special__content {
  color: #fff;
}
.m-special__hdg {
  position: relative;
  padding-left: 15px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(16px, 1.6666666667vw, 18px);
  font-weight: 500;
  letter-spacing: 2.16px;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .m-special__hdg {
    font-size: clamp(9px, 4.8vw, 18px);
  }
}
.m-special__hdg::before {
  position: absolute;
  top: calc(0.5em - 3px);
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F7F7F7;
  content: "";
}
.m-special__copy {
  margin-top: clamp(15px, 2.7777777778vw, 30px);
  font-size: clamp(28px, 3.1481481481vw, 34px);
  font-weight: 600;
  letter-spacing: 3.4px;
}
@media only screen and (max-width: 767px) {
  .m-special__copy {
    margin-top: clamp(17.5px, 9.3333333333vw, 35px);
    font-size: clamp(17px, 9.0666666667vw, 34px);
  }
}
.m-special__txt {
  margin-top: clamp(15px, 2.7777777778vw, 30px);
  font-size: clamp(16px, 1.6666666667vw, 18px);
  line-height: 30px; /* 200% */
  letter-spacing: 1.8px;
}
@media only screen and (max-width: 767px) {
  .m-special__txt {
    margin-top: clamp(12.5px, 6.6666666667vw, 25px);
    font-size: clamp(9px, 4.8vw, 18px);
  }
}
.m-special__btn {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media only screen and (max-width: 767px) {
  .m-special__btn {
    position: relative;
    top: inherit;
    right: inherit;
    -webkit-transform: none;
            transform: none;
    margin-top: clamp(55px, 29.3333333333vw, 110px);
  }
}
.m-special__btn .c-btn__ico {
  margin-inline: 10px 0;
}
.m-special__btn .c-btn__ico svg {
  fill: none !important;
}

/*--------------------------------------------------------------------------
  m-panel-list
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-panel-list {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: -4.16vw;
}
@media only screen and (max-width: 767px) {
  .m-panel-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 0;
  }
}
.m-panel-list + .m-pager {
  margin-top: clamp(30px, 4.6875vw, 60px);
}
@media only screen and (max-width: 767px) {
  .m-panel-list + .m-pager {
    margin-top: 30px;
  }
}
.m-panel-list__item {
  margin-bottom: 4.16vw;
}
@media only screen and (max-width: 767px) {
  .m-panel-list__item {
    margin-bottom: 0;
  }
}
.m-panel-list__item a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .m-panel-list__item:hover.m-panel a .m-panel__img img, .mode-sp .m-panel-list__item:active.m-panel a .m-panel__img img {
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
}
.m-panel-list .m-panel {
  position: relative;
}
.m-panel-list .m-panel__tag {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  padding: 7px 12px;
  background: #000;
  border-left: 1px solid rgba(187, 187, 187, 0.5);
  border-bottom: 1px solid rgba(187, 187, 187, 0.5);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  z-index: 2;
}
.m-panel-list .m-panel__img {
  aspect-ratio: 3/2;
  overflow: hidden;
}
.m-panel-list .m-panel__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.m-panel-list .m-panel__hdg {
  margin-top: clamp(5px, 0.6944444444vw, 10px);
  font-size: clamp(14px, 1.1111111111vw, 16px);
  font-weight: 700;
  line-height: 24px; /* 150% */
  letter-spacing: 1.6px;
}
@media only screen and (max-width: 767px) {
  .m-panel-list .m-panel__hdg {
    margin-top: clamp(7.5px, 4vw, 15px);
    font-size: 16px;
  }
}
.m-panel-list .m-panel__date {
  margin-top: 8px;
  color: var(--Font-Secondary, #7B7A78);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 21px; /* 175% */
  letter-spacing: 0.84px;
}
@media only screen and (max-width: 767px) {
  .m-panel-list .m-panel__date {
    margin-top: clamp(5px, 2.6666666667vw, 10px);
  }
}
.m-panel-list--two {
  gap: 4.6875%;
}
@media only screen and (max-width: 767px) {
  .m-panel-list--two {
    gap: 30px;
  }
}
.m-panel-list--two .m-panel-list__item {
  width: 47.65%;
}
@media only screen and (max-width: 767px) {
  .m-panel-list--two .m-panel-list__item {
    width: auto;
  }
}
.m-panel-list--three {
  gap: 4.6875%;
}
@media only screen and (max-width: 767px) {
  .m-panel-list--three {
    gap: 30px;
  }
}
.m-panel-list--three .m-panel-list__item {
  width: 30.2%;
}
@media only screen and (max-width: 767px) {
  .m-panel-list--three .m-panel-list__item {
    width: auto;
  }
}

/*--------------------------------------------------------------------------
  m-section
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-section {
  padding-block: clamp(50px, 6.9444444444vw, 100px);
}
@media only screen and (max-width: 767px) {
  .m-section {
    padding-block: clamp(50px, 26.6666666667vw, 100px);
  }
}
.m-section__hdg {
  margin-bottom: clamp(25px, 3.4722222222vw, 50px);
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .m-section__hdg {
    margin-bottom: clamp(25px, 13.3333333333vw, 50px);
  }
}
.m-section__hdg-ja {
  display: block;
  color: #56524E;
  font-size: clamp(13px, 2.03125vw, 26px);
  font-weight: 500;
  letter-spacing: 2.6px;
}
@media only screen and (max-width: 767px) {
  .m-section__hdg-ja {
    font-size: 24px;
  }
}
.m-section__hdg-en {
  display: block;
  font-family: "Montserrat", sans-serif;
  color: #7B7A78;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2.08px;
}
@media only screen and (max-width: 767px) {
  .m-section__hdg-en {
    margin-top: 10px;
  }
}
.m-section__link {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  letter-spacing: 0.84px;
}
.m-section__link a {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}
.m-section__link a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #7B7A78;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .m-section__link a:hover::after, .mode-sp .m-section__link a:active::after {
  left: 100%;
  width: 0;
}
.m-section__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: clamp(40px, 6.25vw, 80px);
}
@media only screen and (max-width: 767px) {
  .m-section__btn {
    margin-top: clamp(17.5px, 9.3333333333vw, 35px);
  }
}
.m-section--bg {
  background: #F6F6F4;
}
.m-section--black {
  background: #222;
}
.m-section--black .m-section__hdg-ja, .m-section--black .m-section__hdg-en {
  color: #fff;
}

/*--------------------------------------------------------------------------
  m-category-nav
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-category-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 30px;
}
.m-category-nav__item {
  width: 18.5%;
  margin: 0 0 20px 1.85%;
  aspect-ratio: 20/11;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .m-category-nav__item {
    width: 48%;
    margin: 0 0 20px;
    aspect-ratio: inherit;
  }
  .m-category-nav__item:nth-child(even) {
    margin-left: auto !important;
  }
}
.m-category-nav__item:nth-child(5n+1) {
  margin-left: 0;
}
.m-category-nav__item a {
  display: block;
  padding: 9px 5px 13px;
  background: #fff;
  text-align: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .m-category-nav__item a:hover, .mode-sp .m-category-nav__item a:active {
  background-color: rgba(255, 255, 255, 0.8);
}
.m-category-nav__item-ico {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50px;
  height: 50px;
  margin-inline: auto;
}
.m-category-nav__item-txt {
  font-size: clamp(6.5px, 1.2037037037vw, 13px);
  line-height: 18px;
  letter-spacing: 2.21px;
}
@media only screen and (max-width: 767px) {
  .m-category-nav__item-txt {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 1px;
  }
}

/*--------------------------------------------------------------------------
  m-ranking
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-ranking {
  padding-block: clamp(50px, 6.9444444444vw, 100px);
  background: #222;
}
@media only screen and (max-width: 767px) {
  .m-ranking {
    padding-block: clamp(50px, 26.6666666667vw, 100px);
  }
}
.m-ranking__hdg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: clamp(25px, 3.4722222222vw, 50px);
}
@media only screen and (max-width: 767px) {
  .m-ranking__hdg {
    margin-bottom: clamp(25px, 13.3333333333vw, 50px);
  }
}
.m-ranking__hdg-ico {
  display: block;
  width: 22px;
  line-height: 1;
}
.m-ranking__hdg-ico img {
  width: 100%;
  height: auto;
}
.m-ranking__hdg-ja {
  display: block;
  color: #56524E;
  font-size: clamp(13px, 2.03125vw, 26px);
  font-weight: 500;
  color: #fff;
  letter-spacing: 2.6px;
}
@media only screen and (max-width: 767px) {
  .m-ranking__hdg-ja {
    margin-top: 5px;
    font-size: 24px;
  }
}
.m-ranking__hdg-en {
  display: block;
  color: #393939;
  font-family: "Montserrat", sans-serif;
  color: #7B7A78;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 2.08px;
}
@media only screen and (max-width: 767px) {
  .m-ranking__hdg-en {
    margin-top: 5px;
    font-size: 13px;
  }
}
.m-ranking__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .m-ranking__content {
    display: block;
  }
}
.m-ranking__list {
  width: 53.7%;
}
@media only screen and (max-width: 767px) {
  .m-ranking__list {
    width: auto;
  }
}
.m-ranking__list-item {
  padding-bottom: clamp(10px, 1.8518518519vw, 20px);
  border-bottom: 1px solid #bbb;
}
@media only screen and (max-width: 767px) {
  .m-ranking__list-item {
    padding-bottom: 15px;
  }
}
.m-ranking__list-item:not(:first-of-type) {
  padding-top: clamp(10px, 1.8518518519vw, 20px);
}
@media only screen and (max-width: 767px) {
  .m-ranking__list-item:not(:first-of-type) {
    padding-top: 15px;
  }
}
.m-ranking__list-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .m-ranking__list-item a:hover, .mode-sp .m-ranking__list-item a:active {
  opacity: 0.7;
}
.m-ranking__list-item .num {
  width: 70px;
  color: var(--Gray-Gray500, #BBB);
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 4.76px;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .m-ranking__list-item .num {
    width: 50px;
    font-size: 22px;
    letter-spacing: 2.5px;
  }
}
.m-ranking__list-item .body {
  width: calc(100% - 70px);
}
@media only screen and (max-width: 767px) {
  .m-ranking__list-item .body {
    width: calc(100% - 50px);
  }
}
.m-ranking__list-item .hdg {
  color: var(--Font-White, #FFF);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px; /* 157.143% */
  letter-spacing: 1.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-ranking__list-item .sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 5px;
}
.m-ranking__list-item .tag {
  color: var(--Gray-Gray500, #BBB);
  font-size: 12px;
  line-height: 21px; /* 175% */
  letter-spacing: 0.84px;
}
.m-ranking__list-item .date {
  position: relative;
  color: var(--Gray-Gray500, #BBB);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 21px; /* 175% */
  letter-spacing: 0.84px;
}
.m-ranking__list-item .date::before {
  content: "/";
  margin-inline: 5px;
}
.m-ranking__body {
  width: 38.88%;
  margin-left: auto;
}
@media only screen and (max-width: 767px) {
  .m-ranking__body {
    width: auto;
    margin: 40px 0 0;
  }
}
.m-ranking__search-body {
  position: relative;
  width: 100%;
}
.m-ranking__search-input {
  width: 100%;
  height: 62px;
  padding-inline: 24px 50px;
  -webkit-box-sizing: border-box !important;
          box-sizing: border-box !important;
  border: 1px solid #fff;
}
@media only screen and (max-width: 767px) {
  .m-ranking__search-input {
    height: 50px;
    padding-inline: 12px 45px;
  }
}
.m-ranking__search input {
  color: #fff;
}
.m-ranking__search input::-webkit-input-placeholder {
  font-size: 15px;
  color: #fff;
}
.m-ranking__search input::-moz-placeholder {
  font-size: 15px;
  color: #fff;
}
.m-ranking__search input:-ms-input-placeholder {
  font-size: 15px;
  color: #fff;
}
.m-ranking__search input::-ms-input-placeholder {
  font-size: 15px;
  color: #fff;
}
.m-ranking__search input::placeholder {
  font-size: 15px;
  color: #fff;
}
.m-ranking__search-btn {
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  line-height: 1;
}
.m-ranking__subhdg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: clamp(12.5px, 2.3148148148vw, 25px);
}
@media only screen and (max-width: 767px) {
  .m-ranking__subhdg {
    margin-top: 30px;
  }
}
.m-ranking__subhdg .ico {
  width: 18px;
  line-height: 1;
}
.m-ranking__subhdg .ico img {
  width: 100%;
  height: auto;
}
.m-ranking__subhdg .txt {
  margin-left: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: 1.4px;
}
.m-ranking__tag {
  margin-top: clamp(40px, 7.4074074074vw, 80px);
}
.m-ranking__taglist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px;
}
.m-ranking__taglist-item {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2.04px;
}
.m-ranking__taglist-item a {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid #bbb;
  border-radius: 8px;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (max-width: 767px) {
  .m-ranking__taglist-item a {
    padding: 8px 12px;
    border-radius: 6px;
  }
}
.mode-pc .m-ranking__taglist-item a:hover, .mode-sp .m-ranking__taglist-item a:active {
  background-color: #000;
}

/*--------------------------------------------------------------------------
  m-experience
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-experience {
  padding-block: clamp(50px, 6.9444444444vw, 100px);
  background: #fff;
}
@media only screen and (max-width: 767px) {
  .m-experience {
    padding-block: clamp(50px, 26.6666666667vw, 100px);
  }
}
.m-experience__hdg {
  margin-bottom: clamp(25px, 3.4722222222vw, 50px);
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .m-experience__hdg {
    margin-bottom: clamp(25px, 13.3333333333vw, 50px);
  }
}
.m-experience__hdg-ja {
  display: block;
  color: #56524E;
  font-size: clamp(13px, 2.03125vw, 26px);
  font-weight: 500;
  letter-spacing: 2.6px;
}
@media only screen and (max-width: 767px) {
  .m-experience__hdg-ja {
    margin-top: 5px;
    font-size: 24px;
  }
}
.m-experience__hdg-en {
  display: block;
  color: #393939;
  font-family: "Montserrat", sans-serif;
  color: #7B7A78;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2.08px;
}
@media only screen and (max-width: 767px) {
  .m-experience__hdg-en {
    margin-top: 5px;
    font-size: 13px;
  }
}
.m-experience__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .m-experience__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: clamp(15px, 8vw, 30px);
  }
}
.m-experience__item {
  width: 30.2%;
  border: 1px solid #BBB;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .m-experience__item {
    width: auto;
  }
}
.m-experience__item a {
  display: block;
  padding: clamp(25px, 3.90625vw, 50px) 10px clamp(20px, 3.125vw, 40px);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (max-width: 767px) {
  .m-experience__item a {
    padding: 30px 10px;
  }
}
.mode-pc .m-experience__item a:hover, .mode-sp .m-experience__item a:active {
  background: #eee;
}
.mode-pc .m-experience__item a:hover .sec-category__item-img img, .mode-sp .m-experience__item a:active .sec-category__item-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.m-experience__item-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: clamp(12.5px, 1.953125vw, 25px) clamp(10px, 1.5625vw, 20px) 0;
}
@media only screen and (max-width: 767px) {
  .m-experience__item-body {
    padding: clamp(12.5px, 6.6666666667vw, 25px) clamp(10px, 5.3333333333vw, 20px) 0;
  }
}
.m-experience__item-img {
  max-width: 180px;
  width: 100%;
  margin-inline: auto;
}
.m-experience__item-img img {
  max-width: 100%;
  height: auto;
}
.m-experience__item-hdg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: clamp(20px, 3.125vw, 40px);
}
.m-experience__item-hdg .ja {
  color: #7B7A78;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px; /* 175% */
  letter-spacing: 1.68px;
}
.m-experience__item-hdg .en {
  margin-top: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 24px; /* 114.286% */
  letter-spacing: 2.1px;
}
.m-experience__item-txt {
  margin-top: clamp(10px, 1.5625vw, 20px);
  font-size: 12px;
  color: #7B7A78;
  line-height: 21px;
  letter-spacing: 0.84px;
}
.m-experience__item-link {
  margin-top: clamp(10px, 1.5625vw, 20px);
}

/*--------------------------------------------------------------------------
  m-pankuzu
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-pankuzu {
  margin-bottom: clamp(15px, 2.0833333333vw, 30px);
  padding: 15px clamp(9px, 1.25vw, 18px);
}
@media only screen and (max-width: 767px) {
  .m-pankuzu {
    margin-bottom: 30px;
    padding: 10px 10px;
  }
}
.m-pankuzu__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: auto;
}
.m-pankuzu__item {
  position: relative;
  color: #7B7A78;
  font-size: 11px;
  letter-spacing: 0.66px;
  white-space: nowrap;
}
.m-pankuzu__item:not(:first-of-type) {
  margin-left: 10px;
  padding-left: 15px;
}
.m-pankuzu__item:not(:first-of-type)::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  content: ">";
}
.m-pankuzu__item a {
  color: #7B7A78;
  text-decoration: underline;
}
.mode-pc .m-pankuzu__item a:hover, .mode-sp .m-pankuzu__item a:active {
  text-decoration: none;
}

/*--------------------------------------------------------------------------
  m-pager
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-pager__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.m-pager__item {
  margin: 0 5px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
}
@media only screen and (max-width: 767px) {
  .m-pager__item {
    margin: 0 5px;
  }
}
.m-pager__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(34, 34, 34, 0);
  border-radius: 50%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .m-pager__item a:hover, .m-pager__item a.is-current {
  color: #fff;
  background: #222222;
}
.m-pager__item--prev a, .m-pager__item--next a {
  position: relative;
}
.m-pager__item--prev a svg, .m-pager__item--next a svg {
  width: 24px;
  height: 24px;
  fill: #56524E;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .m-pager__item--prev a:hover svg, .mode-pc .m-pager__item--next a:hover svg {
  fill: #fff;
}

/*--------------------------------------------------------------------------
  m-txt-pager
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-txt-pager {
  position: relative;
  margin-top: clamp(40px, 5.5555555556vw, 80px);
}
@media only screen and (max-width: 767px) {
  .m-txt-pager {
    margin-top: 50px;
  }
}
.m-txt-pager__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.m-txt-pager__back {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media only screen and (max-width: 767px) {
  .m-txt-pager__back.c-btn {
    width: 140px;
  }
}
.m-txt-pager__move a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .m-txt-pager__move a:hover {
  color: #7B7A78;
}
.mode-pc .m-txt-pager__move a:hover .ico svg {
  fill: #7B7A78;
}
.m-txt-pager__move .ico {
  line-height: 1;
}
.m-txt-pager__move .ico svg {
  width: 24px;
  height: 24px;
  fill: #56524E;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.m-txt-pager__move .txt {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .m-txt-pager__move .txt {
    letter-spacing: normal;
  }
}

/*--------------------------------------------------------------------------
  m-side-ranking
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-side-ranking {
  padding: clamp(10px, 1.5625vw, 20px) clamp(10px, 1.5625vw, 20px) clamp(12px, 1.875vw, 24px);
  background: #fff;
}
@media only screen and (max-width: 767px) {
  .m-side-ranking {
    padding: clamp(15px, 8vw, 30px) clamp(10px, 5.3333333333vw, 20px);
  }
}
.m-side-ranking__list {
  padding-top: 30px;
  border-top: 1px solid #7B7A78;
}
@media only screen and (max-width: 767px) {
  .m-side-ranking__list {
    width: auto;
  }
}
.m-side-ranking__item {
  position: relative;
}
.m-side-ranking__item:not(:first-of-type) {
  margin-top: clamp(10px, 1.8518518519vw, 20px);
}
@media only screen and (max-width: 767px) {
  .m-side-ranking__item:not(:first-of-type) {
    margin-top: 15px;
  }
}
.m-side-ranking__item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .m-side-ranking__item a:hover, .mode-sp .m-side-ranking__item a:active {
  opacity: 0.7;
}
.m-side-ranking__item-num {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 17px;
  aspect-ratio: 1/1;
  background: #222;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  line-height: 1;
}
.m-side-ranking__item-img {
  width: 80px;
  aspect-ratio: 1/1;
}
@media only screen and (max-width: 767px) {
  .m-side-ranking__item-img {
    width: 60px;
  }
}
.m-side-ranking__item-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.m-side-ranking__item-txt {
  width: calc(100% - 90px);
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px; /* 157.143% */
  letter-spacing: 1.3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .m-side-ranking__item-txt {
    width: calc(100% - 70px);
    -webkit-line-clamp: 3;
  }
}

/*--------------------------------------------------------------------------
  m-side-category
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-side-category {
  margin-top: clamp(15px, 2.34375vw, 30px);
  padding: clamp(10px, 1.5625vw, 20px) clamp(10px, 1.5625vw, 20px) clamp(12px, 1.875vw, 24px);
  background: #fff;
}
@media only screen and (max-width: 767px) {
  .m-side-category {
    margin-top: 30px;
    padding: clamp(15px, 8vw, 30px) clamp(10px, 5.3333333333vw, 20px);
  }
}
.m-side-category__nav {
  padding: 0 10px;
  border-top: 1px solid #7B7A78;
}
.m-side-category__nav-item:not(:last-of-type) {
  border-bottom: 1px solid #bbb;
}
.m-side-category__nav-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .m-side-category__nav-item a:hover, .mode-sp .m-side-category__nav-item a:active {
  opacity: 0.7;
}
.m-side-category__nav-item .ico {
  width: 30px;
  aspect-ratio: 1/1;
}
.m-side-category__nav-item .ico img {
  width: 100%;
  height: auto;
}
.m-side-category__nav-item .txt {
  width: calc(100% - 40px);
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px; /* 157.143% */
  letter-spacing: 1.3px;
}
/*--------------------------------------------------------------------------
  m-side-store
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-side-store {
  margin-top: clamp(15px, 2.34375vw, 30px);
  padding: clamp(10px, 1.5625vw, 20px) clamp(10px, 1.5625vw, 20px) clamp(12px, 1.875vw, 24px);
  background: #fff;
}
@media only screen and (max-width: 767px) {
  .m-side-store {
    margin-top: 30px;
    padding: clamp(15px, 8vw, 30px) clamp(10px, 5.3333333333vw, 20px);
  }
}
.m-side-store__img {
  aspect-ratio: 1/1;
}
.m-side-store__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.m-side-store__btn {
  position: relative;
  margin-top: 20px;
  text-align: center;
}
.m-side-store__btn a {
  position: relative;
  display: block;
  padding: 10px 5px;
  background: rgba(221, 221, 221, 0);
  border: 1px solid #7B7A78;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .m-side-store__btn a:hover, .mode-sp .m-side-store__btn a:active {
  background: #000;
  color: #fff;
}
.mode-pc .m-side-store__btn a:hover svg, .mode-sp .m-side-store__btn a:active svg {
  fill: #fff;
}
.m-side-store__btn .txt {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1.92px;
}
@media only screen and (max-width: 767px) {
  .m-side-store__btn .txt {
    width: calc(100% - 50px);
  }
}
.m-side-store__btn .ico {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  line-height: 1;
}
.m-side-store__btn .ico svg {
  fill: #56524E;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/*--------------------------------------------------------------------------
  m-writer
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-writer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 30px;
  padding: clamp(16px, 2.2222222222vw, 32px) clamp(20px, 2.7777777778vw, 40px) clamp(20px, 2.7777777778vw, 40px) clamp(20px, 2.7777777778vw, 40px);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--Gray-Gray500, #BBB);
  background: #FFF;
}
@media only screen and (max-width: 767px) {
  .m-writer {
    padding: 25px 15px;
  }
}
.m-writer__human {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 34px;
}
@media only screen and (max-width: 767px) {
  .m-writer__human {
    gap: 16px;
  }
}
.m-writer__human-img {
  width: 70px;
  height: 70px;
}
@media only screen and (max-width: 767px) {
  .m-writer__human-img {
    width: 60px;
    height: 60px;
  }
}
.m-writer__human-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}
.m-writer__human-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: calc(100% - 104px);
  gap: 10px;
  line-height: 1.1;
}
@media only screen and (max-width: 767px) {
  .m-writer__human-body {
    width: calc(100% - 76px);
    gap: 6px;
  }
}
.m-writer__human-hdg {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.98px;
}
@media only screen and (max-width: 767px) {
  .m-writer__human-hdg {
    font-size: 13px;
  }
}
.m-writer__human-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.8px;
}
@media only screen and (max-width: 767px) {
  .m-writer__human-name {
    font-size: 15px;
  }
}
.m-writer__human-job {
  color: #7B7A78;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.98px;
}
@media only screen and (max-width: 767px) {
  .m-writer__human-job {
    font-size: 13px;
  }
}
.m-writer__lead {
  margin-top: clamp(15px, 2.0833333333vw, 30px);
  font-size: 14px;
  line-height: 25px; /* 178.571% */
  letter-spacing: 0.98px;
}
@media only screen and (max-width: 767px) {
  .m-writer__lead {
    margin-top: 20px;
    font-size: 13px;
  }
}
.m-writer__txt {
  margin-top: clamp(12.5px, 1.7361111111vw, 25px);
  padding-top: clamp(12.5px, 1.7361111111vw, 25px);
  border-top: 1px solid #ddd;
  font-size: clamp(14px, 1.0416666667vw, 15px);
  line-height: 30px; /* 200% */
  letter-spacing: 1.05px;
}
@media only screen and (max-width: 767px) {
  .m-writer__txt {
    margin-top: 25px;
    font-size: 15px;
  }
}

/*--------------------------------------------------------------------------
  m-related
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-related {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: clamp(30px, 4.1666666667vw, 60px) clamp(40px, 5.5555555556vw, 80px);
  gap: clamp(25px, 3.4722222222vw, 50px);
  background: #fff;
}
.m-related__hdg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: clamp(25px, 3.4722222222vw, 50px);
}
@media only screen and (max-width: 767px) {
  .m-related__hdg {
    margin-bottom: clamp(25px, 13.3333333333vw, 50px);
  }
}
.m-related__hdg-ja {
  display: block;
  color: #56524E;
  font-size: clamp(13px, 2.03125vw, 26px);
  font-weight: 500;
  letter-spacing: 2.6px;
}
@media only screen and (max-width: 767px) {
  .m-related__hdg-ja {
    margin-top: 5px;
    font-size: 24px;
  }
}
.m-related__hdg-en {
  display: block;
  color: #393939;
  font-family: "Montserrat", sans-serif;
  color: #7B7A78;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2.08px;
}
@media only screen and (max-width: 767px) {
  .m-related__hdg-en {
    margin-top: 5px;
    font-size: 13px;
  }
}
/*--------------------------------------------------------------------------
  m-pageheader
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-page-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  aspect-ratio: 144/40;
  z-index: 0;
}
@media only screen and (max-width: 767px) {
  .m-page-header {
    aspect-ratio: 4/3;
  }
}
.m-page-header__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  aspect-ratio: 144/40;
}
@media only screen and (max-width: 767px) {
  .m-page-header__bg {
    aspect-ratio: 4/3;
  }
}
.m-page-header__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.m-page-header__body {
  text-align: center;
}
.m-page-header__hdg {
  font-size: clamp(14px, 1.9444444444vw, 28px);
  font-weight: 600;
  color: #FFF;
  line-height: 1.1;
}
@media only screen and (max-width: 767px) {
  .m-page-header__hdg {
    font-size: 24px;
  }
}
.m-page-header__copy {
  margin-top: clamp(20px, 2.7777777778vw, 40px);
  font-size: 15px;
  color: #FFF;
  letter-spacing: 1.5px;
}
@media only screen and (max-width: 767px) {
  .m-page-header__copy {
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.6;
  }
}

/*--------------------------------------------------------------------------
  m-page-lead
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-page-lead {
  position: relative;
  z-index: 0;
  padding-block: clamp(20px, 2.7777777778vw, 40px) clamp(55px, 7.6388888889vw, 110px);
}
@media only screen and (max-width: 767px) {
  .m-page-lead {
    padding-block: 10px 50px;
  }
}
.m-page-lead__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(35px, 4.8611111111vw, 70px);
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .m-page-lead__content {
    gap: 30px;
  }
}
.m-page-lead__copy {
  font-size: clamp(16px, 2.2222222222vw, 32px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  .m-page-lead__copy {
    font-size: 24px;
  }
}
.m-page-lead__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(15px, 2.0833333333vw, 30px);
}
@media only screen and (max-width: 767px) {
  .m-page-lead__body {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 20px;
  }
}
.m-page-lead__txt {
  font-size: 15px;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .m-page-lead__txt {
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
  }
}
.m-page-lead__txt strong {
  font-size: clamp(15px, 1.1805555556vw, 17px);
}
@media only screen and (max-width: 767px) {
  .m-page-lead__txt strong {
    font-size: 15px;
  }
}
.m-page-lead__txt a {
  text-decoration: underline;
}
.m-page-lead__txt a:hover, .m-page-lead__txt a:active {
  text-decoration: none;
}
.m-page-lead__cap {
  margin-top: -10px;
  font-size: 13px;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .m-page-lead__cap {
    font-size: 13px;
    line-height: 1.8;
    text-align: left;
  }
}
.m-page-lead .l-flex-grid {
  gap: 20px;
}
@media only screen and (max-width: 767px) {
  .m-page-lead .l-flex-grid {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

/*--------------------------------------------------------------------------
  m-ico-panel
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-ico-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(10px, 1.3888888889vw, 20px);
  padding: clamp(15px, 2.0833333333vw, 30px) clamp(15px, 2.0833333333vw, 30px) clamp(20px, 2.7777777778vw, 40px) clamp(15px, 2.0833333333vw, 30px);
  border: 1px solid #BBB;
  background: #FFF;
}
@media only screen and (max-width: 767px) {
  .m-ico-panel {
    padding: 25px 20px;
  }
}
.m-ico-panel__hdg {
  text-align: center;
  font-size: clamp(14px, 1.1111111111vw, 16px);
  font-weight: 700;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .m-ico-panel__hdg {
    margin-top: 10px;
    font-size: 15px;
  }
}
.m-ico-panel__txt {
  font-size: 13px;
  line-height: 2;
}
/*--------------------------------------------------------------------------
  m-item-panel
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-item-panel {
  position: relative;
  z-index: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  width: 100%;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .m-item-panel {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-inline: 20px;
  }
}
.m-item-panel *._en {
  font-family: "Montserrat", sans-serif;
}
.m-item-panel__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50%;
  padding-inline: clamp(40px, 5.5555555556vw, 80px);
}
@media only screen and (max-width: 767px) {
  .m-item-panel__body {
    width: auto;
    padding-inline: 0;
  }
}
.m-item-panel__head {
  font-size: 13px;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  .m-item-panel__head {
    font-size: 14px;
  }
}
.m-item-panel__hdg {
  margin-top: clamp(5px, 0.6944444444vw, 10px);
  font-size: clamp(11px, 1.5277777778vw, 22px);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
@media only screen and (max-width: 767px) {
  .m-item-panel__hdg {
    margin-top: 10px;
    font-size: 20px;
    line-height: 1.5;
  }
}
.m-item-panel__lead {
  margin-top: clamp(5px, 0.6944444444vw, 10px);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  .m-item-panel__lead {
    margin-top: 10px;
    font-size: 15px;
  }
}
.m-item-panel__txt {
  position: relative;
  margin-top: clamp(20px, 2.7777777778vw, 40px);
  padding-top: clamp(20px, 2.7777777778vw, 40px);
  border-top: 1px solid #bbb;
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .m-item-panel__txt {
    margin-top: 20px;
    padding-top: 20px;
    font-size: 14px;
  }
}
.m-item-panel__txt::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 100%;
  width: 100vw;
  height: 1px;
  background: #bbb;
}
@media only screen and (max-width: 767px) {
  .m-item-panel__txt::before {
    content: none;
  }
}
.m-item-panel__img {
  width: 50%;
}
@media only screen and (max-width: 767px) {
  .m-item-panel__img {
    width: auto;
    margin-top: 20px;
  }
}
.m-item-panel__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.m-item-panel._reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
@media only screen and (max-width: 767px) {
  .m-item-panel._reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.m-item-panel._reverse .m-item-panel__txt::before {
  right: inherit;
  left: 100%;
}

/*--------------------------------------------------------------------------
  m-item-board
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-item-board {
  position: relative;
  z-index: 0;
  max-width: 800px;
  width: 100%;
  margin-inline: auto;
  padding: clamp(20px, 2.7777777778vw, 40px) clamp(25px, 3.4722222222vw, 50px) clamp(25px, 3.4722222222vw, 50px) clamp(25px, 3.4722222222vw, 50px);
  background: #F6F6F4;
}
.m-item-board._white {
  background: #fff;
}
.m-item-board__hdg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 767px) {
  .m-item-board__hdg {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.m-item-board__hdg .num {
  position: relative;
  margin-right: 15px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(11px, 1.5277777778vw, 22px);
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  .m-item-board__hdg .num {
    margin: 0 0 10px;
    font-size: 20px;
  }
}
.m-item-board__hdg .num::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #bbb;
}
.m-item-board__hdg .ico {
  width: 22px;
  height: 22px;
  margin-right: 10px;
}
.m-item-board__hdg .txt {
  font-size: clamp(10.5px, 1.4583333333vw, 21px);
  font-weight: 700;
  letter-spacing: 0.1em;
}
@media only screen and (max-width: 767px) {
  .m-item-board__hdg .txt {
    font-size: 16px;
    text-align: center;
  }
}
.m-item-board__hdg .txt._small {
  font-size: clamp(8px, 1.1111111111vw, 16px);
}
@media only screen and (max-width: 767px) {
  .m-item-board__hdg .txt._small {
    font-size: 16px;
  }
}
.m-item-board__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  gap: clamp(15px, 2.0833333333vw, 30px);
  margin-top: clamp(10px, 1.3888888889vw, 20px);
}
@media only screen and (max-width: 767px) {
  .m-item-board__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    margin-top: 20px;
  }
}
.m-item-board__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50%;
}
@media only screen and (max-width: 767px) {
  .m-item-board__body {
    width: auto;
  }
}
.m-item-board__txt {
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 767px) {
  .m-item-board__txt {
    font-size: 14px;
  }
}
.m-item-board .c-btn-more {
  margin-top: clamp(10px, 1.3888888889vw, 20px);
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .m-item-board .c-btn-more {
    margin-top: 20px;
    text-align: center;
  }
}
.m-item-board__img {
  width: 50%;
}
@media only screen and (max-width: 767px) {
  .m-item-board__img {
    width: auto;
  }
}
.m-item-board__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/*--------------------------------------------------------------------------
  m-next
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-next {
  padding-block: clamp(50px, 6.9444444444vw, 100px);
  background: #fff;
}
@media only screen and (max-width: 767px) {
  .m-next {
    padding-block: 50px;
  }
}
.m-next__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .m-next__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: clamp(15px, 8vw, 30px);
  }
}
.m-next__item {
  width: 30.2%;
  border: 1px solid #BBB;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .m-next__item {
    width: auto;
  }
}
.m-next__item a {
  display: block;
  padding: clamp(25px, 3.4722222222vw, 50px) 10px clamp(20px, 2.7777777778vw, 40px);
  background: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (max-width: 767px) {
  .m-next__item a {
    padding: 30px 10px;
  }
}
.mode-pc .m-next__item a:hover, .mode-sp .m-next__item a:active {
  background: #eee;
}
.mode-pc .m-next__item a:hover .sec-category__item-img img, .mode-sp .m-next__item a:active .sec-category__item-img img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.m-next__item-img {
  max-width: 180px;
  width: 100%;
  margin-inline: auto;
}
.m-next__item-img img {
  max-width: 100%;
  height: auto;
}
.m-next__item-hdg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: clamp(10px, 1.3888888889vw, 20px);
  font-size: clamp(10.5px, 1.4583333333vw, 21px);
  font-weight: 700;
  line-height: 1.4;
}
@media only screen and (max-width: 767px) {
  .m-next__item-hdg {
    margin-top: 18px;
    font-size: 16px;
  }
}
.m-next__item-txt {
  margin-top: clamp(5px, 0.6944444444vw, 10px);
  font-size: 13px;
}
@media only screen and (max-width: 767px) {
  .m-next__item-txt {
    margin-top: 12px;
  }
}
.m-next__item-link {
  margin-top: clamp(7.5px, 1.171875vw, 15px);
}
@media only screen and (max-width: 767px) {
  .m-next__item-link {
    margin-top: 12px;
  }
}
.m-next--col4 .m-next__item {
  width: 21.5%;
}
@media only screen and (max-width: 767px) {
  .m-next--col4 .m-next__item {
    width: 100%;
  }
}

/*--------------------------------------------------------------------------
  m-cta-store
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-cta-store {
  padding-block: clamp(50px, 6.9444444444vw, 100px);
  aspect-ratio: 144/70;
  background: url("../img/common/bg_cta.webp") no-repeat 50% 50%/cover;
}
@media only screen and (max-width: 767px) {
  .m-cta-store {
    padding-block: 0;
    background: url("../img/common/bg_cta_sp.webp") no-repeat 50% 50%/cover;
    aspect-ratio: 375/760;
  }
}
.m-cta-store__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 767px) {
  .m-cta-store__content {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
  }
}
.m-cta-store__hdg {
  font-size: clamp(17px, 2.3611111111vw, 34px);
  font-weight: 500;
  color: #fff;
  line-height: 1.58;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .m-cta-store__hdg {
    font-size: clamp(17px, 9.0666666667vw, 34px);
  }
}
.m-cta-store__txt {
  margin-top: clamp(25px, 3.4722222222vw, 50px);
  font-size: 15px;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .m-cta-store__txt {
    margin-top: 25px;
    line-height: 2;
    text-align: center;
  }
}
.m-cta-store__benefits {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: clamp(15px, 2.0833333333vw, 30px);
  margin-top: clamp(25px, 3.4722222222vw, 50px);
}
@media only screen and (max-width: 767px) {
  .m-cta-store__benefits {
    gap: clamp(5px, 2.6666666667vw, 10px);
    margin-top: 40px;
  }
}
.m-cta-store__benefits-item {
  width: 150px;
  height: 150px;
}
.m-cta-store__btn {
  margin-top: clamp(30px, 4.1666666667vw, 60px);
}
@media only screen and (max-width: 767px) {
  .m-cta-store__btn {
    max-width: 335px;
    width: 100%;
    margin: 50px auto 0;
  }
}
.m-cta-store__btn .c-btn {
  width: 320px;
  height: 70px;
}
@media only screen and (max-width: 767px) {
  .m-cta-store__btn .c-btn {
    width: 100%;
  }
}
.m-cta-store__btn .c-btn__ico svg {
  width: 22px;
  height: 21px;
}
.m-cta-store__btn .c-btn__txt {
  font-size: 19px;
}

/*--------------------------------------------------------------------------
  m-product
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.m-product__img {
  max-width: 210px;
  margin-inline: auto;
  aspect-ratio: 1/1;
}
.m-product__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.m-product__lead {
  font-size: 11px;
  letter-spacing: 0.77px;
  color: #7B7A78;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .m-product__lead {
    letter-spacing: normal;
  }
}
.m-product__name {
  margin-top: 5px;
  font-size: clamp(8px, 1.1111111111vw, 16px);
  font-weight: 700;
  letter-spacing: 1.28px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .m-product__name {
    font-size: 15px;
  }
}
.m-product__price {
  margin-top: 5px;
  font-size: clamp(14px, 1.1805555556vw, 17px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 1.7px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .m-product__price {
    margin-top: 15px;
    font-size: 14px;
  }
}
.m-product__price span {
  font-size: 13px;
}
.m-product__pointlist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
  margin-block: clamp(10px, 1.3888888889vw, 20px) clamp(12.5px, 1.7361111111vw, 25px);
  padding: clamp(10px, 1.3888888889vw, 20px) 5px 0;
  border-top: 1px solid #bbb;
}
.m-product__point {
  position: relative;
  padding-left: 22px;
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: 0.84px;
}
.m-product__point::before {
  position: absolute;
  top: 0px;
  left: 0;
  width: 16px;
  height: 16px;
  content: "";
  background: url("../img/common/ico_check.svg") no-repeat 50% 50%/contain;
}
.m-product__btn {
  margin-top: auto;
}
.m-product__btn .c-btn {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .m-product__btn .c-btn {
    height: 40px;
  }
}

/*--------------------------------------------------------------------------
  m-modal-shoes
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-modal-shoes {
  position: fixed;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  padding: 10px 0 20px;
  z-index: 999;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes {
    min-height: 0;
    padding: 30px 0;
  }
}
.m-modal-shoes.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.m-modal-shoes__bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}
.m-modal-shoes__wrap {
  position: relative;
  margin-block: auto;
  padding: 40px 20px 0;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__wrap {
    padding: 20px 20px 0;
    overflow: auto;
  }
}
.m-modal-shoes__close {
  position: absolute;
  top: -5px;
  right: 10px;
  width: 40px;
  height: 40px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__close {
    width: 20px;
    height: 20px;
  }
  .m-modal-shoes__close img {
    width: 100%;
    height: auto;
  }
}
.m-modal-shoes__close:hover {
  opacity: 0.7;
}
.m-modal-shoes__contents {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1200px;
  width: 100%;
  min-height: 700px;
  background: #fff;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__contents {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 0;
    overflow: auto;
  }
}
.m-modal-shoes__img {
  width: 50%;
}
@media screen and (max-height: 900px) {
  .m-modal-shoes__img {
    width: 40%;
  }
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__img {
    width: auto;
  }
}
.m-modal-shoes__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__img img {
    -o-object-position: 50% 100%;
       object-position: 50% 100%;
    aspect-ratio: 2/1;
  }
}
.m-modal-shoes__body {
  width: 50%;
  padding: clamp(30px, 4.1666666667vw, 60px);
}
@media screen and (max-height: 900px) {
  .m-modal-shoes__body {
    width: 60%;
    padding-block: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__body {
    width: auto;
    padding: 20px;
  }
}
.m-modal-shoes__copy {
  display: inline-block;
  padding: 5px 10px;
  background: #222;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.44px;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__copy {
    font-size: 11px;
  }
}
.m-modal-shoes__name {
  margin-top: clamp(5px, 0.6944444444vw, 10px);
  font-size: clamp(12px, 1.6666666667vw, 24px);
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__name {
    font-size: 18px;
  }
}
.m-modal-shoes__price {
  margin-top: clamp(5px, 0.6944444444vw, 10px);
  font-size: clamp(8.5px, 1.1805555556vw, 17px);
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__price {
    font-size: 15px;
  }
}
.m-modal-shoes__price span {
  font-size: 13px;
}
.m-modal-shoes__txt {
  margin-top: clamp(5px, 0.6944444444vw, 10px);
  font-size: 14px;
  line-height: 2;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__txt {
    font-size: 13px;
    line-height: 1.8;
  }
}
.m-modal-shoes__c-hdg {
  margin-bottom: 10px;
  padding-bottom: 5px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid #BBB;
  line-height: 1.4;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__c-hdg {
    font-size: 12px;
  }
}
.m-modal-shoes__recommend {
  margin-top: clamp(15px, 2.34375vw, 30px);
  padding: clamp(7.5px, 1.0416666667vw, 15px) clamp(10px, 1.3888888889vw, 20px);
  background: #F6F6F4;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__recommend {
    margin-top: 15px;
    padding: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__recommend .c-list-check__item {
    font-size: 12px;
  }
}
.m-modal-shoes .l-flex-grid {
  margin-top: clamp(10px, 1.5625vw, 20px);
}
.m-modal-shoes__scene {
  width: 46.8%;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__scene {
    width: 100%;
  }
}
.m-modal-shoes__function {
  width: 46.8%;
  margin-left: auto;
}
@media only screen and (max-width: 767px) {
  .m-modal-shoes__function {
    width: auto;
    margin: 20px 0 0;
  }
}
.m-modal-shoes__sub-txt {
  font-size: 12px;
  line-height: 1.6;
}
.m-modal-shoes__faq {
  margin-top: clamp(15px, 2.34375vw, 30px);
}
.m-modal-shoes__faq .faq {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
}
.m-modal-shoes__faq .faq__question, .m-modal-shoes__faq .faq__answer {
  font-size: 12px;
  line-height: 1.33;
}
.m-modal-shoes__faq .faq__question span, .m-modal-shoes__faq .faq__answer span {
  display: inline-block;
  margin-right: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 600;
}
.m-modal-shoes__btn {
  margin-top: clamp(20px, 3.125vw, 40px);
}
.m-modal-shoes__btn .c-btn {
  width: 100%;
}

/*--------------------------------------------------------------------------
  m-page-intro — このページで分かること（GUIDE共通）
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.m-page-intro {
  padding: 40px 0;
}
@media only screen and (max-width: 767px) {
  .m-page-intro {
    padding: 30px 0;
  }
}
.m-page-intro__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px 40px 34px;
  background: #fff;
  border-left: 7px solid #bbb;
}
@media only screen and (max-width: 767px) {
  .m-page-intro__box {
    gap: 20px;
    padding: 24px 20px 28px;
    border-left-width: 5px;
  }
}
.m-page-intro__hdg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.m-page-intro__ico {
  width: 24px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .m-page-intro__ico {
    width: 20px;
  }
}
.m-page-intro__ico img {
  width: 100%;
  height: auto;
}
.m-page-intro__hdg-txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.1em;
  color: #56524E;
}
@media only screen and (max-width: 767px) {
  .m-page-intro__hdg-txt {
    font-size: 14px;
  }
}
.m-page-intro__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}
@media only screen and (max-width: 767px) {
  .m-page-intro__list {
    gap: 12px;
  }
}
.m-page-intro__item {
  position: relative;
  padding-left: 1.2em;
  font-size: 15px;
  line-height: 30px;
  letter-spacing: 0.07em;
  color: #56524E;
}
@media only screen and (max-width: 767px) {
  .m-page-intro__item {
    font-size: 14px;
    line-height: 26px;
  }
}
.m-page-intro__item::before {
  content: "・";
  position: absolute;
  left: 0;
}

/*--------------------------------------------------------------------------
   cf
---------------------------------------------------------------------------*/
.cf {
  *zoom: 1;
}
.cf:after {
  content: "";
  display: table;
  clear: both;
}

/**
 *
 *  LOADER
 *
 */
/* use
-----------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   loader
---------------------------------------------------------------------------*/
#Loader {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgb(255, 255, 255);
  z-index: 9999999;
}

#Loader .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 5px;
  background: #bbb;
}

#Loader .base {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 320px;
  height: 189px;
  background-image: url(../img/common/logo_loader.svg);
  background-size: contain;
  background-position: 50% 50%;
  opacity: 0;
  z-index: 9;
}
@media only screen and (max-width: 767px) {
  #Loader .base {
    width: 224px;
    height: 132px;
  }
}

.page-index #Loader {
  display: block;
}

/* trans
-------------------------------------------*/
/* anima
-------------------------------------------*/
.load-complete .g-main {
  opacity: 1;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.is-loading .page-index #Loader .base {
  opacity: 1;
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
}

.is-loaded .page-index #Loader .base {
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  opacity: 0;
}

.load-complete .page-index #Loader {
  opacity: 0;
  -webkit-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

/* use
-----------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   SHOW / HIDE
---------------------------------------------------------------------------*/
/*
 show / hide
 -- レスポンシブ用 表示/非表示
*/
.mi-pc {
  display: block;
}

img.mi-pc {
  display: inline;
}

.mi-sp {
  display: none;
}

/* media query -> sp
========================================*/
@media only screen and (max-width: 767px) {
  .mi-pc,
  img.mi-pc {
    display: none;
  }
  .mi-sp {
    display: block;
  }
  img.mi-sp {
    display: inline;
  }
}
/*--------------------------------------------------------------------------
   TEXT
---------------------------------------------------------------------------*/
/*
 note
 -- 改行時、一文字目に余白を持たせる
*/
.mi-note,
.mi-list-note li {
  padding-left: 1em;
  text-indent: -1em;
}

/*--------------------------------------------------------------------------
   IMAGE
---------------------------------------------------------------------------*/
/*
 max
 -- 横幅に合わせて画像を最大化
*/
.mi-img-max {
  width: 100%;
  height: auto;
}

/* use
-----------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   HOVER
---------------------------------------------------------------------------*/
/*
 hov01
 -- 透過
*/
/* setting */
/* core */
.mi-hov01 {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.mi-hov01:hover {
  opacity: 0.7;
}

.mi-hov01-all > * {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.mi-hov01-all > *:hover {
  opacity: 0.7;
}

/* use
-----------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   init
---------------------------------------------------------------------------*/
.is-animate.is-fadein {
  opacity: 0;
}
.is-animate.is-fadeup {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}
.is-animate.is-fadedown {
  opacity: 0;
  -webkit-transform: translateY(-30px);
          transform: translateY(-30px);
}
.is-animate.is-fadeleft {
  opacity: 0;
  -webkit-transform: translateX(30px);
          transform: translateX(30px);
}
.is-animate.is-faderight {
  opacity: 0;
  -webkit-transform: translateX(-30px);
          transform: translateX(-30px);
}
.is-animate.is-fadezoom {
  opacity: 0;
  -webkit-transform: scale(0.4);
          transform: scale(0.4);
}

/*--------------------------------------------------------------------------
   animated
---------------------------------------------------------------------------*/
.is-animated.is-fadein {
  opacity: 1;
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.is-animated.is-fadeup {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 0.6s ease-in-out, -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.is-animated.is-fadedown {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 0.6s ease-in-out, -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.is-animated.is-fadeleft {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: opacity 0.6s ease-in-out, -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.is-animated.is-faderight {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: opacity 0.6s ease-in-out, -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.is-animated.is-fadezoom {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 0.6s ease-in-out, -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: opacity 0.6s ease-in-out, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

/*--------------------------------------------------------------------------
   .g-header
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.g-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 60px;
  background-color: white;
}
.g-header.is-fixed {
  position: fixed;
}
.g-header__logo {
  position: absolute;
  top: 50%;
  left: 30px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 261px;
  z-index: 99;
}
.g-header__logo a {
  display: block;
}
.g-header__logo img {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
@media screen and (max-width: 1000px) {
  .g-header__logo {
    left: 10px;
    width: clamp(130.5px, 26.1vw, 261px);
  }
}
@media only screen and (max-width: 767px) {
  .g-header__logo {
    left: 50%;
    width: 180px;
    translate: -55% 0;
  }
}
.g-header__menubtn {
  display: none;
}
@media only screen and (max-width: 767px) {
  .g-header__menubtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    cursor: pointer;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    z-index: 99999;
    text-align: center;
  }
}
.g-header__menubtn .lines {
  position: relative;
  /*position: absolute;
  top: 15px;
  left: 19px;*/
  margin: 0;
  padding: 0;
  width: 24px;
  height: 12px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 0;
  border: none;
}
.g-header__menubtn .lines:focus {
  outline: none;
}
.g-header__menubtn .lines span {
  display: inline-block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #694a3d;
}
.g-header__menubtn .lines span:nth-of-type(1) {
  top: 0;
  -webkit-animation: menu-bar01 0.75s forwards;
          animation: menu-bar01 0.75s forwards;
}
.g-header__menubtn .lines span:nth-of-type(2) {
  top: 50%;
  translate: 0 -50%;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
  opacity: 1;
}
@media only screen and (max-width: 767px) {
  .g-header__menubtn .lines span:nth-of-type(2) {
    top: 50%;
  }
}
.g-header__menubtn .lines span:nth-of-type(3) {
  bottom: 0;
  -webkit-animation: menu-bar02 0.75s forwards;
          animation: menu-bar02 0.75s forwards;
}
.g-header__wrap {
  position: relative;
}
@media only screen and (max-width: 767px) {
  .g-header__wrap {
    z-index: 9;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background-color: #222;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
  }
}
.g-header__wrap-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 60px;
}
@media only screen and (max-width: 767px) {
  .g-header__wrap-inner {
    display: block;
    height: auto;
    padding: clamp(40px, 10.6666666667vw, 80px) clamp(20px, 5.3333333333vw, 40px) clamp(70px, 18.6666666667vw, 140px);
  }
}
.g-header__gnav {
  padding-left: 350px;
}
@media screen and (max-width: 1000px) {
  .g-header__gnav {
    padding-left: clamp(150px, 30vw, 300px);
  }
}
@media only screen and (max-width: 767px) {
  .g-header__gnav {
    padding-left: 0;
  }
}
.g-header__gnav .pc-gnav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media only screen and (max-width: 767px) {
  .g-header__gnav .pc-gnav {
    display: none;
  }
}
.g-header__gnav .pc-gnav__item:not(:first-of-type) {
  margin-left: 30px;
}
@media screen and (max-width: 1000px) {
  .g-header__gnav .pc-gnav__item:not(:first-of-type) {
    margin-left: 20px;
  }
}
.g-header__gnav .pc-gnav__item > a, .g-header__gnav .pc-gnav__item > span, .g-header__gnav .pc-gnav__item > button {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 60px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.4px;
  cursor: pointer;
}
.g-header__gnav .pc-gnav__item > a::before, .g-header__gnav .pc-gnav__item > span::before, .g-header__gnav .pc-gnav__item > button::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #222;
  content: "";
  -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
  scale: 0 1;
  -webkit-transition: scale 0.2s ease-in-out;
  transition: scale 0.2s ease-in-out;
}
.mode-pc .g-header__gnav .pc-gnav__item > a:hover::before, .mode-pc .g-header__gnav .pc-gnav__item > span:hover::before, .mode-pc .g-header__gnav .pc-gnav__item > button:hover::before {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  scale: 1 1;
}
.g-header__gnav .pc-gnav__item .megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: #222;
  color: #fff;
}
.g-header__gnav .pc-gnav__item .megamenu__body {
  max-width: 1100px;
  width: 100%;
  margin-inline: auto;
  padding: 50px 10px 60px;
}
.g-header__gnav .pc-gnav__item .megamenu__hdg {
  display: inline-block;
  padding-bottom: 8px;
  color: var(--Font-White, #FFF);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  border-bottom: 1px solid var(--Gray-Gray500, #BBB);
}
.g-header__gnav .pc-gnav__item .megamenu__link {
  position: relative;
  margin-top: 30px;
  padding-left: 20px;
  font-size: 14px;
  letter-spacing: 1.4px;
  line-height: 1;
}
.g-header__gnav .pc-gnav__item .megamenu__link::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: url("../img/common/ico_arrow_r_w.svg") no-repeat 50% 50%/contain;
  content: "";
}
.g-header__gnav .pc-gnav__item .megamenu__link a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .g-header__gnav .pc-gnav__item .megamenu__link a:hover {
  opacity: 0.8;
}
.g-header__gnav .pc-gnav__item .megamenu__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 30px;
}
.g-header__gnav .pc-gnav__item .megamenu__item {
  width: 22.22%;
}
.g-header__gnav .pc-gnav__item .megamenu__item > a {
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .g-header__gnav .pc-gnav__item .megamenu__item > a:hover {
  opacity: 0.8;
}
.g-header__gnav .pc-gnav__item .megamenu__item-img {
  aspect-ratio: 240/126;
}
.g-header__gnav .pc-gnav__item .megamenu__item-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.g-header__gnav .pc-gnav__item .megamenu__item-txt {
  margin-top: 15px;
  font-size: clamp(6.5px, 1.2037037037vw, 13px);
  letter-spacing: 1.3px;
}
.g-header__gnav .pc-gnav__item .magazine-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 30px;
}
.g-header__gnav .pc-gnav__item .magazine-nav__item {
  width: 18.5%;
  margin: 0 0 20px 1.85%;
  aspect-ratio: 20/11;
  text-align: center;
}
.g-header__gnav .pc-gnav__item .magazine-nav__item:nth-child(5n+1) {
  margin-left: 0;
}
.g-header__gnav .pc-gnav__item .magazine-nav__item a {
  display: block;
  padding: 9px 5px 13px;
  border: 1px solid #fff;
  text-align: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc .g-header__gnav .pc-gnav__item .magazine-nav__item a:hover, .mode-sp .g-header__gnav .pc-gnav__item .magazine-nav__item a:active {
  background-color: #444;
}
.g-header__gnav .pc-gnav__item .magazine-nav__item-ico {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50px;
  height: 50px;
  margin-inline: auto;
}
.g-header__gnav .pc-gnav__item .magazine-nav__item-txt {
  font-size: clamp(6.5px, 1.2037037037vw, 13px);
  line-height: 18px;
  letter-spacing: 2.21px;
}
.g-header__gnav .pc-gnav__item > button.is-open::before {
  scale: 1 1;
}
.g-header__gnav .pc-gnav__item > button.is-open + .pc-gnav__mega {
  visibility: visible;
  pointer-events: all;
  opacity: 1;
}
.g-header__gnav .pc-gnav__mega {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.g-header__gnav .sp-nav {
  display: none;
}
@media only screen and (max-width: 767px) {
  .g-header__gnav .sp-nav {
    display: block;
  }
}
.g-header__gnav .sp-nav__item {
  position: relative;
}
.g-header__gnav .sp-nav__item:nth-child(n+2) {
  margin-top: 30px;
}
.g-header__gnav .sp-nav__item > a,
.g-header__gnav .sp-nav__item button {
  position: relative;
  display: block;
  width: 100%;
  padding: 12px 0 16px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.6px;
  color: #fff;
  line-height: 1;
  text-align: left;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-bottom: 1px solid #BBBBBB;
}
.g-header__gnav .sp-nav__item > a::after,
.g-header__gnav .sp-nav__item button::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  right: 4px;
  top: calc(50% - 6px);
  rotate: 45deg;
}
.mode-sp .g-header__gnav .sp-nav__item > a:active,
.mode-sp .g-header__gnav .sp-nav__item button:active {
  opacity: 0.5;
}
.g-header__gnav .sp-nav__item button::after {
  rotate: 135deg;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.g-header__gnav .sp-nav__item button.is-open::after {
  rotate: -45deg;
}
.g-header__gnav .sp-nav__item button.is-open + .sp-nav__lowernav {
  height: auto;
  pointer-events: all;
  overflow: visible;
}
.g-header__gnav .sp-nav__item-inline {
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  height: 0;
}
.g-header__gnav .sp-nav__lowernav {
  padding-top: 20px;
}
.g-header__gnav .sp-nav__lowernav-item {
  margin-bottom: 15px;
  font-size: 13px;
  letter-spacing: 1.3px;
}
.g-header__gnav .sp-nav__lowernav-item a {
  display: block;
  padding: 5px 0;
  color: #fff;
}
.g-header__aside {
  position: absolute;
  top: 50%;
  right: 30px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media screen and (max-width: 1000px) {
  .g-header__aside {
    right: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .g-header__aside {
    right: 15px;
  }
}
.g-header__btn.c-btn {
  height: 40px;
}
.g-header__btn.c-btn svg {
  width: 17.5px;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .g-header__btn.c-btn {
    width: 40px;
  }
  .g-header__btn.c-btn a {
    border-radius: 50%;
  }
  .g-header__btn.c-btn svg {
    width: 17.5px;
    height: auto;
  }
}
@media only screen and (max-width: 767px) {
  .g-header__btn.c-btn .c-btn__ico {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  .g-header__btn.c-btn .c-btn__txt {
    display: none;
  }
}
.g-header__search-btn {
  margin-right: 20px;
  line-height: 1;
}
@media screen and (max-width: 1000px) {
  .g-header__search-btn {
    margin-right: 10px;
  }
}
.g-header__search-btn button {
  display: block;
  padding: 5px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
.mode-pc .g-header__search-btn button:hover, .mode-sp .g-header__search-btn button:active {
  opacity: 0.5;
}
@media only screen and (max-width: 767px) {
  .g-header__search-btn img {
    width: 22px;
    height: auto;
  }
}
.g-header__search {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  border-top: 1px solid #E7E7E7;
  z-index: 1;
  translate: 0 -100%;
  pointer-events: none;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.g-header__search-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  content: "";
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.g-header__search.is-show {
  translate: 0 -2%;
  pointer-events: all;
}
.g-header__search.is-show .g-header__search-overlay {
  pointer-events: all;
  opacity: 1;
}
.g-header__search-inner {
  position: relative;
  width: 100%;
  height: 76px;
  padding: 0 50px;
  background: #fff;
  z-index: 9;
}
@media only screen and (max-width: 767px) {
  .g-header__search-inner {
    height: 48px;
    padding: 0 15px;
  }
}
.g-header__search-control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 76px;
  color: #5C5C5C;
}
@media only screen and (max-width: 767px) {
  .g-header__search-control {
    height: 48px;
  }
}
.g-header__search-ico {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 40px;
}
@media only screen and (max-width: 767px) {
  .g-header__search-ico {
    width: 30px;
  }
}
.g-header__search-input {
  width: calc(100% - 80px);
  font-size: 18px;
}
@media only screen and (max-width: 767px) {
  .g-header__search-input {
    width: calc(100% - 60px);
    font-size: 15px;
  }
}
.g-header__search-input::-webkit-input-placeholder {
  font-size: 18px;
  color: #5C5C5C;
}
.g-header__search-input::-moz-placeholder {
  font-size: 18px;
  color: #5C5C5C;
}
.g-header__search-input:-ms-input-placeholder {
  font-size: 18px;
  color: #5C5C5C;
}
.g-header__search-input::-ms-input-placeholder {
  font-size: 18px;
  color: #5C5C5C;
}
.g-header__search-input::placeholder {
  font-size: 18px;
  color: #5C5C5C;
}
@media only screen and (max-width: 767px) {
  .g-header__search-input::-webkit-input-placeholder {
    font-size: 15px;
  }
  .g-header__search-input::-moz-placeholder {
    font-size: 15px;
  }
  .g-header__search-input:-ms-input-placeholder {
    font-size: 15px;
  }
  .g-header__search-input::-ms-input-placeholder {
    font-size: 15px;
  }
  .g-header__search-input::placeholder {
    font-size: 15px;
  }
}
.g-header__search-close {
  width: 40px;
  text-align: right;
}
@media only screen and (max-width: 767px) {
  .g-header__search-close {
    width: 30px;
  }
}
.g-header__search-close button {
  color: #5C5C5C;
}
.g-header__search-close button svg {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.g-header__search-close button:hover svg {
  scale: 1.3;
}

.is-menuanim .g-header__wrap {
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.g-header.is-fixed + .g-header__search {
  position: fixed;
}

/*menu open*/
.is-menuopen .g-header .lines span:nth-of-type(1) {
  -webkit-transform: translateY(6px) rotate(-30deg);
          transform: translateY(6px) rotate(-30deg);
}
.is-menuopen .g-header .lines span:nth-of-type(2) {
  opacity: 0;
}
.is-menuopen .g-header .lines span:nth-of-type(3) {
  -webkit-transform: translateY(-5px) rotate(30deg);
          transform: translateY(-5px) rotate(30deg);
}
.is-menuopen .g-header__wrap {
  pointer-events: all;
  visibility: visible;
  opacity: 1;
  overflow: auto;
}

/**/
.page-top .g-header .gnav__item--01 > a::before,
.page-about .g-header .gnav__item--02 > a::before,
.page-guide .g-header .gnav__item--03 > a::before {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  scale: 1 1;
}

/*--------------------------------------------------------------------------
   .g-footer
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.g-footer {
  padding-block: clamp(40px, 7.4074074074vw, 80px) clamp(30px, 5.5555555556vw, 60px);
  background: #222;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .g-footer {
    padding-block: clamp(35px, 18.6666666667vw, 70px) clamp(20px, 10.6666666667vw, 40px);
  }
}
.g-footer__intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .g-footer__intro {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .g-footer__logo {
    margin-bottom: clamp(20px, 10.6666666667vw, 40px);
  }
}
@media only screen and (max-width: 767px) {
  .g-footer__btn .c-btn {
    width: 200px;
  }
}
.g-footer__sitemap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: clamp(25px, 4.6296296296vw, 50px);
}
@media only screen and (max-width: 767px) {
  .g-footer__sitemap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: clamp(25px, 13.3333333333vw, 50px);
    margin: clamp(25px, 13.3333333333vw, 50px) clamp(15px, 8vw, 30px) 0;
  }
}
.g-footer__sitemap-hdg {
  position: relative;
  display: inline-block;
  padding: 0 0 10px 16px;
  border-bottom: 1px solid #BBB;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(14px, 1.4814814815vw, 16px);
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .g-footer__sitemap-hdg {
    font-size: clamp(8px, 4.2666666667vw, 16px);
  }
}
.g-footer__sitemap-hdg::before {
  position: absolute;
  top: calc(0.5em - 4px);
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #BBB;
  content: "";
}
.g-footer__sitemap-item {
  margin-top: clamp(10px, 1.4814814815vw, 16px);
  font-size: clamp(12px, 1.2037037037vw, 13px);
  letter-spacing: 1.3px;
}
@media only screen and (max-width: 767px) {
  .g-footer__sitemap-item {
    margin-top: 15px;
    font-size: 13px;
  }
}
.g-footer__sitemap-item > a, .g-footer__sitemap-item > span {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.dev-pc .g-footer__sitemap-item a:hover, .dev-sp .g-footer__sitemap-item a:active {
  color: #7B7A78;
}
.g-footer__end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: clamp(25px, 4.6296296296vw, 50px);
  padding-top: clamp(20px, 3.7037037037vw, 40px);
  border-top: 1px solid #BBB;
}
@media screen and (max-width: 1080px) {
  .g-footer__end {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .g-footer__end {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-top: clamp(25px, 13.3333333333vw, 50px);
    padding-top: clamp(17.5px, 9.3333333333vw, 35px);
  }
}
.g-footer__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 767px) {
  .g-footer__nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.g-footer__nav-item {
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 1;
}
.g-footer__nav-item:not(:first-of-type) {
  margin-left: clamp(10px, 1.8518518519vw, 20px);
  padding-left: clamp(10px, 1.8518518519vw, 20px);
  border-left: 1px solid #bbb;
}
@media only screen and (max-width: 767px) {
  .g-footer__nav-item:not(:first-of-type) {
    margin: clamp(14px, 7.4666666667vw, 28px) 0 0;
    padding-left: 0;
    border-left: 0;
  }
}
.g-footer__nav-item a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  line-height: 0;
}
.dev-pc .g-footer__nav-item a:hover, .dev-sp .g-footer__nav-item a:active {
  color: #7B7A78;
}
.g-footer__copyright {
  font-size: 12px;
  letter-spacing: 1.2px;
}
@media screen and (max-width: 1080px) {
  .g-footer__copyright {
    margin-top: clamp(15px, 2.7777777778vw, 30px);
  }
}
@media only screen and (max-width: 767px) {
  .g-footer__copyright {
    margin-top: clamp(20px, 10.6666666667vw, 40px);
  }
}

/*--------------------------------------------------------------------------
   .g-main
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.g-main {
  padding-top: 60px;
}
.g-main--bg {
  background: #F6F6F4;
}
/*# sourceMappingURL=base.css.map */