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

*{margin:0;padding:0;box-sizing: border-box;}
html {scroll-behavior: smooth;font-size: 62.5%;}
body {
    position: relative;
    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: 0.1em;
    overflow-wrap: break-word;
    word-break: normal;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	color:#333;
}
ol, ul {list-style: none;}
a{text-decoration: none;color:#333;}
a:hover {opacity: 0.7 ;}

img{width:100%;}

.c-txt{
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
.bg_w{
    background-color: #fff;
}
.bg_g{
    background-color: #F6F6F6;
}
.bg_b{
    background-color: #073E7C;
    background: linear-gradient(#073E7C, #1B2836);
}

.pc{display: block;}
.sp{display: none;}

@media screen and (max-width: 769px) {
    .pc{display: none;}
    .sp{display: block;}
}

/*-----------
    header
-------------*/
.header {
    position: relative;
    width: 100%;
    min-width: 769px;
    height: 7rem;
    background: #fff;
    -webkit-box-shadow: 0 5px 10px transparent;
    box-shadow: 0 5px 10px transparent;
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
    -webkit-transition-property: height, -webkit-box-shadow;
    transition-property: height, -webkit-box-shadow;
    transition-property: height, box-shadow;
    transition-property: height, box-shadow, -webkit-box-shadow;
    z-index: 100000;
}
.header__inner {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    -ms-flex-align: start;
    justify-content: space-between;
    align-items: flex-start;
    -webkit-box-align: start;
    -webkit-box-pack: justify;
}
.header__logo--sub {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: none;
    /*visibility: hidden;*/
    height: 5rem;
    width: 25rem;
    padding: 1rem;
    background: url(../images/logo_b.png) no-repeat;
    margin: .5rem;
    background-size: contain;

}
.header__logo {
    position: relative;
}
.header__logo--main {
    position: relative;
    z-index: 1;
    visibility: visible;
    opacity: 1;
    transition: all .2s ease-in;
    width: 23rem;
    padding: 2rem 5rem;
    background: url(../images/logoarea.png) no-repeat #003978;
    background-size: 70%;
    background-position: center;
}
.header__logo--main {
    height: 11.07692em;
}
.fixed {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.95;
    padding: 0;
    box-shadow: 0px 1px 10px #ccc;
}
/*.fixed .header__logo--main {
    background: url(../images/logo_w.png) no-repeat;
    width: 290px;
    margin: .5rem;
}
    */

.fixed .header__logo--main{
    display: none;
}
.fixed .header__logo--sub{
    display: block!important;
}

header .header__logo--main a ,.fixed .header__logo--sub a {
    display: block;
    height: 100%;
}

.header__nav {
    display: flex;
}
.header__nav ul {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    justify-content: center;
}
.header__nav ul li{
    width: calc(100% / 4);
    min-width: 15rem;
    text-align: center;
    position: relative;
    padding: 1rem;
}
.header__nav ul li:before{
    background: #003978;
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: auto;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
}
.header__nav ul li:hover{
    letter-spacing: 0.5em;
}
.header__nav ul li:hover:before {
    transform-origin: center top;
    transform: scale(1, 1);
}

.header__contact a{
    background-color: #003978;
    width: 7rem;
    height: 7rem;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 2rem;
}


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

    .header{
        min-width: 100%;
    }
    .header__nav{display: none;}
    .header__logo--main{
        width: 17rem;
        height: 120px;
    }
    .header__logo--sub{
        background-size: contain;
        width: ;
    }

    nav.globalnaviSp {
        position: fixed;
        z-index: 2;
        top: 0;
        left: 0;
        background: #fff;
        color: #000;
        text-align: center;
        transform: translateY(-100%);
        transition: all 0.6s;
        width: 100%;
    }
    nav.globalnaviSp img {
        width: 60%;
        margin: 10%;
        max-width: 200px;
    }
    nav.globalnaviSp ul {
        background: #f1f1f1;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: 100vh;
        padding: 5rem;
    }
    nav.globalnaviSp ul li {
        font-size: 1.1em;
        list-style-type: none;
        padding: 0;
        width: 100%;
        border-bottom: 1px dotted #333;
    }
    nav.globalnaviSp ul li:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
    nav.globalnaviSp ul li a {
        display: block;
        color: #000;
        padding: 1em 0;
    }
    nav.globalnaviSp.active {
        transform: translateY(0%);
    }
    
    .navToggle {
        display: block;
        position: absolute;
        right: 12px;
        top: 3px;
        width: 40px;
        height: 60px;
        cursor: pointer;
        /*z-index: 99999999;*/
        /* background: #666; */
        text-align: center;
    }
    .navToggle span {
        display: block;
        position: absolute;    /* .navToggleに対して */
        width: 80%;
        border-bottom: solid 3px #003978;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
        left: 6px;
    }
    .navToggle span:nth-child(1) {
        top: 9px;
    }
    .navToggle span:nth-child(2) {
        top: 18px;
    }
    .navToggle span:nth-child(3) {
        top: 27px;
    }
    .navToggle span:nth-child(4) {
        border: none;
        font-size: 8px;
        font-weight: bold;
        top: 34px;
    }
    
    .navToggle.active span:nth-child(1) {
        top: 18px;
        left: 6px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .navToggle.active span:nth-child(2),
    .navToggle.active span:nth-child(3) {
        top: 18px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
}

/*-----------
    main
-------------*/
.content{
    position: relative;
}
#slider {
    width: 100%;
    height: 100vh;
}

.tagline{
    position: absolute;
    color: #fff;
    top: 50%;
    left: 5rem;
    width: 60vw;
    transform: translateY(-50%);
}

.tagline h2{
    margin: 0 0 5rem;
    font-size: 3.5rem;
}
.tagline h2 p{
    text-shadow: 1px 1px 1px #000;
}

.tagline h3{
    font-size: 1.6rem;
    text-shadow: 1px 1px 1px #000;
}

.content_inner{
    margin: 0 auto;
    max-width: 1024px;
}
h2.main-ttl{
    position: relative;
    line-height: 1.4;
}
h2.main-ttl::before {
    content: "";
    position: absolute;
    top: 33%;
    left: -6.5%;
    width: 5rem;
    height: 1px;
    background-color: #E2BE63;
    transition: all .4s ease-in-out;
}
h2.main-ttl span.ft_en{
    color:#E2BE63;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 5rem;
    position: relative;
}
h2.main-ttl span.ft_jp{
    font-size: 2.5rem;
}

.intro-copy{
    position: relative;
    text-align: center;
    padding: 10rem;
    z-index: 100;
    box-shadow: 0px 10px 20px -20px rgba(0,0,0,0.5);
}
.intro-copy h2{
    font-size: 4rem;
    line-height: 1.5;
}
.intro-copy p{
    font-size: 1.8rem;
    margin: 5rem 0 0;
}
.t_service{
    position: relative;
    top: -5rem;
    width: 100%;
}
.t_service-inner , .t_achievement{
    padding: 10rem 5rem 0 5rem;
}

.t_service-inner-txt{
    display: flex;
    justify-content: space-between;
    padding-bottom: 5rem;
}
a.more {
    display: inline-block;
    border-radius: 10px;
    position: relative;
    padding:0 0 0 15px;
    line-height: 50px;
    text-decoration: none;
    outline: none;
    z-index: 0;
}
a.more:before{
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
    width: 50px;
    height: 50px;
    background: #ccc;
    border-radius: 25px;
    transition: .3s ease-out;
}
a.more:hover::before{
    width:130%;
}
a.more:after{
    position: absolute;
    content: '';
    top: 1.6em;
    right: -15px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}
.t_service-inner-txt p{
    margin: 3rem 0 0;
}
.t_service_list{
    display: flex;
    flex-wrap: wrap;
}

.t_service_list h3{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    margin-left: -6px;
    bottom: 10%;
    color: #fff;
    left: 2rem;
    font-size: 2rem;
    text-shadow: 0px 0px 15px #000;
    width: 80%;
}
.t_service_list li{
    width: calc(100% / 4);
    margin-bottom: -5rem;
    cursor: pointer;
    max-width: 550px;
    overflow: hidden;
}
.t_service_list li img{
    height: auto;
    transition: transform .6s ease;
}
.t_service_list li img:hover{
    transform: scale(1.1);
    box-shadow: 0 1px 10px #d4d4d4;
}
.sec-strength {
    display: block;
    position: relative;
    background: url(../images/t_image/innerimage1.png) 0 0 no-repeat;
    background-size: auto;
    background-size: cover;
    overflow: hidden;
    font-size: 1.8em;
    font-weight: bold;
}
.sec-strength h3{
    text-align: center;
    font-size: 4rem;
    font-weight: 100;
    margin: 3rem;
}
.sec-strength_inner{
    margin-bottom: 30%;
}
.sec-strength_inner_box{
    display: flex;
    flex-wrap: wrap;
    max-width: 80%;
    margin: auto;
    justify-content: center;
}
.sec-strength_inner_box > div{
    width: calc(94% / 3);
    padding: 3rem;
    background-color: #fff;
    margin: 1rem;
    box-shadow: 0px 3px 5px #d9d9d9;
    text-align: center;
}
.sec-strength_inner_box > div img{
    max-height: 100px;
}
.sec-strength_inner_box > div:nth-child(3n){
    margin: 1rem 0 1rem 1rem;
}
.sec-strength_inner_box > div p{
    font-size: 1.8rem;
}
.t_about{
    margin-bottom: -25rem;
}
.t_about-inner{
    padding: 10rem 5rem 0 5rem;
    margin-right: 10rem;
    position: relative;
    top: -25rem;
    color: #fff;
    min-width: 1150px;
}
.t_about-inner_box{
    display: flex;
    flex-wrap: wrap;
}
.t_about-inner_box div:nth-child(2){
    width: 70%;
    position: relative;
    top: -10rem;
}
.t_about-inner-txt h4{
    font-size: 2.5rem;
    margin: 5rem 0;
}
.t_about-inner-txt a.more{
    color: #fff;
    top: 3rem;
}
.t_about-inner-txt a.more:after{
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}
.t_about-inner-txt a.more:hover{
    color: #333;
}
.t_about-inner-txt a.more:hover:after{
    border-top: 1px solid #333;
    border-right: 1px solid #333;
}

.t-achievement{
    padding: 10rem 5rem 0 5rem;
}
.t_achievement-inner .regular .sliderItem{
    padding: 2rem;
}
.sliderItem h3{
    font-size: 1.8rem;
    margin: .5rem 0;
}
.slick-prev:before{
    display: block;
    width: 15px;
    height: 15px;
    border: 2px solid #E2BE63;
    position: absolute;
    transform: rotate(45deg);
    border-width: 0 0 2px 2px;
}

.slick-next:before{
    display: block;
    width: 15px;
    height: 15px;
    border: 2px solid #E2BE63;
    border-width: 2px 2px 0 0;
    position: absolute;
    transform: rotate(45deg);
}
.t_achievement_link{
    text-align: center;
    margin: 5rem 0 10rem;
}

.t_contact{
    padding: 7rem 0 0;
}
.contact_inner_box{
    background-color: #Fff;
    border-radius: 2rem 0 0 2rem;
    margin-left: 10rem;
    padding: 10rem;
    display: flex;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 10px #333;
}
.contact_inner_box h3{
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 4rem;
    line-height: 1.2;
}
.contact_inner_box h3 span{
    font-size: 1.6rem;
}
.contact_inner_box > div{
    text-align: center;
    margin: auto;
}

.btn {
    display: inline-block;
    padding: .75em 5em .75em 5em;
    color: #333;
    text-decoration: none;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3em;
    position: relative;
    transition: all ease .3s;
    box-shadow: 0 5px 10px #d4d4d4;
    margin-top: 2rem;
    font-size: 1.8rem;
}
.btn::before {
    display: block;
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    height: 2em;
    background: #fff;
    border-radius: 50%;
    content: "";
    border: 1px solid #E2BE63;
}
.btn::after { display: block; position: absolute; top: 50%; right: 1.8em; transform: translateY(-50%) rotate(45deg); width: .4em; height: .4em; border-top: 2px solid #E2BE63; border-right: 2px solid #E2BE63; content: ""; animation: move-arrow 1.5s linear infinite;}
.btn:hover { color: #fff; background: #000;}

@keyframes move-arrow {
  0% { right: 3em; opacity: 0;}
  30% { opacity: 1;}
  60% { opacity: 1;}
  100% { right: 1em; opacity: 0;}
}

.scroll-infinity{
    position: relative;
    top: -10px;
}

@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
    }
    .scroll-infinity__wrap {
      display: flex;
      overflow: hidden;
    }
    .scroll-infinity__list {
      display: flex;
      list-style: none;
      padding: 0
    }
    .scroll-infinity__list--left {
      animation: infinity-scroll-left 80s infinite linear 0.5s both;
    }
    .scroll-infinity__item {
      width: calc(100vw / 4);
    }
    .scroll-infinity__item > img {
      width: 100%;
    }


@media screen and (max-width: 769px) {
    .tagline{
        left: 2rem;
        width: 85vw;
    }
    .intro-copy{
        padding: 3rem 1rem;
        text-align: left;
    }
    .intro-copy h2 {
        font-size: 2.5rem;
    }
    .intro-copy p {
        font-size: 1.5rem;
    }
    h2.main-ttl::before{
        left: -20%;
    }
    h2.main-ttl span.ft_en{
        font-size: 4rem;
    }
    .t_service-inner-txt {
        display: block;
    }
    .t_service-inner, .t_achievement ,.t_about-inner{
        padding: 25% 10% 10% 10%;
    }
    .sec-strength_inner_box > div{
        width: 100%;
    }
    .t_service_list li{
        width: calc(100% / 2);
    }
    .t_service_list h3{
        bottom: 20%;
        font-size: 3.8vw;
    }
    .t_about{margin-bottom:0;}
    .t_about-inner{min-width: 100%;top: 0;}
    .t_about-inner_box div:nth-child(2){
        order: 1;
        width: 100%;
        top: 2rem;
    }
    .t_about-inner_box div:nth-child(1){
        order: 2;
    }

    a.more{
        margin: 5rem 0 0 ;
    }
    .t_about-inner-txt a.more{
        top: -10%;
    }
    .t_achievement-inner .regular .sliderItem {
        padding: 1rem;
    }
    .t_achievement_link{
        margin: 0;
    }
    .contact_inner_box{
        margin-left:10% ;
        display: block;
        padding: 3rem;
    }
    .contact_inner_box h3{
        text-align: center;
    }
    .contact_inner_box > div{
        margin: 10% 0 0;
    }
    .btn{
        padding: 5% 15%;
        font-size: 1.4rem;
    }
    .content_inner{
        margin: 2rem;
    }
}

/*-----------
    footer
-------------*/
footer{
    background-color: #fff;
    margin: auto;
}
.footer_inner{
    display: flex;
    flex-wrap: wrap;
    margin: 0 10%;
    padding: 3% 0;
    border-bottom: 1px solid #003978;
}
.ft-left {
    margin-right: auto;
    text-align: left;
}
.ft-left img{
    width: 60%;
    max-width: 250px;
}
.ft-left h2{
    font-size: 2rem;
    margin-bottom: 2rem;
}
.ft_right ul {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 5rem 0px;
}
.ft_right ul li {
    padding: 0 10px;
    text-align: center;
}
.ft_right ul li {
    display: inline-block;
    color: #fff;
    position: relative;
}
.ft_bottom{
    display: flex;
    justify-content: flex-end;
    margin: 0 10%;
    padding: 1rem 0;
    font-size: 1rem;
}
.ft_bottom ul{
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.ft_bottom ul li{
    margin:0  1rem;
}

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

    .footer_inner{
        padding: 20% 0 0;
    }
    .ft-left{
        text-align: center;
        margin: 0;
        width: 100%;
    }
    .ft_right ul{
        margin: 3rem 0;
    }
    .ft_right ul li{
        width: 100%;
        text-align: center;
        font-size: 1.5rem;
        padding: .5rem;
    }
    .ft_bottom{
        display: block;
    }
    .ft_bottom small{
        text-align: center;
        display: block;
    }
}

/* pagetop */
#page_top {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 2%;
    bottom: 5%;
    background: #003978;
    opacity: 0.95;
    border-radius: 50%;
    z-index: 10;
}
#page_top a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
}
#page_top a::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    position: absolute;
    top: 50%;
    left: 38%;
    margin-top: -4px;
    transform: rotate(-45deg);
}

/* 下層共通 */
.breadcrumb{
    position: relative;
    z-index: 999999;
    margin-left: 230px;
}
.breadcrumb ul {
    background-color: #D2DDE9;
    height: 2rem;
    display: flex;
    justify-content: flex-end;
    font-size: 0.8rem;
    align-items: center;
}
.breadcrumb ul li::after{
    content: ">";
    padding: 1rem;
}
.breadcrumb ul li:last-of-type:after{
    content: "";
}
.t_ttl {
    position: relative;
    max-height: 45vw;
    min-height: 25vw;
}
    
.t_ttl h2 {
    position: absolute;
    top: 50%;
    left: 20rem;
    font-family: "Poppins", sans-serif;
    font-size: 4.3rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    text-shadow: 0px 4px 3px #fff;
}
.t_ttl:before{
    content: "";
    position: absolute;
    background: url(../images/ttl_bk.png) 0 0 / 35% no-repeat;
    top: 0;
    left: 0;
    z-index: -1;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.t_ttl h2 span{
    font-size: 50%;
}

.t_ttl img{
    width: 70%;
    display: block;
    margin-left: auto;
}


@media screen and (max-width: 769px) {
    .breadcrumb{
        margin-left: 17rem;
    }
    .t_ttl {
        background-size: 19rem 55rem;
        height: 15rem;
    }
    .t_ttl h2{
        left: 3rem;
        font-size: 7vw;
        line-height: .8;
    }
}
@media screen and (max-width: 499px) {
    .breadcrumb{
        z-index: 1;
    }
}

/*-----------
    ABOUT
-------------*/
.aboutus_inner_Philosophy{
    text-align: center;
    font-size: 2rem;
}
#aboutus h3{
    font-size: 3.5rem;
    margin: 3rem;
    text-align: center;
}
.aboutus_inner_vision{
    margin: 6rem auto;
    padding-bottom: 10rem;
}
.aboutus_inner_vision_txt{
    margin: 2rem auto;
    background-color: #fff;
    max-width: 800px;
    font-size: 1.6rem;
    box-shadow: 0 5px 10px #ccc;
    padding: 5rem;
    font-weight: normal;
}
.aboutus_inner_vision_txt h4{
    font-size: 2.5rem;
    background-image: linear-gradient(90deg, #E2BE63 0 2px);
    background-repeat: no-repeat;
    background-size: 10% 2px;
    background-position: left bottom;
    margin: 0 0 3rem;
}
.aboutus_inner_vision_txt p{
    margin: 1rem 0;
}

.aboutus_inner_prof-list{
    padding: 2%;
    background-color: #fff;
    margin: 0 auto;
}
.aboutus_inner_prof-list li {
    display: flex;
    padding: 3%;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}
.aboutus_inner_prof-list  li span {
    display: block;
    width: 25%;
    margin: 0;
}
.aboutus_inner_map{
    position: relative;
    display: flex;
    margin: 5% 0 10%;
}
.aboutus_inner_map-add {
    width: 50%;
    padding: 0 2%;
    text-align: center;
}
.aboutus_inner_map-add h4{
    font-size: 2rem;
}
.gmap {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}
.aboutus_inner_info{
    padding: 7rem 0;
}
.aboutus_inner_info-list li {
    display: flex;
    padding: 2%;
    border-bottom: 1px solid #999;
    text-align: left;
}
.aboutus_inner_info-list li span {
    display: block;
    width: 25%;
    margin: 0;
}
.aboutus_inner_info-list li div {
    width: calc(100% - 10em);
}

@media screen and (max-width: 769px) {
    .aboutus_inner_vision_txt {
        margin: 2rem;
    }
}
@media screen and (max-width: 499px) {
    .aboutus_inner_Philosophy {
        text-align: left;
        font-size: 1.7rem;
    }
    .aboutus_inner_map{
        flex-wrap: wrap;
    }
    .aboutus_inner_map-add{
        width: 100%;
        padding: 2%;
    }
}

/*-----------
    SERVICE
-------------*/
.service_inner_top{
    text-align: center;
    font-size: 2rem;
}
.service_inner_top h3 {
    font-size: 3.5rem;
    margin: 3rem;
    text-align: center;
}
.service_inner_list ul{
    display: flex;
    margin: 10rem 0;
}
.service_inner_list ul li{
    margin-right: 1rem;
}
.service_inner_list ul li:last-child{
    margin: 0;
}
.service_inner_list ul li h4{
    position: relative;
    top: -50px;
    margin: 0rem 2rem;
    font-size: 2rem;
    color: #fff;
    text-shadow: 2px 3px 5px #222;
}
h3.service_inner-ttl {
    position: relative;
    line-height: 1.4;
    text-align: center;
}
h3.service_inner-ttl span.ft_en {
    color: #e2be63;
    font-family: Poppins, sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 4rem;
    position: relative;
}
h3.service_inner-ttl span.ft_jp {
    font-size: 1.5rem;
}
.service_inner_featureList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 5rem 0;
}
.service_inner_featureList div{
    width: calc(98% / 3);
    text-align: center;
    margin: 0 1rem 2rem 0;
}
.service_inner_featureList div:nth-child(3n){
    margin: 0 0 2rem 0;
}
.service_inner_flow{
    margin: 5rem auto;
}
.service_inner_flowlist div.service_inner_flowlist_inner{
    display: flex;
    margin: 10rem 0;
}
.service_inner_flowlist div.service_inner_flowlist_inner img{
    width: 48%;
}
.service_inner_flowlist div.service_inner_flowlist_inner div{
    margin: 2rem;
}
.service_inner_flowlist div.service_inner_flowlist_inner div h4{
    font-size: 2.2rem;
    position: relative;
}
.service_inner_flowlist_inner div h4:before{
    position: absolute;
    top: -80px;
    font-size: 8rem;
    color: #f1f1f1;
    z-index: -1;
    font-family: Poppins, sans-serif;
    font-weight: 100;
    font-style: normal;
}
.service_inner_flowlist_inner div h4.fl1:before{
    content: "01";
}
.service_inner_flowlist_inner div h4.fl2:before{
    content: "02";
}
.service_inner_flowlist_inner div h4.fl3:before{
    content: "03";
}
.service_inner_flowlist_inner div h4.fl4:before{
    content: "04";
}
.service_inner_flowlist_inner div h4.fl5:before{
    content: "05";
}
.service_inner_flowlist_inner div h4.fl6:before{
    content: "06";
}

.service_inner_flowlist div.service_inner_flowlist_inner div p{
    font-size: 1.6rem;
    margin: 2rem;
}

@media screen and (max-width: 769px) {
    .service_inner_top h3 {
        font-size: 6vw;
        margin: 3rem 0;
    }
    .service_inner_list ul li h4{
        font-size: 2vw;
    }
    .service_inner_featureList div {
        width: calc(96% / 3);
    }
}

@media screen and (max-width: 499px) {
    .service_inner_list ul {
        margin: 5rem 2rem;
        flex-wrap: wrap;
    }
    .service_inner_list ul li h4{
        font-size: 5vw;
    }
    .service_inner_list ul li {
        margin-right: 0;
        width: 100%;
    }
    .service_inner_featureList div {
        width: 100%;
    }
    .service_inner_flowlist div.service_inner_flowlist_inner{
        flex-wrap: wrap;
        margin: 5rem 0;
    }
    .service_inner_flowlist div.service_inner_flowlist_inner img{
        order: 1;
        width: 100%;
    }
    .service_inner_flowlist div.service_inner_flowlist_inner div{
        z-index: 1;
        order: 2;
    }
}


/*-----------
    WORK
-------------*/
.works_inner{
    margin: 5rem auto;
    max-width: 1200px;
}
.works_inner h2 ,.work-list h2{
    font-size: 2.8rem;
    position: relative;
    margin-left: 10rem;
}
.works_inner h2:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 80px;
    height: 2px;
    background-color: #003978;
    margin-left: 2rem;
}

.works_inner_photo{
    display: flex;
    justify-content: end;
}
.works_inner_photo img{
    max-width: 450px;
    height: 100%;
    margin: 2rem 0 2rem 2rem;
}
.work-list{
    padding: 5rem 0;
    margin: 5rem auto 0;
    max-width: 1200px;
}
.work-list ul{
    margin-left: 25rem;
}   
.work-list ul li{
    padding: 3%;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

@media screen and (max-width: 769px) {
    .works_inner {
        margin: 5rem 2rem;
    }
    .works_inner_photo{
        flex-wrap: wrap;
    }
    .works_inner_photo img {
        max-width: 100%;
        width: 40%;
    }
    .work-list {
        margin: 5rem 5rem 0;
    }
}
@media screen and (max-width: 499px) {
    .work-list h2, .works_inner h2{
        font-size: 2rem;
        margin-left:0;
    }
    .work-list ul{
        margin-left: 0;
        margin-top: 3rem;
    }
}

/*-----------
    Recruit
-------------*/
#recruit .sec_intro{
    max-width: 1000px;
    font-size: 2rem;
    text-align: center;
    margin: 5rem auto;
}

/*-----------
    Contact
-------------*/
#contact .sec_intro {
    max-width: 1000px;
    margin: auto;
    text-align: center;
    font-size: 1.5rem;
}
#contact .sec-innertext{
    margin: 5rem 0px;
}

/*-----------
    SITEMAP
-------------*/
#sitemap .content_inner ul{
    margin: 0 0 5rem;
}
#sitemap .content_inner ul li{
    font-size: 2rem;
    padding: 2rem 5rem;
    border-bottom: 1px solid #ccc;
}
/*-----------
    POLICY
-------------*/
.policy_inner{
    margin-bottom: 5rem;
}
.policy_inner h3{
    font-size: 2.2rem;
    line-height: 1.3;
    letter-spacing: .14em;
    margin-bottom: .5em;
    border-left: 5px solid #E2BE63;
    padding-left: 2rem;
}

.policy_inner ul{
    margin: 2rem;
}
.policy_inner ul li{
    list-style-type: circle;
    margin: 0 0 .5rem 2rem;
}
@media screen and (max-width: 769px) {
    .policy_inner h3{
        font-size: 5vw;
    }
    .policy_inner ul li{
        margin: 0 0 .5rem 1rem;
    }

}

@media screen and (max-width: 769px) {
    .sec_intro{
        margin: 0 2rem;
    }
}


/*--------------------
    Animation
---------------------*/
.scr {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
}

.scr_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}
.scr_up.on {
    transform: translateY(0);
    opacity: 1.0;
}
.scr_l {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scr_l.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}
.scr_up:nth-child(2) {transition-delay: .4s;}
.scr_up:nth-child(3) {transition-delay: .8s;}
.scr_up:nth-child(4) {transition-delay: 1.2s;}
.scr_up:nth-child(5) {transition-delay: 1.4s;}


.scr_r {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scr_r.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

.slide-in_l {
    animation: slide-in_l 1.3s ease-out;
  }
  
  @keyframes slide-in_l {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
.slide-in_r {
    animation: slide-in_r 1s ease-out;
  }
  
  @keyframes slide-in_r {
    0% {
      transform: translateX(100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
.slide-in_t {
    animation: slide-in_t 1.3s ease-out;
  }
  
  @keyframes slide-in_t {
    0% {
      transform: translateY(-20%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }