/* ==========================================================================
トップページ 
==========================================================================*/



/* ==========================================================================
   Circular Text Animation
   ========================================================================== */

.circular-text {
    position: absolute;
    top: 40%;
    right: -120px;
    transform: translateY(-50%);
    width: 65%;
    height: auto;
    z-index: 0;
    pointer-events: none;
    animation: rotate 45s linear infinite;
    opacity: 0.2;
}

@keyframes rotate {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

.circular-text img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hide circular text on tablet and mobile */
@media screen and (max-width: 63.9375rem) {
    .circular-text {
        display: none;
    }
}

/* ==========================================================================
   Main Visual
   ========================================================================== */

.main-visual {
    overflow: hidden;
    position: relative;
    background: #fff;
    padding-top: calc(clamp(4rem, 5vw, 6rem) + 10rem);
}

.main-visual-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    position: relative;
    padding: 0 clamp(1rem, 2vw, 2rem) 5rem;
    box-sizing: border-box;
    overflow-x: hidden;
}

.main-visual-left {
    flex: 1;
    position: relative;
    z-index: 10;
    max-width: calc(50vw + clamp(1rem, 2vw, 3rem));
}

.main-visual-right {
    flex: 1;
    position: relative;
    max-width: calc(50vw - clamp(1rem, 2vw, 2rem));
    overflow: hidden;
    margin-left: clamp(1rem, 2vw, 3rem);
    z-index: 10;
}


/* ホームページ・お作りします */
.mv-catch {
    position: relative;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    width: 100%;
}

.mv-catch-bg {
    position: relative;
    width: 100%;
    max-width: calc(100vw - 50vw - clamp(2rem, 4vw, 6rem));
    height: auto;
}

.mv-catch-bg img {
    width: 83%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    position: relative;
    z-index: 15;
}


/* Freelance WEB/EC Designer >>SATO */
.mv-sato {
    position: relative;
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

.mv-sato img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    margin-left: 2rem;
    position: relative;
    z-index: 15;
}

/* 右側の一枚画像 */
.mv-image-single {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    z-index: 5;
}

.mv-image-single img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    position: relative;
    z-index: 15;
}

/* テラスの画像（一番上） */
.mv-image-terrace {
    top: 70px;
    right: 0;
    width: auto;
    height: auto;
    z-index: 3;
}

.mv-image-terrace img {
    width: auto;
    height: auto;
    max-width: none;
}

/* ショップの画像（右下） */
.mv-image-shop {
    bottom: 100px;
    right: -20px;
    width: auto;
    height: auto;
    z-index: 4;
}

.mv-image-shop img {
    width: auto;
    height: auto;
    max-width: none;
}

/* 顔写真（左下） */
.mv-image-face {
    bottom: 30px;
    left: -80px;
    width: auto;
    height: auto;
    z-index: 1;
}

.mv-image-face img {
    width: auto;
    height: auto;
    max-width: none;
}


/* メインビジュアル - タブレット縦表示対応 (1023px以下) */
@media screen and (max-width: 63.9375rem) {
    .main-visual {
        padding-top: 8rem;
    }
    
    .main-visual-container {
        flex-direction: column;
        padding: 0 clamp(1.25rem, 4vw, 2.5rem);
        max-width: 100%;
    }
    
    .main-visual-left {
        width: 100%;
        max-width: 100%;
        padding-top: clamp(1.5rem, 3vw, 2rem);
        margin-bottom: clamp(2rem, 4vw, 3rem);
        text-align: center;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .main-visual-right {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        margin-left: 0;
    }
    
    
    /* グラデーション画像のレスポンシブ対応 */
    .mv-catch {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 0;
    }
    
    .mv-catch-bg {
        width: 100%;
        max-width: 90%;
    }
    
    .mv-catch-bg img {
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    
    /* SATO テキストのレスポンシブ対応 */
    .mv-sato {
        display: none;
    }
    
    /* 右側画像のレスポンシブ対応 */
    .mv-image-single {
        justify-content: center;
        align-items: center;
    }
    
    .mv-image-single img {
        max-width: 85%;
        height: auto;
    }
}

/* メインビジュアル - スマートフォン対応 */
@media screen and (max-width: 47.9375rem) {
    .main-visual {
        padding-top: clamp(3.5rem, 7vw, 4rem);
    }
    
    .main-visual-container {
        padding: 0 clamp(1rem, 4vw, 1.25rem);
        min-height: auto;
        flex-direction: column;
        max-width: 100%;
    }
    
    .main-visual-left {
        padding-top: clamp(1rem, 2vw, 1.5rem);
        margin-bottom: clamp(1.5rem, 3vw, 2rem);
        width: 100%;
        max-width: 100%;
        text-align: center;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .main-visual-right {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        position: relative;
        margin-left: 0;
    }
    
        
    
    /* グラデーション画像のレスポンシブ対応 */
    .mv-catch {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 0;
    }
    
    .mv-catch-bg {
        width: 100%;
        max-width: 95%;
    }
    
    .mv-catch-bg img {
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    
    /* SATO テキストのレスポンシブ対応 */
    .mv-sato {
        display: none;
    }
    
    .mv-image-single img {
        max-width: 100%;
        height: auto;
    }
}


/**************** GREETINGセクション ****************/

.intro-section {
    width: 100%;
    padding: 8rem 0;
    position: relative;
    margin-top: 8rem;
    background-color: #6CAE20;
    background: linear-gradient(45deg, #B8D900 0%, #6CAE20 45%, #6CAE20 100%);
}

/* スマートフォン対応 (～767px) */
@media screen and (max-width: 47.9375rem) {
.intro-section {
    padding: 6rem 0;
}
}


/* コンテナ */
.intro-container {
  max-width: 60rem;
  margin: -1rem auto 0;
  position: relative;
  z-index: 1;
  text-align: center;
}

/* タイトル */
.intro-title {
  font-family: 'Courgette', cursive;
  font-size: clamp(2rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
  color: #fff;
  display: inline-block;
  position: relative;
}


/* 波線 */
.intro-line {
  margin-bottom: 2rem;
}
.intro-line img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: none;
}

/* 本文 */
.intro-text {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.8;
  color: #fff;
  margin: 0 auto;
  max-width: 40rem;
}



/* ==========================================================================
   お悩みセクション
   ========================================================================== */
.worries-section {
  background: #F3F2E8; /* 背景色 */
  border-bottom-left-radius: 50% 10%;  /* 横:50% 縦:10% */
  border-bottom-right-radius: 50% 10%;
  padding:15rem 3rem;
}

/* iPad (1024px～) */
@media screen and (min-width: 64rem) and (max-width: 90rem) {
    .worries-section {
        padding:8rem 3rem;
    }
}

/* タブレット対応 */
@media screen and (max-width: 63.9375rem) {
    .worries-section {
        padding:8rem 3rem;
    }
}


/* スマートフォン対応 */
@media screen and (max-width: 47.9375rem) {
    .worries-section {
    padding:5rem 3rem;
    }
}

        .trouble-section {
            position: relative;
            padding:0 2rem 4rem;
            text-align: center;
        }

        .trouble-title {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap:2rem;
            font-size: clamp(1.2rem, 3vw, 1.8rem);
            color: #715E5E;
            font-weight:bold;
        }

        .trouble-title-line {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .trouble-title-text {
            color: #715E5E;
        }

        .trouble-circles {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .trouble-circle {
            background-color: #715E5E;
            color: white;
            border-radius: 50%;
            width: 2.5em;
            height:2.5em;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1em;
        }

.circle-with-ase {
    position: relative;
}

.ase-icon {
    position: absolute;
    top: -2rem;
    left: -3rem;
    width: 3rem;
    max-width: 100%;
    height: auto;
    z-index: 2;
}

.text-with-icon {
    display: flex;
    align-items: center;
    gap: 8px; /* テキストと画像の間隔 */
}

.bikkuri-icon {
    width: 50px; /* お好みのサイズ */
    height: auto;
}

        /* レスポンシブ対応 */
        @media (max-width: 768px) {
            .trouble-title {
                gap:1rem;
                line-height: 1.4;
            }
            
            .trouble-circles {
                gap: .5rem;
            }
            
            .trouble-circle {
                width:2.5em;
                height:2.5em;
                font-size: 1.3em;
            }

        }



/**************** お悩みイラスト ****************/

    .speech-container {
        position: relative;
        width: 100%;
        min-height: 60vh;
        max-width: 1200px;
        margin: 0 auto;
    }
    /* 吹き出しの基本スタイル */
    .speech-bubble {
        position: absolute;
        background: white;
        border: 2px solid #333;
        border-radius:40px;
        padding: 15px 20px;
        font-size: clamp(0.9rem, 2vw, 1.1rem);
        line-height: 1.4;
        color: #333;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        max-width: 300px;
        text-align: center;
    }
    /* 吹き出しの尻尾 */
    .speech-bubble::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 0;
        background: white;
        border: 2px solid #333;
        border-top: none;
        border-left: none;
        transform: rotate(45deg);
    }
    /* 各吹き出しの配置とサイズ */
    .bubble-1 {
        top: 10%;
        left: 5%;
        width: clamp(150px, 18vw, 220px);
    }
    .bubble-1::after {
        bottom: -5px;
        right: 30px;
    }
    .bubble-2 {
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: clamp(200px, 25vw, 280px);
    }
    .bubble-2::after {
        bottom: -4px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
    }
    .bubble-3 {
        top: 10%;
        right: 5%;
        width: clamp(150px, 18vw, 220px);
    }
    .bubble-3::after {
        bottom: -4px;
        left: 30px;
        transform: rotate(135deg);
    }
    .bubble-4 {
        bottom: 20%;
        left: 6%;
        width: clamp(140px, 16vw, 200px);
    }
    .bubble-4::after {
        top: 30px;
        right: -15px;
        transform: rotate(-45deg);
    }
    .bubble-5 {
        bottom: 25%;
        right: 2%;
        width: clamp(140px, 16vw, 200px);
        border-color: #333;
    }
    .bubble-5::after {
        background: #333;
        border-color: #333;
        top: 40%;
        left: -17px;
        transform: rotate(-150deg);
        border-bottom: none;
        border-right: none;
        border-top: 2px solid #333;
        border-left: 2px solid #333;
    }
    /* 強調テキスト */
    .highlight {
        color: #4A7C59;
        font-weight: bold;
    }


/* タブレット対応 */
@media screen and (max-width: 63.9375rem) {
    .speech-bubble {
        font-size: clamp(0.8rem, 2.5vw, 1rem);
        padding: 12px 16px;
        max-width: 160px;
    }    .bubble-1, .bubble-3 {
        width: clamp(130px, 22vw, 180px);
    }
    
    .bubble-2 {
        width: clamp(140px, 25vw, 200px);
    }
   .bubble-4,.bubble-5 {
       display:none;
   }
}

/* スマートフォン対応 */
@media screen and (max-width: 47.9375rem) {
   .speech-container {
    min-height: 50vh;
   }
   
   .speech-bubble {
       font-size: clamp(0.7rem, 3vw, 0.9rem);
       padding: 10px 12px;
       border-radius: 15px;
       line-height: 1.3;
   }
   .bubble-1 {
       top:14%;
       left: 2%;
       width: clamp(110px, 28vw, 150px);
   }
   .bubble-2 {
       top:-3%;
       width: clamp(120px, 32vw, 170px);
   }
   .bubble-3 {
       top:14%;
       right: 2%;
       width: clamp(110px, 28vw, 150px);
   }

   .speech-bubble::after {
       width: 20px;
   }
   .bubble-1::after, .bubble-3::after {
       bottom: -9px;
   }
   .bubble-4,.bubble-5 {
       display:none;
   }
}

    /* 背景イラスト */
    .illustration-area {
        position: absolute;
        top: 30%;
        left: 50%; /*親要素のちょうど中央に左端を合わせる*/
        transform: translateX(-50%); /* 要素自身の幅の50%だけ左に移動 →要素の中心が親要素の中央にピッタリ揃う*/
        width:100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }



.worries-section {
  background: #F3F2E8;
  border-bottom-left-radius: 40% 40%;
  border-bottom-right-radius: 40% 40%;
  padding: 15rem 3rem 10rem;
  position: relative;
}

/* 次のセクションとの調整 */
.omakase {
  margin-top: -60px; /* 三角形の高さ分だけ上に移動 */
  padding-top: 90px; /* コンテンツが三角形に重ならないよう調整 */
}

/* iPad (1024px～) */
@media screen and (min-width: 64rem) and (max-width: 90rem) {
    .worries-section {
        border-bottom-left-radius: 40% 30%;
        border-bottom-right-radius: 40% 30%;
        padding:8rem 3rem 5rem;
    }
    
    .omakase {
        margin-top: -50px;
        padding-top: 75px;
    }
}

/* タブレット対応 */
@media screen and (max-width: 63.9375rem) {
    .worries-section {
        padding: 8rem 3rem;
        border-bottom-left-radius: 50% 30%;
        border-bottom-right-radius: 50% 30%;
    }
    
    .omakase {
        margin-top: -40px;
        padding-top: 60px;
    }
}

/* スマートフォン対応 */
@media screen and (max-width: 47.9375rem) {
    .worries-section {
        padding: 5rem 3rem;
        border-bottom-left-radius: 50% 20%;
        border-bottom-right-radius: 50% 20%;
    }
    
    .omakase {
        margin-top: -30px;
        padding-top: 45px;
    }
}

/* 下三角形 */
.tri_wrap{
  display: grid;
  margin: 0;
  padding: 8px;
  place-items: center;
  width: calc(100% - 16px);  
}
.triangle{
  background: #444;
  height: calc(100px / 2);
  width: 100px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  margin-top: -5rem;
}

/* スマートフォン対応 */
@media screen and (max-width: 47.9375rem) {
.triangle{
      margin-top:-3rem;
  height: calc(70px / 2);
  width: 70px;
}
}

/* ==========================================================================
   おまかせ
   ========================================================================== */
.omakase-wrapper {
            width: 100%;
            max-width: 1200px;
            margin: 5rem auto 10rem;
            position: relative;
        }

        /* 弧状テキストコンテナ */
        .curved-text-container {
            position: relative;
            width:40%;
            background-color: #ffffff;
            border-radius: 20px;
            padding: 20px;
            margin: 0 auto -60px auto; /* 角丸枠に重なるように */
            z-index: 20;
        }

        /* 角丸の枠 */
        .omakase-section {
            position: relative;
            width: 100%;
            max-width:1200px;
            border: 4px solid #444444;
            border-radius: 20px;
            background-color: white;
            margin: 0 auto;
            overflow: visible;
        }

        /* 左の画像 - テキストコンテナの隣に配置 */
        .left-image {
            position: absolute;
            left: -140px;
            top: 10px;
            z-index: -1;
        }

        /* 右の画像 - テキストコンテナの隣に配置 */
        .right-image {
            position: absolute;
            right: -180px;
            top:0px;
            height: auto;
            z-index: -1;
        }

        /* 弧状テキスト */
        .curved-text {
            position: relative;
            width: 90%;
            height: 50px;
            margin:0 auto 40px;
        }

        .curved-char {
            position: absolute;
            font-size: 30px;
            color: #6CAE20;
            font-weight: bold;
        }

        .curved-char:nth-child(1) { left: 24%; top: 25px; transform: rotate(-25deg); }
        .curved-char:nth-child(2) { left: 30%; top: 8px; transform: rotate(-15deg); }
        .curved-char:nth-child(3) { left: 42%; top: 0px; transform: rotate(-5deg); }
        .curved-char:nth-child(4) { left: 54%; top: 0px; transform: rotate(5deg); }
        .curved-char:nth-child(5) { left: 66%; top: 8px; transform: rotate(15deg); }
        .curved-char:nth-child(6) { left: 76%; top: 25px; transform: rotate(25deg); }

        /* メインテキスト */
        .main-text {
            font-size:2.6rem;
            color: #444444;
            font-weight: bold;
            position: relative;
            text-align: center;
            letter-spacing: 0.2rem;
        }

        .main-text::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 20px;
            background-color: #F9CE00;
            z-index: -1;
        }

        /* iPad */
        @media screen and (min-width: 64rem) and (max-width: 90rem) {
            .omakase-wrapper { padding: 0 clamp(1rem, 4vw, 1.25rem); }
            .curved-text-container { width: 38%; margin: 0 auto -55px; }
            .left-image { left: -27%; top: 30px; width: 30%; }
            .right-image { right: -27%; top: 50px; width: 30%; }
            .curved-text{width: 90%; margin: 0 auto 20px;}
            .curved-char { font-size: 26px; }
            .main-text { font-size: 36px; }
        }

        /* タブレット */
        @media screen and (max-width: 63.9375rem) {
            .omakase-wrapper { padding: 0 clamp(1rem, 4vw, 1.25rem); margin:1rem auto 10rem;}
            .curved-text-container { width:48%; margin: 0 auto -70px; }

            .left-image { left:-7.5rem; top: 10px; width: 8rem; }
            .right-image { right:-7.5rem; top:1.5rem; width: 8rem; }
            .curved-text{width: 90%; margin: 0 auto 20px;}
            .curved-char { font-size: 24px; }
            .main-text { font-size: 32px; }
        }

        /* スマートフォン */
        @media screen and (max-width: 47.9375rem) {
            .omakase-wrapper { padding: 0 clamp(1rem, 4vw, 1.25rem);  margin:4rem auto 5rem;}
            .curved-text-container { width: 280px; margin: 0 auto -45px; }
            .omakase-section { 
                padding: 1.5rem 1rem; /* 後で調整 */
                box-sizing: border-box;
            }
            .left-image { left: -40px; top:0; width: 65px; }
            .right-image { right: -40px; top:.5rem; width: 65px; }
            .curved-char { font-size: 20px; }
            .curved-text {width:100%; height:auto; margin-top: -3rem; margin-bottom:3.3rem;}
            .main-text { font-size:1.4rem; }
            .main-text::after { height: 12px; }
        }


/* おまかせの内容 */
.omakase-section{padding:4rem;}

.omakase-section ul{
  width:60%;
  list-style: none;
  padding: 0;
  margin: 5rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.omakase-section ul li{
  padding: 1rem 2rem;
  border: 1px dotted #333;
  border-radius: 1.5rem;
  background: #fff;
  text-align: center;
  font-size:1.2rem;
}


/* iPad */
@media screen and (min-width: 64rem) and (max-width: 90rem) {
    .omakase-section{padding:4rem;}  
}

/* タブレット */
@media screen and (max-width: 63.9375rem) {
    .omakase-section{padding:2rem;}
    .omakase-section ul{width:100%;}
    .omakase-section ul li{
        padding: .8rem .8rem;
        border: 2px dotted #333;
        border-radius: 0.6rem;
        font-size: 1rem;
    }
}

/* スマートフォン */
@media screen and (max-width: 47.9375rem) {
    .omakase-section{padding:1.2rem;}
    .omakase-section ul{width:100%; margin:4rem auto 5rem;}
    .omakase-section ul li{
        padding: .8rem .8rem;
        border: 2px dotted #333;
        border-radius: 0.6rem;
        font-size: 1rem;
    }
}

/* おまかせ理由 */

.experience-section {
            margin: 0 auto 6rem;
            padding: 4rem;
            position: relative;
        }
        
        /* 経験内容のコンテナ */
        .experience-content {
            display: flex;
            align-items: flex-start;
            gap:6rem;
        }
        
        /* 左側のテキスト部分 */
        .text-content {
            flex: 1;
        }
        
        /* タイトル */
        .experience-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-left: -1rem;
            margin-bottom: 4rem;
            position: relative;
            padding-left: 1.25rem; /* 円の右半分の幅分だけpadding */
            line-height: 1.6;
            letter-spacing:.2rem;
            z-index:1;
        }
        
        /* タイトル左側の円形あしらい */
        .experience-title::before {
            content: '';
            position: absolute;
            left: -1.25rem; /* 円の半分だけ左にはみ出し */
            top: 50%;
            transform: translateY(-50%);
            width: 6rem;
            height:6rem;
            border: 2px solid #F6C31A;
            border-radius: 50%;
            background: transparent;
            z-index: -1;
        }
        
        /* 本文 */
        .experience-text {
            font-size: 1.02rem;
            line-height: 1.8;
        }
        
        .experience-text p {
            margin-bottom: 1.5rem;
        }
        
        .experience-text p:last-child {
            margin-bottom: 0;
        }
        
        /* 右側の画像 */
        .experience-image {
            flex: 0 0 388px;
            text-align: center;
        }
        
        .experience-image img {
            max-width: 100%;
            height: auto;
        }
        
        /* iPad (1024px～) */
        @media screen and (min-width: 64rem) and (max-width: 90rem) {
            .experience-section {
                padding: 3rem;
            }
            
            .experience-content {
                gap: 4rem;
            }
            
            .experience-title {
                font-size: 1.5rem;
                padding-left: 1rem; /* 円の右半分の幅分 */
            }
            
            .experience-title::before {
                left: -1.8rem; /* 円の半分だけ左にはみ出し */
            }
            
            .experience-image {
                flex: 0 0 320px;
            }
        }
        
        /* タブレット (768px～1023px) */
        @media screen and (max-width: 63.9375rem) {
            .experience-section {
                padding:0;
            }
            
            .experience-content {
                gap: 2rem;
            }
            
            .experience-title {
                font-size: 1.35rem;
                margin-bottom: 2rem;
                padding-left: 0.9rem; /* 円の右半分の幅分 */
            }
            
            .experience-title::before {
                left: -1.2rem; /* 円の半分だけ左にはみ出し */
                width: 5rem;
                height: 5rem;
            }

            .text-content{padding-left: 1.5rem;}
            
            .experience-text {
                font-size: 1rem;
            }
            
            .experience-image {
                flex: 0 0 250px;
            }
        }
        
        /* スマートフォン (～767px) */
        @media screen and (max-width: 47.9375rem) {

            
            /* スマートフォンでは縦並び */
            .experience-content {
                flex-direction: column;
                gap: 1.5rem;
            }
            
            .experience-title {
                font-size: 1.2rem;
                text-align: center;
                padding-left: 0.75rem;
                margin-bottom: 1.5rem;
                letter-spacing: .1rem;
            }
            
            .experience-title::before {
                top: -15%;
                left: 50%;/* 1.円の左端が中心に */
                transform: translateX(-50%);/* 2.円の中央が中心に */
            }

            .text-content{padding-left: 0;}
            
            .experience-text {
                font-size: 0.85rem;
                line-height: 1.7;
            }
            
            .experience-text p {
                margin-bottom: 1rem;
            }
            
            .experience-image {
                flex: none;
                margin: auto;
            }
            
            .experience-image img {
                max-width: 80%;
            }
        }

/* 2つ目のセクション専用：画像とテキストを逆順に */
.experience-section.reverse .experience-content {
    flex-direction: row-reverse;
}

/* iPad (1024px～) */
@media screen and (min-width: 64rem) and (max-width: 90rem) {
    .experience-section.reverse .experience-content {
        flex-direction: row-reverse;
    }
}

/* タブレット (768px～1023px) */
@media screen and (max-width: 63.9375rem) {
    .experience-section.reverse .experience-content {
        flex-direction: row-reverse;
    }
}

/* スマートフォン (～767px) - reverseクラスでも縦並びのまま */
@media screen and (max-width: 47.9375rem) {
    .experience-section.reverse .experience-content {
        flex-direction: column; /* スマホでは通常通り縦並び */
    }
}


/* ==========================================================================
   WORKS(TOP)
   ========================================================================== */
    .ttl_top_h2 {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            padding: 4rem 0;
        }
        
        /* サブタイトル */
        .works-subtitle {
            font-size: 1rem;
            color: #666;
            margin-bottom: 2rem;
            font-weight: normal;
            letter-spacing: 0.1em;
        }
        
        /* メインタイトル */
        .works-title {
            font-size: 4rem;
            font-weight: bold;
            color: #333;
            letter-spacing: 0.2em;
            margin-bottom: 2rem;
            position: relative;
            z-index: 2;
        }
        
        /* 背景の大きな文字 */
        .works-bg-text {
           position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            font-size: 7rem;
            font-weight: bold;
            color: transparent;
            -webkit-text-stroke: 0.5px #e0e0e0;
            text-stroke: 0.5px #e0e0e0;
            color: #ffffff;
            letter-spacing: 0.05em;
            z-index: 1;
            white-space: nowrap;
            text-align: center;
            margin-top: 8rem;
        }
        
        /* iPad (1024px～) */
        @media screen and (min-width: 64rem) and (max-width: 90rem) {
            .works-title {
                font-size: 3.5rem;
            }
            
            .works-bg-text {
                font-size: 6rem;
            }
        }
        
        /* タブレット (768px～1023px) */
        @media screen and (max-width: 63.9375rem) {
            .ttl_top_h2 {
                padding: 3rem 0;
            }
            
            .works-subtitle {
                font-size: 0.9rem;
                margin-bottom: 1.5rem;
            }
            
            .works-title {
                font-size: 3rem;
            }
            
            .works-bg-text {
                font-size: 4rem;
                margin-top:7rem;
            }
        }
        
        /* スマートフォン (～767px) */
        @media screen and (max-width: 47.9375rem) {
            .ttl_top_h2 {
                padding: 2rem 0;
            }
            
            .works-subtitle {
                font-size: 0.8rem;
                margin-bottom: 1rem;
            }
            
            .works-title {
                font-size: 2.5rem;
                letter-spacing: 0.15em;
            }
            
            .works-bg-text {
                font-size: 2.5rem;
                -webkit-text-stroke: 0.5px #e0e0e0;
                text-stroke: 0.5px #e0e0e0;
                margin-top:4rem;
            }
        }
        
        /* より小さなスマートフォン */
        @media screen and (max-width: 30rem) {
            .works-title {
                font-size: 2rem;
            }
            
            .works-bg-text {
                font-size: 2rem;
            }
        }


/* ==========================================================================
   works内容
========================================================================== */
        .wrap_works{
            background:#eee;
            padding:8rem 2rem 14rem;
            margin-top:1rem;
        }

        .works-section {
            max-width: 1200px;
            margin:0 auto 8rem;
            background: white;
            border-radius: 20px;
            overflow: visible; /* はみ出しを許可 */
            min-height: 500px;
            display: flex;
            position: relative; /* z-indexを有効にするために追加 */
        }

        /* 左側コンテンツ */
        .left-content {
            flex: 1;
            padding:3.5rem;
            position: relative;
            background: white;
            z-index: 2;
            border-radius: 20px 0 0 20px; /* 左側の角丸を維持 */
        }

        /* タイトル部分 */
        .title-section {
            position: relative;
            display: inline-block;
            margin-bottom: 2rem;
        }

        .title-bg {
            background: #6CAE20;
            color: white;
            padding: 0.8rem 2rem;
            font-size: clamp(1.1rem, 2.5vw, 1.8rem);
            font-weight: bold;
            transform: skewX(-15deg);
            display: inline-block;
        }

        .ecdesign .title-bg{background:#FFAD30;}

        .title-text {
            transform: skewX(15deg);
            display: inline-block;
        }

        .production-text {
            position: absolute;
            right: -40px;
            bottom: -20px;
            background: #fff;
            color: #6CAE20;
            padding: 0.5rem 1rem;
            font-size: 1.3rem;
            font-weight: bold;
            transform: skewX(-15deg); /* 平行四辺形 */
            border: 1px solid #6CAE20;
        }

        .ecdesign .production-text {
            color:#FFAD30; 
            border: 1px solid #FFAD30;
        }

        .production-text span {
            transform: skewX(15deg); /* テキストをまっすぐに */
            display: inline-block;
        }

        /* 説明文 */
        .description {
            font-size: clamp(0.9rem, 2vw, 1rem);
            line-height: 1.8;
            color: #333;
            margin-bottom: 2rem;
        }

        /* カテゴリセクション */
        .category {
            margin-bottom: 1.5rem;
        }

        .category-tag {
            display: inline-block;
            background: white;
            border: 1px solid #6CAE20;
            color: #6CAE20;
            padding: 0.3rem 0.8rem;
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .ecdesign .category-tag {
            border: 1px solid #FFAD30;
            color: #FFAD30;
        }

        .category-content {
            font-size: clamp(0.85rem, 1.8vw, 0.95rem);
            line-height: 1.6;
        }

        /* 右側コンテンツ */
        .right-content {
            flex: 1;
            position: relative;
            background: #6CAE20;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0 20px 20px 0; /* 右側の角丸を維持 */
            clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
        }

        .ecdesign .right-content {
            background: #FFAD30;
             }

        .right-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #6CAE20;
            border-radius: 0 20px 20px 0;
            z-index: 1;
        }

        .ecdesign .right-bg {
            background: #FFAD30;
        }

        .web-design-text {
            font-family: 'Caveat', cursive;
            font-size: clamp(2.5rem, 3.4vw, 3rem);
            color: white;
            position: relative;
            z-index: 3;
        }

        .polygon-decoration {
            position: absolute;
            top: -60px; /* 上にはみ出し */
            right: -40px; /* 右にはみ出し */
            transform: rotate(75deg);
            z-index: 10; /* 最前面に配置 */

        }

        .devices-image {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: clamp(200px, 20vw, 300px);
            height: auto;
            z-index: 2;
        }

        .devices-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1rem;
            font-weight: bold;
            backdrop-filter: blur(10px);
        }

        /* レスポンシブ対応 */
        
        /* iPad (1024px～1440px) */
        @media screen and (min-width: 64rem) and (max-width: 90rem) {
            .works-section {
                margin: 0 clamp(1rem, 4vw, 1.25rem) 8rem;
            }
        }

        /* タブレット (768px～1023px) */
        @media screen and (max-width: 63.9375rem) {

            .wrap_works{padding:1.2rem 1rem 12rem;}

            .works-section {
                flex-direction: column;
                margin: 0 auto 2rem;
            }
            
            .left-content {
                border-radius: 20px 20px 0 0;
                text-align: center;
            }
            
            .right-content {
                min-height: 300px;
                border-radius: 0 0 20px 20px;
                clip-path: polygon(0% 15%, 100% 0%, 100% 100%, 0% 100%);
            }
            
            .right-bg {
                border-radius: 0 0 20px 20px;
            }
            
            .production-text {
                right: -30px;
                bottom: -15px;
                padding: 0.4rem 0.8rem;
                font-size: 0.8rem;
            }

            .production-text span {
                transform: skewX(15deg);
                font-size: 1.2rem;
                display: inline-block;
            }
            .polygon-decoration{display: none;}
        }

        /* スマートフォン (～767px) */
        @media screen and (max-width: 47.9375rem) {
            .works-section {
                flex-direction: column;
                border-radius: 15px;
            }
            
            .left-content {
                padding:3.5rem 3rem 2rem;
                border-radius: 15px 15px 0 0;
                text-align: center;
            }
            
            .title-section {
                margin-bottom: 1.5rem;
            }
            
            .title-bg {
                padding: 0.6rem 1.5rem;
                font-size: 1rem;
            }

            .title-text {
                font-size: 1.6rem;
            }
            
            .production-text {
                right: -25px;
                bottom: -12px;
                padding: 0.3rem 0.6rem;
                font-size: 0.7rem;
            }

            .production-text span {
                transform: skewX(15deg);
                display: inline-block;
            }
            
            .description {
                margin-bottom: 1.5rem;
            }
            
            .category {
                margin-bottom: 1rem;
            }
            
            .right-content {
                min-height: 250px;
                border-radius: 0 0 15px 15px;
                clip-path: polygon(0% 20%, 100% 0%, 100% 100%, 0% 100%);
            }
            
            .right-bg {
                border-radius: 0 0 15px 15px;
            }
            
            .web-design-text {
                font-size: 2rem;
            }
            
            .polygon-decoration {
                width: 80px;
                height: 80px;
                top: -50px;
                right: -30px;
            }
            
            .devices-image {
                width: 150px;
                bottom: 15px;
                right: 15px;
            }
        }

        .ecdesign .ec_detail{margin-top:2rem;}

        .ecdesign .service-item {
            margin-bottom: 1.5rem;
        }

        .ecdesign .service-title {
            font-weight: bold;
            color: #FF9500;
            margin-bottom: 0.5rem;
        }


        /* works_skill */
        .tools-container {
            max-width: 1200px;
            margin: 0 auto 8rem;
            background: white;
            border-radius: 20px;
            padding: 2rem;
            display: flex;
            align-items: stretch;
            gap: 2rem;
            position: relative;
            overflow: hidden;
            padding-right: 120px; /* 右側の水色エリア分の余白を確保 */
        }
       
        /* iPad (1024px～1440px) */
        @media screen and (min-width: 64rem) and (max-width: 90rem) {
        .tools-container {
            margin: 0 clamp(1rem, 4vw, 1.25rem) 8rem;
            }
        }

        .tools-title {
            background: #42A0AA;
            color: white;
            padding: .8rem;
            border-radius: 6px;
            text-align: center;
            font-weight: bold;
            font-size: clamp(1.2rem, 2vw, 1.1rem);
            line-height: 1.4;
            min-width: 120px;
            flex-shrink: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tools-container .title-desktop {
            display: inline;
        }

        .tools-container .title-mobile {
            display: none;
        }

        .tools-container .content-section {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
  /* スマートフォン (～767px) */
        @media screen and (max-width: 47.9375rem) {
            .tools-container .content-section {
                text-align: center;
            }
        }

        .tools-container .tool-item {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .tools-container .tool-category {
            color: #42A0AA;
            font-weight: bold;
            font-size: clamp(0.9rem, 2vw, 1rem);
        }

        .tools-container .tool-list {
            line-height: 1.5;
            font-size: clamp(0.85rem, 1.8vw, 0.95rem);
        }

        /* 右側の装飾 */
        .tools-container .decoration {
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100%;
            background: #42A0AA;
            border-radius: 0 20px 20px 0;
            opacity: 0.8;
            clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%); /* 左辺を斜めに */
        }

        /* レスポンシブ対応 */
        @media screen and (max-width: 768px) {
            .tools-container {
                flex-direction: column;
                gap: 1.5rem;
                padding: 1.5rem;
                margin:0 auto 3rem;
                position: relative;
                padding-right: 1.5rem; /* スマホ時は通常のpadding */
                padding-bottom: 80px; /* 下の水色エリア分の余白を確保 */
            }

            .tools-title {
                width: 100%;
                min-width: auto;
            }

            .tools-container .title-desktop {
                display: none;
            }

            .tools-container .title-mobile {
                display: inline;
            }

            .tools-container .decoration {
                position: absolute;
                top: auto;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                height: 40px;
                border-radius: 0 0 20px 20px;
                clip-path: polygon(0% 50%, 100% 0%, 100% 100%, 0% 100%); /* 上辺を斜めに */
            }
        }

        @media screen and (max-width: 480px) {
            .tools-container {
                padding: 1rem;
                border-radius: 15px;
                padding-bottom: 70px; /* 下の水色エリア分の余白を確保 */
            }

            .tools-title {
                padding: 1rem;
            }

            .tools-container .decoration {
                border-radius: 0 0 15px 15px;
                height: 50px;
            }
        }


/* ==========================================================================
   制作例
========================================================================== */

        .design {
            padding: 4rem 0 12rem;
            background:#F9F9F4;
        }

        .ttl_top_h2 {
            text-align: center;
        }

        .works-subtitle {
            font-size: 1rem;
            color: #666;
            margin-bottom: 0.5rem;
        }

        .works-title {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 300;
            color: #333;
            letter-spacing: 0.1em;
        }


/* スライダーコンテナ */
.design_slider {
    max-width: 1200px;
    margin: 0 auto 6rem;
    position: relative;
    overflow: visible;
}
.slider-wrapper {
    position: relative;
    overflow: hidden; /* 画像がはみ出さないように */
    border-radius: 10px;
    width: 100%;
}
.slider-track {
    display: flex;
    transition: transform 0.3s ease;
    gap: 1rem;
    width: max-content;
}
.slider-item {
    flex: 0 0 auto;
    width: 264px;
    min-width: 0;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.slider-item:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.slider-item:hover img{
    transform: scale(1.05);
}        
.slider-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.slider-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
/* ナビゲーションボタン */
.slider-nav {
    display: none;
    position: absolute; /* 追加 */
    top: 0; /* 追加 */
    left: 0; /* 追加 */
    width: 100%; /* 追加 */
    height: 100%; /* 追加 */
    pointer-events: none; /* 追加：ボタン以外のクリックを無効化 */
}
.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    z-index: 10;
    pointer-events: auto; /* 追加：ボタン自体はクリック可能に */
}
.nav-button:hover {
    background: white;
    color: #444;
    transform: translateY(-50%) scale(1.1);
}
.nav-prev {
    left: 2%;
}
.nav-next {
    right: 2%;
}
.nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.nav-button:disabled:hover {
    transform: translateY(-50%) scale(1);
}

/* PC版（1024px以上） */
@media screen and (min-width: 64rem) {
    .design_slider {
        padding: 0 3rem;
    }
    .slider-nav {
        display: block;
    }
    .slider-item {
        width: 352px;
    }
}

/* iPad (1024px～1440px) */
@media screen and (min-width: 64rem) and (max-width: 90rem) {
    .design_slider {
        padding: 0 3rem;
    }
    .slider-nav {
        display: block;
    }
    .slider-item {
        width: 336px;
    }
}

/* タブレット (768px～1023px) */
@media screen and (max-width: 63.9375rem) {
    .design_slider {
        padding: 0 3rem;
    }
    .slider-nav {
        display: block;
    }
    .slider-item {
        width: 234px;
    }
    .slider-track {
        gap: 0.5rem;
    }
    .slider-item img {
        height: 240px;
    }
}

/* スマートフォン (～767px) */
@media screen and (max-width: 47.9375rem) {
    .design_slider {
        padding: 0 3rem;
    }
    .slider-nav {
        display: block;
    }
    .slider-item {
        width: 159px;
    }
    .slider-track {
        gap: 0.5rem;
    }
    .slider-item img {
        height: 216px;
    }
    .design {
        padding: 3rem 0 12rem;
    }
}


/* ==========================================================================
   制作の流れ　FLOWW
========================================================================== */

.flow{padding: 4rem 0 12rem;}

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

        .flow_list {
            display: flex;
            flex-direction: column;
            gap: 3rem;
            margin-top: 4rem;
        }

        .flow_item {
            display: flex;
            align-items: flex-start;
            gap: 2rem;
            padding: 2.5rem;
            background: #f8f9fa;
            border-radius: 12px;
            position: relative;
            transition: all 0.3s ease;
        }


        .flow_number {
            flex-shrink: 0;
            width: 80px;
            height: 80px;
            background: #333;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: bold;
            color: white;
            position: relative;
        }

        .flow_content {
            flex: 1;
            padding-top: 0.5rem;
        }

        .flow_title {
            font-size: 1.5rem;
            font-weight: bold;
            color: #333;
            margin-bottom: 1rem;
            position: relative;
            padding-bottom: 0.5rem;
        }

        .flow_description {
            color: #666;
            line-height: 1.8;
            font-size: 1rem;
        }

        .flow_description a{
            text-decoration: underline;
        }
        .flow_description a:hover{
            text-decoration: none;
        }


        /* 矢印の追加 */
        .flow_item:not(:last-child)::after {
            content: '';
            position: absolute;
            bottom: -2.1rem;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left:26px solid transparent;
            border-right:26px solid transparent;
            border-top:22px solid #6CAE20;
        }
        /* iPad (1024px～1440px) */
        @media screen and (min-width: 64rem) and (max-width: 90rem) {
            .flow_item:not(:last-child)::after{
                bottom: -2.4rem;
            }
        }

        /* タブレット対応 */
        @media screen and (max-width: 63.9375rem) {
            .flow_wrap {
                padding: 0 clamp(1rem, 4vw, 1.25rem);
            }

            .flow_list {
                gap: 2.5rem;
                margin-top: 3rem;
            }

            .flow_item {
                gap: 1.5rem;
                padding: 2rem;
            }

            .flow_number {
                width: 70px;
                height: 70px;
                font-size: 1.8rem;
            }

            .flow_title {
                font-size: 1.3rem;
            }

            .flow_description {
                font-size: 0.95rem;
            }
        }

        /* スマートフォン対応 */
        @media screen and (max-width: 47.9375rem) {
            .flow_wrap {
                padding: 0 clamp(1rem, 4vw, 1.25rem);
            }

            .flow_list {
                gap: 2rem;
                margin-top: 2.5rem;
            }

            .flow_item {
                flex-direction: column;
                align-items: center;
                text-align: center;
                gap: 1.5rem;
                padding: 2rem 1.5rem;
            }

            .flow_number {
                width: 60px;
                height: 60px;
                font-size: 1.5rem;
            }

            .flow_content {
                padding-top: 0;
            }

            .flow_title {
                font-size: 1.2rem;
            }

            .flow_title::after {
                left: 50%;
                transform: translateX(-50%);
            }

            .flow_description {
                font-size: 0.9rem;
            }

            .flow_item:not(:last-child)::after {
                bottom: -1.6rem;
                border-left: 18px solid transparent;
                border-right: 18px solid transparent;
                border-top: 16px solid #6CAE20;
            }
        }

        /* iPad対応 */
        @media screen and (min-width: 64rem) and (max-width: 90rem) {
            .flow_wrap {
                padding: 0 clamp(1rem, 4vw, 1.25rem);
            }

            .flow_item {
                gap: 2rem;
                padding: 2.5rem;
            }
        }