@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
.p-pnLinks__item,
.c-shareBtns__item {
	list-style: none;
}
.grid2{
	display:grid;
	grid-template-columns: 1fr 1fr;
	place-content: center;
    place-items: center;
	gap:20px;
	margin-top: 20px;
}
.font_red{
    color:#bf1886;
	font-weight:bold;
	}
/*=================================================================================
	カエレバ・ヨメレバ・トマレバ
=================================================================================*/

.cstmreba {
	width: 100%;
	height:auto;
	margin:36px 0;
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
	line-height: 1.5;
	word-wrap: break-word;
	box-sizing: border-box;
	display: block;
}
/* WordPressで自動挿入されるPタグの余白を対処 */
.cstmreba p {
	margin: 0;
	padding: 0;
}
.cstmreba a {
	transition: 0.8s ;
	color:#285EFF; /* テキストリンクカラー */
}
.cstmreba a:hover {
	color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */
}
.booklink-box, .kaerebalink-box, .tomarebalink-box {
	width: 100%;
	background: #F6F5F0;  /* 全体の背景カラー */
	overflow: hidden;
	border-radius: 0px;
	box-sizing: border-box;
	padding: 3% 4%;
}

.cstmreba_ttl01 {
	width: 100%;
	margin:0px auto 10px auto;
	padding:0px 0px 0px 7px;
	border-left:3px solid #bd1886;
	text-align:left;
}

.tomareba-txt01{
	width:100%;
	margin:15px auto 0px auto;
	text-align:left;
	color:#666666;
	font-size:14px;
}

/* サムネイル画像ボックス */
.booklink-image,
.kaerebalink-image,
.tomarebalink-image {
	width:150px;
	float:left;
	margin:0 14px 0 0;
	text-align: center;
}
.booklink-image a,
.kaerebalink-image a,
.tomarebalink-image a {
	width:100%;
	display:block;
}
/* サムネイル画像 */
.booklink-image a img, .kaerebalink-image a img, .tomarebalink-image a img {
	margin:auto ;
	padding: 0;
	text-align:center;
}
.booklink-info, .kaerebalink-info, .tomarebalink-info {
	overflow:hidden;
	line-height:170%;
	color: #333;
}
/* infoボックス内リンク下線非表示 */
.booklink-info a,
.kaerebalink-info a,
.tomarebalink-info a {
	text-decoration: none;	
}
/* 作品・商品・ホテル名 リンク */
.booklink-name>a,
.kaerebalink-name>a,
.tomarebalink-name>a {
	border-bottom: 1px dotted ;
	font-size:16px;
}
.tomarebalink-name{
	margin:auto;
	text-align:left;
}
/* powered by */
.booklink-powered-date,
.kaerebalink-powered-date,
.tomarebalink-powered-date {
	font-size:10px;
	line-height:150%;
}
.booklink-powered-date a,
.kaerebalink-powered-date a,
.tomarebalink-powered-date a {
	border-bottom: 1px dotted ;
	color: #333;
}
.booklink-powered-date a:hover,
.kaerebalink-powered-date a:hover,
.tomarebalink-powered-date a:hover {
	color:#333;
}
/* 著者・住所 */
.booklink-detail, .kaerebalink-detail, .tomarebalink-address {
	font-size:12px;
	margin:auto;
	text-align:left;
}
.kaerebalink-link1 img, .booklink-link2 img, .tomarebalink-link1 img {
	display:none !important;
}
.kaerebalink-link1, .booklink-link2, .tomarebalink-link1 {
	display: grid;
	width: 100%;
	margin-top: 5px;
	    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.booklink-link2>div, 
.kaerebalink-link1>div, 
.post_content .tomarebalink-link1>div {
	
}
/***** ボタンデザインここから ******/
.booklink-link2 a, 
.kaerebalink-link1 a,
.tomarebalink-link1 a {
	width: 100%;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	font-size: 13px;
	font-weight: bold;
	line-height: 180%;
	padding:3% 1%;
	margin: 1px 0;
	border-radius: 4px;

	background: -moz-linear-gradient(top,#fafafa,#EEE);
	background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eee));
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover,
.tomarebalink-link1 a:hover {
	text-decoration: underline;
}
/* トマレバ */
.tomarebalink-link1 .shoplinkrakuten a { color: #76ae25; }/* 楽天トラベル */
.tomarebalink-link1 .shoplinkjalan a { color: #ff7a15; }/* じゃらん */
.tomarebalink-link1 .shoplinkjtb a { color: #c81528; }/* JTB */
.tomarebalink-link1 .shoplinkknt a { color: #0b499d; }/* KNT */
.tomarebalink-link1 .shoplinkikyu a { color: #bf9500; }/* 一休 */
.tomarebalink-link1 .shoplinkrurubu a { color: #000066; }/* るるぶ */
.tomarebalink-link1 .shoplinkyahoo a { color: #ff0033; }/* Yahoo!トラベル */
/* カエレバ */
.kaerebalink-link1 .shoplinkyahoo a {color:#ff0033;} /* Yahoo!ショッピング */
.kaerebalink-link1 .shoplinkbellemaison a { color:#84be24 ; }	/* ベルメゾン */
.kaerebalink-link1 .shoplinkcecile a { color:#8d124b; } /* セシール */ 
.kaerebalink-link1 .shoplinkwowma a { color:#ea5404; } /* Wowma */ 
.kaerebalink-link1 .shoplinkkakakucom a {color:#314995;} /* 価格コム */
/* ヨメレバ */
.booklink-link2 .shoplinkkindle a { color:#007dcd;} /* Kindle */
.booklink-link2 .shoplinkrakukobo a{ color:#d50000; } /* 楽天kobo */
.booklink-link2  .shoplinkbk1 a { color:#0085cd; } /* honto */
.booklink-link2 .shoplinkehon a { color:#2a2c6d; } /* ehon */
.booklink-link2 .shoplinkkino a { color:#003e92; } /* 紀伊國屋書店 */
.booklink-link2 .shoplinkebj a { color:#f8485e; } /* ebookjapan */
.booklink-link2 .shoplinktoshokan a { color:#333333; } /* 図書館 */
/* カエレバ・ヨメレバ共通 */
.kaerebalink-link1 .shoplinkamazon a, 
.booklink-link2 .shoplinkamazon a { color:#FF9901; } /* Amazon */
.kaerebalink-link1 .shoplinkrakuten a , 
.booklink-link2 .shoplinkrakuten a { color: #c20004; } /* 楽天 */
.kaerebalink-link1 .shoplinkseven a, 
.booklink-link2 .shoplinkseven a { color:#225496;} /* 7net */
/***** ボタンデザインここまで ******/
.booklink-footer {
	clear:both;
}

/* トマレバ */
.tomarebalink-powered-date,
.tomarebalink-address,
.tomarebalink-image{
  display: none;
}

.tomarebalink-box{

}
.tomarebalink-link1 a{
	background:#fff;
	border: 1px solid #999999;
    color: #2e2e2e !important;
}
.tomarebalink-link1 a:hover {
    border: 1px solid #bd1886;
	text-decoration:none;
}




/* 各リンクの後ろに「で見る」を追記 */
.tomarebalink-link1 .shoplinkrakuten a::after,
.tomarebalink-link1 .shoplinkjalan a::after,
.tomarebalink-link1 .shoplinkikyu a::after,
.tomarebalink-link1 .shoplinkyahoo a::after,
.tomarebalink-link1 .shoplinkjtb a::after {
  content: 'で見る';
  color: #2e2e2e;
  margin-left: 0px;
   display: inline-block;
}

/* 矢印は疑似要素とは別に、別の::afterを擬似的に追加する */
.tomarebalink-link1 .shoplinkrakuten a::before,
.tomarebalink-link1 .shoplinkjalan a::before,
.tomarebalink-link1 .shoplinkikyu a::before,
.tomarebalink-link1 .shoplinkyahoo a::before,
.tomarebalink-link1 .shoplinkjtb a::before {
  content: '';
  width: 6px;
  height: 6px;
  border-top: solid 2px #bd1886;
  border-right: solid 2px #bd1886;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right:10px;
  transform: translateY(-50%) rotate(45deg);
}

/* ベース設定（位置調整） */
.tomarebalink-link1 div[class^="shoplink"] a {
  position: relative;
  color: #2e2e2e !important;
  text-decoration: none;
}

.tomarebalink-name  {
    font-size: 15px !important;
    font-weight: bold;
    margin-bottom:15px;
}
.booklink-name>a, .kaerebalink-name>a, .tomarebalink-name>a{
	font-size:15px;
	line-height: 1.5;
}
.tomarebalink-name a {
  display: inline-block; 
  vertical-align: middle;
	  text-decoration: none; /* 下線を削除 */
  color: #2e2e2e; /* テキストカラーを#2e2e2eに変更 */
  cursor: default; /* マウスカーソルをデフォルト（矢印）にする */
  border:none;
	padding-left:15px;
    border-left: 3px solid #bd1886;
}


/* リンクテキストの前にテキストを追加
.tomarebalink-name a::before {
  content: '\00A0\00A0';
  white-space: pre-wrap;
  display: inline;
}
 */
/* リンクテキストの後にテキストを追加 
.tomarebalink-name a::after {
  content: '\00A0にお得に泊まるなら！\00A0\00A0'; 
  white-space: pre-wrap; 
  display: inline; 
}
*/
/* ホバー時のスタイルも削除または調整 */
.tomarebalink-name a:hover {
  text-decoration: none; /* ホバー時の下線も削除 */
  color: #2e2e2e; /* ホバー時の色も変更しない */
}
.p-adBox__img{
	padding:0;
}
.w-beforeToc{
	margin-top:3em;
}
/***  解像度480px以下のスタイル ***/
@media screen and (max-width:480px){
.booklink-image,
.kaerebalink-image,
.tomarebalink-image {
	width:100%;
	float:none;
}

.booklink-info,
.kaerebalink-info,
.tomarebalink-info {
	text-align:center;
	padding-bottom: 1px;
}
	.booklink-name>a, .kaerebalink-name>a, .tomarebalink-name>a{
	font-size:13px;
}

	.tomarebalink-name a{
		padding-left:12px;
	}
	.tomarebalink-box {
       padding: 3% 4%;
   }
	
	.kaerebalink-link1, .booklink-link2, .tomarebalink-link1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
    gap: 8px;
}
	/*
	.tomarebalink-link1 > div:last-child {
  grid-column: 1 / -1;  最後の要素だけ1行占有（100%） 
}*/

	.tomarebalink-link1 div[class^="shoplink"] a{
		font-size:80%;
	}
	.-img .c-headLogo__link{
		align-content: center;
	}
	.c-headLogo__img{
		width:70%;
	}
	.p-adBox__img{
		width:100%;
	}
}
.map-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 450 (高さ) / 800 (幅) = 0.5625 = 56.25% */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #eee; /* ローディング中の背景色（任意） */
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* スマホ表示時の調整（SWELLのブレイクポイントに合わせて調整してください） */
@media (max-width: 767px) {
    .map-responsive {
        /* 必要であればスマホ用の追加スタイル */
    }
}
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 のアスペクト比を維持。4:3 なら 75% */
    position: relative;
    height: 0;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

/* 子テーマ style.css など */
.timeless-tomareba-head{
  line-height: 2;
  font-weight: 700;
}


/* シェアエリア全体のコンテナ */
.timeless-share-container {
    margin: 40px auto;
    text-align: center;
    padding: 20px;
    border-top: 1px solid #eee; /* 上にうっすら境界線 */
}

/* マイクロコピー */
.share-message {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    font-family: serif; /* TIMELESSの雰囲気に合わせた明朝体 */
    letter-spacing: 0.05em;
}

/* ボタンの並び */
.share-buttons {
    display: flex;
    justify-content: center;
    gap: 15px; /* ボタン同士の間隔 */
}

/* 共通のボタン形状 */
.share-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* 丸形 */
    background: #f8f9fa;
    color: #333;
    text-decoration: none;
    font-size: 20px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

/* ホバー時の挙動（スマホならタップ時） */
.share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 各SNSのホバー色 */
.x-btn:hover { background: #000; color: #fff; }
.line-btn:hover { background: #06C755; color: #fff; }
.fb-btn:hover { background: #1877F2; color: #fff; }
.copy-btn:hover { background: #666; color: #fff; }

@media (max-width: 480px) {
    .share-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
}