@charaset"UTF-8";

/*==================================================================*/
/* 2023join css */
/*==================================================================*/
br.sp1{display:block;}
br.sp2{display:block;}
br.sp3{display:none;}
br.sp4{display:none;}
br.sp5{display:none;}

/* 340 *//* ------- */@media screen and (max-width:340px){br.sp5{display:block;}}
/* 640 *//* ------- */@media screen and (min-width:640px){
br.sp1{display:none;}
br.sp2{display:block;}
br.sp3{display:block;}
br.sp4{display:none;}
}

/* 980 *//* ------- */@media screen and (min-width:980px){
br.sp1{display:none;}
br.sp2{display:none;}
br.sp3{display:block;}
br.sp4{display:block;}
}

#contents{
	padding:0;
	background:url('./image/back.png') repeat 50% 0%;
	background-size:150%;

	}
/* 980 *//* ------- */@media screen and (min-width:980px){#contents{background-size:auto;}}

/* -------------------------------------------------------------- */
/* mainvisual */
/* -------------------------------------------------------------- */
#mainvisual *{margin:0;padding:0;}
#mainvisual{
	margin:0 auto;
	background:url('./image/mainvisual_back.png') repeat-x 50% 50%;
	background-size:cover;
	}
#mainvisual h1{
	margin:0 auto;
	width:100%;
	}

/* 640 *//* ------- */@media screen and (min-width:640px){h1 img{width:100%;}}
/* 980 *//* ------- */@media screen and (min-width:980px){
#mainvisual h1{width:980px;}
#mainvisual{background-size:auto;}
h1 img{width:auto;}
}

/* -------------------------------------------------------------- */
/* supplement */
/* -------------------------------------------------------------- */
#supplement *{margin:0;padding:0;}
#supplement{
	margin:0 auto;
	width:100%;
	}

#supplement p{
	margin:3px 1% 0;
	color:#aaa;
	font-size:10px;
	text-align:right;
	}


/* 640 *//* ------- */@media screen and (min-width:640px){}
/* 980 *//* ------- */@media screen and (min-width:980px){
#supplement{width:980px;}
#supplement p{margin:3px 20px 0;font-size:11px;}
}

/* -------------------------------------------------------------- */
/* lead */
/* -------------------------------------------------------------- */
#lead *{margin:0;padding:0;}
#lead{
	margin:0 auto;
	padding:20px 0 20px;
	width:300px;
	}

#lead p{
	margin:0 0 10px;
	font-size:15px;
	text-align:center;
	}
	
#lead p strong{color:#f7699b;}
#lead p.note{font-size:14px;}

/* 340 *//* ------- */@media screen and (max-width:340px){
lead{width:280px;}
#lead p{font-size:14px;}
}
/* 640 *//* ------- */@media screen and (min-width:640px){#lead{width:600px;}}
/* 980 *//* ------- */@media screen and (min-width:980px){
#lead{
	padding:20px 0 30px;
	width:980px;
	}
#lead p{font-size:20px;}
}


/* -------------------------------------------------------------- */
/* early */
/* -------------------------------------------------------------- */
#early *{margin:0;padding:0;}
#early{
	margin:0 0 30px;
	background:#fee7ef;
	}

#early .inner{
	margin:0 auto;
	padding:50px 0 20px;
	width:300px;
	}

#early .headline{text-align:center;}
#early .headline p{
	margin:0 auto 10px;
	width:80px;
	}
#early .headline h2{
	margin:0 0 20px;
	color:#0d369c;
	font-size:28px;
	line-height:1.2;
	}
#early .headline h2 span{
	margin:0 auto 20px;
	padding:8px 0;
	border-radius:30px;
	display:block;
	position:relative;
	width:240px;
	color:#fff;
	background:#f7699b;
	font-size:20px;
	}

#early .headline h2 span::before{
	margin:auto;
	content:'';
	position:absolute;
	display:block;
	width:0;
	height:0;
	left:0;
	right:0;
	bottom:-14px;
	border-top: 15px solid #f7699b;
	border-right:10px solid transparent;
	border-left:10px solid transparent;
	}
	
#early .headline h3{
	margin:0 auto 20px;
	padding:2px 0;
	border-top:3px solid #f7699b;
	border-bottom:3px solid #f7699b;
	width:300px;
	color:#f7699b;
	background:#fff;
	font-size:14px;
	letter-spacing:4px;
	}
#early .headline h3 span{
	padding:0 0 2px 4px;
	border-radius:50%;
	color:#fff;
	background:#f7699b;
	}
#early .headline strong{font-size:24px;}

#early .lead{margin:0 0 50px;}
#early .lead h4{
	margin:0 0 20px;
	color:#0d369c;
	font-size:20px;
	font-weight:500;
	}
#early .lead p{margin:0 0 1em;}
#early .lead p.note{font-size:12px;}
#early .lead strong{color:#f7699b;font-size:24px;}

#point{}
#point h3{
	margin:0 0 40px;
	color:#0d369c;
	font-size:30px;
	font-weight:500;
	text-align:center;
	}
#point dl{
	margin:0 0 60px;
	padding:60px 0 20px;
	position:relative;
	border-radius:10px;
	background:#fff;
	box-shadow:rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	}
#point dt{
	display:flex;
	align-items:center;
	position:absolute;
	top:-20px;
	line-height:1.4;
	width:240px;
	height:58px;
	color:#fff;
	font-size:17px;
	font-weight:400;
	}
#point #pro dt{
	left:-10px;
	background:#40d0ff;
	}
#point #mecha dt{
	left:-10px;
	background:#ffc340;
	justify-content:center;
	}
#point dt p{padding:0 20px;}

#point dd{text-align:center;}

#point #pro dd{}
#point #pro dd img:first-of-type{
	margin:0 auto 10px;
	width:260px;
	}
	
#point #mecha dd{
	display:flex;
	flex-wrap:wrap;
	flex-direction:column-reverse;
	}
#point #mecha dd img:last-of-type{
	margin:0 auto 10px;
	width:260px;
	}

/* 340 *//* ------- */@media screen and (max-width:340px){
#early .inner{width:280px;}
#early .headline h3{width:280px;}
}
/* 640 *//* ------- */@media screen and (min-width:640px){
#early{margin:0 0 40px;}
#early .inner{
	padding:50px 0;
	width:600px;
	}
#early .headline p{}
#early .headline h2{font-size:40px;}

#early .headline h3{
	margin:0 auto 20px;
	width:400px;
	}
#early .lead h4{font-size:24px;}

#point dl{padding:90px 0 20px;}
#point dt{
	width:300px;
	height:74px;
	font-size:20px;
	}

#point #pro dd img:first-of-type{width:auto;}
#point #mecha dd img:last-of-type{width:auto;}
}
/* 980 *//* ------- */@media screen and (min-width:980px){
#early{margin:0 0 80px;}
#early .inner{width:980px;}
#early .headline h2{font-size:54px;}
#early .headline h3{margin:0 auto 50px;}

#early .lead h4{
	font-size:36px;
	font-weight:350;
	}

#point h3{
	font-size:36px;
	font-weight:350;
	text-align:center;
	}
#point dl{padding:20px 0;}
#point dt{
	display:flex;
	width:360px;
	height:100px;
	font-size:26px;
	}
#point #mecha dt{right:-10px;left:auto;}

#point dd{
	display:flex;
	align-items:center;
	}
#point #pro dd{justify-content:flex-end;}
#point #pro dd img:first-of-type{margin:0 0 0 auto;}

#point #mecha dd{
	justify-content:flex-start;
	flex-direction:row;
	}
#point #mecha dd img:last-of-type{margin:0;}
}

/* -------------------------------------------------------------- */
/* present */
/* -------------------------------------------------------------- */
#present *{margin:0;padding:0;}
#present{
	margin:0 0 30px;
	background:#edfcff;
	}

#present .inner{
	margin:0 auto;
	padding:60px 0 0;
	width:300px;
	background:url('./image/present_photo.png') no-repeat 50% 365px;
	background-size:85%;
	}

#present .inner1{
	margin:0 auto;
	padding:60px 0 0;
	width:300px;
	background:url('./image/present_photo.png') no-repeat 50% 355px;
	background-size:85%;
	}

#present .headline{text-align:center;}
#present .headline p{
	margin:0 auto 10px;
	width:80px;
	}
#present .headline h2{
	margin:0 0 20px;
	color:#0d369c;
	font-size:26px;
	line-height:1.2;
	}
#present .headline h2 span{
	margin:0 auto 20px;
	padding:8px 0;
	border-radius:30px;
	display:block;
	position:relative;
	width:280px;
	color:#fff;
	background:#3eceda;
	font-size:20px;
	}

#present .headline h2 span::before{
	margin:auto;
	content:'';
	position:absolute;
	display:block;
	width:0;
	height:0;
	left:0;
	right:0;
	bottom:-15px;
	border-top: 15px solid #3eceda;
	border-right:10px solid transparent;
	border-left:10px solid transparent;
	}

#present .headline h3{
	margin:0 auto 230px;
	padding:2px 0;
	border-top:3px solid #3eceda;
	border-bottom:3px solid #3eceda;
	width:300px;
	color:#3eceda;
	background:#fff;
	font-size:14px;
	letter-spacing:4px;
	}
#present .headline h3 span{
	padding:1px 0 1px 4px;
	border-radius:50%;
	color:#fff;
	background:#3eceda;
	}
#present .headline strong{font-size:24px;}

#present .lead{padding:0 0 20px;}
#present .lead h4{
	margin:0 0 20px;
	color:#0d369c;
	font-size:20px;
	font-weight:500;
	}
#present .lead h4 span{font-size:20px;}

#present .lead p{margin:0 0 1em;}
#present .lead p.note{
	margin:0;
	padding-left:1em;
	text-indent:-1em;
	font-size:12px;
	}
#present .lead strong{color:#f769bf;font-size:24px;}

/* 340 *//* ------- */@media screen and (max-width:340px){
#present .inner,#present .inner1{width:280px;}
#present .headline h2 span{width:240px;font-size:18px;}
#present .headline h3{width:280px;}
}
/* 640 *//* ------- */@media screen and (min-width:640px){
#present{margin:0 0 40px;}
#present .inner{
	width:600px;
	background:url('./image/present_photo.png') no-repeat 50% 445px;
	background-size:45%;
	}
#present .inner1{
	width:600px;
	background:url('./image/present_photo.png') no-repeat 50% 400px;
	background-size:45%;
	}
#present .headline p{
	margin:0 auto 20px;
	}

#present .headline h2{font-size:40px;}
#present .headline h3{
	margin:0 auto 250px;
	width:400px;
	}
#present .lead h4{font-size:24px;}
}

/* 768 *//* ------- */@media screen and (min-width:768px){
#present .inner1{
	background:url('./image/present_photo.png') no-repeat 50% 445px;
	background-size:45%;
	}
}

/* 980 *//* ------- */@media screen and (min-width:980px){
#present{margin:0 0 80px;}
#present .inner{
	padding:50px 0 30px;
	width:980px;
	background:url('./image/present_photo.png') no-repeat 100% 82%;
	background-size:380px;
	}
#present .inner1{
	padding:50px 0 30px;
	width:980px;
	background:url('./image/present_photo.png') no-repeat 100% 80%;
	background-size:380px;
	}
	
#present .headline h2{
	font-size:48px;
	line-height:1.6;
	}
#present .headline h2 br.sp3{display:none;}
#present .lead p br.sp3{display:none;}

#present .headline h2 span{
	margin:0 auto;
	padding:8px 30px;
	font-size:24px;
	}

#present .headline h3{margin:0 auto 50px;}

#present .lead{margin:0 0 50px;}
#present .lead h4{
	font-size:30px;
	font-weight:350;
	}
#present .lead strong{color:#f769bf;font-size:30px;}
}

/* -------------------------------------------------------------- */
/* banner */
/* -------------------------------------------------------------- */
.banner *{margin:0;padding:0;}
.banner{
	margin:0 auto 20px;
	width:300px;
	}
.banner h3{
	text-align:center;
	margin:0 auto 30px;
	text-align:center;
	width:100%;
	color:#0d369c;
	font-size:17px;
	}
.banner h3 span{
	display:inline;
	padding:0 10px;
	background:linear-gradient(transparent 60%, #fcf587 60%);
	}
.banner p{text-align:center;}


/* 340 *//* ------- */@media screen and (max-width:340px){
.banner{width:280px;}
.banner h3{font-size:15px;}
}
/* 640 *//* ------- */@media screen and (min-width:640px){
.banner{
	margin:0 auto 30px;
	width:600px;
	}
.banner h3{
	margin:0 auto 40px;
	font-size:20px;
	}
.banner img{width:100%;}
}

/* 980 *//* ------- */@media screen and (min-width:980px){
.banner{
	margin:0 auto 60px;
	width:980px;
	}
.banner h3{
	margin:0 auto 40px;
	font-size:30px;
	}
.banner img{width:auto;}
}

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