@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap"); @import url("https://use.typekit.net/zkq4xib.css"); /*** The new CSS reset - version 1.11.2 (last updated 15.11.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, input, textarea):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { 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; box-sizing: border-box; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { /* font-size: 62.5%; */ } body { overflow-x: hidden; font-family: "Noto Serif JP", sans-serif; font-size: clamp(1.4rem, 0.9870967742rem + 0.5376344086vw, 1.6rem); font-size: clamp(1.4rem, 0.9870967742rem + 0.5376344086vw, 1.6rem); line-height: 2; font-weight: 500; margin: 0; color: #666666; } @media screen and (max-width: 750px) { body { font-size: 1.6rem; } } @media screen and (max-width: 750px) { body { font-size: 1.6rem; } } .en { font-family: "Roboto", sans-serif; } .en-b { font-family: "bree", sans-serif; } a { transition: all 0.3s ease; } a img { transition: all 0.3s ease; } a:hover img { opacity: 0.8; } .ly_container { position: relative; } .inview { opacity: 0; } .inviewwrap { position: absolute; top: 0; width: 100%; height: 100%; } .inview.active { animation: fadeInup 1s ease-out; animation-fill-mode: forwards; } .inview.noanimation { opacity: 1; animation: none; } .inview.active.left { animation: fadeInLeft 1s ease-out; animation-fill-mode: forwards; } .inview.fade.active { animation: fadeIn 1s ease-out; animation-fill-mode: forwards; } .inview.clip { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); transition: -webkit-clip-path 0.4s ease-in; transition: clip-path 0.4s ease-in; transition: clip-path 0.4s ease-in, -webkit-clip-path 0.4s ease-in; transition-delay: 0.3s; opacity: 1; } .inview.active.clip { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); animation: none; } .inview.clip.delay01 { transition-delay: 0.6s; } .inview.clip.delay02 { transition-delay: 0.9s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInup { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes fadeInLeft { 0% { transform: translateX(-50px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } .delay01 { animation-delay: 0.3s !important; } .delay02 { animation-delay: 0.6s !important; } .delay03 { animation-delay: 0.9s !important; } ._spShowImportant { display: none !important; } @media screen and (max-width: 767px) { .inviewwrap { position: static; } ._pcShowImportant { display: none !important; } ._spShowImportant { display: block !important; } } .slick-dots { position: absolute; bottom: -35px; right: 0; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: right; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background-color: #BFBFBF; } .slick-dots li.slick-active button:before { background-color: #133BA3; } .slash-title { display: inline-block; padding: 10px 50px 10px 20px; font-size: clamp(1.4rem, 0.9870967742rem + 0.5376344086vw, 1.6rem); font-size: clamp(1.4rem, 0.9870967742rem + 0.5376344086vw, 1.6rem); font-weight: bold; color: #fff; -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 33px) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 33px) 100%, 0 100%); background: linear-gradient(90deg, #133BA3 0%, #3865DB 100%); } @media screen and (max-width: 750px) { .slash-title { font-size: 1.6rem; } } @media screen and (max-width: 750px) { .slash-title { font-size: 1.6rem; } } .inner { max-width: calc(1140px + 6%); margin: auto; padding: 0 3%; } a.zoom { display: block; position: relative; overflow: hidden; } a.zoom img { transform-origin: center; } a.zoom:hover img { transform: scale(1.1); opacity: 1; } .sp { display: none !important; } @media screen and (max-width: 750px) { .pc { display: none !important; } .sp { display: block !important; } } footer { max-width: 450px; margin: auto; background-color: #fff; padding: 2rem 0; } @media screen and (max-width: 750px) { footer { max-width: none; } } footer .logo { text-align: center; padding: 20px 0; } footer .logo img { width: 45%; } footer .menu { display: flex; padding: 0 5%; margin-bottom: 3rem; } footer .menu ul { width: 50%; border-left: 1px solid #666; padding-left: 10px; } footer .menu ul li { margin-bottom: 1rem; } footer .menu ul li a { display: block; font-size: 1.4rem; line-height: 1.5; } footer .address { text-align: center; font-size: 1.5rem; } /* モバイルメニューボタン */ #mobile-menu-button { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(25deg, rgba(99,170,173,1) 0%, rgba(115,217,219,1) 100%); opacity: 0.8;; /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); */ z-index: 1000; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color 0.3s; } #mobile-menu-button:hover { background: linear-gradient(25deg, rgba(99,170,173,1) 0%, rgba(115,217,219,1) 100%); } .menu-icon { width: 30px; height: 22px; position: relative; } .menu-icon span { display: block; position: absolute; height: 3px; width: 100%; background: white; border-radius: 3px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; } .menu-icon span:nth-child(1) { top: 0px; } .menu-icon span:nth-child(2) { top: 9px; } .menu-icon span:nth-child(3) { top: 18px; } /* モバイルメニューオーバーレイ */ #mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1001; display: none; } /* モバイルメニューパネル */ #mobile-menu-panel { position: fixed; top: 0; right: -300px; /* 初期状態では画面外に配置 */ width: 280px; height: 100%; background-color: rgba(255, 255, 255, 0.9); z-index: 1002; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); transition: right 0.3s ease-out; display: flex; flex-direction: column; } .mobile-menu-header { padding: 30px 15px 15px; display: flex ; justify-content: center; align-items: center; align-items: center; } .mobile-menu-header .logo { max-width: 150px; } .mobile-menu-header .logo img { width: 100%; height: auto; } /* 閉じるボタンを右下に固定配置 */ .close-button { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background-color: #ccc; /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); */ z-index: 1003; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 24px; color: white; transition: background-color 0.3s; display: none; /* 初期状態では非表示 */ } .mobile-menu-content { flex: 1; overflow-y: auto; padding: 15px 0; } .mobile-menu-content ul { list-style: none; padding: 0 20px; margin: 0; } .mobile-menu-content ul li { padding: 0; margin: 0; } .mobile-menu-content ul li a { display: block; padding: 6px; color: #333; text-decoration: none; font-size: 16px; transition: background-color 0.2s; } .mobile-menu-content ul li a:hover { background-color: #f8f8f8; } .mobile-menu-footer { padding: 15px; border-top: 1px solid #eee; font-size: 12px; color: #666; text-align: center; } /* メニュー表示状態のスタイル */ body.menu-active #mobile-menu-overlay { display: block; } body.menu-active #mobile-menu-panel { right: 0; } /* メニュー表示時はハンバーガーメニューを非表示に */ body.menu-active #mobile-menu-button { display: none; } /* メニュー表示時に閉じるボタンを表示 */ body.menu-active .close-button { display: flex; } /* モバイルでのみ表示 */ /* @media (min-width: 769px) { #mobile-menu-button, #mobile-menu-overlay, #mobile-menu-panel { display: none; } } */