@charset "UTF-8";#halloween {background: yellow;}#halloween .hw-top {background-image: url(/img/lp/event/hw/hw_2026_top_bg.png);background-size: cover;background-position: center;padding: 30px;box-sizing: border-box;}#halloween .hw-top .top-img {margin: 0 auto;text-align: center;width: 1260px;position: relative;}#halloween .hw-top .top-img img {display: block;}#halloween .hw-top .top-img img:last-child {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}#halloween .hw-top .top-txt {margin: 0 auto;padding: 30px;width: 1260px;text-align: center;background: rgba(255, 255, 255, 0.8);box-sizing: border-box;}#halloween .hw-top .top-txt h1 {text-align: center;background: #000;width: 600px;margin: 0 auto;color: #fff;font-weight: 900;font-size: 30px;}#halloween .hw-top .top-txt span {display: block;padding: 10px 0;box-sizing: border-box;font-weight: bold;font-size: 1.5em;color: #910782;}#hw-nav {background-color: #000;background-image: linear-gradient(90deg, rgba(255, 136, 0, 0.4) 50%, transparent 50%), /* 横縞 */linear-gradient(rgba(255, 136, 0, 0.4) 50%, transparent 50%);background-size: 30px 30px;padding: 30px 0;border-top: solid 20px #000;border-bottom: solid 20px #000;}#hw-nav ul {width: 1260px;display: flex;flex-wrap: wrap;padding: 0;margin: 0 auto;justify-content: space-between;list-style: none;/* リストの・（ポッチ）を念のためリセット */}#hw-nav ul li {width: 19%;}#hw-nav ul li a {color: #fff;background: #000;border: solid 5px #ed781e;width: 100%;aspect-ratio: 1 / 1;border-radius: 50%;display: flex;justify-content: center;align-items: center;text-decoration: none;font-size: 1.5rem;/* お好みの大きいサイズに調整 */text-align: center;/* 文字を中央揃えに */word-break: break-all;/* 円の幅に合わせて強制改行 */box-sizing: border-box;/* paddingを含めて綺麗な円を維持する */position: relative;padding: 10%;font-weight: 900;}#hw-nav ul li a::before {content: "";position: absolute;bottom: 15%;left: 50%;transform: translateX(-50%);/* 左右中央にぴったり合わせる */width: 0;height: 0;border-style: solid;border-width: 10px 8px 0 8px;border-color: #fff transparent transparent transparent;/* 下向きの白い三角 *//* アニメーションを滑らかにする設定 */transition: transform 0.2s ease-out;}/* 2. 【新規追加】マウスオーバー（:hover）時に、三角だけを下に動かす */#hw-nav ul li a:hover::before {/* 元の左右中央寄せ（translateX(-50%)）を維持したまま、下に4px移動（translateY(4px)） */transform: translateX(-50%) translateY(4px);}/*--- hw共通設定 ---*/.hw-contents .contents-inner {width: 1260px;margin: 0 auto;padding: 50px 0;}.hw-contents .contents-inner > p {margin-bottom: 20px;color: #000;}.hw-contents h2 {font-weight: 900;font-size: 30px;border-bottom: solid 3px #000;color: #000;margin-bottom: 30px;padding-left: 55px;background-repeat: no-repeat;background-position: left center;background-size: 50px auto;}.hw-contents .hw-item-wrapper ul {display: flex;flex-wrap: wrap;row-gap: 16px;column-gap: 16px;}.hw-contents .hw-item-wrapper ul li {display: flex;flex-direction: column;background: #fff;width: 24%;padding: 20px;border-radius: 10px;box-sizing: border-box;}.hw-contents .hw-item-wrapper ul li ._txt {flex-grow: 1;}.hw-contents .hw-item-wrapper ul li ._txt ._name {font-size: 20px;font-weight: bold;}.hw-contents .hw-item-wrapper ul li ._btn a {background: #ed781e;display: block;padding: 10px;border-radius: 30px;text-align: center;color: #fff;font-weight: bold;margin-top: 10px;position: relative;}.hw-contents .hw-item-wrapper ul li ._btn a.feature-page {background: #004f51;}.hw-contents .hw-item-wrapper ul li ._btn a:after {content: "";position: absolute;top: 50%;right: 15px;transform: translateY(-50%);width: 0;height: 0;border-left: 8px solid #fff;border-top: 5px solid transparent;border-bottom: 5px solid transparent;}/*--- 個別設定 ---*/#hw-original, #hw-select, #how-to-hw {background: #f2971b;}#hw-recommend, #hw-color {background: #910782;}#hw-original > .contents-inner {position: relative;}#hw-original > .contents-inner > img {position: absolute;bottom: 0;right: 0;width: 25%;/*商品3種時限定対応*/}#hw-original h2 {background-image: url('/img/lp/event/hw/hw-icon01.png');}#hw-select h2 {background-image: url('/img/lp/event/hw/hw-icon02.png');}#hw-recommend h2 {background-image: url('/img/lp/event/hw/hw-icon03.png');}#hw-color h2 {background-image: url('/img/lp/event/hw/hw-icon04.png');}#how-to-hw h2 {background-image: url('/img/lp/event/hw/hw-icon05.png');}.hw-contents .hw-item-wrapper ul li ._btn a.btn_black {background: #000;}.hw-contents .hw-item-wrapper ul li ._btn a.btn_purple {background: #910782;}.hw-contents .hw-item-wrapper ul li ._btn a.btn_brown {background: #2d1411;}/*--- 読み物 ---*/#how-to-hw .how-cont {background: #fff;margin-bottom: 20px;padding: 40px 20px;border-radius: 10px;}#how-to-hw .how-cont h3 {font-weight: 900;font-size: 1.2em;margin-bottom: 1em;}#how-to-hw .how-cont ul li {margin-bottom: 1em;}#how-to-hw .how-cont ul li h4 {font-weight: bold;color: #e00012;}#how-to-hw .how-cont ul.blog-links li a {font-weight: 900;background: #910782;display: block;padding: 15px 50px 15px 15px;font-size: 1.2em;border-radius: 10px;color: #fff;position: relative;text-decoration: none;transition: background-color 0.3s ease;}#how-to-hw .how-cont ul.blog-links li a::after {content: "→";font-weight: bold;color: #910782;background: #fff;width: 26px;height: 26px;border-radius: 50%;position: absolute;top: 50%;right: 15px;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;font-size: 0.9rem;transition: right 0.3s ease, color 0.3s ease;}#how-to-hw .how-cont ul.blog-links li a:hover {background-color: #6b0360;}#how-to-hw .how-cont ul.blog-links li a:hover::after {right: 8px;color: #6b0360;}/*--- フィルター ---*/#hw-select .hw-filter {display: flex;flex-wrap: wrap;gap: 8px;margin: 16px 0 24px;}#hw-select .filter-btn {padding: 8px 16px;border: 1px solid #ccc;border-radius: 999px;background: #fff;cursor: pointer;font-size: 14px;transition: background 0.2s, color 0.2s;}#hw-select .filter-btn.is-active {background: #910782;color: #fff;border-color: #910782;}#hw-select .filter-btn:hover {background: #910782;}@media screen and (max-width: 768px) {#halloween .hw-top {padding: 10px 0;}#halloween .hw-top .top-img {width: 100%;}#halloween .hw-top .top-img img:last-child {position: relative;width: 100px;}#halloween .hw-top .top-txt {width: auto;padding: 10px;margin: 10px;}#halloween .hw-top .top-txt h1 {width: 100%;font-size: 20px;padding: 10px;box-sizing: border-box;}#halloween .hw-top .top-txt span {font-size: 1.2em;}#halloween .hw-top .top-txt p {font-size: 0.8em;}#hw-nav ul {width: auto;justify-content: space-evenly;}#hw-nav ul li {width: 32%;}#hw-nav ul li a {font-size: 1em;}#hw-nav ul li a::before {border-width: 8px 6px 0 6px;bottom: 5px;}#hw-nav {padding: 10px 0;}.hw-contents .contents-inner {width: auto;padding: 25px 10px;}.hw-contents h2 {font-size: 20px;height: auto;margin-bottom: 10px;background-size: 30px;padding-left: 30px;}.hw-contents .hw-item-wrapper ul li {width: 49%;padding: 10px;}.hw-contents .hw-item-wrapper ul {row-gap: 5px;column-gap: 5px;}.hw-contents .hw-item-wrapper ul li ._txt ._name {font-size: 16px;}.hw-contents .hw-item-wrapper ul li ._btn a {padding: 5px;font-size: 12px;}#hw-original > .contents-inner > img {position: relative;width: 100%;}.hw-contents .hw-item-wrapper ul li ._btn a:after {right: 8px;border-left: 5px solid #fff;border-top: 4px solid transparent;border-bottom: 4px solid transparent;}.hw-contents .hw-item-wrapper ul li ._txt p {font-size: 10px;}/**/.sub_genre_list_ {display: none;}}