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

/* ************************************************************
コンセプト
************************************************************ */
#block01{
	width: 100%;
	margin: 0 auto;
	padding: 10% 0 8%;
}
#block01 div{
	width: 400px;
	margin: 0 auto;
}
#block01 p{
	width: 800px;
	margin: 0 auto;
	padding-top: 2%;
}
#block01 h2{
	width: 100%;
	margin: 0 auto;
	font-family: 'Noto Serif JP', serif;
	padding: 2% 0;
	color: #06607b;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	letter-spacing: 0.1em;
	line-height: 2;
}
#block01 h2 .mbbr{
	display: none;
}
/* ▼▼▼▼▼▼▼▼MaxWidth1024(pc)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */
#block01{
	padding: 15% 0
}
#block01 div{
	width: 350px;
}
#block01 p{
	width: 75%;
	margin: 0 auto;
}
#block01 h2{
	font-size: 13px;
}
 /* *************** */
}
/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */
#block01 div{
	width: 300px;
}
#block01 p{
	width: 80%;
}
#block01 h2 .mbbr{
	display: block;
}
/* *************** */
}
/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */
#block01 div{
	width: 280px;
}
#block01 p{
	width: 90%;
}
#block01 h2{
	font-size: 12px;
}

 /* *************** */
}
/* ************************************************************
5つのkey
************************************************************ */
#block02{
	width: 100%;
	margin: 0 auto;
	padding: 0 5%;
}
#block02 .block02-1{
	width: 100%;
	margin: 0 auto 10%;
	padding: 5%;
	position: relative;
	background-color:rgba(2,87,112,0.90) ;
	mix-blend-mode: multiply;
	max-width: 1000px;
	border-radius: 20px 120px 20px 20px;
}
#block02 .block02-2{
	width: 100%;
	margin: 0 auto 10%;
	padding: 5%;
	position: relative;
	background-color:rgba(2,87,112,0.90) ;
	mix-blend-mode: multiply;
	max-width: 1000px;
	border-radius: 120px 20px 20px 20px;
}
#block02 .block02p1{
	width: 270px;
	margin: 0 auto;
	padding: 1% 0;
}
#block02 .border{
	width: 100%;
	margin: 5% auto 0;
	padding: 3% 0;
	max-width: 700px;
	border-top: dashed #fbf9e0 3px; 
}
#block02 .block02p2{
	width: 100%;
	margin: 0 auto;
	font-size: 13px;
	letter-spacing: 0.1em;
	line-height: 2;
	text-align: left;
	color: #fbf9e0;
	font-family: 'Noto Serif JP', serif;
	max-width: 700px;
}
#block02 .key01{
	width: 140px;
	position: absolute;
	top:10%;
	left: -2%;
}
#block02 .kaban{
	width: 170px;
}
#block02 .sunadokei{
	width: 110px;
}
#block02 .key02{
	width: 140px;
	position: absolute;
	top:10%;
	right: -2%;
}

/* ▼▼▼▼▼▼▼▼MaxWidth1024(pc)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */
#block02 .block02-1{
	padding: 10% 5%;
}
#block02 .block02-2{
	padding: 10% 5%;
}
#block02 .block02p1{
	width: 220px;
}
#block02 .key01{
	width: 110px;
	position: absolute;
	top:15%;
	left: -1%;
}
#block02 .kaban{
	width: 170px;
}
#block02 .key02{
	width: 110px;
	position: absolute;
	top:15%;
	right: -1%;
}
#block02 .books{
	width: 130px;
}
 /* *************** */
}
/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */
#block02 .block02-1{
	padding: 10% 8%;
}
#block02 .block02-2{
	padding: 10% 8%;
}
#block02 .block02p1{
	width: 180px;
}
#block02 .block02p2{
	font-size: 12px;
	line-height: 1.6;
}
#block02 .key01{
	width: 15%;
	position: absolute;
	top:7%;
	left: -1%;
}
#block02 .kaban{
	width: 19%;
}
#block02 .sunadokei{
	width: 13%;
}
#block02 .key02{
	width: 15%;
	position: absolute;
	top:7%;
	right: -1%;
}
#block02 .books{
	width: 17%;
}
/* *************** */
}
/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */
#block02 .block02-1{
	padding: 14% 8%;
}
#block02 .block02-2{
	padding: 14% 8%;
}
#block02 .block02p1{
	width: 160px;
}
#block02 .key01{
	width: 17%;
	position: absolute;
	top:7%;
	left: -1%;
}
#block02 .kaban{
	width: 23%;
	top:13%;
}
#block02 .sunadokei{
	width: 15%;
	top:11%;
}
#block02 .key02{
	width: 17%;
	position: absolute;
	top:7%;
	right: -1%;
}
#block02 .books{
	width: 20%;
	top:10%;
}
 /* *************** */
}
/* ************************************************************
イメージ＆コピー
************************************************************ */
#block03{
	width: 100%;
	margin: 0 auto;
	padding: 5% 0 10%;
	max-width: 1000px;
	position: relative;
}
#block03 .block03-1{
	width: 100%;
	margin: 0 auto;
	padding: 5% ;
}
#block03 .block03div1{
	width: 100%;
	margin: 0 auto;
	padding-top: 5%;
	color: #065f74;
	font-family: 'Kanit', sans-serif;
	font-size: 32px;
	letter-spacing: 0.1em;
}
#block03 .block03line{
	width: 100%;
	margin: 4% auto;
	max-width: 700px;
	border-top: solid #065f74 1px; 
}
#block03 .block03div2{
	width: 100%;
	margin: 0 auto;
	color: #065f74;
	font-family:'Noto Serif JP', serif;
	font-size: 14px;
	letter-spacing: 0.1em;
	line-height: 2;
	padding-bottom: 5%;
}
#block03 .maic{
	width: 230px;
	position: absolute;
	right: 2%;
	bottom: 39%;
}
/* ▼▼▼▼▼▼▼▼MaxWidth1024(pc)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1024px) {
 /* ************** */
#block03 .block03div2{
	font-size: 13px;
}
#block03 .maic{
	width: 20%;
}
 /* *************** */
}
/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */
#block03 .block03div1{
	font-size: 4.5vw;
}
#block03 .block03div1{
	padding-top: 10%;
}
#block03 .block03line{
	width: 90%;
}

#block03 .block03div2{
	padding: 0 5% 10%;
	font-size: 12px;
	letter-spacing: normal;
}
#block03 .maic{
	bottom: 37%;
}
/* *************** */
}
/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */
#block03 .block03div2{
	font-size: 11px;
	padding: 0 0 10%;
}
 /* *************** */
}
/* ▼▼▼▼▼▼▼▼MaxWidth400(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 400px) {
 /* ************** */
#block03 .block03div2{
	font-size: 10px;
}
 /* *************** */
}
/* ************************************************************
ブロック4部分 体験レポート
************************************************************ */
#reportlink{
	width: 100%;
	margin: 0 auto;
}
#reportlink div{
	margin: 0 auto;
	width: 100%;
	position: relative;
}
#reportlink div .backpc{
	display: block;
}
#reportlink div .backmb{
	display: none;
}
#reportlink .block04p1{
	width: 20%;
	position: absolute;
	top: 20%;
	left: 16%;
}
#reportlink .block04p2{
	width: 30%;
	position: absolute;
	top: 43%;
	left: 8%;
	font-size: 12px;
	line-height: 2;
	letter-spacing: 0.1em;
	color: #feefd4;
}

#reportlink .block04p3{
	margin: 0 auto;
	width: 120px;
	position: absolute;
	bottom: 30%;
	left: 20%;
}
/* ▼▼▼▼▼▼▼▼MaxWidth1600(pc)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1600px) {
 /* ************** */
#reportlink .block04p3{
	bottom: 26%;
	left: 19%;
}
 /* *************** */
}
/* ▼▼▼▼▼▼▼▼MaxWidth1200(pc)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 1200px) {
 /* ************** */
#reportlink .block04p1{
	width: 24%;
}
#reportlink .block04p2{
	width: 40%;
	top: 41%;
	left: 4%;
}
#reportlink .block04p3{
	width: 100px;
	bottom: 22%;
}
 /* *************** */
}

/* ▼▼▼▼▼▼▼▼MaxWidth900(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 900px) {
 /* ************** */
#reportlink .block04p2{
	line-height: 1.7;
	letter-spacing: normal;
}
#reportlink .block04p3{
	bottom: 17%;
}
/* *************** */
}

/* ▼▼▼▼▼▼▼▼MaxWidth768(tablet)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 768px) {
 /* ************** */
#reportlink div .backpc{
	display: none;
}
#reportlink div .backmb{
	display: block;
}
#reportlink .block04p1{
	width: 43%;
	top: 50%;
	left: 33%;
}
#reportlink .block04p2{
	width: 70%;
	top: 63%;
	left: 13%;
}

#reportlink .block04p3{
	width: 17%;
	bottom: 18%;
	left: 40%;
}
/* *************** */
}

/* ▼▼▼▼▼▼▼▼MaxWidth480(mobile)▼▼▼▼▼▼▼▼ */
@media screen and (max-width: 480px) {
 /* ************** */
#reportlink .block04p1{
	width: 55%;
	left: 31%;
}
#reportlink .block04p2{
	width: 80%;
	top: 63%;
	left: 10%;
}

#reportlink .block04p3{
	width: 95px;
	bottom: 13%;
	left: 40%;
}
 /* *************** */
}