/*!
Theme Name: Blank
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: blank
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Blank is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

body {
	margin: 0;
}


img {
	border-style: none;
	height: auto;
	max-width: 100%;
}
ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}
p {
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
	background-color: #fe6597;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}
.sidebar-title {
	background-color: #404b7a;
}

/* ↓↓↓Bootstrap関連スタート↓↓↓ */
/* 位置を移動 */
.carousel-indicators {
  bottom: -50px;
}
/* インジケーターのサイズを変更 */
.carousel-indicators [data-bs-target] {
	width: 150px;
}
/* ↑↑↑Bootstrap関連エンド↑↑↑　*/
/*  ショートコード関連
--------------------------------------------- */
/*吹き出し（会話形式）[say]*/
.say {
  display: table;
  overflow: hidden;
  width: 100%;
  margin: 1.5em 0;
}

.faceicon {
  display: table-cell;
  width: 100px;
  padding-right: 20px;
  text-align: center;
  vertical-align: top;
}

.faceicon img {
  width: 100%;
  height: auto;
  border: solid 3px #eaedf2;
  border-radius: 50%;
}
.faceicon span {
  font-size: 11px;
  font-weight: bold;
  margin-top: 8px;
  line-height: 1.4;
  display: block;
}
.chatting {
  display: table-cell;
  position: relative;
  width: calc(100% - 100px);
  font-size: 0.95em;
  vertical-align: top;
}

.sc {
  display: inline-block;
  text-align: left;
  padding: 13px;
  border: solid 2px #d5d5d5;
  border-radius: 12px;
  background: #fff;
  word-break: break-word;
}
.sc:before {
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -23px;
  border: 12px solid transparent;
  border-right: 12px solid #d5d5d5;
  content: "";
}
.sc:after {
  display: inline-block;
  position: absolute;
  top: 18px;
  left: -20px;
  border: 12px solid transparent;
  border-right: 12px solid #fff;
  content: "";
}
.sc p {
  margin: 5px 0;
  padding: 0;
}

/*吹き出し（右）*/
.right {
  text-align: right;
}
.right .faceicon {
  padding: 0 0 0 20px;
}
.right .sc:before,
.right .sc:after {
  right: -23px;
  left: auto;
  border: 12px solid transparent;
  border-left: 12px solid #d5d5d5;
}
.right .sc:after {
  right: -20px;
  border-left-color: #fff;
}

/***見出し***/

.midasi001 {
    background-color: #fe6597; /* 背景色をピンクに設定 */
    color: black; /* 文字色を黒に設定 */
    padding: 10px; /* 内側の余白を設定 */
    font-size: 1.5em; /* フォントサイズを調整 */
    font-weight: bold; /* 太字にする */
    display: block; /* ブロック要素にする */
    width: 100%; /* 幅を100%に設定して右端まで伸ばす */
    box-sizing: border-box; /* パディングを含めて幅を計算する */
}

.midasi002 {
    font-size: 1.5em; /* フォントサイズを調整 */
    font-weight: bold; /* 太字にする */
    color: black; /* 文字色を黒に設定 */
    border-bottom: 2px solid #fe6597; /* 下線の色を#fe6597に設定 */
    padding-bottom: 5px; /* 下線と文字の間に余白を設定 */
    margin-bottom: 10px; /* 他の要素との間隔を調整 */
}

.custom-table {
    width: 100%; /* テーブルの幅を調整 */
    border-collapse: collapse; /* セルの間隔をなくす */
    margin: 10px 0; /* テーブルの上下に余白を追加 */
    font-size: 1em; /* フォントサイズを調整 */
    font-family: Arial, sans-serif; /* フォントを指定 */
}

.custom-table th, .custom-table td {
    border: 1px solid #ddd; /* セルの境界線を設定 */
    padding: 10px; /* セル内の余白を設定 */
    text-align: left; /* テキストを左寄せに */
}

.custom-table th {
    background-color: #fe6597; /* ヘッダー部分の背景色 */
    color: white; /* ヘッダー部分の文字色 */
    font-weight: bold; /* ヘッダーを太字に */
    width: 30%; /* ヘッダーの幅を調整 */
}

.custom-table td {
    background-color: #fff; /* セルの背景色 */
    color: #333; /* セルの文字色 */
}

/* 赤文字 */
.bold-red {
    font-weight: bold;
    color: #e60033;
}

.buttongreen {
    text-align: center;
    background-color: #33CC00;
    padding: 10px;
    border-radius: 18px 18px 18px 18px;
    border-bottom: 5px solid #006600;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    margin-bottom:10px;
}
.buttongreen a {
    color: white;
    font-weight: bold;
    font-size: 120%;
}


/*add250210*/

.photobook-box h4{
	font-size: 1.1em;
  font-weight: bold;
}

.photobook-box a{
    text-decoration: none;
}

.photobook-outer-box {
    margin: 1.5em 0;
    padding:16px;
    border: double 4px #dbdbdb;
    background: #fff;
}

.photobook-inner-box{
    display:flex;
}

.photobook-img{
    width:100px;
}


.photobook-info{
    margin-left:2em;
}

.photobook-name a{
    margin-bottom: 3px;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.5;
    color:#474747;
}

.photobook-btn-fanza{
    display: inline-block;
    margin-top: 15px;
    padding: 8px 16px;
    border-radius: 3px;
    background: #f74fb1;
    color:#fff;
    box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25);
    font-size: 0.95em;
    font-weight: bold;
    vertical-align: middle;
    transition: 0.3s ease-in-out;
}

.photobook-btn-fanza a{
    font-size:16px;
    color:#fff;
}

.pinch-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 104px; /* 80pxの30%増し */
        padding: 10px;
        background: rgba(200, 200, 200, 0.7); /* 薄いグレー */
        border-radius: 10px;
        opacity: 1;
        transition: opacity 0.5s ease;
        z-index:9999;
    }
    

/*-------------------------
  ブログカード
-------------------------*/
.blog-card {
  background: #fbfaf8;
	border:1px solid #ddd;
	word-wrap:break-word;
	max-width:100%;
	border-radius:5px;
	margin: 20px;
  /* sp用 ※4 */
}
.blog-card:hover {
  background: #fee;
}
.blog-card a {
  text-decoration: none;
}
.blog-card-title {
	color: #337ab7;
	display: block;
}
.blog-card-thumbnail {
	float:left;
	padding:10px;
}
.blog-card-thumbnail img {
	display: block;
	padding: 0;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.blog-card-content {
	line-height:120%;
}
.blog-card-title {
	padding:10px 10px 5px 0;
	font-size:120%;
  font-weight: bold;
  line-height: 1.5em;
	font-size:15px;
}
.blog-card-excerpt {
	color:#333;
	margin:0 10px 10px;
  line-height: 1.5em;
	font-size:12px;
}
.blog-card .clear {
  clear: both;
}
blockquote.block002 p{margin:0;}
blockquote.block002{
background-color: #f7fffe;
padding: 1.3em 1em 0.3em;
position: relative;
border: 2px solid #d7d7d7;
margin: 0 1em 1.5em;
}

blockquote.block002:before{
content: "“";
font-size: 300%;
line-height: 1em;
font-family: "ＭＳ Ｐゴシック",sans-serif;
color: #999;
position: absolute;
left: 0;
top: 0;
}
blockquote.block002 a,
blockquote.block002 a:hover{
 color:blue;
}
blockquote.block002:after{
content: "”";
font-size: 300%;
line-height: 0em;
font-family: "ＭＳ Ｐゴシック",sans-serif;
color: #999;
position: absolute;
right: 0;
bottom: 0;
}
.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 3px #f36b6b;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #f36b6b;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}

/* Visual Link Preview カスタマイズ */

/* カード全体のデザイン */
.vlp-link-preview {
    display: flex;
    align-items: center;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 12px;
    background-color: #f9fafb;
    width: 100%;
    max-width: 600px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease-in-out;
}

.vlp-link-preview:hover {
    background-color: #eef2f7;
}

/* サムネイル画像 */
.vlp-link-preview-thumbnail img {
    width: 100px;
    height: 60px;
    border-radius: 5px;
    object-fit: cover;
    margin-right: 12px;
}

/* カード内のテキストエリア */
.vlp-link-preview-content {
    display: flex;
    flex-direction: column;
}

/* タイトル（大きめ） */
.vlp-link-preview-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #333;
}

/* 説明文（小さめ＆薄い色） */
.vlp-link-preview-description {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

/* 「あわせて読みたい」バッジ */
.vlp-link-preview-header {
    background-color: #90c8a5;
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 8px;
}

/* オレンジボタン */
.button_orenge {
    display: block; /* ブロック要素化（中央寄せ） */
    width: 70%; /* ボタン幅を7割に */
    max-width: 400px; /* 最大幅を設定（調整可能） */
    margin: 0 auto; /* 中央寄せ */
    background-color: #f7931e; /* オレンジ色 */
    color: #ffffff !important; /* 文字色を白に（確実に適用） */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    padding: 16px 24px; /* 上下16px, 左右24px（均等に調整） */
    border-radius: 5px; /* 角丸 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: none;
    box-shadow: 0px 4px 6px rgba(200, 80, 10, 0.6); /* 濃いオレンジの影 */
}

.button_orenge:hover {
    background-color: #e6831c; /* ホバー時に少し濃いオレンジ */
    box-shadow: 0px 5px 8px rgba(180, 60, 0, 0.7); /* ホバー時の影を強調 */
    color: #ffffff !important; /* ホバー時も白色を維持 */
}

/* あわせて読む */
.read-more-box {
    border: 3px solid #73bc9b; /* 枠線を太くする */
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    background-color: #f6f8fa;
    max-width: 600px;
    position: relative;
}

.read-more-badge {
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: #73bc9b;
    color: white;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 4px; /* 角を少し丸めた四角形に */
    font-weight: bold;
}

.read-more-thumbnail {
    width: 100px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
    margin-right: 12px;
}

.read-more-content {
    flex-grow: 1;
}

.read-more-title {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.read-more-description {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    word-break: break-word;
}

/* グラフ */
        .pie-chart {
            --size: 100px;
            --background-color: #ddd;
            --foreground-color: #e63946;
            --value: 0;
            
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: bold;
            color: var(--foreground-color);
            position: relative;
            background: conic-gradient(
                var(--foreground-color) calc(var(--value) * 3.6deg),
                var(--background-color) 0
            );
        }

        .pie-chart::before {
            content: "";
            position: absolute;
            width: 70px;
            height: 70px;
            background: white;
            border-radius: 50%;
        }

        .chart-container {
            position: relative;
            display: inline-block;
            text-align: center;
        }

        .chart-text {
            position: absolute;
            top: 45%; /* 少し上に調整 */
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 18px;
            font-weight: bold;
            color: #e63946;
        }

/*-------------------------
  黄色と赤色のリンク
-------------------------*/
.button-container {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.button-link {
    display: block; /* ← block に変更で横幅全体に */
    width: 100%; /* ← 親幅に合わせる（100%） */
    padding: 20px 0; /* ← 横方向のpaddingをなくす */
    font-size: 20px;
    font-weight: bold;
    color: #000000 !important;
    background-color: #FFFF00;
    text-decoration: none;
    border-radius: 40px;
    box-shadow: 0px 6px 0px #A09A00;
    transition: all 0.3s ease-in-out;
    position: relative;
    box-sizing: border-box; /* paddingを幅に含める */
}

.button-link:hover {
    background-color: #FF0000;
    color: white !important;
    box-shadow: 0px 6px 0px #800000;
}

.button-link::after {
    content: '\25B6';
    font-size: 20px;
    margin-left: 10px;
    color: inherit;
}

/*-------------------------
  オレンジ系ボタンリンク（代替版）
-------------------------*/
.button-orange-alt {
    display: block;
    width: 100%;
    padding: 20px 0;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff !important;
    background-color: #f7931e; /* 明るいオレンジ */
    text-decoration: none;
    border-radius: 40px;
    box-shadow: 0px 6px 0px #c76d00; /* 濃いオレンジ影 */
    transition: all 0.3s ease-in-out;
    position: relative;
    box-sizing: border-box;
}

.button-orange-alt:hover {
    background-color: #e07c00; /* ホバー時は濃いオレンジに */
    color: #ffffff !important;
    box-shadow: 0px 6px 0px #a85700;
}

.button-orange-alt::after {
    content: '\25B6';
    font-size: 20px;
    margin-left: 10px;
    color: inherit;
}

/*-------------------------
 中央再生
-------------------------*/
  .video-thumb {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 800px;
  }

  .video-thumb img {
    width: 100%;
    display: block;
  }

  .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
    font-size: 40px;
    color: white;
    pointer-events: none;
  }

  .video-thumb a {
    display: block;
    text-decoration: none;
    position: relative;
  }

/*-------------------------
 吹き出し
-------------------------*/
.bubble {
  position: relative;
  color: #333;
  padding: 15px 20px;
  border-radius: 20px;
  max-width: 400px;
  font-size: 14px;
  line-height: 1.5;
  margin: 20px;
  border: 1px solid #ccc;
}

/* 左吹き出し：ミントグリーン */
.bubble.left {
  background: #e0f7fa;
  margin-left: 20px;
}

.bubble.left::before {
  content: '';
  position: absolute;
  top: 18px;
  left: -9px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #e0f7fa;
}

/* 右吹き出し：黄～オレンジ */
.bubble.right {
  background: #ffe0b2;
  margin-right: 20px;
  margin-left: auto;
	text-align: left; /* ← これを追加 */
}

.bubble.right::before {
  content: '';
  position: absolute;
  top: 18px;
  right: -9px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #ffe0b2;
}

/*-------------------------
 あらすじbox
-------------------------*/
    .summary-box {
      border: 1px solid #ddd;
      background-color: #f9f9f9;
      padding: 20px;
      max-width: 600px;
      font-family: "Meiryo", sans-serif;
      line-height: 1.6;
      color: #333;
      position: relative;
    }

    .summary-box::before {
      content: "あらすじ";
      position: absolute;
      top: -12px;
      left: 10px;
      background-color: #58c3d1;
      color: white;
      padding: 3px 10px;
      border-radius: 4px;
      font-size: 14px;
    }

/*-------------------------
 評価
-------------------------*/
    .star-rating {
      display: inline-block;
      font-size: 2rem;
      position: relative;
      font-family: Arial, sans-serif;
    }

    .star-rating::before {
      content: '★★★★★';
      color: #ccc;
    }

    .star-rating::after {
      content: '★★★★★';
      color: gold;
      position: absolute;
      top: 0;
      left: 0;
      width: calc(var(--rating) * 20%);
      overflow: hidden;
      white-space: nowrap;
    }

.speech-box {
  position: relative;
  background: #fff;
  border: 3px solid #ccc;
  border-radius: 10px;
  padding: 15px 20px;
  max-width: 500px;
  font-size: 24px;
  line-height: 1.5;
  color: #222;
  margin: 30px;
  box-sizing: border-box;
}

/* 左しっぽ付き */
.speech-box.left {
  margin-left: 40px;
}

.speech-box.left::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #fff;
  z-index: 1;
}

.speech-box.left::after {
  content: '';
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-right: 22px solid #ccc;
  z-index: 0;
}

/* 右しっぽ付き */
.speech-box.right {
  margin-left: auto;
  margin-right: 40px;
  text-align: left; /* 左揃え */
}

.speech-box.right::before {
  content: '';
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #fff;
  z-index: 1;
}

.speech-box.right::after {
  content: '';
  position: absolute;
  right: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 22px solid #ccc;
  z-index: 0;
}


/*-------------------------
 簡単吹き出し
-------------------------*/
.balloon-left {
  position: relative;
  max-width: 600px;
  background: #fff;
  border: 2px solid #999;
  border-radius: 10px;
  padding: 15px;
  margin: 20px 0;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  font-family: sans-serif;
}

/* 余白の原因となるpタグのデフォルトmarginをリセット */
.balloon-left p {
  margin: 0;
}

/* 吹き出しの三角形 */
.balloon-left::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -12px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 12px solid #999;
}

.balloon-left::after {
  content: '';
  position: absolute;
  top: 20px;
  left: -10px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 10px solid #fff;
}

/*-------------------------
 五十音
-------------------------*/
.gojuon-wrapper {
  border: 1px solid #fe6597;
  padding: 1.5em 1em 1em; /* ← 上部にラベル分の余白を追加 */
  margin: auto;
  max-width: 100%;
  box-sizing: border-box;
  position: relative; /* ← ラベルを絶対位置で配置するため */
}

/* ✅ ラベル部分 */
.gojuon-label {
  position: absolute;
  top: -0.8em;
  left: 0.8em;
  background: #fe6597;
  color: black;
  font-weight: bold;
  padding: 0.2em 0.6em;
  border-radius: 5px;
  font-size: 0.9em;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.gojuon-grid {
  display: grid;
  gap: 0.3em;
  font-size: 1.1em;
  text-align: center;
  font-family: sans-serif;
  grid-template-columns: repeat(12, 1fr); /* ✅ スマホ：12列 */
}

.gojuon-grid span {
  display: inline-block;
  white-space: nowrap;
  padding: 0.2em 0;
}

.gojuon-grid span.blank {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

/* ✅ PCだけ18列×4行に変更 */
@media screen and (min-width: 768px) {
  .gojuon-grid {
    grid-template-columns: repeat(18, 1fr);
    font-size: 0.95em;
    gap: 0.2em;
  }
}

.dropdown:hover > ul {
    display: block;
}
.dropdown:hover > .dropdown-menu {
  display: block !important;
}

.star5_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC; /* グレーカラー 自由に設定化 */
    /*font-size: 30px; フォントサイズ 自由に設定化 */
}

.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
}

.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32; /* イエローカラー 自由に設定化 */
}

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */

/***枠内***/
.rate-box2 {
    margin-bottom: 1em;
    font-size: 15px;
    border: solid 2px #e6e6e6;
}
.rateline {
    padding: 7px 4px 7px 10px;
}
.rate-thing {
    display: inline-block;
    padding-right: 10px;
    width: calc(100% - 120px);
    max-width: 205px;
    font-weight: bold;
    vertical-align: middle;
}
.star5_rating:after {
    color: #ffb500!important;
}
.graycolor{background: #f3f3f3;}
.bluecolor{background: #e8f4ff;}
span.rateatai {
    color: #ddd;
}
.rate-star {
    display: inline-block;
    margin: 0;
    width: 120px;
    color: rgba(0, 0, 0, 0.15);
    vertical-align: middle;
}

/* 赤ボタン */

.buttonred {
    text-align: center;
    background-color: #FE2E2E;
    padding: 10px;
    border-radius: 18px 18px 18px 18px;
    border-bottom: 5px solid #610B0B;
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    margin-bottom:10px;
}
.buttonred a {
    color: white;
    font-weight: bold;
    font-size: 120%;
}

/* ====== スペック表（コピーして使えます） ====== */
.spec-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #e6e9ef;
  border-radius:12px;
  overflow:hidden;
  font-size:16px;
  line-height:1.6;
}
.spec-table caption{
  text-align:left;
  font-weight:700;
  padding:14px 16px;
  background:#f7f9fc;
  border-bottom:1px solid #e6e9ef;
  font-size:17px;
}
.spec-table th,
.spec-table td{
  padding:14px 16px;
  vertical-align:top;
}
.spec-table th{
  width:30%;
  background:#fbfcff;
  color:#263238;
  font-weight:600;
  border-top:1px solid #eef1f6;
  border-right:1px solid #eef1f6;
}
.spec-table td{
  border-top:1px solid #eef1f6;
  color:#333;
}

/* 最初の行の境界を目立たせない */
.spec-table tbody tr:first-child th,
.spec-table tbody tr:first-child td{
  border-top:none;
}

/* 金額の強調 */
.price{
  font-weight:700;
  letter-spacing:.02em;
  display:inline-block;
}

/* レーティング（4.5など小数対応のマスク型） */
.rating{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-variant-numeric:tabular-nums;
}
.rating-star{
  display:inline-block;
  font-size:18px;
  letter-spacing:2px;
  background:linear-gradient(90deg,#ffb300 0%, #ffd54f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
}
.rating-mask{
  /* 5★=0% / 0★=100% を想定。4.5なら10%（0.5/5*100*?） */
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background:#e0e0e0;
  mix-blend-mode:color;
  pointer-events:none;
}
.rating-score{
  font-weight:700;
}

/* ジャンルのタグ */
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tag{
  display:inline-block;
  padding:6px 10px;
  border:1px solid #e6e9ef;
  border-radius:999px;
  background:#f8fafc;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
}

/* ホバー時の軽いフィードバック（PC向け） */
@media (hover:hover){
  .tag:hover{
    background:#eef5ff;
    border-color:#cfe0ff;
  }
}

/* モバイル最適化 */
@media (max-width: 768px){
  .spec-table{
    font-size:15px;
    border-radius:10px;
  }
  .spec-table th{
    width:38%;
  }
}

/* ダークモード配慮（任意） */
@media (prefers-color-scheme: dark){
  .spec-table{
    background:#0f1216;
    border-color:#1f2630;
  }
  .spec-table caption{
    background:#121821;
    border-bottom-color:#1f2630;
    color:#e8eef7;
  }
  .spec-table th{
    background:#121821;
    color:#e8eef7;
    border-color:#1b2230;
  }
  .spec-table td{
    color:#e3e7ee;
    border-top-color:#1b2230;
  }
  .tag{
    background:#151b24;
    border-color:#273142;
    color:#dde6f3;
  }
  .tag:hover{
    background:#1a2330;
    border-color:#35507a;
  }
}