@charset "UTF-8";

:root {
--white-color: #fff;
--black-color: #333;
--title-color: #395780;
--gray-color: #c4c6c5;
--bg-color: #f4f6ff;
--contact-grad1: rgba(177, 215, 241, 0.2);
--contact-grad2: rgba(223, 233, 245, 0.8);
--contact-grad3: rgba(223, 218, 232, 0.3);
--view-works-btn-grad1: #b1d7f1;
--view-works-btn-grad2: #dfe9f5;
--view-works-btn-grad3: #d7dae8;
--card-wrapper-grad1: #395780;
--SERVICE-card-wrapper-grad1: #82a5c5;
}

:root {
--content-width-sm: 800px;
--content-width: 936px;
--content-width-lg: 1080px;
}

:root {
--z-index-back: -1;
--z-index-default: 1;
--z-index-page-top: 50;
--z-index-header: 100;
--z-index-menu: 150;
--z-index-modal: 200;
}

body {
color: var(--black-color);
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
line-height: 1.6;
letter-spacing: 1.4px;
}

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

@media screen and (min-width: 375px) {
.u_sm-dn {
    display: none;
}
}

@media screen and (min-width: 1080px) {
.u_lg-dn {
    display: none;
}
}
/* ---------- utility ---------- */

.l_container-sm,
.l_container-lg,
.l_container {
margin-left: auto;
margin-right: auto;
padding: 0 16px;
}

.l_container-sm {
max-width: calc(var(--content-width-sm) + 32px);
}

.l_container {
max-width: calc(var(--content-width) + 146px);
}

.l_container-lg {
max-width: calc(var(--content-width-lg) + 32px);
}

.l_contents {
padding: 120px 0;
}

.l_page-main {
padding-top: 120px;
}

/* ---------- layout ---------- */
.l_header {
position: absolute;
top: 0;
left: 0;
z-index: var(--z-index-header);
width: 100%;
height: 72px;
padding: 0 16px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
}

@media screen and (min-width: 1080px) {
  .l_header {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (min-width: 1080px) {
  .is-subpage .l_header {
    height: 160px;
  }
}

@media screen and (min-width: 1080px) {
  .l_header-logo{
    margin-top: 40px;
  }
}

.l_header-logo_link{
font-weight: bold;
line-height: 1.8;
color: var(--white-color);
}

.l_header-nav {
opacity: 0;
transform: translateX(100%);
pointer-events: none;
transition: transform 0.8s ease, opacity 0.8s ease;
}

.l_header-nav.is-open {
display: block;
width: 250px;
right: 0;
padding-bottom: 90px;
margin: 0;
border-radius: 16px;
transform: translateX(0);
opacity: 1; 
}

@media screen and (min-width: 1080px) {
.l_header-nav {
    opacity: 1;
    display: block;
    transform: none;
    pointer-events: auto;
    margin: 0;   
    background: none;
}
}

@media screen and (max-width: 1079px) {
.l_header-nav {
    position: fixed;
    top: 0;
    right: -100%;   /* ← 画面外に完全に隠す */
    width: 250px;
    height: 100vh;
    background: var(--bg-color);
    opacity: 0;
    pointer-events: none;
    transition: right 0.6s ease, opacity 0.6s ease;
    border-radius: 16px 0 0 16px;
    margin: 0; 
}
}

.l_header-nav_list {
display: flex;
gap: 16px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
height: 100%;
margin-top: 32px;
margin-left: 40px;
}

@media screen and (min-width: 1080px) {
.l_header-nav_list {
    flex-direction: row;
    margin-top: 0;
    margin-left: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding-bottom: 32px;
}
}

.l_header-nav_item {
color: var(--title-color);
font-size: 16px;
}

@media screen and (min-width: 1080px) {
  .l_header-nav_item {
color: var(--white-color);
font-size: 20px;
}
}

@media screen and (min-width: 1080px) {
  .is-subpage .l_header-nav_item {
color: var(--title-color);
}
}



.l_header-nav_contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 28px; 
  background: #3B6AAC;
  color: #fff;
  border-radius: 55px;
  letter-spacing: 1.6px;
  text-decoration: none;
}

.l_header-nav_contact:hover {
  background: #fff;
  color: #3B6AAC;
  border: 1px solid #3B6AAC;
}

.l_header-nav_contact:active {
  transform: translateY(2px);
}

.m_hamburger {
display: block;
width: 23px;
height: 20px;
position: relative;
z-index: var(--z-index-modal);
border: none;
background: transparent;
}

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

.m_hamburger-bar {
width: 100%;
height: 2px;
position: absolute;
left: 0;
background: var(--white-color);
}

.m_hamburger-bar:nth-child(1) {
top: 2px;   /* 中心は 4px */
}

.m_hamburger-bar:nth-child(2) {
top: 10px;   /* 中心は 10px（真ん中） */
}

.m_hamburger-bar:nth-child(3) {
top: 18px;  /* 中心は 16px */
}

.m_hamburger-label {
position: absolute;
top: calc(100% + 1px);
left: 50%;
transform: translateX(-50%);
line-height: 1.8;
letter-spacing: 1.4px;
font-size: 10px;
font-weight: 300;
color: var(--white-color);
display: block;
text-align: center;
pointer-events: none;
transition: opacity .4s ease;
opacity: 1;
}

.m_hamburger.active .m_hamburger-label {
opacity: 0; 
}

.m_hamburger .m_hamburger-bar:nth-child(1) {
animation: bar-open-1 .75s forwards;
}

@keyframes bar-open-1 {
0%   { transform: translateY(9px) rotate(45deg); }
50%  { transform: translateY(9px) rotate(0); }
100% { transform: translateY(0) rotate(0); }
}

.m_hamburger .m_hamburger-bar:nth-child(2) {
transition: all .25s .25s;
opacity: 1;
}

.m_hamburger .m_hamburger-bar:nth-child(3) {
animation: bar-open-3 .75s forwards;
}

@keyframes bar-open-3 {
0%   { transform: translateY(-9px) rotate(-45deg); }
50%  { transform: translateY(-9px) rotate(0); }
100% { transform: translateY(0) rotate(0); }
}

.m_hamburger.active .m_hamburger-bar:nth-child(1) {
animation: bar-close-1 .75s forwards;
}

@keyframes bar-close-1 {
0%   { transform: translateY(0) rotate(0); }
50%  { transform: translateY(8px) rotate(0); }
100% { transform: translateY(8px) rotate(45deg); }
}

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

.m_hamburger.active .m_hamburger-bar:nth-child(3) {
animation: bar-close-3 .75s forwards;
}

@keyframes bar-close-3 {
0%   { transform: translateY(0) rotate(0); }
50%  { transform: translateY(-8px) rotate(0); }
100% { transform: translateY(-8px) rotate(-45deg); }
}

.m_hamburger.active .m_hamburger-bar {
background: var(--title-color); 
}

.m_hamburger.active .m_hamburger-label {
color: var(--title-color); 
}

.top_kv{
height: 667px;
background: url('../img/top_kv_sp.jpg') center/cover;
position: relative;
}

@media screen and (min-width: 1080px) {
  .top_kv{
    height: 828px;
    background: url('../img/top_kv_pc.jpg') center/cover;
position: relative;
  }
}

.top_kv_contents {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.top_kv_main-copy{
margin-top: 64px;
color: var(--white-color);
font-size: 32px;
line-height: 1.4;
}

@media screen and (min-width: 1080px) {
  .top_kv_main-copy{
margin-top: 123px;
}
}

@media screen and (min-width: 1080px) {
  .top_kv_main-copy br{
    display: none;
    font-size: 48px;
  }
}

.top_kv_main-copy__em{
color: var(--white-color);
font-size: 32px;
font-weight: bold;
line-height: 1.4;
letter-spacing: 5.4px;
}

@media screen and (min-width: 1080px) {
  .top_kv_main-copy__em{
    font-size: 48px;
  }
}

.top_kv_main-copy__sub{
color: var(--white-color);
font-size: 20px;
line-height: 1.4;
}

@media screen and (min-width: 1080px) {
  .top_kv_main-copy__sub{
    font-size: 32px;
  }
}

.top_kv_copy{
font-size: 28px;
font-weight: 900;
line-height: 1.45;
letter-spacing: 3.4px;
color: var(--white-color);
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
position: relative;
display: inline-block;
margin-top: 45px;
}

@media screen and (min-width: 1080px) {
  .top_kv_copy{
    font-size: 36px;
    letter-spacing: 5.4px;
    line-height: 1.6;
    margin-top: 16px;
  }
}

.top_kv_sub-copy{
color: var(--white-color);
font-size: 16px;
letter-spacing: 0.4px;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
margin-top: 16px;
}

@media screen and (min-width: 1080px) {
  .top_kv_sub-copy{
    font-size: 24px;
    margin-top: 24px;
  }
}

.m_btn {
display: inline-flex;
align-items: center;
width: 227px;
height: 50px;
border-radius: 50px;
letter-spacing: 1.4px;
line-height: 1.8;
color: var(--title-color);
text-decoration: none;
background: linear-gradient(
    135deg,
    var(--view-works-btn-grad1)0%,
    var(--view-works-btn-grad2) 70%,
    var(--view-works-btn-grad3) 100%
);
margin-top: 40px;
position: relative;
padding-left: 24px;
}

@media screen and (min-width: 1080px) {
  .m_btn {
    width: 284px;
    height: 59px;
    font-size: 18px;
  }
}

.m_btn::after {
content: "";
position: absolute;
background-image: url('../img/view_arrow.png');
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 22px;
background-size: contain;
background-repeat: no-repeat;
}

@media screen and (min-width: 1080px) {
  .m_btn::after {
    right: 42px;
  }
}

.m_btn-text {
position: relative;
display: inline-block;
}

.m_btn-text::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
background-color: var(--white-color);
opacity: 0;
transition: opacity 0.3s ease;
}

.m_btn:hover .m_btn-text::after {
opacity: 1;
}

.m_btn:active .m_btn-text::after {
opacity: 1;
}

.m_btn:active {
background: linear-gradient(
    135deg,
    var(--view-works-btn-grad3) 0%,
    var(--view-works-btn-grad2) 70%,
    var(--view-works-btn-grad1) 100%
);
}

.top_works{
margin: 86px 0px 120px;
}

.title-wrapper{
display: flex;
margin-bottom: 40px;
gap: 16px;
}

@media screen and (min-width: 1080px) {
  .title-wrapper.subpage {
  margin-top: 240px;
}
}

@media screen and (min-width: 1080px) {
  .title-wrapper.contact {
  margin-top: 100px;
}
}

.m_section_title{
font-size: 48px;
letter-spacing: 0;
color: var(--title-color);
}

.m_section_sub-title{
font-size: 20px;
letter-spacing: 0;
color: var(--gray-color);
display: flex;
align-items: center;
}

.work-card_img-wrapper {
position: relative;
width: 343px;
height: 201px;
overflow: hidden;
border-radius: 8px 8px 0 0;
}

.work-card_img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.work-card_img-wrapper::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(77, 90, 107, 0.3); 
transition: opacity 0.3s ease;
opacity: 1;
}

.work-card:hover .work-card_img-wrapper::after {
opacity: 0;
}

.service-card-wrapper{
display: grid;
grid-template-columns: repeat(2, 163px);
column-gap: 17px;
row-gap: 24px;
justify-content: center;
}

@media (min-width: 768px) {
.service-card-wrapper {
    grid-template-columns: repeat(3, 163px);
    column-gap: 60px;
    row-gap: 32px;
    justify-content: center;
}
}

@media screen and (min-width: 1080px) {
  .works-wrapper_pc{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
  }
}

.work-card {
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
width: 329px;
margin-bottom: 32px;
}


.work-card::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: 8px;
background: linear-gradient(
    135deg,
    var(--card-wrapper-grad1) 0%,
    var(--view-works-btn-grad1) 100%
);
-webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
        mask-composite: exclude;
        mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}

.work-card_body{
padding: 16px 16px 40px;
}

.work-card_title{
font-size: 16px;
letter-spacing: 0;
}

.second-line_wrapper{
display: flex;
align-items: center;
gap: 24px;
margin-top: 16px;
position: relative;
}

.second-line_wrapper::before{
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 0.8px;
height: 22px;
background-color: #c4c6cf;
}

.work-card_period-label{
position: relative;
padding-left: 35px;
font-size: 12px;
letter-spacing: 0;
}

.work-card_period-label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 24px;
height: 19px;
transform: translateY(-50%);
background-image: url('../img/work-icon1.png');
background-size: contain;
background-repeat: no-repeat;
}

.work-card_link{
font-size: 12px;
letter-spacing: 0;
padding-left: 50px;
padding-right: 20px;
text-decoration: none;
position: relative;
}

.work-card_link::after{
content: '';
position: absolute;
right: 0;
top: 50%;
width: 12px;
height: 12px;
transform: translateY(-46%);
background-image: url('../img/work-icon3.png');
background-size: contain;
background-repeat: no-repeat;
}

.work-card_link::before{
content: '';
position: absolute;
left: 11%;
top: 50%;
width: 23px;
height: 19px;
transform: translateY(-47%);
background-image: url('../img/work-icon2.png');
background-size: contain;
background-repeat: no-repeat;
}

.work-card_process-label{
font-size: 12px;
letter-spacing: 0;
color: var(--title-color);
margin-top: 32px;
padding-left: 35px;
position: relative;
}

.work-card_process-label::before {
content: "";
position: absolute;
left: 1%;
top: 50%;
width: 16px;
height: 19px;
transform: translateY(-45%);
background-image: url('../img/work-icon4.png');
background-size: contain;
background-repeat: no-repeat;
}

.work-card_tech-label{
font-size: 12px;
letter-spacing: 0;
color: var(--title-color);
margin-top: 18px;
padding-left: 35px;
position: relative;
}

.work-card_tech-label::before{
content: "";
position: absolute;
left: 1%;
top: 50%;
width: 16px;
height: 19px;
transform: translateY(-45%);
background-image: url('../img/work-icon5.png');
background-size: contain;
background-repeat: no-repeat;
}

.work-card_point-title{
font-size: 12px;
letter-spacing: 0;
color: #cc6161;
margin-top: 18px;
padding-left: 35px;
position: relative;
}

.work-card_point-title::before{
content: "";
position: absolute;
left: 1%;
top: 50%;
width: 18px;
height: 19px;
transform: translateY(-45%);
background-image: url('../img/work-icon6.png');
background-size: contain;
background-repeat: no-repeat;
}

.work-card_process-label_text,
.work-card_tech-label_text,
.work-card_point-text {
font-size: 12px;
padding-left: 35px;
font-weight: 300;
margin-top: 5px;
}

.center-btn-wrapper {
display: flex;
justify-content: center;
}

.top_about{
background: linear-gradient(
    135deg,
    rgba(177, 215, 241, 0.2) 0%,
    rgba(223, 233, 245, 0.3) 59%,
    rgba(177, 215, 241, 0.2) 100%
);
}

.top_about-message{
font-size: 24px;
line-height: 1.8;
letter-spacing: 0.1em;
}

@media screen and (min-width: 768px) {
  .top_about-message{
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
  }
}

.top_about-message_right{
text-align: right;
}

@media screen and (min-width: 1080px) {
  .top_about_pc-wrapper{
    display: flex;
  }
}

.top_about_img-wrapper{
margin-top: 46px;
}

@media screen and (min-width: 768px) {
  .top_about_img-wrapper{
    display: none;
  }
}

.top_about_img-pc{
  display: none;
}

@media screen and (min-width: 768px) {
  .top_about_img-pc{
    display: block;
    max-width: 650px;
    margin: auto;
  }
}

@media screen and (min-width: 768px) {
  .top_about_img_pc{
    border-radius: 15px;
  }
}

.top_about_desc{
margin-top: -30px;
}

@media screen and (min-width: 768px) {
  .top_about_desc{
margin: 30px auto 0px;
max-width: 650px;
font-size: 17px;
}
}

@media screen and (min-width: 1080px) {
  .top_about_desc{
margin-top: 10px;
margin-left: 28px;
}
}

.top_about_name{
font-size: 16px;
letter-spacing: 1.6px;
}

@media screen and (min-width: 768px) {
  .top_about_name{
    letter-spacing: 4.8px;
  }
}

@media screen and (min-width: 1080px) {
  .top_about_name{
    font-size: 20px;
    letter-spacing: 1.6px;
  }
}

.top_about_text{
margin-top: 16px;
line-height: 1.8;
letter-spacing: 2.6px;
}

@media screen and (min-width: 768px) {
  .top_about_text{
    font-size: 16px;
    letter-spacing: 1.4px;
  }
}

.top_service{
background-color: var(--bg-color);
}

.service-card{
position: relative;
background-repeat: 8px;
overflow: hidden;
max-width: 163px;
padding: 10px 8px;
background-color: var(--bg-color);
transition: background-color 0.3s ease;
}

.service-card::before{
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: 8px;
background: linear-gradient(
    135deg,
    var(--SERVICE-card-wrapper-grad1) 0%,
    var(--view-works-btn-grad1) 100%
);
-webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
        mask-composite: exclude;
        mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}

.service-card:hover {
background-color: #fff; 
}

.service-card__icon{
width: 50px;
height: 56px;
margin: auto;
position: relative;
}

.service-card__icon::before {
content: "";
position: absolute;
inset: 0;
background-size: contain;
background-repeat: no-repeat;
}

.service-card--strategy .service-card__icon::before {
  background-image: url('../img/service-icon1.png');
}

.service-card--design .service-card__icon::before {
  background-image: url('../img/service-icon2.png');
  top: 6px;
}

.service-card--coding .service-card__icon::before {
  background-image: url('../img/service-icon3.png');
  top: 20px;
}

.service-card--cms .service-card__icon::before {
  background-image: url('../img/service-icon4.png');
  top: 4px;
}

.service-card--seo .service-card__icon::before {
  background-image: url('../img/service-icon5.png');
  top: 13px;
}

.service-card--support .service-card__icon::before {
  background-image: url('../img/service-icon6.png');
  top: 7px;
}

.service-card__title{
font-size: 13px;
letter-spacing: 0;
text-align: center;
margin-top: 14px;
}

.service-card__text{
font-size: 10px;
letter-spacing: 1px;
margin-top: 7px;
}

.skill-card-wrapper {
display: grid;
grid-template-columns: repeat(3, 96px);
column-gap: 28px;
row-gap: 32px;
justify-content: center;
}

@media (min-width: 768px) {
.skill-card-wrapper {
    grid-template-columns: repeat(5, 96px);
    justify-content: center;
}
}

@media (min-width: 1080px) {
.skill-card-wrapper {
    grid-template-columns: repeat(5, 96px);
    column-gap: 32px;
    row-gap: 40px;
    justify-content: center;
}
}

.skill-card{
max-width: 96px;
}

.skill-card-circle{
position: relative;
overflow: hidden;
width: 96px;
height: 96px;
border-radius: 50%;
padding: 22px;
}

.skill-card-circle::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: 50px;
background: linear-gradient(
    174deg,
    var(--view-works-btn-grad1) 0%,
    var(--card-wrapper-grad1) 100%
);
-webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
        mask-composite: exclude;
        mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}

.skill-card__icon{
width: 49px;
height: 56px;
margin: auto;
position: relative;
}

.skill-card__icon::before {
content: "";
position: absolute;
inset: 0;
background-size: contain;
background-repeat: no-repeat;
}

.skill-card--html .skill-card__icon::before {
  background-image: url('../img/skill-html.png');
}

.skill-card--css .skill-card__icon::before {
  background-image: url('../img/skill-css.png');
}

.skill-card--js .skill-card__icon::before {
  background-image: url('../img/skill-js.png');
}

.skill-card--wp .skill-card__icon::before {
  background-image: url('../img/skill-wp.png');
  top: 3px;
}

.skill-card--php .skill-card__icon::before {
  background-image: url('../img/skill-php.png');
  top: 11px;
}

.skill-card--github .skill-card__icon::before {
  background-image: url('../img/skill-github.png');
}

.skill-card--sass .skill-card__icon::before {
  background-image: url('../img/skill-sass.png');
  top: 6px;
  right: -5px;
}

.skill-card--figma .skill-card__icon::before {
  background-image: url('../img/skill-figma.png');
  left: 8px;
}

.skill-card--vscode .skill-card__icon::before {
  background-image: url('../img/skill-vscode.png');
}

.skill-card__title{
letter-spacing: 0;
text-align: center;
margin-top: 8px;
}

.top_voice{
background-color: var(--bg-color);
}

.voice-card{
position: relative;
overflow: hidden;
max-width: 343px;
border-radius: 8px;
padding: 24px;
background-color: var(--white-color);
}

.voice-card::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: 8px;
background: linear-gradient(
    174deg,
    var(--view-works-btn-grad1) 0%,
    var(--card-wrapper-grad1) 100%
);
-webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
        mask-composite: exclude;
        mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}

.voice-card__text{
letter-spacing: 1px;
}

.voice-card__line{
position: relative;
margin-top: 16px;
}

.voice-card__line::before{
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 295px;
height: 1px;
background-color: #c4c6cf;
}

.voice-card_customer-wrapper{
display: flex;
margin-top: 32px;
}

.voice-card_customer-logo{
width: 80px;
height: 80px;
border-radius: 8px;
}

.voice-card_customer-name{
font-size: 20px;
letter-spacing: 0;
margin: auto;
}

.title-wrapper__reviews{
display: flex;
flex-direction: column;
}

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

.m_section_title__reviews{
font-size: 37px;
letter-spacing: -2px;
}

@media screen and (min-width: 1080px) {
  .m_section_title__reviews{
font-size: 42px;
letter-spacing: 0px;
}
}

.reviews-card{
position: relative;
overflow: hidden;
max-width: 343px;
border-radius: 8px;
}

.reviews-card::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: 8px;
background: linear-gradient(
    174deg,
    var(--view-works-btn-grad1) 0%,
    var(--card-wrapper-grad1) 100%
);
-webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
        mask-composite: exclude;
        mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
mask-composite: exclude;
pointer-events: none;
}

.reviews-card_person-wrapper{
display: flex;
padding: 16px 40px;
background-color: #ebefff;
position: relative;
}

.reviews-card_person-wrapper::after {
content: "";
position: absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-top: 30px solid #ebefff;
}

.reviews-card_person-logo{
width: 100px;
height: 100px;
}

.reviews-card_personal-wrapper{
margin-left: 24px;
}

.reviews-card_person-position{
letter-spacing: 0;
margin-top: 23px;
}

.reviews-card_person-name{
margin-top: 6px;
font-size: 16px;
letter-spacing: 5.4px;
font-weight: bold;
}

.reviews-card_person-suffix{
font-size: 12px;
letter-spacing: 1.4px;
font-weight: normal;
}

.reviews-card_body-text{
letter-spacing: 1px;
padding: 40px 24px 24px;
}

.top_contact {
padding: 68px 16px;
background: linear-gradient(
    150deg,
    rgba(177, 215, 241, 0.2) 0%,
    rgba(223, 233, 245, 0.8) 70%,
    rgba(223, 218, 232, 0.3) 100%
);
}

.top_contact__title{
color: var(--title-color);
font-size: 24px;
letter-spacing: 0;
text-align: center;
}

.top_contact_btn-wrapper{
max-width: 343px;
padding: 24px;
background-color: #7499cc;
border-radius: 55px;
margin: 26px auto 0px;
color: var(--white-color);
text-align: center;
position: relative;
transition: transform 0.15s ease;
}

.top_contact_btn-wrapper::after {
content: "";
position: absolute;
right: 34px;
top: 50%;
transform: translateY(-61%) rotate(-45deg);
width: 12px; 
height: 12px; 
border-right: 2px solid #fff; 
border-bottom: 2px solid #fff;
transition: right 0.3s ease;
}

.top_contact_btn-wrapper:active {
  transform: translateY(2px);
}

.top_contact_btn-wrapper:hover::after {
  right: 30px;
}

.top_contact_btn-text{
font-weight: bold;
font-size: 16px;
letter-spacing: 0;
position: relative;
}

.top_contact_btn-text::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(23%);
width: 25px;
height: 19px;
background-image: url('../img/contact-icon1.png');
background-size: contain;
background-repeat: no-repeat;
}

.top_contact_btn-message{
font-size: 16px;
letter-spacing: 0;
}

.top_contact_btn-sub{
margin-top: 16px;
letter-spacing: 0;
text-align: center;
}

.l_footer-copyright{
padding: 8px;
}

.l_footer-copyright_txt{
color: var(--gray-color);
letter-spacing: 0;
display: block;
text-align: center;
}

.is-subpage .l_header-logo_link {
color: var(--title-color);
}

@media screen and (min-width: 1080px) {
  .l_header-logo_link{
    font-size: 22px;
    letter-spacing: 2.4px;
    font-weight: normal;
  }
}

.is-subpage .m_hamburger-bar {
background: var(--title-color);
}

.is-subpage .m_hamburger-label {
color: var(--title-color);
}

.demo_slider {
overflow: hidden;
position: relative;
padding: 0px 16px;
}

.demo_slider-track {
display: flex;
justify-content: space-evenly;
animation: slide-left 8s linear infinite;
}

@media screen and (min-width: 1080px) {
  .demo_slider-track {
    animation: slide-left 20s linear infinite;
  }
}

@keyframes slide-left {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-50%);
}
}

.demo_slide-wrapper {
width: 221px;
height: 172px;
flex-shrink: 0;
overflow: hidden;
margin-right: 16px;
}

@media screen and (min-width: 1080px) {
.demo_slide-wrapper {
    width: 350px;
    height: 251px;
    margin-right: 24px;
}
}

.demo_slide-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.demo_description {
margin: 24px auto 40px;
display: grid;
gap: 24px;
}

.demo_description-text {
font-size: 14px;
line-height: 1.6;
letter-spacing: 1.4px;
max-width: 653px;
}

@media screen and (min-width: 654px) {
.demo_description-text {
    margin: auto;
}
}

@media screen and (min-width: 1080px) {
.demo_description-text {
    font-size: 18px;
    margin-bottom: 72px;
}
}

.demo_description p:nth-child(3) {
margin-bottom: 56px;
}


.contact-page{
background: linear-gradient(
    157deg,
    rgba(177, 215, 241, 0.2) 0%,
rgba(223, 233, 245, 0.8) 70%,
rgba(223, 218, 232, 0.3) 100%
);
}

.contact_intro{
font-weight: bold;
font-size: 16px;
text-align: center;
line-height: 1.8;
}

@media screen and (min-width: 1080px) {
.contact_intro{
    font-size: 24px;
}
}

@media screen and (min-width: 1080px) {
.contact_intro br{
    display: none;
}
}

@media screen and (min-width: 1080px) {
.contact-wrapper_lg{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    max-width: 1080px;
    margin: auto;
}
}

.contact_line-icon_lg{
display: none;
}

@media screen and (min-width: 1080px) {
.contact_line-icon_lg{
display: flex;
justify-content: center;
margin-top: 26px;
}
}

@media screen and (min-width: 1080px) {
.line_icon_lg{
    width: 120px;
    height: 120px;
}
}

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

.contact_block.contact_block-tel{
margin: 48px 16px 0px;
background-color: var(--white-color);
border-radius: 15px;
max-width: 640px;
}

@media screen and (min-width: 641px) {
.contact_block.contact_block-tel{
    margin: 48px auto 0px;
}
}

.contact_tel-icon{
display: flex;
padding-top: 25px;
justify-content: center;
text-align: center;
gap: 8px;
}

.phone-call_icon{
width: 45px;
height: 45px;
}

@media screen and (min-width: 1080px) {
.phone-call_icon{
display: none;
}
}

.contact_block-title{
font-weight: bold;
font-size: 20px;
}

@media screen and (min-width: 1080px) {
.contact_block-title{
font-size: 36px;
}
}

.contact_block-desc{
font-size: 14px;
margin-top: 14px;
text-align: center;
}

@media screen and (min-width: 1080px) {
.contact_block-desc{
    font-size: 24px;
    text-align: left;
    margin-right: 24px;
    padding-left: 170px;
}
}

@media screen and (min-width: 1080px) {
.contact_block-desc br{
    display: none;
}
}


.contact_block.contact_block-line{
margin-top: 40px;
background-color: var(--white-color);
border-radius: 15px;
max-width: 640px;
}

@media screen and (min-width: 641px) {
.contact_block.contact_block-line{
    margin: 48px auto 0px;
}
}

@media screen and (min-width: 1080px) {
.contact_block.contact_block-line{
    padding: 10px 36px;
}
}

.contact_line-icon{
display: flex;
justify-content: center;
align-items: center;
padding-top: 25px;
gap: 8px;
}

@media screen and (min-width: 768px) {
  .contact_line-icon{
    gap: 19px;
  }
}

.line_icon{
width: 60px;
height: 60px;
}

.contact_line-desc{
font-size: 12px;
text-align: center;
}

@media screen and (min-width: 768px) {
.contact_line-desc{
font-size: 14px;
}
}



@media screen and (min-width: 1080px) {
.contact_line-desc{
font-size: 24px;
margin: 22px auto;
}
}

.contact_line-btn-wrapper{
width: 268px;
height: 59px;
background-color: #06C755;
display: flex;
align-items: center;
justify-content: center;
margin: 16px auto;
border-radius: 50px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact_line-btn-wrapper:hover {
font-size: 22px;
transform: scale(1.05); 
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3); 
}

.contact_line-btn-wrapper:active {
transform: scale(0.95); 
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2); 
}

.contact_line-btn{
color: var(--white-color);
font-size: 20px;
font-weight: bold;
text-decoration: none;
transition: font-size 0.2s ease; 
}

.contact_line-space{
height: 2px;
}

.contact_form-info{
font-size: 16px;
font-weight: bold;
text-align: center;
margin-top: 84px;
}

@media screen and (min-width: 1080px) {
.contact_form-info{
    font-size: 24px;
    margin-top: 120px;
}
}

.contact_form-info_desc{
display: block;
width: fit-content;
margin: 16px auto 40px;
max-width: 640px;
}

@media screen and (min-width: 1080px) {
.contact_form-info_desc{
    font-size: 20px;
    max-width: 700px;
}
}

.contact_form {
max-width: 640px;
padding: 32px;
background-color: #f9f9f9;
border-radius: 15px;
border: 3px solid var(--gray-color);
}

@media screen and (min-width: 641px) {
.contact_form {
    margin: 0 auto;
}
}

@media screen and (min-width: 1080px) {
.contact_form {
    max-width: 1080px;
    margin-top: 34px;
}
}

.l_footer.contact{
background: var(--blue-gradient-end);
z-index: var(--z-index-header);
padding-top: 64px;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
justify-content: center;
align-items: center;
z-index: 9999;
}

.modal-content {
background: var(--white-color);
padding: 24px;
max-width: 760px;
margin: auto;
max-height: 80%;
overflow-y: auto;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.modal-close{
display: block;
margin-left: auto;
text-align: right;
font-size: 24px;
}

.modal-title{
font-size: 38px;
text-align: center;
margin: 40px auto 24px;
font-weight: bold;
color: #3B6AAC;
}

.privacy-title{
font-size: 24px;
margin: 40px 0px 24px 24px;
position: relative;
color: #3B6AAC;
}

.privacy-title::after{
content: '';
position: absolute;
width: 5px;
height: 100%;
top: 0;
left: -21px;
background-color: #3B6AAC;
}

.sub-title{
margin-top: 20px;
}

.number-wrapper{
display: flex;
}

.number-item{
margin-top: 12px;
}

.sub-text{
margin-top: 12px;
}

.modal-end{
margin-top: 32px;
}

.privacy-end-wrapper{
display: flex;
margin-top: 16px;
}

.error404 {
padding: 120px 20px;
text-align: center;
}

.error404__title {
font-size: 32px;
font-weight: bold;
margin-bottom: 20px;
}

.error404__text {
font-size: 16px;
margin-bottom: 40px;
}

.error404__btn {
display: inline-block;
padding: 12px 28px;
background: #333;
color: #fff;
text-decoration: none;
border-radius: 6px;
transition: 0.3s;
}

.error404__btn:hover {
background: #555;
}

.workSwiper {
padding-bottom: 40px;
}

@media screen and (min-width: 1080px) {
  .workSwiper {
padding-bottom: 0px;
}
}

.workSwiper .swiper-pagination {
position: absolute;
bottom: 0;
text-align: center;
}

.workSwiper .swiper-pagination-bullet {
  background: #395780;
  opacity: 0.4;
}

.workSwiper .swiper-pagination-bullet-active {
  background: #395780;
  opacity: 1;
}

.swiper-wrapper {
transition-timing-function: ease-in-out;
gap: 8px;
}

.workSwiper .swiper-wrapper {
  gap: 0;
}

.contact_form-group {
  margin-bottom: 21px;
}

@media screen and (min-width: 1080px) {
  .contact_form-group {
    max-width: 700px;
    margin: 30px auto;
  }
}

.contact_label {
  display: flex;
  align-items: center;
}

.contact_label-main {
  font-size: 16px;
  font-weight: 600;
}

@media screen and (min-width: 1080px) {
  .contact_label-main {
  font-size: 20px;
}
}

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

@media screen and (min-width: 1080px) {
  .wpcf7-list-item-label {
  font-size: 18px;
}
}

.contact_label-required {
  background: #3B6AAC;
  color: #fff;
  font-size: 10px;
  padding: 4px 5px;
  border-radius: 6px;
  letter-spacing: 0.1;
  border: 1px solid #3b6aac;
  margin-left: 8px;
}

.contact_label-optional {
  background: #fff;
  color: #3b6aac;
  font-size: 10px;
  padding: 4px 5px;
  border-radius: 6px;
border: 1px solid #3b6aac;
margin-left: 8px;
}

.contact_form_input,
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel{
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: 1px solid var(--black-color);
  border-radius: 6px;
  background-color: #fff;
  box-sizing: border-box;
  margin-top: -14px;
}

.contact_form_textarea,
.wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: 1px solid var(--black-color);
  border-radius: 6px;
  background-color: #fff;
  box-sizing: border-box;
  margin-top: -13px;
}

.contact_form_textarea {
  min-height: 160px;
  resize: vertical;
}

.contact_radio-group .wpcf7-form-control{
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  gap: 4px;
}

.contact_radio-group .wpcf7-list-item {
  margin: 0;
  display: block;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1.8;
}

.contact_radio-group .wpcf7-list-item label {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 12px;
}

.contact_radio-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #333;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.contact_radio-group input[type="checkbox"]:checked {
  border-color: #4d6ebf;
  background-color: #4d6ebf;
}

.contact_radio-group input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #fff;
  border-radius: 50%;
}

.contact_radio-group .wpcf7-list-item-label {
  font-size: 15px;
  color: #333;
  letter-spacing: 0.03em;
}

.contact_radio-group .wpcf7-list-item label:hover input[type="checkbox"] {
  border-color: #7b92d9;
}
.contact_file-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.contact_checkbox {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.checkbox-agree {
  width: 14px;
  height: 14px;
  border: 1px solid var(--black-color);
  border-radius: 2px;
  cursor: pointer;
  margin-top: 28px;
}

@media screen and (min-width: 1080px) {
  .checkbox-agree {
    width: 18px;
    height: 18px;
  }
}

.wpcf7-list-item{
    margin: 0;
}

.privacy_link{
    color: #4085e4;
    text-decoration: underline;
}

.privacy-wrapper{
    margin-left: 8px;
    letter-spacing: 0.2px;
}

@media screen and (min-width: 1080px) {
  .privacy-wrapper{
    font-size: 18px;
    margin-left: 12px;
  }
}

.contact_form-submit {
  text-align: center;
  margin-top: 40px;
}

.contact_form-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 227px;
  height: 50px;
  border-radius: 50px;
  background: #3B6AAC;
  color: #fff;
  font-size: 14px;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  letter-spacing: 1.6px;
  transition: all 0.25s ease;
}

@media screen and (min-width: 1080px) {
  .contact_form-button {
    width: 272px;
    height: 60px;
    font-size: 20px;
  }
}

.contact_form-button:hover {
  background: var(--white-color);
  color: #3B6AAC;
  border: 1px solid #3B6AAC;
}

.contact_form-button:active {
  background: #3B6AAC;
  color: var(--white-color);
  border: none;
  transform: translateY(2px);
}

.wpcf7-spinner{
    display: none;
}


.contact_form_input.wpcf7-tel{
  width: 55%;
}

@media screen and (min-width: 768px) {
  .contact_form_input.wpcf7-tel{
  width: 27%;
}
}
@media screen and (min-width: 1080px) {
  .contact_form_input.wpcf7-tel{
  width: 22%;
}
}

.contact_file-input {
  color: transparent; 
}

.contact_file-input::file-selector-button {
  color: var(--black-color); 
}

@media screen and (min-width: 1080px) {
  .swiper-slide {
    width: auto;
  }
}

@media screen and (min-width: 1080px) {
  .workSwiper .swiper-slide,
  .voice-slider .swiper-slide,
  .reviews-slider .swiper-slide {
    margin-right: 20px !important;
  }
}


/* ===================================
   Loading
=================================== */

#loading {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center,
      #ffffff 0%,
      #f6f8fc 70%,
      #eef2fa 100%);
}

.loading-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.loading-circle{
  position:relative;
  width:180px;
  height:180px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.loading-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 285deg,
      #4d6ebf 315deg,
      #7b92d9 340deg,
      transparent 360deg
    );
  animation:ringRotate 1.5s linear infinite;
}

.loading-ring::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:
    radial-gradient(circle at top,
      rgba(255,255,255,.95),
      rgba(247,249,255,.98));
  box-shadow:
    inset 0 0 8px rgba(255,255,255,.9),
    0 4px 18px rgba(78,101,170,.08);
}

.loading-text{
  position:relative;
  z-index:5;
  text-align:center;
}

.loading-text h1{
  font-size:16px;
  font-weight:600;
  letter-spacing:.18em;
  color:#5b74b8;
  margin-bottom:8px;
}

.loading-text p{
  font-size:11px;
  letter-spacing:.15em;
  color:#777;
}

.loading-message{
  margin-top:48px;
  font-size:12px;
  letter-spacing:.35em;
  color:#7b7b7b;
}

.dots{
  display:inline-block;
  width:24px;
}

@keyframes ringRotate{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

@media (max-width:768px){
.loading-circle{
    width:160px;
    height:160px;
}

.loading-ring::before{
    inset:7px;
}

.loading-text h1{
    font-size:14px;
}

.loading-text p{
    font-size:10px;
}

.loading-message{
    margin-top:36px;
    font-size:11px;
}
}

@media screen and (min-width: 1080px) {
  .voice-card_customer-logo{
    margin-right: 12px;
  }
}