@charset "UTF-8";

:root {
  --fs: 16;
  --color-yellow: #f7d200;
  --color-brown: #472602;
  --color-gray: #e7e7e7;
  --font-fam-m-plus: 'M PLUS Rounded 1c', sans-serif;
  --box-shadow: calc(7 / var(--fs) * 1rem) calc(7 / var(--fs) * 1rem) 0 0 rgba(77, 33, 12, .25);

  --header-height-pc: 56;
  --header-height-sp: 105;
}
@media all and (max-width: 767px) {
  :root {
    --fs: 14;
  }
}

/* ========================================
	Reset
======================================== */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section,
main {
  display: block;
}

body {
  line-height: 1;
}
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
img {
  width: 100%;
  height: auto;
  border: 0;
  vertical-align: bottom;
}
input,
select {
  vertical-align: middle;
}
a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
button{
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  color: inherit;
  background: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ========================================
	Base
======================================== */
html {
  font-size: var(--fs)px;
}
@media all and (min-width: 767px) and (max-width: 979px) {
  html {
    font-size: calc(var(--fs) / 980 * 100vw);
  }
}
@media all and (max-width: 767px) {
  html {
    font-size: calc(var(--fs) / 750 * 100vw);
  }
}
@media all and (min-width: 768px) and (orientation: portrait), all and (min-width: 667px) and (orientation: landscape) {
  html.is-sp.is-touch-window-size #wrapper {
    font-size: calc(var(--fs) / 1240 * 100vw);
  }
}

body {
  font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, sans-serif;
  font-size: 1rem;
  color: #000;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: 'palt' 1;
}

body.is-modalopen {
  position: fixed;
  left: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
}

/* ========================================
	common
======================================== */
/* l-container */
.l-container {
  font-family: var(--font-fam-m-plus);
}

/* ruby */
@media all and (min-width: 768px) {
  .c-ruby[data-ruby] {
    position: relative;
  }
  .c-ruby[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: calc(-10 / var(--fs) * 1rem);
    left: 0;
    right: 0;
    margin: auto;
    font-size: calc(10 / var(--fs) * 1rem);
    white-space: nowrap;
  }
  /* 以下追加 */
  .c-ruby rt {
    display: none;
  }
}
@media all and (max-width: 767px) {
  .c-ruby[data-ruby] {
    position: relative;
  }
  .c-ruby[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: calc(-10 / var(--fs) * 1rem);
    left: 0;
    right: 0;
    margin: auto;
    font-size: calc(10 / var(--fs) * 1rem);
    white-space: nowrap;
  }
  /* 以下追加 */
  .c-ruby rt {
    display: none;
  }
}

/* 
 * c-search-form
 */
@media all and (min-width: 768px) {
  .c-search-form {
    height: calc(40 / var(--fs) * 1rem);
  }
  .c-search-form form {
    height: 100%;
  }
  .c-search-form input[type="text"] {
    border: 1px solid var(--color-gray);
    border-right-style: none;
    border-top-left-radius: calc(2 / var(--fs) * 1rem);;
    border-bottom-left-radius: calc(2 / var(--fs) * 1rem);;
    font-size: calc(12 / var(--fs) * 1rem);
    padding: 0;
    padding-right: calc(16 / var(--fs) * 1rem);
    padding-left: calc(16 / var(--fs) * 1rem);
    width: calc(208 / var(--fs) * 1rem);
    height: 100%;
  }
  .c-search-form input[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
    font-size: calc(12 / var(--fs) * 1rem);
    font-weight: 300;
    color: #000;
    width: calc(50 / var(--fs) * 1rem);
    height: 100%;
    border: none;
    border-top-right-radius: calc(2 / var(--fs) * 1rem);
    border-bottom-right-radius: calc(2 / var(--fs) * 1rem);
    background-color: var(--color-gray);
  }
}
@media all and (max-width: 767px) {
  .c-search-form {
    height: calc(80 / var(--fs) * 1rem);
  }
  .c-search-form form {
    height: 100%;
  }
  .c-search-form input[type="text"] {
    border: 1px solid var(--color-gray);
    border-right-style: none;
    font-size: calc(24 / var(--fs) * 1rem);
    padding: 0;
    padding-right: calc(16 / var(--fs) * 1rem);
    padding-left: calc(16 / var(--fs) * 1rem);
    width: calc(422 / var(--fs) * 1rem);
    height: calc(100%);
    border-radius: 0;
    border-top-left-radius: calc(2 / var(--fs) * 1rem);;
    border-bottom-left-radius: calc(2 / var(--fs) * 1rem);;
  }
  .c-search-form input[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
    font-size: calc(24 / var(--fs) * 1rem);
    font-weight: 300;
    color: #000;
    width: calc(100 / var(--fs) * 1rem);
    height: 100%;
    background-color: var(--color-gray);
    border: none;
    border-radius: 0;
    border-top-right-radius: calc(2 / var(--fs) * 1rem);
    border-bottom-right-radius: calc(2 / var(--fs) * 1rem);
  }
}

/* c-checkbox */
@media all and (min-width: 768px) {
  .c-checkbox {
    display: flex;
    align-items: center;
  }
  .c-checkbox input[type=checkbox] {
    display:none;
  }
  .c-checkbox__label {
    position: relative;
    display: flex;
    align-items: center;
    font-family: var(--font-fam-m-plus);
    font-weight: bold;
    user-select: none;
    cursor: pointer;
  }
  .c-checkbox:hover .c-checkbox__label {
    text-decoration: underline;
  }

  /* icon */
  .c-checkbox__label:before {
    display: inline-block;
    flex-shrink: 0;
  }
  .c-checkbox__label:before {
    content: "";
    display: inline-block;
    width: calc(25 / var(--fs) * 1rem);
    height: calc(25 / var(--fs) * 1rem);
    background-color: #fff;
    border-radius: calc(5 / var(--fs) * 1rem);
    border: 2px solid var(--color-brown);
    margin-right: calc(10 / var(--fs) * 1rem);
    transition: background-color .2s;
  }
  .c-checkbox input[type=checkbox]:checked + .c-checkbox__label:before {
    background-color: var(--color-brown);
  }
  .c-checkbox input[type=checkbox]:checked + .c-checkbox__label:after {
    content: "";
    flex-shrink: 0;
    position: absolute;
    left: calc(5 / var(--fs) * 1rem);
    top: 50%;
    transform: translate3d(0,-50%,0);
    display: block;
    width: calc(14 / var(--fs) * 1rem);
    height: calc(11 / var(--fs) * 1rem);
    background-image: url(../img/common/ico_check_w.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}
@media all and (max-width: 767px) {
  .c-checkbox {
    display: flex;
    align-items: center;
  }
  .c-checkbox input[type=checkbox] {
    display:none;
  }
  .c-checkbox__label {
    position: relative;
    display: flex;
    align-items: center;
    font-size: calc(24 / var(--fs) * 1rem);
    font-family: var(--font-fam-m-plus);
    font-weight: bold;
    user-select: none;
    cursor: pointer;
  }

  /* icon */
  .c-checkbox input[type=checkbox] + .c-checkbox__label:before {
    display: inline-block;
  }
  .c-checkbox input[type=checkbox] + .c-checkbox__label:before {
    content: "";
    display: inline-block;
    width: calc(35 / var(--fs) * 1rem);
    height: calc(35 / var(--fs) * 1rem);
    background-color: #fff;
    border-radius: calc(5 / var(--fs) * 1rem);
    border: 2px solid var(--color-brown);
    margin-right: calc(10 / var(--fs) * 1rem);
    transition: background-color .2s;
  }

  .c-checkbox input[type=checkbox]:checked + .c-checkbox__label:before {
    background-color: var(--color-brown);
  }
  .c-checkbox input[type=checkbox]:checked + .c-checkbox__label:after {
    content: "";
    position: absolute;
    left: calc(6 / var(--fs) * 1rem);
    top: 50%;
    transform: translate3d(0,-50%,0);
    display: block;
    width: calc(22 / var(--fs) * 1rem);
    height: calc(16 / var(--fs) * 1rem);
    background-image: url(../img/common/ico_check_w.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }
}


/* 
 * c-btn
 */
 @media all and (min-width: 768px) {
  .c-btn {
    display: block;
    width: 100%;
    height: calc(75 / var(--fs) * 1rem);
    border: calc(8 / var(--fs) * 1rem) solid #fff;
    border-radius: calc(40 / var(--fs) * 1rem);
    background-color: var(--color-brown);
    box-shadow: var(--box-shadow);
    transition: transform .3s ease;
    text-align: center;
  }
  .c-btn:hover {
    transform: scale(1.03);
  }
  .c-btn__label {
    font-size: calc(19 / var(--fs) * 1rem);
    font-weight: 600;
    font-family: var(--font-fam-m-plus);
    color: #fff;
    letter-spacing: .1em;
  }
 }
 @media all and (max-width: 767px) {
  .c-btn {
    display: block;
    width: 100%;
    height: calc(98 / var(--fs) * 1rem);
    border: calc(8 / var(--fs) * 1rem) solid #fff;
    border-radius: calc(50 / var(--fs) * 1rem);
    background-color: var(--color-brown);
    box-shadow: var(--box-shadow);
    transition: transform .3s ease;
    text-align: center;
  }
  .c-btn:hover {
    transform: scale(1.03);
  }
  .c-btn__label {
    font-size: calc(30 / var(--fs) * 1rem);
    font-weight: 600;
    font-family: var(--font-fam-m-plus);
    color: #fff;
    letter-spacing: .1em;
  }
 }

/* ========================================
	Header
======================================== */
#header {
  position: relative;
  z-index: 11;
}
@media all and (min-width: 768px) and (orientation: portrait), all and (min-width: 667px) and (orientation: landscape) {
  .l-header {
    position: relative;
    z-index: 1;
    /* z-index: 1000; */
    width: 100%;
    height: calc(var(--header-height-pc) / var(--fs) * 1em);
    font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, sans-serif;
  }
  .l-header__in {
    position: relative;
    z-index: 3;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding-right: calc(25 / var(--fs) * 1em);
    padding-left: calc(25 / var(--fs) * 1em);
  }
  /* l-header__logo */
  .l-header__logo {
    display: block;
    width: calc(126 / var(--fs) * 1em);
  }
  /* l-header-menu-btn */
  .l-header__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(20 / var(--fs) * 1em);
    height: calc(20 / var(--fs) * 1em);
  }
  .l-header-menu-btn {
    position: relative;
    display: flex;
    transition: opacity .2s;
    width: calc(14 / var(--fs) * 1em);
    height: calc(13 / var(--fs) * 1em);
  }
  .l-header-menu-btn::before,
  .l-header-menu-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(2 / var(--fs) * 1em);
    background-color: #9b9b9d;
    transition: all .3s;
  }
  .l-header-menu-btn::after {
    top: auto;
    bottom: 0;
  }
  .l-header-menu-btn:hover {
    opacity: .7;
  }
  .l-header-menu-btn.is-active::after {
    transform: rotate(45deg);
    width: 100%;
    top: calc(5 / var(--fs) * 1em);
  }
  .l-header-menu-btn.is-active:before {
    transform: rotate(-45deg);
    width: 100%;
    top: calc(5 / var(--fs) * 1em);
  }
  .l-header-menu-btn__label {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate3d(0,-50%,0);
    display: block;
    width: 100%;
    height: calc(2 / var(--fs) * 1em);
    background-color: #9b9b9d;
    transition: all .4s;
  }
  .l-header-menu-btn.is-active .l-header-menu-btn__label {
    opacity: 0;
  }
  .l-header-nav {
    padding-top : calc(50 / var(--fs) * 1em);
  }
}
@media all and (max-width: 767px) and (orientation: portrait), all and (max-width: 666px) and (orientation: landscape) {
  .l-header {
    position: relative;
    z-index: 1000;
    width: 100%;
    height: calc(var(--header-height-sp) / var(--fs) * 1rem);
    font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, sans-serif;
  }
  .l-header__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    background-color: #fff;
    height: 100%;
    padding-right: calc(25 / var(--fs) * 1rem);
    padding-left: calc(25 / var(--fs) * 1rem);
  }
  /* l-header__logo */
  .l-header__logo {
    display: block;
    width: calc(224 / var(--fs) * 1rem);
  }
  /* l-header-menu-btn */
  .l-header__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(40 / var(--fs) * 1rem);
    height: calc(40 / var(--fs) * 1rem);
  }
  .l-header-menu-btn {
    position: relative;
    display: flex;
    transition: opacity .2s;
    width: calc(37 / var(--fs) * 1rem);
    height: calc(33 / var(--fs) * 1rem);
  }
  .l-header-menu-btn::before,
  .l-header-menu-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: calc(5 / var(--fs) * 1rem);
    background-color: #9b9b9d;
    transition: all .3s;
  }
  .l-header-menu-btn::after {
    top: auto;
    bottom: 0;
  }
  .l-header-menu-btn:hover {
    opacity: .7;
  }
  .l-header-menu-btn.is-active::after {
    transform: rotate(45deg);
    width: 100%;
    top: calc(15 / var(--fs) * 1rem);
  }
  .l-header-menu-btn.is-active:before {
    transform: rotate(-45deg);
    width: 100%;
    top: calc(15 / var(--fs) * 1rem);
  }
  .l-header-menu-btn__label {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate3d(0,-50%,0);
    display: block;
    width: 100%;
    height: calc(5 / var(--fs) * 1rem);
    background-color: #9b9b9d;
    transition: all .3s;
  }
  .l-header-menu-btn.is-active .l-header-menu-btn__label {
    opacity: 0;
  }
  /* l-header-nav */
  .l-header-nav {
    padding-top: calc(100 / var(--fs) * 1rem);
  }
}
@media all and (min-width: 768px) {
  /* l-header-nav */
  .l-header-nav {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .l-header-nav[aria-hidden="true"] {
    display: none;
  }
  .l-header-nav[aria-hidden="false"] {
    display: block;
  }

  .l-header-nav__body {
    position: relative;
    z-index: 2;
    background-color: #f8f8fa;
    width: 100%;
    transform: translate3d(0, -150%, 0);
    transition: transform .8s cubic-bezier(0.34, 0.07, 0.095, 0.995);
  }
  .l-header-nav.is-open .l-header-nav__body {
    transform: translate3d(0, 0, 0);
  }

  .l-header-nav__bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity .3s ease .3s;
  }
  .l-header-nav.is-open .l-header-nav__bg {
    opacity: 1;
  }
  .l-header-nav__bg[aria-hidden="true"] {
    display: none;
  }
  .l-header-nav__bg[aria-hidden="false"] {
    display: block;
  }

  .l-header-nav__in {
    max-width: calc(1140 / var(--fs) * 1rem);
    margin: 0 auto;
    padding-top : calc(52 / var(--fs) * 1rem);
    padding-bottom : calc(60 / var(--fs) * 1rem);
    padding-right : calc(20 / var(--fs) * 1rem);
    padding-left : calc(20 / var(--fs) * 1rem);
  }

  /* l-header-nav__head */
  .l-header-nav__head {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid var(--color-gray);
    padding-bottom : calc(16 / var(--fs) * 1rem);
    margin-bottom : calc(30 / var(--fs) * 1rem);
  }
  .l-header-nav__head-top {
    padding-right : calc(243 / var(--fs) * 1rem);
  }
  .l-header-nav__head-top a {
    font-size : calc(16 / var(--fs) * 1rem);
    font-weight: 600;
    color: #000;
  }

  /* l-header-nav__blocks */
  .l-header-nav__blocks {
    display: flex;
  }
  .l-header-nav__block-title {
    display: inline-block;
    font-size : calc(13 / var(--fs) * 1rem);
    font-weight: 600;
    padding-bottom : calc(30 / var(--fs) * 1rem);
  }

  /* l-header-nav__block */
  .l-header-nav__block {
    width: calc((100% - calc(42 / var(--fs) * 1rem)) / 2);
  }
  .l-header-nav__block:not(:nth-child(2n)) {
    margin-right : calc(42 / var(--fs) * 1rem);
  }

  /* l-header-nav__block-list */
  .l-header-nav__block-list {
    border-top: 1px solid var(--color-gray);
    display: flex;
    flex-wrap: wrap;
  }
  .l-header-nav__block-item {
    display: flex;
    align-items: center;
    padding-top : calc(23 / var(--fs) * 1rem);
    padding-bottom : calc(20 / var(--fs) * 1rem);
    border-bottom: 1px solid var(--color-gray);
  }
  .l-header-nav__block-item a {
    display: block;
    text-indent: 0;
    font-size : calc(13 / var(--fs) * 1rem);
    font-weight: 300;
    color: #000;
    line-height: 1.2;
  }

  /* -contents */
  .l-header-nav__block.-contents .l-header-nav__block-item {
    width: calc((100% - (calc(16 / var(--fs) * 1rem) * 3)) / 4);
  }
  .l-header-nav__block.-contents .l-header-nav__block-item:not(:nth-child(4n)) {
    margin-right : calc(16 / var(--fs) * 1rem);
  }
  /* -company */
  .l-header-nav__block.-company .l-header-nav__block-item {
    width: calc((100% - calc(20 / var(--fs) * 1rem)) / 2);
  }
  .l-header-nav__block.-company .l-header-nav__block-item:not(:nth-child(2n)) {
    margin-right : calc(20 / var(--fs) * 1rem);
  }

  /* l-header-nav__text */
  .l-header-nav__text {
    position: relative;
    padding-left : calc(18 / var(--fs) * 1rem);
  }
  .l-header-nav__text::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    vertical-align: middle;
    left: 3px;
    width: 4px;
    height: 4px;
    border-top: 1px solid #555555;
    border-right: 1px solid #555555;
    transform: rotate(45deg)
  }

  /* l-header-nav__bottom */
  .l-header-nav__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-top : calc(60 / var(--fs) * 1rem);
    margin-bottom : calc(-10 / var(--fs) * 1rem);
  }

  /* l-header-nav-sns */
  .l-header-nav-sns {
    display: flex;
    align-items: center;
    margin-right: calc(60 / var(--fs) * 1rem);
  }
  .l-header-nav-sns__label {
    font-size : calc(13 / var(--fs) * 1rem);
    font-weight: 600;
    margin-right : calc(18 / var(--fs) * 1rem);
  }
  .l-header-nav-sns__list {
    display: flex;
  }
  .l-header-nav-sns__list-item {
    width : calc(29 / var(--fs) * 1rem);
  }
  .l-header-nav-sns__list-item:not(:last-child) {
    margin-right : calc(15 / var(--fs) * 1rem);
  }
  .l-header-nav-sns__list-item a {
    display: block;
    transition: opacity .2s;
  }
  .l-header-nav-sns__list-item a:hover {
    opacity: .7;
  }

  /* l-header-nav__bottom-block */
  .l-header-nav__bottom-block {
    display: flex;
    align-items: center;
    margin-bottom : calc(10 / var(--fs) * 1rem);
  }

  /* l-header-nav-link */
  .l-header-nav-link__list {
    display: flex;
  }
  .l-header-nav-link__list-item:not(:last-child) {
    margin-right : calc(20 / var(--fs) * 1rem);
  }
  .l-header-nav-link__list-item a {
    font-size : calc(11 / var(--fs) * 1rem);
    color: #000;
  }
  .l-header-nav-link__list-item a:hover {
    border-bottom: 1px solid #000;
  }
  .l-header-nav-link__list-item .pdf {
    padding-bottom : calc(2 / var(--fs) * 1rem);
  }
  .l-header-nav-link__list-item .pdf::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-image: url(../img/common/ico_pdf.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width : calc(26 / var(--fs) * 1rem);
    height : calc(13 / var(--fs) * 1rem);
    margin-left : calc(7 / var(--fs) * 1rem);
  }

  /* l-header-nav-lang */
  .l-header-nav-lang {
    height : calc(29 / var(--fs) * 1rem);
    padding-right : calc(30 / var(--fs) * 1rem);
    padding-left : calc(30 / var(--fs) * 1rem);
    margin-left : calc(60 / var(--fs) * 1rem);
    background-color: var(--color-gray);
    border-radius: calc(15 / var(--fs) * 1rem);
    display: flex;
    align-items: center;
  }
  .l-header-nav-lang__list {
    display: flex;
  }
  .l-header-nav-lang__list-item {
    display: flex;
    align-items: center;
  }
  .l-header-nav-lang__list-item:not(:last-child)::after {
    content: "";
    display: block;
    height: 80%;
    width: 1px;
    background-color: #555555;
    margin-right: calc(8 / var(--fs) * 1rem);
    margin-left: calc(5 / var(--fs) * 1rem);
  }
  .l-header-nav-lang__link {
    color: #979797;
    font-weight: 600;
    letter-spacing: .3em;
  }
  .l-header-nav-lang__link.is-current {
    color: #000;
    pointer-events: none;
  }
}
@media all and (max-width: 767px) {
  /* l-header-nav */
  .l-header-nav {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .l-header-nav[aria-hidden="true"] {
    display: none;
  }
  .l-header-nav[aria-hidden="false"] {
    display: block;
  }

  .l-header-nav__body {
    position: relative;
    z-index: 2;
    background-color: #f8f8fa;
    width: 100%;
    height: 100%;
    transform: translate3d(0, -150%, 0);
    transition: transform .8s cubic-bezier(0.34, 0.07, 0.095, 0.995);
    overflow-y: auto;
  }
  .l-header-nav.is-open .l-header-nav__body {
    transform: translate3d(0, 0, 0);
  }

  .l-header-nav__bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity .3s ease .3s;
  }
  .l-header-nav.is-open .l-header-nav__bg {
    opacity: 1;
  }
  .l-header-nav__bg[aria-hidden="true"] {
    display: none;
  }
  .l-header-nav__bg[aria-hidden="false"] {
    display: block;
  }

  .l-header-nav__in {
    padding-top : calc(50 / var(--fs) * 1rem);
    padding-bottom : calc(80 / var(--fs) * 1rem);
    padding-right : calc(36 / var(--fs) * 1rem);
    padding-left : calc(36 / var(--fs) * 1rem);
  }

  /* l-header-nav__head */
  .l-header-nav__head {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid var(--color-gray);
    padding-bottom : calc(80 / var(--fs) * 1rem);
    margin-bottom : calc(50 / var(--fs) * 1rem);
  }
  .l-header-nav__head-top {
    padding-right : calc(243 / var(--fs) * 1rem);
    margin-bottom: calc(80 / var(--fs) * 1rem);
  }
  .l-header-nav__head-top a {
    font-size : calc(26 / var(--fs) * 1rem);
    font-weight: 600;
    color: #000;
  }
  .l-header-nav__head-search {
    display: flex;
    justify-content: center;
  }

  /* l-header-nav__blocks */
  .l-header-nav__blocks {
    display: flex;
    flex-direction: column;
  }
  .l-header-nav__block-title {
    display: inline-block;
    font-size : calc(26 / var(--fs) * 1rem);
    font-weight: 600;
    padding-bottom : calc(48 / var(--fs) * 1rem);
  }

  /* l-header-nav__block */
  .l-header-nav__block {
    width: 100%;
  }
  .l-header-nav__block:not(:nth-child(2n)) {
    margin-bottom : calc(50 / var(--fs) * 1rem);
  }

  /* l-header-nav__block-list */
  .l-header-nav__block-list {
    border-top: 1px solid var(--color-gray);
    display: flex;
    flex-wrap: wrap;
  }
  .l-header-nav__block-item {
    padding-top : calc(37 / var(--fs) * 1rem);
    padding-bottom : calc(35 / var(--fs) * 1rem);
    border-bottom: 1px solid var(--color-gray);
    width: calc((100% - calc(23 / var(--fs) * 1rem)) / 2);
  }
  .l-header-nav__block-item:not(:nth-child(2n)) {
    margin-right : calc(23 / var(--fs) * 1rem);
  }
  .l-header-nav__block-item a {
    font-size : calc(26 / var(--fs) * 1rem);
    font-weight: 300;
    color: #000;
  }

  /* l-header-nav__text */
  .l-header-nav__text {
    position: relative;
    white-space: pre;
    padding-left : calc(36 / var(--fs) * 1rem);
  }
  .l-header-nav__text::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    vertical-align: middle;
    left: calc(3 / var(--fs) * 1rem);
    width: calc(8 / var(--fs) * 1rem);
    height: calc(8 / var(--fs) * 1rem);
    border-top: 1px solid #555555;
    border-right: 1px solid #555555;
    transform: rotate(45deg)
  }

  /* l-header-nav__bottom */
  .l-header-nav__bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin-top : calc(80 / var(--fs) * 1rem);
  }

  /* l-header-nav-sns */
  .l-header-nav-sns {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .l-header-nav-sns__label {
    font-size : calc(26 / var(--fs) * 1rem);
    font-weight: 600;
    margin-right : calc(34 / var(--fs) * 1rem);
  }
  .l-header-nav-sns__list {
    display: flex;
  }
  .l-header-nav-sns__list-item {
    width : calc(58 / var(--fs) * 1rem);
  }
  .l-header-nav-sns__list-item:not(:last-child) {
    margin-right : calc(30 / var(--fs) * 1rem);
  }
  .l-header-nav-sns__list-item a {
    display: block;
  }

  /* l-header-nav__bottom-block */
  .l-header-nav__bottom-block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: calc(60 / var(--fs) * 1rem);
  }
  .l-header-nav__bottom-block:last-child {
    margin-bottom: calc(80 / var(--fs) * 1rem);
  }

  /* l-header-nav-link */
  .l-header-nav-link__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom : calc(-40 / var(--fs) * 1rem);
  }
  .l-header-nav-link__list-item {
    margin-bottom : calc(40 / var(--fs) * 1rem);
  }

  .l-header-nav-link__list-item:not(:last-child) {
    margin-right : calc(40 / var(--fs) * 1rem);
  }
  .l-header-nav-link__list-item a {
    font-size : calc(22 / var(--fs) * 1rem);
    color: #000;
    transition: opacity .2s;
  }
  .l-header-nav-link__list-item a:hover {
    opacity: .7;
  }
  .l-header-nav-link__list-item .pdf {
    padding-bottom : calc(2 / var(--fs) * 1rem);
  }
  .l-header-nav-link__list-item .pdf::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-image: url(../img/common/ico_pdf.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width : calc(52 / var(--fs) * 1rem);
    height : calc(24 / var(--fs) * 1rem);
    margin-left : calc(18 / var(--fs) * 1rem);
  }

  /* l-header-nav-lang */
  .l-header-nav-lang {
    height : calc(58 / var(--fs) * 1rem);
    padding-right : calc(30 / var(--fs) * 1rem);
    padding-left : calc(30 / var(--fs) * 1rem);
    margin-top : calc(60 / var(--fs) * 1rem);
    margin-top : calc(80 / var(--fs) * 1rem);
    background-color: var(--color-gray);
    border-radius: calc(30 / var(--fs) * 1rem);
    display: flex;
    align-items: center;
  }
  .l-header-nav-lang__list {
    display: flex;
  }
  .l-header-nav-lang__list-item {
    display: flex;
    align-items: center;
  }
  .l-header-nav-lang__list-item:not(:last-child)::after {
    content: "";
    display: block;
    height: 80%;
    width: 1px;
    background-color: #555555;
    margin-right: calc(8 / var(--fs) * 1rem);
    margin-left: calc(5 / var(--fs) * 1rem);
  }
  .l-header-nav-lang__link {
    font-size : calc(20 / var(--fs) * 1rem);
    color: #979797;
    font-weight: 600;
    letter-spacing: .3em;
  }
  .l-header-nav-lang__link.is-current {
    color: #000;
    pointer-events: none;
  }

  .l-header-nav__close {
    width: calc(500 / var(--fs) * 1rem);
    margin: 0 auto;
  }
  .l-header-nav__close-btn {
    position: relative;
    width: 100%;
    height: calc(100 / var(--fs) * 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #555555;
  }
  .l-header-nav__close-btn::before, .l-header-nav__close-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(50 / var(--fs) * 1rem);
    width: calc(3 / var(--fs) * 1rem);
    height: calc(26 / var(--fs) * 1rem);
    background-color: #9b9b9d;
  }
  .l-header-nav__close-btn::before {
    transform: translate(-50%,-50%) rotate(45deg);
  }
  .l-header-nav__close-btn::after {
    transform: translate(-50%,-50%) rotate(-45deg);
  }
}
/* ========================================
	Gnav
======================================== */
#gnav {
  position: relative;
  z-index: 11;
}
@media all and (min-width: 768px) and (orientation: portrait), all and (min-width: 667px) and (orientation: landscape) {
  /* init */
  .l-gnav-sp-open,
  .l-gnav-sp {
    display: none!important;
  }
  .l-gnav {
    position: fixed;
    width: 100%;
    height: calc(65 / var(--fs) * 1em);
    left: 0;
    bottom: calc(25 / var(--fs) * 1em);
    z-index: 1000;
    background-color: var(--color-yellow);
  }
  
  .l-gnav__in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-right: calc(25 / var(--fs) * 1em);
    padding-left: calc(25 / var(--fs) * 1em);
  }
  
  /* l-gnav__logo */
  .l-gnav__logo {
    width: calc(198 / var(--fs) * 1em);
    flex-shrink: 0;
  }
  /* l-gnav__body */
  .l-gnav__body {
    margin-left: calc(40 / var(--fs) * 1em);
  }
  
  /* l-gnav-nav */
  .l-gnav-nav {
    display: flex;
    align-items: flex-end;
  }
  
  /* l-gnav-nav-list */
  .l-gnav-nav-list {
    display: flex;
    align-items: flex-end;
  }
  
  .l-gnav-nav-list__item {
    position: relative;
    margin-right: calc(30 / var(--fs) * 1em);
  }
  
  /* l-gnav-nav-list__link */
  .l-gnav-nav-list__link {
    position: relative;
    z-index: 1;
    display: block;
    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
  }
  .l-gnav-nav-list__link:hover {
    transform: scale(1.05);
  }
  
  .l-gnav-nav-list__item[data-target-position="top"] .l-gnav-nav-list__link {
    max-width: calc(57 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="main"] .l-gnav-nav-list__link {
    max-width: calc(46 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="school"] .l-gnav-nav-list__link {
    max-width: calc(63 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="stage"] .l-gnav-nav-list__link {
    max-width: calc(77 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="cafe"] .l-gnav-nav-list__link {
    max-width: calc(74 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="house"] .l-gnav-nav-list__link {
    max-width: calc(155 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="interview"] .l-gnav-nav-list__link {
    max-width: calc(68 / var(--fs) * 1em);
  }

  /* l-gnav-nav-tutorial */
  .l-gnav-nav-tutorial {
    position: relative;
  }
  .l-gnav-nav-tutorial__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-brown);
    color: #fff;
    font-size: calc(18 / var(--fs) * 1em);
    font-weight: 600;
    text-decoration: none;
    width: calc(35 / var(--fs) * 1em);
    height: calc(35 / var(--fs) * 1em);
    border-radius: 50%;
    border: calc(4 / var(--fs) * 1em) solid #fff;
    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .l-gnav-nav-tutorial__btn:hover {
    transform: scale(1.1);
  }

  .l-gnav-nav-list-lv2__drop {
    visibility: hidden;
    opacity: 0;
    transition: 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
    position: absolute;
    bottom: calc(25 / var(--fs) * 1em);
    padding-bottom: calc(55 / var(--fs) * 1em);
    left: 50%;
    transform-origin: bottom;
    transform: translateX(-50%) scale(.8);
  }
  .l-gnav-nav-tutorial__tip {
    visibility: hidden;
    opacity: 0;
    transition: 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
    position: absolute;
    bottom: calc(25 / var(--fs) * 1em);
    padding-bottom: calc(20 / var(--fs) * 1em);
    left: 50%;
    transform-origin: bottom;
    transform: translateX(-50%) scale(.8);
  }
  .l-gnav-nav-tutorial__tip-img {
    width: calc(92 / var(--fs) * 1em);
    cursor: pointer;
  }
  body[data-island-page="top"] .l-gnav-nav-list-lv2__drop {
    display: none;
  }
  .l-gnav-nav-list-lv2 {
    position: relative;
    width: calc(215 / var(--fs) * 1em);
    background-image: url(../img/common/gnav_lv2_frame_middle.png);
    background-position: center;
    background-size: contain;
    background-repeat: repeat-y;
  }
  .l-gnav-nav-tutorial.is-show .l-gnav-nav-tutorial__tip,
  .l-gnav-nav-list__item.is-show .l-gnav-nav-list-lv2__drop,
  html:not(.is-sp):not(.is-tab.is-touch-window-size) .l-gnav-nav-tutorial:hover .l-gnav-nav-tutorial__tip,
  html:not(.is-sp):not(.is-tab.is-touch-window-size) .l-gnav-nav-list__item:hover .l-gnav-nav-list-lv2__drop {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
    transition: 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
  }
  .l-gnav-nav-list-lv2::before {
    content: "";
    display: block;
    background-image: url(../img/common/gnav_lv2_frame_top.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: calc(20 / var(--fs) * 1em);
    position: absolute;
    top: calc(-19 / var(--fs) * 1em);
    left: 0;
  }
  .l-gnav-nav-list-lv2::after {
    content: "";
    display: block;
    background-image: url(../img/common/gnav_lv2_frame_bottom.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: calc(29 / var(--fs) * 1em);
    position: absolute;
    bottom: calc(-29 / var(--fs) * 1em);
    left: 0;
  }
  .l-gnav-nav-list-lv2__list {
    padding-right: calc(30 / var(--fs) * 1em);
    padding-left: calc(30 / var(--fs) * 1em);
  }

  .l-gnav-nav-list-lv2__list-item:not(:first-child) {
    padding-top: calc(12 / var(--fs) * 1em);
  }
  .l-gnav-nav-list-lv2__list-item:not(:last-child)::after {
    background: radial-gradient(circle farthest-side, #000, #000 30%, transparent 30%, transparent);
    background-size: calc(6 / var(--fs) * 1em) calc(2 / var(--fs) * 1em);
    content: '';
    display: inline-block;
    height: calc(2 / var(--fs) * 1em);
    width: 100%;
  }
  /* .l-gnav-nav-list-lv2__list-item {
    font-size: 0;
  } */
  .l-gnav-nav-list-lv2__list-item a {
    display: block;
    margin: 0 auto;
    padding-bottom: calc(12 / var(--fs) * 1em);
    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .l-gnav-nav-list-lv2__list-item a:hover {
    transform: scale(1.05);
  }

  .l-gnav-nav-list__item[data-target-position="main"] .l-gnav-nav-list-lv2__list-item:nth-child(1) a {
    width: calc(138 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="main"] .l-gnav-nav-list-lv2__list-item:nth-child(2) a {
    width: calc(106 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="main"] .l-gnav-nav-list-lv2__list-item:nth-child(3) a {
    width: calc(103 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="interview"] .l-gnav-nav-list-lv2__list-item:nth-child(1) a {
    width: calc(138 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="interview"] .l-gnav-nav-list-lv2__list-item:nth-child(2) a {
    width: calc(106 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="interview"] .l-gnav-nav-list-lv2__list-item:nth-child(3) a {
    width: calc(103 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="school"] .l-gnav-nav-list-lv2__list-item:nth-child(1) a {
    width: calc(101 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="school"] .l-gnav-nav-list-lv2__list-item:nth-child(2) a {
    width: calc(83 / var(--fs) * 1em);
  }
  .l-gnav-nav-list__item[data-target-position="house"] .l-gnav-nav-list-lv2__list-item:nth-child(1) a {
    width: calc(130 / var(--fs) * 1em);
  }
}
@media all and (max-width: 767px) and (orientation: portrait), all and (max-width: 666px) and (orientation: landscape) {
  .l-gnav {
    display: none!important;
  }
  /* l-gnav-sp-open */
  .l-gnav-sp-open {
    position: fixed;
    bottom: calc(50 / var(--fs) * 1rem);
    left: 0;
    width: 100%;
    height: calc(90 / var(--fs) * 1rem);
  }
  .l-gnav-sp-open__in {
    background-color: var(--color-yellow);
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .l-gnav-sp-open__label {
    display: block;
    width: calc(324 / var(--fs) * 1rem);
    margin: 0 auto;
  }

  .l-gnav-sp-open__tutorial {
    position: absolute;
    top: 50%;
    right: calc(25 / var(--fs) * 1rem);
    transform: translate3d(0,-50%,0);
  }

  /* l-gnav-sp-close */
  .l-gnav-sp-close {
    position: relative;
    width: calc(130 / var(--fs) * 1rem);
    height: calc(130 / var(--fs) * 1rem);
    background-color: #fff;
    border-radius: calc(16 / var(--fs) * 1rem);
    box-shadow: var(--box-shadow);
  }
  .l-gnav-sp-close__in {
    background-color: var(--color-brown);
    display: flex;
    align-items: center;
    width: calc(100% - (calc(8 / var(--fs) * 1rem) * 2));
    height: calc(100% - (calc(8 / var(--fs) * 1rem) * 2));
    margin: calc(8 / var(--fs) * 1rem);
    border-radius: calc(10 / var(--fs) * 1rem);
  }
  .l-gnav-sp-close__label {
    display: block;
    width: calc(67 / var(--fs) * 1rem);
    margin: 0 auto;
  }

  /* l-gnav-sp */
  .l-gnav-sp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
    overflow-y: auto;
    padding-right: calc(48 / var(--fs) * 1rem);
    padding-left: calc(48 / var(--fs) * 1rem);
    height: calc(100% - calc(50 / var(--fs) * 1rem));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease-out,visibility .2s ease-out;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .l-gnav-sp.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .5s .5s ease-out,visibility .5s .5s ease-out;
    will-change: transition;
  }

  /* l-gnav-sp__head */
  .l-gnav-sp__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: calc(30 / var(--fs) * 1rem);
    padding-bottom: calc(60 / var(--fs) * 1rem);
  }
  .l-gnav-sp__logo {
    width: calc(463 / var(--fs) * 1rem);
  }

  /* l-gnav-sp-nav-list */
  .l-gnav-sp-nav-list {
    position: relative;
    counter-increment: spNavNum;
  }
  .l-gnav-sp-nav-list__item:not(:last-child) {
    margin-bottom: calc(26 / var(--fs) * 1rem);
  }
  .l-gnav-sp-nav-list__link {
    display: block;
    filter: drop-shadow(calc(7 / var(--fs) * 1rem) calc(7 / var(--fs) * 1rem) 0px rgba(77, 33, 12, .25));
    will-change: filter;
    border-radius: calc(8 / var(--fs) * 1rem);
  }

  .l-gnav-sp-nav-list__item {
    position: relative;
    /* transform: translate3d(0, calc(10 / var(--fs) * 1rem), 0) scale(0.95);
    opacity: 0; */
    /* transition: transform 1s ease-out, opacity .3s ease-out; */
  }
  /* .l-gnav-sp.is-open .l-gnav-sp-nav-list__item {
    transform: translate3d(0,0,0) scale(1);
    opacity: 1;
    will-change: transform, transition, opacity;
  } */
  /* .l-gnav-sp.is-open .l-gnav-sp-nav-list__item:nth-of-type(1) {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) .6s, opacity .4s ease-out .6s;
  }
  .l-gnav-sp.is-open .l-gnav-sp-nav-list__item:nth-of-type(2) {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) .7s, opacity .4s ease-out .7s;
  }
  .l-gnav-sp.is-open .l-gnav-sp-nav-list__item:nth-of-type(3) {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) .8s, opacity .4s ease-out .8s;
  }
  .l-gnav-sp.is-open .l-gnav-sp-nav-list__item:nth-of-type(4) {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) .9s, opacity .4s ease-out .9s;
  }
  .l-gnav-sp.is-open .l-gnav-sp-nav-list__item:nth-of-type(5) {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s, opacity .4s ease-out 1s;
  }
  .l-gnav-sp.is-open .l-gnav-sp-nav-list__item:nth-of-type(6) {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.1s, opacity .4s ease-out 1.1s;
  }
  .l-gnav-sp.is-open .l-gnav-sp-nav-list__item:nth-of-type(7) {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.2s, opacity .4s ease-out 1.2s;
  }
  .l-gnav-sp.is-open .l-gnav-sp-nav-list__item:nth-of-type(8) {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.3s, opacity .4s ease-out 1.3s;
  } */

  .l-gnav-sp-nav-list__item:last-of-type::before {
    content: "";
    background: radial-gradient(circle farthest-side, #000, #000 30%, transparent 30%, transparent);
    background-size: calc(8 / var(--fs) * 1rem) calc(3 / var(--fs) * 1rem);
    content: '';
    display: inline-block;
    height: calc(3 / var(--fs) * 1rem);
    width: 100%;
    margin-top: calc(25 / var(--fs) * 1rem);
    margin-bottom: calc(43 / var(--fs) * 1rem);
  }

  /* l-gnav-sp-nav */
  /* l-gnav-sp__bg */
  .l-gnav-sp__bg {
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    background-color: var(--color-yellow);
    position: fixed;
    z-index: 1000;
    bottom: calc(-100 / var(--fs) * 1rem);
    right: 50%;
    left: 50%;
    border-radius: 50%;
    transform: scale(0);
    transition: transform .4s ease-out 0s;
    will-change: transform, transition;
  }
  .l-gnav-sp.is-open + .l-gnav-sp__bg {
    transform: scale(100);
    transition: transform 1s cubic-bezier(0.49, -0.11, 0.8, 0.98) 0s;
  }

  /* l-gnav-nav-tutorial__btn */
  .l-gnav-nav-tutorial__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-brown);
    color: #fff;
    font-size: calc(29 / var(--fs) * 1rem);
    font-weight: 600;
    text-decoration: none;
    width: calc(63 / var(--fs) * 1rem);
    height: calc(63 / var(--fs) * 1rem);
    border-radius: 50%;
    border: calc(7 / var(--fs) * 1rem) solid #fff;
    box-shadow: var(--box-shadow);
  }

  .l-gnav-sp__btn {
    position: relative;
    width: calc(403 / var(--fs) * 1rem);
    margin: 0 auto;
    margin-top: calc(63 / var(--fs) * 1rem);
    margin-bottom: calc(70 / var(--fs) * 1rem);
  }
  .l-gnav-sp__btn::after {
    content: "";
    position: absolute;
    top: calc(-19 / var(--fs) * 1rem);
    left: calc(-136 / var(--fs) * 1rem);
    display: block;
    width: calc(118 / var(--fs) * 1rem);
    height: calc(119 / var(--fs) * 1rem);
    background-image: url(../img/common/gnav_obj01.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .l-gnav-sp__btn::before {
    content: "";
    position: absolute;
    top: calc(13 / var(--fs) * 1rem);
    right: calc(-125 / var(--fs) * 1rem);
    display: block;
    width: calc(88 / var(--fs) * 1rem);
    height: calc(77 / var(--fs) * 1rem);
    background-image: url(../img/common/gnav_obj02.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@keyframes navSlideIn {
  from {
    transform: translate3d(0,15%,0);
  }
  to {
    transform: translate3d(0,0,0);
  }
}
@keyframes navSlideOut {
  from {
    transform: translate3d(0,0,0);
  }
  to {
    transform: translate3d(0,15%,0);
  }
}
/* ========================================
	Footer
======================================== */
@media all and (min-width: 768px) and (orientation: portrait), all and (min-width: 667px) and (orientation: landscape) {
  .l-footer {
    position: fixed;
    width: 100%;
    height: calc(25 / var(--fs) * 1em);
    left: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--color-brown);
  }
  .l-footer__in {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .l-footer__copy {
    font-size: calc(10 / var(--fs) * 1em);
  }
}
@media all and (max-width: 767px) and (orientation: portrait), all and (max-width: 666px) and (orientation: landscape) {
  .l-footer {
    position: fixed;
    width: 100%;
    height: calc(50 / var(--fs) * 1rem);
    left: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--color-brown);
  }
  .l-footer__in {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .l-footer__copy {
    font-size: calc(20 / var(--fs) * 1rem);
  }
}

/* ========================================
	modal
======================================== */
body.is-header-open{
  height: 100%;
  overflow: hidden;
}
@media all and (min-width: 768px) {
  .l-modal {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s opacity ease, 0s visibility 0.3s linear;
    padding: calc(20 / var(--fs) * 1rem);
    text-align: center;

    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .l-modal.is-open {
    transition: 0.3s opacity ease, 0s visibility 0s linear;
    opacity: 1;
    visibility: visible;
  }

  .l-modal::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  .l-modal.is-open + .l-modal__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .l-modal__body {
    display: inline-block;
    vertical-align: middle;

    position: relative;
    z-index: 2;
    background-color: var(--color-yellow);
    width: 100%;
    max-width: calc(800 / var(--fs) * 1rem);
    margin: 0 auto;
    border: calc(14 / var(--fs) * 1rem) solid #fff;
    border-radius: calc(14 / var(--fs) * 1rem);
  }
  .l-modal__body::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(626 / var(--fs) * 1rem);
    right: calc(-7 / var(--fs) * 1rem);
    display: block;
    background-image: url(../img/common/tutorial_sec02_obj02.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: calc(69 / var(--fs) * 1rem);
    height: calc(62 / var(--fs) * 1rem);
  }
  .l-modal__content {
    padding: calc(30 / var(--fs) * 1rem);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    /* max-height: 90vh; */
  }

  .l-modal__close {
    position: absolute;
    top: calc(-40 / var(--fs) * 1rem);
    right: calc(-40 / var(--fs) * 1rem);
    display: block;
    width: calc(75 / var(--fs) * 1rem);
    height: calc(75 / var(--fs) * 1rem);
    border: calc(8 / var(--fs) * 1rem) solid #fff;
    border-radius: 50%;
    background-color: var(--color-brown);
    box-shadow: var(--box-shadow);
    transition: transform .3s ease;
  }
  .l-modal__close:hover {
    transform: scale(1.1);
  }
  .l-modal__close::before, .l-modal__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(3 / var(--fs) * 1rem);
    height: calc(26 / var(--fs) * 1rem);
    background-color: #fff;
  }
  .l-modal__close::before {
    transform: translate(-50%,-50%) rotate(45deg);
  }
  .l-modal__close::after {
    transform: translate(-50%,-50%) rotate(-45deg);
  }
}
@media all and (max-width: 767px) {
  .l-modal {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s opacity ease, 0s visibility 0.3s linear;
    padding: calc(20 / var(--fs) * 1rem);
    text-align: center;
    
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .l-modal.is-open {
    transition: 0.3s opacity ease, 0s visibility 0s linear;
    opacity: 1;
    visibility: visible;
  }
    
  .l-modal.is-open + .l-modal__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .l-modal__body {
    display: inline-block;
    vertical-align: middle;

    position: relative;
    z-index: 2;
    background-color: var(--color-yellow);
    width: 100%;
    max-width: calc(800 / var(--fs) * 1rem);
    border: calc(14 / var(--fs) * 1rem) solid #fff;
    border-radius: calc(14 / var(--fs) * 1rem);
  }
  
  .l-modal__content {
    padding: calc(60 / var(--fs) * 1rem) 0;
    /* overflow: auto;
    -webkit-overflow-scrolling: touch; */
    width: 100%;
    /* max-height: 75vh; */
  }

  .l-modal__close {
    position: absolute;
    top: calc(-32 / var(--fs) * 1rem);
    right: calc(-22 / var(--fs) * 1rem);
    display: block;
    width: calc(75 / var(--fs) * 1rem);
    height: calc(75 / var(--fs) * 1rem);
    border: calc(8 / var(--fs) * 1rem) solid #fff;
    border-radius: 50%;
    background-color: var(--color-brown);
    box-shadow: var(--box-shadow);
    transition: transform .3s ease;
  }
  .l-modal__close:hover {
    transform: scale(1.1);
  }
  .l-modal__close::before, .l-modal__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(3 / var(--fs) * 1rem);
    height: calc(26 / var(--fs) * 1rem);
    background-color: #fff;
  }
  .l-modal__close::before {
    transform: translate(-50%,-50%) rotate(45deg);
  }
  .l-modal__close::after {
    transform: translate(-50%,-50%) rotate(-45deg);
  }
}

/* ==================================================
Tutorial
================================================== */
@media all and (min-width: 768px) {
  .c-tutorial {
    position: relative;
  }
  .c-tutorial-title {
    width: calc(487 / var(--fs) * 1rem);
    margin: 0 auto;
  }
  
  /* c-tutorial-sec01 */
  .c-tutorial-sec01 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(26 / var(--fs) * 1rem);
  }
  .c-tutorial-sec01__figure {
    width: calc(314 / var(--fs) * 1rem);
  }
  .c-tutorial-sec01__text {
    position: relative;
    width: calc(329 / var(--fs) * 1rem);
    margin-left: calc(10 / var(--fs) * 1rem);
  }
  .c-tutorial-sec01__text::before {
    content: "";
    position: absolute;
    bottom: calc(-42 / var(--fs) * 1rem);
    right: calc(-30 / var(--fs) * 1rem);
    display: block;
    background-image: url(../img/common/tutorial_sec01_obj01.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: calc(91 / var(--fs) * 1rem);
    height: calc(92 / var(--fs) * 1rem);
  }
  
  /* c-tutorial-sec02 */
  .c-tutorial-sec02 {
    margin-top: calc(50 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__text {
    width: calc(401 / var(--fs) * 1rem);
    margin: 0 auto;
    margin-bottom: calc(25 / var(--fs) * 1rem);
  }
  
  .c-tutorial-sec02__list {
    position: relative;
    display: flex;
    justify-content: center;
  }
  .c-tutorial-sec02__list-item {
    position: relative;
    display: block;
    width: calc(152 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__list-item:not(:last-child) {
    margin-right: calc(25 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__list-figure {
    position: relative;
    width: 100%;
    margin-bottom: calc(16 / var(--fs) * 1rem);
    overflow: hidden;
    border-radius: calc(20 / var(--fs) * 1rem);
    border: calc(5 / var(--fs) * 1rem) solid #fff;
  }
  .c-tutorial-sec02__list-figure img {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }
  .c-tutorial-sec02__list-item:hover .c-tutorial-sec02__list-figure img {
    transform: scale(1.1);
  }
  .c-tutorial-sec02__list-item:nth-child(4) .c-tutorial-sec02__list-figure {
    margin-bottom: calc(11 / var(--fs) * 1rem);
  }

  .c-tutorial-sec02__list-item:nth-child(1)::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: calc(-21 / var(--fs) * 1rem);
    left: 0;
    display: block;
    background-image: url(../img/common/tutorial_sec02_obj01.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: calc(37 / var(--fs) * 1rem);
    height: calc(47 / var(--fs) * 1rem);
  }
  
  .c-tutorial-sec02__list-text {
    margin: 0 auto;
  }
  .c-tutorial-sec02__list-item:nth-child(1) .c-tutorial-sec02__list-text {
    width: calc(146 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__list-item:nth-child(2) .c-tutorial-sec02__list-text {
    width: calc(151 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__list-item:nth-child(3) .c-tutorial-sec02__list-text {
    width: calc(137 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__list-item:nth-child(4) .c-tutorial-sec02__list-text {
    width: calc(120 / var(--fs) * 1rem);
  }
  .c-tutorial_checkbox_text {
    width: calc(226 / var(--fs)* 1rem);
  }
  
  .c-tutorial__checkbox {
    margin-top: calc(48 / var(--fs) * 1rem);
    display: flex;
    justify-content: center;
  }
  .l-modal:not(.is-first) .c-tutorial__checkbox {
    display: none;
  }

  .c-tutorial__notice {
    margin-top: calc(20 / var(--fs) * 1rem);
  }
  .c-tutorial__notice p {
    font-size: calc(14 / var(--fs) * 1rem);
    line-height: 1.4;
  }
    
  /* 閉じるボタン制御 */
  .l-modal.is-first .c-btn__label.-first {
    display: block;
  }
  .l-modal.is-first .c-btn__label.-common {
    display: none;
  }
  .l-modal:not(.is-first) .c-btn__label.-first {
    display: none;
  }
  .l-modal:not(.is-first) .c-btn__label.-common {
    display: block;
  }

  .c-tutorial__btn {
    width: calc(280 / var(--fs) * 1rem);
    margin: 0 auto;
    margin-top: calc(20 / var(--fs) * 1rem);
    margin-bottom: calc(10 / var(--fs) * 1rem);
  }
  
}
@media all and (max-width: 767px) {
  .c-tutorial-title {
    width: calc(584 / var(--fs) * 1rem);
    margin: 0 auto;
  }
  
  /* c-tutorial-sec01 */
  .c-tutorial-sec01 {
    display: flex;
    flex-direction: column;
    margin-top: calc(52 / var(--fs) * 1rem);
  }
  .c-tutorial-sec01__figure {
    width: calc(527 / var(--fs) * 1rem);
    margin: 0 auto;
  }
  .c-tutorial-sec01__text {
    position: relative;
    width: calc(524 / var(--fs) * 1rem);
    margin: 0 auto;
    margin-top: calc(16 / var(--fs) * 1rem);
  }
  .c-tutorial-sec01__text::before {
    content: "";
    position: absolute;
    top: calc(-23 / var(--fs) * 1rem);
    right: calc(-18 / var(--fs) * 1rem);
    display: block;
    background-image: url(../img/common/tutorial_sec01_obj01.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: calc(91 / var(--fs) * 1rem);
    height: calc(92 / var(--fs) * 1rem);
  }
  
  /* c-tutorial-sec02 */
  .c-tutorial-sec02 {
    margin-top: calc(88 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__text {
    position: relative;
    width: calc(491 / var(--fs) * 1rem);
    margin: 0 auto;
    margin-bottom: calc(55 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__text::after {
    content: "";
    position: absolute;
    top: calc(-20 / var(--fs) * 1rem);
    right: calc(-97 / var(--fs) * 1rem);
    display: block;
    background-image: url(../img/common/tutorial_sec02_obj02.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: calc(84 / var(--fs) * 1rem);
    height: calc(76 / var(--fs) * 1rem);
  }

  .c-tutorial-sec02__list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: calc(-50 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__list-item {
    display: block;
    width: calc(274 / var(--fs) * 1rem);
    margin-bottom: calc(50 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__list-item:not(:nth-child(2n)) {
    margin-right: calc(10 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__list-figure {
    position: relative;
    width: 100%;
    margin-bottom: calc(16 / var(--fs) * 1rem);
    overflow: hidden;
    border-radius: calc(20 / var(--fs) * 1rem);
    border: calc(5 / var(--fs) * 1rem) solid #fff;
  }
  .c-tutorial-sec02__list-item:nth-child(4) .c-tutorial-sec02__list-figure {
    margin-bottom: calc(8 / var(--fs) * 1rem);
  }
  
  .c-tutorial-sec02__list-text {
    position: relative;
    margin: 0 auto;
  }
  .c-tutorial-sec02__list-item:nth-child(1) .c-tutorial-sec02__list-text {
    width: calc(264 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__list-item:nth-child(1) .c-tutorial-sec02__list-text::before {
    content: "";
    position: absolute;
    top: calc(-38 / var(--fs) * 1rem);
    left: calc(-60 / var(--fs) * 1rem);
    display: block;
    background-image: url(../img/common/tutorial_sec02_obj01.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: calc(59 / var(--fs) * 1rem);
    height: calc(75 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__list-item:nth-child(2) .c-tutorial-sec02__list-text {
    width: calc(273 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__list-item:nth-child(3) .c-tutorial-sec02__list-text {
    width: calc(245 / var(--fs) * 1rem);
  }
  .c-tutorial-sec02__list-item:nth-child(4) .c-tutorial-sec02__list-text {
    width: calc(219 / var(--fs) * 1rem);
  }
  .c-tutorial_checkbox_text {
    width: calc(338 / var(--fs)* 1rem);
  }

  .c-tutorial__checkbox {
    margin-top: calc(88 / var(--fs) * 1rem);
    display: flex;
    justify-content: center;
  }
  .l-modal:not(.is-first) .c-tutorial__checkbox {
    display: none;
  }

  .c-tutorial__notice {
    margin-top: calc(40 / var(--fs) * 1rem);
    padding: 0 calc(30 / var(--fs) * 1rem);
  }
  .c-tutorial__notice p {
    font-size: calc(20 / var(--fs) * 1rem);
    line-height: 1.4;
  }
    
  /* 閉じるボタン制御 */
  .l-modal.is-first .c-btn__label.-first {
    display: block;
  }
  .l-modal.is-first .c-btn__label.-common {
    display: none;
  }
  .l-modal:not(.is-first) .c-btn__label.-first {
    display: none;
  }
  .l-modal:not(.is-first) .c-btn__label.-common {
    display: block;
  }

  .c-tutorial__btn {
    width: calc(390 / var(--fs) * 1rem);
    margin: 0 auto;
    margin-top: calc(40 / var(--fs) * 1rem);
    margin-bottom: calc(30 / var(--fs) * 1rem);
  }
  
}

/* ==================================================
Utility
================================================== */
/* sr */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* hide */
.u-hide {
  display: none !important;
}
@media all and (min-width: 1366px) {
  .u-hide-pc {
    display: none !important;
  }
}
@media all and (min-width: 768px) {
  .u-hide-pc-tb {
    display: none !important;
  }
}
@media all and (min-width: 768px) and(max-width: 1365px) {
  .u-hide-tb {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .u-hide-sp {
    display: none !important;
  }
}
@media all and (max-width: 1365px) {
  .u-hide-tb-sp {
    display: none !important;
  }
}

/* font-weight */
.u-bold {
  font-weight: bold !important;
}

/* clearfix */
.u-clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* object-position */
.u-obj-top {
  object-position: top;
}

/* flex */ 
.u-flex-align-start {
  align-items: flex-start;
}

/* no padding */
@media all and (max-width: 768px) {
	.u-no-sp-px {
		padding-left: 0!important;
		padding-right: 0!important;
	}
  .u-no-sp-py {
		padding-top: 0!important;
		padding-bottom: 0!important;
	}
  .u-no-sp-pt {
		padding-top: 0!important;
	}
	.u-no-sp-pb {
		padding-bottom: 0!important;
	}
}

/* no margin */
@media all and (max-width: 768px) {
	.u-no-sp-mx {
		margin-left: 0!important;
		margin-right: 0!important;
	}
  .u-no-sp-my {
		margin-top: 0!important;
		margin-bottom: 0!important;
	}
  .u-no-sp-mt {
		margin-top: 0!important;
	}
	.u-no-sp-mb {
		margin-bottom: 0!important;
	}
}