/* リセットcss */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video,main { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
main{box-shadow:0 0 0;}
*{box-sizing:border-box;}
a{text-decoration:none;color:#000000;}
li{list-style:none;}
body{background:#FFFEF9;width:100%;height:auto;font-family:sans-serif;}
.rel{position:relative;}
.ab{position:absolute;}
.max{max-width:1300px;margin:0 auto;}
.bold{font-weight:bold;}
.fl{display:flex;}

p,summary,a{font-size:15px;letter-spacing:.1rem;font-weight:normal;line-height:1.5rem;}
h1{font-size:24px;letter-spacing:.1rem;font-weight:normal;}
h2{font-size:22px;letter-spacing:.1rem;font-weight:normal;}
h3{font-size:18px;letter-spacing:.1rem;font-weight:normal;}
h4,h5,h6{font-size:15px;letter-spacing:.1rem;font-weight:normal;}

@media screen and (max-width:950px){
  h1{font-size:21px;}
  h2{font-size:19px;}
  h3{font-size:16px;}
  h4,h5,h6{font-size:14px;}
  p,summary,a{font-size:14px;}
}
@media screen and (max-width:500px){
  h1{font-size:18px;}
  h2{font-size:16px;}
  h3{font-size:15px;}
  h4,h5,h6{font-size:13px;}
  p,summary,a{font-size:13px;}
}

/*------ ホバーアンダーライン ------*/
.a-hov{position:relative;}
.a-hov::after{position:absolute;left:10%;content:'';width:80%;height:3px;background:#2fbf4a;bottom:-10px;transform:scale(0, 1);transform-origin:left top;transition:transform 0.4s;}
.a-hov:hover::after{transform:scale(1, 1);}

/* ハンバーガー */
.hum{position:relative;z-index:9999;display:none;}
@media screen and (max-width:950px){
  .hum{display:block;}
}

/* Hamburger menu */
.nav-trigger{position:fixed;z-index:4;top:19px;right:30px;width:44px;height:44px;overflow:hidden;color:transparent;white-space:nowrap;text-indent:100%;}
.nav-trigger span{position:relative;}
.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after{position:absolute;width:40px;height:1.5px;background:#1a1a1a;z-index:999;}
.nav-trigger span{top:calc(50% - 2px);left:calc(50% - 18px);transition:background .3s;}
.nav-trigger span::before,
.nav-trigger span::after{content:'';top:0;left:0;transition:background .3s, transform .3s;}
.nav-trigger span::before{transform:translateY(-12px);}
.nav-trigger span::after{transform:translateY(12px);}
.nav-open .nav-trigger span::before,
.nav-open .nav-trigger span::after{background-color:#1a1a1a;}
.nav-open .nav-trigger span{background:transparent;}
.nav-open .nav-trigger span::before{transform:rotate(-45deg);top:0;}
.nav-open .nav-trigger span::after{transform:rotate(45deg);top:0;}
/* ナビ内 */
/* ナビ表示幅 */

.nav-container{position:fixed;z-index:3;width:40%;top:0;right:0;overflow:hidden;transform:translateZ(0);transform:translateX(100%);}
.nav-open .nav-container{transform:translateX(0);}
.nav-all{overflow:auto;height:100vh;background:#fff;}
.nav-hum{padding:0;color:#2fbf4a;padding:15% 0 5%;display:flex;flex-wrap:wrap;align-items:center;}
.nav-hum li{position:relative;border-bottom:2px solid #2fbf4a;width:100%;}
.nav-hum a{display:flex;font-weight:bold;justify-content:space-between;align-items:baseline;padding:2.3rem 0 .8rem 6%;color:#2fbf4a;transform:translateZ(0);width:95%;letter-spacing:.2rem;}
.nav-hum a:hover{transition:all .1s;opacity:.6;}
.nav-hum a h1{letter-spacing:.1rem;font-size:21px;font-weight:700;}
.nav-opa{opacity:.4;display:block;position:relative;}
.nav-opa::after{background-color:#2fbf4a;top:50%;left:30%;content:'';display:block;height:1px;position:absolute;width:30%;}
.nav-under{width:100%;position:absolute;bottom:0;left:0;display:flex;justify-content:left;flex-wrap:wrap;background:linear-gradient(to right,rgba(255, 255, 255, 1),rgba(132, 132, 132, 1));}
.nav-under li{padding:1rem 0 .5rem 6%;width:60px;}
.nav-under li a{display:inline-block;color:#2fbf4a;}
.nav-under li a:hover{transition:all .1s;opacity:.8;}
.nav-under li img{width:100%;}
.nav-open .nav-all{animation:slide-links .5s .2s backwards;}
@keyframes slide-links{
  0%{opacity:0;transform:translateX(100%);}
  100%{opacity:1;transform:translateX(0);}
}

@media screen and (max-width:950px){
  .nav-container{width:50%;}
  .nav-trigger{right:20px;}
  .nav-trigger a h6{width:100px;height:4.5rem;}
  .nav-trigger a h5{top:3rem;right:61px;}
}
@media screen and (max-width:900px){
  .nav-trigger a h5{top:2.7rem;right:63px;}
}
@media screen and (max-width:800px){
  .nav-container{width:50%;}
  .nav-img3 a{width:15%;margin:4% 2%;}
  .nav-hum a h1{font-size:18px;}
  .nav-hum a p{font-size:13px;}
  .nav-under li{width:50px;}
}
@media screen and (max-width:700px){
  .nav-container{width:60%;}
  .nav-hum a{padding:1rem 0 .8rem 0%;}
  .nav-container{width:60%;}
  .nav-hum li{padding:.5rem 0 0 6%;}
  .nav-trigger a h5{right:62px;}
}
@media screen and (max-width:600px){
  .nav-hum a{display:block;}
  .nav-hum a{padding:1rem 0 .8rem 0%;}
  .nav-hum a p{text-align:right;}
}
@media screen and (max-width:500px){
  .nav-container{width:100%;}
  .nav-hum{text-align:center;}
  .nav-hum li{padding:1rem 0 0;}
  .nav-trigger{right:16px;}
  .nav-trigger a h6{width:90px;height:4rem;}
  .nav-trigger a h5{top:2.6rem;right:57px;}
  .nav1::after{left:45%;}
  .nav-hum a{width:100%;}
  .nav-hum a h1{font-size:20px;}
  .nav-under li{width:60px;}
}
@media screen and (max-width:430px){
  .nav-under li{width:55px;}
}

/* ヘッダー */
/* ===== Header ===== */

.header{position:fixed;top:0;background:#fff;z-index:100;border-bottom:1px solid #eee;width:100%;overflow:hidden;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);}
.header-inner{margin:0 auto;padding:16px 10px;display:flex;align-items:center;justify-content:right;}
.nav{display:flex;width:100%;justify-content:right;}
.nav a{color:#333;transition:0.2s;margin:0 2%;font-weight:bold;}


.header-btn{width:30%;text-align:center;}
.header-btn a{display:block;width:80%;margin:0 auto;padding:10px 20px;color:#fff;background:#2fbf4a;border-radius:999px;font-size:14px;border:1px solid #2fbf4a;}
.header-btn a:hover{background:#fff;color:#2fbf4a;transition:all .1s;}


/* バックグラウンド サークル */
.bk-ci{border-radius:50%;position:absolute;z-index:-1;}
.bk-ci1{top:10%;left:0;width:130px;height:130px;background-color:rgba(255, 246, 68, 0.6);filter:blur(30px);}
.bk-ci2{bottom:10%;right:10%;width:100px;height:100px;background-color:rgba(255, 246, 68, 0.6);filter:blur(30px);}



/* トップ */
.hero{background:linear-gradient(90deg, #ffffff 0%, #e9f6e9 60%, #dff1df 100%);}
.top-all{width:100%;background-image:url(./img/top-back.png);background-size:cover;background-position:right;overflow:hidden;}
.hero-inner{margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:600px;}
.hero-text{position:relative;width:65%;height:100%;padding:130px 5% 0;clip-path: polygon(0 0, 100% 0,85% 100%,0 100%);background:#fff;overflow: hidden;flex-direction: column;}
.hero-text h2{font-size:24px;}
.hero-text .font-big{font-size:31px;}
.hero-text .green{color:#2fbf4a;}
.description {color:#939393;margin:15px 0 20px;}
.btn{display:inline-block;background:#2fbf4a;color:#fff;padding:14px 28px;border-radius:999px;margin-bottom:10px;border:1px solid #2fbf4a;font-size:16px;}
.btn:hover{background:#fff;color:#2fbf4a;transition:all .1s;}
.scroll-track-box{margin-top:5%;}
.scroll-track-box1{margin:2% 0 5%;}
.scroll-track {width:200%;height:55px;background-size:contain;background-repeat:repeat-x;margin-left:-10%;}
.to-left {background-image:url("./img/work1.png");animation:bg-scroll-left 60s linear infinite;margin-bottom:2%;}
.to-right{background-image:url("./img/work2.png");animation:bg-scroll-right 60s linear infinite;}

/* 背景を左へ動かす（右から左） */
@keyframes bg-scroll-left {  from {background-position: 0 0;} to {background-position: -2000px 0;}}
/* 背景を右へ動かす（左から右） */
@keyframes bg-scroll-right { from {background-position: 0 0;} to {background-position:2000px 0;}}


.hero-images{position:relative;width:60%;height:100%;padding:80px 24px 0;display:flex;}
.phone-left,.phone-right{object-fit:contain;position:relative;}
.phone-left{width:300px;margin-right:-120px;margin-left:50px;}
.phone-right{width:270px;margin-top:150px;}
.top-under{width:100%;background:#E3EFF9;display:flex;justify-content:left;align-items:center;padding:20px;}
.top-under h3{background:#1869C7;border-radius:5px;margin:0 5%;padding:10px;color:#fff;}

@media screen and (max-width:1050px){
  .hero-text h2{font-size:20px;}
  .btn{font-size:13.6px;}
}
@media screen and (max-width:1000px){
  .hero-images{display:none;}
  .top-all{background-image:url(./img/top-back-ph.png);background-size:cover;background-position:center;}
  .hero-text{width:100%;padding:130px 5% 0;clip-path:none;background:#ffffff6d;text-align:center;}
  .description{color:#535353;width:60%;margin:2% auto 4%;}
}
@media screen and (max-width:950px){
  .nav{display:none;}
  .header-btn{width:40%;margin-right:60px;}
}
@media screen and (max-width:700px){
  .scroll-track-box{margin-top:10%;}
  .description{width:85%;}
}
@media screen and (max-width:600px){
  .header-inner{justify-content:left;}
  .header-btn a{width:100%;}
}
@media screen and (max-width:500px){
  .description{margin:7% auto 10%;}
  .header-btn{width:50%;}
  .top-under{display:block;}
  .top-under h3{margin:0% 5% 3% 0;padding:7px 10px;display:inline-block;}
  .scroll-track-box{margin-top:4%;}
}
@media screen and (max-width:430px){
  .hero-text .font-big{font-size:27px;}
  .header-btn{width:55%;}
  .btn{padding:14px;}
  .scroll-track-box{margin-top:10%;}
}


/* よくご相談される企業様の特徴 */
.characteristic-all{max-width:1200px;width:100%;margin:5% auto;overflow:hidden;}
.characteristic-top{text-align:center;margin-bottom:40px;}
.characteristic-top h2{margin-bottom: 5px;}
.characteristic-top h2 span{color:#00d34d;}
.characteristic-top .subtitle{color:#00d34d;}
/* --- Grid Layout --- */
.grid{display:flex;flex-wrap:wrap;justify-content:center;}
/* --- Card Style --- */
.card{background:#FAFAFA;border-radius:12px;padding:30px 25px;display:flex;align-items:center;transition:all 0.2s ease;width:45%;margin:0 2.5% 40px;}
.icon-wrapper{position:relative;width:70px;height:70px;background-color:#f0f0f0;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center;}
/* 通常時とホバー時の画像共通設定 */
.icon-wrapper img{width:60%;transition:opacity 0.2s ease;}
/* ホバー用の画像は最初は透明にしておく */
.icon-hover{position:absolute;opacity:0;}
/* --- ここが切り替え --- */
.card:hover .icon-default{opacity:0;}
.card:hover .icon-hover{opacity:1;}
.card:hover{background-color:#f9fffb;transform:translateY(-5px);}
.content{width:60%;margin:0 auto;}
.content h3{margin-bottom:10px;}
.content p{color:#666;}
/* --- CTA Banner --- */
.cta-banner{background-color:#00d34d;color:#fff;text-align:center;padding:20px;border-radius:8px;width:95%;margin:2% auto;}
.cta-banner p{display:inline-block;}


@media screen and (max-width:950px){
    .card{display:flex;width:80%;margin:2% auto;}
    .cta-banner{width:80%;}
    .characteristic-top{margin-bottom:20px;}
    .card:hover{transform:translateY(-2px);}
}
@media screen and (max-width:500px){
  .card{width:90%;margin:1% auto;padding: 25px 10px;}
  .cta-banner{width:90%;}
}



/* 公式LINEが効果的な大きな3つの特長 */
.feature-section{width:100%;margin:0 auto;padding:40px 20px 50px;background-image:url(./img/Group37.png);background-size:cover;background-position:center;position:relative;}
.feat-border-tate{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(90deg,rgba(174, 174, 174, 0.104),rgba(174, 174, 174, 0.104) 1px,transparent 1px,transparent 40px);z-index:1;}
.feat-border-yoko{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(174, 174, 174, 0.104),rgba(174, 174, 174, 0.104) 1px,transparent 1px,transparent 40px);z-index:1;}
.feature-section-all{max-width:1200px;margin:0 auto;position:relative;z-index:9;}
.section-title-area{text-align:center;margin-bottom:60px;}
.section-title-area h2{margin-bottom:10px;color:#fff;}
.section-title-area h2 span{color:#00d34d;}
.section-title-area .subtitle{color:#00d34d;}
.feature-grid{display:flex;flex-wrap:wrap;margin-bottom:40px;}
.feature-card{width:30%;margin:0 1.5%;background:#83838352;border:1px solid rgba(255, 255, 255, 0.1);border-radius:16px;padding:25px 30px;backdrop-filter:blur(8px);position:relative;overflow:hidden;color:#fff;}
.feature-card:hover{background:rgba(255, 255, 255, 0.12);transform:translateY(-12px);border-color:rgba(0, 211, 77, 0.5);box-shadow:0 20px 40px rgba(0, 0, 0, 0.3);}
.card-label{margin-bottom:20px;display:block;}
.main-stat{display:flex;align-items:baseline;margin-bottom:10px;}
.main-stat .number{font-size:35px;font-weight:800;color:#00d34d;margin-right:6px;}
.main-stat .unit{font-weight:700;color:#fff;}
.main-stat .text{font-size:23px;font-weight:700;margin-right:10px;}
.separator{height:3px;background: rgba(255, 255, 255, 0.2);margin:25px 0;width:100%;}
.feature-section-bottom{position:absolute;bottom:1%;right:1%;color:#A1A1A1;}
@media screen and (max-width:950px){
  .section-title-area{margin-bottom:40px;}
  .card-label{margin-bottom:0;}
  .feature-card{width:80%;margin:0 auto 3%;}
  .separator{margin:10px 0;}
  .feature-card:hover{transform:translateY(-4px);}
}
@media screen and (max-width:500px){
  .section-title-area{margin-bottom:20px;}
  .feature-card{width:95%;margin:0 auto 4%;}
  .main-stat .number{font-size:30px;}
  .main-stat .text{font-size:20px;}
  .feature-section-bottom{width:90%;left:5%;}
}



/* 結果を出すためのポイント */
.point-section {padding:100px 20px 30px;color:#333;position:relative;overflow:hidden;width:100%;margin:0 auto;}
.point-title-area{text-align:center;margin-bottom:80px;position:relative;z-index:1;}
.point-title-area h2{font-weight:700;}
.point-subtitle{color:#00d34d;font-weight:800;margin-top:5px;}
.point-container{max-width:1200px;margin:0 auto;position:relative;z-index:1;}
.point-row{display:flex;align-items:center;gap:60px;margin-bottom:100px;}
.point-row.is-reverse{flex-direction:row-reverse;}
/* --- 画像エリア --- */
.point-image-box{flex:1;background-color:#f1f5f9;border-radius:20px;padding:50px 20px;position:relative;overflow:hidden;}
.point-image-box img{width:80%;display:block;border-radius:10px;transition:transform 0.3s ease;margin:0 10%;}
.point-image-box2 img{height:300px;object-fit:contain;}
.point-image-box1::before,.point-image-box2::before{content:"";position:absolute;background-size:cover;background-position:center;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:10px;}
/* ホバー時の動き */
.point-image-box:hover img{transform: scale(1.1);}


/* --- テキストエリア --- */
.point-text-box{flex:1;}
.point-badge{display:inline-block;background:#00d34d;color:#fff;font-weight:800;padding:4px 16px;border-radius:20px;margin-bottom:20px;}
.point-text-box h3{font-weight:700;margin-bottom:20px;}
.point-text-box p{margin-bottom:15px;}
@media screen and (max-width:1100px){
  .point-image-box2 img{height:250px;}
}
@media screen and (max-width:950px){
    .point-row{display:block;margin-bottom:50px;}
    .point-image-box{width:80%;margin:2% auto;}
    .point-title-area{margin-bottom:40px;}
    .point-section{padding:50px 20px 30px;}
    .point-text-box{width:70%;margin:4% auto;}
    .point-image-box2 img{height:300px;}
}
@media screen and (max-width:700px){
  .point-image-box,.point-text-box{width:90%;}
}
@media screen and (max-width:600px){
  .point-image-box2 img{height:240px;}
}
@media screen and (max-width:500px){
  .point-section{padding:25px 20px 0px;}
  .point-title-area{margin-bottom:20px;}
  .point-image-box,.point-text-box{width:100%;}
  .point-image-box2 img{height:190px;}
}

/* 導入実績・活用事例 */
.case-section{padding:0;background-color:#fff;overflow:hidden;}
.case-title-area{text-align:center;margin-bottom:10px;padding:30px 0;}
.case-title-area h2{font-weight:700;color:#333;}
.case-subtitle{color:#00d34d;font-weight:800;margin-bottom:15px;}
/* --- ロゴトラック --- */
.case-logo-track{display:flex;justify-content:center;align-items:center;gap:40px;margin-bottom:60px;opacity:0.7;flex-wrap:wrap;padding:0 40px;}
.case-logo-item img{height:35px;width:auto;filter:grayscale(100%);transition:0.3s;}
.case-logo-item img:hover{filter: grayscale(0%);}

/* --- カルーセル構造 --- */
.case-carousel{display:flex;justify-content:center;align-items:flex-start;gap:30px;margin-bottom:40px;padding:0 20px;}
.case-client-logo{width:50%;}
.case-client-logo img{width:40%;}
.case-card{background:#f8fafb;border-radius:20px;flex-shrink:0;transition:all 0.4s ease;}
.case-card.is-main{width:700px;padding:30px;background:#f8fafb;}
/* --- カード内装飾 --- */
.case-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.case-id{width:30%;text-align:right;font-weight:800;}
.case-card-body h3{margin-bottom:12px;font-size:20px;}
.case-tagline{font-weight:700;margin-bottom:5px;}

/* スライダー */
.slider-outer{max-width:1200px;margin:0 auto;overflow:hidden;}
.slider-track{display:flex;transition:transform 0.8s ease-in-out;transform:translateX(20%);}
.slide-card{min-width:calc(33.33% - 20px); margin:0;flex-shrink:0;box-sizing:border-box;}
/* スライド要素自体のマージンをリセット */
.swiper-slide, .splide__slide {
  margin: 0 !important; 
  box-sizing: border-box !important;
}

/* 画像がはみ出さないように固定 */
.swiper-slide img, .splide__slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* プログレスバーの親（グレーの線） */
.progress-bar-bg{width:80%;height:8px !important;background-color:#e0e0e0 !important;border-radius:4px;margin:20px auto 40px;overflow:hidden;position:relative;display:block !important;}

/* 動く青いバー */
.progress-bar-fill{height:100%;background-color:#0077b6 !important;width:80%;transition:width 0.5s ease;display:block !important;}

/* スライダー操作用のカーソル設定 */
#sliderTrack{touch-action:pan-y;}
#sliderTrack:active{cursor:grabbing;}
.slide-card {transition:all 0.5s ease;transform:scale(0.9);opacity:0.4;filter:grayscale(30%);}
.slide-card.is-center{transform:scale(1.0);opacity:1;filter:grayscale(0%);z-index:10;}

.case-id1{color:#0095ff;}
.case-id2{color:#0bdcc0;}
.case-id3{color:#08c34c;}
.case-id4{color:#ffaa00;}
.case-id5{color:#ff5100;}
.case-id6{color:#9000ff;}

.case-tagline1{color:#0095ff;}
.case-tagline2{color:#0bdcc0;}
.case-tagline3{color:#08c34c;}
.case-tagline4{color:#ffaa00;}
.case-tagline5{color:#ff5100;}
.case-tagline6{color:#9000ff;}

.case-point-list1 li{color:#444;background:#e1f0fb;}
.case-point-list2 li{color:#444;background:#e1fbf8;}
.case-point-list3 li{color:#444;background:#e1fbe6;}
.case-point-list4 li{color:#444;background:#fbf1e1;}
.case-point-list5 li{color:#444;background:#fbe1e1;}
.case-point-list6 li{color:#444;background:#f1e1fb;}

.case-point-list1 span{color:#0095ff;}
.case-point-list2 span{color:#0bdcc0;}
.case-point-list3 span{color:#08c34c;}
.case-point-list4 span{color:#ffaa00;}
.case-point-list5 span{color:#ff5100;}
.case-point-list6 span{color:#9000ff;}

.case-summary{color:#888;margin-bottom:10px;}

/* チェックリスト */
.case-point-list{margin-bottom:20px;}
.case-point-list li{margin-bottom:10px;padding:8px 20px;border-radius:30px;font-weight:700;font-size:14px;}
.case-point-list span{margin-right:10px;}

.case-screenshot-grid{display:flex;margin-bottom:10px;}
.case-screenshot-grid img{width:100%;object-fit:contain;}
.case-img{width:30%;margin:0 auto;object-fit:contain;background:#fff;padding:10px;border-radius:5px;box-shadow:0 4px 10px rgba(0,0,0,0.1);}

.case-img2 img,.case-img3 img{margin-top:10px;height:100px;object-fit:contain;}
.case-caption{color:#999;font-size:10px;}

/* 画像にカーソルを合わせると指マークにする */
.case-img img{cursor:pointer;transition:transform 0.3s ease;}
.case-img img:hover{transform:scale(1.05);}
/* モーダルの背景（黒い半透明の部分） */
.case-modal {
  display: none;
  position: fixed; /* absolute から fixed に変更 */
  top: 0;
  left: 0;
  width: 100vw;    /* 画面いっぱいの横幅 */
  height: 100vh;   /* 画面いっぱいの高さ */
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;   /* スライダーより絶対上にくるように */
  justify-content: center;
  align-items: center;
}

/* モーダルの中の画像 */
.case-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;  /* 画面からはみ出さないように */
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@keyframes zoomIn {from{transform:scale(0.7);opacity:0;}to{transform:scale(1);opacity:1;}}
/* 閉じるボタン */
.case-modal-close{position:absolute;top:20px;right:35px;color:#fff;font-size:40px;font-weight:bold;cursor:pointer;}

@media screen and (max-width:950px){
  .case-client-logo{width:40%;}
  .case-card-body h3{font-size:18px;}
  .case-id{width:40%;}
}
@media screen and (max-width:800px){
  .case-card.is-main{width:550px;}
}
@media screen and (max-width:700px){
  .case-card.is-main{width:500px;padding:20px;}
  .case-point-list li{font-size:13px;}
  .case-card-body h3{font-size:17px;}
  .case-id{font-size:14px;}
}
@media screen and (max-width:600px){
  .case-card.is-main{width:450px;}
}
@media screen and (max-width:500px){
  .case-card.is-main{width:400px;}
  .case-id{font-size:12px;}
}
@media screen and (max-width:430px){
  .case-card.is-main{padding:15px;width:350px;}
  .case-card-body h3{font-size:16px;}
}


/* 成果直結型の3つの運用プラン */
.plan-section{padding:100px 20px;position:relative;}
.plan-title-area{text-align:center;margin-bottom:60px;}
.plan-title-area h2{font-weight:700;color:#333;}
.plan-subtitle{color:#00d34d;font-weight:800;}
.plan-lead{margin-top:15px;}
.plan-grid{display:flex;justify-content:center;align-items:stretch;gap:25px;max-width:1200px;margin:0 auto;}
.plan-card{flex:1;background:#fff;border-radius:12px;border:2px solid #eee;padding:40px 30px;position:relative;transition:all 0.3s ease;display:flex;flex-direction:column;}
.plan-card:hover{border-color:#00d34d;box-shadow:0 15px 40px rgba(0, 211, 77, 0.2);transform:translateY(-5px);}
.plan-badge{position:absolute;top:-15px;right:20px;background:#ff0000;color:#fff;font-size:13px;font-weight:700;padding:4px 15px;border-radius:20px;}
.plan-name{color:#888;font-weight:700;margin-bottom:5px;}
.plan-price{font-weight:800;color:#333;margin-bottom:15px;font-size:23px;}
.plan-price span{font-weight:700;}
.plan-divider{height:2px;background:#666;margin-bottom:20px;}
.plan-desc{color:#888;margin-bottom:20px;min-height:60px;font-size:14px;}
.plan-features{padding:0;margin-bottom:30px;}
.plan-features li{font-size:14px;font-weight:700;color:#333;margin-bottom:12px;padding-left:25px;position:relative;}
.plan-features li::before{content:"✔";position:absolute;left:0;color:#00d34d;}
.plan-note{font-size:13px;color:#999;margin-top:auto;margin-bottom:65px;}
.plan-btn{position:absolute;bottom:3%;left:10%;width:80%;display:block;text-align:center;padding:15px;border-radius:8px;font-weight:700;transition:0.3s;}
.plan-btn.is-green{background:#00d34d;color:#fff;}
.plan-btn.is-green:hover{background:#06b946;}
.plan-btn.is-outline{border:2px solid #00d34d;color:#333;}
.plan-btn.is-outline:hover{background:#f0fff4;}
.plan-spacer {margin-top:auto;height:120px;}

@media screen and (max-width:950px){
    .plan-section{padding:50px 20px;}
    .plan-grid{display:block;max-width:1200px;}
    .plan-card{padding:30px 20px;width:80%;margin:3% auto;}
    .plan-card:hover{transform:translateY(-2px);}
}
@media screen and (max-width:700px){
  .plan-card{width:90%;margin:6% auto;}
}
@media screen and (max-width:500px){
  .plan-section{padding:50px 20px 0;}
  .plan-title-area{margin-bottom:0px;}
  .plan-card{width:100%;margin:3% auto 6%;}
  .plan-btn{font-size:15px;}
}

/* 公式LINE運用までの流れ */
.flow-section{padding:80px 20px;background:#f5f5f5;text-align:center;position:relative;overflow:hidden;}
.flow-title-area{margin-bottom:60px;}
.flow-title-area h2{font-weight:700;color:#333;}
.flow-subtitle{color:#00d34d;font-weight:800;}
.flow-lead{color:#666;margin-top:15px;}
.flow-container{display:flex;justify-content:space-around;align-items:center;max-width:1200px;margin:0 auto;flex-wrap:wrap;}
.flow-card{background:#fff;width:160px;padding:25px 5px;border-radius:12px;border:2px solid transparent;transition:all 0.3s ease;display:flex;flex-direction:column;align-items:center;}
.flow-card:hover{border-color:#00d34d;box-shadow:0 10px 25px rgba(0, 0, 0, 0.1);transform:translateY(-5px);}
.flow-icon{width:60px;height:60px;margin-bottom:20px;display:flex;justify-content:center;align-items:center;}
.flow-icon img{width:100%;height:auto;filter:grayscale(100%);opacity:0.7;transition:0.3s;}
.flow-card:hover .flow-icon img{filter:grayscale(0%);opacity:1;}
.flow-step-badge{background:#00d34d;color:#fff;font-weight:800;padding:3px 10px 5px;border-radius:20px;margin-bottom:15px;}
.flow-card p{font-weight:700;color:#333;}
/* 矢印 (CSSの疑似要素で作成) */
.flow-arrow{width:20px;height:20px;position:relative;display:flex;justify-content:center;align-items:center;}
.flow-arrow::after{content:"";width:10px;height:10px;border-top:3px solid #00d34d;border-right:3px solid #00d34d;transform:rotate(45deg);}

@media screen and (max-width:1100px){
  .flow-container{justify-content:left;}
  .flow-card{margin:1%;width:20%;}
}
@media screen and (max-width:950px){
  .flow-container{width:80%;margin:0 auto;display:block;}
  .flow-card{background:#fff;width:100%;margin:2% auto;padding:5px;flex-direction:row;}
  .flow-arrow{width:100%;margin-bottom:15px;}
  .flow-arrow::after{transform:rotate(135deg);width:15px;height:15px;}
  .flow-icon{margin:2% 5%;}
  .flow-icon img{width:70%; margin:2% 5%;}
  .flow-step-badge{margin:15px;padding:3px 20px 5px;}
  .flow-card p{margin-left:20px;font-size:18px;}
  .pc{display:none;}
  .ph{display:block;}
}
@media screen and (min-width:951px){
  .pc{display:block;}
  .ph{display:none;}
}
@media screen and (max-width:700px){
  .flow-container{width:90%;}
  .flow-step-badge{margin:15px 0;}
  .flow-card p{font-size:15px;}
}
@media screen and (max-width:500px){
  .flow-title-area{margin-bottom:40px;}
  .flow-section{padding:50px 20px;}
  .flow-card{flex-direction:column;}
  .flow-icon{width:120px;height:100%;}
  .flow-icon img{width:60%;}
  .flow-step-badge{padding:3px 60px 3px;font-size:15px;margin:5px 0;}
  .flow-card p{padding-bottom:10px;font-size:14px;margin-left:0;}
}


/* よくある質問 */
.faq-section{padding:80px 20px;background:#fff;position:relative;overflow:hidden;}
.faq-title-area{text-align:center;margin-bottom:60px;}
.faq-title-area h2{font-weight:700;color:#333;}
.faq-subtitle{color:#00d34d;font-weight:800;}
.faq-lead{margin-top:15px;}
.faq-container{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:20px;}
.faq-item{background:#f9f9f9;border-radius:12px;padding:30px;border:2px solid transparent;transition:all 0.3s ease;}
.faq-question{display:flex;align-items:center;margin-bottom:15px;}
.faq-q-letter{font-weight:900;color:#333;margin-right:20px;width:20px;}
.faq-question h3{font-weight:700;color:#333;}
.faq-answer{display:flex;align-items:flex-start;}
.faq-a-letter{font-weight:900;color:#00d34d;margin-right:20px;width:20px;}
.faq-answer-content{flex:1;}
.faq-highlight{font-weight:700;color:#00d34d;margin-bottom:8px;}
.faq-answer-content p:last-child{color:#666;line-height:1.6;}
.faq-section::before{content:"";position:absolute;width:300px;height:300px;background:radial-gradient(circle, rgba(0, 211, 77, 0.1) 0%, transparent 70%);top:10%;left:-150px;z-index:0;}

@media screen and (max-width:700px){
  .faq-q-letter,.faq-a-letter{margin-right:10px;}
}
@media screen and (max-width:500px){
  .faq-section{padding:50px 20px;}
  .faq-title-area{margin-bottom:40px;}
  .faq-item{padding:20px 10px;}
  .faq-q-letter,.faq-a-letter{margin-right:5px;}
}


/* フッター */
.contact-section{background-color: #00d34d;padding:60px 10px;color:#fff;}
.contact-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;width:80%;text-align:center;}
.contact-text{flex:1;}
.contact-tag{font-weight:700;margin-bottom:20px;}
.contact-main-title{font-weight:800;margin-bottom:40px;}
.contact-info{line-height:1.8;}
.contact-info p{margin-bottom:10px;}
.contact-form-card{background-color:#f8f8f8;padding:20px;border-radius:25px;width:100%;max-width:450px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.1);}
.form-group{margin-bottom:20px;}
.contact-line{width:100%;}
.contact-submit-btn{background-color:#008a32;color:#fff;border:none;padding:14px 60px;border-radius:30px;font-weight:800;cursor:pointer;transition:background-color 0.3s, transform 0.2s;margin-top:10px;display:inline-block;}
.contact-submit-btn:hover{background-color:#006b27;transform:scale(1.02);}
.footer-bottom{background:#323854;padding:20px;text-align:center;}
.footer-bottom p{color:#fff;margin:0;}

.footer-menu{width:95%;margin:2% auto;}
.footer-menu ul{display:flex;justify-content:center;}
.footer-menu li{margin:0 1%;}

@media screen and (max-width:1200px){
  .contact-section{padding:50px 20px;}
}
@media screen and (max-width:1000px){
  .contact-main-title{font-size:19px;margin-bottom:20px;}
}
@media screen and (max-width:950px){
  .contact-container{margin:0 auto;display:block;width:70%;}
  .contact-text{width:100%;margin:2% auto;}
  .contact-form-card{width:100%;margin:4% auto;max-width:800px;}
}
@media screen and (max-width:800px){
  .contact-container{width:90%;}
  .contact-section{padding:20px;}
}
@media screen and (max-width:700px){
  .contact-submit-btn{font-size:17px;}
}
@media screen and (max-width:500px){
  .contact-container{width:100%;}
  .contact-main-title{font-size:16px;}
  .contact-line{text-align:center;}
  .footer-menu li{margin:0 2%;}
  .footer-bottom{padding:10px;}
  .footer-bottom p{font-size:11px;}
}