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


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');
/*300 Light / 400 Regular / 500 Medium*/

/*
@font-face {
	font-family:'DINPro-Light';
	src: url("../../fonts/DINPro-Light.eot");
	src: url("../../fonts/DINPro-Light.eot?#iefix") format("embedded-opentype"), 
	url('../../fonts/DINPro-Light.woff2') format('woff2'),
	url('../../fonts/DINPro-Light.woff') format('woff'),
	url('../../fonts/DINPro-Light.ttf') format('truetype'),
	url('../../fonts/DINPro-Light.svg#DINPro-Light') format('svg');
}
*/
@font-face {
	font-family:'DINPro-Regular';
	src:url('../../../fonts/DINPro-Regular.eot');
	src:url('../../../fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype'),
	url('../../../fonts/DINPro-Regular.woff2') format('woff2'),
	url('../../../fonts/DINPro-Regular.woff') format('woff'),
	url('../../../fonts/DINPro-Regular.ttf') format('truetype'),
	url('../../../fonts/DINPro-Regular.svg#DINPro-Regular') format('svg');
}
/*
@font-face {
	font-family:'DINPro-Medium';
	src:url('../../fonts/DINPro-Medium.eot');
	src:url('../../fonts/DINPro-Medium.eot?#iefix') format('embedded-opentype'),
	url('../../fonts/DINPro-Medium.woff2') format('woff2'),
	url('../../fonts/DINPro-Medium.woff') format('woff'),
	url('../../fonts/DINPro-Medium.ttf') format('truetype'),
	url('../../fonts/DINPro-Medium.svg#DINPro-Medium') format('svg');
}
*/
@font-face {
	font-family:'DINPro-Bold';
	src:url('../../../fonts/DINPro-Bold.eot');
	src:url('../../../fonts/DINPro-Bold.eot?#iefix') format('embedded-opentype'),
	url('../../../fonts/DINPro-Bold.woff2') format('woff2'),
	url('../../../fonts/DINPro-Bold.woff') format('woff'),
	url('../../../fonts/DINPro-Bold.ttf') format('truetype'),
	url('../../../fonts/DINPro-Bold.svg#DINPro-Bold') format('svg');
}




/* ---------- RESET ---------- */

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,
dl, dt, dd, b, u, i, center,
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, textarea, input {
  margin:0;
  padding:0;
  border:0;
  font-size: 100%;
  font:inherit;
  vertical-align: baseline;
  text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul, li {
  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;
}
input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
input:focus, textarea:focus{
  -webkit-apparence:none;
  outline: none;
  border:none;
}
img{
	border:none;
	outline:none;
	vertical-align:top;
	font-size:0;
	line-height:0;
}
img a{
	border:none;
	outline: none;
}
a:focus{
	outline:none;
}
hr {
  height:0;
  margin:0;
  padding:0;
  border:0;
}
h1, h2, h3, h4, h5, h6, p{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration:none;
}

input, textarea, button{
  -webkit-apparence:none;
  border:none;
  background: none;
  outline: none;
}
/*
a{
	-webkit-transition: all 0.4s;
	   -moz-transition: all 0.4s;
	    -ms-transition: all 0.4s;
	        transition: all 0.4s;
}
*/

img{
	width:100%;
	height:auto;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transform:translate3d(0,0,0);
}
*{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-box-shadow:none;
    box-shadow:none;   
    outline:none;
	box-sizing:border-box;
	margin:0;
	padding:0;
}

.clear:after,
ul:after,
li:after,
dl:after{
	  content: "";
	  display: table;
	  float:none;
	  clear: both;
}



html{
    width: 100%;
    height: 100%;
}

body{
    background:#FFF;
    width: 100%;
    height: 100%;
    line-height: 1.7;
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    font-family: 'Noto Sans JP','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho','Times New Roman', serif;
    font-weight:400;/*Regular*/
}


body.fixed{position: fixed;}





/* =============================================== */


#loader-bg{
    display:block;
    position:fixed;
    width:100%;
    height:100%;
    min-height:100%;
    top:0px;
    left:0px;
    background:#FFF;
    z-index:1000;
    overflow:hidden;
}

#loader-bg .spinner {
    width: 100px;
    text-align: center;
    position: absolute;
    margin: 0 auto;
    font-size: 0;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 100;
    -webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
}
#loader-bg .spinner > div {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color:#CFD2D3;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

#loader-bg .spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

#loader-bg .spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}




/* ---------------- */

/* standard */
.fade,
.fade.delighter{
	will-change: transform,animation,position;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	opacity:0;
    position: relative;
    top: 50px;
	-webkit-transition: all 2.0s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 2.0s cubic-bezier(0.25, 1, 0.5, 1);
}
/* start */
.fade.delighter.started{
	opacity:1;
    top: 0;
}

/* standard */
.crossfade,
.crossfade.delighter{
	will-change: transform,animation,position;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	opacity:0;
    position: relative;
	-webkit-transition: opacity 2.0s cubic-bezier(0.25, 1, 0.5, 1);
	transition: opacity 2.0s cubic-bezier(0.25, 1, 0.5, 1);
}
/* start */
.crossfade.delighter.started{
	opacity:1;
}
/* ---------------- */





/* ---------------------------------------------------------------------------------------------------------------- */


#header{
	width: 100%;
	height: 50px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
	background:#FFF;
}

.headerInner{
	width: 95%;
	margin: 0 auto;
	height: 50px;
	position:relative;
}

#header .nfLogo{
	position: absolute;
	top: 50%;
	left: 0;
	width: 153px;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
#header .instagream{
	position: absolute;
	top: 50%;
	right: 0;
	width: 20px;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
#header .headerNavi{
	 position: absolute;
	 top: 50%;
	 /*left:calc(153px + 6%);*/
	 left: 220px;
	 display: block;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
#header .headerNavi ul.mainNavi{
	font-size: 0;
	text-align: left;
	font-family:'DINPro-Regular';
}
#header .headerNavi ul.mainNavi li{
	 font-size: 14px;
	 display: inline-block;
	 margin-right: 45px;
	 line-height: 1;
}
#header .headerNavi ul.mainNavi li a{
	color: #000;
	padding: 0.3em 0;
	position: relative;
}
#header .headerNavi ul.mainNavi li a:after{
	content: "";
	height: 1px;
	position: absolute;
	left: -1px;
	right: -1px;
	bottom: 0;
	background: #000;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
}
@media(min-width: 769px) {
#header .headerNavi ul.mainNavi li a:hover:after{opacity: 1;}
}

#header .headerNavi .spOnlymenu{display: none;}



/* ---------------------------------------------------------------------------------------------------------------- */




#footer{
	width: 100%;
	background: #F0F3F3;
}
#footer .footerInner{
	width: 95%;
	padding: 35px 0 90px;
	position: relative;
	margin: 0 auto;
}


#footer .nfLogo{
	width: 153px;
	position: absolute;
	top: 35px;
	left: 0;
}


#footer .footerNavi{
	margin:5px 0 0 210px;
	position: relative;
	
}
#footer .footerNavi ul.mainMenu{
	font-size: 0;
	text-align: left;
}
#footer .footerNavi ul.mainMenu li{
	 font-size: 15px;
	 display: inline-block;
	 margin-right: 45px;
	 line-height: 1;
	 font-family:'DINPro-Regular';
}
#footer .footerNavi ul.subMenu{
	font-size: 0;
	text-align: left;
	margin-top: 20px;
}
#footer .footerNavi ul.subMenu li{
	 font-size: 13px;
	 display: inline-block;
	 margin-right: 35px;
	 line-height: 1;
}
#footer .footerNavi ul.subMenu li span{
	font-family:'DINPro-Regular';
}






#footer .footerNavi ul li a{
	color: #33334B;
	padding: 0.1em 0;
	position: relative;
}
#footer .footerNavi ul li a:after{
	content: "";
	height: 1px;
	position: absolute;
	left: -1px;
	right: -1px;
	bottom: 0;
	background: #33334B;
	opacity: 0;
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
}
@media(min-width: 769px) {
#footer .footerNavi ul li a:hover:after{opacity: 1;}
}


#footer .copyright{
	background: #33334B;
	color: #FFF;
	font-family:'DINPro-Regular';
	font-size: 12px;
	letter-spacing: 0.02em;
	padding: 1em 0 1em 2.5%;
}





/*-----------------------------*/

.ptBox{
	width: 100%;
	pointer-events: none;
	height: 30px;
}
.ptSide{
	width:98%;
	z-index:200;
	pointer-events: none;
	margin: 0 auto;	
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
.ptSide.release{
	position:relative;
}
.ptSide p{
	width: 15px;
	display: inline-block;
	cursor: pointer;
	pointer-events:auto;
	position: relative;
	right: -0;
	top: -20px;
	opacity: 0;
	float: right;
	-webkit-transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.ptSide p.view{opacity: 1;}

.ptSide p img{
	top: 0;
	position: relative;
	-webkit-transition: top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	transition: top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

@media(min-width: 769px) {
.ptSide p:hover img{top: -6px;}
}



/*----------------------------*/
.main{
	width: 100%;
	padding-top: 50px;
	overflow: hidden;
}
/*----------------------------*/




/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



@media(max-width:768px) {

.screenWide{display: none;}


#header{height: 80px; }
.headerInner{height: 80px;width: 92%;}
#header .nfLogo{width: 175px;z-index: 50;}
#header .instagream{right: 60px;z-index: 50;width: 25px;}

#header .headerNavi{
	position:fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	display: none;
	pointer-events: none;
	-webkit-transform:none;
	transform:none;
	background: #FFF;
}
#header .headerNavi.active{
	pointer-events:auto;
}
#header .headerNavi ul.mainNavi{
	width: 100%;
	position: absolute;
	top:calc(50% - 100px);
	left: 0;
	right: 0;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
#header .headerNavi ul.mainNavi li{
	 font-size: 24px;
	 display:block;
	 margin:7vh 0;
	 text-align: center;
}
#header .headerNavi ul.mainNavi li a{
	padding: 1em 0;
}


/*-------------*/
#header .headerNavi .spOnlymenu{
	display:block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: #F0F3F3;
}
#header .headerNavi .spOnlymenu ul.subMenu{
	margin-top: 0px;
	width: 96%;
	margin-left: 4%;
	line-height: 1;
}
#header .headerNavi .spOnlymenu ul.subMenu li{
	 font-size: 15px;
	 display: block;
	 border-top: 1px solid #ABABB6;
}
#header .headerNavi .spOnlymenu ul.subMenu li:first-child{border: none;}
#header .headerNavi .spOnlymenu ul.subMenu li span{
	font-family:'DINPro-Regular';
}
#header .headerNavi .spOnlymenu ul  li a{
	padding: 1.5em 0 1.5em 0.5em;
	margin: 0;
	display: block;
	color: #33334B;
}
#header .headerNavi .spOnlymenu .copyright{
	background: #33334B;
	color: #FFF;
	font-family:'DINPro-Regular';
	letter-spacing: 0.02em;
	font-size: 13px;
	padding: 1.5em 0 1.5em 4%;	
}
/*-------------*/



.hamburger{
	width: 30px;
	position:absolute;
	top: 30px;
	right: 0px;
	z-index: 600;
}
.hamburger-trigger,
.hamburger-trigger span {
	display: inline-block;
	 box-sizing: border-box;
}
.hamburger-trigger {
	position: relative;
	width: 30px;
	height: 21px;
	background: none;
	border: none;
	appearance: none;
	cursor: pointer;
}
.hamburger-trigger:focus:not(:focus-visible) {
	outline: none;
}
.hamburger-trigger span {
	position: absolute;
	width: 100%;
	height: 1px;
	background: #33334B;
}
.hamburger-trigger span:nth-of-type(1) {top: 0;left:0;transition: top .3s;}
.hamburger-trigger span:nth-of-type(2) {top: 10px;left: 0;transition: opacity .3s;}
.hamburger-trigger span:nth-of-type(3) {bottom: 0;left: 0;transition: bottom .3s;}
.hamburger-trigger.active span:nth-of-type(1) {
	top: 10px;
	left: 0px;
	transform: rotate(-45deg);
	transition: all .3s cubic-bezier(.36, -.42, .68, -.56), transform .3s .3s;
}
.hamburger-trigger.active span:nth-of-type(2) {
	opacity: 0;
	transition: opacity .05s .3s;
}
.hamburger-trigger.active span:nth-of-type(3) {
	bottom: 10px;
	transform: rotate(45deg);
	transition: bottom .3s cubic-bezier(.36, -.42, .68, -.56), transform .3s .3s;
}

/*------------------------------------------------------------------*/

#footer .footerInner{
	width: 96%;
	padding: 50px 0 0;
	margin:0 0 0 4%;
	overflow: hidden;
}
#footer .nfLogo{display: none;}
#footer .footerNavi{margin:0;}
#footer .footerNavi ul.mainMenu{display: none;}


#footer .footerNavi ul.subMenu{margin-top: 0px;}
#footer .footerNavi ul.subMenu li{
	 font-size: 15px;
	 display: block;
	 margin-right: 0;
	 border-top: 1px solid #ABABB6;
}
#footer .footerNavi ul  li a{
	padding: 1.5em 0 1.5em 0.5em;
	margin: 0;
	display: block;
}
#footer .footerNavi ul li a:after{display: block;}
#footer .copyright{font-size: 13px;padding: 1.5em 0 1.5em 4%;}

/*----------------------------*/
.main{
	padding-top: 80px;
}
/*----------------------------*/


}



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



@media(max-width:510px) {

#header{height: 70px; }
.headerInner{height: 70px;width: 90%;}
#header .nfLogo{width: 150px;}
#header .instagream{right: 44px;width: 20px;}
#header .headerNavi ul.mainNavi{top:calc(50% - 70px);}
#header .headerNavi ul.mainNavi li{font-size: 19px;margin:7vh 0;}
#header .headerNavi ul.mainNavi li a{padding: 1em 0;}



.hamburger{width: 22px;top: 25px;}
.hamburger-trigger {width: 22px;height: 15px;}
.hamburger-trigger span:nth-of-type(2) {top: 7px;}
.hamburger-trigger.active span:nth-of-type(1) {top: 7px;}
.hamburger-trigger.active span:nth-of-type(3) {bottom: 7px;}



/*-------------*/

#header .headerNavi .spOnlymenu{}
#header .headerNavi .spOnlymenu ul.subMenu{width: 95%;margin-left: 5%;}
#header .headerNavi .spOnlymenu ul.subMenu li{ font-size: 13px;}
#header .headerNavi .spOnlymenu ul  li a{padding: 1.3em 0 1.3em 0.5em;}
#header .headerNavi .spOnlymenu .copyright{font-size: 12px;padding: 1.3em 0 1.3em 5%;}


/*----------------------------*/

#footer .footerInner{width: 95%;padding-top:7%;margin-left:5%;}
#footer .footerNavi ul.subMenu li{font-size: 13px;}
#footer .footerNavi ul  li a{padding: 1.3em 0 1.3em 0.5em;}
#footer .copyright{font-size: 12px;padding: 1.3em 0 1.3em 5%;}


.ptBox{height: 25px;}
.ptSide{width:96%;}
.ptSide p{width: 13px;}
.ptSide p img{-webkit-transition:none;transition:none;}


/*----------------------------*/
.main{
	padding-top: 70px;
}
/*----------------------------*/


}