@charset "UTF-8";


/* ==================== サイトごと設定 ==================== */

a,
a:visited,
a:hover {
color:#000;
}

p,
td,
th,
li,
dt,
dd,
input,
textarea,
.entryBody,
.entryMore {
font-size:0.875rem;
}

img{
	max-width:100%;
	height:auto;
}

BODY, H1, H2, H3, H4, H5, H6, P, TD, TH, DIV, INPUT, TEXTAREA, OL, UL, LI, PRE {
    font-family: 'Noto Sans JP','Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-break: strict;
line-break: strict;
}

.roboto{
font-family: 'Roboto', sans-serif!important;
}

/* ==================== PC側のメディアクエリはここにまとめる（1400px以上） ==================== */

@media screen and (min-width: 1400px) {

	
}

/* ==================== 初期設定 ==================== */

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


body {
color: #000;
background:#001a2f;
}

.center {
text-align: center;
}


a img:hover {
    transition: 0.3s linear;
    opacity: 0.7;
}

.mincho{
}

.pagetop {
z-index: 9999;
cursor: pointer;
position: fixed;
right: 10px;
bottom:0;
max-width: 120px;
width: 10%;
padding-bottom: 2%;
}
.maplink {
z-index:9999;
cursor: pointer;
position: fixed;
/*right: 94px;
bottom: 170px;*/
right: 20px;
bottom: 20px;
}

.pagetop.bottom,
.maplink.bottom{
display:none!important;
transition-duration: 0.3s;
}

.pcNone {
  display: none;
}


/* ==================== サイト全体 レイアウト ==================== */
#container {
}

/* ========== ヘッダー ========== */
#header {
width:100%;
z-index:9999;
position:fixed;
top:0;
padding:20px 0;
box-sizing:border-box;
transition-duration: 0.3s;
box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
background: #000;
}

#header.scroll{
}

#headerTitle {
width:94%;
margin: 0 auto;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.header_contact {
width: 50%;
display: flex;
justify-content: right;
}
.header_contact img {
max-height: 64px;
}
#headerAreaLogo {
width: 46%;
margin-right: 4%;
}

#headerAreaLogo img{
max-height:64px;
vertical-align: inherit;
}

#headerAreaLogo a{
display:block;
line-height: 1;
cursor: pointer;
}

ul#sns_icon{
margin:0 0 0 20px;
padding:0 0 0 10px;
list-style: none;
float:left;
position: relative;
}

ul#sns_icon:before{
content:"";
position:absolute;
left:0;
top:4px;
height:27px;
width:1px;
background: #000;
}


ul#sns_icon li{
display: inline-block;
margin-left:7px;
max-height:35px;
}

#g_navi ul{
margin:-17px 0 0;
padding:0;
list-style:none;
float:right;
text-align: right;
width:calc(100% - 464px);
letter-spacing: -.4em;
}

#g_navi ul li{
display:inline-block;
margin-left:10px;
line-height:70px;
letter-spacing: 0;
width: calc(16.6666% - 10px);
max-width: 70px;
}



/* ==================== ボタン ==================== */

.btn{
    background:#000;
    display:block;
    width:200px;
    height:45px;
    line-height: 45px;
    transition-duration: 0.3s;
    border-radius:10px;
    padding:0 20px;
    font-weight:bold;
    font-family: 'Roboto', sans-serif;
    font-size:14px!important;
    box-sizing:border-box;
    position:relative;
    margin:auto;
}

.btn a{
color:#fff;
display:block;
    line-height: 45px;
}

.btn:hover{
    background: #666666;
    transition-duration: 0.3s;
}

.btn:hover a{
color:#fff;
    transition-duration: 0.3s;
}

.btn i{
    position: absolute;
    top: calc(50% - 10px);
    right: 12px;
    font-size: 20px!important;
    transition-duration: 0.3s;
}

.btn:hover i{
    right: 14px;
    transition-duration: 0.3s;
}

/* ========== キャッチ画像 ========== */

#catchArea{
margin-top: 85px;
background: url(../img/main_bg.png);
}
.flex_wrap.catch_flex {
width: 100%;
margin: auto;
padding: 3% 0;
max-width: 1500px;
}
.catch_flex .flex_inner {
width: 45%;
margin: auto;
}
#catchArea img{
width:100%;
}

#catchArea p.lead{
max-width:640px;
margin:40px auto 20px;
font-size:14px;
text-align: center;
}


/* ==================== コンテンツ ==================== */
#contents {
}

#mainInner{
	max-width:1200px;
	margin:0 auto;
}

/* ==================== クリアフィックス ==================== */
.clearfix:after {
content: ".";
display: block;
clear: both;
line-height: 0;
font-size: 0;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Mac版IEを除外 \*/
.clearfix {
display: block;
}
/* */


/* ---------- 見出し ---------- */


#contents .mainTitle h2 {
font-family: 'Roboto', sans-serif;
font-size:40px;
font-weight:700;
}

#contents .mainTitle h2 span{
display:block;
}

#contents .mainTitle h2 span.sub{
background:#000;
color:#fff;
padding:8px 70px;
display: inline-block;
font-size:14px;
font-weight:normal;
border-radius:5px;
}

#contents .list_block .mainTitle h2{
font-size:100px;
margin-bottom:-50px;
}


/* ========== フッター ========== */
#footer {
background:#3C3C3C;
clear: both;
color: #fff;
}
#footer a {
}

#footerInner {
width:100%;
padding: 30px 0;
margin: 0 auto;
}


footer ul{
margin:20px 0;
padding:0;
list-style:none;
text-align: center;
}

footer ul li{
display:inline-block;

}


footer ul li:after{
content:"|";
margin-right:10px;
padding-left:10px;
}

footer ul li.last:after{
display:none;
margin:0;
padding:0;
}

footer ul li a,
footer ul li a:link,
footer ul li a:visited{
color:#fff;
}

/* ---------- フッターロゴ ---------- */

#footer p#copyright {
text-align:center;
font-size:20px;
}

#language_changer{
display: flex;
align-items: center;
justify-content: right;
margin:10px 0;
}

#language_changer p.loboto{
font-weight:700;
}

#language_changer select{
margin-left:10px;
border-radius:10px;
background:#E8E8E8;
width:120px;
border:none;
padding:5px 10px;
}

ul#sns_icon_footer{
margin:5px 0;
list-style: none;
position: relative;
text-align: right;
}


ul#sns_icon_footer li{
display: inline-block;
margin-left:7px;
max-height:28px;
}

ul#sns_icon_footer li img{
height:28px;
}


/* ==================== トップページ ==================== */

/*phrase*/

#phrase {
background: #001A2F;
padding: 5% 0;
}
.phrase_wrap {
max-width: 1000px;
margin: auto;
width: 90%;
}
.phrase_wrap p {
margin-bottom: 5%;
}



/*contents01*/
#contents01 {
padding: 5% 0;
margin: auto;
background: #EBEBEB;
text-align: center;
}
.contents01_img {
width: 94%;
max-width: 1000px;
margin: auto;
}

/*contents02*/
#contents02 {
padding: 5% 0;
margin: auto;
background:#001a2f;
text-align: center;
}
.contents02_wrap {
width: 94%;
margin: auto;
}
.point_flex01 {
justify-content: center;
}
.point_flex01 .flex_inner {
background: #fff;
max-width: 400px;
width: 96%;
border-radius: 10px;
padding:min(35px,10%) min(25px,10%);
margin: 25px;
box-sizing: border-box;
position: relative;
}
.point_flex01 .flex_inner span {
position: absolute;
width:85px;
}
.point_flex01 .flex_inner span {
position: absolute;
width: 70px;
left: -25px;
top: -25px;
}
#contents02 h3 {
font-size: min(23px,5.2vw);
height: min(80px,18vw);
line-height: 1.4;
}
#contents02 p {
font-size: min(18px,4.2vw);
text-align: left;
}


/*contact01*/
#contact01 {
padding: 5% 0;
margin: auto;
background: #001a2f;
text-align: center;
}
.contact01_wrap {
background: url("../img/contact.png");
}

.contact01_wrap {
background: url(../img/contact.png) no-repeat;
background-size: cover;
max-width: 1000px;
max-height: 916px;
width: 94vw;
height: 84vw;
margin: auto;
position:relative;
}
.contact01_wrap a {
max-width: 600px;
width: 50vw;
display: block;
position: absolute;
bottom: 10%;
left: 0;
right: 0;
margin: auto;
}



/*contents03*/
#contents03 {
padding: 10% 0;
margin: auto;
background: url(../img/daigaku.png) no-repeat right bottom;
background-size: cover;
width: 94%;
max-width: 1400px;
}
#contents03 .text {
    position: relative;
    display: block;
    margin: 0 2% 0 auto;
    width: min(700px,70vw);
}
#contents03 .text p {
font-size: min(50px,6vw);
color: #3C3C3C;
font-weight: 700;
text-shadow: 0 4px 8px rgb(0 0 0 / 16%);
}
#contents03 .text p span {
font-size: min(70px,8vw);
color: #045F8B;
}

/*contents04*/
#contents04 {
padding:0 0 10%;
margin: auto;
}
.contents04_wrap {
width: 94%;
max-width: 1400px;
margin: auto;
background: #fff;
padding: 10% 0;
position:relative;
}
.contents04_wrap:after {
height: 100%;
width: 100%;
content: "";
background: url(../img/contents04_bg.svg) no-repeat bottom;
position: absolute;
background-size: contain;
bottom:-1px;
}
#contents04 h2 {
    font-size: min(23px,4.6vw);
    color: #055F8B;
    margin-bottom: 20px;
}
#contents04 p {
    font-size: min(18px,4.2vw);
    margin-bottom: 20px;
}
.flex_wrap {
    display: flex;
    flex-wrap: wrap;
}
.contents04_flex01 {
justify-content: center;
}
.contents04_flex01 .flex_inner:nth-child(1) {
width: 96%;
margin: 2%;
max-width: 680px;
}
.contents04_flex01 .flex_inner:nth-child(2) {
width: 96%;
margin: 2%;
max-width: 320px;
}
.contents04_flex02 {
max-width: 1000px;
margin: auto;
align-items: center;
justify-content: center;
}
.contents04_flex02 .flex_inner {
max-width: 500px;
}
.contents04_flex02 .flex_inner img {
width:80%;
margin: auto;
display: block;
}

/*contents05*/
#contents05 {
    padding: 10% 0 5%;
    margin: auto;
    text-align: center;
}
.contents05_wrap {
    width: 94%;
    max-width: 1600px;
    margin: auto;
    background: #fff;
    padding: 10% 0;
}
#contents05 h2 {
    font-size: min(28px,4.6vw);
    color: #707070;
    margin-bottom: 20px;
}
#contents04 p {
    font-size: min(18px,4.2vw);
    margin-bottom: 20px;
}
.flex_wrap02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    margin: auto;
}
.flex_wrap02 .flex_inner {
width: 98%;
margin: 1%;
max-width: 520px;
border: 3px solid #ccc;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
text-align: left;
align-items: center;
border-radius: 10px;
}

.flex_wrap02 .flex_inner p{
width:46%;
margin:2%;
}
.flex_wrap02 .flex_inner:nth-child(2) {
}

/*content06*/
.contents06_wrap01 {
color: #fff;
max-width: 1000px;
margin: auto;
}
.contents06_wrap01 .flex_inner:nth-child(1) {
max-width: 580px;
margin: 0 auto;
}
.contents06_wrap01 .flex_inner:nth-child(2) {
max-width: 320px;
margin: auto;
}
h4.title03 {
text-align: center;
font-size: min(24px,5vw);
margin: 0 auto 30px;
}
h4.title03 span {
display: inline-block;
background: #CBB695;
color: #fff;
padding: 5px 15px;
}
.f_l {
float: left;
}
.f_r {
float: right;
}
.contents06_wrap02 {
max-width: 1000px;
margin: 0 auto 5%;
}
.contents06_wrap02 .flex_inner {
width: 98%;
max-width: 480px;
margin: 1%;
background: #fff;
padding: min(25px,4vw) min(30px,5vw) min(25px,4vw) min(100px,17vw);
box-sizing: border-box;
position: relative;
}
.contents06_wrap02 .flex_inner .nmbr {
position: absolute;
font-size: 24px;
width: 46px;
height: 46px;
line-height: 42px;
color: #fff;
background: #cbb695;
text-align: center;
top: 0;
left: 0;
}
#contents06 {
margin: 0 0 5%;
}

/*machine*/
#machine {
text-align: center;
background: url(../img/machinebg.jpg);
background-size: contain;
}
#machine h2 {
font-size:min(40px,8vw);
color: #fff;
background: #9D9D9D;
padding: 20px 0;
}
#machine h2 span {
display: block;
font-size:min(28px,6vw);
}
#machine p {
font-size:min(28px,5vw);
color: #3c3c3c;
padding: 50px 0;
}
.machine_wrap {
overflow-x: auto;
width: 100%;
max-width: 1200px;
margin: auto;
padding-bottom: 10%;
}
.machine_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    min-width: 900px;
}
.machine_flex .flex_inner {
margin:0 1%;
width:23%;
}
#machine h3 {
display: inline-block;
font-size: min(21px,4.4vw);
margin: auto;
color: #3c3c3c;
padding: 10px 20px;
font-weight: 500;
}


/*demo*/
#content08 {
margin: 5% auto;
}
.demo_title {
background: url(../img/demo_bg.svg);
background-size: cover;
padding:6% 4%;
color: #fff;
margin-bottom: 5%;
}
.demo_title h2 {
font-size:min(40px,5vw);
}
.demo_title p {
font-size:min(30px,4vw);
}
.demo_flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
    margin: auto;
}
.demo_flex .flex_inner {
    width: 48%;
    margin: 1%;
    background: #fff;
    padding: 4%;
    box-sizing: border-box;
}
.demo_flex .flex_inner img,
.demo_flex .flex_inner span{
display:block;
margin: auto;
}
.demo_flex .flex_inner img{
margin-bottom:4%;
}
.demo_flex .flex_inner span {
font-size: min(19px,3.6vw);
text-align:center;
}
.demo_flex .flex_inner:nth-child(5) {
width: 98%;
max-width: 1410px;
}
.demo_rap {
max-width: 1600px;
margin:0 auto 10%;
}
.demo_flex .flex_inner:nth-child(5) p {
text-align: left;
font-size: min(19px,3.6vw);
}

.contact_title {
    background: url(../img/demo_bg.svg);
    background-size: cover;
    padding: 60px;
    color: #fff;
    text-align: center;
}
.contact_wrap {
padding: 8% 0;
background: #fff;
max-width: 1000px;
margin:0 auto 100px;
border-radius: 10px;
}
.contact_title h2 {
font-size: min(40px,5vw);
}

/* ---------- フッター 固定CTA ---------- */

#footer_fixarea {
display: block;
width: 100%;
position: fixed;
left: 0;
background: rgba(20,20,20,0.9);
color:#fff;
z-index: 10;
bottom:-186px;
transition-duration: 0.5s;
box-sizing:border-box;
padding:1% 0;
font-weight:bold;
text-align:center;
}

#footer_fixarea.show {
bottom:0px;
transition-duration: 0.5s;	
}

#footer_fixarea ul{
margin:0;
padding:0;	
list-style:none;
}

#footer_fixarea ul li{
display:inline-block;
color:#fff;
vertical-align:middle;
border-radius:4px;
width: 37%;
max-width: 300px;
box-sizing: border-box;
}

#footer_fixarea ul li span{
font-size:200%;	
margin:0 10px;
vertical-align:sub;
}

#footer_fixarea ul li a{
color:#fff;	
}

#footer_fixarea ul li:nth-child(2){
}
#footer_fixarea ul li:nth-child(3){
    background: #22A00B;
	padding:10px 20px;;
}

/* ==================== パララックス ==================== */

#backgrounder{
margin-top:-180px;
content:"";
height:500px;
width:100%;
background-image: url(../img/backgrounder.png);
background-size: contain;
background-position: top center;
background-repeat: no-repeat;
}


#verification_movie{
margin:50px auto;
}

#verification_movie h2{
color:#055F8B;
font-size:24px;
margin:20px auto;
}

#verification_movie_wrap{
display:flex;
}

.verification_movie_block{
width:48%;
margin:0 1%;
}

.verification_movie_block p{
font-size:min(18px,4vw);
margin:15px 0 20px;
}
.verification_movie_block p span {
font-size: 110%;
color: red;
}

p.verification_comment{
font-size:14px;
margin-left:1%;
}

#thanks_content{
background:#fff;
margin:0 auto;
max-width:900px;
box-sizing:border-box;
padding:50px;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#thanks_content p{
text-align: center;
font-weight:bold;
line-height:1.8;
margin-bottom:30px;
}

#thanks_content p.bnr_download{
margin:50px 0;
}

#thanks_content p.bnr_download img{
width:600px;
max-width: 100%;
height: auto;
}

#thanks_block_wrap{
display:flex;
justify-content: center;
}

#thanks_content .thanks_block{
width:42%;
margin:4%;
}

#thanks_content .thanks_block img{
max-width:150px;
display: block;
margin:0 auto 30px;
text-align: center;
}

#thanks_content .thanks_block h3{
font-size:24px;
}

#thanks_content .thanks_block h3 a{
color:#0075A7;
}

#thanks_content .thanks_block ul{
list-style: disc;
list-style-position:inside;
    font-size: 18px;
    margin-left: 10px;
}

#thanks_content .thanks_block p{
font-weight: normal;
text-align: left;
}

ul.top_reason{
margin:30px 0;
padding:0;
list-style: none;
display: flex;
justify-content: center;
}

ul.top_reason li{
width:250px;
margin:0 20px;
}

/*20220902*/
.flex_wrap03 {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1340px;
margin: auto;
}
.flex_wrap03 .flex_inner {
width: 98%;
max-width: 500px;
margin: 1%;
border: 2px solid #005983;
padding: min(25px,4vw) min(30px,5vw) min(25px,4vw) min(100px,17vw);
box-sizing: border-box;
position: relative;
}
.flex_wrap03 .flex_inner .nmbr {
    position: absolute;
    font-size: 24px;
    width: 46px;
    height: 46px;
    line-height: 42px;
    color: #fff;
    background: #005983;
    text-align: center;
    top: 0;
    left: 0;
}
.imgbox {
    margin: 60px auto;
    text-align: center;
    max-width: 1000px;
}
.point_inner h4 span {
    display: inline-block;
    color: #fff;
    background: #055f8b;
    padding: 5px 20px;
}
.point_inner h4 {
    font-size: min(30px,3.4vw);
    margin-bottom: 30px;
}
.point_inner h5 {
    font-size: min(30px,5vw);
    margin-bottom: min(60px,10vw);
    color: #055f8b;
    position: relative;
}
.point_inner h5:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 2px;
    background: #055f8b;
    bottom: -15px;
    left: 0;
    right: 0;
    margin: auto;
}
.contents01_img02 {
    max-width: 1000px;
    margin: 0 auto 5%;
}
.contents01_img03 {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 5%;
    overflow-x: auto;
}
#contents04 h2.title01,
h2.title01 {
color: #fff;
font-size: min(36px,5vw);
margin: 0 auto min(60px,12vw);
text-align: center;
}
h2.title01 span {
border-bottom: 10px double #98886F;
padding-bottom: 10px;
}
#contents04 h3.title02, h3.title02 {
font-size: min(24px,5vw);
margin: 0 auto 5%;
text-align: center;
}
#contents04 h3.title02 span, h3.title02 span {
display: inline-block;
padding: 0 20px;
position: relative;
}
h3.title02 span:before {
content: "";
width: 80px;
height: 1px;
background: #000;
position: absolute;
left: -80px;
top: 0;
bottom: 0;
margin: auto;
}
h3.title02 span:after {
content: "";
width: 80px;
height: 1px;
background: #000;
position: absolute;
right: -80px;
top: 0;
bottom: 0;
margin: auto;
}



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

ul.top_reason li{
max-width:40%;
margin:0 10px;
}


#thanks_content {
padding:30px 10px;
}


#thanks_block_wrap{
display:block;
}

#thanks_content .thanks_block h3{
font-size:20px;
text-align: center;
}

#thanks_content .thanks_block p{
font-size:16px;
text-align: center;
}

#thanks_content .thanks_block{
width:100%;
margin:20px 0;
}

}