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

body { background: linear-gradient( to right , #5486b6 , #143066);}
body.noScroll,
html.noScroll { overflow: hidden;}

.content960 { width: calc( 100% - 40px); margin-left: auto; margin-right: auto; max-width: 960px;}
.content1080 { width: calc( 100% - 40px); margin-left: auto; margin-right: auto; max-width: 1080px;}


/* HEADER */
#header { position: fixed; left: 0; top:0; width: 100%; z-index: 2000; transition: background 0.5s linear 0s;}
#header.scrolled ,
#header.active {  background: rgba(34,48,98,0.8);}

#header.scrolled .logoBox h1 {position: relative; z}
#header.scrolled .logoBox h1 .logoWhite {display: none;}
#header.scrolled .logoBox h1 .logoBlack {display: block;}
#header.scrolled {background: #fff; box-shadow: 0 0 5px #ccc;}
#header.scrolled .linkBox ul li a {color: #223062;}
#header.scrolled .linkBox ul li.contact a {color: #fff; background: #223062;}
#header.scrolled span {background: #223062;}
#header.scrolled scrolled {box-shadow: 0 0 5px #ccc;}
#header.scrolled .linkBox ul li ul li a {color: #fff;}

#header.bgWhite {  background: rgba(34,48,98,0.8);}
#header.bgWhite .logoBox h1 {position: relative; z}
#header.bgWhite .logoBox h1 .logoWhite {display: none;}
#header.bgWhite .logoBox h1 .logoBlack {display: block;}
#header.bgWhite {background: #fff; box-shadow: 0 0 5px #ccc;}
#header.bgWhite .linkBox ul li a {color: #223062;}
#header.bgWhite .linkBox ul li.contact a {color: #fff; background: #223062;}
#header.bgWhite span {background: #223062;}
#header.bgWhite scrolled {box-shadow: 0 0 5px #ccc;}
#header.bgWhite .linkBox ul li ul li a {color: #fff;}


#header .content { width: calc( 100% - 40px ); margin: 0 auto; padding: 15px 20px; position: relative; z-index: 2000;}
#header .logoBox { flex-basis: 56px; align-self: center; position: relative; z-index: 2000;}
#header .linkBox { flex-basis: calc( 100% - 76px); align-self: center; }
#header .linkBox ul {  justify-content: flex-end; }
#header .linkBox ul li { align-self: center; margin: 0 30px 0 0; }
#header .linkBox ul li:last-of-type { margin: 0 0 0 0; }
#header .linkBox ul li a {color: #fff; text-decoration: none; font-size: 14px; font-weight: bold; position: relative; z-index: 2001; position: relative;}
#header .linkBox ul li a .sup {position: relative; margin-right: 4px; background: none;}
#header .linkBox ul li a .sup sup {position: absolute; top: -3px; right: -5px; line-height: 1}
#header .linkBox ul li a:hover {opacity: 0.8;}
#header .linkBox ul li.contact a { padding: 0.75em 1.25em; font-size: 18px; background: #fff; border-radius: 10px; color: #223062; }
#header .linkBox .sub {position: absolute; left: 0; width: 100%; padding-top: 34px; display: none; z-index: 1999;}
#header .linkBox .sub * {box-sizing: border-box;}
#header .linkBox .sub .subWrap {background: #2f5597; color: #fff;}
#header .linkBox .sub .subWrap .subIn {padding: 60px 0; max-width: 1200px; width: 100%; margin: 0 auto; box-sizing: border-box; align-items: center;}
#header .linkBox .sub .subWrap .subIn .colL {text-align: center; width: 40%;}
#header .linkBox .sub .subWrap .subIn .colL p {margin-bottom: 20px; font-size: 22px; font-weight: bold;}
#header .linkBox .sub .subWrap .subIn .colL .moreLink {padding: 1em 4em 1em 2em; color: #fff;}
#header .linkBox .sub .subWrap .subIn .colR {width: 60%; padding-left: 10%; border-left: 1px solid #fff;}
#header .linkBox .sub .subWrap .subIn .colR ul li {margin-bottom: 10px;}
#header .linkBox .sub .subWrap .subIn .colR ul li > a {line-height: 1; display: block; max-width: 350px; position: relative;}
#header .linkBox .sub .subWrap .subIn .colR ul li > a:after { position: absolute; content: ''; display: block; right:2em; top:50%; background: url("../img/common/arrow_01.svg") center center no-repeat; pointer-events: none; width: 1em; height: 1em; transform: translateY(-50%);}

#header .linkBox .sub {display: none;}
.txt-anime {opacity: 0; transform: translateY(8px); transition-property: transform, opacity, -webkit-transform; transition-duration:  0.4s;}
.txt-anime.active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}


#navBtn { position: relative; display: block; width: 32px; height: 18px;}
#navBtn span { position: absolute; width: 100%; height: 2px; background: #fff; transition: transform 0.5s linear 0s;}
#navBtn span:nth-of-type(1) { left: 0; top: 0;  }
#navBtn span:nth-of-type(2) { left: 0; top:50%; transform: translateY(-50%); }
#navBtn span:nth-of-type(3) { left: 0; bottom:0; }
#navBtn.active span:nth-of-type(1) { left: 0; top: 0; transform: translateY(8px) rotate(395deg);}
#navBtn.active span:nth-of-type(2) { opacity: 0; }
#navBtn.active span:nth-of-type(3) { left: 0; bottom:0; transform: translateY(-8px) rotate(-395deg); }
#spMenuContent { display: none; position: fixed; left: 0; top:0; width: 100%; height: 100%; z-index: 1999;  background: linear-gradient( to right , #5486b6 , #143066); overflow: auto; padding: 120px 20px 20px 20px; box-sizing: border-box;}
#spMenuContent.active { display: block;}
#spMenuContent #spNavi { font-size: 18px; margin: 0 auto 40px auto;}
#spMenuContent #spNavi ul { text-align: center;}
#spMenuContent #spNavi ul li { text-align: center; margin: 0 0 0 0; border-bottom: rgba(255,255,255,0.2) solid 1px; }
#spMenuContent #spNavi ul li a { display: block; padding: 2em 0; color: #fff; font-weight: bold; text-decoration: none; border-bottom: #223062 solid 1px; letter-spacing: 0.25em;}
#spMenuContent #spNavi ul li .outlink span {display: inline-block; position: relative;}
#spMenuContent #spNavi ul li .outlink span::after {position: absolute; content: ''; display: block; right: -2em; top:50%; background: url("../img/common/linkout.svg") center center no-repeat; pointer-events: none; width: 1em; height: 1em; transform: translateY(-50%);}
#spMenuContent #spNavi ul li.submenu > a {cursor: pointer;}
#spMenuContent #spNavi ul li.submenu > a > span {position: relative; display: inline-block;}
#spMenuContent #spNavi ul li.submenu > a > span::after {content: '\002B'; color: #eba03b; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: -3rem; font-size: 26px;}
#spMenuContent #spNavi ul li.submenu > a.active > span::after {content: '\2212';}
#spMenuContent #spNavi ul li.submenu ul {display: none; border-top: rgba(255,255,255,0.2) solid 1px;;}
#spMenuContent #spNavi ul li.submenu ul li a {font-size: 12px; padding: 1.5rem 0;}


#spMenuContent .snsBox { width: 180px; margin: 0 auto; }
#spMenuContent .snsBox h3 { text-align: center; margin: 0 0 1em 0; font-size: 18px}
#spMenuContent .snsBox ul { align-items: center;}
#spMenuContent .snsBox ul li { flex-basis: 50px;}
#spMenuContent .snsBox ul li a { display: block; }

/* HEADER THEME WHITE */
#header .logoBox h1 .logoBlack {display: none;}
.themeWhite {background: none;}
.themeWhite #header .logoBox h1 .logoWhite {display: none;}
.themeWhite #header .logoBox h1 .logoBlack {display: block;}
.themeWhite #header {background: #fff;}
.themeWhite #header .linkBox ul li a {color: #223062;}
.themeWhite #header .linkBox ul li.contact a {color: #fff; background: #223062;}
.themeWhite #navBtn span {background: #223062;}
.themeWhite #header.scrolled {box-shadow: 0 0 5px #ccc;}
.themeWhite #header .linkBox ul li ul li a {color: #fff;}
.themeWhite #header .linkBox ul li ul li a:hover {color: #ddd;}



/* FOOTER */
#footer {color: #fff; background: linear-gradient( to right , #5486b6 , #143066);}
#footer .content { width: calc( 100% - 40px ) ; max-width: 1080px; box-sizing: border-box; margin: 0 auto 0 auto; padding: 35px 0 20px 0;}
#footer .content .row1 {margin-bottom: 10px; text-align: center;}
#footer .content .row1 .linkBox {flex-basis: 80%; align-items: center; margin-right: 40px;}
#footer .content .row1 .linkBox li {font-size: 13px; flex-basis: 12.5%;}
#footer .content .row1 .linkBox li a {display: block; line-height: 1.2; color: #fff; text-decoration: none; font-weight: bold; border-left: 2px solid #999; text-align: center;}
#footer .content .row1 .linkBox li a span {position: relative;}
#footer .content .row1 .linkBox li a span sup {line-height: 1; position: absolute; top: -3px; right: -5px;}
#footer .content .row1 .linkBox li:last-of-type a {border-right: 2px solid #999;}
#footer .content .row1 .linkBox li a:hover,
#footer .content .row1 .linkBox li a.active {color: #ccc;}
#footer .content .row1 .snsBox { flex-basis: 150px; align-items: center;}
#footer .content .row1 .snsBox li { flex-basis: calc((100% - 30px)/3);}
#footer .content .row1 .snsBox li a { display: block; }
#footer .content .row1 .snsBox li a:hover {opacity: 0.6;}

#footer .content .row2 {align-items: center; margin-bottom: 30px;}
#footer .content .row2 .logoBox {align-items: center; width: 392px;}
#footer .content .row2 .logoBox a img {width: 67px; height: 77px;}
#footer .content .row2 .logoBox p {font-size: 20px; font-weight: bold; letter-spacing: 0.1rem;}
#footer .content .row2 .tel {font-size: 13px; width: calc(100% - 480px);}
#footer .content .row2 .tel li:not(:last-of-type) {margin: 0 0 10px 0;}
#footer .content .row2 .tel li a {color: #fff; text-decoration: none;}

#footer .content .row3 {margin-bottom: 50px;}
#footer .content .row3 ul li {display: inline-block; vertical-align: middle;}
#footer .content .row3 ul li:not(:last-of-type) {margin-right: 20px;}
#footer .content .row3 ul li a {color: #fff; text-decoration: none; font-size: 11px;}
#footer .content .row3 ul li a:hover {color: #ccc;}
#footer .copyright {text-align: right;}



#pageTop { display: none; width: 40px; height: 40px; background: linear-gradient(to top , #fff , #f1f1f1 , #223062); background-size: 100% 200%; position: fixed; right:20px; bottom:20px; z-index: 1996; color: #fff; text-decoration: none; border-radius: 50%; transition: all 0.5s linear 0s;}
#pageTop:before { position: absolute; content: '↑'; top:50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 30px; line-height: 1.;}
#pageTop.scrolled { display: block; }
#pageTop:hover { background-position: 0 100%; color: #223062; text-decoration: none; box-shadow: 0 0 5px 5px rgba(0,0,0,0.05);}

/* FONT STYLE */
.fontSize01 { font-size: 30px; font-weight: bold; line-height: 1.33; }
.fontSize02 { font-size: 32px; font-weight: bold; line-height: 1.5; }
.fontSize03 { font-size: 28px; line-height: 1.45;}
.fontSize04 { font-size: 24px; line-height: 1.45;}
.fontSize05 { font-size: 32px; font-weight: bold; line-height: 1.40 }
.fontSize06 { font-size: 18px; line-height: 1.63;}
.fontSize07 { font-size: 12px; line-height: 1.66;}
.fontSize08 { font-size: 14px; line-height: 2.14;}
.fontSize09 { font-size: 16px; line-height: 2.14;}
.fontSize10 { font-size: 20px; line-height: 2.14;}
.fontSize11 { font-size: 48px; line-height: 1.33;}
.fontSize12 { font-size: 40px; line-height: 1.33;}
.fontSize13 { font-size: 40px; line-height: 1.33;}

.verticalTitle { font-size: 60px; line-height: 1.2; position: absolute; left: 0; top:0; transform: rotate(90deg) translateY(-150%); transform-origin: left top; color: #9ca2b8;}
.verticalSubTitle { font-size: 15px; color: #9ca2b8; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; position: absolute; left:120px; top:0;}

.robotoFont { font-family: 'Roboto', sans-serif;}
.gothicFont {  font-family:'Noto Sans JP',  "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;}
.minchoFont {  font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, serif;}
.meiryoFont { font-family: 'メイリオ', 'Meiryo', sans-serif; }

/* POSITION STYLE */
.relative { position: relative; }
.absolute { position: absolute; }
.static { position: static; }

/* BAR STYLE */
.underBar01 { position: absolute; left: 50%; bottom:-10px; height: 5px; width: 2em; display: block; background: #223062; transform: translateX(-50%);}
.underBar02 { position: absolute; left: 50%; bottom:-10px; height: 5px; width: 2em; display: block; background: #fff; transform: translateX(-50%);}
.underBar03 { box-sizing: border-box; position: relative; display: block; height: 1em; overflow: hidden; margin: 0.35em auto 0 auto; width: 100%;  }
.underBar03:after { content: ''; display: block; position: absolute; left: 50%; top:0; width: 1em; height: 1em; box-sizing: border-box; border-bottom: #223062 solid 2px; border-left: #223062 solid 2px; transform: rotate(-45deg) translateX(-50%) translateY(-50%); transform-origin: left top;}
.underBar03:before { content: ''; display: block; position: absolute; left: 0; top:0; width: 100%; height: 2px; background: linear-gradient(to right, rgba(24,48,98,1) 0% , rgba(24,48,98,1) calc(50% - 0.705em)  , rgba(24,48,98,0) calc(50% - 0.705em) , rgba(24,48,98,0) calc(50% + 0.705em) , rgba(24,48,98,1) calc(50% + 0.705em) , rgba(24,48,98,1) 100% )}
.underBar04 { box-sizing: border-box; position: relative; display: block; height: 1em; overflow: hidden; margin: 0.35em auto 0 auto; width: 100%; }
.underBar04:after { content: ''; display: block; position: absolute; left: 50%; top:0; width: 1em; height: 1em; box-sizing: border-box; border-bottom: #FFF solid 2px; border-left: #FFF solid 2px; transform: rotate(-45deg) translateX(-50%) translateY(-50%); transform-origin: left top;}
.underBar04:before { content: ''; display: block; position: absolute; left: 0; top:0; width: 100%; height: 2px; background: linear-gradient(to right, rgba(255,255,255,1) 0% , rgba(255,255,255,1) calc(50% - 0.705em)  , rgba(255,255,255,0) calc(50% - 0.705em) , rgba(255,255,255,0) calc(50% + 0.705em) , rgba(255,255,255,1) calc(50% + 0.705em) , rgba(255,255,255,1) 100% )}
.arrowWrapper { position: relative; display: inline-block; padding: 0 0 0 1.4em; }
.arrowWrapper .arrow { position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 1.2em;}


/* COLOR STYLE */
.color01 { color:#fff;}
.color02 { color:#000;}
.color03 { color:#223062;}
.color04 { color:#eba03b;}
.color05 { color: #bcbcbc;}
.color06 { color: #123b73;}
.color07 { color: #b2b7c8;}
.color08 { color: #ebb43b;}
.color09 { color: #353535;}

/* LINK STYLE */
.moreLink { display: inline-block; font-size: 14px; border-radius: 2em; padding: 1.2em 4em 1.2em 2em;  background: linear-gradient( to right , #5486b6 , #143066 , #143066); background-size:200% 100%; color: #fff; text-decoration: none; position: relative; transition: all 0.5s linear 0s; }
.moreLink:after { position: absolute; content: ''; display: block; right:2em; top:50%; background: url("../img/common/arrow_01.svg") center center no-repeat; pointer-events: none; width: 1em; height: 1em; transform: translateY(-50%);}
.moreLink2 { display: inline-block; font-size: 14px; border-radius: 2em; padding: 1.2em 4em 1.2em 2em;  background: #fff; background-size:200% 100%; color: #000; text-decoration: none; position: relative; transition: all 0.5s linear 0s; }
.moreLink2:after { position: absolute; content: ''; display: block; right:2em; top:50%; background: url("../img/common/arrow_01.svg") center center no-repeat; pointer-events: none; width: 1em; height: 1em; transform: translateY(-50%);}
.moreLink:hover { text-decoration: none; background-position: 100% 0; color: #fff;}
.moreLink2:hover { text-decoration: none; background: #223062; color: #fff;}
a img { transition: filter 0.5s linear 0s;}
a:hover img { filter:brightness(1.2);}

/* ANIMATION */
.inView { opacity: 0; }
.inView.effectView1 { animation-name:fadeUpAnime; animation-duration:1s; animation-delay: 0.50s; animation-fill-mode:forwards; opacity:0;  }
.inView.effectView2 { animation-name:fadeUpAnime; animation-duration:1s; animation-delay: 0.75s; animation-fill-mode:forwards; opacity:0; line-height: 1.6em;}
.inView.effectView3 { animation-name:fadeUpAnime; animation-duration:1s; animation-delay: 1.00s; animation-fill-mode:forwards; opacity:0;  }
@keyframes fadeUpAnime{
  from { opacity: 0; transform: translateY(30px); }
  to {  opacity: 1; transform: translateY(0);  }
}


/* MODAL STYLE */
#modalWrapper { position: fixed; z-index: 9997; background: rgba(0,0,0,0.8); left: 0; top:0; width: 100%; height: 100%; display: none;}
#modalBox { position: fixed; z-index: 9998; left: 50%; top:50%; width: calc( 100% - 40px); max-width: 1080px; transform: translateX(-50%) translateY(-50%); display: none;}
#modalWrapper.active { display: block;}
#modalBox.active { display: block;}
#modalBox .content {  }
#modalBox .content .movieBox { position: relative; padding: 56.65% 0 0 0; box-sizing: border-box; border: rgba(255,255,255,0.2) solid 1px; }
#modalBox .content .movieBox iframe { width: 100%; height: 100%; position: absolute; left: 0; top:0;}
.modalClose { cursor: pointer;}

/* COMMON TITLE */
.titH2 {text-align: center; font-size: 32px; font-weight: bold; position: relative; color: #223062;}
.titH2::after {content: ''; width: 60px; bottom: -25px; left: 0; right: 0; margin: 0 auto; height: 4px; background: #223062; position: absolute;}
.mainTxt {text-align: center; margin: 50px 0; line-height: 2; font-size: 14px;}

/* BREADCRUMB */
#breadcrumb {margin-top: 20px;}
#breadcrumb a {color: #223062;}
#breadcrumb a:not(:last-of-type) {text-decoration: underline;}

/* THEME WHITE */
.themeWhite #mainVisual {position: relative; height: 300px; /*background: linear-gradient( to right , #5486b6 , #143066);*/ background: url(../img/common/mv.jpg) no-repeat; background-size: cover;}
.themeWhite #mainVisual .txt {position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); color: #fff; text-align: center; left: 0; width: 100%; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);}
.themeWhite #mainVisual .txt h2 {font-size: 40px; font-weight: bold; letter-spacing: 0.2em;}
.themeWhite #mainVisual .txt p {font-size: 14px; margin-top: 20px;}

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

}

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

}

@media screen and ( max-width:1079px ) {
	/* HEADER */
	#header .linkBox ul li { display: none;}
	#header .linkBox ul li.contact,
	#header .linkBox ul li.menu { display: block;}
	#header .linkBox ul li.contact a { font-size: 14px;}

	/* FOOTER */
	#footer .content .row1 .linkBox li {font-size: 12px;}
	#footer .content .row2 .logoBox {width: 360px;}
	#footer .content .row2 .logoBox p {font-size: 18px;}
	#footer .content .row2 .tel {width: calc(100% - 380px);}

}

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

	/* FONT STYLE */
	.fontSize01 { font-size: 24px; }
	.fontSize02 { font-size: 24px; }
	.fontSize03 { font-size: 20px; }
	.fontSize04 { font-size: 20px; }
	.fontSize05 { font-size: 24px; }
	.fontSize06 { font-size: 14px; }
	.fontSize07 { font-size: 12px; }
	.fontSize08 { font-size: 14px; }
	.fontSize09 { font-size: 14px; }
	.fontSize10 { font-size: 14px; }
	.fontSize13 { font-size: 32px;}
	.verticalTitle { font-size: 8vw; transform: rotate(90deg) translateY(-100%);}
	.verticalSubTitle { left: calc(8vw + 5px ); font-size: 2vw;}


	/* FOOTER */
	#footer .content .row1 {margin-bottom: 30px;}
	#footer .content .row1 .linkBox { flex-basis: 100%; margin: 0 auto 40px auto;}
	#footer .content .row1 .linkBox li { flex-basis: calc( ( 100% - 4px ) / 2); /*border-bottom: #ccc solid 1px;*/ margin: 0 0 3px 0; font-size: 14px;}
	#footer .content .row1 .linkBox li a { display: block; text-align: center; padding: 1em 0; /*background: #f1f1f1; color: #000;*/ border: 0 !important;}
	#footer .content .row1 .snsBox {flex-basis: 120px; margin: 0 auto;}
	#footer .content .row1 .snsBox ul li { flex-basis: 30px; }

	#footer .content .row2 .logoBox {flex-basis: 100%; margin: 0 auto 40px;}
	#footer .content .row2 .logoBox * {flex-basis: 100%; text-align: center;}
	#footer .content .row2 .logoBox a {display: block; margin: 0 auto 20px;}
	#footer .content .row2 .logoBox a img {margin: 0 auto; display: block;}
	#footer .content .row2 .logoBox p {font-size: 18px;}
	#footer .content .row2 .tel {flex-basis: 100%;}
	#footer .content .row2 .tel ul * {flex-basis: 100%; text-align: center;}
	#footer .content .row2 .tel ul li:not(:last-of-type) {margin-bottom: 5px;}

	#footer .content .row3 ul {text-align: center;}
	#footer .content .row3 ul li {margin-bottom: 10px;}
	#footer .copyright { text-align: center;}

	/* COMMON TITLE */
	.titH2 {font-size: 24px;}

	/* THEME WHITE */
	.themeWhite #mainVisual {height: 150px;}


}