/*
Theme Name: Astra Child
Theme URI:
Description: this is child theme
Author: Its ME
Author URI:
Template: astra
*/

/* ==========================================
   1. 汎用・基本レイアウト設定
   ========================================== */

/* 文字サイズを標準の67%にする（小さい補足文字用） */
.fzXS {
    font-size: 67%; 
}

/* ヘッダーと下のコンテンツ（メイン画像など）の間の隙間を詰める設定 */
.site-below-header-wrap {
    margin: -26px auto;
}

/* マウスを乗せた時に出る「子メニュー」の背景色を濃い紺色に固定 */
.sub-menu {
    background-color: #002169 !important;
}

/* ==========================================
   2. 言語スイッチャー（ヘッダー：ドロップダウン形式）
   ========================================== */

/* 言語選択ボタンの外枠：背景色やサイズ、ふわっと変わるアニメーションの設定 */
.custom-lang-selector {
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: 10px 20px;
    background-color: #002169;
    color: #fff;
    min-width: 140px;
    transition: all 0.3s ease;
}

/* ボタンにマウスを乗せた時：背景を少し暗くし、枠線をくっきりさせる */
.custom-lang-selector:hover {
    background-color: #2b88ff;
}

/* ボタンをクリックした瞬間：0.98倍に縮小して、押し込まれたような動きを作る */
.custom-lang-selector:active {
    transform: scale(0.98);
}

/* 言語メニュー本体：最初は非表示にし、影をつけて浮き上がって見えるようにする */
.lang-dropdown-menu {
    display: none; 
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 150px;
    background: white;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
}

/* 親ボタンをホバーした時にメニューを表示させる */
.custom-lang-selector:hover .lang-dropdown-menu {
    display: block;
}

/* メニュー内の各言語リンク：文字と旗を横並びにし、境界線を入れる */
.lang-dropdown-menu li a {
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
}

/* メニュー内の項目をホバーした時：背景をメインカラー、文字を白にする */
.lang-dropdown-menu li a:hover {
    background-color: #0073aa;
    color: #ffffff;
}

/* ==========================================
   3. 言語スイッチャー（フッター：横並びボタン形式）
   ========================================== */

/* フッター用スイッチャーの外側の余白 */
.switcher-footer {
    margin: 10px 3%;
}

/* 言語リストを横並びにする設定 */
.switcher-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
    align-items: center;
}

/* 各言語ボタン：枠線と角丸をつけ、青系の色で装飾 */
.switcher-footer ul li a {
    text-decoration: none;
    color: #2b88ff;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px;
    background-color: #fff;
    border: 1px solid #2b88ff;
    border-radius: 4px;
    transition: all 0.3s;
}

/* フッターのボタンをホバーした時：ブランドカラーの赤に塗りつぶす */
.switcher-footer ul li a:hover {
    color: #fff;
    background-color: #C31635;
    border: 1px solid #C31635;
}

/* ==========================================
   4. フッター装飾・SNSアイコン
   ========================================== */

/* フッター全体の背景色と、右下に大きく配置する背景ロゴの設定 */
.site-primary-footer-wrap {
    background-color: #f8f8f8; 
    background-image: url('/wp-content/uploads/2025/12/Wex-Logo-White-Footer.png') !important;
    background-repeat: no-repeat;
    background-size: auto 100%; /* 高さをフッターに合わせ、横幅は自動比率 */
    background-position: 86% bottom; /* 右端から少し内側の底に配置 */
    padding: 10px 0 50px 0;
}

/* ヘッダーにあるSNSアイコンの左右余白を調整 */
.header-social-inner-wrap a {
    margin: 20px 3% !important;
}

/* ==========================================
   5. レスポンシブ設定（端末サイズ別の微調整）
   ========================================== */

/* タブレットサイズ（921px以下）の時の調整 */
@media (max-width: 921px) {
    .site-primary-footer-wrap {
        /* ロゴが文字と重ならないよう、少し端に寄せてサイズも小さくする */
        background-position: 95% bottom; 
        background-size: auto 80%;
    }
}

/* スマホサイズ（544px以下）の時の調整 */
@media (max-width: 544px) {
    /* スマホでは背景ロゴを中央に小さく配置し、文字との被りを防ぐ */
    .site-primary-footer-wrap {
        background-position: center bottom; 
        background-size: auto 60%;
        padding-bottom: 80px !important; /* ロゴの分、下に余白を作る */
    }
    
    /* スマホでは「Above Footer（フッター上部）」エリアを丸ごと非表示にする */
    .site-above-footer-wrap {
        display: none !important;
    }
}



/* ==========================================
table price
   ========================================== */

.tariffAll {
	text-align: center;
}
.tableTariff {
	display: block;
	vertical-align: top;
	margin: 20px auto;
}
.tableTariff.itemName {
	display: none;
}
.tableTariff table {
	border-collapse: collapse;
	width: 100%;
	margin: auto;
}
.tableTariff caption {
	font-family: Noto Sans JP;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.0;
	vertical-align: middle;
	text-align: center;
	margin: 10px auto;
	padding: 2px 1% !important;
	border-bottom: 3px double #f32747;
	background-color: #fff;
	color: #f32747;
}
.tableTariff thead {
}
.tableTariff tbody {
}
.tableTariff tr {
}
.tableTariff thead tr {
}
.tableTariff tbody tr {
}
.tableTariff th,
.tableTariff td {
	font-family: Noto Sans JP;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.0;
	vertical-align: middle;
	text-align: center;
	border: none;
	padding: 2px 1% !important;
}
.tableTariff th {
}
.tableTariff td {
}
.tableTariff thead th {
	height: 80px;
	border-bottom: 1px solid #fff !important;
	background-color: #002169;
	color: #fff;
}
.tableTariff thead td {
	border-bottom: 1px solid #002169 !important;
	background-color: #fff;
	color: #444;
}
.tableTariff tbody th {
	width: 40%;
	border-bottom: 1px solid #fff !important;
	background-color: #002169;
	color: #fff;
}
.tableTariff tbody td {
	width: 30%;
	height: 60px;
	border-bottom: 1px solid #002169 !important;
	background-color: #fff;
	color: #444;
}
.tableTariff.itemName tbody td {
	border-bottom: 1px solid #fff !important;
	background-color: #002169;
	color: #fff;
}
.tableTariff thead th.cellTitle {
	font-size: 114%;
}
.tableTariff tbody th {
}

.male .tableTariff tbody th,
.male .tableTariff.itemName td {
	background-color: #1a60ca;
}
.female .tableTariff.itemName td,
.female .tableTariff tbody th {
	background-color: #d6519b;
}

.male .tableTariff caption {
	color: #1a60ca;
	border-bottom: 3px double #1a60ca;
}
.female .tableTariff caption {
	color: #d6519b;
	border-bottom: 3px double #d6519b;
}

.tableTariff .icn1 {
	display: inline-block;
	margin: 6px;
	padding: 4px;
	border-radius: 10px;
	background-color: #fff;
	color: #444;
}
.tableTariff .icn2 {
	display: inline-block;
	margin: 6px;
	padding: 4px;
	border-radius: 10px;
	background-color: #e67500;
	color: #fff;
}
.tableTariff .icn3 {
	display: inline-block;
	font-size: 64%;
	padding: 4px;
	border-radius: 10px;
	background-color: #f32747;
	color: #fff;
}
.tableTariff .emphasis {
	font-size: 127%;
	color: #f32747;
}
.tableTariff .strikethrough {
	font-size: 94%;
	text-decoration: line-through;
}

@media only screen and (min-width: 769px) {
.tableTariff {
	display: inline-block;
	width: 30%;
}
.tableTariff.itemName {
	display: inline-block;
	width: 38%;
}
.tableTariff table {
	width: 100%;
}
.tableTariff thead th.cellTitle,
.tableTariff tbody th {
	display: none;
}
.tableTariff.itemName thead th.cellTitle {
	display: table-cell;
}
}


.tableTariffSimple {
	display: block;
	vertical-align: top;
	margin: 20px auto;
	text-align: center;
}
.tableTariffSimple table {
	border-collapse: collapse;
	width: 100%;
	margin: auto;
}
.tableTariffSimple caption {
	font-family: Noto Sans JP;
	font-size: 20px;
	font-weight: normal;
	line-height: 1.0;
	vertical-align: middle;
	text-align: center;
	margin: 10px auto;
	padding: 2px 1% !important;
	border-bottom: 3px double #10a993;
	background-color: #fff;
	color: #10a993;
}
.tableTariffSimple thead {
}
.tableTariffSimple tbody {
}
.tableTariffSimple tr {
}
.tableTariffSimple thead tr {
}
.tableTariffSimple tbody tr {
}
.tableTariffSimple th,
.tableTariffSimple td {
	font-family: Noto Sans JP;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.0;
	vertical-align: middle;
	text-align: center;
	border: none;
	padding: 2px 1% !important;
}
.tableTariffSimple th {
}
.tableTariffSimple td {
}
.tableTariffSimple thead th {
	height: 80px;
	border-bottom: 1px solid #fff !important;
	background-color: #002169;
	color: #fff;
}
.tableTariffSimple thead td {
}
.tableTariffSimple tbody th {
	width: 44%;
	border-bottom: 1px solid #fff !important;
	background-color: #10a993;
	color: #fff;
}
.tableTariffSimple tbody td {
	width: 28%;
	height: 60px;
	border-bottom: 1px solid #10a993 !important;
	background-color: #fff;
	color: #444;
}
.tableTariffSimple th.cellTitle {
	font-size: 114%;
}
.tableTariffSimple .icn1 {
	display: inline-block;
	margin: 6px;
	padding: 4px;
	border-radius: 10px;
	background-color: #fff;
	color: #444;
}
.tableTariffSimple .icn2 {
	display: inline-block;
	margin: 6px;
	padding: 4px;
	border-radius: 10px;
	background-color: #e67500;
	color: #fff;
}
.tableTariffSimple .icn3 {
	display: inline-block;
	font-size: 64%;
	padding: 4px;
	border-radius: 10px;
	background-color: #f32747;
	color: #fff;
}
.tableTariffSimple .emphasis {
	font-size: 127%;
	color: #f32747;
}
.tableTariffSimple .strikethrough {
	font-size: 94%;
	text-decoration: line-through;
}