@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }
	
html, body {
		font-size: 1.4vw;
		color: #333;
		margin: 0;
		padding: 0;
		/*background-color: #81c0e3;*/
		min-height: 100%;
		height: auto;
}
@media screen and (min-width: 1281px) {/* 1281px以上の幅の場合に適応される */
html, body{	font-size: 14pt; }
}

body{
background: rgb(250,250,250);
/*background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 49%, rgba(124,190,233,1) 100%);*/
}

* {
	box-sizing: border-box;
	font-family:
  -apple-system, BlinkMacSystemFont,
  "游ゴシック体", YuGothic,
  "Yu Gothic M",
  "游ゴシック Medium", "Yu Gothic Medium",
  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3,
  "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
  "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
  "メイリオ", Meiryo,
  Osaka,
  "ＭＳ Ｐゴシック", "MS PGothic",
  "Helvetica Neue", HelveticaNeue,
  Helvetica,
  Arial,
  "Segoe UI",
  sans-serif,
  "Apple Color Emoji",
  "Apple Color Emoji",
  "Segoe UI Emoji",
  "Segoe UI Symbol",
  "Noto Color Emoji";
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, *{ font-family: "メイリオ", Meiryo, Helvetica, Arial, sans-serif; } /* IE11 */
}

/* PCSP */
.pc{ display: inline-block !important; }
.sp{ display: none !important; }
@media screen and (max-width: 768px) {/* 768pxまでの幅の場合に適応される */
.pc{ display: none !important; }
.sp{ display: inline-block !important; }
}

/*丸数字ほかインデント*/
span.indent{ display: inline-block; padding-left: 1em; text-indent: -1em; }
span.indent2{ display: inline-block; padding-left: 2em; text-indent: -2em; }
span.indent3{ display: inline-block; padding-left: 3em; text-indent: -3em; }
span.indent4{ display: inline-block; padding-left: 4em; text-indent: -4em; }
span.indent5{ display: inline-block; padding-left: 5em; text-indent: -5em; }
span.indent6{ display: inline-block; padding-left: 6em; text-indent: -6em; }

/*
暗　
明　
*/

#Wrapper{ display: flex; flex-direction: column; min-height: 100vh; }
main{ display: block; padding-bottom: 3em; min-height: calc(100vh - 80px); }
section{ width: 80%; max-width: 1280px; margin: 0 auto; padding: 0; }


/* 建パスtop */
header{ position: relative; margin: 0 auto; padding: 0; width: 80%; max-width: 1280px; }
.visuallyhidden {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 overflow: hidden;
 clip: rect(1px, 1px, 1px, 1px);
 -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
 clip-path: inset(0px 0px 99.9% 99.9%);
 border: 0;
}
.headerWrap{ display: flex; align-items: center; justify-content: space-between; position: relative; margin: 1vw auto 0; padding: 0; }
.headerLogo{ width: auto; height: 8.5em; margin: 0 1em 0 0; padding: 0; display: block; opacity:0; animation: headerLogoAnim 1s forwards; animation-delay: 0s; }
@keyframes headerLogoAnim{
  0%{opacity:0; transform: translateX(-2vw);}
100%{opacity:1; transform: translateX(0);}
}
.headerWord{ width: auto; height: 6.5em; margin: 3vw 0 0 0; padding: 0; display: block; opacity:0; animation: headerWordAnim 1s forwards; animation-delay: .5s; }
@keyframes headerWordAnim{
  0%{opacity:0; transform: translateY(0);}
100%{opacity:1; transform: translateY(-2vw);}
}
.headerLogo img,
.headerWord img{ width: auto; height: 100%; margin: 0; display: block; }
.headerFree{ width: auto; height: 8.5em; margin: 0 0 0 0; padding: 0; display: block; opacity:0; animation: headerFreeAnim 1s forwards; animation-delay: 1s; }
@keyframes headerFreeAnim{
  0%{opacity:0; transform: translateX(2vw);}
100%{opacity:1; transform: translateX(0);}
}
.headerFree img{ width: auto; height: 100%; margin: 0; display: block; }

section.part1{ display: flex; align-items: center; justify-content: space-between; position: relative; margin: 2vw auto 0; padding: 0; }
.catchMain{ height: auto; width: 85%; opacity:0; animation: catchMainAnim 1s forwards; animation-delay: .75s; }
@keyframes catchMainAnim{
  0%{opacity:0; transform: translateX(-2vw);}
100%{opacity:1; transform: translateX(0);}
}
.photo1{ height: auto; width: 15%; opacity:0; animation: photo1Anim 1s forwards; animation-delay: .75s; }
@keyframes photo1Anim{
  0%{opacity:0; transform: translateX(2vw);}
100%{opacity:1; transform: translateX(0);}
}
.catchMain img,
.photo1 img{ width: 100%; height: auto; margin: 0; display: block; }

section.part2{ display: flex; align-items: center; justify-content: space-between; position: relative; margin: 1vw auto 0; padding: 0; }
section.part2 .leftWrap{ width: 50%; }
.device{ height: auto; width: 95%; opacity:0; animation: deviceAnim 1s forwards; animation-delay: 1.25s; }
@keyframes deviceAnim{
  0%{opacity:0; transform: translateX(-2vw);}
100%{opacity:1; transform: translateX(0);}
}
.device img{ width: 100%; height: auto; margin: 0; display: block; }
section.part2 .rightWrap{ width: 50%; }
.point1{ height: auto; width: 100%; opacity:0; animation: point1Anim 1s forwards; animation-delay: 1.25s; }
@keyframes point1Anim{
  0%{opacity:0; transform: translateX(2vw);}
100%{opacity:1; transform: translateX(0);}
}
.point2{ height: auto; width: 100%; opacity:0; animation: point2Anim 1s forwards; animation-delay: 1.5s; }
@keyframes point2Anim{
  0%{opacity:0; transform: translateX(2vw);}
100%{opacity:1; transform: translateX(0);}
}
.point3{ height: auto; width: 100%; opacity:0; animation: point3Anim 1s forwards; animation-delay: 1.75s; }
@keyframes point3Anim{
  0%{opacity:0; transform: translateX(2vw);}
100%{opacity:1; transform: translateX(0);}
}
.point1 img,
.point2 img,
.point3 img{ width: 100%; height: auto; margin: 0; display: block; }

section.part3{ display: flex; align-items: center; justify-content: center; position: relative; margin: 11vw auto 0; padding: 0; }
.link{ height: auto; width: 60%; }
.link img{ width: 100%; height: auto; margin: 0; display: block; }

section.part4{ display: flex; align-items: center; justify-content: center; position: relative; margin: 1vw auto -0.1vw; padding: 0; }
.search{ height: auto; width: 55%; }
.photo2{ height: auto; width: 20%; }
.search img,
.photo2 img{ width: 100%; height: auto; margin: 0; display: block; }

.part5bg{ background-color: #c9e4ea; }
section.part5{ position: relative; }
.usefulTitle{ width: auto; height: 2.6em; top: -1.3em; position: absolute; }
.usefulTitle img{ width: auto; height: 100%; margin: 0; display: block; }
.usefulWrap{ position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0 auto 0; padding: 3vw 0 0 0; width: 100%; }
.useful1Wrap,
.useful2Wrap,
.useful3Wrap{ width: 30%; }
.usefulcatch1,
.usefulcatch2,
.usefulcatch3{ height: auto; width: 100%; margin-bottom: 0.5em; }
.usefulimg1,
.usefulimg2,
.usefulimg3{ height: auto; width: 100%; }
.usefulcatch1 img,
.usefulcatch2 img,
.usefulcatch3 img,
.usefulimg1 img,
.usefulimg2 img,
.usefulimg3 img{ width: 100%; height: auto; margin: 0; display: block; }

.part6bg{ background-image: url(../img/partbg.png); background-repeat: repeat-x; background-size: 180% 180%; margin: 4vw auto 6vw; }
section.part6{ display: flex; align-items: flex-end; justify-content: space-between; position: relative; margin: 0 auto; padding: 0; }
section.part6 .leftWrap{ width: 55%; position: relative; }
.corpinfo{ width: 95%; height: auto; position: absolute; bottom: -2vw; left: 0; }
.photo3{ width: 20%; height: auto; position: absolute; bottom: 0; right: 0; }
.corpinfo img,
.photo3 img{ width: 100%; height: auto; margin: 0 0 0 -2vw; display: block; }
section.part6 .rightWrap{ width: 42%; position: relative; }
.newspaper{ width: 100%; height: auto; }
.newspaper img{ width: 100%; height: auto; margin: 0; display: block; }

.mvbg{ background-color: #c9e4ea; }
.videoWrap{ width: 60%; margin: 2em auto 0; padding: 0; }
@media screen and (max-width: 768px) {/* 768pxまでの幅の場合に適応される */
.videoWrap{ width: 100%; }
}
.video-container { position: relative; width: 100%; padding-top: 56.25%; margin-bottom: 2.5rem; }
.video-container iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; }

section.part7{ display: flex; align-items: center; justify-content: space-between; position: relative; margin: 1vw auto 0; padding: 0; }
section.part7 .leftWrap{ width: 55%; display: flex; flex-direction: column; }
.footerAdd{ width: 95%; height: auto; margin-bottom: 0.3em; }
.footerContact{ width: 95%; height: auto; }
.footerAdd img,
.footerContact object{ width: 100%; height: auto; margin: 0; display: block; }
section.part7 .rightWrap{ width: 42%; }
.footerCorpLogo{ width: 100%; height: auto; }
.footerCorpLogo img{ width: 100%; height: auto; margin: 0; display: block; }

section.part8{ display: flex; align-items: center; justify-content: center; position: relative; margin: 4vw auto 4vw; padding: 0; }
section.part8 .leftWrap{ width: 30%; position: relative; }
.onlineimg{ width: 100%; height: auto;}
.onlineimg img{ width: 100%; height: auto; margin: 0; display: block; }
section.part8 .rightWrap{ width: 40%; margin-left: 3%; }
.onlinelink{ width: 100%; height: auto; }
.onlinelink img{ width: 100%; height: auto; margin: 0; display: block; }
section.part8 .rightWrap a{ color: #004385; font-weight: bold; text-decoration: none; font-feature-settings: "palt"; }

section.part9{ display: flex; align-items: center; justify-content: center; position: relative; margin: 2vw auto 0; padding: 0; }

section.part10{ display: flex; align-items: center; justify-content: center; position: relative; margin: 2vw auto 6vw; padding: 0; }
.forstaff{ height: auto; width: 40%; }
.forstaff img{ width: 100%; height: auto; margin: 0; display: block; }

footer{ display: block; width: 100%; height: 80px; text-align: center; }
div.policyWrap{ display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto 1em; padding: 0; }
div.policyWrap .leftPolicyWrap{ margin-right: 4em; }
div.policyWrap .rightPolicyWrap{  }
div.policyWrap a{ color: #004385; text-decoration: none; font-feature-settings: "palt"; }
div.copyright{ background-color: #004385; font-size: 0.7em; color:#fff; margin: auto 0 0 0; padding: 1em 0; }
@media screen and (max-width: 768px) {/* 768pxまでの幅の場合に適応される */
div.policyWrap{ font-size: 2.2rem; padding: 2rem 0; }
div.copyright{ font-size: 2.2rem; padding: 2rem 0; }
}

/* 建パスtop アニメーション */
.fadein{ opacity: 0; transition: all 0.7s; }
.fadein.fadein-on{ opacity: 1; animation: fadeUp 1s forwards; }
@keyframes fadeUp{
  0%{opacity:0; transform: translateY(0);}
100%{opacity:1; transform: translateY(-10vw);}
}

/* 建パスtop SPレイアウト */
@media screen and (max-width: 768px) {/* 768pxまでの幅の場合に適応される */
header{ margin: 0 auto; width: 100%; }
.headerWrap{ margin: 0 auto; justify-content: center; flex-wrap: wrap; }
.headerLogo{ width: 100%; height: auto; margin: 3vw 0 0 0; }
.headerWord{ width: 79%; height: auto; margin: 2vw 0 0 0; }
.headerFree{ width: 19%; height: auto; }
.headerLogo img{ width: 70%; height: auto; margin: 0 auto; }
.headerWord img,
.headerFree img{ width: 100%; height: auto; }
section{ width: 100%; max-width: 1024px; margin: 0 auto; padding: 0; }
section.part2{ flex-direction: column; }
section.part2 .leftWrap{ width: 80%; }
section.part2 .rightWrap{ width: 80%; }
.link{ width: 90%; }
.search{ width: 65%; }
.photo2{ width: 25%; }
.usefulTitle{ width: 100%; height: 9vw; top: -4.5vw; text-align: center; }
.usefulTitle img{ margin: 0 auto; }
.usefulWrap{ flex-direction: column; }
.useful1Wrap,
.useful2Wrap,
.useful3Wrap{ width: 70%; margin-top: 6vw; }
.part6bg{ background-image: none; margin: 4vw auto 6vw; }
section.part6{ flex-direction: column; padding: 2vw 0; }
section.part6 .leftWrap{ width: 90%; margin: 0 auto 6vw; }
.corpinfo{ position: relative; }
.corpinfo img,
.photo3 img{ margin: 0; }
section.part6 .rightWrap{ width: 80%; margin: 0 auto; }
section.part7{ flex-direction: column; }
section.part7 .leftWrap{ width: 100%; margin: 0 auto 3vw; padding-left: 3vw; }
.footerAdd{ margin-bottom: 2vw; }
section.part7 .rightWrap{ width: 60%; }
section.part8{ flex-direction: column; padding: 2vw 0; }
section.part8 .leftWrap{ width: 70%; margin: 0 auto 3vw; }
section.part8 .rightWrap{ width: 80%; margin: 0 auto; }
.forstaff{ width: 60%; }
}

/* 契約するには? */

section.contract1{ display: flex; align-items: center; justify-content: center; position: relative; margin: 2vw auto 6vw; padding: 0; }
section.contract1 .forstaff{ height: auto; width: 80%; }
.forstaff img{ width: 100%; height: auto; margin: 0; display: block; }

section.contractBox{ margin-bottom: 4em; }
section.contractBox h2{ color: #004385; border-bottom: 8px solid #cfeaf7; margin-bottom: 1em; }
section.contractBox p{ line-height: 1.8em; margin-bottom: 2em; }
section.contractBox div.part{ line-height: 1.8em; margin-bottom: 1em; }
section.contractBox div.part h3{ display: inline-block; color: #004385; border-bottom: 3px dotted #999;}
section.contractBox div.part h3::before{ display: inline-block; font-family: 'Font Awesome 7 Free'; font-weight: 900; content: "\f138"; margin-right: 0.2em; }
section.contractBox a{ color: #004385; font-weight: bold; text-decoration: none; font-feature-settings: "palt"; }

/* 契約するには? SPレイアウト */
@media screen and (max-width: 768px) {/* 768pxまでの幅の場合に適応される */
section.contractBox{ width: 90%; font-size: 3rem; }
}


/* 申込thanks */
.preWord{ /*height: calc(100vh - 280px);*/ display: flex; flex-direction: column; justify-content: center; align-items: center; }
.closeBtn{ text-align: center; margin: 10vw auto; padding: 0; }
.closeBtn a{ color: #004385; font-weight: bold; text-decoration: none; font-feature-settings: "palt"; cursor: pointer; }