body, p, ul, h1, h2, h3{
    margin: 0;
    padding: 0;
}
body{
    max-width: 100%;
}
@media screen and (min-width:768px){
    .sp {
      display: none;
    }
  }
 @media screen and (max-width:767px){
    .pc {
      display: none;
    }
  }

  @media screen and (max-width:1000px){
    .middle {
      display: none;
    }
  }

/*==============TOP CONTENTS================*/ 

/* SP TOP MENU */
.top_menu {
    position: fixed;
    z-index: 3;
    right: 25px;
    top: 30px;
}
.nav_toggle {
    display: block;
    position: relative;
    width: 1.75rem;
    height: 1.5rem;
    z-index: 5;
}
.nav_toggle i {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    transition: transform .5s, opacity .5s;
}
.nav_toggle i:nth-child(1) {
    top: 0;
}
.nav_toggle i:nth-child(2) {
    top: 0;
    bottom: 0;
    margin: auto;
}

.nav_toggle.show i:nth-child(1) {
    transform: translateY(5px) rotate(-30deg);
}
.nav_toggle.show i:nth-child(2) {
    transform: translateY(-6px) rotate(30deg);
}
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*padding: 8rem 0;*/
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s, visibility .5s;
}

.nav.show {
    opacity: 1;
    visibility: visible;
    z-index: 3;
    transition: opacity .5s, visibility .5s;
}

.nav_container{
    background: #fff;
    height: 100%;
}

.nav_logoimg {
    margin: auto;
    width: 121px;
    padding-top: 114px;
}

.top_menu .nav img {
    width: 100%;
}
.top_menu .nav .nav_menu_ul {
    text-align: center;
    margin-top: 128px;
}

.top_menu .nav .nav_menu_ul li{
    list-style: none;
    text-decoration: none;
    color: #000;
    margin-bottom: 40px;
}
.top_menu .nav .nav_menu_ul li a{
    text-decoration: none;
    color: #000;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
}


/* TOP CONTENTS STYLE*/
.top_container_scroll {
    z-index: 1;
    position: fixed;
    width: 100%;
}

.top_container_scroll .scroll_header .top_gnav{
    position: absolute;
    right: 20px;
}

.top_container_scroll .scroll_header .top_gnav ul{
    display: -webkit-flex;
    display: flex;
    list-style: none;
    font-size: 15px;
}

.top_container_scroll .scroll_header{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    padding: 20px;
}

.top_container {
    margin: 0;
    background: url(img/main_bg.jpg) no-repeat top center;
    background-size: cover;
    z-index: 2;
    position: relative;
    padding: 0 20px 117px;
}

.top_container_under{
    max-width: 960px;
    margin: auto;
}

.top_container_under .top_header{
    display: -webkit-flex;
    display: flex;
    padding: 74px 0 85px 0;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.top_header .top_logo_img{
    width: 165px;
    margin-right: 30px;
}

.scroll_header .top_logo_img{
    width: 100px;
    margin-right: 30px;
}

.top_header .top_logo_img img, .scroll_header .top_logo_img img{
    width: 100%;
}

.top_container .top_gnav ul{
    display: -webkit-flex;
    display: flex;
    list-style: none;
    font-size: 20px;
}

.top_gnav ul li{
    margin-right: 35px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}
.top_gnav ul li a{
    text-decoration: none;
    color: #000000;
}

.top_catchphrase{
    margin-bottom: 30px;
}

/* .top_catchphrase p:first-child{
    font-size: 38px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    margin-bottom: 11px;
} */
.top_catchphrase h1{
    font-size: 38px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    margin-bottom: 11px;
}
/* .top_catchphrase p:last-child{
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 11px;
    color: #5E8296;
    font-weight: bold;
} */
.top_catchphrase p{
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 11px;
    color: #5E8296;
    font-weight: bold;
}

.top_contents{
    display: -webkit-flex;
    display: flex;
}

.top_contents .top_description{
    width: 60%;
}

.top_contents .top_description .top_description_en{
    margin-bottom: 23px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.top_contents .top_description .top_description_en p:first-child{
    margin-bottom: 8px;
}

.top_contents .top_description .top_description_en p{
    line-height: 1.5;
}

.top_description_jp{
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 11px;
    color: #5E8296;
}
.top_description_jp p{
    margin-bottom: 11px;
    line-height: 1.7;
    letter-spacing:0.5px;
}

.top_contents .top_concept{
    width: 40%;
}

.top_concept .top_concept_first .top_concept_title{
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 18px;
}

.top_concept .top_concept_first .top_concept_title:before{
    content: "";
    display: inline-block;
    width: .8em;
    height: .8em;
    border: 1px solid #000;
    border-radius: 50%;
    vertical-align: top;
    margin-right: .5em;
    margin-top:2.5px;
}

.b-l {
    position: relative;
    padding-left: 1.6em;
    padding-top: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

  .b-l:before {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    width: 1px;
    height: 97%;
    background: #000;
  }

  .p-l{
    padding-left: 1.6em;
    padding-top: 15px; 
  }

.top_concept .top_concept_first .b-l p:first-child,
.top_concept .top_concept_first .p-l p:first-child{
    margin-bottom: 7px;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 1.5;
}

.top_concept .b-l p:last-child,
.top_concept .p-l p:last-child{
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
    color: #5E8296;
    padding-bottom: 33px;
    line-height: 1.7;
    letter-spacing: 0.5px;
}

@media screen and (max-width:767px){
    /* .top_container_scroll {
      display: none; 
    }  */
    .top_container{
        /* padding: 0 30px 59px; */
        padding: 0 23px 59px 23px;
    }
    .top_container .top_gnav{
        display: none;
    }
    .top_container_under .top_header{
        padding: 18px 0 46px;
    }
    .top_container_under .top_header img{
        width: 70px;
     } 
     .top_catchphrase{
        margin-bottom: 53px;
    }
     .top_description_jp{
        font-size: 12px;
        margin-bottom: 72px;
        color: #5E8296;
    }
     .top_contents .top_description .top_description_en{
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.5px;
    }
    .top_contents .top_description .top_description_en p:first-child{
        margin-bottom: 11px;
    }
     .top_catchphrase h1 {
        font-size: 25px;
        margin-bottom: 17px;
    }
    .top_contents{
        display: initial;
    }
    .top_contents .top_description{
        width: 100%;
    }
    .top_contents .top_concept{
        width: 100%;
    }
    .top_concept .top_concept_first .b-l p:first-child,
    .top_concept .top_concept_first .p-l p:first-child{
        margin-bottom: 7px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
}

    .top_concept .b-l p:last-child,
    .top_concept .p-l p:last-child{
        font-size: 12px;
        color: #5E8296;
        padding-bottom: 23px;
        line-height: 2;
        letter-spacing: -0.5px;
}
}

@media screen and (max-width:374px){
    .top_description .top_description_jp br.sp, .top_description .top_description_jp br {
      display: none;
    }
  }

/*============== SERVICE CONTENTS ================*/ 

.services_container{
    background: url(img/service_bg.png) no-repeat top center;
    background-size: cover;
    background-color: #28AABE;
    padding: 0 30px;
    margin-top: -2px;
}

.services_container_under{
    max-width: 960px;
    margin: auto;
    position: relative;
    max-height: 100%;
    height: 1096px;
}

.services_container .servises_title{
    top: 143px;
    position: absolute;
}

.services_container .servises_title h2{
    font-size: 38px;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.services_contents_planning, .services_contents_creative{
    display: -webkit-flex;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
}

.services_contents_communications{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    align-items: center;
    -webkit-align-items: center;
}

.services_contents_planning{
    top: 121px;
    right: 0;
    position: absolute;
}
.services_contents_creative{
    /* top: 382px;
    left: 83px; */
    position: absolute;
    top: 35%;
    left: 10.5%;
}
.services_contents_communications{
    position: absolute;
    top: 641px;
}

.services_contents_planning .services_business,
.services_contents_creative .services_business, 
.services_contents_communications .business_img{
    padding-right: 43px;
    text-align: right;
}

.services_contents_planning .services_business .business_details,
.services_contents_creative .services_business .business_details,
.services_contents_communications .services_business .business_details{
    margin-bottom: 10px;
}

.services_contents_planning .services_business .business_details p:first-child,
.services_contents_creative .services_business .business_details p:first-child,
.services_contents_communications .services_business .business_details p:first-child{
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #fff;
}
.services_contents_planning .services_business .business_details p:last-child,
.services_contents_creative .services_business .business_details p:last-child,
.services_contents_communications .services_business .business_details p:last-child{
    font-size: 13px;
    font-family: 'Noto Sans JP', sans-serif;
    color: #A7DDE5;
    font-weight: 400;
}

.business_img{
    width: 276px;
}

.business_img img{
    width: 100%;
}

@media screen and (max-width:767px){
.services_container {
    padding: 67px 32px 84px 28px;
}
.services_container .servises_title{
    position: static;
    padding-bottom: 33px;
}
.services_container .servises_title h2{
    font-size: 28px;
    font-weight: 700;
}
.services_contents_planning, .services_contents_creative, .services_contents_communications{
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    position: static;
}
.services_contents_planning .business_img,.services_contents_planning .services_business{
    margin-left: auto;
    margin-bottom: 22px;
}
.services_container_under {
    max-width: 100%;
    position: static;
    max-height: 100%;
    height: 100%;
}
.services_contents_creative .services_business{
    text-align: left;
    padding-left: 28px;
    padding-right: 0;
}
.services_contents_communications .services_business{
    text-align: right;
    margin-left: auto;
    margin-right: 21px;
} 
.services_contents_planning .services_business{
    padding-right: 23px;
}
.services_contents_planning .business_img{
    width: 227px;
}
.services_contents_communications .business_img{
    padding-right: 0;
    margin-left: auto;
    width: 227px;
    margin-bottom: 20px;
}
.services_contents_creative .business_img{
    width: 227px;
    margin-bottom: 27px;
}
}

@media screen and (min-width:768px) and ( max-width:1023px) {
    /*　画面サイズが768pxから1023pxまではここを読み込む　*/
.business_img {
        width: 237px;
}
.services_contents_creative {
    position: absolute;
    top: 35%;
    left: 35%;
    transform: translateX(-45%);
    -webkit-transform: translateX(-45%);
    -ms-transform: translateX(-45%);
    width: 503px;
}
.services_contents_planning .services_business,
.services_contents_creative .services_business, 
.services_contents_communications .business_img{
    padding-right: 30px;
}
}


/*============== ABOUT US CONTENTS ================*/ 

.aboutus_container {
    max-width: 960px;
    margin: auto;
    padding-top: 150px;
    padding-bottom: 230px;
    padding-right: 30px;
    padding-left: 30px;
}

.aboutus_title{
    padding-bottom: 87px;
}

.aboutus_title h2 {
    font-size: 38px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

.aboutus_details {
    display: -webkit-flex;
    display: flex;
}

.aboutus_information{
    margin-right: 40px;
    width: 33%;
}

.aboutus_company{
    margin-bottom: 27px;
}

.aboutus_details .aboutus_company p:first-child,
.aboutus_details .aboutus_address p:first-child{
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 4px;
    letter-spacing: -0.4px;
    font-family: 'Montserrat', sans-serif; 
}

.aboutus_details .aboutus_company p:last-child,
.aboutus_details .aboutus_address p:last-child{
    font-size: 14px;
    color: #A1AFB1;
    font-family: 'Noto Sans JP', sans-serif; 
    font-weight: 500;
}

.aboutus_map_container{
    width: 67%;
}

.aboutus_map_container p{
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    text-align: right;
}

.aboutus_map {
    position: relative;
    padding-top: 56.25%;
    margin-bottom: 7px;
}

.aboutus_map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.aboutus_map_link{
    color: black;
    text-decoration: none;
}

.aboutus_map_link i{
    font-size:10px;
}

@media screen and (max-width:767px){
    .aboutus_container {
        max-width: 100%;
        margin: auto;
        padding: 70px 30px;
    }
    .aboutus_title{
        padding: 0 0 38px;
    }
    .aboutus_title h2 {
        font-weight: 700;
        font-size: 28px;
    }
    .aboutus_details {
        display: initial;
    }
    .aboutus_information{
        margin: 0;
        width: 100%;
    }
    .aboutus_company {
        margin-bottom: 15px;
    }
    .aboutus_map_container {
        width: 100%;
        /*margin-bottom: 20px;*/
    }
    .aboutus_details .aboutus_company p:first-child,
    .aboutus_details .aboutus_address p:first-child{
        margin-bottom: 10px;
        font-weight: 500;
        letter-spacing: 0.1px;
        text-decoration: none;
        color: #000;
}
    .aboutus_details .aboutus_address{
        margin-bottom: 22px;
    }
    .aboutus_details .aboutus_company p:last-child, .aboutus_details .aboutus_address p:last-child {
        letter-spacing: 0.5px;
        font-weight: 500;
    }
    .aboutus_map_container p {
        font-size: 12px;
        text-align: right;
    }
}
@media screen and (max-width:600px) {
    .aboutus_map {
        padding-top: 100%;
        margin-bottom: 14px;
    }
}


/*============== FOOTER CONTENTS ================*/ 

.footer_copyright{
    color: #5E8296;
    position: fixed;
    bottom: 20px;
    left: 30px;
    z-index: 5;
}
.footer_copyright p{
    font-size: 10px;
    font-family: 'Montserrat', sans-serif;
}
.pageTop{
    /* background: red; */
    cursor: pointer;
    position: fixed;
    right: 15px;
    bottom: 15px;
    width: 44px;
    height: 44px;
}
.pageTop_contents {
    cursor: pointer;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 11px;
    height: 11px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(-45deg);
    /* width: 100px; */
  }
  .pageTop:hover {
    opacity: .7;
  }