@charset "utf-8";

/* ALL */

body .bule_g { background: repeating-linear-gradient( to left, #074aa0, #1565b7 ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent;}

main { position: relative;}

/* font */

.nt_b { font-family: 'NotoSansJP-Bold';}
.nt_m { font-family: 'NotoSansJP-Medium';}
.nt_r { font-family: 'NotoSansJP-Regular';}
.nt_l { font-family: 'NotoSansJP-Light';}

.os_b { font-family: 'OpenSans-Bold';}
.os_sb { font-family: 'OpenSans-SemiBold';}
.os_m { font-family: 'OpenSans-Medium';}
.os_r { font-family: 'OpenSans-Regular';}

.bar_b { font-family: 'Barlow-Bold';}
.bar_sb { font-family: 'Barlow-SemiBold';}
.bar_m { font-family: 'Barlow-Medium';}

.mon { font-family: 'Montserrat';}


/* scroll */

.scroll { position: absolute; top: 630px; left: -60px; height: 10px; rotate: -90deg;}
.scroll p:before { display: inline-block; content: ""; width: 60px; height: 1px; background-color: #000; vertical-align: 4px; margin-right: 11px;}
.scroll p { font-size: 13px; }


/* bnr */

#bnr { position: fixed; top: 250px; right: 0; color: #fff; z-index: 60;}
#bnr .tell img { margin-bottom: 3px;}


/* bread */

/*
#bread{ padding: 5px 50px 113px; font-size: 12px; color: #313131;}
#bread a{ color: #313131; }
#bread li{ position: relative; float: left; padding: 0 20px 0 10px; }
#bread li:first-of-type{ padding-left: 0; }
#bread li:after{ position: absolute; content: "-"; line-height: 1; right: 0; color: #313131; font-size: 12px;  }
#bread li:last-of-type:after{ display: none; }
*/

#bread{ padding: 95px 50px 113px; font-size: 12px; color: #313131;}
#bread a{ color: #313131; }
#bread ol { display: flex;}
#bread li{ padding-left: 10px; }
#bread li:first-of-type{ padding-left: 0; }
#bread li:after{ content: "-"; line-height: 1; color: #313131; font-size: 12px; margin-left: 10px; }
#bread li:last-of-type:after{ display: none; }


/* top */

#top { position: relative; margin-bottom: 80px;}
#top .top_bg { float: right; width: calc( 100% - 50px ); height: 400px; background-position: right bottom; background-size: 100%; background-repeat: no-repeat;}
#top .title { position: absolute; bottom: 0; left: 0; width: 400px; padding: 45px 0 25px; border-radius: 0 50px 0 0; background-color: #fff; text-align: left; margin-left: 50px;}
#top .title h2 { font-size: 20px; color: #000; font-family: 'NotoSansJP-Medium';}
#top .title h2 span { display: block; font-size: 60px; font-family: 'Barlow-SemiBold'; letter-spacing: 0.04em; margin-bottom: 18px; }


/* pagination */

.pagination { display: flex; justify-content: center; text-align: center; }
.pagination a, .pagination span { display: block; color: #a0a0a0; width: 30px; margin: 0 5px; padding: 6px 0; transition: background-color .3s; background-color: #fff; }
.pagination span { background-color: #003597; color: #fff; }
.pagination a.active { background-color: #003597; color: #fff;}
.pagination .prev, .pagination .next { display: inline-block; margin: 0 25px;}
.pagination .page { border: 1px solid #c9c9c9;}


/* btns */

.top_btns { display: block; width: 400px; font-size: 16px; color: #fff!important; line-height: 70px; text-align: center; background-color: #193254; border-radius: 35px; margin: 70px auto 100px;}


/* contact */

#contact { }
#contact .contact01 { padding: 146px 0 89px; background: url(../images/contact/bg_01.jpg) no-repeat center center; background-size: cover;}
#contact .contact01 h3 { font-size: 48px; line-height: 1.391; margin-bottom: 30px;}
#contact .contact01 p { font-size: 18px; margin-bottom: 50px;}
#contact .contact01 a { display: block; font-size: 16px; width: 340px; padding: 23px 0 23px 20px; background: #fde730 url(../images/common/icn_03.svg) no-repeat 20% center; background-size: 24px auto; text-align: center;}

#contact .contact02 { padding: 49px 0 59px; background: url(../images/contact/bg_02.jpg) no-repeat center center; background-size: cover; text-align: center;}
#contact .contact02 h3 { font-size: 36px; margin-bottom: 64px; color: #fff;}
#contact .contact02 h3 .break { display: block; font-size: 36px; margin-bottom: 22px;}
#contact .contact02 h3 .yellow { color: #ffe400;}
#contact .contact02 h3 .big { font-size: 60px; }
#contact .contact02 h3 .circle { display: inline-block; font-size: 20px; width: 158px; border: 1px solid #fff; border-radius: 7px; padding: 9px 0; margin-right: 17px; text-align: center; vertical-align: 14px;}
#contact .contact02 h3 em { background: radial-gradient(circle at center, #fff 20%, transparent 20%) repeat-x right top; background-size: 1em 0.3em; padding-top: 0.4em;}

#contact .contact02 .flex { display: flex; justify-content: space-between;}
#contact .contact02 .flex_l { position: relative; width: 660px; background-color: #fff; border-radius: 10px; padding: 25px 40px 31px;}
#contact .contact02 .flex_l .free { position: absolute; top: -45px; left: -25px; filter: drop-shadow(14px 17px 20px rgba(0,0,0,0.11));}
#contact .contact02 .flex_l h4 { font-size: 18px; width: 100%; padding: 9px 0; margin-bottom: 27px; border: 1px solid #000; border-radius: 3px;}
#contact .contact02 .flex_l .tell { display: inline-block; font-size: 70px; margin-bottom: 20px;}
#contact .contact02 .flex_l .tell img { vertical-align: 2px;}
#contact .contact02 .flex_l .tell span { display: block; font-size: 16px; margin-top: 3px; text-align: left; margin-left: 82px;}
#contact .contact02 .flex_l .btns { display: block; width: 100%; padding: 25px 0 25px 20px; font-size: 20px; border-radius: 35px; background: #fde730 url(../images/common/icn_03.svg) no-repeat 20% center; background-size: 28px auto; text-align: center;}

#contact .contact02 .flex_r {}


/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	
	main { background-image: none;}

	
	/* bread */
	
	#bread{ padding: 65px 5% 25px; font-size: 10px; overflow-x: scroll; word-break: keep-all; white-space: nowrap;}
	#bread ol { }
	#bread li:after{ font-size: 10px;  }
	
	/* scroll */

	.scroll { display: none;}
	
	/* bnr */

	#bnr { width: 100%; position: fixed; top: auto; bottom: 0; right: 0; display: flex; justify-content: space-between; align-items: end; text-align: center; opacity: 0; transition: 0.2s;}
	
	#bnr .tell { width: 70%; display: block; background: repeating-linear-gradient( to left, #074aa0, #1565b7 ); border-radius: 20px 0 0 0; padding: 10px 0 8.5px;}
	#bnr .tell p { font-size: 22px;}
	#bnr .tell p img { margin-right: 4px;}
	#bnr .tell p span { display: block;}
	#bnr .tell p span:nth-of-type(1) { font-size: 10px; margin-bottom: 6px;}
	#bnr .tell p span:nth-of-type(2) { font-size: 8px; margin-top: 4.5px; margin-left: 25px;}
	#bnr .tell p em { }
		
	#bnr .line { width: 29.5%; display: block; background: url(../images/common/icn_04.svg) no-repeat center 8px / 25.5px, repeating-linear-gradient( to left, #81e288, #35bf3f ); border-radius: 0 20px 0 0; padding: 38px 0 8.5px;}
	#bnr .line p { font-size: 10px; line-height: 1.2;}
	
	/* top */

	#top { margin-bottom: 30px;}
	#top .top_bg { width: 80%; height: 200px; background-position: left bottom; background-size: cover;}
	#top .title { position: absolute; bottom: 0; left: 0; width: 262px; padding: 15px 0 8px; margin-left: 5%;}
	#top .title h2 { font-size: 14px;}
	#top .title h2 span { display: block; font-size: 45px; margin-bottom: 6px; }
	
	
	/* pagination */

	.pagination a { display: block; color: #a0a0a0; width: 25px; margin: 0 7.5px; padding: 5.5px 0; transition: background-color .3s; font-size: 12px;}
	.pagination a.active { background-color: #003597; color: #fff;}
	.pagination .prev, .pagination .next { display: inline-block; margin: 5px 16.5px 0; padding: 0;}
	.pagination .prev img, .pagination .next img { width: 10px; height: 16px;}
	.pagination .page { border: 1px solid #c9c9c9;}
	.pagination .page.active { border: 0px;}
	
	
	/* btns */

	.top_btns {  width: 100%; font-size: 13px; line-height: 60px; margin: 40px auto 50px;}
	
	
	/* contact */
	
	#contact { }
	#contact .contact01 { padding: 83px 0 50px; background: url(../images/contact/bg_01_sp.jpg) no-repeat center center; background-size: cover;}
	#contact .contact01 h3 { font-size: 35px; line-height: 1.286;}
	#contact .contact01 p { font-size: 13px; line-height: 1.692; margin-bottom: 30px;}
	#contact .contact01 a { font-size: 13px; width: 100%; padding: 24px 0 24px 20px; background: #fde730 url(../images/common/icn_03.svg) no-repeat 30% center; background-size: 22.5px auto;}
	
	#contact .contact02 { padding: 50px 0; background: url(../images/contact/bg_02_sp.jpg) no-repeat center center; background-size: cover;}
	#contact .contact02 h3 { font-size: 24px; margin-bottom: 36px;}
	#contact .contact02 h3 .break { font-size: 20px; margin-bottom: 15px; line-height: 1.5;}
	#contact .contact02 h3 .big { display: block; font-size: 40px; margin-bottom: 18px;}
	#contact .contact02 h3 .circle { display: block; font-size: 12px; width: 105px; padding: 3px 0; margin: 0 auto 12.5px;  border-radius: 4px;}
	#contact .contact02 h3 em { background: radial-gradient(circle at center, #fff 20%, transparent 20%) repeat-x right top; background-size: 1em 0.3em; padding-top: 0.1em;}
	
	#contact .contact02 .flex { display: block;}
	#contact .contact02 .flex_l { width: 100%; padding: 20px 12.5px; margin-bottom: 20px;}
	#contact .contact02 .flex_l .free { width: 90px; height: auto; top: -37px; left: -12px;}
	#contact .contact02 .flex_l h4 { font-size: 13px; padding: 5px 0 5px 40px; margin-bottom: 23.5px;}
	#contact .contact02 .flex_l .tell { display: inline-block; font-size: 38px; margin-bottom: 19px;}
	#contact .contact02 .flex_l .tell img { width: 49px; height: auto; vertical-align: 2px;}
	#contact .contact02 .flex_l .tell span { font-size: 11px; margin-top: 3px;  margin-left: 50px;}
	#contact .contact02 .flex_l .btns { padding: 24px 0 24px 20px; font-size: 13px;background: #fde730 url(../images/common/icn_03.svg) no-repeat calc(50% - 110px) center; background-size: 28px auto;}
	
	#contact .contact02 .flex_r img { width: 100%; height: auto;}









}