@charset "utf-8";

/* utility ---------------------------------------------------------------------*/
.m05 { margin-bottom:5px;}
.m10 { margin-bottom:10px;}
.m12 { margin-bottom:12px;}
.m15 { margin-bottom:15px;}
.m20 { margin-bottom:20px;}
.m30 { margin-bottom:30px;}
.m40 { margin-bottom:40px;}
.m50 { margin-bottom:50px;}
.m60 { margin-bottom:60px;}
.m70 { margin-bottom:70px;}
.mt05 { margin-top:5px;}
.mt10 { margin-top:10px;}
.mt12 { margin-top:12px;}
.mt15 { margin-top:15px;}
.mt20 { margin-top:20px;}
.mt30 { margin-top:30px;}
.mt40 { margin-top:40px;}
.mt50 { margin-top:50px;}
.mt60 { margin-top:60px;}
.mt70 { margin-top:70px;}
.mt80 { margin-top:80px;}
.mb05 { margin-bottom:5px;}
.mb10 { margin-bottom:10px;}
.mb12 { margin-bottom:12px;}
.mb15 { margin-bottom:15px;}
.mb20 { margin-bottom:20px;}
.mb30 { margin-bottom:30px;}
.mb40 { margin-bottom:40px;}
.mb50 { margin-bottom:50px;}
.mb60 { margin-bottom:60px;}
.mb70 { margin-bottom:70px;}
.mb100 { margin-bottom:100px;}
.ml05 { margin-left:5px;}
.ml05 { margin-left:5px;}
.ml10 { margin-left:10px;}
.ml12 { margin-left:12px;}
.ml15 { margin-left:15px;}
.ml20 { margin-left:20px;}
.ml30 { margin-left:30px;}
.ml40 { margin-left:40px;}
.ml50 { margin-left:50px;}
.ml60 { margin-left:60px;}
.ml70 { margin-left:70px;}
.mr05 { margin-right:5px;}
.mr10 { margin-right:10px;}
.mr15 { margin-right:15px;}
.mr20 { margin-right:20px;}
.mr25 { margin-right:25px;}
.mr30 { margin-right:30px;}
.mr40 { margin-right:40px;}
.mr50 { margin-right:50px;}
.mr60 { margin-right:60px;}
.mr70 { margin-right:70px;}
.pt05 { padding-top:5px;}
.pt10 { padding-top:10px;}
.pt15 { padding-top:15px;}
.pt20 { padding-top:20px;}
.pt25 { padding-top:25px;}
.pt30 { padding-top:30px;}
.pt40 { padding-top:40px;}
.pt50 { padding-top:50px;}
.pt60 { padding-top:60px;}
.pt70 { padding-top:70px;}
.pb05 { padding-bottom:5px;}
.pb10 { padding-bottom:10px;}
.pb15 { padding-bottom:15px;}
.pb20 { padding-bottom:20px;}
.pb30 { padding-bottom:30px;}
.pb40 { padding-bottom:40px;}
.pl05 { padding-left:5px;}
.pl10 { padding-left:10px;}
.pl15 { padding-left:15px;}
.pl20 { padding-left:20px;}
.pl25 { padding-left:25px;}
.pl30 { padding-left:30px;}
.pl40 { padding-left:40px;}
.pl50 { padding-left:50px;}
.pl60 { padding-left:60px;}
.pl70 { padding-left:70px;}
.pl90 { padding-left:90px;}
.pr05 { padding-right:5px;}
.pr10 { padding-right:10px;}
.pr15 { padding-right:15px;}
.pr20 { padding-right:20px;}
.pr25 { padding-right:25px;}
.pr30 { padding-right:30px;}
.pr40 { padding-right:40px;}
.pr50 { padding-right:50px;}
.pr60 { padding-right:60px;}

.f_left { float:left; }
.f_ringt { float:right; }

.clear {clear:both;}
.clearfix:before, .clearfix:after { content: ""; display: block; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


.pcNone { display: none; }



/* FONT */
@font-face {
font-family: "Nexa-Bold";
src: url("../font/Nexa-Bold.eot"); 
src: url("../font/Nexa-Bold.eot?#iefix") format("embedded-opentype"), 
url("../font/Nexa-Bold.woff") format("woff"), 
url("../font/Nexa-Bold.ttf") format("truetype"),
url("../font/Nexa-Bold.svg#svgssmfont") format("svg");
	}


/* 追加reset */
html,body,div {
	text-align: center;
	margin: 0;
	font-family:"Nexa-Bold",sans-serif;
	}
body { 
	-webkit-text-size-adjust: 100%;
	background-color: #ffffff;
	color: #999999;
	}
div { overflow: hidden; }

ul{ 
	list-style-type: none;
	padding-inline-start: 0;
	}

@media print, screen and (max-width: 1099px) {
::-webkit-scrollbar {
	display: none;
	-webkit-appearance: none;
	}
}

/* 文字関係reset */
body,div,p,li{
	margin: 0 0;
	text-align: left;
	font-family: "Nexa-Bold",FixedSys;
	letter-spacing: 0.4px;
	}
h1,h2,h3,strong,dt,b{
	letter-spacing: 0.07em;
	}
span{
	letter-spacing: 0.7px;
	}
pre{
	font-family: "Nexa-Bold",monospace;
	letter-spacing: 0;
	}
table,input,code{
	font-family: "Nexa-Bold",FixedSys;
	}

a { color: #999999; }
a:link { color: #999999; }
a:visited { color: #999999; }
a:hover { color: #999999; }
a:active { color: #999999; }

.ls-1 { //アポストロフィー対応
	letter-spacing: -0.1em;
	}


/* common
-------------------------------------------------------------- */

#wrapper {
	width: 100%;
	/* min-width: 980px; */
	min-height: 100%;
	position: relative;
	padding-bottom: 100px; /*←footerの高さ*/
    box-sizing: border-box; /*←全て含めてmin-height:100vhに*/
    display: block;
	}

section{
	width: 100%;
	}

.sectionIn {
	width: 100%;
	/* min-width: 980px;*/
	margin: 0 auto;
	overflow: hidden;
	}

article {
	text-align: center;
	margin-top: 50px;
	}

article h1 {
	text-align: center;
	font-size: 20px;
	}
article h1:before{
	display:inline-block;
	width: 1em;
	content: "-";
	}
article h1:after{
	display:inline-block;
	width: 1em;
	content: "-";
	}




/* PC */
@media print, screen and (min-width: 960px) {

#wrapper {
	min-width: 980px;
	}

.sectionIn {
	min-width: 980px;
	}

article {
	margin-top: 70px;
	}

article h1 {
	font-size: 30px;
	}

}



/* loader
-------------------------------------------------------------- */

#loader-bg {
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
	}

#loading_barWrap {
    width: 30vw;
    height: calc(1rem + 40px);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
	}

#loading_bar {
    width: 0;
    height: 10px;
    background: #999999;
    transition-duration: 1s;
	}
#top #loading_bar {
    width: 0;
    height: 10px;
    background: #ffffff;
    transition-duration: 1s;
	}

.text {
    text-align: center;
    color: #999999;
    margin-bottom: 10px;
    font-size: 25px; //フォントサイズ
	}
#top .text {
    color: #ffffff;
	}

.loadingNone {
    animation: loadingAnime 1s forwards;
	}

@keyframes loadingAnime {
    0% {
        opacity: 1;
    	}
    99% {
        opacity: 0;
    	}
    100% {
        opacity: 0;
        display: none;
    	}
	}

/* IE9 - IE11 */
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {

#loading_barWrap {
    height: calc(1rem + 4
    0px);
	}

}

/* PC以外 */
@media print, screen and (max-width: 959px) {

#loading_barWrap {
    width: 70%;
	}

#loading_bar {
    width: 70%;
    height: 10px;
    background: #999999;
    transition-duration: 1s;
	}

}



/* header
-------------------------------------------------------------- */

header {
	width: 100%;
	text-align: center;
	color: #999999;
    box-sizing: border-box;
    over-flow: hidden;
	}

header .headIn{
	padding-top: 30px;
	}

header .h1_bg{
	width: 100%;
	background: url(../img/wave.jpg) no-repeat;
	background-size: 100%;
	}

header .h1_bg h1{
	width: 90%;
	max-width: 90%;
	margin: 0 auto;
	font-size: 8vw;
	text-align: center!important;
	line-height: 2em;
	padding-top: 3px;
	}

header .h1_bg h1 a{
	text-decoration: none;
	}

header h2{
	font-size: 3vw;
	text-align: center;
	line-height: 1.5em;
	}



/* タブレット */
@media screen and (min-width: 415px) {

header .h1_bg h1{
	font-size: 8vw;
	padding-top: 7px;
	}

}


/* スマホ・タブレット向けハンバーガーメニュー */
@media print, screen and (max-width: 1099px) {

#wrapper nav{
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    padding-top: 50px;
    background: #333;
    font-size: 16px;
    box-sizing: border-box;
    z-index: 2;
	}

#wrapper nav ul li{
    display:block;
    padding: 20px 28px;
	}

#wrapper nav li.current a{
	text-decoration: underline;
	}

#wrapper .btn-gnavi {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;
	}

#wrapper .btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #666;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms;
	}
 
#wrapper .btn-gnavi span:nth-child(1) {
    top: 0;
	}
 
#wrapper .btn-gnavi span:nth-child(2) {
    top: 10px;
	}
 
#wrapper .btn-gnavi span:nth-child(3) {
    top: 20px;
	}
 
#wrapper .btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
	}
 
#wrapper .btn-gnavi.open span {
    background: #fff;
	}
 
#wrapper .btn-gnavi.open span {
    width: 24px;
	}

#wrapper .contents section p {
    position: absolute;
    top: 50%;
    width: 30%;
    line-height: 1.4;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 6px #666
	}
 
#wrapper .contents section:nth-child(odd) p {
    left: 10%
	}
 
#wrapper .contents section:nth-child(even) p {
    right: 10%
	}

}


/* PC */
@media print, screen and (min-width: 1100px) {


header .h1_bg{
	width: 100%;
	min-height: 210px;
	background: url(../img/wave_line.jpg);
	background-position: center center;
	}

header .h1_bg h1{
	width: 1100px;
	min-height: 210px;
	margin: 0 auto;
	font-size: 100px;
	text-align: center!important;
	line-height: 2em;
	background: url(../img/wave.jpg) no-repeat;
	background-size: 100%;
	background-position: center center;
	padding-top: 10px;
	}

header h2{
	font-size: 30px;
	}

header nav{
	width: 1100px;
	font-size: 26px;
	margin: 0 auto;
	margin-top: 20px;
	overflow: hidden;
	}

header nav ul{
	overflow: hidden;
	line-height: 2em;
	}

header nav ul li{
	float: left;
	padding: 0 0 0 7px;
	text-align: center;
	}
header nav ul li:before{
	display:inline-block;
	width: 1em;
	content: "-";
	}
header nav ul li:after{
	display:inline-block;
	width: 1em;
	content: "-";
	}

header nav li.current a{
	text-decoration: underline;
	}

header nav ul div{
	width: 500px;
	margin: 0 auto;
	overflow: hidden;
	}


/* IE9 - IE11 */
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
header nav{
	width: 1000px;
	}
}


}/* PC end */


/* h1高さ対応 */
.mac.chrome header .h1_bg h1{
	padding-top: 20px;
	}
.mac.gecko header .h1_bg h1{
	padding-top: 21px;
	}
.mac.safari header .h1_bg h1{
	padding-top: 20px;
	}
.win.gecko header .h1_bg h1{
	padding-top: 15px;
	}
.iphone.safari header .h1_bg h1{
	padding-top: 5px;
	}



/* footer
-------------------------------------------------------------- */

footer{
	position: absolute;/*←絶対位置*/
	bottom: 0;
	width: 100%;
	color: #999999;
    height: 20px; 
	text-align: center;
	padding: 30px 0;
	}

footer p{
	font-size: 14px;
	text-align: center;
	}


/* PC */
@media print, screen and (min-width: 960px) {

footer{
	position: absolute;/*←絶対位置*/
	bottom: 0;
	width: 100%;
	color: #999999;
    height: 20px; 
	text-align: center;
	padding: 30px 0;
	}

footer p{
	font-size: 22px;
	text-align: center;
	}
	
}