@charset "UTF-8";

/* -------------------------------------------------------------
   PC 専用 HEADER（トップページだけで適用）
   ※ Kids / 他媒体 には絶対に影響しない
------------------------------------------------------------- */

/* =========================================================
   トップページ PC専用ヘッダー（Kids に影響しない）
   画面幅 951px 以上にのみ適用
========================================================= */
/* =========================================================
   PC 専用ヘッダー（Kids の HTML をそのまま利用）
 ========================================================= */

/* SP は Kids の CSS 優先 */
@media (max-width: 950px) {
    .pc-header-mode { display: none !important; }

    body.home #headerMenu {
        display: none;
    }

    /* PC検索ボタンは非表示 */
    .pc-search-btn {
        display: none !important;
    }
}

/* PC のみ適用 */
@media (min-width: 951px) {

    /* 全体 */
    header {
        background: #fff;
        border-bottom: 1px solid #eee;
        padding: 18px 0;
        position: relative;
    }

    header .inner {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 20px;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* ロゴ配置 */
    .titleWrap {
        margin: 0;
        padding: 0;
    }

    .titleWrap .wrapinner {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 32px;
    }

    /* SP用検索ボタンは非表示 */
    header .wrapinner .search {
        display: none !important;
    }

    /* PC検索ボタン */
     .pc-search-btn {
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .pc-search-btn img {
        width: 28px;
        height: auto;
        display: block;
    }
    
    /* SP アイコンは非表示 */
    .spMenu,
    header .search img[src*="_sp"] {
        display: none !important;
    }

    /* headerMenu を横並びに */
    #headerMenu {
        display: flex;
        align-items: center;
        gap: 32px; /* ナビと検索の距離 */
    }

    #headerMenu nav {
        display: flex;
        align-items: center;
    }

    /* ul.gNav を PC 風に */
    .gNav {
        display: flex;
        align-items: center;
        gap: 28px;
        margin: 0;
        padding: 0;
    }

    .gNav > li {
        background: none !important;
        width: auto !important;
        height: auto !important;
    }

    /* アイコン画像（<picture>）を左 */
    .gNav li a > span > picture {
        width: 28px;
        height: auto;
        display: inline-block;
        margin-right: 6px;
        vertical-align: middle;
    }

    /* テキスト */
    .gNav li a .textWrap {
        position: static;
        display: inline-block;
        font-size: 15px;
        font-weight: 600;
        padding-top: 0;
        vertical-align: middle;
    }

    /* ボタン風のやつ（広告・メルマガ） */
    .gNav li a.top-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        /* 固有レイアウト調整 */
        line-height: 1 !important;
        padding: 5px 18px 8px 18px !important;
        border: 1px solid #000;
        border-radius: 16px;
    }

    /* ボタン内のテキストの位置も安定させる */
    #headerMenu .top-btn .textWrap {
        display: inline-block;
        line-height: 1.4;
    }
}

/* Font */
.fs-24 {
    font-size: 40px !important;
    font-weight: bold !important;
}

/* new 上 */
section#top-hero.mb-3 {
    margin-bottom: 45px !important;
}

/* Pager */
.pagerWrap {
	clear: both;
	text-align: center;
	margin-top: 40px;
}
.pager {
	clear: both;
	display: inline-block;
	font-size: 176%;
}
.pager a,
.pager .current,
.page-numbers.dots {
	min-width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	display: block;
	margin: 0 50px 10px 0;
	float: left;
	color: #000000;
	text-decoration: none;
}
.pager .next {
	margin: 0 0 0 0px !important;
}
.pager .prev {
	margin: 0 50px 0 0;
}
.pager .prev a,
.postPaget .prev,
.pager .next a,
.postPaget .next {
	margin: 0;
}
.postPaget .prev a {
	margin: 0 50px 0 0;
}
.postPaget .next a {
	margin: 0 0 0 0px;
}
.pager .post-page-numbers {
	text-decoration: none !important;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	transition: none;
}
.pager .current.page-numbers,
.pager a.page-numbers:hover,
.pager .current.post-page-numbers,
.pager a.post-page-numbers:hover {
	background-image: url(./common/images/pc/bg_pager_current.png);
	background-repeat: repeat-x;
	background-position: 0 bottom;
	padding-bottom: 10px;
}
.pager a.page-numbers.prev:hover,
.pager a.page-numbers.next:hover,
.pager span.prev a:hover,
.pager span.next a:hover {
	padding-bottom: 0 !important;
}
.pager .prev,
.pager .prev a {
	background-image: none !important;
	background-color: #dcdddd;
	color: #ffffff !important;
}
.pager .next,
.pager .next a {
	background-image: none !important;
	background-color: #231815;
	color: #ffffff !important;
}

/* ----------------------------------------
   エリアブロック
----------------------------------------- */
/* WHAT'S NEW */
#newPostArea .secTitle {
    text-align: left;
}
#newPostArea .postCat {
    display: none;
}
/* 日付を左寄せ */
#newPostArea .postMeta {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
#newPostArea .postCat {
	margin-right: 8px;
}
/* ここでグローバルの .postDate（float: right 等）を打ち消す */
#newPostArea .postDate {
	float: none !important;
	margin: 0 !important;
	text-align: left !important;
	display: inline-block;
	font-size: 0.8rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #111111;
}
/* WHAT'S NEW タグリスト */
#newPostArea .kids-tags {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
#newPostArea .kids-tags .kids-tag-item {
	display: inline-block;
	padding: 4px 10px;
	font-size: 0.72rem;
	line-height: 1.2;
	background-color: #f7f5ef;
	border-radius: 999px;		/* pill */
	color: #333;
	white-space: nowrap;
}

@media (max-width:639px) {
    #newPostArea .secTitle {
        text-align: left;
    }
}

/* PICK UP タグリスト */
#pickupTagArea {
	background: #f7f5ef;
}

#pickupTagArea .tagWrap a {
    font-size: 1.2rem !important;
}

@media (max-width:639px) {
    #pickupTagArea .tagWrap a {
        font-size: 1.0rem !important;
    }
}

/*　PICK UP　*/
/* 日付を左寄せ */
#pickupArea .postMeta {
	display: flex;
	align-items: center;
	justify-content: flex-start;
    margin: 0 !important;
	padding: 0 !important;
}
#pickupArea .postMeta .postCat {
	display: none !important;
}
#pickupArea .postDate {
	float: none !important;
	margin: 0 !important;
    padding: 0 !important;
	text-align: left !important;
	display: inline-block;
	font-size: 0.8rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.2;
    color: #111111;
}
#pickupArea .postImage {
    margin-bottom: 10px !important;
}
/* PICK UP タグリスト */
#pickupArea .kids-tags {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
#pickupArea .kids-tags .kids-tag-item {
	display: inline-block;
	padding: 4px 10px;
	font-size: 0.72rem;
	line-height: 1.2;
	background-color: #f7f5ef;
	border-radius: 999px;
	color: #333;
	white-space: nowrap;
}
/* post list */
#pickupArea .postList .post {
    margin-bottom: 30px !important;
}

/* Special */
#specialArea {
	background: #e4d3a2;
	padding: 45px 0;
    overflow: hidden;
}
#specialArea .inner {
	overflow: hidden;
}
#picupSlider.special-swiper {
	overflow: visible;
}

#searchArea {
	background: #f7f5ef;
    padding: 30px 0 !important;
}
#searchArea form input {
    border-radius: 10px;
}
#searchArea .siteName {
    margin: 0 auto 30px auto !important;
    padding: 0 !important;
}
#searchArea .close {
	position: absolute;
	top: 15px !important;
	right: 15px;
	cursor: pointer;
}
#searchArea .tagWrap a {
    font-size: 1.0rem !important;
}

@media (max-width:639px) {
    #searchArea {
        margin: 0 !important;
        padding: 0 !important;
    }
    #searchArea .tagWrap a {
        font-size: 0.8rem !important;
        padding: 5px 15px !important;
    }
}

#spMenuArea {
    background: #f7f5ef !important;
}

#spMenuArea .siteName {
    margin: 0 auto 30px auto;
}
#spMenuArea .gNav {
    width: 50%;
    text-align: center !important;
    margin: 0 auto 30px auto;
}
#spMenuArea .gNav li.menu-item {
    text-align: center !important;
}
#spMenuArea .gNav li a {
    display: block !important;
    font-size: 1.25rem;
    font-weight: 900;
}

#aboutLinks a {
    padding: 6px 10px;
    font-size: 0.9rem;
}

.postList .postInfo h2 {
	font-size: 1.08rem;
	font-weight: 900;
}

@media (max-width:640px) {
    .postList .postInfo h2 {
        font-size: 100%;
    }
}


/* ----------------------------------------
   サブタイトル画像（WHAT'S NEW など）
----------------------------------------- */

#newPostArea .secTitle picture img {
    display: block;
    width: auto !important;
    max-width: 240px !important;
    height: auto !important;
    margin: 0;
}

@media (max-width:639px) {
    /* What’s New（トップページ）の secTitle 画像を SP サイズで適正表示 */
    #newPostArea .secTitle picture img {
        width: 100% !important;
        max-width: 200px !important; /* 必要に応じて変更可 */
        height: auto !important;
        display: block;
    }
}


/* ----------------------------------------
   Button
----------------------------------------- */

.moreLink img {
    width: 160px;
}

.tagWrap a {
    border: 1px solid #696969;
    color: #111111;
}

@media (max-width:639px) {

}

/* -------------------------------------------------------------
   Swiper
   ※ メインビジュアル、Special
------------------------------------------------------------- */
/* メインビジュアル Swiper */
#top-hero {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.topSwiper .swiper-slide {
	position: relative;
}

/* PC 画像＝SP では非表示 */
.heroPC img {
	width: 100%;
	height: auto;
	display: block;
}

.heroSP {
	display: none;
}

/* SP では縦並びの kids → parents を表示 */
@media screen and (max-width: 767px) {
	.heroPC {
		display: none !important;
	}

	.heroSP {
		display: block;
	}

	.heroSP img {
		width: 100%;
		height: auto;
		display: block;
	}
}

/* SPECIAL Swiper */
/* SPECIAL Swiper */
#picupSlider.special-swiper {
	position: relative;
	padding: 20px 0 40px;
	overflow: visible; /* 前後スライドを見せる */
}

/* Swiper slide */
#picupSlider .swiper-slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: left;

	/* Swiper の width 計算に任せる → width:auto は入れない */
}

/* 画像 */
#picupSlider .swiper-slide img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

/* タイトル */
.special-title {
	font-size: 1.15rem;
	line-height: 1.4;
	margin-top: 8px;
	text-align: left; /* ★中央揃えにした方が見栄えが良い */
}

/* 矢印 */
.special-swiper .swiper-button-prev,
.special-swiper .swiper-button-next {
	color: #000;
	background: #fff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

/* SP */
@media screen and (max-width: 767px) {
	.special-title {
		font-size: 0.1.0rem;
	}
}