@charset "UTF-8";

body p{
  margin: 0;
  padding: 0;
  font-family: "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  font-size: 16px;
}

article{
    font-family: "ヒラギノ角ゴ ProN W3", HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
    font-size: 16px;
}

body a{
    text-decoration: none;
    outline: none;
}

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 80px;
    background-color: white;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 

}

header .inner{
    width: 100vw;
    margin: 0 auto;
    padding: 0 20px;
}


header .logo{
    position: relative;
    display: block;
    float: left;
    margin: 30px 0;
}

header .logo img{
    width: auto;
    height: 20px;
}

header .navi{
    position: relative;
    display: block;
    float: right;
    margin-right: 20px;
}

.navi ul {
    margin: 0;
}

.navi ul li{
    position: relative;
    display: inline-block;
    width: 100px;
    margin-right: 8px;
    text-align: center;
}

.navi ul li a{
    text-decoration: none;
    outline: none;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 80px;
    color: black;
}

.ddmenu input{
    display: none;
}

.ddmenu:hover .ddmenu-inner,
.ddmenu input:checked ~ .ddmenu-inner{
    display: block;
}

.navi ul .ddmenu-inner{
    width: 196px;
    position: absolute;
    z-index: 1;
    background-color:#053360e5;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: none;
}


.navi ul .ddmenu-inner .ddmenu-list{
    list-style: none;
    margin: 12px 12px;
    padding: 0;
}

.navi ul .ddmenu-inner .ddmenu-list li{
    padding: 0;
    width: 80%;
    text-align: left;
}

.navi ul .ddmenu-inner .ddmenu-list li a{
    text-decoration: none;
    outline: none;
    font-size: 14px;
    line-height: 32px;
    letter-spacing: 0.1em;
    color: #fff;
}

.navbox{
    display: none;
}


.heroimage-index {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 60vw;
    margin-top: 80px;
    overflow: hidden;
}

.heroimage-img {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    background-size: cover;
    background-position: center;
}

.heroimage-img.active {
    opacity: 1;
}

.heroimage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  width: 100vw;
  max-height: 720px;
  margin-top: 80px;
  overflow: hidden;
}

.heroimage img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.sitemap{
    width: 100%;
    height: 300px;
    background-color: #053360;
    padding-top: 8px;
    margin-top: 160px;
}

.sitemap-inner{
    width: 94vw;
    margin: 0 auto;
}

.sitemap-left{
    position: relative;
    float: left;
    width: 30%;
    height: 300px;
}

.sitemap-left-inner{
    height: 200px;
    position: absolute;
    display: block;
    top:50%;
    transform: translateY(-50%);
}

.sitemap-left img{
    width: 90%;
    height: auto;
    object-fit: cover;
    margin-bottom: 16px;
}

.address{
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.1em;
    color: #fff;
    margin-bottom: 12px;
}

.sitemap-left p{
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.1em;
    color: #fff;
}

.sitemap-right{
    position: relative;
    float: right;
    width: 70%;
    height: 300px;
}

.sitemap-right-inner{
    height: 217px;
    width: 100%;
    position: absolute;
    display: block;
    top:50%;
    transform: translateY(-50%);
}

.sitemap-right-1{
    position: relative;
    display: block;
    float: right;
    width: 25%;
    margin:  auto 0;
    align-items: center;
}

.sitemap-right-2{
    position: relative;
    display: block;
    float: right;
    width: 35%;
    margin: auto 2.5% auto 0;
    align-items: center;
}

.sitemap-right-3{
    position: relative;
    display: block;
    float: right;
    width: 30%;
    margin: auto 2.5% auto 0;
    align-items: center;
}

.sitemap-title{
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 40px;
    color: #fff;
    padding-left: 4px;
    margin-bottom: 8px ;
}

.sitemap-list{
    list-style: none;
    padding: 12px 0 0 4px;
    margin: 0;
    border-top: 1px solid #ffffff;
}

.sitemap-list li a{
    text-decoration: none;
    outline: none;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 0.1em;
    color: #fff;
}

.sitemap-list-left{
    display: block;
    float: left;
    width: 30%;
}

.sitemap-list-right{
    display: block;
    float: left;
    width: 70%;
}

.sitemap-right-res{
    display: none;
}



footer{
    width: 100%;
    height: 60px;
    background-color: #f55e0d;
}

footer p{
    font-size: 14px;
    line-height: 60px;
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 0;
}

.single-section{
    width: 848px;
    margin: 160px auto;
}

.single-section:after{
    content: "";
    display: block;
    clear: both;
}

.single-title{
    font-size: 40px;
    letter-spacing: 0.1em;
    line-height: 48px;
    font-weight: 700;
    color: #000;
    margin-bottom: 16px;
}

.single-post-date{
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.1em;
    margin: 0 16px 0 0;
}

.single-post-category{
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 24px;
    color: #fff;
    background-color: #f55e0d;
    height: 24px;
    align-items: center;
    vertical-align: middle;
    padding: 0px 12px;
    margin: 0 16px 0 0;
}

.single-post-content{
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 28px;
    text-align: justify;
    margin-top: 48px;
}

.single-buttom{
    width: 400px;
    height: 80px;
    margin-top: 160px;
}

.single-buttom p{
    font-size: 16px;
    line-height: 60px;
    letter-spacing: 0.1em;
    color: #000;
}

.breadcrumb{
    width: 100vw;
    margin: 24px auto;
}

.breadcrumb p{
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.1em;
    color: #000;
    padding-left: 20px;
}

.breadcrumb p a{
    text-decoration: none;
    outline: none;
}



#news{
    margin:104px auto 80px auto;
    text-align: center;
}

.post-section{
    width: 848px;
    border-top: 1px solid #c0c0c0;
    text-align: left;
    margin: auto;
}

#news article{
    width: 832px;
    border-bottom: 1px solid #C0C0C0;
    margin: 0;
    padding: 32px 8px;
}

.post-date{
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.1em;
    margin: 0 24px 0 0;
}

.post-category{
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 28px;
    color: #fff;
    height: 28px;
    background-color: #f55e0d;
    align-items: center;
    vertical-align: middle;
    padding: 0 12px;
    margin: 0 24px 0 0;
}

.post-title{
    display: inline-block;
    font-size: 16px;
    letter-spacing: 0.1em;
    margin: 0;
    color: black;
}

.title,
.title-about{
    font-size: 32px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #f55e0d;
    text-align: center;
    margin: 0;
}

.subtitle{
    font-size: 14px;
    line-height: 14px;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: #683629;
    text-align: center;
    margin: 16px 0 72px 0;
}

.section{
    padding: 80px 0;
}

.section-color{
    background-color: #fdebd84d;
    padding: 80px 0;
}

.section-inner{
    width: 848px;
    margin: 80px auto 0 auto;
}


.section-inner:after{
    content: "";
    display: block;
    clear: both;
}

.section-inner article{
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0.1em;
    text-align: justify;
}

.section-inner .center-article{
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-align: center;
}


.about-left{
    position: relative;
    display: flex;
    align-items: center;
    float: left;
    width: 60%;
    height: 345px;
    overflow: hidden;
}

.about-right{
    position: relative;
    display: block;
    float: right;
    width: 40%;
    height: 345px;
    overflow: hidden;
}

.about-left article{
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0.05em;
    text-align: justify;
    padding-right: 48px;
}

.about-right img{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translateX(-50%)translateY(-50%);
    width: 100%;
    height: auto;
    object-fit: cover;
}

.about-pic{
    display: none;
}

.strong-left{
    position: relative;
    display: block;
    float: left;
    width: 251px;
    margin-right: 48px;
}

.strong-right{
    position: relative;
    display: block;
    float: right;
    width: 250px;
}

.strong{
    position: relative;
    display: block;
    width: 100%;
    height: 330px;
    border-radius: 10px;
}

.strong p{
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-align: center;
    color: #f55e0d;
    margin: 16px auto;
    
}

.strong article{
    font-size: 14px;
    line-height: 24px;
    font-weight: 100;
    letter-spacing: 0.08em;
    text-align: justify;
    width: 100%;
    margin: 0 auto;
}

.strong-pic{
    position: relative;
    display: block;
    width: 100%;
    height: 90px;
    margin: 0 auto 24px auto;
}

.strong-pic img{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translateX(-50%)translateY(-50%);
    width: auto;
    height: 100%;
    object-fit: cover;
}

.duty-pic{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding-bottom:64px;
}

.duty-pic-res{
    display: none;
}

.sign{
    position: relative;
    display: block;
    float: right;
    align-items: end;
    margin-top: 80px;
} 

.sign p{
    display: inline;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-align: right;
    padding-right: 24px;
}

.sign img{
    width: 180px;
    height: auto;
    vertical-align: middle;
    object-fit: cover;
}

.contact-left{
    position: relative;
    display: block;
    float: left;
    width: 48%;
    height: auto;
    overflow: hidden;
}

.contact-right{
    position: relative;
    display: block;
    float: right;
    width: 48%;
    height: auto;
    overflow: hidden;
}


.ceo-profile-right{
    position: relative;
    display: flex;
    align-items: center;
    float: right;
    width: 60%;
    height: 410px;
}

.ceo-profile-right article{
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0.08em;
    text-align: justify;
    padding-left: 48px;
}

.ceo-profile-left{
    position: relative;
    display: block;
    float: left;
    width: 40%;
    height: 410px;
    margin-bottom: 40px;
}

.ceo-profile-pic{
    position: relative;
    display: block;
    width: 100%;
    height: 410px;
    overflow: hidden;
}

.ceo-profile-pic img{
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translateX(-50%)translateY(-50%);
    width: auto;
    height: 100%;
    object-fit: cover;
}

.ceo-profile-pic-res{
    display: none;
}

.ceo-name{
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.1em;
    margin-top: 16px;
}


.section-inner .philosophy-title{
    font-size: 20px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: #000;
    text-align: center;
    margin-bottom: 64px;
}

.section-inner .philosophy-title span{
    font-weight: 600;
    color: #f55e0d;
}

.section-color .section-inner .pic2-left{
    position: relative;
    display: block;
    float: left;
    width: 400px;
    height: auto;
    margin-right: 48px;
    margin-bottom: 48px;
}

.section-color .section-inner .pic2-right{
    position: relative;
    display: block;
    float: right;
    width: 400px;
    height: auto;
    margin-bottom: 48px;
}

.corporate-profile-left{
    position: relative;
    display: block;
    float: left;
    width: 60%;
    height: 650px;
}

.corporate-profile-left div{
    padding-right: 48px;
}

.corporate-profile-left ul{
    list-style: none;
    padding:0px;
    margin: 0;
}

.corporate-profile-left ul li{
    display: flex;
    vertical-align: top;
    padding: 12px 0;
}

.corporate-title{
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    text-align: justify;
    text-align-last: justify;
    color: #f55e0d;
    width: 25%;
    padding-left: 8px;
    margin-right: 24px;
}

.corporate-text{
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1em;
    color: #000;
}

.corporate-profile-right{
    position: relative;
    display: block;
    float: right;
    width: 40%;
    height: 576px;
    overflow: hidden;
}

.corporate-profile-pic{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 4px;
}

.corporate-profile-right p{
    font-size: 16px;
    letter-spacing: 0.1em;
    text-align: right;
    margin-bottom: 24px;
}

.history-pic{
    width: 800px;
    height: auto;
    position: relative;
    display: block;
    margin: 0 auto;
    overflow: hidden;
}

.pic-res{
    display: none;
}

.access-text{
    font-size: 18px;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.map{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding-bottom:80px;
}



.work{
    margin: 104px auto 160px auto;
}

.dev-title{
    font-size: 18px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #000;
    margin-bottom: 16px;
}

.dev-title span{
    color: #f55e0d;
}

.dev-pic{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.pic4-left{
    position: relative;
    display: block;
    float: left;
    width: 176px;
    height: auto;
    margin-right: 48px;
    overflow: hidden;
}

.pic4-right{
    position: relative;
    display: block;
    float: right;
    width: 176px;
    height: auto;
    overflow: hidden;
}

.pic2-left,
.text-left{
    position: relative;
    display: block;
    float: left;
    width: 400px;
    height: auto;
    margin-right: 48px;
}

.pic2-right{
    position: relative;
    display: block;
    float: right;
    width: 400px;
    height: auto;
}

.pic2-pic{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    overflow: hidden;
}

.pic-text{
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 16px;
    color: #000;
}

.pic2-text{
    position: relative;
    display: flex;
    align-items: center;
    float: right;
    width: 400px;
    height: 225px;
}

.pic2-text .title{
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #000;
    text-align: left;
    margin: 0;
}

.pic2-text .title-en{
    font-size: 12px;
    line-height: 12px;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: #c0c0c0;
    text-align: left;
    margin: 12px 0 16px 0 ;
}

.pic2-text .subtitle{
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: #000000;
    text-align: justify;
    margin: 8px 0 16px 0 ;
}

.pic2-text-inner{
    width: 400px;
    position: relative;
    display: block;
}

.pic2-text-inner:after{
    content: "";
    display: block;
    clear: both;
}

.pic2-text-inner ul{
    list-style: none;
    padding:0px;
    line-height: 20px;
}

.pic2-text-inner-1{
    position: relative;
    display: block;
    float: left;
    width: 40px;
    margin:0 16px 0 0;
}

.pic2-text-inner-2{
    position: relative;
    display: block;
    float: left;
    width: 80px;
    margin:0 24px 0 0;
}

.pic2-text-inner-1 p{
    display: inline;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.1em;
    color: #000;
    text-align: left;
}

.pic2-text-inner-2 p{
    display: inline;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 0.1em;
    color: #000;
    text-align: right;
}

.pic3-left{
    position: relative;
    display: block;
    float: left;
    width: 251px;
    height: auto;
    margin-right: 48px;
}

.pic3-right{
    position: relative;
    display: block;
    float: right;
    width: 250px;
    height: auto;
}

.pic3-pic{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 16px;
    overflow: hidden;
}


.pp-section{
    margin: 160px 0 240px 0;
}

.pp-title{
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #f55e0d;
    margin-bottom: 16px;
}

.subtitle-contact{
    font-size: 14px;
    line-height: 14px;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: #683629;
    text-align: center;
    margin: 16px 0 48px 0;
}


.section-inner-contact{
    width: 848px;
    margin: 48px auto 0 auto;
}


.section-inner-contact:after{
    content: "";
    display: block;
    clear: both;
}

.contact{
    width: 60%;
    margin: 0 auto;
}


.contact .jp{
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.05em;
    text-align: justify;
    margin-bottom: 4px;
}

.contact .en{
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.08em;
    color: rgb(150, 150, 150);
    text-align: justify;
    margin-bottom: 48px;
}


.wpcf7-form{
    width: 60%;
    display: block;
    font-size: 16px;
    margin: 0 auto;
}

.wpcf7-form p{
    margin: 24px 0;
}

.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea{
    display: block;
    width: 100%;
    font-size: 15px;
    letter-spacing: 0.05em;
    padding: 8px 0 8px 8px;
    margin: 8px 0;
}

.wpcf7-submit{
    display: block;
    width: 40%;
    height: 44px;
    line-height: 44px;
    margin: 36px auto;
    background-color: #f55e0d;
    font-size: 16px;
    color: #ffffff;
    border: 0px;
}

@media screen and (min-width: 1140px){
    header .inner{
        width: 1140px;
        margin: 0 auto;
    }

    .sitemap-inner{
        width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
    }

}

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

    header .navi{
        display: none;
    }

    .navbox{
        display: block;
    }

    .btn-toggle{
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        display: block;
        width: 40px;
        height: 40px;
        background: #fff;
        cursor: pointer;
        margin: 20px 20px 20px 0;
    }

    .btn-toggle:before{
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 23px;
        margin: auto;
        width: 50%;
        height: 3px;
        border-radius: 1.5px;
        background: #000;
        transform-origin: 0% 50%;
        transition: .3s;
    }

    .btn-toggle:after{
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 23px;
        margin: auto;
        width: 50%;
        height: 3px;
        border-radius: 1.5px;
        background: #000;
        transform-origin: 0% 50%;
        transition: .3s;
    }
    
    .nav-main{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100vw;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(15px);
        transition: .3s;
        opacity: 0;
        pointer-events: none;
    }

    .nav-main-inner{
        width: 80%;
        margin: 80px auto 0 auto;
        border-top: 1px solid #9e9e9e;
    }

    .nav-main-list{
        border-bottom: 1px solid #9e9e9e;
        margin: 0;
    }

    .nav-main-list a{
        text-decoration: none;
        padding-left: 8px;
        font-size: 16px;
        letter-spacing: 0.1em;
        line-height: 40px;
        color: black;
    }

    .nav-main-list p{
        margin: 16px auto 8px auto;
        padding-left: 8px;
        font-size: 16px;
        letter-spacing: 0.1em;
        line-height: 16px;
        color: black;
    }

    .nav-main ul{
        list-style-type: none;
        margin: 8px auto 16px auto;
        padding-left: 16px;
    }

    .nav-main ul li{
        list-style-type: none;
    }

    .nav-main ul li a{
        text-decoration: none;
        outline: none;
        font-size: 16px;
        letter-spacing: 0.1em;
        line-height: 0px;
        color: black;
    }
    
    #menu-toggle{
        display: none;
    }

    #menu-toggle:checked + .btn-toggle:before{
        transform: rotate(-27deg);
    }
    #menu-toggle:checked + .btn-toggle:after{
        transform: rotate(27deg);
    }
    #menu-toggle:checked ~ .nav-main{
        opacity: 1;
        pointer-events: auto;
    }


    .sitemap{
        width: 100%;
        height: 480px;
        background-color: #053360;
        padding: 16px 0;
        margin-top: 80px;
    }
    
    .sitemap-inner{
        width: 90vw;
    }
    
    .sitemap-left{
        position: relative;
        float: none;
        width:50%;
        height: auto;
    }

    .sitemap-right{
        position: relative;
        float: none;
        width: 100%;
        height: auto;
    }

    .sitemap-right-1{
        position: relative;
        display: block;
        float: right;
        width: 30%;
        margin:  auto 0;
        align-items: center;
    }
    
    .sitemap-right-2{
        position: relative;
        display: block;
        float: right;
        width: 35%;
        margin: auto 2.5% auto 0;
        align-items: center;
    }
    
    .sitemap-right-3{
        position: relative;
        display: block;
        float: right;
        width: 30%;
        margin: auto 2.5% auto 0;
        align-items: center;
    }


    .sitemap-left-inner,
    .sitemap-right-inner{
        width: 100%;
        height: auto;
        position: relative;
        display: block;
        margin:  36px auto;
        top:0%;
        transform: translateY(0%);
    }
    
    .sitemap-left img{
        width: 80%;
        height: auto;
        object-fit: cover;
        margin-bottom: 16px;
    }
    
    .address{
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.1em;
        color: #fff;
        margin-bottom: 12px;
    }
    
    .sitemap-left p{
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.1em;
        color: #fff;
    }
    
    .sitemap-title{
        font-size: 16px;
        letter-spacing: 0.1em;
        line-height: 30px;
        color: #fff;
        padding-left: 4px;
        margin-top: 16px;
        margin-bottom: 8px ;
    }
    
    .sitemap-list{
        list-style: none;
        padding: 8px 0 0 6px;
        margin: 0;
        border-top: 1px solid #ffffff;
    }
    
    .sitemap-list li a{
        text-decoration: none;
        outline: none;
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 0.1em;
        color: #fff;
    }

    
    .post-section{
        width: 90vw;
        border-top: 1px solid #c0c0c0;
        text-align: left;
        margin: auto;
    }
    
    #news article{
        width: 88vw;
        border-bottom: 1px solid #C0C0C0;
        margin: 0;
        padding: 32px 1vw;
    }



    .single-section{
        width: 90vw;
        margin: 120px auto;
    }

    .single-buttom{
        width: 90vw;
        height: 80px;
        margin-top: 120px;
    }

    .breadcrumb{
        width: 90vw;
        margin: 12px auto;
    }

    .breadcrumb p{
        font-size: 12px;
        padding-left: 0px;
    }

    .subtitle{
        margin: 16px 0 48px 0;
    }

    .section{
        padding: 64px 0;
    }

    .section-color{
        background-color: #fdebd84d;
        padding: 64px 0;
    }

    .section-inner,
    .section-inner-contact{
        width: 90vw;
        margin: 48px auto 0 auto;
    }


    .section-inner .center-article{
        font-size: 16px;
        line-height: 28px;
        letter-spacing: 0.1em;
        text-align: justify;
    }

    .title-about{
        font-size: 28px;
        line-height: 32px;
        font-weight: 700;
        letter-spacing: 0em;
        color: #f55e0d;
        text-align: center;
        margin: 0;
    }
    


    .about-left article{
        font-size: 16px;
        line-height: 28px;
        letter-spacing: 0.02em;
        text-align: justify;
        padding-right: 3vw;
    }
    
    

    .strong-left{
        position: relative;
        display: block;
        float: none;
        width: 90vw;
        margin-right: 0px;
        margin-bottom: 48px;
    }
    
    .strong-right{
        position: relative;
        display: block;
        float: none;
        width: 90vw;
    }

    .strong{
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .strong-pic{
        position: relative;
        display: block;
        width: 100%;
        height: 100px;
        margin: 0 auto 16px auto;
    }

    

    .sign p{
        display: block;
        font-size: 16px;
        line-height: 16px;
        letter-spacing: 0.1em;
        text-align: right;
        padding-right: 0px;
    }
    
    .sign img{
        position: relative;
        display: block;
        float: right;
        width: 180px;
        height: auto;
        object-fit: cover;
        margin-top: 32px;
    }
  

    

    .ceo-profile-right article{
        font-size: 16px;
        line-height: 28px;
        letter-spacing: 0.05em;
        text-align: justify;
        padding-left: 3vw;
    }


    .section-inner .philosophy-title{
        line-height: 30px;
    }

    .section-color .section-inner .pic2-left{
        position: relative;
        display: block;
        float: left;
        width: 48%;
        height: auto;
        margin-right: 4%;
        margin-bottom: 24px;
    }

    .section-color .section-inner .pic2-right{
        position: relative;
        display: block;
        float: right;
        width: 48%;
        height: auto;
        margin-right: 0px;
        margin-bottom: 24px;
    }

    .history-pic{
        width: 90vw;
        height: auto;
        position: relative;
        display: block;
        margin: 0 auto;
        overflow: hidden;
    }

    .section-inner iframe{
        width: 90vw;
    }

    .map{
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        padding-bottom:0px;
    }


    .pic2-left,
    .pic2-right,
    .pic3-left,
    .pic3-right{
        position: relative;
        display: block;
        float: none;
        width: 90vw;
        height: auto;
        margin: 0 0 48px 0;
    }
    
    .pic2-pic,
    .text-left,
    .pic3-pic,
    .pic4-left,
    .pic4-right{
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        margin: 0 0 16px 0;
    }
    
    .pic-text{
        font-size: 16px;
        letter-spacing: 0.1em;
        line-height: 16px;
        color: #000;
    }
    
    .pic2-text{
        position: relative;
        display: block;
        align-items: center;
        float: right;
        width: 90vw;
        height: auto;
    }
    
    .pic2-text .title{
        font-size: 24px;
        line-height: 32px;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: #000;
        text-align: left;
        margin: 0 0 0 8px;
    }
    
    .pic2-text .title-en{
        font-size: 12px;
        line-height: 12px;
        font-weight: 300;
        letter-spacing: 0.1em;
        color: #c0c0c0;
        text-align: left;
        margin: 12px 0 16px 8px ;
    }
    
    .pic2-text .subtitle{
        font-size: 14px;
        line-height: 20px;
        font-weight: 300;
        letter-spacing: 0.1em;
        color: #000000;
        text-align: justify;
        margin: 8px 0 16px 8px;
    }
    
    .pic2-text-inner{
        width: 85vw;
        position: relative;
        display: block;
        margin-left: 8px;
    }

    .pic2-text-inner ul{
        list-style: none;
        padding:0px;
        line-height: 20px;
    }
    
    .pic2-text-inner-1{
        position: relative;
        display: block;
        float: left;
        width: 40px;
        margin:0 16px 0 0;
    }
    
    .pic2-text-inner-2{
        position: relative;
        display: block;
        float: left;
        width: 40px;
        margin:0 54px 0 0;
    }

    .pp-section{
        margin: 160px 0 160px 0;
    }
    
}

@media screen and (min-width: 700px) and (max-width: 890px){

    .corporate-profile-left{
        position: relative;
        display: block;
        float: left;
        width: 60%;
        height: auto;
        margin-bottom: 24px;
    }

    .corporate-profile-left div{
        padding-right: 0px;
    }

    .corporate-profile-left ul li{
        display: flex;
        padding: 12px 0;
    }
    
    .corporate-title{
        font-size: 14px;
        line-height: 24px;
        font-weight: 700;
        text-align: justify;
        text-align-last: justify;
        color: #f55e0d;
        width: 22%;
        padding-left: 0px;
        margin-right: 16px;
    }
    
    .corporate-text{
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 0.1em;
        color: #000;
    }
    
    .corporate-profile-right{
        position: relative;
        display: block;
        float: right;
        width: 40%;
        height: auto;
        overflow: hidden;
    }

    .corporate-profile-pic{
        width: 100%;
        height: auto;
    }

}

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

    .sitemap{
        width: 100%;
        height: 950px;
        background-color: #053360;
        padding: 16px 0;
        margin-top: 80px;
    }

    .sitemap-left{
        position: relative;
        float: none;
        width:100%;
        height: auto;
    }
    
    .sitemap-right{
        display: none;
    }

    .sitemap-right-res{
        position: relative;
        display: block;
        width: 90vw;
        height: auto;
        margin: 48px auto;
    }

    #news article{
        padding: 24px 1vw;
    }

    .post-date{
        display: inline-block;
        font-size: 14px;
        letter-spacing: 0.1em;
        margin: 0 16px 0 8px;
    }
    
    .post-category{
        display: inline-block;
        font-size: 12px;
        letter-spacing: 0.1em;
        line-height: 24px;
        color: #fff;
        height: 24px;
        background-color: #f55e0d;
        padding: 0 12px;
    }
    
    .post-title{
        display: block;
        font-size: 16px;
        letter-spacing: 0.1em;
        margin: 8px 0 0 8px;
    }

    .about-left{
        position: relative;
        display: flex;
        align-items: center;
        float: none;
        width: 90vw;
        height: 308px;
        overflow: hidden;
        margin-bottom: 24px;
    }

    .about-left article{
        font-size: 16px;
        line-height: 28px;
        letter-spacing: 0.05em;
        text-align: justify;
        padding-right: 0px;
    }
    
    .about-right{
        display: none;
    }

    .about-pic{
        position: relative;
        display: block;
        width: 100%;
        height: auto;
    }

    .duty-pic{
        display: none;
    }

    .duty-pic-res{
        position: relative;
        display: block;
        width: 100%;
        height: auto;
    }

    .contact-left,
    .contact-right{
        position: relative;
        display: block;
        float: none;
        width: 90vw;
        height: auto;
        overflow: hidden;
        margin-bottom: 24px;
    }

    .corporate-profile-left{
        position: relative;
        display: block;
        float: none;
        width: 90vw;
        height: auto;
        margin-bottom: 24px;
    }

    .corporate-profile-left div{
        padding-right: 0px;
    }

    .corporate-profile-left ul li{
        display: flex;
        padding: 16px 0;
    }
    
    .corporate-title{
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        text-align: justify;
        text-align-last: justify;
        color: #f55e0d;
        width: 25%;
        padding-left: 0px;
        margin-right: 32px;
    }
    
    .corporate-text{
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.1em;
        color: #000;
    }
    
    .corporate-profile-right{
        position: relative;
        display: block;
        float: none;
        width: 90vw;
        height: auto;
        overflow: hidden;
    }

    .corporate-profile-pic{
        width: 100%;
        height: auto;
    }

    .corporate-profile-right p{
        text-align: left;
        margin-bottom: 24px;
    }

    .history-pic{
        display: none;
    }

    .pic-res{
        position: relative;
        display: block;
        width: 90vw;
        height: auto;
    }


    .ceo-profile-left{
        position: relative;
        display: block;
        float: none;
        width: 90vw;
        height: auto;
        margin-bottom: 64px;
    }

    .ceo-profile-pic{
        display: none;
    }
    
    .ceo-profile-pic-res{
        position: relative;
        display: block;
        width: 90vw;
        height: auto;
    }

    .ceo-name{
        font-size: 16px;
        line-height: 16px;
        letter-spacing: 0.1em;
        margin: 12px 0 ;
    }

    .ceo-profile-right{
        position: relative;
        display: block;
        align-items: center;
        float: none;
        width: 90vw;
        height: auto;
    }

    .ceo-profile-right article{
        padding-left: 0px;
    }


    .section-color .section-inner .pic2-left,
    .section-color .section-inner .pic2-right{
        position: relative;
        display: block;
        float: none;
        width: 90vw;
        height: auto;
        margin-right: 0px;
        margin-bottom: 24px;
    }

    .contact{
        width: 80%;
        margin: 0 auto;
    }


    .wpcf7-form{
        width: 80%;
        display: block;
        font-size: 16px;
        margin: 0 auto;
    }
    

}

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

   .corporate-profile-left ul li{
        display: block;
        padding: 12px 0;
    }

    .corporate-title{
        width: auto;
        text-align: left;
        text-align-last: left;
        letter-spacing: 0.2em;
    }
    
}