@charset "UTF-8"; /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* mixinを定義します */ html { font-size: 100px; -moz-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; height: 100%; scroll-behavior: smooth; } body { width: 100%; height: 100%; font-family: "Zen Kaku Gothic Antique", "メイリオ", "Meiryo", sans-serif; font-size: clamp(0.16rem, 0.15rem + 0.26vw, 0.2rem); /* 基準のフォントサイズ */ font-weight: 500; color: #1f1e1b; background-color: #f3f0e9; display: flex; /* フッターを下に固定するための記述 */ flex-direction: column; /* フッターを下に固定するための記述 */ min-height: 100vh; } main { flex: 1; /* フッターを下に固定するための記述 */ } @media screen and (min-width:1280px) { main { width: calc(100% - min(25vw, 4.1rem)); margin-inline-start: min(25vw, 4.1rem); } } img { width: 100%; height: auto; } a:hover { cursor: pointer; } section + section { padding-block-start: clamp(0.5rem, 0.37rem + 3.28vw, 1rem); } section { padding-block-end: clamp(0.5rem, 0.37rem + 3.28vw, 1rem); } .visually-hidden { position: absolute; white-space: nowrap; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0; clip: rect(0 0 0 0); clip-path: inset(50%); margin: -1px; } :focus-visible { outline: 2px solid #cd820a; } .mincho { font-family: "Hina Mincho", "メイリオ", "Meiryo", sans-serif; font-weight: 400; font-style: normal; } .content-width { width: 100%; margin-inline: auto; padding-inline: 0.24rem; position: relative; } .content-width .kuko-banner { width: 100%; max-width: 400px; } @media screen and (min-width:1280px) { .content-width .kuko-banner { position: absolute; top: 0; right: 0; } } @media screen and (min-width:1280px) { .content-width { width: min(87.2%, 11.8rem); padding-inline: 0; } } .swiper-button-prev, .swiper-button-next { width: clamp(0.439rem, 0.423rem + 0.4vw, 0.5rem); height: clamp(0.439rem, 0.423rem + 0.4vw, 0.5rem); position: static; margin-top: 0; } .swiper-button-prev::after, .swiper-button-next::after { content: ""; } .swiper-button-pause { width: clamp(0.439rem, 0.423rem + 0.4vw, 0.5rem); height: clamp(0.439rem, 0.423rem + 0.4vw, 0.5rem); } .swiper-button-pause > svg { width: clamp(0.439rem, 0.423rem + 0.4vw, 0.5rem); height: clamp(0.439rem, 0.423rem + 0.4vw, 0.5rem); } .swiper-slide-text { -moz-user-select: text; -webkit-user-select: text; user-select: text; } .parag { font-size: clamp(0.15rem, 0.142rem + 0.2vw, 0.18rem); line-height: clamp(0.3rem, 0.274rem + 0.66vw, 0.4rem); } .button-right { width: 100%; display: flex; justify-content: flex-end; } .js-fadein, .js-inorder { opacity: 0; } .js-scrollmap { width: 100%; scrollbar-width: none; } .js-scrollmap img { width: 13rem; max-width: 13rem; cursor: grab; } .js-scrollmap img:active { cursor: grabbing; } .text-red { color: #f3380f; } .text-blue { color: #0024df; } p:has(.text-red) { padding-block-start: 1.5em; } .border-radius10 { border-radius: 0.1rem; } .main-color-circle { fill: #244a3a; } .whitespace-nowrap { white-space: nowrap; } strong { font-weight: bold; } .l-header { position: absolute; top: 0.2rem; left: 0.2rem; z-index: 200; } .l-header a { transition: opacity 0.3s; } @media (hover: hover) { .l-header a:hover { opacity: 0.5; transition: opacity 0.3s; } } @media screen and (min-width:1280px) { .l-header { width: min(25vw, 4.1rem); height: 100%; background-color: #244a3a; position: fixed; top: 0; left: 0; padding-block-end: 0.6rem; overflow-y: auto; scrollbar-width: none; } .l-header::-webkit-scrollbar { display: none; } } .l-header__logo { margin-block-start: 0.2rem; } @media screen and (min-width:1280px) { .l-header__logo { margin-block: 0.6rem; } } .l-header__logo-link { width: min(34.9333vw, 2.98rem); } @media screen and (min-width:1280px) { .l-header__logo-link { width: min(82.683%, 2.98rem); position: relative; margin-inline: auto; z-index: 10000; } } .l-header__button { width: 0.96rem; height: 0.6696rem; background-color: #1f1e1b; border-radius: 0 0 0 0.3rem; display: flex; align-items: center; justify-content: center; position: fixed; top: 0; right: 0; z-index: 10000; } .l-header__button-icon { width: 0.46rem; height: 0.3rem; background-image: url("../img/icon/menu-open.svg"); background-size: cover; background-position: center center; background-repeat: no-repeat; transition: background-image 0.4s; } .l-header__button.is-active > .l-header__button-icon { background-image: url("../img/icon/menu-close.svg"); background-size: cover; background-position: center center; background-repeat: no-repeat; transition: background-image 0.4s; } @media screen and (min-width:1280px) { .l-header__button { display: none; } } .l-header__nav { visibility: hidden; width: 100%; height: 100dvh; background-color: #244a3a; position: fixed; inset: 0; padding-block-start: 0.8rem; padding-block-end: 0.42rem; padding-inline: clamp(0.24rem, 0.157rem + 2.1vw, 0.56rem); transform: translateX(-100%); transition: transform 500ms cubic-bezier(0.55, 0.05, 0.22, 0.99), visibility 500ms cubic-bezier(0.55, 0.05, 0.22, 0.99); overflow-y: auto; } .l-header__nav.is-active { visibility: visible; top: 0; transform: translateX(0); z-index: 9900; transition: transform 500ms cubic-bezier(0.55, 0.05, 0.22, 0.99), visibility 500ms cubic-bezier(0.55, 0.05, 0.22, 0.99); } .l-header__nav-item { border-bottom: 1px solid #cfcabe; } .l-header__nav-item-link { font-size: 0.2rem; padding: 0.2rem 0.1rem; color: #ffffff; } .l-header__nav-sub-list { margin-block-start: 0.25rem; } .l-header__nav-sub-item-link { font-size: 0.2rem; display: flex; align-items: center; gap: 0.1rem; padding: 0.15rem 0; color: #ffffff; } .l-header__nav-sub-item-link path { fill: #ffffff; } .l-header__nav-sns-list { width: -moz-fit-content; width: fit-content; display: flex; align-items: center; gap: 0.24rem; margin-block-start: 0.5rem; margin-inline: auto; } .l-header__nav-sns-link { width: 0.3rem; height: 0.3rem; } .l-header__nav-sns-link svg path { fill: #ffffff; } @media screen and (min-width:1280px) { .l-header__nav { height: -moz-fit-content; height: fit-content; visibility: visible; width: min(25vw, 4.1rem); position: static; transform: translateX(0); overflow-y: visible; padding-block-start: 0; } } #gt_float_wrapper { position: fixed; top: 80px; right: 10px; } @media screen and (min-width:1280px) { #gt_float_wrapper { top: 10px; } } #cn-notice-buttons { width: 100% !important; display: flex !important; gap: 0.05rem !important; } @media screen and (min-width:769px) { #cn-notice-buttons { width: auto !important; } } #cookie-notice .cookie-notice-container, #cookie-notice .cookie-revoke-container { display: flex; flex-direction: column; align-items: center; justify-content: center; } @media screen and (min-width:769px) { #cookie-notice .cookie-notice-container, #cookie-notice .cookie-revoke-container { flex-direction: row; } } #cookie-notice .cn-button:not(.cn-button-custom) { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; } @media screen and (min-width:769px) { #cookie-notice .cn-button:not(.cn-button-custom) { width: 150px !important; margin-block-start: 0.1rem !important; } } .gt_float_switcher .gt-selected .gt-current-lang { padding: 8px 10px !important; } .gt-lang-code { display: none !important; } .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow { width: 8px !important; height: 16px !important; } .gt_float_switcher img { width: 24px !important; border: 1px solid !important; } .cn-close-icon { top: 17px !important; } .l-footer { border-top: 1px solid #cfcabe; padding-block-start: clamp(0.5rem, 0.37rem + 3.28vw, 1rem); } .l-footer a { transition: opacity 0.3s; } @media (hover: hover) { .l-footer a:hover { opacity: 0.5; transition: opacity 0.3s; } } @media screen and (min-width:1280px) { .l-footer { width: calc(100% - min(25vw, 4.1rem)); margin-inline-start: min(25vw, 4.1rem); } } .l-footer__inner { width: min(87.2%, 11.8rem); margin-inline: auto; padding-block-end: clamp(0.5rem, 0.479rem + 0.53vw, 0.58rem); border-bottom: 1px solid #99968e; } @media screen and (min-width:960px) { .l-footer__inner { display: flex; justify-content: space-between; } } .l-footer__logo-link { width: 2.4821rem; margin-block-end: 0.5rem; } @media screen and (min-width:960px) { .l-footer__nav-wrap { display: flex; gap: 4vw; } } @media screen and (min-width: 1440px) { .l-footer__nav-wrap { -moz-column-gap: min(8vw, 13rem); column-gap: min(8vw, 13rem); } } .l-footer__nav-list { display: grid; grid-template-rows: repeat(6, 1fr); row-gap: 0.2rem; } @media screen and (min-width:480px) { .l-footer__nav-list { grid-auto-flow: column; row-gap: 0.28rem; } } @media screen and (min-width:960px) { .l-footer__nav-list { -moz-column-gap: 2vw; column-gap: 2vw; } } @media screen and (min-width: 1440px) { .l-footer__nav-list { -moz-column-gap: min(8vw, 13rem); column-gap: min(8vw, 13rem); } } .l-footer__nav-link { font-size: clamp(0.15rem, 0.147rem + 0.07vw, 0.16rem); line-height: 0.3rem; display: flex; align-items: center; gap: 0.1rem; } .l-footer__nav-link::before { content: ""; width: 0.145rem; height: 0.01rem; display: block; background-color: #99968e; } .l-footer__old-list { display: grid; gap: 0.25rem; margin-block-start: 0.46rem; } .l-footer__old-list-inner { width: max(60.277vw, 226px); display: flex; gap: 0.36rem; flex-wrap: wrap; } .l-footer__old-list-title { font-size: 0.16rem; } @media screen and (min-width:960px) { .l-footer__old-list { margin-block-start: 0; } .l-footer__old-list-inner { width: auto; flex-direction: column; } } .l-footer__bottom { width: min(87.2%, 11.8rem); font-size: 0.12rem; color: #99968e; display: flex; justify-content: space-between; margin-block: 0.2rem; margin-inline: auto; } .l-footer__bottom-link { width: -moz-fit-content; width: fit-content; border-bottom: 1px solid #99968e; } .l-footer__pagetop { opacity: 0; width: clamp(0.6rem, 0.553rem + 1.18vw, 0.78rem); height: clamp(0.6rem, 0.553rem + 1.18vw, 0.78rem); display: flex; align-items: center; justify-content: center; background-color: #244a3a; border-radius: 0.1rem; position: fixed; right: 0.1rem; bottom: 0.1rem; z-index: 10000; transition: opacity 0.3s; } .l-footer__pagetop-show { opacity: 1; transition: opacity 0.3s; } .l-underlayer__sec { padding-block-start: 0; padding-block-end: clamp(0.5rem, 0.37rem + 3.28vw, 1rem); } .l-underlayer__sec:not(.l-underlayer__sakematsuri-kaijyo) .c-button__secondary-list { margin-block-start: clamp(0.5rem, 0.422rem + 1.97vw, 0.8rem); } .l-underlayer__text-st { font-size: clamp(0.15rem, 0.142rem + 0.2vw, 0.18rem); line-height: 2; } .l-underlayer__text-st a { width: -moz-fit-content; width: fit-content; text-decoration: underline; display: inline-flex; align-items: center; gap: 0.05rem; overflow-wrap: anywhere; transition: opacity 0.3s; } .l-underlayer__text-st a > img { width: 1.5em; height: 1.5em; } @media (hover: hover) { .l-underlayer__text-st a:hover { opacity: 0.5; transition: opacity 0.3s; } } .l-underlayer__hero { width: 100%; } .l-underlayer__parag { font-size: clamp(0.16rem, 0.155rem + 0.13vw, 0.18rem); line-height: clamp(0.3rem, 0.274rem + 0.66vw, 0.4rem); } .l-underlayer__parag a { width: -moz-fit-content; width: fit-content; text-decoration: underline; display: inline-block; transition: opacity 0.3s; } @media (hover: hover) { .l-underlayer__parag a .l-underlayer__link:hover { opacity: 0.5; transition: opacity 0.3s; } } .l-underlayer__heading-lv2 { font-size: clamp(0.24rem, 0.219rem + 0.53vw, 0.32rem); font-weight: bold; border-bottom: 1px solid #99968e; margin-block-end: clamp(0.3rem, 0.248rem + 1.31vw, 0.5rem); padding-block-start: clamp(0.5rem, 0.37rem + 3.28vw, 1rem); padding-block-end: clamp(0.2rem, 0.169rem + 0.79vw, 0.32rem); } .l-underlayer__heading-lv3 { font-size: clamp(0.18rem, 0.164rem + 0.39vw, 0.24rem); font-weight: bold; display: flex; align-items: center; gap: 0.16rem; margin-block-end: 0.24rem; } .l-underlayer__heading-lv3 circle { fill: #244a3a; } .l-underlayer__lead { margin-block-end: clamp(0.3rem, 0.222rem + 1.97vw, 0.6rem); } .l-underlayer__lead a { text-decoration: underline; } .l-underlayer__list:last-of-type .l-underlayer__lead { margin-block-end: 0; } .l-underlayer__gap-list { display: grid; gap: 0.6rem; } .l-underlayer__gap-item { display: grid; } .l-underlayer__gap-md { margin-block-start: clamp(0.5rem, 0.37rem + 3.28vw, 1rem); } .l-underlayer__gap-3050 { margin-block-start: clamp(0.3rem, 0.248rem + 1.31vw, 0.5rem); } .l-underlayer__gap-sm { margin-block-start: 0.3rem; } .l-underlayer__table { width: 100%; align-self: flex-start; } .l-underlayer__table .l-underlayer__heading-lv3 { display: table-caption; } .l-underlayer__table .l-underlayer__heading-lv3 svg { margin-inline-end: 0.16rem; height: 0.7em; } .l-underlayer__table tr { border-bottom: 1px solid #e1d8c3; } .l-underlayer__table th, .l-underlayer__table td { padding: 0.14rem; vertical-align: middle; } .l-underlayer__table th { border-right: 1px solid #e1d8c3; } .l-underlayer__table td:not(:last-of-type) { border-right: 1px solid #e1d8c3; } .l-underlayer__table-body { background-color: #ffffff; } .l-underlayer__table-bg-black { color: #1f1e1b; } .l-underlayer__table-center { text-align: center; } .l-underlayer__table-2column { display: grid; gap: 0.4rem; } @media screen and (min-width:960px) { .l-underlayer__table-2column { grid-template-columns: repeat(2, 1fr); } } .l-underlayer__table-notes { padding-block-start: 0.2rem; } .l-underlayer__map { width: 100%; margin-block-start: 0.3rem; } .l-underlayer__map-img { width: 100%; height: auto; } .l-underlayer__map > iframe { width: 100%; } .l-underlayer__section-bg section:nth-of-type(even) { background-color: #eae5d8; } .l-underlayer__link-anchor { height: 0.72rem; font-size: clamp(0.16rem, 0.15rem + 0.26vw, 0.2rem); line-height: 0.3rem; } @media screen and (min-width:769px) { .l-underlayer__link-anchor { line-height: normal; } } .l-underlayer__link { width: -moz-fit-content; width: fit-content; text-decoration: underline; display: inline-block; transition: opacity 0.3s; } @media (hover: hover) { .l-underlayer__link .l-underlayer__link:hover { opacity: 0.5; transition: opacity 0.3s; } } .l-underlayer__external-link { color: #0024df; text-decoration: underline; display: inline-block; transition: opacity 0.3s; } @media (hover: hover) { .l-underlayer__external-link .l-underlayer__external:hover { opacity: 0.5; transition: opacity 0.3s; } } .l-underlayer__banner { display: grid; justify-items: center; margin-block-start: clamp(0.5rem, 0.37rem + 3.28vw, 1rem); margin-inline: auto; } .l-underlayer__banner-img { width: clamp(3.27rem, 2.629rem + 16.15vw, 5.73rem); } .l-underlayer__banner .l-underlayer__link { display: inline; } .l-underlayer__syutten-syoukai-list { display: grid; gap: clamp(0.5rem, 0.37rem + 3.28vw, 1rem); } .l-underlayer__syutten-syoukai-item { display: grid; } .l-underlayer__syutten-syoukai-th1 { width: clamp(0.46rem, 0.455rem + 0.13vw, 0.48rem); } .l-underlayer__syutten-syoukai-th2 { width: clamp(1.18rem, 0.745rem + 10.97vw, 2.85rem); } .l-underlayer__syutten-syoukai-th3 { width: clamp(1.63rem, -0.153rem + 44.91vw, 8.47rem); } .l-underlayer__syutten-syoukai-pdf { font-size: 0.16rem; line-height: 187.5%; text-decoration-line: underline; transition: opacity 0.3s; margin-block-start: clamp(0.3rem, 0.222rem + 1.97vw, 0.6rem); margin-block-end: clamp(0rem, -0.078rem + 1.97vw, 0.3rem); } @media (hover: hover) { .l-underlayer__syutten-syoukai-pdf:hover { opacity: 0.5; transition: opacity 0.3s; } } .l-underlayer__syutten-syoukai-map { height: auto; } .l-underlayer__sakaguraevent-item { display: flex; flex-direction: column; gap: clamp(0.3rem, 0.17rem + 3.28vw, 0.8rem); } .l-underlayer__sakaguraevent-item:not(:first-of-type) { padding-block-start: clamp(0.4rem, 0.296rem + 2.63vw, 0.8rem); } .l-underlayer__sakaguraevent-item:not(:last-of-type) { padding-block-end: clamp(0.4rem, 0.296rem + 2.63vw, 0.8rem); background: linear-gradient(to right, #99968e, #99968e 2px, transparent 2px, transparent 7px) repeat-x left bottom/4px 2px; } @media screen and (min-width:769px) { .l-underlayer__sakaguraevent-item { flex-direction: row; } } .l-underlayer__sakaguraevent-slider { width: 100%; } @media screen and (min-width:769px) { .l-underlayer__sakaguraevent-slider { width: 3.85rem; } } .l-underlayer__sakaguraevent-slider-main { aspect-ratio: 549/341; } .l-underlayer__sakaguraevent-slider-img { border-radius: 0.1rem; } .l-underlayer__sakaguraevent-slider-inner { position: relative; } .l-underlayer__sakaguraevent-slider-inner .l-underlayer__sakaguraevent-slider-prev, .l-underlayer__sakaguraevent-slider-inner .l-underlayer__sakaguraevent-slider-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; } .l-underlayer__sakaguraevent-slider-inner .l-underlayer__sakaguraevent-slider-prev svg circle, .l-underlayer__sakaguraevent-slider-inner .l-underlayer__sakaguraevent-slider-next svg circle { stroke: #244a3a; } .l-underlayer__sakaguraevent-slider-inner .l-underlayer__sakaguraevent-slider-prev svg path, .l-underlayer__sakaguraevent-slider-inner .l-underlayer__sakaguraevent-slider-next svg path { stroke: #244a3a; } .l-underlayer__sakaguraevent-slider-inner .l-underlayer__sakaguraevent-slider-prev { left: -0.2rem; } .l-underlayer__sakaguraevent-slider-inner .l-underlayer__sakaguraevent-slider-next { right: -0.2rem; } .l-underlayer__sakaguraevent-text-inner { display: grid; gap: clamp(0.2rem, 0.174rem + 0.66vw, 0.3rem); } .l-underlayer__sakaguraevent-link { text-decoration: underline; } .l-underlayer__sakaguraevent-link svg path { fill: #244a3a; } .l-underlayer__bunkakouryu-img { height: clamp(1.5rem, 0.731rem + 19.37vw, 4.45rem); margin-block-end: clamp(0.2rem, 0.122rem + 1.97vw, 0.5rem); } .l-underlayer__bunkakouryu-img img { height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.1rem; } .l-underlayer__bunkakouryu-th1 { width: clamp(1rem, 0.687rem + 7.88vw, 2.2rem); } .l-underlayer__bunkakouryu-th2 { width: clamp(1.56rem, 1.503rem + 1.44vw, 1.78rem); } .l-underlayer__bunkakouryu-th3 { width: clamp(0.71rem, 0.447rem + 6.63vw, 1.72rem); } .l-underlayer__fuubutushi .c-button__secondary-list { margin-block-start: clamp(0.5rem, 0.422rem + 1.97vw, 0.8rem); } .l-underlayer__fuubutushi-item { margin-block-end: clamp(0.5rem, 0.37rem + 3.28vw, 1rem); scroll-margin-top: 0.3rem; } @media screen and (min-width:1280px) { .l-underlayer__fuubutushi-item { scroll-margin-top: 0; } } .l-underlayer__fuubutushi-item-inner-wrap { display: flex; flex-direction: column-reverse; gap: 0.2rem; } .l-underlayer__fuubutushi-text { font-size: clamp(0.15rem, 0.145rem + 0.13vw, 0.17rem); line-height: clamp(0.3rem, 0.287rem + 0.33vw, 0.35rem); } .l-underlayer__fuubutushi-text-inner { display: grid; gap: 0.2rem; } .l-underlayer__fuubutushi-sugidama { display: flex; flex-direction: column; gap: 0.5rem; } .l-underlayer__fuubutushi-right { scroll-margin-top: 0.3rem; } @media screen and (min-width:769px) { .l-underlayer__fuubutushi-item-inner-wrap { flex-direction: row; gap: 0.56rem; } .l-underlayer__fuubutushi-sugidama { flex-direction: row; gap: 0.56rem; } .l-underlayer__fuubutushi-text { width: min(46.61%, 5.5rem); } .l-underlayer__fuubutushi-right { width: min(50.763%, 5.99rem); } } .l-underlayer__fuubutushi-timetable { font-size: 0.16rem; display: table-cell; } .l-underlayer__fuubutushi-timetable .l-underlayer__fuubutushi-timetable-time, .l-underlayer__fuubutushi-timetable .l-underlayer__fuubutushi-timetable-place { height: 0.7rem; vertical-align: middle; } .l-underlayer__fuubutushi-timetable-time { border-right: 1px solid #1f1e1b; position: relative; padding-inline-end: 0.4rem; } .l-underlayer__fuubutushi-timetable-time::after { content: ""; width: 17px; height: 17px; display: block; background-color: #1f1e1b; position: absolute; top: 50%; right: -9px; transform: translateY(-50%); } .l-underlayer__fuubutushi-timetable-place { padding-inline-start: 0.4rem; } .l-underlayer__fuubutushi-thumb { aspect-ratio: 130/77; } .l-underlayer__sakehiroba-link { width: min(100%, 3.8rem); } .l-underlayer__sakehiroba-ate-list { display: grid; row-gap: clamp(0.15rem, 0.137rem + 0.33vw, 0.2rem); -moz-column-gap: 0.2rem; column-gap: 0.2rem; } @media screen and (min-width:769px) { .l-underlayer__sakehiroba-ate-list { grid-template-columns: repeat(2, 1fr); } } .l-underlayer__sakehiroba-ate-item { display: flex; align-items: center; gap: clamp(0.17rem, 0.136rem + 0.85vw, 0.3rem); background-color: #ffffff; border-radius: 0.1rem; padding: 0.14rem; } .l-underlayer__sakehiroba-ate-img { width: clamp(0.8rem, 0.696rem + 2.63vw, 1.2rem); height: clamp(0.8rem, 0.696rem + 2.63vw, 1.2rem); } .l-underlayer__sakehiroba-ate-img img { height: 100%; -o-object-fit: cover; object-fit: cover; } .l-underlayer__sakehiroba-ate-desc { width: calc(100% - 0.24rem - clamp(0.8rem, 0.696rem + 2.63vw, 1.2rem) - clamp(0.17rem, 0.136rem + 0.85vw, 0.3rem)); display: grid; align-content: center; } .l-underlayer__sakehiroba-ate-inner { display: grid; gap: clamp(0rem, -0.031rem + 0.79vw, 0.12rem); } .l-underlayer__sakehiroba-ate-inner dt { font-size: clamp(0.16rem, 0.15rem + 0.26vw, 0.2rem); font-weight: bold; } .l-underlayer__sakehiroba-th1 { width: 0.7rem; white-space: nowrap; } .l-underlayer__sakehiroba-th2 { width: clamp(1.42rem, 1.047rem + 9.39vw, 2.85rem); } .l-underlayer__sakehiroba-th3 { width: clamp(1.19rem, 1.031rem + 4.01vw, 1.8rem); } .l-underlayer__sakehiroba-soldout { text-decoration-line: line-through; text-decoration-thickness: 1px; } .l-underlayer__main-table { height: -moz-fit-content; height: fit-content; } .l-underlayer__main-table-tr { background-color: #ffffff; } .l-underlayer__main-table-tr:not(:last-of-type) { border-bottom: 1px solid #e1d8c3; } .l-underlayer__main-table-th, .l-underlayer__main-table-td { padding: 0.15rem clamp(0.15rem, 0.111rem + 0.98vw, 0.3rem); } .l-underlayer__main-table-th { white-space: nowrap; } .l-underlayer__main-guest-wrap { display: grid; row-gap: clamp(0.4rem, 0.244rem + 3.94vw, 1rem); } .l-underlayer__main-guest-list { display: grid; row-gap: clamp(0.4rem, 0.244rem + 3.94vw, 1rem); } @media screen and (min-width:769px) { .l-underlayer__main-guest-list { -moz-column-gap: 0.4rem; column-gap: 0.4rem; } .l-underlayer__main-guest-list.--2column { grid-template-columns: repeat(2, 1fr); } .l-underlayer__main-guest-list.--3column { grid-template-columns: repeat(3, 1fr); } } .l-underlayer__main-guest-item { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 0; } .l-underlayer__main-guest-img-wrap { aspect-ratio: 1/1; margin-block-start: 0.2rem; } .l-underlayer__main-guest-img { height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.1rem; } .l-underlayer__main-guest-name { width: calc(100% - 0.16rem - 0.1rem); } .l-underlayer__main-host-inner { display: flex; flex-direction: column; gap: clamp(0.2rem, 0.096rem + 2.63vw, 0.6rem); } .l-underlayer__main-host-img-wrap { aspect-ratio: 1/1; } .l-underlayer__main-host-img { height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.1rem; } @media screen and (min-width:769px) { .l-underlayer__main-host-inner { flex-direction: row; } .l-underlayer__main-host-img-wrap { width: min(22.88vw, 2.7rem); height: min(22.88vw, 2.7rem); } .l-underlayer__main-host-text { width: calc(100% - min(22.88vw, 2.7rem) - clamp(0.2rem, 0.096rem + 2.63vw, 0.6rem)); } } .l-underlayer__main-goods-item { grid-row: span 2; gap: 0.3rem; } .l-underlayer__main-event-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 3.27rem), 1fr)); justify-content: space-between; gap: clamp(0.2rem, 0.174rem + 0.66vw, 0.3rem); } .l-underlayer__main-event-link { font-size: clamp(0.18rem, 0.175rem + 0.13vw, 0.2rem); background-color: #ffffff; padding-block-start: 0.4rem; padding-block-end: clamp(0.3rem, 0.274rem + 0.66vw, 0.4rem); border-radius: 0.1rem; display: grid; align-items: center; justify-items: center; gap: clamp(0.24rem, 0.224rem + 0.39vw, 0.3rem); transition: box-shadow 0.3s; } .l-underlayer__main-event-link::before { content: ""; width: 1.72rem; height: 1.72rem; display: block; } .l-underlayer__main-event-link.shinji::before { background-image: url("../img/main-kaijyo/eventtime-1.webp"); background-size: cover; background-position: center center; background-repeat: no-repeat; } .l-underlayer__main-event-link.sakemidare::before { background-image: url("../img/main-kaijyo/eventtime-2.webp"); background-size: cover; background-position: center center; background-repeat: no-repeat; } .l-underlayer__main-event-link.himemikoshi::before { background-image: url("../img/main-kaijyo/eventtime-3.webp"); background-size: cover; background-position: center center; background-repeat: no-repeat; } @media (hover: hover) { .l-underlayer__main-event-link:hover { box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s; } } .l-underlayer__kyousan-list { display: grid; gap: clamp(0.15rem, 0.137rem + 0.33vw, 0.2rem); } @media screen and (min-width: 600px) { .l-underlayer__kyousan-list { grid-template-columns: repeat(3, 1fr); } } .l-underlayer__kyousan-special-img { aspect-ratio: 550/415; } .l-underlayer__kyousan-special-img img { height: 100%; -o-object-fit: cover; object-fit: cover; } .l-underlayer__kyousan-img { aspect-ratio: 380/94; } .l-underlayer__kyousan-img img { -o-object-fit: cover; object-fit: cover; } .l-underlayer__policy-wrap { margin-block-start: clamp(1rem, 0.739rem + 6.57vw, 2rem); } .l-underlayer__policy-wrap .l-underlayer__heading-lv2 { padding-block-start: 0; } .l-underlayer__faq { display: grid; gap: clamp(0.5rem, 0.37rem + 3.28vw, 1rem); } .l-underlayer__faq-link .c-button__secondary-list { margin-block-start: clamp(0.5rem, 0.422rem + 1.97vw, 0.8rem); } .l-underlayer__faq-item { display: grid; gap: clamp(0.12rem, 0.107rem + 0.33vw, 0.17rem); position: relative; overflow-x: hidden; } .l-underlayer__faq-item-border { position: absolute; bottom: 0; } .l-underlayer__faq-item:not(:first-of-type) { padding-block-start: clamp(0.2rem, 0.122rem + 1.97vw, 0.5rem); } .l-underlayer__faq-item:not(:last-of-type) { padding-block-end: clamp(0.2rem, 0.122rem + 1.97vw, 0.5rem); } .l-underlayer__faq-item:last-of-type .l-underlayer__faq-item-border { display: none; } .l-underlayer__faq-question, .l-underlayer__faq-answer { display: flex; align-items: center; gap: clamp(0.16rem, 0.139rem + 0.53vw, 0.24rem); } .l-underlayer__faq-question svg, .l-underlayer__faq-answer svg { width: clamp(0.44rem, 0.372rem + 1.71vw, 0.7rem); height: clamp(0.44rem, 0.372rem + 1.71vw, 0.7rem); } .l-underlayer__faq-question { font-weight: bold; } .l-underlayer__faq-question svg rect { fill: #244a3a; } .l-underlayer__faq-answer svg rect { stroke: #244a3a; } .l-underlayer__faq-answer svg path { fill: #244a3a; } .l-underlayer__faq-text { width: calc(100% - clamp(0.44rem, 0.372rem + 1.71vw, 0.7rem) - clamp(0.12rem, 0.107rem + 0.33vw, 0.17rem)); } .l-underlayer__wakuwaku-show-list { display: grid; gap: 0.4rem; } @media screen and (min-width:769px) { .l-underlayer__wakuwaku-show-list { grid-template-columns: repeat(3, 1fr); } } .l-underlayer__wakuwaku-show-item { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; } .l-underlayer__wakuwaku-show-name { width: calc(100% - 0.16rem - 0.1rem); } .l-underlayer__bisyunabe-about { display: grid; gap: 0.2rem; } @media screen and (min-width:960px) { .l-underlayer__bisyunabe-about { display: flex; flex-direction: row-reverse; justify-content: space-between; } .l-underlayer__bisyunabe-about-img { width: min(50% - 0.1rem, 5.5rem); height: 100%; } } .l-underlayer__bisyunabe-text { font-size: clamp(0.15rem, 0.142rem + 0.2vw, 0.18rem); line-height: clamp(0.3rem, 0.274rem + 0.66vw, 0.4rem); } @media screen and (min-width:960px) { .l-underlayer__bisyunabe-text { width: min(50% - 0.1rem, 5.5rem); } } .l-underlayer__syutuen-heading-sub { font-size: clamp(0.2rem, 0.169rem + 0.79vw, 0.32rem); font-weight: bold; padding-block-end: clamp(0.5rem, 0.448rem + 1.31vw, 0.7rem); } .l-underlayer__syutuen-border { position: absolute; top: 0; } .l-underlayer__syutuen-wakuwaku { position: relative; margin-block-start: clamp(0.7rem, 0.674rem + 0.66vw, 0.8rem); padding-block-start: clamp(0.7rem, 0.674rem + 0.66vw, 0.8rem); overflow-x: hidden; } .l-underlayer__pr-item { position: relative; } .l-underlayer__pr-item:not(:first-of-type) { padding-block-start: clamp(0.5rem, 0.422rem + 1.97vw, 0.8rem); } .l-underlayer__pr-item:not(:last-of-type) { padding-block-end: clamp(0.5rem, 0.422rem + 1.97vw, 0.8rem); } .l-underlayer__pr-item:last-of-type .l-underlayer__pr-border { display: none; } .l-underlayer__pr-inner { display: grid; gap: clamp(0.2rem, 0.174rem + 0.66vw, 0.3rem); } @media screen and (min-width:769px) { .l-underlayer__pr-inner { display: flex; flex-direction: row-reverse; justify-content: space-between; } } .l-underlayer__pr-img { width: 100%; height: -moz-fit-content; height: fit-content; aspect-ratio: 327/220; } @media screen and (min-width:769px) { .l-underlayer__pr-img { width: 3.57rem; height: 2.4rem; } } .l-underlayer__pr-img img { height: 100%; -o-object-fit: cover; object-fit: cover; } .l-underlayer__pr-desc { display: grid; gap: clamp(0.2rem, 0.174rem + 0.66vw, 0.3rem); } @media screen and (min-width:769px) { .l-underlayer__pr-desc { width: calc(100% - 3.57rem - clamp(0.2rem, 0.174rem + 0.66vw, 0.3rem)); } } .l-underlayer__pr-heading::before { content: "■"; } .l-underlayer__pr-link { text-decoration: underline; } .l-underlayer__pr-border { position: absolute; bottom: 0; left: 0; } .l-underlayer__know { display: grid; gap: clamp(0.2rem, 0.174rem + 0.66vw, 0.3rem); } .l-underlayer__about-item { display: flex; flex-direction: column-reverse; gap: clamp(0.2rem, 0.106rem + 2.36vw, 0.56rem); } @media screen and (min-width:769px) { .l-underlayer__about-item { flex-direction: row; } } @media screen and (min-width:769px) { .l-underlayer__birth-text, .l-underlayer__birth-slider { width: min(46.61%, 5.5rem); } } .l-underlayer__poster-wrap { display: grid; gap: clamp(0.15rem, 0.111rem + 0.98vw, 0.3rem); } @media screen and (min-width: 600px) { .l-underlayer__poster-wrap { grid-template-columns: repeat(auto-fit, minmax(2.73rem, 1fr)); } } @media screen and (min-width:1280px) { .l-underlayer__poster-wrap { grid-template-columns: repeat(auto-fit, minmax(2.53rem, 1fr)); } } .l-underlayer__history-message { display: grid; gap: clamp(0.2rem, 0.122rem + 1.97vw, 0.5rem); } .l-underlayer__history-message-from { width: 100%; display: block; text-align: end; } .l-underlayer__history-message-from-name { font-size: 0.18rem; font-weight: bold; } .l-underlayer__history-color { display: flex; align-items: center; justify-content: space-evenly; background-color: #ffffff; border-radius: 0.1rem; padding-block: clamp(0.15rem, 0.124rem + 0.66vw, 0.25rem); } .l-underlayer__history-color-title { font-size: 0.16rem; line-height: 0.3rem; } .l-underlayer__history-color-name { font-size: 0.14rem; color: #244a3a; font-weight: bold; line-height: 0.3rem; display: grid; justify-items: center; gap: 0.04rem; } .l-underlayer__history-year { display: flex; flex-direction: column; gap: clamp(0.4rem, 0.348rem + 1.31vw, 0.6rem); } .l-underlayer__history-year-name { font-size: 0.2rem; font-weight: bold; display: block; } .l-underlayer__history-year-img { width: clamp(3.27rem, 3.184rem + 2.17vw, 3.6rem); height: -moz-fit-content; height: fit-content; display: grid; gap: clamp(0.2rem, 0.148rem + 1.31vw, 0.4rem); margin-inline: auto; } .l-underlayer__history-year-img figure { display: grid; justify-items: center; gap: 0.2rem; } .l-underlayer__history-year-img-wrap { height: clamp(3.27rem, 3.184rem + 2.17vw, 3.6rem); } .l-underlayer__history-year-img-wrap img { height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.1rem; } .l-underlayer__history-year-message { display: grid; gap: 0.4rem; } .l-underlayer__history-year-message-title { font-size: 0.24rem; font-weight: bold; } .l-underlayer__history-year-message-subtitle { font-size: 0.16rem; line-height: 0.3rem; } .l-underlayer__history-year-message-parag { font-size: clamp(0.15rem, 0.147rem + 0.07vw, 0.16rem); line-height: clamp(0.3rem, 0.287rem + 0.33vw, 0.35rem); display: grid; gap: 0.4rem; } @media screen and (min-width:769px) { .l-underlayer__history-year { flex-direction: row; justify-content: space-between; } .l-underlayer__history-year-message { width: min(64.411%, 7.6rem); } } .l-underlayer__history-chairperson-list { display: grid; gap: clamp(0.5rem, 0.422rem + 1.97vw, 0.8rem); } .l-underlayer__history-chairperson-list#js-more-contents li.js-inorder { opacity: 1; } .l-underlayer__history-chairperson-card { display: flex; gap: clamp(0.2rem, 0.096rem + 2.63vw, 0.6rem); flex-direction: column; background-color: #ffffff; border-radius: 0.1rem; padding-block: clamp(0.24rem, 0.172rem + 1.71vw, 0.5rem); padding-inline: min(7.34%, 0.6rem); } @media screen and (min-width:769px) { .l-underlayer__history-chairperson-card { flex-direction: row; justify-content: space-between; } } .l-underlayer__history-chairperson-img { height: -moz-fit-content; height: fit-content; display: grid; justify-items: center; gap: 0.2rem; } .l-underlayer__history-chairperson-img-wrap { width: clamp(2.79rem, 2.717rem + 1.84vw, 3.07rem); height: 100%; aspect-ratio: 1/1; } .l-underlayer__history-chairperson-img-wrap img { height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.1rem; } .l-underlayer__history-chairperson-desc { display: grid; gap: 0.1rem; } @media screen and (min-width:769px) { .l-underlayer__history-chairperson-desc { width: calc(100% - clamp(2.79rem, 2.717rem + 1.84vw, 3.07rem) - 60px); } } .l-underlayer__history-chairperson-desc-inner { padding-block-end: 0.15rem; } .l-underlayer__history-chairperson-link { transition: opacity 0.3s; } @media (hover: hover) { .l-underlayer__history-chairperson-link .l-underlayer__external:hover { opacity: 0.5; transition: opacity 0.3s; } } .l-underlayer__history-button-wrap { display: grid; gap: 0.3rem; } .l-underlayer__history-more { width: 3.11rem; height: 0.72rem; font-size: 0.16rem; font-weight: normal; line-height: 0.3rem; color: #ffffff; background-color: #1f1e1b; border-radius: 0.1rem; display: flex; align-items: center; justify-content: center; gap: 0.2rem; margin-inline: auto; cursor: pointer; } .l-underlayer__history-close { font-size: 0.18rem; font-weight: normal; line-height: 0.4rem; text-decoration: underline; margin-inline: auto; } .l-underlayer__sakemokuroku { margin-block-start: clamp(0.5rem, 0.38rem + 2.88vw, 0.8rem); } @media screen and (min-width:769px) { .l-underlayer__sakemokuroku .content-width { display: flex; align-items: center; justify-content: space-between; flex-flow: row-reverse; align-items: flex-start; } } .l-underlayer__sakemokuroku-main { flex: 1; } .l-underlayer__sakemokuroku-imgbox img { -o-object-fit: contain; object-fit: contain; width: 100%; height: 49vw; max-height: 460px; background-color: #eadfc9; cursor: zoom-in; } @media screen and (min-width:769px) { .l-underlayer__sakemokuroku-imgbox img { height: 24vw; } } .l-underlayer__sakemokuroku-content { width: 100%; } .l-underlayer__sakemokuroku-content:is(.is-hide) { display: none; } .l-underlayer__sakemokuroku-content:is(.is-active) .l-underlayer__sakemokuroku-content-part:is(.is-hide) { display: block; } .l-underlayer__sakemokuroku-content:has(.is-active) { display: block; } .l-underlayer__sakemokuroku-content:last-child .l-underlayer__sakemokuroku-content-part:last-child { margin-block-end: 0; } .l-underlayer__sakemokuroku-content-part { margin-block-end: clamp(0.2rem, 0.12rem + 1.92vw, 0.4rem); } .l-underlayer__sakemokuroku-content-part:is(.is-hide) { display: none; } .l-underlayer__sakemokuroku-content-wrapper { width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .l-underlayer__sakemokuroku-content-item { width: 100%; border-radius: 10px; background-color: #ffffff; padding: clamp(0.15rem, 0.12rem + 0.67vw, 0.22rem) clamp(0.2rem, 0.18rem + 0.48vw, 0.25rem); margin-block-end: clamp(0.15rem, 0.13rem + 0.48vw, 0.2rem); } @media screen and (min-width:769px) { .l-underlayer__sakemokuroku-content-item { width: 48.5%; } } .l-underlayer__sakemokuroku-content-title { font-size: clamp(0.16rem, 0.14rem + 0.38vw, 0.2rem); font-weight: 700; margin-block-end: clamp(0.05rem, 0.02rem + 0.67vw, 0.12rem); } .l-underlayer__sakemokuroku-content-place { font-size: clamp(0.14rem, 0.13rem + 0.19vw, 0.16rem); display: flex; align-items: flex-end; text-decoration: underline; } .l-underlayer__sakemokuroku-content-place:after { content: ""; background-image: url(../img/sakemokuroku/new-tab.png); background-size: cover; background-position: center; background-repeat: no-repeat; width: 0.18rem; height: 0.18rem; display: block; margin-inline-start: 0.05rem; } .l-underlayer__sakemokuroku-content-place:is(.none-link) { text-decoration: none; } .l-underlayer__sakemokuroku-content-place:is(.none-link):after { display: none; } .l-underlayer__sakemokuroku-content-place:is(.none-link):hover { opacity: 1; transition: 0; } .l-underlayer__sakemokuroku-content-place:hover { opacity: 0.7; transition: 0.2s; } .l-underlayer__sakemokuroku-nontext { text-align: center; font-size: clamp(0.18rem, 0.17rem + 0.19vw, 0.2rem); } .l-underlayer__sakemokuroku-sidebar { width: 2.8rem; margin-inline: auto; margin-block-end: 0.5rem; } @media screen and (min-width:769px) { .l-underlayer__sakemokuroku-sidebar { margin-inline-start: clamp(0.2rem, -0.03rem + 5.77vw, 0.8rem); } } .l-underlayer__sakemokuroku-sidebar-title { font-size: 0.24rem; font-weight: 700; padding-block-end: 0.2rem; } .l-underlayer__sakemokuroku-sidebar-wrapper { padding-block-start: 0.16rem; padding-block-end: 0.16rem; border-block-start: 1px solid #99968e; border-block-end: 1px solid #99968e; } .l-underlayer__sakemokuroku-sidebar-wrapper-all { display: none; margin-block-start: 0.24rem; } .l-underlayer__sakemokuroku-sidebar-wrapper-all:is(.is-open) { display: block; } .l-underlayer__sakemokuroku-sidebar-wrapper-all:is(.is-open) .l-underlayer__sakemokuroku-sidebar-btn-text { speak: normal; } .l-underlayer__sakemokuroku-sidebar-wrapper-all .l-underlayer__sakemokuroku-sidebar-btn-text { speak: none; } .l-underlayer__sakemokuroku-sidebar-wrapper-area { margin-block-end: 0.24rem; } .l-underlayer__sakemokuroku-sidebar-wrapper-area-list { display: none; margin-block-start: 0.1rem; } .l-underlayer__sakemokuroku-sidebar-wrapper-area-list:is(.is-open) { display: block; } .l-underlayer__sakemokuroku-sidebar-wrapper-area-list:is(.is-open) .l-underlayer__sakemokuroku-sidebar-wrapper-pref { speak: normal; } .l-underlayer__sakemokuroku-sidebar-wrapper-area:last-child { margin-block-end: 0; } .l-underlayer__sakemokuroku-sidebar-wrapper-pref { padding-inline-start: 0.4rem; font-size: 0.16rem; margin-block-end: 0.1rem; line-height: 2; width: 100%; speak: none; } .l-underlayer__sakemokuroku-sidebar-btn-text { font-size: 0.16rem; line-height: 2; width: 100%; display: flex; align-items: center; justify-content: space-between; } .l-underlayer__sakemokuroku-sidebar-btn-text:after { content: ""; background-image: url(../img/sakemokuroku/arrow.png); background-size: cover; background-position: center; background-repeat: no-repeat; width: 11px; height: 7px; transform: rotate(180deg); transition: 0.2s; display: block; margin-right: 20px; } .l-underlayer__sakemokuroku-sidebar-btn-text.bold { font-weight: 700; } .l-underlayer__sakemokuroku-sidebar-btn:is(.is-open) .l-underlayer__sakemokuroku-sidebar-btn-text:after { transform: rotate(0deg); transition: 0.2s; } .l-underlayer__access .l-underlayer__gap-list { gap: clamp(0.3rem, 0.222rem + 1.97vw, 0.6rem); } .l-underlayer__404-heading { font-size: 0.32rem; font-weight: bold; position: relative; margin-block-start: 1.85rem; margin-block-end: 0.4rem; } .l-underlayer__404-heading::before { content: "404"; font-size: 1.28rem; font-weight: bold; position: absolute; top: -1.85rem; left: 50%; transform: translateX(-50%); } .l-underlayer__404-inner { font-size: 0.16rem; line-height: 0.3rem; display: grid; gap: 0.4rem; justify-items: center; } .l-underlayer__status-preparation { position: relative; } .l-underlayer__status-preparation::before { content: "準備中"; width: 100%; height: 100%; font-size: clamp(0.24rem, 0.219rem + 0.53vw, 0.32rem); font-weight: 700; color: white; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.5); position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 0.1rem 0.1rem 0 0; } .l-underlayer__status-end { position: relative; } .l-underlayer__status-end::before { content: "募集終了"; width: 100%; height: 100%; font-size: clamp(0.24rem, 0.219rem + 0.53vw, 0.32rem); font-weight: 700; color: white; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.5); position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 0.1rem 0.1rem 0 0; } .l-underlayer__status-end-kayou::before { content: "定員に達したため\a募集終了"; white-space: pre-line; text-align: center; } .l-underlayer__modelcourse { display: grid; gap: clamp(0.35rem, 0.311rem + 0.98vw, 0.5rem); } .l-underlayer__modelcourse-img { margin-block-end: clamp(0.05rem, 0.037rem + 0.33vw, 0.1rem); border-radius: clamp(0.15rem, 0.059rem + 2.3vw, 0.5rem); } .l-underlayer__modelcourse-img-note { font-size: clamp(0.12rem, 0.11rem + 0.26vw, 0.16rem); text-align: end; } .l-underlayer__modelcourse-list .num { width: clamp(0.65rem, 0.546rem + 2.63vw, 1.05rem); height: clamp(0.65rem, 0.546rem + 2.63vw, 1.05rem); font-size: clamp(0.24rem, 0.219rem + 0.53vw, 0.32rem); font-weight: bold; color: #ffffff; display: flex; align-items: center; justify-content: center; border-radius: 9999px; } .l-underlayer__modelcourse-list .num.green { background-color: #009c80; } .l-underlayer__modelcourse-list .num.pink { background-color: #ec5464; } .l-underlayer__modelcourse-list .num.brown { background-color: #a05813; } .l-underlayer__modelcourse-list .place { display: flex; align-items: center; gap: clamp(0.16rem, 0.097rem + 1.58vw, 0.4rem); } .l-underlayer__modelcourse-list .place-head { height: -moz-fit-content; height: fit-content; display: flex; gap: clamp(0.04rem, -0.033rem + 1.84vw, 0.32rem); flex-direction: column; } @media screen and (min-width:769px) { .l-underlayer__modelcourse-list .place-head { flex-direction: row; } } .l-underlayer__modelcourse-list .name { font-size: clamp(0.2rem, 0.169rem + 0.79vw, 0.32rem); font-weight: bold; transition: opacity 0.3s; } @media (hover: hover) { .l-underlayer__modelcourse-list .name:hover { opacity: 0.5; transition: opacity 0.3s; } } .l-underlayer__modelcourse-list .time { display: flex; align-items: center; gap: 0.07rem; } .l-underlayer__modelcourse-list .time.green { color: #009c80; } .l-underlayer__modelcourse-list .time.pink { color: #ec5464; } .l-underlayer__modelcourse-list .time.brown { color: #a05813; } .l-underlayer__modelcourse-list .border-wrap { display: flex; justify-content: flex-end; } .l-underlayer__modelcourse-list .text-wrap { display: flex; } .l-underlayer__modelcourse-list .dotted-line { width: 2px; background-size: 2px 10px; background-repeat: repeat-y; margin-block: clamp(0.18rem, 0.149rem + 0.79vw, 0.3rem); margin-inline-start: clamp(0.17rem, 0.077rem + 2.33vw, 0.525rem); margin-inline-end: clamp(0.2rem, 0.012rem + 4.73vw, 0.92rem); } .l-underlayer__modelcourse-list .dotted-line.green { background-image: linear-gradient(to bottom, #009c80 50%, transparent 50%); } .l-underlayer__modelcourse-list .dotted-line.pink { background-image: linear-gradient(to bottom, #ec5464 50%, transparent 50%); } .l-underlayer__modelcourse-list .dotted-line.brown { background-image: linear-gradient(to bottom, #a05813 50%, transparent 50%); } .l-underlayer__modelcourse-list .text { width: 100%; font-size: clamp(0.14rem, 0.124rem + 0.39vw, 0.2rem); background-color: #ffffff; border-radius: 0.1rem; margin-block-start: clamp(0.18rem, 0.123rem + 1.44vw, 0.4rem); margin-block-end: clamp(0.43rem, 0.367rem + 1.58vw, 0.67rem); padding: clamp(0.22rem, 0.163rem + 1.44vw, 0.44rem); transition: all 0.3s; } @media (hover: hover) { .l-underlayer__modelcourse-list .text:hover { filter: drop-shadow(5px 5px 20px rgba(0, 0, 0, 0.2)); transform: translateZ(0); transition: all 0.3s; } } .l-underlayer__modelcourse-list .note { font-size: clamp(0.13rem, 0.122rem + 0.2vw, 0.16rem); display: block; } .l-underlayer__azalea-img { height: auto; margin-block-end: clamp(0.2rem, 0.122rem + 1.97vw, 0.5rem); } .l-underlayer__azalea-img img { height: 100%; display: block; -o-object-fit: cover; object-fit: cover; border-radius: 0.1rem; } .swiper-slide-thumb-active .l-underlayer__sakaguraevent-slider-img { border: 2px solid #1f1e1b; } .swiper-slide { height: auto; } .swiper-slide > img { height: 100%; -o-object-fit: cover; object-fit: cover; } .swiper-thumbs { margin-block-start: clamp(0.06rem, 0.039rem + 0.53vw, 0.14rem); } /* 酒目録モーダル */ #close { position: absolute; right: calc(env(safe-area-inset-right) + 25px); top: calc(env(safe-area-inset-top) + 20px); color: black; font-size: 20px; font-weight: bold; cursor: pointer; } .sakemokuroku-modal { display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #fff; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; /* アニメーション効果 */ z-index: 2000000; } .sakemokuroku-modal img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 100%; min-height: var(--wp--lightbox-image-height); min-width: var(--wp--lightbox-image-width); width: var(--wp--lightbox-image-width); height: 80%; -o-object-fit: contain !important; object-fit: contain !important; } /* 酒目録ページネーション */ #pagination { display: flex; align-items: center; justify-content: center; gap: 0.12rem; } .page-link { width: 0.4rem; height: 0.4rem; display: flex; align-items: center; justify-content: center; border: 1px solid #1f1e1b; border-radius: 9999px; } .page-link.active { color: #ffffff; background-color: #1f1e1b; } .next-link, .prev-link { width: 0.4rem; height: 0.4rem; } .l-underlayer__sakemokuroku-content-item.is-hide { opacity: 0; position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden; } .l-underlayer__sakemokuroku-content-part.hidden, .l-underlayer__sakemokuroku-content-item.hidden, .l-underlayer__sakemokuroku-content-title.hidden, .l-underlayer__sakemokuroku-nontext.hidden { display: none !important; } .l-underlayer__sakemokuroku-content-part.visible, .l-underlayer__sakemokuroku-content-item.visible, .l-underlayer__sakemokuroku-content-title.visible, .l-underlayer__sakemokuroku-nontext.visible { display: block !important; } @media screen and (min-width:769px) { #pagination { display: none; } } .wp-image-3261 { max-width: 2rem; } .ja-img-box { display: flex; flex-flow: column; width: 100%; row-gap: 20px; margin-block-end: 30px; } @media screen and (min-width:769px) { .ja-img-box { flex-flow: row; justify-content: space-between; } .ja-img-box img { width: 48.5%; } } .i4ewOd-pzNkMb-haAclf { display: none; } .c-breadcrumbs { font-size: 0.14rem; padding-block: clamp(0.14rem, 0.114rem + 0.66vw, 0.24rem) clamp(0.4rem, 0.296rem + 2.63vw, 0.8rem); } .c-breadcrumbs__list { display: flex; gap: 0.15rem; overflow-x: auto; } .c-breadcrumbs__item { display: flex; gap: 0.15rem; text-decoration-line: underline; white-space: nowrap; } .c-breadcrumbs__item:last-child { text-decoration-line: none; } .c-heading__lv1 { font-family: "Hina Mincho", "メイリオ", "Meiryo", sans-serif; font-size: clamp(0.24rem, 0.177rem + 1.58vw, 0.48rem); display: flex; align-items: center; gap: clamp(0.15rem, 0.111rem + 0.98vw, 0.3rem); position: relative; margin-block-end: clamp(0.3rem, 0.222rem + 1.97vw, 0.6rem); padding-block-start: 0.16rem; } .c-heading__lv1::before { content: ""; display: block; width: 0.36rem; height: 0.36rem; background-image: url("../img/icon/heading-icon.svg"); background-size: cover; background-position: center center; background-repeat: no-repeat; } .c-heading__lv1::after { content: attr(data-en); font-size: 0.14rem; font-family: "Zen Kaku Gothic Antique", "メイリオ", "Meiryo", sans-serif; text-transform: uppercase; position: absolute; top: -0.16rem; left: 0; } .c-heading__lv2 { height: clamp(1.02rem, 0.9rem + 3.02vw, 1.48rem); font-family: "Hina Mincho", "メイリオ", "Meiryo", sans-serif; font-size: clamp(0.24rem, 0.209rem + 0.79vw, 0.36rem); position: relative; padding-block-end: 0.16rem; } .c-heading__lv2::after { content: attr(data-en); font-size: 0.14rem; font-family: "Zen Kaku Gothic Antique", "メイリオ", "Meiryo", sans-serif; text-transform: uppercase; position: absolute; top: 45.946%; left: 0; } .c-heading__lv3 { font-size: clamp(0.16rem, 0.15rem + 0.26vw, 0.2rem); display: flex; align-items: center; gap: 0.16rem; margin-block-end: 0.24rem; } .c-heading__lv3 circle { fill: #244a3a; } .c-button__primary { width: 2.57rem; font-size: clamp(0.16rem, 0.155rem + 0.13vw, 0.18rem); border-bottom: 1px solid #1f1e1b; display: flex; align-items: center; justify-content: space-between; padding-block-end: 0.16rem; padding-inline-end: 0.24rem; transition: transform 0.3s; color: #1f1e1b; } .c-button__primary svg path { stroke: #1f1e1b; } @media (hover: hover) { .c-button__primary:hover .c-button__primary-arrow { transform: translateX(10px); transition: transform 0.3s; } } .c-button__secondary-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 3.8rem), 1fr)); row-gap: clamp(0.15rem, 0.137rem + 0.33vw, 0.2rem); -moz-column-gap: 0.2rem; column-gap: 0.2rem; margin-block-start: 0.3rem; } .c-button__secondary-link { background-color: #ffffff; border-radius: 0.1rem; display: flex; align-items: center; justify-content: space-between; padding-block: clamp(0.12rem, 0.11rem + 0.26vw, 0.16rem); padding-inline-start: 0.2rem; padding-inline-end: clamp(0.2rem, 0.148rem + 1.31vw, 0.4rem); transition: all 0.3s; } .c-button__secondary-link-arrow path { stroke: #1f1e1b; } .c-button__secondary-link-inner { display: flex; align-items: center; gap: 0.2rem; color: #1f1e1b; } .c-button__secondary-link .c-button__secondary-link-arrow, .c-button__secondary-link .c-button__secondary-link-arrow-tate { transition: transform 0.3s; } @media (hover: hover) { .c-button__secondary-link:hover { filter: drop-shadow(5px 5px 20px rgba(0, 0, 0, 0.2)); transform: translateZ(0); transition: all 0.3s; } .c-button__secondary-link:hover .c-button__secondary-link-arrow { transform: translateX(10px); transition: transform 0.3s; } .c-button__secondary-link:hover .c-button__secondary-link-arrow-tate { transform: translateY(10px); transition: transform 0.3s; } } .c-button__secondary-notlink { background-color: #ffffff; border-radius: 0.1rem; padding-block: clamp(0.12rem, 0.11rem + 0.26vw, 0.16rem); padding-inline-start: 0.2rem; padding-inline-end: clamp(0.2rem, 0.148rem + 1.31vw, 0.4rem); } .c-button__rectangle { width: min(100%, 5.8rem); height: clamp(1rem, 0.964rem + 0.92vw, 1.14rem); font-size: clamp(0.18rem, 0.175rem + 0.13vw, 0.2rem); } @media screen and (min-width:769px) { .c-button__rectangle span { width: 100%; text-align: center; } } .c-button__download { width: 100%; max-width: 350px; height: 0.7rem; font-size: 0.18rem; margin-inline: auto; margin-block-start: 0.4rem; background-color: #1f1e1b; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; color: #ffffff; background-color: #1f1e1b; text-align: center; } .c-button__download svg { margin-inline-start: 0.17rem; } @media screen and (min-width:480px) { .c-button__download { width: 3.8rem; height: 1rem; font-size: 0.2rem; max-width: unset; } .c-button__download svg { margin-inline-start: 0.13rem; } } .c-pamphlet-img { width: 100%; max-width: 400px; margin: clamp(0.2rem, 0.174rem + 0.66vw, 0.3rem) auto -10px; background-color: #fff; border-radius: 10px; overflow: hidden; } @media screen and (min-width:769px) { .c-pamphlet-img { margin: clamp(0.2rem, 0.174rem + 0.66vw, 0.3rem) 0 -20px; } } .c-pamphlet-img .pdf { background-color: #d6d6d6; position: relative; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; } .c-pamphlet-img .pdf img { height: 100%; width: auto; -o-object-fit: contain; object-fit: contain; display: block; } .c-pamphlet-img p { padding: 15px; font-size: 16px; display: flex; align-items: center; } .c-pamphlet-img p svg path { fill: #1f1e1b; } .c-input__step-wrap { width: min(100%, 345px); margin-inline: auto; } .c-input__step-list { display: flex; justify-content: space-between; } .c-input__step-item { width: 33.3333333333%; position: relative; color: #cfcabe; text-align: center; } .c-input__step-item:not(:first-child):before { content: ""; width: 100%; display: block; position: absolute; top: 8px; left: -50%; height: 1px; background-color: #cfcabe; } .c-input__step-item-label { font-size: clamp(0.16rem, 0.155rem + 0.13vw, 0.18rem); line-height: clamp(0.3rem, 0.274rem + 0.66vw, 0.4rem); font-weight: normal; position: relative; } .c-input__step-item-label::before { content: ""; display: block; width: 16px; height: 16px; position: relative; z-index: 10; background-color: #cfcabe; margin-block-end: 12px; margin-inline: auto; } .c-input__step-item:first-child .c-input__step-item-label::before { background-color: #1f1e1b; } .c-input__step-item[aria-current=step] { color: #1f1e1b; font-weight: bold; } .c-input__step-item:not(.c-input__step-item[aria-current=step] ~ .c-input__step-item) { color: #1f1e1b; font-weight: bold; } .c-input__step-item:not(.c-input__step-item[aria-current=step] ~ .c-input__step-item)::before { background-color: #1f1e1b; } .c-input__step-item:not(.c-input__step-item[aria-current=step] ~ .c-input__step-item) .c-input__step-item-label::before { background-color: #1f1e1b; } .c-input__form-list { width: min(85.153%, 7.2rem); font-size: clamp(0.16rem, 0.155rem + 0.13vw, 0.18rem); font-weight: bold; display: grid; gap: clamp(0.3rem, 0.274rem + 0.66vw, 0.4rem); margin-block-start: clamp(0.4rem, 0.337rem + 1.58vw, 0.64rem); margin-inline: auto; } .c-input__form-label { display: grid; align-items: center; gap: 0.12rem; } .c-input__form-input { width: 100%; font-size: 0.16rem; line-height: 0.3rem; background-color: #f3f0e9; padding-block: 0.14rem; padding-inline: 0.16rem; font-weight: normal; } .c-input__form-item { width: 100%; display: grid; gap: clamp(0.13rem, 0.122rem + 0.2vw, 0.16rem); margin-block-end: 0.32rem; } .c-input__form-postal-code { width: clamp(1.86rem, 1.787rem + 1.84vw, 2.14rem); display: flex; align-items: center; gap: 10px; } .c-input__form-checkbox { font-size: clamp(0.14rem, 0.135rem + 0.13vw, 0.16rem); display: grid; align-items: center; gap: 16px; cursor: pointer; } .c-input__form-checkbox-wrap { width: 100%; font-size: clamp(0.14rem, 0.135rem + 0.13vw, 0.16rem); line-height: 0.3rem; font-weight: normal; display: grid; gap: 0.15rem; } .c-input__form-checkbox-wrap > legend { font-size: clamp(0.16rem, 0.155rem + 0.13vw, 0.18rem); font-weight: bold; } .c-input__form-checkbox-label { width: 100%; white-space: nowrap; margin-block-end: 0.15rem; } .c-input__form-checkbox input[type=checkbox] { position: absolute; white-space: nowrap; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0; clip: rect(0 0 0 0); clip-path: inset(50%); margin: -1px; } .c-input__form-checkbox label { font-weight: normal; display: flex; align-items: center; gap: 8px; } .c-input__form-checkbox label::before { content: ""; display: block; width: 20px; height: 20px; border: 1px solid #244a3a; } .c-input__form-checkbox label:has(input[type=checkbox]:focus)::before { border: 2px solid #244a3a; box-shadow: 0px 0px 2px 1px #7E868B; } .c-input__form-checkbox label:has(input[type=checkbox]:checked) { position: relative; } .c-input__form-checkbox label:has(input[type=checkbox]:checked)::after { content: ""; display: block; width: 0.24rem; height: 0.24rem; background-image: url("../img/icon/check.svg"); background-size: cover; background-position: center center; background-repeat: no-repeat; position: absolute; top: 50%; left: -1px; transform: translateY(-50%); } .c-input__form-button { width: 100%; height: 100%; } .c-input__link { width: -moz-max-content; width: max-content; font-size: clamp(0.14rem, 0.135rem + 0.13vw, 0.16rem); font-weight: normal; line-height: 0.3rem; display: flex; align-items: center; } .c-input__link:hover { opacity: 0.8; } .c-input__submit { width: 300px; font-size: clamp(0.16rem, 0.155rem + 0.13vw, 0.18rem); display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid #244a3a; margin-block-start: clamp(0.35rem, 0.259rem + 2.3vw, 0.7rem); margin-inline: auto; padding-block-end: 0.2rem; padding-inline-end: 0.23rem; transition: transform 0.3s; } @media (hover: hover) { .c-input__submit:hover svg { transform: translateX(10px); transition: transform 0.3s; } } .c-input__back { width: -moz-fit-content; width: fit-content; margin-block-start: clamp(0.2rem, 0.174rem + 0.66vw, 0.3rem); margin-inline: auto; } .c-input__back input { font-size: clamp(0.16rem, 0.155rem + 0.13vw, 0.18rem); text-decoration: underline; } @media screen and (min-width:1280px) { .p-front__content { display: flex; } } .p-front__message { width: min(90%, 8rem); display: grid; gap: clamp(0.2rem, 0.122rem + 1.97vw, 0.5rem); margin-block-start: 1rem; margin-inline: auto; padding-block-start: 0.24rem; padding-block-end: 0; } .p-front__message h2 { font-size: clamp(0.18rem, 0.164rem + 0.39vw, 0.24rem); font-weight: bold; line-height: 1.875; } .p-front__message-text { font-size: clamp(0.14rem, 0.135rem + 0.13vw, 0.16rem); line-height: 2.188; } .p-front__message-name { font-size: clamp(0.14rem, 0.135rem + 0.13vw, 0.16rem); text-align: end; } .p-front__message-name span { font-size: clamp(0.18rem, 0.188rem - 0.2vw, 0.15rem); font-weight: bold; } .p-front__hero-wrap { position: relative; } .p-front__hero { width: 100%; height: clamp(5.8rem, 4.932rem + 21.86vw, 9.13rem); position: relative; } .p-front__hero-link { height: 100%; } .p-front__hero-img { height: 100%; -o-object-fit: cover; object-fit: cover; } .p-front__hero-text-wrap { width: clamp(2.95rem, 2.52rem + 10.83vw, 4.6rem); background-color: #ffffff; border-radius: 0 clamp(0.061rem, 0.05rem + 0.26vw, 0.1rem) 0 0; padding-block-start: clamp(0.187rem, 0.147rem + 1vw, 0.34rem); padding-block-end: clamp(0.212rem, 0.169rem + 1.1vw, 0.38rem); position: absolute; bottom: 0; left: 0; z-index: 300; } .p-front__hero-text { font-size: clamp(0.218rem, 0.181rem + 0.93vw, 0.36rem); display: grid; justify-content: center; } .p-front__hero-text-row { width: -moz-fit-content; width: fit-content; display: block; margin-inline: auto; } .p-front__hero-text-label { font-family: "Zen Kaku Gothic Antique", "メイリオ", "Meiryo", sans-serif; font-size: clamp(0.14rem, 0.124rem + 0.39vw, 0.2rem); color: #ffffff; background-color: #1f1e1b; border-radius: clamp(0.03rem, 0.025rem + 0.13vw, 0.05rem); margin-block-start: 0.05rem; margin-inline-end: clamp(0.1rem, 0.079rem + 0.53vw, 0.18rem); padding: clamp(0.02rem, 0.015rem + 0.13vw, 0.04rem) clamp(0.1rem, 0.092rem + 0.2vw, 0.13rem); } .p-front__hero-text-lg { font-size: clamp(0.387rem, 0.321rem + 1.66vw, 0.64rem); } .p-front__hero-text-md { font-size: clamp(0.29rem, 0.241rem + 1.25vw, 0.48rem); } .p-front__hero-text-sm { font-size: clamp(0.15rem, 0.137rem + 0.33vw, 0.2rem); margin-block-start: 0.5em; } .p-front__hero-nav { width: clamp(1.574rem, 1.426rem + 3.72vw, 2.14rem); display: grid; justify-items: center; gap: 0.3rem; position: absolute; right: clamp(0.236rem, 0.16rem + 1.93vw, 0.53rem); bottom: -0.58rem; z-index: 100; } .p-front__hero-button { width: clamp(1.5rem, 1.448rem + 1.31vw, 1.7rem); display: flex; justify-content: space-between; gap: clamp(0.088rem, 0.085rem + 0.08vw, 0.1rem); } .p-front__hero-progressbar { width: 100%; height: 3px; background-color: #cfcabe; position: relative; overflow: hidden; } .p-front__hero-progressbar-time { width: 100%; height: 3px; display: block; background-color: #1f1e1b; position: absolute; top: 0; left: 0; transform: scaleX(0); transform-origin: left center; transition: transform 0ms linear; } .p-front__floating-banner { display: none; } .p-front__floating-banner-close { margin-block-start: -0.1rem; padding: 0.1rem 0.1rem 0.1rem 0.05rem; } .p-front__floating-banner.show { display: flex; align-items: flex-start; position: fixed; top: 1.5rem; right: 0; z-index: 100; } @media screen and (min-width:1280px) { .p-front__floating-banner.show { top: 8%; } } .p-front__floating-banner.show .p-front__floating-banner-link { font-size: clamp(0.14rem, 0.135rem + 0.13vw, 0.16rem); font-family: "Hina Mincho"; font-weight: bold; display: flex; gap: 0.05rem; align-items: center; background-color: #ffe7ec; border-radius: 0.1rem; padding: 0.12rem; box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.25); transition: box-shadow 0.3s ease; } @media (hover: hover) { .p-front__floating-banner.show .p-front__floating-banner-link:hover { box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.25); transition: box-shadow 0.3s ease; } } .p-front__information { margin-block-start: 0; position: relative; } .p-front__information-list { margin-block-end: clamp(0.46rem, 0.45rem + 0.26vw, 0.5rem); } .p-front__information-item { border-bottom: 1px solid #cfcabe; } .p-front__information-link { display: grid; row-gap: 0.08rem; padding-block: clamp(0.15rem, 0.137rem + 0.33vw, 0.2rem); } @media screen and (min-width:769px) { .p-front__information-link { display: flex; align-items: center; gap: clamp(0.2rem, 0.148rem + 1.31vw, 0.4rem); } } .p-front__information-pin { display: flex; align-items: center; gap: clamp(0.12rem, 0.094rem + 0.66vw, 0.22rem); } .p-front__information-meta { display: flex; align-items: center; gap: clamp(0.2rem, 0.148rem + 1.31vw, 0.4rem); } .p-front__information-meta.new { padding-inline-start: 0; } @media screen and (min-width:769px) { .p-front__information-meta.new { padding-inline-start: clamp(0.36rem, 0.334rem + 0.66vw, 0.46rem); } } .p-front__information-date { font-size: 0.14rem; } .p-front__information-cate { font-size: clamp(0.12rem, 0.115rem + 0.13vw, 0.14rem); white-space: nowrap; border: 1px solid #1f1e1b; border-radius: 0.05rem; padding: 0.05rem 0.1rem; } .p-front__information-title { font-size: 0.15rem; } .p-front__banner { width: 100%; display: flex; -moz-column-gap: 0.3rem; column-gap: 0.3rem; row-gap: 0.11rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-block-start: clamp(0.3rem, 0.274rem + 0.66vw, 0.4rem); margin-inline: auto; } .p-front__banner.koipay { margin-block-start: clamp(0.8rem, 0.748rem + 1.31vw, 1rem); } @media screen and (min-width:960px) { .p-front__banner { flex-wrap: nowrap; } } .p-front__banner-link { width: clamp(3.27rem, 2.629rem + 16.15vw, 5.73rem); } @media screen and (min-width:960px) { .p-front__banner-link { width: calc(50% - clamp(0.3rem, 0.274rem + 0.66vw, 0.4rem)); } } .p-front__banner-img { height: 100%; display: block; } .p-front__nenue-map { position: relative; } .p-front__nenue-map-num { width: clamp(0.3rem, 0.277rem + 0.59vw, 0.39rem); height: clamp(0.3rem, 0.277rem + 0.59vw, 0.39rem); font-size: clamp(0.16rem, 0.139rem + 0.53vw, 0.24rem); color: #ffffff; background-color: #1f1e1b; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-block-end: 5px; } .p-front__nenue-map-num.-white { color: #1f1e1b; background-color: #ffffff; border: 1px solid #1f1e1b; } .p-front__nenue-map-img { width: 100%; height: 100%; } .p-front__nenue-map svg { width: 100%; height: 100%; } @media (hover: hover) { .p-front__nenue-map a:hover .circle { fill: #633b3b; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); will-change: filter; transition: fill 0.3s ease, filter 0.3s ease; } } .p-front__nenue-course { margin-block-start: clamp(0.8rem, 0.748rem + 1.31vw, 1rem); } .p-front__nenue-course-list { display: grid; gap: clamp(0.15rem, 0.137rem + 0.33vw, 0.2rem); grid-template-columns: repeat(1, 1fr); } @media screen and (min-width:769px) { .p-front__nenue-course-list { grid-template-columns: repeat(2, 1fr); } } .p-front__nenue-course-link { background-color: #ffffff; padding-block: clamp(0.2rem, 0.195rem + 0.13vw, 0.22rem); padding-inline: clamp(0.15rem, 0.137rem + 0.33vw, 0.2rem); border-radius: 0.1rem; display: flex; align-items: center; gap: clamp(0.15rem, 0.111rem + 0.98vw, 0.3rem); transition: box-shadow 0.3s; } .p-front__nenue-course-link::before { content: ""; width: clamp(0.8rem, 0.56rem + 6.04vw, 1.72rem); height: clamp(0.8rem, 0.56rem + 6.04vw, 1.72rem); display: block; } .p-front__nenue-course-link-modelcourse::before { background-image: url("../img/course-1.webp"); background-size: cover; background-position: center center; background-repeat: no-repeat; } .p-front__nenue-course-link-seasonaltradition::before { background-image: url("../img/course-2.webp"); background-size: cover; background-position: center center; background-repeat: no-repeat; } @media (hover: hover) { .p-front__nenue-course-link:hover { box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s; } } .p-front__ticket-list { display: grid; gap: clamp(0.15rem, 0.137rem + 0.33vw, 0.2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 3.8rem), 1fr)); } .p-front__ticket-link { height: clamp(1.6rem, 1.496rem + 2.63vw, 2rem); background-color: #ffffff; border-radius: 0.1rem; display: grid; align-content: center; justify-items: center; gap: clamp(0.09rem, 0.072rem + 0.46vw, 0.16rem); transition: box-shadow 0.3s; } @media (hover: hover) { .p-front__ticket-link:hover { box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.2); transition: box-shadow 0.3s; } } .p-front__ticket-link.pre { position: relative; pointer-events: none; } .p-front__ticket-link.pre:after { content: "7月中に公開予定"; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; border-radius: 0.1rem; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; font-size: clamp(0.24rem, 0.219rem + 0.53vw, 0.32rem); } .p-front__participate { background-color: #eae5d8; padding-block-end: clamp(0.5rem, 0.37rem + 3.28vw, 1rem); } .p-front__participate-list { display: grid; row-gap: clamp(0.2rem, 0.174rem + 0.66vw, 0.3rem); -moz-column-gap: 0.3rem; column-gap: 0.3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 3.73rem), 1fr)); } .p-front__participate-link { background-color: #ffffff; border-radius: 0.1rem; transition: filter 0.3s; } .p-front__participate-link-thumb > img { display: block; } .p-front__participate-link .l-underlayer__status-cover { position: relative; } .p-front__participate-link .l-underlayer__status-cover:after { width: 100%; height: 100%; font-size: clamp(0.24rem, 0.219rem + 0.53vw, 0.32rem); font-weight: 700; color: white; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); background-color: rgba(0, 0, 0, 0.5); position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 0.1rem 0.1rem 0 0; top: 0; left: 0; white-space: pre-line; text-align: center; } .p-front__participate-link .l-underlayer__status-cover.mainbazaar:after { content: "2025酒まつりでは \aメイン会場の新規出店 \a募集はありません"; font-size: clamp(0.22rem, 0.204rem + 0.39vw, 0.28rem); } .p-front__participate-link .l-underlayer__status-cover.boulevard:after { content: "募集期間 \a 7/1～7/11"; } .p-front__participate-link .l-underlayer__status-cover.stage:after { content: "募集期間 \a 7/7～7/20"; } .p-front__participate-link .l-underlayer__status-cover.kayou:after { content: "7月下旬 \a募集開始予定"; } .p-front__participate-link .l-underlayer__status-cover.himemikoshi:after { content: "7/15(火) \a募集開始予定"; } .p-front__participate-link .l-underlayer__status-cover.ongakusai:after { content: "7/14(月)10時～ \a募集開始予定"; } .p-front__participate-link .l-underlayer__status-cover.midare:after { content: "9/12(金)～ \a募集開始"; } .p-front__participate-link-text { text-align: center; display: grid; gap: 0.05rem; padding-block: clamp(0.05rem, -0.01rem + 1.51vw, 0.28rem); } .p-front__participate-link-text::after { content: attr(data-en); font-size: 0.14rem; font-family: "Zen Kaku Gothic Antique", "メイリオ", "Meiryo", sans-serif; display: block; } @media (hover: hover) { .p-front__participate-link:hover { filter: drop-shadow(5px 5px 20px rgba(0, 0, 0, 0.2)); transform: translateZ(0); transition: filter 0.3s; } } .p-front__support-list { display: grid; row-gap: 0.15rem; -moz-column-gap: 0.2rem; column-gap: 0.2rem; grid-template-columns: repeat(1, 1fr); } @media screen and (min-width:769px) { .p-front__support-list { grid-template-columns: repeat(2, 1fr); } } .p-front__whatis-inner { display: grid; justify-items: end; gap: clamp(0.46rem, 0.364rem + 2.43vw, 0.83rem); } .p-front__sponsors-inner { display: grid; gap: clamp(0.46rem, 0.364rem + 2.43vw, 0.83rem); justify-items: center; } .p-front__sponsors-list { display: grid; gap: clamp(0.15rem, 0.137rem + 0.33vw, 0.2rem); grid-template-columns: repeat(2, 1fr); } @media screen and (min-width:769px) { .p-front__sponsors-list { grid-template-columns: repeat(3, 1fr); } } .p-front__sponsors-item a, .p-front__sponsors-item img { height: 100%; } .p-front__sponsors-item img { display: block; -o-object-fit: cover; object-fit: cover; } .syutten-color, .sakagura-ground, .sakagura-color { transition: fill 0.3s ease; } .syutten-hover .syutten-color { fill: #e7ac37; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); transform: translateZ(0); transition: fill 0.3s ease, filter 0.3s ease; } .sakagura-hover .sakagura-ground { fill: #ede86e; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); transform: translateZ(0); transition: fill 0.3s ease, filter 0.3s ease; } .sakagura-hover .sakagura-color { fill: #0096b7; transition: fill 0.3s ease, filter 0.3s ease; } .p-information__wrap { margin-block-end: 1rem; } @media screen and (min-width: 1600px) { .p-information__inner { width: calc(100% - 2.8rem); } } .p-information__archive-list { display: grid; row-gap: clamp(0.5rem, 0.474rem + 0.66vw, 0.6rem); } @media screen and (min-width:769px) { .p-information__archive-list { width: 100%; grid-template-columns: repeat(2, 1fr); -moz-column-gap: min(4.878%, 0.4rem); column-gap: min(4.878%, 0.4rem); } } .p-information__archive-data { display: grid; gap: 0.14rem; margin-block-start: 0.2rem; } .p-information__archive-thumbnail { width: 100%; aspect-ratio: 16/9; border-radius: 0.1rem; overflow: hidden; } .p-information__archive-thumbnail-img, .p-information__archive-thumbnail > .attachment-post-thumbnail { height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.1rem; transition: transform 0.3s; } .p-information__archive-link { transition: transform 0.3s opacity 0.3s; } @media (hover: hover) { .p-information__archive-link:hover { opacity: 0.8; transition: opacity 0.3s; } .p-information__archive-link:hover .p-information__archive-thumbnail-img, .p-information__archive-link:hover .attachment-post-thumbnail { transform: scale(1.1); transition: transform 0.3s; } } .p-information__archive-nav { width: -moz-fit-content; width: fit-content; font-size: 0.2rem; font-weight: bold; margin-inline: auto; } .p-information__archive-nav .nav-links { display: flex; gap: 0.12rem; } .p-information__archive-nav .page-numbers { width: 0.4rem; height: 0.4rem; display: flex; align-items: center; justify-content: center; border: 1px solid #1f1e1b; border-radius: 100%; } .p-information__archive-nav .page-numbers.current { color: #ffffff; background-color: #244a3a; } .p-information__archive-nav a.page-numbers { transition: opacity 0.3s; } @media (hover: hover) { .p-information__archive-nav a.page-numbers:hover { opacity: 0.5; transition: opacity 0.3s; } } .p-information__meta { display: flex; align-items: center; gap: 0.2rem; } .p-information__title { font-size: clamp(0.18rem, 0.175rem + 0.13vw, 0.2rem); font-weight: bold; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #244a3a; } @media screen and (min-width:769px) { .p-information__title { line-height: 0.35rem; } } .p-information__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .p-information__sidebar { width: 100%; height: -moz-fit-content; height: fit-content; display: grid; gap: clamp(0.6rem, 0.444rem + 3.94vw, 1.2rem); margin-block-start: 1rem; } .p-information__sidebar-title { font-size: clamp(0.2rem, 0.19rem + 0.26vw, 0.24rem); font-weight: bold; padding-block-end: 0.2rem; } .p-information__sidebar-item { font-size: 0.16rem; display: flex; align-items: center; border-bottom: 1px solid #99968e; } .p-information__sidebar-item:first-of-type { border-top: 1px solid #99968e; } .p-information__sidebar-item a { padding-block: 0.16rem; transition: opacity 0.3s; } @media (hover: hover) { .p-information__sidebar-item a:hover { opacity: 0.5; transition: opacity 0.3s; } } @media screen and (min-width: 1600px) { .p-information__wrap { display: flex; gap: min(6.78%, 0.8rem); } .p-information__sidebar { width: 2.8rem; margin-block-start: 0; } } @media screen and (min-width: 1600px) { .p-information__single-content { width: calc(100% - 2.8rem); } } .p-information__single-title { font-size: clamp(0.24rem, 0.219rem + 0.53vw, 0.32rem); font-weight: bold; border-bottom: 1px solid #99968e; margin-block: clamp(0.24rem, 0.198rem + 1.05vw, 0.4rem) clamp(0.3rem, 0.222rem + 1.97vw, 0.6rem); padding-block-end: clamp(0.2rem, 0.169rem + 0.79vw, 0.32rem); } .nav-links { font-size: 0.16rem; font-weight: bold; display: flex; margin-block-start: clamp(0.6rem, 0.548rem + 1.31vw, 0.8rem); } .nav-links:has(> .nav-previous + .nav-next) { justify-content: space-between; } .nav-links:has(> .nav-previous) { justify-content: flex-start; } .nav-links:has(> .nav-next) { justify-content: flex-end; } .nav-previous a, .nav-next a { display: flex; align-items: center; gap: clamp(0.15rem, 0.127rem + 0.59vw, 0.24rem); transition: opacity 0.3s; } @media (hover: hover) { .nav-previous a:hover, .nav-next a:hover { opacity: 0.5; transition: opacity 0.3s; } } div + div.p-informartion__single-text { margin-block-start: clamp(0.24rem, 0.172rem + 1.71vw, 0.5rem); } @media screen and (min-width: 1600px) { .single .p-information__sidebar { margin-block-start: 1rem; } } .wp-block-gallery.has-nested-images.columns-default.is-cropped.is-layout-flex.wp-block-gallery-is-layout-flex { display: grid; grid-template-columns: repeat(2, 1fr); margin-block-start: clamp(0.3rem, 0.274rem + 0.66vw, 0.4rem); } @media screen and (min-width:769px) { .wp-block-gallery.has-nested-images.columns-default.is-cropped.is-layout-flex.wp-block-gallery-is-layout-flex { grid-template-columns: repeat(3, 1fr); } } .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image), .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2), .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) { width: 100%; } .p-information__single-content h2.wp-block-heading { width: 100%; font-size: clamp(0.2rem, 0.19rem + 0.26vw, 0.24rem); font-weight: bold; background-color: #ffffff; border-left: 6px solid #1f1e1b; padding-block: clamp(0.13rem, 0.122rem + 0.2vw, 0.16rem); padding-inline-start: 0.19rem; } .p-information__single-content h2.wp-block-heading:not(:first-of-type) { margin-block-start: clamp(0.6rem, 0.548rem + 1.31vw, 0.8rem); } .p-information__single-content h3.wp-block-heading { font-size: clamp(0.18rem, 0.175rem + 0.13vw, 0.2rem); font-weight: bold; display: flex; align-items: center; gap: 0.1rem; padding-block-start: clamp(0.3rem, 0.274rem + 0.66vw, 0.4rem); padding-block-end: clamp(0.14rem, 0.13rem + 0.26vw, 0.18rem); } .p-information__single-content h3.wp-block-heading::before { content: ""; width: 0.09rem; height: 0.09rem; display: block; background-image: url("../img/news/heading-lv3-icon.svg"); background-size: cover; background-position: center center; background-repeat: no-repeat; } .p-information__single-content .border { position: relative; padding-block-end: clamp(0.24rem, 0.219rem + 0.53vw, 0.32rem); } .p-information__single-content .border::after { content: ""; width: 100%; height: 3px; display: block; background-image: url("../img/news/border.svg"); background-size: cover; background-position: center center; background-repeat: no-repeat; position: absolute; left: 0; bottom: 0; } .p-information__single-content p + p { padding-block-end: 0.2rem; } .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a, .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { aspect-ratio: 4/3; } @media (prefers-reduced-motion: no-preference) { .wp-lightbox-overlay.zoom.active .lightbox-image-container { height: 100%; } .wp-lightbox-overlay.zoom.active .lightbox-image-container img { height: 80%; -o-object-fit: contain !important; object-fit: contain !important; } } .p-contact__bg { background-color: #ffffff; border-radius: 0.1rem; padding-block: clamp(0.5rem, 0.37rem + 3.28vw, 1rem); } .p-contact__circle { margin-inline-end: 0.16rem; } .p-contact__batch { font-size: 0.14rem; color: #244a3a; border: 1px solid #244a3a; border-radius: 50px; margin-inline-start: 0.12rem; padding: 0.03rem 0.14rem; } .p-contact__confirm .c-input__form-label { font-size: clamp(0.15rem, 0.147rem + 0.07vw, 0.16rem); font-weight: normal; line-height: 0.3rem; min-height: 0.78rem; border-bottom: 1px solid #244a3a; padding-block-end: 0.16rem; } .p-contact__confirm .c-input__form-label > span { font-size: clamp(0.16rem, 0.155rem + 0.13vw, 0.18rem); font-weight: bold; line-height: clamp(0.3rem, 0.274rem + 0.66vw, 0.4rem); } .p-contact__complete .p-contact__heading { font-size: clamp(0.18rem, 0.164rem + 0.39vw, 0.24rem); text-align: center; } .p-contact__complete .p-contact__text { font-size: clamp(0.13rem, 0.122rem + 0.2vw, 0.16rem); font-weight: 500; line-height: 0.3rem; text-align: center; } .p-contact__complete .p-contact__link-top { width: -moz-fit-content; width: fit-content; font-weight: 500; text-decoration: underline; margin-inline: auto; } @media screen and (min-width:769px) { .p-contact__complete .p-contact__br { display: none; } } /* a,button -------------------------------------*/ a { display: block; width: 100%; } button { cursor: pointer; } /* text-align -------------------------------------*/ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /* font-weight -------------------------------------*/ .font-bold { font-weight: bold; } .font-normal { font-weight: normal; } /* font-size -------------------------------------*/ .fs40 { font-size: 0.4rem; } .fs30 { font-size: 0.3rem; } .fs20 { font-size: 0.2rem; } .fs18 { font-size: 0.18rem; } .fs16 { font-size: 0.16rem; } .fs14 { font-size: 0.14rem; } .fs12 { font-size: 0.12rem; } .fs10 { font-size: 0.1rem; } .fs8 { font-size: 0.08rem; } /* margin -------------------------------------*/ .ma { margin: auto; } .mt0 { margin-block-start: 0; } .mt5 { margin-block-start: 0.05rem; } .mt10 { margin-block-start: 0.1rem; } .mt15 { margin-block-start: 0.15rem; } .mt20 { margin-block-start: 0.2rem; } .mt25 { margin-block-start: 0.25rem; } .mt30 { margin-block-start: 0.3rem; } .mt35 { margin-block-start: 0.35rem; } .mt40 { margin-block-start: 0.4rem; } .mt45 { margin-block-start: 0.45rem; } .mt50 { margin-block-start: 0.5rem; } .mb0 { margin-block-end: 0; } .mb5 { margin-block-end: 0.05rem; } .mb10 { margin-block-end: 0.1rem; } .mb15 { margin-block-end: 0.15rem; } .mb20 { margin-block-end: 0.2rem; } .mb25 { margin-block-end: 0.25rem; } .mb30 { margin-block-end: 0.3rem; } .mb35 { margin-block-end: 0.35rem; } .mb40 { margin-block-end: 0.4rem; } .mb45 { margin-block-end: 0.45rem; } .mb50 { margin-block-end: 0.5rem; } .ml0 { margin-inline-start: 0; } .ml5 { margin-inline-start: 0.05rem; } .ml10 { margin-inline-start: 0.1rem; } .ml15 { margin-inline-start: 0.15rem; } .ml20 { margin-inline-start: 0.2rem; } .ml25 { margin-inline-start: 0.25rem; } .ml30 { margin-inline-start: 0.3rem; } .ml35 { margin-inline-start: 0.35rem; } .ml40 { margin-inline-start: 0.4rem; } .ml45 { margin-inline-start: 0.45rem; } .ml50 { margin-inline-start: 0.5rem; } .mr0 { margin-inline-end: 0; } .mr5 { margin-inline-end: 0.05rem; } .mr10 { margin-inline-end: 0.1rem; } .mr15 { margin-inline-end: 0.15rem; } .mr20 { margin-inline-end: 0.2rem; } .mr25 { margin-inline-end: 0.25rem; } .mr30 { margin-inline-end: 0.3rem; } .mr35 { margin-inline-end: 0.35rem; } .mr40 { margin-inline-end: 0.4rem; } .mr45 { margin-inline-end: 0.45rem; } .mr50 { margin-inline-end: 0.5rem; } /* padding -------------------------------------*/ .pt0 { padding-block-start: 0; } .pt5 { padding-block-start: 0.05rem; } .pt10 { padding-block-start: 0.1rem; } .pt15 { padding-block-start: 0.15rem; } .pt20 { padding-block-start: 0.2rem; } .pt25 { padding-block-start: 0.25rem; } .pt30 { padding-block-start: 0.3rem; } .pt35 { padding-block-start: 0.35rem; } .pt40 { padding-block-start: 0.4rem; } .pt45 { padding-block-start: 0.45rem; } .pt50 { padding-block-start: 0.5rem; } .pb0 { padding-block-end: 0; } .pb5 { padding-block-end: 0.05rem; } .pb10 { padding-block-end: 0.1rem; } .pb15 { padding-block-end: 0.15rem; } .pb20 { padding-block-end: 0.2rem; } .pb25 { padding-block-end: 0.25rem; } .pb30 { padding-block-end: 0.3rem; } .pb35 { padding-block-end: 0.35rem; } .pb40 { padding-block-end: 0.4rem; } .pb45 { padding-block-end: 0.45rem; } .pb50 { padding-block-end: 0.5rem; } .pl0 { padding-inline-start: 0px; } .pl5 { padding-inline-start: 0.05rem; } .pl10 { padding-inline-start: 0.1rem; } .pl15 { padding-inline-start: 0.15rem; } .pl20 { padding-inline-start: 0.2rem; } .pl25 { padding-inline-start: 0.25rem; } .pl30 { padding-inline-start: 0.3rem; } .pl35 { padding-inline-start: 0.35rem; } .pl40 { padding-inline-start: 0.4rem; } .pl45 { padding-inline-start: 0.45rem; } .pl50 { padding-inline-start: 0.5rem; } .pr0 { padding-inline-end: 0px; } .pr5 { padding-inline-end: 0.05rem; } .pr10 { padding-inline-end: 0.1rem; } .pr15 { padding-inline-end: 0.15rem; } .pr20 { padding-inline-end: 0.2rem; } .pr25 { padding-inline-end: 0.25rem; } .pr30 { padding-inline-end: 0.3rem; } .pr35 { padding-inline-end: 0.35rem; } .pr40 { padding-inline-end: 0.4rem; } .pr45 { padding-inline-end: 0.45rem; } .pr50 { padding-inline-end: 0.5rem; } /* width % -------------------------------------*/ .w10p { width: 10%; } .w20p { width: 20%; } .w30p { width: 30%; } .w40p { width: 40%; } .w50p { width: 50%; } .w60p { width: 60%; } .w70p { width: 70%; } .w80p { width: 80%; } .w90p { width: 90%; } .w100p { width: 100%; } /* width px -------------------------------------*/ .w100 { width: 100px; } .w200 { width: 200px; } .w300 { width: 300px; } .w400 { width: 400px; } .w500 { width: 500px; } /* white-space -------------------------------------*/ .whitespace-pre-wrap { white-space: pre-wrap; } .whitespace-nowrap { white-space: nowrap; } /* text-overflow -------------------------------------*/ .txt-of { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /* justify-content,align-items -------------------------------------*/ .justify-between { justify-content: space-between; } .justify-end { justify-content: end; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .items-center { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; align-items: center; } .items-end { -webkit-box-pack: end; -moz-box-pack: end; -ms-flex-pack: end; align-items: end; } /* flex -------------------------------------*/ .flex { display: flex; } .inline-flex { display: inline-flex; } .block { display: block; } .hidden { display: none; } .block_center { margin-inline-start: auto; margin-inline-end: auto; display: block; } .pc-only { display: block; } .sp-only { display: none; } @media screen and (max-width: 768px) { .pc-only { display: none; } .sp-only { display: block; } }/*# sourceMappingURL=style.css.map */