@charset "UTF-8";
@import url("global.css");
/* ---------- Common ---------- */
.sec_title span {
  display: block; }
.sec_title .sub {
  display: flex;
  align-items: baseline;
  column-gap: 5px;
  font-size: clamp(12px, 1.8vw, 20px);
  font-weight: 700; }
  .sec_title .sub::before, .sec_title .sub::after {
    display: block; }
  .sec_title .sub::before {
    content: "["; }
  .sec_title .sub::after {
    content: "]"; }
.sec_title .title {
  line-height: 1.4;
  font-size: clamp(28px, 3.6vw, 45px);
  font-family: "Shippori Mincho B1", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 500; }

/* ------------------------------
 Top
------------------------------ */
#toparea {
  color: #fff;
  margin: 20px;
  padding-block: 480px 180px;
  -webkit-border-radius: var(--radius-normal);
  border-radius: var(--radius-normal);
  background-color: #365AC2;
  background: linear-gradient(180deg, #365ac2 0%, #2b4593 100%);
  overflow: hidden;
  position: relative;
  z-index: 1; }
  #toparea .wrapper {
    position: relative;
    z-index: 2; }
  #toparea #top_text {
    padding-inline: 8.4vw;
    padding-bottom: 250px; }
    #toparea #top_text .catch {
      line-height: 1.3;
      font-size: clamp(31px, 6.4vw, 108px);
      font-family: "Shippori Mincho B1", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-weight: 500; }
      #toparea #top_text .catch b {
        display: inline-block;
        background-color: #FFF;
        color: #365AC2;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        padding: 0 15px 5px; }
    #toparea #top_text .name {
      margin-top: 30px;
      width: fit-content;
      background-color: #243978;
      padding: 10px 30px;
      -webkit-border-radius: 3px;
      border-radius: 3px; }
      #toparea #top_text .name > p {
        font-size: clamp(13px, 2.7vw, 34px);
        font-family: "Shippori Mincho B1", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
        font-weight: 700; }
    #toparea #top_text .text {
      margin-top: 20px;
      text-align: justify; }
      #toparea #top_text .text > p {
        font-size: clamp(13px, 2vw, 22px);
        letter-spacing: 0; }
  #toparea #top_news {
    margin-inline: auto calc( ( 100vw - 1450px ) / 2 );
    max-width: 960px; }
    #toparea #top_news .title_box {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
      margin-bottom: 15px; }
      #toparea #top_news .title_box .sec_title .title {
        line-height: 1;
        font-size: clamp(18px, 2.5vw, 33px);
        font-family: "Shippori Mincho B1", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
      #toparea #top_news .title_box .morebtn a.more .view {
        color: #FFF;
        background-color: transparent; }
      #toparea #top_news .title_box .morebtn a.more .arrow {
        width: 36px;
        height: 36px; }
        #toparea #top_news .title_box .morebtn a.more .arrow::before {
          color: #365AC2; }
    #toparea #top_news .contentblock ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 40px; }
      #toparea #top_news .contentblock ul li .inner {
        display: block;
        color: #FFF; }
        #toparea #top_news .contentblock ul li .inner .img {
          width: 100%; }
          #toparea #top_news .contentblock ul li .inner .img figure {
            aspect-ratio: 1.74 / 1;
            -webkit-border-radius: var(--radius-normal);
            border-radius: var(--radius-normal);
            overflow: hidden; }
        #toparea #top_news .contentblock ul li .inner .text {
          margin-top: 10px;
          text-align: justify; }
          #toparea #top_news .contentblock ul li .inner .text > p {
            font-weight: 500;
            line-height: 1.4; }
            #toparea #top_news .contentblock ul li .inner .text > p.data {
              margin-top: 4px;
              font-weight: 600;
              font-size: .875em; }
  #toparea .img1, #toparea .img2 {
    position: absolute;
    z-index: -1; }
    #toparea .img1 figure, #toparea .img2 figure {
      width: 100%; }
  #toparea .img1 {
    max-width: 69vw;
    right: 0;
    top: 0; }
  #toparea .img2 {
    max-width: 35vw;
    left: 0;
    bottom: 0; }

#top_concept {
  padding-block: 260px 140px; }
  #top_concept .wrapper {
    position: relative;
    z-index: 2;
    padding-top: 10px; }
  #top_concept .main {
    max-width: 760px; }
    #top_concept .main .copy {
      padding-left: 45px;
      line-height: 1.3;
      font-size: clamp(37px, 6.4vw, 88px);
      font-family: "Shippori Mincho B1", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-weight: 500;
      position: relative; }
      #top_concept .main .copy::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 15px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        background-color: #243978; }
    #top_concept .main .text1, #top_concept .main .text2 {
      text-align: justify;
      font-weight: 700;
      padding-left: 7px; }
      #top_concept .main .text1 > p + p, #top_concept .main .text2 > p + p {
        margin-top: 1em; }
    #top_concept .main .text1 {
      margin-top: 90px;
      font-size: 1.375em; }
    #top_concept .main .text2 {
      margin-top: 40px;
      padding-right: 7vw; }
    #top_concept .main .morebtn {
      margin-top: 50px; }
  #top_concept .img1, #top_concept .img2 {
    position: absolute;
    z-index: -1;
    right: calc( ( ( 100vw - 1450px ) / 4 ) * -1 ); }
  #top_concept .img1 {
    top: 0;
    max-width: 477px; }
  #top_concept .img2 {
    bottom: 30px;
    max-width: 560px; }

/* ------------------------------
 Point
------------------------------ */
#point_list {
  padding-block: 180px 170px;
  position: relative;
  z-index: 1;
  color: #FFF; }
  #point_list::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #303030;
    opacity: .68;
    mix-blend-mode: multiply; }
  #point_list ol {
    border-top: #FFF solid 1px;
    counter-reset: listnum 0; }
    #point_list ol > li {
      padding-block: 50px;
      border-bottom: #FFF solid 1px;
      counter-increment: listnum 1; }
      #point_list ol > li .item_inner {
        display: flex;
        align-items: center;
        justify-content: space-between; }
        #point_list ol > li .item_inner .title_box {
          flex-shrink: 0;
          white-space: nowrap;
          padding-right: 3vw;
          -webkit-box-sizing: border-box;
          box-sizing: border-box; }
          #point_list ol > li .item_inner .title_box .h {
            line-height: 1.3;
            font-size: clamp(21px, 3.3vw, 37px);
            font-family: "Shippori Mincho B1", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
            font-weight: 500; }
            #point_list ol > li .item_inner .title_box .h::before {
              content: "[ POINT-0" counter(listnum) " ]";
              display: block;
              color: #9CB6FF;
              font-size: min(3vw,18px);
              font-weight: 700;
              font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif; }
        #point_list ol > li .item_inner .text_box {
          width: 52.5%;
          -webkit-box-sizing: border-box;
          box-sizing: border-box; }
          #point_list ol > li .item_inner .text_box .text {
            text-align: justify; }
            #point_list ol > li .item_inner .text_box .text > p {
              font-weight: 700; }
  #point_list .bg {
    position: absolute;
    z-index: -2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; }
    #point_list .bg > figure {
      width: 100%;
      height: 100%; }
      #point_list .bg > figure img.objectfit {
        object-position: right center; }

#point_answer {
  background: linear-gradient(180deg, #365ac2 0%, #2b4593 100%);
  padding-block: 65px;
  min-height: 640px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #FFF;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1; }
  #point_answer .wrapper {
    position: relative;
    z-index: 2; }
  #point_answer .answer_main {
    max-width: 78%; }
    #point_answer .answer_main .catch {
      line-height: 1.3;
      font-size: clamp(32px, 4.5vw, 59px);
      font-family: "Shippori Mincho B1", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
      font-weight: 500; }
      #point_answer .answer_main .catch > br {
        display: none; }
      #point_answer .answer_main .catch b {
        display: inline-block;
        margin-left: -.4em;
        background-color: #FFF;
        color: #365AC2;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        padding: 0 15px 5px; }
    #point_answer .answer_main .text {
      margin-top: 40px;
      text-align: justify; }
      #point_answer .answer_main .text > p {
        text-shadow: 1px 1px 3px #365AC2;
        font-size: clamp(13px, 2vw, 22px);
        font-weight: 700; }
        #point_answer .answer_main .text > p + p {
          margin-top: 1em; }
  #point_answer .img {
    position: absolute;
    z-index: -1;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 702px; }
    #point_answer .img > figure {
      width: 100%;
      height: 100%; }
      #point_answer .img > figure img.objectfit {
        object-position: left center; }

/* ------------------------------
 Publish Brands
------------------------------ */
#publish_site {
  margin-top: 100px; }
  #publish_site .h {
    text-align: center;
    line-height: 1.6;
    color: #243978;
    margin-bottom: 15px;
    font-size: clamp(17px, 3.2vw, 28px);
    font-weight: 500; }
  #publish_site .brands {
    background-color: #FFF;
    -webkit-border-radius: var(--radius-normal);
    border-radius: var(--radius-normal);
    padding: 50px 3vw; }
    #publish_site .brands figure {
      width: fit-content;
      margin-inline: auto; }

/* ------------------------------
 Works
------------------------------ */
#sec_works.section {
  margin-block: 80px 150px; }
  #sec_works.section .title_box {
    padding-block: 100px 20px;
    position: relative;
    z-index: 1; }
    #sec_works.section .title_box .title {
      position: absolute;
      z-index: -1;
      left: 0;
      top: 0;
      right: 0; }
    #sec_works.section .title_box .wrapper .morebtn {
      width: fit-content;
      margin-left: auto; }
  #sec_works.section .works_main {
    position: relative;
    z-index: 2; }
    #sec_works.section .works_main ul.works_list li {
      margin-inline: 30px; }
      #sec_works.section .works_main ul.works_list li a {
        display: block; }
        #sec_works.section .works_main ul.works_list li a .ph {
          width: 100%;
          aspect-ratio: 1.6 / 1;
          overflow: hidden;
          position: relative;
          -webkit-border-radius: var(--radius-normal);
          border-radius: var(--radius-normal); }
          #sec_works.section .works_main ul.works_list li a .ph img {
            position: absolute;
            left: 0;
            top: 0;
            transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
            backface-visibility: hidden; }
          #sec_works.section .works_main ul.works_list li a .ph::before {
            content: "";
            position: absolute;
            inset: 0;
            background-color: #1A2954;
            mix-blend-mode: multiply;
            opacity: 0;
            z-index: 1;
            transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
            backface-visibility: hidden; }
          #sec_works.section .works_main ul.works_list li a .ph::after {
            content: "詳しく見る";
            color: #fff;
            position: absolute;
            bottom: 15px;
            right: 40px;
            z-index: 2;
            opacity: 0;
            transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0.2s;
            backface-visibility: hidden; }
        #sec_works.section .works_main ul.works_list li a .data {
          margin: 15px 5px 0;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          color: #365AC2; }
          #sec_works.section .works_main ul.works_list li a .data .posttitle {
            line-height: 1.6;
            font-size: clamp(12px, 1.7vw, 24px);
            font-weight: 500; }
          #sec_works.section .works_main ul.works_list li a .data .tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 10px; }
            #sec_works.section .works_main ul.works_list li a .data .tags > span {
              display: block;
              width: fit-content;
              padding: 10px 20px 9px;
              line-height: 1;
              white-space: nowrap;
              background-color: #FFF;
              -webkit-border-radius: 99px;
              border-radius: 99px;
              font-size: .93em;
              font-weight: 700; }
        @media (any-hover: hover) {
          #sec_works.section .works_main ul.works_list li a:hover .ph img {
            filter: blur(2px); }
          #sec_works.section .works_main ul.works_list li a:hover .ph::before {
            opacity: .6; }
          #sec_works.section .works_main ul.works_list li a:hover .ph::after {
            opacity: 1;
            translate: 20px 0; } }

/* ------------------------------
 FAQ
------------------------------ */
#sec_faq.section {
  margin-inline: 20px;
  background: linear-gradient(180deg, #365ac2 0%, #2b4593 100%);
  -webkit-border-radius: var(--radius-normal);
  border-radius: var(--radius-normal);
  padding-block: 150px; }
  #sec_faq.section .wrapper {
    display: flex;
    justify-content: space-between; }
  #sec_faq.section .title_box {
    width: 100%;
    padding-right: 60px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFF; }
    #sec_faq.section .title_box .sec_title span {
      white-space: nowrap; }
    #sec_faq.section .title_box .sec_text {
      margin-top: 45px;
      text-align: justify; }
      #sec_faq.section .title_box .sec_text > p {
        line-height: 2.2;
        font-weight: 700; }
  #sec_faq.section .faq_main {
    width: 69%;
    flex-shrink: 0; }
    #sec_faq.section .faq_main ul.faq_list > li + li {
      margin-top: 30px; }
    #sec_faq.section .faq_main ul.faq_list > li .item_inner {
      background-color: #FFF;
      -webkit-border-radius: var(--radius-normal);
      border-radius: var(--radius-normal);
      overflow: hidden; }
      #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding-right: 70px;
        position: relative;
        z-index: 1;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden; }
        #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head .q {
          flex-shrink: 0;
          width: 120px;
          padding-block: 5px 15px;
          color: #FFF;
          text-align: center;
          position: relative;
          z-index: 1;
          overflow: hidden;
          font-family: "Shippori Mincho B1", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
          font-size: clamp(24px, 3.2vw, 40px);
          font-weight: 600; }
          #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head .q::before {
            content: "";
            position: absolute;
            z-index: -1;
            right: 0;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            width: 160px;
            height: 160px;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            background-color: #9CB6FF; }
        #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head > p {
          width: 100%;
          padding-left: 30px;
          line-height: 1.3;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          font-size: 1.125em;
          font-weight: 500; }
        #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head > i {
          position: absolute;
          z-index: 2;
          right: 30px;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          width: 16px;
          height: 16px; }
          #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head > i::before, #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head > i::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            margin-top: -1px;
            height: 1px;
            background-color: #1A2954; }
          #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head > i::after {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            transition: all 0.5s cubic-bezier(0.04, 0.435, 0.315, 0.9) 0s;
            backface-visibility: hidden; }
        #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head.openheader > i::after {
          background-color: #B1B1B1;
          -webkit-transform: rotate(0);
          transform: rotate(0); }
        @media (any-hover: hover) {
          #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head:hover {
            cursor: pointer; }
            #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head:hover > i::before, #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head:hover > i::after {
              background-color: #365AC2; } }
      #sec_faq.section .faq_main ul.faq_list > li .item_inner .a_body {
        border-top: #9CB6FF solid 1px;
        padding: 35px 40px; }
        #sec_faq.section .faq_main ul.faq_list > li .item_inner .a_body .text {
          text-align: justify; }
          #sec_faq.section .faq_main ul.faq_list > li .item_inner .a_body .text > p + p {
            margin-top: 1em; }
        #sec_faq.section .faq_main ul.faq_list > li .item_inner .a_body .links a.more {
          margin-top: 25px; }
          #sec_faq.section .faq_main ul.faq_list > li .item_inner .a_body .links a.more .view, #sec_faq.section .faq_main ul.faq_list > li .item_inner .a_body .links a.more .arrow {
            border-color: #E2E2E2; }
    #sec_faq.section .faq_main .morebtn {
      width: fit-content;
      margin-left: auto;
      margin-top: 30px; }

/* ------------------------------
 Company & Recruit
------------------------------ */
#sec_company.section,
#sec_recruit.section {
  margin-top: 20px;
  margin-inline: 20px;
  -webkit-border-radius: var(--radius-normal);
  border-radius: var(--radius-normal);
  overflow: hidden;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 400px; }
  #sec_company.section::before,
  #sec_recruit.section::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #1A2954;
    mix-blend-mode: multiply;
    opacity: .3; }
  #sec_company.section .title_box,
  #sec_recruit.section .title_box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 1200px;
    color: #FFF; }
    #sec_company.section .title_box .sec_title,
    #sec_recruit.section .title_box .sec_title {
      flex-shrink: 0;
      white-space: nowrap;
      padding-bottom: 15px; }
      #sec_company.section .title_box .sec_title .title .masu::before,
      #sec_recruit.section .title_box .sec_title .title .masu::before {
        right: .5em; }
      #sec_company.section .title_box .sec_title .title .masu::after,
      #sec_recruit.section .title_box .sec_title .title .masu::after {
        right: calc(11px + .5em); }
    #sec_company.section .title_box .sec_text,
    #sec_recruit.section .title_box .sec_text {
      padding-left: 3vw;
      text-align: right; }
      #sec_company.section .title_box .sec_text > p:not([class]),
      #sec_recruit.section .title_box .sec_text > p:not([class]) {
        font-weight: 700; }
      #sec_company.section .title_box .sec_text .morebtn,
      #sec_recruit.section .title_box .sec_text .morebtn {
        margin-top: 50px; }
        #sec_company.section .title_box .sec_text .morebtn a.more,
        #sec_recruit.section .title_box .sec_text .morebtn a.more {
          color: #1A2954;
          margin-left: auto; }
  #sec_company.section .bg,
  #sec_recruit.section .bg {
    position: absolute;
    z-index: -2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; }
    #sec_company.section .bg figure,
    #sec_recruit.section .bg figure {
      width: 100%;
      height: 100%; }

/* ------------------------------
 Form
------------------------------ */
#sec_form.section {
  padding-block: 120px; }
  #sec_form.section .title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; }
    #sec_form.section .title_box .sec_title {
      flex-shrink: 0;
      white-space: nowrap;
      padding-right: 3vw; }
    #sec_form.section .title_box .sec_text {
      text-align: right; }
      #sec_form.section .title_box .sec_text > p {
        font-weight: 700; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1600px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1600px) {
  /* ------------------------------
   Top
  ------------------------------ */
  #toparea #top_news {
    margin-inline: auto 50px; }
    #toparea #top_news .contentblock ul {
      column-gap: 30px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1400px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1400px) {
  /* ------------------------------
   Top
  ------------------------------ */
  #toparea {
    padding-block: 420px 290px; }
    #toparea #top_text {
      padding-inline: 7vw;
      padding-bottom: 160px; }
      #toparea #top_text .name {
        padding: 8px 25px; }
    #toparea #top_news {
      max-width: 80%; }

  #top_concept {
    padding-block: 180px 120px; }
    #top_concept .main {
      max-width: 72%; }
      #top_concept .main .copy {
        padding-left: 35px; }
      #top_concept .main .text1 {
        margin-top: 80px;
        font-size: 1.25em; }
      #top_concept .main .text2 {
        margin-top: 35px;
        padding-right: 30%; }
      #top_concept .main .morebtn {
        margin-top: 40px; }
    #top_concept .img1, #top_concept .img2 {
      right: 30px; }
    #top_concept .img1 {
      max-width: 37%; }
    #top_concept .img2 {
      max-width: 43%;
      bottom: 20px; }

  /* ------------------------------
   Point
  ------------------------------ */
  #point_list {
    padding-block: 140px; }
    #point_list ol > li {
      padding-block: 45px; }
      #point_list ol > li .item_inner .text_box {
        width: 54%; }

  #point_answer {
    min-height: 0;
    padding-block: 90px; }
    #point_answer .answer_main .catch b {
      padding: 0 12px 5px; }

  /* ------------------------------
   Publish Brands
  ------------------------------ */
  #publish_site .brands {
    padding: 45px 5vw; }

  /* ------------------------------
   Works
  ------------------------------ */
  #sec_works.section {
    margin-block: 65px 120px; }
    #sec_works.section .title_box {
      padding-block: 90px 20px; }
    #sec_works.section .works_main ul.works_list li {
      margin-inline: 20px; }

  /* ------------------------------
   FAQ
  ------------------------------ */
  #sec_faq.section {
    padding-block: 120px; }
    #sec_faq.section .faq_main ul.faq_list > li + li {
      margin-top: 20px; }
    #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head {
      padding-right: 60px; }
      #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head .q {
        width: 100px; }
        #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head .q::before {
          width: 140px;
          height: 140px; }
      #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head > p {
        padding-left: 25px;
        font-size: 1.1em; }

  /* ------------------------------
   Company & Recruit
  ------------------------------ */
  #sec_company.section,
  #sec_recruit.section {
    height: auto;
    display: block; }
    #sec_company.section .wrapper,
    #sec_recruit.section .wrapper {
      padding-block: 70px; }
    #sec_company.section .title_box,
    #sec_recruit.section .title_box {
      width: auto; }
      #sec_company.section .title_box .sec_text,
      #sec_recruit.section .title_box .sec_text {
        padding-left: 5vw;
        width: 100%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
        #sec_company.section .title_box .sec_text .morebtn,
        #sec_recruit.section .title_box .sec_text .morebtn {
          margin-top: 40px; }

  /* ------------------------------
   Form
  ------------------------------ */
  #sec_form.section {
    padding-block: 100px; }
    #sec_form.section .title_box {
      margin-bottom: 50px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 1200px )

------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1200px) {
  /* ------------------------------
   Top
  ------------------------------ */
  #toparea {
    margin: 15px;
    padding-block: 360px 260px; }
    #toparea #top_text {
      padding-inline: 5vw;
      padding-bottom: 120px; } }
  @media only screen and (max-width: 1200px) and (max-width: 959px) {
    #toparea {
      padding-block: 320px 240px; }
      #toparea #top_text {
        padding-bottom: 80px; }
        #toparea #top_text .catch {
          line-height: 1.6; }
        #toparea #top_text .name {
          padding: 7px 20px; }
      #toparea #top_news {
        margin-inline: auto;
        max-width: 100%;
        padding-inline: 5vw;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
        #toparea #top_news .contentblock ul {
          column-gap: 15px; } }

@media only screen and (max-width: 1200px) {
  #top_concept {
    padding-block: 100px 90px; } }
  @media only screen and (max-width: 1200px) and (max-width: 959px) {
    #top_concept .wrapper {
      padding-top: 0; }
    #top_concept .main {
      max-width: 100%; }
      #top_concept .main .copy {
        padding-left: 30px; }
        #top_concept .main .copy::before {
          width: 12px; }
      #top_concept .main .text1, #top_concept .main .text2 {
        padding-left: 5px; }
      #top_concept .main .text1 {
        margin-top: 50px; }
      #top_concept .main .text2 {
        margin-top: 20px;
        padding-right: 0; }
      #top_concept .main .morebtn {
        margin-top: 35px; }
    #top_concept .img1, #top_concept .img2 {
      position: static;
      right: auto;
      top: auto;
      bottom: auto; }
    #top_concept .img1 {
      max-width: 70%;
      margin-bottom: 60px; }
    #top_concept .img2 {
      max-width: 78%;
      margin-top: 5px;
      margin-left: auto; } }

@media only screen and (max-width: 1200px) {
  /* ------------------------------
   Point
  ------------------------------ */
  #point_list {
    padding-block: 90px; }
    #point_list ol > li {
      padding-block: 30px; }

  #point_answer {
    padding-block: 65px; }
    #point_answer .answer_main {
      max-width: 100%; }
      #point_answer .answer_main .catch {
        line-height: 1.6; }
        #point_answer .answer_main .catch > br {
          display: block; }
        #point_answer .answer_main .catch b {
          padding: 0 13px 4px;
          margin-left: .1em; }
      #point_answer .answer_main .text {
        margin-top: 30px; }

  /* ------------------------------
   Publish Brands
  ------------------------------ */
  #publish_site {
    margin-top: 80px; }
    #publish_site .brands {
      padding: 35px 6vw; }

  /* ------------------------------
   Works
  ------------------------------ */
  #sec_works.section {
    margin-block: 80px 150px; }
    #sec_works.section .title_box {
      padding-block: 35px 15px; }
    #sec_works.section .works_main ul.works_list li {
      margin-inline: 15px; }
      #sec_works.section .works_main ul.works_list li a .data {
        margin: 10px 3px 0; }
        #sec_works.section .works_main ul.works_list li a .data .tags {
          gap: 5px; }
          #sec_works.section .works_main ul.works_list li a .data .tags > span {
            padding: 9px 15px 8px;
            font-size: .9em; }

  /* ------------------------------
   FAQ
  ------------------------------ */
  #sec_faq.section {
    padding-block: 65px;
    margin-inline: 15px; }
    #sec_faq.section .wrapper {
      display: block; }
    #sec_faq.section .title_box {
      padding: 0 0 35px; }
      #sec_faq.section .title_box .sec_text {
        margin-top: 25px; }
        #sec_faq.section .title_box .sec_text > p {
          line-height: inherit; }
    #sec_faq.section .faq_main {
      width: auto; }
      #sec_faq.section .faq_main ul.faq_list > li .item_inner .a_body {
        padding: 30px 25px; }

  /* ------------------------------
   Company & Recruit
  ------------------------------ */
  #sec_company.section,
  #sec_recruit.section {
    margin-inline: 15px; }
    #sec_company.section .wrapper,
    #sec_recruit.section .wrapper {
      padding-block: 40px; }
    #sec_company.section .title_box .sec_title,
    #sec_recruit.section .title_box .sec_title {
      padding-bottom: 5px; }
    #sec_company.section .title_box .sec_text .morebtn,
    #sec_recruit.section .title_box .sec_text .morebtn {
      margin-top: 20px; } }
  @media only screen and (max-width: 1200px) and (max-width: 959px) {
    #sec_company.section .wrapper,
    #sec_recruit.section .wrapper {
      padding-block: 35px 40px; }
    #sec_company.section .title_box,
    #sec_recruit.section .title_box {
      display: block; }
      #sec_company.section .title_box .sec_title,
      #sec_recruit.section .title_box .sec_title {
        padding-bottom: 20px;
        margin-inline: auto;
        width: 95%;
        container-type: inline-size; }
        #sec_company.section .title_box .sec_title .title,
        #sec_recruit.section .title_box .sec_title .title {
          font-size: 7.7cqi; }
      #sec_company.section .title_box .sec_text,
      #sec_recruit.section .title_box .sec_text {
        padding-left: 0; } }

@media only screen and (max-width: 1200px) {
  /* ------------------------------
   Form
  ------------------------------ */
  #sec_form.section {
    padding-block: 65px 90px; }
    #sec_form.section .title_box {
      display: block;
      margin-bottom: 50px; }
      #sec_form.section .title_box .sec_title {
        padding: 0 0 30px; }
      #sec_form.section .title_box .sec_text {
        text-align: justify; }
        #sec_form.section .title_box .sec_text br {
          display: none; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  /* ------------------------------
   Top
  ------------------------------ */
  #toparea {
    padding-block: 220px 170px; }
    #toparea #top_text {
      padding-bottom: 50px; }
      #toparea #top_text .catch b {
        padding: 0 9px 4px; }
      #toparea #top_text .name {
        margin-top: 15px;
        padding: 3px 6px;
        letter-spacing: 0; }
      #toparea #top_text .text {
        margin-top: 10px; }
    #toparea #top_news .title_box .morebtn a.more .arrow {
      width: 32px;
      height: 32px; }
    #toparea #top_news .contentblock ul {
      grid-template-columns: repeat(2, 1fr); }
      #toparea #top_news .contentblock ul li:nth-of-type(3) {
        display: none; }
    #toparea .img1 {
      max-width: 73vw; }
    #toparea .img2 {
      max-width: 50vw; }

  #top_concept {
    padding-block: 70px; }
    #top_concept .main .copy {
      padding-left: 20px; }
      #top_concept .main .copy::before {
        width: 7px; }
    #top_concept .main .text1, #top_concept .main .text2 {
      padding-left: 0; }
    #top_concept .main .text1 {
      margin-top: 35px;
      font-size: 1.2em; }
    #top_concept .main .text2 {
      margin-top: 35px; }
    #top_concept .main .morebtn {
      margin-top: 35px; }
    #top_concept .img1 {
      margin-bottom: 45px; }
    #top_concept .img2 {
      margin-top: 15px; }

  /* ------------------------------
   Point
  ------------------------------ */
  #point_list {
    padding-block: 80px; }
    #point_list ol > li {
      padding-block: 30px; }
      #point_list ol > li .item_inner {
        display: block; }
        #point_list ol > li .item_inner .title_box {
          padding: 0 0 10px; }
        #point_list ol > li .item_inner .text_box {
          width: auto; }
    #point_list .bg > figure img.objectfit {
      object-position: center center; }

  #point_answer {
    padding-block: 45px; }
    #point_answer .answer_main .catch {
      line-height: 1.4; }
      #point_answer .answer_main .catch b {
        padding: 0 7px 3px; }
    #point_answer .answer_main .text {
      margin-top: 20px; }
    #point_answer .img {
      max-width: 92%; }

  /* ------------------------------
   Publish Brands
  ------------------------------ */
  #publish_site {
    margin-top: 60px; }
    #publish_site .h {
      margin-bottom: 10px; }
    #publish_site .brands {
      padding: 20px 6vw; }

  /* ------------------------------
   Works
  ------------------------------ */
  #sec_works.section {
    margin-block: 40px 80px; }
    #sec_works.section .title_box {
      padding-block: 15px 10px; }
    #sec_works.section .works_main ul.works_list li {
      margin-inline: 10px; }
      #sec_works.section .works_main ul.works_list li a .data {
        margin: 10px 0 0; }
        #sec_works.section .works_main ul.works_list li a .data .tags {
          gap: 10px; }
          #sec_works.section .works_main ul.works_list li a .data .tags > span {
            padding: 5px 12px 4px;
            font-size: .85em; }

  /* ------------------------------
   FAQ
  ------------------------------ */
  #sec_faq.section {
    padding-block: 40px; }
    #sec_faq.section .title_box {
      padding-bottom: 25px; }
      #sec_faq.section .title_box .sec_text {
        margin-top: 15px; }
    #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head {
      padding-right: 40px; }
      #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head .q {
        width: 40px;
        padding-block: 5px 12px; }
      #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head > p {
        padding: 10px 0 10px 15px;
        font-size: 1em; }
      #sec_faq.section .faq_main ul.faq_list > li .item_inner .q_head > i {
        right: 20px;
        width: 12px;
        height: 12px; }
    #sec_faq.section .faq_main .morebtn {
      margin-top: 20px; }

  /* ------------------------------
   Company & Recruit
  ------------------------------ */
  #sec_company.section .wrapper,
  #sec_recruit.section .wrapper {
    padding-block: 45px 30px; }
  #sec_company.section::before,
  #sec_recruit.section::before {
    opacity: .2; }
  #sec_company.section .title_box .sec_title,
  #sec_recruit.section .title_box .sec_title {
    width: 100%; }
    #sec_company.section .title_box .sec_title .title,
    #sec_recruit.section .title_box .sec_title .title {
      font-size: 6.8cqi; }
  #sec_company.section .title_box .sec_text p:not([class]),
  #sec_recruit.section .title_box .sec_text p:not([class]) {
    letter-spacing: 0; }

  /* ------------------------------
   Form
  ------------------------------ */
  #sec_form.section {
    padding-block: 50px 60px; }
    #sec_form.section .title_box {
      margin-bottom: 25px; }
      #sec_form.section .title_box .sec_title {
        padding-bottom: 20px;
        width: 95%;
        container-type: inline-size; }
        #sec_form.section .title_box .sec_title .title {
          font-size: 8.6cqi; } }