*{ margin: 0; paddin: 0;}
/* 標準フォント */
html{ overflow-x: hidden!important;}
html,body{ font-size:62.5%; font-family: -apple-system, BlinkMacSystemFont;}
h1{ font-family: 'M PLUS 1p', sans-serif;}
header{ background: url("images/mainvisual-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 10px 0; }
.mainvisual{ padding: 120px 0; text-align: center;;}
.mainvisual h1{ font-size: 10rem; color: #fff; font-weight: 900; margin-bottom: -30px; line-height: 150%; margin: 5px 0 25px 0;}
.top-title{ font-size: 5.5rem; color: #fff;}
.top-title01{ font-size: 8rem!important; color: #fff;}
.top-title02{ font-size: 11rem!important; color: #fff;}
.mainvisual h2{ font-size: 4.5rem; color: #fff; font-weight: 900;font-family: 'M PLUS 1p', sans-serif; }
.mainvisual h3{ font-size: 2.6rem; color: #fff; font-weight: 300;font-family: 'M PLUS 1p', sans-serif;line-height: 170%;}
.mainvisual .btn-area{ width: 415px; margin: 80px auto 0 auto;}
.logo{ font-family: 'Jaldi', sans-serif; width: 1180px; margin: 0 auto; text-align: center; font-size: 1.5rem; color: #fff; font-weight: 300;}
.btn { display: inline-block; width: 415px;text-align: center; border: 2px solid #fff;font-size: 2.4rem; color: #fff; text-decoration: none; font-weight: bold; padding: 15px 20px; border-radius: 4px; position: relative; transition: 1.0s;}
.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;}
.sec01{ padding: 120px 0; background: url("images/sec01-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center;}
.sec01 .sec-content{ text-align: center;}
.sec01 h1{ font-size: 4.8rem; line-height: 150%; color: #fff; font-weight: 900;font-family: 'M PLUS 1p', sans-serif;}
.sec01-text{ padding: 40px 0 0 0; text-align: center;}
.sec01 p{ font-size: 2.6rem; line-height: 175%; padding: 7px 0; color: #fff; }
.sec02{ padding: 120px 0;}
.sec02-hl { text-align: center; margin-top: 40px;}
.sec02-hl h1{ font-size: 4.8rem; color: #2980b9; font-weight: 900; position: relative; font-family: 'M PLUS 1p', sans-serif;}
.sec02-hl h1:after{ position: absolute; color: #2980b9; font-size: 20.0rem; opacity: 0.05;}
.sec02-hl h1.service:after{ content: 'Service'; top: -180px; left: 0; right: 0; bottom: 0; letter-spacing: -0.5px!important;}
.sec02-hl h2{ font-size: 1.8rem; color: #222; font-weight: 900;}
.sec02-grid{ max-width: 1280px; min-width: 1080px; margin: -140px auto 0 auto;display: grid; grid-template-columns: 1fr 1fr 1fr;}
.sec02-grid-area{ background: #eef8ff; width: 400px; margin-top: 300px;; padding: 80px 0 40px 0;}
.sec02-grid-area dl{ text-align: center; width: 80%; margin: 0 auto; }
.sec02-grid-area dl dt{ position: relative; top: 0;}
.sec02-grid-area dl dt img{ position: absolute; top: -190px; right: 80px;}
.sec02-grid-area dl dd {}
.sec02-grid-area dl dd.dd-title{ font-size: 2.8rem; color: #2980b9; font-weight: 900; margin-bottom: 20px;}
.sec02-grid-area dl dd.dd-list { text-align: left!important;}
.sec02-grid-area dl dd.dd-list p{ font-size: 1.6rem; line-height: 175%; padding: 7px 0;}
.sec03{ padding:110px 0 80px 0; background: #eef8ff; position: relative; z-index: -10;}
.sec03-hl { text-align: center; margin-top: 40px; }
.sec03-hl h1{ font-size: 4.8rem; color: #2980b9; font-weight: 900; position: relative; z-index: 10;font-family: 'M PLUS 1p', sans-serif;}
.sec03-hl h1:after{ position: absolute; color: #fff; font-size: 20.0rem; opacity: 0.85; z-index: -1;}
.sec03-hl h1.strengths:after{ content: 'Strengths'; top: -180px; left: 0; right: 0; bottom: 0; letter-spacing: -0.5px!important;}
.sec03-hl h2{ font-size: 1.8rem; color: #222; font-weight: 900;}
.sec03 .sec-content{ text-align: center;}
.sec03-grid{ max-width: 1180px; min-width: 1080px; margin: 60px auto; display: grid; grid-template-columns: 300px 1fr; background: #fff;}
.grid-left{ padding: 5px 5px 1px 5px; background: rgb(50,216,255); background: linear-gradient(220deg, rgba(50,216,255,1) 0%, rgba(0,108,234,1) 100%);}
.grid-right{ background: #fff;}
.grid-right-area { width: 745px; margin: 35px auto; text-align: left}
.grid-right-area dl { }
.grid-right-area dl dt h1{ font-size: 2.6rem; color: #2980b9; font-weight: 900; margin-bottom: 20px;}
.grid-right-area dl dd p{ font-size: 1.6rem; color: #111; margin: 15px 0;}
.sec04{ padding:110px 0 80px 0;}
.sec04-hl { text-align: center; margin-top: 40px; position: relative; }
.sec04-hl h1{ font-size: 4.8rem; color: #2980b9; font-weight: 900;font-family: 'M PLUS 1p', sans-serif;}
.sec04-hl h1:after{ position: absolute; color: #2980b9; font-size: 20.0rem; opacity: 0.05;}
.sec04-hl h1.performance:after{ content: 'Performance'; top: -170px; left: 0; right: 0; bottom: 0; letter-spacing: -1.5px!important;}
.sec04-hl h2{ font-size: 1.8rem; color: #222; font-weight: 900;}
.sec04-box{ width: 1080px; margin: 60px auto 40px auto; border: 1px solid #2980b9; background: #f4faff; }
.sec04-box-inner{ width: 85%; margin: 50px auto;}
.sec04-box-inner dl{ }
.sec04-box-inner dl dt h1{ font-size: 3.2rem; color: #111; font-weight: 900; margin-bottom: 20px;}
.sec04-box-inner dl dt span.span-title{ font-size: 2.4rem; color: #fff; font-weight: 700; margin-right: 20px; border-radius: 50px; padding: 5px 15px 5px 20px; background: rgba(203,1,65,1);background: -moz-linear-gradient(left, rgba(203,1,65,1) 0%, rgba(251,0,105,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(203,1,65,1)), color-stop(100%, rgba(251,0,105,1)));background: -webkit-linear-gradient(left, rgba(203,1,65,1) 0%, rgba(251,0,105,1) 100%);background: -o-linear-gradient(left, rgba(203,1,65,1) 0%, rgba(251,0,105,1) 100%);background: -ms-linear-gradient(left, rgba(203,1,65,1) 0%, rgba(251,0,105,1) 100%);background: linear-gradient(to right, rgba(203,1,65,1) 0%, rgba(251,0,105,1) 100%);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;}
.sec05{ padding:120px 0; background: #2980b9; position: relative; z-index: 0;}
.sec05-hl { text-align: center; margin-top: 40px; }
.sec05-hl h1{ font-size: 4.8rem; color: #fff; font-weight: 900; position: relative; z-index: 10;font-family: 'M PLUS 1p', sans-serif;}
.sec05-hl h1:after{ position: absolute; color: #1973ad; font-size: 20.0rem; opacity: 0.7; z-index: -1;}
.sec05-hl h1.contact:after{ content: 'Contact'; top: -170px; left: 0; right: 0; bottom: 0; letter-spacing: -0.5px!important;}
.contact-box{ width: 1080px; margin: 50px auto; background: #fff; padding: 60px 0;}
.contact-box-inner{ width: 960px; margin: 0 auto;}
table{}
table tr{}
.border-top{ margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; }
table td{ font-size: 16px; font-weight: 900; line-height: 175%;}
table td.td01{ width: 360px; padding: 30px 0;}
table td.td02{ width: 580px; vertical-align: middle; padding: 10px 0 10px 20px; list-style: none;}
table td.td02 p{ font-size: 1.4rem; font-weight: 300;}
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:110px 0 80px 0;}
.sec06-hl { text-align: center; margin-top: 40px; position: relative; }
.sec06-hl h1{ font-size: 4.8rem; color: #2980b9; font-weight: 900;font-family: 'M PLUS 1p', sans-serif;}
.sec06-hl h1:after{ position: absolute; color: #2980b9f; font-size: 20.0rem; opacity: 0.05;}
.sec06-hl h1.about:after{ content: 'About'; top: -180px; left: 0; right: 0; bottom: 0; letter-spacing: -0.5px!important;}
.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: #2980b9; color: #fff;}
.table table tr .col02{ width:75%; text-align: left; background: #f4faff; 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: #f1f1f1; 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: #f1f1f1; 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: 2;
background: url("images/sec01-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center;
}
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: #ffffff;
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;
}
}