/* 
Theme Name: Astra Child
Template: astra 
Version: 1.0 
*/ 

/* =========================
   ★★全ページヘッダー
========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000; /* 他要素より前に出す */
  background: #fff; /* 背景必須（透け防止） */
}

.header-buttons {
  display: flex;
  gap: 10px;
  margin-right: 10px;
}

.header-buttons .btn {
  background: linear-gradient(90deg, #3177C9 0%, #1E518B 100%);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}

.header-buttons .btn:hover  {
  background: linear-gradient(90deg, #FFEE60 0%, #FDB404 100%);
  color: #252525 !important;
}

/* 初期状態 */
.logo-sp{
  display: none;
}

.ast-container{
padding: 0 !important;
}

/* スマホ */
@media (max-width: 768px){

  .logo-pc{
    display: none;
  }

  .logo-sp{
    display: block;
    width: 40px; /* 好きなサイズ */
    height: auto;
  }

}

/* ========================================
   1240px以下
======================================== */
@media (max-width: 1240px){

  /* 右側ボタン群だけ非表示 */
  .ast-header-html-1{
    display: none !important;
  }

  /* ヘッダー余白調整 */
  .ast-primary-header-bar{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .site-primary-header-wrap.ast-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}

/* ========================================
   Astra モバイルヘッダー強制表示
======================================== */
@media (max-width: 1240px){

  #ast-mobile-header{
    display: block !important;
  }

  #ast-desktop-header{
    display: none !important;
  }

}

/* ========================================
   ★★Footer 全体
======================================== */
.site-footer .ast-builder-grid-row{
  align-items: center;
}

#astra-footer-menu {
  display: grid !important;
  grid-template-columns: max-content max-content;
  column-gap: 30px;
  row-gap: 10px;
  justify-content: left;
}

#astra-footer-menu .menu-link,
#astra-footer-menu .menu-link:hover {
  text-decoration: none;
}

/* ========================================
   Footer ロゴサイズ調整
======================================== */
.site-footer .wp-block-image img{
  width: clamp(180px, 20vw, 320px);
  height: auto;
}

/* ========================================
   Footer 余白調整
======================================== */
.site-footer .site-footer-section{
  padding:0 !important;
}

/* ========================================
   PC〜タブレット共通
======================================== */
@media (max-width: 1240px){

  /* フッター全体 */
  .site-footer .ast-builder-grid-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
  }

  /* 左：会社情報 */
  .site-footer .site-footer-primary-section-1{
    flex:0 1 auto;
  }

  /* 中央：メニュー */
  .site-footer .site-footer-primary-section-2{
    flex:0 1 auto;
  }

  /* 右：SNS */
  .site-footer .site-footer-primary-section-3{
    width:100%;
    display:flex;
    justify-content:center;
  }

  /* SNSアイコン横並び維持 */
  .site-footer .ast-social-stack-desktop{
    display:flex;
    flex-wrap:nowrap;
    gap:24px;
    justify-content:center;
  }

  /* SNSを下に落とした時の余白 */
  .site-footer .site-footer-primary-section-3{
    margin-top:0;
  }

  .footer-widget-area[data-section="sidebar-widgets-footer-widget-1"] {
   margin-left: 0 !important; 
}

/* SNSを会社情報の左端に揃える */
.site-footer .site-footer-primary-section-3{
  justify-content:flex-start;
}

.ast-footer-social-1-wrap{
    margin-top: 0;
  }
}

@media (max-width: 768px){
/* ========================================
   スマホ時 メニュー順変更
======================================== */
#astra-footer-menu{
  display:flex !important;
  flex-direction:column;
}

#astra-footer-menu .menu-item:nth-child(1){
  order:1;
}

#astra-footer-menu .menu-item:nth-child(3){
  order:2;
}

#astra-footer-menu .menu-item:nth-child(5){
  order:3;
}

#astra-footer-menu .menu-item:nth-child(2){
  order:4;
}

#astra-footer-menu .menu-item:nth-child(4){
  order:5;
}

#astra-footer-menu .menu-item:nth-child(6){
  order:6;
}
}


/* ========================================
   スマホ
======================================== */
@media (max-width: 544px){
  /* Footer全体 */
  .site-primary-footer-wrap[data-section="section-primary-footer-builder"] 
  .ast-builder-grid-row{
    align-items:center !important;
  }

  /* 各ブロック */
  .site-primary-footer-wrap[data-section="section-primary-footer-builder"] 
  .site-footer-section{
  width:fit-content !important;
}

  .site-footer-primary-section-1 .footer-widget-area,
.site-footer-primary-section-2 .footer-widget-area{
  text-align:left;
}

  .site-primary-footer-inner-wrap{
    display:flex;
    flex-direction:column;
    align-items:center; /* ← 中央寄せ */
    gap:20px;
  }

  /* 全体縦並び */
  .site-footer .ast-builder-grid-row{
  flex-direction:column;
  align-items:center;
  gap:20px;
}

  /* 各ブロック */
  .site-footer .site-footer-primary-section-1,
  .site-footer .site-footer-primary-section-2,
  .site-footer .site-footer-primary-section-3{
    width:fit-content;
    margin:0;
    padding-left:0;
    padding-right:20px;
    box-sizing:border-box;
  }

    /* 中身は左揃え */
  .site-footer-primary-section-1,
  .site-footer-primary-section-2,
  .site-footer-primary-section-3{
    text-align:left;
  }

  /* ← margin-left を消す */
  .site-footer .site-footer-primary-section-1{
    margin-left:0;
  }

  [data-section="section-fb-social-icons-1"] .footer-social-inner-wrap{
    text-align: left;
  }
  
  /* メニュー */
  .site-footer .menu{
    justify-content:flex-start;
  }

  .ast-footer-social-1-wrap{
    margin-left: 0;
  }

  /* SNS左揃え */
  .site-footer .site-footer-primary-section-3{
    display:flex;
    justify-content:flex-start;
  }

  /* reCAPTCHA */
  .site-footer .ast-footer-copyright,
  .site-footer .ast-footer-overlay{
    text-align:center;
    width:100%;
  }
  
  /* ロゴ少し小さめ */
  .site-footer .wp-block-image img{
  width: 180px;
  }

  /* 3ブロック共通 */
  .site-footer-primary-section-1,
  .site-footer-primary-section-2,
  .site-footer-primary-section-3{
    padding-left:20px;
    box-sizing:border-box;
  }

  #astra-footer-menu{
    margin:0;
    padding:0;
  }

  .footer-nav-wrap{
    margin-top:0;
    padding-top:0;
  }

 #astra-footer-menu{
    justify-items:center;
    text-align:center;
  }

/* メニュー全体を中央寄せ */
#astra-footer-menu{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  margin:0;
  padding:0;
}

/* 各メニュー項目 */
#astra-footer-menu .menu-item{
  text-align:center;
  width:100%;
}

/* リンク自体 */
#astra-footer-menu .menu-link{
  display:block;
  text-align:center;
}

}

/* =========================
   ★★共通ページヘッダー
========================= */
.page-header{
    position:relative;
    padding:80px 110px;
    overflow:visible;
    background:rgba(0,0,0,0.3);
    z-index: 10;
}

.page-header-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    z-index: 0;
  }

.page-header-inner{
    max-width:1920px;
    margin:0 auto;
    position:relative;
    z-index: 1;
}

.page-header-image{
  position: absolute;
  z-index: 2;
  inset:auto 0 -5px auto;
}

.page-header-image img{
    width:clamp(200px, 35vw, 250px);
    height:auto;
}

.page-header-content{
    max-width:600px;
}

.page-title{
    font-size:clamp(40px, 5vw, 50px);
    font-family: "Migu 1P", sans-serif;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    margin-bottom:5px;
}

.page-title::first-letter{
    color:#00C2FF;
}

.page-subtitle{
    font-size:clamp(20px, 2.5vw, 25px);
    font-family: "Migu 1P", sans-serif;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    margin-top:0;
}


/* =========================
   タブレット（1024px以下）
========================= */
@media screen and (max-width: 1024px){

  .page-header{
    padding: 60px 40px;
  }

  .page-header-content{
    max-width: 100%;
  }

  .page-header-image img{
    width: clamp(180px, 30vw, 220px);
  }

}

/* =========================
   スマホ（768px以下）
========================= */
@media screen and (max-width: 768px){

  .page-header{
    padding: 40px 20px;
  }

  .page-header-inner{
    display: flex;
    flex-direction: column;
  }

  .page-header-content{
    max-width: 100%;
  }

  .page-header-image img{
    width: 140px;
  }

  .page-title{
    font-size: 28px;
    line-height: 1.3;
  }

  .page-subtitle{
    font-size: 16px;
    line-height: 1.4;
  }

}

/* =========================
   小さいスマホ（480px以下）
========================= */
@media screen and (max-width: 480px){

  .page-header{
    padding: 30px 16px;
  }

  .page-title{
    font-size: 24px;
  }

  .page-subtitle{
    font-size: 14px;
  }

  .page-header-image img{
    width: 130px;
  }

}

/* =========================
   ★★Astra グラデーションボタン統一
========================= */

/* プライマリボタン全体 */
.ast-button{
  background: linear-gradient(90deg, #3177C9 0%, #1E518B 100%);
  color: #fff !important;
  border: none;
  border-radius: 15px;
  font-weight: 700;
  padding: 12px 30px;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s;
}

/* ホバー時のグラデーション */
.ast-button:hover {
  background: linear-gradient(90deg, #FFEE60 0%, #FDB404 100%);
  color: #252525 !important;
}

/* セカンダリ・アウトラインボタン */
.ast-button.ast-button-outline{
  background: transparent;
  border: 2px solid #0073aa;
  color: #0073aa;
  border-radius: 15px;
  padding: 12px 30px;
  font-weight: 700;
  transition: 0.3s;
}

.ast-button.ast-button-outline:hover{
  background: linear-gradient(90deg, #00c2ff 0%, #0073aa 100%);
  color: #252525;
  border-color: transparent;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .ast-button,.ast-button.ast-button-outline{
    width: 100%;
    text-align: center;
    padding: 12px 0;
  }
}

a{
color:#252525;
text-decoration:underline;
}

a:hover{
color:#5481DC;
}

.btn-primary {
  padding: 12px 24px;
  background-color: #000 !important;
  color: #fff !important;
  text-decoration: none !important;
  display: inline-block;
  border: none !important;
}

.btn-primary:hover {
  opacity: 0.8;
}

.btn-secondary {
  padding: 12px 24px;
  border: 1px solid #000 !important;
  color: #000 !important;
  text-decoration: none !important;
  display: inline-block;
  background-color: transparent !important;
}

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

/* =========================
   ★★スマホでだけ改行
========================= */
/* 初期（PCでは非表示） */
.sp-br{
  display: none;
}

/* スマホだけ表示 */
@media screen and (max-width: 768px){
  .sp-br{
    display: inline;
  }
}

/* =========================
   ★★テキスト強調
========================= */
.highlight{
  font-size: 150%;
  line-height:1.5;
}

/* =========================
   ★★背景用白・波
========================= */
.intro {
  background: #F6FCFC;
  padding: 30px 20px 0px; /* ← 下に余白増やす（波の分） */
  overflow: hidden;
}

.main-contents{
  background: #F6FCFC;
  padding:40px 170px;
  overflow: hidden;
}

.wave {
  width: 100%;
  line-height: 0;
}

.wave svg {
  display: block;
  width: 100%;
  height: clamp(60px, 10vw, 100px);
  transform: rotate(180deg);
}

.wave2 {
  width: 100%;
  line-height: 0;
}

.wave2 svg {
  display: block;
  width: 100%;
  height: clamp(60px, 10vw, 100px);
}

@media screen and (max-width: 1024px){

  .main-contents{
    padding: 40px 40px;
  }

}

/* =========================
   スマホ（768px以下）
========================= */
@media screen and (max-width: 768px){

  .main-contents{
    padding: 24px 16px;
  }

}

/* =========================
   小さいスマホ（480px以下）
========================= */
@media screen and (max-width: 480px){

  .main-contents{
    padding: 20px 12px;
  }

}



/* =========================
   ★★画面下部CTA
========================= */
.cta {
  position: relative;
  overflow: hidden;
  background:#395897;
  color: #fff;
  padding: 60px 20px;
  text-align: center;
}

.cta-title {
  color: #fff;
  font-size: 20px;
  margin-bottom: 10px;
}

.cta-text {
  margin-bottom: 20px;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.cta-buttons a {
  text-align: center;
  padding: 12px 24px;
}

/* コンテンツを前面に */
.cta-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

/* 背景画像 */
/* デフォルト：表示（PC想定） */
.cta-bg-image {
  display: block;
  position: absolute;
  top: 50%;
  left:110px;
  transform: translateY(-50%);
  z-index: 1;
}

.cta-bg-image img {
  max-width: 200px;
}

.cta-text p {
  margin-bottom: 10px;
}

.cta-text p:last-child {
  margin-bottom: 0;
}

.button-line{
  display: inline-block;
  padding: 10px 40px !important;;
  border-radius: 30px;
   border: 2px solid #fff;
   color:#fff;
   text-decoration: none !important;;
}

.button-gradient{
  display: inline-block;
  padding: 10px 40px !important;;
  border-radius: 30px;
  background: linear-gradient(90deg, #FFEE60 0%, #FDB404 100%);
  color:#252525;
  text-decoration: none !important;;
}


/* SP・タブレット：非表示 */
@media screen and (max-width: 1360px) {
  .cta-bg-image {
    display: none;
  }

  .cta-buttons {
  display: flex;
  flex-wrap: wrap;   /* ← これがポイント */
  gap: 16px;
}
}


@media screen and (max-width: 768px) {
  .cta-buttons {
    flex-direction: column;
  }
}

/* =========================
   ★★ページ下よくあるご質問
========================= */

.faq-section {
  margin: 0 auto;
  background: #F6FCFC;
  padding: 30px 80px;
}

.faq-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 10px;
  border-bottom: 3px solid #395897;
  padding-bottom: 8px;
}

/* FAQ全体 */
.faq-item {
  margin-bottom: 10px;
  border-bottom: 3px solid #395897;
  padding-bottom: 10px;
}

/* Q / A 共通レイアウト */

.faq-q,
.faq-a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 10px;
  padding-right: 20px; 
  font-weight: normal;
  margin: 0;
}

.faq-a{
  margin-top: 5px;
}

/* ラベル（Q / A） */
.faq-label {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  font-weight: bold;

  position: relative;
  z-index: 1;
}

/* テキスト */
.faq-q p,
.faq-a p {
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Qデザイン */
.faq-q .faq-label {
  background: #BCCFE6;
  color: #252525;
}

/* Aデザイン */
.faq-a .faq-label {
  background: #4b9ddb;
  color: #fff;
}

/* もっと見るボタン周辺 */
.faq-more {
  text-align: center;
  margin-top: 20px;
}

.faq-more-button {
  text-align: center;
  padding: 15px 30px;
  border: none;
  border-radius: 30px; /* 角丸 */
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  background: linear-gradient(90deg, #3177C9 0%, #1E518B 100%);
  color: #fff;
  text-decoration: none;
}

.faq-more-button:hover {
  background: linear-gradient(90deg, #FFEE60 0%, #FDB404 100%);
  color: #252525 !important;
}

/* =========================
   ★★FAQ アコーディオン
========================= */

/* 初期は閉じる */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* 開いた状態 */
.faq-item.active .faq-a {
  max-height: 1000px; /* 内容に応じて調整 or JSで自動化 */
}

/* Qをクリック可能に */
.faq-q {
  cursor: pointer;
}

/* 開いた時の見た目変化（任意） */
.faq-item.active .faq-q {
  font-weight: bold;
}

/* =========================
   ＋ / − アイコン
========================= */

.faq-q {
  position: relative;
  cursor: pointer;
}

/* ＋（初期状態） */
.faq-q::after {
  content: "+";
  position: absolute;
  right: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #395897;
}

/* 開いた時は − */
.faq-item.active .faq-q::after {
  content: "−";
}

/* =========================
   タブレット（768px以下）
========================= */
@media screen and (max-width: 768px) {

  .faq-section {
    padding: 24px 24px;
  }

  .faq-title {
    font-size: 20px;
  }

  .faq-q,
  .faq-a {
    padding-right: 40px; /* ＋アイコン分の余白確保 */
  }

  .faq-label {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    font-size: 14px;
  }

  .faq-q p,
  .faq-a p {
    font-size: 15px;
    line-height: 1.6;
  }

  .faq-q::after {
    font-size: 18px;
    right: 8px;
  }
}

/* =========================
   スマホ（480px以下）
========================= */
@media screen and (max-width: 480px) {

  .faq-section {
    padding: 20px 16px;
  }

  .faq-title {
    font-size: 18px;
  }

  .faq-item {
    padding-bottom: 12px;
  }

  .faq-q,
  .faq-a {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding-right: 36px;
  }

  .faq-label {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    font-size: 13px;
  }

  .faq-q p,
  .faq-a p {
    font-size: 14px;
    line-height: 1.7;
  }

  .faq-q::after {
    font-size: 18px;
    right: 6px;
  }

  .faq-more-button {
    width: 100%;
    padding: 14px 20px;
    font-size: 14px;
  }
}

/* =========================
   ★★アーカイブページ
========================= */
.archive-layout{
position:relative;
padding:40px 170px;
}

.main-contents .archive-layout{
padding: 40px 0;
}

.archive-title{
margin: 10px;
text-align:center;
font-size:25px;
font-weight: 700;
}

.archive-text{
text-align:center;
font-size:15px;
}

.contents{
background:#f6fcfc;
padding:40px 170px;
border-radius: 0.5em;
z-index: 1;
margin:0 30px 30px 30px;
}

.post-type-archive-usecase .contents {
  background: none;
  padding-top: 0;
  padding-bottom: 30px;
}

@media (min-width: 1025px){
.single-download .contents {
  padding:40px 100px;
}
}
/* =========================
   ★FAQ一覧アーカイブページ
========================= */
.faq-archive-page{
  width: 100%;
}

.faq-category-buttons {
  margin: 20px auto;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 50px;
}

.faq-category-button {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #3177C9 0%, #1E518B 100%);
  color: #fff !important;
  border: none;
  border-radius: 30px;
  font-weight: 700;
  padding: 12px 50px 12px 30px;
  text-decoration: none;
  position: relative;
}

.faq-category-button::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #F6FCFC;
  color: #395897;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  font-weight: bold;
}

.faq-category-button:hover {
  background: linear-gradient(90deg, #FFEE60 0%, #FDB404 100%);
  color: #252525 !important;
}

.faq-category-section {
  margin: 10px auto;
  background: #F6FCFC;
  padding: 30px;
  border-radius: 15px;
  position: relative;
}

@media (max-width: 768px){

  .faq-category-buttons{
    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 0 20px;
  }

  .faq-category-button{
    width: 100%;
    text-align: center;
  }

}


/* =========================
   ★資料一覧アーカイブページ
========================= */
.download-archive-page{
    width:100%;
}

.featured-area {
  margin-bottom: 80px;
}

.category-section {
  margin-top: 60px;
}

.category-description-download{
     text-align:center;
     margin-bottom:5px;
}

.category-title{
    position: relative;
    padding-bottom: 10px;
    text-align:center;
    margin-bottom:10px;
    font-size:20px;
}

.category-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  border-radius:3px;
  background: #395897;
  position: absolute;
  left: 0;
  bottom: 0;
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  width: calc(33.33% - 16px); /* 3列で33.33　4列で25％ */
  border:3px solid #BCCFE6;
  border-radius: 16px;
  overflow: hidden;
}

.card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-thumb {
  width: 100%;
  height: 200px; /* 最大の高さ */
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-thumb img {
  max-width: 98%;
  max-height: 98%;
  object-fit: contain;
  box-shadow:0 4px 8px rgba(0,0,0,0.08);
}

.card-title {
  padding: 16px;
  font-size: 16px;
}

.card-download{
  position:relative;
  text-align:right;
  right:20px;
  bottom:0;
}

.category-bulk,
.all-bulk-area {
  margin-top: 20px;
  text-align: center;
}

.bulk-download {
  display: inline-block;
}

.card-button{
     text-align:center;
    margin-bottom:10px;
    border:2px solid #252525;
    padding:12px 32px;
    text-decoration:none;
    border-radius:40px;
}

.all-bulk-area{
    margin-top:60px;
}


/* =========================
   ★活用イメージ一覧アーカイブページ
========================= */
.usecase-archive-page{
    width:100%;
}

.filter-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 12px;
  margin-top: 16px;
}

.filter-buttons button {
  padding: 12px 10px;
  border: none;
  border-radius: 30px; /* 角丸 */
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;

  /* デフォルト（未選択） */
  background: linear-gradient(90deg, #3177C9 0%, #1E518B 100%);
  color: #fff;

  transition: 0.3s;
}

.filter-buttons button.is-active {
  background: linear-gradient(90deg, #FFEE60 0%, #FDB404 100%);
  color: #252525 !important;
}

.filter-buttons button:hover {
  opacity: 0.85;
}

.category-descriptions{
  margin: 15px 0;
}

.usecase-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列固定 */
  gap: 30px;
  margin: 0;
}

.usecase-card {
  width: 100%; /* ← これ重要 */
  background: #F6FCFC;
  padding: 16px;
  border-radius: 8px; /* 角丸 */  
}

.category-description {
   display: none;
}

.category-description.active {
  display: block;
}

.category-description h2{
  font-size: 15px;
}

.category-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);

  /* =======================
     メイン：立体グラデーション
  ======================= */
  background: radial-gradient(
    circle at 30% 35%, /*ここでグラデーションの位置調整*/
    #ffffff 0%,
    var(--main-color) 40%,
    #00000020 100%
  );

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.category-dot::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20%;
  height: 20%;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.5);
  filter: blur(1px);
}

.category-wrap {
  display: flex;
  flex-direction: column; /* ← 縦並び */
  gap: 4px; /* メインとサブの間隔 */
  margin-bottom: 8px;
}

.category-main {
  background: #E6E6E6;
  color: #252525;
  padding: 4px 8px;
  border-radius: 4px;
  font-size:15px;
  display: inline-block;
  width: fit-content;
}

.category-sub {
  font-size: 12px;
  color: #252525;
}

.category-main,
.category-sub {
  display: block;
}


/* デフォルト：ボタン表示 */
.filter-select {
  display: none;
}

/* タブレット */
@media (max-width: 1024px) {
  .usecase-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* スマホ */
@media (max-width: 768px) {
  .usecase-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .filter-buttons {
    display: none;
  }

  .filter-select {
    margin-top: 10px;
    display: block;
    width: 100%;
    height: auto;              /* 固定高さをやめる */
    padding: 10px 12px;        /* 上下に余白を持たせる */
    line-height: 1.5;          /* 行の高さを確保 */
    font-size: 16px;
    box-sizing: border-box;
    background: #f6fcfc;
    border:2px solid #395897;
  }
}

/* モーダル */
/* モーダル全体 */
.modal-content {
  display: flex;
  flex-direction: column;
  height: 80vh; /* 好みで調整 */
}

/* ヘッダー */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 15px 20px;
  border-bottom: 1px solid #ddd;
  background: #fff;

  position: relative;
  z-index: 2;
}

/* タイトル */
.modal-header h2 {
  margin: 0;
  font-size: 20px;
}

/* 閉じるボタン */
.modal-header .close {
  font-size: 24px;
  cursor: pointer;
}

/* コンテンツ */
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* ボタンエリア（固定） */
.modal-actions {
  border-top: 1px solid #ddd;
  background: #fff;
  padding: 15px;

  display: flex;
  justify-content: center;
  gap: 20px;
}

/* 各ボタンブロック */
.modal-action-item {
  text-align: center;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);

  display: flex;
  justify-content: center;   /* ← これが横中央 */
  align-items: flex-start;   /* ← 上寄せ */

  padding-top: 80px;
  overflow-y: auto;
  z-index: 9999; /*最前面に表示*/

  /* アニメーション用 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

/* 表示状態 */
.modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #fff;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  border-radius: 10px;
  max-height: 80vh;
  overflow-y: auto;

  transform: translateY(30px);
  opacity: 0;
  transition: all 0.25s ease;
}

/* 表示時 */
.modal.is-open .modal-content {
  transform: translateY(0);
  opacity: 1;
}

.modal-image img {
  display: block;
  margin: 15px auto;
  width: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.modal-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* 各ブロック */
.modal-action-item {
  text-align: center;
}

/* 一言テキスト */
.modal-action-item .modal-lead {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

/* ボタン共通 */
.modal-action-item a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
  min-width: 160px;
}

@media (max-width: 768px) {
  .modal {
    padding-top: 40px;
  }

  .modal-content {
  width: 80%;
}
}

.close {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}


.usecase-card {
  position: relative;
    display: flex;
  flex-direction: column;
}

.usecase-card button {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: #333;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
  margin-top: auto; /* ← 下に押し込む */
  margin-left: auto;
}

.usecase-card button:hover {
  opacity: 0.8;
}

.usecase-card img {
  display: block; /* ← 余白バグ防止（重要） */
  width: 100%;
  height: auto;

  /* ドロップシャドウ */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);

  /* 下の余白 */
  margin-bottom: 12px;
}



/* =========================
   ★投稿・固定ページ
========================= */
.page-layout{
position:relative;
padding:40px 170px;
}

/* =========================
   ノートパソコン（1360px以下）
========================= */
@media screen and (max-width: 1360px) {
  .contents{
    padding: 40px 40px;
    margin: 0 20px 20px 20px;
  }
}

/* =========================
   タブレット（1024px以下）
========================= */
@media screen and (max-width: 1024px){

  .archive-layout{
    padding: 40px 40px;
  }

  .page-layout{
    padding: 40px 40px;
  }

  .contents{
    padding: 40px 40px;
    margin: 0 20px 20px 20px;
  }

  .card {
    width: calc(50% - 12px); /* 2列 */
  }

}

/* =========================
   スマホ（768px以下）
========================= */
@media screen and (max-width: 768px){

  .archive-layout{
    padding: 24px 16px;
  }

  .page-layout{
    padding: 24px 16px;
  }

  .contents{
    padding: 24px 16px;
    margin: 0 10px 20px 10px;
  }

  .archive-title{
    font-size: 20px;
  }

  .archive-text{
    font-size: 14px;
  }

  .category-title{
    font-size: 18px;
  }

  .card-list {
    gap: 16px;
  }

  .card {
    width: 100%; /* 1列 */
  }

  .card-thumb {
    height: 160px;
  }

  .card-title {
    font-size: 15px;
    padding: 12px;
  }

  .card-download{
    right: 16px;
    font-size: 13px;
  }

  .card-button{
    padding: 10px 24px;
    font-size: 14px;
  }

}

/* =========================
   小さいスマホ（480px以下）
========================= */
@media screen and (max-width: 480px){

  .archive-layout{
    padding: 20px 12px;
  }

  .page-layout{
    padding: 20px 12px;
  }

  .contents{
    padding: 20px 12px;
  }

  .card-thumb {
    height: 140px;
  }

}

/* =========================
   ★お知らせ一覧アーカイブページ
========================= */
.news-archive-page{
  width: 100%;
}

/* タイトル */
.news-list-title{
  text-align: center;
  margin-bottom: 30px;
  font-size: 20px;
}

/* 各行 */
.news-item{
  display: flex;
  align-items: center;
  justify-content: space-between;

  max-width: 800px;
  margin: 0 auto;
  padding: 5px 10px;

  border-bottom: 1px solid #2b6cb0;
  text-decoration: none;
  color: #333;
}

/* 日付 */
.news-item .date{
  width: 120px;
  font-size: 14px;
  color: #666;
}

/* タイトル */
.news-item .title{
  flex: 1;
  padding: 0 20px;
  margin-bottom: 0;
  border-bottom: none;
}

/* 矢印 */
.news-item .arrow{
  font-size: 20px;
  color: #2b6cb0;
  margin-left: auto; 
}

/* ホバー */
.news-item:hover{
  background: rgba(0,0,0,0.03);
}

.news-item a {
  display: flex;
  width: 100%;    
  align-items: center;
  text-decoration: none;
  color: inherit;
}

@media screen and (max-width:768px){

  .news-item{
    align-items:flex-start;
  }

  .news-item .date{
    width: 90px;
    font-size:12px;
  }

  .news-item .title{
    padding:0 10px;
    font-size:14px;
  }

}

/* =========================
  ★お知らせページ
========================= */
.news-page{
  width: 100%;
}

.news-box{
  max-width: 1920px;
  margin: 0 auto;
  margin-bottom: 30px;
  background: #fff;
  padding: 40px;
  border-radius: 10px;
}

.date{
  color: #888;
  font-size: 14px;
}

.title{
  border-bottom: 2px solid #2b6cb0;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.pagination{
  text-align: center;
  margin-top: 40px;
}


/* =========================
   ★資料ダウンロードページ
========================= */
.download-page{
    width:100%;
}

/* ページヘッダーより下の部分*/
.download-layout{
position:relative;
background:#f6fcfc;
padding:40px;
border-radius: 0.5em;
z-index: 1;
margin-bottom:30px;
}

/* 上段 */
.form-top{
margin-bottom:30px;
}

.form-text{
text-align:center;
font-size:15px;
}

.download-form-alltext{
margin-top:-10px;
text-align:center;
font-size:15px;
}

/* 下段 */
.download-bottom{
margin:0 auto;
display:flex;
flex-direction:row;
gap:40px;
align-items:flex-start;
}

/* 左側カラム*/
.download-left{
position:relative;
width:40%;
}

/* 右側カラム*/
.download-right{
width:60%;
}

.download-content{
width:100%;
margin-bottom:10px;
}

/* 資料サムネイル*/
.download-thumbnail{
text-align:center;
margin: 20px;
}

.download-thumbnail img{
width:100%;
height:auto;
border-radius:6px;
box-shadow:0 4px 8px rgba(0,0,0,0.08);
}

/* 資料タイトル */
.download-title {
    font-size: 20px;
    margin-left:20px;
    margin-bottom: 20px;
    font-weight: 700;
    text-align: left;
}

/* 概要ボックス */
.download-summary {
    margin-left:20px;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.8;
    text-align: left;
}

/* CF7入力欄 */
.download-form input,
.download-form textarea,
.download-form select {
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.download-form{
padding:24px;
border-radius:8px;
}

/* 送信ボタン */
.download-form input[type="submit"] {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 14px 24px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
}

.download-form input[type="submit"]:hover {
    background: #005f8d;
}

/* 一覧へ戻る部分 */
.download-return{
  margin-top:20px;
}

.download-return-button{
  padding:12px 32px;
  color:#252525;
  text-decoration:none;
  border-radius:5px;
}

.download-return-button:hover{
  opacity:0.8;
}

@media (max-width:768px){
.download-bottom{
flex-direction:column;
}

.download-left,
.download-right{
width:100%;
}
}

.contact-bottom{
  max-width: 800px;
  margin:0 auto;
}


/* =========================
   ★Thanksダウンロード
========================= */
.thanks-layout{
width:100%;
position:relative;
background:#f6fcfc;
padding:40px;
border-radius: 0.5em;
z-index: 1;
margin-bottom:30px;
}

/* 上段 */
.thanks-top{
margin-bottom:30px;
}

.thanks-title{
text-align:center;
font-size:20px;
}

.thanks-text{
margin-top:-10px;
text-align:center;
font-size:15px;
}

/* ダウンロード案内 */
.thanks-download{
margin-top:30px;
margin-bottom:30px;
text-align:center;
}

/* ボタンエリア */
.thanks-buttons{
margin-top:40px;
display:flex;
flex-wrap:wrap;
gap:16px;
justify-content:center;
}

/* 共通ボタン */
.thanks-bottom{
text-align:center;
padding:12px 32px;
text-decoration:none;
border-radius:5px;
font-size:15px;
transition:0.2s;
}

/* 再ダウンロード */
.thanks-download-button{
background:#0073aa;
color:#fff;
}

.thanks-download-button:hover{
background:#005f8d;
}

/* その他ボタン */
.thanks-secondary-button{
background:#f2f2f2;
color:#252525;
}

.thanks-secondary-button:hover{
opacity:0.8;
}

/* レスポンシブ */
@media (max-width:768px){

.thanks-layout{
padding:30px 20px;
}

.thanks-title{
font-size:20px;
}

.thanks-bottom{
text-align:center;
}
}





/* =========================
   ★Thanksお問い合わせ
========================= */
.contact-page{
  width: 100%;
}


/* =========================
   各ページテキスト
========================= */
.post-title{
margin: 10px;
text-align:center;
font-size:25px;
font-weight: 700;
}

.post-subtitle{
margin: 10px;
text-align:center;
font-size:20px;
font-weight: 700;
}

.post-subtitle2{
margin: 10px;
font-size:20px;
font-weight: 700;
}

.post-text{
text-align:center;
font-size:15px;
}


/* =========================
   ★サービス概要ページ
========================= */
.service-page{
    width:100%;
}

.Features{
  margin: 10px 20px;
  display: flex;
  justify-content: center;
  gap:20px;
}

.service-feature{
background-color: #f6fcfc;
border-radius: 15px;
padding: 20px 10px;
text-align: center;
}

.Point{
  justify-content: center;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 3列 */
  gap: 20px;
  margin: 20px 150px;
}

.service-point{
  padding: 30px 10px 20px 10px;
  text-align: center;
}

.service-point img{
  border:3px solid #1E518B;
  border-radius: 50% 50% 15px 15px;
  padding: 20px;
  max-width: 450px;
  margin-bottom: 5px;
}

.service-content{
  margin-bottom: 30px;
}

.service-flow{
  display: flex;
  margin:0 20px;
  gap:20px;
}

.flow-icon{
  padding: 10px;
  text-align:center;
}

.flow-icon img{
  margin-top:5px;
  max-width: 120px;
  border-radius: 50%;
  background: #F6FCFC;
}

.flow-text{
  margin: 30px 0;
  background: #f6fcfc;
  border-radius: 15px;
  padding:20px;
  flex:1;
}

/* =========================
   レスポンシブ（タブレット・SP）
========================= */
@media screen and (max-width: 768px) {

  /* 特徴（横並び → 縦） */
  .Features {
    flex-direction: column;
    margin: 10px;
  }

  /* ポイント（2列 → 1列） */
  .Point {
    grid-template-columns: 1fr;
    margin: 20px;
  }

  /* 画像サイズ調整 */
  .service-point img {
    max-width: 100%;
  }

  /* フロー（横 → 縦） */
  .service-flow {
    flex-direction: column;
    margin: 0 10px;
  }

  /* アイコン中央寄せ */
  .flow-icon {
    text-align: center;
  }

  /* テキスト余白調整 */
  .flow-text {
    margin: 0;
    padding: 15px;
  }

}


/* ========================================
  ★体験するページ
======================================== */
.experiences-page{
  width: 100%;
}

.tab-panel{
  background: #f6fcfc;
  border-radius: 40px;
  margin-top: 30px;
  padding: 20px 40px;
  display:none;
  width:100%;
  overflow:hidden;
}

.tab-panel.active{
  display:block;
}

/* ========================================
  スライダー
======================================== */
.tab-slider{
  position:relative;
  margin-bottom:40px;
  overflow:hidden;
}

.swiper-slide{
  padding:10px;
  box-sizing:border-box;
}

.swiper-slide img{
  display:block;
  width:100%;
  height:auto;
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* 矢印 */
.swiper-button-prev,
.swiper-button-next{
  width:48px !important;
  height:48px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  top:50%;
  transform:translateY(-50%);
}

.swiper-button-prev{ left:10px; }
.swiper-button-next{ right:10px; }

.swiper-button-prev::after,
.swiper-button-next::after{
  font-size:18px !important;
  font-weight:700;
}

.swiper-pagination{
  margin-top:20px;
}

/* ========================================
  タブ
======================================== */
.tab-nav{
  width:100%;
  text-align:center;
  margin:10px auto;
}

.tab-btn{
  width:30%;
  padding:12px 30px;
  border:none;
  border-radius:15px;
  font-size:20px;
  font-weight:bold;
  cursor:pointer;
  background:linear-gradient(90deg,#3177C9,#1E518B);
  color:#fff;
  transition:.3s;
}

.tab-btn.active{
  background:linear-gradient(90deg,#FFEE60,#FDB404);
  color:#252525 !important;
}

.tab-btn:hover{
  opacity:.85;
}

.tab-logo{
  margin:0 auto;
  max-width:30%;
  min-width: 300px
}

.tab-description{
  text-align:center;
  font-size:15px;
  margin-top:10px;
}

.tab-cta{
  text-align:center;
  margin-top:30px;
  margin-bottom: 20px;
}

.tab-cta-all{
  display: flex;
  gap:20px;
  justify-content: center;
}

/* ========================================
  グリッド
======================================== */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:16px;
}

.feature-item{
  text-align:center;
}

/* ========================================
  体験できること
======================================== */
.feature-list{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:70px;
}

.feature-row{
  display:flex;
  align-items:stretch;
  gap:50px;
}

.feature-row img{
  width:min(42%,460px);
  border-radius:16px;
}

.feature-row p{
  text-align: left;
}

.feature-text{
  flex:1;
  display:flex;
  flex-direction:column;
}

.feature-text p{
  line-height:1.9;
  font-size:16px;
}

#tab2 .post-subtitle{
  text-align: left;
}

/* ========================================
  区切り線
======================================== */
.section-line{
  margin:80px auto;
  border:2px solid #395897;
}

/* ========================================
  操作方法（共通ベース）
======================================== */
.two-col{
  max-width:1100px;
  margin:0 auto 70px;
  display:flex;
  gap:40px;
  align-items:stretch;
}

.col{
  flex:1;
  display:flex;
}

/* ========================================
  操作方法タブ限定（重要）
======================================== */
#tab3 .operation-card{
  border:3px solid #395897;
  border-radius:28px;
  padding:24px;
  background:#fff;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%; /* 高さ統一 */
}

/* --- 移動 --- */
#tab3 .operation-card.move{
  text-align:center;
  align-items:center;
}

#tab3 .operation-card.move > img{
  max-width:360px;
  margin:20px auto;
}

/* --- カメラ --- */
#tab3 .operation-card.camera{
  text-align:left;
}

#tab3 .operation-card .row{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:20px;
}

#tab3 .operation-card .row img{
  width:100%;
  max-width:180px;
  height:auto;
}

#tab3 .operation-card .row.small img{
  width:100px;
}

/* スマートフォン版 操作方法のカメラ説明を中央揃え */
#tab3 .with-center-image .operation-card.camera{
  text-align:center;
}

#tab3 .with-center-image .operation-card.camera p{
  text-align:center;
}
/* ========================================
  中央画像レイアウト（スマホ版操作）
======================================== */
#tab3 .with-center-image{
  position:relative;
}

#tab3 .center-image{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:360px;
  z-index:2;
}

#tab3 .with-center-image .col:first-child{
  padding-right:160px;
}

#tab3 .with-center-image .col:last-child{
  padding-left:160px;
}

#tab3 .with-center-image .operation-card > img{
  width:100%;
  max-width:120px;
  height:auto;
  margin:10px auto;
}

/* ========================================
  クリック移動
======================================== */
#tab3 .click-row{
  max-width:1100px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  gap:40px;
}

#tab3 .click-row img{
  width:40%;
  max-width:350px;
}

#tab3 .click-row p{
  flex:1;
}

/* =========================
   ノートPC・タブレット
========================= */
@media (max-width: 1500px){

  /* 6枚グリッド */
  .feature-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* 横並び説明 */
  .feature-row{
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 10%;
  }

  .feature-row img{
    width: 100%;
    max-width: 500px;
  }

  .feature-text{
    width: 100%;
  }
  
  #tab3 .with-center-image .col:last-child{
  padding:0;
  }

.with-center-image{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:30px;
}

/* 上画像 */
.with-center-image .center-image{
  flex:0 0 100%;
  width:100%;
  text-align:center;

  position:static !important;
  transform:none !important;
  order:0;
}

.with-center-image .center-image img{
  width:100%;
  max-width:320px;
  height:auto;
}

/* 下2カード */
.with-center-image .col{
  flex:0 1 420px;
  max-width:420px;
  padding:0 !important;
}

}

.with-center-image .center-image img{
  width:100%;
  max-width:320px;
  height:auto;
}

/* =========================
   スマホ
========================= */
@media (max-width: 768px){

  .tab-cta-all{
    display: block;
    margin-block: 10px;
  }

  .tab-cta-all a{
    margin-bottom: 10px;
  } 
  /* タブボタン */
  .tab-nav{
    flex-direction: column;
    gap: 12px;
  }

  .tab-btn{
    width: 100%;
    margin-top: 10px;
  }

  /* スライダー */
  .tab-slider{
    width: 100%;
    overflow: hidden;
  }

  .swiper-slide img{
    width: 100%;
    height: auto;
    border-radius: 16px;
  }

  /* 6枚カード */
  .feature-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .feature-item{
    width: 100%;
  }

  .feature-item img{
    width: 100%;
    height: auto;
  }

  /* 横並び説明 */
  .feature-row{
    gap: 20px;
  }

  .feature-row img{
    width: 100%;
  }

  /* 操作説明 */
  .two-col{
    flex-direction: column;
    gap: 24px;
  }

  .two-col .col{
    width: 100%;
  }

  .operation-card{
    padding: 20px;
  }

  .operation-card .row{
    flex-direction: column;
    text-align: center;
  }

  .operation-card .row img{
    width: 100%;
    max-width: 280px;
  }

  /* クリック移動 */
  .click-row{
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .click-row img{
    width: 100%;
    max-width: 320px;
  }

  /* CTA */
  .tab-cta .ast-button{
    width: 100%;
    text-align: center;
  }

  #tab3 .operation-card img{
  max-width:100%;
  height:auto;
}

#tab3 .operation-card.move > img{
  width:100%;
  max-width:260px;
}

#tab3 .with-center-image .operation-card > img{
  max-width:100px;
}

}

@media(max-width:1024px){
  .feature-row{ gap:32px; }
}

@media(max-width:768px){

  .feature-row{
    flex-direction:column;
  }

  .two-col{
    flex-direction:column;
  }

  #tab3 .with-center-image{
  flex-direction:column;
  align-items:center;
  gap:24px;
}

/* 上画像 */
#tab3 .center-image{
  position:static;
  transform:none;
  margin:0 auto;
  width:100%;
  text-align:center;
}

#tab3 .center-image img{
  width:100%;
  max-width:340px;
  height:auto;
}

/* カード */
#tab3 .with-center-image .col{
  width:100%;
  max-width:420px;
  padding:0;
  display:block;
  flex:none;
}

#tab3 .with-center-image{
  gap:16px;
}

#tab3 .with-center-image .operation-card{
  margin:0;
}

#tab3 .operation-card{
  width:100%;
}

  #tab3 .operation-card .row{
    flex-direction:column;
    text-align:center;
  }

  #tab3 .click-row{
    flex-direction:column;
  }

  #tab3 .click-row img{
    width:80%;
  }


#tab3 .with-center-image .operation-card{
  height:auto;
}

  #tab3 .operation-card{
  height:auto;
  min-height:0;
}

#tab3 .with-center-image .operation-card{
  padding:20px;
}

#tab3 .with-center-image .operation-card > img{
  margin:10px auto 5px;
}
#tab3 .with-center-image .operation-card{
  padding:18px;
}
}


/* =========================
   ★TOPページ
========================= */
.kv-video-pc {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.kv-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kv-video .video-sp {
  display: none;
}

@media (max-width: 767px) {
  .kv-video .video-pc {
    display: none;
  }
  .kv-video .video-sp {
    display: block;
    position: relative;
  width: 100%;
  overflow: hidden;
  }
}

.section-intro{
  overflow: hidden;
}

.section-title{
  color: #252525;
  font-size: 25px;
  text-align: center;
  margin-bottom: 10px;
}

.section-text{
  color: #252525;
  font-size: 15px;
  text-align: center;
}


.proposal{
  text-align: center;
  border-bottom: 2px dashed #005f8d;
  padding-bottom: 30px;
  margin-bottom: 40px;
}

.proposal-contents{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

.proposal-title{
  font-size: 18px;
  margin-bottom: 10px;
}


.proposal-block{
  width: 40%;
  background: #F6FCFC;
  border-radius: 40px;
  padding: 20px;
  text-align: center;
  position: relative;
}

.proposal-block p{
  font-size: 15px;
  line-height: 1.8;
}

.proposal-center{
  width: 20%;
}

.proposal-arrow{
  width: 70px;  /* 好きなサイズに */
  height: auto;
}

.proposal-block img{
  width: auto;
  margin-top: 10px;
}

.section-cta{
  margin-top: 15px;
  text-align: center;
}

.section-subtitle{
  margin: 10px 30px;
  font-size: 18px;
  border-bottom: 2px dashed #005f8d;
}

@media screen and (max-width: 768px){
  .proposal-contents{
    flex-direction: column;
  }

  .proposal-block{
    width: 100%;
  }
  .proposal-center{
  width: 100%;
  margin-bottom: 20px;
  }   

  .proposal-arrow{
    transform: rotate(90deg);
  }
}

.top-usecase{
  margin-top: 10px;
  display: flex;
  flex: 1;
  justify-content: center;
  gap: 30px;
}

.top-usecase ul{
  margin: 10px auto;
  max-width: 450px;
  list-style: none;
}

.top-usecase li{
  text-align: left; 
}

.usecase{
  width: calc(33.33% - 16px);
  text-align: center;
  border:3px solid #005f8d;
  border-radius: 40px;
  padding: 20px;
  box-sizing:border-box;
}

.usecase img{
  margin-bottom:16px;
}

.usecase p{
  padding:0 10px;
}

@media screen and (max-width: 768px){
  .top-usecase{
    flex-direction: column;
  }

  .usecase{
    width: 100%;
  }

}

.plan-section {
  padding: 60px 20px;
}

.section-lead {
  text-align: center;
  margin-bottom: 40px;
}

/* =====================
   Plan 共通
===================== */
.plan-block {
  margin-bottom: 30px;
  position: relative;
  padding-top: 30px;
}

.plan-label {
  font-size: 80px;
  font-weight: 800;
  color: #fff;
  line-height: 1;

  display: flex;          /* ← 追加 */
  align-items: center;    /* ← 縦中央揃え */
}

.plan-inner,
.plan-block h3,
.plan-block h4,
.plan-block p,
.plan-cards {
  position: relative;
  z-index: 1;
}

.plan-divider {
  width: 100%;
  height: 3px;
  background: #395897;
  margin:0;
}

.plan-head {
  display: flex;
  align-items: stretch; /* ← ここ重要 */
  gap: 20px;
}

.plan-head-text {
  display: flex;
  flex-direction: column;
  justify-content: center; /* ← 縦中央揃え */
}

.plan-head-text h3,
.plan-head-text p {
  margin: 0;
  font-weight: 700;
}

.plan-head-text h3 {
  font-size: 24px;
}

.plan-head-text p {
  font-size: 18px;
}

/* =====================
   Plan 01
===================== */
.plan-inner {
  display: flex;
  gap: 40px;
  align-items: center;
}

.plan-image img {
  width: 320px;
  border-radius: 10px;
}

.plan-content h3 {
  margin-bottom: 10px;
}

.plan-content h4 {
  font-weight: normal;
  margin-bottom: 20px;
}

.plan-note {
  margin: 20px 0;
}

.plan-body {
  display: flex;
  align-items: stretch; /* ←高さ揃える */
  gap: 40px;
  margin-top: 30px;
}

.plan-image img {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
}

.plan-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.plan-text .ast-button {
  display: inline-block;   /* 重要：横幅いっぱいを解除 */
  width: auto;             /* 念のため上書き */
  padding: 10px 24px;      /* 余白調整 */
  margin: 0 auto;
  text-align: center;
}
/* =====================
   Plan 02
===================== */
.plan-desc {
  text-align: left;
  max-width: 800px;
  margin: 20px auto 40px;
}

.plan-desc {
  margin-bottom: 100px;
}

.plan-cards {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.plan-card {
  background: #fff;
  border-radius: 15px;
  padding: 10px;
  width: 32%;
  position: relative;
  text-align: center;
}

.plan-card img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;

  border: 4px solid #395897;

  position: absolute;
  top: -100px; /* ←半分はみ出す */
  left: 50%;
  transform: translateX(-50%);

  aspect-ratio:1 / 1;
  object-fit:cover;
  flex-shrink:0;
}

.plan-block + .plan-block {
  border-top: 3px solid #395897;
  margin-top: 60px;
  padding-top: 60px;
}

.plan-card a {
  display: inline-block;
  margin-top: 10px;
}

.card-inner {
  background: #fff;
  border-radius: 20px;
  padding: 80px 20px 20px; /* ←上に余白 */
  position: relative;
}

.plan-card p{
  margin-top: 50px;
  margin-bottom: 25px;
}

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

/* ---------- タブレット ---------- */
@media screen and (max-width: 1024px){

  /* Plan見出し */
  .plan-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .plan-label {
    font-size: 60px;
  }

  /* Plan01 横並び → 縦 */
  .plan-body {
    flex-direction: column;
    gap: 20px;
  }

  .plan-image img {
    max-width: 100%;
  }

  /* Plan02 カード */
  .plan-cards {
    gap: 20px;
  }

  .plan-card img {
    width: 160px;
    height: 160px;
    top: -60px;
  }

  .card-inner {
    padding: 70px 15px 20px;
  }
}


/* ---------- スマホ ---------- */
@media screen and (max-width: 768px){

  /* セクション余白 */
  .plan-section {
    padding: 40px 16px;
  }

  /* 見出し */
  .plan-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .plan-label {
    font-size: 48px;
    line-height: 1;
  }

  .plan-head-text h3 {
    font-size: 20px;
  }

  .plan-head-text p {
    font-size: 16px;
  }

  /* Plan01 */
  .plan-body {
    flex-direction: column;
    gap: 20px;
  }

  .plan-text {
    text-align: center;
  }

  /* Plan02説明文 */
  .plan-desc {
    margin-bottom: 60px;
    padding: 0 10px;
  }

  .plan-card {
    width: 100%;
    max-width: 320px;
  }

  .plan-card img {
    width: 140px;
    height: 140px;
    top: -60px;
  }

  .card-inner {
    padding: 60px 15px 20px;
  }

  .plan-card p {
    margin-top: 40px;
  }

}

@media (max-width: 767px){
  /* カード3列 → 1列 */
  .plan-cards {
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }
}

/* ---------- 小さいスマホ ---------- */
@media screen and (max-width: 480px){

  .plan-label {
    font-size: 40px;
  }

  .plan-head-text h3 {
    font-size: 18px;
  }

  .plan-head-text p {
    font-size: 14px;
  }

  .plan-card {
    max-width: 100%;
  }

}

.table-wrap {
  margin: 20px auto;
}

.custom-table {
  border: none;
  width: 100%;
  overflow: hidden;
  font-size: 15px;
}

.custom-table thead th {
  background: #a7a7a7;
  color: #252525;
  padding: 16px;
  text-align: center;
  font-weight: bold;
}

.custom-table thead th:first-child {
  background: transparent;
}

.custom-table tbody th {
  background: #e5e5e5;
  text-align: center;
  padding: 14px 16px;
  font-weight: normal;
  width: 30%;
}

.custom-table td {
  background: #fafafa;
  padding: 14px 16px;
  text-align: center;
}

.custom-table th,
.custom-table td {
  border: none;
  border-bottom: 4px solid #f6fcfc;
  border-right: 4px solid #f6fcfc;
}

.custom-table tr:last-child th,
.custom-table tr:last-child td {
  border-bottom: none;
}

.custom-table thead th:nth-child(2) {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.custom-table thead th:last-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.archive-layout > p {
  text-align: center;
  margin-bottom: 30px;
}

.news-list{
  margin: 0;
}


/* =========================
   ★料金・プランページ
========================= */
.price-page{
  width: 100%;
}

.diagnosis{
  background-color: #f6fcfc;
  border-radius: 30px;
  padding: 40px 20px;
  text-align: center;
  margin: 0 auto;
}

.step{
  display: none;
  text-align: center;
}

/* =========================
   診断選択肢 横並び
========================= */

.step[data-step="1"],
.step[data-step="2"],
.step[data-step="3"],
.step[data-step="4"],
.step[data-step="5"],
.step[data-step="6"]{
  text-align: center;
}

.step[data-step="1"] .answer-card,
.step[data-step="2"] .answer-card,
.step[data-step="3"] .answer-card,
.step[data-step="4"] .answer-card,
.step[data-step="5"] .answer-card,
.step[data-step="6"] .answer-card{
  display: inline-block;
  vertical-align: top;

  width: calc(50% - 24px);
  max-width: 520px;

  margin: 15px 10px;
}

.step-number{
  background-color: #b3d9ff;
  border-radius: 30px;
  width:150px;
}

.step.active{
  display: block;
}

/* 中央カード */
.step > *{
  margin-left: auto;
  margin-right: auto;
}

.step h2{
  font-size: 22px;
  margin-bottom: 20px;
}

.step p{
  margin-bottom: 20px;
  line-height: 1.6;
}

.answer-card{
  width: 100%;
  max-width: 600px;
  margin: 15px auto;
  padding: 0;

  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;

  display: block;
  box-sizing: border-box;
}

.answer-card:hover{
  background: none;
}

.answer-card .card-inner{
  display: flex;
  flex-direction: column; /* ←縦並びに変更 */
  align-items: center;    /* ←中央揃え */
  border: 1px solid #252525;
  border-radius: 12px;
  padding: 15px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.answer-card:hover .card-inner{
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.answer-card .card-inner img{
  width: 70%;
  height: auto;
  border-radius: 8px;
}

.answer-card .card-inner .text{
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  color: #252525;
}

.result{
  display: none;
  padding: 30px;
  border-radius: 16px;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}

.result h2{
  text-align: center;
  margin-bottom: 20px;
}

.result p{
  text-align: center;
  line-height: 1.8;
  font-size: 14px;
}

.result a{
  text-align: center;
  display: inline-block;
  margin-top: 15px;
  margin-right: 20px;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
}

/* リトライ */
.retry-btn{
  background: #eee;
  color: #333;
}

.plan{
  margin-top: 30px;
}

.price-plan{
  background-color: #f6fcfc;
  border-radius: 30px;
  text-align: center;
  padding: 20px;
  max-width: 900px;
  margin: 20px auto;
}

.plan-table{
  position:relative;
  padding-top:40px;
}

.table-wrap{
  overflow-x: auto;
  margin-top: 30px;
  width: 100%;
}

.plan-table .custom-table th,
.plan-table .custom-table td {
  border-bottom: 4px solid #B3D9FF;
  border-right: 4px solid #B3D9FF;
}

.plan-contents{
  border:3px solid #395897;
  border-radius:28px;
  padding:24px;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%; /* 高さ統一 */
  margin: 20px auto;
}

.plan-contents > h3,
.plan-contents > p{
  text-align: center;
}

.plan-contents > h3{
  font-size: 24px;
  margin-bottom: 10px;
}

.plan-contents > p{
  margin-bottom: 40px;
  line-height: 1.7;
}

.plan-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.plan-item{
  background: #B3D9FF;
  border-radius: 16px;
  padding: 20px;
  text-align: center;

  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  box-sizing: border-box;
}

.plan-item img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
  display: block;
}

.plan-item h4{
  min-height: 48px;   /* 2行分くらい確保 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-item p{
  min-height: 60px;
}

#starter-space .plan-item,
#starter-avatar .plan-item,
#starter-function .plan-item {
  background: #f6fcfc;
}

.price-table {
  border: none;
  width: 100%;
  overflow: hidden;
  font-size: 15px;
}

.price-table thead th {
  background: #a7a7a7;
  color: #252525;
  padding: 16px;
  text-align: center;
  font-weight: bold;
}

.price-table thead th:first-child {
  background: transparent;
}

.price-table tbody th {
  background: #e5e5e5;
  text-align: center;
  padding: 14px 16px;
  font-weight: normal;
  width: 20%;
}

.price-table td {
  background: #fafafa;
  padding: 14px 16px;
}

.price-table th,
.price-table td {
  border: 1px solid #395897;
}

.price-table thead th:nth-child(2) {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.price-table thead th:last-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.price-table ul{
  margin: 0;
  list-style: none;
}

/* =========================
   PCのみ 特殊レイアウト
========================= */

@media (min-width: 1025px){

  .plan-grid{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 30px;
    margin: 0 30px;
  }

  /* 上段 */
  .plan-item:nth-child(1){ grid-column: 1 / 3; }
  .plan-item:nth-child(2){ grid-column: 3 / 5; }
  .plan-item:nth-child(3){ grid-column: 5 / 7; }

  /* 下段 */
  .plan-item:nth-child(4){ grid-column: 2 / 4; }
  .plan-item:nth-child(5){ grid-column: 4 / 6; }

}

@media (max-width: 1024px){

  .plan-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 0;
  }

}

@media (max-width: 767px){
.answer-card{
  width: 100%;
  max-width: 100%;
}

.answer-card .card-inner{
  padding: 14px;
}

.answer-card .card-inner img{
  width: 100%;
}

.answer-card .card-inner .text{
  font-size: 16px;
  line-height: 1.6;
}
  .step[data-step="1"] .answer-card,
  .step[data-step="2"] .answer-card,
  .step[data-step="3"] .answer-card,
  .step[data-step="4"] .answer-card,
  .step[data-step="5"] .answer-card,
  .step[data-step="6"] .answer-card{
    width: 100%;
    max-width: 100%;
    margin: 12px 0;
  }

  .card-inner{
    flex-direction: column;
    text-align: center;
  }

  .price-page .card-inner img{
    width: 100%;
  }

  .card-inner .text{
    text-align: center;
  }

  .plan-grid{
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
}

.plan-item{
  padding: 16px;
}

.plan-item h4{
  min-height: auto;
}

.plan-item p{
  min-height: auto;
}
}

/* =========================
   ★利用規約ページ
========================= */
.Terms-page{
  width: 100%;
}

.Terms-page p{
  text-align: left;
}


/* =========================
   ★CTA設定
========================= */
.cta-wrap {
  position: relative;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}

.cta-wrap.is-visible{
  opacity: 1;
  pointer-events: auto;
}

/* footer表示時 */
.cta-wrap.is-hidden-footer{
  opacity: 0;
  pointer-events: none;
}

/* 縦 */
.cta-vertical {
  text-decoration: none;
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #252525;
  font-weight:700;
  color: #fff;
  padding: 20px 15px;
  border-radius: 10px 0 0 10px;
  z-index: 999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

.cta-vertical span{
  writing-mode: vertical-rl;
}

/* 横 */
.cta-horizontal {
  text-decoration: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(90deg, #FFEE60 0%, #FDB404 100%);
  font-weight:700;
  color: #252525;
  padding: 5px 20px;
  border-radius: 999px;
  z-index: 999;
}

.cta-vertical .cta-icon{
  max-width: 25px;
}

.cta-icon{
  max-width: 35px;
}

#ast-scroll-top {
  border-radius: 50%;
  width: 50px;
  height: 50px;

  background-color: #252525;
  color: #fff;

  right: 20px;
  bottom: 100px; /* ← reCAPTCHAと被るならここ調整 */

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
}

#ast-scroll-top .ast-icon.icon-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  line-height: 1;
}

#ast-scroll-top svg {
  display: block;

  width: 20px;
  height: 20px;

  margin: 0;
  padding: 0;
}

.grecaptcha-badge {
  visibility: hidden;
}



@media (max-width: 768px) {
  #astra-footer-menu {
    grid-template-columns: 1fr;
  }

   .cta-wrap{
    right: 10px;
    bottom: 10px;
    gap: 10px;
  }

  /* 縦CTA */
  .cta-vertical{
  width: 48px;
  padding: 10px 4px;
  border-radius: 14px 0 0 14px;

  font-size: 10px;
  line-height: 1.4;
}
  .cta-vertical .cta-icon{
  width: 22px;
  margin-bottom: 4px;
}

  /* 横CTA */
  .cta-horizontal{
  padding: 6px 12px;

  font-size: 11px;
  line-height: 1.1;
  gap: 6px;
}

  .cta-horizontal .cta-icon{
  width: 24px;
  height: auto;
}
}