@charset "UTF-8";
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{
    display:block
}
html{
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
body{
    line-height:1
}
main{
    display:block
}
ol,ul{
    list-style:none
}
a{
    text-decoration:none;
    color:#000
}
blockquote,q{
    quotes:none
}
blockquote:after,blockquote:before,q:after,q:before{
    content:'';
    content:none
}
code,kbd,samp{
    font-size:1em
}
table{
    border-collapse:collapse;
    border-spacing:0
}
caption,th{
    text-align:left
}
button,input,select,textarea{
    margin:0;
    padding:0;
    background:0 0;
    border:1px solid #000;
    border-radius:0;
    outline:0
}
button{
    color:inherit;
    cursor:pointer;
    font:inherit;
    line-height:inherit
}
button:disabled{
    cursor:default
}
textarea{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    font-size:16px;
    min-height:2em;
    overflow:auto
}
select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    padding:3px 5px
}
select::-ms-expand{
    display:none
}
body{
    font-family:"Noto Sans JP",Poppins,YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",Arial,"メイリオ",Meiryo,sans-serif;
    font-size:16px
}
*,::after,::before{
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.selectWrap{
    position:relative;
    display:inline-block
}
.selectWrap select{
    height:27px;
    background:0 0;
    position:relative;
    z-index:1;
    padding-right:15px
}
.selectWrap::before{
    content:'';
    position:absolute;
    z-index:0;
    top:0;
    right:0;
    background:#fff;
    height:100%;
    width:30px
}
.selectWrap::after{
    content:'';
    position:absolute;
    z-index:0;
    top:0;
    bottom:0;
    margin:auto 0;
    right:6px;
    width:0;
    height:0;
    border-style:solid;
    border-width:4px 4px 0 4px;
    border-color:#000 transparent transparent transparent
}
html{
    font-size:62.5%;
    font-weight:400
}
body{
    font-size:1.6em;
    line-height:1.9em
}
@media screen and (max-width:959px){
    body{
        font-size:1.6em
    }
}
h1,h2,h3{
    letter-spacing:.1em;
    color:#333
}
p{
    text-align:left;
    font-size:1.6rem;
    letter-spacing:.05em;
    color:#333;
    font-family:"Noto Sans JP",Poppins,YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",Arial,"メイリオ",Meiryo,sans-serif
}
a{
    text-decoration:none;
    color:#333;
    display:block;
    letter-spacing:.05em
}
@media screen and (min-width:960px){
    a{
        display:inline-block;
        -webkit-transition:all .4s;
        transition:all .4s
    }
}
img{
    max-width:100%;
    height:auto
}
@media only screen and (min-width:600px) and (max-width:959px){
    .sp_only{
        display:block
    }
}
@media screen and (min-width:960px){
    .sp_only{
        display:none
    }
}
@media screen and (max-width:599px){
    .sp_only{
        display:block
    }
}
@media only screen and (min-width:600px) and (max-width:959px){
    .pc_only{
        display:none
    }
}
@media screen and (min-width:960px){
    .pc_only{
        display:block
    }
}
@media screen and (max-width:599px){
    .pc_only{
        display:none
    }
}
.header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    margin:20px auto;
    z-index:1000
}
@media screen and (max-width:599px){
    .header{
        margin:15px auto
    }
}
.header-wrap{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    width:90%;
    margin:auto;
    padding-right:50px
}
@media screen and (max-width:599px){
    .header-wrap{
        padding-right:60px
    }
}
.header-left .logo{
    width:200px
}
@media screen and (max-width:599px){
    .header-left .logo{
        width:140px
    }
}
.header-left .logo img{
    vertical-align:bottom
}
.header-contact{
    display:inline-block;
    font-family:Poppins,sans-serif;
    font-weight:700;
    border:2px solid #333;
    padding:3px 30px;
    border-radius:20px
}
.header-contact:hover{
    background:#333;
    color:#fff
}
@media screen and (max-width:599px){
    .header-contact{
        font-size:1.2rem;
        padding:0 10px
    }
}
.el_humburger{
    display:inline-block;
    padding-top:1px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    padding-top:0;
    z-index:20;
    cursor:pointer;
    pointer-events:auto;
    color:#000;
    text-align:center;
    background:#007655;
    position:fixed;
    right:0;
    top:0;
    width:80px;
    height:80px
}
@media screen and (max-width:840px){
    .el_humburger{
        display:block;
        right:0;
        top:0;
        padding-top:20px;
        width:60px;
        height:60px
    }
    #factory .el_humburger{
        display:none
    }
}
.el_humburger_wrapper{
    margin-bottom:5px;
    width:42px;
    height:23px;
    display:inline-block;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    z-index:100
}
@media screen and (max-width:840px){
    .el_humburger_wrapper{
        width:30px
    }
}
.el_humburger_text{
    font-size:12px;
    letter-spacing:.1em;
    font-family:"Avenir Next",Verdana,"游ゴシック","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,sans-serif
}
.js_humburgerOpen .el_humburger_text.el_humburger_text__menu{
    display:none
}
.el_humburger_text.el_humburger_text__close{
    display:none
}
.js_humburgerOpen .el_humburger_text.el_humburger_text__close{
    display:block
}
@media screen and (max-width:840px){
    .el_humburger_text{
        font-size:10px;
        padding-top:2px
    }
}
@media screen and (max-width:840px){
    .el_humburger_text svg path{
        -webkit-transition:all .2s cubic-bezier(.16,.52,.25,1);
        transition:all .2s cubic-bezier(.16,.52,.25,1);
        fill:#fff
    }
}
@media screen and (max-width:840px){
    .js_humburgerOpen .el_humburger_text svg path{
        fill:#fff
    }
}
.el_humburger span.el_humburger_bar{
    display:block;
    width:100%;
    margin:0 auto 9px;
    height:1px;
    background:#fff;
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out
}
.el_humburger span.el_humburger_bar:last-child{
    margin-bottom:0
}
.js_humburgerOpen .el_humburger span.el_humburger_bar{
    background:#fff
}
@media screen and (max-width:840px){
    .el_humburger span.el_humburger_bar{
        left:0;
        top:0;
        background:#fff
    }
}
.js_humburgerOpen .el_humburger span.el_humburger_bar.top{
    -webkit-transform:translateY(9px) rotate(-45deg);
    transform:translateY(9px) rotate(-45deg)
}
.js_humburgerOpen .el_humburger span.el_humburger_bar.middle{
    opacity:0
}
.js_humburgerOpen .el_humburger span.el_humburger_bar.bottom{
    -webkit-transform:translateY(-11px) rotate(45deg);
    transform:translateY(-11px) rotate(45deg)
}
.el_humburgerButton.el_humburgerButton__close{
    top:2%;
    right:2%
}
.el_humburgerButton__close span.el_humburger_bar{
    display:block;
    width:35px;
    margin:0 auto;
    height:4px;
    background:#000
}
.el_humburgerButton__close span.el_humburger_bar.top{
    -webkit-transform:translateY(5px) rotate(-45deg);
    transform:translateY(5px) rotate(-45deg)
}
.el_humburgerButton__close span.el_humburger_bar.bottom{
    -webkit-transform:translateY(-6px) rotate(45deg);
    transform:translateY(-6px) rotate(45deg)
}
.navi{
    position:fixed;
    right:0;
    width:100%;
    height:100%;
    background-color:#007655;
    z-index:3;
    padding-top:30px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-transition:all .8s cubic-bezier(.8,0,.2,1);
    transition:all .8s cubic-bezier(.8,0,.2,1);
    -webkit-transform:translateZ(0) translateX(100%);
    transform:translateZ(0) translateX(100%);
    overflow:auto;
    opacity:.9
}
@media screen and (max-width:959px){
    .navi{
        top:0
    }
}
.navi .logo{
    width:90%;
    margin:auto;
    padding-right:50px;
    text-align:left
}
@media screen and (max-width:599px){
    .navi .logo{
        width:120px;
        padding:0;
        margin:auto 0 0 8%
    }
}
.navi .logo img{
    width:200px
}
.js_humburgerOpen .navi{
    -webkit-transform:translateZ(0) translateX(0);
    transform:translateZ(0) translateX(0)
}
@media screen and (max-width:840px){
    .js_humburgerOpen .navi{
        width:100%
    }
}
.navi_inner{
    width:70%;
    margin:7% auto 0
}
@media only screen and (min-width:600px) and (max-width:959px){
    .navi_inner{
        height:60%;
        margin:20% auto 0
    }
}
@media screen and (max-width:599px){
    .navi_inner{
        width:90%
    }
}
.navi_item{
    font-size:20px;
    font-family:Marcellus,serif!important;
    white-space:nowrap;
    margin-left:90px;
    text-align:left;
    border-bottom:1px solid #fff
}
.navi_item:last-child{
    border-bottom:none
}
.navi_item .word{
    width:50%;
    display:inline-block
}
.navi_item a{
    color:#fff;
    font-family:"Avenir Next",Verdana,"游ゴシック","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,sans-serif;
    font-size:3.2rem;
    font-weight:700;
    width:100%;
    padding:30px 0 25px 5%
}
@media screen and (max-width:599px){
    .navi_item a{
        font-size:2.6rem
    }
}
.navi_item a span{
    font-size:1.3rem;
    font-weight:400;
    vertical-align:middle;
    text-align:right
}
@media screen and (max-width:599px){
    .navi_item a span{
        font-size:1.3rem
    }
}
.navi_item.op_innerLink{
    cursor:pointer
}
@media screen and (max-width:840px){
    .navi_item{
        margin-left:0;
        font-size:18px
    }
}
.header-bottom{
    -webkit-box-pack:justify!important;
    -ms-flex-pack:justify!important;
    justify-content:space-between!important;
    width:90%;
    margin-top:50px!important
}
@media screen and (max-width:599px){
    .header-bottom{
        margin-top:20px!important
    }
}
.header-bottom a,.header-bottom li,.header-bottom p{
    color:#fff;
    font-size:1.4rem
}
@media screen and (max-width:599px){
    .header-bottom a,.header-bottom li,.header-bottom p{
        font-size:1.1rem;
        text-align:center
    }
}
.header-bottom a{
    text-decoration:underline;
    text-align:right;
    display:block
}
@media screen and (max-width:599px){
    .header-bottom a{
        text-align:center
    }
}
.header-bottom .menu-copy{
    font-family:Poppins,sans-serif;
    font-size:1.2rem;
    font-weight:700
}
#contact{
    position:relative;
    background:#fff
}
#contact::before{
    content:"";
    display:inline-block;
    background:url(../img/common/contact-bg.svg) no-repeat;
    background-size:contain;
    width:930px;
    height:110px;
    position:absolute;
    bottom:0;
    right:0
}
@media screen and (max-width:599px){
    #contact::before{
        width:90%;
        margin:0 auto;
        left:0;
        height:40px
    }
}
#contact .wrap{
    -ms-flex-pack:distribute;
    justify-content:space-around;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding:100px 5%;
    width:100%;
    max-width:none
}
@media screen and (max-width:599px){
    #contact .wrap{
        padding:80px 5% 50px
    }
}
#contact .section-title{
    margin:0;
    -webkit-transition:ease .2s;
    transition:ease .2s;
    z-index:10
}
#contact .section-title span{
    display:block;
    text-align:center;
    padding-top:30px
}
@media screen and (max-width:599px){
    #contact .section-title span{
        padding-top:10px;
        margin:0
    }
}
#contact .contact-text{
    -webkit-transition:ease .2s;
    transition:ease .2s;
    z-index:10
}
@media screen and (max-width:599px){
    #contact .contact-text{
        margin:40px auto
    }
}
#contact img{
    -webkit-transition:-webkit-transform .6s cubic-bezier(.8,0,.2,1) 0s;
    transition:-webkit-transform .6s cubic-bezier(.8,0,.2,1) 0s;
    transition:transform .6s cubic-bezier(.8,0,.2,1) 0s;
    transition:transform .6s cubic-bezier(.8,0,.2,1) 0s,-webkit-transform .6s cubic-bezier(.8,0,.2,1) 0s;
    z-index:10
}
#contact .wrap{
    position:relative;
    overflow:hidden;
    text-decoration:none;
    text-align:center;
    outline:0;
    -webkit-transition:ease .2s;
    transition:ease .2s
}
#contact .bgleft{
    z-index:2
}
#contact .bgleft:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    z-index:-2;
    background:#333;
    width:100%;
    height:100%;
    -webkit-transition:-webkit-transform .6s cubic-bezier(.8,0,.2,1) 0s;
    transition:-webkit-transform .6s cubic-bezier(.8,0,.2,1) 0s;
    transition:transform .6s cubic-bezier(.8,0,.2,1) 0s;
    transition:transform .6s cubic-bezier(.8,0,.2,1) 0s,-webkit-transform .6s cubic-bezier(.8,0,.2,1) 0s;
    -webkit-transform:scale(0,1);
    transform:scale(0,1);
    -webkit-transform-origin:right top;
    transform-origin:right top;
    z-index:2
}
#contact .bgleft:hover:before{
    -webkit-transform-origin:left top;
    transform-origin:left top;
    -webkit-transform:scale(1,1);
    transform:scale(1,1)
}
#contact .bgleft:hover .section-title{
    color:#fff
}
#contact .bgleft:hover .contact-text{
    color:#fff
}
#contact .bgleft:hover img{
    -webkit-transform:translateX(30px);
    transform:translateX(30px)
}
footer{
    padding:120px 0;
    background:#333;
    position:relative;
    z-index:100
}
@media screen and (max-width:599px){
    footer{
        padding:80px 0
    }
}
footer .wrap{
    max-width:1100px
}
footer p{
    color:#fff
}
.footer-left{
    border-right:1px solid #fff;
    width:35%
}
@media screen and (max-width:599px){
    .footer-left{
        width:100%;
        border:none
    }
}
.footer-left .footer-logo{
    width:200px;
    margin-bottom:40px
}
.footer-left .address{
    margin-bottom:40px
}
.footer-left .policy{
    color:#fff;
    text-decoration:underline
}
@media screen and (max-width:599px){
    .footer-left .policy{
        font-size:1.2rem
    }
}
@media screen and (max-width:599px){
    .footer-left .copyright{
        font-size:1.2rem
    }
}
.footer-right{
    width:65%;
    padding-left:5%;
    -ms-flex-pack:distribute!important;
    justify-content:space-around!important
}
@media screen and (max-width:599px){
    .footer-right{
        display:none!important
    }
}
.footer-right ol li a,.footer-right ul li a{
    color:#fff
}
.footer-right ul li{
    font-weight:700;
    margin-bottom:40px
}
.footer-right ol li{
    font-size:1.2rem;
    font-weight:400;
    margin-bottom:0
}
.footer-right .footer-contact{
    color:#fff;
    border:2px solid #fff;
    width:140px;
    text-align:center;
    border-radius:40px;
    height:40px;
    line-height:35px
}
.footer-right .footer-contact:hover{
    background:#fff;
    color:#333
}
.u-mt0{
    margin-top:0!important
}
.u-mt5{
    margin-top:5px!important
}
.u-mt10{
    margin-top:10px!important
}
.u-mt15{
    margin-top:15px!important
}
.u-mt20{
    margin-top:20px!important
}
.l-w25{
    width:25%
}
.l-w50{
    width:50%
}
.l-w100p{
    width:100%
}
.l-h100p{
    height:100%
}
.l-justify-left{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:start;
    -ms-flex-pack:start;
    justify-content:flex-start
}
.l-justify-center{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
.l-justify-right{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:end;
    -ms-flex-pack:end;
    justify-content:flex-end
}
.l-direction-column{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column
}
.parallax-window{
    min-height:800px;
    background:0 0
}
.parallax-slider{
    top:0;
    left:0
}
section#wrapper{
    position:relative;
    overflow:hidden
}
.wrap{
    width:90%;
    max-width:1200px;
    margin:auto
}
@media screen and (max-width:599px){
    .wrap{
        width:85%
    }
}
.section-title{
    font-size:6rem;
    font-family:Poppins,sans-serif;
    font-weight:700;
    margin-bottom:50px
}
@media screen and (max-width:599px){
    .section-title{
        font-size:4rem
    }
}
.section-title span{
    display:inline-block;
    font-size:1.6rem;
    margin:0 0 0 20px;
    letter-spacing:.05em;
    vertical-align:middle
}
@media screen and (max-width:599px){
    .section-title span{
        font-size:1.3rem
    }
}
.button-s{
    background:#333;
    color:#fff;
    width:220px;
    height:50px;
    border-radius:50px;
    text-align:center;
    line-height:50px
}
.button-l{
    background:#333;
    color:#fff;
    width:85%;
    max-width:350px;
    height:60px;
    border-radius:50px;
    text-align:center;
    line-height:58px;
    border:2px solid #333;
    font-size:1.6rem;
    letter-spacing:.1em;
    font-weight:400;
    margin:0 auto
}
.button-l:hover{
    background:#fff;
    color:#333;
    border:2px solid #333
}
.button-area{
    text-align:center
}
.flex{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    margin:0 auto
}
@media screen and (max-width:599px){
    .flex{
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column
    }
}
.anchor{
    display:block;
    padding-top:70px;
    margin-top:-70px
}
#works{
    margin:120px auto;
    position:relative
}
@media screen and (max-width:599px){
    #works{
        margin:80px auto
    }
}
#works::before{
    content:"";
    display:inline-block;
    background:url(../img/common/works-bg.svg) no-repeat;
    background-size:contain;
    width:330px;
    height:200px;
    position:absolute;
    top:0;
    right:50px
}
@media screen and (max-width:599px){
    #works::before{
        width:200px;
        height:150px;
        right:-60px
    }
}
#works::after{
    content:"";
    display:inline-block;
    background:#f5f7f7;
    height:135%;
    width:85%;
    position:absolute;
    top:-120px;
    right:-65px;
    z-index:-2
}
@media screen and (max-width:599px){
    #works::after{
        top:-80px;
        height:125vh
    }
}
#works .button-l{
    margin-top:100px
}
@media screen and (max-width:599px){
    #works .button-l{
        margin:100px auto 0
    }
}
.works-list{
    width:1500px
}
.works-item{
    background:#fff;
    -webkit-box-shadow:0 5px 20px rgba(0,0,0,.1);
    box-shadow:0 5px 20px rgba(0,0,0,.1);
    -webkit-transition:.4s;
    transition:.4s;
    min-width:500px;
    margin-right:3em
}
@media screen and (max-width:959px){
    .works-item{
        min-width:auto
    }
}
.works-item .wrap{
    width:80%;
    margin:50px auto 30px
}
@media screen and (max-width:599px){
    .works-item .wrap{
        margin:30px auto 20px
    }
}
.works-item .category{
    background:#007655;
    color:#fff;
    width:-webkit-fit-content;
    width:-moz-fit-content;
    width:fit-content;
    padding:0 10px;
    border-radius:20px;
    font-size:1.3rem;
    font-weight:700
}
@media screen and (max-width:599px){
    .works-item .category{
        font-size:1.1rem
    }
}
.works-item .works-title{
    font-size:2rem;
    font-weight:700;
    margin:15px 0;
    letter-spacing:.01em
}
@media screen and (max-width:599px){
    .works-item .works-title{
        font-size:1.6rem
    }
}
.works-item .technology{
    background:#f5f7f7
}
.works-item .technology .wrap{
    width:90%;
    margin:20px auto 80px;
    padding:20px 0
}
.works-item .technology .title{
    background:#fff;
    border-radius:5px;
    display:inline-block;
    padding:5px 10px
}
@media screen and (max-width:599px){
    .works-item .technology .title{
        font-size:1.2rem
    }
}
.works-item .technology .text{
    display:inline-block;
    font-weight:700
}
@media screen and (max-width:599px){
    .works-item p{
        font-size:1.4rem;
        line-height:1.7
    }
}
.works-item .works-arrow{
    text-align:right;
    -webkit-transition:.4s;
    transition:.4s;
    position:absolute;
    right:50px;
    bottom:30px
}
.works-item:hover{
    -webkit-box-shadow:0 5px 20px rgba(0,0,0,.25);
    box-shadow:0 5px 20px rgba(0,0,0,.25)
}
.works-item:hover .works-arrow{
    -webkit-transition:-webkit-transform .6s cubic-bezier(.8,0,.2,1) 0s;
    transition:-webkit-transform .6s cubic-bezier(.8,0,.2,1) 0s;
    transition:transform .6s cubic-bezier(.8,0,.2,1) 0s;
    transition:transform .6s cubic-bezier(.8,0,.2,1) 0s,-webkit-transform .6s cubic-bezier(.8,0,.2,1) 0s;
    -webkit-transform:translateX(20px);
    transform:translateX(20px)
}
.swiper-slide{
    height:auto
}
.swiper-pagination{
    margin-bottom:-60px
}
.swiper-pagination-bullet-active{
    background:#333
}
.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{
    bottom:170px
}
.pagenation{
    margin:0 auto
}
.pagenation ul{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
.pagenation li{
    font-family:Poppins,sans-serif;
    font-weight:700
}
.pagenation li a,.pagenation li span{
    padding:.4em 1em
}
.pagenation li a.number{
    border-bottom:2px solid #f5f7f7
}
.pagenation li.next a,.pagenation li.prev a{
    background:#333;
    color:#fff;
    border-radius:50%
}
.under-wrap{
    margin:200px auto 0;
    width:90%;
    max-width:1200px
}
@media screen and (max-width:599px){
    .under-wrap{
        margin:150px auto 70px
    }
}
.under-head{
    font-size:6rem;
    font-family:Poppins,sans-serif;
    font-weight:700;
    margin-bottom:50px
}
@media screen and (max-width:599px){
    .under-head{
        font-size:4rem;
        margin-bottom:30px
    }
}
.under-head span{
    display:block;
    font-size:1.6rem;
    margin:20px 0 0 0;
    letter-spacing:.05em
}
@media screen and (max-width:599px){
    .under-head span{
        font-size:1.3rem;
        margin:7px 0 0 0
    }
}
.under-img{
    margin:0 calc(50% - 50vw);
    width:100vw;
    height:350px
}
@media screen and (max-width:599px){
    .under-img{
        height:150px
    }
}
.under-img img{
    width:100%;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover
}
.under-section-wrap{
    margin:120px auto
}
@media screen and (max-width:599px){
    .under-section-wrap{
        margin:60px auto
    }
}
.under-section-title{
    font-size:5rem;
    font-family:Poppins,sans-serif;
    font-weight:700;
    margin-bottom:50px;
    text-align:center
}
@media screen and (max-width:599px){
    .under-section-title{
        font-size:3rem
    }
}
.under-section-title span{
    display:block;
    text-align:center;
    font-size:1.6rem;
    margin:20px 0 0 0;
    letter-spacing:.05em
}
@media screen and (max-width:599px){
    .under-section-title span{
        font-size:1.3rem;
        margin:7px 0 0 0
    }
}
.pagination{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin:50px auto;
    font-family:Poppins,sans-serif;
    font-weight:700;
    text-align:center;
    width:-webkit-fit-content;
    width:-moz-fit-content;
    width:fit-content;
    line-height:10px
}
.pagination li a{
    padding:20px;
    font-size:2rem
}
.pagination li a.number{
    border-bottom:2px solid #fff
}
.pagination li a.number:hover{
    border-bottom:2px solid #333
}
.pagination li a.arrow{
    background:#333;
    border:2px solid #333;
    color:#fff;
    border-radius:50%;
    width:50px;
    height:50px
}
.pagination li a.arrow:hover{
    background:#fff;
    color:#333
}
#philosophy{
    margin-bottom:150px
}
@media screen and (max-width:599px){
    #philosophy{
        margin-bottom:70px
    }
}
.mission-accent,.vision-accent,.value-accent{
    font-size:2rem;
    font-weight:700;
    font-family:Poppins,sans-serif;
    letter-spacing:.2em;
    text-align:center;
    margin-top:100px
}
@media screen and (max-width:599px){
    .mission-accent,.vision-accent,.value-accent{
        font-size:1.8rem;
        letter-spacing:.1em;
        margin-top:50px
    }
}
.vision-accent{
    position:relative
}
.vision-accent::after{
    content:"";
    display:block;
    width:50px;
    height:3px;
    background:#007655;
    margin:auto;
    position:absolute;
    bottom:-10px;
    left:0;
    right:0;
    margin:auto
}
@media screen and (max-width:599px){
    .vision-accent::after{
        bottom:-5px
    }
}



.value-accent{
    position:relative
}
.value-accent::after{
    content:"";
    display:block;
    width:50px;
    height:3px;
    background:#007655;
    margin:auto;
    position:absolute;
    bottom:-10px;
    left:0;
    right:0;
    margin:auto
}
@media screen and (max-width:599px){
    .value-accent::after{
        bottom:-5px
    }
}



.mission-accent{
    position:relative
}
.mission-accent::after{
    content:"";
    display:block;
    width:50px;
    height:3px;
    background:#265680;
    margin:auto;
    position:absolute;
    bottom:-10px;
    left:0;
    right:0;
    margin:auto
}
.mission-title,.vision-title{
    font-size:3.8rem;
    font-weight:700;
    margin:50px auto 40px;
    text-align:center
}
.value-title{
    font-size:2.5rem;
    font-weight:700;
    margin:50px auto 40px;
    text-align:center
}
@media screen and (max-width:599px){
    .mission-title,.vision-title{
        font-size:2.4rem;
        margin:30px auto 20px
    }
}
@media screen and (max-width:599px){
    .value-title{
        font-size:1.8rem;
        margin:30px auto 20px
    }
}
.mission-text,.vision-text,.value-text{
    width:90%;
    max-width:700px;
    margin:0 auto;
    text-align:center
}
@media screen and (max-width:599px){
    .mission-text,.vision-text,.value-text{
        text-align:left
    }
}
#message{
    background:#f5f7f7;
    padding:100px 0 70px;
    margin:0 calc(50% - 50vw);
    width:100vw
}
@media screen and (max-width:599px){
    #message{
        padding:70px 0 50px
    }
}
.message-wrap{
    width:90%;
    max-width:1200px;
    margin:70px auto
}
@media only screen and (min-width:600px) and (max-width:959px){
    .message-wrap{
        -webkit-box-align:center;
        -ms-flex-align:center;
        align-items:center
    }
}
@media screen and (max-width:599px){
    .message-wrap{
        margin:30px auto
    }
}
.message-img{
    width:25%;
    margin-right:60px
}
@media only screen and (min-width:600px) and (max-width:959px){
    .message-img{
        width:40%;
        margin:0 auto 30px
    }
}
@media screen and (max-width:599px){
    .message-img{
        width:70%;
        margin:0 auto 30px
    }
}
.message-textblock{
    width:70%
}
@media screen and (max-width:599px){
    .message-textblock{
        width:100%
    }
}
.message-textblock .title{
    font-size:3rem;
    font-weight:700;
    margin-bottom:30px;
    line-height:1.7
}
@media screen and (max-width:599px){
    .message-textblock .title{
        font-size:2.6rem;
        margin-bottom:20px
    }
}
.message-textblock .message-text{
    margin-bottom:50px;
    line-height:2.3
}
.message-textblock .name{
    text-align:right;
    font-size:2rem;
    font-weight:700
}
@media screen and (max-width:599px){
    .message-textblock .name{
        font-size:1.8rem
    }
}
#company{
    margin-bottom:200px
}
@media screen and (max-width:599px){
    #company{
        margin-bottom:100px
    }
}
.company-item{
    border-top:1px solid #e8eaeb
}
.company-item:last-child{
    border-bottom:1px solid #e8eaeb
}
.company-item .company-item-wrap{
    width:100%;
    -webkit-transform:translateX(30%);
    transform:translateX(30%);
    margin:30px auto;
    position:relative
}
@media only screen and (min-width:600px) and (max-width:959px){
    .company-item .company-item-wrap{
        -webkit-transform:translateX(20%);
        transform:translateX(20%)
    }
}
@media screen and (max-width:599px){
    .company-item .company-item-wrap{
        margin:20px auto;
        -webkit-transform:translateX(20px);
        transform:translateX(20px)
    }
}
.company-item .company-title{
    font-weight:700;
    width:20%
}
@media screen and (max-width:599px){
    .company-item .company-title{
        width:100%
    }
}
.company-item .company-text{
    width:80%
}
@media screen and (max-width:599px){
    .company-item .company-text{
        width:100%
    }
}
.company-item .map{
    border:1px solid #007655;
    background:#007655;
    color:#fff;
    display:inline-block;
    font-size:1.3rem;
    padding:0 10px;
    border-radius:5px;
    height:22px;
    line-height:22px;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto
}
@media screen and (max-width:599px){
    .company-item .map{
        position:static;
        width:50px;
        margin-top:10px;
        line-height:18px
    }
}
.company-item .map:hover{
    background:#fff;
    color:#007655
}
#access p{
    text-align:center;
    margin-bottom:50px
}
#access iframe{
    margin:0 calc(50% - 50vw);
    width:100vw
}
@media screen and (max-width:599px){
    #access iframe{
        height:300px
    }
}

/* ==========================================================================
   プロジェクトページ専用スタイル
   ========================================================================== */

.under-head{
    width: 100%;
    height: 30px;
    background: #fff;
    position: relative;
}


.project-background-image{
    width: 100%;
    height: 765px;
    background-image: url(../img/projects/main.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

@media screen and (max-width: 1200px) {
    .project-background-image{
        width: 100%;
        height: 765px;
    }
}


.project-wrap{
    position: relative;
    margin-top: -765px;
    z-index: 10;
    width: 1200px;
    height: 100%;
    align-items: center;
    display: block;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (max-width: 1200px) {
    .project-wrap{
        width: 100%;
        height: 100%;
    }
}

/* タイトルオーバーレイ */
.project-title-overlay {
    position: relative;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 40px 50px 40px;
    text-align: center;
    z-index: 20;
    height: auto;
}

/* メインタイトル */
.main-title {
    font-size: 3.6rem;
    font-weight: 500;
    color: #fff;
    line-height: 6rem;
    z-index: 25;
    letter-spacing: 0.01em;
}

@media screen and (max-width: 1200px) {
    .project-title-overlay{
        padding: 60px 20px 50px 20px;
    }
    .main-title {
        font-size: 2.5rem;
    }
}

.project-image{
    max-width: 1040px;
    max-height: 500px;
    height: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 30;
    overflow: hidden;
}

.project-image img{
    width: 100%;
    object-fit: contain;
}

@media screen and (max-width: 1200px) {
    .project-image{
        width: 80%;
        height: auto;
        max-height: 100%;
        margin: 0 auto;
        text-align: center;
    }
}


/* 共通カードスタイル */
.overview-card{
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.2), -10px 0 5px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 25;
    margin-top: -250px;
}

@media screen and (max-width: 1200px) {
    .overview-card{
        width: 90%;
        height: 100%;
        margin-top: -150px;
    }
}

.overview-title {
    font-size: 3.6rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    color: #007655;
    margin-top: 340px;
    letter-spacing: 0.01em;
}

@media screen and (max-width: 1200px) {
    .overview-title {
        font-size: 3.6rem;
        margin-top: 200px;
    }
}

@media screen and (max-width: 599px) {
    .overview-title {
        font-size: 2.6rem;
        margin-top: 200px;
    }
}

.project-three-columns {
    max-width: 1040px;
    margin: 0 auto;
    margin-top: 40px;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
}

.project-column {
    background: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-image-container {
    width: 100%;
    aspect-ratio: 8/7;
    overflow: hidden;
    position: relative;
}

.project-image-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}


.column-title {
    font-size: 1.9rem;
    color: #007655;
    text-align: left;
    font-weight: 600;
    line-height: 3.2rem;
    letter-spacing: -0.05em;
    min-height: 6.4rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.column-text {
    font-size: 1.8rem;
    color: #666;
    margin: 0;
    text-align: left;
    line-height: 3.2rem;
}

@media screen and (max-width: 1200px) {
    .project-three-columns {
        width: 90%;
    }
}

@media screen and (max-width: 959px) {
    .project-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .project-image-container {
        width:70%;
        aspect-ratio: 4/3;
        margin: 0 auto;
        
    }
    .column-title {
        font-size: 1.9rem;
    }
    .column-text {
        font-size: 1.8rem;
        line-height: 2.8rem;
    }
}

/* プロジェクト要約ボックス */
.project-summary-box {
    border: 8px solid #006837;
    border-radius: 30px;
    padding: 0;
    background: #006837;
    position: relative;
    overflow: hidden;
    width: 1040px;
    margin: 80px auto;
    box-sizing: border-box;
}

@media screen and (max-width: 1200px) {
    .project-summary-box{
        width: 90%;
    }
}


.summary-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.6rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    white-space: normal;
    background: #006837;
    width: 100%;
    height: 100px;
    margin: 0;
    box-sizing: border-box;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom: 5px solid #006837
}

.summary-content-box{
    background: #fff;
}

.summary-content {
    font-size: 1.8rem;
    color: #666;
    margin: 0;
    line-height: 4.4rem;
    text-align: justify;
    letter-spacing: -0.06em;
    font-weight: 400;
    padding: 30px 55px 30px 55px;
}

@media screen and (max-width: 959px) {
    .summary-content {
        font-size: 1.8rem;
        line-height: 2.8rem;
        padding: 30px 30px 30px 30px;
    }
}

@media screen and (max-width: 599px) {
    .summary-content {
        font-size: 1.5rem;
        line-height: 2.4rem;
        padding: 30px 30px 30px 30px;
    }
}

.summary-two-box{
    display: flex;
    gap: 20px;
    margin-top: 20px;
    justify-content: center;
    width: 100%;
    padding: 0 40px 50px 40px;
}

@media screen and (max-width: 959px) {
    .summary-two-box{
        flex-direction: column;
    }
}

.summary-content-box-item{
    flex: 1 1 0;
    padding: 25px 20px;
    text-align: center;
    background: #f2f2f2;
    border-radius: 20px;
}


.summary-item-title {
    font-size: 2.2rem;
    font-weight: 520;
    color: #006837;
    margin: 0 0 15px 0;
    text-align: center;
}

.summary-item-content {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.05em;
    color: #555;
    margin: 0;
    text-align: center;
    padding: 0 20px;
}

@media screen and (max-width: 959px) {
    .summary-item-title {
        font-size: 2.2rem;
    }
    .summary-item-content {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 599px) {
    .summary-item-title {
        font-size: 1.8rem;
    }
    .summary-item-content {
        font-size: 1.2rem;
    }
}


.button-container{
    display: inline-block;
}

.contact-button{
    position: relative;
    display: inline-block;
    width: 540px;
    height: 120px;
}

.button-image{
    width: 100%;
    height: auto;
    display: block;
}

.button-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.8rem;
    font-weight: 500;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 959px) {
    .contact-button{
        width: 500px;
        height: auto;
        aspect-ratio: 75/13;
    }
    .button-text {
        font-size: 2.8rem;
    }
}

@media screen and (max-width: 599px) {
    .contact-button{
        width: 300px;
        height: auto;
        aspect-ratio: 75/13;
    }
    .button-text {
        font-size: 2.0rem;
    }
}

.project-table-of-contents{
    width: 100%;
    margin: 0 auto;
    background: #f0faf2;
    width:1040px;
    text-align: center;
    margin-top: 150px;
    margin-bottom: 120px;
    overflow: hidden;
}

@media screen and (max-width: 1200px) {
    .project-table-of-contents{
        width: 90%;
        margin-top: 100px;
        margin-bottom: 100px;
    }
}


.underline{
    position: relative;
    display: inline-block;
}

.underline::after{
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: #007655;
    display: block;
}

.table-of-contents-title{
    height: auto;
    font-size: 3.6rem;
    font-weight: 700;
    color: #007655;
    line-height: 1.2;
    text-align: center;
    display: inline-block;
    position: relative;
    margin-top: 60px;
    margin-bottom: 80px;
}

.table-of-contents-list{
    list-style: none;
    padding: 0 50px 70px 50px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.table-of-contents-item{
    display: flex;
    flex-direction: column;
}

.table-of-contents-link{
    font-size: 2.2rem;
    font-weight: 450;
    line-height: 1;
    letter-spacing: -0.04em;
    text-decoration: none;
    color: #007655;
    text-align: left;
    padding: 0;
    transition: all 0.3s ease;
    display: block;
    padding-left: 1.6rem;
    text-indent: -1.6rem;
}


@media screen and (max-width: 1200px) {
    .table-of-contents-list{
        gap: 20px;
    }
    .table-of-contents-title{
        font-size: 3.6rem;
        margin-top: 40px;
        margin-bottom: 60px;
    }
    .table-of-contents-link{
        font-size: 2.2rem;
    }
    .table-of-contents-list{
        padding: 0 30px 40px 30px;
    }
}

@media screen and (max-width: 959px) {
    .table-of-contents-list{
        gap: 20px;
    }
    .table-of-contents-title{
        font-size: 2.6rem;
    }
    .table-of-contents-link{
        font-size: 1.8rem;
    }
    .table-of-contents-list{
        padding: 0 20px 40px 20px;
    }
}

.project-content{
    width: 1040px;
    margin: 0 auto;
    background: #fff;
    padding: 0;
    text-align: center;
}

@media screen and (max-width: 1200px) {
    .project-content{
        width: 90%;
    }
}

.project-content-title-underline{
    position: relative;
    display: inline-block;
}

.project-content-title-underline::after{
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: #007655;
    display: block;
}


.project-content-item{
    width: 100%;
    margin: 0 auto;
    background: #fff;
    padding: 0 60px;
}

@media screen and (max-width: 1200px) {
    .project-content-item{
        padding: 0 10px;
    }
}

.project-content-title{
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #007655;
    text-align: center;
    display: inline-block;
    margin-bottom: 60px;
}

.project-content-text{
    font-size: 1.8rem;
    font-weight: 300;
    color: #333;
    margin-bottom: 60px;
    line-height: 2.2;
    letter-spacing: -0.05em;
    text-align: justify;
}

.client-image{
    width: 1040px;
    height: auto;
    object-fit: cover;
}

@media screen and (max-width: 1200px) {
    .project-content-title{
        font-size: 3.6rem;
    }
    .project-content-text{
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 599px) {
    .project-content-title{
        font-size: 2.6rem;
    }
    .project-content-text{
        font-size: 1.5rem;
        line-height: 2.2rem;
    }
}

.selected-reason-box{
    width: 100%;
    height: auto;
    margin: 100px auto 0 auto;
    padding: 0;
    text-align: center;
    background-image: url(../img/projects/background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.selected-reason-title{
    position: relative;
    display: inline-block;
    font-size: 3.6rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: #fff;
    margin-bottom: 60px;
    text-align: center;
    margin-top: 60px;

}

.selected-reason-title-underline{
    position: relative;
    display: inline-block;
}

.selected-reason-title-underline::after{
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: #fff;
    display: block;
}

.selected-reason-text{
    padding: 0 140px;
    font-size: 1.8rem;
    font-weight: 300;
    color: #fff;
    margin-bottom: 50px;
    line-height: 2;
    letter-spacing: -0.05em;
    text-align: justify;
}


@media screen and (max-width: 1200px) {
    .selected-reason-title{
        font-size: 3.6rem;
    }
    .selected-reason-text{
        font-size: 1.8rem;
        padding: 0 60px;
    }
}

@media screen and (max-width: 599px) {
    .selected-reason-title{
        font-size: 2.6rem;
    }
    .selected-reason-text{
        font-size: 1.5rem;
        padding: 0 30px;
    }
}

.selected-reason-image-container{
    width: 100%;
    height: auto;
    margin-bottom: 60px;
    text-align: center;
}

.selected-reason-image{
    width: 1040px;
    height: auto;
    object-fit: cover;
}

@media screen and (max-width: 1200px) {
    .selected-reason-image{
        width: 90%;
    }
}

@media screen and (max-width: 599px) {
    .selected-reason-image-container{
        margin-bottom: 40px;
    }
    .selected-reason-image{
        width: 90%;
    }
}

.client-problem-image{
    width: 1040px;
    height: auto;
    object-fit: cover;
}

.margin-top-100{
    margin-top: 100px;
}

.margin-top-150{
    margin-top: 150px;
}

.problem-box{
    width: 1040px;
    padding: 0;
    text-align: center;
}

@media screen and (max-width: 1200px) {
    .problem-box{
        width: 95%;
    }
}

.problem-box-item{
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 80px;
}

@media screen and (max-width: 1200px) {
    .problem-box-item{
        gap: 20px;
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 599px) {
    .problem-box-item{
        gap: 10px;
        margin-bottom: 40px;
    }
}

.problem-box-item-image{
    width: 185px;
    height: 185px;
    height: auto;
    object-fit: cover;
    margin-left: 15px;
}

@media screen and (max-width: 1200px) {
    .problem-box-item-image{
        width: 15%;
        aspect-ratio: 1/1;
    }
}
  
.problem-box-text-container{
    flex: 1;
}

.problem-box-item-title{
    font-size: 2.5rem;
    font-weight: 600;
    color: #006837;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: left;
}

.problem-box-item-text{
    font-size: 1.8rem;
    font-weight: 400;
    color: #333;
    line-height: 3;
    letter-spacing: -0.02em;
    text-align: justify;
    padding-top: 20px;
    padding-right: 60px;
}

@media screen and (max-width: 1200px) {
    .problem-box-item-title{
        font-size: 2.5rem;
    }
    .problem-box-item-text{
        font-size: 1.8rem;
        line-height: 2.8rem;
        padding-top: 10px;
        padding-right: 30px;
    }
}

@media screen and (max-width: 599px) {
    .problem-box-item-title{
        font-size: 1.8rem;
        letter-spacing: -0.06em;
    }
    .problem-box-item-text{
        font-size: 1.5rem;
        line-height: 2.2rem;
        padding-top: 10px;
        padding-right: 20px;
    }
}

.project-background-image{
    background-image: url(../img/projects/main.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}


.approach-box{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    display: flex;
}


.approach-left-area{
    background-image: url(../img/projects/left-area.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 760px;
    height: 660px;
    z-index: 1;
}

.approach-left-area-text-container{
    width: 100%;
    height: 100%;
    padding-top: 80px;
    padding-bottom: 80px;
    padding-left: 60px;
    padding-right: 200px;
}

.approach-left-area-title{
    font-size: 2.8rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: left;
    margin-bottom: 30px;
}

.approach-left-area-text{
    font-size: 1.6rem;
    font-weight: 300;
    color: #fff;
    line-height: 2;
    letter-spacing: -0.02em;
    text-align: justify;
    margin-bottom: 40px;
}


.approach-right-area{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-left: -160px;
    gap: 40px;
}

.approach-right-area-image{
    width: 100%;
    height: auto;
    max-width: 600px;
    object-fit: cover;
}

@media screen and (max-width: 1200px) {
    .approache-left-area{
        width:100%;
        height: auto;
    }
    .approach-right-area{
        width:100%;
        height: auto;
        text-align: center;
    }
    .approach-right-area-image{
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 1040px) {
    .approach-box {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  
    .approach-left-area {
      width: 100%;
      height: auto;
      background-size: cover; 
      padding: 20px; 
    }
  
    .approach-left-area-text-container {
      padding: 20px;
    }
  
    .approach-left-area-title {
      font-size: 2.8rem;
      text-align: center;
    }
  
    .approach-left-area-text {
      font-size: 1.4rem;
      text-align: left;
    }
  
    .approach-right-area {
      margin-left: 0;
      gap: 20px;
      margin-top: 20px;
    }
  
    .approach-right-area-image {
      max-width: 70%;
      height: auto;
      margin: 0 auto;
      margin-bottom: 20px;
    }
  }
  

.project-process-summary{
    width: 1040px;
    margin: 40px auto 0 auto;
    background: #f0faf2;
    text-align: center;
    border-radius: 50px;
}


.project-process-summary-text{
    font-size: 1.6rem;
    font-weight: 500;
    color: #007655;
    text-align: justify;
    line-height: 2.8rem;
    letter-spacing: -0.06em;
    padding: 50px 50px;
}

@media screen and (max-width: 1200px) {
    .project-process-summary-text{
        font-size: 1.8rem;
    }
    .project-process-summary{
        width: 90%;
    }
}

@media screen and (max-width: 599px) {
    .project-process-summary-text{
        font-size: 1.5rem;
    }
}
  

.project-process-summary{
    width: 1040px;
    margin: 40px auto 0 auto;
    background: #f0faf2;
    text-align: center;
    border-radius: 50px;
}


.project-process-summary-text{
    font-size: 1.6rem;
    font-weight: 500;
    color: #007655;
    text-align: justify;
    line-height: 2.8rem;
    letter-spacing: -0.06em;
    padding: 50px 50px;
}

@media screen and (max-width: 1200px) {
    .project-process-summary-text{
        font-size: 1.8rem;
    }
    .project-process-summary{
        width: 90%;
    }
}

@media screen and (max-width: 599px) {
    .project-process-summary-text{
        font-size: 1.5rem;
    }
}


.commitment-box{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    display: flex;
}

.commitment-left-area{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-left: 50px;
    margin-right: -200px;
    width: auto;
}

.commitment-left-area-image{
    width: 100%;
    height: auto;
    max-width: 600px;
    object-fit: cover;
}

.commitment-right-area{
    background-image: url(../img/projects/right-area.png);
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
    width: 760px;
    height: 660px;
    margin-right: 0px;
    z-index: 1;
}

.commitment-right-area-text-container{
    width: 100%;
    height: 100%;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 230px;
    padding-right: 80px;
}

.commitment-right-area-title{
    font-size: 2.8rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: left;
    margin-bottom: 20px;
}

.commitment-right-area-text{
    font-size: 1.6rem;
    font-weight: 300;
    color: #fff;
    line-height: 2;
    letter-spacing: -0.04em;
    text-align: justify;
}

.commitment-right-area-subtitle{
    font-size: 2.2rem;
    font-weight: 600;
    color: #007655;
    line-height: 2;
    letter-spacing: -0.02em;
    text-align: justify;
    background-color: #fff;
    padding-left: 10px;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 1040px) {
    .commitment-box {
      flex-direction: column;
      text-align: center;
    }
  
    .commitment-left-area {
      margin: 0 0 20px 0;
    }
  
    .commitment-left-area-image {
        max-width: 70%;
        height: auto;
        margin: 0 auto;
        margin-bottom: 20px;
    }
  
    .commitment-right-area {
      width: 100%;
      height: auto;
      background-size: cover;
      padding: 20px;
    }
  
    .commitment-right-area-text-container {
      padding: 20px;
    }
  
    .commitment-right-area-title {
      font-size: 2.8rem;
      text-align: center;
    }
  
    .commitment-right-area-text {
      font-size: 1.4rem;
      text-align: left;
    }
}


.margin-bottom-30{
    margin-bottom: 30px;
}

.solution-box{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    display: flex;
}

.solution-left-area{
    background-image: url(../img/projects/left-area.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 760px;
    height: 660px;
    z-index: 1;
}

.solution-left-area-text-container{
    width: 100%;
    height: 100%;
    padding-top: 100px;
    padding-bottom: 80px;
    padding-left: 60px;
    padding-right: 200px;
}

.solution-left-area-title{
    font-size: 2.8rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: left;
    margin-bottom: 30px;
}

.solution-left-area-text{
    font-size: 1.6rem;
    font-weight: 300;
    color: #fff;
    line-height: 2;
    letter-spacing: -0.02em;
    text-align: justify;
    margin-bottom: 40px;
}

.solution-right-area{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-left: -160px;
    gap: 40px;
}

.solution-right-area-image{
    width: 100%;
    height: auto;
    max-width: 600px;
    object-fit: cover;
}

@media screen and (max-width: 1200px) {
    .solution-left-area{
        width:70%;
        height: auto;
        background-position: left;
    }
    .solution-right-area{
        width:100%;
        height: auto;
        text-align: center;
    }
    .solution-right-area-image{
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 1040px) {
    .solution-box {
      flex-direction: column;
      text-align: center;
      align-items: center;
    }
  
    .solution-left-area {
      width: 100%;
      height: auto;
      background-size: cover;
      padding: 20px;
    }
  
    .solution-left-area-text-container {
      padding: 20px;
    }
  
    .solution-left-area-title {
      font-size: 2.8rem;
      text-align: center;
    }
  
    .solution-left-area-text {
      font-size: 1.4rem;
      text-align: left;
    }
  
    .solution-right-area {
      margin-left: 0;
      gap: 20px;
      margin-top: 20px;
    }
  
    .solution-right-area-image {
      max-width: 70%;
      height: auto;
      margin: 0 auto;
      margin-bottom: 20px;
    }
}



.custumer-reaction{
    max-width: 1200px;
    margin: 100px auto 0 auto;
    padding: 0;
    text-align: center;
    background: #f0faf2;
}

.custumer-reaction-title-container{
    width: 1040px;
    margin: 70px auto 0 auto;
    padding: 0;
    text-align: center;
}

.custumer-reaction-title{
    font-size: 2.8rem;
    font-weight: 600;
    color: #007655;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 40px;
}

.custumer-reaction-title-underline{
    position: relative;
    display: inline-block;
}

.custumer-reaction-title-underline::after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: #007655;
    display: block;
}

.custumer-reaction-text-container{
    width: 960px;
    margin: 0 auto;
    padding-bottom: 70px;
    text-align: center;
}

.custumer-reaction-text{
    font-size: 1.6rem;
    font-weight: 300;
    color: #333;
    line-height: 2;
    letter-spacing: -0.06em;
    margin-bottom: 40px;
}

@media screen and (max-width: 1200px) {
    .custumer-reaction{
        width: 100%;
    }

    .custumer-reaction-title-container{
        width: 90%;
        content: center;
    }

    .custumer-reaction-text-container{
        width: 90%;
        padding-bottom: 40px;
    }

    .custumer-reaction-text{
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 1040px) {
    .custumer-reaction{
        width: 100%;
    }

    .custumer-reaction-title-container{
        width: 90%;
    }

    .custumer-reaction-text-container{
        width: 90%;
        padding-bottom: 40px;
    }

    .custumer-reaction-text{
        font-size: 1.5rem;
    }
}



.campany-message{
    width: 100%;
    max-width: 1040px;
    margin: 0 auto 0 auto;
    padding: 0 20px;
    text-align: center;
    background: #fff;
}

.campany-message-title{
    font-size: 3.6rem;
    font-weight: 600;
    color: #007655;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 90px;
}

@media screen and (max-width: 1200px) {
    .campany-message{
        width: 90%;
    }

    .campany-message-title{
        font-size: 3.6rem;
    }
}

@media screen and (max-width: 599px) {
    .campany-message-title{
        font-size: 2.6rem;
    }
}

.campany-message-title-underline{
    position: relative;
    display: inline-block;
}

.campany-message-title-underline::after{
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: #007655;
    display: block;
}


.campany-message-container{
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding-bottom: 80px;
    display: flex;
    gap: 20px;
    align-items: center;
}


.campany-message-image{
    width: 70px;
    height: 70px;
    object-fit: cover;
    margin: 0;
}
  
.campany-message-text-container{
    flex: 1;
}


.campany-message-text{
    font-size: 2.2rem;
    font-weight: 400;
    color: #333;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: justify;
    display: flex;
}

@media screen and (max-width: 1200px) {
    .campany-message-container{
        width: 90%;
        padding-bottom: 60px;
    }

    .campany-message-image{
        width: 50px;
        height: 50px;
    }

    .campany-message-text{
        font-size: 2.2rem;
    }
}

@media screen and (max-width: 599px) {
    .campany-message-text{
        font-size: 1.8rem;
    }
}


.margin-bottom-150{
    margin-bottom: 150px;
}


.balloon-contact-message {
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
    width: 90%;
    max-width: 1040px;
    margin-top: 40px;
    padding: .8em 1.2em;
    background-color: #006837;
    color: #ffffff;
}

.balloon-contact-message::before {
    position: absolute;
    top: -40px;
    width: 50px;
    height: 40px;
    background-color: #006837;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';
}

.contact-message-container{
    width: 100%;
    margin: 20px auto;
}
.contact-message-title{
    font-size: 2.4rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
    letter-spacing: -0.04em;
    margin: 0 0 50px 0;  
    text-align: justify;
}

.contact-message-underline{
    position: relative;
    display: inline-block;
}

.contact-message-underline::after{
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: #fff;
    display: block;
}

.contact-message-text{
    font-size: 1.6rem;
    font-weight: 300;
    color: #fff;
    line-height: 2;
    letter-spacing: -0.04em;
    text-align: justify;
}

@media screen and (max-width: 1200px) {
    .contact-message-title{
        font-size: 2.4rem;
    }
    .contact-message-text{
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 959px) {
    .contact-message-title{
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 599px) {
    .contact-message-title{
        font-size: 1.8rem;
    }
    .contact-message-text{
        font-size: 1.2rem;
    }
}

.contact-message-container-2{
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
    padding-top: 70px;
    margin-bottom: 40px;
}

.contact-message-title-2{
    font-size: 2.8rem;
    font-weight: 600;
    color: #007655;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: center;
}

@media screen and (max-width: 1200px) {
    .contact-message-title-2{
        font-size: 2.8rem;
        letter-spacing: -0.04em;
    }
}

@media screen and (max-width: 599px) {
    .contact-message-title-2{
        font-size: 2.0rem;
        letter-spacing: -0.04em;
    }
}


.works-container{
    width: 100%;
    height: 480px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    background-color: #f5f7f7;
    z-index: 50;
}

.works-button{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-radius: 9999px; 
    font-size: 14px;
    width: 700px;
    height: 120px;
    margin: 100px auto 0 auto;
  }

.works-button-text{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none;
}



@media screen and (max-width: 959px) {
    .works-button{
        width: 90%;
    }
}