@charset "utf-8";
html {font-size: 62.5%;}
body {padding:0; margin:0;}	 
#top {margin: 0; padding: 0;}
a{color: #000; text-decoration: none; }
.sml{font-size: 90%;}
#SC_wrap {
	clear: both;
	width:100%;
	max-width: 1000px;
	padding: 0 0 5%;
	margin:0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	/*font-family: 'Noto Serif JP', serif;*/
	/*color: #fff;	
	background-color: #7e9aab;*/
}


#SC_wrap .main { width: 50%; margin:5% auto 2%;}



.att{font-weight: normal; font-size: 80%; display: block; line-height: 1.7em; margin-top: 4%;}
.att2{font-weight: normal; font-size: 85%; display: block; line-height: 1.7em; margin-top: 2%;}

.Lead_pc {
	width: 98%;
	margin: 0 auto 3%;
	display: block;
	text-align:center;
	font-size:22px;
	font-weight: 500;
	padding:0 ;
	line-height:2em;
}

.Lead_sp {display: none;}


.sp {display:none;}
.clear {clear:both;}
.bold {	font-size: 125%; font-weight: bold;	display: inline-block;	width: 100%; margin: 0 0 1%; color: #4a8cde;}

.sub_ttl{width: 50%; margin: 10% auto 1%;}
.cmt{ margin: 0 auto 2%; font-size: 13px; text-align: center;}
.cmt2{ margin: 0 auto 10%; font-size: 15px; text-align: center; line-height: 1.8em;}

/*--1--*/
.style_wrap1{width: 100%; margin: 5% auto 10%; position: relative; height: 900px;}
.style_box1_1{width: 53%; position: absolute; top: 0; left: 0; height: 900px; z-index: 100;}
.style_box1_2{width: 56%; position: absolute; top: 0; right: 0; height: 900px; z-index: 10;}

.style1_1{width: 50%; position: absolute; top: 0; right: 9%;}
.style1_2{width: 37%; position: absolute; top: 20%; left: 0;}
.style1_3{width: 40%; position: absolute; bottom: 0; right: 22%;}

.style1_4{width: 43%; position: absolute; top: 0; right: 0;}
.style1_5{width: 50%; position: absolute; top: 35%; left: 0;}
.style1_6{width: 40%; position: absolute; bottom: 3%; right: 6%;}

/*--2--*/
.style_wrap2{width: 100%; margin: 5% auto 10%; position: relative; height: 900px;}
.style_box2_1{width: 35%; position: absolute; top: 0; left: 0; height: 900px; z-index: 100;}
.style_box2_2{width: 45%; position: absolute; top: 0; left: 28%; height: 900px; z-index: 10;}
.style_box2_3{width: 24%; position: absolute; top: 0; right: 0; height: 900px; z-index: 10;}

.style2_1{width: 60%; position: absolute; top: 10%; left: 0;}
.style2_2{width: 52%; position: absolute; top: 53%; right: 0;}
.style2_3{width: 50%; position: absolute; bottom: 4%; left: 2%;}

.style2_4{width: 48%; position: absolute; top: 0; left: 0; z-index: 50;}
.style2_5{width: 55%; position: absolute; top: 7%; right: 0; z-index: 10;}
.style2_6{width: 63%; position: absolute; bottom: 0; right: 6%;}

.style2_7{width: 80%; position: absolute; top: 15%; right: 0;}
.style2_8{width: 75%; position: absolute; top: 60%; left: 0;}

h2{ font-size: 18px; letter-spacing: 1px; text-align: center; margin: 20% auto 5%; line-height: 2em;}
.line_r{background:linear-gradient(transparent 88%, #c41c4e 60%);}
.txt_red{ color:  #c41c4e;}

/* スライダ―のCSS */
.slider { width: 90%; margin: 0 auto;  display: flex; gap: 15px; overflow-x: auto;}
.slide {width: 33%;}
.slide img { width: 100%;}
	
/* General button style (reset) */
.btn {	border: none;	font-family: inherit;	color: inherit;	background: none;	cursor: pointer;	display: inline-block;	text-align: center;	letter-spacing: 1px;	font-weight: 600;	outline: none;	position: relative;	-webkit-transition: all 0.3s;	-moz-transition: all 0.3s;	transition: all 0.3s;	/*text-transform: uppercase;*/	}


/* Button 1 */
.btn-1 {
	width: 50%;
    display: block;
    margin: 4% auto 0;
    padding: 10px 0px;
    font-size: 16px;
    color: #fff;
    background-color: #c41c4e;
}

.btn-1:hover {
	color: #000;
	background-color: #EC5077;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

@media only screen and (max-width: 750px) {
	#SC_wrap {
		width:100%;
		margin:0 auto;
		padding: 0 0 15%;
	}
	#SC_wrap .main {
		width: 80%;
		margin:5% auto 10%;
	}
	.pc {display:none;}
	.sp {display:block;	}
	
	.att{font-weight: normal; font-size: 13px;}


	.Lead_pc {display: none;}

	.Lead_sp {
		width: 96%;
		display: block;
		text-align:center;
		font-size:16px;
		font-weight: 500;
		margin:0 auto 5%;
		line-height:2em;
	}
	
	.sub_ttl{width: 80%; margin: 10% auto 1%;}
	.cmt{ margin: 0 auto 3%; font-size: 11px; text-align: center;}
	.cmt2{ margin: 0 auto 10%; font-size: 13px; text-align: center;}
	/*--1--*/
	.style_wrap1{width: 100%; margin: 5% auto 15%; position: initial; height: 270vw;}
	.style_box1_1{width: 100%; position: relative; top: 0; left: 0;  height: 150vw;}
	.style_box1_2{width: 100%; position: relative; top: 0; right: 0; height: 120vw;}
	.style1_1{width: 43%; position: absolute; top: 0; right: 6%;}
	.style1_2{width: 33%; position: absolute; top: 13%; left: 6%; z-index: 100;}
	.style1_3{width: 48%; position: absolute; bottom: 0; right: 26%; z-index: 10;}

	.style1_4{width: 40%; position: absolute; top: 5%; right: 0; z-index: 100;}
	.style1_5{width: 40%; position: absolute; top: 25%; left: 0; z-index: 100;}
	.style1_6{width: 40%; position: absolute; bottom: 0; right: 26%; z-index: 10;}
	
	
	/*--2--*/
	.style_wrap2{width: 100%; margin: 5% auto 15%; position: initial; height: 345vw;}
	.style_box2_1{width: 100%; position: relative; top: 0; left: 0; height: 120vw; z-index: 50;}
	.style_box2_2{width: 100%; position: relative; top: 0; left: 0%; height: 150vw; z-index: 10;}
	.style_box2_3{width: 100%; position: relative; top: 0; right: 0; height: 75vw; z-index: 100;}

	.style2_1{width: 40%; position: absolute; top: -15%; left: 35%;}
	.style2_2{width: 43%; position: absolute; top: 45%; right: 14%;}
	.style2_3{width: 35%; position: absolute; bottom: 0; left: 14%;}

	.style2_4{width: 35%; position: absolute; top: 10%; left: 10%; z-index: 50;}
	.style2_5{width: 45%; position: absolute; top: 0; right: 0; z-index: 10;}
	.style2_6{width: 55%; position: absolute; bottom: 0; right: 22.5%;}

	.style2_7{width: 40%; position: absolute; top: 15%; right: 60%;}
	.style2_8{width: 40%; position: absolute; top: 10%; left: 60%;}


	.slider { width: 100%; margin: 0 auto;  display: flex; gap: 15px; overflow-x: auto;}
	.slide {width: 300px;}
	.slide img { width: 220px;}
	.btn-1 {	width: 80%;    margin: 4% auto 0;  padding: 8px 0px; font-size: 16px;  }	
}