/*
Theme Name: Hello Elementor Child
Theme URI:
Description: this is child theme
Author: Its ME
Author URI:
Template: hello-elementor
Version: 1.0.1
*/


/*------------------------------
汎用class
------------------------------*/
.fzXS {
	font-size: 67%;	
}




/* 親コンテナ：右寄せ・横並び・隙間設定 */
.related-terms-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end; /* 右側に寄せる */
    gap: 8px; /* ボタン同士の隙間 */
}

/* ボタンのデザイン */
.related-terms-nav .term-item a {
    display: inline-block;
    padding: 2px 10px;
    background: #fff;
    border: 1px solid #eee;
    color: #888;
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    transition: 0.2s;
}

.related-terms-nav .term-item a:hover {
    background: #f9f9f9;
    border-color: #ccc;
    color: #b0124a; /* HISカラーなどお好みで */
}

/* スマホ用：横に並んでスワイプできるようにする */
@media (max-width: 767px) {
    .related-terms-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start; /* スマホでは左から並べる */
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
    }
    .related-terms-nav .term-item {
        flex: 0 0 auto;
    }
}



.my-dest-badge a {
display: inline-block;
transition: all 0.2s ease;
text-transform: uppercase;
margin: 6px;
padding: 6px 10px;
border-radius: 100px;
border: 2px solid #000;
background-color: #fff;
color: #000;
}
.my-dest-badge a:hover {
border: 2px solid #008ee2;
background-color: #008ee2;
color: #fff;
}
.my-dest-badge a::before {
    content: ""; /* 文字は空にする */
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
    /* 黒いマップピンの形を直接描く（SVG） */
    background-color: currentColor; /* 文字の色に自動で合わせる */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/></svg>") no-repeat center;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z'/></svg>") no-repeat center;
}





.my-cat-badge a {
display: inline-block;
transition: all 0.2s ease;
margin: 6px;
padding: 1px 4px;
border-bottom: 3px double #000;
background-color: #fff;
color: #000;
}

.my-cat-badge a:hover {
border-bottom: 3px double #ff6600;
background-color: #fff;
color: #ff6600;
}


.my-cat-badge a::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
    background-color: currentColor;
    /* 風になびく旗（flag）のSVG */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M64 96H0V64h64V32h32v32h320l-64 80 64 80H96v256H64V96z'/></svg>") no-repeat center;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M64 96H0V64h64V32h32v32h320l-64 80 64 80H96v256H64V96z'/></svg>") no-repeat center;
}


.my-tag-badge a {
    display: inline-block;
    position: relative;
    margin-left: 20px; /* 左側の三角形のスペース */
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 6px 10px;
    
    background: #fff;
    border: 2px solid #000;
    border-left: none; /* 三角形と繋ぐので左辺は消す */
    border-radius: 0 8px 8px 0; /* 右側はしっかり角丸 */
    color: #000;
    text-transform: uppercase;
    transition: all 0.2s;
}
.my-tag-badge a::before {
    content: "";
    position: absolute;
    right: calc(100% - 1.5px); /* 1.5px重ねて隙間を消す */
    top: -2px;
    width: 22px;
    height: calc(100% + 4px);
    
    background-color: currentColor;
    
    /* V字のみを描き、縦線を絶対に引かないパス */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 32' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M25 0 Q15 4 5 13 C2 15 2 17 5 19 Q15 28 25 32'/></svg>") no-repeat center;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 32' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M25 0 Q15 4 5 13 C2 15 2 17 5 19 Q15 28 25 32'/></svg>") no-repeat center;
    
    background-size: 100% 100%;
}

/* 穴（黒丸）を中央に配置 */
.my-tag-badge a::after {
    content: "#";
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #000;
}

/* ホバー時の設定（塗りつぶし） */
.my-tag-badge a:hover {
    background-color: #008ee2;
    border-color: #008ee2;
    color: #fff;
}
.my-tag-badge a:hover::before {
    /* ホバー時は背景画像（SVG）を「塗りつぶし用」に切り替える */
    /* 縦線を消したV字の中を、文字と同じ青（%23008ee2）で塗りつぶす設定 */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 32'><path d='M25 0 Q15 4 5 13 C2 15 2 17 5 19 Q15 28 25 32 L 25 32 Z' fill='%23008ee2'/></svg>");
    
    /* マスクは解除（背景画像として表示させるため） */
    -webkit-mask: none;
    mask: none;
    background-color: #fff;
}
.my-tag-badge a:hover::after {
    color: #ff6600;
    color: #fff;
}


/* ====================================================== */
/* ACFカスタムアイコン（PC・タブレットの基本サイズ） */
/* ====================================================== */
.acf-custom-icon i {
    font-size: 30px;       /* PC・タブレット時のサイズ */
    color: #008ee2;        /* 色 */
}

/* ====================================================== */
/* スマホ表示（画面幅767px以下）の時のサイズ調整 */
/* ====================================================== */
@media (max-width: 767px) {
    .acf-custom-icon i {
        font-size: 26px;   /* スマホ時のサイズ（お好みで調整してください） */
    }
}



/* --- 基本スタイル（縦並び・通常） --- */
.listTaxonomy ul {
margin: auto 3%;
padding: 0;
}
.listTaxonomy ul li {
margin: 10px auto;
list-style: none;
/*list-style-type: disclosure-closed;*/
list-style-position: inside;}
.listTaxonomy ul li a {
font-size: 100%;
font-weight: 500;
text-decoration: none;
color: #000;
}
.listTaxonomy ul li a:hover {
/* text-decoration: underline; */
color: #3FC9FF; /* #ff6600; */
}
.listTaxonomy .term-name {
}
.listTaxonomy .term-count {
font-size: 78%;
}

/* --- 横並びスタイル (iconhorizon) --- */
.listTaxonomy.iconhorizon ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none; /* デフォルトの矢印を消す */
}
.listTaxonomy.iconhorizon ul li {
    margin: 0;
    list-style-type: none; /* リスト記号を消す */
}
.listTaxonomy.iconhorizon ul li a {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 14px;
    border: 2px solid #000;
    background-color: #fff;
    color: #000;
}
.listTaxonomy.iconhorizon ul li a::before {
    content: "#"; /* タグっぽく先頭にシャープ */
}
.listTaxonomy.iconhorizon .term-count {
    display: none; /* 件数を非表示にする */
}
.listTaxonomy.iconhorizon ul li a:hover {
    border: 2px solid #008ee2;
    background-color: #008ee2;
    color: #fff;
    text-decoration: none;
}

/* --- グリッドボックススタイル (gridbox) --- */
.listTaxonomy.gridbox ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    list-style: none;
}
.listTaxonomy.gridbox ul li {
    margin: 0;
    list-style-type: none;
}
.listTaxonomy.gridbox ul li a {
    display: block;
    text-decoration: none;
    color: #000;
    text-align: center;
}
.listTaxonomy.gridbox .term-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: transform 0.3s ease;
}

.listTaxonomy.gridbox .term-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}
.listTaxonomy.gridbox .term-name {
    font-weight: bold;
}
.listTaxonomy.gridbox ul li a:hover .term-thumb {
    transform: scale(1.05);
}

.listTaxonomy.gridbox ul li a:hover .term-thumb img {
    filter: saturate(150%);
}
.listTaxonomy.gridbox .no-image {
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.listTaxonomy.gridbox .no-image-text {
    font-size: 13px;
    color: #999;
}
.listTaxonomy.gridbox ul li a:hover .term-name {
    color: #ff6600;
}
.listTaxonomy.gridbox .term-count {
    display: none; /* 件数は非表示にするなら */
}



/* ====================================================== */
/* elementor-paginationコンポーネント */
/* ====================================================== */

/* 各ボタンの共通デザイン（通常ページ・数字） */
.elementor-pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: #e0e0e0;
    color: #333333;
    /* ★追記：ホバー時の拡大をふわっと滑らかにする設定（0.2秒かけて変化） */
    transition: all 0.2s ease-in-out; 
}

/* 現在表示しているページ（青色の丸・ホバーなし） */
.elementor-pagination .page-numbers.current {
    border: 1px solid #008EE2;
    background-color: #d4d4d4;
    color: #008EE2;
}

/* 通常のリンクボタン（aタグ）にホバーしたときだけ動く設定 */
.elementor-pagination a.page-numbers:hover {
    background-color: #008EE2;
    color: #ffffff;
    /* ★追記：ホバー時に1.08倍にちょっと大きくする */
    transform: scale(1.08); 
}

/* 「Previous」「Next」ボタンのサイズ固定（テキスト量に依存しない） */
.elementor-pagination a.page-numbers.prev,
.elementor-pagination a.page-numbers.next {
    width: 100px; /* 横幅を固定してサイズを揃える */
    height: 50px;
    border-radius: 50px; /* カプセル型 */
    font-size: 14px;
}

/* リンクが切れている時（初回ページのPrev / 最終ページのNext）は完全に非表示 */
.elementor-pagination span.page-numbers.prev,
.elementor-pagination span.page-numbers.next {
    display: none;
}




/* ====================================================== */
/* ITEM PICKUP コンポーネント */
/* ====================================================== */

/* 全体のコンテナ */
.itemPickup {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 40px 0;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* ホバー時のアニメーション */
.itemPickup:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* リンク全体のコンテナ */
.itemPickup > a {
    display: flex;
    width: 100%;
    text-decoration: none;
    color: inherit;
    gap: 20px;
}

/* 画像コンテナ (左カラム) */
.itemPickup__thumb {
    flex-basis: 30%;
    flex-shrink: 0;
    overflow: hidden;
}

.itemPickup__thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* テキストコンテナ (右カラム) */
.itemPickup__content {
    flex-basis: 70%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 6px;
}

/* ====================================================== */
/* アイテム情報 */
/* ====================================================== */

/* タイトル */
.itemPickup__ttl {
    font-size: 1.25rem;
    font-weight: bold;
    color: #1a1a1a;
}

/* 抜粋文 */
.itemPickup__excerpt {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* ====================================================== */
/* 商品タイプ (タグ) */
/* ====================================================== */

.itemPickup__type {
    display: inline-block;
    padding: 2px 8px;
    background-color: #f0f0f0;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 5px;
    /* Flexbox内で幅が広がらないように設定 */
    align-self: flex-start;
}

/* ====================================================== */
/* 価格表示 */
/* ====================================================== */

.itemPickup__price {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    align-items: baseline;
    gap: 5px;
    margin-top: 5px;
    font-weight: bold;
    color: #d9534f;
}

.itemPickup__price__prefix1,
.itemPickup__price__suffix1 {
    font-size: 0.8em;
    color: inherit; /* 親要素の色を継承 */
}

.itemPickup__price__prefix2,
.itemPickup__price__suffix2 {
    font-size: 0.7em;
    color: #666;
}

.itemPickup__price__main {
    font-size: 1.5em;
    color: inherit; /* 親要素の色を継承 */
}

/* ====================================================== */
/* レスポンシブデザイン */
/* ====================================================== */

@media (max-width: 768px) {
    .itemPickup {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .itemPickup > a {
        flex-direction: column;
        gap: 15px;
    }
    .itemPickup__thumb,
    .itemPickup__content {
        flex-basis: 100%;
    }
    .itemPickup__type {
        align-self: center; /* スマホでは中央に配置 */
    }
    .itemPickup__price {
        justify-content: center;
    }
}



/* ====================================================== */
/* 記事ブロックリスト コンポーネント */
/* ====================================================== */
.sectionListBlockArticle1 {
	display: flex;
	flex-wrap: wrap; /* 複数行になる場合は折り返す */
	gap: 10px;
    justify-content: center;
}

.sectionListBlockArticle1__item {
	flex: 0 1 calc(25% - 10px); /* PC: 4カラム */
	border: 1px solid #000;
	border-radius: 6px;
	box-sizing: border-box;
	background-color: #fff;
	transition: box-shadow 0.2s;
	padding-bottom: 6px;
}

/* --- スマホ: 2カラム --- */
@media (max-width: 768px) {
    .sectionListBlockArticle1__item {
        flex: 1 1 calc(50% - 10px);
    }
}

/* 画像の枠：ここで比率を固定 */
.sectionListBlockArticle1__item .postImg {
	width: 100%;
	aspect-ratio: 16 / 9;  /* ← 全部共通 */
	overflow: hidden;
	position: relative;
}

/* 画像：中央トリミング */
.sectionListBlockArticle1__item .postImg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
    border-radius: 4px;
}

.sectionListBlockArticle1__item .postTitle {
    margin: auto 3%;
    font-size: 1.2em;
    font-weight: bold;
    color: #000;
}

.sectionListBlockArticle1__item a:hover {
    display: block;
}
.sectionListBlockArticle1__item a:hover .postImg img {
	opacity: 0.8;
}
.sectionListBlockArticle1__item a:hover .postTitle {
	color: #18b7be;
}


.sectionListBlockArticle1__item .postText {
    margin: 4px 3%;
	font-size: 0.8em;
	color: #555;
}

.sectionListBlockArticle1__item .postDate {
    margin: 4px 3%;
	font-size: 0.65em;
	color: #888;
	text-align: right;
}

/* タグ */
.sectionListBlockArticle1__item .postTags {
    margin: 6px 3%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sectionListBlockArticle1__item .postTagItem {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.85em;
    border-radius: 4px;
    background: #eee;
    color: #333;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    position: relative;
}

.sectionListBlockArticle1__item .postTagItem::before {
    content: "#";
    margin-right: 2px;
    color: #333;
}

/* hover */
.sectionListBlockArticle1__item .postTagItem:hover {
    background-color: #18B7BE;
    color: #fff;
}
.sectionListBlockArticle1__item .postTagItem:hover::before {
    color: #fff;
}


/* タグごとに色を変えたい場合 */
.sectionListBlockArticle1__item .tag-news {
    background: #0073aa;
    color: #fff;
}
.sectionListBlockArticle1__item .tag-event {
    background: #d54e21;
    color: #fff;
}
.sectionListBlockArticle1__item .tag-tech {
    background: #46b450;
    color: #fff;
}

/* ====================================================== */
/* ランキング記事 コンポーネント */
/* ====================================================== */

.sectionRankingArticle {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.sectionRankingArticle__item {
    flex: 1 1 calc(33.333% - 20px); /* デフォルトPC: 3カラム */
    border: 1px solid #000;
    border-radius: 6px;
    box-sizing: border-box;
    background: #fff;
    transition: box-shadow 0.2s;
    padding-bottom: 6px;
    position: relative; /* rankIcon用 */
}

/* スマホ: 2カラム */
@media (max-width: 768px) {
    .sectionRankingArticle__item {
        flex: 1 1 calc(50% - 20px);
    }
}

/* postImg */
.sectionRankingArticle__item .postImg {
    position: relative; /* rankIcon重ね用 */
    overflow: hidden;
    border-radius: 4px;
}
.sectionRankingArticle__item .postImg img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* rankIcon 共通 */
.sectionRankingArticle__item .rankIcon {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    z-index: 2;
}
.sectionRankingArticle__item .rankIcon img {
    width: 100%;
    height: auto;
    display: block;
    border-top-left-radius: 4px; /* サムネ角丸に合わせる */
}

/* postTitle */
.sectionRankingArticle__item .postTitle {
    margin: auto 3%;
    font-size: 1.1em;
    font-weight: bold;
    color: #000;
}
.sectionRankingArticle__item a:hover .postImg img {
    filter: contrast(140%);
}
.sectionRankingArticle__item a:hover .postTitle {
    color: #18b7be;
}

/* postText・postDate */
.sectionRankingArticle__item .postText {
    margin: 4px 3%;
    font-size: 0.8em;
    color: #555;
}
.sectionRankingArticle__item .postDate {
    margin: 4px 3%;
    font-size: 0.65em;
    color: #888;
    text-align: right;
}

/* postTags */
.sectionRankingArticle__item .postTags {
    margin: 6px 3%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.sectionRankingArticle__item .postTagItem {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.85em;
    border-radius: 4px;
    background: #eee;
    color: #333;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    position: relative;
}
.sectionRankingArticle__item .postTagItem::before {
    content: "#";
    margin-right: 2px;
    color: #555;
}
.sectionRankingArticle__item .postTagItem:hover {
    background-color: #18B7BE;
    color: #fff;
}
.sectionRankingArticle__item .postTagItem:hover::before {
    color: #fff;
}

/* タグ色指定 */
.sectionRankingArticle__item .tag-news  { background: #0073aa; color: #fff; }
.sectionRankingArticle__item .tag-event { background: #d54e21; color: #fff; }
.sectionRankingArticle__item .tag-tech  { background: #46b450; color: #fff; }

/* =====================
	ランキング記事コンポーネント
	サイドバー用 styleAside
   ===================== */
.sectionRankingArticle.styleAside {
    display: block; /* 縦並び */
}

.sectionRankingArticle.styleAside .sectionRankingArticle__item {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    padding: 6px;
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    background: transparent;
}

/* aside の a を横並びに */
.sectionRankingArticle.styleAside .sectionRankingArticle__item > a {
    display: flex;
    align-items: center;
}

/* サムネ左 */
.sectionRankingArticle.styleAside .postImg {
    flex: 0 0 130px;
    margin-right: 10px;
    position: relative; /* rankIcon 重ね用 */
}

/* タイトル右 */
.sectionRankingArticle.styleAside .postTitle {
    flex: 1;
    margin: 0;
    font-size: 0.8em;
    line-height: 1.2;
}

/* アイコンをサムネ左上に重ね（asideは小さめ） */
.sectionRankingArticle.styleAside .rankIcon {
    width: 20px;
}
.sectionRankingArticle.styleAside .rankIcon img {
    width: 100%;
    height: auto;
    border-top-left-radius: 4px;
}

/* asideで非表示にする要素 */
.sectionRankingArticle.styleAside .postText,
.sectionRankingArticle.styleAside .postDate,
.sectionRankingArticle.styleAside .postTags {
    display: none;
}


/* ====================================================== */
/* ライター情報コンポーネント */
/* ====================================================== */
/* ライター情報コンテナ */
.writer-info {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
}

/* アバターと詳細のラップ */
.writer-details-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* アバター画像コンテナ */
.writer-avatar {
    flex-basis: 15%;
    flex-shrink: 0;
    width: 0;
    position: relative;
}

/* 画像を正方形かつ円形にトリミング */
.writer-avatar::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.writer-avatar img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* 名前と紹介文 */
.writer-details {
    flex-basis: 85%;
}

.writer-name-wrap {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 5px;
}

.writer-label {
    font-size: 0.8rem;
    color: #666;
    padding: 2px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.writer-name {
    font-size: 1.2rem;
    font-weight: bold;
}

.writer-bio {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    .writer-details-wrap {
        flex-direction: column;
        text-align: center;
    }
    .writer-avatar {
        width: 100px;
        height: 100px;
        flex-basis: auto;
    }
    .writer-avatar::before {
        display: none;
    }
    .writer-avatar img {
        border-radius: 50% !important;
    }
    .writer-name-wrap {
        justify-content: center;
    }
}



/* ====================================================== */
/* tag-cloudコンポーネント */
/* ====================================================== */
.custom-tag-cloud {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-tag-cloud li {
    display: inline-block;
    margin: 6px 20px;
}

.custom-tag-cloud li a:hover,
.custom-tag-cloud li a:hover::before,
.custom-tag-cloud li a:hover::after {
	color: #fff;
}
.custom-tag-cloud li a:hover {
    background: url('/wp-content/uploads/2025/12/tag-hover-m-repeat.png') repeat-x center;
    background-size: auto 100%;
}
.custom-tag-cloud li a:hover::before {
    background: url('/wp-content/uploads/2025/12/tag-hover-m-l.png') no-repeat left center;
    background-size: contain;
}
.custom-tag-cloud li a:hover::after {
    background: url('/wp-content/uploads/2025/12/tag-hover-m-r.png') no-repeat right center;
    background-size: contain;
}

.custom-tag-cloud li a {
    position: relative;
    display: inline-block;
    padding: 6px 4px;
	height: 32px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    text-decoration: none;
    line-height: 1.2;

    /* ← 中央画像（横リピート） */
    background: url('/wp-content/uploads/2025/12/tag-normal-m-repeat.png') repeat-x center;
    background-size: auto 100%;

    z-index: 1;
}

/* 左画像 */
.custom-tag-cloud li a::before {
    content: "";
    position: absolute;
    left: -19px;        /* ← 左画像の幅に合わせる */
    top: 0;
    width: 20px;        /* ← 左画像の幅に合わせる */
    height: 100%;
    background: url('/wp-content/uploads/2025/12/tag-normal-m-l.png') no-repeat left center;
    background-size: contain;
    z-index: -1;
}

/* 右画像 */
.custom-tag-cloud li a::after {
    content: "";
    position: absolute;
    right: -11px;       /* ← 右画像の幅に合わせる */
    top: 0;
    width: 20px;        /* ← 右画像の幅に合わせる */
    height: 100%;
    background: url('/wp-content/uploads/2025/12/tag-normal-m-r.png') no-repeat right center;
    background-size: contain;
    z-index: -1;
}

/* ====================================================== */
/* discover用デザイン　heading h2, h3 */
/* ====================================================== */
/* ---- H2 ---- */
.h2discover h2 {
position: relative;
padding: 70px 0.6em;
font-size: 160% !important;;
font-weight: bold;
}

/* グレーのバー（全体） */
.h2discover h2::before {
content: "";
position: absolute;
left: 0;
top: 35%;
width: 6px;
height: 30%;
background: #ccc;
}

/* シアンのバー（上から50%だけ） */
.h2discover h2::after {
content: "";
position: absolute;
left: 0;
top: 35%;
width: 6px;
height: 15%;
background: #00bcd4;
}

/* ---- H3 ---- */
.h3discover h3 {
position: relative;
padding: 70px 0 0.3em 0;
font-size: 120% !important;;
font-weight: normal;
}

.h3discover h3::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: #ccc; /* グレー */
}

.h3discover h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 15%;   /* 15%だけシアン */
height: 4px;
background: #00bcd4;
}





/*------------------------------
listRecommendation
------------------------------*/
.listRecommendationVer01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 少ない時も中央寄せ */
    gap: 10px; /* 🔹カード間隔10px */
}

/*------------------------------
listRecommendationVer01__item
------------------------------*/
.listRecommendationVer01__item {
    position: relative;
    flex: 0 1 calc(25% - 10px); /* PC時：4カラム */
    box-sizing: border-box;
}

.listRecommendationVer01__item a {
    display: block;
    height: 100%;
    position: relative;
    border: 1px solid #000;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    overflow: hidden;
    padding-bottom: 16px;
    background-color: #fff;
    transition: opacity 0.3s;
}
.listRecommendationVer01__item a:hover,
.listRecommendationVer01__item a:focus {
    transition: transform 0.3s;
    transform: scale(1.05);
}
.listRecommendationVer01__item .postImg {
    display: block;
}
.listRecommendationVer01__item .postImg > img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.listRecommendationVer01__item .postTitle {
    display: block;
    line-height: 1.2;
    color: #000;
    font-size: 94%;
    margin: 4px 3%;
}
.listRecommendationVer01__item .postText {
    display: block;
    line-height: 1.4;
    font-size: 67%;
    color: #999;
    margin: 2px 3%;
}
.listRecommendationVer01__item .postPrice {
    display: block;
    margin: auto 3%;
    font-size: 67%;
    text-align: right;
}
.listRecommendationVer01__item .tagPost {
	padding: 3px 10px;
    font-size: 80%;
    position: absolute;
    top: 3%;
    right: 3%;
}

.listRecommendationVer01__item .tagExternal {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 56%;
    padding: 1px 1%;
    background-color: #666;
    color: #fff;
    border-radius: 0;
}

.listRecommendationVer01__item .tagCity {
    margin: auto 3%;
    padding: 0;
}

.listRecommendationVer01__item .tagCity li {
    display: inline-block;
    margin: auto;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 80%;
}

/* ---------- default / base ---------- */
.tagCity li         { background:#18B7BE; color:#fff; }

/* ---------- Vietnam & nearby ---------- 
.tagCity li.sapa         { background:#2E8B57; color:#fff; }
.tagCity li.danang       { background:#00A9CE; color:#fff; }
.tagCity li.nhatrang     { background:#00B0A6; color:#fff; }
.tagCity li.hanoi        { background:#F36F25; color:#fff; }
.tagCity li.hochiminhcity{ background:#D64550; color:#fff; }
.tagCity li.hochiminh    { background:#D64550; color:#fff; }
*/
/* ---------- Thailand ---------- 
.tagCity li.ayutthaya    { background:#B0894B; color:#fff; }
.tagCity li.udonthani    { background:#6D9DC5; color:#fff; }
.tagCity li.krabi        { background:#0077B6; color:#fff; }
.tagCity li.samui        { background:#00A896; color:#fff; }
.tagCity li.samet        { background:#1B98E0; color:#fff; }
.tagCity li.sukhothai    { background:#C27C3A; color:#fff; }
.tagCity li.chiangmai    { background:#6B8E23; color:#fff; }
.tagCity li.chiang-rai   { background:#58706F; color:#fff; }
.tagCity li.pattaya      { background:#EF6C00; color:#fff; }
.tagCity li.bangkok      { background:#8B2E2E; color:#fff; }
.tagCity li.phitsanulok  { background:#9DB4C0; color:#000; }
.tagCity li.phuket       { background:#0AA0A0; color:#fff; }
*/
/* ---------- Bali / Indonesia ---------- 
.tagCity li.ubud         { background:#FE00F0; color:#ffffff; }
.tagCity li.kuta-legian  { background:#FF6F61; color:#fff; }
.tagCity li.jakarta      { background:#6C4F3D; color:#fff; }
.tagCity li.yogyakarta   { background:#A24BFF; color:#fff; }
.tagCity li.jimbaran     { background:#455554; color:#fff; }
.tagCity li.denpasar     { background:#E91E63; color:#fff; }
.tagCity li.nusadua      { background:#00796B; color:#fff; }
.tagCity li.bali-island  { background:#F57C00; color:#fff; }
.tagCity li.labuan-bajo  { background:#2B9EB3; color:#fff; }
.tagCity li.kuta         { background:#FF8A65; color:#fff; }
*/
/* ---------- Philippines ---------- 
.tagCity li.elnido       { background:#00B4D8; color:#fff; }
.tagCity li.cebu-island  { background:#00A6A6; color:#fff; }
.tagCity li.boracay-island{ background:#FFB703; color:#000; }
*/
/* ---------- Cambodia / Laos / Myanmar ---------- 
.tagCity li.siem-reap    { background:#8C5E58; color:#fff; }
.tagCity li.phnompenh    { background:#C45A49; color:#fff; }
.tagCity li.vientiane    { background:#7D9E6A; color:#fff; }
.tagCity li.luangprabang { background:#9F7A63; color:#fff; }
*/
/* ---------- Malaysia / Singapore ---------- 
.tagCity li.singapore    { background:#D62828; color:#fff; }
.tagCity li.kuala-lumpur { background:#3A6EA5; color:#fff; }
.tagCity li.penang       { background:#2F9E44; color:#fff; }
.tagCity li.kota-kinabalu{ background:#00A3A3; color:#fff; }
.tagCity li.langkawi     { background:#0F4C75; color:#fff; }
*/
/* ---------- Vietnam (additional slugs) ---------- 
.tagCity li.danang       { background:#00A9CE; color:#fff; }
.tagCity li.nhatrang     { background:#00B0A6; color:#fff; }
*/
/* ---------- South Asia ---------- 
.tagCity li.agra         { background:#B03A2E; color:#fff; }
.tagCity li.jaipur       { background:#FF8A00; color:#000; }
.tagCity li.delhi        { background:#7B1FA2; color:#fff; }
.tagCity li.dhaka        { background:#3E6B89; color:#fff; }
*/
/* ---------- China / East Asia ---------- 
.tagCity li.shanghai     { background:#C0392B; color:#fff; }
.tagCity li.beijing      { background:#8B0000; color:#fff; }
.tagCity li.taipei       { background:#F06292; color:#fff; }
.tagCity li.hongkong     { background:#2C3E50; color:#fff; }
*/
/* ---------- Oceania ---------- 
.tagCity li.perth        { background:#0E9AA7; color:#fff; }
.tagCity li.melbourne    { background:#1F618D; color:#fff; }
.tagCity li.bloom        { background:#F2994A; color:#000; }
.tagCity li.auckland     { background:#117A65; color:#fff; }
*/

/* ---------- catch-all / optional: light border variants ---------- */
.tagCity li.light {
  background:#F5F5F5; color:#333; border:1px solid #e0e0e0;
}


/* ---------- Accessibility note ----------
If you need perfect WCAG contrast for each tag, I can tweak colors to meet AA/AAA for every label.
---------- */


/*------------------------------
レスポンシブ対応
------------------------------*/

/* タブレット：3カラム */
@media (max-width: 1024px) {
    .listRecommendationVer01__item {
        flex: 0 1 calc(33.333% - 10px);
    }
}

/* スマホ：2カラム */
@media (max-width: 600px) {
    .listRecommendationVer01__item {
        flex: 0 1 calc(50% - 10px);
    }
}

/*------------------------------
tagPost
------------------------------*/
.tagPost {
	padding: 1px 4px;
	background-color: #999;
	color: #fff;
	border-radius: 4px;
}
.listRecommendationVer01__item .tagPost.information {
	right: unset;
	left: 3%;
}
.tagPost.information {
	background-color: #222;
	border-radius: 0;
}
.tagPost.product {
	background-color: #f00;
}
.tagPost.product.sightseeing {
	background-color: #f90;
}
.tagPost.product.tour {
	background-color: #f90;
}
.tagPost.product.hotel {
	background-color: #09f;
}
.tagPost.product.air {
	background-color: #99f;
}
.tagPost.product.coupon {
	background-color: #f90;
}
.tagPost.product.transfer {
	background-color: #99f;
}
.tagPost.product.daytour {
	background-color: #f90;
}
.tagPost.product.tourwithair {
	background-color: #f99;
}
.tagPost.product.tourwithoutair {
	background-color: #f99;
}
.tagPost.product.tourwithhotel {
	background-color: #f99;
}

/*------------------------------
frontprice
------------------------------*/
.frontprice {
}
.frontpriceForeword {
	display: inline-block;
	line-height: 1.0;
	color: grey;
}
.frontpricePrefix2 {
	display: inline-block;
	line-height: 1.0;
	color: grey;
	font-size: 76%;
}
.frontpricePrefix1 {
	display: inline-block;
	line-height: 1.0;
	color: red;
	font-size: 76%;
}
.frontpricePrice {
	display: inline-block;
	line-height: 1.0;
	color: red;
	font-size: 150%;
	font-weight: bold;
}
.frontpriceSuffix1 {
	display: inline-block;
	line-height: 1.0;
	color: red;
	font-size: 76%;
}
.frontpriceSuffix2 {
	display: inline-block;
	line-height: 1.0;
	color: grey;
	font-size: 76%;
}
.frontpriceAfterword {
	display: inline-block;
	line-height: 1.0;
	color: grey;
}



.termNamesAll {
	display: inline-block;
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 2px 3%;
	font-size: 67%;
	color: #fff;
	background-color: #000;
	border-radius: 20px;
}
.terms-hochiminhcity .termNamesAll {
	background-color: #c38;
}
.terms-danang .termNamesAll {
	background-color: #3c8;
}
.terms-hanoi .termNamesAll {
	background-color: #38c;
}
.terms-nhatrang .termNamesAll {
	background-color: #83c;
}
.terms-sapa .termNamesAll {
	background-color: #8b4;
}

@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適用される */

}



/*------------------------------
tailSection
------------------------------*/
.tailSection-072a40-ffffff {
}
.tailSection-072a40-ffffff:after {
	content: '';
	display: block;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-072a40.png) repeat-x bottom center #fff;
	background-size: auto 20px;
}
.tailSection-072a40-ffffff:before {
	content: 'Before content';
	display: block !important;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-ffffff.png) repeat-x top center #072a40;
	background-size: auto 20px;
}

.tailSection-072a40-18b7be {
}
.tailSection-072a40-18b7be:after {
	content: '';
	display: block;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-072a40.png) repeat-x bottom center #18b7be;
	background-size: auto 20px;
}
}
.tailSection-072a40-f9f7f0 {
}
.tailSection-072a40-f9f7f0:after {
	content: '';
	display: block;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-072a40.png) repeat-x bottom center #f9f7f0;
	background-size: auto 20px;
}

.tailSection-18b7be-ffffff {
}
.tailSection-18b7be-ffffff:after {
	content: '';
	display: block;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-18b7be.png) repeat-x bottom center #fff;
	background-size: auto 20px;
}
.tailSection-18b7be-072a40 {
}
.tailSection-18b7be-072a40:after {
	content: '';
	display: block;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-18b7be.png) repeat-x bottom center #072a40;
	background-size: auto 20px;
}
.tailSection-18b7be-f9f7f0 {
}
.tailSection-18b7be-f9f7f0:after {
	content: '';
	display: block;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-18b7be.png) repeat-x bottom center #f9f7f0;
	background-size: auto 20px;
}

.tailSection-f9f7f0-ffffff {
}
.tailSection-f9f7f0-ffffff:after {
	content: '';
	display: block;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-f9f7f0.png) repeat-x bottom center #fff;
	background-size: auto 20px;
}
.tailSection-f9f7f0-072a40 {
}
.tailSection-f9f7f0-072a40:after {
	content: '';
	display: block;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-f9f7f0.png) repeat-x bottom center #072a40;
	background-size: auto 20px;
}
.tailSection-f9f7f0-18b7be {
}
.tailSection-f9f7f0-18b7be:after {
	content: '';
	display: block;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-f9f7f0.png) repeat-x bottom center #18b7be;
	background-size: auto 20px;
}

.tailSection-ffffff-072a40 {
}
.tailSection-ffffff-072a40:after {
	content: '';
	display: block;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-ffffff.png) repeat-x bottom center #072a40;
	background-size: auto 20px;
}
.tailSection-ffffff-18b7be {
}
.tailSection-ffffff-18b7be:after {
	content: '';
	display: block;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-ffffff.png) repeat-x bottom center #18b7be;
	background-size: auto 20px;
}
.tailSection-ffffff-f9f7f0 {
}
.tailSection-ffffff-f9f7f0:after {
	content: '';
	display: block;
	height: 20px;
	background: url(/wp-content/themes/hello-elementor-child/img/bg-semicircle-ffffff.png) repeat-x bottom center #f9f7f0;
	background-size: auto 20px;
}










/* Destination ページにいる時：Destination フィルターを隠す */
body.tax-destination .wpc-filter-destination {
    display: none !important;
}

/* Trip Category ページにいる時：Trip Category フィルターを隠す */
body.tax-trip-category .wpc-filter-trip-category {
    display: none !important;
}

/* Trip Tag ページにいる時：Trip Tag フィルターを隠す */
body.tax-trip-tag .wpc-filter-trip-tag {
    display: none !important;
}