@charset "utf-8";

/* BASE ================================================== */
body{ font-family: "Noto Sans JP", sans-serif; color:#333; background-color:#FFF; font-weight:400; }
ul { list-style: none; }
ul li { display: flex; }
ul li::before { content: "・"; color: #D6E1E8; margin-left:-4px; }

/* CHECKBOX ================================================== */
.answer { max-height: 0; overflow: hidden; opacity: 0; transition: all .5s ease; }
.question:checked ~ .answer { max-height: 500px; opacity: 1; }
.icon_wrapper { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.icon_plus, .icon_minus { position: absolute; top: 0; left: 0; width: 16px; height: 16px; transition: opacity .5s ease; }
.icon_minus { opacity: 0; }
.question:checked + label .icon_plus { opacity: 0; }
.question:checked + label .icon_minus { opacity: 1; }
.icon_wrapper_mobile { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.icon_plus_mobile, .icon_minus_mobile { position: absolute; top: 0; left: 0; width: 14px; height: 14px; transition: opacity .5s ease; }
.icon_minus_mobile { opacity: 0; }
.question:checked + label .icon_plus_mobile { opacity: 0; }
.question:checked + label .icon_minus_mobile { opacity: 1; }
.icon_nav_mobile { position: relative; width: 14px; height: 8px; flex-shrink: 0; }
.icon_down_mobile, .icon_up_mobile { position: absolute; top: 0; left: 0; width: 14px; height: 8px; transition: opacity .5s ease; }
.icon_up_mobile { opacity: 0; }
.question:checked + label .icon_down_mobile { opacity: 0; }
.question:checked + label .icon_up_mobile { opacity: 1; }

/* NAV ================================================== */
#service_box{ max-height:0; overflow:hidden; transition:all .25s; }
#service_box:hoverx{ max-height:78px; transition:all .25s; }
#service_id:hover #service_box{ max-height:78px; transition:all .25s; }

/* TOPIC ================================================== */
#news, #announce { display: none; }
:has(#topic_001:checked) ~ #news { display: block; }
:has(#topic_002:checked) ~ #announce { display: block; }
#news_mobile, #announce_mobile { display: none; }
:has(#topic_001_mobile:checked) ~ #news_mobile { display: block; }
:has(#topic_002_mobile:checked) ~ #announce_mobile { display: block; }
input[name="topic_mobile"]:checked + div { color: #FFF; font-weight: 700; background-color:#3A7CA5; }
/* ANIMATION */
.fade-left, .fade-right { opacity: 0; transition: opacity .75s ease-out, transform .75s ease-out; }
.fade-left { transform: translateX(-24px); }
.fade-right { transform: translateX(24px); }
.fade-left.visible, .fade-right.visible { opacity: 1; transform: translateX(0); }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.fade-up{ opacity: 0; }
.seq-fade.visible { animation: fadeUp 0.8s ease-out forwards; }
.scroll-wrap { width: 200%; display: flex; animation: scroll-left 240s linear infinite; }
@keyframes scroll-left { 0%   { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.fade-up { opacity: 0; }
.fade-up.visible { animation: fadeUp .75s ease-out forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to   { opacity: 1; transform: translateY(0); } }
.fade-blur { opacity: 0; filter: blur(8px); }
.fade-blur.visible { animation: fadeBlur .75s ease-out forwards; }
@keyframes fadeBlur { from { opacity: 0; filter: blur(8px); } to   { opacity: 1; filter: blur(0); } }

/* MOBILE ================================================== */
.mobile_panel { position: fixed; top: 0; right: 0; width: 100%; max-width: 100%; height: 100%; background: #fff; transform: translateX(100%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; z-index: 100; box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); }
.mobile_panel.active { transform: translateX(0); opacity: 1; }
.mobile_overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; z-index: 50; }
.mobile_overlay.show { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.mobile_item { transform: translateX(20px); opacity: 0; }
@keyframes mobile_slide_in { 0% { transform: translateX(20px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

/* ================================================== */