@charset "utf-8";

#main{background: url(/_public/images2/main/visual_bg.png) top center no-repeat;background-size: 100%;background-attachment: fixed;}
.bg{display: none;}
#main .main-title{text-align: center;font-size: 30px;font-weight: normal;color: #707070;}
#main .section01{padding-top:49%;position: relative;}
#main .section01 .logo-img{display: none;}
#main .section01 .scroll-dwn{position: absolute;bottom:30px;left:50%;transform: translateX(-50%);}
#main .section02{background: #fff;padding:177px 0 150px;}
#main .section02 .portfolio{margin-top:96px;}
#main .section02 .portfolio .list .button-box button{width:160px;}
#main .section02 .portfolio .list .button-box button:after{content: "+";background: none;width: auto;height: auto;top: -2px;}
#main .section03{margin-top:550px;padding:150px 0;background: #fff;}
#main .section03 .about{text-align: center;}
#main .section03 .about .txt1{margin-top:100px;font-size: 18px;font-weight: 500;line-height:1.8;letter-spacing: 0.36px;color: #606060;}
#main .section03 .about .txt2{margin-top:50px;font-size: 16px;font-weight: normal;line-height: 2.13;letter-spacing: 0.32px;color: #606060;}
#main .section03 .about .txt3{margin-top:40px;font-size: 15px;font-weight: 500;line-height: 2;letter-spacing: 0.3px;color: #606060;}
#main .section03 .about .txt4{font-size: 14px;background: #f5f5f5;display: inline-block;text-align: center;padding: 20px;line-height: 0;margin-top: 20px;color: #515151;font-weight: 500;}
#main .section03 .about .txt4 span {width: 1px;display:inline-block;background: #5d5d5d;height: 10px;margin: 0 10px;}
#main .section03 .about .txt5 {display:block;margin:auto;background:none;padding:50px 0;line-height:1;margin-top:40px;position:relative;}
#main .section03 .about .txt5:before {content:"";display:block;width:45px;height:2px;background:#ccc;position:absolute;top:0;left:50%;transform:translateX(-50%);}




#main .section04{margin-top:550px;padding:150px 0;background: #fff;}
#main .section04 ul{margin-top:46px;display: flex;flex-wrap: wrap;align-items: center;}
#main .section04 ul li{width:10%;font-size:0;margin:8px 0;}
#main .section04 ul li img{display: block;max-width:80%;}
#main .section05{margin-top:550px;padding:150px 0;background: #fff;}
#main .section05 .consulting{}
#main .section05 .consulting .txt{margin-top: 50px;text-align: center; font-size: 16px;font-weight: 500;line-height: 2.13;letter-spacing: 0.32px;color: #333;word-break: keep-all;}
#main .section05 .consulting .inner{margin:60px auto 0;max-width:900px;}
#main .section05 .consulting .form-box .field{}
#main .section05 .consulting .form-box .field.flex{display: flex;}
#main .section05 .consulting .form-box .field.flex .col{flex:1;}
#main .section05 .consulting .form-box .field .col{}
#main .section05 .consulting .form-box .field .col input[type="text"],
#main .section05 .consulting .form-box .field .col input[type="tel"]{width:100%;height:50px;border-radius: 3px;border: solid 1px #ccc;background-color: #fff;padding:0 20px;font-size: 14px;font-weight: normal;}
#main .section05 .consulting .form-box .field .col input[type="text"]::placeholder,
#main .section05 .consulting .form-box .field .col input[type="tel"]::placeholder{color: #707070;}
#main .section05 .consulting .form-box .field .col textarea{width:100%;height:220px;border-radius: 3px;border: solid 1px #ccc;background-color: #fff;padding:20px;font-size: 14px;font-weight: normal;resize: none;}
#main .section05 .consulting .form-box .field .col textarea::placeholder{color: #707070;}
#main .section05 .consulting .form-box .field .col + .col{margin-left: 15px;}
#main .section05 .consulting .form-box .field + .field{margin-top: 15px;}
#main .section05 .consulting .bottom-box{margin-top:20px;display: flex;justify-content: space-between;align-items: center;}
#main .section05 .consulting .bottom-box .link-sns{display: flex;align-items: center;}
#main .section05 .consulting .bottom-box .link-sns a{position:relative;display: inline-block; font-size: 16px;font-weight: normal;line-height: 1.88;color: #666;}
#main .section05 .consulting .bottom-box .link-sns a + a{margin-left: 30px;}
#main .section05 .consulting .bottom-box .link-sns a:after{content: "";position:absolute;left:0;bottom:0;display: inline-block;width:100%;height:1px;background: #c4c4c4;}
#main .section05 .consulting .bottom-box .link-sns a:hover{color:#000;}
#main .section05 .consulting .bottom-box .link-sns a:hover:after{background:#000;}
#main .section05 .consulting .bottom-box button{position:relative;display: inline-block;width:120px;height:40px;border: 1px solid #000;text-align: center; font-size: 15px;color:#000;font-weight: normal;letter-spacing: -0.3px;}
#main .section05 .consulting .bottom-box button:after{content: "";vertical-align: middle;position: relative;top: -2px;display: inline-block;margin-left:10px;width:14px;height:14px;background: url(/_public/images2/icon/btn_arrow2.svg) no-repeat;background-size: cover;}
#main .section05 .consulting .bottom-box button:hover { background: #f5f5f5; border: 1px solid #bbb}
#main .section06{margin-top:550px;padding:150px 0;background: #fff;}
#main .section06 .contact{position: relative;}
#main .section06 .contact .map-box{position: relative;margin-top:60px;}
#main .section06 .contact .map-box .map-info{position: absolute;left:12%;top:50%;transform:translateY(-50%);background: #fff;  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);padding:55px 35px;z-index: 2;}
#main .section06 .contact .map-box .map-info h4{font-size: 21px;font-weight: bold;color: #666;}
#main .section06 .contact .map-box .map-info address{margin-top:25px;}
#main .section06 .contact .map-box .map-info address p{display: flex;}
#main .section06 .contact .map-box .map-info address p span{display: inline-block; font-size: 15px;font-weight: 500;color: #333;}
#main .section06 .contact .map-box .map-info address p span + span{margin-left:15px;}
#main .section06 .contact .map-box .map-info address p span em{display: inline-block;font-weight:bold;margin-right:5px;}
#main .section06 .contact .map-box .map-info address p + p{margin-top: 5px;}
#main .section06 .contact .map-box a{display: block;width:100%;height:550px;background: url(/_public/images2/main/map10.png) top center no-repeat;background-size: cover;}


/* tablet */
@media all and (max-width:1280px) {
    #main{background-size: cover;
        background-attachment: fixed;}
    #main .main-title{font-size:25px;}
    #main .section01 .scroll-dwn{width: 15px;bottom: 15px;}
    #main .section01 .logo-img{display:block;width:186px;position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);}
    #main .section02{padding:80px 20px;}
    #main .section02 .portfolio{margin-top:50px;}
    #main .section03{margin-top:300px;padding:80px 20px;}
    #main .section03 .about .txt1{margin-top:50px;font-size:16px;}
    #main .section03 .about .txt2{font-size:14px;margin-top:30px;}
    #main .section03 .about .txt3{margin-top:20px;font-size:13px;}
    #main .section04{padding:80px 20px;margin-top:300px;}
    #main .section04 ul li{width:16.6666%;}
    #main .section05{padding:80px 20px;margin-top:300px;}
    #main .section06{margin-top:300px;padding:80px 0;}
}


/* mobile */
@media all and (max-width:768px) {
    #main{background:#fff;}
    #main .bg{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background: url(/_public/images2/main/visual_m.png) top center no-repeat;background-size: cover;  transform: translateZ(0);will-change: transform;}
    #main .main-title{font-size:20px;}
    #main .section01{height:100vh;padding:0;}
    #main .section02{position:relative;padding:80px 20px;background: #fff;}
    #main .section02 .portfolio{margin-top:25px;}
    #main .section02 .portfolio .list .button-box{margin-top:30px;}
    #main .section02 .portfolio .list .button-box button{font-size:13px;width:100%;}
    #main .section03{position:relative;margin-top:250px;padding:40px 20px;}
    #main .section03 .about .txt1{margin-top:30px;font-size:15px;}
    #main .section03 .about .txt2{margin-top:20px;word-break: keep-all;}
    #main .section03 .about .txt2 br{display: none;}
    #main .section04{position:relative;padding:80px 20px;margin-top:250px;}
    #main .section04 ul{margin-top:25px;}
    #main .section04 ul li{width:33.3333%;margin:10px 0;}
    #main .section05{position:relative;padding:80px 20px;margin-top:250px;}
    #main .section05 .consulting .txt{margin-top:25px;font-size:14px;}
    #main .section05 .consulting .inner{margin-top:30px;}
    #main .section05 .consulting .form-box .field.flex{display: block;}
    #main .section05 .consulting .form-box .field .col + .col{margin-left:0;margin-top:15px;}
    #main .section05 .consulting .form-box .field .col input[type="text"],
    #main .section05 .consulting .form-box .field .col input[type="tel"]{height:40px;padding:0 10px}
    #main .section05 .consulting .form-box .field .col textarea{padding:10px;height:200px;}
    #main .section05 .consulting .bottom-box { flex-direction: column-reverse;}
    #main .section05 .consulting .bottom-box .link-sns a{font-size:14px;}
    #main .section05 .consulting .bottom-box .link-sns a + a{margin-left:0; border-left: 1px solid #ccc}
    #main .section05 .consulting .bottom-box button{width:100%;font-size:13px; margin-bottom: 20px}
    #main .section05 .consulting .bottom-box .link-sns {  width: 100%; flex-direction: row; justify-content: space-around;  background: #f5f5f5;}
    #main .section05 .consulting .bottom-box .link-sns a { width: 50%; text-align: center;padding: 10px 0; text-decoration: underline;}
        #main .section05 .consulting .bottom-box .link-sns a::after { display: none;}
    #main .section06{position:relative;margin-top:250px;padding:80px 20px;}
    #main .section06 .contact .map-box{margin-top:30px;}
    #main .section06 .contact .map-box .map-info{position:relative;top:0;left:0;transform:none;padding:55px 35px;width:100%;}
    #main .section06 .contact .map-box a{height:auto;padding-top:100%;background: url(/_public/images2/main/map_m5.png) top center no-repeat;background-size: cover;}
    #main .section06 .contact .map-box .map-info h4{font-size:18px;}
    #main .section06 .contact .map-box .map-info address p{display: block; }
    #main .section06 .contact .map-box .map-info address p span{font-size:14px;word-break: keep-all;}
    #main .section06 .contact .map-box .map-info address p span + span{margin-left:0;margin-top:5px;}
}