@charset"utf-8";

/* FileName: base.css */

/* body */
body{line-height:160%;}


a{color:#069;}
a:hover{color:#069;}
a:visited{color:#069;}

.fs50{font-size: 5rem;}

.db{display: block;}

@media screen and (max-width: 768px) {
.fs50{font-size: 4rem;}
.fs40{font-size: 3rem;}

.sp-fs20{font-size: 2rem;}
.sp-fs16{font-size: 1.6rem;}
}



/* header */
header{background:#fff; position: relative; border-bottom: 5px solid #eee;}
header div .logo{width: 170px; height: 78px; display:inline-block; vertical-align: middle;}
header div .company{width: 375px; height: 25px; display:inline-block; vertical-align: middle; margin-left: 15px;}

header div{max-width: 1300px; margin: auto;}

header ul{list-style: none; display: flex; margin-bottom: -5px; width: 100%;}
header ul li{width: 20%;}
header ul a{display: block; border-bottom:5px solid #ccc; text-decoration: none; color: #000!important; font-weight: bold; font-size: 1.8rem; margin-left: 1px; margin-right: 1px; line-height: 100%; padding: 10px; text-align: center; transition: all .3s;}
header ul a:hover{border-bottom:5px solid #069; color: #069!important;}
header ul em a{border-bottom:5px solid #069; font-style: normal;}

header nav input{display: none;}

@media screen and (max-width: 768px) {
header{border-bottom: none;}
header div .logo{width: 140px; height: 67px;}
header div .company{width: 100%; height: 45px; vertical-align: middle; margin-left: 0; background: #f9f9f9; display: block; padding: 10px 15px;}

header nav label{position: absolute; top: 20px; right: 20px; width: 30px; height: 28px; cursor: pointer; display: block; z-index: 10;}

header nav .menu{position: absolute; top: 20px; right: 20px; width: 30px; height: 28px;display: block;}
header nav .menu span{display: block; height: 4px; border-radius: 4px; background: #069; margin-top: 8px;}
header nav .menu:after{content:""; display: block; height: 4px; border-radius: 4px; background: #069; margin-top: 8px;}
header nav .menu:before{content:""; display: block; height: 4px; border-radius: 4px; background: #069;}

header nav .view{position: fixed; top:-140%; right: 5px; z-index: 5; transition: all .3s; width: 100%; padding-left: 10px;}
header nav .view ul{background-color:rgba(0,102,153,0.95); display: block; padding: 10px 60px 40px; border-radius: 10px 0 10px 10px; margin-top: 50px;}
header nav .view ul li{width: 100%;}
header nav ul a{color: #fff!important; font-size: 2rem; display: block; padding: 30px 20px 10px; border-bottom: #e5eff5 solid 1px; width: 150px; margin: auto;}
header nav ul a:hover{border-bottom: #e5eff5 solid 1px; color: #d5dfe5!important;}
header nav .view span{display: block; width: 60px; height: 50px; background: #0d6e9e; border-radius: 10px 10px 0 0; float: right; position: relative}
header nav .view span:after{content:""; display: block; height: 4px; border-radius: 4px; background: #fff; margin-top: 30px; margin-left: 10px; transform:rotate(-45deg); width: 40px; position: absolute;}
header nav .view span:before{content:""; display: block; height: 4px; border-radius: 4px; background: #fff; margin-top: 30px; margin-left: 10px; transform:rotate(45deg); width: 40px; position: absolute;}

nav input:checked ~ .view{top: 5px; position: absolute;}
nav input:checked ~ label{top: 5px; right: 5px; width: 60px; height: 50px;}
}


/* footer */
footer{color:#fff; background: #333; text-align: center;}
footer > div{max-width: 1300px; margin: auto; padding: 30px 0 20px; display: flex;  justify-content: space-between; text-align: right;}
footer address{font-style: normal; margin: 0 3%; text-align: left;}

footer > div > div{max-width: 560px; margin: 0 3%;}

footer b{font-size: 2rem; display: block; margin-bottom: 10px;}

footer ul{list-style: none; width: 100%; margin-bottom: 5px;}
footer ul li{display: inline-block; margin: 0 10px 10px;}
footer ul a{ border: #fff solid 1px; text-decoration: none; color: #fff!important; width: 250px; display:block; text-align: center; padding: 10px; border-radius: 50px; background: #444; transition: all .3s;}
footer ul a:hover{ color: #fff; background: #555;} 

footer div > a{color: #fff!important; text-decoration: none;}
footer div > a:hover{text-decoration: underline;}
footer div > a img{width:16px; height: 16px; margin-left: 10px; margin-right: 10px;}

small{text-align: center; display: block; padding:10px 10px 30px; color: #999;}

@media screen and (max-width: 768px) {
footer > div{display: block; padding: 30px 0 10px; text-align: center;}
footer > div > div{max-width: 100%; margin: 0 3%;}
footer ul{list-style: none; width: 100%; text-align: center; margin-top: 30px; margin-bottom: 20px;}

footer div > a img{margin-right: 0;}

small{margin-top: 0px;}
}


.mainimg{overflow: hidden; text-align: center; position: relative; height: 500px;}
.mainimg img{width:2000px; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}

@media screen and (min-width: 2000px) {
.mainimg img{width:100%;}
}

@media screen and (max-width: 1300px) {
.mainimg{height:auto; padding-top: 38%;}
.mainimg img{width:155%;}
}

@media screen and (max-width: 768px) {
.mainimg{height:auto; padding-top: 0;}
.mainimg img{width:100%; position: inherit; top:0; left:0; transform: translate(0%, 0%);}
}

/* main */

.bread{max-width: 1300px; margin: auto;}
.bread p{margin: 0 3%; font-size: 1.4rem; padding: 8px 0;}
.bread p a{color: #000; text-decoration: none;}
.bread p a:hover{color: #069;}
.bread p em{color: #069; font-weight: bold; font-style: normal;}

.mainttl{background: #e5eff5;}
.mainttl h1{max-width: 1300px; margin:0 auto 20px; padding:30px 0; color: #069; font-weight: normal; font-size: 4rem;}
.mainttl h1 span{margin:0 3%;}
.mainttl h1 .stop{background: #999; color: #fff; padding: 5px 10px; font-size: 2rem; vertical-align: middle; margin: 0;}
.mainttl h1 .newstop{background: #f00; color: #fff; padding: 5px 10px; font-size: 2rem; vertical-align: middle; margin: 0;}

.evamain{background: #222; position: relative; padding-top: 30px; padding-bottom: 30px;}
.evamain div{position: absolute; left: 30px; bottom: 30px; background: #eee; font-weight: bold; width: 170px; text-align: center; padding: 70px 0; box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.3);}
.evamain b{color: #fff; display: block; margin-left: 230px; line-height: 1.2;}
.evamain span,.evamain p{color: #ccc; display: block; margin-left: 230px;}

.messagemain{position: relative;}
.messagemain img{position: absolute; bottom: 0;}

.box_youtube{position: relative; width: 100%; padding-top: 56.25%; margin-top: 25px;}
.box_youtube iframe{position:absolute; top:0; right:0; width: 100% !important; height: 100% !important;}

@media screen and (max-width: 768px) {
.bread p{margin: 0 4%;}

.mainttl h1{margin:0 auto 0; padding:20px 0; font-size: 2.6rem;}
.mainttl h1 span{margin:0 4%;}

.evamain{padding-top: 30px; padding-bottom: 20px;}
.evamain div{position: absolute; left: 4%; top: -45px; bottom: inherit; padding: 20px 0;}
.evamain b{color: #fff; display: block; margin-left: 4%; margin-right: 4%; line-height: 1.2; font-size: 2.8rem;}
.evamain span{font-size: 2rem;}
.evamain span,.evamain p{margin-left: 4%; margin-right: 4%;}

.messagemain{position: relative; text-align: center;}
.messagemain img{position: inherit; bottom: 0; width: 70%; margin:auto;}

}


/* article */

.secw{padding: 80px 0;}
.secg{background: #eee; padding: 80px 0;}
.secb{background: #E6EFF6; padding: 80px 0;}
.seccta{background: #f4f9e8; padding: 80px 0;}
.secsea{background: url("../img/bg_001.jpg") center center; padding: 80px 0;}

.w1300{max-width: 1300px; margin: auto;}
figure img{display: block;}

.history{position: relative;}
.history dt{font-size: 2rem; position: absolute; left: 0; color:#666; padding: 20px;}
.history dt span{font-size: 2.8rem;}

.history dd{ margin-left: 150px; border-left: #ccc solid 2px; padding:20px 30px;}
.history dd span{font-size: 1.8rem; font-weight: bold; color: #069; width: 60px; display: inline-block; text-align: right!important; margin-right: 20px;}
.history dd +dd{ padding:0 30px 20px;}

.messegeqa dt{background: #069; color: #fff; font-size: 1.8rem; display: inline-block; padding: 5px 20px; font-weight: bold;}
.messegeqa dd{margin: 20px 0 40px;}

.process{margin-top: 40px;}
.process h3{font-size: 2.4rem; color: #fff; background: #069; display: block; text-align: center; padding: 10px; font-weight: normal;}
.process h4{font-size: 2.2rem; color: #069; position: relative; padding:8px 0 20px 50px;}
.process h4 span{ background: #069; width: 40px; height: 40px; display:block; color: #fff; font-weight: normal; text-align: center; border-radius: 20px; font-size: 2rem; margin-right: 10px; line-height: 40px; position: absolute; left: 0; top:0;}
.process .prob{position: relative;}
.process .prob:after{content:""; display: block; height: 100%; width: 2px; background: #069; position: absolute; left: 50%;}
.process .proimg{display: flex; justify-content: space-between; margin-top: 20px; margin-bottom: 40px;}
.process .proimg figure{ width: 48.5%;}

.process .pc-g2{width: 14.7%;}

.info{position: relative;}
.info dt{font-size: 2rem; position: absolute; left: 0; background: #069; color:#fff; padding:10px; display:block; width: 80px; text-align: center;}
.info dd{font-size: 4rem; margin-left: 100px; margin-bottom:20px; color: #069; line-height: 110%; font-weight: bold;}

.topmessage{background: url(../img/topm_pc.jpg) center center; color:#fff; background-size: cover; padding: 50px 0;}
.topmessage div{max-width: 1380px; padding: 40px; margin: auto;}
.topmessage div h2{width: 60%; display:block; margin-left: 40%; margin-bottom: 30px; line-height: 1.4;}
.topmessage div p{width: 60%; display:block; margin-left: 40%;}
@media screen and (max-width: 768px) {
.topmessage{background: url(../img/topm_sp.jpg) center top no-repeat #336699; color:#fff; background-size:100%; padding: 190px 15px 40px;}
.topmessage div{max-width: 100%; padding: 0px; margin: auto;}
.topmessage div h2{width: 100%; display:block; margin-left: 0; margin-bottom: 30px;}
.topmessage div p{width: 100%; display:block; margin-left: 0;}
}

@media screen and (max-width: 768px) {
.secw{padding: 30px 0;}
.secg{padding: 30px 0;}
.seccta{background: #f4f9e8; padding: 40px 0;}

.history dt{font-size: 1.8rem; position: inherit; padding: 10px; border-bottom: 2px solid #ccc;}
.history dt span{font-size: 2.4rem;}
.history dd{ margin-left:0; border-left: none; padding:10px 10px 30px;}
.history dd span{display: block; text-align: left!important;}
.history dd +dd{padding:0 10px 30px; margin-top: -20px;}

.process .prob:after{display: none;}
.process .pc-g2{width: 96%;}

.info dt{font-size: 1.8rem; position: inherit; background: #069; color:#fff; padding:5px; display:block; width: 80px; text-align: center;}
.info dd{font-size: 3rem; margin-left: 0; margin-top: 10px;}
}

@media screen and (max-width: 420px) {
.process .proimg{display: block;}
.process .proimg figure{width: 100%; margin-bottom: 10px;}
}

.job{background: #E6EFF6; padding: 20px 20px 1px; margin-top: 40px}
.job b{color: #369; font-size: 1.8rem; padding-bottom: 5px; display: block;}
.job ui{margin-bottom: 20px; display: block}
.job ui li{margin-left: 20px;}

/* カード */
.secg .card{background: #fff;}
.secw .card{background: #f9f9f9;}

.card{text-decoration: none; box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.3); position: relative;}
.card div{position: absolute; left: -10px; top: -5px; padding: 2px 15px 0 15px; height: 30px; background-color: #f60; color:#fff; font-weight: bold;}
.card div:after {
    position: absolute;
    bottom: -5px;
    left: 0;
    border: none;
    border-bottom: solid 5px transparent;
    border-right: solid 10px #930;
    content: '';
    display: block;
    height: 0;
    width: 0;
}
.card div::before {
    position: absolute;
    top: 0;
    right: -5px;
    border: none;
    border-bottom: solid 30px transparent;
    border-left: solid 5px #f60;
    content: '';
    display: block;
    height: 0;
    width: 0;
}
.card dl{margin: 20px;}
.card dt{font-size: 2rem; font-weight: bold; margin-bottom: 5px;}
.card dt .stop{font-size: 1.2rem; font-weight: normal; margin-left: 10px; background: #999; color: #fff; padding: 3px 10px; vertical-align: middle;}
.card dt .newstop{font-size: 1.2rem; font-weight: normal; margin-left: 10px; background: #f00; color: #fff; padding: 3px 10px; vertical-align: middle;}
.card dd{color: #000;}

a.card{transition: all .1s;}
a.card:hover{transform: scale(1.02); box-shadow: 0px 10px 8px -8px rgba(0,0,0,0.5);}

@media screen and (max-width: 768px) {
.maincon dd{ display: none;}

.maincon .card{display: flex;}
.maincon .card figure{width: 50%;}
.maincon .card dl{width: 50%; align-items: center; display: flex; margin-bottom: 10px;}
}

.caution{position: relative;}
.caution dt{position: absolute; left: 0;}
.caution dd{ margin-left: 25px;}


/* タイトル */
.bigttl{text-align: center; display: block; line-height: 1.3; font-size: 3.5rem; font-weight: normal; margin-left: 3%; margin-right: 3%;}
.bigttl:after{content:""; display: block; background: #069; width: 100px; height: 5px; margin:15px auto 30px;}
.bigttlg{text-align: center; display: block; line-height: 1.3; font-size: 3.5rem; font-weight: normal; margin-left: 3%; margin-right: 3%;}
.bigttlg:after{content:""; display: block; background: #960; width: 100px; height: 5px; margin:15px auto 30px;}
.bigttlw{text-align: center; display: block; line-height: 1.3; font-size: 3.5rem; font-weight: normal; margin-left: 3%; margin-right: 3%; color: #FFF;}
.bigttlb{text-align: center; display: block; line-height: 1.3; font-size: 3.5rem; font-weight: normal; padding: 25px; color: #FFF; background: #000;}


.midttl{text-align: center; display: block; line-height: 1.3; font-size: 3.5rem; font-weight: normal; color: #069; margin-top: -10px; margin-bottom: 30px; margin-left: 3%; margin-right: 3%;}

.smlttl{text-align: center; display: block; line-height: 1.3; font-size: 3rem; font-weight: normal; color: #069; margin-top: -10px; margin-bottom: 20px; margin-left: 3%; margin-right: 3%;}

.xsmlttl{display: block; line-height: 1.3; font-size: 2.6rem; font-weight: normal; color: #069; margin-top: -10px; margin-bottom: 20px; margin-left: 3%; margin-right: 3%;}

.xxsmlttl{display: block; line-height: 1.5; font-size: 2.4rem; font-weight: normal; color: #069; margin-top: -10px; margin-bottom: 20px; margin-left: 3%; margin-right: 3%;}

@media screen and (max-width: 768px) {
.bigttl{font-size: 2.8rem;}
.bigttl:after{margin:15px auto 10px;}
	
.bigttlw{font-size: 2.8rem;}
.bigttlb{font-size: 2.8rem; padding: 15px;}

.midttl{font-size: 2.6rem; text-align: left; margin-bottom: 10px;}

.smlttl{font-size: 2.2rem; margin-bottom: 10px!important;}

.xsmlttl{font-size: 2rem; margin-bottom: 5px!important;}

.xxsmlttl{font-size: 2rem; margin-bottom: 5px!important;}
}


/* テーブル */
.table01{border-top: #ccc solid 1px; border-collapse: collapse; border-spacing: 0;}
.table01 th{border-bottom: #ccc solid 1px; background: #eee; padding:15px 20px;}
.table01 td{border-bottom: #ccc solid 1px; padding:15px 20px;}

.table02{border-top: #ccc solid 1px; border-collapse: collapse; border-spacing: 0;}
.table02 th{border-bottom: #ccc solid 1px; background: #eee; padding:15px 20px;}
.table02 td{border-bottom: #ccc solid 1px; padding:15px 20px;}

@media screen and (max-width: 768px) {
.table01 th{display: block; border-bottom: none; padding:10px 15px;}
.table01 td{display: block; padding:10px 15px;}
}


/* ボタン */
.btn_blue{background: #069; border-radius: 5px; color: #fff!important; padding: 20px 40px; display: inline-block; text-decoration: none; transition: all .3s;}
.btn_blue:hover{background: #39c; color: #fff!important;}

.btn_cta{font-size: 3rem; font-weight: bold; background: #8fc31f; border-radius: 5px; color: #fff!important; padding: 30px 90px; display: inline-block; text-decoration: none; transition: all .3s;}
.btn_cta:hover{background: #9fd32f; color: #fff!important;}

.btn_rec{background: #dbe5eb; border-radius: 5px; color: #fff!important; padding: 20px 30px; display: inline-block; text-decoration: none; transition: all .3s; margin-left: 2%; margin-right: 2%; margin-top: 2%; min-width: 40%;}
.btn_rec:hover{background: #ebf5fb; color: #fff!important;}
.btn_rec dt{font-size: 2rem; font-weight: bold; color: #069;}
.btn_rec dd{color: #000; border-top: #b2bcc2 solid 1px; margin-top: 15px; padding-top: 15px;}

@media screen and (max-width: 768px) {
.btn_cta{font-size: 2.4rem; padding: 25px 50px;}
.btn_rec{min-width: 90%;}
}

/* クリアフィックス */
.cf:before, .cf:after {content:""; display:table;}
.cf:after {clear:both;}
/* For IE 6/7 (trigger hasLayout) */
.cf {zoom:1;}

/* jquery ページトップ */
#page_top{position:fixed; float:right; bottom:50px; right:0;}
#page_top a{background-color:#069; text-decoration:none; color:#bbb; width:45px; height: 45px; padding:10px 0; text-align:center; display:block; border-radius:5px 0 0 5px; transition: all .3s;}
#page_top a:hover{text-decoration:none; background-color:#39c;}
#page_top a:after{content:""; display: block; height: 2px; background: #fff; margin-top: -21px; margin-left: 7px; width: 30px;}
#page_top a:before{content:""; display: block; height: 16px; width: 16px; border-top: 3px solid #fff; border-left: 3px solid #fff; margin-top: 11px; margin-left: 14px; transform:rotate(45deg); }

/* jquery スライダー */

img {
  height: auto;
  width: 100%;
}
.thumbnail .slick-track {
  transform: unset !important;
}
.thumbnail-img {
  opacity: 0.3;
  transition: opacity .3s linear;
}
.thumbnail .slick-current {
  opacity: 1;
}
.thumbnail .slick-slide {
  margin: 0 5px;
}
.thumbnail .slick-list {
  margin: 0 -5px;
}
.slider {
  margin-bottom: 10px;
}