:root {
  --section-margintop:7vw;
  --section-marginbtm:11vw;
}
html{
    font-size: 62.5%;
}
h1 {
    font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
    line-height: 1.3;
}
body {
  overflow-x: hidden;
  font-size:1.6rem;/* 16px*/
  line-height: 2;
  font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
}
h2{
  margin: var(--section-margintop) 0px  var(--section-margintop) 0px;
  text-align: center;
  color: #222;
    font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    line-height: 1.3;
}
@media (min-width: 992px) {/* 991px以上*/
    h1 {
        font-size: 4.5rem;/* 36px*/
    }
    h2 {
        font-size: 4.5rem;/* 24px*/
    }
    p{
      font-size: 3rem;/* 24px*/
    }
}
@media screen and (max-width: 991px) {/* 991px以下*/
    body{
    line-height: 2;
    }
    h1{
        font-size: 2.2rem;/* 24px*/
    }
    h2 {
        font-size: 2.2rem;/* 20px*/
    }
    p{
      font-size: 2rem;/* 24px*/
    }
}
div,
img{
  margin:0;
  padding: 0;
}
.valigntop{
  vertical-align: top;
}
.masterhead,.row,.col-12{
  margin:0;
  padding: 0;
}
.container,.container-fluid{
  padding: 0;
}
 .narrowh2{
   margin-top:4vw;
 }
h2 span{
  color: #f60;
}
p strong{
  color: #f60;
}
.reasons_pc{
  width:100%;
  margin-bottom: var(--section-marginbtm);
}
.reasons_sp{
  width:98%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: var(--section-marginbtm);
}
.custommers_pc_bottom{
  width:100%;
  margin-bottom: 6vw;
}
.custommers_sp_bottom{
  width:98%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 6vw;
}
.custommers_pc{
  width:100%;
  margin-bottom: 2vw;
}
.custommers_sp{
  width:98%;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 2vw;
}
.bg1{
  background-image: url(../img/pattern/tile_green1.png);
  background-repeat:repeat;
}
.bg2{
  background-image: url(../img/pattern/tile_green2.png);
  background-repeat:repeat;
}
.bg3{
  height: 150px;
  background-image: url(../img/green1.png);
  background-repeat:no-repeat;
 background-position:  center top;
 /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
 background-size: cover;
 /* 背景画像が読み込まれる前に表示される背景のカラー */
 background-color: #464646;
}
.bg4{
  height: 150px;
  background-image: url(../img/green2.png);
  background-repeat:no-repeat;
 background-position:  center top;

 /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
 background-size: cover;

 /* 背景画像が読み込まれる前に表示される背景のカラー */
 background-color: #464646;
}
.win .bg3{
    /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  height:280px;
}
.mac .bg3{
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
  height:280px;
}
.android .bg3{
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
}
.win .bg4{
    /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  height:280px;
}
.mac .bg4{
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
height:280px;
}
.android .bg4{
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
}
.width_100{
  width: 100%;
}
.width_100{
  width: 100%;
}
.width_98{
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
}
.width_90{
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}
.width_70{
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
}
.width_50{
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
}
.width_20{
  border:solid 1px #ccc;
  width: 20%;
  margin-left: 10%;
  margin-right: 70%;
  margin-bottom: 3vw;
}
.imgwhole{
  position: relative;
}
.bg_contact {
  margin-top: var(--section-margintop);
}
.contactme{
  margin-bottom: var(--section-marginbtm);
}
.bottom_img{
  margin-bottom: var(--section-marginbtm);
}
.bottom_img_narrow{
  margin-bottom: 2vw;
}
.bottom_standard{
  margin-bottom: 3vw;
}
.mailbtn {
  width: 25%;
  position:  absolute;
  top:49%;
  left:70%;
}
.responsive {

width: 95%;
margin-left: 2%;
margin-right: 3%;
aspect-ratio: 16/9;
}
.phonebtn_sp {
  width: 90%;
  position:  absolute;
  top:29%;
  left:5%;
}
.mailbtn_sp {
  width: 90%;
  position:  absolute;
  top:57%;
  left:5%;
}
.linebtn{
  margin-top:1vw;
  margin-bottom:var(--section-marginbtm);
}
.section_green{
  background-color: #e1edae;
}
.section_green_weak{
  background-color: #f0f6d4;
}
.section_gray{
  background-color: #eee;
}
/*phase2*/
div.radius {
  margin-bottom:var(--section-marginbtm);
  /*font-size: 3.5vw;*/
  background-color: #fff;
 border: 3px solid #ccc;
 border-radius: 10px;
 width: 94%;
 padding: 3%;
 margin-left: 3%;
 margin-right: 3%;
 display: inline-block;
}
#why_lowcost{
  margin-top: 8vw;
  font-weight: bold;
}
/*実績*/
.tasuu{
  text-align: center;
  font-weight: bold;
}
.standard_top_btm{
  padding-top:var(--section-margintop);
  padding-bottom:var(--section-marginbtm);
}
.video_top_btm{
  padding-top:var(--section-margintop);
  padding-bottom:var(--section-margintop);
}
/*プロフィール*/
.box30 {
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
  border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 6px rgba(0, 0, 0, 0.44);
}
.box30 .box-title {
    font-size: 2.5rem;
  border-radius: 10px 10px 0 0;
  background: #a4bd37;
  padding: 8px 0 8px 30px;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box30 .small {
  font-size: 2rem;
  border-radius: 10px 10px 0 0;
  background: #a4bd37;
  padding: 4px 0 4px 30px;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box30 p {
    padding: 20px 20px;
    margin: 0;
}
.box31 {
  width: 98%;
  margin-left: 1%;
  margin-right: 1%;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.44);
  margin-bottom: 4rem;
}
.box31 .box-title {
  font-size: 2rem;
  border-radius: 10px 10px 0 0;
  background: #a4bd37;
  padding: 8px 0 8px 20px;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box31 .box-title span{
  font-size: 1.57rem;
  color: #FFF;
  font-weight: bold;
  padding-right: 2rem;
}
.box31 p {
  font-size: 2rem;
  padding: 20px 20px;
  margin: 0;
}
.box31 p span{
  font-size: 1.57rem;
  color: #a4bd37;
  font-weight: bold;
  padding-right: 2rem;
}
footer{
  border-top: 20px solid #eee;
  padding-top:var(--section-margintop);
  padding-bottom:5vw;
}
footer p{
  font-size: 2rem;
}
footer h3{
border-bottom: 2px solid #a4bd37;
font-size: 2.5rem;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 991px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

.test{
  background-color: red;
}

/* Hero Section - with SVG background circles */
.hero-section{
  position: relative;
  overflow: visible;
  padding: 7vw 0 8vw 0;
}

.hero-section::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url(../_img/hero-circles.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: #ffffff;
}

.hero-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:0 1.6rem;text-align:center}

.hero-title{font-size:3.6rem;font-weight:800;color:#0b0b0b;line-height:1.06;margin:0 0 2.4rem 0;letter-spacing:0.04em}

.hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:920px;margin:0 auto 2rem}
.hero-card{background:#fff;border:1px solid #cccccc;border-radius:8px;padding:1.6rem 1.2rem;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,0.04)}
.hero-card-value{font-weight:700;color:#222;font-size:1.4rem;margin-bottom:0.4rem}
.hero-card-label{color:#777;font-size:1rem}
.hero-card{background:#fff;border:1px solid #cccccc;border-radius:8px;padding:1.6rem 1.2rem;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,0.04)}
.hero-card-value{font-weight:700;color:#222;font-size:2rem;margin-bottom:0.4rem}
.hero-card-label{color:#777;font-size:1.4rem}

.hero-subtitle{font-size:2.0rem;max-width:760px;margin:0 auto 1.8rem;color:#4a4a4a;line-height:1.8}

.hero-cta{margin-top:1.6rem}
.hero-cta-inner{position:relative;overflow:hidden;background:linear-gradient(90deg, rgba(23,90,119,0.95) 0%, 
  rgba(23,90,119,0.95) 35%, #73a1b4 65%, #6596ac 100%);
  border-radius:14px;padding:1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;max-width:980px;margin:0 auto;border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 8px 20px rgba(6,80,100,0.04);color:#fff}
.cta-text{font-weight:800;color:#ffffff;font-size:1.6rem;text-align:left}
.cta-actions{display:flex;flex-direction:row;gap:0.8rem;align-items:center}
.cta-action{background:#175a77;border:2px solid #175a77;color:#ffffff;padding:0.6rem 1.2rem;border-radius:8px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-width:160px;box-shadow:none;transition:background .18s ease,color .18s ease,transform .12s ease}
.cta-action:hover{background:#ffffff;color:#175a77;transform:translateY(-2px);box-shadow:none}

@media (max-width:991px){
  .hero-title{font-size:2.4rem}
  .hero-cards{grid-template-columns:1fr;gap:1.2rem}
  .hero-cta-inner{flex-direction:column;align-items:stretch;padding:0.8rem}
  .cta-text{text-align:center;font-size:1.2rem}
  .cta-actions{flex-direction:row;justify-content:center}
  .cta-action{min-width:0;width:48%}
}

/* Problems Section - 許可取得後の運用課題セクション */
.problems-section{
  background-color: #ffffff;
  padding: 7vw 0;
}

.problems-content{
  padding: 0 1.6rem;
}

.problems-spacer{
  padding: 0 1.6rem;
}

/* 見出し：強めだがヒーローより一段落とす */
.problems-title{
  font-size: 2.4rem;
  font-weight: 800;
  color: #175a77;
  line-height: 1.3;
  margin: 0 0 1.6rem 0;
  letter-spacing: 0.02em;
  text-align: left;
}

/* 導入文：グレーのトーンで落ち着いた雰囲気 */
.problems-intro{
  font-size: 1.55rem;
  color: #4a4a4a;
  margin: 0 0 2.4rem 0;
  line-height: 1.8;
}

/* 箇条書き：記号なし、視覚的な階層感を左paddingで表現 */
.problems-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.problems-list li{
  font-size:1.55rem;
  color: #222;
  margin-bottom: 1.2rem;
  padding-left: 1.6rem;
  line-height: 1.8;
  position: relative;
}

/* 左側に微妙な視覚的な強調 */
.problems-list li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 0.4rem;
  height: 0.4rem;
  background-color: #175a77;
  border-radius: 50%;
  opacity: 0.6;
}

/* アイコン付きリスト用スタイル */
.problems-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.problems-list li{
  padding-left: 5.4rem; /* アイコン分の余白 */
  position: relative;
  font-size: 2.4rem; /* リストを大きめに表示 */
  line-height: 1.6;
  margin-bottom: 1.6rem;
}
.problems-list li::before{ display: none; }
.problems-list li img.icon{
  width: 48px;
  height: 48px;
  position: absolute;
  left: 0;
  top: 0.1rem;
}

@media (max-width: 991px){
  .problems-list li{ font-size: 1.9rem; padding-left: 5.2rem; }
  .problems-list li img.icon{ width:40px; height:40px; }
}

/* SP時：1カラム + 右カラムは非表示 */
@media (max-width: 991px){
  .problems-spacer{
    display: none;
  }
  
  .problems-title{
    font-size: 2rem;
  }
  
  .problems-intro{
    font-size: 1.43rem;
  }

  .problems-list li{
    font-size: 1.43rem;
  }
}

.section_gray .radius ul{
  margin: 0;
  padding-left: 2rem;
}

.section_gray .radius ul li{
  font-size: 2.4rem;
  line-height: 1.6;
  margin-bottom: 1.6rem;
}
ul.operations-list li{
  font-size: 1.9rem;
}
@media (max-width: 991px){
  .section_gray .radius ul li{
    font-size: 1.9rem;
  }
}
/* Ambient Animation - Canvas装飾アニメーション要素 */
.ambient-canvas-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
}

#ambientCanvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.18;
  animation: ambientFloat 22s ease-in-out infinite;
}

@keyframes ambientFloat {
  0%   { transform: translate(0, 0); opacity: 0.07; }
  50%  { transform: translate(2px, -2px); opacity: 0.12; }
  100% { transform: translate(0, 0); opacity: 0.07; }
}

/*ブログへリンク*/
.guide-cta-wrap{
  margin-top: 3rem;
  text-align: center;
}

.guide-cta-btn{
  display: inline-block;
  background: linear-gradient(90deg,#175a77,#2e7fa1);
  color: #ffffff;
  font-size: 2rem;
  font-weight: 700;
  padding: 1.4rem 3rem;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  transition: all 0.2s ease;
}

.guide-cta-btn:hover{
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
  background: linear-gradient(90deg,#134b63,#236a85);
}



/* ---------- Section②：思想転換 (section-thought) ---------- */
.section-thought{
  background-color: #f3f7f6; /* ごく薄い色面（ヒーローより静か） */
  padding: 7vw 0;            /* ヒーローと同等の上マージン */
}

.section-thought .container{ max-width:1100px; }

.thought-title{
  font-weight:700;
  font-size:2.0rem;     /* セクション①より一段下げる */
  color:#2f5a58;        /* 控えめなティール系 */
  margin:0 0 1.2rem 0;
  line-height:1.2;
  text-align:left;
}

.visual-col{ display:flex; align-items:center; justify-content:center; padding:1rem; }
.visual-wrap{
  width:90%;            /* 幅制限は90%以内 */
  max-width:360px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.visual-svg{ width:100%; height:auto; display:block; }

.text-col{ padding:1rem; }
.thought-text{
  font-size:1.05rem;    /* 可読性重視 */
  color:#334845;
  line-height:1.9;
  margin:0;
  white-space:pre-wrap;
}

@media (min-width:992px){
  .section-thought .row > .visual-col{ flex: 0 0 40%; max-width:40%; }
  .section-thought .row > .text-col{ flex: 0 0 60%; max-width:60%; }
  .section-thought .row{ gap:2rem; }
}

@media (max-width:991px){
  .section-thought{ padding:10.5vw 0; } /* 余白1.5倍 */
  .visual-wrap{ max-width:320px; }
  .thought-title{ font-size:1.6rem; margin-bottom:1rem; }
  .thought-text{ font-size:1rem; line-height:1.95; }
}

/* 補助：静止表示、インタラクション無効 */
.visual-svg, .visual-wrap { pointer-events: none; user-select: none; }

/* ---------- Sections 3〜最終CTA ---------- */
.section-solution{ background-color: #fbfdfc; padding: 6vw 0; }
.section-solution .section-h2{ font-size:1.9rem; font-weight:700; color:#2f5a58; text-align:left; margin-bottom:1rem; }
.solution-body{ color:#323f3e; font-size:1.05rem; line-height:1.9; }

.section-kit{ background-color: #ffffff; padding:5vw 0; }
.kit-title{ font-size:1.5rem; color:#2f5a58; font-weight:700; margin-bottom:1rem; text-align:left; }
.kit-card{ border:1px solid #e6efee; padding:1rem; border-radius:8px; background:#fcfdfd; }
.kit-card-title{ font-weight:700; color:#334845; margin-bottom:0.4rem; }
.kit-card-desc{ color:#566864; font-size:0.95rem; }
.kit-note{ color:#6b7675; font-size:0.85rem; margin-top:1rem; }

.section-scope{ background-color:#f9fbfb; padding:4vw 0; }
.scope-title{ font-size:1.4rem; color:#2f5a58; font-weight:700; margin-bottom:0.8rem; }
.scope-list{ color:#334845; font-size:1.05rem; line-height:1.9; }

.section-price{ background-color:#ffffff; padding:5vw 0; }
.price-box{ max-width:640px; margin:0 auto; border:1px solid #eef6f5; padding:1.6rem; border-radius:8px; text-align:center; }
.price-head{ color:#334845; font-size:1rem; margin-bottom:0.6rem; }
.price-amount{ color:#175a77; font-size:2rem; font-weight:800; margin-bottom:0.6rem; }
.price-note{ color:#6b7675; font-size:0.95rem; }

.section-faq{ background-color:#fbfcfb; padding:5vw 0; }
.faq-title{ font-size:1.5rem; color:#2f5a58; font-weight:700; margin-bottom:1rem; }
.faq-item{ margin-bottom:1rem; }
.faq-q{ font-weight:700; color:#334845; margin-bottom:0.4rem; }
.faq-a{ color:#4e5b5a; line-height:1.8; }

.section-profile{ background-color:#ffffff; padding:5vw 0; }
.profile-title{ font-size:1.25rem; color:#2f5a58; font-weight:700; margin-bottom:0.6rem; }
.profile-body{ color:#334845; font-size:0.98rem; line-height:1.9; }

.section-finalcta{ background-color:#eef6f5; padding:4vw 0; }
.final-cta-box{ display:flex; flex-direction:column; align-items:center; gap:1rem; padding:1.2rem 1.6rem; border-radius:10px; border:1px solid #dff0ee; background:#ffffff; }
.final-cta-text{ font-size:1.15rem; color:#175a77; font-weight:700; }
.final-cta-actions{ display:flex; gap:0.8rem; }
.final-btn{ background:#175a77; color:#fff; border-radius:8px; padding:0.6rem 1rem; text-decoration:none; border: none; }
.final-btn.btn-outline{ background:transparent; color:#175a77; border:1px solid #175a77; }

@media (max-width:991px){
  .final-cta-actions{ flex-direction:column; width:100%; }
  .final-btn{ width:100%; text-align:center; }
}

/* マニュアル画像サンプル */
.manual-sample img{
  width: 66.666%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
}
.manual-caption{
  text-align: center;
  color: #666666;
  font-size: 1.4rem;
  margin-bottom: 1.2rem;
}
/*
@media (max-width: 991px){
  .manual-sample img{ width: 80%; }
  .manual-caption{ font-size: 1.2rem; }
}
*/
@media (max-width: 991px){

  .problems-list li{
    font-size: 1.9rem;
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .problems-list li img.icon{
    position: static;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-top: 0.3rem;
  }

}