@charset "utf-8"; /* CSS Document */ /* ======================================================== 　Global Setting =========================================================== */ *, *::before, *::after { box-sizing: border-box; } :root { scroll-behavior: smooth; } /*　ページ内でテキスト等を選択したときの背景色 ----------------------------------------------------------- */ *::selection { background-color: rgba(210, 210, 210, 0.50); } /*　プレイスホルダー ----------------------------------------------------------- */ *::placeholder { opacity: 0.8; transition: 0.3s } /*　フォーカス時にプレースホルダーを擬似的に非表示にする */ *:focus::placeholder { opacity: 0; } /* ======================================================== 　 / =========================================================== */ html { font-size: 62.5%; /* 1.0rem = 10px */ text-size-adjust: 100%; -webkit-tap-highlight-color: var(--black-color); } body { width: 100vw; background-color: var(--background-color); color: var(--text-color); font: normal 300 1.6rem / 160% var(--default-font); overflow-x: hidden; /* フッターをページ下部に移動させるためのコード */ display: flex; flex-direction: column; min-height: 100vh; } #bottoms { margin-top: auto; } @media all and (min-width: 1200px) { /* モーダルウインドウ表示時のズレを防ぐ */ body, header, main, footer { width: calc(100vw - 0.8rem); } } /*　カスタムスクロールバー ----------------------------------------------------------- */ body::-webkit-scrollbar { width: 0.8rem; } body::-webkit-scrollbar-track { border-radius: 0.5rem; background-color: var(--gray-color-05); } body::-webkit-scrollbar-thumb { border-radius: 0.5rem; background-color: var(--surface-color); } /* ======================================================== 　Anchor Color =========================================================== */ a, a:visited { color: var(--accent-color); outline: none; text-decoration: none; transition: 0.3s } a:hover, a:focus { color: var(--orange-color); } a[href*="tel:"] { color: var(--text-color); } /* スマホ以外で電話番号の発信をオフ */ @media (min-width: 576px) { a[href*="tel:"] { pointer-events: none; } } /* ======================================================== 　Typography =========================================================== */ h1, h2, h3, h4, h5, p, li, dt, dd, span, aside, a { margin: 0; padding: 0; line-height: 1; } em { font-style: normal; } ul { margin: 0; padding: 0; list-style: none; } strong { font-weight: 500; } main .section p, main .section li, main .section dd { line-height: 180%; } .lead { color: var(--text-color); font-size: 1.6rem; font-weight: 400; } .heading { position: relative; color: var(--black-color); font-family: var(--serif-font); text-align: center; z-index: 4; } .heading h1, .heading h2 { position: relative; margin-bottom: min(5.0vw, 5.0rem); font-size: min(8.0vw, 2.4rem); font-weight: 400; } .heading h3 { font-size: 1.6rem; font-weight: 500; letter-spacing: 0.1rem; } /* 見出しのボーダーライン */ .home .heading h2::before, .home .heading h2::after { position: absolute; width: min(70%, 75.0rem); height: 0.1rem; background-color: rgba(112, 128, 144, 0.30); content: ""; } /* 見出しのボーダーライン・上 */ .home .heading h2::before { inset: auto auto -2.7vw calc(15.0% + 1.0rem); } /* 見出しのボーダーライン・下 */ .home .heading h2::after { inset: auto calc(15.0% + 1.0rem) calc(-2.7vw - 0.2rem) auto; } @media (min-width: 768px) { .heading h1, .heading h2 { font-size: min(3.6vw, 3.6rem); } .home .heading h2::before, .home .heading h2::after { width: 50.0%; } .home .heading h2::before { inset: auto auto min(-2.5vw, 2.5rem) calc(25.0% + 2.5rem); } .home .heading h2::after { inset: auto calc(25.0% + 2.5rem) calc(min(-2.5vw, 2.5rem) - 0.3rem) auto; } } @media (min-width: 992px) { .home .heading h2 { margin-bottom: 5.0rem; } .home .heading h2::before { bottom: -2.4rem; } .home .heading h2::after { bottom: calc(-2.4rem - 0.3rem); } } /* ======================================================== 　

/ Global Header =========================================================== */ #header { display: flex; align-items: center; height: 8.0rem; padding-left: 1.0vw; background-color: rgba(255, 255, 255, 0.50); transition: 0.5s; z-index: 997; } #header .container-fluid { display: flex; align-items: center; justify-content: space-between; position: relative; } /* ロゴ */ #header .container-fluid > a { width: min(75.0vw, 37.4rem); transition: 0.5s; } #header .container-fluid > a img { width: 100%; height: auto; transition: 0.5s; } /* スクロール時 */ .scrolled #header { background-color: rgba(255, 255, 255, 0.70); backdrop-filter: blur(0.5rem); } /* 言語切り替え */ #header + .language { position: fixed; inset: 8.0rem auto auto 0; transition: 0.3s; z-index: 999; } #header + .language a { display: flex; align-items: center; padding: 1.0rem 1.5rem; border-radius: 0 2.0rem 2.0rem 0; background-color: rgba(255, 255, 255, 1.00); font-weight: 700; } #header + .language img { width: auto; height: 1.6rem; margin-right: 0.5rem; border: 0.1rem solid var(--gray-color-05); } @media (min-width: 576px) { #header { height: 9.0rem; } #header + .language { top: 9.0rem; } } @media (min-width: 768px) { #header { height: 10.0rem; padding-left: 2.0rem; } #header + .language { top: 10.0rem; } } @media (min-width: 992px) { #header { padding-left: 5.0rem; } .scrolled #header { height: 7.0rem; /* スクロール時ヘッダー高さ縮小 */ } .scrolled #header .container-fluid > a { width: min(75.0vw, 30.0rem); /* スクロール時ロゴ領域縮小 */ } .scrolled #header .container-fluid > a img { width: min(100%, 30.0rem); /* スクロール時ロゴ画像縮小 */ } #header .container-fluid > a:hover { opacity: 0.7; } .scrolled #header + .language { top: 7.0rem; } #header + .language a:hover { background-color: rgba(255, 240, 0, 1.00); } } /*　nav ----------------------------------------------------------- */ /* ハンバーガートグル */ .toggle { color: var(--black-color); font-size: min(15.0vw, 6.0rem); cursor: pointer; z-index: 998; } .toggle-active { overflow: hidden; /* これによりメニューオープン時の背景スクロールを停止 */ } .toggle-active .toggle, .toggle-active .toggle:hover { position: relative; top: -0.3rem; color: var(--corp-color); z-index: 999; } /* ナビゲーション領域 */ #navmenu { display: flex; clip-path: circle(0% at calc(100% - 4.4rem) 4.4rem); transition: clip-path 1.0s cubic-bezier(0.4, 0, 0.2, 1); z-index: 997; /* 背景画像 */ background-position: center bottom !important; background-size: cover !important; background-repeat: no-repeat !important; } #navmenu > img { display: none; /* ナビゲーション画面右側の装飾画像を非表示 */ } /* ナビゲーションオープン　アニメーション */ .toggle-active #navmenu { position: fixed; inset: 0; height: 100vh; overflow: hidden; clip-path: circle(150% at calc(100% - 4.4rem) 4.4rem); animation: navBg 0s forwards; } /* 背景画像の前面レイヤー */ .toggle-active #navmenu::after { position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.80); content: ""; } /* トグルアクティブでメニュー領域表示 */ .toggle-active #navmenu > ul { display: block; } /* メニューリスト */ #navmenu ul { display: none; width: 100%; padding: 6.0rem min(10.0vw, 5.0rem); overflow-y: auto; z-index: 998; } #navmenu li:nth-of-type(n+2) { margin-top: min(10.0vw, 5.0rem); /* ２件目以降の上余白 */ } /* アンカー設定 */ #navmenu li:nth-last-of-type(n+2) a, #navmenu li:nth-last-of-type(n+2) a:visited { display: inline-flex; flex-direction: column; position: relative; padding: min(0.5vw, 0.5rem) min(2.0vw, 1.0rem); color: var(--text-color); font-family: var(--serif-font); font-size: min(6.0vw, 2.4rem); font-weight: 700; } /* カレントページの処理 */ #navmenu li:nth-last-of-type(n+2).current-menu-item a { color: var(--purple-color); } /* SNSボタン */ #navmenu li:last-of-type { display: flex; align-items: center; justify-content: flex-start; margin-top: 5.0rem; margin-bottom: 5.0rem; /* スマホ時のスクロール調整のため必須 */ } /* アンカー設定 */ #navmenu li:last-of-type a { margin: 0 1.5rem; color: var(--black-color); font-size: min(10.0vw, 3.6rem); transition: 0.3s; } @media (min-width: 768px) { .toggle { margin-right: 2.0rem; } .toggle-active #navmenu { background-size: contain !important; } #navmenu ul { padding: 10.0rem min(10.0vw, 10.0rem); } #navmenu li:nth-of-type(n+2) { margin-top: min(3.0vw, 3.0rem); } #navmenu li:last-of-type { margin-bottom: 0; } } @media (min-width: 992px) { .toggle { margin-right: 5.0rem; } .toggle:hover { color: var(--orange-color-org); /* マウスオーバー時 */ } .toggle-active #navmenu { align-items: center; justify-content: flex-end; background-position: left bottom !important; } .toggle-active #navmenu::after { background-color: rgba(255, 255, 255, 0.50); } #navmenu ul { width: 50%; } #navmenu li:nth-last-of-type(n+2) a, #navmenu li:nth-last-of-type(n+2) a:visited { font-weight: 500; } /* マウスオーバー設定 */ #navmenu li:nth-last-of-type(n+2) a:hover { color: var(--surface-color); transform: translateX(-1.0rem); } #navmenu li:last-of-type { justify-content: flex-end; } #navmenu li:last-of-type a:hover { transform: scale(1.1); color: rgba(0, 0, 0, 0.70); } } @media (min-width: 1200px) { .toggle-active #navmenu > img { display: block; /* ナビゲーション画面右側の装飾画像を表示 */ position: absolute; inset: auto 0 0 auto; height: 100%; z-index: -1; } #navmenu li:nth-last-of-type(n+2) a, #navmenu li:nth-last-of-type(n+2) a:visited { font-size: min(2.4vw, 3.0rem); } } @media (width: 1366px) and (height: 1366px) { #navmenu > img { display: none !important; } .toggle-active #navmenu::after { background-color: rgba(255, 255, 255, 0.80); } } @media (min-width: 1900px) { #navmenu li:nth-of-type(n+2) { margin-top: min(3.4vw, 3.4rem); } #navmenu li:last-of-type { margin-top: 8.0rem; } } /* ======================================================== 　

=========================================================== */ .section { padding: min(16.0vw, 8.0rem) 0; scroll-margin-top: 8.0rem; overflow: clip; } /* more */ .more { position: relative; /* z-indexを有効にするため */ margin-top: min(4.0vw, 2.0rem); text-align: right; z-index: 99; } .more a { display: inline-flex; align-items: baseline; color: var(--black-color); font-size: min(4.8vw, 1.8rem); font-weight: 400; } .more a img { margin-left: 1.0rem; transition: 0.3s; } @media (min-width: 576px) { .section { scroll-margin-top: 9.0rem; } } @media (min-width: 768px) { .section { scroll-margin-top: 10.0rem; } } @media (min-width: 992px) { .section { scroll-margin-top: 7.0rem; } /* マウスオーバー設定 */ .more a:hover { color: var(--orange-color); } .more a:hover img { transform: translateX(0.75rem); } } @media (min-width: 1200px) { .section { padding: min(20.0vw, 10.0rem) 0; } } /* ======================================================== 　Contact =========================================================== */ #bottoms #contact { position: relative; padding-top: min(15.0vw, 15.0rem); color: var(--white-color); } /* 見出し、リード文領域 */ #bottoms #contact > div:first-of-type { padding: min(10.0vw, 10.0rem) min(5.0vw, 5.0rem); background-color: var(--surface-color); } /* 見出し */ #bottoms #contact .heading { color: var(--white-color); text-align: center; } #bottoms #contact .heading > img { display: none; /* スマホ時は矢印を非表示 */ } /* リード文 */ #bottoms #contact p { margin-top: min(10.0vw, 10.0rem); font-size: min(5.0vw, 1.6rem); line-height: 145%; } /* リンクボタン領域 */ #bottoms #contact > div:last-of-type { padding: 0; } /* アンカー設定 */ #bottoms #contact a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; background-color: rgba(119, 136, 153, 1.00); padding: min(10.0vw, 10.0rem) min(5.0vw, 5.0rem); border: 0.1rem solid var(--white-color); color: var(--white-color); } /* メールアイコン */ #bottoms #contact i { font-size: min(20.0vw, 10.0rem); margin-bottom: 0.5rem; } @media (min-width: 768px) { #bottoms #contact { height: calc(33.33333vw + min(15.0vw, 15.0rem)); /* 高さ確保 */ } #bottoms #contact > div { position: absolute; /* ブロックの相対配置 */ } #bottoms #contact > div:first-of-type { display: flex; align-items: center; justify-content: flex-start; inset: auto auto 0 0; width: min(84.0vw, 160.0rem); height: min(26.0vw, 49.0rem); padding: 0; } #bottoms #contact .heading { order: 2; position: relative; top: -1.0rem; padding-left: min(7.0vw, 7.0rem); } #bottoms #contact .heading > img { display: block; /* 矢印を表示 */ position: absolute; inset: 50% auto auto 0; width: 46.3vw; z-index: 1; } #bottoms #contact p { order: 1; width: min(44.375%, 66.0rem); margin-top: 0; padding: 0 min(5.0vw, 5.0rem) 0 min(3.0vw, 10.0rem); font-size: min(1.8vw, 2.0rem); } #bottoms #contact > div:last-of-type { inset: min(15.0vw, 15.0rem) 0 auto auto; } #bottoms #contact a { width: min(23.0vw, 44.0rem); height: min(23.0vw, 44.0rem); padding: 0; } #bottoms #contact i { font-size: min(5.0vw, 10.0rem); } } @media (min-width: 992px) { #bottoms #contact a { border: 0.1rem solid transparent; } #bottoms #contact a:hover { border: 0.1rem solid var(--white-color); background-color: var(--gray-color-02); } } @media (min-width: 1200px) { #bottoms #contact .heading { top: -2.0rem; } #bottoms #contact p { padding-left: min(10.0vw, 10.0rem); } } @media (min-width: 1900px) { #bottoms #contact > div:first-of-type { width: 84.0vw; height: 26.0vw; } #bottoms #contact .heading > img { width: 49.5vw; } #bottoms #contact a { width: 23.0vw; height: 23.0vw; } } @media (min-width: 2048px) { #bottoms #contact .heading { top: -2.2rem; } #bottoms #contact .heading > img { width: 51.5vw; } } @media (min-width: 2560px) { #bottoms #contact .heading { top: -2.6rem; } #bottoms #contact .heading > img { width: 58.0vw; } } /* ======================================================== 　