@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

/* ヘッダーの多言語国旗 */
#language-switcher {
  position: fixed;
  top: 0px;                     /* ← 少しだけ下げる（微調整） */
  right: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 0px 8px;
  border-radius: 6px;
  z-index: 9999;
  direction: rtl;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

#language-switcher a {
  display: inline-block;
  direction: ltr;
  transition: transform 0.2s;
}

#language-switcher a:hover {
  transform: scale(1.1);
}

/* 国旗にシャドウ追加 */
#language-switcher img {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}

/*投稿タイトルサイズの変更*/
.single-title, .page-title { font-size: 18px;/* スマホでのフォントサイズ */
}
@media only screen and (min-width: 768px) { .single-title, .page-title { font-size: 20px;/* タブレット・PCでのフォントサイズ */ }
}

/* 記事h1タイトル */
.single-title, .page-title {
  font-size: 19px;
}

@media only screen and (min-width: 768px) {
  /* 記事h1タイトル */
  .single-title, .page-title {
    font-size: 20px !important;
  }
}

/*スマホのメニュー非表示 */

	.wp-block-sgb-header-mobile-navigation{
		display:none !important;
	}

/*スクロールヒント*/
.js-scrollable{
    max-width:100%;/* 最大80%の領域内で要素をおさめる */
    margin:57px auto 0;
    overflow:auto;/*枠からはみ出たらスクロールさせる、はみ出なかった場合は何もしない*/
}
.js-scrollable{
    color:#000;
    border-collapse:collapse;/*隣接するセルのボーダーを共有する*/
}
.js-scrollable table th,
.js-scrollable table td{
    padding:20px;
    border:1px solid #333;
    white-space:nowrap;/*文字を折り返さない*/
}
/*スクロールヒント終わり*/
/*コース費用テーブル*/
.school-fee {
  position: relative;
  margin:20px 0;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
 }
 .school-fee th {
  z-index: 1;
  padding: 10px;
  background: #f1f1f1;
  border: solid 1px #666;
  font-size:15px;
  white-space: nowrap;
  position: sticky;
  top: 0;
 }
 
 .school-fee td {
  padding: 10px;
  border: solid 1px #000;
  font-size:15px;
  table-layout: fixed;
  white-space: nowrap;
 }

 .school-fee td:nth-child(n+2) {
   text-align: center;
 }

 .school-fee th:nth-child(n+2) {
  text-align: center;
}
/*コース費用テーブル終わり*/

/*==================================================
スライダーのためのcss
===================================*/
#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*========= レイアウトのためのCSS ===============*/

a{
  color: #fff;
}

a:hover,
a:active{
  text-decoration: none;
}

h1{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size:6vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.wrapper{
  position: relative;
}

.container{
  background:#555;
}

.container p{
  padding: 300px 0; 
  text-align: center;
  color: #fff;
}

/*ContactForm7カスタマイズ*/
table.CF7_table{
	width:80%;
	margin:0 auto;
	border: 3px solid #e5e5e5;
}

table.CF7_table tr{
	border-top: 2px solid #e5e5e5;
}

table.CF7_table th, table.CF7_table td {
	padding: 10px 0 10px 10px;
}

table.CF7_table td input　{
	margin-right: 10px;
}

.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table{
	display:table;
}

.wpcf7-form input[type=text], .wpcf7-form input[type=email], .CF7_table textarea, .wpcf7-form select {
	width: 98%;
}

input[type=radio]:checked:before{
	background-color: #28A2BA;
}

/*入力欄*/
.CF7_table input, .CF7_table textarea {
	border: 1px solid #d8d8d8;
}

.CF7_table ::placeholder {
	color:#797979;
}

/*「必須」文字*/
.CF7_req{
	font-size:.9em;
	padding: 5px;
	background: #28A2BA;/*ロゴカラー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/*「任意」文字*/
.CF7_unreq{
	font-size:.9em;
	padding: 5px;
	background: #bdbdbd;/*グレー*/
	color: #fff;
	border-radius: 3px;
	margin-right:1em;
}

/* タイトル列 */
@media screen and (min-width: 768px){
	.CF7_table th{
	width:30%;/*横幅*/
	background-color:#ebedf5;/*ブルーグレー*/
	}
}

/* レスポンシブ */
@media screen and (max-width: 768px){
	table.CF7_table{
	width:95%;
	}
	.CF7_table tr, .CF7_table td, .CF7_table th{
	display: block;
	width: 100%;
	line-height:2.5em;
	}
	.CF7_table th{
	background-color:#ebedf5;
	}
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#F7B609;/* オレンジ*/
	border:0;
	color:#fff;
	font-size:1.2em;
	font-weight:bold;
	margin:0 auto;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}

/* font awesome*/
.fa-wifi{margin-right:8px;}
.fa-utensils{margin-right:8px;}
.fa-bath{margin-right:8px;}
.fa-shower{margin-right:8px;}
.fa-kitchen-set{margin-right:8px;}
.fa-dumbbell{margin-right:8px;}
.fa-tv{margin-right:8px;}
.fa-person-swimming{margin-right:8px;}
.fa-toilet-paper{margin-right:8px;}
.fa-toilet{margin-right:8px;}
.fa-dryer{margin-right:8px;}
.fa-pencil{margin-right:8px;}
.fa-fan{margin-right:8px;}
.fa-wind{margin-right:8px;}

/*丸数字のリスト*/

.cercle_num ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cercle_num li {
  font-size: 16px;
  line-height: 1.5;
  padding-left: 30px;
  position: relative;
}
.cercle_num li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #333;
  border: 1px solid;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  width: 22px;
  color: #ffffff;
  font-size: 85%;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
}

/*ステップフローのCSS*/
ul.stepflow {
	border: none;
	margin: 1em 0.5em;
	padding: 0;
	list-style: none;
}
ul.stepflow > li:before, ol.stepflow > li:before {
	background-color:#cccccc!important;
  margin-left:10px;
}
.stepflow li {
    position: relative;
    padding: 0 0 1.5em 50px;
}
.stepflow>li:before {
	content: "";
	width: 3px;
	background: #cccccc;
	display: block;
	position: absolute;
	top: 28px;
	bottom: 0;
	left: 5px;
}
.stepflow-white {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 7px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: solid 3px #232F3E;
}
.stepflow-black {
	content: '';
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: solid 3px #232F3E;
	background-color: #232F3E;
}
.stepflow_label {
	padding: 3px 0px 8px 10px;
	margin-bottom:8px;
	color:#498ee0;
	font-size: 23px;
	font-weight: bold;
}
.stepflow_title {
	font-size:20px;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom:15px;
}
.stepflow_content {
	font-size: 18px;
	line-height: 1.5;
	margin-top: .5em;
	padding: 0 0 1.5em;
	border-bottom: dashed 1px #cccccc;
}

.stepflow_content p{
  width:90%;
}


/*ステップフローのCSSここまで*/

/*光るボタン https://dezanari.com/css-shiny-button/*/
/*LINE*/
.shiny-btn3 {
  display: block;
  position: relative;
  width:250px; /*ボタンの幅*/
  padding: 10px 0 !important;
  margin: 20px auto;
  background-color: #00B900;/*ボタンの色*/
  box-shadow: 0 3px 0 0 rgb(143, 180, 143);/*影の色(rgbaの値を変更)*/
  border-radius: 5px;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}


.shiny-btn3:hover {
  text-decoration: none;
  color: #fff;
  opacity: 0.7;
}
.shiny-btn3::before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  animation: shiny-btn3 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn3 {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
	
.wrap-line-btn{
  width:100%;
}

/*トップページのレイヤーがハンバーガーの上に来るのを防ぐ*/
.sgb-css-id-15 .wp-block-sgb-hero .header-image__text{
z-index:5 !important;		
}

/* 韓国ページのみのCSS */
.ko_main {
  max-width: initial!important;
}

.ko_main .article-header {
	display: none;
}

.ko_main #entry {
  overflow: initial;
}

.ko_main .sgb-full-bg__cover {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: 100vw !important;
}

/* .container_ko header {
	display: none;
} */

/*投稿ページの幅設定*/
@media only screen and (min-width: 1030px) {
  .single .wrap,
  .page .wrap,
  .single #inner-content,
  .page #inner-content {
    width: 1256px; /* 全体幅を指定 */
  }
  .d-5of7 {
    width: 73%; /* メインカラムの幅 */
  }
  .d-2of7 {
    width: 27%; /* サイドバーの幅 */
  }
}

/*韓国語プロモのヘッダー非表示*/
.page-id-1885 header,
.page-id-1885 .header,
.page-id-1885 .global-header {
  display: none !important;
}

/* =========================
   下層ページ用ヘッダーメニュー統一
   ========================= */

.sgb-header__inner {
    max-width: 100% !important; /* カスタムプロパティによる制限を解除 */
    width: 100% !important;
    padding: 0 20px; /* 左右の余白は必要に応じて調整 */
}

/* =========================
   3列テーブル　https://webliker.info/css/75964/
   ========================= */

/* テーブル全体 */
.price-table {
  border-collapse: collapse;
  table-layout: fixed; /* ← 幅固定を有効に */
  width: 100%;
}

/* 共通セル */
.price-table th,
.price-table td {
  border: 1px solid #ddd;
  text-align: center;
  padding: 12px 10px;
}

/* 左の項目列 */
.price-table .row-head {
  background-color: #f3f3f3;
  text-align: left;
  padding-left: 12px;
  font-weight: bold;
  width: 30%; /* ← 左列のみ固定 */
}

/* 期間列（1週・4週・12週）を均一幅に */
.price-table th:not(.row-head),
.price-table td:not(.row-head) {
  width: calc(70% / 3);
}

/* 4週間列：太字 */
.price-table .popular {
  font-weight: bold;
}

/* 4週間ヘッダー */
.price-table th.popular {
  position: relative;
  padding: 0;
  background: transparent;
}

/* 4週間ヘッダー内部 */
.price-table th.popular .inner {
  display: block;
  background-color: #f34955;
  color: #fff;
  padding: 16px 0;
  font-weight: bold; /* 念のため */
}

/* 人気No.1バッジ */
.price-table th.popular .no1 {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #bdcc28;
  width: 64px;
  font-size: 10px;
  border-radius: 15px;
  padding: 4px 0;
  color: #333;
  font-weight: bold;
}