/* CSS Document */
@charset "UTF-8";

.sp_only{display: none;}


.txt11M{font-size:11px;line-height: 22px;font-weight: 400;letter-spacing: 0.1em;}
.txt12M{font-size:12px;line-height: 22px;font-weight: 400;letter-spacing: 0.1em;}
.txt14{font-size:14px;line-height: 24px;letter-spacing: 0.1em;}
.txt14M{font-size:14px;line-height: 24px;font-weight: 400;letter-spacing: 0.1em;}
.txt16{font-size:16px;line-height: 38px;letter-spacing: 0.1em;}
.txt18{font-size:18px;line-height: 38px;letter-spacing: 0.1em;}
.txt18M{font-size:18px;line-height: 40px;font-weight: 400;letter-spacing: 0.1em;}
.txt20{font-size:20px;line-height: 38px;letter-spacing: 0.1em;}
.txt22{font-size:22px;line-height: 38px;letter-spacing: 0.1em;}
.txt24{font-size:24px;line-height: 38px;letter-spacing: 0.1em;}

.kc01{color:#ff7300;}

.numfont01{	font-family: quasimoda, sans-serif;font-weight: 300; font-size: 40px;line-height: 110%; color: #FFF;/* quasimoda light */}

body{position: relative;}


.button01{display: block;width:230px;height: 50px;border:1px solid #000;text-align: center;font-size: 14px; line-height: 28px;padding: 10px 20px;box-sizing: border-box;position: relative;z-index: 10;}
.button01::after{content:"";position: absolute;right: -1px;top:-1px;width: 0;height: 0;border:25px solid rgba(0,0,0,0);border-right-color: #000;transition: 0.5s;pointer-events: none;}
.button01:hover::after{border-right-color: #ff7300;}

main{padding-top:50px;}

/*  header  */
.header{width: 90%;margin: 0 auto; padding: 30px 0;}
.header .leftside{float: left;width: 200px;}
.header .rightside{float: right;padding-top: 10px;}
.header .rightside ul{display: flex;justify-content: flex-end;flex-wrap: wrap;}
.header .rightside ul li a{font-size: 14px; padding: 10px;text-align: center;line-height: 20px;letter-spacing: 2px;position: relative;}
.header .rightside ul li a::before{content: "";height: 2px;width: 0;position: absolute;bottom: 0;right: 0;transition:0.5s;background: #ff7300;}
.header .rightside ul li:hover a::before{width: 100%;left: 0;right: auto;}
.footer{background: #F7F7F7;}
.footer .wrap{width: 1100px;margin: 0px auto 0;max-width: 90%; padding: 50px 0;}
.footer .area01{display:flex;justify-content: space-between;position: relative;flex-wrap: wrap;}
.footer .area01_01{width: 340px;}
.footer .area01_01 .logo{width:200px;margin-bottom: 20px;}
.footer .area01_01 .address{}
.footer .area01_01 .tel{margin-bottom: 40px;}
.footer .area01_01 .licence{}
.footer .area01_02{width: 560px;display: flex;justify-content: flex-end;}
.footer .area01_02 a{padding: 0 10px 5px;position: relative;}
.footer .area01_02 a::before{content: "";height: 2px;width: 0;position: absolute;bottom: 0;right: 0;transition:0.5s;background: #ff7300;}
.footer .area01_02 a:hover::before{width: 100%;left: 0;right: auto;}
.footer .area01_03{position: absolute;right: 0;bottom: 0;}

.top .sectitle{display: inline-block;font-size:24px;line-height: 30px;letter-spacing: 0.1em;padding-bottom: 5px; border-bottom: 3px solid #FF7300;}

.top .hero {padding: 170px 0 140px;position: relative;}
.top .hero .img{width:330px;padding-left: 140px; margin: 0 auto;position: relative;}
.top .hero .img::before{content: "";position: absolute;top: 0;right: 0;width: 100%;height: 100%; background: #FFF;z-index: 2;transition:1s;transition-delay:1s;}
.top .hero .img::after{content: "";background: url("../img/top/kw2.png");width:200px;height: 200px;background-size: contain;position: absolute;top:calc(50% - 100px);left:calc(50% - 100px);z-index:3;transition:1s;transition-delay:0.4s;}


.top .hero.visible .img::before{width:0;}
.top .hero.visible .img::after{top:calc(50% - 50px);left:0;width:100px;height:100px;}

/* ie edge対策 */
_:-ms-lang(x), .top .hero .img::after{top:-10px;left: 150px;}
_:-ms-lang(x), .top .hero.visible .img::after{top:-10px;}

/*
.top .hero.visible .img::before{animation-name: cover01;animation-duration: 2s;animation-fill-mode:forwards;}
.top .hero.visible .img::after{animation-name: transform01;animation-duration: 1s;animation-fill-mode:forwards;}


@keyframes cover01 {
      0% {width:100%;}
     20% {width:100%;}
     50% {width:0;}
    100% {width:0;}
}


@keyframes transform01{
      0% {top:calc(50% - 100px);left:calc(50% - 100px);width:200px;height:200px;}
    100% {top:calc(50% - 50px);left:calc(50% - 50px);width:100px;height:100px;}
}
*/


.top .sec01{width: 90%; margin: 0 auto;position: relative;}
.top .sec01::before{content: "";width: 0%;height: 100%;background: linear-gradient(to bottom, #FFF 40px , #F7F7F7 40px);position: absolute;top:0;left: 0;z-index: -1;transition: 0.5s;}
.top .sec01.visible::before{width: 100%;}
.top .sec01 .wrap{width: 1100px; margin: 0 auto;max-width: 100%;}
.top .sec01 .area01{display: flex;justify-content: space-between;flex-wrap: wrap;}
.top .sec01 .area01_01{width:30%;}
.top .sec01 .area01_01 .img{width:130px;margin: 0 0 0 auto;}
.top .sec01 .area01_02{width:65%;padding-top:90px;}
.top .sec01 .area01_02 .button-wrap{padding: 40px 0;}

.top .sec02 {padding:60px 0;}
.top .sec02 .wrap{width: 1100px; margin: 0 auto;max-width: 90%;text-align: center;}
.top .sec02 .sectitle{margin-bottom:50px;}
.top .sec02 .area01{display:flex;justify-content: space-between;flex-wrap: wrap;}
.top .sec02 .area01 > *{width:calc(25% - 15px);}
.top .sec02 .area01 .img-wrap{position:relative;}
.top .sec02 .area01 .img-wrap::before{content: ""; position:absolute;width:100px;height: 15px;left: 0;bottom:0; background: #CCC;z-index: 1;transition:0.5s;}
.top .sec02 .area01 a:hover .img-wrap::before{background: #ff7300;}
.top .sec02 .area01 .numfont01{position:absolute;bottom:2px;left:26px;z-index: 2;}
.top .sec02 .area01 .text-wrap{position: relative;padding-right: 24px;box-sizing: border-box;padding-top: 5px;}
.top .sec02 .area01 .text-wrap .itemtitle{text-align: right;}
.top .sec02 .area01 .text-wrap svg{position: absolute;right: 0;bottom:16px;width:16px;height: 6px;}
.top .sec02 .area01 .svg01{stroke:#ff7300;}

.top .sec03{padding:60px 0;}
.top .sec03 .wrap{width: 1100px; margin: 0 auto;max-width: 90%;}
.top .sec03 .area01{display:flex;justify-content: space-between;flex-wrap: wrap;}
.top .sec03 .area01_01{width:42%;max-width: 100%;}
.top .sec03 .area01_01 .address{margin: 25px 0 40px;}
.top .sec03 .area01_02{width:54%;height: 250px; max-width: 100%;}
.top .sec03 iframe{width:100%;height: 100%;}
.top .sec03 .sp_map{display: none;}
.top .sec04{width: 900px;margin: 0 auto;max-width: 90%;padding: 40px 0 70px;}
.top .sec04 .link{width:100%;padding: 25px 0;display: block;color: #FFF;background: #000;transition:0.5s;text-align: center;}
.top .sec04 .link:hover{background:#ff7300;}
.top .sec04 .link p{text-align: center;}
.top .sec04 svg{width:16px;padding:4px;height: 10px;}

.company::before{content: ""; width:100%;height: 625px;position: absolute;left: 0;top: 0;background: #F7F7F7;z-index: -1;}
.company .hero{padding:90px 0 120px;text-align: center;}
.company .hero .title{font-size:24px;padding-bottom: 4px;border-bottom:2px solid #FF7300;display: inline-block;letter-spacing: 0.2em;}
.company .sec01{background: linear-gradient(to right , rgba(0,0,0,0) 50% , #fff 50% );}
.company .sec01 .wrap{width:1500px;margin: 0 auto;background: #FFF;max-width: 90%;position: relative;}
.company .sec01 .wrap::before{content: "";position: absolute;left: 0;top: 0;border: 20px solid rgba(0,0,0,0);border-top-color:#ff7300;border-left-color:#ff7300;}
.company .sec01 .wrap2{width:1100px;margin: 0 auto;max-width: 90%;padding: 110px 0;}
.company .sec01 .area01{display:flex;justify-content: space-between;flex-wrap: wrap;margin-bottom: 100px;}
.company .sec01 .area01_01{width:60%;}
.company .sec01 .area01_01 dl{display:flex;flex-wrap: wrap;line-height: 30px;}
.company .sec01 .area01_01 dt{width:30%;color: #666666;margin-bottom: 40px;}
.company .sec01 .area01_01 dd{width:70%;margin-bottom: 30px;}
.company .sec01 .area01_02{width:38%;}
.company .sec01 .area02{display:flex;justify-content: space-between;flex-wrap: wrap;}
.company .sec01 .area02_01{width:calc(50% - 20px);}
.company .sec01 .area02_02{width:calc(50% - 20px);}
.company .sec01 .area02_02 iframe{width:100%;height: 100%;}


.concept .hero{padding:170px 0 70px;text-align: center;position: relative;overflow: hidden;width: 100%;}
.concept .hero::before{content: "";border: 1px solid rgba(0,0,0,0);border-width: 30px 1000px 260px 1000px; border-bottom-color:#F7F7F7;position:absolute; top:10px;left: calc(50% - 1000px);z-index: -1;}
.concept .hero .title{font-size:24px;padding-bottom: 4px;border-bottom:2px solid #FF7300;display: inline-block;letter-spacing: 0.2em;}
.concept .sec01{background: #F7F7F7;padding: 30px 0;}
.concept .sec01 .wrap{width:1220px;max-width: 90%;margin: 0 auto;}
.concept .sec01 .area01 .img{width:440px;margin: 0 auto 100px;}
.concept .sec01 .title{margin-bottom:30px;}
.concept .sec01 .text{margin-bottom:80px;}


.contents::before{content: ""; width:100%;height: 625px;position: absolute;left: 0;top: 0;background: #F7F7F7;z-index: -1;}
.contents .hero{padding:90px 0 120px;text-align: center;width: 100%;}
.contents .hero .title{font-size:24px;padding-bottom: 4px;border-bottom:2px solid #FF7300;display: inline-block;letter-spacing: 0.2em;}
.contents .sec01{background: linear-gradient(to right , rgba(0,0,0,0) 50% , #fff 50% );}
.contents .sec01 .wrap{width:1500px;margin: 0 auto;background: #FFF;max-width: 90%;position: relative;}
.contents .sec01 .wrap::before{content: "";position: absolute;left: 0;top: 0;border: 20px solid rgba(0,0,0,0);border-top-color:#ff7300;border-left-color:#ff7300;}
.contents .sec01 .wrap2{width:1100px;margin: 0 auto;max-width: 90%;padding: 110px 0 160px;}

.contents .sec01 .item{position:relative;display: flex;justify-content: space-between;flex-wrap: wrap;padding-top: 50px;}
.contents .sec01 .item+.item{margin-top: 110px;}
.contents .sec01 .num{position:absolute; font-size: 240px;color: #F7F7F7;transform-origin: center;transform: scale(1.1,1);}
.contents .sec01 .item:nth-child(2n + 1) .num{top:-70px;left:-6%;}
.contents .sec01 .item:nth-child(2n    ) .num{top:-70px;right:-6%;}
.contents .sec01 .title{width:calc(100% - 250px);box-sizing: border-box;border-bottom:1px solid #ff7300;margin-bottom: 40px;z-index: 2;}
.contents .sec01 .title span{position: relative;display: inline-block;}
.contents .sec01 .title span::before{content: "";width: 100%;height: 3px;position: absolute;left: 0;top:37px;background: #ff7300;}
.contents .sec01 .item:nth-child(2n + 1) .title{margin-left:250px;}
.contents .sec01 .img {width:41%;position: relative; z-index: 2;}
.contents .sec01 .box {width:56%;padding: 10px;box-sizing: border-box;display: flex;flex-wrap: wrap;justify-content: space-between;}
.contents .sec01 .text {width:100%;text-align: justify;margin-bottom: 20px;}
.contents .sec01 .subimg {width:48%;}

.contents .sec01 .item .title{order: 1;}
.contents .sec01 .item:nth-child(2n + 1) .img{order:2;}
.contents .sec01 .item:nth-child(2n    ) .img{order:3;}
.contents .sec01 .item:nth-child(2n + 1) .box{order:3;}
.contents .sec01 .item:nth-child(2n    ) .box{order:2;}




.contact .hero{padding:90px 0 70px;text-align: center;width: 100%;}
.contact .hero .title{font-size:24px;padding-bottom: 4px;border-bottom:2px solid #FF7300;display: inline-block;letter-spacing: 0.2em;}
.contact .sec01 {margin: 0 auto 100px;}
.contact .sec01 .area01{width:1100px; max-width:90%; margin: 0 auto; background: #F7F7F7;padding: 30px 0; text-align:center;}
.contact .sec01 .area01 p+p{margin-top:5px;}
.contact .sec01 .area02 {width:1100px; max-width:90%; margin: 0 auto;}
.contact .sec01 .area02 .text{text-align: center;padding: 60px 0 20px;}
.contact .sec01 .area02 dl{display: flex;flex-wrap: wrap;line-height: 50px;border-bottom:1px solid #CCCCCC;margin-bottom: 40px;}
.contact .sec01 .area02 dt{width:270px;padding: 35px 0 35px 50px;box-sizing: border-box;border-top:1px solid #CCCCCC;}
.contact .sec01 .area02 dt span{color: #FF7300;padding-left: 10px;}
.contact .sec01 .area02 dd{width:calc(100% - 270px);padding: 35px 0 35px 50px;box-sizing: border-box;border-top:1px solid #CCCCCC;}
.contact .sec01 .area02 input[type="text"]{width: 500px;max-width:100%; height: 50px;border: none;background: #F7F7F7;padding: 10px 20px;box-sizing: border-box;line-height: 30px;}
.contact .sec01 .area02 textarea{width:calc(100% - 35px );height: 290px;display: block;border: none;background: #F7F7F7;padding: 10px 20px;box-sizing: border-box;line-height: 30px;}
.contact input::placeholder {color: #AFAFAF;}
.contact input:-ms-input-placeholder {color: #AFAFAF;}/* IE */
.contact input::-ms-input-placeholder {color: #AFAFAF;}/* Edge */
.contact .sec01 .area02 .button01{margin: 0 auto;border-color: #FF7300;color: #FF7300;padding: 0;}
.contact .sec01 .area02 .button01::after{border-right-color: #FF7300;}
.contact .sec01 .area02 .button01:hover::after{border-right-color: #000;}
.contact .sec01 .area02 input[type="submit"]{width:100%;height:100%;border:none;padding:10px 20px;font:inherit;background: rgba(0,0,0,0);}