/*
Theme Name: Nori510 Magazine
Author: World-Class Developer
Description: A sophisticated digital magazine theme inspired by BRUTUS.jp
Version: 1.1
*/

/* 基本設定 */
body {
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    color: #111111;
    overflow-x: hidden; /* 横スクロール防止 */
}

/* カスタムスクロールバー */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #fff;
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #111;
}

/* フェードインアニメーション */
.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* 縦書きユーティリティ（詳細ページのしおり用） */
.writing-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* WordPress管理バー調整 */
body.admin-bar #main-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar #main-header {
        top: 46px;
    }
}

/* =========================================
   レスポンシブ埋め込み & コンテンツ調整 (Fix for Mobile Overflow)
   ========================================= */

/* 画像、動画、iframeが親要素からはみ出さないようにする */
.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content object,
.entry-content embed {
    max-width: 100%;
    height: auto;
}

/* YouTubeやVimeoなどのiframeに対するアスペクト比固定 */
.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="youtube-nocookie.com"],
.entry-content iframe[src*="vimeo.com"] {
    width: 100%;
    /* モダンブラウザ用のアスペクト比指定 */
    aspect-ratio: 16 / 9; 
    /* aspect-ratio未対応ブラウザへのフォールバック（高さが潰れるのを防ぐ） */
    height: auto; 
}

/* キャプション付き画像の調整 */
.wp-caption {
    max-width: 100%;
}

/* テーブルの横スクロール対応（はみ出し防止） */
.entry-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}

/* 古いWordPressの埋め込みクラス対応 */
.wp-block-embed__wrapper {
    position: relative;
    width: 100%;
}
.entry-content .kaerebalink-box,
.entry-content .booklink-box,
.entry-content .shoplink-box {
  text-align: left;
  padding: 10px;
  margin: 10px 0;
  font-size: 0.9rem;
  overflow: hidden;
//  border: solid 1px #ddd;
}

.entry-content .kaerebalink-image,
.entry-content .booklink-image,
.entry-content .shoplink-image {
  float: left;
  margin: 0 10px 0 0;
  max-width: 33%;
}

.entry-content .kaerebalink-info,
.entry-content .booklink-info,
.entry-content .shoplink-info {
  / zoom: 1;
  overflow: hidden;
}

.entry-content .kaerebalink-name,
.entry-content .booklink-name,
.entry-content .shoplink-name {
  margin-bottom: 5px;
  line-height: 120%;
  font-size: 1em;
  font-weight: bold;
}

.entry-content .kaerebalink-powered-date,
.entry-content .booklink-powered-date {
  font-size: 8pt;
  margin-top: 5px;
  font-family: verdana;
  line-height: 120%;
  color: #777;
}

.entry-content .kaerebalink-powered-date a,
.entry-content .booklink-powered-date a {
  color: #777 !important;
}

.entry-content .kaerebalink-detail,
.entry-content .booklink-detail {
  margin-bottom: 5px;
}

.entry-content .shoplink-detail {
  font-size: 0.9em;
}

.kaerebalink-link1,
.booklink-link2,
.shoplink-link1 {
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
}
.shoplink-amazon,.shoplink-rakuten{
	background-color: #e49742;
	margin: 24px;
	padding: 10px;
	border-radius: 4px;
}

.booklink-box ,.shoplink-amazon a,.shoplink-rakuten a {
  width: 300px;
	color: #fff!important;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none!important;
}

.entry-content .shoplinkamazon a:hover,
.entry-content .shoplinkrakuten a:hover,
.entry-content .shoplink-amazon a:hover img,
.entry-content .shoplink-rakuten a:hover img {
  top: 2px;
  left: 2px;
  position: relative;
  opacity: .8;
  filter: alpha(opacity=80);
}

.booklink-box ,.shoplink-rakuten a {

  width: 300px;
}

.entry-content .shoplinkrakuten {
  margin: 5px 0 10px;
  padding: 2px 0 2px 0;
  white-space: nowrap;
}

.entry-content .kaerebalink-box a,
.entry-content .booklink-box a {
  color: #333;
  font-weight: bold;
}

.shoplink-amazon img,
.shoplink-rakuten img {
  width: 275px;
  margin: 10px 0 0;
}

.kaerebalink-image img,
.shoplink-image img {
  margin: 0;
}
.custom-logo {
width: 280px;
}