/*
Theme Name: Papapa Simple Theme
Theme URI: https://papapa.baby/
Description: パパパ作
Version: 1.4
Author: PAPAPA
Author URI: https://papapa.baby/
*/


a{ color: #77C4D3; text-decoration: underline;}
a:hover{ color: #77C4D3; }
a:visited{color:#77C4D3}
footer{
	background-color:#77C4D3;}
footer a{
	color:white !important;
	text-decoration:none;
}
nav h2{display:none;}
.main-box .blog_info ul li.cal{
	background-image:url(/wp-content/uploads/2022/05/icon-calender.png);
	background-repeat:no-repeat;
	background-size: auto 70%;
    background-position: left center;
}
.main-box .blog_info ul li.cat{
	background-image:url(/wp-content/uploads/2022/05/icon-category.png);
	background-repeat:no-repeat;
	background-size: auto 70%;
    background-position: left center;
}
p.home-btn{
display: block;
    width: 280px;
    height: 50px;
    line-height: 50px;
margin: 70px auto 0px;
    text-align: center;
}
p.home-btn a{
background-color: #3a7884;
    color: white;
    display: block;
    text-decoration: none;
    border-radius: 25px;
    border: 1px solid #00000088;
    border-bottom: 3px solid #00000088;
}
p.home-btn a:hover{
	background-color:#77C4D3;
}

/* 武内DBテスト */
 * .responsive-table-wrap {
    overflow-x: auto; /* 横方向にはみ出した場合にスクロールバーを表示 */
    -webkit-overflow-scrolling: touch; /* iOS Safari でのスクロールをスムーズにする */
    margin-bottom: 20px; /* 必要に応じてテーブルの下に余白を追加 */
}

/* テーブル自体の基本的なスタイル（既存のテーマスタイルを上書きする場合） */
.responsive-table-wrap table { /* .responsive-table-wrap クラスの要素内の <table> にのみ適用 */
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* ★あなたのデータテーブルに最小幅を設定★ */
}

th, td {
    padding: 8px; /* セルの内側の余白 */
    border: 1px solid #ddd; /* セルの境界線 */
    text-align: left; /* テキストを左寄せに */
    vertical-align: top; /* セル内の内容を上部に揃える */
    word-wrap: break-word; /* 長い単語が行の途中で改行されるようにする */
    white-space: normal; /* セル内の空白を通常通り扱う（改行を許可） */
}
/* jQuery UI Datepicker のテーブル要素に対するスタイル */
/* Datepicker のテーブルは .ui-datepicker というクラスが付いています */
.ui-datepicker table {
    width: auto !important; /* Datepicker のテーブルは自動幅に戻す */
    border-collapse: collapse !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: auto !important; /* ★ここが重要★ Datepicker のテーブルの min-width を解除！ */
}

/* Datepicker のセルとヘッダーのスタイル */
.ui-datepicker td,
.ui-datepicker th {
    padding: 0.2em 0.3em !important;
    border: none !important; /* 例としてボーダーをなくすか、微調整 */
    text-align: center !important;
    height: auto !important;
    width: auto !important;
    line-height: normal !important;
    min-width: auto !important; /* ★ここも重要★ セル単位の min-width も解除！ */
}

/* Datepicker の日付の数字を囲むリンク要素のスタイル */
.ui-datepicker td a {
    display: block !important;
    padding: 0.2em 0.3em !important;
    text-decoration: none !important;
    color: #333 !important;
    /* その他、背景色やホバー時の色などを調整 */
}

/* 武内DBテストここまで */

/* ランキングテストここから */
/* Font Awesomeで空の星（ベース）と塗りつぶしの星（::before）を重ねて表示 */

.star-rating {
    display: inline-block;
    position: relative;
    width: 112.5px; /* 5つの星の合計幅 */
    height: 20px;
    overflow: hidden; 
	
	/* Font AwesomeのアイコンがHTML内に直接出力されるため、間隔をリセット */
    letter-spacing: normal; /* <--- これを追加 */
    
    /* ベースとなる空の星（FA Regular: font-weight 400） */
    content: '\f005 \f005 \f005 \f005 \f005';
    font-family: 'Font Awesome 7 Free';
    font-weight: 400; 
    font-size: 20px;
    line-height: 20px;
    color: #ccc; /* 空の星の色 */
    white-space: nowrap;
}

/* 塗りつぶし部分（満ち欠けの表現） */
.star-rating::before {
    content: '\f005 \f005 \f005 \f005 \f005'; /* 塗りつぶしの星（FA Solid: font-weight 900） */
    font-family: 'Font Awesome 7 Free';
    font-weight: 900; 
    font-size: 20px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;
    
    /* PHPから受け取った幅を適用 */
    width: var(--rating-width); 
    
    color: #ffc107; /* 塗りつぶしの星の色 */
    overflow: hidden; 
    white-space: nowrap;
}

/* 総合点数のテキスト表示 */
.star-rating .score-text {
    position: absolute;
    right: -30px; 
    top: 0;
    font-weight: bold;
    color: #333;
    font-size: 14px;
    line-height: 20px;
}

/* -------------------------------------------
   ランキング表 横スクロール制御の最終修正
   ------------------------------------------- */

/* ラッパーDIVを再度保証 */
.ranking-table-wrap {
    width: 100%; 
    overflow-x: auto !important; /* 強制的に有効化 */
}

.ranking-table {
    /* テーブルの最小幅を保証し、モバイルで必ずはみ出すようにする */
    min-width: 650px; /* ★ モバイル表示時にも適用されるように、メディアクエリの外に記述 */
    border-collapse: collapse;
}

/* 任意の修正：画像と店舗名のセルが小さくなりすぎないように */
.ranking-table td[data-label="店舗名"] {
    min-width: 150px; 
}

/* ランキング表の画像比率を強制的に4:3にリセット */

.ranking-table .ranking-thumb {
    /* 1. インラインスタイルよりも優先度を上げて上書き */
    width: 150px !important;    /* 最終的に表示したい幅 */
    height: 113px !important;   /* 最終的に表示したい高さ */
    
    /* 2. 正方形の強制をリセット */
    aspect-ratio: auto !important; 

    /* 3. 画像がはみ出さず、比率を維持してコンテナ内に収める */
    object-fit: contain !important; 
    
    /* 4. インラインスタイルの height, width が効きすぎないようにリセット */
    max-width: 100% !important;
}
/* ランキングテストここまで */