@charset "UTF-8";

/* START 全体設定 */

@import url("//fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap");

p {
    line-height: 2;
    letter-spacing: 0.06em;
}

.lg-container {
  text-align: left;
}

/* END 全体設定 */

/* START FV */

#article_fv {
    position: relative;
    background-image: url(../img/story03/article_mv.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100vh;
    z-index: 1;
}

.article_fv_img_sp {
    display: none;
}

.article_fv_txt {
    position: fixed;
    bottom: 10%;
    left: 8%;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.article_fv_txt h1 {
    font-size: 46px;
    line-height: 1.6;
    margin-bottom: 3rem;
}

.article_fv_txt p {
    font-size: 20px;
}

@media only screen and (max-width: 999px) {

    #article_fv {
        display: none;
    }

    .article_fv_img_sp{
        display: block;
    }

    .article_fv_img_sp img{
        width: 100%;
    }

    .article_fv_txt_sp {
      width: 90%;
      margin: 32px auto 48px;
      font-weight: 600;
      font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    }

    .article_fv_txt_sp h1 {
        color: #14135D;
        letter-spacing: 0.08em;
        font-size: 1.5rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .article_fv_txt_sp p {
      font-size: 1rem;
  }

}

/* END FV */

/* START CONTENT 設定 */

.article_content {
    position: relative;
    z-index: 2;
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* END CONTENT 設定 */

/* START メンバー紹介 */

#article_member_wrap {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
    position: relative;
    z-index: 9;
}

@media only screen and (min-width: 1200px) {
  #article_member_wrap {
    width: 90%;
    margin: 0 auto;
    background: #fff;
    position: relative;
    z-index: 9;
  }
}


@media only screen and (max-width: 1300px) {
  #article_member_wrap {
    width: 90%;
    margin: 0 auto;
    background: #fff;
    padding: 0 0 100px;
  }
}

@media only screen and (max-width: 1200px) {
  #article_member_wrap {
    width: 90%;
    margin: 0 auto;
    background: #fff;
    padding: 0 0 100px;
  }
}

.article_profile_title {
  display: flex;
  gap: 2%;
  align-items: end;
  color: #14135D;
  max-width: 1200px;
  margin: 0 0 60px;
}

@media only screen and (max-width: 1200px) {
  .article_profile_title {
    display: flex;
    gap: 2%;
    align-items: end;
    color: #14135D;
    width: 90%;
    margin: 0 0 60px;
  }
}

.article_profile_title_main{
  font-size: 4rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  z-index: 9;
}

#article_member_wrap_sp {
  display: none;
}

#article_member_wrap ul{
    display: flex;
    gap: 40px;
    justify-content: space-between;
}

#article_member_wrap li{
  width: 100%;
}

.article_member_profile img {
    width: 144px;
    margin-bottom: 1rem;
}

.article_member_position {
    font-weight: 600;
    color: #14135D;
    margin-bottom: .2rem;
}

.article_member_name {
    font-weight: 600;
    font-size: 1.7rem;
}

.article_member_name_en {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    letter-spacing: 0.03;
    font-size: 0.9rem;
    color: #ADAEB0;
    margin-bottom: .6rem;
}

.article_member_overview {
    width: 100%;
    font-size: 0.9rem;
}

@media only screen and (max-width: 999px) {

  #article_member_wrap {
    display: none;
  }

  .article_profile_title {
    display: flex;
    gap: 2%;
    align-items: end;
    margin-bottom: 2rem;
    color: #14135D;
    margin: 0 0 40px;
  }

  .article_profile_title_main{
    font-size: 3rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
  }

  #article_member_wrap_sp {
    position: relative;
    display: block;
    width: 90%;
    margin: 40px auto 80px;
    overflow: scroll;
  }

  #article_sp_scroll img{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .article_member_layout_sp {
    display: flex;
    gap: 1rem;
  }

  .article_member_detail_wrap {
    width: 180px;
  }


  #article_member_wrap {
    /* white-space: nowrap; */
    overflow: scroll;
    background: #fff;
    padding: 32px 0 32px;
  }

  #article_member_wrap_sp ul{
    display: flex;
    gap: 32px;
  }

  .article_member_profile img {
    width: 102px;
    height: 127px;
    margin-bottom: 1rem;
}

  .article_member_position {
    font-size: 0.8rem;
  }

  .article_member_name {
    font-size: 1.4rem;
    line-height: 1.5;
  }
  

  .article_member_overview {
    font-size: 0.9rem;
  }

  .article_member_name_en {
    font-size: 0.8rem;
  }

}

/* #article_member_wrap_sp::before {
  content: "";
  display: block;
  background: url(../img/story03/article_sp_scroll.png) no-repeat center right/100%;
  width: 110px;
  height: 110px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  animation: swipeScroll 3s infinite;
  z-index: 5;
  transition: 0.6s ease;
  pointer-events: none;
} */

/* END メンバー紹介 */

/* START 記事概要 */


#article_summary p{
  max-width: 1000px;
  margin: 0 auto;
  padding: 200px 0 200px;
  font-weight: 400;
  line-height: 2.2;
  font-size: 16px;
}

.article_annotation {
  font-size: 14px;
  margin-top: 16px;
}

@media only screen and (max-width: 999px) {
  #article_summary p{
    width: 90%;
    margin: 0 auto 84px;
    padding: 0;
    font-weight: 400;
    line-height: 2.2;
  }
}

/* END 記事概要 */

/* START 目次 */

#article_index {
    max-width: 1000px;
    margin: 0 auto;
    padding: 100px 0 200px;
}

.article_index_sp {
display: none;
}

.article_index_box {
    background: #EFEFEF;
    padding: 5% 7%;
    border-radius: 6px;
}

.article_index_box_sp {
  display: none;
}

.article_index_box_title {
    font-weight: 600;
    margin-bottom: 1rem;
}

.article_index_box h2 img{
    margin-right: .5rem;
}

.article_index_box a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #D7DCDD;
    text-decoration: none;
    color: #3C3C3C;
    padding: 1.2rem 0;
}

.article_index_box p{
    width: 94%;
}

#article_index img{
    width: 16px;
    height: 10px;
}


@media only screen and (max-width: 999px) {
  #article_index {
    display: none;
  }

  #article_index_sp {
    display: block;
    width: 90%;
    margin: 0 auto;
    padding: 0 0 64px;
  }


  .article_index_box_sp {
    display: block;
    background: #EFEFEF;
    padding: 5% 7%;
    border-radius: 6px;
  }

  .article_index_box_title {
    font-weight: 600;
    margin-bottom: 1rem;
}

.article_index_box_sp h2 img{
    margin-right: .5rem;
}

.article_index_box_sp a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #D7DCDD;
    text-decoration: none;
    color: #3C3C3C;
    padding: 1.2rem 0;
}

.article_index_box_sp p{
    width: 94%;
}

#article_index_sp img{
    width: 16px;
    height: 10px;
}

  


  #article_index_sp img{
    width: 16px;
    height: 10px;
  }

  .article_index_box {
    background: #EFEFEF;
    padding: 10%;
    border-radius: 6px;
  }

  .article_index_box a {
    gap: 10px;
  }
}

/* END 目次 */

/* START 記事本文 */

.article_body_fixed_bg {
  position: relative;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 3;
  height: 100%;
  color: #FFF;
  padding: 8%;
}

.article_body_sp {
  display: none;
}

.article_body_fixed_bg.article_body_bg_01  {
background-image: url('../img/story03/article_fixed_bg_01.jpg');
}

.article_body_fixed_bg.article_body_bg_02  {
background-image: url('../img/story03/article_fixed_bg_02.jpg');
}

.article_body_fixed_bg.article_body_bg_03  {
background-image: url('../img/story03/article_fixed_bg_03.jpg');
}

.article_body_fixed_bg.article_body_bg_04  {
background-image: url('../img/story03/article_fixed_bg_04.jpg');
}

.article_body_fixed_bg.article_body_bg_05  {
    background-image: url('../img/story03/article_fixed_bg_05.jpg');
}

.article_body_fixed_bg.article_body_bg_06  {
  background-image: url('../img/story03/article_fixed_bg_06.jpg');
}



.article_story_area_left {
    position: absolute;
    left: 50%;
    width: 54%;
    padding: 2% 12% 2% 0;
}

.article_story_box_left {
    position: relative;
    background-color: rgba(26,28,83,0.6);
    padding: 12% 10%;
    border-radius: 6px;
}


.article_story_area_right {
    position: absolute;
    right: 50%;
    width: 54%;
    padding: 2% 0 2% 12%;
}

.article_story_box_right {
    position: relative;
    background-color: rgba(26,28,83,0.6);
    padding: 12% 10%;
    border-radius: 6px;
}


.article_story_area_center {
    position: absolute;
    left: 20%;
    right: 25%;
    width: 54%;
    padding: 2% 0 2% 12%;
}

.article_story_box_center {
    position: relative; 
    background-color: rgba(26,28,83,0.6);
    padding: 12% 10%;
    border-radius: 6px;
}

.article_story_box_last {
  position: relative; 
  padding: 12% 10%;
}

.article_story_box_txt {
    letter-spacing: .2rem;
}

.article_story_box_title {
    font-size: 2rem;
    line-height: 1.6;
    font-weight: 600;
    margin-bottom: 40px;
}

.article_story_txt {
    margin: 32px 0;
}

.article_story_name {
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 16px;
}

.article_story_txt p {
    line-height: 2.2;
}

.article_story_txt_image img{
  width: 100%;
  margin: 32px auto;
}

.article_last_txt {
    position: relative;
}

.article_last_bg{
  width:100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.article_last_message {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 30%;
  height: auto;
}

.article_last_message img{
  width:100%;
  height: auto;
}

.article_txt_link {
  cursor: pointer;
  border-bottom: 1px solid #3A99D0;
  color: #3A99D0;
  text-decoration:none;
}

.article_story_annotation {
  font-size: 14px;
  margin-top: 24px;
}

.article_last_txt_sp {
  display: none;
}

@media only screen and (max-width: 1200px) {
  .article_story_txt h3 {
    font-weight: 600;
    margin-top: 8px;
    letter-spacing: 0;
  }
}


@media only screen and (max-width: 999px) {
  .article_body_fixed_bg {
    display: none;
  }

  .article_body_sp {
    display: block;
  }

  .article_body_sp img{
    width: 100%;
    display: block;
  }
  .article_story_area_sp {
    width: 90%;
    margin: 48px auto;
  }

  .article_story_box_title {
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: 600;
    margin-bottom: 32px;
    color: #14135D;
    letter-spacing: .1rem;
  }

  .article_last_txt {
    display: none;
  }

  .article_last_txt_sp {
    display: block;
  }

  .article_last_txt_sp img{
    display: block;
    width: 70%;
    margin: 100px auto 100px;
  }
}

/*ナビゲーションの固定*/
.article_scrollsection_nav {
  position: fixed;
  z-index: 90;
  bottom: 4.43vw;
  left: 2.875vw;
}

.article_scrollsection_nav_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.article_side_circle {
  margin: 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(20,19,93,0.35);
  transition: all 0.3s ease;
}


.article_scrollsection_nav_item {
  margin-bottom: 20px;
}

.article_scrollsection_nav_item:last-child {
  margin-bottom: 0;
}

.article_scrollsection_nav {
  display: none;
}

.article_story_postscript {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 20px;
}


/* END 記事本文 */

/* START フッターリンク （アイズさんコーディングより引用）*/
/*--------------------------------------------------------------------------
   link
---------------------------------------------------------------------------*/
 .link {
  position: relative;
  z-index: 0;
  padding: 105px 0 130px;
  background: #14135D;
  color: #fff;
  z-index: 9;
}
 .link_content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
   .link_content {
    padding: 0 6%;
  }
}
@media only screen and (max-width: 599px) {
   .link_content {
    padding: 0 6%;
  }
}
 .link_lead {
  font-size: 100%;
  font-weight: 600;
  line-height: 2;
  letter-spacing: 0.03em;
  text-align: center;
}
@media only screen and (max-width: 599px) {
   .link_lead {
    font-size: 87.5%;
    line-height: 1.8;
    text-align: left;
  }
}
 .link_body {
  margin-top: 65px;
}
@media only screen and (max-width: 599px) {
   .link_body {
    margin-top: 38px;
  }
}
@media only screen and (max-width: 599px) {
   .link_area._solution .link_area_btn {
    position: relative;
    background: url("../img/story03/link_solution_bg_sp.jpg") no-repeat 50% 50%/cover;
  }
   .link_area._solution .link_area_btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 19, 93, .85);
  }
}
@media only screen and (max-width: 599px) {
   .link_area._contact {
    margin-top: 25px;
  }
}
 .link_area._contact .link_area_btn {
  position: absolute;
  top: 234px;
  left: calc(50% + 29px);
}
@media screen and (min-width: 999px) and (max-width: 1230px) {
   .link_area._contact .link_area_btn {
    left: auto;
    right: 10px;
  }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
   .link_area._contact .link_area_btn {
    top: 234px;
    left: auto;
    right: 6%;
  }
}
@media only screen and (max-width: 599px) {
   .link_area._contact .link_area_btn {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    background: url("../img/story03/link_contact_bg_sp.jpg") no-repeat 50% 50%/cover;
  }
   .link_area._contact .link_area_btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 19, 93, .85);
  }
}
 .link_area_btn {
  max-width: 566px;
  width: 47.66%;
  aspect-ratio: 572/320;
  /*.mode-pc &:hover,
  .mode-sp &:hover {
    a {
      &::before {
        opacity: 1;
      }

      .link_area_btn_icon {
        background: #93FFF9;
        transform: scale(1.1);

        &::before {
          opacity: 0;
        }

        &::after {
          opacity: 1;
        }
      }
    }

    & + .link_area_bg {
      opacity: 1;
    }
  }*/
}
@media screen and (min-width: 999px) and (max-width: 1230px) {
   .link_area_btn {
    width: 46vw;
  }
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
   .link_area_btn {
    width: 41vw;
  }
}
@media only screen and (max-width: 599px) {
   .link_area_btn {
    width: auto;
    aspect-ratio: 335/188;
  }
}
 .link_area_btn:not(:first-of-type) {
  margin-left: auto;
}
@media only screen and (max-width: 599px) {
   .link_area_btn:not(:first-of-type) {
    margin: 0;
  }
}
 .link_area_btn a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 40px;
  border: 3px solid rgba(255, 255, 255, .6);
  border-radius: 24px;
  color: #fff;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
   .link_area_btn a {
    padding: 3.33vw;
  }
}
@media only screen and (max-width: 599px) {
   .link_area_btn a {
    padding: 20px;
    border-radius: 11px;
  }
}
 .link_area_btn a::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 101%;
  height: 102%;
  border-radius: 24px;
  border: 5px solid white;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
 .link_area_btn_title {
  font-family: "Montserrat", sans-serif;
  font-size: 73px;
  font-weight: 400;
  letter-spacing: -0.03em;
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
   .link_area_btn_title {
    font-size: 6vw;
  }
}
@media only screen and (max-width: 599px) {
   .link_area_btn_title {
    font-size: 41px;
  }
}
 .link_area_btn_text {
  margin-top: 10px;
  font-size: 100%;
  font-weight: 400;
  letter-spacing: 0.06em;
}
@media only screen and (max-width: 599px) {
   .link_area_btn_text {
    font-size: 87.5%;
  }
}
 .link_area_btn_icon {
  display: block;
  position: absolute;
  right: 40px;
  bottom: 35px;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  line-height: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (min-width: 600px) and (max-width: 999px) {
   .link_area_btn_icon {
    right: 3.33vw;
    bottom: 2.91vw;
    width: 5vw;
    height: 5vw;
  }
}
@media only screen and (max-width: 599px) {
   .link_area_btn_icon {
    right: 23px;
    bottom: 20px;
    width: 35px;
    height: 35px;
  }
}
 .link_area_btn_icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3A99D0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media only screen and (max-width: 599px) {
   .link_area_btn_icon::before {
    width: 3px;
    height: 3px;
  }
}
 .link_area_btn_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 7px;
  height: 12px;
  background: url("../img/story03/link_arrow_icon.svg") no-repeat 50% 50%/contain;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mode-pc  .link_area_btn._hover:not(:hover), .mode-sp  .link_area_btn._hover:not(:hover) {
  opacity: 0.3;
}
@media screen and (min-width: 600px) {
   .link_area_btn:hover a::before {
    opacity: 1;
  }
   .link_area_btn:hover a .link_area_btn_icon {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
   .link_area_btn:hover a .link_area_btn_icon::before {
    opacity: 0;
  }
   .link_area_btn:hover a .link_area_btn_icon::after {
    opacity: 1;
  }
   .link_area_btn:hover + .link_area_bg {
    opacity: 1;
  }
   .link_area_btn:hover + .link_area_bg .link_area_bg_svg svg .link_area_g > g {
    opacity: 1;
    translate: 0 0;
  }
   .link_area_btn:hover + .link_area_bg .link_area_bg_svg svg .link_area_1 {
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
  }
   .link_area_btn:hover + .link_area_bg .link_area_bg_svg svg .link_area_2 {
    -webkit-transition-delay: 0.05s;
            transition-delay: 0.05s;
  }
   .link_area_btn:hover + .link_area_bg .link_area_bg_svg svg .link_area_3 {
    -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
  }
   .link_area_btn:hover + .link_area_bg .link_area_bg_svg svg .link_area_4 {
    -webkit-transition-delay: 0.15s;
            transition-delay: 0.15s;
  }
   .link_area_btn:hover + .link_area_bg .link_area_bg_svg svg .link_area_5 {
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
   .link_area_btn:hover + .link_area_bg .link_area_bg_svg svg .link_area_6 {
    -webkit-transition-delay: 0s;
            transition-delay: 0s;
  }
   .link_area_btn:hover + .link_area_bg .link_area_bg_svg svg .link_area_7 {
    -webkit-transition-delay: 0.05s;
            transition-delay: 0.05s;
  }
   .link_area_btn:hover + .link_area_bg .link_area_bg_svg svg .link_area_8 {
    -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
  }
   .link_area_btn:hover + .link_area_bg .link_area_bg_svg svg .link_area_9 {
    -webkit-transition-delay: 0.15s;
            transition-delay: 0.15s;
  }
   .link_area_btn:hover + .link_area_bg .link_area_bg_svg svg .link_area_10 {
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
}
.mode-sp  .link_area_btn:active a::before {
  opacity: 1;
}
.mode-sp  .link_area_btn:active a .link_area_btn_icon {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.mode-sp  .link_area_btn:active a .link_area_btn_icon::before {
  opacity: 0;
}
.mode-sp  .link_area_btn:active a .link_area_btn_icon::after {
  opacity: 1;
}
 .link_area_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
 .link_area_bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 19, 93, .85);
}
 .link_area_bg::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/story03/link_area_bg.svg") no-repeat 50% 50%/contain;
  -webkit-transform: translate(-20%, 20%);
          transform: translate(-20%, 20%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
 .link_area_bg_svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
 .link_area_bg_svg svg {
  width: 100%;
  height: 100%;
  scale: 1.4;
}
 .link_area_bg_svg svg .link_area_g > g {
  opacity: 0;
  translate: -10% 10%;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
 .link_area_bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}


.asterisk {
  font-size: 11px;
  vertical-align: top;
}