body {
    margin: 0 auto;
    font-family: "MS Gothic", "ＭＳ ゴシック", monospace;
    color: #183253;
    line-height: 1.6;
    overflow-x: hidden;
    max-width: 1980px;
}

/* 共有 太字 */
.bold {
  color : #183253;
  font-family: "HGS平成角ｺﾞｼｯｸ体W9", "HGSHeiseiKakuGothicW9", sans-serif;
  font-weight: 600;
}

/* ヘッダー */
header {
    position: fixed;
    padding-right: 4%;
    padding-left: 1.2%;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 0.5px solid #b8b8b8bf;
    background-color: white;
    z-index: 1000;
}


/* ナビゲーション */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ヘッダー画像 ロゴ */
a.header_logo {
    margin: 1.0%;
}

.header_logo_img {
    width: 100%;
}

/* ナビゲーション リスト */
.nav_list li a {
    text-decoration: none;
    color: #65aadd;
    font-weight: bold;

}

nav ul {
    display: flex;
    list-style: none;
    gap: 80px;
}


/* メイン */
main {
    padding-top: 3%;
}


/* section 01 トップ */
.hero_container {
    display: flex;
    background-image: url("../images/background_01.png");
    background-repeat: no-repeat;
    background-position: right center;
    padding-top: 9%;
    padding-left: 8%;
    padding-right: 0;
    box-sizing: border-box;
    background-size: 100% 100%;
}
.hero_container::before {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1.6s ease, transform 1.6s ease;
}
.hero_container.is-show-bg::before {
  opacity: 1;
  transform: translateY(0);
}



.hero_content {
    flex: 1;
    z-index: 1;
}

.hero_title {
    font-size: clamp(16px, 2vw, 30px);
    line-height: 1.8;
    padding-top: 5%;
    padding-left: 5%;
}

.sub_title_02 {
    margin-left: 2em;
    padding-bottom: 20.2%;
}

/* 共通のセクションタイトルスタイル */
.section_title {
    font-size: 1.7rem !important;
    margin-bottom: 1%;
}

/* --- アクセスウェブについて --- */
.about {
    width: 100%;
}

.about_container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5%;
    margin-top: 4%;
}

.about_text {
    margin-left: 18%;
    margin-top: 8%;
}

.about_description {
    line-height: 2;
    color: #183253;
}

.about_image {
    flex: 1;
    text-align: center;
}

.about_image img {
    width: 60%;
}





/* --- わたしたちにできること --- */
.service {
    padding: 220px 5%;
    position: relative;
    /* margin-top: 6%; */
    background: #f4fbfe;
    overflow: hidden;   /* ★追加 */
}

.service_wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 270px;  /* ★大きく */
  pointer-events: none;
  z-index: 1;
  transform: rotate(180deg);

}
.service_container {
  position: relative;
  z-index: 2;
  padding: 0;
  /* padding: 220px 0; ★波に被らないよう余白も増やす */
}
.wave_top_path  {
  fill: #fff;
}
.wave_bottom_path { fill: #f4fbfe; }


/* 上下配置 */
.service_wave_top {
  top: 0;
}

.service_wave_bottom {
  bottom: 0;
  /* transform: rotate(-180deg); */
}
.service_wave_bottom {
    background: #fff;
}




/* .service::before {
    content: "";
    position: absolute;
    top: -50%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -100;
    background-image: url(../images/background_02.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
} */


.service_container {
    position: relative;
    z-index: 2;
    padding: 120px 0;
    /* padding: 220px 0;   ★ここで上と下の余白を作る */
    width: 70%;
    margin: 0 auto;
  text-align: left;
    /* width: 70%;

    margin: 0 auto;
    text-align: left; */
    transform: translateY(-100px);
}

.service_grid {
    display: flex;
    justify-content: space-between;
    gap: 11%;
    margin-top: 8%;
    align-items: flex-start;
}
.service_item {
    flex: 1;
}

.service_icon {
    margin-bottom: 10%;
}

.service_icon img {
    width: 90%;
    height: auto;
}

.service_item_title {
    font-size: 1.1rem;
    color: #65AADD;
    margin-bottom: 7%;
}

.service_item_text {
    font-size: 0.85rem;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

h3.service_item_title {
    text-align: -webkit-center;
}

.service_item:nth-child(1) {
    transform: translateY(0);
}

.service_item:nth-child(2) {
    transform: translateY(70px);
}

.service_item:nth-child(3) {
    transform: translateY(140px);
}




/* 制作実績 */
.works {
    padding: 6% 18.5%;
}

.works_grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 3% auto 0;
    max-width: 1200px;
}

.work_category {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.work_category h3 {
    font-size: 1.2rem;
    margin-bottom: 2%;
}

span {
    font-style: italic;
    font-size: 1.5rem;
}

.work_images {
    display: flex;
    gap: 2%;
    margin-bottom: 15px;
}

.work_images img {
    width: 31%;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
}

.view_more {
    align-self: flex-end;
    text-decoration: none;
    font-size: 0.9rem;
    color: #183253;
    border-bottom: 1px solid #183253;
    transition: opacity 0.3s;
}

.view_more:hover {
    opacity: 0.7;
}
.work_images.slider3{
  overflow: hidden;
  display: block;   /* ★これ重要：wrapがflexだと変な挙動になりやすい */
  width: 430px;
}

.work_images.slider3 .slider3-track{
  display: flex !important;
  flex-wrap: nowrap !important;
  will-change: transform;
  /* transition: transform 600ms ease; */
}

.work_category.seq-pop-slow {
    max-width: 430px;
}
.work_images.slider3 .slider3-track > img{
  flex: 0 0 auto !important;
  width: auto !important;     /* JSで幅指定 */
  max-width: none !important;
  display: block;
}

/* フッター */
.site_footer {
    padding: 6.55% 5% 0;
    background-color: #f8f9f9;
}

.footer_container {
    margin: 0 auto;
    display: flex;
    width: 70%;
}


.footer_text {
    margin-bottom: 14%;
    font-size: 0.95rem;
}

.footer_image {
    margin-left: 30%;
}

.footer_image img {
    max-width: 100%;
    height: auto;
}

/* お問い合わせボタン */
.contact_button {
  display: inline-block;
  padding: 4% 16%;
  border: 1px solid #1e3a5f;
  border-radius: 50px;
  color: #1e3a5f;
  font-size: 0.75rem;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  background-color: white;

  -webkit-appearance: none;
  appearance: none;
  width: 27%;
  display: flex;
  justify-content: center;
}

.contact_button:hover {
    background-color: #1e3a5f;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(30, 58, 95, 0.2);
}

.footer_info {
    display: flex;
    justify-content: center;
}


/* copyright */
.copyright {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 5%;
}


/* ハンバーガー（初期は非表示） */
.hamburger {
    display: none;
    width: 32px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background:#333;
    margin: 5px 0;
}
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.fade-up.is-show {
  opacity: 1;
  transform: translateY(0);
}
.seq-pop {
    opacity: 0;
    transform: translateX(-30px) scale(0.95);
    transition: opacity 0.9s ease, transform 0.9s ease;
    will-change: opacity, transform;
}
.seq-pop-slow {
    opacity: 0;
    transform: translateX(-30px) scale(0.95);
    transition: opacity 1.5s ease, transform 1.5s ease;
    will-change: opacity, transform;
}


/* 表示状態 */
.seq-pop.is-show {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.seq-pop-slow.is-show {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.about_image_img {
  transition: opacity 1.8s ease;  /* ★ゆっくり */
}

/* フェードアウト中 */
.about_image_img.is-fade {
  opacity: 0;
}


/* @media screen and (max-width: 1280px) {
  .contact_button {
      width: 35%;
  }
} */

/* ===== 1080px以下 ===== */
@media screen and (max-width: 1080px) {
    header {
      padding-right: 7%;
    }

    .header_logo_img {
        width: 100%;
    }

    .hamburger {
        display: block;
    }
    .hamburger span {
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
    }

    /* activeで×に */
    .hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
    opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    }
    .nav_list {
        position: absolute;
        top: 76%;
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        align-items: center;
        gap: 0;
        display: none;
    }

    .nav_list li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #eee;
    }

    .nav_list li a {
        /* display: block;
        padding: 16px; */
        display: flex;
        padding: 16px;
        justify-content: center;
    }

    .nav_list.active {
        display: flex;
        padding: 0;
        width: 100%;
    }
    .nav_overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6); /* 暗さ調整 */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        z-index: 90;
    }

    /* 表示状態 */
    .nav_overlay.active {
        opacity: 1;
        visibility: visible;
    }
    .header_nav {
        position: relative;
        z-index: 100;
    }

    .nav_list {
        z-index: 100;
    }

    .hero_title {
        line-height: 1;
        padding-top: 5%;
        padding-left: 2%;
    }

    img#human_frame_photo {
        width: 100%;
    }


    .works_grid {
        display: flex;
        gap: 15px;
        flex-direction: column;
        align-items: center;
    }

    .contact_button {
        width: 38%;
    }
}


/* 携帯横向き 900～667px */
@media screen and (max-width: 900px) {
    /* header {
        width: 88%;
    } */

    .header_logo_img {
        width: 90%;
    }

    .contact_button {
        width: 52%;
    }
}

@media screen and (max-width: 700px) {
    .sub_title_01 {
        font-size: 0.75rem;
    }
    .sub_title_02  {
        margin-left: 1em;
        font-size: 0.75rem;
    }
    .service_wave {
        height: 60px;
    }

    .header_logo_img {
        width: 70%;
    }

    .hero_title {
        font-size: 0.75rem;
        padding: 12% 4% 1% 0%;
    }

    .about_image {
        display: none;
    }

    .about_container {
        display: flex;
        gap: 0%;
        flex-direction: column;
        align-items: center;
        width: 70%;
        margin: 0 auto;
    }

    .about_text {
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .section_title {
        font-size: 1.1rem !important;
    }

    .service_container {
        transform: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about_description {
        font-size: 0.9rem;
    }

    .service {
        padding: 0 0;
    }

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

    .service_icon img {
        width: 80%;
        height: auto;
    }

    .service_icon {
        display: flex;
        justify-content: center;
    }

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

    .service_item:nth-child(3) {
        transform: translateY(28%);
        padding-bottom: 45%;
    }

    .service_item_text {
        width: 81%;
        margin: 0 auto;
    }

    .service_item_title {
        margin: 0;
    }


    .works {
        width: 70%;
        padding: 0;
        margin: 0 auto;
        margin-bottom: 15%;
    }

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

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

    .footer_contact_img {
        display: flex;
        margin: 0 auto;
    }

    .works_grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 27px
    }

    .work_category.seq-pop-slow {
        width: 95%;
    }

    .footer_image img {
        display: none;
    }

    .footer_container {
        max-width: none;
        margin: 0;
        display: block;
        align-items: normal;
        justify-content: normal;
        gap: 0;
    }

    .footer_text {
        margin-bottom: 14%;
        font-size: 0.9rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .button {
        display: flex;
        justify-content: center;
    }

    .site_footer {
        padding: 5% 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    br {
        display: none;
    }

    .copyright {
        margin-top: 10%;
    }

    .footer_image {
        margin: 0;
    }

    .copyright_info {
        font-size: 0.7rem;
    }

    .work_images.slider3 {
        width: 100%;
    }

}

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

    .nav_list {
        top: 29px;
    }

    .hero_title {
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .sub_title_01 {
        font-size: 0.75rem;
    }
    .sub_title_02  {
        font-size: 0.75rem;
    }
    .work_images.slider3{
        width: 100%;
    }
    section.about.seq-group {
        margin: 30px 0 0 0;
    }

    .hero_container {
        /* padding-left: 4%; */
        background-image: url(../images/sp_background.png);
    }

    .hero {
        height: 300px;
    }

    .hero_container {
        height: 100%;
    }

    .about_description {
        font-size: 0.85rem;
    }

    .footer_text {
        font-size: 0.78rem;
        letter-spacing: 0.05em;
    }

    .service_container {
        width: 100%;
        transform: none;
    }

    .service_item_text {
        width: 70%;
    }

    .work_category h3 {
        font-size: 0.9rem;
    }

    .work_images.slider3 {
        width: 107%;
    }

    span {
        font-style: italic;
        font-size: 0.8rem;
    }

    .contact_button {
        width: 43%;
        margin: 0 auto;
    }

}


/* @media screen and (max-device-width: 900px) and (orientation: landscape) {
  p.sub_title_01.fade-up.seq.is-show,
  .p.sub_title_02.fade-up.seq.is-show {
      font-size: 0.55rem;
  }
} */

@media screen and (orientation: landscape) and (max-width: 960px) {
  p.sub_title_01.fade-up.seq.is-show,
  p.sub_title_02.fade-up.seq.is-show {
      font-size: 0.55rem;
  }
}