/* responsive
-------------------------------------------------- */
.sp { display: none; }
.pc_f {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
}


/* 画面幅小さいPC - small_pc
-------------------------------------------------- */
@media ( width <= 1280px ) {

  /* クリエイティブの考え方 - LIFE IS MORE.
  -------------------------------------------------- */
  .list_lifeismore > li:first-child a { border-left: none; }
  .list_lifeismore > li:last-child a { border-right: none; }


  /* LIFE IS MORE - page:about
  -------------------------------------------------- */
  .about_ttl {
    font-size: 8rem !important;
    white-space: wrap;
  }
  .about_box .text_space {
    font-size: 6rem !important;
  }
  .about_box {
    padding: 5rem 2rem;
  }

  

  /* プロジェクト - page:project
  -------------------------------------------------- */
  .project_blog_list > li { width: 30%; }
  .project_blog_list > li:not(:nth-child(4n)) { margin-right: 0; }
  .project_blog_list > li:not(:nth-child(3n)) { margin-right: 5%; }


}


/* タブレット - tablet
-------------------------------------------------- */
@media ( width <= 768px ) {
  body { font-size: 1.4rem; }

  /* ヘッダー - header
  -------------------------------------------------- */
  header {
    margin-top: 7.5rem;
  }

  /* ナビ - nav
  -------------------------------------------------- */
  body.logged-in.admin-bar nav { top: 46px; }
  nav {
    height: 75px;
  }

  .nav_scroll {
    position: fixed;
    top: -100vh;
    right: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: rgba( 0, 0, 0, .95 );
    opacity: 0;
    overflow-y: scroll;
    transition: all ease .6s;
    z-index: 8;
  }

  #nav_menu {
    display: flex;
  }
  #nav_menu.is_active + .nav_scroll {
    top: 0;
    opacity: 1;
  }
  #nav_menu.is_active .nav_scroll .nav_list {
    display: flex;
  }
  .nav_list {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-right: 0;
    width: 100%;
    height: 100%;
  }
  .nav_list > li:not(:nth-child(2)) {
    border-left: none;
  }
  .nav_list > li:first-child {
    display: block;
    border-bottom: none;
  }
  .nav_list > li a {
    padding: 1rem 0;
    font-family: "Josefin Sans", sans-serif;
    font-size: 2.4rem;
    letter-spacing: .15em;
    color: #fff;
  }
  .nav_list > li:first-child a {
    display: block;
    margin-bottom: 3rem;
    padding: 0;
    width: 250px;
    height: 50px;
  }

  .nav_list > li:last-child a {
    position: static;
    margin-top: 2rem;
  }
  .main_logo {
    width: 200px;
  }

  /* メイン - main
  -------------------------------------------------- */
  main {
    margin-top: 7.5rem;
  }

  #comingsoon {
    min-height: 300px;
  }

  .txt_anime_up > img {
    width: auto;
    height: 40px;
  }
  .txt_anime_up > img:nth-child(6) {
    margin-right: 2rem;
  }
  body.contact main {
    padding: 2rem;
  }
  .contact_form a {
    min-height: 300px;
    font-size: 3.6rem;
  }

  .wpcf7-form-control-wrap {
    position: static;
  }


  /* 共通：タイトル - common:title
  -------------------------------------------------- */
  .main_ttl {
    font-size: 4.2rem;
  }


  /* メイン：メインビジュアル - main:mainvisual
  -------------------------------------------------- */
  .main_visual_dami {
    height: 640px;
  }

  /* メイン：プロジェクト - main:project
  -------------------------------------------------- */
  .project_data { flex-direction: column; }
  .project_data > * { width: 100%; }
  .project_data .right_box {
    margin-top: 3rem;
    padding-left: 0;
  }
  .project_info {
    min-height: 1200px;
  }
  .project_tag {
    margin-top: 2rem;
  }

  /* メイン：オンラインショップ - main:onelineshop
  -------------------------------------------------- */
  .shop_info_box {
    flex-direction: column;
  }
  .shop_info_box > .yuzugo_img {
    height: 450px;
  }
  /* .shop_info_box > .shop_info h2 {
    text-align: center;
  } */
  .shop_info_box > .yuzugo_img, .shop_info_box > .shop_info {
    width: 100%;
  }
  .shop_info_box > .shop_info p {
    max-width: 100%;
  }

  .onlineshop_btn a {
    max-width: 100%;
  }

  /* フッター - footer
  -------------------------------------------------- */
  .list_sns {
    position: static;
    margin-bottom: 3rem;
    justify-content: center;
  }
  .list_sitemap {
    justify-content: center;
  }
  .copy {
    padding: 1rem;
    text-align: center;
  }

  /* about - LIFEISMORE.
  -------------------------------------------------- */
  body.about h2.main_ttl {
    margin-bottom: 3rem;
  }
  .about_ttl {
    margin-bottom: 2rem;
    font-size: 5.6rem !important;
    font-weight: 600;
  }
  .about_txt {
    margin-bottom: 3rem;
  }
  .about_box .text_space {
    font-size: 4.6rem !important;
    font-weight: 600;
  }

  .company_info {
    border-top: none;
    border-bottom: none;
  }
  .company_right {
    padding: 5rem 2rem;
    border-left: none;
  }
  .company_info > div:first-child {
    padding: 2rem;
    font-weight: 700;
    color: #fff;
    background-color: #333;
  }

  .people_info {
    padding: 5rem 2rem;
  }

  /* クリエイティブの考え方 - creative
  -------------------------------------------------- */
  .creative_box {
    flex-direction: column-reverse;
  }
  .creative_box svg {
    width: 100%;
    height: 360px;
    text-align: center;
  }
  .creative_txt {
    margin-top: 5rem !important;
    text-align: left;
  }
  .creative_top {
    text-align: center;
  }

  .creative_think {
    text-align: center;
  }


  /* project - PROJECT
  -------------------------------------------------- */
  .project_list {
    flex-wrap: wrap;
    padding-bottom: 0;
  }
  .project_list > li {
    width: calc(100% / 3);
  }
  .project_list > li a {
    padding: 1rem 0;
  }
  .project_list > li:not(:last-child) a {
    border-right: none;
    border-bottom: 1px solid #333;
  }
  .project_list > li:not(:nth-child(3n)) a {
    border-right: 1px solid #333;
  }
  .project_list > li:last-child {
    /* border-top: 1px solid #333; */
    width: 100%;
  }
  .project_list > li:last-child a {
    border-right: none;
  }

  .project_blog_list > li {
    width: 48%;
  }
  .project_blog_list > li:nth-child(even) {
    margin-left: 4%;
  }
  .project_blog_list > li:not(:nth-child(3n)) {
    margin-right: 0;
  }

  body.project main, body.category main, body.tag main {
    padding: 2rem;
  }

  .sub_ttl {
    font-size: 3rem;
  }
  body.tag .sub_ttl > span,
  body.project .sub_ttl > span,
  body.category .sub_ttl > span {
    font-size: 1.6rem;
  }

  .project_blog_list  > li.error_txt {
    margin-right: auto;
  }

  /* 記事 - single
  --------------------------------------------- */
  body.single main article {
    padding: 2rem 0;
  }

  body.single-topics .sub_ttl {
    font-size: 2.4rem;
  }
  body.single-topics .sub_ttl > span {
    font-size: 1.8rem;
    font-weight: 600;
  }
}


/* スマホ - sp
-------------------------------------------------- */
@media ( width <= 480px ) {

  /* レスポンシブ - responsive
  --------------------------------------------- */
  .pc { display: none; }
  .sp { display: block; }

  /* ナビ - nav
  --------------------------------------------- */
  nav {
    padding: 2rem 1rem;
  }
  .main_logo {
    width: 150px;
  }
  .nav_list > li:first-child a {
    margin-bottom: 2rem;
    width: 200px;
  }
  #nav_menu > span,
  #nav_menu > span::before, #nav_menu > span::after {
    height: 3px;
  }

  /* タイトル - title
  --------------------------------------------- */
  .main_ttl {
    font-size: 3rem;
  }
  .sub_ttl {
    font-size: 3rem;
  }

  .ttl_life {
    margin-bottom: 2rem;
  }

  .txt_anime_up > img {
    width: auto;
    height: 30px;
  }
  .contact_form a {
    min-height: 200px;
    font-size: 3rem;
  }

  body.contact main .page_content p:first-child {
    font-size: 1.2rem;
  }

  /* メインビジュアル - mainvisual
  --------------------------------------------- */
  .main_visual_dami {
    height: 480px;
  }

  /* メイン - main
  --------------------------------------------- */
  main {
    margin-top: 5rem;
  }

  /* メイン：LIEFISMORE - アバウト
  --------------------------------------------- */
  .list_lifeismore {
    flex-wrap: wrap;
  }
  .list_lifeismore > li {
    width: 100%;
  }
  .list_lifeismore > li a {
    height: 60px;
  }
  .list_lifeismore > li:first-child {
    border-bottom: 1px solid #333;
  }

  /* メイン：プロジェクト - project
  --------------------------------------------- */
  .project_data {
    margin: 3rem auto;
  }
  .project_data figure {
    height: 250px;
  }
  .project_data figure img {
    height: 250px;
  }
  .project_data h3 {
    font-size: 2.4rem;
  }
  .project_info {
    padding: 2rem 2rem 5rem;
    min-height: 900px;
  }

  .btn_project a {
    padding: 1.5rem 2rem;
  }

  /* メイン：お知らせ - topics
  --------------------------------------------- */
  .blog_list > li a {
    padding: 2rem;
    flex-wrap: wrap;
  }
  .blog_list > li a h3 {
    padding-left: 0;
    width: 100%;
  }

  .btn_more a {
    font-size: 1.4rem;
  }
  .btn_more a svg {
    width: 20px;
    height: 16px;
  }

  /* メイン：オンラインショップ - online-shop
  --------------------------------------------- */
  .shop_info_box > .yuzugo_img {
    height: 200px;
  }
  .shop_info_box > .shop_info {
    padding: 5rem;
  }
  .shop_info_box > .shop_info h2 {
    font-size: 3rem;
  }

  .onlineshop_btn {
    margin-top: 5rem;
  }


  /* フッター - footer
  --------------------------------------------- */
  footer {
    padding: 2rem 1rem;
  }
  .copy {
    padding-bottom: 0;
  }

  /* アバウト - about
  --------------------------------------------- */
  .about_ttl {
    font-size: 3.6rem !important;
  }
  .about_box .text_space {
    font-size: 3.1rem !important;
  }

  body.about .life_is_more_link {
    border-bottom: none;
  }

  .company_box {
    padding: 5rem 2rem;
    border-top: none;
  }
  .company_right {
    padding: 2rem 0 5rem;
  }
  .company_info > div:first-child {
    font-weight: bold;
  }

  .tbl_company table td {
    display: block;
    width: 100% !important;
  }
  .tbl_company table tr td:first-child {
    text-align: left;
    text-align-last: auto;
    letter-spacing: .2em;
    border-bottom: 1px dotted #333;
  }
  .tbl_company table tr td:last-child {
    padding-left: .5rem;
  }

  .tbl_company table tr:last-of-type {
    border-top: none;
  }

  .tbl_enkaku table td {
    display: block;
    width: 100% !important;
  }
  .tbl_enkaku table tr td:first-child {
    border-bottom: 1px dotted #333;
  }
  .tbl_enkaku table tr td:last-child {
    padding-left: .5rem;
    padding-bottom: 2rem;
    line-height: 2.5;
  }

  .people_info {
    padding: 3rem 1rem;
  }

  .people_name {
    font-size: 2.4rem;
  }
  .people_name > span {
    font-size: 1.6rem;
  }


  /* クリエイティブの考え方 - creative
  --------------------------------------------- */
  .creative_box, .creative_think, .creative_activity {
    padding: 5rem 2rem;
  }
  .creative_box svg {
    height: 200px;
  }
  .creative_top p {
    font-size: 1.2rem !important;
  }

  .creative_think h2, .creative_activity h2 {
    font-size: 2.1rem !important;
  }
  .creative_list h3 {
    font-size: 1.6rem !important;
  }

  .btn_square a {
    padding: 2rem;
  }

  /* プロジェクト - project
  --------------------------------------------- */
  body.project main, body.category main, body.tag main {
    padding: 2rem 1rem;
  }

  .blog_ttl {
    font-size: 1.6rem;
  }


  .project_ttl {
    flex-wrap: wrap;
    font-size: 2.4rem;
  }
  .project_ttl > .blog_tag_list {
    margin-top: 2rem;
    width: 100%;
  }
  .direction_name {
    font-size: 1.4rem !important;
  }

  body.single main {
    padding: 2rem;
  }

  .breadcrumb_list {
    margin-bottom: 5rem;
    word-break: keep-all;
    white-space: nowrap;
    overflow-x: scroll;
  }


  /* お知らせ - news
  --------------------------------------------- */
  body.news main, body.sitemap main, body.privacypolicy main {
    padding-top: 2.5rem;
  }
}