@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700');

@font-face {
	font-family: MyYuGothic;
	src: local(Yu Gothic Medium);
	font-weight: 600;
}

body {
	color: #4b4b4b;
}
.wrapper {
	text-align: center;
}

@media screen and (min-width: 768px) {
	body {
		font-family: MyYuGothic, "游ゴシック Medium", "Yu Gothic Medium", "YuGothic", "Yu Gothic", "游ゴシック", "游ゴシック体", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	}
	html.open-menu,body.open-menu {
		overflow: hidden;
	}
	.open-menu .wrapper {
		overflow-y: scroll;
	}
}

@media screen and (max-width: 767px) {
	body {
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	}
	html.open-menu,body.open-menu {
		overflow: hidden;
	}
	img {
		max-width: 100%;
	}
}


/* header
---------------------------------------- */
.header {
	position: fixed;
	z-index: 9;
	left: 0;
	top: 0;
	width: 100%;
}

.header .logo-header {
	position: absolute;
	left: 0;
	top: 0;
}

.header a.icon-menu {
	position: absolute;
	z-index: 9;
	right: 0;
	top: 0;
	display: block;
}
.header a.icon-menu > span {
	display: block;
	-webkit-transition-duration: 0.65s;
	        transition-duration: 0.65s;
}
.header a.icon-menu > span > span {
	display: block;
	background-color: #000;
	-webkit-transition-duration: 0.65s;
	        transition-duration: 0.65s;
}
.header a.icon-menu.color-w > span > span {
	background-color: #fff !important;
}
.open-menu .header a.icon-menu > span > span {
	background-color: #fff;
}
.open-menu .header a.icon-menu > span:nth-child(1) {
	-webkit-transition-delay: 75ms;
	        transition-delay: 75ms;
}
.open-menu .header a.icon-menu > span:nth-child(2) {
	-webkit-transition-delay: 0s;
	        transition-delay: 0s;
}
.open-menu .header a.icon-menu > span:nth-child(3) {
	-webkit-transition-delay: 150ms;
	        transition-delay: 150ms;
}
.header a.icon-menu > span:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {
	.open-menu .header {
		height: 100vh;
		overflow-y: scroll;
	}

	.header .logo-header {
		left: 40px;
		top: 40px;
	}
	.header .logo-header img {
		width: 53px;
	}

	.header a.icon-menu {
		right: 20px;
		top: 40px;
	}
	.header a.icon-menu > span {
		margin-bottom: 9px;
	}
	.header a.icon-menu > span > span {
		width: 35px;
		height: 2px;
	}
	.open-menu .header a.icon-menu > span:nth-child(1) {
		-webkit-transform: translateY(11px) rotate(135deg);
		        transform: translateY(11px) rotate(135deg);
	}
	.open-menu .header a.icon-menu > span:nth-child(2) {
		-webkit-transform: translateX(-18px) scaleX(0) !important;
		        transform: translateX(-18px) scaleX(0) !important;
	}
	.open-menu .header a.icon-menu > span:nth-child(3) {
		-webkit-transform: translateY(-11px) rotate(-135deg);
		        transform: translateY(-11px) rotate(-135deg);
	}

	.header a.icon-menu:hover > span > span {
		-webkit-animation-name: icon-menu-hover;
		        animation-name: icon-menu-hover;
		-webkit-animation-duration: 0.5s;
		        animation-duration: 0.5s;
	}
	.header a.icon-menu:hover > span:nth-child(2) > span {
		-webkit-animation-delay: 100ms;
		        animation-delay: 100ms;
	}
	.header a.icon-menu:hover > span:nth-child(3) > span {
		-webkit-animation-delay: 200ms;
		        animation-delay: 200ms;
	}

	@-webkit-keyframes icon-menu-hover {
		0%		{ -webkit-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); }
		49%	{ -webkit-transform: translateX(17.5px) scaleX(0); transform: translateX(17.5px) scaleX(0); }
		50%	{ -webkit-transform: translateX(-17.5px) scaleX(0); transform: translateX(-17.5px) scaleX(0); }
		100%	{ -webkit-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); }
	}

	@keyframes icon-menu-hover {
		0%		{ -webkit-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); }
		49%	{ -webkit-transform: translateX(17.5px) scaleX(0); transform: translateX(17.5px) scaleX(0); }
		50%	{ -webkit-transform: translateX(-17.5px) scaleX(0); transform: translateX(-17.5px) scaleX(0); }
		100%	{ -webkit-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); }
	}
}

@media screen and (max-width: 767px) {
	.header .logo-header {
		left: 20px;
		top: 20px;
	}
	.header .logo-header img {
		width: 36px;
	}

	.header a.icon-menu {
		right: 15px;
		top: 25px;
	}
	.header a.icon-menu > span {
		margin-bottom: 8px;
	}
	.header a.icon-menu > span > span {
		width: 30px;
		height: 2px;
	}
	.open-menu .header a.icon-menu > span:nth-child(1) {
		-webkit-transform: translateY(10px) rotate(135deg);
		        transform: translateY(10px) rotate(135deg);
	}
	.open-menu .header a.icon-menu > span:nth-child(2) {
		-webkit-transform: translateX(-15px) scaleX(0);
		        transform: translateX(-15px) scaleX(0);
	}
	.open-menu .header a.icon-menu > span:nth-child(3) {
		-webkit-transform: translateY(-10px) rotate(-135deg);
		        transform: translateY(-10px) rotate(-135deg);
	}
}


/* gmenu
---------------------------------------- */
.header .gmenu {
	position: absolute;
	z-index: 8;
	left: 0;
	top: 0;
	width: 100%;
	overflow: hidden;
	background-color: rgba(0,0,0,0);
	visibility: hidden;
	-webkit-transition-duration: 0.65s;
	        transition-duration: 0.65s;
	-webkit-transition-property: background-color, visibility;
	transition-property: background-color, visibility;
}
.open-menu .header .gmenu {
	background-color: rgba(0,0,0,0.9);
	visibility: visible;
}

.header .gmenu .inner-gmenu {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 100%;
	height: 100vh;
}

.header .gmenu .logo {
	opacity: 0;
	/*transform: translateY(40px);*/
	-webkit-transition-duration: 0.65s;
	        transition-duration: 0.65s;
}
.open-menu .header .gmenu .logo {
	opacity: 1.0;
	/*transform: translateY(0);*/
}

.header .gmenu nav ul.menu {
}
.header .gmenu nav ul.menu > li {
	opacity: 0;
	-webkit-transform: translateY(40px);
	        transform: translateY(40px);
	-webkit-transition-duration: 0.65s;
	        transition-duration: 0.65s;
}
.open-menu .header .gmenu nav ul.menu > li:nth-child(1) { -webkit-transition-delay: 75ms; transition-delay: 75ms; }
.open-menu .header .gmenu nav ul.menu > li:nth-child(2) { -webkit-transition-delay: 150ms; transition-delay: 150ms; }
.open-menu .header .gmenu nav ul.menu > li:nth-child(3) { -webkit-transition-delay: 225ms; transition-delay: 225ms; }
.open-menu .header .gmenu nav ul.menu > li:nth-child(4) { -webkit-transition-delay: 300ms; transition-delay: 300ms; }
.open-menu .header .gmenu nav ul.menu > li:nth-child(5) { -webkit-transition-delay: 375ms; transition-delay: 375ms; }
.open-menu .header .gmenu nav ul.menu > li:nth-child(6) { -webkit-transition-delay: 450ms; transition-delay: 450ms; }
.open-menu .header .gmenu nav ul.menu > li:nth-child(7) { -webkit-transition-delay: 525ms; transition-delay: 525ms; }
.open-menu .header .gmenu nav ul.menu > li {
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
}

.header .gmenu nav ul.menu > li > a {
	display: inline-block;
	position: relative;
	font-weight: 700;
	font-family: 'Nunito Sans', sans-serif;
	color: #e5f4fc;
	line-height: 2.35em;
	letter-spacing: 0.5em;
	text-indent: 0.65em;
	text-decoration: none;
}

.blogBtn {
	display: block;
	width: 400px;
	margin-top: 25px;
	padding: 14px 10px 17px;
	border: 1px solid #e5f4fc;
	color: #e5f4fc;
	text-decoration: none;
	opacity: 0;
	-webkit-transform: translateY(40px);
	        transform: translateY(40px);
	-webkit-transition-duration: 0.65s;
	        transition-duration: 0.65s;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.open-menu .header .blogBtn {
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition-delay: 600ms;
	        transition-delay: 600ms;
}
.blogBtn span {
	display: inline-block;
}
.blogBtn .txt {
    font-size: 12px;
    letter-spacing: 0.26em;
	line-height: 1.333;
	border-right: 1px dotted #e5f4fc;
	padding-right: 10px;
	margin-right: 15px;
	text-align: right;
}
.blogBtn .img {
	position: relative;
    top: 5px;
}
.header .gmenu nav ul.sns {
	display: inline-block;
	opacity: 0;
	-webkit-transform: translateY(40px);
	        transform: translateY(40px);
	-webkit-transition-duration: 0.65s;
	        transition-duration: 0.65s;
}
.open-menu .header .gmenu nav ul.sns {
	opacity: 1;
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	-webkit-transition-delay: 675ms;
	        transition-delay: 675ms;
}
.header .gmenu nav ul.sns > li {
	float: left;
}
.header .gmenu nav ul.sns > li > a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	height: 22px;
}
.header .gmenu nav ul.sns:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}

@media screen and (min-width: 768px) {
	.header .gmenu {
		height: 100vh;
	}
	.header .gmenu .inner-gmenu {
	}
	.header .gmenu nav {
		margin-top: 40px;
	}
	.header .gmenu nav ul.menu > li > a {
		font-size: 22px;
	}
	.header .gmenu nav ul.menu > li > a > span {
		position: absolute;
		left: 5px;
		top: 24px;
		display: inline-block;
		width: 0;
		height: 1px;
		background-color: #e5f4fc;
		-webkit-transition-duration: 0.35s;
		        transition-duration: 0.35s;
	}
	.header .gmenu nav ul.menu > li > a:hover > span {
		width: 100%;
	}
	.blogBtn .txt {
		text-align: right;
		border-right: 1px dotted #e5f4fc;
		padding-right: 10px;
		margin-right: 15px;
	}
	.blogBtn:hover {
		background-color: rgba(229,244,252,.1);
	}

	.header .gmenu nav ul.sns {
		margin-top: 40px;
	}
	.header .gmenu nav ul.sns > li {
		margin: 0 15px;
	}
}

@media screen and (max-width: 767px) {
	.header .gmenu {
		height: calc(100vh + 80px);
	}
	.header .gmenu .logo img {
		width: 32px;
	}
	.header .gmenu .inner-gmenu {
	}
	.header .gmenu nav {
		margin-top: 20px;
	}
	.header .gmenu nav ul.menu > li > a {
		font-size: 1.3rem;
	}
	.blogBtn {
		width: 90%;
		max-width: 300px;
		margin: 25px auto 0;
		padding: 13px 5px 12px;
		letter-spacing: 0.35em;
	}
	.blogBtn .txt {
		font-size: 10px;
		letter-spacing: 0.15em;
		padding-right: 6px;
		margin-right: 10px;
		line-height: 1.4;
	}
	.blogBtn .img {
		width: 60%;
		top: 1px;
	}
	.header .gmenu nav ul.sns {
		margin-top: 20px;
	}
	.header .gmenu nav ul.sns > li {
		margin: 0 12px;
	}
	.header .gmenu nav ul.sns > li:nth-child(1) img {
		width: 16px;
	}
	.header .gmenu nav ul.sns > li:nth-child(2) img {
		width: 16px;
	}
	.header .gmenu nav ul.sns > li:nth-child(3) img {
		width: 20px;
	}
}



/* footer
---------------------------------------- */
.footer {
	position: relative;
	z-index: 1;
	background-color: #f1f5f5;
}
.footer .inner-footer {
}

.footer ul.menu {
}
.footer ul.menu > li {
	float: left;
}
.footer ul.menu > li  > a {
	display: inline-block;
	position: relative;
	font-weight: 700;
	font-family: 'Nunito Sans', sans-serif;
	text-decoration: none;
	letter-spacing: 0.25em;
}
.footer ul.menu:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}

.footer .block {
}
.footer .block ul.banners {
}
.footer .block ul.banners > li {
}
.footer .block ul.banners > li > a {
	display: block;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	text-decoration: none;
	letter-spacing: 0.15em;
}
.footer .block .isms {
	display: none;
}
.footer .block:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}

.footer .copyright {
	font-weight: 700;
	font-family: 'Nunito Sans', sans-serif;
	letter-spacing: 0.15em;
}

.footer .inner-footer:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
}

@media screen and (min-width: 768px) {
	.footer {
		color: #000;
	}
	.footer .inner-footer {
		display: inline-block;
		width: 688px;
		padding: 55px 0 45px;
	}

	.footer ul.menu {
		float: left;
		width: 400px;
	}
    .footer ul.menu:nth-of-type(1) {
        margin-right: 100px;
    }
    .footer ul.link-policy {
        display: block;
		float: none;
        margin-top:74px;
	}
	.footer ul.menu > li {
		margin-right: 26px;
	}
	.footer ul.menu > li  > a {
		font-size: 15px;
		line-height: 1.85em;
	}
    .footer ul.link-policy > li  > a {
		font-size: 12px;
	}
	.footer ul.menu > li > a > span {
		position: absolute;
		left: -2px;
		top: 12px;
		display: inline-block;
		width: 0;
		height: 1px;
		background-color: #000;
		-webkit-transition-duration: 0.35s;
		        transition-duration: 0.35s;
	}
    .footer ul.link-policy > li > a > span {
		top: 11px;
	}
	.footer ul.menu > li > a:hover > span {
		width: 100%;
	}

	.footer .block {
		float: right;
	}
	.footer .block ul.banners {
		float: left;
	}
	.footer .block ul.banners > li {
		margin-top: 2px;
		margin-bottom: 12px;
	}
	.footer .block ul.banners > li:last-child {
		margin-bottom: 0;
	}
	.footer .block ul.banners > li > a {
		width: 180px;
		height: 35px;
		border-color: #000;
		font-size: 11px;
		line-height: 33px;
		-webkit-transition-duration: 0.2s;
		        transition-duration: 0.2s;
	}
	.footer .block ul.banners > li > a:hover {
		background-color: #000;
		color: #fff;
	}
	.footer .block .isms {
		float: left;
		margin-left: 30px;
	}

	.footer .copyright {
		float: left;
		margin-top: -10px;
		font-size: 10px;
	}
}

@media screen and (max-width: 767px) {
    .inner-footer{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column;
    }
    .inner-footer .menu:nth-of-type(1){
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
    }
    .inner-footer .block{
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
    }
    .inner-footer .link-policy{
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
    }
    .inner-footer .copyright{
        -webkit-box-ordinal-group: 5;
            -ms-flex-order: 4;
                order: 4;
    }

	.footer .inner-footer {
		padding: 40px 0 20px;
	}

	.footer ul.menu {
		width: 220px;
		margin: 0 auto;
	}
	.footer ul.menu > li {
		width: 50%;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		padding-left: 15px;
		text-align: left;
	}
    .footer ul.link-policy {
        margin-top:4px
    }
    .footer ul.link-policy > li {
        width: 100%;
    }
	.footer ul.menu > li  > a {
		font-size: 1.3rem;
		line-height: 2.65em;
	}
    .footer ul.link-policy > li  > a {
		font-size: 1.1rem;
		line-height: 2.65em;
	}

	.footer .block {
		margin-top: 25px;
	}
	.footer .block ul.banners {
		width: 220px;
		margin: 0 auto;
	}
	.footer .block ul.banners > li {
		margin-bottom: 15px;
	}
	.footer .block ul.banners > li:last-child {
		margin-bottom: 0;
	}
	.footer .block ul.banners > li > a {
		width: 220px;
		height: 40px;
		border-color: #4b4b4b;
		font-size: 1.1rem;
		line-height: 38px;
	}
	.footer .block .isms {
		margin-top: 25px;
	}
	.footer .block .isms img {
		width: 49px;
	}

	.footer .copyright {
		margin-top: 25px;
		font-size: 0.9rem;
	}
}

@media screen and (min-width: 1080px) {
	.footer .inner-footer {
		width: auto;
		max-width: 1020px;
		margin: 0 40px;
	}
	.footer ul.menu {
		width: auto;
	}
	.footer .copyright {
	}
	.footer ul.menu:nth-of-type(1) {
		margin-right: 140px;
	}
	.footer ul.link-policy {
		display: block;
		float: none;
		margin-top: 85px;
	}
}


/* CONTACT
---------------------------------------- */
section.contact {
	color: #fff;
	background-color: #000;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

section.contact h2 {
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 700;
	text-indent: 0.65em;
}

section.contact .sec-btn a {
	position: relative;
	display: block;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-decoration: none;
}

@media screen and (min-width: 768px) {
	section.contact {
		padding: 120px 0 120px 0;
	}

	section.contact h2 {
		font-size: 40px;
		letter-spacing: 0.6em;
	}
	section.contact .description {
		margin-top: 60px;
		font-size: 14px;
		line-height: 2.35em;
		letter-spacing: 0.035em;
	}
	section.contact .sec-btn {
		margin-top: 60px;
	}
	section.contact .sec-btn a {
		width: 390px;
		height: 82px;
		border-color: #fff;
		border-style: solid;
		border-width: 2px;
		font-size: 15px;
		line-height: 78px;
	}
	section.contact .sec-btn a .on {
		position: absolute;
		z-index: 1;
		left: -3px;
		top: -3px;
		display: block;
		width: 392px;
		height: 86px;
		overflow: hidden;
	}
}

@media screen and (max-width: 767px) {
	section.contact {
		padding: 90px 0 90px 0;
	}

	section.contact h2 {
		font-size: 2.7rem;
		letter-spacing: 0.55em;
	}
	section.contact .description {
		margin-top: 38px;
		font-size: 1.3rem;
		line-height: 2.35em;
	}
	section.contact .sec-btn {
		margin-top: 38px;
	}
	section.contact .sec-btn a {
		width: 277px;
		height: 62px;
		font-size: 1.1rem;
		line-height: 58px;
		background-image: url(../img/btn_icon-b_sp.png);
		background-size: 277px auto;
		background-repeat: no-repeat;
	}
}


/* navigate
---------------------------------------- */
.navigate {
	position: fixed;
	z-index: 2;
	-webkit-transform: rotate(90deg);
	        transform: rotate(90deg);
	-webkit-transform-origin: right bottom;
	        transform-origin: right bottom;
}
.open-menu .navigate {
	visibility: hidden !important;
	opacity: 0 !important;
	display: none;
}
.navigate .inner-navigate {
	-webkit-transition-duration: 0.65s;
	        transition-duration: 0.65s;
}
.navigate .txt-scroll,
.navigate .txt-pagetop {
	display: inline-block;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-indent: 0.35em;
	color: #000;
	-webkit-transition-duration: 0.65s;
	        transition-duration: 0.65s;
}
.navigate.color-w .txt-scroll,
.navigate.color-w .txt-pagetop {
	color: #fff;
}

.navigate .txt-scroll {
	opacity: 1.0;
	/*-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
}
.navigate.on .txt-scroll {
	opacity: 0;
}
.navigate .txt-pagetop {
	opacity: 0;
	cursor: pointer;
}
.navigate.on .txt-pagetop {
	opacity: 1.0;
	/*-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
}

.navigate .line {
	display: inline-block;
	margin: 0 10px;
	background-color: #000;
	vertical-align: middle;
	-webkit-transition-duration: 0.65s;
	        transition-duration: 0.65s;
}
.navigate.color-w .line {
	background-color: #fff;
}

@media screen and (min-width: 768px) {
	.navigate {
		right: 25px;
		bottom: -95px;
	}
	.navigate.on .inner-navigate {
		-webkit-transform: translateX(-105px);
		        transform: translateX(-105px);
	}

	.navigate .txt-scroll,
	.navigate .txt-pagetop {
		font-size: 12px;
	}
	.navigate .line {
		width: 100px;
		height: 1px;
		-webkit-transform: translateY(-2px);
		        transform: translateY(-2px);
	}
}

@media screen and (max-width: 767px) {
	.navigate {
		right: 20px;
		bottom: -80px;
	}
	.navigate.on .inner-navigate {
		-webkit-transform: translateX(-90px);
		        transform: translateX(-90px);
	}

	.navigate .txt-scroll,
	.navigate .txt-pagetop {
		font-size: 1rem;
	}
	.navigate .line {
		width: 75px;
		height: 1px;
		-webkit-transform: translateY(-1px);
		        transform: translateY(-1px);
	}
}

.movie .player {
	position: relative;
}
.movie .player .player-thumbnail {
	position: relative;
	z-index: 1;
	cursor: pointer;
}

#YouTubePlayer {
	position: absolute;
	z-index: 0;
	left: 0;
	top: 0;
	visibility: hidden;
}
#YouTubePlayer.on {
	z-index: 9;
	visibility: visible;
}
@media screen and (min-width: 768px) {
	#YouTubePlayer {
		width: 720px;
		height: 405px;
	}
}
@media screen and (max-width: 767px) {
	#YouTubePlayer {
		width: 320px;
		height: 180px;
	}
}