@charset 'utf-8';

@font-face {
    font-family: 'NotoSansJP';
    src: url('fonts/NotoSansJP-Regular.otf') format('opentype');
    font-weight: normal;
  	font-style: normal;
}
@font-face {
    font-family: 'NotoSansJP-Bold';
    src: url('fonts/NotoSansJP-Bold.otf') format('opentype');
    font-weight: normal;
  	font-style: normal;
}
@font-face {
    font-family: 'NotoSansJP-Black';
    src: url('fonts/NotoSansJP-Black.otf') format('opentype');
    font-weight: normal;
  	font-style: normal;
}
@font-face {
    font-family: 'MuseoModerno-Medium';
    src: url('fonts/MuseoModerno-Medium.ttf') format('truetype');
    font-weight: normal;
  	font-style: normal;
}

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,
figure,figcaption {
	margin: 0;
	padding: 0;
}
html { height: 100%; font-size: 62.5%; }
body {
	width: 100%;
	height: 100%;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	font-family: 'NotoSansJP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #000;
}

ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
a:link { text-decoration: none; color: #000; }
a:visited { text-decoration: none; color: #000; }
a:hover { text-decoration: none; }

/* clearfix
------------------------------------------------ */
.clearfix {
	clear: both;
	*zoom: 1;
}
.clearfix:before,.clearfix:after {
	content: ' ';
	display: table;
}
.clearfix:after { clear: both; }

.pc { display: block !important; }
.sp { display: none !important; }

/* container
------------------------------------------------ */
#container {
	position: relative;
	padding-top: 100px;
	display: block;
	overflow: hidden;
}
	#container:before { content: ''; width: 100%; height: 450px; position: absolute; top: 0; left: 0; background: url(../img/share/bg-build.png) repeat-x bottom center; background-size: cover; z-index: -10; }
	#contents { padding: 190px 0 0; }
	.wrap {
		position: relative;
		max-width: 1056px;
		margin: 0 auto;
		padding: 0 15px;
	}

/* header
------------------------------------------------ */
#header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	background: #fff;
	transition: linear .25s;
	border-bottom: 1px solid rgba(102, 102, 102, .5);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 999;
}
	#info {  }
	.info-head { position: relative; width: 100%; height: 100px; display: block; overflow: hidden; }
	.info-head--logo { float: left; width: 190px; margin-top: 17px; }
	
	.info-nav { position: relative; display: block; overflow: hidden; }
	.info-nav--login { float: right; display: flex; flex-wrap: wrap; margin-left: 20px; }
	.info-nav--login li { font-family: 'NotoSansJP-Bold'; font-size: 18px; font-weight: bold; letter-spacing: -.05em; }
	.info-nav--login li a { display: block; padding: .2805em .9588em; transition: linear .25s; color: #fff; background: #ea5550; border: solid #ea5550 1px; -webkit-border-radius: 4px; border-radius: 4px; }
	.info-nav--login li a:hover { color: #ea5550; background: #fff }
	.info-nav--login li:first-child { font-size: 13px; line-height: 1.15; margin-right: 20px; text-align: center; }
	.info-nav--login li:first-child a { background:  #FA9600; border-color:  #FA9600; padding: .346em 1.35em; }
	.info-nav--login li:first-child a:hover { color: #FA9600; background: #fff }
	.info-nav--links { display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden; }
	.info-nav--links li { font-family: 'NotoSansJP-Bold'; font-size: 15px; font-size: 1.5rem; font-weight: bold; letter-spacing: .05em; -webkit-font-smoothing: subpixel-antialiased; }
	.info-nav--links li a { display: block; text-align: center; padding: 9px 1.13em 11px; transition: linear .25s; }
	.info-nav--links li a:hover,
	.info-nav--links li.active a { color: #fff; background: #ea5550; }

	#mobile {  font-weight: bold; position: absolute; top: 50px; left: 0; width: 100%; height: 100vh; z-index: 10; background: #fff; display: none; }
	#mobile:after { content: none; display: block; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); z-index: -1; }
	.mobile--frame { background: #fff; padding: 0 15px 53px; height: -webkit-calc(100vh - 100px); height: calc(100vh - 100px); -webkit-overflow-scrolling: touch; overflow: auto; box-sizing: border-box; }

	.mobile--links { display: block; }
	.mobile--links li { font-family: 'NotoSansJP-Bold'; font-size: 16px; font-size: 1.6rem; display: block; border-top: 1px solid #e2e0e1; }
	.mobile--links li:last-child { border-bottom: 1px solid #e2e0e1; }
	.mobile--links li a { display: block; padding: 24px 15px; background: url(../img/share/ft-arrow.png) no-repeat center right 15px; background-size: 10px; }

	@media screen and (min-width: 769px) {
		.body-gnav_open { top: auto !important; margin-top: auto !important; }
		#mobile { display: none !important; }
		#header .wrap { max-width: 1392px; padding: 0 24px; }

		.info-head { width: inherit; height: initial; float: left; display: flex; align-items: center; }
		.info-head--logo { width: 184.7638px; margin-top: 16px; }
		.info-nav { float: right; height: 100px; display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; justify-content: flex-start; width: calc(100% - 210px); }
	}

	/* scroll effect */
	#header.g-header { transform: translateY(0); transition: all 0.25s cubic-bezier(0.65, 0.05, 0.36, 1); }
/*	.scroll-vd #header.g-header { box-shadow: 0px 0px 8px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.2); }*/
	.scroll-down #header.g-header,
	.scroll-add #header.g-header,
	#header.lazy--scroll { transform: translateY(0); }
	.scroll-bottom #header.g-header,
	.scroll-y-end #header.g-heade,
	#header.lazy--scroll--do { transform: translateY(0); }

	/*.fix_header #header { position: fixed; top: 0; left: 0; box-shadow: none; }*/

	body.noscroll {
	  overflow-y: hidden!important;
	}

	/* YPT02D-1761 Place the Login Button on Smart Phone Version Screen  */
	.info-login {
		display: none;
	}
	@media screen and (max-width: 768px) {
		.info-login li:last-child a:hover {
			color: #ea5550;
			background: #fff;
		}
		.info-login li:last-child a {
			color: #fff;
			background: #ea5550;
			border: solid #ea5550 1px;
			-webkit-border-radius: 2px;
			border-radius: 2px;
		}
		.info-login li { font-family: 'NotoSansJP-Bold'; font-size: 13px; font-size: 1.3rem; }
		.info-login li a {
			display: block;
			padding: 4px 12px;
			transition: linear .25s;
		}
		.info-login{
			float: right;
			display: flex;
			flex-wrap: wrap;
			margin-top: 10px;
			margin-right: 15px;
		}	
	}
	/* ------------------------------------------------ */ 

/* main
------------------------------------------------ */
#main {
	display: block;
	position: relative;
	width: 100%;
}
	.title-01 { font-family: 'NotoSansJP-Black'; font-size: 37px; font-size: 3.7rem; font-weight: normal; line-height: 1.2; letter-spacing: 0.1em; text-align: center; margin-bottom: 75px; }
	
	/* section goals */
	#goals { position: relative; background: #f4f2f5; padding: 78px 0; margin-bottom: -120px; }
	.goals__lists { display: flex; flex-wrap: wrap; justify-content: center; }
	.goals__lists li { background: #fff; width: 342px; border: 2px solid #666464; -webkit-border-radius: 5px; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5); -webkit-box-sizing: border-box; box-sizing: border-box; }
	.goals__lists li a { display: block; align-items: center; padding: 12px 10px 8px; }
	.goals__lists li a:hover { opacity: .7; }
	.goals__lists--pic { margin-bottom: 8px; }
	.goals__lists--pic img { width: 100%; }
	.goals__lists--txt { font-size: 14px; font-size: 1.4rem; font-weight: bold; line-height: 1.64; text-align: center; }

	/* lazy scroll */
	/*.lazy--scroll { position: relative; -webkit-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translate3d(0,0,0) scale(1.0); transform: translate3d(0,0,0) scale(1.0); opacity: 0; }
	.lazy--scroll--do { -webkit-transform: translate3d(0,0,0) scale(1.0); transform: translate3d(0,0,0) scale(1.0); opacity: 1; }*/

	.fade-ease {  }
	.fade-ease--item { -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; transform: scale(0.95,0.95); opacity: 0; transition-timing-function: ease; }
	.fade-ease.animated .fade-ease--item { opacity: 1; transform: scale(1,1); }
	.fade-ease.animated .fade-ease--item-01 { -webkit-transition-delay: 0s; transition-delay: 0s; }
	.fade-ease.animated .fade-ease--item-02 { -webkit-transition-delay: .3s; transition-delay: .3s; }
	.fade-ease.animated .fade-ease--item-03 { -webkit-transition-delay: .6s; transition-delay: .6s; }
	.fade-ease.animated .fade-ease--item-04 { -webkit-transition-delay: .9s; transition-delay: .9s; }
	.fade-ease.animated .fade-ease--item-05 { -webkit-transition-delay: 1.2s; transition-delay: 1.2s; }
	.fade-ease.animated .fade-ease--item-06 { -webkit-transition-delay: 1.5s; transition-delay: 1.5s; }
	.fade-ease.animated .fade-ease--item-07 { -webkit-transition-delay: 1.8s; transition-delay: 1.8s; }

	.fade-ease-up { -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease; transform: scale(0.95,0.95); opacity: 0; transition-timing-function: ease; }
	.fade-ease-up.animated { opacity: 1; transform: scale(1,1); }

    /* scroll action */
	.scroll__alert { position: relative; }
	.scroll__alert--icon { position: absolute; width: 100%; height: 100%; left: 0; top: 0; box-sizing: border-box; border-radius: 3px; transition: opacity .3s; opacity: 0; background: rgba(102, 100, 100, .9); text-align: center; padding: 20px 10px 10px 10px; transition: linear .25s; }
	.scroll__alert--wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 120px; height: 90px; pointer-events: none; z-index: 10; transition: linear .3s; }
	.scroll__alert--text { font-size: 10px; color: #FFF; margin-top: 5px; }
	.scroll__alert--wrap.animated .scroll__alert--icon { opacity: 1; }
	.scroll__alert--icon:before { display: inline-block; width: 40px; height: 40px; color: #FFF; vertical-align: middle; text-align: center; content: ""; background-size: contain; background-position: center center; background-repeat: no-repeat; background-image: url(../img/share/scroll-hand.png); }
	.scroll__alert--icon:after { content: ""; width: 34px; height: 14px; display: block; position: absolute; top: 10px; left: 50%; margin-left: -20px; background-repeat: no-repeat; background-image: url(../img/share/scroll-arrow.png); background-size: 100%; opacity: 0; transition-delay: 2.4s; }
	.scroll__alert--wrap.animated .scroll__alert--icon:after { opacity: 1; }
	.scroll__alert--wrap.animated .scroll__alert--icon:before { animation: scroll-hint-appear 1.2s linear; animation-iteration-count: 2; }

	table.dataTable thead .sorting { background: none !important; }
	table.dataTable .dataTables_empty { color: #666666 !important; }

	@keyframes scroll-hint-appear {
	  	0% {
	    	transform: translateX(40px);
	    	opacity: 0;
	  	}
	  	10% {
	    	opacity: 1;
	  	}
	  	50%,
	  	100% {
	    	transform: translateX(-40px);
	    	opacity: 0;
	  	}
	}

/* footer
------------------------------------------------ */
#footer {
	position: relative;
	width: 100%;
	margin-top: 120px;
}

	#footer .wrap { max-width: 1400px; }
	#ft-head { position: relative; background: #fff; }
	.ft-head--block { display: flex; flex-wrap: wrap; align-items: center; padding: 28px 0; /*border-top: 1px solid #ea5550;*/ }
	.ft-head--block:last-child { border-top: 1px solid #e2e0e1; }
	.ft-head--block dt { width: 275px; }
	.ft-head--block dd { width: calc( 100% - 275px ); }
	.ft-head--logo { margin-top: 5px; }
	.ft-head--logo-one a { display: block; width: 160px; }
	.ft-head--logo-two a { display: block; width: 248px; }
	.ft-head--links { display: flex; flex-wrap: wrap; margin: -20px 0 0 -40px }
	.ft-head--links li { font-size: 15px; font-size: 1.5rem; font-weight: bold; margin: 25px 0 0 40px; }
	.ft-head--links li a { display: block; transition: linear .25s; }
	.ft-head--links li a:hover { color: #ea5550;  }
	.ft-head--address { font-size: 15px; font-size: 1.5rem; font-weight: normal; line-height: 1.6667; letter-spacing: .05em; color: #7a7c80; }
	.ft-head--address a { display: inline-block; color: #7a7c80 !important; }

	#ft-copyright { font-size: 15px; font-size: 1.5rem; letter-spacing: .05em; color: #fff; background: #ea5550; padding: 20px 0 21px; }
	#ft-gotop { display: none; position: fixed; width: 50px; height: 50px; right: 0; bottom: 0; transition: ease .3s; }
	#ft-gotop a { display: block; }
	#ft-gotop.active { bottom: 65px; }
	#ft-contact { font-family: 'NotoSansJP-Bold'; font-size: 2px; font-size: 2rem; line-height: 1.25; font-weight: bold; position: fixed; right: 0; top: 50%; z-index: 10; transform: translate(0, -50%); }
	#ft-contact a { display: block; color: #fff; background: #ea5550; width: 1em; padding: 20px 14px; border: solid #ea5550 1px; transition: linear .25s; transform: translateX(100%); }
	#ft-contact a:hover { background: #fff; color: #ea5550; }
	#ft-contact a.lazy--scroll--do { transform: translateX(0); }

/* Responsive
------------------------------------------------ */
@media screen and (min-width: 768px) and (max-width: 1200px) {
	.info-nav--links li,
	.info-nav--login li { font-size: 1.25vw; }
	.info-nav--login li:first-child { font-size: 1.08vw; }
	.info-head--logo { width: 17vw; }
}
@media screen and (max-width: 1000px) {
	.info-nav--links { justify-content: flex-start; }
}

@media screen and (max-width: 768px) {

	.pc { display: none !important; }
	.sp { display: block !important; }

	#container { padding-top: 50px; padding-bottom: 50px; }
	#container:before { height: 200px; background: url(../img/share/bg-build-sp.png) repeat-x top center; background-size: cover; }
	#contents { padding: 80px 0 0; }
	.title-01 { font-size: 20px; font-size: 2rem; margin-bottom: 60px; }
	
	#header {  }
	#info .wrap { padding: 0; }
	.info-head { height: 50px; }
	.info-head--logo { width: 100px; margin-top: 8px; margin-left: 15px; }
	.info-nav { display: none; }
	.info-nav--links { display: none; }
	.info-menu { float: right; font-size: 11px; font-size: 1.1rem; line-height: 1; position: relative; display: inline-block !important; overflow: hidden; width: 52px; height: 50px; vertical-align: middle; z-index: 10; }
	.info-menu a { background: #7a7a7a; color: #fff; padding: 0 4px; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom-left-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; }
	.info-menu a .Tx { margin-top: 6px; }
	.info-menu a .Ma { display: block; position: relative; width: 25px; height: 14px; border-top: solid #fff 2px; }
	.info-menu a .Ma:before,
	.info-menu a .Ma:after { content: ' '; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; -webkit-transition: all .3s; transition: all .3s; }
	.info-menu a .Ma:before { top: 5.5px; }
	.info-menu a .Ma:after { bottom: 0; right: 0; }
	.info-menu a.on .Ma { height: 16px; margin-top: 0; border-top: none; }
	.info-menu a.on .Ma:before { top: 43%; left: auto; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
	.info-menu a.on .Ma:after { bottom: 43%; left: auto; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

	.scroll-down #header.g-header,
	.scroll-add #header.g-header,
	#header.lazy--scroll { transform: translateY(0); }

	.body-gnav_open { position: fixed; top: 0; left: 0; }
	#goals { padding: 30px 0; margin-bottom: -60px; }
	.goals__lists li { width: 230px; border: 2px solid #666464; -webkit-border-radius: 3px; border-radius: 3px; }
	.goals__lists li a { padding: 10px 10px 6px; }
	.goals__lists--pic { margin-bottom: 6px; }
	.goals__lists--txt { font-size: 10px; font-size: 1rem;s }

	#footer { margin-top: 60px; }
	.ft-head--block { display: block; margin: 0 -15px; padding: 40px 20px; }
	.ft-head--block:last-child { padding-bottom: 20px; }
	.ft-head--block dt { width: 100%; text-align: center; }
	.ft-head--block dd { width: 100%; }
	.ft-head--logo { margin-top: 0; }
	.ft-head--logo-one a { width: 134px; margin: 0 auto 28px; }
	.ft-head--logo-two a { width: 205px; margin: 0 auto 28px; }
	.ft-head--links { display: block; margin: 0 }
	.ft-head--links li { font-family: 'NotoSansJP-Bold'; display: block; font-size: 13px; font-size: 1.3rem; margin: 0; border-top: 1px solid #e2e0e1; }
	.ft-head--links li:last-child { border-bottom: 1px solid #e2e0e1; }
	.ft-head--links li a { display: block; padding: 15px 15px; background: url(../img/share/ft-arrow.png) no-repeat center right 15px; background-size: 6px; }
	.ft-head--address { font-size: 10px; font-size: 1rem; letter-spacing: 0; line-height: 1.6; }

	#ft-copyright { font-size: 10px; font-size: 1rem; text-align: center; padding: 6px 0 5px; }
	#ft-gotop { width: 28px; height: 28px; bottom: 50px; }
	#ft-gotop.active { bottom: 76px; }
	#ft-contact { font-family: 'NotoSansJP-Bold'; font-size: 16px; font-size: 1.6em; line-height: 1.21785; letter-spacing: .1em; width: 100%; top: auto; bottom: 0; text-align: center; transform: none; display: flex; flex-wrap: wrap; overflow: hidden; z-index: 1000; }
	#ft-contact a:first-child { background: #FA9600; letter-spacing: .05em; }
	#ft-contact a { padding: 6px 10px; width: 50%; border: none; transform: inherit; -webkit-box-sizing: border-box; box-sizing: border-box; }
}