@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Zen+Maru+Gothic:wght@400;500;700&display=swap");
@media screen and (min-width: 1024px) {
  /*--------------------
  loader
  --------------------*/
  #loader::before, #loader::after {
    width: calc(100% + 50px);
  }
  #loader::before {
    height: 320px;
  }
  #loader::after {
    height: 220px;
  }
  /*--------------------
  共通コンテナ
  --------------------*/
  .m_box {
    padding: 2rem;
  }
  .m_box2 {
    padding: 4rem;
  }
  /*--------------------
  共通見出し
  --------------------*/
  .m_text {
    font-size: 2rem;
  }
  .m_text2 {
    font-size: 1.5rem;
  }
  .h_ttl {
    font-size: 1.5rem;
  }
  /*--------------------
  header
  --------------------*/
  .head_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .head_wrap #logo {
    width: 260px;
    filter: brightness(0) invert(1);
  }
  .fix_bg .head_wrap #logo {
    filter: none;
  }
  .nav_wrap {
    width: calc(100% - 300px);
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    opacity: 1;
    visibility: visible;
    padding: 0;
    background: none;
    position: static;
  }
  .nav_wrap nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
  }
  .nav_wrap nav ul li {
    margin: 0 1rem;
  }
  .nav_wrap nav ul li a {
    font-size: 1.25rem;
    padding: 0;
    color: #fcfcfb;
    border: 0;
  }
  .nav_wrap .nav_entry {
    padding: 0;
  }
  .nav_wrap .nav_entry a {
    font-size: 1.5rem;
  }
  .fix_bg .nav_wrap nav ul li a {
    color: #333;
  }
  #nav_toggle {
    display: none;
  }
  /*--------------------
  メインビジュアル
  --------------------*/
  #mainvisual {
    height: 100vh;
  }
  #mainvisual::before {
    background: rgba(51, 51, 51, 0.2);
  }
  #mainvisual .wave {
    height: 200px;
  }
  .catch_wrap {
    width: 1200px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .catch_wrap h2 .main_catch span {
    font-size: 8rem;
    mix-blend-mode: unset;
    color: #fcfcfb;
  }
  .catch_wrap h2 .main_catch p {
    font-size: 2rem;
    top: 9.25rem;
  }
  .catch_wrap h2 > p {
    margin-top: 0.5rem;
    font-size: 1.5rem;
  }
  .catch_wrap h2 > p:nth-of-type(1) {
    font-size: 3rem;
    font-weight: 600;
  }
  .sub_catch {
    display: block;
    width: 1200px;
    position: absolute;
    bottom: 80px;
    right: 0;
    transform: translate(50%, -50%);
  }
  .sub_catch span {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    font-size: 2rem;
    border-bottom: 2px solid #333;
  }
  .sub_catch p:nth-of-type(1) {
    font-size: 1.25rem;
    margin: 1rem 0 0.5rem;
  }
  .sub_catch p:nth-of-type(2) {
    padding-left: 0.5rem;
    border-left: 2px solid #333;
  }
  .catch_text .text_wrap h3 {
    font-size: 4rem;
    padding-bottom: 2rem;
  }
  .catch_text .text_wrap h3::before {
    height: 80px;
  }
  .catch_text .text_wrap p {
    font-size: 1.5rem;
    margin-top: 2rem;
  }
  .wave_wrap .wave2 {
    height: 200px;
  }
  /*--------------------
  #section01
  --------------------*/
  #section01 .container {
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-top: 260px;
    padding-bottom: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #section01 .ttl_01 {
    font-size: 3rem;
  }
  #section01 .ttl_01 span {
    font-size: 1.5rem;
  }
  #section01 .work_list li {
    width: auto;
    padding: 2rem 1rem;
  }
  #section01 .work_list li span {
    padding: 1rem 2rem;
  }
  #section01 .ttl_02 span {
    font-size: 2.5rem;
  }
  #section01 .m_box {
    text-align: center;
  }
  #section01 .m_box p {
    line-height: 2;
  }
  #section01 .work_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  #section01 .work_wrap h4 {
    font-size: 1.5rem;
  }
  #section01 .work_wrap .work_inner1 {
    width: 60%;
    padding: 2rem;
  }
  #section01 .work_wrap .work_inner2 {
    width: 40%;
  }
  /*--------------------
  #section02
  --------------------*/
  #section02 .container {
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #section02 h2 span {
    font-size: 3.5rem;
    padding-left: 2.5rem;
  }
  #section02 h2 span::before {
    width: 1.5rem;
    top: 2.25rem;
  }
  #section02 h2 p {
    font-size: 1.125rem;
    font-weight: 600;
  }
  #section02 .wrap {
    margin-top: 2rem;
  }
  #section02 .wrap .inner:nth-of-type(1) {
    width: 40%;
  }
  #section02 .wrap .inner:nth-of-type(2) {
    width: 60%;
    padding-left: 2rem;
  }
  /*--------------------
  #section03
  --------------------*/
  #section03 .container {
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #section03 h2 span {
    font-size: 3.5rem;
    padding-left: 2.5rem;
  }
  #section03 h2 span::before {
    width: 1.5rem;
    top: 2.25rem;
  }
  #section03 h2 p {
    font-size: 1.125rem;
    font-weight: 600;
  }
  #section03 .pride_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  #section03 .pride_wrap .pride_inner {
    width: 48%;
  }
  #section03 .pride_wrap .pride_inner2 {
    width: 48%;
  }
  #section03 .pride_list li span {
    width: 300px;
    height: 200px;
  }
  #section03 .pride_list li:nth-of-type(1) span {
    width: 300px;
    height: 200px;
  }
  #section03 .pride_dl dt {
    font-size: 1.5rem;
  }
  /*--------------------
  #section04
  --------------------*/
  #section04 .container {
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #section04 h2 span {
    font-size: 3.5rem;
    padding-left: 2.5rem;
  }
  #section04 h2 span::before {
    width: 1.5rem;
    top: 2.25rem;
  }
  #section04 h2 p {
    font-size: 1.125rem;
    font-weight: 600;
  }
  /*--------------------
  #section05
  --------------------*/
  #section05 .container {
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #section05 h2 {
    margin-bottom: 2rem;
  }
  #section05 h2 span {
    font-size: 3.5rem;
    padding-left: 2.5rem;
  }
  #section05 h2 span::before {
    width: 1.5rem;
    top: 2.25rem;
  }
  #section05 h2 p {
    font-size: 1.125rem;
    font-weight: 600;
  }
  #section05 .work_wrap {
    flex-direction: row;
  }
  #section05 .work_wrap .work_inner:nth-of-type(1) {
    width: 55%;
  }
  #section05 .work_wrap .work_inner:nth-of-type(2) {
    width: 45%;
    padding-left: 2rem;
  }
  /*--------------------
  #section06
  --------------------*/
  #section06 .container {
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #section06 h2 span {
    font-size: 3.5rem;
  }
  #section06 h2 span::before {
    height: 60px;
  }
  #section06 h2 p {
    font-size: 1.125rem;
    font-weight: 600;
  }
  #section06 .interview_wrap {
    width: 100%;
  }
  #section06 .interview_wrap .interview_box {
    width: 31%;
  }
  #section06 .interview_wrap .interview_box:not(:last-of-type) {
    margin-bottom: 0;
  }
  #section06 .interview_wrap .interview_box:not(:nth-of-type(3n)) {
    margin-right: 3.5%;
  }
  /*--------------------
  #section07
  --------------------*/
  #section07 .container {
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #section07 h2 span {
    font-size: 3.5rem;
  }
  #section07 h2 span::before {
    height: 60px;
  }
  #section07 h2 p {
    font-size: 1.125rem;
    font-weight: 600;
  }
  #section07 .doc_wrap {
    flex-direction: row-reverse;
    margin-bottom: 2rem;
  }
  #section07 .doc_wrap .doc_image {
    width: 45%;
  }
  #section07 .doc_wrap .doc_txt {
    width: 55%;
    padding-right: 2rem;
  }
  #section07 .messase_box h3 {
    font-size: 1.25rem;
  }
  #section07 .messase_box h3::first-letter {
    font-size: 1.5rem;
  }
  /*--------------------
  #section08
  --------------------*/
  #section08 .container {
    width: 100%;
    max-width: 100%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 120px;
    padding-left: 0;
    padding-right: 0;
  }
  #section08 h2 span {
    font-size: 3.5rem;
  }
  #section08 h2 span::before {
    height: 60px;
  }
  #section08 h2 p {
    font-size: 1.125rem;
    font-weight: 600;
  }
  #section08 h2 b {
    font-size: 1.25rem;
  }
  #section08 .reason_wrap:not(:last-of-type) {
    margin-bottom: 4rem;
  }
  #section08 .reason_wrap .eng_ttl {
    font-size: 5rem;
  }
  #section08 .reason_wrap .reason_img {
    width: 55%;
  }
  #section08 .reason_wrap .reason_txt {
    width: 45%;
    padding-left: 2rem;
    padding-right: 1rem;
  }
  #section08 .reason_wrap .reason_txt h3 span {
    font-size: 2.5rem;
  }
  #section08 .reason_wrap .reason_txt h3 p {
    font-size: 1.25rem;
  }
  #section08 .reason_wrap.v2 .reason_txt {
    padding-left: 1rem;
    padding-right: 2rem;
  }
  #section08 .detail_btn {
    margin-top: 2rem;
  }
  #section08 .detail_btn a {
    padding: 1rem 2rem;
  }
  /*--------------------
  .cta
  --------------------*/
  .cta .container {
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .cta h2 {
    margin-bottom: 2rem;
  }
  .cta h2 span {
    font-size: 3.5rem;
  }
  .cta h2 p {
    font-size: 1.5rem;
  }
  .cta .cta_btn_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .cta .cta_btn_list li {
    width: 320px;
    margin: 0 1rem;
  }
  .cta .cta_btn_list li a {
    padding: 1rem 2rem;
    font-size: 1.25rem;
  }
  /*--------------------
  #access
  --------------------*/
  #access {
    background: #f9f5ec;
  }
  #access h2 span {
    font-size: 3.5rem;
  }
  #access h2 span::before {
    height: 60px;
  }
  #access .access_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  #access .access_wrap .access_box {
    width: 48%;
  }
  #access .access_wrap .access_box .map_btn_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  #access .access_wrap .access_box .map_btn_list li {
    width: 48%;
  }
  /*--------------------
  #f_menu
  --------------------*/
  #f_menu .container {
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #f_menu h2 {
    margin-bottom: 2rem;
  }
  #f_menu h2 span {
    font-size: 5rem;
  }
  #f_menu h2 p {
    font-size: 1.5rem;
    margin-left: 2rem;
  }
  #f_menu ul li {
    width: 30%;
    margin: 1rem 1%;
  }
  #f_menu ul li a {
    padding: 1rem 2rem;
    display: block;
    text-align: center;
  }
  /*--------------------
  #group
  --------------------*/
  #group .container {
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-top: 60px;
    padding-bottom: 140px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #group .group_box .group_inner {
    width: 48%;
    margin-bottom: 0;
  }
  /*--------------------
  footer
  --------------------*/
  footer .container {
    width: 1200px;
    max-width: 100%;
    margin: auto;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  footer .f_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  footer .f_wrap .f_logo_wrap {
    width: 48%;
  }
  footer .f_wrap .f_menu_list {
    width: 48%;
  }
  footer .f_contact_list li {
    width: 360px;
    margin: 1rem;
  }
  /*--------------------
  メディアクエリ切り替えクラス
  --------------------*/
  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
}