@charset "utf-8";

@font-face {
  font-family:YJTop Ellipsis;
  src:local(Helvetica),
  local(Arial),
  local(Roboto);
  unicode-range:U+2026;
}

body,p,td,li, h5,h6 {
	font-family: YJTop Ellipsis,ヒラギノ角ゴ ProN,Hiragino Kaku Gothic ProN,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,sans-serif;
	font-size:1rem;
	line-height:1.8em;
}
h1,h2,h3,h4,.h1,.h2,.h3,.h4,.h5,.h6 {
	font-family: YJTop Ellipsis,ヒラギノ角ゴ ProN,Hiragino Kaku Gothic ProN,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,sans-serif;
	font-weight:bold;
	line-height:1.5em;
}

.font-g {
	font-family: YJTop Ellipsis,ヒラギノ角ゴ ProN,Hiragino Kaku Gothic ProN,メイリオ,Meiryo,Osaka,ＭＳ Ｐゴシック,MS PGothic,sans-serif;
}

.font-m {
	font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",source-han-serif-japanese,"游明朝","Yu Mincho","游明朝体",YuMincho,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
}

.normal {
	font-weight:normal!important;
}

.bold {
	font-weight:bold;
}

.container {
	max-width: 1164px;
}
.grecaptcha-badge { visibility: hidden; }



/* カテゴリーカラー
==================================================== */
:root {
	--color-cat01:#ea5032;/* 最新号 */
	--color-cat02:#f3982b;/* インタビュー */
	--color-cat03:#55acb1;/* 都政 */
	--color-cat04:#f0896f;/* 区市町村 */
	--color-cat05:#39648a;/* ビジネス */
	--color-cat06:#9d8025;/* 自衛隊・警察・消防・海保 */
	--color-cat07:#694c9c;/* カルチャー・スポーツ */
	--color-cat08:#ed6c00;/* 食 */
	--color-cat09:#819a3d;/* 鳥瞰 */
	--color-cat10:#f7ad00;/* プレゼント */
}



/* 文字サイズ
==================================================== */
h1 { font-size:1.5rem; }

@media (min-width: 576px) {
	h1 { font-size:1.8rem;letter-spacing:2px; }
}
@media (min-width: 768px) {
	h1 { font-size:1.8rem; }
}
@media (min-width: 1200px) {
	h1 { font-size:2rem;letter-spacing:2px; }
}
@media (min-width: 1400px) {
	h1 { font-size:2.2rem;letter-spacing:2px; }
}

@media (min-width: 768px) and (max-width: 1050.98px) {
	.top_square .top_text { font-size:0.8rem; }
}
@media (max-width: 767.98px) {
	.top_text { font-size:1rem; }
}



/* マージン、パディング
==================================================== */
.mt-40, .my-40 { margin-top:40px; }
.mb-40, .my-40 { margin-bottom:40px; }
.ms-40, .mx-40 { margin-left: 40px; }
.me-40, .mx-40 { margin-right: 40px; }
.pt-40, .py-40 { padding-top:40px; }
.pb-40, .py-40 { padding-bottom:40px; }
.ps-40, .px-40 { padding-left:min(calc(40 / 1140 * 100vw), 40px); }
.pe-40, .px-40 { padding-right:min(calc(40 / 1140 * 100vw), 40px); }
.mt-80, .my-80 { margin-top:80px; }
.mb-80, .my-80 { margin-bottom:80px; }
.ms-80, .mx-80 { margin-left: 80px; }
.me-80, .mx-80 { margin-right: 80px; }
.pt-80, .py-80 { padding-top:80px; }
.pb-80, .py-80 { padding-bottom:80px; }
.ps-80, .px-80 { padding-left:min(calc(80 / 1140 * 100vw), 80px); }
.pe-80, .px-80 { padding-right:min(calc(80 / 1140 * 100vw), 80px); }
.mt-110, .my-110 { margin-top:110px; }
.mb-110, .my-110 { margin-bottom:110px; }
.pt-110, .py-110 { padding-top:110px; }
.pb-110, .py-110 { padding-bottom:110px; }
.ps-110, .px-110 { padding-left: 110px; }
.pe-110, .px-110 { padding-right: 110px; }
@media (min-width: 1200px) {
    .pe-xl-5px {
        padding-right: 5px !important;
    }
} 

@media (max-width: 767.98px) {
	.mt-40, .my-40, .mt-80, .my-80 { margin-top:30px; }
	.mb-40, .my-40, .mb-80, .my-80 { margin-bottom:30px; }
	.mt-110, .my-110 { margin-top:60px; }
	.mb-110, .my-110 { margin-bottom:60px; }
    .ms-40, .mx-40, .ms-80, .mx-80 { margin-left: 30px; }
    .me-40, .mx-40, .me-80, .mx-80 { margin-right: 30px; }
	.pt-40, .py-40, .pt-80, .py-80 { padding-top:30px; }
	.pb-40, .py-40, .pb-80, .py-80 { padding-bottom:30px; }
	.ps-40, .px-40, .ps-80 { padding-left:30px; }
	.pe-40, .px-40, .pe-80 { padding-right:30px; }
	.pt-110, .py-110 { padding-top:60px; }
	.pb-110, .py-110 { padding-bottom:60px; }
	.ps-110, .px-110 { padding-left:40px; }
	.pe-110, .px-110 { padding-right:40px; }
}

.lh-1 { line-height: 1em; }
.lh-1_2 { line-height: 1.2em!important; }
.lh-1_5 { line-height: 1.5em!important; }
.lh-1_8 { line-height: 1.8em!important; }
.lh-2 { line-height: 2em; }
.lh-3 { line-height: 3em; }
.ls-1 { letter-spacing: 1px; }
.ls-2 { letter-spacing: 2px; }
.ls-3 { letter-spacing: 3px; }

.bg-gray { background-color: #EFEEEF; }


/* リンク
==================================================== */
a {
	color: #1D3994;
	text-decoration: none;
	word-break: break-all;
}


a h5 {
color: #1D3994;
font-size: 0.9375rem !important;
font-weight:600;
}	
	


@media (min-width: 768px) {
    a {
        color: #1D3994;
	}
	
	a h5 {
		color: #1D3994;
		font-size: 0.9375rem !important;
		font-weight: normal;
	}	
	
		

	a:visited {
		color:#551a8b;
	}
	
	a.btn:visited { color: #6c757d; }
	a.btn-secondary:visited { color: #fff !important; }
	
	.btn-secondary:hover { color: #fff !important; }
	
}


a:visited h5 {
color:#551a8b;
}

a:visited {
color:#551a8b;
}


a:hover {
    opacity: 0.8;
}

a:visited {
color:#551a8b;
}

a.btn:visited { color: #6c757d; }
a.btn-secondary:visited, a.btn-dark:visited { color: #fff !important; }
.btn-secondary:hover { color: #fff !important; }

a.btn.active:visited {
	color: #fff;
}
	
footer a {
	color: #000;
}


.swiper-button-next {
	color: #fff;
	text-shadow: 1px 1px black;
}


.active>.page-link, .page-link.active {
background-color: rgb(68, 68, 68);
	border-color: rgb(68, 68, 68);
}


.page-link:hover {

color:rgb(68, 68, 68);

}

.pagination {
--bs-pagination-color: rgb(68, 68, 68);
}

a.prev:visited {
color: rgb(68, 68, 68);
}

a.next:visited {
color: rgb(68, 68, 68);
}

a.current:visited {
color: #fff
}
	
	a.page-link:visited {
color: rgb(68, 68, 68);
	}
/* レイアウト調整
==================================================== */
table { max-width: 100%!important; }
img { max-width: 100%!important; }
a:not(.page-link):not(.navbar-brand) {
    max-width: 100% !important;
}

.small.text-muted {
	line-height: 1.2em;
}


/* Header
==================================================== */
:root {
    --header-height:53px;
}
@media (min-width: 992px) {
	:root {
		--header-height:90px;
	}
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}
body {
    padding-top: var(--header-height);
}
.navbar {
    height: var(--header-height);
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-brand {
    width: calc(400 / 750 * 100vw);
    min-width: 150px;
    height: var(--header-height);
}
@media (min-width: 992px) {
	.navbar-brand {
		width: 400px;
    }
}
@media (min-width: 1200px) {
	#globalHeader > .navbar > .container-fluid {
		padding-left: 75px;
		padding-right: 75px;
	}
}
.navbar-right ::placeholder {
	color: #FFF;
}
#tabNav .nav-link {
	--bs-nav-link-padding-x:0.3em;
	--bs-nav-link-font-size:clamp(0.688rem, 0.534rem + 0.65vw, 1rem);
	color: #FFF !important;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}
#tabNav .nav-link:hover,
#tabNav .nav-link:focus,
#tabNav .nav-link:visited {
	color: #FFF !important;
}
#tabNav .nav-tabs {
	--bs-nav-tabs-border-width: 0;
	--bs-nav-tabs-link-active-color: #FFF;
}
@media (max-width: 991.98px) {
	#tabNav .container {
		--bs-gutter-x:0;
	}
}

#offcanvasNav {
	width: 70vw;
	max-width: 300px;
}
#offcanvasSearch {
	height: 150px;
}

/* ボタンのスタイル */
.navicon {
    background: #FFF;
    display: block;
    height: 8px;
    width: 35px;
    position: relative;
    /*transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;*/
    transition: all 0.2s 0s ease;
}
.navicon:before,
.navicon:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    background: #FFF;
    /*transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;*/
    transition: all 0.2s 0s ease;
}
.navicon::before {
    top: 15px;
}
.navicon::after {
    bottom: 15px;
}
button[aria-expanded="true"] .navicon::before {
    top: 0;
}
button[aria-expanded="true"] .navicon::after {
    bottom: 0;
}
.tagh1 {
    color: #777777;
    font-size: 0.7em;
    line-height: 1em;
    margin-bottom: 10px;
}


/* footer
==================================================== */
#globalFooter a {
	color: #FFF !important;
}

/* バナー */
#globalFooter .shadow-sm {
	box-shadow: 0 .125rem .25rem rgba(0,0,0,.25) !important;
}

/* コピーライト */
#copyright p {
	font-size:clamp(0.688rem, 0.626rem + 0.26vw, 0.813rem) !important;
}


/* トップへ戻る
==================================================== */
a.bottomFooter__topBtn {
    text-decoration:none;
}
.bottomFooter__topBtn {
    position: fixed;
    bottom: 0;
    right: 0;
    display: block;
    color: #fff;
    z-index: 2100;
    font-size:1.2em;
    font-weight:bold;
}

.bottomFooter__topBtn{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 40px solid #161717;
border-bottom: 40px solid #161717;
border-left: 40px solid transparent;
margin-right:0px;
margin-bottom:0px;
background:none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    cursor: pointer;
}
.bottomFooter__topBtn:before{
display:block;
margin-right:-20px;
margin-top:13px;
}

.bottomFooter__topBtn.is-visible {
    opacity: 1;
    visibility: visible;
}


/* ----------------------------------------------------------------
 * 記事一覧
 * ---------------------------------------------------------------- */

/* タイトルリンクのホバーエフェクト */
a.stretched-link-title:hover {
  text-decoration: underline !important;
}

/* nolinkクラスが付いた記事のスタイル */
.nolink {
  cursor: default;
}

/* nolinkの記事の画像を暗くする */
.nolink img {
  filter: grayscale(80%) brightness(0.7);
  transition: filter 0.3s ease;
}

/* nolinkのテキストを薄くする */
.nolink .flex-grow-1 {
  color: #999;
}

/* nolinkのタイトルを薄くする */
.nolink h5 {
  color: #777;
}

/* ----------------------------------------------------------------
 * 記事詳細
 * ---------------------------------------------------------------- */

.article-single .post-content img {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------------------
 * ページネーション
 * ---------------------------------------------------------------- */

/* カレントページのスタイルを黒背景・白文字に上書き */
.pagination .page-item.active .page-link {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

/* カレントページにマウスカーソルが乗った際のスタイル（任意） */
.pagination .page-item.active .page-link:hover {
    background-color: #333; /* 少し明るい黒 */
    border-color: #333;
}

/* ----------------------------------------------------------------
 * vol.php バックナンバー一覧
 * ---------------------------------------------------------------- */

.vol-cover-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;   /* 画像の縦横比を 3:4 に固定します */
  object-fit: cover;     /* 指定した比率からはみ出た部分をトリミングします */
}


/* ----------------------------------------------------------------
 * トップページ (index.php)
 * ---------------------------------------------------------------- */

/* --- 1. 横長画像ヒーローセクション --- */
.hero-image-wrapper {
    position: relative;
    line-height: 0; 
}

/* 修正点1: グラデーションを半透明の黒に変更 */
.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    background: rgba(0, 0, 0, 0.3); /* グラデーションから単色へ変更 */
}

/* 修正点2: アイテムの配置方法を変更 */
.hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 高さを100%に */
    padding: 0.8rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; /* flex-end から flex-start へ変更し、上揃えに */
}

.hero-text {
    text-align: left;
    color: #fff;
    /* テキストブロック全体を下に配置するために追加 */
    align-self: flex-start;
}

.hero-catchphrase {
    font-family: "MS Mincho", "Hiragino Mincho ProN", serif;
    font-weight: bold;
    font-size: clamp(1rem, 4vw, 1.8rem);
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
@media (min-width: 1200px) {
	.hero-catchphrase {
	    font-size: clamp(1rem, 4vw, 2.1rem);
	}
}


.hero-name, .hero-date {
    font-size: clamp(0.75rem, 2vw, 1rem);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* ----------------------------------------------------------------
 * 定期購読ボタン (JavaScript制御版)
 * ---------------------------------------------------------------- */
.subscription-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.4;
  text-align: center;
  overflow: hidden; /* 最終的な安全策として維持 */
}

/* 子要素のテキストは改行しない */
.subscription-button strong,
.subscription-button small {
  white-space: nowrap;
}
.subscription-button small span {
	font-size: 0.6em;
}

/* ----------------------------------------------------------------
 * トップページ (index.php) - カラムバランシング
 * ---------------------------------------------------------------- */

#main-col-right .new-arrivals-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1.5rem;
    /* ★★★ この一行を追加して、はみ出しを完全に防ぎます ★★★ */
    overflow: hidden;
}

#main-col-right .new-arrival-item {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#main-col-right .new-arrival-item .card-body {
    flex-grow: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 抜粋のラッパーとグラデーション */
.card-excerpt-wrapper {
    position: relative;
    overflow: hidden;
    display: none; /* JSで表示を制御 */
}

.card-excerpt-wrapper.is-fading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2rem;
    background: linear-gradient(to top, white 20%, rgba(255, 255, 255, 0));
}


/* --- 5,6,9,10. 横スライダー --- */

.splide__slide { padding-bottom: 6px; }

.splide__slide .card {box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.7);}

.slider-img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.custom-arrows-container {
    gap: 50px; /* 左右のボタン間のスペース */
    /* pt-3クラスでボタン上部のスペースを確保 */
}

.custom-arrow {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s;
}
.custom-arrow:hover {
    background-color: #fff;
}
.custom-arrow i {
    font-size: 1rem;
}


/* --- 7,8. 縦スクロール --- */
.vertical-scroll-wrapper {
    height: 400px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    padding: 1rem;
}
.vertical-scroll-wrapper ul li div.flex-grow-1 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.vertical-scroll-wrapper ul li {
	padding-bottom: 10px;
	margin-bottom: 10px;
}


/* スクロールバーのスタイル */
.vertical-scroll-wrapper::-webkit-scrollbar { width: 8px; }
.vertical-scroll-wrapper::-webkit-scrollbar-track { background: #f1f1f1; }
.vertical-scroll-wrapper::-webkit-scrollbar-thumb { background: #888; }
.vertical-scroll-wrapper::-webkit-scrollbar-thumb:hover { background: #555; }

/* メディアクエリ
==================================================== */
/*
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
*/
@media (min-width: 576px) {}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {}


/*// X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {}

/*// Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {}

/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {}

/*// Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {}

/*// X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {}