@charset "UTF-8";
/*=======================================
ヘッダー
=========================================*/
.l-header {padding-left: 1.5625%; height: auto; position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; z-index: 999; background-color: #fff;}
.l-header .layout { padding-right: 1.5625vw; clear: both; display: flex; justify-content: space-between;}
.l-header .txt1 { font-size: 1.5rem; font-size: 83.333%; color: #444444; white-space: nowrap; float: left; margin-top: 5px;}
.l-header .btn-contact {margin-right: -1.5625vw;}
.l-header .left-box { width: auto; flex: none;}
.l-header .left-box .logo { position: relative; top: 20px; width: 408px;}
.l-header .right-box > .lang{display: none;}
.l-header .right-box .sub-menu{display: flex; align-items: center; justify-content: flex-end;}
.l-header .right-box .sub-menu .lang{margin-right: 40px;}
.l-header .right-box .sub-menu .lang{font-size: 16px; font-weight: 400; letter-spacing: 0;}
.l-header .right-box .sub-menu .lang a{color:var(--charactercolor);}
.l-header .right-box .sub-menu .btn-contact {text-align: right;}
.l-header .block-menu{margin-top: 20px;}
.l-header .right-box #gnav > ul {display: flex; justify-content: flex-start; margin-top: 2rem;}
.l-header .right-box #gnav > ul > li {margin-left: 2vw; position: relative;}
.l-header .right-box #gnav > ul > li > a {font-weight: bold; letter-spacing: 0.05em; color:var(--charactercolor);}
.l-header .right-box #gnav > ul > li > ul{ position: absolute; bottom: 0; transform: translate(-50%,100%); padding: 10px; background: #FFF; min-width: 140px; left: 50%; text-align: center; display: none;}
.l-header .right-box #gnav > ul > li:hover > ul{display: block;}
.l-header .right-box #gnav > ul > li > ul > li{border-bottom: 1px solid #222;}
.l-header .right-box #gnav > ul > li > ul > li:last-of-type{border-bottom: none;}
.l-header .right-box #gnav > ul > li > ul > li > a{ padding: 15px 0; display: inline-block; width: 100%;}
.l-header .btn-contact a{ display: inline-block; width: auto; text-decoration: none; transition: 0.1s; box-sizing: border-box; text-align: center; background-color: var(--themecolor); color: #fff; padding: 24px 30px; font-weight: bold; letter-spacing: 0.05em; font-size: 1.7rem; font-size: 94.444%;}
.l-header .btn-contact a::before { content: ""; display: inline-block; width: 23px; height: 16px; background: url(../../images/common/ico-mail-w.svg) center no-repeat; background-size: contain; vertical-align: middle; margin-right: 0.3em;}
.l-header .btn-contact a span {vertical-align: middle;}

/* ファーストビューを越えたら */
.l-header.over-kv { position: fixed; animation: fadeIn 0.2s ease-in-out; animation-fill-mode: forwards; height: auto; height: 70px;}
.l-header.over-kv .txt1 {display: none;}
.l-header.over-kv .layout {clear: unset;clear: none;}
.l-header.over-kv .left-box {width: auto;}
.l-header.over-kv .left-box .logo { top: 0; margin-top: 10px;}
#top .l-header.over-kv .left-box .logo a:hover,.l-header.over-kv .left-box .logo a:hover img{opacity: 1;}
.l-header.over-kv .right-box { width: auto; box-sizing: border-box; display: flex;}
.l-header.over-kv .right-box .btn-contact { order: 1; margin-left: 40px; flex: none;}
.l-header.over-kv .right-box .btn-contact a { height: 70px; padding-top: 16px; padding-bottom: 14px;}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}
@keyframes fadeOut { 0% { opacity: 1; } 99% { opacity: 0;} 100% { opacity: 1;}}


@media screen and (max-width:896px),(max-width:896px) and (orientation:landscape){
    /*=======================================
    ヘッダー
    =========================================*/
    .l-header {padding-top: 12px;height: auto;position: fixed;top: 0;left: 0;width: 100%;box-sizing: border-box;z-index: 999;background-color: #fff;}
    .l-header .layout {display: block;}
    .l-header .txt1 {font-size: 83.3%;font-size: 10px;color: #444444;white-space: normal;float: none;line-height: 1.5;display: none;margin-top: 15px;}
    .l-header .btn-contact {float: none;order: 2;text-align: center;}
    .l-header .btn-contact a {padding-top: 1rem;padding-bottom: 1rem;}
    .l-header .layout {clear: both;display: block;}
    .l-header .left-box {width: auto;flex: none;align-items: center;padding: 0 0 8px;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;}
    .l-header .left-box .logo {max-width: 180px;flex: none;order: -1;margin-right: 10px; top: 0;}
    .l-header .right-box {display: none;background-color: #fff;overflow-y: auto;max-height: calc(100vh - 145px);}
    .l-header .right-box .sub-menu{display:none;}
    .l-header .right-box-logo {padding-left: 15px;margin-top: 12px;max-width: 100px;}
    .l-header .right-box > .lang{display: block; width: 100%; text-align: center; margin: 50px 0;}
    .l-header .menu {display: block;order: 1;text-align: center;}
    .l-header .menu li {border-top: 1px solid #222;display: block;}
    .l-header .menu li:last-of-type {border-bottom: 1px solid #222;}
    .l-header .menu li a {letter-spacing: 0.05em;text-decoration: none;color: #222;padding: 1rem 0;font-weight: bold;display:block;}

    /*=======================================
    メニュー
    =========================================*/
    .l-header .right-box #gnav > ul{flex-direction: column;}
    .l-header .right-box #gnav > ul > li{margin-left: 0; border-bottom: 1px solid #222;}
    .sp-contact-block {display: flex;position: fixed;left: 0;bottom: 0;width: 100%;z-index: 9999;}
    .l-header .right-box #gnav>ul>li>a{display: block; font-size: 18px; line-height: 1.6; letter-spacing: 0; padding: 16px 0; text-align: center;}
    .sp-contact-block .c-btn {flex: 1;width: 50%;}
    .sp-contact-block .btn-contact a {font-size: 14px; max-width: 100%;}
    .l-header .right-box #gnav > ul > li > ul{position: relative; left: auto; right: auto; bottom: auto; top: auto; transform: none; width: 100%; display: block; padding-top: 0;}
    .l-header .right-box #gnav > ul > li > ul > li{padding: 0; width: 90%; margin: 0 auto;}
    .l-footer .block-menu .menu ul > li > ul > li::before {content: "-"; color: #B8B4B0; margin-right: 0.5rem; font-size: 1.7rem; font-weight: 500; line-height: 1.2;}
    /*=======================================
    ハンバーガーメニュー
    =========================================*/
    .hamburger {display: block;padding: 12px 0 8px;width: 60px;height: 60px;box-sizing: border-box;position: fixed;z-index: 9999;right: 0;top: 0;cursor: pointer;text-align: center;pointer-events: auto;transition: 0.25s;background: #222222;}
    .hamburger .bar-wrap {width: 34px;height: 24px;position: relative;display: block;margin-left: auto;margin-right: auto;}
    .hamburger .txt {font-size: 10px;text-align: center;color: #fff;line-height: 1;display: block;margin-top: 5px;}
    .hamburger .txt.close {display: none;}
    .hamburger.-active .txt.open {display: none;}
    .hamburger.-active .txt.close {display: block;}
    .hamburger span {display: block;width: 100%;height: 2px;position: absolute;left: 13px;left: 0;border-radius: 3px;background: #fff;-webkit-transition: 0.25s ease-in-out;-ms-transition: 0.25s ease-in-out;transition: 0.25s ease-in-out;}
    .hamburger span:nth-child(1) {top: 0;}
    .hamburger span:nth-child(2) {top: 10px;}
    .hamburger span:nth-child(3) {top: 20px;}
    /* ナビ開いてる時のボタン */
    .hamburger.-active span {transition: 0.2s;}
    .hamburger.-active span:nth-child(1) {-webkit-transform: translateY(1rem) rotate(45deg);-ms-transform: translateY(1rem) rotate(45deg);transform: translateY(1rem) rotate(45deg);}
    .hamburger.-active span:nth-child(2) {-webkit-transform: translateY(0) rotate(-45deg);-ms-transform: translateY(0) rotate(-45deg);transform: translateY(0) rotate(-45deg);}
    .hamburger.-active span:nth-child(3) {-webkit-transform: translateY(-1rem) rotate(-45deg);-ms-transform: translateY(-1rem) rotate(-45deg);transform: translateY(-1rem) rotate(-45deg);}
    /* ハンバーガーボタンここまで */
  }


  .follow-content .mail-btn a{background: var(--themecolor);}