@charset "UTF-8";
/* CSS Document */


body{ width: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; line-height: 1.6;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;}

/*image*/
a img:hover { opacity: 0.6;}
img{ display: block; max-width: 100%;}

h2{ font-size: 30px; font-weight: 900;padding: 1.5em 0; }
body.under h2{ padding: 0; font-weight: 400; font-size: 60px; line-height: 1; background-color: #eff3f4; text-align: center;}
body.under h2 p{ padding: .5em 0; box-sizing: border-box;}
h2 span{ border-bottom: 2px solid;}

.pc-dsp{ display: inherit;}
.sp-dsp{ display: none;}

#content{ padding: 60px 0 0;}
body.under #content{ padding: 85px 0 0;}

#sharp,#flat{ margin-top: -80px; padding-top: 80px;}

.wf-notojp{font-family: "Noto Sans Japanese";}

/*animetion*/

.is-hidden {
  -webkit-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;
  opacity: 0;}

.fade-out {
  opacity: 0;
  -webkit-transition: opacity .6s ease-in-out;
  transition: opacity .6s ease-in-out;}

.fade-in {
  opacity: 1.0;}

/*ボタン*/
.more-btn-block-out {
  opacity: 0;}

.more-btn-block-out:before {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: -webkit-transform .6s ease-in-out 0s;
  transition: -webkit-transform .6s ease-in-out 0s;
  transition: transform .6s ease-in-out 0s;
  transition: transform .6s ease-in-out 0s, -webkit-transform .6s ease-in-out 0s;}

.more-btn-block-out .more-btn {
  opacity: 0;
  -webkit-transition: opacity .6s ease-in-out .6s;
  transition: opacity .6s ease-in-out .6s;}

.more-btn-block-in {
  opacity: 1;}

.more-btn-block-in:before {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);}

.more-btn-block-in .more-btn {
  opacity: 1;}

.more-btn a {
	border: 1px solid #000; color: #000;
	font-weight: bold;
	width: 100%; height: 100%; 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; text-align: center; -webkit-transition: color ease-in-out 0.3s;
	transition: color ease-in-out 0.3s; overflow: hidden;}

.more-btn a:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: -100%;
  top: 0;
  z-index: 0;
  -webkit-transition: all ease-in-out 0.3s;
  transition: all ease-in-out 0.3s;
}
.more-btn a:hover:before {
  left: 0;
	background: #000;
}


.more-btn a:hover {
  color: #fff;}

.more-btn a:before {
  background: rgba(255, 255, 255, 0);}

/*============================
 header	
=============================*/
header {
  width: 100%; height: 85px; padding: 0 1em; background: rgba(0, 0, 0, 1); z-index: 880; color: #fff;
  position: fixed; left: 0; top: 0; -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; justify-content: space-between;}

header h1 {z-index: 9991;}
header h1 a { display: block;}
header h1 svg{ fill:#fff; width: 220px;}
header .g-nav07{ font-weight: bold; font-size: 18px; line-height: 1.6;}
header .g-nav07 span{ font-size: .68em; font-weight: normal;}

/*header-fixed*/
header.fixed { height: 65px;background: url(../imgs/head-wp.png) center/auto 100%;}

/*============================
 g-nav	
=============================*/

#sp-menu-block{ display: none;}
#g-nav { display: none;	z-index: 201;　width: 100%;
	-webkit-transition: top ease-in-out 0.3s; transition: top ease-in-out 0.3s;}

.g-nav-inner{ display: flex;}
#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;　height: 60px; font-size: 21px;}

#g-nav li a {display: inline-block; font-size: 18px; color: #fff;
  white-space: nowrap; padding: 0 .88em;　-webkit-transition: color ease-in-out 0.3s; transition: color ease-in-out 0.3s;}

#g-nav li a span {z-index: 2;}

#g-nav li a::before { content: '';　position: absolute;　width: 100%;　height: 90px;
  left: 0; top: -90px;　background: transparent;　z-index: -1;　-webkit-transition: background ease-in-out 0.3s, top ease-in-out 0.3s;
  transition: background ease-in-out 0.3s, top ease-in-out 0.3s;}

#g-nav li a:hover::before { top: -50px; background: #6aa545;}

.g-nav07{ text-align: right;}
.g-nav07 span{ display: block;}

/*============================
 Footer
=============================*/
footer{text-align: center; background-color: #000; margin-top: 80px;} 
footer p{color: #FFF; font-size: 14px; padding: .5em 0;}

@media screen and (max-width: 1024px){
	
	#sp-menu {
    position: fixed;
    right: 0;
    top: 0;
    display: block;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    cursor: pointer;
    text-align: center;
    z-index: 999;
    background: rgba(255, 255, 255, 0);
  }
  #sp-menu.fixed span {
    background: #111;
  }
  #sp-menu span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    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: #fff;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  #sp-menu span:nth-child(1) {
    top: 24px;
  }
  #sp-menu span:nth-child(2) {
    top: 30px;
  }
  #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 {
    position: fixed !important;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    left: 0;
    top: 0;
    display: none;
    overflow: auto;
    z-index: 980;
  }
  #sp-menu-block-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -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;
    height: 100%;
  }
}