@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.2023) 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 - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *: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-inline-size: 100%; max-block-size: 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; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /*ブレークポイントの設定*/ body { color: #333; font-size: 16px; font-family: "Lora", "Zen Kaku Gothic New", serif !important; } @media screen and (min-width:1024px) { .ifsp { display: none !important; } } @media screen and (max-width:1023px) { .ifpc { display: none !important; } } ::-moz-placeholder { color: #7d7d7d; } ::placeholder { color: #7d7d7d; } @media screen and (min-width:701px) { ::-moz-placeholder { font-size: 16px; } ::placeholder { font-size: 16px; } } @media screen and (max-width:700px) { ::-moz-placeholder { font-size: 14px; } ::placeholder { font-size: 14px; } } .background--blue { background-color: #dbe9ff; } #site-translate-header-wrapper { display: none !important; } .border-line { height: 1px; background-color: #3e68a8; width: 100%; } @media screen and (min-width:701px) { .border-line { margin-top: 16px; margin-bottom: 16px; } } @media screen and (max-width:700px) { .border-line { margin-top: 8px; margin-bottom: 8px; } } .header { background-color: #fff; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2); } .header__inner { display: flex; justify-content: space-between; align-items: center; } .header__content { display: flex; align-items: center; } .header__content--right { height: inherit; } .header__logo-line { height: 1px; background-color: #333; } .header__business-button { color: #fff; background-color: #7f9fc5; line-height: 1; display: flex; align-items: center; -moz-column-gap: 4px; column-gap: 4px; filter: drop-shadow(2px 2px 2px #3e68a8); justify-content: center; } .header__menu { height: 100%; aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; } .header__menu--lang { background-color: #2ba099; } .header__menu--menu { background-color: #3e68a8; } .header__menu-border { position: relative; width: 100%; height: 32px; } .header__menu-line { position: absolute; background-color: #fff; height: 1px; width: 55%; display: block; } .header__business-button-icon { border-radius: 50%; border: 1px solid #fff; -o-object-fit: contain; object-fit: contain; } .header__menu-icon { -o-object-fit: contain; object-fit: contain; } .header__menu-text { color: #fff; } .header__nav, .header__lang-nav { position: fixed; top: 0; left: 0; display: flex; height: 100%; width: 100%; opacity: 0; transform: translateX(100%); transition: all 0.5s; } .header__nav.active, .header__lang-nav.active { transform: translateX(0); opacity: 1; } .header__nav-inner { height: 100%; } .header__nav-inner--white { background-color: #fff; flex-direction: column; border-top: 1px solid #333; overflow-y: scroll; } .header__nav-inner--dark { background-color: rgba(51, 51, 51, 0.8); } .header__nav-title { font-weight: 600; color: #3e68a8; text-align: center; } .header__nav-content-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; cursor: pointer; } .header__nav-content-item--1 { background-color: #c7467a; } .header__nav-content-item--2 { background-color: #2ba099; } .header__nav-content-item--3 { background-color: #3e68a8; } .header__nav-content-item--4 { background-color: #8f60b5; } .header__nav-content-item--5 { background-color: #d07838; } .header__nav-content-item--6 { background-color: #be4646; } .header__nav-content-item--7 { background-color: #cfb943; } .header__nav-content-item--8 { background-color: #7d7d7d; } .header__nav-content-item--7, .header__nav-content-item--8 { position: relative; } .header__nav-content-item--7::after, .header__nav-content-item--8::after { position: absolute; content: ""; display: block; border-bottom: 2px solid #fff; border-right: 2px solid #fff; } .header__nav-content-item-icon { background-color: #fff; padding: 4px; border-radius: 4px; } .header__nav-content-item-icon--1 { color: #c7467a; } .header__nav-content-item-icon--2 { color: #2ba099; } .header__nav-content-item-icon--3 { color: #3e68a8; } .header__nav-content-item-icon--4 { color: #8f60b5; } .header__nav-content-item-icon--5 { color: #d07838; } .header__nav-content-item-icon--6 { color: #be4646; } .header__nav-content-item-icon--7 { color: #cfb943; } .header__nav-content-item-icon--8 { color: #7d7d7d; } .header__nav-content-item-text { font-weight: 600; text-align: center; } .header__nav-accordion { display: grid; height: 0; overflow: hidden; opacity: 0; transition: all 0.4s; } .header__nav-accordion--1 { background-color: #cfb943; } .header__nav-accordion--1.active { height: auto; opacity: 1; } .header__nav-accordion--2 { background-color: #7d7d7d; } .header__nav-accordion--2.active { height: auto; opacity: 1; } .header__nav-accordion-item { color: #fff; border: 1px solid #fff; display: flex; justify-content: center; align-items: center; } .header__nav-accordion-item--1 { background-color: #cfb943; transition: all 0.4s; } .header__nav-accordion-item--1:hover { color: #cfb943; background-color: #fff; } .header__nav-accordion-item--2 { background-color: #7d7d7d; } .header__nav-accordion-item--2:hover { color: #7d7d7d; background-color: #fff; } .header__nav-inner-item { width: 100%; display: flex; justify-content: center; align-items: center; color: #333; font-weight: 600; } .header__nav-inner-item:hover { color: #333 !important; } .header__nav-inner-item--jp { background-color: #fec1c1; } .header__nav-inner-item--en { background-color: #c6ddff; } .header__nav-inner-item--cn { background-color: #ffc6ae; } .header__nav-inner-item--hk { background-color: #cbffcd; } .header__nav-inner-item--kr { background-color: #ffe9ff; } @media screen and (min-width:701px) { .header { height: 72px; position: fixed; top: 0; width: 100%; z-index: 999; } .header__inner { max-width: 1200px; margin: 0 auto; height: inherit; } .header__logo { height: 100%; } .header__logo-line { width: 64px; } .header__content--left { -moz-column-gap: 8px; column-gap: 8px; } .header__logo-text { font-size: 18px; } .header__logo-anchor { height: 40px; } .header__business-button { border-radius: 4px; padding: 8px 16px; margin-right: 16px; } .header__business-button-icon { width: 24px; height: 24px; } .header__menu { row-gap: 4px; } .header__menu-icon { width: 32px; height: 32px; } .header__menu-line { left: 0; right: 0; margin: auto; transition: all 0.4s; } .header__menu-line--1 { top: 4px; } .header__menu-line--1.active { top: 15px; transform: rotate(225deg); } .header__menu-line--2 { top: 17px; } .header__menu-line--2.active { display: none; } .header__menu-line--3 { bottom: 2px; } .header__menu-line--3.active { bottom: 15px; transform: rotate(-225deg); } .header__nav, .header__lang-nav { margin-top: 72px; } .header__nav-content { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .header__nav-inner--white { width: 50%; padding: 56px; } .header__nav-inner--white--lang { width: 15%; padding: 0; } .header__nav-inner--dark { width: 50%; } .header__nav-inner--dark--lang { width: 95%; } .header__nav-title { font-size: 22px; } .header__nav-content-item { border-radius: 4px; padding-top: 8px; padding-bottom: 8px; row-gap: 8px; } .header__nav-content-item--7::after, .header__nav-content-item--8::after { transition: all 0.4s; top: 24px; right: 16px; height: 16px; width: 16px; transform: rotate(45deg); } .header__nav-content-item--7.active::after, .header__nav-content-item--8.active::after { top: 32px; transform: rotate(225deg); } .header__nav-content-item-icon { height: 32px; width: 32px; background-color: #fff; padding: 4px; } .header__nav-accordion { padding-top: 0; padding-bottom: 0; padding-left: 16px; padding-right: 16px; grid-template-columns: repeat(3, 1fr); gap: 16px; } .header__nav-accordion--1.active, .header__nav-accordion--2.active { margin-top: 16px; padding-top: 16px; padding-bottom: 16px; } .header__nav-accordion-item { padding-top: 8px; padding-bottom: 8px; } .header__nav-inner-item { padding-top: 16px; padding-bottom: 16px; } } @media screen and (701px <= width <= 1200px) { .header__logo { height: 56px; } .header__logo-line { width: 2vw; } .header__logo-text { font-size: 14px; } .header__nav { margin-top: 72px; } .header__nav-inner--white { width: 60%; padding: 40px; row-gap: 24px; } .header__nav-inner--white--lang { width: 20%; padding: 0; } .header__nav-inner--dark { width: 40%; } .header__nav-inner--dark--lang { width: 80%; padding: 0; } .header__nav-accordion { grid-template-columns: repeat(2, 1fr); } .header__content--left { margin-left: 16px; } } @media screen and (max-width:700px) { .header { position: fixed; top: 0; height: 56px; width: 100%; z-index: 9999; } .header__inner { width: 100%; height: inherit; } .header__logo { height: 100%; } .header__logo-anchor { height: 32px; margin-left: 8px; } .header__business-button { border-radius: 4px; padding: 8px 16px; margin-right: 16px; } .header__business-button-icon { width: 24px; height: 24px; } .header__menu { row-gap: 4px; } .header__menu-text { font-size: 12px; } .header__menu-border { position: relative; width: 100%; height: 24px; } .header__menu-icon { width: 24px; height: 24px; } .header__menu-line { left: 0; right: 0; margin: auto; transition: all 0.4s; } .header__menu-line--1 { top: 3px; } .header__menu-line--1.active { top: 13px; transform: rotate(225deg); } .header__menu-line--2 { top: 13px; } .header__menu-line--2.active { display: none; } .header__menu-line--3 { bottom: 1px; } .header__menu-line--3.active { bottom: 10px; transform: rotate(-225deg); } .header__nav, .header__lang-nav { margin-top: 56px; } .header__nav { height: 100dvh; } .header__nav-inner--white { width: 85%; padding: 16px; row-gap: 16px; } .header__nav-inner--white--lang { width: 30%; padding: 0; } .header__nav-inner--dark { width: 15%; } .header__nav-inner--dark--lang { width: 70%; padding: 0; } .header__nav-content { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .header__nav-title { font-size: 18px; } .header__nav-content-item { border-radius: 4px; padding-top: 8px; padding-bottom: 8px; row-gap: 8px; } .header__nav-content-item--7::after, .header__nav-content-item--8::after { transition: all 0.4s; top: 16px; right: 16px; height: 8px; width: 8px; transform: rotate(45deg); } .header__nav-content-item--7.active::after, .header__nav-content-item--8.active::after { top: 20px; transform: rotate(225deg); } .header__nav-content-item-icon { height: 24px; width: 24px; background-color: #fff; padding: 4px; } .header__nav-content-item-text { font-size: 16px; } .header__nav-accordion { padding-top: 0; padding-bottom: 0; padding-left: 8px; padding-right: 8px; grid-template-columns: repeat(2, 1fr); gap: 8px; } .header__nav-accordion--1.active, .header__nav-accordion--2.active { margin-top: 16px; padding-top: 8px; padding-bottom: 8px; } .header__nav-accordion-item { font-size: 14px; padding-top: 8px; padding-bottom: 8px; } .header__business-button { margin-top: 16px; width: 100%; } .header__nav-inner-item { padding-top: 16px; padding-bottom: 16px; } } .footer { background-color: #c6ddff; } @media screen and (min-width:701px) { .footer { padding-top: 24px; } .footer__inner { height: inherit; max-width: 1200px; width: 100%; margin: 0 auto; padding-bottom: 56px; } .footer__img a { display: inline-block; } .footer__logo { height: 64px; margin-bottom: 32px; } .footer__container { max-width: 584px; width: 100%; margin: 0 auto; } .footer__box { width: 100%; margin: 0 auto; margin-bottom: 40px; background-color: #fff; border: 1px solid #3e68a8; padding: 16px 0px; text-align: center; line-height: 24px; font-size: 16px; font-weight: 500; color: #3e68a8; } .footer__box-text { display: flex; justify-content: center; } .footer__flex { display: flex; flex-direction: column; width: 100%; margin: 0 auto; } .footer__flex-nav1 { margin: 0 auto; margin-bottom: 16px; width: 392px; } .footer__flex-nav2 { margin: 0 auto; width: 544px; } .footer__nav { display: flex; margin-bottom: 20px; width: 100%; margin: 0 auto; justify-content: space-between; } .footer__nav li a { color: #333; border-bottom: 1px solid #7d7d7d; } .footer__copyright { background-color: #3e68a8; color: #fff; font-weight: normal; font-size: 12px; padding: 4px; text-align: center; } .footer__nav-list { font-size: 16px; } } @media screen and (701px <= width <= 1200px) { .footer__logo { margin-bottom: 24px; } } @media screen and (max-width:700px) { .footer { padding-top: 32px; width: 100%; } .footer__inner { width: 100%; height: inherit; margin: 0 auto; padding-bottom: 40px; padding-right: 8px; padding-left: 8px; } .footer__img a { display: inline-block; } .footer__logo { height: 48px; margin-bottom: 32px; } .footer__container { width: 100%; } .footer__box { width: 100%; margin: 0 auto; margin-bottom: 24px; background-color: #fff; border: 1px solid #3e68a8; padding: 12px; text-align: center; line-height: 20px; font-size: 14px; color: #3e68a8; margin-top: 0px; } .footer__flex { display: flex; flex-direction: column; width: 100%; margin: 0 auto; } .footer__flex-nav1 { width: 80%; margin: 0 auto; margin-bottom: 24px; } .footer__nav { display: flex; width: 100%; margin: 0 auto; justify-content: space-between; font-size: 12px; } .footer__nav li a { color: #333; border-bottom: 1px solid #7d7d7d; } .footer__copyright { background-color: #3e68a8; color: #fff; font-weight: normal; font-size: 12px; padding: 4px; text-align: center; } } .main-visual { width: 100%; position: relative; } .main-visual__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: bottom; object-position: bottom; } .main-visual__search-wrap { position: absolute; } .main-visual__search { background-color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; } .main-visual__inner { position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .main-visual__search-input { border: 1px solid #333; background-color: #fff; width: 100%; padding-left: 4px; } .main-visual__search-button { color: #fff; background-color: #3e68a8; white-space: nowrap; } .main-visual__nav { width: 100%; } .main-visual__nav-item-text { text-align: center; } .main-visual__nav-item { color: #fff; border: 1px solid #fff; } .main-visual__nav-item--1 { background-color: #c7467a; } .main-visual__nav-item--2 { background-color: #2ba099; } .main-visual__nav-item--3 { background-color: #3e68a8; } .main-visual__nav-item--4 { background-color: #8f60b5; } .main-visual__nav-item--5 { background-color: #d07838; } .main-visual__nav-item--6 { background-color: #be4646; } .main-visual__nav-item--7 { background-color: #cfb943; } .main-visual__nav-item--8 { background-color: #7d7d7d; } .main-visual__nav-item--7, .main-visual__nav-item--8 { position: relative; } .main-visual__nav-item--7::after, .main-visual__nav-item--8::after { position: absolute; content: ""; display: block; border-bottom: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); transition: all 0.4s; } .main-visual__nav-item--7.active::after, .main-visual__nav-item--8.active::after { transform: rotate(225deg); } .main-visual__nav-accordion { height: 0; overflow: hidden; opacity: 0; transition: all 0.4s; } .main-visual__nav-accordion--1 { background-color: #cfb943; } .main-visual__nav-accordion--2 { background-color: #7d7d7d; } .main-visual__nav-accordion.active { height: auto; opacity: 1; } .main-visual__nav-accordion-item { color: #fff; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; } .main-visual__nav-accordion-item--1 { background-color: #cfb943; } .main-visual__nav-accordion-item--1:hover { color: #cfb943; background-color: #fff; } .main-visual__nav-accordion-item--2 { background-color: #7d7d7d; } .main-visual__nav-accordion-item--2:hover { color: #7d7d7d; background-color: #fff; } .main-visual__title-wrap { position: absolute; } .main-visual__title { color: #fff; position: absolute; background-color: rgba(0, 0, 0, 0.4); width: -moz-fit-content; width: fit-content; display: block; } .main-visual__anchor { display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } @media screen and (min-width:1024px) { .main-visual { height: calc(100vh - 72px); } .main-visual__search-wrap { width: 55%; top: 16px; max-width: 1200px; width: 100%; left: 0; right: 0; margin: auto; z-index: 3; } .main-visual__search { padding: 16px; -moz-column-gap: 16px; column-gap: 16px; width: 70%; } .main-visual__search-input { height: 40px; } .main-visual__search-button { padding: 8px 16px; cursor: pointer; } .main-visual__nav-accordion-item { padding-top: 4px; padding-bottom: 4px; } .main-visual__nav { max-width: 1200px; width: 100%; position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 16px; background-color: rgba(51, 51, 51, 0.8); z-index: 3; } .main-visual__nav-inner { display: flex; -moz-column-gap: 16px; column-gap: 16px; } .main-visual__nav-item { width: 100%; display: flex; flex-direction: column; align-items: center; row-gap: 4px; border-radius: 4px; padding-top: 4px; padding-bottom: 4px; } .main-visual__nav-item--7, .main-visual__nav-item--8 { cursor: pointer; } .main-visual__nav-item--7::after, .main-visual__nav-item--8::after { width: 13px; height: 13px; top: 12px; right: 10px; } .main-visual__nav-item--7.active::after, .main-visual__nav-item--8.active::after { top: 21px; } .main-visual__nav-accordion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 0; padding-left: 8px; padding-right: 8px; } .main-visual__nav-accordion.active { margin-top: 16px; padding-top: 8px; padding-bottom: 8px; } .main-visual__nav-accordion-item { padding-top: 8px; padding-bottom: 8px; font-size: 16px; } .main-visual__title-wrap { width: 100%; height: 100%; max-width: 1200px; left: 0; right: 0; margin: 0 auto; z-index: 1; } .main-visual__title { font-size: 20px; padding: 4px 8px; z-index: 5; } .main-visual__title.right-top { top: 96px; right: 0; } .main-visual__title.right-bottom { bottom: 136px; right: 0; } .main-visual__title.left-top { top: 96px; left: 0; } .main-visual__title.left-bottom { bottom: 136px; left: 0; } .main-visual__anchor { width: 100%; height: 100%; z-index: 2; } } @media screen and (701px <= width <= 1024px) { .main-visual__search { width: 97%; padding: 8px; margin: 0 auto; } .main-visual__nav { max-width: none; width: 97%; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 16px; margin: 0 auto; } .main-visual__nav-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .main-visual__title-wrap { width: 100%; height: 100%; max-width: 1200px; left: 0; right: 0; margin: 0 auto; z-index: 1; } .main-visual__title { font-size: 14px; padding: 4px 8px; z-index: 5; } .main-visual__title.right-top { top: 80px; right: 16px; } .main-visual__title.right-bottom { bottom: 216px; right: 16px; } .main-visual__title.left-top { top: 80px; left: 16px; } .main-visual__title.left-bottom { bottom: 216px; left: 16px; } .main-visual__anchor { width: 100%; height: 100%; z-index: 2; } } @media screen and (max-width:1024px) { .main-visual__inner { height: inherit; width: 100%; } .main-visual__image { height: 56vw; } .main-visual__anchor { width: 100%; height: 100%; z-index: 2; } .main-visual__search-wrap { top: 8px; width: 96%; left: 0; right: 0; margin: 0 auto; z-index: 5; } .main-visual__search { padding: 8px; -moz-column-gap: 8px; column-gap: 8px; } .main-visual__search-input { height: 32px; } .main-visual__search-button { font-size: 14px; height: 32px; padding-left: 8px; padding-right: 8px; } .main-visual__nav { position: relative; background-color: #333; margin-top: -4px; z-index: 5; width: 100%; bottom: 0; } .main-visual__nav-inner { display: grid; } .main-visual__nav-inner--1 { grid-template-columns: repeat(3, 1fr); gap: 4px; padding-left: 4px; padding-top: 4px; padding-right: 4px; } .main-visual__nav-inner--2 { grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; } .main-visual__nav-item { border-radius: 2px; display: flex; flex-direction: column; align-items: center; padding-top: 4px; padding-bottom: 4px; font-size: 14px; row-gap: 2px; } .main-visual__nav-item--7::after, .main-visual__nav-item--8::after { width: 16px; height: 16px; top: 12px; right: 10px; } .main-visual__nav-item--7.active::after, .main-visual__nav-item--8.active::after { top: 20px; } .main-visual__nav-accordion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-left: 4px; margin-right: 4px; margin-bottom: 0; padding-left: 8px; padding-right: 8px; } .main-visual__nav-accordion.active { padding-top: 8px; padding-bottom: 8px; margin-bottom: 8px; } .main-visual__nav-accordion-item { padding-top: 4px; padding-bottom: 4px; font-size: 14px; } .main-visual__title-wrap { width: 100%; height: 56vw; } .main-visual__title { padding: 2px 4px; font-size: 14px; z-index: 5; } .main-visual__title.right-top { top: 64px; right: 8px; } .main-visual__title.right-bottom { bottom: 4px; right: 4px; } .main-visual__title.left-top { top: 64px; left: 8px; } .main-visual__title.left-bottom { bottom: 8px; left: 8px; } } .main { display: flex; flex-direction: column; } @media screen and (min-width:701px) { .main { margin-top: 72px; margin-bottom: 72px; row-gap: 64px; } } @media screen and (max-width:700px) { .main { margin-top: 56px; margin-bottom: 56px; row-gap: 40px; } } .top-slider__item-image { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } @media screen and (min-width:701px) { .top-slider { max-width: 1200px; width: 100%; margin: 0 auto; } } @media screen and (701px <= width <= 1200px) { .top-slider { padding-left: 16px; padding-right: 16px; } } @media screen and (max-width:700px) { .top-slider { padding-left: 8px; padding-right: 8px; } } .recommend-information { background-image: url("../../img/renewal/recommend-background.webp"); background-size: cover; } .recommend-information__inner { margin: 0 auto; display: flex; flex-direction: column; } .recommend-information__list { display: grid; } .recommend-information__list-image { width: 100%; height: 100%; aspect-ratio: 4/3; -o-object-fit: cover; object-fit: cover; } @media screen and (min-width:701px) { .recommend-information { width: 100%; } .recommend-information__inner { height: 100%; width: 100%; max-width: 1200px; padding-top: 40px; padding-bottom: 40px; row-gap: 24px; } .recommend-information__list { grid-template-columns: repeat(4, 1fr); -moz-column-gap: 24px; column-gap: 24px; } } @media screen and (701px <= width <= 1200px) { .recommend-information { padding-left: 16px; padding-right: 16px; } .recommend-information__inner { padding-top: 24px; padding-bottom: 24px; row-gap: 24px; } .recommend-information__list { -moz-column-gap: 16px; column-gap: 16px; } } @media screen and (max-width:700px) { .recommend-information { width: 100%; padding-left: 8px; padding-right: 8px; } .recommend-information__inner { height: 100%; width: 100%; padding-top: 24px; padding-bottom: 24px; row-gap: 16px; } .recommend-information__list { grid-template-columns: repeat(2, 1fr); gap: 8px; } } .section-title { margin: 0 auto; width: -moz-fit-content; width: fit-content; display: flex; flex-direction: column; align-items: center; justify-content: center; } .section-title__icon-path--blue { fill: #3e68a8; } .section-title__icon-path--green { fill: #2ba099; } .section-title__icon-path--red { fill: #be4646; } .section-title__icon-path--red-strong { fill: #a22952; } .section-title__icon-path--pink { fill: #c7467a; } .section-title__icon-wrap { background-color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .section-title__icon-wrap--blue { border: 2px solid #3e68a8; } .section-title__icon-wrap--green { border: 2px solid #2ba099; } .section-title__icon-wrap--red { border: 2px solid #be4646; } .section-title__icon-wrap--red-strong { border: 2px solid #a22952; } .section-title__icon-wrap--pink { border: 2px solid #c7467a; } .section-title__text { font-weight: 600; } @media screen and (min-width:701px) { .section-title { row-gap: 8px; } .section-title__icon-wrap { width: 48px; height: 48px; } .section-title__icon { width: 70%; } .section-title__text { font-size: 24px; } } @media screen and (701px <= width <= 1200px) { .section-title { row-gap: 8px; } .section-title__icon { font-size: 22px; } .section-title__text { font-size: 22px; } } @media screen and (max-width:700px) { .section-title { row-gap: 8px; } .section-title__icon-wrap { width: 40px; height: 40px; } .section-title__icon { width: 70%; } .section-title__text { font-size: 20px; } } .button { display: block; font-weight: 600; text-align: center; line-height: 1; color: #fff; width: -moz-fit-content; width: fit-content; width: 100%; margin: 0 auto; } .button--blue { background-color: #3e68a8; } .button--green { background-color: #2ba099; } .button__inner { border: 1px solid #fff; } @media screen and (min-width:701px) { .button { max-width: 240px; padding: 8px; } .button__inner { padding-top: 16px; padding-bottom: 16px; font-size: 20px; } } @media screen and (max-width:700px) { .button { max-width: 160px; padding: 4px; } .button__inner { padding-top: 16px; padding-bottom: 16px; font-size: 16px; } } .sub-nav { display: flex; flex-direction: column; } .sub-nav__banner-image { width: 100%; } .sub-nav__list-item { display: flex; align-items: center; } .sub-nav__list-item--1 { border: 1px solid #8f60b5; border-left: 24px solid #8f60b5; } .sub-nav__list-item--2 { border: 1px solid #3e68a8; border-left: 24px solid #3e68a8; } .sub-nav__list-item--3 { border: 1px solid #d07838; border-left: 24px solid #d07838; } .sub-nav__list-item--4 { border: 1px solid #fec1c1; border-left: 24px solid #fec1c1; } .sub-nav__list-item--5 { border: 1px solid #c7467a; border-left: 24px solid #c7467a; } .sub-nav__list-item--6 { border: 1px solid #2ba099; border-left: 24px solid #2ba099; } .sub-nav__list-item--7 { border: 1px solid #be4646; border-left: 24px solid #be4646; } .sub-nav__list-item--8 { border: 1px solid #66af68; border-left: 24px solid #66af68; flex-direction: row; display: flex; align-items: center; padding: 8px; } .sub-nav__list-item-image { -o-object-fit: cover; object-fit: cover; } .sub-nav__list-item-image--1 { border: 1px solid #8f60b5; } .sub-nav__list-item-image--2 { border: 1px solid #3e68a8; } .sub-nav__list-item-image--3 { border: 1px solid #d07838; } .sub-nav__list-item-image--4 { border: 1px solid #fec1c1; } .sub-nav__list-item-image--5 { border: 1px solid #c7467a; } .sub-nav__list-item-image--6 { border: 1px solid #2ba099; } .sub-nav__list-item-image--7 { border: 1px solid #be4646; } .sub-nav__list-item-image--8 { border: 1px solid #66af68; } .sub-nav__list-item-image { aspect-ratio: 3/2; } .sub-nav__list-item-title { font-weight: 600; color: #333; } .sub-nav__links-item { text-align: center; background-color: #fff; border: 1px solid #7d7d7d; font-weight: 700; } @media screen and (min-width:701px) { .sub-nav { max-width: 1200px; width: 100%; margin: 0 auto; row-gap: 16px; } .sub-nav__banner { display: grid; grid-template-columns: repeat(2, 1fr); -moz-column-gap: 16px; column-gap: 16px; } .sub-nav__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .sub-nav__list-item { padding: 8px; -moz-column-gap: 8px; column-gap: 8px; } .sub-nav__list-item-image { width: 40%; } .sub-nav__list-item-title { font-size: 18px; } .sub-nav__links { display: grid; grid-template-columns: repeat(2, 1fr); -moz-column-gap: 16px; column-gap: 16px; } .sub-nav__links-item { font-size: 18px; padding-top: 8px; padding-bottom: 8px; } } @media screen and (701px <= width <= 1200px) { .sub-nav { padding-left: 16px; padding-right: 16px; } .sub-nav__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .sub-nav__links-item { font-size: 16px; } } @media screen and (max-width:700px) { .sub-nav { width: 100%; padding-left: 8px; padding-right: 8px; row-gap: 16px; } .sub-nav__banner { display: flex; flex-direction: column; row-gap: 8px; } .sub-nav__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .sub-nav__list-item { padding: 8px; display: flex; flex-direction: column-reverse; row-gap: 8px; } .sub-nav__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .sub-nav__links-item { font-size: 14px; padding-top: 8px; padding-bottom: 8px; } } @media screen and (min-width:701px) { .top-information { background-color: #c6ddff; padding-top: 48px; padding-bottom: 48px; } .top-information__inner { display: flex; flex-wrap: wrap; max-width: 1200px; width: 100%; margin: 0 auto; justify-content: space-between; row-gap: 24px; } .top-information__inner-element { width: 49%; } } @media screen and (701px <= width <= 1200px) { .top-information { padding: 24px 16px; } .top-information__inner { display: flex; flex-direction: column; gap: 24px; max-width: 1200px; width: 100%; margin: 0 auto; } .top-information__inner-element { width: 100%; } } @media screen and (max-width:700px) { .top-information { display: flex; flex-direction: column; row-gap: 16px; } } .event-information { display: flex; flex-direction: column; } .event-information__item { background-color: #fff; display: block; border: 1px solid #2ba099; } .event-information__item-image { border: 1px solid #2ba099; aspect-ratio: 4/3; -o-object-fit: cover; object-fit: cover; } .event-information__content { color: #333; display: flex; flex-direction: column; } .event-information__content-title { font-weight: 600; } .event-information__inner { display: flex; flex-direction: column; } @media screen and (min-width:701px) { .event-information { background-color: #fff; padding: 24px; row-gap: 24px; justify-content: space-between; } .event-information__inner { width: 100%; row-gap: 16px; } .event-information__item { display: grid; grid-template-columns: 2fr 5fr; padding: 8px; -moz-column-gap: 8px; column-gap: 8px; } .event-information__content { row-gap: 4px; } .event-information__content-time { font-size: 14px; } .event-information__content-title { font-size: 18px; } } @media screen and (max-width:700px) { .event-information { padding: 24px 8px; row-gap: 24px; background-color: #c6ddff; } .event-information__inner { width: 100%; row-gap: 8px; } .event-information__item { display: grid; grid-template-columns: 2fr 3fr; padding: 8px; -moz-column-gap: 8px; column-gap: 8px; } .event-information__content { row-gap: 4px; } .event-information__content-time { font-size: 14px; } .event-information__content-title { font-size: 18px; } } .member-news { display: flex; flex-direction: column; } .member-news__list { display: flex; flex-direction: column; } .member-news__list-item { border-bottom: 1px solid #3e68a8; border-left: 4px solid #3e68a8; background-color: #fff; display: block; display: flex; flex-direction: column; } .member-news__list-time { color: #7d7d7d; } .member-news__list-title { font-weight: 600; color: #333; } .member-news__list-text { color: #333; } @media screen and (min-width:701px) { .member-news { background-color: #fff; padding: 24px; row-gap: 24px; justify-content: space-between; } .member-news__list { row-gap: 16px; } .member-news__list-item { padding: 8px; row-gap: 4px; min-height: 128px; justify-content: space-between; } .member-news__list-time { font-size: 14px; } .member-news__list-title { font-size: 18px; } .member-news__list-text { font-size: 16px; margin: 0 0 0 auto; } } @media screen and (max-width:700px) { .member-news { padding: 24px 8px; row-gap: 16px; } .member-news__list { row-gap: 16px; } .member-news__list-item { padding: 8px; row-gap: 4px; } .member-news__list-time, .member-news__list-text { font-size: 14px; } .member-news__list-text { margin: 0 0 0 auto; } .member-news__list-title { font-size: 16px; } } .area-introduction { display: flex; flex-direction: column; } .area-introduction__inner { display: flex; } .area-introduction__nav-item { position: relative; } .area-introduction__nav-image { border-radius: 50%; aspect-ratio: 1/1; width: 100%; } .area-introduction__nav-image--1, .area-introduction__nav-image--2 { border: 2px solid #9b8438; } .area-introduction__nav-image--3 { border: 2px solid #457a95; } .area-introduction__nav-image--4, .area-introduction__nav-image--5, .area-introduction__nav-image--6 { border: 2px solid #a22952; } .area-introduction__nav-title { position: absolute; width: -moz-fit-content; width: fit-content; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #fff; line-height: 1; } .area-introduction__nav-title--1, .area-introduction__nav-title--2 { background-color: #9b8438; } .area-introduction__nav-title--3 { background-color: #457a95; } .area-introduction__nav-title--4, .area-introduction__nav-title--5, .area-introduction__nav-title--6 { background-color: #a22952; } .area-introduction__nav-list { display: flex; flex-direction: column; } .area-introduction__map { margin: auto 0; position: relative; height: 100%; display: flex; align-items: center; } .area-introduction__text { color: #333; background-color: rgba(255, 255, 255, 0.8); padding: 2px; position: absolute; word-wrap: break-word; } .area-introduction__text--rinkaibu { color: #333; } @media screen and (min-width:701px) { .area-introduction { background-color: #fff; padding: 24px; row-gap: 24px; } .area-introduction__inner { display: grid; grid-template-columns: 2.5fr 6fr 2.5fr; -moz-column-gap: 24px; column-gap: 24px; } .area-introduction__nav-item { margin-bottom: 24px; } .area-introduction__nav-list { row-gap: 16px; } .area-introduction__nav-title { bottom: -10px; padding: 4px 16px; border-radius: 4px; font-size: 18px; } .area-introduction__text { font-size: 14px; max-width: 80px; } .area-introduction__text--fukagawan { top: 24%; left: 28%; } .area-introduction__text--fukagawas { top: 37%; left: 28%; } .area-introduction__text--kamedo { top: 11%; right: 16%; } .area-introduction__text--oojima { top: 23%; right: 16%; } .area-introduction__text--sunamachi { top: 37%; right: 16%; } .area-introduction__text--rinkaibu { bottom: 26%; left: 42%; } } @media screen and (701px <= width <= 1200px) { .area-introduction__text { font-size: 18px; } .area-introduction__text--fukagawan { top: 24%; left: 31%; } .area-introduction__text--fukagawas { top: 35%; left: 31%; } .area-introduction__text--kamedo { top: 8%; right: 19%; } .area-introduction__text--oojima { top: 21%; right: 19%; } .area-introduction__text--sunamachi { top: 35%; right: 19%; } .area-introduction__text--rinkaibu { bottom: 24%; left: 44%; } } @media screen and (max-width:700px) { .area-introduction { background-color: #c6ddff; padding: 24px 8px; row-gap: 16px; } .area-introduction__inner { -moz-column-gap: 8px; column-gap: 8px; background-color: #fff; padding: 24px 8px; } .area-introduction__nav-item { margin-bottom: 12px; } .area-introduction__nav-list { row-gap: 16px; width: 25%; } .area-introduction__map { width: 50%; } .area-introduction__nav-title { bottom: -10px; padding: 4px 16px; border-radius: 4px; font-size: 14px; } .area-introduction__text { font-size: 12px; max-width: 56px; } .area-introduction__text--fukagawan { top: 23%; left: 28%; } .area-introduction__text--fukagawas { top: 35%; left: 28%; } .area-introduction__text--kamedo { top: 7%; right: 18%; } .area-introduction__text--oojima { top: 20%; right: 18%; } .area-introduction__text--sunamachi { top: 34%; right: 18%; } .area-introduction__text--rinkaibu { bottom: 25%; left: 42%; } } .access-ranking { display: flex; flex-direction: column; } .access-ranking__item { position: relative; } .access-ranking__item-image { border-radius: 50%; aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; border: 2px solid #333; width: 100%; display: block; } .access-ranking__item-number { position: absolute; top: 0; left: 0; border-radius: 50%; aspect-ratio: 1/1; width: -moz-fit-content; width: fit-content; color: #333; background-color: #fff; border: 2px solid #333; font-weight: 600; display: grid; place-items: center; } .access-ranking__item-title { background-color: #fff; border: 1px solid #333; display: flex; justify-content: center; position: relative; font-weight: 600; } .access-ranking__item-category { position: absolute; color: #fff; text-align: center; } .access-ranking__item-category--event { background-color: #2ba099; } .access-ranking__item-category--topics { background-color: #a22952; } .access-ranking__item-category--attractive { background-color: #8f60b5; } @media screen and (min-width:701px) { .access-ranking { background-color: #fff; padding: 24px; row-gap: 24px; } .access-ranking__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .access-ranking__item-number { padding: 8px; width: 40px; height: 40px; } .access-ranking__item-title { border-radius: 4px; padding: 24px 16px 16px; min-height: 120px; } .access-ranking__item-category { border-radius: 4px; top: -14px; padding: 2px 16px; } } @media screen and (701px <= width <= 1200px) { .access-ranking__item-text { font-size: 2vw; min-height: 7vw; } } @media screen and (max-width:700px) { .access-ranking { background-color: #fff; padding: 24px 8px; row-gap: 24px; } .access-ranking__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .access-ranking__item-number { z-index: 999; width: 40px; height: 40px; font-size: 18px; } .access-ranking__item-title { border-radius: 4px; padding: 24px 16px 16px; } .access-ranking__item-text { font-size: 4vw; min-height: 19vw; } .access-ranking__item-category { border-radius: 4px; top: -14px; padding: 2px 16px; } } .top-SNS { display: flex; flex-direction: column; } .top-SNS__button { display: block; border: 1px solid #3e68a8; color: #3e68a8; width: -moz-fit-content; width: fit-content; } .top-SNS__button:hover { color: #3e68a8; } .top-SNS__list-item { display: flex; } .top-SNS__list-item--X { border: 2px solid #333; } .top-SNS__list-item--instagram { border: 2px solid #c7467a; } .top-SNS__list-item--facebook { border: 2px solid #3e68a8; } .top-SNS__list-item-image { -o-object-fit: contain; object-fit: contain; background-color: #fff; display: grid; place-content: center; aspect-ratio: 1/1; } .top-SNS__list-item-text { color: #fff; width: 100%; } .top-SNS__list-item-text--X { background-color: #333; } .top-SNS__list-item-text--instagram { background-color: #c7467a; } .top-SNS__list-item-text--facebook { background-color: #3e68a8; } .top-SNS__insta-title { font-weight: 600; text-align: center; color: #fff; background-color: #c7467a; } .top-SNS__insta-list-item { aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; border: 1px solid #333; } .top-SNS__insta-list-item-image { width: 100%; aspect-ratio: 1/1; display: block; -o-object-fit: cover; object-fit: cover; background-color: #333; } @media screen and (min-width:701px) { .top-SNS { width: 100%; row-gap: 24px; } .top-SNS__button { margin: 0 auto; border-radius: 4px; padding: 4px 16px; } .top-SNS__list { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); width: 70%; margin: 0 auto; -moz-column-gap: 24px; column-gap: 24px; } .top-SNS__list-item-image { height: 48px; width: 48px; padding: 8px; } .top-SNS__list-item-text { padding-left: 8px; } .top-SNS__insta-list { display: grid; grid-template-columns: repeat(6, 1fr); } .top-SNS__insta-title { font-size: 18px; padding-top: 16px; padding-bottom: 16px; } } @media screen and (701px <= width <= 1200px) { .top-SNS__list { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; width: 50%; margin: 0 auto; row-gap: 16px; } .top-SNS__insta-list { display: grid; grid-template-columns: repeat(4, 1fr); } } @media screen and (max-width:700px) { .top-SNS { width: 100%; row-gap: 24px; } .top-SNS__button { margin: 0 auto; border-radius: 4px; padding: 4px 16px; } .top-SNS__list { display: flex; flex-direction: column; width: 80%; margin: 0 auto; row-gap: 8px; } .top-SNS__list-item-image { height: 48px; width: 48px; padding: 8px; } .top-SNS__list-item-text { padding-left: 8px; } .top-SNS__insta-list { display: grid; grid-template-columns: repeat(2, 1fr); } .top-SNS__insta-title { font-size: 18px; padding-top: 16px; padding-bottom: 16px; } } .top-link { background-color: #c6ddff; display: flex; flex-direction: column; } .top-link__nav-item { font-weight: 600; color: #333; background-color: #fff; border: 1px solid #7d7d7d; height: -moz-fit-content; height: fit-content; text-align: center; } .top-link__list { height: -moz-fit-content; height: fit-content; } .top-link__list-item { height: -moz-fit-content; height: fit-content; } .top-link__nav { height: -moz-fit-content; height: fit-content; } .top-link__nav-item:hover { color: #333; } @media screen and (min-width:701px) { .top-link { padding-top: 48px; padding-bottom: 48px; row-gap: 24px; } .top-link__inner { max-width: 1200px; width: 100%; margin: 0 auto; } .top-link__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .top-link__nav-item { padding-top: 8px; padding-bottom: 8px; } } @media screen and (701px <= width <= 1200px) { .top-link { padding-left: 16px; padding-right: 16px; } .top-link__inner { -moz-column-gap: 16px; column-gap: 16px; } .top-link__list { gap: 8px; } .top-link__nav { grid-template-columns: repeat(2, 1fr); gap: 8px; height: -moz-fit-content; height: fit-content; } } @media screen and (max-width:700px) { .top-link { padding: 24px 8px; row-gap: 24px; } .top-link__inner { width: 100%; display: flex; flex-direction: column; row-gap: 24px; } .top-link__list { display: flex; flex-direction: column; row-gap: 8px; width: 100%; } .top-link__list-item, .top-link__list-image { width: 100%; } .top-link__nav { display: flex; flex-direction: column; row-gap: 8px; } .top-link__nav-item { padding-top: 8px; padding-bottom: 8px; } } .SNS-icon-list { margin: 0 auto; } .SNS-icon-list__item-image { -o-object-fit: contain; object-fit: contain; } @media screen and (min-width:701px) { .SNS-icon-list { display: grid; grid-template-columns: repeat(3, 1fr); -moz-column-gap: 64px; column-gap: 64px; } .SNS-icon-list__item { width: 64px; height: 64px; } } @media screen and (max-width:700px) { .SNS-icon-list { display: grid; grid-template-columns: repeat(3, 1fr); -moz-column-gap: 32px; column-gap: 32px; } .SNS-icon-list__item { width: 40px; height: 40px; } } .top-koukoku { background-color: #E4E4E4; display: flex; flex-direction: column; } .top-koukoku__title { font-weight: 600; text-align: center; } @media screen and (min-width:701px) { .top-koukoku { padding-top: 48px; padding-bottom: 48px; row-gap: 24px; } .top-koukoku__title { font-size: 24px; } .top-koukoku__inner { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 auto; max-width: 1200px; -moz-column-gap: 24px; column-gap: 24px; } } @media screen and (max-width:700px) { .top-koukoku { padding: 24px 8px; row-gap: 16px; } .top-koukoku__title { font-size: 18px; } .top-koukoku__inner { display: flex; flex-direction: column; margin: 0 auto; max-width: 1200px; gap: 8px; width: 100%; } .top-koukoku__image { width: 100%; } }/*# sourceMappingURL=renewal.css.map */