@charset "UTF-8";


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

 MAIN

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





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

 FONTS

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

@font-face {
	font-family: MPLUS1p-Black;
	src: url('../fonts/MPLUS1p-Black.ttf') format("truetype");
	font-family: MPLUS1p-Bold;
	src: url('../fonts/MPLUS1p-Bold.ttf') format("truetype");
	font-family: MPLUS1p-ExtraBold;
	src: url('../fonts/MPLUS1p-ExtraBold.ttf') format("truetype");
	font-family: MPLUS1p-Light;
	src: url('../fonts/MPLUS1p-Light.ttf') format("truetype");
	font-family: MPLUS1p-Medium;
	src: url('../fonts/MPLUS1p-Medium.ttf') format("truetype");
	font-family: MPLUS1p-Regular;
	src: url('../fonts/MPLUS1p-Regular.ttf') format("truetype");
	font-family: MPLUS1p-Thin;
	src: url('../fonts/MPLUS1p-Thin.ttf') format("truetype");

}





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

 BODY MAIN

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

body {
	margin:0px;
	padding:0px;
	font-family: 'MPLUS1p-Thin';
	font-weight:normal;
	background-color:#FFFFFF;
	/*background-image: url('../img/movie.jpg');
	background-size: contain;*/
	
}







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

 HEADER

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

header {
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	padding: 10px 40px;
	background-color:rgba(255,240,255,0.8);
	box-sizing: border-box;
}
header .inner {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
}
.logo {
	position: relative;
	margin: 0px 20px 0px 0px;
	padding: 0;
	width: 180px;
	font-size:20px;
	font-weight: bold;
}
.logo a {
	text-decoration: none;
	color: #333;
}
.logo a:hover {
	/*text-decoration: underline;*/
}

/* header-navi */

header .navi {
	margin: 0 20px 0 auto;
	padding: 0;
	font-size: 14px;
	font-weight: bold;
	display: flex;
	list-style: none;
}
header .navi li {
	margin: 5px 0 5px 20px;
}
header .navi li:first-child {
	margin-left: 0;
}
header .navi li a {
	display: block;
	box-sizing: border-box;
	text-decoration: none;
	color: #333;
}
header .navi li a:hover {
	text-decoration: underline;
}

div.welcome_pop {
	margin-top:10px;
	/*margin-bottom:-4px;*/
	font-size: 12px;
	font-weight:bold;
}


@media screen and (max-width: 768px) {

	header {
		padding: 10px 40px;
	}
	.logo {
		margin: 0px 15px 0px 0px;
		width: 180px;
		font-size:20px;
	}


}


@media screen and (max-width: 480px) {

	header {
		padding: 10px 20px;
	}
	header .navi {
		font-size: 12px;
	}
	.logo {
		margin: 0px 15px 0px 0px;
		width: 160px;
		font-size:18px;
	}

}



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

 BACK MOVIE

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

#video-area{
	position: fixed;
	z-index: -1;/*最背面に設定*/
	top: 0;
	right:0;
	left:0;
	bottom:0;
	overflow: hidden;
}
#video {
	/*天地中央配置*/
	position: absolute;
	z-index: 9999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	/*縦横幅指定*/
	width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
	height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */

	min-height: 100%;
	min-width: 100%;
}



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

 START TITLE

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

.start {
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9000;
	background-color: #FFFFFF;
	text-align:center;
	font-weight:bold;
}
.start p {
	margin:0px;
	padding:15px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width:80%;
	display: none;
	z-index: 9999;
	font-size:40px;
	line-height:42px;
	color:black;
}
.smalldomain {
    font-size:32px;
}
.smallurl {
    font-size:18px;
}

@media screen and (max-width: 768px) {

	.start p {
		font-size:30px;
		line-height:32px;
		/*color:red;*/
	}
	.smalldomain {
	    font-size:24px;
	}
	.smallurl {
    	font-size:16px;
	}

}

@media screen and (max-width: 480px) {

	.start p {
		font-size:20px;
		line-height:22px;
		/*color:blue;*/
	}
	.smalldomain {
	    font-size:18px;
	}
	.smallurl {
    	font-size:14px;
	}

}



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

 PRE TOP PAGE MAIN CONTENTS

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

/* トップページ画像下の領域。メッセージやラインナップが入る。 */
.pre_container_main {
	margin-top:360px;/* HEADERを含む */
	padding:30px 0px 80px 0px;
	background-color:rgba(255,255,255,1);
	width: 100%;
}

/* トップページ画像下のメッセージ */
.heading_message {
	margin:20px auto;
	padding:30px 0px 30px 0px;
	width: 80%;
	font-size: 20px;
	font-weight:bold;
	text-align: center;
}
.heading_message a {
	text-decoration: none;
	color: #333;
}
.heading_message a:hover {
	text-decoration: underline;
}

/* スペーサー画像 */
.spacer_picture {
	margin:50px auto;
	width: 100%;
	min-height:500px;
	background-image: url('../img/top_backimg.jpg');
	/*background-size:  cover; */
	background-position: center top;

}
.spacer_picture2 {
	margin:50px auto;
	width: 100%;
	min-height:500px;
	background-image: url('../img/top_backimg.jpg');
	background-position: center bottom;

}


/* ラインナップという表示（タイトル） */
div.caption {
	font-family: 'MPLUS1p-Light';
	margin:0px auto;
	padding:10px;
	width:70%;
	text-align:center;
	font-size:20px;
	font-weight: bold;
}

/* ラインナップの領域（全体） */
.pre_container_lineup {
	display: flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:20px;
	padding:10px 0px 20px 0px;
	background-color:rgba(255,240,255,0.8);
	border-radius: 30px;
	width: 100%;
	height: 100%;
}

/* それぞれのラインナップ（個別サービス）の領域 */
.pre_banner {
	margin:10px 5px 10px 5px;
	padding:40px 15px 20px 15px;
	text-align:center;
	border-radius: 30px;
	width:28%;
	font-size:16px;
	font-weight: bold;
}


/* サービス名 */
.service_name {
	font-family: 'MPLUS1p-Light';
	font-size:24px;

}
.service_comment_area {
	margin:10px auto;
	width:95%;
	text-align:left;

}

/* 各サービスの色設定等 */
.bg_col1 {
	background-color:rgba(255,51,153,1);
	color:#FFF;
}
.bg_col2 {
	background-color:rgba(255,153,0,1);
	color:#FFF;
}
.bg_col3 {
	background-color:rgba(255,255,102,0.8);
	color:#333;
}

/* 各サービス内部の区切り線 */
.sepaline {
	border:1px solid #cdcdcd;
	width:70%;
}

/* 各サービス内部のリンク線 */
.topServiceWaku {
	padding:20px 0px 20px 0px;
}
.topServiceWaku a {
	text-decoration: none;
	color: #fff;
}
.topServiceWaku a:hover {
	text-decoration: underline;
}


/* ----------------------------------------------- */

/* 各サービスのボタン */
.btn,
a.btn,
button.btn {
	position: relative;
	display: inline-block;
	padding: 4rem 4rem;
	margin-bottom:20px;
	transition: all 0.3s;

	border-radius: 50%;

  content: '';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 0 0 10px 15px #FFF;
}
a.btn-rounded {
	background-image: url('../img/btn_sakura01.jpg');
	background-size:  cover; 
}
a.btn-rounded2 {
	background-image: url('../img/btn_sakura02.jpg');
	background-size:  cover; 
}
a.btn-rounded:hover {
	-webkit-box-shadow: inset 15px 30px 40px rgba(255, 255, 255, 0.55),0 3px 7px rgba(0, 0, 0, 0.2);
	box-shadow: inset 15px 30px 40px rgba(255, 255, 255, 0.55),0 3px 7px rgba(0, 0, 0, 0.2);
	border-radius: 0%;
}
a.btn-rounded2:hover {
	-webkit-box-shadow: inset 15px 30px 40px rgba(255, 255, 255, 0.55),0 3px 7px rgba(0, 0, 0, 0.2);
	box-shadow: inset 15px 30px 40px rgba(255, 255, 255, 0.55),0 3px 7px rgba(0, 0, 0, 0.2);
	border-radius: 0%;
}



/* ----------------------------------------------- */

/* 各サービスのボタン */
/*
.btn,
a.btn,
button.btn {
	font-size: 2rem;
	font-weight: 900;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	padding: 1rem 4rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #212529;
	border-radius: 0.5rem;
	
	
}

a.btn-rounded {
	width: 100px;
	padding: 30px 0;
	border-radius: 50%;
	background: #fcfff4;
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#fcfff4),
		color-stop(40%, #dfe5d7),
		to(#b3bead)
	);
	background: -webkit-linear-gradient(
		top,
		#fcfff4 0%,
		#dfe5d7 40%,
		#b3bead 100%
	);
	background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	-webkit-box-shadow: inset 5px 30px 20px rgba(255, 255, 255, 0.5),0 6px 10px rgba(0, 0, 0, 0.2);
	box-shadow: inset 5px 30px 20px rgba(255, 255, 255, 0.5),0 6px 10px rgba(0, 0, 0, 0.2);

}

a.btn-rounded i {
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

a.btn-rounded:hover {
	-webkit-box-shadow: inset 15px 30px 40px rgba(255, 255, 255, 0.55),0 3px 7px rgba(0, 0, 0, 0.2);
	box-shadow: inset 15px 30px 40px rgba(255, 255, 255, 0.55),0 3px 7px rgba(0, 0, 0, 0.2);
	border-radius: 0%;
}

a.btn-rounded:hover i {
	bottom: 6px;
}

.fa-position-bottom {
	position: absolute;
	bottom: 1rem;
	left: calc(50% - 0.5rem);
}
*/

/* ----------------------------------------------- */


@media screen and (max-width: 1200px) {

	.pre_container_inner {
		width: 70%;

	}

}

@media screen and (max-width: 1000px) {

	.pre_container_inner {
		width: 72%;

	}

}

@media screen and (max-width: 900px) {

	.pre_container_inner {
		width: 80%;

	}

}

@media screen and (max-width: 800px) {

	.pre_container_inner {
		width: 85%;

	}

}



@media screen and (max-width: 768px) {

	.pre_container_inner {
		width: 87%;

	}

	.pre_container_lineup {
		flex-direction: column;
		width: 70%;
	}

	.pre_banner {
		margin:20px auto;
		padding:40px 5px 5px 5px;
		width:84%;
	}

	.service_comment_area {
		margin:30px auto;
		width:80%;
		text-align:left;

	}

}


@media screen and (max-width: 480px) {

	.pre_container_inner {
		width: 90%;

	}

	.pre_container_lineup {
		flex-direction: column;
	}

	.pre_banner {
		margin:10px auto;
		padding:40px 5px 5px 5px;
		width: 80%;
	}

}








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

 PRE TOP

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

/* MAIN CONTENTS AREA */
.pre_container {
	display: flex;
	flex-flow: wrap row ;
	justify-content: space-between;
	margin-top:360px;/* HEADERを含む */
	margin-left: auto;
	margin-right: auto;
	margin-bottom:20px;
	padding:0px;
	width: 90%;
	height: 100%;
}

/* INFORMTATION AREA */
.pre_contents {
	margin:20px auto;
	padding:15px 25px 20px 25px;
	width:70%;
	background-color: #FFFFFF;
	border-radius: 6px;
	font-weight: bold;
}

/* INFORMTATION TOP TITLE */
.pre_contents h2 {
	margin-top:10px;
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:2px dashed #CDCDCD;
}
/* INFORMTATION TOP TITLE(OLD CONTENTS LINK) */
.pre_info {
	width:100%;
	text-align:right;
	font-size:12px;
}
.pre_info a {
	text-decoration: none;
	color: #333;
}
.pre_info a:hover {
	text-decoration: underline;
}

/* INFORMTATION SUB-TITLE(DATE&TITLE) */
.pre_contents h3 {
	margin-top:5px;
	margin-bottom:10px;
}

/* INFORMTATION HONBUN(TEXT ONLY) */
.pre_contents p {
	margin-top:5px;
	font-weight: 400;
	letter-spacing: .1rem;
}

/* INFORMTATION FOOTER(LINKS) */
.pre_contents_footer {
	margin-bottom:40px;
	text-align:right;
	font-size:14px;
	font-weight:bold;
}
.pre_contents_footer a {
	text-decoration: none;
}
.pre_contents_footer a:hover {
	text-decoration: underline;
}

/* INFORMTATION FOOTER(LINKS 2lines) */
.pre_contents_footer2Lines {
	text-align:right;
	font-size:14px;
	font-weight:bold;
}
.pre_contents_footer2Lines a {
	text-decoration: none;
}
.pre_contents_footer2Lines a:hover {
	text-decoration: underline;
}




@media screen and (max-width: 768px) {

	.pre_container {
		margin-bottom:10px;
		width: 90%;
	}
	.pre_contents {
		margin:20px auto;
		width: 90%;
	}
	.pre_contents_footer {
		font-size:12px;
	}

}

@media screen and (max-width: 480px) {

	.pre_container {
		width: 90%;
	}
	.pre_contents {
		margin:20px auto;
		width: 90%;
	}
	.pre_contents_footer {
		font-size:12px;
	}

}






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

 FOOTER

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

footer {
	position: relative;
	z-index: 888;
	width: 100%;
	margin:0px;
	padding: 10px 40px;
	background-color:rgba(00,80,00,1.0);
	box-sizing: border-box;
	color:#FFFFFF;
}
footer .inner {
	position: relative;
	display: flex;
}

/* footer-navi */

footer .navi {
	margin: 0 0 0 auto;
	padding: 0;
	font-size: 14px;
	font-weight: bold;
	display: flex;
	list-style: none;
}
footer .navi li {
	margin: 5px 0 5px 40px;
}
footer .navi li:first-child {
	margin-left: 0;
}
footer .navi li a {
	display: block;
	box-sizing: border-box;
	text-decoration: none;
	color: #FFFFFF;
}
footer .navi li a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 768px) {

	/* footer-navi */

	footer .navi {
		font-size: 14px;
	}
	footer .navi li {
		margin: 5px 0 5px 40px;
	}
	footer .navi li:first-child {
		margin-left: 0;
	}

}

@media screen and (max-width: 480px) {

	/* footer-navi */

	footer .navi {
		font-size: 12px;
	}
	footer .navi li {
		margin: 5px 0 5px 40px;
	}
	footer .navi li:first-child {
		margin-left: 0;
	}

}



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

 FOOTER C MARK

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

.cmark {
	position: relative;
	z-index: 888;
	width: 100%;
	margin:0px;
	padding: 10px 40px;
	background-color:rgba(00,64,00,1.0);
	box-sizing: border-box;
	color:#FFFFFF;
}
.cmark .inner {
	position: relative;
	display: flex;
	justify-content: center;
	width:100%;
	height: 100%;
}