@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
*/

.top #content {
	padding-top:40px;
}
.home { background: url("images/bg_wood.jpg"); }


/* header */
nav.l-header__gnav {
	background-color: #2d0e00;
}
ul.c-gnav {
	max-width:1100px;
	margin:0 auto;
}


.l-header__gnav ul.c-gnav {}
.l-header__gnav ul.c-gnav > li:first-child {
	border-left:1px solid #684b40;
}
.l-header__gnav ul.c-gnav > li {
	border-right:1px solid #684b40;
}
.l-header__gnav ul.c-gnav > li a {
	padding: 16px 35px !important;
	color:#fff;
}
.l-header__gnav ul.c-gnav > li .sub-menu li a {
	padding: 12px 25px !important;
	line-height:1.4;
	color:#222;
}
ul.c-gnav li a::after {
	background: #fff;
}

/* footer */
.l-content {
	margin-bottom:0 !important;
}
.ft_body {
	padding-top:70px !important;
}


/* 本棚コンテナ */
/* 1. 背景画像をここで一括管理（重なり防止） */
.bookshelf-wrapper {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
/*    overflow-x: hidden;*/

    /* ★ 背景画像の設定を一箇所に集約 */
    background-image: url('images/bg_tana2.png');
    background-size: 100% 400px; /* ラージサイズに合わせて高さを400pxに拡張例 */
    background-repeat: repeat-y;
    background-position: center top;
}

/* 2. 本を並べる中央コンテナ（背景は設定しない） */
.bookshelf-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0; /* 余白によるズレを防止 */
}

/* 3. 本のアイテム（ここも背景は透明に） */
.book-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    height: 400px; /* 背景画像の高さと一致させる */
    background: transparent; /* 重なり防止のため背景を消す */
}
.book-item img {
    transition: transform 0.3s ease; /* 動きを滑らかにする */
}
.book-item img:hover {
    transform: translateY(-8px) scale(1.02); /* 上に8px移動し、2%だけ拡大 */
}

@media (max-width: 959px) { .book-item { width: 33.333%; } }
@media (max-width: 599px) { .book-item { width: 50%; } }

/* 4. 本の画像：ラージサイズに合わせて枠を拡大 */
.book-cover {
    height: 300px; /* 画像エリアを広く（棚板以外の高さ） */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    z-index: 5;
}

.main-cover {
    max-width: 201px; /* 横幅制限は維持 */
    width: 95%;      /* 枠内でなるべく大きく */
    height: auto;
    max-height: 95%; /* 縦も大きく */
    object-fit: contain;
    box-shadow: 8px 0 20px rgba(0,0,0,0.4); /* 影を少し強調 */
	background-color: #fff;
}

/* 5. 棚の中の文字部分（背景画像と位置を合わせる） */
.shelf-content {
    height: 44px; /* 棚の板の厚み部分 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff !important;
    padding: 0 10px;
    z-index: 10;
}

/* 文字の視認性調整 */
.book-title {
    font-size: 0.95rem; /* 少し大きく */
    font-weight: normal;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* NEWバッジの調整 */
.new-badge {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 120px;
    z-index: 15;
}
@media (max-width: 600px) {
	.new-badge {
		top: -30px;
    	left: 52px;
	}
	.l-header__menuBtn .c-iconBtn {
		display:none;
	}
}
@media (max-width: 480px) {
	.new-badge {
		top: 0;
    	left: 32px;
	}
}