@charset "utf-8";
/* common */
:root {
 --c-red:#e8380d;
 --c-orange:#ee7800;
 --c-orange-dark: #7e3800;
}
.lh--S {   line-height: 1.2 !important;}

header * {-webkit-box-sizing: border-box;  box-sizing: border-box;}
#quickLink { -webkit-box-sizing: border-box;  box-sizing: border-box;}
#quickLink :before, #quickLink :after {  -webkit-box-sizing: border-box;  box-sizing: border-box;}

@media (min-width:768px) { /* PC + tablet */
.sp, #ftSlideBlock { display: none !important;}
}

@media (max-width: 767px) {/*  sp */
.pc {display: none !important;}
.sp {display: block !important;}
a:hover { text-decoration: none !important;}
}


/* ----------------------------------------------------
調整
---------------------------------------------------- */
header{overflow: visible !important; background: #FAF0DC;}
header .inner {-webkit-box-sizing: content-box;  box-sizing: content-box; font-weight: 400; position: relative; z-index: 20; width: 100%; background: #FAF0DC; max-width: 1000px;}
#quickLink a  {color: #333;}
#quickLink a:hover{text-decoration: none;}
#quickLink em {font-style: normal;}
header nav img {width:100%; height: auto;}

.bodyFixed {height: 100vh; overflow: hidden;}

@media (max-width: 767px) {
header {position: fixed; left: 0; top: 0; width: 100%; z-index: 10; background: #FAF0DC;}
header .inner a img{width:163px;}
}

/* ----------------------------------------------------
quickLink (common)
---------------------------------------------------- */
.bg {width: 100%; height:100%; background: rgba(0,0,0,0.25); position: fixed; left: 0; top:calc(90px + min(4.67vw,56px) + 1px); display: none; z-index: 2;}
.bg.is_active{display: block;}

#btnGlobal, #grandMenu {display: none;}

#quickLink {width: 100%; border-top: 1px solid var(--c-red); border-bottom:1px solid var(--c-red); position: relative; background: #fff; transition: 0.3s all ease-in-out; font-size: min(1.3vw, 16px);}
#navQuick {width: 90%; max-width: 1000px; margin: 0 auto; display: flex; display: -webkit-flex;}
#navQuick > li {flex: 1;display: flex; display: -webkit-flex; border-left: 1px solid #c0c0c0; font-weight: 600; cursor: pointer;}
#navQuick > li:last-child {letter-spacing: -0.08em; border-right: 1px solid #c0c0c0;}
#navQuick > li:nth-child(4) span {width:212px;}

#navQuick > li span {flex: 1;display: flex; display: -webkit-flex; align-items: center; justify-content: center; height: min(4.67vw,56px); position: relative; line-height: 1.3; font-weight: 600; }
#navQuick > li.is_active, #navQuick > li.current{background: var(--c-red); color: #fff;}
#navQuick > li > span::before {content: ""; background: url("../img/common/ic-arrow-01.svg") center center / cover no-repeat; aspect-ratio: 240/150; width: min(1.08vw,13px); position: absolute; left: 50%; bottom:min(0.4vw,5px); transform: translate(-50%,0); }
#navQuick > li.is_active span::before, #navQuick > li.current span::before{background-image: url("../img/common/ic-arrow-02.svg");}

.navQuick__list {position: absolute; left: 0; top: calc(min(4.67vw,56px) + 1px); background: #fff url("../img/common/bg-navQuickLink-01.svg") left top / min(5vw,6px) auto repeat; width: 100%; z-index: 10; padding: min(3.3vw,40px) 0 min(4.16vw,50px); display: none;}
.navQuick__wrap {width: 90%; max-width: 1000px; margin: 0 auto; display: flex; display: -webkit-flex; flex-wrap: wrap;column-gap: 2%; position: relative;}
.navQ__link {width: 32%;background: #fff; box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.2); border-radius: min(0.66vw,8px); }
.navQ__link:not(:nth-child(-n+3)) {margin-top: 2%;}

.navQ__link a {font-size: min(1.25vw,15px); padding: min(1.25vw, 15px) min(2.5vw, 30px); position: relative; min-height: min(8.5vw,102px); display: flex; display: -webkit-flex; align-items: center; transition: 0.3s all ease-in-out;}

.navQ__brand .navQ__link a {padding: min(1.25vw, 15px) min(1.25vw, 15px) min(0.83vw, 10px) min(1.25vw, 15px) ; display: block;}
.navQ__brand .navQ__link a .navQ__catch {margin-bottom: min(0.6vw,8px); line-height: 1.4; font-weight: 600;}
.navQ__link .navQ__brand {position: absolute; top: 50%; transform: translateY(-50%);}
.navQ--0101 h2 img {width: min(10.58vw,127px);}
.navQ--0101 .navQ__brand {width: min(7.08vw,85px); right: min(1.25vw, 15px);}
.navQ--0102 h2 img {width: min(17.72vw,209px);}
.navQ--0102 .navQ__brand {width: min(3.83vw,46px); right: min(1.66vw, 20px); top: inherit; transform: none; bottom: 0;}
.navQ--0103 h2 img {width: min(17.72vw,209px);}
.navQ--0103 .navQ__brand {width: min(7.33vw,88px); right: min(0.4vw, 5px); }
.navQ--0104 h2 img {width: min(12.83vw,154px);}
.navQ--0104 .navQ__brand {width: min(7.08vw,85px); right: min(1.25vw, 15px);}
.navQ--0105 h2 img {width: min(14.17vw,170px);}
.navQ--0105 .navQ__brand {width: min(5.5vw,66px); right: min(1.25vw, 15px);}

.navQ__link h2 {font-size: min(1.75vw,21px); line-height: 1.5; font-weight: 600;}
.navQ__link h2 em {display: block;}
.navQ__icon {position: absolute; right: min(2.5vw,30px); top: 50%; transform: translateY(-50%); width: min(4.16vw,50px);}

.navQ__close {position: absolute; right: 0; bottom:0; transform: translateY(150%); background: #fff; color: #333; font-size: min(1.08vw,13px); padding: min(0.4vw, 5px) min(0.4vw, 5px) min(0.4vw, 5px) min(2.5vw, 30px); line-height: 1;}
.navQ__close::before, .navQ__close::after {content: ""; width: min(1.25vw, 15px); height: 1px; background: #333; position: absolute; transform-origin: center center; left: min(0.4vw,5px); top: 50%; }
.navQ__close::before {transform: rotate(45deg);}
.navQ__close::after {transform: rotate(-45deg);}

@media (min-width:768px) {
/* hover */
#navQuick > li span {transition: 0.3s all ease-in-out;}
#navQuick > li:hover > span{background: var(--c-red); color: #fff;}
#navQuick > li:hover span::before {background-image: url("../img/common/ic-arrow-02.svg");}
.navQ__link a:hover,#pagetop a:hover {opacity: 0.75;}

}


@media (max-width: 767px) {
#wrapper {overscroll-behavior: none;}
.bodyFixed {height: 100vh;overflow: hidden;}
.bg {height: 100%; top: 0; }

#btnGlobal {position: fixed; right: 0; top: 0; height: 45px; width: 45px; display: flex; display: -webkit-flex; justify-content:center; align-items: center; flex-direction: column; z-index: 40;}
#btnGlobal .btnWrapGlobal { width: 30px; height: 20px; position: relative;}
#btnGlobal .btnLine { height:3px; background:var(--c-red); position: absolute; left: 50%; transform: translateX(-50%); width: 100%; transform-origin: center center;}
#btnGlobal .btnLine.btnLineT { top: 0;}
#btnGlobal .btnLine.btnLineM { top: 50%; transform: translate(-50%,-50%);}
#btnGlobal .btnLine.btnLineB { bottom: 0; }
#btnGlobal p {text-align: center; font-size: min(2.8vw, 12px); color: var(--c-red); font-weight: 600; line-height: 1; margin-top: 3px; }

#btnGlobal.active {background: #fff;}
#btnGlobal.active .btnLine {width: 90%;}
#btnGlobal.active .btnLine.btnLineT { display: none;}
#btnGlobal.active .btnLine.btnLineM { transform: translate(-50%,-50%) rotate(45deg) ;}
#btnGlobal.active .btnLine.btnLineB { top: 50%; bottom:inherit; transform: translate(-50%,-50%) rotate(-45deg) ;}
#btnGlobal .btnLine.btnLineM, #btnGlobal .btnLine.btnLineB {transition: all, ease-in-out, 0.3s;}

#grandMenu {background: rgba(0,0,0,0.25); width: 100%; height:100vh; position: fixed; z-index:30; left: 0; top: 45px; display: none; overflow: auto; padding: 0 0 10vw;}
#grandMenu .navGlobal {background: #fff;}
#grandMenu .navGlobal li { border-bottom: 1px solid var(--c-red); font-weight: 600; font-size: min(4vw, 18px);}
#grandMenu .navGlobal li a {display: block; padding: min(3vw, 25px) min(4vw, 30px); position: relative; }
#grandMenu .navGlobal li a::before {content: ""; position: absolute; right: min(4vw,30px); top: 50%; transform: translateY(-50%); aspect-ratio: 75/150; width: min(2vw,12px);background-position: center center; background-size: cover; background-repeat: no-repeat;}
#grandMenu .navGlobal__main a {color: var(--c-red);}
#grandMenu .navGlobal__sub a {color: #333;}
#grandMenu .navGlobal__sub li:last-child {border-bottom: 0;}
#grandMenu .navGlobal__main a::before{background-image: url("../img/common/ic-arrow-03.svg");}
#grandMenu .navGlobal__sub a::before{background-image: url("../img/common/ic-arrow-04.svg");}


/* quickLink */
#quickLink {position: fixed; left: 0; top: 45px; z-index: 10;}
#navQuick {width: 100%; font-size: min(3vw,16px); line-height: 1.2;  }
#navQuick > li:first-child {border-left: none;}
#navQuick > li:nth-child(4) span{width: 88px;}
#navQuick > li:last-child {letter-spacing: -0.08em; border-right: none;}
#navQuick > li span {height: min(12vw,60px); text-align: center; padding-bottom: min(1vw,5px);}
#navQuick > li > span::before {width: min(2vw,14px); bottom:min(1vw,3px); }

.navQuick__list {background-size: min(2vw,12px) auto; padding: min(7vw,50px) 0 ; z-index: 20;}
.navQuick__wrap {column-gap: 0;}
.navQ__link {width: 100%; border-radius: min(2vw,8px); }
.navQ__link:not(:first-child) {margin-top: min(1vw,10px);}
.navQ__link a {font-size: min(3vw,2.4rem); padding: min(2vw, 15px) min(4vw, 30px); min-height: min(16vw,70px);}

.navQ__brand .navQ__link a {padding: min(2vw, 15px) min(4vw, 30px);}
.navQ__brand .navQ__link a .navQ__catch {margin-bottom: min(1.5vw,15px);}

.navQ--0101 h2 img {width: min(23vw,172px);}
.navQ--0102 h2 img {width: min(38vw,283px);}
.navQ--0103 h2 img {width: min(38vw,283px);}
.navQ--0104 h2 img {width: min(51vw,379px);}
.navQ--0105 h2 img {width: min(31vw,232px);}
.navQ__brand img {width:auto; height: 100%;}
.navQ__link .navQ__brand {width: inherit; height: 90%; right: min(9vw, 70px);}
.navQ--0102 .navQ__brand {width: inherit; right: min(13vw, 95px);}

.navQ__link h2 {font-size: min(4vw,24px); }
.navQ__link h2 em {display: inline-block; margin-left: 1em;}
.navQ__icon {right: min(6vw,45px); width: min(10vw,60px);}

.navQ__close {bottom: max(-7vw, -50px); padding: min(7.5vw,60px) 0 0; transform: translateY(130%); aspect-ratio: 50/65; width: min(7vw,50px); font-size: min(2vw,1.7rem); text-align: center; color: #fff; background: transparent;}
.navQ__close::before, .navQ__close::after {content: ""; width: min(7vw, 50px); height: 3px; background: #fff; position: absolute; transform-origin: center center; left: 50%; top: 20%; }
.navQ__close::before {transform: translate(-50%)rotate(45deg);}
.navQ__close::after {transform: translateX(-50%)rotate(-45deg);}

/* footer */
#quickLink.scroll {top: inherit; bottom: 0;  position: fixed; transition: transform 0.3s ease-in-out; animation:fadeup ease-out 0.3s forwards; z-index: 2;}
#quickLink.scroll .navQuick__list {top:inherit; bottom:calc(min(12vw,96px) + 1px); }
#quickLink.scroll .navQ__close {bottom: inherit; top: max(-7vw, -50px); transform: translateY(-150%);}
#quickLink.scroll #navQuick > li > span::before {bottom: inherit; top:min(1vw,10px); transform: translate(-50%,0) rotate(180deg);}
#quickLink.scroll #navQuick > li span {padding-top: min(1vw,5px); padding-bottom: 0;}

@keyframes fadeup {
  0% {transform: translateY(100%);}
  100% {transform: translateY(0);}
 }
}