@charset "utf-8";
/* ===================================================================
CSS information

 file name  : sp.css
 style info : スマートフォン用
=================================================================== */

@media screen and (min-width: 1px) and (max-width: 1440px){

/* -----------------------------------------------------------
    Top
----------------------------------------------------------- */
#top main .container #work_sec .contents .pic_box picture {
  width: 780px;
  margin-left: -20vw;
}

}

@media screen and (min-width: 1px) and (max-width: 1280px){

/* -----------------------------------------------------------
    Top
----------------------------------------------------------- */
#top main .container #work_sec .contents .pic_box picture {
  width: 750px;
  margin-left: -22vw;
}

}

@media screen and (min-width: 1px) and (max-width: 1080px){

/* -----------------------------------------------------------
    header
----------------------------------------------------------- */
header {
  height: 200px;
}

/* -----------------------------------------------------------
    inner
----------------------------------------------------------- */
.inner {
  max-width: 100%;
  min-width: 100%;
}

/* -----------------------------------------------------------
    .main
----------------------------------------------------------- */
.main {
  padding-left: 7.5vw;
  padding-right: 7.5vw;
}

/* -----------------------------------------------------------
    footer
----------------------------------------------------------- */
footer {
  padding: 7.5vw 7.5vw 5vw;
}

footer .logo_box .logo {
  width: 200px;
}

footer .logo_box .tagline {
  margin-bottom: 0.75vw;
  width: 150px;
}

/* -----------------------------------------------------------
    Top
----------------------------------------------------------- */
#top main .main .inner .site_id {
  width: 350px;
}

#top main .main .inner .scroll {
  bottom: calc(2.5vw + 10px);
}

#top main .main .inner .scroll a:after {
  xmargin-top: 0.75vw
}

#top main .container > section {
  padding-left: 7.5vw;
  padding-right: 7.5vw;
}

#top main .container #concept_sec .contents .txt_box .ttl_box h3 {
  line-height: inherit;
  width: 450px;
}

#top main .container #concept_sec .contents .pic_box {
  flex: 0 1 440px;
  margin-top: -5vw;
}

#top main .container #work_sec .contents .pic_box picture {
  width: 670px;
  margin-left: -25vw;
}

#top main .container #company_sec .contents .map_box {
  flex: 0 1 450px;
}

#top main .container #company_sec .squad_btn p a {
  width: 150px;
}

}

@media screen and (min-width: 1px) and (max-width: 810px){

/* -----------------------------------------------------------
    .v_rl
----------------------------------------------------------- */
.v_rl {
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: lr-tb;
  writing-mode: horizontal-tb;
}

/*----------------------------------------------------
    hd
----------------------------------------------------*/
.hd_01 {
  line-height: 1;
  transform: rotate(0);
}

/* -----------------------------------------------------------
    header
----------------------------------------------------------- */
header {
  height: 150px;
}

header .site_id {
  width: 150px;
}

/* -----------------------------------------------------------
    #g_nav
----------------------------------------------------------- */
#g_nav .main_nav li:not(:first-of-type) {
  margin-left: 4vw;
}

/* -----------------------------------------------------------
    footer
----------------------------------------------------------- */
footer .logo_box .logo {
  width: 180px;
}

footer .logo_box .tagline {
  width: 130px;
}

/* -----------------------------------------------------------
    Top
----------------------------------------------------------- */
#top main .main {
  height: 50vh;
}

#top main .main .inner .site_id {
  width: 300px;
}

#top main .container > section .hd_01 {
  position: inherit;
  left: 0;
}

#top main .container #concept_sec {
  padding-bottom: 10vw;
}

#top main .container #concept_sec .contents {
  display: block;
  margin-top: 7.5vw;
}

#top main .container #concept_sec .contents .txt_box .lead_box {
  margin-top: 2.5vw;
}

#top main .container #concept_sec .contents .pic_box {
  margin-top: 3vw;
}

#top main .container #work_sec {
  padding-bottom: 10vw;
}

#top main .container #work_sec .contents {
  flex-direction: column-reverse;
  margin-top: 7.5vw;
}

#top main .container #work_sec .contents .txt_box {
  flex: 0 1 auto;
}

#top main .container #work_sec .contents .txt_box .work_box {
  margin-top: 5vw;
}

#top main .container #work_sec .contents .txt_box .work_box .work_list {
  margin-top: 2.5vw;
  width: calc(70% + 2.5vw);
}

#top main .container #work_sec .contents .txt_box .work_box .work_list .work_detail {
  margin-left: 2.5vw;
  margin-top: 2.5vw;
  width: calc(100% / 2 - 2.5vw);
}

#top main .container #work_sec .contents .pic_box {
  flex: 0 1 auto;
  margin-right: 0;
  margin-top: 3vw;
}

#top main .container #work_sec .contents .pic_box picture {
  width: 100%;
  margin-left: 0;
}

#top main .container #company_sec {
  padding-bottom: 10vw;
}

#top main .container #company_sec .contents {
  display: block;
  margin-top: 7.5vw;
}

#top main .container #company_sec .contents .txt_box {
  margin-top: 5vw;
}

#top main .container #company_sec .contents .map_box {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
  margin-right: 0;
}

#top main .container #company_sec .contents .map_box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#top main .container #company_sec .contents .txt_box > ul > li > dl dt {
  flex: 0 1 10em;
  padding-bottom: 3vw;
  padding-top: 3vw;
}

#top main .container #company_sec .contents .txt_box > ul > li > dl > dd {
  padding-bottom: 3vw;
  padding-left: 3vw;
  padding-right: 3vw;
  padding-top: 3vw;
}

#top main .container #company_sec .contents .txt_box > ul > li > dl.business dd ul li:first-of-type br {
  display: none;
}

}

@media screen and (min-width: 1px) and (max-width: 520px){

/*----------------------------------------------------
    .pe_element
----------------------------------------------------*/
.pe_element {
  pointer-events: all;
}

/*----------------------------------------------------
    hd
----------------------------------------------------*/
.hd_01 {
  font-size: 1.9rem;
}

/* -----------------------------------------------------------
    header
----------------------------------------------------------- */
header {
  height: 80px;
}

header.is-fixed {
  height: 60px;
}

header .site_id {
  width: 120px;
}

/* -----------------------------------------------------------
    #g_nav
----------------------------------------------------------- */
#g_nav .main_nav {
  display: none;
}

header.is-fixed #g_nav .sub_nav {
  display: block;
}

#g_nav .sub_nav {
  margin-top: 0;
}

#g_nav .sub_nav p a {
  padding: 1.5vw 2vw;
  width: 70px;
}

/* -----------------------------------------------------------
    footer
----------------------------------------------------------- */
footer .logo_box .logo {
  width: 120px;
}

footer .logo_box .tagline {
  margin-bottom: 1.5vw;
  width: 100px;
}

footer .copyright_box {
  font-size: 1.3rem;
}

/* -----------------------------------------------------------
    Top
----------------------------------------------------------- */
#top main .main .inner .site_id {
  width: 200px;
}

#top main .main .inner .scroll {
  bottom: calc(5vw + 10px);
}

#top main .main .inner .scroll a:after {
  xmargin-top: 1.5vw
}

#top main .container #concept_sec .contents {
  margin-top: 10vw;
}

#top main .container #concept_sec .contents .txt_box .ttl_box h3 {
  line-height: normal;
  width: 300px;
}

#top main .container #concept_sec .contents .txt_box .ttl_box h4 {
  font-size: 1.6rem;
  margin-top: 2.5vw
}

#top main .container #concept_sec .contents .txt_box .lead_box {
  font-size: 1.5rem;
  line-height: 1.7;
  margin-top: 3vw;
}

#top main .container #work_sec .contents {
  margin-top: 10vw;
}

#top main .container #work_sec .contents .txt_box .lead_box {
  font-size: 1.5rem;
  line-height: 1.7;
}

#top main .container #work_sec .contents .txt_box .work_box {
  margin-top: 7.5vw;
}

#top main .container #work_sec .contents .txt_box .work_box .work_list {
  margin-top: 3.5vw;
  width: calc(100% + 1vw);
}

#top main .container #work_sec .contents .txt_box .work_box .work_list .work_detail:before {
  width: 15px;
}

#top main .container #work_sec .contents .txt_box .work_box .work_list .work_detail {
  margin-left: 1vw;
  margin-top: 3.5vw;
  width: calc(100% / 2 - 1vw);
}

#top main .container #work_sec .contents .txt_box .work_box .work_list .work_detail ul {
  font-size: 1.4rem;
}

#top main .container #company_sec .contents {
  margin-top: 10vw;
}

#top main .container #company_sec .contents .txt_box {
  font-size: 1.4rem;
  margin-top: 7.5vw;
  letter-spacing: 0.05em;
}

#top main .container #company_sec .contents .txt_box > ul > li > dl dt {
  flex: 0 1 5em;
  padding-bottom: 5vw;
  padding-top: 5vw;
}

#top main .container #company_sec .contents .txt_box > ul > li > dl > dd {
  padding-bottom: 5vw;
  xpadding-left: 4vw;
  xpadding-right: 4vw;
  padding-top: 5vw;
}

#top main .container #company_sec .contents .txt_box > ul > li > dl.business dd ul li {
  margin-top: 1.5vw;
}

#top main .container #company_sec .contents .txt_box > ul > li > dl.business dd ul li:first-of-type br {
  display: block;
}

#top main .container #company_sec .squad_btn {
  margin-top: 7.5vw;
}

#top main .container #company_sec .squad_btn p a {
  padding: 1.5vw 3vw;
  width: 90px;
}

}