@charset "utf-8";

.md_lead .copy { font-size: 1.125em; margin-bottom: 0; }

/*============================
#storyPickArea
============================*/
#storyPickArea { padding-top: 100px; }
#storyPickArea .md_mainTitle {}
#storyPickArea .md_mainTitle .sub {}
#storyPickArea .md_mainTitle .main {}
#storyPickArea .content { margin-top: 40px; }
#storyPickArea .content ul { display: flex; /* Flexboxを有効化 */ flex-wrap: wrap; /* 要素がコンテナを超えたら折り返す */ gap: 40px 70px; /* 上下の間隔を40px、左右の間隔を70pxに設定 */ }
#storyPickArea .content ul li { width: 340px;  position: relative; }
#storyPickArea .content ul li a {}
#storyPickArea .content ul li a .image { height: 240px; overflow: hidden; position: relative; border-radius: 20px; }
#storyPickArea .content ul li a .image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; transition: 0.3s all; }
#storyPickArea .content ul li a .image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: 0.3s all; }
#storyPickArea .content ul li a .data { margin-top: 15px; border-bottom: solid 1px #ddd; display: flex; }
#storyPickArea .content ul li a .data .number { width: 130px; padding-bottom: 12px; padding-top: 4px; border-right: solid 1px #ddd; }
#storyPickArea .content ul li a .data .category { flex: 1; padding: 4px 0 12px 12px; font-size: 0.9125em; text-align: right; }
#storyPickArea .content ul li a .text { margin-top: 15px; line-height: 1.5; font-weight: bold; }
#storyPickArea .content ul li a .sub { margin-top: 10px; line-height: 1.5; font-size: 0.875em; }
#storyPickArea .content ul li a .date { margin-top: 10px; color: #777; font-size: 0.875em; line-height: 1.5; }
#storyPickArea .content ul li a:hover .image img { transform: scale(1.05); }
#storyPickArea .content ul li a:hover .image::after { opacity: 0; }
#storyPickArea .content.pick { overflow: inherit; }
#storyPickArea .content.pick ul { gap: 70px; }
#storyPickArea .content.pick ul li { float: left; }
#storyPickArea .content.pick ul li.pickup { margin-bottom: 40px; }
#storyPickArea .content.pick ul li.pickup::after { content: "PICKUP"; display: block; width: 62px; height: 62px; border-radius: 62px;  position: absolute; left: -20px; top: -20px; background: #ff5a5f; color: #fff; line-height: 1.2; padding: 15px 10px 0; text-align: center; }
#storyPickArea .content .swiper-button-prev { display: none; }
#storyPickArea .content .swiper-button-next { display: none; }
#storyPickArea .search { margin-top: 40px; position: relative; padding-bottom: 80px; }
#storyPickArea .search .md_tab_bar {}
#storyPickArea .search .searchContent { background: #f7f7f7; padding: 40px 0; border: solid 1px #ccc; border-top: none; border-radius: 0 0 5px 5px; }
#storyPickArea .search .searchContent ul { display: flex; justify-content: center; gap: 30px; }
#storyPickArea .search .searchContent ul li { display: inline-block; }
#storyPickArea .search .searchContent ul li a { display: block; width: 220px; padding: 12px; border-radius: 30px; border: solid 1px #ddd; text-align: center; background: #fff; cursor: pointer; }
#storyPickArea .search .searchContent ul li a.active { background: #222; border: solid 1px #222; color: #fff; }
#storyPickArea .search::after { content: ""; display: block; width: 100px; height: 80px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -20px; background: url("/imageFile/global/icon_bigArrowBottom.png") no-repeat center; }

/*============================
#supporterArea
============================*/
#supporterArea { padding-top: 100px; padding-bottom: 100px; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; }
#supporterArea .md_mainTitle {}
#supporterArea .md_mainTitle .sub {}
#supporterArea .md_mainTitle .main {}
#supporterArea .md_mainTitle .lead { position: absolute; left: 450px; top: -10px; line-height: 1.5; font-size: 1em; font-weight: bold; }
#supporterArea .content {}
#supporterArea .content ul {}
#supporterArea .content ul li { float: left; width: 340px; margin-right: 70px; margin-top: 40px; position: relative; }
#supporterArea .content ul li:nth-child(3n) { margin-right: 0; }
#supporterArea .content ul li a {}
#supporterArea .content ul li a .image { overflow: hidden; position: relative; border-radius: 20px; }
#supporterArea .content ul li a .image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; transition: 0.3s all; }
#supporterArea .content ul li a .image img { object-fit: cover; width: 340px; height: 255px; transition: 0.3s all; }
#supporterArea .content ul li a .image .category { position: absolute; left: 0; top: 20px; }
#supporterArea .content ul li a .image .category img { width: 125px; height: auto; }
#supporterArea .content ul li a .data {}
#supporterArea .content ul li a .data .text { margin-top: 15px; line-height: 1.5; font-weight: bold; }
#supporterArea .content ul li a .data .date { margin-top: 10px; color: #777; font-size: 0.875em; line-height: 1.5; }
#supporterArea .content ul li a:hover .image img { transform: scale(1.05); }
#supporterArea .content ul li a:hover .image::after { opacity: 0; }

/*============================
#storyArea
============================*/
#storyArea { padding-top: 100px; }
#storyArea .md_mainTitle {}
#storyArea .md_mainTitle .sub {}
#storyArea .md_mainTitle .main {}
#storyArea .content { margin-top: 40px; }
#storyArea .content ul {
display: flex; /* Flexboxを有効化 */
flex-wrap: wrap; /* 要素がコンテナを超えたら折り返す */
gap: 40px 70px; /* 上下の間隔を40px、左右の間隔を70pxに設定 */ }
#storyArea .content ul li { width: 340px;  position: relative; }
#storyArea .content ul li a {}
#storyArea .content ul li a .image { height: 240px; overflow: hidden; position: relative; border-radius: 20px; }
#storyArea .content ul li a .image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; transition: 0.3s all; }
#storyArea .content ul li a .image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: 0.3s all; }
#storyArea .content ul li a .data { margin-top: 15px; border-bottom: solid 1px #ddd; display: flex; }
#storyArea .content ul li a .data .number { width: 130px; padding-bottom: 12px; padding-top: 4px; border-right: solid 1px #ddd; }
#storyArea .content ul li a .data .category { flex: 1; padding: 4px 0 12px 12px; font-size: 0.9125em; text-align: right; }
#storyArea .content ul li a .text { margin-top: 15px; line-height: 1.5; font-weight: bold; }
#storyArea .content ul li a .sub { margin-top: 10px; line-height: 1.5; font-size: 0.875em; }
#storyArea .content ul li a .date { margin-top: 10px; color: #777; font-size: 0.875em; line-height: 1.5; }
#storyArea .content ul li a:hover .image img { transform: scale(1.05); }
#storyArea .content ul li a:hover .image::after { opacity: 0; }
#storyArea .content.pick { overflow: inherit; }
#storyArea .content.pick ul { gap: 70px; }
#storyArea .content.pick ul li { float: left; }
#storyArea .content.pick ul li.pickup { margin-bottom: 40px; }
#storyArea .content.pick ul li.pickup::after { content: "PICKUP"; display: block; width: 62px; height: 62px; border-radius: 62px;  position: absolute; left: -20px; top: -20px; background: #ff5a5f; color: #fff; line-height: 1.2; padding: 15px 10px 0; text-align: center; }
#storyArea .content .swiper-button-prev { display: none; }
#storyArea .content .swiper-button-next { display: none; }
#storyArea .search { margin-top: 40px; position: relative; padding-bottom: 80px; }
#storyArea .search .md_tab_bar {}
#storyArea .search .searchContent { background: #f7f7f7; padding: 40px 0; border: solid 1px #ccc; border-top: none; border-radius: 0 0 5px 5px; }
#storyArea .search .searchContent ul { display: flex; justify-content: center; gap: 30px; }
#storyArea .search .searchContent ul li { display: inline-block; }
#storyArea .search .searchContent ul li a { display: block; width: 220px; padding: 12px; border-radius: 30px; border: solid 1px #ddd; text-align: center; background: #fff; cursor: pointer; }
#storyArea .search .searchContent ul li a.active { background: #222; border: solid 1px #222; color: #fff; }
#storyArea .search::after { content: ""; display: block; width: 100px; height: 80px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -20px; background: url("/imageFile/global/icon_bigArrowBottom.png") no-repeat center; }