@charset "UTF-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;box-sizing: border-box;position: relative;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;box-sizing: border-box;position: relative;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
a { text-decoration: none; color:inherit;}
a{ text-decoration: none;}
a.over{transition: all ease-out 0.3s; }
a.over:hover{ opacity: 0.6; }
img{ border: none;}

body{ font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;  font-size: 15px; line-height: 1.6;-webkit-text-size-adjust: 100%;}
*{ min-height: 0;min-width: 0;}
img{ display: block; max-width: 100%;}

h2{font-family: 'Barlow Semi Condensed', sans-serif;font-weight: 700; font-size: 45px; text-align: center; letter-spacing: .1em;}
h2 span{ display: block; font-size: 14px; letter-spacing: .05em; padding-top: .5em;}

.fnt-mncho{font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;}

.inner{ width: 1200px; margin: 0 auto;}
section + section{ padding: 1em 0 0;}

.fnt-pnk{ color: #E41B5B;}
.fnt-gry{ color: #9B9A9A;}

/*パンクズリスト*/
.breadcrumb{ display: flex;}
.breadcrumb dd{ padding: .85em .5em; line-height: 1;}
.breadcrumb dd:not(:last-child)::after{ content: ">";}

.breadcrumb dd span{ padding-right: 1em;}

/*====================================================
 header
====================================================*/

#sp-menu { display: none;}
#sp-menu-block { display: none;}

#container {width: 100%; overflow: hidden; overflow-scrolling: touch; -webkit-overflow-scrolling: touch;}

header {width: 100%; height: 90px; background: rgba(255, 255, 255,1); z-index: 880;-webkit-transition: background ease-in-out 0.3s, height ease-in-out 0.3s;transition: background ease-in-out 0.3s, height ease-in-out 0.3s;display: flex; align-items: center;}
.header-inner{width: 100%; margin: 0 0;padding:0 2em;display: flex; align-items: start; justify-content: start;}
#site-header.page .header-inner p.logo-img{ display: block; width: 25%;padding:4px 5% 0 0;}
#site-header.page .header-inner p.logo-img img{ width: 100%;}

/*header-fixed*/
header.fixed { background:#fff;}

/*======================
 g-Nav
=======================*/

/*nav-fixed*/
header.fixed #g-nav { top: 10px;width:100%;}
header.fixed #g-nav li a { color: #111;}
header.fixed #g-nav li a:hover {}
header.fixed .header-btn { top: 15px;}
header.fixed .header-btn a {background: #6aa545;}

header.is-ab { position: absolute;}

/*nav*/
#g-nav ul {display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center;align-content: center;  -webkit-box-align: center; -ms-flex-align: center; align-items: center;-ms-flex-wrap: nowrap; flex-wrap: nowrap;}
#g-nav li a { display: block; letter-spacing: 0.1em;padding: 2px 25px  0; -webkit-transition: color ease-in-out 0.3s; transition: color ease-in-out 0.3s; font-family: 'Roboto',sans-serif; font-size: 1.15em; font-weight: 900;}
#g-nav li a span { z-index: 2;}

#g-nav ul li > ul{ display: block; list-style: none; position: absolute; z-index: 999; top: 150%; left: 0; right: 0; margin: 0; padding: 0;}
#g-nav ul li > ul li{ overflow: hidden; height: 0; padding: 0; transition: .2s;background: rgba(255,255,255,1);display: flex; flex-direction: column; justify-content: center; align-items: center;}
#g-nav ul li > ul li a{ display: block;text-align: center; padding: 0; font-size: .8em;}
#g-nav ul li:hover > ul li{ overflow: visible; height: 3em;box-shadow: 0 3px 3px rgba(120,120,120,0.4);border-bottom:1px solid#eee;}
#g-nav ul li:hover > ul li:hover{ background: rgba(255,255,255,.9);box-shadow: 0 3px 3px rgba(120,120,120,0.4);border-bottom:1px solid#eee;}

.head-mail {width: 30px;position: absolute;top:5px;right:3em;}
.head-mail svg{ width: 100%;width: 30px;height:20px;}

.g-nav04::before{contents:none!important;}

@media screen and (max-width: 768px){
header{position: fixed; top: 0; height: 60px; padding: 0 .5em; z-index: 998; background: #fff;}
.header-inner{ width: 100%;padding:0 0;}
.header-inner p.logo-img{ display: block;width: 95%!important;}
#site-header.page .header-inner h1{ display: block; padding:0 0 0 .25em;}

#sp-menu { position: fixed; right: 0; top: 1px; display: block; margin: 0 auto; width: 60px;height: 60px; cursor: pointer; text-align: center; z-index: 999;}
#sp-menu.fixed span { background: #111;}
#sp-menu span { display: block; width: 26px; height: 1px; background: #000;position: absolute; left: 18px; -webkit-transition: all .3s; transition: all .3s;-webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}
#sp-menu.open span {background: #000; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}
	
#sp-menu span:nth-child(1) { top: 20px;}
#sp-menu span:nth-child(2) { top: 28px;}
#sp-menu span:nth-child(3) { top: 36px;}	
#sp-menu.open span:nth-child(1) { top: 30px;-webkit-transform: rotate(45deg); transform: rotate(45deg);}
#sp-menu.open span:nth-child(2) { opacity: 0;}
#sp-menu.open span:nth-child(3) {top: 30px;-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
#sp-menu-block {display: none; position: fixed; width: 100%; height: 100%;background: rgba(240, 248, 240, 0.9); left: 0; top: -100vh; bottom: 0; overflow-y: scroll; z-index: 980;transition: all ease-in 0.1s; padding: 1.5em 1em;}

.sp-menu-block-inner{}
#sp-menu-block.slide{top: 60px;}
#site-header h1 svg { width: 70vw; fill:#79b88f;}
#g-nav { display: none; left: auto; top: auto;　z-index: 201; width: 100%;}
.g-nav-inner{ width: 100%;}
.g-nav ul { display: block;height: auto; width: 100%;}
.g-nav li { width: 100%; border-bottom: 1px solid; padding: 1em 0 .5em;}
.g-nav li a,.g-nav li p {font-family: 'Oswald', sans-serif;font-weight: 600; letter-spacing: .15em; font-size: 1.15em; display: block;padding: 0 20px; -webkit-transition: color ease-in-out 0.3s; transition: color ease-in-out 0.3s; text-align: center; line-height: 1.6;}
.g-nav li a span,.g-nav li p span { display: block; font-weight: 400; font-family: sans-serif; font-size: .65em; letter-spacing: normal;}
.mail-btn {margin: 10% 0;}
.mail-btn a{ border: 1px solid; display: block; font-family: 'Oswald', sans-serif;font-weight: 600; letter-spacing: .15em; font-size: 1.15em; width: 65%; padding: .75em 15%; margin: 0 auto; background: url(../imgs/common/nav-mail.png) no-repeat 85% 50%/12%;}
.nav-info{ padding-bottom: 2em;}
.nav-info p.inttl{font-family: "Noto Sans Japanese"; font-weight: 900; font-size: .85em; letter-spacing: .15em; border-bottom: 1px solid; padding-bottom: .5em;}
.nav-info p.intxt{ font-size: .75em; text-align: justify; padding:1em 0 2em;}

.g-nav ul.base-nav { display: block;height: auto; width: 100%;}
.g-nav ul.base-nav > li { width: 100%; border-bottom: 1px solid; padding: 1em 0 .5em;}
.g-nav ul.base-nav > li a,.g-nav ul.base-nav > li > p{font-family: 'roboto', sans-serif; font-weight: 700; letter-spacing: .15em; font-size: 1.3em; display: block;padding: 0 20px; -webkit-transition: 0.3s; transition: 0.3s; text-align: center; line-height: 1.6;}
.g-nav ul.base-nav > li a span,.g-nav ul.base-nav > li > p span { display: block; font-weight: 400; font-family: sans-serif; font-size: .65em; letter-spacing: normal;}

.g-nav04::before{position: absolute; top: 1.5em; right: .5em; transform: translate(0,-50%); font-family: fontAwesome; content: '\f107';font-size:1.5em;}
.g-nav04.open::before{content: '\f106';}

ul.ac-nav{ display: none; width: 100%; margin: .5em auto 0;}
ul.ac-nav > li{ border-top: 1px dotted #555;border-bottom:none;text-align:center;position:relative;}
ul.ac-nav > li::before{position: absolute; top: 50%; right: 1em; transform: translate(0,-50%); font-family: fontAwesome; content: '\f105';font-size:1em;}
.g-nav ul.ac-nav > li a{ font-size: .8em; padding: .25em 0;}	

}
/*animetion*/
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}