@charset "UTF-8"; /* Template: swell Theme Name: SWELL CHILD Theme URI: https://swell-theme.com/ Description: SWELLの子テーマ Version: 1.0.0 Author: LOOS WEB STUDIO Author URI: https://loos-web-studio.com/ License: GNU General Public License License URI: http://www.gnu.org/licenses/gpl.html */ /* emdi コーポレートサイト ヘッダー → Swell 子テーマ用 CSS _header.scss をプレーンCSS（px単位）に変換 ※ 元サイトは html { font-size: 62.5% } のため 1rem = 10px として換算 */ /* Swellデフォルトヘッダーを非表示 */ #l-header, .l-header, .l-header__inner { display: none !important; } /* ======================================== 依存フォント（に追加してください） ======================================== */ .material-symbols-sharp { font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24; } /* ======================================== ヘッダー本体 ======================================== */ .header { border-bottom: 1px solid #ECEEF5; background-color: #FFF; height: 75px; display: flex; align-items: center; z-index: 10; position: sticky; top: 0; transition: all 1s ease; } /* TOPページで背景を透明にするクラス */ .header.visible { background: rgba(255, 255, 255, 0); border-bottom: 1px solid rgba(236, 238, 245, 0); } @media only screen and (max-width: 768px) { .header { overflow: hidden; height: 68px; } } /* ---------------------------------------- headerContents（横並びコンテナ） ---------------------------------------- */ .headerContents { width: 100%; padding-inline: 24px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; column-gap: 0; } @media only screen and (max-width: 768px) { .headerContents { padding-inline: 16px; } } /* ---------------------------------------- ロゴ ---------------------------------------- */ .header__logo a { display: inline-block; } .header__logo img { min-width: 108px; max-width: 108px; height: auto; } @media only screen and (max-width: 768px) { .header__logo img { max-width: 94px; min-width: 94px; } } /* ---------------------------------------- ナビゲーション ラッパー（PC表示） ---------------------------------------- */ .headerWrap { display: flex; align-items: center; gap: 24px; width: 100%; justify-content: space-between; } @media only screen and (max-width: 850px) { .headerWrap { gap: 12px; } } @media only screen and (max-width: 768px) { .headerWrap { display: none; } } .header__nav { width: 100%; } .header__navList { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; gap: 24px; justify-content: flex-end; } @media only screen and (max-width: 850px) { .header__navList { gap: 12px; } } /* ---------------------------------------- ナビゲーション アイテム ---------------------------------------- */ .headerNavListItem { position: relative; width: max-content; } /* アクティブ時：ドロップダウンを表示 */ .headerNavListItem.active .headerNavListItem__textInnerWrap { opacity: 1; visibility: visible; } .headerNavListItem.active .headerNavListItem__text--accordion { color: #4B63C1; } .headerNavListItem.active .headerNavListItem__text--accordion::after { transform: scaleX(1); } /* ホバー時 */ .headerNavListItem:hover .headerNavListItem__text--accordion { color: #4B63C1; } .headerNavListItem:hover .headerNavListItem__text--accordion::after { transform: scaleX(1); } /* ---------------------------------------- ナビゲーション テキスト共通スタイル (%headerNavListItem__text の展開) ---------------------------------------- */ .headerNavListItem__text--accordion, .headerNavListItem__text--link { text-decoration: none; font-size: 14px; font-weight: 300; letter-spacing: 0.03em; line-height: 1.6; transition: all 0.3s ease-in-out; position: relative; display: inline-flex; height: 22px; color: inherit; } @media only screen and (max-width: 768px) { .headerNavListItem__text--accordion, .headerNavListItem__text--link { font-size: 13px; } } /* ホバーアンダーライン */ .headerNavListItem__text--accordion::after, .headerNavListItem__text--link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background-color: #4B63C1; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-in-out; } /* アコーディオン（ドロップダウンあり） */ .headerNavListItem__text--accordion { cursor: pointer; z-index: 1; align-items: center; gap: 2px; } .headerNavListItem__text--accordion .material-symbols-sharp { padding-bottom: 2px; display: flex; justify-content: center; align-items: center; } /* リンク（ドロップダウンなし） */ .headerNavListItem__text--link:hover { color: #4B63C1; } .headerNavListItem__text--link:hover::after { transform: scaleX(1); } /* ---------------------------------------- ドロップダウン メニュー ---------------------------------------- */ .headerNavListItem__textInnerWrap { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transition: all 0.3s ease-out; } .headerNavListItem__textInner { background-color: #FFF; margin-top: calc(55px + 5px); padding: 20px; display: flex; flex-direction: column; align-items: flex-start; width: max-content; border: 1px solid #ECEEF5; list-style: none; gap: 16px; margin-left: 0; padding-left: 20px; } .headerNavListItem__textInner li { position: relative; width: 100%; } .headerNavListItem__textInner li a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; justify-content: space-between; font-size: 14px; font-weight: 300; letter-spacing: 0.03em; line-height: 1.6; transition: all 0.3s ease-in-out; position: relative; min-height: 22px; width: 100%; color: inherit; } @media only screen and (max-width: 768px) { .headerNavListItem__textInner li a { font-size: 13px; } } /* 矢印アイコン（通常リンク） */ .headerNavListItem__textInner li a::after { font-family: 'Material Symbols Sharp'; content: "arrow_right_alt"; font-size: 16px; line-height: 1; font-weight: 200; } /* 別タブアイコン */ .headerNavListItem__textInner li a[target="_blank"] { width: auto; } .headerNavListItem__textInner li a[target="_blank"]::after { min-width: 20px; max-width: 20px; min-height: 20px; max-height: 20px; background-image: url("img/common/icon_tab.svg"); background-size: 12px 12px; background-repeat: no-repeat; margin-bottom: 3px; content: ""; display: inline-block; padding: 4px; background-position: center; } /* ホバー アンダーライン */ .headerNavListItem__textInner li a::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background-color: #4B63C1; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-in-out; } .headerNavListItem__textInner li a:hover { color: #4B63C1; } .headerNavListItem__textInner li a:hover::before { transform: scaleX(1); } /* ---------------------------------------- お問い合わせ ボタン ---------------------------------------- */ .header__button { background-color: #0A1645; padding: 11px 24px; text-decoration: none; height: 44px; width: 135px; min-width: 135px; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; } @media only screen and (max-width: 850px) { .header__button { padding: 11px 12px; width: 111px; min-width: 111px; } } .header__button:hover .header__buttonBackground { transform: translate(0, 0); } /* ホバー時の背景スライドアニメーション */ .header__buttonBackground { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #1C3082; transform: translate(-100%, 0); transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s; } .header__buttonText { color: #FFF; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.6; display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 768px) { .header__buttonText { font-size: 13px; } } /* ======================================== ハンバーガーメニュー（SP） ======================================== */ .header__hamburger { display: none; } @media only screen and (max-width: 768px) { .header__hamburger { display: block; } } /* アイコン ラッパー */ .header__hamburgerIconWrap { aspect-ratio: 1 / 1; width: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .header__hamburgerIcon--menu { max-width: 40px; display: block; } .header__hamburgerIcon--close { max-width: 40px; display: none; } /* アクティブ時：メニュー↔クローズ の切り替え */ .header__hamburgerIconWrap.active .header__hamburgerIcon--menu { display: none; } .header__hamburgerIconWrap.active .header__hamburgerIcon--close { display: block; } /* ---------------------------------------- ハンバーガー メニュー オーバーレイ ---------------------------------------- */ .header__hamburgerMenuWrap { opacity: 0; pointer-events: none; } .header__hamburgerMenuWrap.active { opacity: 1; pointer-events: auto; width: 100%; min-width: 375px; height: calc(100% - 68px); overflow: auto; background-color: rgba(0, 0, 0, 0.4); position: fixed; left: 0; top: 68px; z-index: 9999; } /* ---------------------------------------- ハンバーガー メニュー パネル ---------------------------------------- */ .header__hamburgerMenu { margin: auto; display: flex; flex-direction: column; width: 100%; height: auto; top: 0; right: 0; position: absolute; text-align: right; background-color: #FFF; opacity: 0; transform: translateX(100%); transition: opacity 0.5s ease, transform 0.5s ease; } .header__hamburgerMenu ul { list-style: none; padding: 0; margin: 0; } .header__hamburgerMenuWrap.active .header__hamburgerMenu { opacity: 1; transform: translateX(0); } .header__hamburgerMenuClose { display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; padding-inline: 20px; padding-bottom: 12px; text-align: right; } /* ---------------------------------------- ハンバーガー メニュー リスト ---------------------------------------- */ .header__hamburgerMenuList { list-style: none; padding: 0; margin: 0; border-top: 1px solid #DCE1F1; text-align: left; } /* 第1階層 */ .header__hamburgerMenuListItem > span, .header__hamburgerMenuListItem > a { width: 100%; display: inline-flex; justify-content: space-between; align-items: center; padding: 16px 32px; color: #0A1645; font-size: 17px; font-weight: 300; letter-spacing: 0.03em; line-height: 1.6; border-bottom: 1px solid #DCE1F1; text-decoration: none; box-sizing: border-box; } @media only screen and (max-width: 768px) { .header__hamburgerMenuListItem > span, .header__hamburgerMenuListItem > a { font-size: 16px; } } /* 矢印アイコン（リンクのみ） */ .header__hamburgerMenuListItem > a::after { font-family: 'Material Symbols Sharp'; content: "arrow_right_alt"; margin-left: 16px; font-size: 16px; line-height: 1; font-weight: 200; } /* 別タブアイコン */ .header__hamburgerMenuListItem > a[target="_blank"]::after { min-width: 20px; max-width: 20px; min-height: 20px; max-height: 20px; background-image: url("img/common/icon_tab.svg"); background-size: 12px 12px; background-repeat: no-repeat; margin-bottom: 3px; content: ""; display: inline-block; padding: 4px; background-position: center; } /* 第2階層（インナーアイテム） */ .header__hamburgerMenuListItem--inner > span, .header__hamburgerMenuListItem--inner > a { width: 100%; display: inline-flex; justify-content: space-between; align-items: center; padding: 16px 32px 16px 56px; color: #0A1645; font-size: 17px; font-weight: 300; letter-spacing: 0.03em; line-height: 1.6; border-bottom: 1px solid #DCE1F1; text-decoration: none; box-sizing: border-box; } @media only screen and (max-width: 768px) { .header__hamburgerMenuListItem--inner > span, .header__hamburgerMenuListItem--inner > a { font-size: 16px; } } .header__hamburgerMenuListItem--inner > a::after { font-family: 'Material Symbols Sharp'; content: "arrow_right_alt"; margin-left: 16px; font-size: 16px; line-height: 1; font-weight: 200; } .header__hamburgerMenuListItem--inner > a[target="_blank"]::after { min-width: 20px; max-width: 20px; min-height: 20px; max-height: 20px; background-image: url("img/common/icon_tab.svg"); background-size: 12px 12px; background-repeat: no-repeat; margin-bottom: 3px; content: ""; display: inline-block; padding: 4px; background-position: center; } /* ---------------------------------------- ハンバーガー お問い合わせボタン ---------------------------------------- */ .header__hamburgerMenuButtonContent { text-align: center; padding-block: 32px; } .header__hamburgerMenuButtonContent a { width: 100%; max-width: 283px; display: inline-block; text-decoration: none; padding: 11px 24px; background-color: #0A1645; color: #FFF; font-size: 17px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.6; text-align: center; } @media only screen and (max-width: 768px) { .header__hamburgerMenuButtonContent a { font-size: 16px; } } /* ======================================== フッター ======================================== */ /* Swellデフォルトフッターを非表示 */ #footer > .l-footer__inner, #footer > *:not(.footer) { display: none !important; } .footer { background-color: #FFF; padding-bottom: 65px; } @media only screen and (max-width: 768px) { .footer { padding-bottom: 0; } } .footerWrap { max-width: 1280px; width: 100%; margin-inline: auto; display: flex; gap: 16px; padding-inline: 40px; align-items: flex-start; padding-block: 72px 68px; justify-content: space-between; } @media only screen and (max-width: 768px) { .footerWrap { flex-direction: column; max-width: 100%; padding-inline: 0 !important; padding-block: 0; gap: 0; } } @media only screen and (max-width: 375px) { .footerWrap { min-width: 375px; max-width: 375px; } } .footerInfomation { /* デスクトップ：特別なスタイルなし */ } @media only screen and (max-width: 768px) { .footerInfomation { background-color: #F6F7FA; padding-inline: 40px; padding-block: 40px 24px; border-right: 0; width: 100%; box-sizing: border-box; } } @media only screen and (max-width: 375px) { .footerInfomation { padding-inline: 16px; } } .footer__border { background-color: rgba(85, 96, 140, 0.4); width: 1px; min-height: 202px; } @media only screen and (max-width: 768px) { .footer__border { display: none; } } .footer__logo { width: 113px; height: auto; } @media only screen and (max-width: 768px) { .footer__logo { width: 71px; } } .footerInfomation__text { margin-top: 20px; font-size: 14px; font-weight: 300; letter-spacing: 0.03em; line-height: 1.5; } .footerInfomation__text + .footerInfomation__text { margin-top: 8px; } @media only screen and (max-width: 768px) { .footerInfomation__text { font-size: 14px; margin-top: 15px; } } .footerInfomation__textBr { display: inline; } @media only screen and (max-width: 768px) { .footerInfomation__textBr { display: none; } } .footerContentsWrap { display: grid; grid-template-columns: repeat(5, minmax(90px, 140px)); gap: 16px; justify-content: space-between; max-width: 892px; width: 100%; } @media only screen and (max-width: 768px) { .footerContentsWrap { grid-template-columns: 1fr; gap: 0; width: 100%; } } .footer__contents { width: 100%; } /* フッター タイトル（テキスト） */ p.footer__contentsTitle { font-size: 14px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.6; color: inherit; } @media only screen and (max-width: 768px) { p.footer__contentsTitle { width: 100%; display: inline-flex; justify-content: space-between; align-items: center; padding: 16px 32px; color: #0A1645; font-size: 17px; font-weight: 300; border-bottom: 1px solid #DCE1F1; box-sizing: border-box; } } /* フッター タイトル（リンク） */ a.footer__contentsTitle { font-size: 14px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.6; text-decoration: none; transition: all 0.3s ease-in-out; position: relative; display: inline-block; color: inherit; } a.footer__contentsTitle::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background-color: #4B63C1; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-in-out; } a.footer__contentsTitle:hover { color: #4B63C1; } a.footer__contentsTitle:hover::before { transform: scaleX(1); } @media only screen and (max-width: 768px) { a.footer__contentsTitle { width: 100%; display: inline-flex; justify-content: space-between; align-items: center; padding: 16px 32px; color: #0A1645; font-size: 17px; font-weight: 300; border-bottom: 1px solid #DCE1F1; box-sizing: border-box; } a.footer__contentsTitle::after { font-family: 'Material Symbols Sharp'; content: "arrow_right_alt"; margin-left: 16px; font-size: 20px; line-height: 1; font-weight: 200; } } .footer__contentsList { margin-top: 10px; list-style: none; padding: 0; } @media only screen and (max-width: 768px) { .footer__contentsList { margin-top: 0; } } .footerContentsListItem { font-size: 14px; line-height: 1.6; font-weight: 300; } .footerContentsListItem + .footerContentsListItem { margin-top: 10px; } @media only screen and (max-width: 768px) { .footerContentsListItem + .footerContentsListItem { margin-top: 0; } } .footerContentsListItem a { text-decoration: none; display: inline-flex; align-items: center; position: relative; color: inherit; } .footerContentsListItem a::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background-color: #4B63C1; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-in-out; } .footerContentsListItem a:hover { color: #4B63C1; } .footerContentsListItem a:hover::before { transform: scaleX(1); } /* 外部リンクアイコン（デスクトップ） */ .footerContentsListItem a[target="_blank"]::after { min-width: 12px; max-width: 12px; min-height: 12px; max-height: 12px; background-image: url("img/common/icon_tab.svg"); background-size: contain; background-repeat: no-repeat; margin-left: 4px; content: ""; display: inline-block; } @media only screen and (max-width: 768px) { .footerContentsListItem a { width: 100%; display: inline-flex; justify-content: space-between; align-items: center; padding: 16px 32px 16px 56px; color: #0A1645; font-size: 17px; font-weight: 300; letter-spacing: 0.03em; line-height: 1.6; border-bottom: 1px solid #DCE1F1; text-decoration: none; box-sizing: border-box; } /* SP：矢印アイコン（通常リンク） */ .footerContentsListItem a::after { font-family: 'Material Symbols Sharp'; content: "arrow_right_alt"; margin-left: 16px; font-size: 20px; line-height: 1; font-weight: 200; } /* SP：外部リンクアイコン（arrow を上書き） */ .footerContentsListItem a[target="_blank"]::after { min-width: 16px; max-width: 16px; min-height: 16px; max-height: 16px; background-image: url("img/common/icon_tab.svg"); background-size: contain; background-repeat: no-repeat; margin-left: 0; content: ""; display: inline-block; } } .footerContentsListItem .footer__contentsTitle { margin-top: 18px; } @media only screen and (max-width: 768px) { .footerContentsListItem .footer__contentsTitle { margin-top: 0; padding-left: 32px; } } /* ---------------------------------------- コピーライト ---------------------------------------- */ .footerCopy { max-width: 1440px; margin-inline: auto; padding-inline: 24px; display: flex; align-items: center; justify-content: flex-end; font-size: 13px; line-height: 1.6; font-weight: 300; letter-spacing: 0.03em; color: rgba(85, 96, 140, 1); } @media only screen and (max-width: 768px) { .footerCopy { display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr 1fr; justify-content: center; align-items: center; padding-block: 24px; background-color: #F6F7FA; row-gap: 32px; column-gap: 8px; padding-inline: 32px; } } .footerCopy__link { text-decoration: none; position: relative; color: rgba(85, 96, 140, 1); } .footerCopy__link + .footerCopy__link { margin-left: 24px; } .footerCopy__link::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background-color: rgba(85, 96, 140, 1); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-in-out; } .footerCopy__link:hover::before { transform: scaleX(1); } @media only screen and (max-width: 768px) { .footerCopy__link { text-align: center; display: inline-block; } .footerCopy__link + .footerCopy__link { margin-left: 0; } } .footerCopy__text { margin-left: 42px; color: rgba(85, 96, 140, 1); } @media only screen and (max-width: 768px) { .footerCopy__text { grid-column: 1 / 3; margin-left: 0; text-align: center; } }