:root {
/*----------------
	初期値
------------------*/
/*メインカラー1*/
--main-color1:#b29243;
--main-color2:#77c18e;
--main-color1-2:#d5c183;
--main-color2-2:#8acda0;
--font-color1:#b29243;
--font-color2:#4fae6d;
--bk-color1:#fefff9;
--bk-color1:#fefff9;
/**/
--innser-max-width:1040px;
}


/*=====================================
header
=====================================*/
@media screen and (min-width:850px) {
header{ width: 100%; position: fixed; left: 0; top: 0; z-index: 1000; border-bottom: solid 1px var(--main-color1-2); background: rgba(255,255,255,.9);}
header #header { display: flex; flex-direction:row; justify-content: flex-end; align-items: center;}
header #header .navArea { display: block;}
header #header .navArea .gnav{ display: flex; align-items: center; justify-content: center;}
header #header .navArea .gnav p{ display: flex; align-items: center; justify-content: center;}
header #header .navArea .gnav p a{ display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 6px; border-radius: 6px; background: var(--main-color1-2); margin: 0 30px;}
header #header .navArea .gnav p a:hover{ background: #D5484B;}
header #header .navArea .gnav p a img{ height: 12px; margin-right: 12px;}
header #header .navArea .gnav p a span{ font-size: 12px; color: #fff;}

header #header .navArea .gnav ul{ display: flex;}
header #header .navArea .gnav ul li{ display: block; position: relative;}
header #header .navArea .gnav ul li.lock::after{ width: 12px; height: 12px; content: ""; position: absolute; left: calc(50% - 6px); bottom: 12px; background: url("../img/common/lock.png") 50% 50% no-repeat; background-size: cover; transition: 0.2s; pointer-events: none;}
header #header .navArea .gnav ul li.lock:hover::after{ background: url("../img/common/lock_w.png") 50% 50% no-repeat; background-size: cover;}
.scroll header #header .navArea .gnav ul li.lock::after{ width: 10px; height: 10px; left: calc(50% - 5px); bottom: 2px;}
header #header .navArea .gnav ul li a{ width: 90px; height: 90px; font-size: 11px; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; color: #333; border-left: solid 1px #ddd; }
.scroll header #header .navArea .gnav ul li a{ height: 50px;}
header #header .navArea .gnav ul li.lock a{}
header #header .navArea .gnav ul li a:hover{ box-shadow: 0 -90px 0 0 var(--main-color2-2) inset; color: #fff;}
}
@media screen and (max-width:950px) {
header #header .navArea .gnav ul li a{ width: 76px; font-size: 10px; letter-spacing: 0px;}
}
@media screen and (max-width:850px) {
header{ width: 100%; height: 100%; background: #fff; position: fixed; right: -100%; top: 0; display: block; z-index: 1000; transition: 0.4s; opacity: 0; pointer-events: none;}
.openMenu header{ right: 0; opacity: 1; pointer-events:all;}
header #header .navArea { width: 100%; display: block; max-height: calc(100vh - 70px); overflow-y: auto; margin-top: 70px;}
header #header .navArea .gnav { width: 100%; display: flex; flex-direction: column-reverse;}
header #header .navArea .gnav ul{ width: 100%; display: flex; flex-direction: column;}
header #header .navArea .gnav ul li{ width: 90%; margin: 0 5%; display: flex; border-top: solid 1px #e0e0e0;}
header #header .navArea .gnav ul li:last-child{ border-bottom: solid 1px #ddd;}
header #header .navArea .gnav ul li a{ width: 100%; padding: 8px; font-weight: 200; display: flex; align-items: center; color: #111; font-size: 20px; position: relative; background: #fff; margin: 1.5vh 0%;}
header #header .navArea .gnav ul li.lock a::after{ width: 22px; height: 22px; content: ""; position: absolute; right: 10px; top: 50%; margin-top: -11px; background: url("../img/common/lock.png") 50% 50% no-repeat; background-size: cover; transition: 0.2s; pointer-events: none;}
header #header .navArea .gnav p{ width: 100%; margin: 20px 0; display: flex; align-items: center; justify-content: center;}
header #header .navArea .gnav p a{ width: 90%; display: flex; align-items: center; justify-content: center; height: 60px; border-radius: 6px; background: var(--main-color1-2);}
header #header .navArea .gnav p a img{ height: 22px; margin-right: 22px;}
header #header .navArea .gnav p a span{ font-size: 16px; font-weight: bold; color: #fff;}
}



/*==============================================
login-sp
================================================*/
.siteLogo{ position: fixed; left: 10px; top: 25px; display: flex; justify-content: center; align-items: center; z-index:10001; transition: 0.4s;}
.siteLogo img{ width: 210px; height: auto;}
@media screen and (min-width:850px) {
.scroll .siteLogo{ top: 5px;}
}
@media screen and (max-width:850px) {
.siteLogo { opacity: 0; position: absolute; height: auto; top: 15px; transition: 0.4s;}
.body-delay .siteLogo { opacity: 1;}
.siteLogo img{ width: auto; height: 30px;}
.pageupOn .siteLogo{ opacity: 0;}
.openMenu .siteLogo{ position: fixed; z-index: 10000; opacity: 1;}
}
/*==============================================
login-sp
================================================*/
.login-sp{ display: none;}
@media screen and (max-width:850px) {
.login-sp { position: fixed; top: 10px; right: 70px; width: auto; display: flex; z-index:100; }
.login-sp a{ height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 3px; padding: 0 5px; background: var(--main-color1); color: #fff; font-weight: 400; font-size: 11px;}
.login-sp a span{ color: #fff; font-size: 2.2vw;}
.login-sp a img{ height: 12px; margin-right: 8px;}
}

/*==============================================
  header menuBtn
================================================*/
@media screen and (min-width: 850px) {
#menuBtn{ display: none;}
}
@media screen and (max-width: 850px) {
#menuBtn{ width: 50px; height: 50px; display: flex; justify-content: flex-end; position: fixed; right: 5px; top:5px; z-index: 10000; background:rgba(0,0,0,.0);transition: 0.4s;}
#menuBtn .menuBtn-line{ width: 50px; height: 50px; display: block; position: relative; border-radius: 10px; box-shadow: 0 8px 12px rgba(0,0,0,.1); background: rgba(255,255,255,.7);}
#menuBtn .menuBtn-line::after{ width:24px; height: 1px; background: #000; position: absolute; left: 13px; top: 50%; content: ""; transition: 0.4s;}
#menuBtn .menuBtn-line .l1, 
#menuBtn .menuBtn-line .l2{ width: 24px; height: 1px; position: absolute; left: 13px; top: 50%; background: #000; transition: 0.4s;}
#menuBtn .menuBtn-line .l1{ margin-top: 8px;}
#menuBtn .menuBtn-line .l2{ margin-top: -8px;}
/**/
.openMenu #menuBtn{ }
.openMenu #menuBtn .menuBtn-line{ box-shadow: none; background: var(--main-color1);}
.openMenu #menuBtn .menuBtn-line::after { width: 0px;}
.openMenu #menuBtn .menuBtn-line .l1{ margin-top: 0px; transform:rotate(45deg); background: #fff;}
.openMenu #menuBtn .menuBtn-line .l2{ margin-top: 0px; transform:rotate(-45deg); background: #fff;}
}











/*-----------------------
footer #fukuya-group
-------------------------*/
footer{ border: solid 1px #ddd; background: #f0f0f0;}
footer #fukuya-group{ padding: 60px 2%;}
footer #fukuya-group .inner{ display: flex; flex-direction: column; justify-content: center;}
footer #fukuya-group .inner h2{ font-size: 22px; font-weight: bold; display: block; text-align: center;}
footer #fukuya-group .inner p{ font-size: 14px; display: block; margin: 10px 0 30px; text-align: center;}
footer #fukuya-group .inner ul{ display: flex; justify-content: center; flex-wrap: wrap;}
footer #fukuya-group .inner ul li { width: 18%; margin: 0 1%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; border-radius: 10px; border: solid 1px var(--main-color2); box-shadow: 0 6px 12px rgba(0,0,0,.2); background: #fff; padding: 20px 10px;}
footer #fukuya-group .inner ul li h3{ font-size: 20px; text-align: center; margin-bottom: 5px;}
footer #fukuya-group .inner ul li h3 span{ display: block; font-size: 13px;}
footer #fukuya-group .inner ul li a{ display: flex; justify-content: center; align-items: center; line-height: 1.1em; font-size: 12px; width: 100%; min-height: 24px; border:solid 1px #fff; border-radius: 4px; background: #fff; color: #aaa; letter-spacing: 0; margin: 4px 0; position: relative;}
footer #fukuya-group .inner ul li a.g{ justify-content: flex-start; padding:5px 5px 5px 30px;}
footer #fukuya-group .inner ul li a.g::before, 
footer #fukuya-group .inner ul li a.g::after{ width: 8px; height: 6px; border: solid 1px #ccc; position: absolute; left: 10px; top: 50%; content: ""; transition: 0.3s;} 
footer #fukuya-group .inner ul li a.g::before{ margin: -5px 0 0 0;} 
footer #fukuya-group .inner ul li a.g::after{ margin: -2px 0 0 4px;}
footer #fukuya-group .inner ul li a.g:hover::before, 
footer #fukuya-group .inner ul li a.g:hover::after{ border: solid 1px #555;} 
footer #fukuya-group .inner ul li a.g:hover{ color: #111; border: solid 1px #333;}
footer #fukuya-group .inner ul li a.next{ color: #fff; background:var(--main-color2);}
footer #fukuya-group .inner ul li a.next:hover{ background:var(--main-color1); border: solid 1px var(--main-color1);}
footer .copy{ font-size: 9px; letter-spacing: 0; counter-increment: #bbb; width: 100%; line-height: 1.2em; z-index: 10; position: absolute; left: 0; bottom: 8px; text-align: center; pointer-events: none;}
@media screen and (max-width:1000px) {
footer #fukuya-group{ padding: 60px 2% 30px;}
footer #fukuya-group .inner ul li h3 { font-size: 2.0vw; letter-spacing: 0;}
}
@media screen and (max-width:750px) {
footer #fukuya-group .inner ul { justify-content: flex-start;}
footer #fukuya-group .inner ul li { width: 31%; margin: 0 1% 20px; padding: 10px 6px 15px; box-shadow: none; border-radius: 4px; border:solid 4px #ccc;}
footer #fukuya-group .inner ul li h3 { font-size: 2.4vw; padding: 8px 0 2px;}
footer #fukuya-group .inner ul li h3::after{ content: "について"; font-size: 2.0vw; color: #888;}
footer #fukuya-group .inner ul li h3 span{ display: none;}
footer #fukuya-group .inner ul li a.next{ height: 40px; font-size: 2.0vw;}
footer #fukuya-group .inner ul li a.g{ color: #111; border: solid 1px #aaa; background: #f5f5f5; ; margin: 5px 0;}
footer #fukuya-group .inner ul li a.g::before, 
footer #fukuya-group .inner ul li a.g::after{ border: solid 1px #111;}
}
@media screen and (max-width:600px) {
footer #fukuya-group .inner h2{ font-size:5.4vw;}
footer #fukuya-group .inner p{ margin: 20px 0; font-size: 3.8vw;}
footer #fukuya-group .inner ul li { width: 48%; margin: 0 1% 15px; padding: 10px 6px; border:solid 1px #ccc;}
footer #fukuya-group .inner ul li h3 { font-size: 3.4vw;}
footer #fukuya-group .inner ul li h3::after{ font-size: 3.4vw;}
footer #fukuya-group .inner ul li a.next{ font-size: 3.4vw;}
footer #fukuya-group .inner ul li a.g{ font-size: 2.8vw; margin: 10px 0;}
}







/*-----------------------
footer #end
-------------------------*/
footer #end{ padding: 40px 2% 80px;}
footer #end .inner{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
footer #end .endlogo{ width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px;}
footer #end .endlogo img{ width: 300px; height: auto;}
footer #end dl{ width: 100%; height: 30px; border-radius: 20px; display: flex; justify-content: center; align-items: center; background: #fff; border: solid 1px #aaa;}
footer #end dl *{ font-size: 11px; letter-spacing: 0;}
footer #end dl dt::after{ content: ":"; padding: 0 10px;}
footer #end dl dd{ display: flex; flex-wrap: wrap;}
footer #end dl dd a{ display: block; color: #239058; letter-spacing: 0; margin: 0 8px;}
footer #end dl dd a:hover{ color: #043E20; text-decoration: underline;}

@media screen and (max-width:810px) {
footer #end{ padding: 40px 2% 80px; background: linear-gradient(to bottom, #c5c5c5 0%,#eeeeee 5%,#eeeeee 100%); border-bottom: solid 18px var(--main1-color);}
footer #end dl{ width: auto; height: auto; border-radius: 8px; background: rgba(255,255,255,.3); padding: 10px; flex-direction: column; justify-content: flex-start; margin: 30px 0 0;}
footer #end dl dt{ margin-bottom: 6px;}
footer #end dl dt::after{ display: none;}
footer #end dl dd a{ width: 31%; margin: 5px 1%; padding: 6px; border-radius: 30px; border: solid 1px #239058; text-align: center;}
}
@media screen and (max-width:600px) {
footer #end dl dd a{ font-size: 2.4vw; letter-spacing: 0;}
#end > div > dl > dd > a:nth-child(5){ font-size: 2.0vw;}
}

@media screen and (max-width:500px) {
footer #end dl dd a{ font-size: 2.2vw;}
}