@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Oswald&display=swap');

@font-face {
	font-family: 'boldfont';
	font-style: normal;
	font-weight: normal;
	src:url(../fonts/boldfont.eot),
			url(../fonts/boldfont.eot?#iefix) format('embedded-opentype'),
			url(../fonts/boldfont.woff) format('woff'),
			url(../fonts/boldfont.ttf) format('opentype');
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 2;
	color: #17475C;
	letter-spacing: 0.08em;
	word-break: break-all;
	font-weight: 400;
	font-feature-settings: "palt" 1;
}

.boldfont{font-family: 'boldfont', 'Noto Sans JP', sans-serif;}

a{color: #17475C;text-decoration: none;}
a:hover{color: #17475C;text-decoration: underline;}

#logo {
	position: fixed;
	top: 35px;
	left: 50%;
	margin: 0;
	line-height: 1;
	width: 178px;
	margin-left: -89px;
	display: block;
	z-index: 99999;
	min-width: auto;
}
#logo a{background: url(../img/create/head-logo.svg) no-repeat left top;background-size: contain;}
#logo a img{width: 100%;display: block;opacity: 0;}
#header.header #logo img{opacity: 1;}

#cr-header-nav{
	position: fixed;
	top: 27px;
	right: 2.777777777778%;
}
#cr-header-nav a{display: block;color: #fff;text-decoration: none;font-weight: 500;position: relative;padding: 10px 0;line-height: 1;}
#cr-header-nav a::after{content: '';display: block;width: 0;height: 2px;position: absolute;bottom: 0px;left: 0;-webkit-transition: 0.25s;transition: 0.25s;background-color: #fff;}
#cr-header-nav li{margin-right: 30px;}
#cr-header-nav li:last-child{margin-right: 0;}
#cr-header-nav a:hover::after{width: 100%;}

#cr-header-nav a#header-mail{padding: 0;background: url(../img/create/mail.svg) no-repeat left top;background-size: contain;}
#cr-header-nav a#header-mail img{width: 100%;display: block;opacity: 0;}
#cr-header-nav a#header-mail:hover{opacity: 0.5;}
#cr-header-nav a#header-mail::after{display: none;}

#header.header #cr-header-nav a{color: #17475C;}
#header.header #cr-header-nav a:hover::after{background-color: #17475C;}
#header.header #cr-header-nav a#header-mail img{opacity: 1;}

@media (max-width: 767px) {
	#logo {width: 128px;left: 7.5%;margin-left: 0;}
	#cr-header-nav{right: 7.5%;}
	#cr-header-nav a{width: 30px;}
}

#create-mov {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 177.777777777778vh;
	height: 100%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	overflow: hidden;
	min-width: 100%;
	background: url(../img/create/poster.jpg) no-repeat center center;
	background-size: cover;
}
.in-video {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#create-mov::after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(23,71,92,0.5);
}


#mainimg {
	position: relative;
	margin: 0px;
	z-index: 0;
	width: 100%;
	height: 100vh;
	background-size: cover;
	padding: 0;
	z-index: 2;
	overflow: hidden;
	z-index: 333333;
/* 	background-color: rgba(23,71,92,0.5); */
}
#mainimg-body{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999;
	overflow: hidden;
/* 	padding: 110px 2.5% 0; */
}
#mainimg h1{overflow: hidden;width: 85%;max-width: 500px;margin: auto;}
#mainimg h1 img{display: block;width: 100%;}

#mainimg h2{width: 80%;max-width: 294px;position: relative;padding:0;z-index: 4;margin-top: 1.5%;text-align: center;}
#mainimg h2 img{margin: auto;}
#mainimg h2 svg{display: block;width: 100%;}
.in-video {display: block;position: absolute;top: 50%;left: 50%;min-height: 100%;min-width: 100%;max-width: none;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
#index-scroll {position: absolute;bottom: 78px;left: 50%;z-index: 77777;margin-left: -26px;}
#index-scroll a{display: block;margin: 0 auto;width: 52px;height: 71px;overflow: hidden;position: relative;}
#index-scroll a:hover{opacity: 0.6;}

@media (max-width: 767px) {
	#mainimg h1{margin: -120px auto 0;}
	#mainimg h2{width: 51.5%;margin-top: 0;}
}

#index-01{position: relative;color: #fff;padding: 160px 0;font-weight: 500;/* background-color: rgba(23,71,92,0.5); */}
#index-01-01 h2{font-size: 43px;font-size: 4.3rem;line-height: 2.2;margin-bottom: 120px;font-weight: 500;letter-spacing: 0.2em;}
#index-01-01 p{width: 52%;margin-left: 48%;font-size: 20px;font-size: 2.0rem;line-height: 2.46;}
#index-01-02 {position: relative;text-align: center;padding-top: 120px;}
#index-01-02 h3 {margin-bottom: 30px;}
#i01-02-img {margin-bottom: 120px;overflow: hidden;}
#index-01-02 p{font-size: 20px;font-size: 2.0rem;line-height: 1.96;}
@media (max-width: 960px) {
	#index-01-01 p{width: 65%;margin-left: 35%;}
}
@media (max-width: 767px) {
	#index-01-01 h2{font-size: 3.0rem;margin-bottom: 80px;}
	#index-01-01 p{font-size: 1.8rem;width: 100%;margin-left: 0;}
}

#contents{padding: 0 0 120px;z-index: 222222;background-color: #fff;}

#service{position: relative;padding-top: 210px;}
#service-content{width: 85%;max-width: 600px;margin: 0 auto;}
#service-01{position: relative;background-color: #F9F9FA;padding-bottom: 150px;}
#service-01 h1{position: relative;margin-bottom: 120px;text-align: center;overflow: hidden;}
#service-01 h1 img{position: relative;}
#service-01 h1::before{content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 79%;background-color: #fff;}
#service-01 h2{text-align: center;font-size: 26px;font-size: 2.6rem;margin-bottom: 85px;font-weight: 500;letter-spacing: 0.2em;}

.h2-sub{position: relative;text-align: center;font-size: 14px;font-size: 1.4rem;line-height: 1;margin-bottom: 50px;padding-bottom: 10px;}
.h2-sub::after{content: '';position: absolute;left: 50%;bottom: 0;display: block;width: 70px;height: 2px;background-color: #17475C;margin-left: -35px;}
.lead{text-align: center;font-size: 20px;font-size: 2.0rem;line-height: 2;font-weight: 500;}

.servise-item{position: relative;padding-top: 130px;}
.servise-item h3 {font-size: 30px;font-size: 3.0rem;text-align: center;font-weight: 500;margin-bottom: 50px;letter-spacing: 0.1em;line-height: 1.2;}
.servise-item h3 span{font-size: 20px;font-size: 2.0rem;}
.servise-item-img {position: relative;margin-bottom: 50px;}
.servise-item-img svg {position: relative;display: block;z-index: 2222;}
.servise-item-img-back{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;background-color: #fff;z-index: 1111;}

#service-02 {position: relative;padding: 90px 0;text-align: center;font-weight: 500;border-bottom: 1px solid #C3C3CD;}
@media (max-width: 767px) {
	#service-01{padding-bottom: 80px;}
	#service-01 h1{margin-bottom: 80px;}
	.servise-item{padding-top: 100px;}
	.servise-item h3,.servise-item-img{margin-bottom: 30px;}
}

#flow{position: relative;padding-top: 150px;}
#flow h2{text-align: center;font-size: 26px;font-size: 2.6rem;margin-bottom: 85px;font-weight: 500;letter-spacing: 0.2em;}
#flow-list{padding-top: 90px;}
#flow-list li{position: relative;width: 100%;text-align: center;color: #fff;overflow: hidden;}
#flow-list li span{display: block;padding: 35px 15px;border-radius: 140px;}
#flow-list li h3 {font-size: 22px;font-size: 2.2rem;font-weight: 500;letter-spacing: 0.2em;margin-bottom: 15px;line-height: 1;}
#flow-01 {background-color: #5F818F;}
#flow-02 {background-color: #476E7E;}
#flow-03 {background-color: #2F5A6D;}
#flow-04 {background-color: #17475C;}
#flow-list li::after{content: '';display: block;width: 18px;height: 14px;margin: 28px auto;background: url(../img/create/arrow-b.svg) no-repeat center center;background-size: contain;}
#flow-list li:last-child::after{display: none;}

#cr-footer{position: relative;padding: 0;background-color: #fff;}
#foot-top{padding-bottom: 30px;}
#foot-top li{padding: 0 15px;border-right: 1px solid #17475C;letter-spacing: 0.1em;font-size: 14px;font-size: 1.4rem;line-height: 1.5;}
#foot-top li:first-child{border-left: 1px solid #17475C;}
#foot-middle{padding: 50px 2.5%;background-color: #17475C;color: #fff;text-align: center;}
#foot-middle h2 {font-size: 20px;font-size: 2.0rem;font-weight: 500;margin-bottom: 40px;}
#foot-bottom{font-size: 14px;font-size: 1.4rem;padding: 30px 2.5%;letter-spacing: 0.1em;}
#copyright{color: #9F9F9F;margin: 0;letter-spacing: 0.06em;}

@media (max-width: 767px) {
	#copyright{padding-top: 15px;}
}