@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");
@import url("inview.css");



/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;
  padding: 0;
	font-size: 14px;
	overflow-x: hidden;
}

body {
	font-family: 'Lato', 'M PLUS 1 Code', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif,"Poppins";
	-webkit-text-size-adjust: none;
	letter-spacing: 0.05em;
	background: #fff;
	color: #555;
	line-height: 2;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;
  padding: 0;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*ul,olタグ*/
ul, ol {margin-bottom: 30px;}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #1f1f1f;
	transition: 0.3s;
}


/*sectionタグと、詳細ページの共通設定
---------------------------------------------------------------------------*/

section,
main > article {
	margin: 0 auto;
	padding: 5%
}

@media(min-width:1400px){
section,
main > article {
	margin: 0 auto;
	padding: 4%;
}
}


@media(min-width:2000px){
section,
main > article {
	margin: 0 auto;
	padding: 3%;
}
}

@media(min-width:2300px){
section,
main > article {
	margin: 0 auto;
	padding: 2%;
}
}




/*2カラムブロック（※900px未満では１カラム）
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.c2 {
	display: flex;
	flex-direction: column;
}

/*c2内のh2見出し*/
.c2 h2 {
	font-size: 2em;
}

/*小さい端末で見た場合（１カラムになった際）に、画像を常に先頭に持ってくる*/
.c2 .image {
	order: -1;
}


/*header（ロゴなどが入った最上段のブロック）
-------------------------------------------------------------------------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: rgba(255,255,255,.75);    
	position: fixed; 
	width: 100%;
	padding: 0 12%;
	height: 70px;
	padding-left:0;
  z-index: 100;         /* .bg2 の疑似要素より確実に大きく */
   backdrop-filter: saturate(160%) blur(8px); /* 背景にブラー（任意） */
}

@media (min-width: 900px){header{ padding-right: clamp(160px, 10vw, 260px); }}
@media (min-width: 1300px){header{ padding-right: clamp(190px, 10vw, 260px); }}
@media (min-width: 1600px){header{ padding-right: clamp(200px, 10vw, 220px); }}


/*ヘッダーのリンクテキストの文字色*/
header a {
	color: #1b1b1b;
}

/*ロゴ画像*/
header #logo img {
  display: block;
  width: auto;   
  height: 45px;
  padding-left: 23px;           
}

          #logo .site-logo{
            position: relative;
            display: inline-block;
            width: 140px;    /* ←実寸に */
            height: 70px;    /* ←実寸に */
            top:7px;
          }

          /* 2枚とも同じ位置に重ねる */
          #logo .site-logo img{
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
          }

          /* 初期は通常版のみ表示 */
          #logo .logo--base  { opacity: 1;  transition: opacity .2s ease; }
          #logo .logo--hover { opacity: 0;  transition: opacity .2s ease; }

          /* ホバーでオレンジ版にフェード */
          #logo .site-logo:hover .logo--base  { opacity: 0; }
          #logo .site-logo:hover .logo--hover { opacity: 1; }

@media(min-width:2000px){
  header #logo img {
  padding-left: 25px;           
}
}
header #logo {
	margin: 0;
	width: 250px;
}

/* ── モバイルだけ：ロゴを左寄せ＆少し小さく ── */
      @media (max-width: 899px){
        header{ 
          height: 64px;            /* ヘッダーを少し低く */
          padding-left: 0;         /* 念のため左パディングを0に */
        }
        header #logo{ width: auto; }           /* 固定幅を外す */
        header #logo img{
          height: 40px;                          /* ロゴを少し小さく */
          padding-left: 15px; 
          display: block;                        /* 余白をなくす保険 */
        }

        /* 帯を下げた分、次のセクションを同じ量だけ引き上げる */
        .first-section{
          position: relative;
          top: -18vw;          /* ↑ と同じ絶対値にする */
        }

        /* ヘッダーの高さ（実寸に合わせて調整） */
        :root{
          --header-h: 75px;
        }

        /* ヘッダーを最前面へ */
        header{
          position: fixed;            /* 既に fixed ならそのままでOK */
          top: 0; left: 0; right: 0;
          z-index: 1000;              /* ヒーローより十分大きく */
          /* background: #fff;  透過なら下のテキストが透けるので色を入れると安心 */
        }

          /* ヒーロー帯(#mainimg)をお使いの場合は、ヘッダー高さに合わせてずらす */
          #mainimg{ top: 64px; }                  /* 既定は 75px → 64px に */

            #logo .site-logo{
            position: relative;
            display: inline-block;
            width: 100px;    /* ←実寸に */
            height: 50px;    /* ←実寸に */
            top:7px;
          }

       }

/* ① 太さを変数化（任意） */
 :root{
      --fw-body: 300;     /* サイト全体の標準 */
      --fw-header: 500;   /* ヘッダーの太さ ← ここを好みで 500/600/700 */
      --header-fz-min: 10px;   /* 最小 */
      --header-fz-max: 14px;   /* 最大 */
 }

        /* ② 全体は従来どおりの軽さ */
  html,body,button,input,textarea,select{
    font-family: var(--font-sans);
    font-weight: var(--fw-body);
}

/* ③ ヘッダーだけ太く（メニューの文字） */
  header #menubar a,
  header nav a{
    font-weight: var(--fw-header);
    letter-spacing: .02em;          /* お好みで */
    font-size: clamp(var(--header-fz-min), 0.9rem + 0.4vw, var(--header-fz-max));
    line-height: 1.1;          /* 文字が大きくなった時の詰まり防止 */
    padding-block: 8px;       /* 必要なら上下の余白も少し増やす */
  }


              /* =========================
              Header nav: hover で黒→灰色
              ========================= */
            

/* Header nav: hoverで色＋ちょい上げ */
:root{
  --nav-color:       #222;
  --nav-hover-color: #fc9b1b;
}

header nav a,
#menubar a{
  display: inline-block;            /* transformのために必要 */
  color: var(--nav-color);
  transform: translateY(0);
  transition: color .2s ease, transform .2s ease;
  text-decoration: none;
}

@media (hover:hover){
  header nav a:hover,
  #menubar a:hover{
    color: var(--nav-hover-color);
    transform: translateY(-2px);    /* ここで“ちょい上げ” */
  }
  /* クリック中は少し戻す（お好みで） */
  header nav a:active,
  #menubar a:active{
    transform: translateY(-1px);
  }
}

/* 動きが苦手設定なら移動は無効化（推奨） */
@media (prefers-reduced-motion: reduce){
  header nav a,
  #menubar a{
    transition: color .2s ease;
    transform: none;
  }
}

 /* ← ヘッダーや .nav のスタイルよりも “後ろ” に書くこと */
          @media (min-width: 900px){
            header .nav a.nav-cta {         /* 特異性アップ */
              display: none !important;     /* 既存が !important ならこちらも付ける */
            }
          }
/*トップページ
------------------------------------------------------------------------------------------------------------------------------------------*/
/* ベース */
      .hero{
        --y: 0vh;
        /* それぞれの遅延を変数で定義 */
        --d1: 0s;       /* 1枚目 */
        --d2: 1s;     /* 2枚目 */
        --d3: 2s;      /* 3枚目 */
        position: relative;
        min-height: 70vh;
        overflow: hidden;
      }

      /* Hero の下に余白を足して、次の .bg2(=Company) を下げる */
        .hero{
          /* 好きな量に調整。小さめ～大きめまで滑らかに可変 */
          padding-bottom: clamp(220px, 8vw, 280px);
        }


@media (min-width: 2300px){
.hero{
  /* 好きな量に調整。小さめ～大きめまで滑らかに可変 */
  padding-bottom: clamp(340px, 8vw, 360px);
}
}
@media (min-width: 2700px){
.hero{
  /* 好きな量に調整。小さめ～大きめまで滑らかに可変 */
  padding-bottom: clamp(540px, 8vw, 560px);
}
}

       
      /* 共通：初期は非表示 */
      .hero::before,
      .hero::after,
      .hero__wave.wave3{
        position: absolute; 
        inset: 0;
        background-repeat: no-repeat;
        background-size: 100% auto;
        pointer-events: none;
        opacity: 0;
        content: "";
      }

      /* 1枚目 */
      .hero::before{
        background-image: url("../images/to_right.svg");
        background-position: calc(50%) var(--y);
        z-index: 1;
        animation-duration: .8s;
        animation-timing-function: ease-out;
        animation-fill-mode: both;
        animation-delay: var(--d1)!important;      /* ← 遅延は別プロパティで */
        opacity: 1;
      }

      /* 2枚目 */
      .hero::after{
        --offset: 16px;
        background-image: url("../images/to_right.svg");
        background-position: calc(50%) calc(var(--y) + var(--offset));
        transform: scaleX(1.2);
        z-index: 2;
        animation-duration: .8s;
        animation-timing-function: ease-out;
        animation-fill-mode: both;
        animation-delay: var(--d2)!important;
        opacity: .8;
      }

      /* 3枚目（要素） */
      .hero__wave.wave3{
        --offset: 32px;
        background-image: url("../images/to_right.svg");
        background-position: calc(50%) calc(var(--y) + var(--offset));
        transform: scaleX(1.4);
        z-index: 3;
        animation-duration: .8s;
        animation-timing-function: ease-out;
        animation-fill-mode: both;
        animation-delay: var(--d3)!important;
        opacity: .6;
      }

@media(max-width:496px){  .hero::before,.hero::after,.hero__wave.wave3{ --y: 10vh;}}
@media(min-width:800px){  .hero::before,.hero::after,.hero__wave.wave3{ --y: -20vh;}}
@media(min-width:1000px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -30vh;}}
@media(min-width:1100px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -35vh;}}
@media(min-width:1200px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -40vh;}}
@media(min-width:1300px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -45vh;}}
@media(min-width:1400px){.hero::before,.hero::after, .hero__wave.wave3{ --y: -56vh;}}
@media(min-width:1500px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -56vh;}}
@media(min-width:1600px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -56vh;}}
@media(min-width:1700px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -60vh;}}
@media(min-width:1800px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -64vh;}}
@media(min-width:1900px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -70vh;}}
@media(min-width:2000px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -78vh;}}
@media(min-width:2100px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -85vh;}}
@media(min-width:2200px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -92vh;}}
@media(min-width:2300px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -96vh;}}
@media(min-width:2400px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -102vh;}}
@media(min-width:2500px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -104vh;}}
@media(min-width:2600px){.hero::before,.hero::after, .hero__wave.wave3{ --y: -110vh;}}
@media(min-width:2700px){.hero::before,.hero::after, .hero__wave.wave3{ --y: -113vh;}}
@media(min-width:2800px){.hero::before,.hero::after, .hero__wave.wave3{ --y: -120vh;}}
@media(min-width:2900px){.hero::before,.hero::after,.hero__wave.wave3{ --y: -120vh;}}
@media(min-width:3000px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -125vh;}}
@media(min-width:3100px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -132vh;}}
@media(min-width:3200px){ .hero::before,.hero::after,.hero__wave.wave3{ --y: -134vh;}}



/********************************** テキストは最前面 *******************************************/
.hero__inner{ position: relative; z-index: 4; }

/* テキストの枠 */
.hero__inner{
  width: min(1200px, 75%);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 100px) 0 clamp(100px, 11vw, 150px);
  display: grid;
  justify-items: end;                 /* 右寄せ配置 */
}

/* 見出し行の基本：行の高さを“文字サイズそのもの”にする */
.hero__copy{
  font-size: clamp(40px, 4.2vw, 100px);
  line-height: 1.5;                  /* ← これが重要 */
  letter-spacing: .07em;
  color: #000;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* 大サイズ（漢字） */
.hero__copy .kanji{
  display: inline-block;
  line-height: 1;                  /* ボックス＝字高 */
    font-weight: 380;
}

/* 小サイズ（ひらがな） */
.hero__copy .kana{
  display: inline-block;           /* オフセットしやすくする */
  line-height: 1;
  font-size: .85em;                 /* お好みの縮尺 */
  /* 見た目の底を合わせるために、少しだけ下げる */
  transform: translateY(var(--kana-shift, .16em));
  font-weight: 380;
  vertical-align: .12em;  /* ベースラインを少し持ち上げる */
}
 
/* サブコピー */
.hero__lead{
  margin-top: clamp(12px, 2vw, 20px);
  text-align: left;
         color: inherit; /* ← 念のため継承を明示 */
            font-size: clamp(16px, 5vw, 20px);
            font-weight: 100;
}

          @media (max-width: 767px){

              /* SP 幅：テキストを下に下げる */
              .hero__text{
                margin-top: clamp(80px, 22vh, 160px);  /* ←数値で調整 */
              }

              .hero__inner{
                /* どれかでOK。テキストを中央寄せ */
                display: block;                   /* grid のままでもOK */
                text-align: center;
                justify-items: center;            /* grid の場合の中央寄せ */
                margin: 30 auto;
                width: min(92vw, 560px);          /* 横幅を少し狭めて中央に */
                padding: clamp(56px,7vw,88px) clamp(16px,4vw,24px) clamp(20px,5vw,28px);
              }

              .hero__copy{
                line-height: 1.15;
              }

              /* 見出しの各スパンを中央寄せ・変形なし */
              .hero__copy .kanji,
              .hero__copy .kana1,
              .hero__copy .kana2{
                display: inline-block;
                transform: none;                  /* ← translateX を無効化 */
                vertical-align: baseline;
              }
              .hero__copy .kana{transform: translateY(.16em);}

               .hero__lead{/* サブコピー */
                font-size: clamp(10px, 5vw, 13px);
                font-weight: 100;
                margin-top: clamp(8px, 2.5vh, 16px);   /* 見出しとの間隔を維持（任意） */
                text-align: center;
                margin: clamp(12px,2.4vw,20px) auto 0;
                transform:translateY(20px);
              }
          }


              /* 768px ～ 1023px だけ位置を少し右下に */
                @media (min-width: 768px) and (max-width: 1025px) {
                /* ずらす量は値をお好みで調整してください */
                .hero__text{
                  --shift-x: clamp(80px, 2.8vw, 86px);  /* 右へ */
                  --shift-y: clamp(88px, 2.4vw, 95px);  /* 下へ */
                  position: relative;
                  transform: translate(var(--shift-x), var(--shift-y));
                }
              }

/* 句読点だけ小さくする（親フォントサイズに対する相対） */
.hero__copy .punc{
  font-size: .68em;             /* お好みで .68–.78em くらい */
  font-weight: 200;             /* もし見出しが太字なら軽めにするのも◎ */
  letter-spacing: .07em;            /* 文字間は詰める */
  display: inline-block;
  vertical-align: -0.05em;      /* 小さくしたぶん僅かに下げて底を揃える */
}

      /* タブレット帯で微調整したい場合（任意） */
      @media (min-width: 768px) and (max-width: 1025px){
        .hero__copy .punc{
          font-size: .70em;
          vertical-align: -0.045em;
        }
      }

              /* モバイル（任意） */
              @media (max-width: 767.98px){
                .hero__copy .punc{
                  font-size: .68em;
                  vertical-align: -0.04em;
                }
              }


/* ===== 行の順番表示（ラインアニメ） =========================== */

/* 初期状態：見えない＆少し下に/少しぼかし */
.hero__copy .line,
.hero-line {
  display: block;              /* ブロック化（改行させる） */
  opacity: 0;
  transform: translateY(12px);
  filter: blur(2px);
  will-change: opacity, transform, filter;
}

/* body に .hero-ready が付いたら再生（JSで付与済み） */
.hero-ready .hero__copy .line,
.hero-ready .hero-line {
  animation: lineIn .64s cubic-bezier(.2,.65,0,1) forwards;
}

/* ステップ：1行目→2行目→サブ1→サブ2（お好みで数値調整OK） */
.hero-ready .hero__copy .line:nth-child(1) { animation-delay: 2.10s; }
.hero-ready .hero__copy .line:nth-child(2) { animation-delay: 2.50s; }

.hero-ready .hero-line:nth-of-type(1)     { animation-delay: 3.30s; }
.hero-ready .hero-line:nth-of-type(2)     { animation-delay: 3.30s; }

/* キーフレーム */
@keyframes lineIn {
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* アニメーションを好まない設定のときは静的に（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  .hero__copy .line,
  .hero-line,
  .hero-ready .hero__copy .line,
  .hero-ready .hero-line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/*menubarブロック初期設定
-------------------------------------------------------------------------------------------------------------*/
#menubar ul {list-style: none;margin: 0;padding: 0;}

/*メニューを非表示にしておく*/
#menubar {display: none;}

/*開閉用のスタイル*/
#menubar.db {display: block;}
@media screen and (min-width:900px) {
  #menubar {
    display: block;
  }
}


/*メニュー１個あたりの設定*/
#menubar a {
	display: block;text-decoration: none;
	text-align: center;
	letter-spacing: 0.1em;
	padding: 10px;
}


        /* SPだけ：#mainimg の青い背景とレイヤー背景を無効化 */
        @media (max-width: 900px){
          #mainimg{
            background: none !important;        /* 背景色(#318af0)も画像レイヤーもリセット */
          }
          /* 画像は擬似要素で出す運用のまま */
          #mainimg::after{
            inset: var(--header-h, 56px) 0 auto 0;  /* いまの挙動を維持（必要に応じて 0 にしてもOK） */
            background-color: transparent;
          }
        }


/*小さな端末用の設定（開閉ブロック）
-----------------------------------------------------------------------------------------------------------------*/
/*メニューブロック設定*/
.s #menubar.db {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 70px 20px;
	background: rgba(0,0,0,0.9);
	animation: animation1 0.2s both;
	text-align: center;
	color: #fff;
}
.s #menubar.db a {
	display: block;
	color: #fff;
}

/*３本バー（ハンバーガー）アイコン設定
----------------------------------------------------------------------------------------------------------------------*/
/*開閉用のスタイル*/
#menubar_hdr.db {display: flex;}
#menubar_hdr.dn {display: none;}

/*３本バーを囲むブロック*/
#menubar_hdr {
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 5px;
	top: 2px;
	padding: 16px 14px;
	width: 46px;
	height: 46px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: rgba(0,0,0,0.5);
	border-radius: 50%;
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;
	border-top: 2px solid #fff;
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;
	width: 20px;
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}


/* ===== SPオーバーレイ時のメニューを縦並びにする ===== */
/* スマホメニュー（オーバーレイ）を全画面＆中央配置に */
/* === オーバーレイ・メニュー（ハンバーガーを開いた時） ======================================-============================================= */
.s #menubar.db{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.86);
  display: flex;                 /* 画面中央に配置する土台 */
  justify-content: center;
  align-items: center;
}

/* 中のラッパー（nav や ul）を縦並びにして中央寄せ */
.s #menubar.db nav,
.s #menubar.db > ul,
.s #menubar.db nav > ul{
  display: flex !important;
  flex-direction: column !important; /* ← これで縦並び */
  align-items: center !important;    /* 中央寄せ */
  gap: 18px;                         /* 項目の間隔 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* PC 用の float / inline-block を打ち消し */
.s #menubar.db li{
  float: none !important;
  display: block !important;
  width: auto;
}

/* 文字を中央に・タップしやすく。横並びを防ぐ（nowrap は外す） */
.s #menubar.db a{
  display: block;
  text-align: center;
  white-space: normal;               /* 1文字ずつ縦割れしないように */
  color: #fff;
  text-decoration: none;
  font-size: clamp(18px, 5.2vw, 24px);
  letter-spacing: .06em;
  line-height: 1.6;
  padding: .35em 1.2em;
}

/* 背面スクロールを止めたい場合（任意） */
html.s, html.s body{
  overflow: hidden;
}


/* ハンバーガー（オーバーレイ）を開いた時だけ、サブメニューを常時表示 */
.s #menubar.db li.has-sub > ul,
.s #menubar.db li > ul.sub {
  position: static !important;     /* 絶対配置を解除 */
  display: block !important;       /* 非表示を解除 */
  background: transparent;
  box-shadow: none;
  margin: .3rem 0 0 1.2rem;        /* 親より少し字下げ */
  padding: .2rem 0 .4rem;
  list-style: none;
  border-left: 2px solid rgba(255,255,255,.25);
}

/* サブメニューの文字を少し小さく&薄めに */
.s #menubar.db li.has-sub > ul > li > a {
  font-size: clamp(14px, 4.2vw, 16px);
  opacity: .85;
  color: #fff;
  display: block;
  padding: .2em 0;
  text-decoration: none;
}

/* 既存のPC用float/inlineを打ち消し（縦並び化の延長） */
.s #menubar.db li.has-sub > ul > li {
  float: none !important;
  display: block !important;
}

/* ▼モバイルのオーバーレイ（.s #menubar.db）で
   PCドロップダウンの「白い枠（背景・角丸・影・枠線）」を完全に無効化 */
.s #menubar.db li.has-sub > ul,
.s #menubar.db li > ul.sub{
  position: static !important;
  display: block !important;
  margin: .3rem 0 0 1.2rem;
  padding: .2rem 0 .4rem;
  list-style: none;

  /* ここで“白枠”原因を潰す */
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* サブメニュー各項目の枠・影・角丸も消す */
.s #menubar.db li.has-sub > ul > li{
  float: none !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.s #menubar.db li.has-sub > ul > li > a{
  display: block;
  padding: .2em 0;
  font-size: clamp(14px, 4.2vw, 16px);
  color: #fff;
  opacity: .85;

  /* ここでも念押しで無効化 */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* もし擬似要素で飾り枠が付いていたら消す */
.s #menubar.db li.has-sub > ul > li > a::before,
.s #menubar.db li.has-sub > ul > li > a::after{
  content: none !important;
}

/* 基本色は先の定義を流用 */
:root{
  --nav-color:       #222;
  --nav-hover-color: #ff7006;
}

/* nav リンクに相対配置を付与（疑似要素配置のため） */
header nav a,
#menubar a{
  position: relative;
  display: inline-block;                 /* transform/::after 用 */
  color: var(--nav-color);
  transform: translateY(0);
  transition: color .2s ease, transform .2s ease;
  padding-bottom: 10px;                  /* 丸の分だけ下に余白 */
  text-decoration: none;
}

/* ホバーで色＋ちょい上げ */
@media (hover:hover){
  header nav a:hover,
  #menubar a:hover{
    color: var(--nav-hover-color);
    transform: translateY(-2px);         /* 好みで -1〜-4px */
  }
}

          /* SPオーバーレイ時：上から表示＆縦スクロール許可 */
          @media (max-width: 900px){
            .s #menubar.db{
              align-items: flex-start;            /* 中央寄せ→上寄せ */
              overflow-y: auto;                   /* オーバーレイ側でスクロール */
              -webkit-overflow-scrolling: touch;  /* iOS慣性スクロール */
              padding: calc(64px + env(safe-area-inset-top)) 20px 24px;
              position: fixed;
              inset: 0;                    /* top:0 right:0 bottom:0 left:0 */
              height: 100dvh;              /* モバイルに強いvh */
              min-height: 100vh;           /* フォールバック */
              display: block;              /* ここは block の方が無難 */
              background: rgba(0,0,0,.86);
              z-index: 9999;
            }

            /* メニューリストのレイアウト（必要なら） */
            .s #menubar.db > ul{
              display: flex;
              flex-direction: column;
              gap: 16px;
              margin: 0;
              padding: 0;
              list-style: none;
            }
          }
          @media (max-width: 900px){
            .s header{ overflow: visible; }
          }

          /* 900px 未満でオーバーレイメニューを開いている時は
   親見出し「サービス」を表示する */
@media (max-width: 900px){
  .s #menubar.db .nav-parent{
    /* sr-only / 非表示指定をリセット */
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    color: #fff;
    font-weight: 500;
    pointer-events: none;   /* クリック不可の見出しとして表示 */
    text-align: center;
    text-decoration: none;
    font-size: clamp(18px, 5.2vw, 24px);
    letter-spacing: .06em;
    line-height: 1.6;
    display: block;
    width: max-content;          /* テキスト幅に縮む */
    margin: 0px auto 0px;      /* auto で水平中央寄せ */
    padding: 0em 0;             /* 左余白があればリセット */
  }

  /* li に左パディングがある場合は消す（必要なら） */
  .s #menubar.db .nav > li{ padding-left: 0; }

  /* 下線や装飾を :before/:after で置いている場合は中央に合わせる（使っていれば） */
  .s #menubar.db .nav > li > .nav-parent::before,
  .s #menubar.db .nav > li > .nav-parent::after{
    left: 50%;
    transform: translateX(-50%);
  }
}


          /* SP: サブメニュー（AVシステム構築/デジタルサイネージ）を中央寄せ */
          @media (max-width: 900px){

            /* サブ UL を縦並び & センター */
            .s #menubar.db .nav > li.has-sub > ul{
              display: flex !important;
              flex-direction: column;
              align-items: center;          /* ←中央寄せ */
              gap: 12px;
              margin: 12px 0 0;
              padding: 0;
              text-align: center;
            }

            /* サブ LI は幅を持たせない（テキスト幅） */
            .s #menubar.db .nav > li.has-sub > ul > li{
              width: auto;
              list-style: none;
              padding: 0;                  /* 左パディングがあれば打ち消し */
              margin: 0;
            }

            /* 親 LI に残っている左寄せ系を無効化（必要に応じて） */
            .s #menubar.db .nav > li.has-sub{ padding-left: 0; }
          }



 /* SP ハンバーガー（< 900px）を縦中央に */
@media (max-width: 900px) {

  /* オーバーレイ全体（#menubar.db）を縦中央レイアウトに */
  .s #menubar.db{
    position: fixed;         /* すでに指定済みならそのまま */
    inset: 0;
    min-height: 100dvh;      /* 画面の高さぴったり */
    display: flex;
    flex-direction: column;
    justify-content: center; /* ←縦中央 */
    align-items: center;      /* ←横中央 */
    padding: clamp(24px, 4vh, 48px) 16px;
    gap: 24px;                /* ロゴ/見出し等の上下余白 */
    overflow-y: auto;         /* 画面より多い時はスクロール */
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* メインの UL 自体も中央寄せにして余白を整える */
  .s #menubar.db > ul{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
  }

  /* サブメニュー（AVシステム構築／デジタルサイネージ） */
  .s #menubar.db .nav > li.has-sub > ul{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin: 10px 0 0;
    padding: 0;
    text-align: center;
  }

  /* 閉じるボタンはフローから外す（縦中央に影響させない） */
  .s #menubar.db .menubar-close,
  .s #menubar.db .menu-close,
  .s #menubar.db .btn-close{   /* 実際のクラス名に合わせて1つ残してください */
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 12px;
  }
}
  

  

/*mainブロック設定
--------------------------------------------------------------------------------------------------------------------------*/
/*mainブロック*/
main {
	padding-top: 0px;
}

/* 英字の大見出し（Company / Service / …） */
main h2{
    font-family: 'Poppins' !important;
  font-weight: 700;                 /* Black */
  /* 既存の指定があれば合わせて残す */
  line-height: 1.5;
  font-size: 3em;
  text-align: center;
  letter-spacing: .05em;            /* Poppins は詰め気味なので少し狭めが綺麗 */
   color: #2f2726; 
     line-height: 1.1;   
  
}

/* サブ見出し（日本語の小さい行）だけは従来の本文フォントのまま */
main h2 span{
  font-family: var(--font-sans);    /* 既に変数があるならそれを使う */
  font-weight: 400;
  letter-spacing: 0;
  color: #777;
  display: block;                 /* ← これで改行される */
  font-size: clamp(12px, 1.1vw, 14px);  /* 小さめ */
  margin-top: .35em;              /* 見出しとの間隔 */
  opacity: .8;                    /* 少し弱め（任意） */
}

/*mainブロック内のh3タグ*/
main h3 {
	margin: 0 0 1em;
	color: #0b63c7;
}

/*mainブロックのpタグ*/
main p {
	margin: 0 0px 0px;
}
main p + p {margin-top: 15px;}


/*追加*/
:root{
  --font-sans: "Noto Sans JP", "Noto Sans",
               "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
}
html, body, button, input, textarea, select {
  font-family: var(--font-sans);
  font-weight: 400;           /* 基本の太さ */
}
 /* 見出しを太めに（任意） */


/*追加*/
/* トップのキャッチコピー */
.catch{
  /* 大きめ＆レスポンシブ */
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 100;
  line-height: 1.6;
  letter-spacing: .02em;

  /* センター配置 */
  text-align: center;
  max-width: 1000px;    /* 行幅が広すぎないように */
  margin: 32px auto 16px;

  /* 必要なら色を指定（青 or 濃いグレーなど） */
  /* color: #0b63c7; */
}

/* 他の段落スタイルの影響を受ける場合の保険 */
main p.catch{
  margin-left: auto;
  margin-right: auto;
}
/*フッター設定
----------------------------------------------------------------------------------------------------------------------------*/
footer small {font-size: 100%;}

footer {
	font-size: 0.7rem;
	text-align: center;
	padding: 20px;
	background: #111;
	color: #fff;
}

/*リンクテキスト*/
footer a {text-decoration: none;color: #fff;}

/*著作部分*/
footer .pr {display: block;}


/*フッターメニュー設定
-----------------------------------------------------------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
	background: #ffffff;
	color: #fff;
	font-size: 0.7em;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

/*ボックス内のリンクテキスト設定*/
#footermenu a {
	text-decoration: none;
	color: #fff;
  opacity: 1.0;
}

/*リンクテキストのマウスオン時*/
#footermenu a:hover {
	color: #fff;
   opacity: .8;
}

/*ulタグ（メニューの列単位）*/
#footermenu ul {
	margin: 0;
	padding: 0 2px;
	flex: 1;
	list-style: none;
}

/*title*/
#footermenu .title {
	font-weight: bold;
	color: #fff;
	padding-bottom: 5px;
}

      /* フッターメニュー：リンクのアンダーラインアニメ */
      #footermenu a {
        position: relative;
        display: inline-block;            /* transform/::after に必要 */
        text-decoration: none;            /* 既存の下線は消す */
        color: inherit;                   /* 現在の文字色を使う */
        line-height: 1.8;                 /* お好みで */
      }

      /* 描く線（最初は0%） */
      #footermenu a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;                     /* 文字より少し下。調整可 */
        width: 100%;
        height: 1px;                      /* 線の太さ。2pxでもOK */
        background: currentColor;         /* 文字色と同じ色で描く */
        transform: scaleX(0);
        transform-origin: left;           /* 左→右に伸ばす */
        transition: transform .28s ease;
        pointer-events: none;
      }

      /* ホバーで線を表示（デスクトップ環境のみ） */
      @media (hover:hover) {
        #footermenu a:hover::after {
          transform: scaleX(1);
        }
      }

      /* キーボード操作でも出るように */
      #footermenu a:focus-visible::after {
        transform: scaleX(1);
      }

      /* 見出し（.title）はアニメーション対象外のため明示的に下線を消す */
      #footermenu .title,
      #footermenu .title a {
        text-decoration: none;
      }


/*「お知らせ」ブロック
----------------------------------------------------------------------------------------------------------------------------------*/
/*お知らせブロック*/
#new {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	padding: 0 100px;
}

@media(max-width:900px){#new {padding: 0 10px;}}

/*日付(dt)、記事(dd)共通設定*/
#new dt,
#new dd {
	padding: 5px 0;
}

/*日付(dt)設定*/
#new dt {
	width: 8em;	/*※下の「900px以上」の端末用の設定に再設定有*/
}

/*日付の横のマーク（共通設定）*/
#new dt span {
	display: none;	/*小さな端末では非表示にしておく。*/
}

/*記事(dd)設定*/
#new dd {
	width: calc(100% - 8em);
}


/*listブロック
--------------------------------------------------------------------------------------------------------------------------------*/
.list-container .list {
	margin-bottom: 30px;
	padding: 20px;
	background: #fff;
	color: #1b1b1b;
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
	position: relative;
}

/*ボックス内のh4タグ*/
.list-container .list h4 {
	margin: 0;
	color: #666;
}
.list-container .list h4 a {
	color: #666;
}

/*ボックス内のpタグ*/
.list-container .list p {
	margin: 0;
	font-size: 0.8em;
}

/*list内のNEWマーク*/
.list-container .list .new {
	font-size: 0.6em;
	background: #ff0000;
	color: #fff;
	width: 50px;
	line-height: 50px;
	border-radius: 50%;
	text-align: center;
	position: absolute;
	left: -10px;
	top: -10px;
	transform: rotate(-30deg);
}

/*サムネイルスライドショー
---------------------------------------------------------------------------------------------------------------------------*/
/*画像１枚あたりの設定*/
.list-slide .list {
	margin: 10px;
}

/*opencloseを適用した要素のカーソル*/
.openclose {
	cursor: pointer;
	color: #318af0;
}

.news dt span {text-indent: 0;}
.accordion-test summary{
	position: relative;
	list-style: none;
	padding: 15px 45px 15px 25px;
	border:1px solid #000474;
	cursor: pointer;
}
.accordion-test summary::-webkit-details-marker {
	display: none;
}
.accordion-test summary::after{
	position: absolute;
	width: 15px;
	height: 15px;
	top: calc(50% - 10px);
	right: 25px;
	border-right: 4px solid #000474;
	border-bottom: 4px solid #000474;
	box-sizing: border-box;
	content: "";
	transform: rotate(45deg);
	transition: top 0.4s ease-out, transform 0.4s ease-out;
}

.accordion-test details[open] summary::after{
	top: calc(50% - 5px);
	transform: rotate(-135deg);
}

.accordion-test .contents{
	padding: 15px 45px;
	background:#f7f7f7;
}

/*icon
---------------------------------------------------------------------------------------------------------------------------------*/
.icon {
	display: inline-block;
	margin: 1px;
	line-height: 1.5;
	padding: 0px 10px;
	border: 1px solid #999;
	color: #999;
	font-weight: normal;
	font-size: 0.8em;
}
.icon.newicon {
	border-color: transparent;
	background: #f00;
	color: #fff;
}
.icon.upicon {
	border-color: transparent;
	background: #54b1ff;
	color: #fff;
}

/*btnの設定
--------------------------------------------------------------------------------------------------------------------------------*/

  .btn {
        display: block;
        width: 200px;
        height: 58px;
        line-height: 58px;
        font-size: 15px;
        text-decoration: none;
        background-color: #fff;
        color: #000;
        text-align: center;
        cursor: pointer;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
         box-shadow:0 6px 16px rgba(0,0,0,.10);
           border-radius: 39px;
      }

  .btn:hover {
      
        background-color: #000;
        color: #fff;
      }

 .btn:after {
          font-family: "FontAwesome";
          content: "\f105";
          position: relative;
          right: -10px;
          transition: all 0.2s;
        }




.btn-partial-line {
  position: relative;
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: 50px;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  border-bottom: solid 3px #668ad8;
  border-left: solid 3px #668ad8;
  color: #668ad8;
  transition: .4s;
}

a.btn1, a.btn2 {
	display: inline-block;text-decoration: none;
	letter-spacing: 0.1em;
	border-radius: 3px;
	padding: 5px 30px;
	font-size: 1.2em;
	box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
a.btn1 {
	background: #318af0;
	color: #fff;
}
a.btn2 {
	background: #305c96;
	color: #fff;
}
.radius {
	border-radius: 100px !important;
}
a.btn1 i, a.btn2 i {
	margin-left: 20px;
}
a:hover.btn1, a:hover.btn2 {
	transform: scale(1.03);
	filter: brightness(1.1);
}
/* CTAボタン */
@media (min-width: 900px){
  .cta{ text-align: right; }
}


    .btn5 {
        display: block;
        width: 200px;
        height: 58px;
        line-height: 58px;
        font-size: 15px;
        text-decoration: none;
        background-color: #fff;
        color: #000;
        text-align: center;
        cursor: pointer;
        -webkit-transition: all 0.4s;
        transition: all 0.4s; border-radius: 39px;
      }

      .btn5:hover {
       
        background-color: #000;
        color: #fff;
      }

      .btn5:after {
          font-family: "FontAwesome";
          content: "\f105";
          position: relative;
          right: -10px;
          transition: all 0.2s;
        }

.btn6 {
        display: block;
        width: 200px;
        height: 58px;
        line-height: 58px;
        font-size: 15px;
        text-decoration: none;
        background-color: #f4f4f4;
        color: #000;
        text-align: center;
        cursor: pointer;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        border-radius: 39px;
      }

      .btn6:hover {
       
        background-color: #000;
        color: #fff;
      }

      .btn6:after {
          font-family: "FontAwesome";
          content: "\f105";
          position: relative;
          right: -10px;
          transition: all 0.2s;
        }

              .btn7 {
                      display: block;
                      width: 200px;
                      height: 58px;
                      line-height: 58px;
                      font-size: 15px;
                      text-decoration: none;
                      background-color: #f4f4f4;
                      color: #000;
                      text-align: center;
                      cursor: pointer;
                      -webkit-transition: all 0.4s;
                      transition: all 0.4s;
                      border-radius: 39px;
                    }

                    .btn7:hover {
                    
                      background-color: #000;
                      color: #fff;
                    }

                    .btn7:after {
                        font-family: "FontAwesome";
                        content: "\f105";
                        position: relative;
                        right: -10px;
                        transition: all 0.2s;
                      }


/* 右端に固定しているボタンをホバーしても位置を変えない */
.cta--edge > .btn:hover,
.cta--edge > .btn:focus {
  transform: translateY(-50%) scale(1.02); /* 位置は固定、少し拡大 */
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}


a.btn:active{
  transform:none;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}

/*青字に白テキスト*/
/* 小見出し用の青箱ラベル */
.flag{
  display: inline-block;        /* テキストの長さ分だけの箱 */
  padding: 6px 10px;
  border-radius: 6px;           /* 角丸：四角なら 4〜6px 程度 */
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  margin: 8px 0;                /* 上下に少し余白 */
}

.flag--blue{
  background: #0b63c7;          /* お好みのブランドブルーに */
  color: #fff;
}

/*追加
/* 右端に“固定”で寄せるレイアウト用ユーティリティ */
.btn-fixed {
  display: block;
  width: fit-content;              /* ボタン自体の幅だけ */
  margin-left: auto;               /* 右寄せの核 */
  margin-right: var(--site-pad-pc);/* 右端からサイト共通余白だけ離す */
  position: relative;              /* 影響なし。必要なら :after 等の起点に */
}

        /* スマホでは中央寄せに戻す */
        @media (max-width: 899px){
          .btn-fixed {
            margin-right: auto;
            margin-left: auto;
            margin-top: 12px;              /* お好みで */
          }
        }

        /* 900px 未満（スマホ／タブレット縦）だけボタン文字を大きく */
@media (max-width: 900px) {
  .btn {
    font-size: clamp(14px, 4.0vw, 16px); /* 例：画面に応じて 16–20px に可変 */
    padding: 1.2em 2.2em;                /* 文字を大きくした分 余白も少し増やす */
    line-height: 1;                      /* 形が崩れる場合の保険 */
  }
}
/* ベース */
.btn{
  display:inline-flex;           /* もしくは block + flex */
  align-items:center;
  justify-content:center;
  height:58px;                  /* 既存の見た目を踏襲 */
  line-height:normal;           /* 依存をやめる */
}

/* SPでも同じ。モバイル用で line-height:1 を上書きしている箇所は削除 or 下記で無効化 */
@media (max-width: 900px){
  .btn{ line-height:normal; }    /* ← 既存の line-height:1 を打ち消す */
}

/************************************詳しくはこちら90度回転**********************************************/
/* すべての “詳しくはこちら” 系ボタンに共通で適用したい場合 */
.btn, .btn5, .btn6, .btn7 {
  position: relative;                    /* 念のため */
}

/* 矢印の初期状態：回転0°。transform をアニメーション対象にする */
.btn::after,
.btn5::after,
.btn6::after,
.btn7::after{
  display: inline-block;                 /* これがないと回転が効きにくい */
  transform: rotate(0deg);
  transform-origin: center;              /* お好みで right center などでもOK */
  transition: transform .25s ease;       /* right などではなく transform を滑らかに */
}

/* ホバー中に 90° 回転（右向き > が下向き v になります） */
@media (hover:hover){
  .btn:hover::after,
  .btn5:hover::after,
  .btn6:hover::after,
  .btn7:hover::after{
    transform: rotate(90deg);
  }
}

/* 動きが苦手設定のユーザーには回転を無効化（推奨） */
@media (prefers-reduced-motion: reduce){
  .btn::after,
  .btn5::after,
  .btn6::after,
  .btn7::after{
    transition: none;
    transform: none;
  }
}



/* === CTAの位置と器を揃える・統一版 =======================-----------------------------------------------------------======== */
/* 共通の横幅と左右余白（1回だけ宣言しておけばOK） */
:root{
  --content-max: 1100px;  /* 本文の最大幅に合わせて調整 */
  --pad-pc: 40px;         /* PCの左右余白 */
  --pad-sp: 16px;         /* SPの左右余白 */
}

/* どのセクションでも使える右寄せラッパー */
.cta--right,
.cta-right{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  padding-inline: var(--pad-pc);    /* PC時の左右余白 */
}

/* PCは右寄せ */
@media (min-width: 900px){
  .cta--right,
  .cta-right{ justify-content: flex-end; }
}

        /* スマホは中央寄せ＆SP余白に */
        @media (max-width: 899px){
          .cta--right,
          .cta-right{
            justify-content: center;
            padding-inline: var(--pad-sp);
          }
        }

/* Experience/Newsどちらも“同じ器幅”にする（器を中央に据える） */
section.blur  .cta--right,
section.bg3   .cta--right,
section.blur  .cta-right,
section.bg3   .cta-right{
  max-width: var(--content-max);
  margin-inline: auto;              /* 器の左右位置を中央に固定 */
}



/* 既存：右上の細いリンクも変数で統一 */
.btn-partial-line{
  margin-right:0;
}

:root{
  /* 右端からの余白（お好みで） */
  --edge-right: 120px;
}
@media(min-width:1800px){
  :root{
  /* 右端からの余白（お好みで） */
  --edge-right: 140px;
}}

@media(min-width:2400px){
  :root{
  /* 右端からの余白（お好みで） */
  --edge-right: 200px;
}}
              /* モバイル：通常フロー＆中央寄せ。ホバー時も位置は固定 */
              @media (max-width: 899px){
                .cta--edge{
                  left: auto;
                  transform: none;
                  width: 100%;
                  height: auto;
                  text-align: center;
                }
                .cta--edge > .btn{
                  position: static;
                  transform: none;                               /* ← 位置の変形なし */
                  margin: 0 auto;
                }
                .cta--edge > .btn:hover,
                .cta--edge > .btn:focus{
                  transform: none;                               /* ← ジャンプ防止 */
                  /* もし軽い演出を残したいなら ↓ に変更可
                  transform: scale(1.02);
                  */
                }

                  .cta--right.cta--edge{
                  text-align: center;          /* ← right を上書き */
                }
        
                  #experience .cta-raise-m{
                  position: relative;   /* 通常フローのまま、相対オフセット可能に */
                  top: -60px;           /* ↑ 好みで -20〜-48px くらいを微調整 */
                }
              }
                /* PC：右端にピン留め＆ホバー時も位置そのまま少し拡大 */
                @media (min-width: 900px){
                .cta--edge{
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
                width: 100vw;
                  margin: 0;
                  padding: 0;
                  height: 0;
                  }
                .cta--edge > .btn{
                  position: absolute;
                  right: var(--edge-right);
                  top: 50%;
                  transform: translateY(-150%);                 /* ← 位置の基準はここだけ */
                }
                .cta--edge > .btn:hover,
                .cta--edge > .btn:focus{
                  transform: translateY(-150%) scale(1.02);     /* ← PCのみ拡大 */
                  box-shadow: 0 8px 20px rgba(0,0,0,.14);
                }
                }


              /* PC：右端にピン留め＆ホバー時も位置そのまま少し拡大 */
                @media (min-width: 1200px){
                .cta--edge{
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
                width: 100vw;
                  margin: 0;
                  padding: 0;
                  height: 0;
                  }
                .cta--edge > .btn{
                  position: absolute;
                  right: var(--edge-right);
                  top: 50%;
                  transform: translateY(-90%);                 /* ← 位置の基準はここだけ */
                }
                .cta--edge > .btn:hover,
                .cta--edge > .btn:focus{
                  transform: translateY(-90%) scale(1.02);     /* ← PCのみ拡大 */
                  box-shadow: 0 8px 20px rgba(0,0,0,.14);
                }
                }


              /* PC：右端にピン留め＆ホバー時も位置そのまま少し拡大 */
                @media (min-width: 2000px){
                .cta--edge{
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
                width: 100vw;
                  margin: 0;
                  padding: 0;
                  height: 0;
                  }
                .cta--edge > .btn{
                  position: absolute;
                  right: var(--edge-right);
                  top: 50%;
                  transform: translateY(-50%);                 /* ← 位置の基準はここだけ */
                }
                .cta--edge > .btn:hover,
                .cta--edge > .btn:focus{
                  transform: translateY(-50%) scale(1.02);     /* ← PCのみ拡大 */
                  box-shadow: 0 8px 20px rgba(0,0,0,.14);
                }
                }


              /* PC：右端にピン留め＆ホバー時も位置そのまま少し拡大 */
                @media (min-width: 3000px){
                .cta--edge{
                  position: relative;
                  left: 50%;
                  transform: translateX(-50%);
                width: 100vw;
                  margin: 0;
                  padding: 0;
                  height: 0;
                  }
                .cta--edge > .btn{
                  position: absolute;
                  right: var(--edge-right);
                  top: 50%;
                  transform: translateY(-20%);                 /* ← 位置の基準はここだけ */
                }
                .cta--edge > .btn:hover,
                .cta--edge > .btn:focus{
                  transform: translateY(-20%) scale(1.02);     /* ← PCのみ拡大 */
                  box-shadow: 0 8px 20px rgba(0,0,0,.14);
                }
                }


/* ---- Desktop only: みせログ CTA を少し下へ ---- */
@media (min-width: 900px){
  /* 調整用のヘルパークラス */
  .cta-lower{
    bottom: -20px;              /* 好みで 8〜24px くらいに調整 */
  }
}

 #experience{                 /* ← Experience セクション */
    padding-bottom: 50px;      /* 好みで 16–40px くらいに調整 */
  }
   
            @media (max-width: 900px){
               /* モバイルだけ：Experience の下余白を詰める */
                #experience{                 /* ← Experience セクション */
              padding-bottom: 0px;      /* 好みで 16–40px くらいに調整 */
            }

            /* 下端を :after で作っている場合は高さも少し詰める（なければ無視されるので安全） */
            #experience::after{
              height: 10px;              /* こちらも好みで調整 */
            }
              #experience > h2{
                margin-top: clamp(36px, 2.5vw, 18px);
              }
              /* 「実績」の小見出しも追従させたい場合 */
              #experience > .sub{
                margin-top: clamp(32px, 1.2vw, 8px);
              }
   
            /* Experienceの写真ブロックを少し上へ */
              /* h2の直後に入っている <br> を消す */
              #experience h2 + br{ display:none; }

              /* 写真ラッパーの上マージンを軽く詰める（値は好みで微調整） */
              #experience .list-slide{ margin-top: -6px; } /* -6〜-16px くらいで調整 */
            }



            /* Mobile: News の見出しを少し下げる */
            @media (max-width: 900px){
              #news > h2{
                margin-top: clamp(12px, 2.5vw, 18px);
              }
              /* 「」の小見出しも追従させたい場合 */
              #news > .sub{
                margin-top: clamp(8px, 1.2vw, 8px);
              }

            /* モバイルだけ：News の下余白を詰める */
              /* News の見出しを少し下げる */ 
              #news > h2{
                margin-top: clamp(12px, 2.5vw, 18px);
              }
              /* 「」の小見出しも追従させたい場合 */
              #news > .sub{
                margin-top: clamp(8px, 1.2vw, 8px);
              }

              #news{                 /* ← Experience セクション */
                padding-bottom: -40px;      /* 好みで 16–40px くらいに調整 */
              }

              /* 下端を :after で作っている場合は高さも少し詰める（なければ無視されるので安全） */
              #news::after{
                height: 10px;              /* こちらも好みで調整 */
              }

             /* News の CTA をモバイルだけ上へ */
            #news .cta-raise-m{
              position: relative;   /* 通常フローのまま、相対オフセット可能に */
              top: -28px;           /* ↑ 好みで -20〜-48px くらいを微調整 */
            }
          }



/* PCだけ：Experience の CTA を Company と同じ右下基準に揃える */
@media (min-width: 900px){
  #experience,#news{ position: relative; } /* 置き場をつくる */

  #experience .cta--right.cta--edge,
    #news .cta--right.cta--edge{
    position: absolute;
    right: var(--edge-right);                /* Company と同じ右余白 */
    bottom: clamp(84px, 4vw, 106px);       /* Company と同じ下余白（好みで微調整可） */
    left: auto;
    width: auto; height: auto;
    transform: none;                      /* 共通の translate を打消し */
    margin: 0;
  }
  #experience .cta--right.cta--edge > .btn,
  #news .cta--right.cta--edge > .btn{
    position: static;                     /* top:50% 指定を無効化 */
    transform: none;
  }

    #experience .cta--right.cta--edge > .btn:hover,
  #experience .cta--right.cta--edge > .btn:focus{
      transform: scale(1.02);                 /* ← 拡大だけ適用（位置は固定） */
      box-shadow: 0 8px 20px rgba(0,0,0,.14);  /* 影もCompanyに合わせて */
    }

  #news .cta--right.cta--edge > .btn:hover,
  #news .cta--right.cta--edge > .btn:focus{
      transform: scale(1.02);                 /* ← 拡大だけ適用（位置は固定） */
      box-shadow: 0 8px 20px rgba(0,0,0,.14);  /* 影もCompanyに合わせて */
    }
}

  

/*テーブル
--------------------------------------------------------------------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;
	padding: 10px 5px;
	background: #eee;
	margin-bottom: 15px;
}

/*ta1テーブルブロック設定*/
.ta1 {
  border-top: 1px solid #ccc;
  width: 100%;
  margin: 0 auto 30px;
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #ccc;
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 10px 5px;
	word-break: break-all;
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 30%;
	text-align: left;
}


/*背景色パターン
-----------------------------------------------------------------------------------------------------------------------------*/
.bg1 {/*AVシステム.           textl*/
	background: #f7f7f7;
}

.bg3 {/*index.htmlでのexperienceセクション*/
	background: #f7f7f7;
}
    .bg3 h2 {
      color: #000;
    }

    /* 見出しの小さなサブテキスト（span）も白に */
    .bg3 h2 span { color: #777; }

    /* リンク文字も白。必要なら下線を付ける */
    .bg3 a:hover { opacity: .9; }

.bg4 {/*index.htmlでのNews              text r*/
	background: #fff;
}
      /* まずは初期状態（非表示＋ぼかし＋少し下から） */
      .blur {
        opacity: 0;
        filter: blur(12px);
        transform: translateY(12px);
        transition:
          opacity .9s cubic-bezier(.2,.6,.2,1),
          filter  .9s cubic-bezier(.2,.6,.2,1),
          transform .9s cubic-bezier(.2,.6,.2,1);
        will-change: opacity, filter, transform;
      }

      /* 画面内に入ったらこのクラスを付ける */
      .blur.is-show {
        opacity: 1;
        filter: blur(0);
        transform: none;
      }

      /* 子要素を順番に出したいブロック用（任意） */
      .blur-stagger > * {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(10px);
        transition:
          opacity .7s ease,
          filter  .7s ease,
          transform .7s ease;
      }

      /* まとめて is-show が付いたら、子を段階的に表示 */
      .blur-stagger.is-show > * { opacity: 1; filter: blur(0); transform: none; }

      /* 簡易スタガー（6枚想定：必要に応じて増やしてください） */
      .blur-stagger > *:nth-child(1) { transition-delay:  60ms; }
      .blur-stagger > *:nth-child(2) { transition-delay: 120ms; }
      .blur-stagger > *:nth-child(3) { transition-delay: 180ms; }
      .blur-stagger > *:nth-child(4) { transition-delay: 240ms; }
      .blur-stagger > *:nth-child(5) { transition-delay: 300ms; }
      .blur-stagger > *:nth-child(6) { transition-delay: 360ms; }


:root{
  --company-band: #0b63c7;             /* 帯の色 */
  --company-slope-h: 56px;
}

.bg2{/*青帯 index.html会社概要*/
  position: relative;
  background: var(--company-band);     /* ← 帯を #f2f2f2 に戻す */
  padding-top: 160px;
  overflow: visible;
  color:#fff;
}
              @media (min-width: 900px){.bg2{padding-top: 350px;}}

/* 中身を斜めより前面に出す（必要なら） */
.bg2 > *{ position: relative; z-index: 1; }

.bg2 h1,
.bg2 h2,
.bg2 h3,
.bg2 h4,
.bg2 p,
.bg2 li,
.bg2 small,

.bg2 span{
  color:#fff;
}

/* リンクの下線や枠線も白で */
.bg2 a{
  border-color: rgba(255,255,255,.9);
}




/* 例：Company 内側のコンテンツラッパー */
.bg2 .content{
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--pad-pc);
  position: relative;   /* ← これを基準にする */
}

@media (min-width: 900px){
  .bg2 .content .cta--right.cta--edge{
    position: absolute;
    right: var(--pad-pc);
    bottom: clamp(24px, 4vw, 56px);
  }

  #company.bg2 > h1,
  #company.bg2 > p:not(.cta--right){
    transform: translateY(clamp(-34px, 1.2vw, -38px)); /* 少し下へ */
  }
}
            
                  /* === モバイルだけボタンを中央に === */
                  @media (max-width: 899px){

                      /* 帯自体の上下パディングを小さくする（上 ⇒ 下） */
                      .bg2{
                        padding-top: clamp(130px, 5vw, 130px);
                        padding-bottom: clamp(50px, 5vw, 70px);
                      }

                      /* もし h2 直後に <br> が入っていたら、モバイルでは消して余白をさらに圧縮 */
                      .bg2 h2 + br{ display:none; }
                     
                    /* bg2 内のピン留めを解除して通常フローへ */
                    .bg2 .cta--right.cta--edge{
                      position: static;      /* absolute をやめる */
                      right: auto;
                      left:  auto;
                      bottom: auto;
                      transform: none;
                      width: auto;
                      height: auto;
                      display: flex;         /* 中央寄せ用 */
                      justify-content: center;
                      text-align: center;
                      margin: 50px auto 0;   /* 好みで調整 */
                      padding-inline: var(--pad-sp, 16px);
                    }

                    /* ボタン自体も中央に */
                    .bg2 .cta--right.cta--edge > .btn{
                      margin: 0 auto;
                    }

                    /* ボタンの間隔も少しだけ詰める（必要なら） */
                    .bg2 .cta--right,
                    .bg2 .cta--right .btn{
                      margin-top: .6rem;
                    }

                    .bg2 h2{ font-size: 200%; 
                             margin: 0 0 .35em;}          /* Company */
                    .bg2 .sub{ font-size: 60%; 
                              margin: 0 0 .7em; }        /* 「会社概要」などのサブ */
                    .bg2 h3{ font-size: 30%;
                               margin: 0 0 .6em; }          /* 会社名など */
                    .bg2 p { font-size: 100%; line-height: 1.6; margin: 0 0 .7em; }

                    /* 900px 未満：青帯のテキストだけ少し右へ *******************************************************************************/

                    /* H1 と本文だけ右にずらす（ボタンは除外） */
                    #company.bg2 > h1,
                    #company.bg2 > p:not(.cta--right){
                      margin-inline-start: clamp(10px, 2.6vw, 60px); /* ←好みで */
                      transform: translateY(clamp(5px, 1.2vw, 10px)); /* 少し下へ */
                    }

                    /* 見出し h2 は absolute なので left を動かす */
                    #company.bg2 > h2.svc__heading--company{
                      left: clamp(8px, 2.6vw, 20px);
                    }

                    /* ボタンは中央のまま */
                    #company.bg2 > p.cta--right{
                      margin-left: auto;
                      margin-right: auto;
                      text-align: center;        /* 念のため */
                    }
                  } 
          


    @media (min-width: 900px){#company.bg2 > h1,#company.bg2 > p:not(.cta--right){margin-inline-start: 100px; transform: translateY(-250%);   } }
    @media (min-width: 1200px){#company.bg2 > h1,#company.bg2 > p:not(.cta--right){transform: translateY(-220%);   } }
    @media (min-width: 1500px){#company.bg2 > h1,#company.bg2 > p:not(.cta--right){ transform: translateY(-150%);   } }
    @media (min-width: 1800px){#company.bg2 > h1,#company.bg2 > p:not(.cta--right){transform: translateY(-120%);   } }
    @media (min-width: 2100px){ #company.bg2 > h1,#company.bg2 > p:not(.cta--right){transform: translateY(-80%);   } }
    @media (min-width: 2400px){ #company.bg2 > h1,#company.bg2 > p:not(.cta--right){transform: translateY(-30%);  } }
    @media (min-width: 2700px){#company.bg2 > h1,#company.bg2 > p:not(.cta--right){ transform: translateY(20%);   } }
    @media (min-width: 3000px){#company.bg2 > h1,#company.bg2 > p:not(.cta--right){ transform: translateY(20%);   } }

/* 親を配置コンテキストに */
  .bg2 { position: relative; }

/* 青帯内でもこの見出しだけは黒文字に */
  .bg2 .svc__heading--company {
    color: var(--hero-fg, #2f2726);
    text-shadow: none;
    margin-top: clamp(-50px, -26vw, -50px); /* 白い波エリアに少し被せたいとき */
    position: absolute;
    left: 0;                   /* 全幅 */
    right: 0;                  /* ← inset-inline: 0; でもOK */
    top: 0;
    text-align: center;            /* 横は中央揃え */
    z-index: 10;
    pointer-events: none;          /* 見出し上で操作不要なら */
    font-weight: 500;
    font-size: 3em;
    letter-spacing: .05em;
    line-height: 1.1;
  }

  .bg2 .svc__heading--company span{
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: 0;
    color: #777;
    display: block;
    font-size: clamp(12px, 1.1vw, 14px);
    margin-top: .35em;
    opacity: .8;
  }


            /* 画面幅で微調整（必要なら） */
          @media (max-width: 899px) {
            .bg2 .svc__heading--company { transform: translateY(+20%); }
            
            /* 900px 未満のときだけ Company 見出しを大きくする */
             .svc__heading--company{
              /* 好みで数値は調整可。滑らかに拡大させるなら clamp が便利 */
              font-size: clamp(40px, 60vw, 46px);
              line-height: 1.3;
              font-weight: 700;
              line-height: 1.2;
              letter-spacing: .05em;
              text-align: center;
            }
       
          .bg2 h2.svc__heading--company span{
            font-size: clamp(12px, 3.2vw, 12px);
            line-height: 1.2;
            font-weight: 500;
          }
        }

        @media (min-width: 900px) {  .bg2 .svc__heading--company { transform: translateY(-20%); } }
        @media (min-width: 1200px) {.bg2 .svc__heading--company { transform: translateY(-10%); }}
        @media (min-width: 1500px) { .bg2 .svc__heading--company { transform: translateY(10%); } }
        @media (min-width: 1800px) { .bg2 .svc__heading--company { transform: translateY(20%); } }


/* コンテンツは前面へ */
.bg2__content,
.svc__heading--company{ position: relative; z-index: 1; }

/* 青帯セクション */
.bg2{
  position: relative;
  --wave-h: clamp(130px, 12vw, 350px);   /* ←ヒーローと同じ値に */
  background: var(--company-band);
}

/* 白い波（既存） */
.bg2__wave--top{
  position: absolute;
  top: -1px; left: 0; width: 100%;
  height: var(--wave-h);
  z-index: 0;
}
.bg2__wave--top path{ fill:#fff; }


/*PAGE TOP（↑）設定
----------------------------------------------------------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;
	right: 20px;
	bottom: 20px;
	color: #fff;
	font-size: 1.5em;
	background: rgba(0,0,0,0.2);
	width: 60px;
	line-height: 60px;
	border-radius: 50%;
}


/*その他
-----------------------------------------------------------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #ed7d0f !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb30 {margin-bottom: 30px !important;}
.mt30 {margin-top: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee; border: 1px solid #ccc; border-radius: 3px;margin: 2px 0; word-break: break-all;}
.small {font-size: 0.6em; letter-spacing: normal !important;}
.large {font-size: 1.8em !important;}
.block {display: block !important;}
.sh {display: block;}
.pc {display: none;}
.hidden {position: absolute; top: -9999px; left: -9999px;}



/*---------------------------------------------------------------------------
以下画面幅400px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:400px) {

a.btn1, a.btn2 {
	padding: 0px 15px;
}
a.btn1 i, a.btn2 i {
	margin-left: 10px;
}
}

/*---------------------------------------------------------------------------
ここから下は画面幅900px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:900px) {


/*全体の設定
----------------------------------------------------------------------------------------------------------------------------*/
html, body {
	font-size: 15px;
}


/*2カラムブロック
---------------------------------------------------------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.c2 {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-left: -6%;
	margin-right: -6%;
}
/*画像ブロック*/
.c2 .image {
	width: 60%;
}

/*テキストブロック*/
.c2 .text {
	width: 40%;
	padding: 0 3%;
}

/*最初(左)に配置*/
.c2 .l {
	order: -1;
}

/*画像を右側に配置する場合の設定*/
.c2 .image.r {
	overflow: hidden;
	/*margin-right: -6%;	画像を画面枠ギリギリまで移動する*/
	border-radius: 100px 0px 0px 100px;
}

/*画像を左側に配置する場合の設定*/
.c2 .image.l {
	overflow: hidden;
	border-radius: 0px 100px 100px 0px;
}


/*トップページのメイン画像
----------------------------------------------------------------------------------------------------------------------*/
/*テキストブロック*/
#mainimg #text {
	width: 50%;
}


/*menubarブロック設定
-----------------------------------------------------------------------------------------------------------------------*/
/*メニューブロックの設定*/
#menubar {
	font-size: 0.85em;
}
#menubar ul {
	display: flex;
}

/*メニュー１個あたりの設定*/
#menubar a {
	padding: 10px 15px;
}


/*３本バー（ハンバーガー）アイコン設定
--------------------------------------------------------------------------------------------------------------------------*/
/*ハンバーガーメニューを非表示にする*/
#menubar_hdr {display: none;}


/*「お知らせ」ブロック
---------------------------------------------------------------------------------------------------------------------------*/
/*日付(dt)設定*/
#new dt {
	width: 14em;
	display: flex;
	justify-content: space-between;
}

/*日付の横のマーク（共通設定）*/
#new dt span {
	display: inline-block;
	width: 6em;
	background: #999;
	color: #fff;
	font-size: 0.8em;
	text-align: center;
	margin-right: 1em;
	align-self: flex-start;
	line-height: 1.8;
	position: relative;top: 0.4em;
}

#new dt span.icon-bg1 {
	background: #ed7d0f;
}

/*記事(dd)設定*/
#new dd {
	width: calc(100% - 14em);	/*「14em」は上の「#new dt」のwidthの値*/
}


/*フッターメニュー設定
--------------------------------------------------------------------------------------------------------------------------------*/
/*ボックス全体の設定*/
#footermenu {
	font-size: 0.8em;
	padding: 20px 50px;
}


/*listブロック
-------------------------------------------------------------------------------------------------------------------------------*/
/*listブロック全体を囲むブロック*/
.list-container {
	display: flex;
	flex-wrap: wrap;
}

/*１個あたりのボックス設定*/
.list-container .list {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	width: 32%;
	margin-right: 2%;
}

.list-container .list:nth-of-type(3n) {
	margin-right: 0;
}

/*ボックス内のtextブロック*/
.list-container .list .text {
	flex: 1;
}

/*テーブル
----------------------------------------------------------------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	padding: 5px 15px;
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 20px 15px;
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 20%;
}

/*以降順不同*/

.cp_point {
  box-sizing: border-box;
  margin: 40px auto;
  max-width: 800px;
  width: 90%;
  padding: 28px 24px 18px;
  border: 1px dotted #1b2538;
  background-color: #f8fdff;
  border-radius: 8px;
  position: relative;
}

/* タイトルラベル */
.cp_point::before {
  content: attr(title);
  position: absolute;
  top: -14px;
  left: 12px;
  padding: .3em .8em;
  font-size: .9rem;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  background-color: #1b2538;
  border-radius: 4px;
  white-space: nowrap;
}

/* アイコン調整 */
.cp_point li {
  list-style: none;
  position: relative;
  padding-left: 1.2em;
  margin: .3em 0;
}
.cp_point li::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0;
  font-size: .8em;
  color: #1b2538;
}


/*その他
-----------------------------------------------------------------------------------------------------------------------------*/
.ws {width: 48%;display: inline;}
.sh {display: none;}
.pc {display: inline-block;}


}

/*追加*/
form input[type="submit"]{
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;              /* 高さを確実に効かせる */
  align-items: center;
  justify-content: center;

  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 600;
  letter-spacing: .04em;             /* 文字間隔を少し狭めて読みやすく */

  padding: clamp(12px, 1.4vw, 16px)  /* 上下 */
          clamp(28px, 2.6vw, 36px); /* 左右 */
  min-height: 48px;                  /* タッチ目安: 44px以上推奨 */
  min-width: 180px;                  /* 横幅を確保して“ボタン感”を出す */

  border: none;
  border-radius: 9999px;
  background: #0b63c7;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transition: background-color .2s, box-shadow .2s, transform .05s;
}

form input[type="submit"]:hover,
form input[type="submit"]:focus{
  background: #0956ad;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  outline: none;
  transform: translateY(-1px);
}

form input[type="submit"]:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

/* 中央寄せ（既にある場合は不要） */
p.c { text-align: center; }



/*マップ---------------------------------------------------------------------------------------------------------------------*/

.company-grid{
  display: grid;
  grid-template-columns: 1fr;      /* モバイル：1カラム */
  gap: 24px;
}
@media (min-width: 900px){
  .company-grid{ grid-template-columns: 1fr 1fr; align-items: start; } /* PC：2カラム */
}

.company-map{
  aspect-ratio: 16 / 9;            /* 比率維持（対応ブラウザ） */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.company-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* aspect-ratio非対応ブラウザ用フォールバック */
@supports not (aspect-ratio: 1){
  .company-map{ position: relative; padding-top: 56.25%; }
  .company-map iframe{ position: absolute; inset: 0; height: 100%; }
}

.open-map{ margin-top: 6px; font-size: .9rem; text-align: right; }
.open-map a{ color: #0b63c7; text-decoration: underline; }

/*フォントサイズ変え-----------------------------------------------------------------------------------------------------------*/
/* サブキャッチ（小さめ） */
.catch--sub{
  font-size: clamp(16px, 1.8vw, 22px); /* 目安：スマホ16〜PC22px */
  font-weight: 300;                    /* すっきり見せる */
  line-height: 1.9;
  letter-spacing: .06em;
  margin-top: 6px;
  color: #4a4a4a;                      /* 任意：少し薄め */
}

/*青い帯-----------------------------------------------------------------------------------------------------------------------*/
/* フルブリード見出し（画面端まで帯を伸ばす） */
.fullbleed{
  display: block;
  margin: 0px 0 12px;
  padding: 14px 20px;      /* 上下 / 左右の余白 */
  text-align: center;      /* 左寄せにしたいなら left に変更 */
  font-weight: 700;
  line-height: 1.2;
}

.fullbleed--blue{
  background: #0b63c7;
  color: #fff;

  /* ← ここが“左右いっぱい”にするコツ */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

/* 帯の中のリンクなどを白にしたい場合（任意） */
.fullbleed--blue a{ color:#fff; text-decoration: underline; }

/* サービスフォントボールド ---------------------------------------------------------------------------------------------------------*/
/* サービス内容：タイトル太字＋説明細字 */
.svc{ margin: 12px 0; line-height: 1.75; }
.svc strong{
  display: block;
  font-weight: 700;                 /* タイトルは太字（500でもOK） */
  font-size: 1.05rem;               /* 少しだけ大きく（任意） */
}
.svc .desc{
  display: block;
  font-weight: 400;                 /* 説明はデフォルトの太さ */
  color: #666;                      /* 薄めの色で階調を付ける（任意） */
  margin-top: 2px;
}

/*フッター------------------------------------------------------------------------------------------------------------------------*/
.nav{ list-style:none; margin:0; padding:0; display:flex; gap:24px; }
@media(max-width:1000px){.nav{gap:18px;}}
@media(min-width:1200px){.nav{gap:32px;}}
@media(min-width:1500px){.nav{gap:38px;}}
@media(min-width:1800px){.nav{gap:40px;}}
@media(min-width:2100px){.nav{gap:50px;}}
@media(min-width:2700px){.nav{gap:60px;}}
@media(min-width:3000px){.nav{gap:70px;}}



/* 初期は閉じる（そのままでOKなら流用） */
.nav > li{ position: relative; }

/* サブメニュー：縦並び */
.nav .sub{
  position: absolute;
  top: 100%; left: 0;                 /* ヘッダーなら下に開く。フッターなら bottom:100% */
  display: none;                      /* ← 初期は閉じる */
  list-style: none;
  margin: 0; padding: 8px 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);

  /* 横並び指定の“打ち消し”用（念のため） */
  flex-direction: column !important;
}

.nav .sub li{ display: block; }       /* 1行ずつ */
.nav .sub li + li{ border-top: 1px solid #f3f3f3; }

.nav .sub a{
  display: block;                     /* クリック領域を行全体に */
  padding: 10px 14px;
  white-space: nowrap;
}
.nav .sub a:hover{ background:#f6f8fb; }

/* ホバー/フォーカスで開く */
.nav > li:hover > .sub,
.nav > li:focus-within > .sub{
  display: block;
}

/* 親LIを基準にする */
header #menubar nav > ul > li{
  position: relative;
}

/* サブメニュー：初期は絶対に非表示 */
header #menubar nav > ul > li > .sub{
  display: none !important;          /* ← これが効けば出ません */
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  z-index: 1000;
}

/* マウスhover／キーボードfocusで開く */
header #menubar nav > ul > li:hover > .sub,
header #menubar nav > ul > li:focus-within > .sub{
  display: block !important;
}

/* 行ごとに縦並び */
header #menubar nav > ul > li > .sub > li{ display:block; }
header #menubar nav > ul > li > .sub > li > a{
  display:block; padding:10px 14px; white-space:nowrap;
}
header #menubar nav > ul > li > .sub > li > a:hover{ background:#f6f8fb; }

/* サブメニューの文字を左寄せ */
header #menubar nav > ul > li > .sub { text-align: left; }

header #menubar nav > ul > li > .sub > li > a{
  text-align: left;        /* 親の text-align:center を打ち消す */
  padding: 10px 16px;      /* 左側に少し余白（任意） */
}


/*画像小さく----------------------------------------------------------------------------------------------------------------------*/
/* みせログ画像だけ小さく表示 */
img.miselog-logo{
  width: clamp(120px, 20vw, 420px); /* 最小/通常/最大の幅 */
  height: auto;
  display: block;
  margin: 8px auto 24px;           /* 中央寄せ */
}


/******************** Service セクションの下側の空白を消す**************** */
#service.svc--full {
  padding-bottom: 0 !important;  /* ← ここが効きます */
  margin-bottom: 0 !important;   /* 念のため */
}

/* 念のため、次のセクションの頭も詰める */
#experience {
  margin-top: 0 !important;
  /* もし1pxラインが見える場合は微調整 */
  /* margin-top: -1px; */
}


/* ハンバーガーを最前面に */
#menubar_hdr{
  position: fixed;   /* そのままでOK */
  z-index: 2001;     /* header よりも大きく */
  top: 10px; 
  right: 10px;
}

/* 念のため：ヘッダーはその次 */
header{
  z-index: 2000;
}

/* 帯の擬似要素が前に来ないように（既に入っていたら不要） */
.bg2::before,
.bg2::after{
  z-index: 0;
  pointer-events: none;
}

/* ***********************************************===== Service split ===== ************************************************/
:root{
  --svc-w: min(1100px, 92vw);
  --svc-radius: 16px;
  --svc-shadow: 0 8px 30px rgba(0,0,0,.08);
  --svc-gap: clamp(18px, 2.5vw, 32px);
  --svc-pad: clamp(22px, 3.5vw, 40px);
          }

.svc{ padding: clamp(40px, 8vw, 84px) 0; }
.svc__inner{ width: var(--svc-w); margin: 0 auto; }
.svc__heading{
      margin: 0 0 clamp(18px, 3vw, 28px);
     font-family: 'Poppins', 'Noto Sans JP', sans-serif !important;
    font-weight: 500;                 /* Black */
    /* 既存の指定があれば合わせて残す */
    font-size: 3em;
    text-align: center;
    letter-spacing: .05em;            /* Poppins は詰め気味なので少し狭めが綺麗 */
    color: #2f2726; 
    line-height: 1.1;   
}
.svc__heading span{
  display:block;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 400;
  margin-top: .35em;
  opacity: .75;
}


/* === フルブリード（コンテナからはみ出して 100vw にする） === */
.svc--full{
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;          /* ← これで全幅に“はみ出す” */
}

/* 見出し（任意） */
.svc__heading{
    font-family: 'Poppins', 'Noto Sans JP', sans-serif !important;
    font-weight: 500;                 /* Black */
    /* 既存の指定があれば合わせて残す */
    line-height: 1.5;
    font-size: 3em;
    text-align: center;
    letter-spacing: .05em;            /* Poppins は詰め気味なので少し狭めが綺麗 */
    color: #2f2726; 
    line-height: 1.1;   
}
.svc__heading > span{
  font-family: var(--font-sans);    /* 既に変数があるならそれを使う */
  font-weight: 400;
  letter-spacing: 0;
  color: #777;
  display: block;                 /* ← これで改行される */
  font-size: clamp(12px, 1.1vw, 14px);  /* 小さめ */
  margin-top: .35em;              /* 見出しとの間隔 */
  opacity: .8;                    /* 少し弱め（任意） */
}

/* 2 カラム化（900px 以上で左右 50/50） */

.svc__split{ display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }

@media (min-width: 900px){
  .svc__split{
    grid-template-columns: 1fr 1fr;
  }
}

/* 半分のパネル本体 */
.svc__panel{
  display: flex;
  align-items: center;
  min-height: clamp(420px, 40vw, 420px);    /* 高さは好みで */
  padding: clamp(24px, 5vw, 56px);
  color: #0b1b3a;
  text-decoration: none;
  background: #fff;                      /* 初期色（淡いグレー/ブルー） */
  transition: background-color .25s ease, color .25s ease;
}

/* 中身の幅を揃える（左右対称） */
.svc__panelInner{
  width: min(640px, 86%);                   /* 内側は細めに */
  margin-inline: auto;                      /* 真ん中寄せ */
  display:flex;
  flex-direction: column;
  justify-content: center;               /* ← ここで上下センター */
  gap: clamp(10px, 1.2vw, 16px);         /* 見出しと本文の間 */
  min-height: clamp(260px, 36vw, 460px); /* パネルの背の目安（調整可） */
  padding: var(--svc-pad);               /* 既存の余白変数を活かす */
}

/* タイトルと本文 */
.svc__title{
  margin: 0 0 .4em;
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 26px);
}
@media(min-width:1000px){
  .svc__title{font-size: clamp(24px, 3.2vw, 28px);}
}
@media(min-width:1200px){
  .svc__title{font-size: clamp(26px, 3.2vw, 32px);}
}

.svc__text{
  margin: 0 0 1.0em;
  line-height: 1.9;
  font-size: clamp(14px, 1.6vw, 16px);
}

/* CTA（下線のみの細いボタン） */
.svc__cta{
  display: inline-block;
  border-bottom: 2px solid currentColor;
  padding-bottom: .2em;
  font-weight: 700;
}

        /* SP：縦積みのときの余白微調整（任意） */
        @media (max-width: 899px){
          .svc__panel + .svc__panel{
            border-top: 1px solid rgba(0,0,0,.05);
          }
        }

/* まずはデフォルトを“黒”に統一（リンク色も含めて） */
.svc__panel:link,
.svc__panel:visited{
  color:#111;                /* ここが基準色（黒） */
  text-decoration:none;
}

/* 中の要素は panel の色をそのまま継承させる */
.svc__panel .svc__title,
.svc__panel .svc__text,
.svc__panel .svc__cta{
  color:inherit;
  transition:color .25s ease;
}

/* CTA の下線も currentColor で追従させる */
.svc__cta{
  border-bottom:1px solid currentColor;
}

/* ホバー/フォーカス時は“文字を白”に */
.svc__panel:hover,
.svc__panel:focus{
  color:#fff;
}

/* 左右で背景色だけ変える（好みの色に置き換えてください） */
.svc__panel--left:hover,
.svc__panel--left:focus{
  background:#ff8a00;        /* 例：オレンジ */
}
.svc__panel--right:hover,
.svc__panel--right:focus{
  background:#0b63c7;        /* 例：ブルー */
}

/* スムーズに色が切り替わるように */


/* パネルをフレックス化して中身の器（svc__panelInner）を伸ばす */
.svc__panel{ display:flex; }

        /* スマホは高さを欲張らず“少し上め”に見えるように */
          @media (max-width: 899px){
            .svc__split{ grid-template-columns: 1fr; }        /* 1カラム */
            .svc__panelInner{
              min-height: 0;
              padding-block: clamp(20px, 6vw, 32px);
            }
          }

/* もう少しだけ“上に見せたい”時の微調整（任意） */
@media (min-width: 900px){
  :root{ --svc-lift: -10px; }             /* -6〜-14px くらいで好み調整 */
  .svc__panelInner{ transform: translateY(var(--svc-lift)); }
}

/* ▼ <p class="svc"> の段落同士の余白を詰める */
main p.svc{
  margin: 0;              /* グローバルの p マージンを無効化 */
  line-height: 1.75;      /* 読みやすさは維持 */
}

/* 連続する .svc のみ、ほんの少しだけ間を空けたい場合（任意） */
main p.svc + p.svc{
  margin-top: 4px;        /* 0にしたいならこの行ごと削除 */
}

/* 1つの項目内でタイトルと説明の間だけ最小の余白を確保（既存と同様） */
main p.svc .desc{
  display: block;
  margin-top: 2px;
}



/* 見出しブロック全体の下余白を小さく */
#service .svc__heading{
  margin-bottom: 0.75rem;            /* ここを好みで 0.75rem 〜 1.5rem 程度に */
}

/* 見出し内の h2 / サブ見出しの余白も抑える */
#service .svc__heading h2{        /* 「Service」 */
  margin: 0 0 .3rem;
  line-height: 1.05;
}
#service .svc__heading .sub{      /* 「サービス」などの小見出しクラス名に合わせて */
  margin: 0;
}

  /* 最初のカード側で上マージンが付いていたら消す */
  #service .svc__split{              /* カードのラッパー */
  margin-top: 0;
}
#service .svc__panel{              /* カード自体の上マージンがあれば打ち消し */
  margin-top: 0;
}

                    /* === Mobile: Service以降の見出しをCompanyと同じサイズに === */
                    @media (max-width: 499px){
                      /* 見出しの大きい行（英字） */
                      #service .svc__heading,
                      #experience > h2,
                      #news > h2{
                        font-family: 'Poppins','Noto Sans JP',sans-serif;
                        font-weight: 700;
                        font-size: 300%;           /* Company と同じ */
                        line-height: 1.2;
                        letter-spacing: .05em;
                        text-align: center;
                      }
                      /* サブ行（日本語） */
                      #service .svc__heading span,
                      #experience > h2 span,
                      #news > h2 span{
                        font-size: 35%;            /* Company と同じ */
                        opacity: .8;
                      }
                    }

          /* ── Mobile：Service 見出し下の余白を詰める ───────────────── */
          @media (max-width: 900px){
            /* ① h2直後の <br> を消す（HTMLを触らずに詰めたいとき） */
            #service .svc__heading + br,
            #service .svc__heading + br + br{
              display: none;
            }
          }

    /*Service見出し位置*/
    @media(min-width:500px)and (max-width: 799px){ #service .svc__heading,#service .svc__heading>h2{transform:translateY(-15%);} }
    @media(min-width:800px)and (max-width: 899px){ #service .svc__heading,#service .svc__heading>h2{transform:translateY(-30%);} }

   /*Service見出し下余白*/
    @media (min-width: 900px){ #service .svc__heading{ margin-bottom: clamp(25px, 6vw, 30px); }}
    @media (max-width: 900px){ #service .svc__heading{ margin-bottom: clamp(25px, 6vw, 30px); }}


     /* Experience,news 見出しの下の余白を広げる */
    #experience .svc__heading,#news .svc__heading{margin-bottom: clamp(100px, 4vw, 300px);}
    /*Experience見出し、News見出し位置*/
    @media(max-width:449px){#experience .svc__heading,#news .svc__heading{transform:translateY(90%);}}
    @media(min-width:450px){#experience .svc__heading,#news .svc__heading{transform:translateY(100%);}}
    @media(min-width:900px){#experience .svc__heading,#news .svc__heading{transform:translateY(70%);margin-bottom: clamp(10px, 9vw, 80px);}}
    @media(min-width:1200px){#experience .svc__heading,#news .svc__heading{transform:translateY(70%);}}
    @media(min-width:1500px){#experience .svc__heading,#news .svc__heading{transform:translateY(60%);}}
    @media(min-width:1800px){#experience .svc__heading,#news .svc__heading{transform:translateY(60%);}}
    @media(min-width:2100px){#experience .svc__heading,#news .svc__heading{transform:translateY(50%);}}
    @media(min-width:2400px){#experience .svc__heading,#news .svc__heading{transform:translateY(40%);}}
    @media(min-width:2700px){#experience .svc__heading,#news .svc__heading{transform:translateY(0%);margin-bottom: clamp(10px, 9vw, 30px);}}
    @media(min-width:3000px){#experience .svc__heading,#news .svc__heading{transform:translateY(-10%);}}

 
  /* --- signage の CTA を個別に下げる（cta-lower だけに適用） -------- */
        @media (min-width: 900px){.cta--right.cta--edge.cta-lower{margin-top: clamp(10px, 6vw, 20px); }}

          /* 見た目はリンクと同じでOK */
          .nav-parent{
            background:none; border:0; padding:0; font:inherit; color:inherit;
            cursor:default; /* クリック遷移はしない */
          }

          /* ホバー/フォーカスで表示（CSSだけでも可） */
          .has-sub:hover > .sub,
          .has-sub:focus-within > .sub{ display:block; }

          /* hidden を使う場合 */
          .sub[hidden]{ display:none; }

          /* サービスの親ボタンを a と同じ見た目にする */
          header .nav .nav-parent{
            /* ボタンのデフォルト見た目をリセット */
            appearance: none;
            -webkit-appearance: none;
            background: transparent;
            border: 0;
            margin: 0;
            padding: 10px;               /* 既存の #menubar a と合わせる */
            font: inherit;
            font-weight: var(--fw-header);
            color: var(--nav-color);
            line-height: 1.1;
            display: inline-block;
            text-align: center;
            letter-spacing: .02em;
            /* 既存の a と同じ“ちょい上がり”アニメのため */
            transform: translateY(0);
            transition: color .2s ease, transform .2s ease;
            cursor: default;             /* クリックで遷移しないので pointer でなくてもOK */
            font-weight: var(--fw-header);
            letter-spacing: .02em;          /* お好みで */
            font-size: clamp(var(--header-fz-min), 0.9rem + 0.4vw, var(--header-fz-max));
            line-height: 1.1;          /* 文字が大きくなった時の詰まり防止 */
            padding-block: 8px;       /* 必要なら上下の余白も少し増やす */
          }

          /* ホバー時の色・ちょい上がり（a と同じ） */
          @media (hover:hover){
            header .nav .nav-parent:hover{
              color: var(--nav-hover-color);
              transform: translateY(-2px);
            }
            header .nav .nav-parent:active{
              transform: translateY(-1px);
            }
          }


/* 実際のクラス名に合わせて */
@media(min-width:900px){
.cta--right .btn7{
  margin-right: clamp(12px, 2vw, 36px);
}
}

/* 900px 未満：Experience セクションの上側余白を消す */
@media (max-width: 900px){
  #experience{          /* 該当 section に id がある前提 */
    margin-top: 0;
    padding-top: 0;
  }
  /* セクション直下の見出しが margin-top を持っていれば念のため消す */
  #experience h2:first-child{
    margin-top: 0;
  }
}

/* News セクション：ボタンの位置を少し下げる */
#news .cta-raise-m .btn6{
  transform:translateY(60%);
}

@media (max-width: 900px){

  #news .cta-raise-m .btn6{
  transform:translateY(-70%);
}

}

@media (min-width: 900px){
/* Experience セクション：ボタンの位置を少し下げる */
#experience .cta-raise-m .btn5{
  transform:translateY(60%);
}
}

/***************************************CONTACTボタン***************************************/

/* 右上に常時固定の CONTACT ボタン */
.contact-fixed{
  position: fixed;
  top: 0;
  right: 0; /* iOSノッチ対策 */
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 50px;            /* 縦横サイズはお好みで */
  background: #111;              /* 黒ボタン */
  color: #fff;
  font-family: "Poppins","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .15s ease, opacity .15s ease, box-shadow .2s ease;
}
.contact-fixed:hover{ 
  background: #ff7006; 
}
.contact-fixed:active{
  transform: translateY(0);
}
/* 900px 未満で固定 CONTACT を消す */
@media (max-width: 899px) {
  .contact-fixed { 
    display: none !important;   /* アクセシビリティ上もフォーカス不可 */
  }
}
      @media (min-width: 900px) {.contact-fixed { padding: 20px 38px;    }}
      @media (min-width: 1300px) {.contact-fixed {  padding: 20px 50px;   }}
      @media (min-width: 1600px) {.contact-fixed { padding: 20px 50px;   }}
      @media (min-width: 2000px) {.contact-fixed { padding: 20px 55px;    }}
      @media (min-width: 3000px) {.contact-fixed {  padding: 20px 65px;   }}

 /************************** 画面を覆うスプラッシュ *******************************************/
/* 初期状態：見えている */
#splash{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #fff;
  opacity: 1;
  /* ← ここでは transition を使わない。animation に一本化 */
  animation: splashFade 0.3s ease 1s forwards; /* 0.8s 待ってから 1.0s でフェード */
}

/* ロゴの軽い出現（任意） */
#splash img{
  width: min(50vw, 250px);
  height: auto;
  animation: logoPop 1.1s cubic-bezier(.22,.61,.36,1) both;
}

/* フェードアウト（visibility は入れない！） */
@keyframes splashFade{
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes logoPop{
  0%   { transform: translateY(6px) scale(.98); opacity:.6; }
  60%  { transform: translateY(0)   scale(1);   opacity:1;  }
  100% { transform: translateY(0)   scale(1);   opacity:1;  }
}

/* 動きを好まないユーザー向け */
@media (prefers-reduced-motion: reduce){
  #splash{ animation: none; opacity: 0; visibility: hidden; }
  #splash img{ animation: none; }
}

/***********グラデーション*************************************************************************/
.container{max-width:min(1120px, calc(100vw - 48px)); margin-inline:auto}
.section{padding-block: clamp(56px,6vw,96px)}
.section--alt{background:linear-gradient(180deg,#fafbfd, #fff)}
.hr-soft{height:1px;background:linear-gradient(90deg,transparent,#e8edf7,transparent)}

/***************画像横からアニメーション************************************************************/

.image .frame{
  overflow: hidden;
  display: block;
  transition: transform .8s ease, opacity .8s ease; /* ← アニメ用 */
}
.image .frame img{
  display: block;
  width: 100%;
  height: auto;
}

/* 角丸（PC 用） */
.image.r .frame{ border-radius: 28px 0 0 28px; }
.image.l .frame{ border-radius: 0 28px 28px 0; }

        /* モバイルは四隅すべて丸める（今のままでOK） */
        @media (max-width: 900px){
          .image.r .frame,
          .image.l .frame{ border-radius: 28px; }
        }



/* 角丸などは従来通り */

@media (min-width: 901px){
  .image.r .frame{
    opacity: 0;
    transform: translateX(10px);   /* 右から */
    will-change: transform, opacity;
  }
  .image.l .frame{
    opacity: 0;
    transform: translateX(-10px);  /* 左から */
    will-change: transform, opacity;
  }
  .image.is-inview .frame{
    opacity: 1;
    transform: translateX(0);
  }
}


/* ユーザーが動きを好まない場合はアニメ無効化（任意） */
@media (prefers-reduced-motion: reduce){
  .image .frame{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/********************************** 「みせログ」ロゴアニメーション ********************************/
.re-up{
  opacity: 0;
  transform: translateY(28px);
  transition:
    transform .7s cubic-bezier(.22,.61,.36,1),
    opacity  .7s ease;
  will-change: transform, opacity;
}

/* ビューポートに入ったら表示 */
.re-up.is-inview{
  opacity: 1;
  transform: translateY(0);
}

/* 動きを好まないユーザー向け */
@media (prefers-reduced-motion: reduce){
  .re-up{ opacity:1; transform:none; transition:none; }
}

@media(min-width:900px){.miselog-logo{transform: translateY(0px);}}
@media(min-width:1500px){.miselog-logo{transform: translateY(12px);}}
@media(min-width:2000px){.miselog-logo{transform: translateY(20px);}}
@media(min-width:3000px){.miselog-logo{transform: translateY(50px);}}

/**************************************横幅調整***************************************************/


/* 会社概要セクションの横幅制御 */
.company-wrap,.news-wrap,.contact-wrap,.experience-wrap{
  /* ふだんは左右に余白を持たせつつ 100% */
  width: min(100%, 1800px);         /* 上限幅は好みで (例: 1200〜1400px) */
  margin-inline: auto;              /* 中央寄せ */
  padding-top:50px;
}


/* 「幅が1600pxを超えたら固定幅」にする場合の明示的指定 */
@media (min-width: 1600px){
  .company-wrap,.news-wrap,.contact-wrap,.experience-wrap{
    width: 1400px;                  /* 固定幅（好みで変更可） */
    padding-inline: 0;              /* 固定幅なら左右パディングは不要なら0に */
  }
}

        /* Experience（緑の帯）だけ下の余白を小さくする */
        section.experience-wrap{
          padding-bottom: 24px;   /* お好みで */
        }
        /* モバイルはさらに詰める例 */
        @media (max-width: 900px){
          section.experience-wrap{ padding-bottom: 24px; }
        }

/* 会社概要セクションの横幅制御 */
.avsystem-wrap,.signage-wrap{
  /* ふだんは左右に余白を持たせつつ 100% */
  width: min(100%, 1000px);         /* 上限幅は好みで (例: 1200〜1400px) */
  margin-inline: auto;              /* 中央寄せ */
  padding-top:50px;
}

/* 「幅が1600pxを超えたら固定幅」にする場合の明示的指定 */
@media (min-width: 1600px){
.avsystem-wrap,.signage-wrap{
    width: 1000px;                  /* 固定幅（好みで変更可） */
    padding-inline: 0;              /* 固定幅なら左右パディングは不要なら0に */
  }
}



/* 子要素は100%で合わせる（既にそうなっていれば不要） */
.company-wrap .ta1,
.company-wrap .company-map{
  width: 100%;
}

/* 地図の iframe はすでに width:100% 指定があるが、念のため */
.company-wrap .company-map iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/**************************フッター位置修正**************************************************/

/* ページ全体のラッパーが画面高まで伸びるようにする */
html, body { height: 100%; }            /* 念のため */
#divcontainer{
  min-height: 100vh;                   /* ← ここが肝心（100vh でも可）*/
  display: grid;
  grid-template-rows: auto 1fr auto;    /* header / main / footer */
}

/* 念のためのベース */
header { grid-row: 1; }
main   { grid-row: 2; }
footer { grid-row: 3; }

/* フッターのベースは余白ゼロ。黒地は <small> 側で持つ */
footer{
  padding: 0;                 /* ← ここを 0 に */
  background: transparent;    /* ← 黒は small に移動 */
  color: #000;
}

/* フッターメニュー（白い部分）はそのまま全幅で表示 */
#footermenu{
  margin: 0;                  /* 念のため */
  padding: 20px;              /* 既存どおり */
  background:#0b63c7 ;         /*オレ #ff7006/*青   /* 既存どおり */
  font-size: 1.2em;
}

/* 下の黒帯（コピーライト） */
footer > small{
  display: block;             /* 行全体を黒帯に */
  background: #0b63c7;
  color: #fff;
  padding: 14px 20px;         /* 好きな高さに調整 */
  text-align: center;
}

/*********************みせログイラスト位置、サイズ***********************************************/

@media(min-width:900px){
/* 画像はスケールだけ可変にして、位置は親の右端に合わせる */
figure.img > img{
  display: block;
  width: clamp(220px, 70vw, 700px);   /* 好きな可変幅 */
  height: auto;
  /* 万一、入れ物より大きくなるのを防ぐ */
  max-width: 100%;
  object-fit: contain;                 /* SVG でも安全 */
  object-position: right center;       /* 念のため右寄せ */
  /* 量はお好みで。clamp でレスポンシブに */
  margin-right: clamp(8px, 2vw, 40px);
}
}

/* 900px < width < 1000px のときだけ 16blue_orange_2.svg を少し下へ */
@media (min-width: 900px) and (max-width: 1000px){
  /* いずれか一方でOK。transform のほうが他の余白に影響しにくいです */
  figure.img > img{
    /* 下へ 24px 移動（数値はお好みで） */
    transform: translateY(34px);
    /* もし transform を使いたくない場合はこれでもOK */
    /* margin-top: 24px; */
  }
}

/*********************テキストサイズ変更***********************************************/

.signage-wrap .fullbleed,.avsystem-wrap .fullbleed {             /* 「デジタルサイネージ」 */
  font-size: clamp(16px, 2.6vw, 20px);
  line-height: 1.25;
  letter-spacing: .02em;
}

/* 冒頭の説明文（ロゴの上の <p>） */
.signage-wrap p,.avsystem-wrap p {
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.9;
}

/* 機能説明ブロック */
.bg1 .text h2,.bg4 .text h2 {                        /* 「主な機能」 */
  font-size: clamp(26px, 2.8vw, 33px);
  line-height: 1.3;
  margin-bottom: 1.6em;
}
.bg1 .text strong ,.bg4 .text strong {                    /* 小見出し：映像配信/コンテンツ管理… */
  display: block;
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 700;
  margin-top: 1.1em;
}
.bg1 .text .desc,.bg4 .text .desc  {                     /* 説明文 */
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 1.9;
}

/* モバイル時に読みやすく（任意） */
@media (max-width: 900px){
  .signage-wrap h2 ,.avsystem-wrap h2 { font-size: clamp(34px, 6vw, 34px); }
  .signage-wrap .fullbleed,.avsystem-wrap .fullbleed { font-size: clamp(12px, 5vw, 18px); }
  .signage-wrap p,.avsystem-wrap p,
  .bg1 .text .desc ,.bg4 .text .desc{ font-size: clamp(8px, 3.2vw, 16px); }
  .bg1 .text h2 ,.bg4 .text h2{ font-size: clamp(22px, 3.2vw, 26px); }
}

/***************************セクション縦幅揃え******************************************************/
/* PC幅ではセクション高さを一定範囲に固定 */
@media (min-width: 900px){
  .bg1 .c2,
  .bg4 .c2{
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 420px;         /* 下限（好みで） */
    max-height: 920px;         /* 上限（好みで） */
  }

  /* 画像側はボックスいっぱいに張り付けて、はみ出す分はトリミング */
  .image .frame{ height: 100%; }
  .image .frame img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/*************************************右端スクロールバー表示***************************************************/
header{
  position: sticky;   /* fixed の場合も同様 */
  top: 0;
  z-index: 2000;
  width: 100%;        /* ← これに変更（または下の inset を使う） */
  /* あるいは width を消して、左右を 0 に */
  left: 0;
  right: 0;
  box-sizing: border-box;
}

        /* 通常時：右端から 15px（＋セーフエリア） */
        .contact-fixed{
          position: fixed;
          inset-inline-end: calc(env(safe-area-inset-right, 0px) + 15px);
          z-index: 2001;
          /* ここに色/余白/影など既存の見た目 */
        }


/* スクロール不要のページだけ “ほんとの右端” に寄せる */
body.has-no-scroll .contact-fixed{
  inset-inline-end: env(safe-area-inset-right, 0px);
}

/* スクロールバーが出た時だけ 15px 左に寄せる */
:root.has-scrollbar .contact-fixed{
  inset-inline-end: calc(env(safe-area-inset-right, 0px) + 15px);
}


/***************************************************************************************************/
@media (max-width: 899px){
  .c2 .text.l{margin-left: clamp(6px, 30.6vw, 8px);
  margin-right: clamp(6px, 30.6vw, 8px);}
  .c2 .text.r{ margin-left: clamp(6px, 30.6vw, 8px);
   margin-right: clamp(6px, 30.6vw, 8px);}
}

@media (min-width: 900px){
  .c2 .text.l{margin-left: clamp(12px, 10.6vw, 30px);}
  .c2 .text.r{ margin-right: clamp(12px, 10.6vw, 30px);}
}

@media (min-width: 1500px){
  .c2 .text.l{margin-left: clamp(12px, 10.6vw, 50px);}
  .c2 .text.r{ margin-right: clamp(12px, 10.6vw, 30px);}
}

@media (min-width: 2100px){
  .c2 .text.l{margin-left: clamp(12px, 10.6vw, 60px);}
  .c2 .text.r{ margin-right: clamp(12px, 10.6vw, 100px);}
}

@media (min-width: 2700px){
  .c2 .text.l{margin-left: clamp(12px, 10.6vw, 80px);}
  .c2 .text.r{ margin-right: clamp(12px, 10.6vw, 100px);}
}

@media (min-width: 3000px){
  .c2 .text.l{margin-left: clamp(12px, 10.6vw, 100px);}
  .c2 .text.r{ margin-right: clamp(12px, 10.6vw, 100px);}
}
/***************************************************************************************************/

/* 各セクションの先頭の見出しだけ上マージンを 0 に */
              section > h1:first-child,
              section > h2:first-child{
                margin-block-start: 0;
                margin-block-end: 30px;
              }
              /* Service 見出し直下のフルブリード帯だけを上に寄せる */
              section.avsystem-wrap h2.blur + h3.fullbleed,
              section.signage-wrap h2.blur + h3.fullbleed {
                margin-top: -12px;            /* 好みで数値調整。0でも可 */
              }

              /* 画面が広いときは少し多めに詰める例 */
              @media (min-width: 900px){
                section.avsystem-wrap h2.blur + h3.fullbleed,
                section.signage-wrap h2.blur + h3.fullbleed  {
                  margin-top: -18px;
                }
              }

/* Experienceセクションの見出し直下の説明文を上に詰める */
              section.experience-wrap p {
                margin-top: -10px; /* 上に詰める。値は -5px〜-20pxで微調整可 */
              }

              /* 画面幅が広いとき（デスクトップ） */
              @media (min-width: 900px) {
                section.experience-wrap p {
                  margin-top: -15px;
                }
              }

 /***************************************************************************************************/
/* ==== Experience（index.html の .bg3）を“ほぼ固定”高さに ==== */
.bg3{
  /* セクションの基準高さ（小さ過ぎ/大き過ぎを防ぐため clamp） */
  --exp-h: clamp(480px, 420px, 460px);
  min-height: var(--exp-h);

  /* 見出し / スライダー / CTA の3行グリッドに */
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: 16px;
  align-content: start;
}

/* 余白を少しだけタイトに（任意） */
.bg3 .svc__heading{ margin: 8px 0; }

/* スライダー領域は残りの高さにフィットさせ、はみ出しを隠す */
.bg3 .list-slide{
  min-height: 0;          /* グリッド内で縮められるように */
  overflow: hidden;       /* 画像のはみ出し防止 */
}

/* slick のラッパを 100% 高さに */
.bg3 .list-slide .slick-list,
.bg3 .list-slide .slick-track{ height: 100%; }

/* 各スライド（figure）と画像を枠いっぱいにし、トリミング */
.bg3 .list-slide figure{ height: 100%; }
.bg3 .list-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* アスペクト維持しつつ収める（はみ出しはトリミング） */
}


/***********************************************************************************/

/* --- experience.html の各行(.c2)で縦中央揃え --- */
@media (min-width: 900px){
  /* 既存がGridでもFlexでも効くように align-items だけ指定 */
  .c2{
    align-items: center;          /* ← これで行内の .text と .image を縦中央に */
  }
  /* 念のため、要素自身の縦位置も中央に固定（Grid/Flex両対応） */
  .c2 .text,
  .c2 .image{
    align-self: center;
  }

  /* 余白で中央がズレないように段落の上下マージンを詰める（お好みで） */
  .c2 .text > *:first-child{ margin-top: 0; }
  .c2 .text > *:last-child { margin-bottom: 0; }
}
/***********************************************************************************/
/* Experience の画像を「縦固定」にする */
.image .frame{
  height: 520px;              /* 好みの固定高さ */
}

/* 画面が狭い時は少し低く（任意） */
@media (max-width: 900px){
  .image .frame{
    height: 320px;
  }
}

/* 画像は枠いっぱいに収め、はみ出す分はトリミング */
.image .frame img{
  width: 100%;
  height: 100%;               /* ← ここを auto から 100% に */
  object-fit: cover;          /* アスペクト比を維持しつつトリミング */
  object-position: center;    /* 見せたい位置（必要に応じて調整） */
}


/***********************************************************************************/


/* ── footer 3カラムの位置づけ ───────────────────────── */
#footermenu{
  display: flex;                /* 既に指定あり（再掲） */
  align-items: flex-start;      /* 上端を揃える */
  justify-content: flex-start;  /* 両端揃えは解除しておく */
  gap: 24px;                    /* 列間の余白（お好みで） */
}

/* 左：ロゴは固定幅列 */
#footermenu .footer-brand{ flex: 0 0 auto; }
#footermenu .footer-brand img{
  display: block;
  height: 36px;                 /* 見た目サイズは調整可 */
  width: auto;
  margin-left: clamp(50px, 20vw, 80px);  /* ← ここを調整して好みの位置に */
  margin-top:10px;
}

/* 中：メニュー列を“中央”に配置するコツ → 自動マージン */
#footermenu .menu-list{
  flex: 0 0 auto;
  margin-left: auto;            /* 左余白を自動に */
  margin-right: auto;           /* 右余白も自動に → ど真ん中へ */
  text-align: left;
  transform: translateX(100px); /* 数値で微調整：例 12〜48px */
}
@media(min-width:1200px){#footermenu .menu-list{transform: translateX(120px); }}
@media(min-width:1500px){#footermenu .menu-list{transform: translateX(170px); }}
@media(min-width:1800px){#footermenu .menu-list{transform: translateX(200px); }}
@media(min-width:2100px){#footermenu .menu-list{transform: translateX(250px); }}
@media(min-width:2400px){#footermenu .menu-list{transform: translateX(280px); }}
@media(min-width:2700px){#footermenu .menu-list{transform: translateX(300px); }}
@media(min-width:3000px){#footermenu .menu-list{transform: translateX(340px); }}
@media(min-width:3300px){#footermenu .menu-list{transform: translateX(370px); }}

/* 右：サービス列は右側に寄せる（特別指定は不要だが明示） */
#footermenu .service-list{
  flex: 0 0 auto;
  margin-left: 0;
  text-align: left;
  margin-right: 12vw;  /* ← ここを調整して好みの位置に */
}
@media(min-width:1200px){#footermenu .service-list{margin-right: 14vw; }}
@media(min-width:1500px){#footermenu .service-list{margin-right: 16vw; }}
@media(min-width:1800px){#footermenu .service-list{margin-right: 18vw; }}
@media(min-width:2100px){#footermenu .service-list{margin-right: 20vw; }}

/* ── Footer: 左のロゴは下線アニメを出さない ───────────── */
#footermenu .footer-brand a::after { 
  content: none !important;   /* 生成している線を消す */
}

#footermenu .footer-brand a:hover,
#footermenu .footer-brand a:focus-visible{
  color: inherit;              /* 念のため色変化も無効化（画像なので実質影響なし） */
}

/* 900px未満はフッターメニューを非表示 */
@media (max-width: 900px){
  #footermenu{ display: none; }

  /* 余白を少し詰める（お好みで） */
  footer{ padding-top: 16px; padding-bottom: 16px; }
}


/******************************************************************************************/
/* ── footer: SNSアイコンを円形バッジに ─────────────────── */
#footermenu .footer-brand{
  display: flex;
  flex-direction: column;
  gap: 14px;                 /* ロゴとSNSの間 */
}

/* 並び */
#footermenu .footer-brand .footer-socials{
  display: flex;
  gap: 12px;
  margin-left: clamp(50px, 20vw, 80px);
}

/* 円形バッジ本体 */
#footermenu .footer-brand .footer-socials a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;               /* アクセシビリティ的に確保（調整可） */
  height: 33px;
  border-radius: 50%;
  background: #fff;          /* 白い円 */
  border: 1px solid rgba(0,0,0,.08);   /* うっすら輪郭 */
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  color: #111;               /* SVGは currentColor で黒に */
  text-decoration: none;
}

/* SVGサイズと色継承 */
/* ここは fill を外す（残すなら width/height だけ） */
#footermenu .footer-brand .footer-socials a svg{
  display: block;
  width: 56%;
  height: 56%;
  /* fill: currentColor; ← 削除 */
}
/* ホバー演出（反転＆浮き感） */
@media (hover:hover){
  #footermenu .footer-brand .footer-socials a:hover{
    background: #111;
    color: #fff;             /* アイコンが白に反転 */
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,.12);
  }
}

/* フォーカスリング（キーボード操作用） */
#footermenu .footer-brand .footer-socials a:focus-visible{
  outline: 3px solid rgba(0,0,0,.2);
  outline-offset: 2px;
}

/* YouTubeだけ塗り（a に .youtube を付ける） */
#footermenu .footer-brand .footer-socials a.youtube svg path{
  fill: currentColor;
}




/* ── モバイルメニュー下部のSNS（#menubar内） ───────────── */
/* ── モバイルのオーバーレイメニュー最下部にSNSを固定表示 ── */
/* ① オーバーレイの汎用レイアウトからSNS(nav.menu-socials)を除外 */




/* デフォルト/PC幅ではSNSを出さない（レイアウトに影響させない） */
#menubar .menu-socials{
  display: none !important;
}

/* 900px未満かつオーバーレイ表示（.s #menubar.db）時だけ表示＆下部固定 */
@media (max-width: 900px){
  .s #menubar.db{
    /* 下のSNSと被らないよう余白確保 */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  }

  .s #menubar.db .menu-socials{
    display: flex !important;             /* ← ここで初めて表示 */
    /*position: fixed;*/
    left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    justify-content: center;
    gap: 14px;
    z-index: 10000;
  }

  .s #menubar.db .menu-socials a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    color: #111;
    padding: 0; line-height: 1; font-size: 0;
  }
  .s #menubar.db .menu-socials a svg{ display:block; width:56%; height:56%; }
  .s #menubar.db .menu-socials a.instagram svg *{
    fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  }
  .s #menubar.db .menu-socials a.youtube svg path{ fill: currentColor; }
}