/*
Template:ystandard
Theme Name:ystandard-child
Theme URI: https://wp-ystandard.com
Author: yosiakatsuki
Author URI: https://yosiakatsuki.net
Description:「自分色に染めた、自分だけのサイトを作る楽しさ」を感じてもらうために作った一風変わったWordPressテーマ「ystandard」の子テーマ
Version: 4.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*==============================
共通パーツ
==============================*/
p {
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt" 1;
}

.text__pc-left__sp-left {
  text-align: left;
  margin: 30px 0;
}

@media screen and (max-width: 500px) {
  .text__pc-left__sp-left {
    text-align: left;
    margin: 30px auto;
  }
}

.black-text {
  color: #555555;
}

/*==============================
見出し
==============================*/
.entry-content h1 {
  font-weight: 800 !important;
}

.entry-content h2 {
  font-weight: 800 !important;
}

.entry-content h3 {
  font-weight: 700 !important;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-weight: 600 !important;
}

/*==============================
ボタン
==============================*/

.blue-btn .wp-block-button__link:hover {
  background-color: #2670c5 !important;
}

.orange-btn .wp-block-button__link:hover {
  background-color: #ffa641 !important;
}

.btn__pc-left__sp-center {
  text-align: left;
  margin: 30px 0;
}

@media screen and (max-width: 500px) {
  .btn__pc-left__sp-center {
    text-align: center;
    margin: 15px auto;
  }
}

.wp-block-button__link {
  padding: 0.8em 1em !important;
}

@media screen and (max-width: 500px) {
  .wp-block-button__link {
    padding: 1em 1.4em !important;
  }
}

/*==============================
サイト幅&マージン
==============================*/

/*グローバルメニュー
---------------------------------*/
.container {
  max-width: calc(var(--ystd-container-width) + var(--ystd-container-gutter) * 5);
}

@media (min-width: 1024px) {
  .content__main {
    max-width: var(--ystd-content-default-width);
  }
}

:root {
  --ystd-container-width: 1040px;
  --ystd-content-default-width: 800px;
  --ystd-content-align-wide-width: 800px;
  --ystd-content-min-width: 66.66%;
  --scrollbar-width: 0px;
  --ystd-layout-gap: 2rem !important;
  --ystd-content-margin-bottom: 0;
  /* --ystd-content-margin-bottom: calc(var(--ystd-layout-gap) * 2); */
}

/*==============================
グローバルメニュー
==============================*/

/*ロゴ
---------------------------------*/
.site-branding .custom-logo {
  display: inline-block;
}

.header-type--center .site-branding {
  padding-top: 1.5em !important;
  padding-bottom: 0.6em !important;
  padding-right: auto !important;
  padding-left: auto !important;
}

@media screen and (max-width: 500px) {
  .header-type--center .site-branding {
    padding-top: 1em !important;
    padding-bottom: 0 !important;
    padding-right: 2.5em !important;
    padding-left: 0 !important;
  }
}

/*メニュー共通
---------------------------------*/
.global-nav li {
  font-family: "Zen Maru Gothic", serif !important;
  font-style: normal;
  font-weight: 800 !important;
}

.global-nav__menu > .menu-item > a {
  padding: 0 0.3em !important;
}

.global-nav__menu > .menu-item > a:after {
  bottom: -7px;
  height: 4px;
  background-color: #0057b8;
}

/*ヘッダーの各切り替えポイント
---------------------------------*/
@media (max-width: 599px) {
  :root {
    --ys-site-header-height: 60px;
  }
}

@media (min-width: 500px) {
  :root {
    --ys-site-header-height: 76px;
  }
}

@media (min-width: 980px) {
  :root {
    --ys-site-header-height: 122px;
  }
}

/*メニュー体験申込みボタン
---------------------------------*/
.menu-item-448 {
  background-color: #1d69c1;
  padding: 9px 10px 9px 10px;
  color: #ffff !important;
  border-radius: 10px;
}

.menu-item-448 .nav-btn {
  color: #ffff !important;
}

.menu-item-448:hover {
  background-color: #649ad7;
}

.global-nav__menu > .menu-item-448 > a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  background-color: transparent !important;
  content: "";
  transition: width 0.3s;
}

/*サブメニュー背景
---------------------------------*/
.global-nav__menu .menu-item-has-children:focus-within .sub-menu,
.global-nav__menu .menu-item-has-children:hover .sub-menu {
  visibility: visible;
  background-color: #ffffff;
  opacity: 1;
}

/*==============================
トップ h2
==============================*/
.page-id-9 h2 {
  font-size: 2em !important;
  position: relative;
  font-weight: 800 !important;
  font-family: "Zen Maru Gothic", serif !important;
  font-style: normal;
}

.blue-text {
  color: #0057b8;
}

.yellow-text {
  color: #fef541;
}

.underline-blue-center::after {
  content: "" !important;
  display: block !important;
  background: #0057b8 !important;
  width: 60px !important;
  height: 4px !important;
  margin: 15px auto 0 auto !important;
  border-width: 1px !important;
  border-radius: 6px !important;
}

.underline-blue-left::after {
  content: "" !important;
  display: block !important;
  background: #0057b8 !important;
  width: 60px !important;
  height: 4px !important;
  margin: 15px 0 !important;
  border-width: 1px !important;
  border-radius: 6px !important;
}

@media screen and (max-width: 500px) {
  .underline-blue-left {
    text-align: center;
  }

  .underline-blue-left::after {
    content: "" !important;
    display: block !important;
    background: #0057b8 !important;
    width: 60px !important;
    height: 4px !important;
    margin: 15px auto 0 auto !important;
    border-width: 1px !important;
    border-radius: 6px !important;
  }
}

.underline-yellow-center::after {
  content: "" !important;
  display: block !important;
  background: #fef541 !important;
  width: 60px !important;
  height: 4px !important;
  margin: 15px auto 0 auto !important;
  border-width: 1px !important;
  border-radius: 6px !important;
}

.underline-white-left::after {
  content: "" !important;
  display: block !important;
  background: #ffffff !important;
  width: 60px !important;
  height: 4px !important;
  margin: 15px 0 !important;
  border-width: 1px !important;
  border-radius: 6px !important;
}

@media screen and (max-width: 500px) {
  .underline-white-left {
    text-align: center;
  }

  .underline-white-left::after {
    content: "" !important;
    display: block !important;
    background: #ffffff !important;
    width: 60px !important;
    height: 4px !important;
    margin: 15px auto 0 auto !important;
    border-width: 1px !important;
    border-radius: 6px !important;
  }
}

/*==============================
固定ページ h1
==============================*/
.header-h1-height .ystdb-heading__subtext:before {
  font-size: 24px;
}

@media screen and (max-width: 500px) {
  .header-h1-height {
    min-height: 140px !important;
  }

  .header-h1-height .ystdb-heading__subtext:before {
    font-size: 20px;
  }
}

/*==============================
クラス紹介
==============================*/

.class-intro-column {
  border-radius: 20px !important;
  box-shadow: 0 3px 5px rgba(23, 3, 71, 0.1) !important;
  padding: 0 0 20px 0 !important;
}

.class-intro-column img {
  border-radius: 20px 20px 0 0 !important;
}

.class-intro-column__title-blue {
  margin: 15px 0 0 0;
  padding: 0;
  font-family: "Zen Maru Gothic", serif;
  color: #0057b8;
  font-weight: 700;
  font-size: 24px;
}

.class-intro-column__title-orange {
  margin: 15px 0 0 0;
  padding: 0;
  font-family: "Zen Maru Gothic", serif;
  color: #ff8900;
  font-weight: 700;
  font-size: 24px;
}

.class-intro-column__text {
  padding: 0 20px;
  margin: 10px auto;
  font-size: 15px !important;
  letter-spacing: 0;
}

.this-class-h2 {
  background-color: #ff8900 !important;
}

.this-class-h3 {
  color: #ff8900 !important;
  background-color: #ffedd8 !important;
  border-left: 8px solid #ff8900 !important;
}

/*==============================
保護者様の声
==============================*/

/*カルーセルスライダー
---------------------------------*/
.page-id-9 .wp-block-cb-carousel .slick-slide {
  margin: 0 10px 0 10px;
  padding-top: 15px;
  padding-right: 15px;
  padding-left: 15px;
  overflow: hidden;
  border: 1px solid #d2d2d2;
  border-top: 0.8em solid #0057b8;
  border-radius: 10px;
  background-color: #ffffff;
}

.slick-next {
  right: -16px !important;
}

.slick-prev {
  left: -15px !important;
  z-index: 10000000 !important;
}

@media screen and (max-width: 500px) {
  .slick-prev {
    left: 0 !important;
  }

  .slick-next {
    right: 0 !important;
  }

  .slick-next:before,
  .slick-prev:before {
    opacity: 0.75;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
  }
}

/*口コミラベル
---------------------------------*/
.page-id-1377 .ystdtb-box__label {
  border-radius: 20px 20px 0 0;
  padding: 0.8em 1em 0.6em 1em !important;
}

.review-title {
  line-height: 1.4em !important;
}

/*==============================
投稿ページ
==============================*/
.post-template-default .site-content {
  margin-top: 40px !important;
  margin-bottom: 30px !important;
}

.paging__image img {
  border-radius: 5px !important;
}

/*==============================
アーカイブページ
==============================*/
.archive .site-content {
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}

.archive__main {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.archive__container.is-card {
  gap: 2rem !important;
}

@media (min-width: 600px) {
  .site-header-thumbnail img {
    height: 100vh;
    max-height: 260px;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/*==============================
投稿一覧サムネイル
==============================*/
.ratio .ratio__item {
  border-radius: 10px;
}

/*==============================
パンくずリスト
==============================*/

.breadcrumbs__list {
  margin: 0;
  padding: 1.75em 0 0 0;
  overflow: hidden;
  color: var(--breadcrumbs-text);
  font-size: 0.75em;
  line-height: 1;
  list-style: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*==============================
記事下リンクブロック
==============================*/

.is-one-column .ystdb-columns {
  --ystdb-column-row-gap: 1.5rem !important;
  --ystdb-column-column-gap: 1.5rem !important;
}

.artcle-down-column {
  border-radius: 10px !important;
  box-shadow: 0 3px 5px rgba(23, 3, 71, 0.1) !important;
  padding: 0 0 15px 0 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

.artcle-down-column img {
  border-radius: 10px 10px 0 0 !important;
}

.artcle-down-column:hover {
  opacity: 0.7;
}

/*==============================
ヘッダーメディア
==============================*/

.full-wide {
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

/*==============================
リスト
==============================*/
.ystdtb-icon-list.is-bold li:before {
  font-weight: 700;
  font-size: 24px !important;
}

.ystdtb-icon-list li {
  position: relative;
  padding-left: 2.2em;
  padding-top: 0.4em;
  margin-top: 0.5em;
  margin-bottom: 0.8em;
}

.ystdtb-icon-list li:last-child {
  margin-bottom: 0.4em;
}

/*==============================
関連記事
==============================*/
.post-related__title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  text-align: center;
  color: #0057b8;
  font-family: "Zen Maru Gothic", serif !important;
}

.post-related__title::before,
.post-related__title::after {
  content: "";
  width: 50px;
  height: 3px;
  background-color: #0057b8;
  border-radius: 3px;
}

.post-related__title::before {
  margin-right: 20px;
}

.post-related__title::after {
  margin-left: 20px;
}

.form-req {
  background-color: #cc0202;
  font-size: 14px;
  padding: 8px 10px;
  color: #ffffff;
  font-weight: bold;
  border-radius: 4px;
}

/*==============================
フッター
==============================*/
.footer-main {
  padding-top: 2.5em;
  padding-bottom: 0;
  overflow: hidden;
  background-color: var(--footer-bg);
  color: var(--footer-text);
}

.footer-widget__container {
  width: 82% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

@media screen and (max-width: 1000px) {
  .footer-widget__container {
    width: 100% !important;
  }
}

@media screen and (max-width: 500px) {
  .footer-widget__container {
    width: 100% !important;
  }
}

.site-info {
  margin-top: 1.4em;
  background-color: #0057b8;
  padding: 20px 0;
  color: #ffffff;
}

.singular__footer > * {
  margin-top: 1em !important;
  margin-bottom: 0;
}

.no-title .singular__footer > :last-child {
  margin-bottom: 1em !important;
}

.footer .is-layout-flex {
  gap: 12px !important;
}

.page-id-9 .entry-footer {
  display: none !important;
}

#block-11 p {
  margin: 0 !important;
}

.footer-link-text a {
  text-decoration: none;
  color: #555555;
}

.footer-link-text a:hover {
  color: #9b9b9b;
}

.footer-link-text-upper {
  margin-top: 0 !important;
}

/*==============================
メディア表示・非表示
==============================*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */

.pc {
  display: block !important;
}

.tab {
  display: none !important;
}

.sp {
  display: none !important;
}

.tab-sp {
  display: none !important;
}

/* ここから下に768px以上用（タブレット・パソコン） */

@media screen and (max-width: 1000px) {
  /* ここに767px以下用（タブレット・スマートフォン） */
  .pc {
    display: none !important;
  }

  .tab {
    display: block !important;
  }

  .sp {
    display: none !important;
  }

  .tab-sp {
    display: block !important;
  }
}

/* ここに480px以下用（スマートフォン） */

@media screen and (max-width: 500px) {
  /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
  .pc {
    display: none !important;
  }

  .tab {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

  .tab-sp {
    display: block !important;
  }
}

/*==============================
ドロップシャドウ
==============================*/
.org-drop-shadow {
  filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.2));
}

/*==============================
画像透過
==============================*/

a img:hover {
  opacity: 0.7;
}

.opa:hover {
  opacity: 0.7;
}

/*==============================
改行タグ
==============================*/
/*　PC改行　*/
@media screen and (min-width: 650px) {
  .br-pc {
    display: block;
  }

  .br-sp {
    display: none;
  }
}

/*　SP改行　*/
@media screen and (max-width: 650px) {
  .br-pc {
    display: none;
  }

  .br-sp {
    display: block;
  }
}

/*==============================
先頭へ戻るボタン
==============================*/
#back-to-top {
  right: 1vh;
  bottom: 5vh;
}

@media screen and (max-width: 500px) {
  #back-to-top {
    right: 1vh;
    bottom: 13vh;
  }
}

/*無料体験・見学レッスンお申込み
---------------------------------*/

@media screen and (max-width: 500px) {
  .page-id-447 #back-to-top {
    right: 1vh;
    bottom: 9vh;
  }
}

/*==============================
フロートバナー
==============================*/

/*PC
---------------------------------*/
[id^="bfb_content_"].bfb_view_pc.bfb_imgBanner.bfb_view_pc.bfb_rb {
  right: 70px !important;
}

/*スマホ
---------------------------------*/
[id^="bfb_content_"].bfb_view_sp {
  width: 100% !important;
}

[id^="bfb_content_"].bfb_view_sp.bfb_imgBanner.bfb_rb {
  top: auto;
  left: 0;
  right: auto;
  bottom: 0;
}

[id^="bfb_content_"].bfb_view_sp {
  background-color: transparent !important;
}

/*クローズボタン　
---------------------------------*/
[id^="bfb_content_"].bfb_view_sp .bfb_closed {
  right: 90% !important;
}

/*==============================
 Youtube
==============================*/

.center {
  text-align: center;
  margin: 0 auto;
}

.youtube {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 100%;
  padding: 0;
  aspect-ratio: 16 / 9;
}

/*タブレット*/

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .youtube {
    height: 50%;
  }
}

/*スマホ*/

@media screen and (max-width: 767px) {
  .youtube {
    height: 50%;
  }
}

/*==============================
 Google Map
==============================*/
.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
  padding-top: 52% !important;
}

iframe {
  width: 100%;

  aspect-ratio: 16/9;
}

.g-map {
  display: block;
  position: relative;
  width: 100% !important;
  height: 580px !important;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

/*タブレット*/

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .g-map {
    height: 50%;
  }
}

/*スマホ*/

@media screen and (max-width: 767px) {
  .g-map {
    height: 50%;
  }
}

/*==============================
非表示設定
==============================*/

/*体験・見学ページ
-----------------------------*/
.page-id-447 .footer-banner,
.page-id-1766 .footer-banner {
  display: none;
}

/*特定商取引法ページ　プライバシーポリシー
-----------------------------*/
.page-id-1678 #block-41,
.page-id-3 #block-41,
.page-id-1714 #block-48 {
  display: none;
}

/*==============================
メール確認用
==============================*/

.custom-error-message {
  position: relative;
  top: 12px;
}