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

html{font-size: 6.25%; scroll-behavior: smooth;}
body{ font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif; background-color: #fff}
.show-pc {display: inline}
.show-sp {display: none}
img.show-pc {display: block}
img.show-sp {display: none}

@media screen and (max-width: 960px) {
	.show-pc {display: none}
	.show-sp {display: inline}
	img.show-pc {display: none}
	img.show-sp {display: block}
}

#container{ width: 100%; height: 100%; box-sizing: border-box; }
div,section{ box-sizing: border-box; }
p{ font-size: 16rem;}
#container a{text-decoration: none; transition: 0.3s;}
#container a:hover{opacity: 0.5;}
small {font-size: 12px; color: #333;}
hr { display: block; border: none; background-color: #333; height: 1px; margin: 10px auto;}
sup {font-size: 50%; vertical-align: text-top}

@media screen and (max-width: 960px) {
}

/* header */
#header{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; width: 100%; height: 54px; position: fixed; z-index: 999; top:0; left: 0; background-color: rgba(255,255,255,0.8); }
.head-left{ width: 33%; height: 35%; text-align: left; margin-left: 1.5%;}
.head-left a{ display: inline-block; height: 100%;}
.head-left a img{ display: block; width: auto; max-width: 100%; height: 100%;}
.head-right{ width: 63%; height: 35%; text-align: right; margin-right: 1.5%;}
.head-right a{ display: inline-block; height: 100%;}
.head-right a img{ display: block; width: auto; max-width: 100%; height: 100%;}


@media screen and (max-width: 960px) {
	#header{ width: 100%; height: 44px; margin: 0; border-width: 0 0 2px 0;}
	.head-left{ height: 30%;}
	.head-right{ height: 26%;}
}

/* contents */
#contents{width: 100%; padding-top: 56px;}
.box-inner {width: 90%; max-width: 1260px; margin: 0 auto;}

@media screen and (max-width: 960px) {
	#contents{ width: 100%; margin: 0 auto; padding-top: 46px;}
}

/* Main */
#contents_main{ display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1620px; height: 50vw; max-height: 90vh; margin: 0 auto; background: url('../img/main_bg.png') no-repeat center / cover; }
article.main {width: 90%; max-width: 1260px; margin: 0 auto;}
article.main h2 { display: block; text-align: center; margin-bottom: 5vh;}
article.main h2 img { display: block; margin: 0 auto; max-height: 72vh;}
article.main h3 { display: block; text-align: center;}
article.main h3 img { display: block; margin: 0 auto; max-height: 10vh;}

@media screen and (max-width: 960px) {
	#contents_main{ height: 70vw;}
	article.main h2 {margin-bottom: 3vh;}
	article.main h2 img { max-width: 45vw}
	article.main h3 {}
	article.main h3 img { max-width: 90vw}
}

/* Contents read */
#contents_read{ padding: 40px 0; }
#contents_read h2{display: block; font-size: 36rem; font-weight: normal; text-align: center; margin: 40px auto}
#contents_read h2 strong{display: inline-block; font-weight: bold; position: relative;}
#contents_read h2 strong::before{content: ''; display: block; width: 100%; height: 20px; background-color: #ffe113; position: absolute; bottom: 0; z-index: -1;}
#contents_read p{ display: block; text-align: center; line-height: 2;}

.list-nayami { display: flex; justify-content: space-around; flex-wrap: wrap; margin: 40px auto}
.list-nayami li { display: block; width: 30%; border: 6px solid #ccc; border-radius: 20px; padding: 20px; box-sizing: border-box;}
.list-nayami li img { display: block; margin: 0 auto 10px auto; height: 80px; max-width: 100%; width: auto;}
.list-nayami li p { line-height: 1.4!important; font-size: 18rem}

@media screen and (max-width: 960px) {
	#contents_read h2{font-size: 30rem; margin: 0 auto 20px auto}
	#contents_read p{ text-align: left; line-height: 1.8;}
	
	.list-nayami { display: block; }
	.list-nayami li { display: flex; justify-content: space-around; flex-wrap: wrap; align-items: center; width: 100%; padding: 10px; margin-bottom: 10px}
	.list-nayami li img { height: auto; width: 20%; margin: 0 auto}
	.list-nayami li p { display: block; width: 70%; font-size: 15rem}
}

/* Contents1 */
#contents1{ padding: 40px 0; background: linear-gradient(rgba(73, 162, 240, 1) 0%, rgba(0, 91, 172, 1) 100%);}
#contents1 h3{ display: block; color: #fff; text-align: center; font-size: 36rem; margin: 40px auto}

.list-about { display: flex; justify-content: center; flex-wrap: wrap; margin: 40px auto}
.list-about li { display: block; width: 20%; }
.list-about li img { display: block; width: 80%; }
#contents1 p { display: block; color: #fff; text-align: center;}
#contents1 p.text-big { font-size: 28rem; font-weight: bold;}

.link-contact { text-align: center; margin: 60px auto}
.link-contact a {display: inline-block; color: #fff; font-weight: bold; font-size: 16rem; padding: 20px 120px; background: #009eec url('../img/contact-icon.png') no-repeat left 5% center/ auto 50%; border: 3px solid #fff; border-radius: 100px; box-sizing: border-box; box-shadow: 0 5px 20px rgba(0,0,0,0.5); animation: leftMove 0.5s ease-in-out infinite alternate;}
@keyframes leftMove {
  from { background-position: left 5% center}
  to { background-position: left 7% center}
}
.link-contact a strong {display: block; font-size: 24rem; }
.link-contact a:hover {background: #009eec url('../img/contact-icon.png') no-repeat left 7% center/ auto 50%; box-shadow: 0 5px 20px rgba(255,255,255,1); opacity: 1!important; animation: none;}

.txt_yellow {color: #ffe113}

@media screen and (max-width: 960px) {
	#contents1 h3{ font-size: 24rem; margin: 0 auto 10px auto; width: 90%}
	.list-about li { width: 25%; }
	.list-about li img { width: 100%; }
	#contents1 p.text-big { font-size: 20rem; }
	
	.link-contact { margin: 30px auto}
	.link-contact a {display: block; font-size: 16rem; padding: 15px 10px 15px 60px; background: #009eec url('../img/contact-icon.png') no-repeat left 5% center/ auto 40%; border-radius: 20px; }
	.link-contact a strong {font-size: 18rem; }
	.link-contact a:hover {background: #009eec url('../img/contact-icon.png') no-repeat left 7% center/ auto 40%;}
}

/* Contents2 */
#contents2{ padding: 160px 0 40px 0; background: url('../img/advan_bg.png') no-repeat center top/ contain;}
#contents2 h3{ display: block; text-align: center; font-size: 32rem; margin: 40px auto}
#contents2 h3 strong{ display: block; font-size: 62rem; color: #005bac; font-family: "Roboto", sans-serif;}

.list-advan { display: flex; justify-content: center; flex-wrap: wrap; margin: 40px auto 120px auto; width: 60vw; min-width: 80%}
.list-advan li { display: block; width: 25%; }
.list-advan li img { display: block; width: 100%; }

#contents2 h5 { display: block; width: 50vw; min-width: 50%; margin: 20px auto; padding: 10px; text-align: center; color: #fff; font-weight: bold; font-size: 24rem; background-color: #005bac;}
#contents2 h4 { display: block; margin: 0 auto 40px auto; text-align: center; font-weight: bold; font-size: 36rem;}

.block-advan { display: flex; justify-content: space-between;; flex-wrap: wrap; margin: 40px auto}
.block-advan dl { display: block; width: 48%; margin-bottom: 30px;}
.block-advan dl dt { display: flex; justify-content: flex-start; align-items: center; background-size: cover; height: 260px; width: auto; color: #fff; font-weight: bold; padding: 20px; box-sizing: border-box; font-size: 22rem; margin-bottom: 10px;}
.block-advan dl dd { }
.block-advan dl dd h6 { font-size: 15rem; font-weight: normal; margin-bottom: 10px; padding-bottom: 5px; line-height: 1.6; border-bottom: 1px solid #ccc;}
.block-advan dl dd h6 strong { color: #005bac;}
.block-advan dl dd p { display: block; font-size: 13rem; margin-bottom: 5px; padding-left: 18px; position: relative; color: #333}
.block-advan dl dd p::before { content:''; background-color: #2681d2; width: 10px; height: 10px; position: absolute; left: 3px; top: 5px;}
.block-advan dl dd p::after { content:''; background-color: #ffe113; width: 10px; height: 10px; position: absolute; left: 3px; top: 4px; clip-path: polygon(0 30%, 20% 30%, 36% 66%, 80% 0, 100% 0, 36% 100%);}

@media screen and (max-width: 960px) {
	#contents2{ padding: 40px 0;}
	#contents2 h3{ font-size: 18rem; margin: 40px auto 20px auto}
	#contents2 h3 strong{ font-size: 46rem;}
	
	.list-advan { margin: 0 auto 20px auto; width: 100%; }
	.list-advan li { }
	.list-advan li img { }
	
	#contents2 h5 { width: 100%; font-size: 15em; margin: 40px auto 5px auto; padding: 10px 5px; }
	#contents2 h4 { font-size: 20rem;}
	
	.block-advan { display: block; }
	.block-advan dl { width: 100%;}
	.block-advan dl dt {font-size: 18rem; height: 180px;}
}

/* Contact */
#contact{ padding: 40px 0; background: linear-gradient(rgba(73, 162, 240, 1) 0%, rgba(0, 91, 172, 1) 100%);}
#contact h3{ display: block; color: #fff; text-align: center; font-size: 36rem; margin: 40px auto 0 auto}

@media screen and (max-width: 960px) {
	#contact{ }
	#contact h3{ font-size: 20rem; margin: 20px auto 0 auto}
}

/* Footer */
#footer{padding: 60px 0 0 0; border-top: 1px solid #111}
#footer .box-inner{}

#footer h3{  display: block; text-align: center; font-size: 32rem; margin: 0 auto 40px auto}
.foot-link { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 20px auto 60px auto; border-bottom: 1px solid #ccc; padding-bottom: 20px;}
.foot-link a { display: block; width: 24%; text-align: center; box-sizing: border-box; font-size: 15rem; font-weight: bold; color: #005bac;}
.foot-link a img { display: block; width: 100%; box-sizing: border-box; border: 1px solid #005bac; margin-bottom: 5px;}

.foot-company { text-align: center;}
.foot-catch {display: block; margin-bottom: 20px;}
.foot-company a { display: inline-block; max-width: 40%; margin-bottom: 40px;}
.foot-company a img { display: block; width: 100%; height: auto }
.foot-read { display: block; color: #666; margin-bottom: 60px;}
.foot-read span{ display: inline-block; }
.foot-read span::after { content: '／'; display: inline-block; margin: 0 5px; }
.foot-read span:last-child::after { content:none;}

p#copy {display: block; padding: 10px 0; color: #666; font-size: 11rem; text-align: center}

@media screen and (max-width: 960px) {
	#footer .box-inner{display: block;}
	#footer h3{ font-size: 20rem; margin: 0 auto 20px auto}
	.foot-link a { width: 49%; font-size: 12rem; margin-bottom: 10px}
	
	.foot-company a { max-width: 90%; margin-bottom: 20px;}
	.foot-read { margin-bottom: 20px;}
	.foot-read span{ display: block; font-size: 13rem; border-bottom: 1px solid #ccc}
	.foot-read span::after { content: none; }
}

/* スクロール時のアニメーション　*/
.fadein {opacity: 0; transition: 1s 0.25s;}
.fade_action {opacity: 1;}