@charset "UTF-8";

canvas {
    position       : fixed;
    top            : 0;
    left           : 0;
    z-index        : 0;
}

.container {
	position       : relative;
	z-index        : 10;
	max-width      : 900px;
	margin         : 40px auto 40px auto;
	padding        : 40px;
	transform      : translateY(-50%);
	background     : rgba(255, 255, 255, 0.7);
	border-radius  : 12px;
	box-shadow     : 0 8px 20px rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(6px);
	animation      : fadeUp 1.5s ease-out forwards;
	opacity        : 0;
}


/* カバーエリア */    

/* トップロゴ */
.logo-wrapper {
	position       : relative;
	width          : fit-content;
	margin         : 20px auto 0 auto;
    text-align     : center;	
	z-index        : 2;
}

.logo-wrapper2 {
	margin         : 20px auto 20px auto;
}

.logo-image {
	position       : relative;    
    display        : block;
    width          : 300px;
    height         : auto;
    margin         : 0 auto;
    z-index        : 1;
}

.logo-image2 {
	width          : 200px;
}

.logo-subtext {
    text-align     : center;
    font-family    : Arial, sans-serif;
    font-size      : 14px;
    letter-spacing : 4px;
    color          : #888;
    margin-top     : 10px;
}

.logo-tagline {
  	text-align     : center;
  	font-family    : "Yu Mincho", serif;
  	font-size      : 20px;
  	font-weight    : bold;
  	color          : #2b4c5c;
  	letter-spacing : 0.05em;
  	margin-top     : 12px;
  	background     : linear-gradient(to right, #00b2af, #007c7a);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
  	animation      : fadeUp 1.5s ease-out forwards;
  	opacity        : 0;
}

.logo-tagline {
  	position       : relative;
}
.logo-tagline::after {
  	content        : "";
  	position       : absolute;
  	bottom         : -5px;
  	left           : 50%;
  	transform      : translateX(-50%);
  	width          : 60%;
  	height         : 2px;
  	background     : linear-gradient(to right, #00b2af, transparent);
  	animation      : glowLine 2s ease-in-out infinite alternate;
}

@keyframes glowLine {
  	from { opacity: 0.4; width: 40%; }
  	to { opacity: 1; width: 80%; }
}

/* キャラクターエリア */
.character-row {
  	display        : flex;
  	padding        : 50px 10px 0px 10px;  	
  	justify-content: center;
  	align-items    : flex-end;
  	gap            : 16px;
  	flex-wrap      : nowrap;         /* 折り返しさせない */
  	overflow-x     : auto;          /* 画面に収まらない場合は横スクロール */
}

.character-row img {
  	flex-shrink    : 0;
  	width          : 20vw;
  	max-width      : 80px;
  	height         : auto;
    transform      : translateY(20px);
  	transition     : transform 0.3s ease, filter 0.3s ease;
    animation-delay: 0s, 0s;
  	filter         : drop-shadow(0 0 6px rgba(0, 178, 175, 0.3));
}

.character-row img:hover {
  	transform      : scale(1.1);
  	filter         : drop-shadow(0 0 10px rgba(0, 178, 175, 0.6));
}

@keyframes float {
  	0%   { transform: translateY(0px); }
  	50%  { transform: translateY(-40px); }
  	100% { transform: translateY(0px); }
}

.character-row {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.character-row::-webkit-scrollbar {
    display        : none;
}
.char1 {
    animation      : float 4s ease-in-out infinite;  
    animation-delay: 0s, 0.3s;
    animation-duration: 4s, 1s;
}
.char2 {
    animation      : float 3s ease-in-out infinite;  
    animation-delay: 2s, 0.9s;
    animation-duration: 4.5s, 1.4s;  
}
.char3 {
    animation      : float 4s ease-in-out infinite;  
    animation-delay: 4s, 1.2s;
    animation-duration: 5s, 1.6s;  
}
.char4 {
    animation      : float 3s ease-in-out infinite;  
    animation-delay: 6s, 1.5s;
    animation-duration: 4.8s, 1.3s;  
}

@media (max-width: 600px) {
	.character-row img {
		width         : 18vw;
	}
}

.logo-deco {
    position       : absolute;
    top            : 0;
    left           : 0;
    width          : 300px;
    height         : 120px;
    z-index        : 2;
    pointer-events : none;
}

/* キャンペーン */
 #campaign-banner {
    max-width      : 800px;
    margin         : 20px auto 66px auto;
    padding        : 30px 15px 15px 15px;
    background     : linear-gradient(135deg, #fffae3, #ffe4b5);
    border         : 3px dashed #ff9800;
    text-align     : center;
    font-family    : 'Arial', 'Helvetica', sans-serif;
    animation      : glow 2s infinite alternate;
    border-radius  : 12px;
    box-shadow     : 0 0 20px rgba(255, 153, 0, 0.4);
}

@keyframes glow {
    from { box-shadow: 0 0 10px rgba(255, 153, 0, 0.4); }
    to   { box-shadow: 0 0 25px rgba(255, 87, 34, 0.8); }
}

.campaign-content .headline {
    margin-bottom  : 10px;
	font-size      : 2rem;
    font-weight    : bold;
    color          : #e65100;
}

.campaign-content .subline {
    margin-bottom  : 20px;
	font-size      : 1.2rem;
    color          : #bf360c;
}

.campaign-content .highlight {
    padding        : 3px 8px;
	background     : #ff5722;
    color          : #fff;
    border-radius  : 4px;
    font-weight    : bold;
}

.campaign-content .description {
    font-size      : 1rem;
    color          : #4e342e;
    line-height    : 1.5;
}

.campaign-content .description p {
	text-align     : center;
}

/* モバイル対応 */
@media screen and (max-width: 600px) {
	.campaign-content .headline {
    	font-size     : 1.5rem;
  	}
  	.campaign-content .subline {
    	font-size     : 1rem;
  	}
}
@media screen and (max-width: 414px) {
  	.campaign-content .headline {
    	font-size     : 1.4rem;
  	}
}

#tshirt-section {
    padding         : 20px 20px;
    background-color: transparent;
    font-family     : 'Arial', sans-serif;
    text-align      : center;
}

.tshirt-heading {
  	margin-bottom   : 20px;
	font-size       : 1.8rem;
  	color           : #2e7d32;
}

#tshirt-visual {
    text-align      : center;
    padding         : 20px;
}

/* モバイル向け：1枚だけ表示 */
.mobile-only {
    display         : block;
}

.desktop-only {
    display         : none;
}

/* 横並びスタイル */
.tshirt-side-img {
    max-width       : 45%;
    height          : auto;
    margin          : 0 10px;
}

/* 共通スタイル */
.responsive-img {
    max-width       : 90%;
    height          : auto;
    border-radius   : 6px;
    box-shadow      : 0 2px 6px rgba(0,0,0,0.15);
}

/* PC表示切替（幅600px以上） */
@media screen and (min-width: 600px) {
  	.mobile-only {
    	display        : none;
  	}
  	.desktop-only {
    	display        : flex;
    	justify-content: center;
    	align-items    : center;
    	gap            : 20px;
  	}
}

.tshirt-button-wrapper {
    margin-top         : 10px;
}

.buy-button {
    display            : inline-block;
    padding            : 12px 24px;	
	background-color   : #43a047;
    color              : #fff!important;
    text-decoration    : none;
    font-size          : 1rem;
    border-radius      : 6px;
    transition         : background-color 0.3s ease;
}

.buy-button:hover {
    background-color   : #2e7d32;
}

/* プロローグ */
#prologue-title-image {
  	display            : flex;
	width              : 200px;
  	margin             : 20px auto;
  	justify-content    : center;
}

#prologue-title-image img {
  	display            : block;
	max-width          : 90%;
  	height             : auto;
}

.caption-en {
  	position           : relative;
  	bottom             : 8%;
  	left               : 50%;
  	margin-top         : -28px;
  	padding-bottom     : 20px;
  	transform          : translateX(-50%);
  	font-size          : 1.6rem;
  	font-family        : 'Georgia', 'Garamond', 'Times New Roman', serif;
  	letter-spacing     : 0.1em;
  	color              : rgba(0, 0, 0, 0.6);
  	text-shadow        : 1px 1px 2px rgba(0, 0, 0, 0.4);
  	pointer-events     : none;
  	text-align         : center;
}

/* 動画 */
#media-title-image {
  	display            : flex;
	width              : 200px;
  	margin             : 20px auto;
  	justify-content    : center;
}

#media-title-image img {
  	display            : block;
	max-width          : 90%;
  	height             : auto;
}
    
/* お知らせ */
#infomation-title-image {
  	display            : flex;
	width              : 200px;
  	margin             : 20px auto;
  	justify-content    : center;
}

#infomation-title-image img {
  	display            : block;
	max-width          : 90%;
  	height             : auto;
}

#introduction {
	position           : relative;
	margin             : 0px 60px;
	background-image   : url('/biz/owners/motosuke/img/bk_motosuko.png');
    background-position: bottom right;
    background-repeat  : no-repeat;
    background-size    : 60%;
    font-size          : 16px;
    line-height        : 1.6;
}

 #introduction p {
    margin-bottom      : 1.2em;
    font-size          : 1.1em;
    text-align         : justify;
    opacity            : 0;
    transform          : translateY(20px);
    animation          : fadeUp 1s ease-out forwards;
}

p:nth-of-type(1) { animation-delay: 0.5s; }
p:nth-of-type(2) { animation-delay: 0.8s; }
p:nth-of-type(3) { animation-delay: 1.1s; }
p:nth-of-type(4) { animation-delay: 1.4s; }
p:nth-of-type(5) { animation-delay: 1.7s; }
p:nth-of-type(6) { animation-delay: 2.0s; }
p:nth-of-type(7) { animation-delay: 2.3s; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .container {
        padding            : 20px;
	}
	.logo-image { 
		width              : 90%; 
	}
	.logo-image2 { 
		width              : 50%; 
	}
	#introduction p { 
		font-size          : 1em; 
	}
	#introduction {
		margin             : 0px 0px;
		background-size    : 90%;
	}
}    

#news-section {
  	max-width              : 800px;
  	margin                 : 0 auto;
	padding                : 30px 15px;
  	background-color       : #fffdf7;
  	font-family            : 'Arial Rounded MT Bold', 'Hiragino Kaku Gothic ProN', sans-serif;
  	text-align             : center;
}

.news-title {
  	margin-bottom          : 20px;
	font-size              : 1.6rem;
  	color                  : #4e944f;
}

.news-list {
  	margin                 : 0 0 20px;
  	padding                : 0;
  	list-style             : none;
}

.news-list li {
  	background-color       : #ffffff;
  	border                 : 1px solid #e0e0e0;
  	border-radius          : 12px;
  	padding                : 12px 16px;
  	margin-bottom          : 12px;
  	box-shadow             : 0 2px 5px rgba(0,0,0,0.05);
  	cursor                 : pointer;
}

/* バッジ＋日付を並べる行 */
#news-list .meta-line {
   display                 : flex;
   margin-bottom           : 6px;
   align-items             : center;
   gap                     : 10px;
}

/* バッジ固定幅 */
.badge {
  	display                : inline-block;
  	width                  : 60px;
  	padding                : 2px 0;
  	text-align             : center;
  	font-size              : 0.75rem;
  	font-weight            : bold;
  	border-radius          : 12px;
  	color                  : #fff;
  	flex-shrink            : 0;
}
.badge.news { background-color: #ff6f61; }
.badge.info { background-color: #4db6ac; }
.badge.story { background-color: #9575cd; }

/* 日付 */
#news-list .date {
  	font-size              : 0.9rem;
  	color                  : #888;
  	flex-shrink            : 0;
}

/* タイトル */
#news-list .news-text {
  	font-size              : 1rem;
  	color                  : #333;
  	text-align             : left;
  	line-height            : 1.4;
}

/* NEWバッジ */
.new-info-badge {
  	margin-left            : 8px;
  	padding                : 2px 6px;	
	background-color       : #ff4081;
  	color                  : #fff;
  	font-size              : 0.65rem;
  	border-radius          : 8px;
  	vertical-align         : middle;
}

.newMark {
    float: left;
    display: block;
    position: relative;
    width: 64px;     
    margin-bottom: 0px;
    margin-top: 0px;
}

.newMark img {
	width           : 100%;
}

/* モバイル表示：600px以下でもOK。2行化済み */
@media screen and (max-width: 600px) {
  	.news-list li {
    	padding: 10px 12px;
  	}

  	.meta-line {
    	flex-wrap: wrap;
    	justify-content: flex-start;
    	gap: 6px;
  	}

  	.news-text {
    	font-size: 0.95rem;
  	}
  
	#news-list .newMark {
	    width           : 50px;     
	    margin-bottom   : -6px;
	    margin-top      : -6px;
	}
	
	#news-list .title {
		margin-top      : -6px;
		line-height     : 1.2;
	}  
}

/* ストーリー漫画　タブ */
.tab-wrapper {
  	max-width              : 900px;
  	margin                 : 0 auto;
  	font-family            : 'Segoe UI', sans-serif;
  	border-radius          : 8px;
}

.tab-icon-inline {
    width                  : 40px;
    height                 : auto;
    margin-top             : -30px;
    border-radius          : 6px;
}

/* タブボタンの非表示 */
.tab-wrapper input[type="radio"] {
    display                : none;
}

/* タブラベル（横並び） */
.tab-label {
  	display                : inline-block;
  	padding                : 13px 10px 13px 3px;
  	/*margin-right           : 4px;*/
  	font-size              : 1.4em;
  	cursor                 : pointer;
  	background             : #f5f5f5;
  	border-radius          : 6px 6px 0 0;
  	border                 : 1px solid #ccc;
  	border-bottom          : none;
  	transition             : background 0.3s, color 0.3s;
}

.tab-label:hover {
  	background             : #e0f7fa;
  	color                  : #007c7a;
}

/* アクティブタブのスタイル */
#tab1:checked ~ .tab-label[for="tab1"],
#tab2:checked ~ .tab-label[for="tab2"] {
  	background             : white;
  	border-color           : #00b2af;
  	color                  : #007c7a;
  	font-weight            : bold;
}

/* コンテンツ領域 */
.tab-content {
  	display                : none;
  	border                 : 1px solid #00b2af;
  	padding                : 20px;
  	background-color       : #dff6fa47;
  	border-radius          : 0 0 8px 8px;
  	opacity                : 0;
  	transform              : translateY(10px);
  	transition             : opacity 0.4s ease, transform 0.4s ease;
}

/* 表示切り替えとフェード適用 */
#tab1:checked ~ .content1,
#tab2:checked ~ .content2 {
  	display                : block;
  	opacity                : 1;
  	transform              : translateY(0);
}

@media (max-width: 600px) {
	.tab-label {
	  	padding                : 13px 3px 13px 3px;
	  	font-size              : 1.0em;
	}
	.tab-content {
  		padding                : 0px;
  		padding-bottom         : 20px;
	}
}

/* ストーリー漫画 エピソードリスト*/

/* 切り替えボタン */
/* 通常版 */
body:not(.smart) .episode-list {
  font-size: 1.1em;
  max-width: 900px;
  margin: auto;
}

/* スマートフォン版 */
body.smart .episode-list {
  font-size: 0.95em;
  max-width: 100%;
  padding: 0 1em;
}

body.smart .episode-card {
  font-size: 1em;
  line-height: 1.4;
}
/* コンテナのスタイル */
.title-list-container {
  	max-width              : 900px;
  	padding                : 6px 40px 40px 40px;;
}

/* メインタイトルのスタイル */
.main-title {
  	margin-bottom          : 10px;
	text-align             : center;
}

.main-title-logo {
  	display                : inline-block;
	width                  : 300px;
  	max-width              : 80%;
  	height                 : auto;
}

.section-label {
  	position               : relative;
  	display                : inline-block;
  	margin-bottom          : 10px;
	text-align             : center;
  	font-family            : 'Yu Mincho', serif;
  	font-size              : 24px;
  	font-weight            : bold;
  	color                  : #007c7a;
  	letter-spacing         : 0.15em;
   	background             : linear-gradient(to right, #00b2af, #007c7a);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
  	animation              : fadeIn 1.2s ease-out both;
}

.section-label::after {
  	content                : '';
  	position               : absolute;
  	bottom                 : -4px;
  	left                   : 50%;
  	transform              : translateX(-50%);
  	width                  : 60%;
  	height                 : 2px;
  	background             : #00b2af;
  	border-radius          : 2px;
  	opacity                : 0.5;
}

@keyframes fadeIn {
  	from { opacity: 0; transform: translateY(-10px); }
  	to   { opacity: 1; transform: translateY(0); }
}

.viewModeIndicator {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff8dc;
  color: #333;
  padding: 0.5em 1em;
  font-weight: bold;
  border: 2px solid #999;
  border-radius: 10px;
  z-index: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  font-family: "Rounded Mplus 1c", sans-serif;
}

.toggleViewBtn {
    margin: 5px;
}

.latest-episode, .episode-section {
  	max-width              : 800px;
  	margin                 : 40px auto 0;
  	padding                : 0 20px;
  	text-align             : center;
}

#episodeCount {
	font-size              : 1.6em;	
}

.latest-episode h2,
.episode-section h2 {
  	font-size              : 22px;
  	color                  : #2b4c5c;
  	margin-bottom          : 20px;
}

.button-row {
  	display                : flex;
  	justify-content        : center;
  	gap                    : 12px;
  	margin                 : 30px 0;
}

.button-row button {
  	padding                : 10px 7px;
  	font-size              : 14px;
  	font-weight            : bold;
  	border                 : none;
  	border-radius          : 8px;
  	cursor                 : pointer;
  	box-shadow             : 0 2px 6px rgba(0, 0, 0, 0.15);
  	transition             : background 0.3s ease;
}

#showAllBtn,
#showAllBtnThumb {
    background             : #007c7a;
    color                  : #fff;
}
#showAllBtn:hover,
#showAllBtnThumb:hover {
    background             : #006b68;
}

#resetReadBtn,
#resetReadBtnThumb {
    background             : #ff6666;
    color                  : white;
}
#resetReadBtn:hover,
#resetReadBtnThumb:hover {
    background             : #e05555;
}

#reverseOrderBtn,
#reverseOrderBtnThumb {
    background             : #5555ff;
    color                  : white;
}
#reverseOrderBtn:hover,
#reverseOrderBtnThumb:hover {
    background             : #4444dd;
}

/* 非表示クラス */
.episode-card.hidden,
.thumbnail-item.hidden {
    display                : none;
}

.episode-list {
  	display                : grid;
	list-style             : none;
  	padding                : 0;
  	grid-template-columns  : repeat(auto-fit, minmax(220px, 1fr));
  	gap                    : 20px;
}

.episode-card {
  	position               : relative;
  	padding                : 20px;  
  	background             : rgba(255, 255, 255, 0.8);
  	border                 : 2px solid #a3e5f0;
  	border-radius          : 12px;
  	text-align             : center;
  	font-size              : 16px;
  	line-height            : 1.2;
  	box-shadow             : 0 4px 6px rgba(0, 0, 0, 0.1);
  	/*transition: transform 0.3s ease, box-shadow 0.3s ease;*/
}

.episode-list {
  	counter-reset          : episode-counter 0;
}

.episode-list .episode-card::before {
  counter-increment: episode-counter;
  content: counter(episode-counter);
  display: inline-block;
  background: linear-gradient(135deg, #a0d8ef, #78c2ad);
  color: white;
  font-weight: bold;
  border-radius: 6px;
  padding: 0.2em 0.6em;
  margin-right: 0.5em;
  font-family: 'Segoe UI', sans-serif;
  font-size: 0.9em;
}

.episode-list .episode-card.decrement::before {
  counter-increment: episode-counter -1; /* 降順 */
  content: counter(episode-counter);
}

/* 初期フェード設定 */
.episode-card {
    transition             : opacity 0.4s ease, transform 0.4s ease;
    opacity                : 1;
}

/* フェードアウト */
.fade-out {
  	opacity                : 0;
  	transform              : translateY(10px);
}

/* フェードイン */
.fade-in {
  	opacity                : 1;
  	transform              : translateY(0);
}

.episode-card strong {
  	font-family            : 'Yu Gothic', 'Meiryo', sans-serif;
  	font-weight            : bold;
  	font-size              : 1em;
  	margin-right           : 4px;
}

.episode-card.read {
/*  background: #e1f9f7;
  border-color: #00b2af;
  position: relative;
*/  
  	background             : #e1f9f7;
  	position               : relative;
  	border-radius          : 6px;
  	box-shadow             : 0 0 0 2px #00b2af inset;  
}

.thumbnail-item.read {
  	position               : relative;
}
/* サムネイル画像を暗くする（暗く＋グレー） */
.thumbnail-item.read img {
    filter                 : grayscale(70%) brightness(80%);
    transition             : filter 0.4s ease;
}

.episode-card.read::after,
.thumbnail-item.read::after {
  	content                : '✓ 既読';
  	position               : absolute;
  	top                    : 6px;
  	right                  : 10px;
  	padding                : 2px 6px;
  	font-size              : 12px;
  	color                  : white;
  	background             : #00b2af;
  	border-radius          : 10px;
  	font-weight            : bold;
  	box-shadow             : 0 2px 4px rgba(0, 0, 0, 0.2);
}

.episode-card:hover {
  	transform              : translateY(-4px);
  	box-shadow             : 0 8px 12px rgba(0, 0, 0, 0.2);
}
.thumbnail-item.read:hover img {
  	filter                 : none;
}

.highlight {
  	font-weight            : bold;
  	background             : linear-gradient(to right, #dffaf4, #f0fffd);
  	border-color           : #00b2af;
  	box-shadow             : 0 4px 12px rgba(0, 178, 175, 0.2);
}

/* 星の装飾（疑似要素） */
.episode-card::before {
  	content                : '★';
  	position               : absolute;
  	top                    : -10px;
  	left                   : -10px;
  	font-size              : 24px;
  	color                  : #ffd700;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
	.title-list-container {
	  	padding            : 6px 10px 40px 10px;
	}
  	.episode-card {
    	font-size          : 14px;
    	padding            : 16px;
  }
}
   
/* NEWバッジ */
.new-badge {
  	position               : absolute;
  	top                    : -10px;
  	right                  : -10px;
	display                : inline-block;
  	background             : #ff3b3f;
  	color                  : white;
  	font-size              : 12px;
  	font-weight            : bold;
  	padding                : 2px 6px;
  	border-radius          : 10px;
  	box-shadow             : 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* バッジが正しく表示されるよう親要素にpositionを指定 */
.episode-card.highlight {
  	position               : relative;
}
  
.publish-date {
  	margin-top             : 8px;
  	font-size              : 0.9em;
  	color                  : #555;
  	font-style             : italic;
}

/* タイトルリストのリンク装飾 */
.episode-list a {
  	text-decoration        : none;
  	color                  : #1c1c1c;
  	transition             : color 0.3s ease;
}
.episode-list a:hover {
  	color                  : #007c7a;
}

/* ストーリー漫画 サムネイル */
/* サムネイルのリンク */
.thumbnail-item a {
  	display                : block;
	text-decoration        : none;
  	color                  : inherit;
  	transition             : transform 0.3s ease;
}
.thumbnail-item a:hover {
  	transform              : scale(1.03);
}

/* サムネイルグリッド */
.thumbnail-grid {
  	display                : flex;
  	flex-wrap              : wrap;
	justify-content        : center;  
  	gap                    : 16px;
}

.thumbnail-item {
  	width                  : 180px;
  	max-width              : 100%;
  	text-align             : center;
  	font-size              : 14px;
}

.thumbnail-item img {
  	width                  : 100%;
  	height                 : auto;
  	border-radius          : 8px;
  	box-shadow             : 0 2px 6px rgba(0, 0, 0, 0.1);
}

.thumbnail-item p {
	line-height            : 1.6;
    text-align             : center;	
}

.show-more-item,
.read-now {
  	padding                : 12px;
	text-align             : center;
  	list-style             : none;
}

.show-more-item button,
.read-now button {
  	padding                : 10px 20px;
	background             : #007c7a;
  	color                  : white;
  	border                 : none;
  	border-radius          : 6px;
  	font-size              : 14px;
  	cursor                 : pointer;
  	transition             : background 0.3s ease;
}

.show-more-item button:hover,
.read-now button:hover {
  	background             : #005f5c;
}

.show-more-thumbnail {
  	text-align             : center;
  	margin-top             : 16px;
}

.show-more-thumbnail button {
  	padding                : 10px 20px;
  	background             : #007c7a;
  	color                  : white;
  	border                 : none;
  	border-radius          : 6px;
  	font-size              : 14px;
  	cursor                 : pointer;
  	transition             : background 0.3s ease;
}

.show-more-thumbnail button:hover {
  	background             : #005f5c;
}


@media (max-width: 600px) {
	.thumbnail-item {
		width              : calc(47%);
	}
}

/* モトスケショップ */
#motosuke-shop-banner {
  	width                  : 100%;
  	padding                : 20px 0;
  	text-align             : center;
  /*background-color: #fff8e1;*/ 

}

#motosuke-shop-banner img {
  	display                : inline-block;
	max-width              : 100%;
  	height                 : auto;
  	border-radius          : 8px;
  	box-shadow             : 0 4px 10px rgba(0, 0, 0, 0.1);
}