*{ margin: 0; paddin: 0;}
/* 標準フォント */
html{ overflow-x: hidden!important;}
html,body{ font-size:62.5%; font-family: -apple-system, BlinkMacSystemFont;}
h1{ }
header{ width: 100%; position: relative; z-index: 99; background: #fff; box-shadow: 0 0 5px #ccc;}
.headerInner{ width: 1280px; margin: 0 auto; padding: 15px 0 7px 0; display: flex; justify-content: space-between;}
header dl { width: 600px; display: flex; justify-content: space-between;}
header dl dt{ width: 400px; float: left;margin: 0;}
header dl dt p{}
header dl dd{ margin: 0; padding: 7px 0 0 0;}
header dl dd p{}
.headerLogo{ width: 1080px; margin: 0 auto; padding: 5px 0 15px 0!important;}
.logo{ width: 1180px; margin: 0 auto; text-align: center; font-size: 1rem; color: #fff; font-weight: 300; letter-spacing: 1rem;}
.headerLogo img{ padding: 0!important;}
.contact{ width: 180px!important; margin: 25px 0 0 0;}
.contact a{ font-size: 14px!important; color: #fff!important; text-decoration: none!important;background: #000; padding: 7px 32px!important; border-radius: 20px;}
.contact:hover{}
.contact a:hover{ color: #000!important; background: #fff; border-radius: 20px; border: 1px solid #000;}
nav{}
nav ul{ display: flex; justify-content: space-between; list-style: none; margin-top: 35px; margin-right: 10px;}
nav ul li{ padding: 0; }
nav ul li a{ text-decoration: none; font-weight: 300; font-size: 14px; color: #333; letter-spacing: 2px;;}
nav ul li a:hover {color: #be27b7!important;}
.mainvisual-bg{ display: flex; justify-content: space-between; padding: 0; height: 680px}
.mainvisual-bg-left{ width: 60%; background: url("images/mainvisual-bg-left.png"); background-repeat: no-repeat; background-size: cover; background-position: center;}
.mainvisual-bg-right{ width: 40%; background: url("images/mainvisual-bg-right.png"); background-repeat: no-repeat; background-size: cover; background-position: center;}
.mainvisual-area{ width: 580px; padding: 120px 0; text-align: center;}
.mainvisual-box{}
.mainvisual-box-content{ width: 500px; margin: 0 auto; text-align: left;}
.mainvisual-area h1{ font-size: 7rem; color: #fff; font-weight: 900; line-height: 110%; margin: 5px 0 15px 0; text-align: left;}
.mainvisual-area h2{ font-size: 5.3rem; color: #fff; font-weight: 400; line-height: 120%; margin: 5px 0 15px 0; text-align: left;}
.mainvisual-area p{ font-size: 2.6rem; color: #fff; font-weight: 100;line-height: 150%; letter-spacing: 0.4rem; text-align: left;}
.mainvisual-box-text{ }
.mainvisual-area .btn-area{ width: 320px; margin: 40px auto 0 auto;}
.btn { display: inline-block; width: 320px;text-align: center; border: 2px solid #fff;font-size: 1.6rem; color: #fff; text-decoration: none; font-weight: bold; padding: 15px 20px; position: relative; transition: 1.0s; left: -80px;}
.btn span {position: relative;z-index: 1;}
.btn::before, .btn::after { content: "";display: block; width: 50%; height: 100%; position: absolute; top: 0; transition: .2s; }
.btn::before { left: 0;}
.btn::after { right: 0;}
.btn:hover:before, .btn:hover:after { width: 0; background-color: #fff;}
.btn:hover { color: #111; background-color: #fff;}
.sec-content h2{ text-align: center; font-size: 1.6rem; margin-top: 20px; line-height: 175%; font-weight: 400;}
.sec01{ padding: 70px 0 0 0; background: url("images/sec01-bg.png"); background-repeat: repeat; background-size: contain;}
.sec01 .sec-content{ width: 1280px; margin: 0 auto; text-align: center; height: 600px; background: url("images/se01-content-bg.png"); background-repeat: no-repeat; background-size: auto; background-position: bottom;}
.sec01 h1{ font-size: 4.8rem; line-height: 150%; color: #004daf; font-weight: 900;}
.sec01-text{ padding: 60px 0 90px 0; text-align: center;}
.sec01-text ul{ list-style: none; position: relative; top: 0; }
.sec01-text ul li{ position: absolute; display: inline-block; background: #eef8ff; font-size: 20px; font-weight: 900; border-radius: 50px; color: #000; padding: 10px 20px!important;}
.sec01-text ul li.sec01-li-01{ left: 360px;}
.sec01-text ul li.sec01-li-02{ left: 40px; top: 120px;}
.sec01-text ul li.sec01-li-03{ left: 740px; top: 120px;}
.sec01-text ul li.sec01-li-04{ left: -20px; top: 240px;}
.sec01-text ul li.sec01-li-05{ left: 780px; top: 240px;}
.sec01-text ul li.sec01-li-06{ left: 60px; top: 360px;}
.sec01-text ul li.sec01-li-07{ left: 740px; top: 360px;}
.sec01 p{ font-size: 1.8rem; line-height: 195%; padding: 7px 0; color: #004daf; }
.sec02{ padding: 0 0 120px 0; background: #fff;}
.sec02 > .sec02-headline{ position: relative; background: url("images/sec02-lead-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 40px 0;}
.sec02 > .sec02-headline:after { position: absolute; content: ''; top: 100%; left: 50%; border: 45px solid transparent; border-top: 30px solid #0040c9; width: 0; height: 0;}
.sec02 > .sec02-headline>h1{ font-size: 4.8rem; color: #fff; text-align: center;}
.sec02 > .sec-content { padding: 90px 0 0 0;}
.sec02 > .sec-content > h1{ text-align: center; font-size: 4.8rem; line-height: 150%; color: #004daf; font-weight: 900; margin-bottom: 40px;}
.sec02-grid{ max-width: 1180px; min-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr;}
.sec02-grid:nth-child(2){ margin-top: -30px!important;}
.sec02-grid-area{ background: #eef8ff; width: 370px; margin-top: 40px; padding: 0 0 30px 0;}
.sec02-grid-area dl{ text-align: center; width: 100%; margin: 0 auto; }
.sec02-grid-area dl dt{ }
.sec02-grid-area dl dt img{ }
.sec02-grid-area dl dd {}
.sec02-grid-area dl dd.dd-title{ color: #004daf; font-size: 2.4rem;font-weight: 900; margin: 25px 0 10px 0;}
.sec02-grid-area dl dd.dd-list { width: 80%; margin: 0 auto; text-align: left!important;}
.sec02-grid-area dl dd.dd-list p{ color: #111; font-size: 1.4rem; line-height: 175%; padding: 7px 0;}
.sec03{ padding: 0 0 80px 0; background: url("images/sec03-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center;}
.sec03 .sec-content{ }
.sec03 h1{ text-align: center; font-size: 4.8rem; line-height: 150%; color: #fff; font-weight: 900; margin-bottom: 30px;}
.sec03-subtitle{ width: 1080px; margin: 0 auto; text-align: center; color: #004daf; font-size: 2.2rem; font-weight: 900;background: url("images/sec03-h1-bg.png"); background-repeat: no-repeat; background-size: auto; background-position: right; padding: 80px 0 125px 0;}
.sec03 h3{ display: inline-block; background: #fff; padding: 5px 20px;margin: 7px 0;}
.sec03-box{ max-width: 1080px; min-width: 1080px; margin: -70px auto 40px auto; background: #fff; padding: 40px 0;}
.sec03-box-inner{ width: 90%; margin: 0 auto; }
.sec03-box-inner ul{ }
.sec03-box-inner ul li{ font-size: 2.8rem; line-height: 240%; color: #222; font-weight: 900;}
.sec04{ padding: 90px 0 80px 0;}
.sec04 h1{ text-align: center; font-size: 4.8rem; line-height: 150%; color: #004daf; font-weight: 900;}
.sec04 h2{ color: #004daf;}
.sec04-box{ width: 1080px; margin: 60px auto 40px auto; background: #eef8ff; box-shadow: 10px 10px 0#004daf; padding: 15px 0 10px 0;}
.sec04-box-inner{ width: 90%; margin: 20px auto;}
.sec04-box-inner dl{ }
.sec04-box-inner dl dt h1{ font-size: 2.8rem; color: #004daf; font-weight: 900; margin-bottom: 20px; text-align: left!important;}
.sec04-box-inner dl dt span.span-title{ font-size: 2.4rem; color: #fff; font-weight: 700; margin-right: 20px; padding: 5px 15px 5px 20px; background:#000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb0141', endColorstr='#fb0069', GradientType=1 );}
.sec04-box-inner dl dd{}
.sec04-box-inner dl dd p img{ width: 90%!important; margin: 40px auto!important; display: block;}
.sec04-box-inner dl dd p{ font-size: 1.6rem; color: #111; margin: 15px 0;}
.flow{ padding: 90px 0; background: #f2f2f2;}
.flow > .sec-content { }
.flow > .sec-content > h1{ text-align: center; font-size: 4.8rem; line-height: 150%; color: #004daf; font-weight: 900; margin-bottom: 40px;}
.flow > .sec-content > h2{ text-align: center; font-size: 2.8rem; line-height: 150%; color: #111; font-weight: 900; margin-bottom: 40px;}
.flow-grid{ max-width: 1180px; min-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;}
.flow-grid-area{ background: #fff; width: 290px; margin-top: 40px; padding: 0 0 30px 0;}
.flow-grid-area dl{ text-align: center; width: 100%; margin: 0 auto; }
.flow-grid-area dl dt{ background: #004daf; text-align: center; padding: 10px 0;}
.flow-grid-area dl dt.dt-title{ color: #fff; font-size: 2.4rem; font-weight: 900;}
.flow-grid-area dl dd {}
.flow-grid-area dl dd img{ }
.flow-grid-area dl dd.dd-list { width: 80%; margin: 0 auto; text-align: left!important;}
.flow-grid-area dl dd.dd-list h2{ color: #004daf; font-size: 2rem; font-weight: 900; line-height: 175%; padding: 7px 0;}
.flow-grid-area dl dd.dd-list p{ color: #111; font-size: 1.4rem; line-height: 175%; padding: 7px 0;}
.sec05{ padding: 90px 0; background: url("images/contact-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; position: relative; z-index: 0;}
.sec05 h1{ text-align: center; font-size: 4.8rem; line-height: 150%; color: #fff; font-weight: 900;}
.sec05 h2{ color: #fff;}
.contact-box{ width: 1080px; margin: 30px auto; padding: 30px 0;}
.contact-box-inner{ width: 960px; margin: 0 auto;}
table{}
table tr{}
.border-top{ margin-top: 20px; padding-top: 20px; border-top: 1px solid #fff; }
table td{ font-size: 16px; font-weight: 900; line-height: 175%;}
table td.td01{ width: 260px; padding: 30px 0; color: #fff;}
table td.td02{ width: 680px; vertical-align: middle; padding: 10px 0 10px 20px; list-style: none;}
table td.td02 p{ font-size: 1.4rem; font-weight: 300; color: #fff;}
table td.td01 span{ float: right; clear: both; font-size: 12px;}
table td.td01 span.form-required{ float: right; clear: both; background: #b80000; padding: 5px 10px; color: #fff; font-weight: 900;}
table td.td01 span.form-any{ float: right; clear: both; background: #f2f2f2; padding: 5px 10px;}
table td ul{ list-style: none;}
table td ul li{ list-style: none; padding: 8px 0;}
table td ul li span{}
.sec06{ padding: 90px 0 80px 0;}
.sec06 h1{ text-align: center; font-size: 4.8rem; line-height: 150%; color: #004daf; font-weight: 900;}
.sec06 h2{ color: #004daf;}
.about-box{ width: 960px; margin: 40px auto;}
.table{ width: 100%; text-align: center; background: #fff; padding: 0;}
.table table{ width: 100%; margin: 0; border: 1px solid #fff; padding: 0!important; border-collapse: collapse;}
.table table th{ color: #fff; text-align: center!important; border: 1px solid #fff; border-collapse: collapse; padding: 15px 10px;}
.table table tr .col01{ width:25%; text-align: center;background: #004daf; color: #fff;}
.table table tr .col02{ width:75%; text-align: left; background: #eef8ff; color: #111; }
.table table tr .col02 .td-inner{ width:90%; margin: 0 auto;}
.table table tr td{ vertical-align: middle; border: 1px solid #fff; border-collapse: collapse ;padding: 25px 5px;font-weight: 300;}
.table table tr td ul{ list-style-type: disc!important;}
.table table tr td ul li{ margin: 0 0 0 -20px; padding: 0; list-style-type: disc!important;}
footer { background: #000; padding: 20px 0; text-align: center;}
footer div { color: #fff;}
.center{ width: 30%; margin: 0 auto;}
.submit{width: 100%; margin: 0 auto!important; background: #008e67;background: -moz-linear-gradient(top, #00c48e 0%, #008e67 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #00c48e 0%,#008e67 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #00c48e 0%,#008e67 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c48e', endColorstr='#008e67',GradientType=0 ); /* IE6-9 */
color: #fff; padding: 15px 0; font-size: 16px; border: 0!important; border-radius: 30px;font-weight: 900;-webkit-transition: 0.5s;transition: 0.5s;}
.submit:hover{width: 100%; margin: 0 auto!important; background: #008e67;background: -moz-linear-gradient(top, #008e67 0%, #00c48e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #008e67 0%,#00c48e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #008e67 0%,#00c48e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008e67', endColorstr='#00c48e',GradientType=0 ); /* IE6-9 */
color: #fff; padding: 15px 0; font-size: 16px; border: 0!important; border-radius: 30px;font-weight: 900;}
/* テキストボックス関連
---------------------------------------------------------------------------*/
input[type="text"] { margin: 0; padding: 0; border: 0; background-color: #fff; outline: 0; text-indent: 7px!important; font-size: 18px!important;}
.input-text { width: 100%; height: 42px; border-radius: 5px!important;}
.input-text input[type="text"] { width: 100%; padding: 3px 10px; border: 1px solid #333!important; border-radius: 2px; transition: border-color ease .2s;}
.input-text input[type="text"]:focus { border-color: #5f98e1;}
.input-name { width: 48%; height: 42px; border-radius: 5px!important;}
.input-name input[type="text"] { width: 48%; padding: 3px 10px; border: 1px solid lightgrey; border-radius: 2px; transition: border-color ease .2s;}
.input-name input[type="text"]:focus { border-color: #5f98e1;}
.input-30 { width: 30%; height: 42px; border-radius: 5px!important;}
.input-30 input[type="text"] { width: 30%; padding: 3px 10px; border: 1px solid lightgrey; border-radius: 2px; transition: border-color ease .2s;}
.input-30 input[type="text"]:focus { border-color: #5f98e1;}
.input-50 { width: 50%; height: 42px; border-radius: 5px!important;}
.input-50 input[type="text"] { width: 50%; padding: 3px 10px; border: 1px solid lightgrey; border-radius: 2px; transition: border-color ease .2s;}
.input-50 input[type="text"]:focus { border-color: #5f98e1;}
textarea[type="text"] { margin: 0; padding: 0; border: 0; background-color: #fff; outline: 0; text-indent: 7px!important; font-size: 18px!important;}
.input-textarea { width: 100%; height: 250px; border-radius: 5px!important;}
.input-textarea textarea[type="text"] { width: 100%; padding: 3px 10px; border: 1px solid lightgrey; border-radius: 2px;transition: border-color ease .2s;}
.input-textarea textarea[type="text"]:focus { border-color: #5f98e1;}
/* チェックボックス関連
---------------------------------------------------------------------------*/
input[type=checkbox] {
display: none; /* checkboxを非表示にする */
}
.check-label {
position: relative; /* ボックスの位置を指定する */
padding: 0 0 0 35px; /* ボックス内側の余白を指定する */
}
.check-label:hover:after {
border-color: #0171bd; /* ボックスの境界線を実線で指定する */
}
.check-label:after, .check-label:before{
position: absolute; /* ボックスの位置を指定する */
content: ""; /* ボックスのコンテンツ */
display: block; /* ブロックレベル要素化する */
top: 48%; /* 上部から配置の基準位置を決める */
}
.check-label:after {
left: 5px; /* 左から配置の基準位置を決める */
margin-top: -10px; /* チェック枠の位置 */
width: 17px; /* ボックスの横幅を指定する */
height: 17px; /* ボックスの高さを指定する */
border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
border-radius: 6px; /* ボックスの角丸を指定する */
}
.check-label:before {
left: 12px; /* 左から配置の基準位置を決める */
margin-top: -7px; /* チェックマークの位置 */
width: 5px; /* ボックスの横幅を指定する */
height: 9px; /* ボックスの高さを指定する */
border-right: 3px solid #0171bd; /* 境界線（右）のスタイルを指定する */
border-bottom: 3px solid #0171bd; /* 境界線（下）のスタイルを指定する */
transform: rotate(45deg); /* 要素を回転させる */
opacity: 0; /* 要素を透過指定する */
}
input[type=checkbox]:checked + .check-label:before {
opacity: 1; /* 要素を表示する */
}
ul.list_ul li input:checked + label {
}
.check-label-disabled {
position: relative; /* ボックスの位置を指定する */
padding: 0 0 0 35px; /* ボックス内側の余白を指定する */
}
.check-label-disabled:hover:after {
border-color: #EEE; /* ボックスの境界線を実線で指定する */
}
.check-label-disabled:after, .check-label-disabled:before{
position: absolute; /* ボックスの位置を指定する */
content: ""; /* ボックスのコンテンツ */
display: block; /* ブロックレベル要素化する */
top: 48%; /* 上部から配置の基準位置を決める */
}
.check-label-disabled:after {
left: 5px; /* 左から配置の基準位置を決める */
margin-top: -10px; /* チェック枠の位置 */
width: 17px; /* ボックスの横幅を指定する */
height: 17px; /* ボックスの高さを指定する */
border: 2px solid #EEE; /* ボックスの境界線を実線で指定する */
border-radius: 6px; /* ボックスの角丸を指定する */
}
/* ラジオボタン関連
---------------------------------------------------------------------------*/
input[type=radio] {
display: none; /* 標準スタイル */
}
.radio-label {
position: relative; /* ボックスの位置を指定する */
padding: 0 0 0 35px; /* ボックス内側の余白を指定する */
}
.radio-label:after, .radio-label:before {
position: absolute; /* ボックスの位置を指定する */
content: ""; /* ボックスのコンテンツ */
display: block; /* ブロックレベル要素化する */
top: 50%; /* 上部から配置の基準位置を決める */
}
.radio-label:after {
left: 5px; /* 左から配置の基準位置を決める */
margin-top: -10px; /* チェック枠の位置 */
width: 16px; /* ボックスの横幅を指定する */
height: 16px; /* ボックスの高さを指定する */
border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
border-radius: 50%; /* ボックスの角丸を指定する */
}
.radio-label:before {
left: 10px; /* 左から配置の基準位置を決める */
margin-top: -5px; /* チェックマークの位置 */
width: 10px; /* ボックスの横幅を指定する */
height: 10px; /* ボックスの高さを指定する */
background: #0171bd;/* ボックスの背景色を指定する */
border-radius: 50%; /* ボックスの角丸を指定する */
opacity: 0; /* 要素を透過指定する */
}
input[type=radio]:checked + .radio-label:before {
opacity: 1; /* 要素を表示する */
}
.radio-label:hover:after {
border-color: #0171bd; /* ボックスの境界線を実線で指定する */
}
/* ローディングアニメーション
---------------------------------------------------------------------------*/
.loader-wrap {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 999;
background: #fff;
}
.loader,
.loader:before,
.loader:after {
background: #004daf;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color:#004daf;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}