@charset "utf-8";
/*************************************************
 *		HTML5 CSS Reset
 **************************************************/
*,::before,::after{box-sizing:border-box;border-style:solid;border-width:0;}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}body{margin:0;}main{display:block;}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0;}h1,h2,h3,h4,h5,h6{font-size:inherit;line-height:inherit;font-weight:inherit;margin:0;}ul,ol{margin:0;padding:0;list-style:none;}dt{font-weight:bold;}dd{margin-left:0;}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit;}pre{font-family:monospace,monospace;font-size:inherit;}address{font-style:inherit;}a{background-color:transparent;text-decoration:none;color:inherit;}abbr[title]{text-decoration:underline;text-decoration:underlinedotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:inherit;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}img,embed,object,iframe{vertical-align:bottom;}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;outline:0;border-radius:0;text-align:inherit;}[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox;}[type="radio"]{-webkit-appearance:radio;appearance:radio;}button,input{overflow:visible;}button,select{text-transform:none;}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer;-webkit-appearance:none;appearance:none;}button[disabled],[type="button"][disabled],[type="reset"][disabled],[type="submit"][disabled]{cursor:default;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1pxdottedButtonText;}select::-ms-expand{display:none;}option{padding:0;}fieldset{margin:0;padding:0;min-width:0;}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}label[for]{cursor:pointer;}details{display:block;}summary{display:list-item;}[contenteditable]{outline:none;}table{border-collapse:collapse;border-spacing:0;}caption{text-align:left;}td,th{vertical-align:top;padding:0;}th{text-align:left;font-weight:bold;}template{display:none;}[hidden]{display:none;}
/**************************************************
 *		Initial Settings
 **************************************************/
html,body{
	height:100%;
}
body{
	font-family:"Meiryo","メイリオ","Helvetica Neue", "Helvetica", "Hiragino Kaku Gothic ProN", "HiraKakuPro-W3", "Arial", "Yu Gothic", sans-serif;
	font-size:12px;
	line-height:1.6;
	color:#000;
	-webkit-text-size-adjust: 100%;/*スマホ文字サイズ調整*/
	-moz-text-size-adjust: 100%;/*スマホ文字サイズ調整*/
	-ms-text-size-adjust: 100%;/*スマホ文字サイズ調整*/
	text-size-adjust: 100%/*スマホ文字サイズ調整*/
	animation:bodyFadeIn 1s linear 1;
}
@keyframes bodyFadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}
.clearfix::before,
.clearfix::after{
	content:"";
	clear:both;
	display:block;
}
.clearfix{
	display: block;
}
body a{
	transition:all 0.5s linear;
}

a:link	{color:#000;text-decoration:none;}
a:visited{color:#000;text-decoration:none;}
a:active {color:#000;text-decoration:none;}
a:hover  {color:#000;text-decoration:none;}

/* flash animation
====================================================*/
.flash:hover{
	animation:flash 1s 0s 1;
}
@keyframes flash{
	0%{opacity:1.0;}
	10%{opacity:0.2;}
	100%{opacity:1.0;}
}
/* underline animation
====================================================*/
.undLine li a,
span.undLine{
	display:inline-block;
	position:relative;
}

.undLine li a::after,
span.undLine::after{
	content:"";
	width:100%;
	height:1px;
	position:absolute;
	bottom:-1px;
	left:0;
	background:#000;
	transition: transform 0.3s;
	transform:scaleX(0);
	transform-origin:right;
}

.undLine li a:hover::after,
span.undLine:hover::after{
	transform: scaleX(1);
	transform-origin:left;
}

.undLine li a.current,
span.undLine.current{
	color:#000;
}

.undLine li a.current::after,
span.undLine.current::after,
.subNav li a.current span::after,
ul#subPostNav li a.current span::after{
	transform: scaleX(1);
	transform-origin:left;
}
/* underline-2 animation
====================================================*/
.undLine-2 li a,
span.undLine-2{
	position:relative;
	overflow:visible;
	display:inline-block;
}
.undLine-2 li a::after,
span.undLine-2::after{
	content:"";
	width:100%;
	height:1px;
	position:absolute;
	bottom:0;
	background:#000;
	display:block;
}
.undLine-2 li a:hover::after,
span.undLine-2:hover::after{
	animation: undlineAni2 0.6s ease-out forwards;
}
@keyframes undlineAni2{
	0%{transform:scaleX(1);transform-origin:right;}
	45%{transform:scaleX(0);transform-origin:right;}
	55%{transform:scaleX(0);transform-origin:left;}
	100%{transform:scaleX(1);transform-origin:left;}
}
/* fadeIn animation
====================================================*/
.fadeIn{
	opacity:0;
	animation-name:fadeIn;
	animation-duration:0.8s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes fadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}
/* slowFadeIn animation
====================================================*/
.slowFadeIn{
	opacity:0;
	animation-name:slowFadeIn;
	animation-duration:5s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes slowFadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}
/* slideRight animation
====================================================*/
.slideRight{
	opacity:0;
	animation-name:slideRight;
	animation-duration:0.8s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes slideRight{
	0%{transform:translateX(-30px);opacity:0;}
	100%{transform:translateX(0px);opacity:1;}
}
/* slideLeft animation
====================================================*/
.slideLeft{
	opacity:0;
	animation-name:slideLeft;
	animation-duration:0.8s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes slideLeft{
	0%{transform:translateX(30px);opacity:0;}
	100%{transform:translateX(0px);opacity:1;}
}
/* slideUp animation
====================================================*/
.slideUp{
	opacity:0;
	animation-name:slideUp;
	animation-duration:0.8s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes slideUp{
	0%{transform:translateY(20px);opacity:0;}
	100%{transform:translateY(0px);opacity:1;}
}

/* slideDown animation
====================================================*/
.slideDown{
	opacity:0;
	animation-name:slideDown;
	animation-duration:0.8s;
	animation-timing-function:ease;
	animation-delay:0s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes slideDown{
	0%{transform:translateY(-20px);opacity:0;}
	100%{transform:translateY(0px);opacity:1;}
}

/* link img zoom-up animation
====================================================*/
.zoomUp{
	transition:all 2s ease;
}
.zoomUp:hover{
	transform:scale(1.2,1.2);
}


/* link background animation
====================================================*/
.bgAni{
	position:relative;
	overflow:hidden;
	display:block;
}
.bgAni > span{
	position:relative;
	z-index:1;
	display:block;
	transition: all .4s;
}
.bgAni:hover  > span{
	color:#fff;
}
.bgAni::before{
	content:"";
	width:100%;
	height:110%;
	position: absolute;
	top:0;
	left:0;
	padding:10px 0 0 4px;
	background:#cc0;
	z-index:0;
	display:block;
	transform-origin:right top;
	transform:scale(0, 1);
	transition: transform .4s;
}
.bgAni:hover::before{
	content:"";
	transform-origin: left top;
	transform:scale(1, 1);
}
/* link background animation-2: p.link用
====================================================*/
.link{
	width: auto!important;
	height: auto;
	position:relative;
	bottom:0;
	right:0;
}
.link span{
		display:block;
}
.link a{
	width:auto;
	height:auto;
	padding:20px 20px 20px 20px;
	font-size:12px;
	background:rgba(255,255,255,0.6);
	display:block;
}
.link a:hover{
	background:rgba(255,255,255,1.0);
}
.link a::after{
	content:"";
	width:30px;
	height:1px;
	position:absolute;
	top:49%;
	left:-20px;
	border-bottom:1px solid #000;
	display:block;
	transition:all .4s ease;
}
.link a:hover::after{
	width:38px;
}
/*animation-2*/
.grow-corners::before,
.grow-corners::after{
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	border-color: #000;
	border-style: solid;
	transition-duration: 0.3s;
}
.grow-corners.bottom-corners::before{
	border-width: 0 0 1px 1px;
	left:15px;
	bottom:15px
}

.grow-corners.bottom-corners::after{
	border-width: 0 1px 1px 0;
	right:15px;
	bottom:15px;
}

.grow-corners.top-corners::before{
	border-width: 1px 0 0 1px;
	left:15px;
	top:15px;
}

.grow-corners.top-corners::after{
	border-width: 1px 1px 0 0;
	right:15px;
	top:15px;
}
p.link a:hover .grow-corners.top-corners::before{
	top: 0px;
	left: 0px;
}
p.link a:hover .grow-corners.top-corners::after{
	top: 0px;
	right: 0px;
}
p.link a:hover .grow-corners.bottom-corners::before{
	bottom: 0px;
	left: 0px;
}
p.link a:hover .grow-corners.bottom-corners::after{
	bottom: 0px;
	right: 0px;
}



/*
p.link{
	width:auto;
	height:auto;
	position:relative;
	border:1px solid #0ab;
	transition:all .4s ease;
}
p.link:hover{
	border:1px solid #fff;
}
p.link::after{
	content:"";
	width:30px;
	height:1px;
	position:absolute;
	top:49%;
	left:-20px;
	border-bottom:1px solid #000;
	display:block;
	transition:all .4s ease;
}
p.link:hover::after{
	width:40px;
	border-bottom:1px solid #fff;
}
p.link a{
	padding:10px 20px 10px 25px;
	font-size:12px;
	background:rgba(255,255,255,0.8);
	overflow:hidden;
}
p.link a::after{
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	bottom:200%;
	right:-80%;
	display:block;
	background:#0ab;
	transform: rotate(-45deg);
	transition:all .4s ease;
}
p.link a:hover::after{
	width:400%;
	height:400%;
	bottom:-200%;
	right:-200%;
	transform: rotate(0deg);

}
*/



/* bgAni-2 */
/*
.bgAni-2{
	position:relative;
	overflow:hidden;
	display:block;
}
.bgAni-2 > span{
	position:relative;
	z-index:1;
	display:block;
	transition: all .4s;
}
.bgAni-2:hover  > span{
	color:#fff;
}
.bgAni-2::before{
	content:"";
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	padding:10px 0 0 4px;
	background:#0ab;
	z-index:0;
	display:block;
	transform-origin:right top;
	transform:scale(0, 1);
	transition: transform .8s;
}
.bgAni-2:hover::before{
	content:"";
	transform-origin: left top;
	transform:scale(1, 1);
}
*/
/* delay animation
====================================================*/
.delay-1{animation-delay:0.1s;}
.delay-2{animation-delay:0.2s;}
.delay-3{animation-delay:0.3s;}
.delay-4{animation-delay:0.4s;}
.delay-5{animation-delay:0.5s;}
.delay-6{animation-delay:0.6s;}
.delay-7{animation-delay:0.7s;}
.delay-8{animation-delay:0.8s;}
.delay-9{animation-delay:0.9s;}
.delay-10{animation-delay:1.0s;}
.delay-11{animation-delay:1.1s;}
.delay-12{animation-delay:1.2s;}
.delay-13{animation-delay:1.3s;}
.delay-14{animation-delay:1.4s;}
.delay-15{animation-delay:1.5s;}
.delay-16{animation-delay:1.6s;}
.delay-17{animation-delay:1.7s;}
.delay-18{animation-delay:1.8s;}
.delay-19{animation-delay:1.9s;}
.delay-20{animation-delay:2.0s;}
.delay-21{animation-delay:2.1s;}
.delay-22{animation-delay:2.2s;}
.delay-23{animation-delay:2.3s;}
.delay-24{animation-delay:2.4s;}
.delay-25{animation-delay:2.5s;}
.delay-26{animation-delay:2.6s;}
.delay-27{animation-delay:2.7s;}
.delay-28{animation-delay:2.8s;}
.delay-29{animation-delay:2.9s;}
.delay-30{animation-delay:3.0s;}
.delay-40{animation-delay:4.0s;}
.delay-50{animation-delay:5.0s;}
.delay-60{animation-delay:6.0s;}
.delay-100{animation-delay:10.0s;}

/* scroll down animation - commion.jsと連携（.view付与）
====================================================*/
/*scrollFadeIn*/
.scrollFadeIn{
	opacity:0;
}
.scrollFadeIn.view{
	opacity:0;
	animation-name:scrollFadeIn;
	animation-duration:1.5s;
	animation-timing-function:ease;
	animation-delay:0;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes scrollFadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}
/*scrollSlideUp*/
.scrollSlideUp{
	opacity:0;
}
.scrollSlideUp.view{
	opacity:0;
	animation-name:scrollSlideUp;
	animation-duration:1.5s;
	animation-timing-function:ease;
	animation-delay:0;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes scrollSlideUp{
	0%{transform:translateY(10px);opacity:0;}
	100%{transform:translateY(0px);opacity:1;}
}
/*scrollSlideRight*/
.scrollSlideRight{
	opacity:0;
}
.scrollSlideRight.view{
	opacity:0;
	animation-name:scrollSlideRight;
	animation-duration:1.5s;
	animation-timing-function:ease;
	animation-delay:0;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes scrollSlideRight{
	0%{transform:translateX(-10px);opacity:0;}
	100%{transform:translateX(0px);opacity:1;}
}
/*scrollSlideLeft*/
.scrollSlideLeft{
	opacity:0;
}
.scrollSlideLeft.view{
	opacity:0;
	animation-name:scrollSlideLeft;
	animation-duration:1.5s;
	animation-timing-function:ease;
	animation-delay:0;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes scrollSlideLeft{
	0%{transform:translateX(10px);opacity:0;}
	100%{transform:translateX(0px);opacity:1;}
}
/* scroll marker animation
====================================================*/
.marker{
	padding:0;
	background:linear-gradient(transparent 60%, rgba(204, 204, 0, 0.7) 0%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
}
.marker.draw{
	animation-name:drawMarker;
	animation-duration:1s;
	animation-timing-function:ease;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
	animation-play-state:running;
}
@keyframes drawMarker{
	0%{background-size: 0% 100%;}
	100%{background-size: 100% 100%;}
}
/* glFont
====================================================*/
.font-E{
	font-family: "Jaro", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
.font-E1{
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 100;/*100-900*/
	font-style: normal;
}
.font-E2{
	font-family: "Anton", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.font-J{
	letter-spacing:5px;
}
/* font other settings
====================================================*/
.orange{color:#ff3300;}
.green{color:#00cc33;}
.blue{color:#0033ff;}
.bold{font-weight:bold;}
.vertical{writing-mode:vertical-rl;}
/* decoration
====================================================*/
/*hr*/
hr.cross{
	width:100%;
	height:auto;
	margin:80px auto;
	position:relative;
	border:none;
	display:block;
}
hr.cross::before{
	content:"";
	width:100px;
	height:1px;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-50px;
	background:#000;
	display:block;
}
hr.cross::after{
	content:"";
	width:1px;
	height:100px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-50px;
	margin-left:0;
	background:#000;
	display:block;
}
hr.white{
	background:#fff;
}
hr.blue{
	background:#0ab;
}
/*lineHr*/
.lineHr{
	width:100%;
	position:relative;
	display:block;
}
.lineHr::before{
	content:"";
	width:100%;
	height:1px;
	position:absolute;
	top:50%;
	left:0;
	background:#000;
}
.lineHr > span{
	padding:0 10px;
	background:#fff;
	position:relative;	
}
.lineHrWhite::before{background:#fff;}
.lineHrBlue::before{background:#0ab;}
/* lineSq */
.lineSqL{
	content:"";
	width:98%;
	height:320px;
	position:absolute;
	top:50%;
	left:2%;
	margin-top:-160px;
	border-color: #000;
	border-style: solid;
	border-width: 1px 1px 1px 0;
	z-index:0;
}
.lineSqR{
	content:"";
	width:98%;
	height:320px;
	position:absolute;
	top:50%;
	right:2%;
	margin-top:-160px;
	border-color: #000;
	border-style: solid;
	border-width: 1px 0 1px 1px;
	z-index:0;
}
.lineSqRWhite,
.lineSqLWhite{background:#fff;}
.lineSqRBlue,
.lineSqLBlue{background:#0ab;}


/*brakt*/
.brkt-reg::before,
.brkt-reg::after,
.brkt-rev::before,
.brkt-rev::after{
	content:"";
	position: absolute;
	width: 50px;
	height: 50px;
	border-color: #000;
	border-style: solid;
	display:block;
	z-index:1;/*重なり対応*/
}
.brkt-reg::before{
	border-width: 1px 0 0 1px;
	top: 25px;
	left: 25px;
}
.brkt-reg::after{
	border-width: 0 1px 1px 0;
	bottom: 25px;
	right: 25px;
}
.brkt-rev::before{
	border-width: 1px 1px 0 0;
	top: 25px;
	right: 25px;
}
.brkt-rev::after{
	border-width: 0 0 1px 1px;
	bottom: 25px;
	left: 25px;
}


/*cross*/
.cross{
	width:0;
	height:0;
	position:absolute;
	top:50%;
	left:50%;
	display:block;
}
.cross-50::before{
	content:"";
	width:50px;
	height:1px;
	position:absolute;
	top:0;
	left:-25px;
	background:#000;
	display:block;
}
.cross-50::after{
	content:"";
	width:1px;
	height:50px;
	position:absolute;
	top:-25px;
	left:0;
	background:#000;
	display:block;
}
.cross-100::before{
	content:"";
	width:100px;
	height:1px;
	position:absolute;
	top:0;
	left:-50px;
	background:#000;
	display:block;
}
.cross-100::after{
	content:"";
	width:1px;
	height:100px;
	position:absolute;
	top:-50px;
	left:0;
	background:#000;
	display:block;
}
.cross-rect::before{
	content:"";
	width:100px;
	height:1px;
	position:absolute;
	top:0;
	left:-10px;
	background:#000;
	display:block;
}
.cross-rect::after{
	content:"";
	width:1px;
	height:50px;
	position:absolute;
	top:-10px;
	left:0;
	background:#000;
	display:block;
}
.cross-post{
	transform: rotate(180deg);
}
/*doubleSq*/
.doubleSq{
	padding:0 0 0 25px;
	position:relative;
}
.doubleSq::before{
	content:"";
	width:30px;
	height:30px;
	position:absolute;
	top:-5px;
	left:-10px;
	background:rgba(0,204,204,0.4);
	display:block;
}
.doubleSq::after{
	content:"";
	width:30px;
	height:30px;
	position:absolute;
	top:5px;
	left:5px;
	background:rgba(0,204,204,0.2);
	display:block;
}

.w800{max-width:800px;margin:0 auto 50px auto;}
.w600{max-width:600px;margin:0 auto 50px auto;}
.w400{max-width:400px;margin:0 auto 50px auto;}