@charset "UTF-8";

:root {
  /* 色管理用の変数 */
  --black-color: #081F31;
  --white-color: #fff;
  --cream-color: #F8F4EA;
  --gray-color: #969FA7;
  --light-gray-color: #dfe0e2;
  --blue-background: #6792B8;
  --blue-txt: #336F9F;
  --pink-background: #C488A3;
  --pink-txt: #B87D98;
}

:root {
  /* コンテンツ幅管理用の変数 */
  --content-width-sm: 800px;
  --content-width-lg: 1130px;
}

:root {
  /* z-index管理用の変数 */
  --z-index-back: -1;
  --z-index-default: 1;
  --z-index-header: 100;
  --z-index-overlay: 150;  
  --z-index-menu: 200;
  --z-index-modal: 250;
}

/* ---------- base ---------- */

body {
  color: var(--black-color);
  background: var(--cream-color);
  font-size: 16px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  line-height: 1.8;
  letter-spacing: 0.1em;
  text-align: justify;
  z-index: var(--z-index-default);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

/* ---------- utility ---------- */



/* ---------- layout ---------- */
.l_contents-top{
  width: 100%;
  padding: 20px 16px;
  height: 100svh;
  position: relative;
}
@media screen and (min-width: 830px) {
  .l_contents-top{
    padding: 64px 8%;
  }
}

.l_contents{
  max-width: var(--content-width-lg);
  margin: 0 auto;
  padding: clamp(5rem, 3.964rem + 4.42vw, 7.5rem) clamp(1rem, 0.793rem + 0.88vw, 1.5rem);/*16-24*/ /*80-120*/
}

.l_contents-cta{
  max-width: var(--content-width-lg);
  margin: 0 auto;
  padding-top: clamp(5rem, 3.964rem + 4.42vw, 7.5rem);/*80-120*/
  padding-bottom: 64px;
  padding-left: clamp(1rem, 0.793rem + 0.88vw, 1.5rem);/*16-24*/
  padding-right: clamp(1rem, 0.793rem + 0.88vw, 1.5rem);/*16-24*/
}

.l_contents-sm{
  max-width: var(--content-width-sm);
  margin: 0 auto;
  padding: clamp(5rem, 3.964rem + 4.42vw, 7.5rem) 16px;/*80-120*/
}

.l_contents-people{
  max-width: var(--content-width-sm);
  margin: 0 auto;
  padding-top: clamp(2rem, 1.171rem + 3.54vw, 4rem);/*32-64px*/
}

.l_contents_works{
  max-width: var(--content-width-sm);
  margin: 0 auto;
  padding: 40px 16px;
}

.l_pink-background{
  color: var(--white-color);
  background: var(--pink-background);
}

.l_blue-background{
  color: var(--white-color);
  background: var(--blue-background);
}

/* ---------- ヘッダー ---------- */

.l_header{
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
  z-index: var(--z-index-header);
}
@media screen and (min-width: 830px) {
  .l_header{
    flex-direction: column;
    justify-content: flex-start;
  }
}

.l_header-logo_link{
  display: inline-block;
  text-align: center;
}

.l_header-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 右寄せ */
  opacity: 1;
  pointer-events: auto;
  background: transparent; /* PCでは背景なし */
  width: auto;
  height: auto;
}
@media (min-width: 830px) {
  .l_header-nav{
    position: absolute;
    bottom: 8%;
    left: 8%;
  }
}

.l_header-nav_list{
  z-index: var(--z-index-menu);
  display: flex;
  flex-direction: column;
  padding-top: 100px;
}
@media (min-width: 768px) {
  .l_header-nav_list{
    padding-top: 0;
  }
}

.l_header-nav_item {
  display: inline-block;
  transition: 0.4s;
}

.l_header-nav_link {
  color: var(--blue-txt);
}

.l_header-nav_item:hover{
  opacity: 0.4;
  transition: 0.4s;
}

.l_header-nav_link_contact {
  color: var(--pink-txt);
}

.header-logo_title{
  color: var(--blue-txt);
  font-size: 36px;
  font-weight: bold;
  line-height: 1.1;
}
@media (min-width: 830px) {
  .header-logo_title{
    font-size: 56px;
  }
}

.header-logo_sub{
  color: var(--blue-txt);
  font-weight: bold;
}
@media (min-width: 830px) {
  .header-logo_sub{
    font-size: 24px;
  }
}

.header_menu{
  color: var(--blue-txt);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 1440px) {
  .header_menu{
    gap: clamp(2rem, -8rem + 11.11vw, 4rem);/*32-56*/
  }
}

.l_header-menu_logo{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  margin-top: 64px;
}

@media (min-width: 830px) {
  .l_header-menu_logo{
    display: none;
  }
}

/* ---------- 下層ヘッダー ---------- */

.l_header_lower{
  background: var(--cream-color);
  box-shadow: 1px 1px 3px rgba(130, 134, 145, 0.2);
  width: 100%;
  height: 72px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: var(--z-index-header);
}

.l_header-logo_link_lower{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.header-logo_title_lower{
  color: var(--blue-txt);
  font-size: 32px;
  font-weight: bold;
}

.header-logo_sub_lower{
  color: var(--blue-txt);
  font-size: 14px;
  font-weight: bold;
}

.l_header-nav_lower{
  font-weight: 500;
  display: flex;
  flex-direction: row;
}

.l_header-nav_list_lower{
  display: flex;
  flex-direction: row;
}
@media (max-width: 830px) {
  .l_header-nav_list_lower{
    display: flex;
    flex-direction: column;
    padding: 64px 0;
  }
}

.header_menu_lower{
  display: flex;
  gap: 24px;
}
@media (max-width: 830px) {
  .header_menu_lower{
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
}

@media screen and (min-width: 830px) {
  .m_sns.lower{
    display: none;
  }
}

/* ---------- module ---------- */

.m_opening {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: var(--z-index-modal);
  background: var(--blue-background);
  display: flex;
}

.m_opening_txt {
  text-align: center;
  margin: auto;
}

.m_opening_heading {
  color: var(--white-color);
  font-size: 36px;
  font-weight: bold;
  line-height: 1.0;
}

@media screen and (min-width: 830px) {
  .m_opening_heading {
    font-size: 50px;
  }
}

.m_opening_desc {
  color: var(--white-color);
  font-weight: bold;
  font-size: 16px;
}
@media screen and (min-width: 830px) {
  .m_opening_desc {
    font-size: 24px;
  }
}

.m_sns{
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 40px;
}
@media (min-width: 830px) {
  .m_sns{
    margin-top: clamp(4rem, -9.571rem + 16.96vw, 8.75rem);/*64-140*/
  }
}

.m_sns_item{
  font-size: 14px;
  color: var(--blue-txt);
  display: inline-block;
  width: fit-content;
  border-bottom: 1px solid var(--blue-txt);
  transition: 0.4s;
}

.m_sns_item:hover{
  opacity: 0.6;
  transition: 0.4s;
}

.m_sns_link{
  display: flex;
  gap: 6px;
}


.m_sns_arrow{
  position: relative;
  display: inline-block;
  width: 10px;
  height: 1px;
  margin-top: 14px;
  border-radius: 100vmax;
  background-color: var(--blue-txt);
  rotate: -45deg;
}

.m_sns_arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 4px;
  height: 1px;
  border-radius: 9999px;
  background-color: var(--blue-txt);
  transform: rotate(45deg);
  transform-origin: calc(100% - 2px) 50%;
}

.m_hamburger{
  color: var(--blue-txt);
  right: 20px;
  z-index: var(--z-index-menu);
}

@media screen and (min-width: 830px) {
  .m_hamburger {
    display: none;
  }
}

.m_hamburger_top{
  position: fixed;
}

.m_hambureger-bar_wrap{
  width: 40px;
  height: 40px;
  border: 1px solid var(--blue-txt);
  border-radius: 100vmax;
  position: relative;
  z-index: var(--z-index-menu);
}

.m_hamburger-bar {
  width: 20px;
  height: 2px;
  border-radius: 100vmax;
  position: absolute;
  background: var(--blue-txt);
  left: 50%;
  transition: 0.3s;
}

.m_hamburger-bar:first-child {
  top: 35%;
  transform: translate(-50%, 0);
}

.m_hamburger-bar:nth-child(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}

.m_hamburger-bar:last-child {
  top: 66%;
  transform: translate(-50%, -100%);
}


.m_btn{
  border-radius: 100vmax;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}


.m_btn__white{
  color: var(--blue-txt);
  background: var(--white-color);
  font-weight: bold;
  padding: 24px 32px;
  transition: .3s;
}

.m_btn__white:hover{
  background: var(--blue-background);
  color: var(--white-color);
  outline: 1px solid var(--white-color);
  transition: .3s;
}

.m_btn__white::after{
  content: "";
  background: var(--blue-background);
  width: 14px;
  height: 14px;
  border-radius: 100vmax;
  transition: .3s;
}

.m_btn__white:hover::after{
  background: var(--white-color);
  transition: .3s;
}

.m_btn__blue{
  color: var(--blue-txt);
  background: var(--white-color);
  border: 1px solid var(--blue-txt);
  font-weight: bold;
  padding: 16px 32px;
  transition: .3s;
}

.m_btn__blue:hover{
  background: var(--blue-background);
  color: var(--white-color);
  border: 1px solid var(--white-color);
  box-sizing: border-box;
}

.m_btn__blue::after{
  content: "";
  background: var(--blue-background);
  width: 12px;
  height: 12px;
  border-radius: 100vmax;
  transition: .3s;
}

.m_btn__blue:hover::after{
  background: var(--white-color);
}

.m_btn_input-box{
  width: 300px;
  color: var(--blue-txt);
  background: var(--white-color);
  border: 1px solid var(--blue-background);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 32px;
  transition: .3s;
  border-radius: 100vmax;
}

.m_btn_input-box:hover{
  background: var(--blue-background);
  color: var(--white-color);
  box-sizing: border-box;
}

.m_btn_input{
  font-size: 18px;
  font-weight: bold;
}


.m_section_title{
  color: var(--white-color);
  margin-bottom: 32px;
}

.m_section_title_box{
  display: flex;
  gap: 6px;
  align-items: center;
}

.m_section_title_dot.blue{
  color: var(--blue-background);
}

.m_section_title_eng{
  font-size: clamp(0.875rem, 0.823rem + 0.22vw, 1rem);/*14-16*/
  font-weight: bold;
}

.m_section_title_eng.gray{
  color: var(--gray-color);
}

.m_section_title_jp{
  font-size: clamp(1.5rem, 1.241rem + 1.1vw, 2.125rem);/*24-36*/
  font-weight: bold;
}

.m_section_title_jp.blue{
  color: var(--blue-txt);
}

.m_section_detail{
  color: var(--black-color);
  margin-top: 16px;
}

@media (max-width: 830px) {
  br.pc{
    display: none;
  }
}


@media screen and (min-width: 830px) {
  .m_cta-inner{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

.m_cta_txt{
  font-size: clamp(1.125rem, 1.073rem + 0.22vw, 1.25rem);/*18-20*/
  font-weight: bold;
}

@media screen and (max-width: 830px) {
  .m_cta_img-wrapper{
    display: none;
  }
}

.m_cta_btn-wrapper{
  display: inline-block;
  margin-top: 24px;
}

.m_cta_img{
  width: 280px;
  height: auto;
}

.m_btn__mail{
  color: var(--blue-txt);
  background: var(--white-color);
  font-weight: bold;
  padding: 24px 32px;
  transition: .3s ease;
}

.m_btn__mail:hover{
  background: var(--blue-background);
  color: var(--white-color);
  outline: 1px solid var(--white-color);
  box-sizing: border-box;
}

.m_btn__mail-svg{
  transition: fill 0.3s ease; /* スムーズに色が変わる */
}

.m_logo_link{
  display: inline-block;
}

.m_logo_title{
  color: var(--blue-txt);
  font-size: clamp(2rem, 1.586rem + 1.77vw, 3rem);/*32-48px*/
  font-weight: bold;
  line-height: 1.0;
}

.m_logo_sub{
  color: var(--blue-txt);
  font-size: clamp(0.875rem, 0.616rem + 1.1vw, 1.5rem);/*14-24px*/
  font-weight: bold;
  text-align: center;
}

.m_copyright_txt{
  font-size: 8px;
  color: var(--gray-color);
  margin-top: 4px;
}


/* ---------- footer ---------- */

.l_footer{
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  padding-top: 80px;
  padding-right: 32px;
  padding-bottom: 16px;
  padding-left: 32px;
}

@media screen and (min-width: 830px) {
  .l_footer{
    padding-top: 120px;
    padding-bottom: 64px;
    padding-left: clamp(1.5rem, -3rem + 9.38vw, 4.5rem);/*16-75*/
    padding-right: clamp(1.5rem, -3rem + 9.38vw, 4.5rem);/*16-75*/
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}

@media screen and (min-width: 830px) {
  .l_footer_list-wrapper{
    width: 100%;
    display: flex;
    flex-direction: row;
  }
}

.l_footer_list{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media screen and (min-width: 830px) {
  .l_footer_list{
    height: 135px; 
    flex-wrap: wrap;
  }
}
.l_footer_item{
  color: var(--blue-txt);
  font-weight: 500;
  transition: 0.4s;
}

.l_footer_item:hover{
  opacity: 0.4;
  transition: 0.4s;
}

.l_footer_contact{
  color: var(--pink-txt);
}

@media (min-width: 830px) {
  .footer_sns_margin{
    margin-top: 40px;
    margin-left: 24px;
  }
}

.l_footer_logo{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 64px;
}
@media (min-width: 830px) {
  .l_footer_logo{
    margin-top: 0;
  }
}
/* ---------- kv ---------- */

.top_contents_wrapper{
  width: 100%;
  height: 100%;
  position: relative;
}

.top_kv-img-wrapper{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.top_kv-img{
  width: clamp(18.75rem, 5.769rem + 55.38vw, 75rem);/*300-1200(375-2000)*/
}

.top_kv-copy_box{
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
@media (min-width: 830px) {
  .top_kv-copy_box {
    top: 90%;
    left: 90%;
    transform: translate(-15%,-50%);
    flex-direction: column;
  }
}
@media (min-width: 1600px) {
  .top_kv-copy_box {
    top: 95%;
    left: 90%;
  }
}
@media (min-width: 1610px) {
  .top_kv-copy_box {
    top: 100%;
    left: 100%;
  }
}

.top_kv-copy{
  color: var(--blue-txt);
  font-size: clamp(1.25rem, 0.731rem + 2.22vw, 3.5rem);/*20-56(375-2000*/
  font-weight: bold;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

.scroll{
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.scroll_txt{
  color: var(--blue-txt);
  font-size: 12px;
  font-weight: bold;
}

.scroll_txt::after{
  content: "";
  position: absolute;
  top: 150%;
  left: 0;
  right: 0;
  width: 1px;
  height: clamp(12.5rem, 10.299rem + 9.39vw, 18.75rem);/*200-300px*/
  margin: auto;
  background-color: var(--blue-background);
  z-index: var(--z-index-back);
}

/* ---------- about ---------- */

.top_about-inner{
  background: var(--blue-background);
  border-radius: 40px;
  padding: 120px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top_about-copy_txt{
  color: var(--white-color);
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  text-align: center;
}

@media screen and (min-width: 830px) {
  .sp{
    display: none;
  }
}

.top_about-card_wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 120px;
  margin-top: 120px;
}

@media screen and (min-width: 1080px) {
  .top_about-card_wrapper{
    display: flex;
    flex-direction: row;
  }
}


.top_about-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top_about_img{
  width: 160px;
  height: auto;
}

.top_about-card_jp{
  color: var(--white-color);
  font-size: 24px;
  font-weight: bold;
}

.top_about-card_eng{
  color: var(--white-color);
  font-size: 14px;
  font-weight: bold;
}

.top_about_btn-wrapper{
  margin-top: 120px;
}


/* ---------- works ---------- */

.top_works-posts{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 80px;
}

@media (min-width: 1080px) {
  .top_works-post:not(:first-child){
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .top_works-post{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


.top_works-post{
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1080px) {
  .top_works-post{
    flex-direction: row;
    gap: 64px;
  }
}

@media screen and (min-width: 1080px) {
  .top_works-post_img-wrapper{
    width: 45%;
  }
}

.top_works-post_img{
  border-radius: 30px;
  aspect-ratio: 8/5;
}

.top_works-post_content-wrapper{
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1080px) {
  .top_works-post_content-wrapper{
    width: 55%;
  }
}
.top_works-post_content{
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.top_works-post_title{
  color: var(--blue-txt);
  font-size: clamp(1.125rem, 1.08rem + 0.23vw, 1.25rem);/*18-20*/
  font-weight: 500;
}

.top_works-post_box{
  display: flex;
  gap: 20px;
  margin-top: 4px;
}

.top_works-post_client{
  font-size: 12px;
}

.top_works-post_category{
  color: var(--blue-background);
  font-size: 12px;
}

.top_works-post_txt{
  margin-top: 16px;
}

.top_works_btn-wrapper{
  display: inline-block;
  display: flex;
  justify-content: flex-end;
  text-align: right;
  margin-top: 16px;
}

/* ---------- service ---------- */

.top_service{
  background: var(--blue-background);
}

.top_service_list{
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.top_service_item{
  background: var(--white-color);
  border-radius: 20px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top_service_img{
  width: 100px;
  height: 100px;
}

.top_service_txt{
  font-size: 20px;
  font-weight: 500;
  margin-top: 16px;
}

.top_service_txt_sub{
  font-size: 14px;
}

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

.top_service_btn-wrapper{
  display: inline-block;
  display: flex;
  justify-content: flex-end;
  margin-top: 64px;
}


/* ---------- faq ---------- */

.top_faq_button{
  display: flex;
  gap: 24px;
}

.top_faq_button {
  background: var(--white-color);
  width: 100%;
  border-radius: 30px;
  border: 2px solid var(--blue-background);
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}

.top_faq_button:not(:first-child) {
  margin-top: 16px;
}

.top_faq_content {
  display: flex;
  align-items: center;
  position: relative;
}

.top_faq_content__a {
  margin-top: 32px;
}

.top_faq_icon {
  font-weight: bold;
  padding-right: 16px;
}

.top_faq_icon__q {
  font-size: 24px;
  color: var(--blue-txt);
}

.top_faq_icon__a {
  font-size: 24px;
  color: var(--pink-txt);
}

.top_faq_txt {
  color: var(--blue-txt);
  font-size: clamp(0.875rem, 0.799rem + 0.38vw, 1.125rem);
  font-weight: bold;
  text-align: justify;
  margin-right: 16px;
}

.top_faq_txt.pink{
  color: var(--pink-txt);
}


.top_faq_mark {
  width: clamp(1rem, 0.924rem + 0.38vw, 1.25rem);
  height: clamp(1rem, 0.924rem + 0.38vw, 1.25rem);
  position: relative;
  flex-shrink: 0;
}


.top_faq_mark::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 3px;
  border-radius: 100vmax;
  background: var(--blue-txt);
}

.js_faq_mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  border-radius: 100vmax;
  height: 100%;
  background: var(--blue-txt);
}

.js_faq_mark.is-open::before {
  opacity: 0;
}

.js_faq-a {
  height: 0;
  opacity: 0;
  overflow: hidden;
}

/* ---------- people ---------- */

.top_people_wrapper{
  margin-top: 40px;
}

.top_people_top{
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.top_people_img{
  width: 80px;
  height: auto;
  border-radius: 49% 51% 58% 42% / 54% 60% 40% 46% ;
}


.top_people_name{
  font-size: 24px;
  font-weight: bold;
}

.top_people_subname{
  font-size: 14px;
  margin-top: 4px;
}

.top_people_txt{
  margin-top: 32px;
}

.top_people_career{
  margin-top: 16px;
}


.top_people_subcontent{
  font-size: 14px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--white-color);
  border-bottom: 1px solid var(--white-color);
  padding: 56px 24px;
  margin-top: 56px;
}

@media screen and (max-width: 830px) {
  .sp_br{
    display: none;
  }
}

.top_people_hobby_txt:nth-child(2){
  margin-top: 16px;
}

.top_people_sns-wrapper{
  display: flex;
  gap: 8px;
  margin-top: 40px;
}

.top_people_sns_link{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: 0.4s;
}

.top_people_sns_link:hover{
  opacity: 0.6;
  transition: 0.4s;
}

/* ---------- about ---------- */

.value_cards{
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-top: clamp(4rem, 2.55rem + 6.19vw, 7.5rem);/*64-120*/
}

.value_card{
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.value_title-box{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.value_img{
  width: 80px;
  height: auto;
}

.value_title-wrapper{
  color: var(--blue-txt);
}

.value_title{
  font-size: clamp(1.125rem, 0.97rem + 0.66vw, 1.5rem);/*18-24*/
  font-weight: bold;
}

.value_title_sub{
  font-size: clamp(0.75rem, 0.698rem + 0.22vw, 0.875rem);/*12-14*/
  font-weight: 500;
}

.value_btn-wrapper{
  display: inline-block;
  display: flex;
  justify-content: flex-end;
}

.mission_box{
  background: var(--blue-background);
  border-radius: 20px;
  padding: clamp(2.5rem, 1.464rem + 4.42vw, 5rem) 32px;
}

.mission_txt-wrapper{
  max-width: 680px;
}

.mission_txt{
  color: var(--white-color);
  font-size: 14px;
  font-weight: bold;
}

.mission_txt.lead{
  color: var(--white-color);
  font-size: 18px;
  font-weight: bold;
}

.mission_txt:not(:first-child){
  margin-top: 32px;
}

.mission_txt.space{
  margin-top: 56px;
}

.mission_name{
  color: var(--white-color);
  font-size: 12px;
  font-weight: bold;
  margin-top: 64px;
  text-align: right;
}

/* ---------- works ---------- */

@media (min-width: 830px) {
  .works_sumb_img_sp{
    display: none;
  }
}

@media (max-width: 830px) {
  .works_sumb_img_pc{
    display: none;
  }
}

.works-post_title{
  color: var(--blue-txt);
  font-size: clamp(1.25rem, 1.043rem + 0.88vw, 1.75rem);/*20-28*/
  font-weight: 500;
}

.works-post_box{
  display: flex;
  gap: 20px;
  margin-top: 4px;
}

.works-post_client{
  font-size: 14px;
}

.works-post_category{
  color: var(--blue-background);
  font-size: 14px;
}

.works_content{
  margin-top: 40px;
}

.works_content_txt-wrapper{
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 64px;
}

.works_content_title{
  color: var(--blue-txt);
  font-weight: bold;
}

.works_content_title-wrapper{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.works_content_title-dot{
  background: var(--blue-background);
  width: 8px;
  height: 8px;
  border-radius: 50px;
}

.works_content_title-dot.white{
  background: var(--white-color);
}

.works_content_title.white{
  color: var(--white-color);
}

.works_content_txt{
  margin-top: 8px;
}

.works_content_outcome{
  color: var(--white-color);
  background: var(--pink-background);
  padding: 24px;
  border-radius: 20px;
}

.works_capture{
  margin-top: 80px;
}

.works_capture_pc_img:not(:first-child){
  margin-top: 40px;
}

.works_capture_sp{
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
  margin-top: 64px;
}

.works_capture_sp_img{
  width: clamp(6.25rem, -1.471rem + 32.94vw, 15rem);/*100-240px*/
  height: auto;
}

.works_detail{
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 56px clamp(1rem, 0.378rem + 2.65vw, 2.5rem);/*16-40*/
  border-top: 1px solid var(--gray-color);
  border-bottom: 1px solid var(--gray-color);
  margin-top: 64px;
}

.works_detail_content{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (min-width: 830px) {
  .works_detail_content{
    display: flex;
    flex-direction: row;
    gap: 16px;
  }
}

.works_detail_title{
  font-size: 14px;
  font-weight: 500;
}

.works_detail_txt{
  font-size: 12px;
}

.works_detail_link{
  color: var(--blue-txt);
  font-size: 12px;
  display: inline-block;
  width: fit-content;
  border-bottom: 1px solid var(--blue-background);
}

.next_works{
  margin-top: 64px;
  margin-bottom: 40px;
}

.next_works_title-wrapper{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.next_works_title-dot{
  background: var(--blue-background);
  width: 8px;
  height: 8px;
  border-radius: 50px;
}

.next_works_title{
  color: var(--blue-txt);
  font-size: clamp(1.25rem, 1.146rem + 0.44vw, 1.5rem);/*20-24*/
  font-weight: bold;
}

.next_works-post{
  margin-top: 24px;
}

.next_works-post_content-wrapper{
  display: flex;
  flex-direction: column;
}
@media (min-width: 830px) {
  .next_works-post_content-wrapper{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 32px;
  }
}

@media (min-width: 830px) {
  .next_works-post_img-wrapper{
    width: 45%;
  }
}

.next_works-post_img{
  aspect-ratio: 8/5;
  border-radius: 20px;
}


.next_works-post_content{
  margin-top: 20px;
}

.next_works-post_title{
  color: var(--blue-txt);
  font-size: 22px;
  font-weight: 500;
}

.next_works-post_box{
  display: flex;
  gap: 20px;
  margin-top: 4px;
}

.next_works-post_client{
  font-size: 12px;
}

.next_works-post_category{
  color: var(--blue-background);
  font-size: 12px;
}

.next_works-post_txt{
  margin-top: 16px;
}

.next_works_btn-wrapper{
  display: inline-block;
  display: flex;
  justify-content: flex-end;
  text-align: right;
  margin-top: 40px;
}

/* ---------- service ---------- */

.service_list{
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.service_item{
  background: var(--white-color);
  border-radius: 20px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
@media (min-width: 600px) {
  .service_item{
    display: flex;
    flex-direction: row;
    gap: 48px;
  }
}

.service_item.blue{
  background: var(--blue-background);
  color: var(--white-color);
}

.service_item.white{
  border: 2px solid var(--blue-background);
}
.service_item.pink{
  background: var(--pink-background);
  color: var(--white-color);
}

.service_img{
  width: 120px;
  height: auto;
}

.service_content-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


@media (min-width: 600px) {
  .service_content-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
.service_txt_box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
@media (min-width: 600px) {
  .service_txt_box{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
  }
}

.service_txt{
  font-size: 20px;
  font-weight: 500;
}

.service_txt_sub{
  font-size: 14px;
}

.service_content{
  font-size: 14px;
  margin-top: 16px;
}
@media (min-width: 800px) {
  .service_content{
    max-width: 500px;
  }
}

/* ---------- contact ---------- */

.contact_form_list{
  display: flex;
  flex-direction: column;
}

.contact_form_heading {
  font-weight: bold;
  position: relative;
}

.contact_form_heading:not(:first-child) {
  margin-top: 32px;
}

.contact_form_detail {
  margin-top: 8px;
}

.contact_form_input {
  background: var(--light-gray-color);
  width: 100%;
  height: 40px;
  border-radius: 10px;
  padding: 8px 16px;
}

.contact_form_required {
  background: var(--pink-background);
  color: var(--white-color);
  font-size: 10px;
  font-weight: bold;
  border-radius: 20px;
  padding: 2px 8px;
}

.contact_form_label {
  font-weight: bold;
  margin-top: 32px;
}

select::-ms-expand {
	display: none; /*--IEでデフォルトの矢印を消します--*/
}

select {
	-webkit-appearance: none; /*--各ブラウザのCSSを解除--*/
	-moz-appearance: none;/*--各ブラウザのCSSを解除--*/
	appearance: none;/*--各ブラウザのCSSを解除--*/
  width: 280px;/*--幅--*/
	background-color: var(--light-gray-color);
	font-size: 16px;
	border-radius: 10px;
  margin-top: 8px;
	padding: 8px 16px;
  background-image: url("../img/down_arrow.svg");
  background-repeat: no-repeat;
  background-size: 14px auto; /* 画像のサイズ（幅 高さ）*/
  background-position: right 12px center; /* 画像の位置 */
}


.contact_form_textarea {
  background: var(--light-gray-color);
  width: 100%;
  height: 250px;
  border-radius: 10px;
  padding: 8px 16px;
  resize: none;
}

.privacy{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 40px;
}

.privacy_link{
  height: 18px;
  color: var(--blue-txt);
  font-size: 10px;
  border-bottom: 1px solid var(--blue-background);
}

.privacy_txt{
  font-size: 12px;
}

.contact_form_btn-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}

.contact_cta_box{
  display: flex;
  align-items: end;
  flex-direction: column;
  gap: 24px;
}

.contact_cta_txt{
  font-size: 18px;
  font-weight: bold;
}

.contact_cta_name{
  font-size: 14px;
  font-weight: bold;
  text-align: right;
}

@media screen and (max-width: 830px) {
  .contact_cta_img-wrapper{
    display: none;
  }
}

.contact_cta_img{
  width: 160px;
  height: auto;
}

/* ---------- privacy ---------- */

.privacy_content_txt{
  font-size: 14px;
}

.privacy_content_txt:not(:first-child){
  margin-top: 8px;
}

.privacy_content_head{
  font-weight: 500;
}

.privacy_content_head:not(:first-child){
  margin-top: 24px;
}

/* ---------- page404 ---------- */

.page404_btn-wrapper{
  display: inline-block;
  display: flex;
  justify-content: flex-end;
  text-align: right;
  margin-top: 40px;
}

/* ---------- js ---------- */

/* chromeスクロールバー削除 */
.js_body::-webkit-scrollbar{
    display:none;
  }

/* 背景をスクロールしない */
.js_body.is-active{
  overflow: hidden;
}

.js_opening.is-active {
  visibility: hidden;
}

/* モバイルではハンバーガーメニューに */
@media screen and (max-width: 830px) {
  .js_navigation {
    display: block;
    position: fixed;
    top: 0;
    right: -100%; /* 初期状態で画面の外 */
    width: 300px;
    height: 100vh;
    background: var(--cream-color);
    transition: right 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
    z-index: var(--z-index-menu);
  }

  .l_header-nav_list{
    display: block;
  }

  .js_navigation.is-active {
    right: 0;
  }
}

/* オーバーレイ（背景を暗くする部分） */
.js_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(76, 74, 92, 0.5); /* 半透明の黒 */
  opacity: 0; /* 初期状態では透明 */
  visibility: hidden; /* クリックできないように */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  z-index: var(--z-index-overlay); /* メニューの下、その他のコンテンツの上 */
}

/* メニューを開いたときのオーバーレイ */
.js_overlay.is-active {
  opacity: 1;
  visibility: visible;
}


/* バツ印に変化するスタイル */
.js_hamburger.is-active .m_hamburger-bar:first-child {
  top: 50%;
  transform: translate(-50%, 0) rotate(40deg);
}

.js_hamburger.is-active .m_hamburger-bar:nth-child(2) {
  opacity: 0;
}

.js_hamburger.is-active .m_hamburger-bar:last-child {
  top: 50%;
  transform: translate(-50%, 0) rotate(-40deg);
}

/* cf7 style */
.wpcf7-list-item {
  margin: 0;
}

.wpcf7-list-item:not(:first-child) {
  margin-left: 16px;
}

.wpcf7-list-item-label {
  font-weight: bold;
  margin-left: 8px;
}

input[type="radio"] {
  appearance: button;
}

input[type="checkbox"] {
  appearance: checkbox;
}

.wpcf7-spinner{
  display: none;
}