@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;500;700&family=Noto+Sans+JP:wght@300;400;500;700;900&&display=swap');

body{
 font-family: "Noto Serif", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
 color: #333333;
 -webkit-text-size-adjust: 100%;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 background-color: #fff;
}

/* PC */
body{
 padding: 71px 0 0;
}
.spOnly {
		display: none;
}
header{
  width: 100%;
  height: 71px;
  background: #fff;
 position: absolute;
 top: 0;
 z-index: 66;
 right: 0;
 left: 0;
}
#header {
 margin: auto;
 width: 1100px;
 transition: opacity 0.2s ease-in;
 opacity: 1;
 position: relative;
}
#header.scroll {
  opacity: 0;
}
h2 {
  position: absolute;
  top: 6px;
  left: 0;
  z-index: 100;
}
h2 img {
 width: 389px;
 height: auto;
}
picture{
 margin: 0;
 padding: 0;
 width: 100%;
}
#fv{
 width: 100%;
 height: auto;
 position: relative;
}
#fv .fvBg{
 margin: auto;
 width: 100%;
 height: auto;
 position: relative;
 top: 0;
 left: 0;
 right: 0;
 z-index: 2;
 pointer-events: none;
}
#fv .fvBg.fvBg2{
 position: absolute;
 z-index: 1;
}
#fv .fvBg img,
#fv .fvBg.fvBg2 img{
 width: 100%;
 height: auto;
}
#fv .fvBgSp{
 display: none;
}
#fv .fvBox{
 margin: auto;
 padding: 7vw 0 0;
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 z-index: 3;
}
#fv h1{
 margin: 0 auto;
 padding: 13px 0 11px;
 width: 435px;
 text-align: center;
 border-radius: 40px;
 background-color: #b29d31;
 background-image: url(../images/book.png);
 background-position: left 45px top 9px;
 background-size: 59px auto;
 background-repeat: no-repeat;
 box-shadow: 3px 3px 7px rgba(28,67,135,0.45);
 overflow: hidden;
 position: relative;
}
.webp #fv h1{
 background-image: url(../images/book.webp);
}
.no-webp #fv h1{
 background-image: url(../images/book.png);
}
#fv h1 span{
 margin: 0 auto;
 padding: 0 0 0 62px;
 font-size: 40px;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #fff;
 letter-spacing: 0.2vw;
 text-shadow: 2px 2px 7px rgba(88,74,3,0.6);
 display: inline-block;
}
#fv .fv{
 margin: 56px auto 40px;
 font-size: 37px;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #fff;
 letter-spacing: 0.2vw;
 text-shadow: 3px 3px 7px rgba(88,74,3,0.45);
}
#fv .fv i{
 font-weight: 300;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#fv .fv span{
 margin: 0 -12px;
 font-size: 28px;
 font-weight: 700;
 display: inline-block;
}
#fv .fv2{
 padding: 0 0 50px;
 font-size: 45px;
 line-height: 122%;
 text-align: center;
 font-weight: 700;
 color: #ffff00;
 letter-spacing: 0.2vw;
 text-shadow: 3px 3px 7px rgba(88,74,3,0.45);
}
.bt{
 margin: 0 auto;
 width: 404px;
 border: 1px solid #4f70a8;
 box-shadow: 3px 3px 7px rgba(13,33,68,0.25);
 position: relative;
 transition: .3s;
}
.bt:hover{
 box-shadow: 0px 0px 7px rgba(13,33,68,1);
}
.bt a{
 display: block;
 overflow: hidden;
}
.bt a span {
 position: relative;
 z-index: 3;
 padding: 22px 0 20px 78px;
 width: 100%;
 font-size: 26px;
 line-height: 100%;
 text-align: left;
 font-weight: 700;
 color: #fff;
 letter-spacing: 0.05vw;
 background-image: url(../images/mail.png),url(../images/arrow.png);
 background-position: left 34px top 24px,right 20px top 27px;
 background-size: 28px auto,52px auto;
 background-repeat: no-repeat,no-repeat;
 display: block;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 transition: .3s;
}
.webp .bt a span {
 background-image: url(../images/mail.webp),url(../images/arrow.webp);
}
.no-webp .bt a span {
 background-image: url(../images/mail.png),url(../images/arrow.png);
}
.bt a:hover {
  opacity: 1;
}
.bt a:hover span {
 background-position: left 34px top 24px,right 10px top 27px;
}
.bt a span::after {
	animation: 6s 3s shine ease-in-out infinite;
 animation-fill-mode: backwards;
	background: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(255,255,255,.5) 50%, rgba(255, 255, 255, 0) 75%);
	content: '';
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	transform: skewX(-15deg);
	width: 100%;
}
@keyframes shine {
	5% {
		left: 100%;
	}
	6% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}
.bt a:before {
 content: "";
 width: 100%;
 height: 100%;
 position: absolute;
 z-index: -1;
 top: 0;
 left: 0;
 transition: 0.3s ease-in-out;
 background: #AA881A;
 background: linear-gradient(90deg, #ccb64a 0%, #AA881A 100%);
}
.bt a:after {
 content: "";
 width: 100%;
 height: 100%;
 position: absolute;
 z-index: -2;
 top: 0;
 left: 0;
 background: #ccb64a;
 background: linear-gradient(90deg, #baa43a 0%, #dfca67 40%, #ccb64a 100%);
}
.bt a:hover:before {
  opacity: 0;
}

#consept{
 margin: 0 auto;
 padding: 86px 0 110px;
 width: 1000px;
 background-image: url(../images/conseptBg.png),url(../images/consept.png);
 background-position: center top -20px,right top;
 background-size: 940px auto,698px auto;
 background-repeat: no-repeat,no-repeat;
 position: relative;
 z-index: 2;
}
.webp #consept{
 background-image: url(../images/conseptBg.webp),url(../images/consept.webp);
}
.no-webp #consept{
 background-image: url(../images/conseptBg.png),url(../images/consept.png);
}
h3{
 font-size: 30px;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #8d780f;
 position: relative;
}
h3:after{
 margin: auto;
 content: "";
 width: 52px;
 height: 3px;
 background-color: #8d780f;
 position: absolute;
 bottom: -10px;
 left: 0;
 right: 0;
}
#consept p{
 margin: 0;
 padding: 65px 0 0;
 width: 100%;
 font-size: 25px;
 line-height: 42px;
 text-align: center;
 font-weight: 500;
 position: relative;
}
#consept p span{
 padding: 0 2px;
 display: inline-block;
 position: relative;
}
#consept p span::before{
 content: "";
 background: linear-gradient(rgba(255,255,255,0) 60%, #ffec1b 60%, #ffec1b 100%);
 width: 0%;
 height: 40px;
 position: absolute;
 bottom: 2px;
 left: 0;
 z-index: -1;
}
#consept p span.line1.is-inview::before{
	animation-name: line;
	animation-delay: 1.5s;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
 transition-timing-function: ease-out;
}
#consept p span.line2.is-inview::before{
	animation-name: line;
	animation-delay: 1.5s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
 transition-timing-function: ease-out;
}
#consept p span.line3.is-inview::before{
	animation-name: line;
	animation-delay: 1.5s;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
 transition-timing-function: ease-out;
}
@keyframes line {
	1% {
  width: 0%;
	}
	100% {
  width: 100%;
	}
}
#consept p span strong{
 color: #e10202;
}

#service{
 padding: 260px 0 56px;
 width: 100%;
 background-color: #f2f4f8;
 background-image: url(../images/serviceBg.jpg);
 background-position: left top;
 background-size: 100% auto;
 background-repeat: no-repeat;
}
.webp #service{
 background-image: url(../images/serviceBg.webp);
}
.no-webp #service{
 background-image: url(../images/serviceBg.jpg);
}
#service .inner{
 margin: 0 auto;
 padding: 85px 0 0;
 width: 1000px;
 background-image: url(../images/service.png);
 background-position: left top;
 background-size: 638px auto;
 background-repeat: no-repeat;
}
.webp #service .inner{
 background-image: url(../images/service.webp);
}
.no-webp #service .inner{
 background-image: url(../images/service.png);
}
#service .inner .sBox{
 margin: 95px auto 0;
 padding: 70px 0 40px;
 width: 100%;
 background-color: #fff;
 border-radius: 10px;
 border: 2px solid #8d780f;
 position: relative;
}
#service .inner .sBox::before{
	animation: 5s 0s sBoxBg ease-in-out infinite;
 animation-fill-mode: backwards;
 content: "";
 width: 100%;
 background-image: url(../images/service1Bg.jpg);
 background-position: right 5% bottom 7%;
 background-size: 84% auto;
 background-repeat: no-repeat;
 height: 100%;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 0;
}
.webp #service .inner .sBox::before{
 background-image: url(../images/service1Bg.webp);
}
.no-webp #service .inner .sBox::before{
 background-image: url(../images/service1Bg.jpg);
}
@keyframes sBoxBg {
	1% {
		opacity: 1;
	}
	50% {
		opacity: 0.2;
	}
	100% {
		opacity: 1;
	}
}
#service .inner .sBox h4{
 margin: auto;
 padding: 13px 0 15px 60px;
 width: 390px;
 border-radius: 35px;
 background-color: #b29d31;
 font-size: 36px;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #fff;
 letter-spacing: 0.2vw;
 background-image: url(../images/book.png);
 background-position: left 42px top 8px;
 background-size: 56px auto;
 background-repeat: no-repeat;
 text-shadow: 3px 3px 7px rgba(88,74,3,0.45);
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 position: absolute;
 top: -34px;
 left: 0;
 right: 0;
 z-index: 1;
}
.webp #service .inner .sBox h4{
 background-image: url(../images/book.webp);
}
.no-webp #service .inner .sBox h4{
 background-image: url(../images/book.png);
}
#service .inner .sBox .sBoxT{
 margin: 0 auto;
 padding: 14px 0;
 width: 873px;
 font-size: 38px;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #fff;
 background-image: url(../images/serviceT.jpg);
 background-size: contain;
 background-repeat: no-repeat;
 font-feature-settings: "palt";
 letter-spacing: 0.3vw;
 position: relative;
 z-index: 1;
}
.webp #service .inner .sBox .sBoxT{
 background-image: url(../images/serviceT.webp);
}
.no-webp #service .inner .sBox .sBoxT{
 background-image: url(../images/serviceT.jpg);
}
#service .inner .sBox p{
 margin: 0 auto;
 padding: 25px 0 0;
 width: 745px;
 font-size: 28px;
 line-height: 196%;
 text-align: left;
 font-weight: 500;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 position: relative;
 z-index: 1;
 text-shadow: 2px 2px 1px rgba(255,255,255,1);
}
#service .inner .sBox p span{
 padding: 0 1vw 0 0;
 color: #8d780f;
 display: inline-block;
}
#service .inner .lBox{
 margin: 86px auto 0;
 padding: 76px 0 26px;
 width: 100%;
 border-radius: 10px;
 border: 2px solid #b80000;
 background-color: #fff;
 position: relative;
}
#service .inner .lBox .toku{
 margin: auto;
 padding: 38px 0 0;
 width: 116px;
 height: 116px;
 font-size: 38px;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #fff;
 border-radius: 50%;
 background-color: #b80000;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 position: absolute;
 top: -58px;
 left: 0;
 right: 0;
}
#service .inner .lBox h4{
 padding: 0 0 34px;
 font-size: 38px;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #b80000;
 font-feature-settings: "palt";
 letter-spacing: 0.3vw;
}
#service .inner .lBox img{
 float: right;
 margin: 0 4% 0 0;
 width: 46%;
 height: auto;
}
#service .inner .lBox .lBoxTx{
 float: left;
 margin: 0 0 0 5%;
 width: 45%;
 font-size: 26px;
 line-height: 211%;
 text-align: left;
 font-weight: 400;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#service .inner .lBox .lBoxTx span{
 padding: 0 1vw 0 0;
 color: #e10202;
 display: inline-block;
}
#service .inner .pBox{
 margin: 46px auto 0;
 padding: 38px 0 30px;
 width: 100%;
 border-radius: 10px;
 border: 2px solid #1c4387;
 background-color: #fff;
}
#service .inner .pBox h4{
 padding: 0 0 14px;
 font-size: 38px;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #1c4387;
 font-feature-settings: "palt";
 letter-spacing: 0.1vw;
}
#service .inner .pBox h4 span{
 padding: 0 0 0 1vw;
 font-size: 36px;
 display: inline-block;
}
#service .inner .pBox p{
 margin: 0 auto;
 padding: 0;
 width: 58%;
 font-size: 26px;
 line-height: 211%;
 text-align: left;
 font-weight: 400;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#service .inner .pBox p span{
 padding: 0 1vw 0 0;
 font-size: 20px;
 color: #1c4387;
 display: inline-block;
 position: relative;
 top: -0.15vw;
}
#service .inner .pBox p.nomal{
 width: 100%;
 font-size: 24px;
 color: #666;
 text-align: center;
}
#service .inner .pBox p img{
 margin: 0 0 0 -1%;
 width: 209px;
 height: auto;
 position: relative;
 top: -0.3vw;
}
#service .inner .pBox p img.bound {
	animation: 3.5s 0s bound ease-in infinite;
}
@keyframes bound {
	79%,
	90%,
	97%,
	100% {
		-webkit-transform: translate(0);
		        transform: translate(0);
	}
	85% {
		-webkit-transform: translateX(15px);
		        transform: translateX(15px);
	}
	94% {
		-webkit-transform: translateX(4px);
		        transform: translateX(4px);
	}
	99% {
		-webkit-transform: translateX(2px);
		        transform: translateX(2px);
	}
}
#service .inner .bt{
 margin: 37px auto 0;
 border: 1px solid #fff;
 box-shadow: 3px 3px 7px rgba(13,33,68,0.25);
}
#service .inner .reco{
 padding: 95px 0 0;
}
#service .inner .reco .recoT{
 margin: 0 auto;
 padding: 5px 0 10px;
 width: 880px;
 font-size: 50px;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #1c4387;
 letter-spacing: 0.3vw;
 background-image: url(../images/slashL.png),url(../images/slashR.png);
 background-position: left top,right top;
 background-size: auto 100%,auto 100%;
 background-repeat: no-repeat,no-repeat;
}
.webp #service .inner .reco .recoT{
 background-image: url(../images/slashL.webp),url(../images/slashR.webp);
}
.no-webp #service .inner .reco .recoT{
 background-image: url(../images/slashL.png),url(../images/slashR.png);
}
#service .inner .reco .rBox{
 padding: 28px 0 0;
 width: 100%;
}
#service .inner .reco .rBox li{
 float: left;
 margin: 0 0 57px;
 padding: 45px 0 45px;
 width: 46.6%;
 font-size: 26px;
 line-height: 138%;
 text-align: center;
 font-weight: 500;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 background-color: #fff;
 box-shadow: 3px 3px 12px rgba(0,0,0,0.35);
 position: relative;
}
#service .inner .reco .rBox li:nth-child(2n){
 float: right;
}
#service .inner .reco .rBox li span{
 padding: 0 2px;
 background: linear-gradient(rgba(255,255,255,0) 60%, #dde3ed 60%, #dde3ed 100%);
 display: inline-block;
}
#service .inner .reco .rBox li img{
 width: 54px;
 height: auto;
 position: absolute;
 top: -15px;
 left: 18px;
 pointer-events: none;
}

#pref{
 margin: 0 auto;
 padding: 105px 0 85px;
 width: 1000px;
}
#pref h3{
 margin: 0 0 82px;
 font-size: 40px;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #1c4387;
}
#pref h3:after{
 display: none;
}
#pref .prBox{
 float: left;
 margin: 0 0 60px;
 padding: 42px 0 15px;
 width: 47.7%;
 border: 1px solid #cfcfcf;
 position: relative;
}
#pref .prBox.p2{
 float: right;
}
#pref .prBox.p3{
 float: none;
 width: 100%;
}
#pref .prBox h5{
 margin: auto;
 padding: 12px 0 12px;
 width: 308px;
 font-size: 26px;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #fff;
 border-radius: 5px;
 background-color: #1c4387;
 position: absolute;
 top: -25px;
 left: 0;
 right: 0;
}
#pref .prBox p{
 margin: 0;
 padding: 0 0 0 5%;
 width: auto;
 font-size: 22px;
 line-height: 181%;
 text-align: left;
 font-weight: 400;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#pref h4{
 padding: 26px 0 0;
 font-size: 34px;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #1c4387;
}
#pref .lineup{
 padding: 36px 0 104px;
 width: 100%;
}
#pref .lineup div{
 font-size: 24px;
 line-height: 229%;
 text-align: left;
 font-weight: 400;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 letter-spacing: 0.1vw;
}
#pref .lineup span{
 padding: 15px 0 0;
 font-size: 18px;
 line-height: 200%;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 display: inline-block;
}
#pref .mt{
 padding: 40px 0 70px;
 width: 100%;
 background-color: #eff2f7;
}
#pref .mt h4{
 font-size: 34px;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #1c4387;
 text-shadow: 4px 4px 6px rgba(102,102,102,0.40);
}
#pref .mt p{
 padding: 40px 0 0;
 width: 100%;
 font-size: 22px;
 line-height: 200%;
 text-align: center;
 font-weight: 500;
}

#cta{
 margin: 0 auto;
 padding: 80px 0 0;
 width: 1120px;
 height: 543px;
 position: relative;
 background-image: url(../images/ctaBg.jpg);
 background-position: center top;
 background-size: contain;
 background-repeat: no-repeat;
 text-align: center;
}
.webp #cta{
 background-image: url(../images/ctaBg.webp);
}
.no-webp #cta{
 background-image: url(../images/ctaBg.jpg);
}
#cta img{
 margin: 0 auto 46px;
 width: 794px;
 height: auto;
}

#image{
 margin: 114px 0 0;
 width: 100%;
}
#image img{
 width: 100%;
 height: auto;
  transition: 1s;
}

#company{
 padding: 80px 0 110px;
 width: 100%;
 background-color: #f7f7f7;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#company h6{
 margin: 0 auto;
 padding: 13px 0 15px;
 width: 394px;
 font-size: 28px;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #fff;
 border-radius: 30px;
 background-color: #1c4387;
}
#company p{
 margin: 0;
 padding: 48px 0 60px;
 width: 100%;
 font-size: 18px;
 line-height: 150%;
 text-align: center;
 font-weight: 400;
}
#company p a{
 color: #0000ff;
 text-decoration: underline;
}
#company p a:hover{
 color: #0000ff;
 text-decoration: none;
 opacity: 1;
}
#company .ban{
 margin: 0 auto;
 width: 441px;
 background-color: #fff;
}
#company .ban img{
 width: 100%;
 height: auto;
}

#footer{
 padding: 20px 0 20px;
 width: 100%;
 font-size: 12px;
 line-height: 100%;
 text-align: center;
 font-weight: 400;
 color: #fff;
 background-color: #333333;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#gototop {
 position: fixed;
 width: 70px;
 height: 70px;
 right: 30px;
 bottom: 30px;
 transition: 0.2s;
 z-index: 11;
}
#gototop:hover {
  transform: translateY(-10px);
  transition: 0.2s;
}



@media screen and (min-width: 781px){
a[href^="tel:"] {
    pointer-events: none;
}
}


@media screen and (max-width: 1150px){
header{
  height: 6.1vw;
}
#header {
 width: 95.8%;
}
h2 {
  top: 0.52vw;
}
h2 img {
 width: 100%;
}
#fv .fvBox{
 padding: 7vw 0 0;
}
#fv h1{
 padding: 1.15vw 0 0.95vw;
 width: 37.8vw;
 border-radius: 4vw;
 background-position: left 12% top 0.8vw;
 background-size: 5.1vw auto;
}
#fv h1 span{
 padding: 0 0 0 14.4%;
 font-size: 3.5vw;
}
#fv .fv{
 margin: 4.88vw auto 3.45vw;
 font-size: 3.22vw;
}
#fv .fv span{
 margin: 0 -1.05%;
 font-size: 2.44vw;
}
#fv .fv2{
 padding: 0 0 4.38vw;
 font-size: 3.92vw;
}


}
@media screen and (max-width: 1050px){
.bt{
 width: 38.47%;
}
.bt a span {
 padding: 2.1vw 0 1.9vw 19.2%;
 font-size: 2.48vw;
 background-position: left 9% top 2.3vw,right 5.8% top 2.3vw;
 background-size: 2.6vw auto,4.8vw auto;
}
.bt a:hover span {
 background-position: left 9% top 2.3vw,right 2.5% top 2.3vw;
}

#consept{
 padding: 8.2vw 0 10.6vw;
 width: 95%;
 background-position: center top -1.2vw,right top;
 background-size: 89.5% auto,69.8% auto;
}
h3{
 font-size: 2.84vw;
}
h3:after{
 width: 5.2%;
 height: 0.26vw;
 bottom: -0.96vw;
}
#consept p{
 padding: 6.3vw 0 0;
 font-size: 2.38vw;
 line-height: 168%;
}
#consept p span{
 padding: 0 0.1vw;
}

#service{
 padding: 24.7vw 0 5.3vw;
 background-color: #f2f4f8;
}
#service .inner{
 padding: 8.1vw 0 0;
 width: 95%;
 background-size: 63.8% auto;
}
#service .inner .sBox{
 margin: 9.3vw auto 0;
 padding: 6.8vw 0 3.8vw;
 border-radius: 1.2vw;
}
#service .inner .sBox h4{
 padding: 1.26vw 0 1.4vw 6.1%;
 width: 39.2%;
 border-radius: 3.2vw;
 font-size: 3.44vw;
 background-position: left 12.6% top 0.8vw;
 background-size: 5.3vw auto;
 top: -3.2vw;
}
#service .inner .sBox .sBoxT{
 padding: 1.35vw 0;
 width: 87.8%;
 font-size: 3.62vw;
}
#service .inner .sBox p{
 padding: 2.4vw 0 0;
 width: 75%;
 font-size: 2.67vw;
}
#service .inner .lBox{
 margin: 8.3vw auto 0;
 padding: 7.4vw 0 2.4vw;
 border-radius: 1.2vw;
}
#service .inner .lBox .toku{
 padding: 3.6vw 0 0;
 width: 11vw;
 height: 11vw;
 font-size: 3.6vw;
 top: -5.5vw;
}
#service .inner .lBox h4{
 padding: 0 0 3.2vw;
 font-size: 3.62vw;
}
#service .inner .lBox .lBoxTx{
 font-size: 2.48vw;
}
#service .inner .pBox{
 margin: 4.4vw auto 0;
 padding: 3.6vw 0 2.8vw;
 border-radius: 1.2vw;
}
#service .inner .pBox h4{
 padding: 0 0 1.4vw;
 font-size: 3.62vw;
}
#service .inner .pBox h4 span{
 padding: 0 0 0 1vw;
 font-size: 3.42vw;
}
#service .inner .pBox p{
 font-size: 2.47vw;
}
#service .inner .pBox p span{
 font-size: 1.86vw;
}
#service .inner .pBox p.nomal{
 font-size: 2.288vw;
}
#service .inner .pBox p img{
 width: 19.9vw;
}
#service .inner .bt{
 margin: 3.5vw auto 0;
 width: 40.4%;
}
#service .inner .reco{
 padding: 9.2vw 0 0;
}
#service .inner .reco .recoT{
 padding: 0.4vw 0 0.8vw;
 width: 88%;
 font-size: 4.76vw;
}
#service .inner .reco .rBox{
 padding: 2.74vw 0 0;
}
#service .inner .reco .rBox li{
 margin: 0 0 5.4vw;
 padding: 4.24vw 0 4.34vw;
 font-size: 2.47vw;
}
#service .inner .reco .rBox li span{
 padding: 0 0.5%;
}
#service .inner .reco .rBox li img{
 width: 5.1vw;
 top: -1.5vw;
 left: 3.8%;
}

#pref{
 padding: 10vw 0 8.1vw;
 width: 95%;
}
#pref h3{
 margin: 0 0 7.9vw;
 font-size: 3.8vw;
}
#pref .prBox{
 margin: 0 0 5.7vw;
 padding: 4vw 0 1.3vw;
}
#pref .prBox h5{
 padding: 1.1vw 0 1.1vw;
 width: 29.4vw;
 font-size: 2.49vw;
 border-radius: 0.5vw;
 top: -2.4vw;
}
#pref .prBox p{
 padding: 0 0 0 5%;
 font-size: 2.09vw;
}
#pref h4{
 padding: 2.6vw 0 0;
 font-size: 3.24vw;
}
#pref .lineup{
 padding: 3.3vw 0 9.8vw;
}
#pref .lineup div{
 font-size: 2.29vw;
}
#pref .lineup span{
 padding: 1.5vw 0 0;
 font-size: 1.714vw;
}
#pref .mt{
 padding: 3.8vw 0 6.8vw;
}
#pref .mt h4{
 font-size: 3.23vw;
}
#pref .mt p{
 padding: 3.7vw 0 0;
 font-size: 2.1vw;
}


#image{
 margin: 11vw 0 0;
}

#company{
 padding: 7.6vw 0 10.6vw;
}
#company h6{
 padding: 1.2vw 0 1.4vw;
 width: 37.4%;
 font-size: 2.66vw;
 border-radius: 2.5vw;
}
#company p{
 padding: 4.6vw 0 5.8vw;
 font-size: 1.72vw;
}
#company .ban{
 width: 42%;
}

#footer{
 padding: 1.8vw 0 1.8vw;
 font-size: 1.14vw;
}


}
@media screen and (max-width: 1170px){
#cta{
 padding: 6.8vw 0 0;
 width: 95.6%;
 height: 46.4vw;
}
#cta img{
 margin: 0 auto 3.9vw;
 width: 71%;
}
#cta .bt{
 width: 40.4%;
 transition: .3s
}


}



@media screen and (max-width: 767px){
/* SP */
body{
 padding: 10vw 0 0;
}
.pcOnly {
		display: none;
}
.spOnly {
		display: block;
}
header{
  width: 100%;
  height: 10vw;
  background: #fff;
 position: absolute;
 top: 0;
 z-index: 66;
 right: 0;
 left: 0;
}
#header {
 margin: auto;
 width: 95%;
 height: 10vw;
 transition: opacity 0.2s ease-in;
 opacity: 1;
 position: relative;
}
#header.scroll {
 opacity: 0;
}
h2 {
 margin: auto;
 width: 55%;
 height: auto;
 position: absolute;
 top: 25%;
 transform: translateY(-25%);
 -webkit-transform: translateY(-25%);
 left: 0;
 z-index: 100;
}
h2 img {
 width: 100%;
 height: auto;
}

#fv{
 width: 100%;
 height: auto;
 position: relative;
}
#fv .fvBg{
 display: none;
}
#fv .fvBgSp{
 margin: auto;
 width: 100%;
 height: auto;
 position: relative;
 top: 0;
 left: 0;
 right: 0;
 z-index: 2;
 pointer-events: none;
 display: block;
}
#fv .fvBgSp.fvBg2{
 position: absolute;
 z-index: 1;
}
#fv .fvBgSp img,
#fv .fvBgSp.fvBg2 img{
 width: 100%;
 height: auto;
}
#fv .fvBox{
 margin: auto;
 padding: 10vw 0 0;
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 z-index: 3;
}
#fv h1{
 margin: 0 auto;
 padding: 2vw 0 1.6vw;
 width: 55%;
 text-align: center;
 border-radius: 10vw;
 background-color: #b29d31;
 background-image: url(../images/book.png);
 background-position: left 10% top 2vw;
 background-size: 8vw auto;
 background-repeat: no-repeat;
 box-shadow: 3px 3px 7px rgba(28,67,135,0.45);
 overflow: hidden;
 position: relative;
}
.webp #fv h1{
 background-image: url(../images/book.webp);
}
.no-webp #fv h1{
 background-image: url(../images/book.png);
}
#fv h1 span{
 margin: 0 auto;
 padding: 0 0 0 15%;
 font-size: 5.6vw;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #fff;
 letter-spacing: 0.2vw;
 text-shadow: 3px 3px 7px rgba(88,74,3,0.45);
 display: inline-block;
}
#fv .fv{
 margin: 6vw auto 6vw;
 font-size: 5.6vw;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #fff;
 letter-spacing: 0.2vw;
}
#fv .fv i{
 font-weight: 300;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 display: block;
 line-height: 70%;
 padding: 0 0 1vw;
}
#fv .fv i:first-child{
 padding: 1vw 0 1vw;
}
#fv .fv span{
 margin: 0 0 0 -1%;
 font-size: 5vw;
 font-weight: 700;
 display: inline-block;
}
#fv .fv2{
 padding: 0 0 9vw;
 font-size: 6vw;
 line-height: 122%;
 text-align: center;
 font-weight: 700;
 color: #ffff00;
 letter-spacing: 0.2vw;
}
.bt{
 margin: 0 auto;
 width: 70%;
 border: 1px solid #4f70a8;
 box-shadow: 3px 3px 7px rgba(13,33,68,0.25);
 position: relative;
}
.bt a{
 display: block;
 overflow: hidden;
}
.bt a span {
 position: relative;
 z-index: 3;
 padding: 3.5vw 0 3.5vw 18.5%;
 width: 100%;
 font-size: 5vw;
 line-height: 100%;
 text-align: left;
 font-weight: 700;
 color: #fff;
 letter-spacing: 0.02vw;
 background-image: url(../images/mail.png),url(../images/arrow.png);
 background-position: left 8% top 3.8vw,right 5% top 4.9vw;
 background-size: 5.6vw auto,7vw auto;
 background-repeat: no-repeat,no-repeat;
 display: block;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 transition: .3s;
}
.webp .bt a span {
 background-image: url(../images/mail.webp),url(../images/arrow.webp);
}
.no-webp .bt a span {
 background-image: url(../images/mail.png),url(../images/arrow.png);
}
.bt a:hover {
  opacity: 1;
}
.bt a:hover span {
 background-position: left 8% top 3.8vw,right 2% top 4.9vw;
}
.bt a span::after {
	animation: 6s 3s shine ease-in-out infinite;
 animation-fill-mode: backwards;
	background: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(255,255,255,.5) 50%, rgba(255, 255, 255, 0) 75%);
	content: '';
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	transform: skewX(-15deg);
	width: 100%;
}
.bt a:before {
 content: "";
 width: 100%;
 height: 100%;
 position: absolute;
 z-index: -1;
 top: 0;
 left: 0;
 transition: 0.3s ease-in-out;
 background: #AA881A;
 background: linear-gradient(90deg, #ccb64a 0%, #AA881A 100%);
}
.bt a:after {
 content: "";
 width: 100%;
 height: 100%;
 position: absolute;
 z-index: -2;
 top: 0;
 left: 0;
 background: #ccb64a;
 background: linear-gradient(90deg, #baa43a 0%, #dfca67 40%, #ccb64a 100%);
}
.bt a:hover:before {
  opacity: 0;
}

#consept{
 margin: 0;
 padding: 14vw 0 15vw;
 width: 100%;
 background-image: url(../images/conseptBg.png),url(../images/consept.png);
 background-position: center top 20vw,right top 4vw;
 background-size: 100% auto,85% auto;
 background-repeat: no-repeat,no-repeat;
 position: relative;
 z-index: 2;
}
.webp #consept{
 background-image: url(../images/conseptBg.webp),url(../images/consept.webp);
}
.no-webp #consept{
 background-image: url(../images/conseptBg.png),url(../images/consept.png);
}
h3{
 font-size: 6vw;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #8d780f;
 position: relative;
}
h3:after{
 margin: auto;
 content: "";
 width: 10%;
 height: 3px;
 background-color: #8d780f;
 position: absolute;
 bottom: -2.6vw;
 left: 0;
 right: 0;
}
#consept p{
 margin: 0;
 padding: 8vw 0 0;
 width: 100%;
 font-size: 5vw;
 line-height: 168%;
 text-align: center;
 font-weight: 500;
 position: relative;
}
#consept p span{
 padding: 0 1%;
 display: inline-block;
 position: relative;
}
#consept p span::before{
 content: "";
 background: linear-gradient(rgba(255,255,255,0) 60%, #ffec1b 60%, #ffec1b 100%);
 width: 0%;
 height: 8vw;
 position: absolute;
 bottom: 0.2vw;
 left: 0;
 z-index: -1;
}
#consept p span.line1.is-inview::before{
	animation-name: line;
	animation-delay: 1.5s;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
 transition-timing-function: ease-out;
}
#consept p span.line2.is-inview::before{
	animation-name: line;
	animation-delay: 1.5s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
 transition-timing-function: ease-out;
}
#consept p span.line3.is-inview::before{
	animation-name: line;
	animation-delay: 1.5s;
	animation-duration: 0.4s;
	animation-fill-mode: forwards;
 transition-timing-function: ease-out;
}
#consept p span strong{
 margin: 0 -2%;
 color: #e10202;
 text-indent: -1.5vw;
 display: inline-block;
}

#service{
 padding: 25vw 0 15vw;
 width: 100%;
 background-color: #f2f4f8;
 background-image: url(../images/serviceBg.jpg);
 background-position: left top;
 background-size: 100% auto;
 background-repeat: no-repeat;
}
.webp #service{
 background-image: url(../images/serviceBg.webp);
}
.no-webp #service{
 background-image: url(../images/serviceBg.jpg);
}
#service .inner{
 margin: 0 auto;
 padding: 10vw 0 0;
 width: 100%;
 background-image: url(../images/service.png);
 background-position: left top;
 background-size: 75% auto;
 background-repeat: no-repeat;
}
.webp #service .inner{
 background-image: url(../images/service.webp);
}
.no-webp #service .inner{
 background-image: url(../images/service.png);
}
#service .inner .sBox{
 margin: 15vw auto 0;
 padding: 8vw 0 4vw;
 width: 90%;
 border-radius: 2.5vW;
 border: 2px solid #8d780f;
 background-color: #fff;
 position: relative;
}
#service .inner .sBox::before{
	animation: 5s 0s sBoxBg ease-in-out infinite;
 animation-fill-mode: backwards;
 content: "";
 width: 100%;
 background-image: url(../images/service1Bg.jpg);
 background-position: right 5% bottom 2%;
 background-size: 84% auto;
 background-repeat: no-repeat;
 height: 100%;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 0;
}
.webp #service .inner .sBox::before{
 background-image: url(../images/service1Bg.webp);
}
.no-webp #service .inner .sBox::before{
 background-image: url(../images/service1Bg.jpg);
}
#service .inner .sBox h4{
 margin: auto;
 padding: 2.2vw 0 2vw 10%;
 width: 60%;
 border-radius: 6vw;
 background-color: #b29d31;
 font-size: 5vw;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #fff;
 letter-spacing: 0.2vw;
 background-image: url(../images/book.png);
 background-position: left 13% top 1.3vw;
 background-size: 8vw auto;
 background-repeat: no-repeat;
 text-shadow: 3px 3px 7px rgba(88,74,3,0.45);
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 position: absolute;
 top: -4.4vw;
 left: 0;
 right: 0;
 z-index: 1;
}
.webp #service .inner .sBox h4{
 background-image: url(../images/book.webp);
}
.no-webp #service .inner .sBox h4{
 background-image: url(../images/book.png);
}
#service .inner .sBox .sBoxT{
 margin: 0 auto;
 padding: 2vw 0 2vw;
 width: 90%;
 font-size: 5.4vw;
 line-height: 125%;
 text-align: center;
 font-weight: 700;
 color: #fff;
 background-image: url(../images/serviceTSp.jpg);
 background-size: contain;
 background-repeat: no-repeat;
 font-feature-settings: "palt";
 letter-spacing: 0.3vw;
 position: relative;
 z-index: 2;
}
.webp #service .inner .sBox .sBoxT{
 background-image: url(../images/serviceTSp.webp);
}
.no-webp #service .inner .sBox .sBoxT{
 background-image: url(../images/serviceTSp.jpg);
}
#service .inner .sBox p{
 margin: 0 auto;
 padding: 3vw 0 0;
 width: 90%;
 font-size: 3.8vw;
 line-height: 196%;
 text-align: left;
 font-weight: 500;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 position: relative;
 z-index: 1;
 text-shadow: 2px 2px 1px rgba(255,255,255,1);
}
#service .inner .sBox p span{
 padding: 0 1vw 0 0;
 color: #8d780f;
 display: inline-block;
}
#service .inner .sBox p b{
 margin: 0 0 -10vw;
 font-size: 3.6vw;
 font-weight: 500;
 display: block;
 position: relative;
 top: -2vw;
}
#service .inner .lBox{
 margin: 15vw auto 0;
 padding: 12vw 0 3vw;
 width: 90%;
 border-radius: 2.5vW;
 border: 2px solid #b80000;
 background-color: #fff;
 position: relative;
 text-align: center;
}
#service .inner .lBox .toku{
 margin: auto;
 padding: 7vw 0 0;
 width: 20vw;
 height: 20vw;
 font-size: 6vw;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #fff;
 border-radius: 50%;
 background-color: #b80000;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 position: absolute;
 top: -10vw;
 left: 0;
 right: 0;
}
#service .inner .lBox h4{
 padding: 0 0 4vw;
 font-size: 6.6vw;
 line-height: 135%;
 text-align: center;
 font-weight: 700;
 color: #b80000;
 font-feature-settings: "palt";
 letter-spacing: 0.3vw;
}
#service .inner .lBox img{
 float: none;
 margin: 0 auto;
 width: 90%;
 height: auto;
}
#service .inner .lBox .lBoxTx{
 float: none;
 margin: 0 auto;
 padding: 2vw 0 0;
 width: 90%;
 font-size: 3.8vw;
 line-height: 211%;
 text-align: left;
 font-weight: 400;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#service .inner .lBox .lBoxTx span{
 padding: 0 1vw 0 0;
 color: #e10202;
 display: inline-block;
}
#service .inner .pBox{
 margin: 8vw auto 0;
 padding: 6vw 0 4vw;
 width: 90%;
 border-radius: 2.5vw;
 border: 2px solid #1c4387;
 background-color: #fff;
}
#service .inner .pBox h4{
 padding: 0 0 2vw;
 font-size: 6vw;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #1c4387;
 font-feature-settings: "palt";
 letter-spacing: 0.1vw;
}
#service .inner .pBox h4 span{
 padding: 2vw 0 0;
 font-size: 5vw;
 display: block;
}
#service .inner .pBox p{
 margin: 0 auto;
 padding: 0;
 width: 89%;
 font-size: 3.7vw;
 line-height: 211%;
 text-align: left;
 font-weight: 400;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#service .inner .pBox p span{
 padding: 0 1vw 0 0;
 font-size: 3.2vw;
 color: #1c4387;
 display: inline-block;
 position: relative;
 top: -0.15vw;
}
#service .inner .pBox p.nomal{
 padding: 0 0 1.6vw;
 width: 100%;
 font-size: 3.7vw;
 line-height: 150%;
 color: #666;
 text-align: center;
}
#service .inner .pBox p img{
 margin: 0 0 0 -2%;
 width: 35%;
 height: auto;
 position: relative;
 top: -0.8vw;
}
#service .inner .bt{
 margin: 6vw auto 0;
 border: 1px solid #fff;
 width: 70%;
}
#service .inner .reco{
 padding: 18vw 0 0;
}
#service .inner .reco .recoT{
 margin: 0 auto;
 padding: 1vw 0 2vw;
 width: 90%;
 font-size: 5.2vw;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #1c4387;
 letter-spacing: 0.3vw;
 background-image: url(../images/slashL.png),url(../images/slashR.png);
 background-position: left top,right top;
 background-size: auto 100%,auto 100%;
 background-repeat: no-repeat,no-repeat;
}
.webp #service .inner .reco .recoT{
 background-image: url(../images/slashL.webp),url(../images/slashR.webp);
}
.no-webp #service .inner .reco .recoT{
 background-image: url(../images/slashL.png),url(../images/slashR.png);
}
#service .inner .reco .rBox{
 margin: 0 auto;
 padding: 6vw 0 0;
 width: 80%;
}
#service .inner .reco .rBox li{
 float: none;
 margin: 0 0 6vw;
 padding: 5vw 0 5vw;
 width: 100%;
 font-size: 4vw;
 line-height: 138%;
 text-align: center;
 font-weight: 500;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 background-color: #fff;
 box-shadow: 3px 3px 12px rgba(0,0,0,0.35);
 position: relative;
}
#service .inner .reco .rBox li:nth-child(2n){
 float: none;
}
#service .inner .reco .rBox li span{
 padding: 0 1%;
 background: linear-gradient(rgba(255,255,255,0) 60%, #dde3ed 60%, #dde3ed 100%);
 display: inline-block;
}
#service .inner .reco .rBox li img{
 width: 10%;
 height: auto;
 position: absolute;
 top: -2vw;
 left: 3vw;
 pointer-events: none;
}

#pref{
 margin: 0 auto;
 padding: 18vw 0 14vw;
 width: 90%;
}
#pref h3{
 margin: 0 0 12vw;
 font-size: 6vw;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #1c4387;
}
#pref h3:after{
 display: none;
}
#pref .prBox{
 float: none;
 margin: 0 0 12vw;
 padding: 7vw 0 4vw;
 width: 100%;
 border: 1px solid #cfcfcf;
 position: relative;
}
#pref .prBox.p2{
 float: none;
}
#pref .prBox.p3{
 float: none;
 width: 100%;
}
#pref .prBox h5{
 margin: auto;
 padding: 2vw 0 2vw;
 width: 55%;
 font-size: 4.4vw;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #fff;
 border-radius: 1vw;
 background-color: #1c4387;
 position: absolute;
 top: -4vw;
 left: 0;
 right: 0;
}
#pref .prBox p{
 margin: 0;
 padding: 0 0 0 8%;
 width: auto;
 font-size: 4vw;
 line-height: 181%;
 text-align: left;
 font-weight: 400;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#pref h4{
 padding: 4vw 0 0;
 font-size: 5.4vw;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #1c4387;
}
#pref .lineup{
 padding: 6vw 0 12vw;
 width: 100%;
}
#pref .lineup div{
 padding: 0 0 2vw 3vw;
 font-size: 3.4vw;
 line-height: 160%;
 text-align: left;
 font-weight: 400;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 letter-spacing: 0;
 text-indent: -2vw;
}
#pref .lineup div span{
 padding: 0;
}
#pref .lineup span{
 padding: 4vw 0 0;
 font-size: 2.8vw;
 line-height: 100%;
 display: inline-block;
}
#pref .mt{
 padding: 6vw 0 12vw;
 width: 100%;
 background-color: #eff2f7;
}
#pref .mt h4{
 font-size: 5.4vw;
 line-height: 100%;
 text-align: center;
 font-weight: 500;
 color: #1c4387;
 text-shadow: 4px 4px 6px rgba(102,102,102,0.40);
}
#pref .mt p{
 padding: 5vw 0 0;
 width: 100%;
 font-size: 3.5vw;
 line-height: 200%;
 text-align: center;
 font-weight: 500;
}

#cta{
 margin: 0 auto;
 padding: 10vw 0 0;
 width: 96%;
 height: 46.6vw;
 position: relative;
 background-image: url(../images/ctaBg.jpg);
 background-position: center top;
 background-size: contain;
 background-repeat: no-repeat;
 background-color: #FFC8C9;
 text-align: center;
}
.webp #cta{
 background-image: url(../images/ctaBg.webp);
}
.no-webp #cta{
 background-image: url(../images/ctaBg.jpg);
}
#cta img{
 margin: 0 auto 16vw;
 width: 90%;
 height: auto;
}
#cta .bt{
 width: 72%;
 border: 1px solid #fff;
}
#cta .bt:hover{
 box-shadow: 3px 3px 7px rgba(13,33,68,0.25);
}

#image{
 margin: 34vw 0 0;
 width: 100%;
}
#image img{
 width: 100%;
 height: auto;
  transition: 1s;
}

#company{
 padding: 12vw 0 12vw;
 width: 100%;
 background-color: #f7f7f7;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#company h6{
 margin: 0 auto;
 padding: 1.9vw 0 2.3vw;
 width: 45%;
 font-size: 4.2vw;
 line-height: 100%;
 text-align: center;
 font-weight: 700;
 color: #fff;
 border-radius: 5vw;
 background-color: #1c4387;
}
#company p{
 margin: 0;
 padding: 5vw 0 7vw;
 width: 100%;
 font-size: 3.4vw;
 line-height: 150%;
 text-align: center;
 font-weight: 400;
}
#company p a{
 color: #0000ff;
 text-decoration: underline;
}
#company p a:hover{
 color: #0000ff;
 text-decoration: none;
 opacity: 1;
}
#company .ban{
 margin: 0 auto;
 width: 70%;
 background-color: #fff;
}
#company .ban img{
 width: 100%;
 height: auto;
}

#footer{
 padding: 3vw 0 3vw;
 width: 100%;
 font-size: 2.4vw;
 line-height: 100%;
 text-align: center;
 font-weight: 400;
 color: #fff;
 background-color: #333333;
 font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#gototop {
  width: 10vw;
  bottom: -1vw;
  right: 3vw;
}


}



@media screen and (max-width: 763px) and (orientation: landscape) {
   /* 横向きの場合のスタイル */


}




/*--------------------inview-------------------*/
.fadeUp {
  opacity: 0;
  transform: translateY(50px);
  transition: 1s;
}
.fadeUp.is-inview {
  transform: translateY(0px);
  opacity: 1;
}

/* 時間差フェードインアニメーション */
/* 0.1秒間かけてフェードイン */
.fadeIn100ms{
	opacity: 0;
}
.fadeIn100ms.is-inview{
	animation-name: fadeIn100ms;
	animation-delay: 0s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn100ms {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* フェードイン */
.fadeIn{
	opacity: 0;
}
.fadeIn.is-inview{
	animation-name: fadeIn;
	animation-delay: 0s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 0.5秒間かけてフェードイン */
.fadeIn500ms{
	opacity: 0;
}
.fadeIn500ms.is-inview{
	animation-name: fadeIn500ms;
	animation-delay: 0.5s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn500ms {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 0.6秒間かけてフェードイン */
.fadeIn600ms{
	opacity: 0;
}
.fadeIn600ms.is-inview{
	animation-name: fadeIn600ms;
	animation-delay: 0.6s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn600ms {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 0.7秒間かけてフェードイン */
.fadeIn700ms{
	opacity: 0;
}
.fadeIn700ms.is-inview{
	animation-name: fadeIn700ms;
	animation-delay: 0.7s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn700ms {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 0.8秒間かけてフェードイン */
.fadeIn800ms{
	opacity: 0;
}
.fadeIn800ms.is-inview{
	animation-name: fadeIn800ms;
	animation-delay: 0.8s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn800ms {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 0.9秒間かけてフェードイン */
.fadeIn900ms{
	opacity: 0;
}
.fadeIn900ms.is-inview{
	animation-name: fadeIn900ms;
	animation-delay: 0.9s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn900ms {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 1.1秒間かけてフェードイン */
.fadeIn1100ms{
	opacity: 0;
}
.fadeIn1100ms.is-inview{
	animation-name: fadeIn1100ms;
	animation-delay: 1.1s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn1100ms {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 1秒間かけてフェードイン */
.fadeIn1s{
	opacity: 0;
}
.fadeIn1s.is-inview{
	animation-name: fadeIn1s;
	animation-delay: 0.5s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn1s {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 1.2秒間かけてフェードイン */
.fadeIn1300ms{
	opacity: 0;
}
.fadeIn1300ms.is-inview{
	animation-name: fadeIn1300ms;
	animation-delay: 1.3s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn1300ms {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 1.5秒間かけてフェードイン */
.fadeIn1500ms{
	opacity: 0;
}
.fadeIn1500ms.is-inview{
	animation-name: fadeIn1500ms;
	animation-delay: 1.5s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn1500ms {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 1.5秒間かけてフェードイン */
.fadeIn1800ms{
	opacity: 0;
}
.fadeIn1800ms.is-inview{
	animation-name: fadeIn1800ms;
	animation-delay: 1.8s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn1800ms {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 2秒間かけてフェードイン */
.fadeIn2s{
	opacity: 0;
}
.fadeIn2s.is-inview{
	animation-name: fadeIn2s;
	animation-delay: 2s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn2s {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 2.5秒間かけてフェードイン */
.fadeIn2500ms{
	opacity: 0;
}
.fadeIn2500ms.is-inview{
	animation-name: fadeIn2500ms;
	animation-delay: 2.5s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn2500ms {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 3秒間かけてフェードイン */
.fadeIn3s{
	opacity: 0;
}
.fadeIn3s.is-inview{
	animation-name: fadeIn3s;
	animation-delay: 3s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn3s {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* 4秒間かけてフェードイン */
.fadeIn4s{
	opacity: 0;
}
.fadeIn4s.is-inview{
	animation-name: fadeIn3s;
	animation-delay: 4s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeIn4s {
	0% {
	}
	100% {
					opacity: 1;
	}
}
/* ブラー */
.blur{
	opacity: 0;
}
.blur.is-inview{
	animation-name: blur;
	animation-delay: 0s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes blur {
	0% {
 -ms-filter: blur(10px);
  filter: blur(10px);
	}
	40% {
 -ms-filter: blur(10px);
  filter: blur(10px);
	}
	100% {
					opacity: 1;
 -ms-filter: blur(0px);
  filter: blur(0px);
	}
}