@charset "utf-8";
/* CSS Document */

body{
	margin: 0;
}

.wrapper{
	max-width: 600px;
	margin: 0 auto;
	width: 100%;
	background-color: #D9E5F7;
	padding: 5% 0 0;
}

.wrapper img{
	display: block;
	line-height: 0;
}

.top{
	width: 90%;
	margin: 0 auto 20%;
}

.title__border{
	width: 100%;
	margin: 13% auto 1%;
	display: flex;
	align-items: center;
	font-family: "mundial", sans-serif;
    font-weight: bold;
    font-style: normal;
	font-size: 18px;
	color: #32486a;
}

.title__border:before,
.title__border:after {
	border-top: 1px solid;
	content: "";
	flex-grow: 1;
}

.title__border:before {
	margin-right: 1rem;
}

.title__border:after {
	margin-left: 1rem;
}

.top h1{
	text-align: center;
	line-height: 1.5;
	font-size: 34px;
	margin: 2% auto;
	font-family: "mundial", sans-serif;
    font-weight: bold;
    font-style: normal;
	letter-spacing: 1px;
	color: #32486a;
}

.top h1 span{
	font-size: 17px;
	display: block;
}

.lead{
	text-align: center;
	font-size: 14px;
	line-height: 2;
	margin: 5% auto;
}
.lead span{
	font-size: 12px;
}

.content{
	box-sizing: border-box;
	padding: 5%;
	margin: 10% auto;
	position: relative;
	z-index: 1;
	 background: linear-gradient(0deg, #adc2e2 0%, #D9E5F7 100%);
}

.content:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../images/bg.png");
	background-size: cover;
	background-position: center;
	opacity: 0.5; /* ここで透過度を調整 (0.0 から 1.0) */
	z-index: -1; /* コンテンツより背面に */
}

.content_last{
	margin-bottom: 0;
}

.logo{
	width: 70%;
	margin: 0 auto 5%;
}

.wing{
	width: 40%;
}

.content h2{
	text-align: center;
	color: #32486a;
	margin: 0 auto 20%;
	font-size: 20px;
	letter-spacing: 1px;
	line-height: 2;
}

.content h2:before{
	content: '';
	display: inline-block;
	background-image: url("../SVG/decoration_1.svg");
	width: 30px;
	height: 50px;
	background-size: contain;
	vertical-align: middle;
	background-repeat: no-repeat;
	opacity: 0.5;
}

.content h2:after{
	content: '';
	display: inline-block;
	background-image: url("../SVG/decoration_2.svg");
	width: 30px;
	height: 50px;
	background-size: contain;
	vertical-align: middle;
	background-repeat: no-repeat;
	margin-left: 10px;
	opacity: 0.5;
}

.box{
	margin: 0 auto;
}

.imgBox{
	position: relative;
	width: 90%;
	margin: 0 auto;
}

.mainImg{
	box-sizing: border-box;
	border: solid 50px #fff;
}

.border20{
	border: solid 6px #fff;
}

.icon{
	position: absolute;
	top: -7%;
	left: -7%;
	width: 30%;
}

.box p{
	font-size: 12px;
	line-height: 1.6;
	margin: 5% auto;
	text-align: center;
}

.box p span{
	font-size: 11px;
}

.box .lead{
	font-size: 12px;
	line-height: 2;
	margin: 5% auto;
}

.box a{
	display: block;	
	width: 80%;	
	margin: 5% auto 10%;
	text-align: center;
	background-color: #FFFFFF;	
	color: #32486a;
	border: solid 1px #32486a;
	font-family: "mundial", sans-serif;
    font-style: normal;
	font-size: 16px;
	letter-spacing: 1px;
	font-weight: 600;	
	line-height: 3;
	text-decoration: none;
	position: relative;
}

.box a:after{	
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 5px;
	height: 5px;
	border-top: 2px solid #32486a;
	border-right: 2px solid #32486a;
	content: "";
	transform: translateY(-50%) rotate(45deg);
}

.flex{
	display: flex;
	margin-top: 15%;
}

.flex .icon{
	top: -7%;
	left: -5%;
	width: 34%;
}

.flex .box .mainImg{
	box-sizing: border-box;
	border:  solid 35px #fff;
}

.flex .box .border20{
	border:  solid 5px #fff;
}

.flex .box a{
	font-size: 14px;
	letter-spacing: 0.5px;
	line-height: 2;
}

.kome{
	font-size: 13px;
	text-align: center;
	margin: 3% auto;
}

.all a{	
	display: block;	
	width: 90%;	
	margin: 25% auto 15%;
	text-align: center;
	background-color: #ffffcc;	
	color: #32486a;	
	font-size: 16px;	
	font-family: "mundial", sans-serif;
    font-weight: bold;
    font-style: normal;
	line-height: 4;
	text-decoration: none;
	position: relative;
}
.all a:after{	
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 5px;
	height: 5px;
	border-top: 2px solid #32486a;
	border-right: 2px solid #32486a;
	content: "";
	transform: translateY(-50%) rotate(45deg);
}

.pcBox{
	display: none;
}


@media(min-width:750px){
	.sticky__container{
		background: linear-gradient(0deg, #adc2e2 0%, #D9E5F7 100%);
		z-index: 1;
		position: relative;
	}
	
	.sticky__container:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url("../images/bg.png");
		background-size: cover;
		background-position: center;
		opacity: 0.5; 
		z-index: -1; 
		background-attachment: fixed;
	}

	.content{
		padding: 10%;
	}
	
	.br_s{
		display: none;
	}
	
}