@charset "utf-8";

/******************************

 * style
 *
 * 1. import
 * 2. html, body
 * 3. HTMLtag（各タグ）
 * 4. Layout（共通要素）
 * 5. title（共通要素）

******************************/



/*****
 * 1. import
*****/

@import "import/reset.css";
@import "import/util.css";
@import "../font/font.css";

// @import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* Android */
@font-face {
 font-family: 'Noto Sans Japanese';
 font-style: normal;
 font-weight: 400;
 // src: local('NotoSansJP-Regular.otf'),
 //      url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
 //      url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
 //      url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
 font-family: 'Noto Sans Japanese';
 font-style: normal;
 font-weight: 700;
 // src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
 //      url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
 //      url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
}

/*Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;.*/

/*****
 * 2. html, body
*****/

	body {
		background-color: #fff;
	}
  body{
    // word-break : break-all;
    word-wrap : break-word;
    overflow-wrap : break-word;
  }
	.page {
		color: #333333;
		font-size: 14px;
		line-height: 1.5;
		letter-spacing: 0.1em;
		font-family: 'Noto Sans Japanese', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	}

	@media only screen and (max-width:738px) {
		* { -webkit-text-size-adjust: 100%; }
	}


/*****
 * 3. HTMLtag
*****/

/* img */
	img {
		max-width: 100%;
		height: auto;
	}

/* anchor */
	a {
		color: #0000ff;
		text-decoration: none;
		background-color: transparent;
		background-image: none;
		background-repeat: no-repeat;
		background-position: top left;
	}
	a:visited {}
	a:hover {
		color: #ff0000;
		text-decoration: none;
		background-position: bottom right;
	}
	a:active {}


/* cap */
	.cap,
	.caption {
		color: #666666;
		font-size: 10px;
		line-height: 15px;
		background: none;
	}
	.cap {
		padding-top: 5px;
	}


/*****
 * 4. Layout
*****/

/* Header */
	body #gHeader {
		position: fixed;
		z-index: 10;
		width: 100%;
		box-sizing: border-box;
	}
	#gHeader::before {
		opacity: 0;
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 77px;
		background-color: rgba(0,0,0,.3);
		z-index: 18;
		-webkit-transition: .3s;
		transition: .3s;
	}
	#gHeader.header-fix::before {
		opacity: 1;
	}


/* siteTitle */
	.siteTitle {
		position: absolute;
		top: 25px;
		left: 40px;
		z-index: 99;
	}

	@media only screen and (max-width:738px) {
		.siteTitle {
			top: 17px;
			left: 20px;
		}
		.siteTitle img {
			display: block;
			zoom: .5;
		}
		#gHeader::before {
			height: 48px;
		}
	}

/* menu */
	.menuBtn,
	.menuBtn span {
		display: inline-block;
		-webkit-transition: .2s;
		transition: .2s;
		box-sizing: border-box;
	}
	.menuBtn {
		position: absolute;
		top: 25px;
		right: 40px;
		width: 36px;
		height: 24px;
		z-index: 99;
		cursor: pointer;
	}
	.menuBtn span {
		position: absolute;
		left: 50%;
		width: 100%;
		height: 4px;
		margin-bottom: 0;
		background-color: #fff;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		-webkit-transition: .4s cubic-bezier(0.825, 0, 0.100, 1);
		transition: .4s cubic-bezier(0.825, 0, 0.100, 1);
	}
	.menuBtn span:nth-of-type(1) {
		top: 0;
	}
	.menuBtn span:nth-of-type(2) {
		top: 50%;
		margin-top: -2px;
	}
	.menuBtn span:nth-of-type(3) {
		bottom: 0px;
	}

	.menuBtn:hover span {
		width: 40px;
	}


	.menuBtn.menuBtn-active span:nth-of-type(1) {
		-webkit-transform: translateX(-50%) translateY(10px) rotate(-45deg);
		transform: translateX(-50%) translateY(10px) rotate(-45deg);
	}
	.menuBtn.menuBtn-active span:nth-of-type(2) {
		opacity: 0;
	}
	.menuBtn.menuBtn-active span:nth-of-type(3) {
		-webkit-transform: translateX(-50%) translateY(-10px) rotate(45deg);
		transform: translateX(-50%) translateY(-10px) rotate(45deg);
	}


/* gNav */
	#gNav {
		opacity: 0;
		visibility: hidden;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0,0,0,.9);
		z-index: 15;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
		-webkit-transition: 1.0s cubic-bezier(0.825, 0, 0.100, 1);
		transition: 1.0s cubic-bezier(0.825, 0, 0.100, 1);
	}
	#gNav.menu-active {
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	#gNav a {
		display: block;
		color: #fff;
		font-size: 18px;
		font-weight: 200;
	}

	#gNav .menu__ttl {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translateX(-300px) translateY(-50%);
		transform: translateX(-300px) translateY(-50%);
		padding: 20px 35px;
		border: 1px solid #fff;
	}
	#gNav .menu__ttl img {
		display: block;
	}

	#gNav ul {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translateX(-35px) translateY(-50%);
		transform: translateX(-35px) translateY(-50%);
	}
	#gNav ul li {
		margin-bottom: 20px;
	}
	#gNav ul li:last-child {
		margin-bottom: 0;
	}
	#gNav ul li a {
		position: relative;
		padding: 8px 35px;
	}
	#gNav ul li a::before,
	#gNav ul li a::after {
		opacity: 0;
		transition: .4s;
	}
	#gNav ul li a::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: 0;
		height: 2px;
		background-color: #e24081;
	}
	#gNav ul li a::after {
		content: '▶︎';
		position: absolute;
		top: 50%;
		left: 13px;
		color: #e24081;
		font-size: 11px;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	#gNav ul li a:hover {
		color: #e24081;
	}
	#gNav ul li a:hover::before,
	#gNav ul li a:hover::after {
		opacity: 1;
	}
	#gNav ul li a:hover::before {
		width: 100%;
	}


	@media only screen and (max-height:680px) {
		#gNav ul li {
			margin-bottom: 12px;
		}
	}

	/* sp */
	@media only screen and (max-width:738px) {
		.menuBtn {
			top: 16px!important;
			right: 20px!important;
			width: 24px;
			height: 16px;
		}
		.menuBtn span {
			height: 2px;
		}
		.menuBtn span:nth-of-type(2) {
			margin-top: -1px;
		}

		.menuBtn:hover span {
			width: 24px;
		}

		.menuBtn.menuBtn-active span:nth-of-type(1) {
			-webkit-transform: translateX(-50%) translateY(7px) rotate(-45deg);
			transform: translateX(-50%) translateY(7px) rotate(-45deg);
		}
		.menuBtn.menuBtn-active span:nth-of-type(3) {
			-webkit-transform: translateX(-50%) translateY(-7px) rotate(45deg);
			transform: translateX(-50%) translateY(-7px) rotate(45deg);
		}

		#gNav .menu__ttl {
			display: none;
		}
		#gNav ul {
			position: inherit;
			top: inherit;
			left: inherit;
			-webkit-transform: inherit;
			transform: inherit;
			overflow-y: scroll;
			width: 100%;
			height: 100%;
			padding: 80px 20px 40px;
			box-sizing: border-box;
		}
		#gNav ul li {
			margin-bottom: 12px;
			padding-bottom: 12px;
			border-bottom: 1px solid rgba(255,255,255,.5);
		}
		#gNav ul li:last-child {
			margin-bottom: 0;
		}
		#gNav ul li a {
			font-size: 14px;
			padding: 0;
		}
		#gNav ul li a:hover {
			color: #fff;
		}
		#gNav ul li a::before,
		#gNav ul li a::after {
			display: none;
		}
	}


/* pNav */
	body #pNav {
		position: absolute;
		top: 25px;
		right: 110px;
		z-index: 99;
	}
	#pNav ul li {
		float: left;
		margin-left: 15px;
	}
	#pNav ul li:first-child {
		margin-left: 0;
	}
	#pNav ul li a {
		color: #fff;
		font-size: 20px;
		-webkit-transition: .3s;
		transition: .3s;
	}
	#pNav ul li a:hover {
		opacity: .7;
	}

	#pNav ul li.download a {
		position: relative;
		display: block;
		color: #fff;
		font-size: 12px;
		width: 146px;
		height: 26px;
		-webkit-perspective: 300px;
		perspective: 300px;
	}
	#pNav ul li.download a span {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 146px;
		height: 26px;
		text-align: center;
		line-height: 26px;
		background-color: #e24081;
		-webkit-transition: all .3s;
		transition: all .3s;
		box-sizing: border-box;
	}
	#pNav ul li.download a span:nth-child(1) {
		-webkit-transform: rotateX(90deg);
		transform: rotateX(90deg);
		-webkit-transform-origin: 50% 50% -13px;
		transform-origin: 50% 50% -13px;
	}
	#pNav ul li.download a span:nth-child(2) {
		-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg);
		-webkit-transform-origin: 50% 50% -13px;
		transform-origin: 50% 50% -13px;
	}
	#pNav ul li.download a:hover span:nth-child(1) {
		-webkit-transform: rotateX(0deg);
		transform: rotateX(0deg);
		z-index: 1;
	}
	#pNav ul li.download a:hover span:nth-child(2) {
		background-color: #333;
		-webkit-transform: rotateX(-90deg);
		transform: rotateX(-90deg);
		z-index: 0;
	}
	#pNav ul li.download a:hover {
		opacity: 1;
	}

	/* sp */
	@media only screen and (max-width:738px) {
		body #pNav {
			display: none;
		}
	}



/* Container */
	body #container {
		text-align: left;
		background-color: transparent;
	}
	.wrap {
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}


/* gFooter */
	#gFooter {
		position: relative;
		width: 100%;
		padding: 35px 70px 20px;
		color: #fff;
		font-weight: 100;
		background-color: rgba(0,0,0,.9);
		box-sizing: border-box;
		transition: .4s;
	}
	#gFooter a {
		display: block;
		color: #fff;
		font-weight: 100;
	}

	#fNav ul {
		margin-bottom: 10px;
	}
	#fNav ul li {
		float: left;
		margin-top: 10px;
		margin-right: 15px;
	}
	#fNav ul li:nth-child(-n+2) {
		margin-top: 0;
	}
	#fNav ul li:nth-child(3) {
		clear: both;
	}
	#fNav ul li a {
		font-size: 12px;
	}
	#fNav ul li a:hover {
		text-decoration: underline;
	}

	.socialBtn {
		position: absolute;
		top: 35px;
		left: 50%;
		text-align: center;
		letter-spacing: -.40em;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.socialBtn li {
		display: inline-block;
		letter-spacing: normal;
		margin: 0 10px;
	}
	.socialBtn li a {
		-webkit-transition: .4s;
		transition: .4s;
	}
	.socialBtn li a:hover {
		opacity: .7;
	}
	.socialBtn li .icon {
		font-size: 20px;
	}

	.copyright {
		text-align: center;
		font-size: 12px;
		margin: 30px 0 7px;
	}

	/* sp */
	@media only screen and (max-width:738px) {
		#gFooter {
			position: inherit;
			bottom: inherit;
			left: inherit;
			right: inherit;
			font-weight: 300;
			padding: 20px;
			background-color: #000;
		}

		#fNav ul {
			margin-bottom: 20px;
		}
		#fNav ul li {
			float: none;
			margin-left: 0;
			margin-right: 0;
			margin-top: 10px;
		}
		#fNav ul li:nth-child(-n+2) {
			margin-top: 10px;
		}
		#fNav ul li:first-child {
			margin-top: 0;
		}
		#fNav ul li a {
			font-size: 10px;
			font-weight: 300;
			letter-spacing: .05em;
		}

		#fNav p {
			text-align: center;
		}
		#fNav p img {
			zoom: .5;
		}

		.socialBtn {
			position: inherit;
			top: inherit;
			left: inherit;
			-webkit-transform: inherit;
			transform: inherit;
			margin: 30px 0;
		}

		.copyright {
			font-size: 8px;
			margin: 0;
		}
	}


/*****
 * 5. title
*****/