/*
Theme Name: resposive_site
Description: resposive_site
*/
@import url('/styles/7/get.css');
@import url('/styles/8/get.css');
@import url('/styles/9/get.css');
@import url('/styles/10/get.css');

/* 2025/01/08 */
.koigakubo_link{
  width: fit-content;
  margin: 50px auto 0;
}

.koigakubo_link .koigakubo_link_inner{
  padding: 20px 50px;
  background-color: #fff;
  box-shadow: 5px 5px 10px #666;
  border-radius: 5px;
}

.koigakubo_link .imgwrap{
  text-align: center;
  width: 80%;
  margin: 0 auto;
}

.koigakubo_link .txt{
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.25em;
}

.koigakubo_link .bluetxt{
  color: #3979bd;
}

@media(max-width:1024px){
.koigakubo_link .imgwrap{
  width: 100%;
}

.koigakubo_link .txt{
  font-size: 80%;
}
}

@media(max-width:599px) {
.koigakubo_link .txt{
  font-size: 100%;
}    
}

/* 2025/01/24 */
.pc-scrollable-wrap{
  overflow-x: auto;
}

.stPrice .bArt article table.ver02 th {
    white-space: nowrap;
}

.stPrice .bArt article table.ver02 td {
    white-space: nowrap;
}
/* 2026/03/23 */
.youtube-top {
  width: 60%;
  margin: 30px auto 0;
}

.youtube-top iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

@media(max-width:599px) {
.youtube-top {
  width: 98%;
}    
}

/* 2026/03/23 */
.youtube-top {
  width: 60%;
  margin: 30px auto 0;
}

.youtube-top iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

@media(max-width:599px) {
.youtube-top {
  width: 98%;
}    
}

/*20260602*/
header .bHeader__top__listBtn {
  margin-right: 0px;
  }
  
.header-sns {
  display:flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  list-style: none;
  padding: 0 ;
  margin: 0 0 0 15px;
  align-items: center;
  gap: 10px;
}

div.row ul.header-sns li a.btnLi,
div.row ul.header-sns li a.btnIt {
  background-color: #ffffff;
  border-radius: 5px;
  width: 110px;              
  height: 45px;              
  display: flex ;
  justify-content: center ;
  align-items: center ;
  text-decoration: none ;
  box-sizing:border-box;
}

div.row ul.header-sns li a.btnLi {
    border: 2px solid #43B134;
}

div.row ul.header-sns li a.btnIt {
    border: 2px solid #FF8387;
}

footer .bFooter__sns__list li a.btnLi span:before {
  background: url(/upload/tenant_1/9c19f9c2a1929b56ca2d66ee1d7c24c0.png) no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
    }

.header-sns .btnLi::before {
  content: '';
  background: url(/upload/tenant_1/9c19f9c2a1929b56ca2d66ee1d7c24c0.png) no-repeat;
  background-size: contain;
  width: 15px;
  height: 15px;
  margin-right: 12px
  }

.header-sns .btnIt::before {
  content: '';
  background: url(/import/tenant_1/153.121.39.56/html/wp-content/themes/visoftech_resposive/asset/img/iIt.png) no-repeat;
  background-size: contain;
  width: 15px;
  height: 15px;
  margin-right: 12px
  }
  

footer .bFooter__sns__list li a.btnLi {
  border-color: #43B134;
  }
  
footer .bFooter__sns__list li {
  width: calc(16% - 15px);
  margin: 0 0 0 20px;
  height: 82px;
    }
    
footer .bFooter__sns__list li a.btnLi span:before {
  background: url(/upload/tenant_1/9c19f9c2a1929b56ca2d66ee1d7c24c0.png) no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
    }
    
footer .bFooter__sns__list li a.btnLi span {
  padding-left: 39px;
  }



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

  div.row ul.header-sns {
    transform: scale(0.6) ;          
    transform-origin:center; 
  }
  
  div.row ul.header-sns li a.btnLi {
    border:none;
}

div.row ul.header-sns li a.btnIt {
    border:none;
}

div.row ul.header-sns li a span {
    display: none;
}

div.row ul.header-sns li a.btnLi,
div.row ul.header-sns li a.btnIt {
  width: 60px;              
  height: 60px;  
 }
 
 .header-sns .btnLi::before {
    width: 100%;
    height: 100%;
    margin-right:0; 
 }
 
 .header-sns .btnIt::before {
    width: 100%;
    height: 100%;
    margin-right:0;
}
}


@media only screen and (max-width: 599px) {
footer .bFooter__sns__list li {
    width: calc(30% - 15px);
    margin: 10px 0 0 20px;
    height: 82px;
}
}

/* 2026/06/11 */

.bgi-transparent{
  background-color: transparent;
}

.item .ta-c{
  text-align: center;
}

.item .fz-14{
  font-size: 14px;
}

.item .ta-c{
  text-align: center;
}

.item .mb-10{
  margin-bottom: 10px;
}

.item .c-red{
  color: red;
}

/*20260602*/
header .bHeader__top__listBtn {
  margin-right: 0px;
}

.header-sns {
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
  align-items: center;
  gap: 10px;
}

div.row ul.header-sns li a.btnLi,
div.row ul.header-sns li a.btnIt {
  border-radius: 5px;
  width: 110px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* LINE */
div.row ul.header-sns li a.btnLi {
  color: #ffffff;
  border: none;
  background: #1cc62d;
}

/* LINE 光沢感 */
div.row ul.header-sns li a.btnLi::after {
  content: '';
  position: absolute;
  top: -25px;
  left: -20px;
  width: 80px;
  height: 80px;
  /* background: radial-gradient(
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.18) 35%,
    rgba(255, 255, 255, 0) 70%
  ); */
  z-index: 1;
}

/* Instagram */
div.row ul.header-sns li a.btnIt {
  color: #ffffff;
  border: none;
  background: -webkit-linear-gradient(135deg, #405DE6 0%, #833AB4 35%, #E1306C 65%, #FD1D1D 100%) no-repeat;
  background: linear-gradient(135deg, #405DE6 0%, #833AB4 35%, #E1306C 65%, #FD1D1D 100%) no-repeat;
}

/* Instagram 黄色〜オレンジの重ねグラデーション */
div.row ul.header-sns li a.btnIt::after {
  content: '';
  position: absolute;
  top: 18px;
  left: -20px;
  width: 75px;
  height: 75px;
  background: -webkit-radial-gradient(
    #FFDC80 0%,
    #FCAF45 35%,
    rgba(253, 29, 29, 0.75) 60%,
    rgba(225, 48, 108, 0) 75%
  );
  background: radial-gradient(
    #FFDC80 0%,
    #FCAF45 35%,
    rgba(253, 29, 29, 0.75) 60%,
    rgba(225, 48, 108, 0) 75%
  );
  z-index: 1;
}

/* 文字とアイコンを前面に */
div.row ul.header-sns li a.btnLi,
div.row ul.header-sns li a.btnIt,
div.row ul.header-sns li a.btnLi::before,
div.row ul.header-sns li a.btnIt::before {
  position: relative;
  z-index: 2;
}

/* hover */
div.row ul.header-sns li a.btnLi:hover,
div.row ul.header-sns li a.btnIt:hover {
  opacity: 0.85;
  transition: .5s;
}

/* footer LINE */
footer .bFooter__sns__list li a.btnLi span:before {
  background: url(/upload/tenant_1/1f5ba6228739f5cfc3ac32a39077a12c.png) no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
}

/* header LINE icon */
.header-sns .btnLi::before {
  content: '';
  background: url(/upload/tenant_1/1f5ba6228739f5cfc3ac32a39077a12c.png) no-repeat;
  background-size: contain;
  width: 15px;
  height: 15px;
  margin-right: 12px;
}

/* header Instagram icon */
.header-sns .btnIt::before {
  content: '';
  background: url(/upload/tenant_1/e7989b4361072867eaa35c1917397a5a.png) no-repeat;
  background-size: contain;
  width: 15px;
  height: 15px;
  margin-right: 12px;
}

.header-sns .btnIt span{
  font-weight: bold;
  z-index: 11;
}

.header-sns .btnLi span{
  font-weight: bold;
  z-index: 11;
}


.header-sns.pc-none{
  display: none;
}

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

.header-sns.pc-none{
  display: flex;
} 

.header-sns.sp-none{
  display: none;
}

/*20260602*/
header .bHeader__top__listBtn {
  margin-right: 0px;
  }
  
.header-sns {
  display:flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  list-style: none;
  padding: 0 ;
  margin: 0 0 0 15px;
  align-items: center;
  gap: 10px;
}

div.row ul.header-sns li a.btnLi,
div.row ul.header-sns li a.btnIt {
  background-color: #ffffff;
  border-radius: 5px;
  width: 110px;              
  height: 45px;              
  display: flex ;
  justify-content: center ;
  align-items: center ;
  text-decoration: none ;
  box-sizing:border-box;
}

div.row ul.header-sns li a.btnLi {
    border: 2px solid #43B134;
}

div.row ul.header-sns li a.btnIt {
    border: 2px solid #FF8387;
}

footer .bFooter__sns__list li a.btnLi span:before {
  background: url(/upload/tenant_1/9c19f9c2a1929b56ca2d66ee1d7c24c0.png) no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
    }

.header-sns .btnLi::before {
  content: '';
  background: url(/upload/tenant_1/9c19f9c2a1929b56ca2d66ee1d7c24c0.png) no-repeat;
  background-size: contain;
  width: 15px;
  height: 15px;
  margin-right: 12px
  }

.header-sns .btnIt::before {
  content: '';
  background: url(/import/tenant_1/153.121.39.56/html/wp-content/themes/visoftech_resposive/asset/img/iIt.png) no-repeat;
  background-size: contain;
  width: 15px;
  height: 15px;
  margin-right: 12px
  }
  
    div.row ul.header-sns {
    transform: scale(0.6) ;          
    transform-origin:center; 
  }
  
  div.row ul.header-sns li a.btnLi {
    border:none;
}

div.row ul.header-sns li a.btnIt {
    border:none;
}

div.row ul.header-sns li a span {
    display: none;
}

div.row ul.header-sns li a.btnLi,
div.row ul.header-sns li a.btnIt {
  width: 60px;              
  height: 60px;  
 }
 
 .header-sns .btnLi::before {
    width: 100%;
    height: 100%;
    margin-right:0; 
 }
 
 .header-sns .btnIt::before {
    width: 100%;
    height: 100%;
    margin-right:0;
}

div.row ul.header-sns li a.btnIt{
  background: transparent !Important;
}

div.row ul.header-sns li a.btnIt::after{
  background: none !Important;
}
}




/* ===========================================
   2026/06/12 フッター電話強化 ＋ 電話フロート
   =========================================== */

/* --- ① フッター文字拡大＆電話強調 --- */
footer .bFooter__ft__top .navFt li a {
  font-size: 16px;
  line-height: 1.9;
}

footer .bFooter__ft__top .tel a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

footer .bFooter__ft__top .tel-foot__ic {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  /* fill="currentColor" で文字色＝白を継承 */
}

/* --- ② 電話フロートボタン（PC用） --- */
.floating-tel {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 9998;
}

.floating-tel__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  background: #1a96d5;            /* ネイビー。ブランド色に合わせ調整可 */
  border-radius: 50px;
  box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.25);
  color: #fff;                    /* 文字＆SVGアイコン色 */
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.floating-tel__link:hover {
  transform: translateY(-3px);
  box-shadow: 4px 8px 18px rgba(0, 0, 0, 0.3);
  color: #fff;
}

.floating-tel__ic {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.floating-tel__body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.floating-tel__label {
  font-size: 12px;
  letter-spacing: 0.02em;
}

.floating-tel__num {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* --- ブレイクポイント --- */
@media only screen and (max-width: 1024px) {
  footer .bFooter__ft__top .navFt li a { font-size: 15px; }
  footer .bFooter__ft__top .tel a      { font-size: 22px; }

  /* SP固定バーがあるためフロートは非表示 */
  .floating-tel { display: none; }
}

@media only screen and (max-width: 599px) {
  footer .bFooter__ft__top .navFt li a { font-size: 14px; }
  footer .bFooter__ft__top .tel a      { font-size: 20px; }

  .floating-tel { display: none; }
}

/* ===========================================
   2026/06/12 PC閲覧時のみの調整（1025px以上限定）
   ・フッター文字拡大＆電話強調
   ・右下フロートCTA（無料体験/資料請求/料金表/LINE）
   SP・タブレットには一切影響しない
   =========================================== */
@media only screen and (min-width: 1025px) {

  /* --- ① フッター文字拡大＆電話強調 --- */
  footer .bFooter__ft__top .navFt li a {
    font-size: 16px;
    line-height: 1.9;
  }

  footer .bFooter__ft__top .tel a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
  }

  footer .bFooter__ft__top .tel-foot__ic {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }

  /* --- ② 右下フロートCTA --- */
  .pc-fix-cta {
    position: fixed;
    right: 20px;
    bottom: 150px;          /* totop回避 */
    z-index: 9997;          /* totopより低く */
  }

  .pc-fix-cta ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* 登場アニメ（スタガー） */
  .pc-fix-cta li {
    opacity: 0;
    animation: ctaIn 0.5s ease forwards;
  }
  .pc-fix-cta li:nth-child(1) { animation-delay: 0.05s; }
  .pc-fix-cta li:nth-child(2) { animation-delay: 0.15s; }
  .pc-fix-cta li:nth-child(3) { animation-delay: 0.25s; }
  .pc-fix-cta li:nth-child(4) { animation-delay: 0.35s; }

  /* ボタン共通（アイコン＋文字 横並び・均一サイズ） */
  .pc-fix-cta a {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 190px;
    min-height: 56px;
    padding: 12px 18px;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .pc-fix-cta a:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
  }

  .pc-fix-cta a svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  /* サイト配色（機能別） */
  .pc-fix-cta .contact-link a  { background: #ee7800; }  /* オレンジ */
  .pc-fix-cta .document-link a { background: #43b134; }  /* 緑 */
  .pc-fix-cta .price-link a    { background: #1a96d4; }  /* ブルー */

  /* LINE：白地＋緑枠（原色フィル回避） */
  .pc-fix-cta .line-link a {
    background: #fff;
    color: #06c755;
    border: 2px solid #06c755;
  }

  /* ABテスト2バリアントを同一セルに重ねて二重表示を解消（AB制御は維持） */
  .pc-fix-cta .contact-link > div[data-ab-test-block] {
    display: grid;
  }
  .pc-fix-cta .contact-link [data-ab-test-contents] {
    grid-area: 1 / 1;
    margin: 0;
    padding: 0;
  }
  .pc-fix-cta .contact-link [data-ab-test-contents]:first-child {
    position: relative;
    z-index: 1;
  }
}

/* --- 1024以下：フロートCTAを完全非表示（SPは従来のsp-fix-btnのまま） --- */
@media only screen and (max-width: 1024px) {
  .pc-fix-cta { display: none; }
}

@media only screen and (max-width: 599px) {
  .pc-fix-cta { display: none; }
}

/* keyframesはメディアクエリ外でOK（参照されなければ無影響） */
@keyframes ctaIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media screen and (min-width:600px) {
.sp-fix-btn{
  display: none !Important;
} 
}

/* ===========================================
   2026/06/12 週刊地域教育工房 LINEバナー
   =========================================== */
.line-banner {
  width: min(720px, 94%);
  margin: 40px auto 0;
}

.line-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 36px 48px;
  background: #06c755;
  border-radius: 6px;
  box-shadow: 5px 5px 10px #666;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.line-banner__inner:hover {
  transform: translateY(-3px);
  box-shadow: 5px 8px 14px #666;
}

/* 左側テキストブロック */
.line-banner__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

/* 「＼ 友だちになってね！ ／」 */
.line-banner__catch {
  position: relative;
  padding: 0 28px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.line-banner__catch::before,
.line-banner__catch::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 2px;
  height: 20px;
  background: #fff;
  border-radius: 2px;
}
.line-banner__catch::before {
  left: 8px;
  transform: translateY(-50%) rotate(-30deg);
}
.line-banner__catch::after {
  right: 8px;
  transform: translateY(-50%) rotate(30deg);
}

/* メイン「週刊 地域教育工房」 */
.line-banner__main {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.04em;
}
.line-banner__main em {
  display: block;
  font-style: normal;
  font-size: 34px;
}

.line-banner__sub {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* 黄色ピルボタン */
.line-banner__btn {
  margin-top: 6px;
  padding: 10px 28px;
  border-radius: 50px;
  background: #ffe200;
  color: #06a04a;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* QRコード */
.line-banner__qr {
  flex-shrink: 0;
  padding: 10px;
  background: #fff;
  border-radius: 6px;
}
.line-banner__qr img {
  display: block;
  width: 160px;
  height: 160px;
}

@media only screen and (max-width: 1024px) {
  .line-banner__inner { padding: 28px 32px; gap: 20px; }
  .line-banner__main { font-size: 32px; }
  .line-banner__main em { font-size: 27px; }
  .line-banner__sub { font-size: 18px; }
  .line-banner__qr img { width: 130px; height: 130px; }
}

@media only screen and (max-width: 599px) {
  .line-banner__inner {
    flex-direction: column;
    padding: 24px 18px;
  }
  .line-banner__catch { font-size: 15px; }
  .line-banner__main { font-size: 26px; }
  .line-banner__main em { font-size: 22px; }
  .line-banner__sub { font-size: 16px; }
  .line-banner__btn { font-size: 14px; }
  /* SPはタップ誘導が主役なのでQRは小さめ（不要なら display:none に） */
  .line-banner__qr img { width: 110px; height: 110px; }
}

/* ===========================================
   2026/06/12 オンライン保護者会 動画ブロック
   =========================================== */
.hogosya-movie {
  width: 60%;
  margin: 50px auto 0;
  text-align: center;
}

.hogosya-movie__ttl {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 既存 .youtube-top と同じレスポンシブ動画 */
.hogosya-movie__video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.hogosya-movie__lead {
  margin-top: 18px;
  font-size: 15px;
  color: #555;
}

.hogosya-movie__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 36px;
  border-radius: 50px;
  background: #e62117;          /* YouTube連想の赤。サイト基調に寄せるなら #1a96d4 */
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hogosya-movie__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
}

.hogosya-movie__btn svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media only screen and (max-width: 1024px) {
  .hogosya-movie {
    width: 80%;
  }
  .hogosya-movie__ttl { font-size: 18px; }
}

@media only screen and (max-width: 599px) {
  .hogosya-movie {
    width: 98%;
  }
  .hogosya-movie__ttl { font-size: 16px; }
  .hogosya-movie__lead { font-size: 13px; }
  .hogosya-movie__btn {
    width: 90%;
    font-size: 14px;
    padding: 13px 20px;
  }
}