/*
Theme Name: Portfolio
Theme URI: http://takuportfolio.com
Description: Takumi's Portfolio Theme
Version: 1.0
Author: Takumi
*/



@charset "UTF-8";
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  color:#37383C ;
  letter-spacing: 0.05em;
}
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 998;
    pointer-events: none;
}
body.menu-open::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* スクロール禁止(オプション) */
body.menu-open {
    overflow: hidden;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.hamburger span {
    width: 28px;
    height: 2px;
    background: #37383C;
    transition: all 0.3s;
    display: block; 
}
/* ハンバーガーメニューが開いた時 */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

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

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(3px, -3px);
}

.header {
    padding: 32px 0;
    background: #fff;
    
}

.top{
    position: relative;
    padding-bottom: 80px;
   background: linear-gradient(135deg, #FFFFFF 0%, #FFF5FA 100%);
    overflow: hidden;
   
}
.soushoku01 {
    position: absolute;
    width: 200px;
    height: 200px;
   background: rgba(255, 182, 193, 0.2);
    border-radius: 50%;
    top: 68px;
    right: 50px;
    transform: rotate(-15deg);
    z-index: 0;
    animation: float 6s ease-in-out infinite;
}
.soushoku02 {
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(255, 182, 193, 0.2);
    border-radius: 50%;
    left: 23px;
    z-index: 0;
    animation: float 8s ease-in-out infinite;
    animation-delay: 1s; /* 少しずらす */
}
.soushoku03 {
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(255, 182, 193, 0.2);
    border-radius: 50%;
    top: 78%;
    right: 45%;
    z-index: 0;
    animation: float 7s ease-in-out infinite;
    animation-delay: 2s;
}
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.top-image{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-radius: 8px; /* 角を丸く(お好みで) */
     margin-top: 64px;
}

.top-image img{
    width: 100%;
    max-width: 500px;
    height: auto; /* 自動で高さ調整 */
    aspect-ratio: 500 / 350; /* 縦横比を固定 */
    object-fit: cover;
    border-radius: 14px;
    transition: transform 0.3s ease;
}
.top-image img:hover {
    transform: scale(1.05);
}
.top-about-me{
    position: absolute;
    top: 0;
    left: 100px;
    writing-mode: vertical-rl;
    letter-spacing: 0.4em;
}
.top-about-me::before{
    position: absolute;
    content: "";
    width: 0.8px;
    height: 82px;
    background-color: #37383C;
    top: -100px;
    left: 50%;
}
.top-text{
  text-align: center;
  margin-top: 24px;
}

.top-wrapper{
  max-width: 1200px;
  margin:0 auto ;
  align-items: center;
  gap: 80px;
  padding: 0 40px;
}
.top-text h1{
  margin-bottom: 32px;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 0.15em;
  padding-top: 15px;
}
.top-text span{
    color:#9ED99D ;
}
.top-text p{
line-height: 1.8em;
text-align: center;
 margin: 0 auto;
width: 440px;
padding-top: 40px;
}
.nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.nav ul{
   display: flex;
   gap: 32px;
    justify-content: flex-end;
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav ul li a {
    text-decoration: none;
    color: #37383C;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s;
}
.nav ul li a:hover {
    color: #9ED99D;
}
.nav ul li a.active {
    color: #9ED99D;
}

.about-detail{
    padding-bottom: 80px;
    background-color:#FFF9F5;
}
.about-detail h2{
    font-size: 38px;
    font-weight: 700;
    letter-spacing:0.2em;
    padding:160px 0 160px 300px ;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}
.about-detail h2::before{
   content: "";
   position: absolute;
   top: 195px;
   left: 100px;
   border: solid 1px #3e3e3e;
   width: 160px;
   height: 1px;
}
.about-detail-wrapper{
  padding-inline:20px;
  max-width: 1000px;
  margin: 0 auto;
}
.about-detail-wrapper ul {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
}
.about-item {
  width: 200px; /* タイトル部分の幅（参考サイトと似せる） */
  flex-shrink: 0;
}


.about-detail-wrapper ul li{
  display: flex;
  gap: 100px;
  align-items: flex-start;
  border-top: solid 1px #E5E5E5;
  padding: 64px 20px;
}
.about-detail-wrapper ul li:last-child{
 border-bottom: solid 1px #E5E5E5;
}

.about-item h3{
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin: 0;
  padding-top: 20px;
  line-height: initial;
}

.about-detail-wrapper p{
  flex: 1;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  padding-top: 20px;
}
.footer-contact{
  text-align: center;
  padding: 80px 0 0 0;
}
.contact-content-wrapper{
  max-width: 1080px;
  margin: 0 auto;
}
.contact-thanks-massage{
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 60px;
}
.contact-mail span{
  display: block;
  margin-bottom: 24px;
}
.mail-btn{
  display: flex
;
    justify-content: center;
    align-items: center;
    width: 420px;
    margin: 0 auto;
    padding: 23px 95px 23px 80px;
    border: 1px solid #9ED99D;
    border-radius: 40px;
    background-color: #fff;
    color: #9ED99D;
    font-size: 15px;
    font-family: "Albert Sans", sans-serif;
    letter-spacing: 0.12em;
    position: relative;
    transition: all 0.3s;
}
.footer-content-wrapper{
  max-width: 1120px;
    margin: 0 auto;
    padding: 56px 20px 24px;
}
.footer-nav{
  display: flex;
  justify-content: center;
}
.footer-content-wrapper nav ul li{
  display: inline-block;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.footer__list01{
  margin-right: 36px;
  position: relative;
}
.footer__list01::after{
  content: "｜";
  position: absolute;
  top: 0;
  right: -25px;
}
@media (min-width: 1025px) and (max-width: 1200px) {
    .top-wrapper {
        padding: 0 40px;
    }
    
    .top-image img {
        max-width: 450px; /* 少し小さく */
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    /* ヘッダー */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 72px; /* 高さを固定 */
        display: flex;
        align-items: center; /* 縦方向中央揃え */
        background: #fff;
        z-index: 999;
        height: 72px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
    .hamburger {
        display: flex;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1001; /* headerより上 */
    }
    
    
    .nav {
       position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: white;
        transition: right 0.3s;
        padding: 80px 0 0 0;
        box-shadow: -2px 0 8px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    
    .nav ul {
       flex-direction: column;
        justify-content: flex-start;
        gap: 0;
    }
    .nav ul li {
        border-bottom: 1px solid #eee;
    }
    .nav.active {
        right: 0;
    }
    .nav ul li a {
        display: block;
        padding: 20px 32px;
    }
    main {
        padding-top: 72px; /* headerの高さ分 */
    }
    
    /* トップセクション */
    .top {
        padding-top: 40px;
        padding-bottom: 100px;
    }
    
    .top-wrapper {
        max-width: 100%;
        padding: 0 40px;
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }
    
    .top-text {
        text-align: center;
    }
    
    .top-text p {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        padding-top: 24px;
    }
    
    /* 写真 */
    .top-image {
        gap: 20px;
    }
    
    .top-image img {
        max-width: 400px;
    }
    
    /* 装飾の円 */
    .soushoku01 {
        width: 200px;
        height: 200px;
    }
    
    .soushoku02 {
        width: 175px;
        height: 175px;
    }
    
    .soushoku03 {
        width: 300px;
        height: 300px;
    }
    
    /* About Meセクション */
    .about-detail h2 {
        font-size: 32px;
        padding: 100px 0 100px 40px;
    }
    
    .about-detail h2::before {
        display: none;
    }
    
    .about-detail-wrapper {
        padding-inline: 40px;
    }
    
    .about-detail-wrapper ul li {
        gap: 60px;
        padding: 48px 20px;
    }
    
    .about-item {
        width: 180px;
    }
    
    .about-item h3 {
        font-size: 20px;
    }
    
    /* フッター */
    .footer-contact {
        padding: 100px 0 0 0;
        height: 600px;
    }
    
    .contact-thanks-massage {
        font-size: 20px;
    }
    
    .mail-btn {
        width: 360px;
        padding: 20px 80px;
    }
}
@media (max-width: 767px) {
    /* ハンバーガーメニュー表示 */
    .hamburger {
        display: flex;
        position: fixed;
        top: 20px;
        right: 20px;
         z-index: 1001;
    }
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 64px; /* スマホは少し低く */
        display: flex;
        align-items: center;
        background: #fff;
        z-index: 999;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }
    
    .nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: white;
        transition: right 0.3s;
        padding: 80px 0 0 0;
        box-shadow: -2px 0 8px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    
    .nav.active {
        right: 0;
    }
    
    .nav ul {
        flex-direction: column;
        gap: 0;
        justify-content: flex-start;
    }
    
    .nav ul li {
        border-bottom: 1px solid #eee;
    }
    
    .nav ul li a {
        display: block;
        padding: 20px 32px;
    }
    
    /* トップセクション */
     main {
        padding-top: 64px;
    }
    .top {
        padding-bottom: 80px;
        padding-top: 32px;
    }
    
    .top-wrapper {
        flex-direction: column;
        padding: 0 20px;
        gap: 40px;
    }
    
    .top-text {
        text-align: center;
    }
    
    .top-text h1 {
        font-size: 28px;
        margin-bottom: 24px;
    }
    
    .top-text p {
        width: 100%;
        padding-top: 20px;
        font-size: 14px;
    }
    
    /* 写真を縦並び */
    .top-image {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .top-image img {
        width: 100%;
        max-width: 320px;
        height: auto;
    }
    
    /* 装飾の円を小さく */
    .soushoku01 {
        width: 125px;
        height: 125px;
        top: 45px;
        right: 25px;
    }
    
    .soushoku02 {
       display: none;
    }
    
    .soushoku03 {
        display: none; /* スマホでは非表示 */
    }
    
    /* About Meセクション */
    .about-detail {
        padding-bottom: 80px;
    }
    
    .about-detail h2 {
        font-size: 24px;
        padding: 60px 0 60px 20px;
        text-align: left;
    }
    
    .about-detail h2::before {
        display: none; /* 線を非表示 */
    }
    
    .about-detail-wrapper {
        padding-inline: 20px;
    }
    
    .about-detail-wrapper ul li {
        flex-direction: column;
        gap: 20px;
        padding: 32px 16px;
        align-items: flex-start;
    }
    
    .about-item {
        width: 100%;
    }
    
    .about-item h3 {
        font-size: 18px;
        padding-top: 0;
    }
    
    .about-detail-wrapper p {
        font-size: 14px;
        padding-top: 12px;
    }
    
    /* フッター */
    .footer-contact {
        height: auto;
        padding: 40px 0 40px 0;
        
    }
    
    .contact-content-wrapper {
        padding: 0 20px;
    }
    
    .contact-thanks-massage {
        font-size: 18px;
        margin-bottom: 40px;
    }
    
    .contact-mail span {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .mail-btn {
        width: 100%;
        max-width: 340px;
        padding: 18px 40px;
        font-size: 14px;
    }
    
    .footer-content-wrapper {
        padding: 20px;
    }
    
    .footer-nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .footer__list01 {
        margin-right: 24px;
        font-size: 14px;
    }
    
    .footer__list01::after {
        right: -18px;
    }
}

/* ========================================
   Skills セクション
======================================== */
.skills-top {
    position: relative;           /* 既存(装飾用) */
    padding: 120px 0 80px;        /* 既存(Aboutと同じ) */
    background: #FFF5F0;
    overflow: hidden;             /* 既存(装飾用) */
}

.skills-top-wrapper {
    max-width: 1200px;            /* 既存(Aboutと同じ) */
    margin: 0 auto;               /* 既存 */
    display: flex;                /* 既存 */
    align-items: center;          /* 既存 */
    gap: 80px;                    /* 既存 */
    padding: 0 40px;              /* 既存 */
}

.skills-top-text {
    flex: 1;                      /* 既存 */
    text-align: center;           /* 既存 */
}

.skills-top-text span {
    color: #9ED99D;               /* 既存(緑) */
    font-size: 16px;              /* 既存 */
    font-weight: 500;             /* 既存 */
}

.skills-top-text h1 {
    font-size: 38px;              /* 既存 */
    font-weight: 500;             /* 既存 */
    letter-spacing: 0.15em;       /* 既存 */
    margin-bottom: 32px;          /* 既存 */
    padding-top: 15px;            /* 既存 */
}

.skills-top-text p {
    line-height: 1.8;             /* 既存 */
    text-align: center;           /* 既存 */
    margin: 0 auto;               /* 既存 */
    max-width: 440px;             /* 既存 */
    padding-top: 40px;            /* 既存 */
}

.skills-top-image {
    flex: 1;                      /* 既存 */
    display: flex;                /* 既存 */
    justify-content: center;      /* 既存 */
}

.skills-top-image img {
    width: 100%;                  /* 既存 */
    max-width: 500px;             /* 既存 */
    height: auto;                 /* 既存 */
    border-radius: 14px;          /* 既存 */
    object-fit: cover;            /* 既存 */
}
.skills {
    padding: 120px 20px 80px;  /* 既存(Aboutと同じ) */
   background: #FFF9F5;      /* ← NEW! 背景色を変更(薄いオレンジ) */
}

.skills h2 {
    font-size: 38px;           /* 既存 */
    font-weight: 700;          /* 既存 */
    letter-spacing: 0.2em;     /* 既存 */
    padding: 160px 0 160px 300px; /* 既存 */
    max-width: 1440px;         /* 既存 */
    margin: 0 auto;            /* 既存 */
    position: relative;        /* 既存 */
}



.skills-wrapper {
    padding-inline: 20px;      /* 既存 */
    max-width: 1000px;         /* 既存 */
    margin: 0 auto;            /* 既存 */
}

.skills-wrapper ul {
    display: flex;             /* 既存 */
    flex-direction: column;    /* 既存 */
    padding: 0;                /* 既存 */
    margin: 0;                 /* 既存 */
    list-style: none;          /* 既存 */
}

.skills-wrapper > ul > li {
    display: flex;             /* 既存 */
    gap: 100px;                /* 既存 */
    align-items: flex-start;   /* 既存 */
    border-top: solid 1px #E5E5E5; /* 既存 */
    padding: 64px 20px;        /* 既存 */
}

.skills-wrapper > ul > li:last-child {
    border-bottom: solid 1px #E5E5E5; /* 既存 */
}

.skill-item {
    width: 200px;              /* 既存 */
    flex-shrink: 0;            /* 既存 */
}

.skill-item h3 {
    font-size: 22px;           /* 既存 */
    font-weight: 500;          /* 既存 */
    letter-spacing: 0.15em;    /* 既存 */
    margin: 0;                 /* 既存 */
    padding-top: 20px;         /* 既存 */
    line-height: initial;      /* 既存 */
}

.skill-content {
    flex: 1;                   /* 既存 */
}

.skill-content ul {
    list-style: none;          /* ← NEW! 追加 */
    padding: 0;                /* ← NEW! 追加 */
    margin: 0;                 /* ← NEW! 追加 */
}

.skill-content ul li {
    font-size: 15px;           /* ← NEW! 追加 */
    line-height: 2;            /* ← NEW! 追加 */
    padding-left: 1em;         /* ← NEW! 追加 */
    text-indent: -1em;         /* ← NEW! 追加 */
}

.skill-content ul li::before {
    content: "• ";             /* ← NEW! 追加(箇条書き) */
    color: #9ED99D;            /* ← NEW! 追加 */
    font-weight: bold;         /* ← NEW! 追加 */
}

/* ========================================
   Skills レスポンシブ
======================================== */

/* タブレット(768px〜1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .skills-top {
        padding: 100px 0 80px;    /* 既存 */
    }
    
    .skills-top-wrapper {
        flex-direction: column;   /* 既存(縦並び) */
        gap: 60px;                /* 既存 */
        padding: 0 40px;          /* 既存 */
    }
    
    .skills-top-text p {
        max-width: 600px;         /* 既存 */
    }
    
    .skills-top-image img {
        max-width: 400px;         /* 既存 */
    }
    
    main {
        padding-top: 72px;        /* 既存(ヘッダー分) */
    }

    
    
    .skills {
        padding-bottom: 100px; /* 既存 */
    }
    
    .skills h2 {
        font-size: 32px;       /* 既存 */
        padding: 100px 0 100px 40px; /* 既存 */
    }
    
    .skills h2::before {
        display: none;         /* 既存(線を非表示) */
    }
    
    .skills-wrapper {
        padding-inline: 40px;  /* 既存 */
    }
    
    .skills-wrapper > ul > li {
        gap: 60px;             /* 既存 */
        padding: 48px 20px;    /* 既存 */
    }
    
    .skill-item {
        width: 180px;          /* 既存 */
    }
    
    .skill-item h3 {
        font-size: 20px;       /* 既存 */
    }
}

/* スマホ(〜767px) */
@media (max-width: 767px) {
    .skills-top {
        padding: 80px 0 60px;     /* 既存 */
    }
    
    .skills-top-wrapper {
        flex-direction: column;   /* 既存(縦並び) */
        padding: 0 20px;          /* 既存 */
        gap: 40px;                /* 既存 */
    }
    
    .skills-top-text h1 {
        font-size: 28px;          /* 既存 */
        margin-bottom: 24px;      /* 既存 */
    }
    
    .skills-top-text p {
        font-size: 14px;          /* 既存 */
        padding-top: 20px;        /* 既存 */
    }
    
    .skills-top-image img {
        max-width: 320px;         /* 既存 */
    }
    
    main {
        padding-top: 64px;        /* 既存(ヘッダー分) */
    }
    .skills {
        padding-bottom: 80px;  /* 既存 */
    }
    
    .skills h2 {
        font-size: 24px;       /* 既存 */
        padding: 60px 0 60px 20px; /* 既存 */
        text-align: left;      /* 既存 */
    }
    
    .skills h2::before {
        display: none;         /* 既存(線を非表示) */
    }
    
    .skills-wrapper {
        padding-inline: 20px;  /* 既存 */
    }
    
    .skills-wrapper > ul > li {
        flex-direction: column; /* 既存 */
        gap: 20px;             /* 既存 */
        padding: 32px 16px;    /* 既存 */
        align-items: flex-start; /* 既存 */
    }
    
    .skill-item {
        width: 100%;           /* 既存 */
    }
    
    .skill-item h3 {
        font-size: 18px;       /* 既存 */
        padding-top: 0;        /* 既存 */
    }
    
    .skill-content ul li {
        font-size: 14px;       /* ← NEW! 追加 */
        line-height: 1.8;      /* ← NEW! 追加 */
    }
}
/* ========================================
   Hero セクション(Homeページ)
======================================== */
.hero {
    position: relative;           /* 既存(装飾用) */
    padding: 120px 0 80px;        /* 既存(Aboutと同じ) */
    background: linear-gradient(135deg, #FFFFFF 0%, #F0F8FF 100%); /* ← 薄い青のグラデ */
    overflow: hidden;             /* 既存(装飾用) */
    min-height: 80vh;             /* ← NEW! 高さを確保 */
    display: flex;                /* ← NEW! 中央配置 */
    align-items: center;          /* ← NEW! 縦中央 */
}

.hero-wrapper {
    max-width: 1200px;            /* 既存(Aboutと同じ) */
    margin: 0 auto;               /* 既存 */
    display: flex;                /* 既存 */
    align-items: center;          /* 既存 */
    gap: 80px;                    /* 既存 */
    padding: 0 40px;              /* 既存 */
}

.hero-text {
    flex: 1;                      /* 既存 */
    text-align: center;           /* 既存 */
}

.hero-subtitle {
    color: #9ED99D;               /* 既存(緑) */
    font-size: 16px;              /* 既存 */
    font-weight: 500;             /* 既存 */
    letter-spacing: 0.1em;        /* 既存 */
}

.hero-text h1 {
    font-size: 48px;              /* 既存(少し大きく) */
    font-weight: 500;             /* 既存 */
    letter-spacing: 0.15em;       /* 既存 */
    margin: 24px 0;               /* 既存 */
}

.hero-text p {
    line-height: 1.8;             /* 既存 */
    text-align: center;           /* 既存 */
    margin: 0 auto 40px;          /* 既存 */
    max-width: 500px;             /* 既存 */
    color: #666;                  /* 既存 */
}

.hero-links {
    display: flex;                /* ← NEW! 追加 */
    gap: 20px;                    /* ← NEW! 追加 */
    justify-content: center;      /* ← NEW! 追加 */
}

.hero-link {
    display: inline-block;        /* ← NEW! 追加 */
    padding: 12px 32px;           /* ← NEW! 追加 */
    border: 2px solid #9ED99D;    /* ← NEW! 追加 */
    border-radius: 40px;          /* ← NEW! 追加 */
    color: #9ED99D;               /* ← NEW! 追加 */
    text-decoration: none;        /* ← NEW! 追加 */
    font-weight: 500;             /* ← NEW! 追加 */
    transition: all 0.3s;         /* ← NEW! 追加 */
}

.hero-link:hover {
    background: #9ED99D;          /* ← NEW! 追加 */
    color: white;                 /* ← NEW! 追加 */
}

.hero-image {
    flex: 1;                      /* 既存 */
    display: flex;                /* 既存 */
    justify-content: center;      /* 既存 */
}

.hero-image img {
    width: 100%;                  /* 既存 */
    max-width: 400px;             /* 既存 */
    height: auto;                 /* 既存 */
    border-radius: 50%;           /* ← NEW! 丸く */
    object-fit: cover;            /* 既存 */
    aspect-ratio: 1 / 1;          /* ← NEW! 正方形 */
}

.message {
    padding: 80px 20px;
    background: #F5F5F5;
    text-align: center;
}

.message-wrapper {
    max-width: 800px;
    margin: 0 auto;

}

.message h2 {
    font-size: 28px;
    margin-bottom: 24px;
    font-weight: 500;
}

.message p {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
}
/* ========================================
   ページ読み込みアニメーション
======================================== */

/* 最初は非表示 */
.hero-subtitle,
.hero-text h1,
.hero-text > p,
.hero-links,
.hero-image {
    opacity: 0;                   /* ← NEW! 追加(透明) */
    transform: translateY(20px);  /* ← NEW! 追加(少し下に) */
}

/* アニメーション用クラス */
.fade-in {
    animation: fadeInUp 1s ease-out forwards;
}

/* アニメーションの定義 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 順番に表示(遅延) */
.hero-subtitle {
    animation-delay: 0.2s;        /* ← NEW! 追加(0.2秒後) */
}

.hero-text h1 {
    animation-delay: 0.4s;        /* ← NEW! 追加(0.4秒後) */
}

.hero-text > p {
    animation-delay: 0.6s;        /* ← NEW! 追加(0.6秒後) */
}

.hero-links {
    animation-delay: 0.8s;        /* ← NEW! 追加(0.8秒後) */
}

.hero-image {
    animation-delay: 1s;          /* ← NEW! 追加(1秒後) */
}


/* Hero レスポンシブ */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero {
        padding: 100px 0 80px;    /* 既存 */
        min-height: 70vh;         /* 既存 */
    }
    
    .hero-wrapper {
        flex-direction: column;   /* 既存(縦並び) */
        gap: 60px;                /* 既存 */
        padding: 0 40px;          /* 既存 */
    }
    
    .hero-text h1 {
        font-size: 38px;          /* 既存 */
    }
    
    .hero-image img {
        max-width: 300px;         /* 既存 */
    }
    
    .hero-links {
        flex-wrap: wrap;          /* ← NEW! 追加 */
    }
    
    main {
        padding-top: 72px;        /* 既存(ヘッダー分) */
    }
}

@media (max-width: 767px) {
    .hero {
        padding: 80px 0 60px;     /* 既存 */
        min-height: 60vh;         /* 既存 */
    }
    
    .hero-wrapper {
        flex-direction: column;   /* 既存(縦並び) */
        padding: 0 20px;          /* 既存 */
        gap: 40px;                /* 既存 */
    }
    
    .hero-text h1 {
        font-size: 32px;          /* 既存 */
        margin: 16px 0;           /* 既存 */
    }
    
    .hero-text p {
        font-size: 14px;          /* 既存 */
        margin-bottom: 32px;      /* 既存 */
    }
    
    .hero-image img {
        max-width: 250px;         /* 既存 */
    }
    
    .hero-links {
        flex-direction: column;   /* ← NEW! 追加(縦並び) */
        gap: 16px;                /* ← NEW! 追加 */
        align-items: center;
    }
    
    .hero-link {
        width: 100%;              /* ← NEW! 追加 */
        max-width: 280px;         /* ← NEW! 追加 */
        text-align: center;
    }
    
    main {
        padding-top: 64px;        /* 既存(ヘッダー分) */
    }
}
/* ========================================
   Works セクション
======================================== */
.works {
    padding: 120px 20px 80px;  /* 既存 */
    background: #FFFBF5;       /* ← ほんのり暖色 */
}

.works h2 {
    text-align: center;        /* 既存 */
    font-size: 38px;           /* 既存 */
    font-weight: 700;          /* 既存 */
    letter-spacing: 0.2em;     /* 既存 */
    margin-bottom: 80px;       /* 既存 */
}

.works-grid {
    max-width: 1000px;         /* 既存 */
    margin: 0 auto;            /* 既存 */
    display: grid;             /* 既存 */
    grid-template-columns: repeat(2, 1fr); /* ← 2カラム */
    gap: 40px;                 /* 既存 */
}

.work-item {
    background: white;         /* ← NEW! 追加 */
    border-radius: 12px;       /* ← NEW! 追加 */
    overflow: hidden;          /* ← NEW! 追加 */
    transition: transform 0.3s;/* ← NEW! 追加 */
    box-shadow: 0 2px 12px rgba(0,0,0,0.08); /* ← NEW! 追加 */
}

.work-item:hover {
    transform: translateY(-8px); /* ← NEW! 追加(ホバーで浮く) */
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* ← NEW! 追加 */
}

.work-image {
    width: 100%;               /* ← NEW! 追加 */
    height: 280px;             /* ← NEW! 追加 */
    overflow: hidden;          /* ← NEW! 追加 */
}

.img {
    width: 100%;               /* ← NEW! 追加 */
    height: 100%;              /* ← NEW! 追加 */
    object-fit: cover;         /* ← NEW! 追加 */
    transition: transform 0.3s;/* ← NEW! 追加 */
}

.work-item:hover .work-image img {
    transform: scale(1.05);    /* ← NEW! 追加(ホバーで拡大) */
}

.work-info {
    padding: 24px;             /* ← NEW! 追加 */
}

.work-info h3 {
    font-size: 20px;           /* ← NEW! 追加 */
    font-weight: 500;          /* ← NEW! 追加 */
    margin-bottom: 8px;        /* ← NEW! 追加 */
}

.work-tech {
    font-size: 13px;           /* ← NEW! 追加 */
    color: #9ED99D;            /* ← NEW! 追加(緑) */
    margin-bottom: 12px;       /* ← NEW! 追加 */
}

.work-description {
    font-size: 14px;           /* ← NEW! 追加 */
    line-height: 1.8;          /* ← NEW! 追加 */
    color: #666;               /* ← NEW! 追加 */
}

/* 準備中 */
.coming-soon-box {
    width: 100%;               /* ← NEW! 追加 */
    height: 280px;             /* ← NEW! 追加 */
    background: #f5f5f5;       /* ← NEW! 追加 */
    display: flex;             /* ← NEW! 追加 */
    align-items: center;       /* ← NEW! 追加 */
    justify-content: center;   /* ← NEW! 追加 */
    color: #999;               /* ← NEW! 追加 */
    font-size: 18px;           /* ← NEW! 追加 */
}

/* Works レスポンシブ */
@media (max-width: 767px) {
    .works {
        padding: 80px 20px 60px; /* ← NEW! 追加 */
    }
    
    .works h2 {
        font-size: 32px;         /* ← NEW! 追加 */
        margin-bottom: 60px;     /* ← NEW! 追加 */
    }
    
    .works-grid {
        grid-template-columns: 1fr; /* ← NEW! 追加(1カラムに) */
        gap: 32px;               /* ← NEW! 追加 */
    }
    
    .work-image {
        height: 220px;           /* ← NEW! 追加 */
    }
}
/* ========================================
   Works セクション
======================================== */
.works {
    padding: 120px 20px 80px;
    background: #FFFBF5;
}

.works h2 {
    text-align: center;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 80px;
}

.works-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.work-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.work-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.work-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #FFFFFF; /* ← 修正! セミコロン追加 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
 .work-image-contain img{
object-fit: contain;
 }


.work-item:hover .work-image img {
    transform: scale(1.05);
}

.work-info {
    padding: 24px;
    flex-grow: 1;
}

.work-info h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px;
}

.work-tech {
    font-size: 13px;
    color: #9ED99D;
    margin-bottom: 12px;
}

.work-description {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
}

/* 準備中 */
.coming-soon-box {
    width: 100%;
    height: 280px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 18px;
}

/* ========================================
   Works リンク
======================================== */
.work-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.work-link-icon {
    display: inline-block;
    margin-top: 12px;
    color: #9ED99D;
    font-size: 14px;
    font-weight: 500;
}

.work-link:hover .work-link-icon {
    text-decoration: underline;
}

/* Works レスポンシブ */
@media (min-width: 768px) and (max-width: 1024px) {
    .works {
        padding: 100px 40px 80px;
    }
    
    .works h2 {
        font-size: 34px;
        margin-bottom: 70px;
    }
    
    .works-grid {
        gap: 32px;
    }
    
    main {
        padding-top: 72px;
    }
}

@media (max-width: 767px) {
    .works {
        padding: 80px 20px 60px;
    }
    
    .works h2 {
        font-size: 32px;
        margin-bottom: 60px;
    }
    
    .works-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .work-image {
        height: 220px;
    }
    
    .coming-soon-box {
        height: 220px;
    }
    
    main {
        padding-top: 64px;
    }
}
/* ========================================
   Work Detail (作品詳細ページ) - 既存
======================================== */
.work-detail {
    max-width: 800px;                    /* 既存 */
    margin: 0 auto;                      /* 既存 */
    padding: 120px 20px 0px;            /* 既存 */
}

.back-link {
    display: inline-block;               /* 既存 */
    color: #9ED99D;                      /* 既存 */
    text-decoration: none;               /* 既存 */
    margin-bottom: 40px;                 /* 既存 */
    font-size: 14px;                     /* 既存 */
}

.back-link:hover {
    text-decoration: underline;          /* 既存 */
}

.work-detail h1 {
    font-size: 36px;                     /* 既存 */
    font-weight: 700;                    /* 既存 */
    margin-bottom: 16px;                 /* 既存 */
}

.work-detail-tech {
    color: #9ED99D;                      /* 既存 */
    font-size: 16px;                     /* 既存 */
    margin-bottom: 120px;                /* 既存 */
}

.work-detail-image {
    width: 100%;                         /* 既存 */
    margin-bottom: 24px;                 /* 既存 */
}

.work-detail-image img {
    width: 100%;                         /* 既存 */
    height: auto;                        /* 既存 */
    border-radius: 8px;                  /* 既存 */
}

.work-detail-section {
    margin-bottom: 60px;                 /* 既存 */
}

.work-detail-section h2 {
    font-size: 24px;                     /* 既存 */
    font-weight: 700;                    /* 既存 */
    margin-bottom: 40px;                 /* 既存 */
    padding-bottom: 12px;                /* 既存 */
    border-bottom: 2px solid #9ED99D;    /* 既存 */
}

.work-detail-section p {
    line-height: 1.8;                    /* 既存 */
    color: #666;                         /* 既存 */
}

.work-detail-section ul {
    list-style: disc;                    /* 既存 */
    padding-left: 20px;                  /* 既存 */
}

.work-detail-section ul li {
    line-height: 1.8;                    /* 既存 */
    color: #666;                         /* 既存 */
    margin-bottom: 8px;                  /* 既存 */
}

/* ========================================
   ここから追加 - バナー詳細用の新スタイル
======================================== */

/* バナーヘッダー（タイトル + メタ情報） */
.banner-header {
    display: flex;                       /* ← NEW! 追加 */
    justify-content: space-between;      /* ← NEW! 追加 */
    align-items: center;                 /* ← NEW! 追加 */
    margin-bottom: 40px;                 /* ← NEW! 追加 */
    flex-wrap: wrap;                     /* ← NEW! 追加 */
    gap: 16px;                           /* ← NEW! 追加 */
}

.banner-header h2 {
    margin-bottom: 0;                    /* ← NEW! 追加（既存のmargin-bottomを上書き） */
    padding-bottom: 0;                   /* ← NEW! 追加（既存のpadding-bottomを上書き） */
    border-bottom: none;                 /* ← NEW! 追加（既存のborder-bottomを上書き） */
}

/* バナーメタ情報（サイズ + ツール） */
.banner-meta {
    display: flex;                       /* ← NEW! 追加 */
    align-items: center;                 /* ← NEW! 追加 */
    gap: 12px;                           /* ← NEW! 追加 */
}

/* バナーサイズ表示 */
.banner-size {
    display: inline-block;               /* ← NEW! 追加 */
    padding: 8px 20px;                   /* ← NEW! 追加 */
    background: #F5F5F5;                 /* ← NEW! 追加 */
    border-radius: 20px;                 /* ← NEW! 追加 */
    font-size: 13px;                     /* ← NEW! 追加 */
    color: #666;                         /* ← NEW! 追加 */
    font-weight: 500;                    /* ← NEW! 追加 */
}

/* ツールタグコンテナ */
.banner-tools {
    display: flex;                       /* ← NEW! 追加 */
    gap: 8px;                            /* ← NEW! 追加 */
}

/* ツールタグ（緑の丸タグ） */
.tool-tag {
    display: inline-block;               /* ← NEW! 追加 */
    padding: 6px 14px;                   /* ← NEW! 追加 */
    background: #9ED99D;                 /* ← NEW! 追加（メインカラー） */
    color: white;                        /* ← NEW! 追加 */
    border-radius: 16px;                 /* ← NEW! 追加 */
    font-size: 12px;                     /* ← NEW! 追加 */
    font-weight: 500;                    /* ← NEW! 追加 */
    letter-spacing: 0.05em;              /* ← NEW! 追加 */
}

/* バナー間の余白を広げる */
.work-detail-section {
    margin-bottom: 150px;                /* ← 変更（60px → 120px） */
}

/* ========================================
   レスポンシブ対応
======================================== */

/* スマホ */
@media (max-width: 767px) {
    .work-detail {
        padding: 20px 20px 0px;         /* 既存 */
    }
    .work-detail-section{
        margin-bottom: 64px;
    }
    .work-detail-tech {
        margin-bottom: 80px;
    }
    .work-detail h1 {
        font-size: 28px;                 /* 既存 */
    }

    
    .work-detail-section h2 {
        font-size: 20px;                 /* 既存 */
    }
    
    main {
        padding-top: 64px;               /* 既存 */
    }
    
    /* ========== ここから追加 ========== */
    .banner-header {
        flex-direction: column;          /* ← NEW! 追加（縦並びに） */
        align-items: flex-start;         /* ← NEW! 追加 */
        gap: 16px;                       /* ← NEW! 追加 */
    }
    
    .banner-meta {
        flex-direction: column;          /* ← NEW! 追加（縦並びに） */
        align-items: flex-start;         /* ← NEW! 追加 */
        gap: 8px;                        /* ← NEW! 追加 */
    }
    
    .banner-size {
        font-size: 12px;                 /* ← NEW! 追加 */
        padding: 6px 16px;               /* ← NEW! 追加 */
    }
    
    .tool-tag {
        font-size: 11px;                 /* ← NEW! 追加 */
        padding: 5px 12px;               /* ← NEW! 追加 */
    }
    /* ========== ここまで追加 ========== */
}
/* ========================================
   Work Detail (作品詳細ページ) - 既存
======================================== */
.work-detail {
    max-width: 800px;                    /* 既存 */
    margin: 0 auto;                      /* 既存 */
    padding: 120px 20px 80px;            /* 既存 */
}

.back-link {
    display: inline-block;               /* 既存 */
    color: #9ED99D;                      /* 既存 */
    text-decoration: none;               /* 既存 */
    margin-bottom: 40px;                 /* 既存 */
    font-size: 14px;                     /* 既存 */
}

.back-link:hover {
    text-decoration: underline;          /* 既存 */
}

.work-detail h1 {
    font-size: 36px;                     /* 既存 */
    font-weight: 700;                    /* 既存 */
    margin-bottom: 16px;                 /* 既存 */
}

.work-detail-tech {
    color: #9ED99D;                      /* 既存 */
    font-size: 16px;                     /* 既存 */
    margin-bottom: 60px;                 /* ← 変更（120px → 60px 概要があるため） */
}

/* 概要セクション - 既存（バナーページで追加済み） */
.work-detail-overview {
    background: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%); /* 既存 */
    padding: 32px;                       /* 既存 */
    border-radius: 12px;                 /* 既存 */
    margin-bottom: 80px;                 /* 既存 */
    border-left: 4px solid #9ED99D;      /* 既存 */
}

.work-detail-overview p {
    line-height: 1.9;                    /* 既存 */
    color: #37383C;                      /* 既存 */
    font-size: 15px;                     /* 既存 */
}

/* ========================================
   ここから追加 - LP詳細ページ用の新スタイル
======================================== */

/* LP全体画像 */
.lp-full-image {
    width: 100%;                         /* ← NEW! 追加 */
    margin-bottom: 80px;                 /* ← NEW! 追加 */
    border-radius: 12px;                 /* ← NEW! 追加 */
    overflow: hidden;                    /* ← NEW! 追加 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* ← NEW! 追加 */
}

.lp-full-image img {
    width: 100%;                         /* ← NEW! 追加 */
    height: auto;                        /* ← NEW! 追加 */
    display: block;                      /* ← NEW! 追加 */
}

/* 制作情報グリッド */
.work-info-grid {
    display: grid;                       /* ← NEW! 追加 */
    grid-template-columns: 1fr;          /* ← NEW! 追加 */
    gap: 48px;                           /* ← NEW! 追加 */
    margin-bottom: 60px;                 /* ← NEW! 追加 */
}

/* 情報セクション */
.info-section h2 {
    font-size: 20px;                     /* ← NEW! 追加 */
    font-weight: 500;                    /* ← NEW! 追加 */
    color: #37383C;                      /* ← NEW! 追加 */
    margin-bottom: 20px;                 /* ← NEW! 追加 */
    padding-bottom: 12px;                /* ← NEW! 追加 */
    border-bottom: 2px solid #9ED99D;    /* ← NEW! 追加 */
}

.info-content {
    line-height: 1.8;                    /* ← NEW! 追加 */
    color: #666;                         /* ← NEW! 追加 */
}

.info-content ul {
    list-style: none;                    /* ← NEW! 追加 */
    padding: 0;                          /* ← NEW! 追加 */
    margin: 0;                           /* ← NEW! 追加 */
}

.info-content ul li {
    padding-left: 1em;                   /* ← NEW! 追加 */
    text-indent: -1em;                   /* ← NEW! 追加 */
    margin-bottom: 12px;                 /* ← NEW! 追加 */
    font-size: 15px;                     /* ← NEW! 追加 */
}

.info-content ul li::before {
    content: "• ";                       /* ← NEW! 追加 */
    color: #9ED99D;                      /* ← NEW! 追加 */
    font-weight: bold;                   /* ← NEW! 追加 */
}

.info-content p {
    font-size: 15px;                     /* ← NEW! 追加 */
    margin: 0;                           /* ← NEW! 追加 */
}

/* 制作情報（制作期間・使用ツール） */
.production-info {
    display: flex;                       /* ← NEW! 追加 */
    gap: 40px;                           /* ← NEW! 追加 */
    padding: 32px;                       /* ← NEW! 追加 */
    background: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%); /* ← NEW! 追加 */
    border-radius: 12px;                 /* ← NEW! 追加 */
    border: 1px solid #E5E5E5;           /* ← NEW! 追加 */
}

.production-item {
    display: flex;                       /* ← NEW! 追加 */
    flex-direction: column;              /* ← NEW! 追加 */
    gap: 12px;                           /* ← NEW! 追加 */
}

.production-label {
    font-size: 14px;                     /* ← NEW! 追加 */
    color: #999;                         /* ← NEW! 追加 */
    font-weight: 500;                    /* ← NEW! 追加 */
}

.production-value {
    font-size: 16px;                     /* ← NEW! 追加 */
    color: #37383C;                      /* ← NEW! 追加 */
    font-weight: 500;                    /* ← NEW! 追加 */
}

/* ツールタグ（既存のスタイルを再利用） */
.banner-tools {
    display: flex;                       /* 既存（バナーページで追加済み） */
    gap: 8px;                            /* 既存 */
}

.tool-tag {
    display: inline-block;               /* 既存 */
    padding: 6px 14px;                   /* 既存 */
    background: #9ED99D;                 /* 既存 */
    color: white;                        /* 既存 */
    border-radius: 16px;                 /* 既存 */
    font-size: 12px;                     /* 既存 */
    font-weight: 500;                    /* 既存 */
    letter-spacing: 0.05em;              /* 既存 */
}

/* ========================================
   レスポンシブ対応
======================================== */

/* タブレット */
@media (min-width: 768px) and (max-width: 1024px) {
    .work-detail {
        padding: 100px 40px 80px;        /* 既存 */
    }
    
    .work-detail h1 {
        font-size: 32px;                 /* 既存 */
    }
    
    .work-detail-overview {
        padding: 28px;                   /* 既存 */
        margin-bottom: 60px;             /* 既存 */
    }
    
    /* ========== ここから追加 ========== */
    .lp-full-image {
        margin-bottom: 60px;             /* ← NEW! 追加 */
    }
    
    .work-info-grid {
        gap: 40px;                       /* ← NEW! 追加 */
    }
    
    .production-info {
        flex-direction: column;          /* ← NEW! 追加 */
        gap: 24px;                       /* ← NEW! 追加 */
    }
    /* ========== ここまで追加 ========== */
}

/* スマホ */
@media (max-width: 767px) {
    .work-detail {
        padding: 80px 20px 60px;         /* 既存 */
    }
    
    .work-detail h1 {
        font-size: 28px;                 /* 既存 */
    }
    
    .work-detail-overview {
        padding: 24px;                   /* 既存 */
        margin-bottom: 48px;             /* 既存 */
    }
    
    .work-detail-overview p {
        font-size: 14px;                 /* 既存 */
    }
    
    main {
        padding-top: 64px;               /* 既存 */
    }
    
    /* ========== ここから追加 ========== */
    .lp-full-image {
        margin-bottom: 48px;             /* ← NEW! 追加 */
    }
    
    .work-info-grid {
        gap: 36px;                       /* ← NEW! 追加 */
    }
    
    .info-section h2 {
        font-size: 18px;                 /* ← NEW! 追加 */
    }
    
    .info-content ul li {
        font-size: 14px;                 /* ← NEW! 追加 */
        margin-bottom: 10px;             /* ← NEW! 追加 */
    }
    
    .info-content p {
        font-size: 14px;                 /* ← NEW! 追加 */
    }
    
    .production-info {
        flex-direction: column;          /* ← NEW! 追加 */
        gap: 20px;                       /* ← NEW! 追加 */
        padding: 24px;                   /* ← NEW! 追加 */
    }
    
    .production-label {
        font-size: 13px;                 /* ← NEW! 追加 */
    }
    
    .production-value {
        font-size: 15px;                 /* ← NEW! 追加 */
    }
    /* ========== ここまで追加 ========== */
}
/* ========================================
   忍者CODE LP - 完全版CSS
======================================== */

/* ========== カラー変数 ========== */
:root {
    /* メインカラー */
    --primary-blue: #4A90E2;        /* 青（キャッチコピーなど） */
    --primary-yellow: #FFF64C;      /* 黄色（CTAボタン） */
    --primary-green: #9ED99D;       /* 緑（アクセント） */
    --primary-pink: #FFB6C1;        /* ピンク（装飾） */
 
    
    /* 背景色 */
    --bg-white: #FFFFFF;
    --bg-light: #F8F9FA;
    --bg-blue-light: #E8F4F8;
    --bg-beige: #FFF9F5;
    
    /* テキストカラー */
    --text-dark: #37383C;
    --text-gray: #666666;
    --text-light: #999999;
    
    /* その他 */
    --border-gray: #E5E5E5;
}

/* ========== 全体設定 ========== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--text-dark);
    letter-spacing: 0.05em;
    line-height: 1.8;
    background: var(--bg-white);
}

/* LP専用のコンテナ */
.ninjacode-lp {
    /* LPページ全体を包むラッパー */
}

/* セクション共通 */
section {
    padding: 80px 20px;
}

/* セクションタイトル共通 */
.section-title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.6;
}

/* ハイライト共通 */
.highlight-blue {
    color: var(--primary-blue);
}

.highlight-yellow {
    background: linear-gradient(transparent 60%, var(--primary-yellow) 60%);
    padding: 0 8px;
}

.highlight-green {
    color: var(--primary-green);
}

/* CTAボタン共通 */
.cta-button {
     display: block;
    max-width: 400px;
    padding: 16px 32px;               /* ← 変更（高さ減らす） */
    background: var(--primary-yellow);
    color: #325FBA;
    font-size: 15px;                  /* ← 変更（小さく） */
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    text-align: center;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(255, 229, 0, 0.3);
    border: 3px solid var(--primary-blue);
    margin: 0 auto;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 229, 0, 0.5);
}

/* ========================================
   Hero Section（ファーストビュー）
======================================== */
.hero-ninja {
    position: relative;                /* ← 基準点 */
    padding: 0px 20px 120px;         /* ← 下に余白追加 */
    background: #F8F9FA;              /* ← 背景色（余白部分） */
}

.hero-ninja-container {
    max-width: 1280px;                /* ← コンテナ幅 */
    margin: 0 auto;
    position: relative;
    min-height: 600px;                /* ← 高さ確保 */
}

/* ロゴ（左上） */
.ninja-logo {
    position: relative;               /* ← 既存 */
    z-index: 3;                       /* ← 一番前面 */
    margin-left: 70px;              /* ← 余白 */
}

.ninja-logo h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    padding-top: 20px;
}

/* 背景画像（右側） */
.hero-image-wrapper {
    position: absolute;               /* ← 絶対配置 */
    top: 0;
    right: 0;
    width: 70%;                       /* ← PC（1340px以上）は80% */
    height: 100%;
    z-index: 1;                       /* ← 背面 */
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left;
}

/* ← NEW! 1340px以下で70%に変更 */
@media (max-width: 1340px) {
    .hero-image-wrapper {
        width: 77%;                   /* ← NEW! 80% → 70% に変更 */
    }
    
    .ninja-logo {
        margin-left: 50px;            /* ← NEW! 70px → 50px に変更 */
    }
}

/* キャッチコピー（白いボックスの外・画像の上） */
.hero-catchcopy-overlay {
    position: absolute;  
    right: 500px;             /* ← NEW! 絶対配置 */
    top: 70px;                       /* ← NEW! 上から位置 */                      /* ← NEW! 左から位置 */
    z-index: 2;                       /* ← NEW! 画像より前面 */
    font-size: 38px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-dark);
    max-width: 400px;                 /* ← NEW! 幅制限 */
}

/* 白いボックス（バッジ・サブコピー・ボタンのみ） */
.hero-white-box {
    position: absolute;               /* ← 変更（絶対配置に） */
    top: 315px;                       /* ← NEW! キャッチコピーの下 */
    left: 40px;                       /* ← 変更 */
    z-index: 2;                       /* ← 画像より前面 */
    max-width: 650px;                 /* ← 変更（幅を広く） */
    background: white;                /* ← 白背景 */
    padding: 30px 40px;               /* ← 変更（高さを低く） */
   
}

/* 実績バッジ */
.achievement-badges {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;              /* ← 変更（余白減らす） */
    flex-wrap: wrap;
}
.achievement-image {
    width: 100%;
    max-width: 450px;              /* ← 幅制限 */
    height: auto;
    display: block;
    margin: 0 auto;                /* ← 中央揃え */
}
.badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: #FFF9F0;              /* ← 薄いオレンジ背景 */
    border-radius: 12px;
    min-width: 100px;
    border: 2px solid #FFE5CC;        /* ← オレンジの枠 */
}

.badge-icon {
    font-size: 28px;
    margin-bottom: 4px;
}

.badge-number {
    font-size: 22px;
    font-weight: 700;
    color: #FF8C00;                   /* ← オレンジ */
    margin-bottom: 2px;
}

.badge-label {
    font-size: 11px;
    color: var(--text-gray);
    text-align: center;
}

/* サブコピー */
.hero-subcopy {
    font-size: 13px;                  /* ← 変更（小さく） */
    color: var(--text-gray);
    margin-bottom: 20px;              /* ← 変更（余白減らす） */
    text-align: center;
    font-weight: 500;
}

/* CTAボタン（Hero専用） */
.cta-button-hero {
    display: block;
    width: 100%;
    padding: 16px 32px;               /* ← 変更（高さ減らす） */
    background: var(--primary-yellow);
    color: #325FBA;
    font-size: 15px;                  /* ← 変更（小さく） */
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    text-align: center;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(255, 229, 0, 0.3);
    border: 3px solid var(--primary-blue);
}

.cta-button-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 229, 0, 0.5);
}

/* ========================================
   Problems Section（悩み）
======================================== */
.problems {
    background: var(--bg-light);
    padding: 80px 20px;
    background-color: #EFF5F9;
}

.problems-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

/* アイコン装飾 */
.icon-biginer{
    font-size: 24px;
    margin-right: 8px;
}
.biginer-text1{
 color: #51AAEB;
}
.biginer-text2{
 color: #22588A;
}


/* 悩みグリッド */
.problems-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 60px;
}

.problem-item {
    background: white;
    padding: 32px 24px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s;
}

.problem-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.problem-icon {
    width: 120px;                    /* ← NEW! 円形のサイズ */
    height: 120px;
    border-radius: 50%;              /* ← NEW! 円形に */
    overflow: hidden;                /* ← NEW! 画像クリップ */
    margin: 0 auto 16px;             /* ← NEW! 中央揃え */
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.problem-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.problem-item h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.6;
}

.problem-item p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.8;
}

/* ========================================
   Comparison Section（比較表）
======================================== */
.comparison {
    background: white;
    padding: 80px 20px;
}

.comparison-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

/* テーブル */
.comparison-table {
    color: #22588A;
    overflow-x: auto;
    margin-bottom: 60px;
}

.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
}
.comparison-table td:first-child {
    border-left: none;  /* ← NEW! 左のボーダーだけ削除 */
}

.comparison-table th,
.comparison-table td {
    padding: 20px;
    text-align: center;
   border: 1px solid #CFE1E8;
}

.comparison-table thead th {
    background: #CFE1E8;
    font-weight: 700;
    font-size: 16px;
}
.comparison-table thead th:first-child {
    background: white;  /* または transparent */
    border-color: white;
}

.comparison-table thead th.highlight-col {
    background: #22588A;
    color: white;
    border-color: #22588A;
    border-width: 8px;
}
.other-col{
    color:#22588A ;
}


.comparison-table tbody td {
    font-size: 14px;
}

.comparison-table tbody td.highlight-col {
   
    font-weight: 500;
    border-color: #22588A;  /* ← NEW! 枠線を青に */
    border-width: 8px;      /* ← NEW! 枠線を太くしたい場合 */
}

.comparison-table tbody tr:first-child td {
    border-top: none;
}

/* ========================================
   Price Section（料金）
======================================== */
.price {
    background: linear-gradient(135deg, #FFF0F5 0%, #FFFFFF 100%);
    padding: 80px 20px;
}

.price-wrapper {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.price-badge {
    padding: 40px;
}

.flower-left {
    position: absolute;
    left: 80px;
    top: 38%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
}

.flower-right {
   position: absolute;
    right: 80px;
    top: 38%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
}
.price-badge h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    position: relative; 
    color: #22588A;
}

.price-amount {
    font-size: 48px;
    font-weight: 700;
    color: #E91E63;
}

.tax {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-gray);
}

/* ========================================
   Flow Section（無料体験の流れ）
======================================== */
.flow {
    background: #CFE1E8;
    padding: 80px 20px;
}

.flow-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
.section-title-flow{
    color: #325FBA;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.6;
}
.section-title-hukugyou{
    color: #51AAEB;
}

.flow-subtitle {
    color: #22588A;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 60px;
}

/* ステップグリッド */
.flow-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    /* position: relative; は不要 */
}

.flow-step {
    background: white;
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    position: relative;               /* ← NEW! 各カードを基準に */
     color:#22588A;
}

.step-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-yellow);
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    padding: 0;
    margin-bottom: 0;
}

.flow-step .step-badge {
    position: absolute;
    top: -40px;                       /* ← カード上から40px */
    transform: translateX(-50%);      /* ← 左右中央揃え */
}

.step-image {
    width: 100%;
    height: 200px;
    background: var(--bg-light);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flow-step h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.flow-step p {
    font-size: 14px;
    color:#22588A;;
    line-height: 1.8;
}

.flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--primary-blue);
    font-weight: 700;
}


/* ========================================
   Voice Section（お客様の声）
======================================== */
.voice {
    background: #CFE1E8;
    padding: 80px 20px;
}

.voice-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.voice-header {
    text-align: center;
    margin-bottom: 60px;
}

.voice-header h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #22588A;
}

.voice-subtitle {
    font-size: 24px;
    color: #22588A;
}
.voice-subtitle-bold{
  color: #51AAEB;
  font-size: 48px;
  font-weight: 700;
}

/* 声のリスト */
.voice-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.voice-item {
    display: flex;
    gap: 24px;
    padding: 32px;
    background: var(--bg-light);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.voice-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-white);
}

.voice-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.voice-content {
    flex: 1;
    position: relative;
}

.voice-content h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.voice-rating {
    color: #FFD700;
    font-size: 14px;
    margin-bottom: 12px;
}

.voice-content p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.8;
    margin-bottom: 12px;
}

.voice-link {
     display: inline-flex;            /* ← NEW! 追加 */
    align-items: center;             /* ← NEW! 追加 */
    justify-content: center;         /* ← NEW! 追加 */
    width: 30px;                     /* ← NEW! 追加（サイズ） */
    height: 30px;                    /* ← NEW! 追加 */
    background: var(--primary-blue); /* ← NEW! 追加（青背景） */
    color: white;                    /* ← NEW! 変更（白い➕） */
    border-radius: 50%;              /* ← NEW! 追加（円形） */
    text-decoration: none;           /* 既存 */
    font-size: 16px;                 /* ← 変更（少し大きく） */
    transition: all 0.3s;            /* ← NEW! ホバーアニメ */
    position: absolute;               /* ← NEW! 絶対配置 */
    bottom: -25px;                        /* ← NEW! 下から0 */
    right: -20px;                         /* ← NEW! 右から0 */
}

/* ========================================
   Contact Section（お申込みフォーム）
======================================== */
.contact {
    background: linear-gradient(90deg, 
        #3B99CD 0%, 
        #3B99CD 7%, white 7%, white 93%, 
        #3B99CD 93%, 
        #3B99CD 100%);
    padding: 80px 93px;
}

.contact-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 60px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.form-title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    color: white;
    background: #325FBA;
    padding: 20px;
    border-radius: 8px 8px 0 0;
    margin: -60px -40px 40px;
    position: relative;
}

.form-title::after {
    content: '';
    position: absolute;
    bottom: -29px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 400px solid transparent;
    border-right: 400px solid transparent;
    border-top: 30px solid #325FBA;
}

.contact-form {
    padding-top: 40px;
}

.form-subtitle {
    font-size: 14px;
    color: #22588A;
    margin-bottom: 20px;
}

.form-subtitle-bold {
    font-weight: 700;
}

.required {
    color: #E91E63;
    margin-left: 4px;
}

/* ← NEW! テーブルレイアウト用 */
.contact-form-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
}

.contact-form-table tr {
    display: grid;
    grid-template-columns: 235px 1fr;
    align-items: center;
}

.contact-form-table tr:last-child {
    align-items: flex-start;  /* ← NEW! textareaに合わせて上揃え */
    
}

.form-label {
    background-color: #E8F4F8;
    padding: 12px 16px;
    font-weight: 400;
    font-size: 14px;
    color: #356693;
    border: 1px solid #CFE1E8;
    height: 100%;
    display: flex;
    align-items: center;
}

.form-input input,
.form-input select,
.form-input textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #CFE1E8;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Noto Sans JP', sans-serif;
}
.form-input input::placeholder,
.form-input textarea::placeholder {
    color: #CFE1E8;
    opacity: 1; 
    border: 1px solid #CFE1E8;
}
.contact-form-table tr:last-child .form-input textarea::placeholder {
    border: none;
}


.form-input input:focus,
.form-input select:focus,
.form-input textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.form-input textarea {
    resize: none;
    line-height: 1.6;
}
.form-input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 0 20px 12px;
    border: 1px solid #CFE1E8;  /* ← NEW! 外側に枠線 */
}
.form-input-col input {
    border: 1px solid #CFE1E8;  /* ← NEW! 内側の枠線を削除 */
   
}

.form-input-col:last-child input {
   border-right: 1px solid #CFE1E8;
}

.form-input-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-input-label {
    font-size: 13px;
    font-weight: 500;
    color: #22588A;
    margin: 10px 0 0 10px;
}

/* 送信ボタン */
.submit-button {
    display: block;
    max-width: 400px;
    padding: 16px 32px;
    background: var(--primary-yellow);
    color: #325FBA;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    text-align: center;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(255, 229, 0, 0.3);
    border: 3px solid var(--primary-blue);
    margin: 0 auto;
}

.submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 229, 0, 0.5);
}

/* ========================================
   レスポンシブ対応
======================================== */

/* タブレット */
@media (min-width: 768px) and (max-width: 1024px) {
    section {
        padding: 60px 40px;
    }
    
    .section-title {
        font-size: 26px;
        margin-bottom: 50px;
    }
    
    /* Hero */
    .hero-image-wrapper{
    position: relative;
    width: 100%;
    aspect-ratio: 14 / 10;
    margin-bottom: 20px;
    }
    .ninja-logo {
        margin-left: 0;  
        margin-bottom: 20px;              /* ← 変更 */
    }
    
    .hero-ninja-container {
        min-height: 500px;            /* ← 変更 */
    }
    
    .hero-catchcopy-overlay {
        font-size: 32px;              /* ← NEW! 追加 */
        top: 100px;                   /* ← NEW! 追加 */
        left: 40px;                   /* ← NEW! 追加 */
    }
    
    .hero-white-box {
        max-width: 650px;             /* ← 変更 */
        padding: 28px 32px;           /* ← 変更 */
        top: 75px;                   /* ← NEW! 追加 */                  /* ← 変更 */
        position: relative;
        left: auto;
        margin: 0 auto;
        padding: 24px 20px;
    }
    .achievement-badges{
        justify-content: space-evenly;
    }
    
    .problems-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .flow-steps {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .comparison-table {
        font-size: 13px;
    }
    .voice-list{
        grid-template-columns: 1fr;
    }

}
@media (max-width: 988px) {
    .form-title::after {
        display: none;
    }
}

/* スマホ */
@media (max-width: 767px) {
    section {
        padding: 50px 20px;
    }
    
    .section-title {
        font-size: 22px;
        margin-bottom: 40px;
    }
    
    /* Hero */
    .hero-ninja {
        padding: 40px 20px 0px;      /* ← 変更 */
    }
    
    .hero-ninja-container {
        min-height: auto;             /* ← 変更 */
    }
    
    .ninja-logo {
        margin-bottom: 20px;  
        margin-left: 0;        /* ← 変更 */
    }
    
    .hero-image-wrapper {
        position: relative;           /* ← 変更（通常配置に） */
        width: 100%;                  /* ← 変更 */
        aspect-ratio: 14 / 10;               /* ← 追加 */
        margin-bottom: 20px;          /* ← 追加 */
    }
     .hero-image-wrapper img {
        object-position: top;  
        object-fit: contain;    /* ← 変更 */
    }
    
    .hero-catchcopy-overlay {
        position: relative;           /* ← NEW! 変更（通常配置に） */
        top: auto;                    /* ← NEW! 追加 */
        left: auto;                   /* ← NEW! 追加 */
        font-size: 26px;              /* ← 変更 */
        margin-bottom: 20px;          /* ← NEW! 追加 */
    }
    
    .hero-white-box {
        position: relative;           /* ← NEW! 変更（通常配置に） */
        top: auto;                    /* ← NEW! 追加 */
        left: auto;                   /* ← NEW! 追加 */
        margin: 0 auto;
        padding: 24px 20px;           /* ← 変更 */
    }
    
    .achievement-badges {
        justify-content:space-evenly;     /* ← 変更 */
        gap: 12px;                    /* ← 変更 */
    }
    
    .badge {
        min-width: 90px;              /* ← 変更 */
        padding: 10px 12px;           /* ← 変更 */
    }
    
    .badge-icon {
        font-size: 24px;              /* ← 変更 */
    }
    
    .badge-number {
        font-size: 18px;              /* ← 変更 */
    }
    
    .badge-label {
        font-size: 10px;              /* ← 変更 */
    }
    
    .hero-subcopy {
        font-size: 12px;              /* ← 変更 */
        margin-bottom: 16px;          /* ← 変更 */
    }
    
    .cta-button-hero {
        font-size: 14px;              /* ← 変更 */
        padding: 14px 24px;           /* ← 変更 */
    }
    
    .problems-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .comparison{
        padding: 40px 20px;
    }
    .comparison-table {
        font-size: 12px;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 12px 8px;
    }
    .flower-left,
    .flower-right {
        display: none;
    }
    .price-amount {
        font-size: 40px;
    }
    
    .flow-steps {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .voice{
         padding: 40px 20px;
    }
    .voice-item {
        flex-direction: column;
        text-align: center;
    }
    
    .voice-avatar {
        margin: 0 auto;
    }
    .contact {
        padding: 40px 60px;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact-wrapper {
        padding: 40px 20px;
    }
    
    .form-title {
        font-size: 22px;
        margin: -40px -20px 30px;
    }
    .voice-list{
        grid-template-columns: 1fr;
    }
    .contact-form-table tr {
        display: block;
    }
    
    .form-label {
        display: block;
        background-color: #E8F4F8;
        padding: 12px 16px;
        margin-bottom: 0;
        border-radius: 6px 6px 0 0;
    }
    
    .form-input {
        display: block;
    }
    
    .form-input input,
    .form-input select,
    .form-input textarea {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #CFE1E8;
        border-radius: 0 0 6px 6px;
        margin-bottom: 16px;
    }
    
    .form-input-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .voice-list{
        grid-template-columns: 1fr;
    }
}