/* 1. 不要な重複ロゴを強制的に消去 */
#header_top .mobile_logo_text {
  display: none !important;
}

/* 2. メインのロゴを縦並びの構造にする */
#header_top .pc_logo_text {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* 中央寄せ */
  text-align: center !important;
  height: auto !important;
}

/* 3. キャッチフレーズを「一つだけ」ロゴの下に添える */
#header_top .pc_logo_text::after {
  content: "熟成を愛し、テックを纏う。" !important;
  display: block !important;
  font-family: "Noto Serif JP", serif !important;
  font-size: 11px !important;            /* 上品な小ささ */
  letter-spacing: 0.25em !important;      /* 高級感のある字間 */
  color: #8b8c7a !important;             /* ミスティ・オリーブ */
  font-weight: 300 !important;
  margin-top: 10px !important;            /* ロゴとの適切な距離 */
  opacity: 1 !important;
  text-transform: none !important;
}

/*//////////////////////////////////////////////
 * google翻訳をデバイスの時だけ上に表示
 ////////////////////////////////////////////*/

/* スマホ・デバイス表示時 */
@media screen and (max-width: 768px) {
    /* 1. 位置をロゴの右側に配置 */
    #google_translate_element {
        position: absolute !important;
        top: 12px !important;    /* ロゴの高さに合わせて微調整 */
        left: 175px !important;  /* ロゴのすぐ右に来るように調整 */
        z-index: 9999 !important;
        width: auto !important;
        display: block !important;
        visibility: visible !important;
    }

    /* 2. フッターに残った「language」の文字（タイトル）のみ消去 */
    .widget-title,
    #google_translate_element > span {
        display: none !important;
    }
	

    /* 3. プルダウンのデザイン（Googleロゴが見える状態を維持） */
    .goog-te-gadget-simple {
        background-color: rgba(255, 255, 255, 0.7) !important; /* 少し透かして馴染ませる */
        border: 1px solid #d1d1bc !important;
        padding: 2px 6px !important;
        font-size: 10px !important;
        border-radius: 2px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* 4. Googleロゴやテキストはそのまま表示（消さない） */
    .goog-te-gadget img {
        display: inline-block !important;
        margin-left: 4px !important;
        vertical-align: middle !important;
    }
}

/* PC表示ではフッターの自然な位置に戻す */
@media screen and (min-width: 769px) {
    #google_translate_element {
        position: static !important;
        display: block !important;
        margin: 20px auto !important;
        text-align: center !important;
    }
}

/*==================================================
  1. 共通設定：ロゴ・ヘッダー
==================================================*/
/* 明朝体ロゴ */
html body #header_logo .logo_text,
html body #header_logo .logo_text a,
html body .p-logo__text,
html body [class*="logo_text"] {
    font-family: "Times New Roman", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif" !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    color: #222 !important;
    font-style: normal !important;
    text-transform: none !important;
}


/* ヘッダー・メニュー配色 */
#header, .p-global-nav, #global_menu {
    background-color: #ffffff !important;
}

#global_menu .main_title, 
.p-global-nav__link .main_title,
#global_menu ul li a {
    color: #333333 !important;
    font-weight: 600 !important;
    letter-spacing: 0.15em !important;
    opacity: 1 !important;
    transition: all 0.3s ease;
}

#global_menu .sub_title, 
.p-global-nav__link .sub_title {
    color: #666666 !important;
    font-size: 10px !important;
}








/* メインコンテンツの背景を白に戻す */
body, 
#main, 
#l-mainContent, 
.l-container {
    background-color: #ffffff !important;
}

/* メインコンテンツの背景を白に戻す */
body, 
#main, 
#l-mainContent, 
.l-container {
    background-color: #ffffff !important;
}

/* サイドバーの背景を白に戻す */
aside.l-sidebar, 
#sidebar, 
.l-sidebar, 
#side_col {
    background-color: #ffffff !important;
    backdrop-filter: none !important; /* 透明感の設定も解除 */
    -webkit-backdrop-filter: none !important;
}

/* 記事一覧の背景を白に戻す */
.p-postList__item, 
.w-main-box, 
.c-widget {
    background-color: #ffffff !important;
}

/* 記事一覧の背景を白に戻す */
.p-postList__item, 
.w-main-box, 
.c-widget {
    background-color: #ffffff !important;
}

/* 「おすすめ記事2」などのブロック背景を白に強制 */
.index_post_list_wrap,
.index_post_list_wrap.bottom,
#main_contents div[class*="post_list_wrap"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* その中にある記事カードの背景も白に */
.post_list_item,
.p-postList__item {
    background-color: #ffffff !important;
}

/* メインコンテンツ全体の背景を白に固定 */
#main_contents,
#l-mainContent {
    background-color: #ffffff !important;
}

/* 1. 小さな記事リスト（article.item）の背景をグレーに */
article.item,
.p-postList__item.-layout-list,
.post_list_item {
    background-color: #ffffff !important; /* ミスト・シルバー */
    border-radius: 8px !important;
    padding: 10px !important;
}

/* 2. その中の文字が読みづらかったら濃くする */
article.item .post_title,
article.item .p-postList__title {
    color: #333333 !important;
}

/* 3. 「おすすめ記事2」の見出しの背景もグレーに統一 */
.index_post_list_title.design_headline1 {
    background-color: #eef1f4 !important;
    color: #444444 !important;
}


/*==================================================
  2. サイドバー・フッター
==================================================*/

/* 1. 「最近の記事」「おすすめ記事」の見出し（水色のバーがある部分）の文字色 */
h3.design_headline1, 
.post_list_title h3 {
    color: #333333 !important;
}

/* 2. 記事カード内のタイトル文字色 */
.p-postList__title, 
.p-postList__title a,
.post_list_item .post_title {
    color: #333333 !important;
}

/* 3. サイドバーのウィジェットタイトル（language, search等） */
.c-widget__title,
.side_col .widget_title {
    color: #444444 !important;
}

/* 4. サイドバー内のリンク文字（カテゴリー等） */
.side_col a, 
.side_col li {
    color: #444444 !important;
}

/* 1. サイドバー内のすべてのテキスト（span, a, li等）を強制的に濃いグレーにする */
#side_col .side_col_inner span,
#side_col .side_col_inner a,
#side_col .side_col_inner li,
.widget_headline span {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important; /* 強制塗りつぶし */
    opacity: 1 !important;
}

/* 2. 「カテゴリー」などの見出し部分をさらに特定 */
h3.widget_headline span,
.widget_title span {
    color: #222222 !important; /* 見出しはより濃く */
    font-weight: bold !important;
}

/* 3. サイドバー全体の基本色 */
#side_col {
    color: #333333 !important;
}

/* SWELLのフッター内にあるすべてのテキスト、スパン、リンクを強制的に黒く染める */
footer.l-footer a, 
footer.l-sidebar a, 
.l-footer .footer_menu li a, 
.l-footer .footer_menu li a span {
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ロゴテキストも個別に強制指定 */
.l-footer .f-logo_text, 
.l-footer .footer_copy {
    color: #222222 !important;
    opacity: 1 !important;
}

/* 検証ツールで書き換えた #footer a の設定をサイトに固定する */
#footer a {
    color: #333333 !important;
}

/* SNSアイコンも同じ色にする場合 */
#footer i, 
#footer .c-iconList__link {
    color: #333333 !important;
}

/* コピーライト（一番下の小さな文字）も白からグレーにする場合 */
.footer_copy {
    color: #666666 !important;
}
/*==================================================
  3. 記事一覧：画像・動画の16:9完全固定
==================================================*/
/* 画像・動画の外枠（比率をここで作る） */
#index_post_list .image_wrap {
    position: relative !important;
    width: 100% !important;
    padding-top: 56.25% !important; /* 横16:縦9の比率 */
    height: 0 !important;
    overflow: hidden !important;
    background: #f0f0f0;
}

/* 枠の中の中身（画像・動画）を吸着させる */
#index_post_list .image,
#index_post_list .image_inner,
#index_post_list .fvp-video-wrapper,
#index_post_list .image video,
#index_post_list .image iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important; /* 枠に合わせてクロップ */
    display: block !important;
}

/* 静止画（image_inner）の設定 */
#index_post_list .image_inner {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: 1 !important;
}

/* タイトルエリアの設定 */
#index_post_list .title_area {
    position: relative !important;
    z-index: 10;
    background: #fff;
    padding: 15px !important;
}

/* スマホ表示（767px以下）のレイアウト崩れ防止 */
@media screen and (max-width: 767px) {
    #index_post_list .title_area {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        clear: both !important; /* 画像の下に強制的に回り込ませる */
    }

    #index_post_list .item {
        margin-bottom: 30px !important;
        height: auto !important;
    }
}

/*==================================================
  4. パンくず・その他微調整
==================================================*/
#bread_crumb ul.clearfix, .p-breadcrumb ul {
    background-color: #ffffff !important;
    border: none !important;
}

#bread_crumb ul li a, .p-breadcrumb__item a {
    color: #777777 !important;
    font-size: 11px !important;
}

/* Google翻訳（language）の幅調整 */
.goog-te-gadget, .goog-te-combo {
    width: 100% !important;
    max-width: 100% !important;
}




/*==================================================
 目次デザイン LuckyWP Table of Contents：海外誌風・最終デザイン
==================================================*/

/* 1. 全ての初期スタイルを完全リセット */
div.lwptoc, 
div.lwptoc_i, 
div.lwptoc_i ul, 
div.lwptoc_i li, 
div.lwptoc_i ul li,
div.lwptoc_item {
    all: unset !important;
    box-sizing: border-box !important;
}

/* 2. 目次の外枠：スモーキー・オリーブのアクセント */
div.lwptoc {
    display: block !important;
    background-color: #f9f9f9 !important;
    border-left: 4px solid #4a4e41 !important;
    padding: 30px !important;
    margin: 40px 0 !important;
    width: 100% !important;
    float: none !important;
}

/* 3. タイトルエリア：大文字・広めの字間でモダンに */
div.lwptoc_header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    border-bottom: 1px solid #eee !important;
    padding-bottom: 15px !important;
}

div.lwptoc_title {
    font-size: 13px !important; /* 小さめが上品 */
    font-weight: 500 !important;
    color: #4a4e41 !important;
    text-transform: uppercase !important; /* CONTENTSに強制 */
    letter-spacing: 0.35em !important; /* 海外誌風の広い字間 */
    font-family: 'Montserrat', sans-serif !important;
}

/* 開閉ボタンは不要なので非表示 */
a.lwptoc_toggle {
    display: none !important;
}

/* 4. リスト全体 */
div.lwptoc_i ul {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. 各項目：数字とテキストの距離を微調整 */
div.lwptoc_item {
    display: block !important;
    margin-bottom: 15px !important; /* 行間を少し広げてゆとりを */
    padding-left: 0 !important;
    line-height: 1.6 !important;
}

div.lwptoc_item a {
    all: unset !important;
    display: inline !important;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-family: "Times New Roman", "Shippori Mincho", serif !important;
    letter-spacing: 0.05em !important;
    padding-left: 8px !important; /* 数字との間に心地よい距離を */
    transition: color 0.3s ease !important;
    cursor: pointer !important;
}

/* ホバー時の優雅な変化 */
div.lwptoc_item a:hover {
    color: #4a4e41 !important;
}

/* 階層がある場合の字下げ */
div.lwptoc_item.lwptoc_item_level_2 { margin-left: 18px !important; }
div.lwptoc_item.lwptoc_item_level_3 { margin-left: 36px !important; }

/*==================================================
  LuckyWP 目次にティファを登場させる
==================================================*/
/*
/* --------------------------------------------------
   3. 記事ごとに目次の「画像だけ」を変える（シンプル設定）
   -------------------------------------------------- */

/* デフォルト（指定がない時：ドバイのラクダ） */
.lwptoc_header::after {
    background-image: url('https://honjikomi.jp/wp-content/uploads/2026/04/pictoart_1776862104467.png') !important;
}

/* 韓国の記事（ID:485など） */
.postid-670 .lwptoc_header::after {
    background-image: url('https://honjikomi.jp/wp-content/uploads/2026/04/대평밥상（テピョンバプサン）.webp') !important;
}

/*OIAの記事（ID:485など） */
.postid-42 .lwptoc_header::after {
    background-image: url('https://honjikomi.jp/wp-content/uploads/2026/04/OIA.webp') !important;
}

/*結婚のメリット・デメリットの記事（ID:485など） */
.postid-859 .lwptoc_header::after {
    background-image: url('https://honjikomi.jp/wp-content/uploads/2026/04/名称_未_設定-8.webp') !important;
}

/*ティファちゃん、久しぶり。あなたがいなくなってから1ヶ月、今伝えたいこと */
.postid-1155 .lwptoc_header::after {
    background-image: url('https://honjikomi.jp/wp-content/uploads/2026/06/ティファ目次用.webp') !important;
}



/* --------------------------------------------------
1. 目次のヘッダー（Contentsがある場所）を基準点にする
   -------------------------------------------------- */
/* 
 */
.lwptoc_header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

/* 2. アイコンの共通設定（ここ一箇所で全てを制御します） */
.lwptoc_header::after {
    content: "" !important;
    position: relative !important; /* 絶対位置ではなく相対位置に変更 */
    display: inline-block !important;
    
    /* サイズ設定 */
    width: 150px !important;
    height: 150px !important;
    
    /* 位置の微調整：Contentsの文字からの距離 */
    margin-left: -37px !important; 
    margin-top: -95px !important; /* 上下にずらしたい場合はここを調整 */

    /* 背景の設定 */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: bottom center !important;
    z-index: 10 !important;

    /* アニメーション：その場でゆらゆら揺れる（お散歩で迷子にならない設定） */
    animation: iconRock 3s ease-in-out infinite;
}



/* --------------------------------------------------
   4. アニメーション：その場で可愛く揺れる
   -------------------------------------------------- */
@keyframes iconRock {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}




/* //////////////////////////////////////Googleマップをレスポンシブ（16:9）にする設定 ///////////////////////////////*/
.responsive-map {
    position: relative;
    padding-bottom: 56.25%; /* 16:9の比率 */
    height: 0;
    overflow: hidden;
    margin: 30px 0; /* 前後の余白 */
    border: 1px solid #eee; /* 薄い枠線で清潔感を出す */
}

.responsive-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    filter: grayscale(20%); /* ほんの少し彩度を落とすと海外風でおしゃれになります */
}




/* /////////////////////////////////
 * 情報のリスト上品に1
 * //////////////////////////// */
.hotel-info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0;
    font-family: "Times New Roman", "Shippori Mincho", serif;
}
.hotel-info-table th {
    width: 30%;
    text-align: left;
    padding: 15px;
    border-bottom: 1px solid #eee;
    color: #4a4e41; /* スモーキー・オリーブ */
    font-size: 14px;
}
.hotel-info-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #555;
}


/*//////////////////////////////// 
 * テーブルの中のリンク文字を強制的に表示させる //////////////////////////////////////*/
.hotel-info-table td a {
    color: #4a4e41 !important; /* スモーキー・オリーブ */
    display: inline-block !important;
    text-decoration: underline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ついでにテーブル全体の枠線も少し整えます */
.hotel-info-table {
    border: 1px solid #eee !important;
}


/*==================================================
  文中の写真・動画キャプション（figcaption）
==================================================*/
/* 1. 全体：中央揃えにして、写真との距離を整える */
.image-with-caption figcaption,
figcaption {
    text-align: center !important;
    margin-top: 12px !important;
    margin-bottom: 30px !important;
    padding: 0 10% !important; /* 長い時に左右に少し余白を作る */
}

/* 2. 文字のデザイン：細く、小さく、上品に */
.image-with-caption figcaption,
figcaption {
    font-size: 13px !important; /* 少し小さめがプロっぽい */
    color: #666666 !important; /* 濃すぎないグレー */
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.6 !important;
    font-family: "Times New Roman", "Shippori Mincho", serif !important;
}

/* 3. 海外メディア風：頭に小さな飾り（ドットやライン）を入れる演出 */
.image-with-caption figcaption::before,
figcaption::before {
    content: "—" !important; /* 繊細なダッシュを入れる */
    display: block !important;
    margin-bottom: 5px !important;
    color: #4a4e41 !important; /* スモーキー・オリーブをアクセントに */
    opacity: 0.6;
}


/*==================================================
  【修正版】本文のリンクを守り、タイトル下のタグだけ消す
==================================================*/

/* 記事タイトルの下のタグ一覧を非表示にする */
.post_tag, 
.p-articleMetas__termList, 
.entry-footer .post_tags {
    display: none !important;
}



/* リスト形式の中の「説明文」部分だけ、リンクの装飾（下線と色）を消す */
.entry-content li {
    text-decoration: none !important;
    color: #333 !important; /* 通常の文字色 */
}

/* その中の「太字」や「特定の単語」だけに下線を残したい場合は個別に設定 */
.entry-content li a strong,
.entry-content li b {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}


/*////////////////////////////////// 1. ページトップボタン全体（円の部分）の背景色と線を調整 //////////////////////////////////*/
#return_top a, 
.pagetop a {
    background-color: #f4f4f0 !important; /* 以前決めた究極に薄いカーキアッシュ */
    border: 1px solid rgba(139, 140, 122, 0.3) !important; /* 薄いオリーブ線のエッジ */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; /* 軽い影で立体感を出す */
    opacity: 1 !important; /* 透明度を100%にしてクッキリさせる */
}

/* 2. 中の矢印（^）の色を見やすいオリーブアッシュにする */
#return_top a::before, 
.pagetop a::before, 
#return_top i, 
.pagetop i {
    color: #8b8c7a !important; /* ミスティ・オリーブ（#8b8c7a） */
    font-weight: bold !important; /* 少し太くして見やすく */
}

/* 3. マウスを乗せた時（ホバー）の反応 */
#return_top a:hover, 
.pagetop a:hover {
    background-color: #8b8c7a !important; /* 背景を濃いオリーブに */
}

#return_top a:hover::before, 
.pagetop a:hover::before {
    color: #ffffff !important; /* 矢印を白にして反転 */
}

/*//////////////////////////////////// 
 * 記事（特定の）のアイキャッチ画像を消す
 * Featured Video Plusとの干渉を無くす必要はIDを追記していく！！！ ////////////////////////////////*/
.postid-3 #post_image,
.postid-3 .post_image {
    display: none !important;
}
.postid-956 #post_image,
.postid-956 .post_image {
    display: none !important;
}