@charset "UTF-8";
.tabs { margin: 4em 0 0; }
.tabs__list { display: flex; justify-content: center; list-style: none; padding: 0; margin: 0; position: relative; margin-bottom: 2em }
.tabs__list::after { position: absolute; content: ''; width: 100%; height: 1px; background-color: #DCDCDC; top: 50%; left: 0; transform: translateY(-50%); }
.tabs__list li { background-color: #fff; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); position: relative; z-index: 100; }
.tabs__button { background: none; padding: 1.2em 3em; cursor: pointer; font-weight: 600; color: #333; border-bottom: 0.25em solid transparent; transition: 0.3s; line-height: 1 }
.tabs__button span { font-size: 0.8rem; display: block; font-weight: 400; margin-bottom: 0.5em; }
.tabs__button:hover { color: #00533E; }
.tabs__button.is-active { border-color: #00533E; color: #00533E; font-weight: bold; }
.tabs__panel { padding: 1.5em 0; }
.tabs__panel.is-hidden { display: none; }
@media screen and (min-width:768px) {
    .tabs__button { font-size: 1.2rem;}
    .tabs__button:hover { background-color: #f2f2f2; }
}
@media screen and (min-width:768px) and (max-width:1120px) { }
@media screen and (max-width:767px) {
    .l-page { overflow-x: visible; }
    .tabs__list { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin: 0; padding: 1em; scrollbar-width: none; justify-content: flex-start; --tabs-full-width: 0; }

    /* WebKitブラウザ用：スクロールバー非表示 */
    .tabs__list::-webkit-scrollbar { display: none; }
    .tabs__list::after { width: var(--tabs-full-width); }
    .tabs__list li { box-shadow: 2px 0 8px rgba(105, 105, 105, 0.3); }
    .tabs__button { flex: 0 0 auto; white-space: nowrap; min-width: 6em; text-align: center; padding: 1.2em 2em; }
}