* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}
html {
	font-size: 62.5%;
}
body {
	line-height: 1.8;
	font-size: 1.5rem;
	color: #000;
	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;	font-feature-settings: 'palt';
	min-width:1300px;
}

@media screen and (max-width: 768px) {
body {
	min-width:inherit;
}
}
a {
	color: #2578bb;
	text-decoration: none;
}
a:hover {
	color: #5bb0f4;
}
img {
	border: 0;
	vertical-align: bottom;
}
@media screen and (max-width: 768px) {
	body {
		font-size: 1.2rem;
		line-height: 1.6;
	}
	img {
		max-width: 100%;
		height: auto;
	}
}


/* 携帯のみ電話
-----------------------------------------------------------*/
@media screen and (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
		color: #000;
	}
}

/* 分岐
-----------------------------------------------------------*/
[data-device="sp"] {
		display: none;
}

@media screen and (max-width: 768px) {
	[data-device="pc"] {
		display: none ;
	}
	
	[data-device="sp"] {
		display: block ;
	}
}


/* ttl
------------------------------------*/
.ttl_nomal {
	text-align:center;
	margin-bottom:50px;
}

.ttl_nomal h2 {
	color:#036db7;
	line-height:1;
	font-size:3.4rem;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-weight:normal;
}

@media screen and (max-width: 768px) {
.ttl_nomal {
	margin-bottom:calc(50 / 750 * 100vw);
}

.ttl_nomal h2 {
	font-size:1.8rem;
}
}

.ttl_big {
	text-align:center;
	margin-bottom:50px;
}

.ttl_big h2 {
	color:#036db7;
	line-height:1;
	font-size:4.0rem;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-weight:normal;
}


.ttl_big h2 span {
	position:relative;
}

.ttl_big h2 span::before {
	display:inline-block;
	content:'';
	width:3px;
	height:80px;
	background:#036db7;
	transform:rotate(-30deg);
	position:absolute;
	left:-40px;
	top:-10px;
}


.ttl_big h2 span::after {
	display:inline-block;
	content:'';
	width:3px;
	height:80px;
	background:#036db7;
	transform:rotate(30deg);
	position:absolute;
	right:-40px;
	top:-10px;
}

@media screen and (max-width: 768px) {
.ttl_big {
	margin-bottom:calc(50 / 750 * 100vw);
}

.ttl_big h2 {
	font-size:1.8rem;
}

.ttl_big h2 span::before {
	width:1px;
	height:40px;
	position:absolute;
	left:-20px;
	top:-10px;
}

.ttl_big h2 span::after {
	width:1px;
	height:40px;
	position:absolute;
	right:-20px;
	top:-10px;
}
}

/*　レイアウト
---------------------------------------------------------- */
.wrapper {
	width:1000px;
	margin:0 auto;
}

@media screen and (max-width: 768px) {
	.wrapper {
		width:100%;
		padding:0 4%;
	}
}

.wrapper02 {
	width:1000px;
	margin:0 auto;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.wrapper02 {
		width:100%;
		padding:0 4%;
	}
}



/* header
-----------------------------------------------------*/
header {
	width:100%;
	padding:25px 0;
}

header h1.logo {
	margin:0 auto;
	width:356px;
	font-size:1.0rem;
}

header .logo a {
	display:block;
}

header .logo a img {
	width:100%;
}


@media screen and (max-width: 768px) {
header {
	width:100%;
	padding:calc(25 / 750 * 100vw) 4%;
}

header h1.logo {
	width:calc(356 / 750 * 100vw);
}

}

/* mainvisual
-----------------------------------------------------*/
.mainvisual-bg {
	background:#fefced;
}

.mainvisual {
	margin:0 auto;
	width:1300px;
	height:500px;
	background:url(../images/mainvisual.jpg) right 0 no-repeat;
	background-size:contain;
	position:relative;
}

.mainvisual .mainvisual-letter {
	position:absolute;
	top:120px;
	left:200px;
	width:343px;
}

.mainvisual .mainvisual-letter img {
	width:100%;
}

@media screen and (max-width: 768px) {
.mainvisual {
	width:100%;
	height:calc(350 / 750 * 100vw);
}

.mainvisual .mainvisual-letter {
	top:50%;
	transform:translateY(-50%);
	left:30px;
	width:calc(290 / 750 * 100vw);
}
}


/* leaf
-----------------------------------------------------*/
.lead {
	padding:60px 0;
}

.lead h2 {
	margin-bottom:30px;
	line-height:1.4;
	font-size:4.0rem;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	color:#036db7;
	font-weight:normal;
}

.lead_txt {
/*	margin-left:400px;	position:relative;*/	
width:600px;
margin: 0 auto;
}

.lead_txt .img img {
	width:100%;
	margin-bottom:15px;
}

.lead_img {
	position:absolute;
	top:0;
	left:-400px;
	width:473px;
	z-index:1;
}

.lead_img img {
	width:100%;
}

.lead .small {
	position:relative;
	z-index:2;
}

@media screen and (max-width: 768px) {
.lead {
	padding:calc(60 / 750 * 100vw) 0;
}

.lead h2 {
	margin-bottom:calc(30 / 750 * 100vw);
	font-size:1.8rem;
	text-align:center;
}

.lead_txt {
	margin-left:0px;
	width:100%;
}

.lead_img {
	position:static;
	top:0;
	left:0;
	width:60%;
	margin:0 auto calc(20 / 750 * 100vw);
}

}

/* osusume
-----------------------------------------------------*/
.osusume {
	background:#fafff2;
	padding:80px 0;
	text-align:center;
}

.osusume-box {
	width:840px;
	margin:0 auto 30px;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.osusume-box > div {
	width:260px;
}

.osusume-box > div figure img {
	width:100%;
	margin-bottom:15px;
}

.osusume-box > div figure figcaption {
	text-align:center;
	color:#2578bb;
	font-size:2.0rem;
	font-weight:bold;
	line-height:1.5;
}


@media screen and (max-width: 768px) {
.osusume {
	padding:calc(80 / 750 * 100vw) 0;
	text-align:left;
}

.osusume-box {
	width:70%;
	margin:0 auto calc(30 / 750 * 100vw);
	display:block;
}

.osusume-box > div figure img {
	margin-bottom:calc(15 / 750 * 100vw);
}

.osusume-box > div {
	width:100%;
	margin-bottom: calc(40 / 750 * 100vw);
}

.osusume-box > div figure figcaption {
	font-size:1.4rem;
}

}

/* soudan
-----------------------------------------------------*/
.soudan {
	text-align:center;
	padding:80px 0;
}

.soudan img {
	width:890px;
	margin-bottom:25px;
}

.soudan p {
	font-size:2.2rem;
	color:#036db7;
}

@media screen and (max-width: 768px) {
.soudan {
	padding:calc(80 / 750 * 100vw) 0;
}

.soudan img {
	margin-bottom:calc(25 / 750 * 100vw);
}

.soudan p {
	font-size:1.4rem;
}


}


/* preparation
-----------------------------------------------------*/
.preparation {
	background:#fafff2;
	padding:90px 0 20px;
}

.preparation-box01 {
	display:flex;
	margin-bottom:80px;
}

[data-preparation="num01"] > div {
	width:500px;
}

[data-preparation="num01"] .img {
	width:500px;
	display:flex;
	justify-content: center;
	align-items: center;
}

[data-preparation="num01"] .img img {
	width:330px;
}

[data-preparation="num01"] .txt {
	background:#fff;
	border:3px solid #b4d4eb;
	padding:30px 40px;
}

[data-preparation="num01"] .txt p {
	margin-bottom:15px;
}

[data-preparation="num01"] .txt .ttl_nomal {
	margin-bottom:10px;
	text-align:left;
}

[data-preparation="num01"] .txt .ttl_nomal h2 {
	font-size:2.8rem;
}

[data-preparation="num01"] .txt ul li {
	font-size:1.8rem;
	color:#036db7;
	font-weight:600;
	margin-left:30px;
	position:relative;
}

[data-preparation="num01"] .txt ul li::before {
	display:inline-block;
	content:'';
	width:10px;
	height:10px;
	border-radius:50%;
	background:#036db7;
	position:absolute;
	top:11px;
	left:-25px;
}

@media screen and (max-width: 768px) {
.preparation {
	padding:calc(90 / 750 * 100vw) 0 calc(20 / 750 * 100vw);
}

.preparation-box01 {
	display:block;
	margin-bottom:calc(80 / 750 * 100vw);
}

[data-preparation="num01"] > div {
	width:100%;

}

[data-preparation="num01"] .img {
	width:40%;
	display:block;
	margin:0 auto calc(40 / 750 * 100vw);
}

[data-preparation="num01"] .img img {
	width:100%;
}

[data-preparation="num01"] .txt {
	padding:calc(30 / 750 * 100vw) calc(40 / 750 * 100vw);
}

[data-preparation="num01"] .txt p {
	margin-bottom:calc(15 / 750 * 100vw);
	text-align:center;
}

[data-preparation="num01"] .txt .ttl_nomal {
	margin-bottom:calc(10 / 750 * 100vw);
	text-align:center;
}

[data-preparation="num01"] .txt .ttl_nomal h2 {
	font-size:2.8rem;
}

[data-preparation="num01"] .txt ul li {
	font-size:1.8rem;
	color:#036db7;
	font-weight:600;
	margin-left:30px;
	position:relative;
}
[data-preparation="num01"] .txt .ttl_nomal h2 {
	font-size:1.8rem;
}

[data-preparation="num01"] .txt ul li {
	font-size:1.4rem;
	margin-left:calc(30 / 750 * 100vw);
}

[data-preparation="num01"] .txt ul li::before {
	top:6px;
	left:-15px;
}

}

[data-preparation="num02"] div.img {
	width:340px;
}

[data-preparation="num02"] .img img {
	width:247px;
}

[data-preparation="num02"] div.txt {
	width:660px;
	display:flex;
	flex-direction: column;
	justify-content: center;
}

[data-preparation="num02"] .txt .ttl_nomal {
	margin-bottom:10px;
	text-align:left;
}

[data-preparation="num02"] .txt .ttl_nomal h2 {
	font-size:2.8rem;
}

.small {
	font-size:1.4rem;
	color:#036db7;
	margin-bottom:15px;
}

[data-preparation="num02"] .txt p {
	margin-bottom:15px;
}

@media screen and (max-width: 768px) {
[data-preparation="num02"] div.img {
	width:30%;
	margin:0 auto calc(40 / 750 * 100vw);
}


[data-preparation="num02"] .img img {
	width:100%;
}

[data-preparation="num02"] div.txt {
	width:100%;
}

[data-preparation="num02"] .txt .ttl_nomal {
	margin-bottom:calc(10 / 750 * 100vw);
}

[data-preparation="num02"] .txt .ttl_nomal h2 {
	font-size:1.8rem;
}

.small {
	font-size:1.2rem;
}

[data-preparation="num02"] .txt p {
	margin-bottom:calc(15 / 750 * 100vw);
}
}



/* how to
-----------------------------------------------------*/
.howto {
	padding:85px 0 140px;
}

.howto-flow {
	width:100%;
	display:flex;
	flex-wrap: wrap;
	margin-bottom:50px;
}

.howto-flow > div {
	width:33.33%;
	text-align:center;
	position:relative;
}

.howto-flow > div::after {
	display:inline-block;
	content:'';
	background:url(../images/icon-arrow01.jpg) 0 0 no-repeat;
	background-size:contain;
	width:29px;
	height:59px;
	position:absolute;
}

.howto-flow > div:last-child::after {
	display:none;
}

.howto-flow > div .num {
	width:55px;
	height:55px;
	font-size:3.2rem;
	line-height:5.5rem;
	background:#036db7;
	color:#fff;
	border-radius:50%;
	margin:0 auto 20px;
}

.howto-flow > div figure img {
	margin-bottom:25px;
}

.howto-flow > div figure figcaption {
	color:#036db7;
	text-align:center;
	font-size:2.0rem;
	font-weight:bold;
	line-height:1;
	margin-bottom:20px;
}

.howto-flow > div .txt {
	width:250px;
	margin:0 auto;
	text-align:left;
}

.howto-flow > div img {
	margin:0 auto;
}

.howto-flow > div[data-howto="num01"] img {
	width:212px;
}

.howto-flow > div[data-howto="num02"] img {
	width:212px;
}
.howto-flow > div[data-howto="num03"] img {
	width:221px;
}

.howto-flow > div[data-howto="num01"]::after {
	top:130px;
	right:-25px;
}

.howto-flow > div[data-howto="num02"]::after {
	top:130px;
	right:-15px;
}

@media screen and (max-width: 768px) {
.howto {
	padding:calc(85 / 750 * 100vw) 0 calc(140 / 750 * 100vw);
}

.howto-flow {
	display:block;
	margin-bottom:calc(50 / 750 * 100vw);
}

.howto-flow > div {
	width:70%;
	margin:0 auto calc(100 / 750 * 100vw);
}

.howto-flow > div::after {
	width:15px;
	height:30px;
	position:absolute;
	transform:rotate(90deg);
}

.howto-flow > div .num {
	width:25px;
	height:25px;
	font-size:1.5rem;
	line-height:2.5rem;
	margin:0 auto calc(20 / 750 * 100vw);
}

.howto-flow > div figure img {
	margin-bottom:calc(25 / 750 * 100vw);
}

.howto-flow > div figure figcaption {
	font-size:1.4rem;
	margin-bottom:calc(20 / 750 * 100vw);
}

.howto-flow > div .txt {
	width:100%;
}

.howto-flow > div[data-howto="num01"] img,
.howto-flow > div[data-howto="num02"] img,
.howto-flow > div[data-howto="num03"] img {
	width:50%;
}

.howto-flow > div[data-howto="num01"]::after,
.howto-flow > div[data-howto="num02"]::after {
	top:calc(100% + 10px);
	right:47%;
}


}

/* btn
----------------------------------*/
.btn a {
	margin:0 auto;
	display:block;
	width:783px;
}

.btn a img {
	width:100%;
}


.btn a:hover img {
	transform:translateY(-10px);
}

@media screen and (max-width: 768px) {
.btn a {
	width:100%;
}
}

/* footer
-------------------------------------------------------*/
footer {
	background:#a9a9a9;
	padding:55px 0;
}

footer p.copy {
	text-align:center;
	color:#fff;
	font-size:1.1rem;
}

@media screen and (max-width: 768px) {
footer {
	padding:calc(55 / 750 * 100vw) 4%;
}
}



/* animation */

.fade-in { 
	opacity:0;
	transform: translateY(30px);
}

.fade-in[data-scroll="true"] { 
　opacity:0;
  animation-name:fade-in01;
  animation-duration:1s; 
  animation-fill-mode: forwards;
  animation-delay:0.2s;
}
@keyframes fade-in01 {
0% {
 opacity: 0;
}

 100% {
 opacity:1;
 transform: translateY(0px);
 } 
}