@charset "utf-8"; /* Theme Name:hello-elementor（子テーマ） Template:hello-elementor Version:2.9.0 Author: 株式会社フォロアス Author URI: https://followus.jp/ Description: Hello Elementor（子テーマ） */ /*追加CSS*/ h1.entry-title{ display:none; } /*================================================= サイト共通のCSS（トップページ・下層ページ共通） ・読み込みは functions.php の tcs_enqueue_layout()（全ページ） ・下層ページのCSSは css/page.css、トップページ専用は css/top.css ・ページごとの範囲は header.php の で決まる （付けるクラスは functions.php の tcs_css_scopes()） ・COMMON・TOPICS のルールは :where(.css-◯◯) で範囲を絞っている :where() は詳細度0なので、範囲を付けても元のCSSと優先順位は変わらない ・LAYOUT（ヘッダー・フッター）は範囲なし（全ページ） 目次（並び順＝カスケード順） .css-common リセット・デザイントークン・共通パーツ（Elementorで作成したページ・記事ページ以外） .css-topics 新着情報のカード（トップページ・新着情報一覧 /topics/） layout 全ページ共通のヘッダー・フッター（範囲なし） =================================================*/ /*################################################# COMMON（旧 css/common.css） 範囲：.css-common　リセット・デザイントークン・共通パーツ（Elementorで作成したページ・記事ページ以外） #################################################*/ /* CSS Document ----------------------------- 2026.09.08 --------------------------------------------*/ /* ---------------------------------------------- * reset.css(Elementorで作成した所以外に反映) ---------------------------------------------- */ :where(.css-common) a,:where(.css-common) abbr,:where(.css-common) acronym,:where(.css-common) address,:where(.css-common) applet,:where(.css-common) section,:where(.css-common) aside,:where(.css-common) audio,:where(.css-common) big,:where(.css-common) blockquote,:where(.css-common) body,:where(.css-common) caption,:where(.css-common) canvas,:where(.css-common) center,:where(.css-common) cite,:where(.css-common) code,:where(.css-common) dd,:where(.css-common) del,:where(.css-common) details,:where(.css-common) dfn,:where(.css-common) dialog,:where(.css-common) div,:where(.css-common) dl,:where(.css-common) dt,:where(.css-common) em,:where(.css-common) embed,:where(.css-common) fieldset,:where(.css-common) figcaption,:where(.css-common) figure,:where(.css-common) form,:where(.css-common) footer,:where(.css-common) header,:where(.css-common) hgroup,:where(.css-common) h1,:where(.css-common) h2,:where(.css-common) h3,:where(.css-common) h4,:where(.css-common) h5,:where(.css-common) h6,html:where(.css-common),:where(.css-common) i,:where(.css-common) iframe,:where(.css-common) img,:where(.css-common) ins,:where(.css-common) kbd,:where(.css-common) label,:where(.css-common) legend,:where(.css-common) li,:where(.css-common) mark,:where(.css-common) menu,:where(.css-common) nav,:where(.css-common) object,:where(.css-common) ol,:where(.css-common) output,:where(.css-common) p,:where(.css-common) pre,:where(.css-common) q,:where(.css-common) ruby,:where(.css-common) s,:where(.css-common) samp,:where(.css-common) section,:where(.css-common) main,:where(.css-common) small,:where(.css-common) span,:where(.css-common) strike,:where(.css-common) strong,:where(.css-common) sub,:where(.css-common) summary,:where(.css-common) sup,:where(.css-common) tt,:where(.css-common) table,:where(.css-common) tbody,:where(.css-common) tfoot,:where(.css-common) thead,:where(.css-common) time,:where(.css-common) tr,:where(.css-common) th,:where(.css-common) td,:where(.css-common) u,:where(.css-common) ul,:where(.css-common) var,:where(.css-common) video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;white-space:normal;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1;text-align:left;box-sizing: border-box;}:where(.css-common) textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;text-align:left;}:where(.css-common) section,:where(.css-common) aside,:where(.css-common) details,:where(.css-common) figcaption,:where(.css-common) figure,:where(.css-common) footer,:where(.css-common) header,:where(.css-common) hgroup,:where(.css-common) menu,:where(.css-common) nav,:where(.css-common) section,:where(.css-common) main{display:block}:where(.css-common) ol,:where(.css-common) ul{list-style:none}:where(.css-common) blockquote,:where(.css-common) q{quotes:none}:where(.css-common) table{border-collapse:collapse;border-spacing:0}:where(.css-common) img{vertical-align: bottom;margin: 0;padding: 0;width: 100%;height: auto;} :where(.css-common) blockquote, :where(.css-common) q { quotes:none; margin: 0; padding: 0; } :where(.css-common) blockquote:before, :where(.css-common) blockquote:after, :where(.css-common) q:before, :where(.css-common) q:after { content:''; content:none; } :where(.css-common) .clearfix:after { content: ""; clear: both; display: block; } :where(.css-common) *{ box-sizing: border-box; margin: 0; padding: 0; } /*　IE(edge,11)用*/ :where(.css-common) .object-fit-img { object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;' } :where(.css-common) table {width: 100%;} :where(.css-common) ::before,:where(.css-common) ::after {box-sizing: border-box;} :where(.css-common) img {width: 100%;max-width: 100%;} :where(.css-common) figcaption {font-style: normal;} /* ---------------------------------------------- * デザイントークン ---------------------------------------------- */ :root:where(.css-common) { --size240-340: clamp(240px, calc(240px + 100 * ((100vw - 375px) / 1545)), 340px); --size180: clamp(130px, calc(130px + 50 * ((100vw - 375px) / 1545)), 180px); --size170: clamp(70px, calc(70px + 100 * ((100vw - 375px) / 1545)), 170px); --size150: clamp(70px, calc(70px + 80 * ((100vw - 375px) / 1545)), 150px); --size130: clamp(50px, calc(50px + 80 * ((100vw - 375px) / 1545)), 130px); --size100: clamp(50px, calc(50px + 50 * ((100vw - 375px) / 1545)), 100px); --size20-100: clamp(20px, calc(20px + 80 * ((100vw - 375px) / 1545)), 100px); --size90: clamp(50px, calc(50px + 40 * ((100vw - 375px) / 1545)), 90px); --size80: clamp(50px, calc(50px + 30 * ((100vw - 375px) / 1545)), 80px); --size20-80: clamp(20px, calc(20px + 60 * ((100vw - 375px) / 1545)), 80px); --size70: clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px); --size20-70: clamp(20px, calc(20px + 50 * ((100vw - 375px) / 1545)), 70px); --size60: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px); --size20-60: clamp(20px, calc(20px + 40 * ((100vw - 375px) / 1545)), 60px); --size50: clamp(40px, calc(40px + 10 * ((100vw - 375px) / 1545)), 50px); --size20-50: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px); --size40: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px); --size20-40: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px); --size10-40: clamp(10px, calc(10px + 30 * ((100vw - 375px) / 1545)), 40px); --size30: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px); --size10-30: clamp(10px, calc(10px + 20 * ((100vw - 375px) / 1545)), 30px); --size20: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px); --font40: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px); --font36: clamp(20px, calc(20px + 16 * ((100vw - 375px) / 1545)), 36px); --font32: clamp(18px, calc(18px + 14 * ((100vw - 375px) / 1545)), 32px); --font30: clamp(18px, calc(18px + 12 * ((100vw - 375px) / 1545)), 30px); --font28: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px); --font26: clamp(18px, calc(18px + 8 * ((100vw - 375px) / 1545)), 26px); --font24: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px); --font22: clamp(16px, calc(16px + 6 * ((100vw - 375px) / 1545)), 22px); --font20: clamp(16px, calc(16px + 4 * ((100vw - 375px) / 1545)), 20px); --font18: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px); --font16: clamp(13px, calc(13px + 3 * ((100vw - 375px) / 1545)), 16px); --font15: clamp(13px, calc(13px + 2 * ((100vw - 375px) / 1545)), 15px); --font14: clamp(12px, calc(12px + 2 * ((100vw - 375px) / 1545)), 14px); --font12: clamp(10px, calc(10px + 2 * ((100vw - 375px) / 1545)), 12px); --skyblue: #0c7b97; --color-text: #333; --font-w: 400; --font-jp: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif; --font-base: clamp(13px, calc(13px + 3 * ((100vw - 375px) / 1545)), 16px); --line-height-base: 1.7; --spacing-base: .018em; } :where(.css-common) .blank {padding: var(--size80) 0;} :where(.css-common) .inner {width: 90%;max-width: 1000px;margin: 0 auto;} /* ---------------------------------------------- * タグの設定 ---------------------------------------------- */ :where(.css-common) a { display: inline-block; outline:none; color: var(--color-text); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: all .3s ease; } :where(.css-common) body a:hover, :where(.css-common) body a:active {color: var(--e-global-color-accent, #00809E);} :where(.css-common) input, :where(.css-common) input[type="submit"], :where(.css-common) input[type="button"], :where(.css-common) input[type="text"], :where(.css-common) button { -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; box-sizing: border-box; outline: none; font-style: normal; font-weight: var(--font-w); cursor: pointer; } :where(.css-common) input[type="submit"]::-webkit-search-decoration, :where(.css-common) input[type="button"]::-webkit-search-decoration {display: none;} :where(.css-common) input[type="button"], :where(.css-common) input[type="text"], :where(.css-common) input[type="submit"], :where(.css-common) input[type="image"], :where(.css-common) textarea {-webkit-appearance: none;appearance: none;} :where(.css-common) select {-webkit-appearance: none;-moz-appearance: none;appearance: none;} :where(.css-common) select::-ms-expand{display: none;} /*------------------------------------------------*/ html:where(.css-common) { margin: 0; padding: 0; background: #fff; color: var(--color-text); font-style: normal; font-weight: var(--font-w); font-size: var(--font-base); line-height: var(--line-height-base); font-family: var(--font-jp); -webkit-font-smoodting: antialiased; -moz-osx-font-smoodting: grayscale; word-break: break-all; } :where(.css-common) body {overflow-x: hidden;font-size: var(--font-base);line-height: var(--line-height-base);} :where(.css-common) h2,:where(.css-common) h3,:where(.css-common) h4,:where(.css-common) h5 {line-height: 1.4;} :where(.css-common) p {font-size: var(--font-base);line-height: var(--line-height-base);} :where(.css-common) li,:where(.css-common) th,:where(.css-common) td,:where(.css-common) dt,:where(.css-common) dd,:where(.css-common) figcaption {line-height: var(--line-height-base);} :where(.css-common) section {position: relative;z-index: 1;} :where(.css-common) .flexbox {display: flex;flex-wrap: wrap;justify-content: space-between;} :where(.css-common) .wht_bg {background: #fff;} :where(.css-common) .title_common {margin-bottom: var(--size70);} :where(.css-common) .title_common h2 {margin-bottom: var(--size20-50);color: var(--skyblue);font-size: var(--font32);letter-spacing: .1em;text-align: center;} :where(.css-common) .title_common h2.small {margin-bottom: 0;font-size: var(--font28);} :where(.css-common) .title_common h2:last-child {margin-bottom: 0;} :where(.css-common) .title_common2 h2 {position: relative;z-index: 1;margin-bottom: var(--size70);color: var(--skyblue);font-weight: 700;font-size: var(--font24);letter-spacing: .1em;text-align: center;} :where(.css-common) .title_common2 h2::before {content: '';position: absolute;top: 50%;left: 0;z-index: -1;width: 100%;height: 2px;background: var(--skyblue);} :where(.css-common) .title_common2 h2 span {display: inline-block;position: relative;z-index: 1;padding: 0 20px;background: #F8F8F8;line-height: 1.4;text-align: center;} :where(.css-common) .title_common h3 { position: relative; margin-bottom: var(--size40); padding-bottom: 15px; border-bottom: 1px solid #3c3c3c; font-weight: 700; font-size: var(--font20); } :where(.css-common) .title_common h3:after {content: "";position: absolute;bottom: -2px;left: 0;width: 100px;height: 4px;background: var(--skyblue);} :where(.css-common) .title_common p.txt {max-width: 750px;margin: 0 auto var(--size50);} :where(.css-common) .title_common p.txt span {display: block;font-weight: 700;line-height: 1.7;} :where(.css-common) .title_common p.sub_txt {color: var(--skyblue);font-weight: 700;font-size: var(--font20);text-align: center;} :where(.css-common) .title_common p.lead {text-align: center;} :where(.css-common) a.here { display: block; position: relative; max-width: 450px; margin: 0 auto 60px; padding: 20px 20px 20px 0; background: #EA8712; color: #fff; font-weight: 700; font-size: var(--font20); letter-spacing: .2em; text-align: center; } :where(.css-common) a.here:hover {background: var(--skyblue);color: #fff;} :where(.css-common) a.here::after { content: ''; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 20px; height: 20px; background: url(images/common/arrowR-wht.svg) no-repeat right center / 100%; } :where(.css-common) a[href^="tel:"] {pointer-events: none;} :where(.css-common) .pc,:where(.css-common) .pc2 {display: block;} :where(.css-common) .sp,:where(.css-common) .sp2 {display: none;} @media only screen and ( max-width : 1024px ) { :where(.css-common) .pc2 {display: none;} :where(.css-common) .sp2 {display: block;} } @media only screen and ( max-width : 767px ) { :where(.css-common) a[href^="tel:"] {pointer-events: visible;} :where(.css-common) .pc {display: none;} :where(.css-common) .sp {display: block;} } /*################################################# TOPICS（旧 css/topics.css） 範囲：.css-topics　トップページ・新着情報一覧（/topics/） #################################################*/ /*------------------------------------------------- TOPICS（新着情報） カード（parts/topics-card.php）＝トップのスライダーと /topics/ 一覧で共用 一覧ページ（archive-topics.php） ※旧JetEngineの表示をそのまま再現。PC/SPの切替は767px --------------------------------------------------*/ /* カード */ :where(.css-topics) .topics_card {display: block;color: #000;font-family: var(--font-jp);text-decoration: none;} :where(.css-topics) .topics_card .thumb {margin-bottom: 10px;} :where(.css-topics) .topics_card .thumb img {display: block;width: 100%;height: auto;} :where(.css-topics) .topics_card .title {display: flow-root;} :where(.css-topics) .topics_card h4 {margin: 26.6px 0;color: #000;font-weight: 700;font-size: 20px;line-height: 1.4;} :where(.css-topics) .topics_card .cats {margin: 0 0 10px;font-size: 16px;line-height: 26px;} :where(.css-topics) .topics_card .cats span {display: inline-block;padding: 3px 10px;background: #2DB4A0;color: #fff;font-size: 14px;letter-spacing: 2.4px;line-height: 20px;} :where(.css-topics) .topics_card .tags {display: flex;flex-wrap: wrap;gap: 1px 10px;margin: 0 0 10px;} :where(.css-topics) .topics_card .tags span {padding: 1px 5px;border: 1px solid #707070;border-radius: 5px;color: #707070;font-size: 14px;line-height: 21px;} :where(.css-topics) .topics_card .date {margin: 0;color: #3C3C3C;font-weight: 700;font-size: 12px;line-height: 24px;text-align: right;} @media only screen and ( max-width : 767px ) { :where(.css-topics) .topics_card h4 {margin: 15px 0;font-size: 14px;} :where(.css-topics) .topics_card .cats span, :where(.css-topics) .topics_card .tags span {font-size: 12px;} } /*------------------------------------------------- 一覧ページ（/topics/） --------------------------------------------------*/ :where(.css-topics) #mv_topics {position: relative;display: flex;justify-content: center;align-items: center;height: 340px;padding: 0 20px;background: url("images/page/topics/head-bg-blog.webp") no-repeat center / cover;font-family: var(--font-jp);} :where(.css-topics) #mv_topics .topics_breadcrumb {display: flex;flex-wrap: wrap;position: absolute;top: 20px;left: 30px;padding: 0;list-style: none;} :where(.css-topics) #mv_topics .topics_breadcrumb li {color: #000;font-size: 13.6px;letter-spacing: .05em;line-height: 1.8;} :where(.css-topics) #mv_topics .topics_breadcrumb li + li::before {content: '>';margin: 0 .3em;} :where(.css-topics) #mv_topics .topics_breadcrumb a {color: #00809E;text-decoration: none;} :where(.css-topics) #mv_topics h1 {padding-bottom: 24px;font-family: var(--font-jp);color: #3C3C3C;font-weight: 400;font-size: 24px;letter-spacing: .12em;line-height: 1;text-align: center;} :where(.css-topics) #mv_topics h1 span {display: block;font-family: var(--font-jp);font-size: 32px;line-height: 1;text-align: center;} :where(.css-topics) #mv_topics h1 span::after {content: '';display: block;width: 60px;height: 3px;margin: 20px auto;background: #00809E;} :where(.css-topics) #topics {max-width: 1220px;margin: 0 auto;padding: 60px 20px 90px;} :where(.css-topics) #topics .topics_grid {display: flex;flex-wrap: wrap;margin: 0 -25px;} :where(.css-topics) #topics .topics_grid .item {width: 33.3333%;padding: 25px;} :where(.css-topics) #topics .topics_pagination {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 6px;font-family: var(--font-jp);} :where(.css-topics) #topics .topics_pagination :is(a, span) {display: block;padding: 10px;color: #00809E;font-size: 16px;line-height: 24px;text-decoration: none;} :where(.css-topics) #topics .topics_pagination .current {color: #000;} :where(.css-topics) #topics .topics_pagination a:hover {opacity: .7;} :where(.css-topics) #topics .topics_empty {text-align: center;} @media only screen and ( max-width : 767px ) { :where(.css-topics) #mv_topics {height: 155px;} :where(.css-topics) #mv_topics .topics_breadcrumb {top: 5px;left: 10px;} :where(.css-topics) #mv_topics h1 {padding-bottom: 14px;font-size: 14px;} :where(.css-topics) #mv_topics h1 span {font-size: 22px;} :where(.css-topics) #mv_topics h1 span::after {margin: 10px auto;} :where(.css-topics) #topics {padding: 40px 20px 60px;} :where(.css-topics) #topics .topics_grid {margin: 0 -7.5px;} :where(.css-topics) #topics .topics_grid .item {width: 50%;padding: 10px 7.5px;} } /*################################################# LAYOUT（旧 css/layout.css） 範囲：範囲なし（全ページ）　全ページ共通のヘッダー・フッター（範囲なし） #################################################*/ /*------------------------------------------------- LAYOUT（全ページ共通のヘッダー・フッター） header.php / footer.php ＋ js/header.js ※旧Elementor（ヘッダー ID 91・English用 ID 3795、フッター ID 65）の見た目を再現。数値はステージングで実測 ※COMMON（リセット）を読むページ・読まないページの両方で同じ見た目になるよう、ID起点で値をすべて指定 ※PC＝1025px以上、タブレット＝1024px以下（ハンバーガー）、SP＝767px以下 --------------------------------------------------*/ #site_header, #site_footer {font-family: var(--font-jp);} #site_header *, #site_footer * {box-sizing: border-box;} #site_header :is(ul, li), #site_footer :is(ul, li, p) {margin: 0;padding: 0;list-style: none;} #site_header a, #site_footer a {text-decoration: none;} #site_header img {display: block;max-width: 100%;height: auto;} /*------------------------------------------------- ヘッダー --------------------------------------------------*/ #site_header {position: sticky;top: var(--wp-admin--admin-bar--height, 0px);z-index: 95;min-height: 65px;padding: 0 30px 6.6px;background: #fff;box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .1);} #site_header .header_inner {position: relative;display: flex;align-items: center;height: 58.4px;} #site_header .header_logo {flex: none;align-self: flex-start;width: 14.508%;max-width: 172px;padding-top: 15px;} #site_header .header_logo img {width: 100%;} #site_header .header_right {display: flex;flex: 1;justify-content: flex-end;align-items: center;gap: 10px;} /* グローバルナビ（PC） */ #site_header :is(.menu_toggle, .menu_overlay) {display: none;} #site_header .header_menu {display: flex;margin-right: 15px;} #site_header .header_menu li {position: relative;line-height: normal;} #site_header .header_menu > li + li {margin-left: 30px;} /* ハンバーガー内だけに出す採用情報・お問い合わせ・SNS（PCは右のボタンとSNS画像） */ #site_header .header_menu > li:is(.menu_btn, .menu_sns) {display: none;} #site_header .header_menu > li > a {position: relative;display: flex;align-items: center;padding: 5px 0;color: #3C3C3C;font-weight: 700;font-size: 13px;letter-spacing: .05em;line-height: 1.8em;white-space: nowrap;cursor: pointer;transition: color .3s;} #site_header .header_menu > li > a::after {content: '';position: absolute;left: 0;bottom: 0;width: 100%;height: 3px;background: #00809E;opacity: 0;transition: opacity .3s;} #site_header .header_menu > li > a:hover, #site_header .header_menu > li.current-menu-item > a {color: #00809E;} #site_header .header_menu > li > a:hover::after, #site_header .header_menu > li.current-menu-item > a::after {opacity: 1;} #site_header .header_menu .sub_arrow {padding-left: 10px;font-size: 13px;line-height: 1;} /* ドロップダウン：中の文字の頭を親項目の文字に揃え（left＝-左余白）、上端はヘッダーの下端に合わせる */ #site_header .header_menu ul {position: absolute;top: 100%;left: -24px;z-index: 10;min-width: 14em;margin-top: 19px;background: #00809E;box-shadow: 0 8px 16px rgba(0, 0, 0, .15);font-size: 13px;opacity: 0;visibility: hidden;transform: translateY(-4px);transition: opacity .2s, transform .2s, visibility .2s;} #site_header .header_menu ul::before {content: '';position: absolute;left: 0;right: 0;bottom: 100%;height: 19px;} #site_header .header_menu ul ul {top: 0;left: 100%;margin-top: 0;} #site_header .header_menu ul ul::before {display: none;} #site_header .header_menu li:is(:hover, :focus-within, .open) > ul {opacity: 1;visibility: visible;transform: none;} #site_header .header_menu ul li + li > a {border-top: 1px solid rgba(255, 255, 255, .25);} #site_header .header_menu ul a {display: flex;align-items: center;gap: 16px;padding: 14px 24px;color: #fff;font-weight: 700;font-size: 13px;letter-spacing: .05em;line-height: 20px;white-space: nowrap;cursor: pointer;} #site_header .header_menu ul a:hover, #site_header .header_menu ul li:is(:hover, :focus-within) > a {background: #3898AF;} /* ▼を回して▶にするので左の余白は付けない（回すと余白が下に回って矢印が上にずれる。文字との間は a の gap） */ #site_header .header_menu ul .sub_arrow {margin-left: auto;padding-left: 0;transform: rotate(-90deg);} /* SNS（PCは画像にマウスを乗せると一覧が開く） */ #site_header .header_sns {position: relative;flex: none;width: 70px;padding: 20px 0;} #site_header .header_sns img {width: 70px;} /* 一覧の見た目・開き方はメニューのドロップダウン（.header_menu ul）と同じ。文字の頭をSNS画像の左端に揃え、上端はヘッダーの下端に合わせる */ #site_header .sns_dropdown {position: absolute;top: 100%;left: -24px;z-index: 9999;min-width: 14em;margin-top: 6.6px;background: #00809E;box-shadow: 0 8px 16px rgba(0, 0, 0, .15);opacity: 0;visibility: hidden;pointer-events: none;transform: translateY(-4px);transition: opacity .2s, transform .2s, visibility .2s;} #site_header .sns_dropdown::before {content: '';position: absolute;left: 0;right: 0;bottom: 100%;height: 6.6px;} #site_header .header_sns:is(:hover, :focus-within) .sns_dropdown {opacity: 1;visibility: visible;pointer-events: auto;transform: none;} #site_header .sns_dropdown li + li > a {border-top: 1px solid rgba(255, 255, 255, .25);} #site_header .sns_dropdown a {display: flex;align-items: center;gap: 10px;padding: 14px 24px;color: #fff;font-weight: 700;font-size: 13px;letter-spacing: .05em;line-height: 20px;white-space: nowrap;} #site_header .sns_dropdown a:hover {background: #3898AF;} #site_header .sns_dropdown i {width: 14px;font-size: 14px;} /* ドロップダウンの開き方（PC。メニュー・SNS共通）：位置は動かさず、上から下へめくれるように内容が現れる パネルも文字も固定したまま、開くときだけ見える範囲（clip-path の下端）を上から下へ広げる（左右・下の -30px/-40px は影の分） ※開き終わったら切り抜きを外す（付けたままだと右に出る3段目のメニューが切れる） */ @keyframes tcs-dropdown-reveal { from {clip-path: inset(0 -30px 100% -30px);} to {clip-path: inset(0 -30px -40px -30px);} } #site_header :is(.header_menu ul, .sns_dropdown) {transform: none;clip-path: none;transition: opacity .15s, visibility .15s;} #site_header .header_menu li:is(:hover, :focus-within, .open) > ul, #site_header .header_sns:is(:hover, :focus-within) .sns_dropdown {transform: none;clip-path: none;animation: tcs-dropdown-reveal .4s cubic-bezier(.4, 0, .2, 1);transition: opacity 0s, visibility 0s;} /* 親項目からパネルまでのすき間を、マウスが通っても閉じないように（パネル側の ::before は切り抜かれるため親側に付ける） */ #site_header .header_menu > li:is(:hover, :focus-within, .open)::after {content: '';position: absolute;left: 0;right: 0;top: 100%;height: 19px;} #site_header .header_sns:is(:hover, :focus-within)::after {content: '';position: absolute;left: 0;right: 0;top: 100%;height: 6.6px;} /* ボタン（採用情報・お問い合わせ） */ #site_header .header_buttons {display: flex;flex: none;gap: 20px;margin-top: 6px;margin-left: 10px;} /* margin-top：旧本番と同じ高さ位置にそろえる */ #site_header .header_btn {display: inline-flex;align-items: center;gap: 15px;padding: 5px 10px 5px 20px;border-radius: 5px;background: #00809E;color: #fff;font-weight: 700;font-size: 13px;letter-spacing: .05em;line-height: 1.4;white-space: nowrap;transition: .3s;} #site_header .header_btn:hover {background: #3898AF;} #site_header .header_btn i {font-size: 13px;} #site_header .header_btn .tcs_icon {width: auto;} /* 矢印は横幅を形に合わせる（旧Elementorボタンと同じ幅感） */ /* アイコン（functions.php の tcs_icon()。旧 Font Awesome の と同じ並びで使う） */ #site_header i {display: inline-block;font-style: normal;line-height: 1;text-align: center;} .tcs_icon {display: inline-block;width: 1em;height: 1em;vertical-align: -.125em;fill: currentColor;} /* English ページ用（ロゴ＋Japanese・Contact） */ #site_header.english .header_inner {height: 65px;} #site_header.english {padding-bottom: 0;} #site_header.english .header_logo {align-self: center;padding-top: 0;} #site_header.english .header_buttons {flex: 1;justify-content: flex-end;gap: 20px;margin-left: 0;} #site_header.english .header_btn {border: 1px solid #00809E;text-transform: uppercase;} #site_header.english .header_btn.white {margin-left: 30px;background: #fff;color: #00809E;} #site_header.english .header_btn.white:hover {background: #ECF7FA;} /* タブレット・SP：ロゴの下にSNS・ボタン、メニューは右上のハンバーガー */ @media only screen and ( max-width : 1024px ) { /* 1段：ロゴ ─ （タブレットのみ）採用情報・お問い合わせ ─ ハンバーガー。SNSはドロワーの中へ */ #site_header {min-height: 70px;padding: 0 30px;} #site_header .header_inner {height: 70px;} #site_header .header_logo {align-self: center;width: 172px;max-width: none;padding-top: 0;} #site_header .header_right {gap: 16px;} #site_header .header_sns {display: none;} #site_header .header_buttons {gap: 12px;margin-top: 0;margin-left: 0;} #site_header .header_btn {gap: 8px;padding: 9px 14px 9px 18px;line-height: 1;} #site_header .header_nav {order: 1;} /* ハンバーガー：右から出るドロワー（白地・区切り線・子メニューは▼で開閉・最後に採用情報/お問い合わせのボタンとSNS） */ html.menu_open {overflow: hidden;} html.menu_open #site_header {z-index: 9999;} #site_header .menu_toggle {position: relative;z-index: 2;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 5px;width: 44px;height: 44px;padding: 0;border: 0;border-radius: 6px;background: #EEF6F8;cursor: pointer;} #site_header .menu_toggle span {display: block;width: 22px;height: 2px;border-radius: 1px;background: #00809E;transition: .3s;} #site_header .header_nav.open .menu_toggle span:nth-child(1) {transform: translateY(7px) rotate(45deg);} #site_header .header_nav.open .menu_toggle span:nth-child(2) {opacity: 0;} #site_header .header_nav.open .menu_toggle span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);} #site_header .menu_overlay {position: fixed;inset: 0;z-index: 0;display: block;background: rgba(0, 0, 0, .45);opacity: 0;visibility: hidden;transition: opacity .3s, visibility .3s;} #site_header .header_nav.open .menu_overlay {opacity: 1;visibility: visible;} #site_header .header_menu {position: fixed;top: var(--wp-admin--admin-bar--height, 0px);right: 0;bottom: 0;z-index: 1;display: block;width: min(320px, 85vw);margin: 0;padding: 72px 0 32px;overflow-y: auto;overscroll-behavior: contain;background: #fff;box-shadow: -4px 0 16px rgba(0, 0, 0, .15);visibility: hidden;transform: translateX(100%);transition: transform .3s ease, visibility .3s;} #site_header .header_nav.open .header_menu {visibility: visible;transform: none;} #site_header .header_menu::before {content: 'MENU';position: absolute;top: 28px;left: 24px;color: #00809E;font-weight: 700;font-size: 14px;letter-spacing: .15em;line-height: 1;} #site_header .header_menu > li + li {margin-left: 0;} #site_header .header_menu > li {border-bottom: 1px solid #E3ECEE;} #site_header .header_menu > li:first-child {border-top: 1px solid #E3ECEE;} #site_header .header_menu li a {display: flex;justify-content: space-between;align-items: center;gap: 12px;padding: 16px 24px;color: #3C3C3C;font-weight: 700;font-size: 15px;letter-spacing: .05em;line-height: 1.5;white-space: normal;} #site_header .header_menu > li > a::after {display: none;} #site_header .header_menu li a:hover, #site_header .header_menu > li > a:hover {background: #F2F8F9;color: #00809E;} #site_header .header_menu > li.current-menu-item > a, #site_header .header_menu ul li.current-menu-item > a {background: none;color: #00809E;} /* 子メニュー（アコーディオン） */ #site_header .header_menu ul {position: static;display: none;min-width: 0;margin: 0;padding: 4px 0 8px;background: #F5FAFB;box-shadow: none;clip-path: none;animation: none;opacity: 1;visibility: visible;transform: none;transition: none;} #site_header .header_menu > li:is(:hover, :focus-within, .open)::after {display: none;} /* PCのすき間用。ドロワーでは下の項目に重なるので消す */ #site_header .header_menu li:is(:hover, :focus-within, .open) > ul {animation: none;} /* PCのめくれる動きはドロワーでは使わない */ #site_header .header_menu ul::before {display: none;} #site_header .header_menu li.open > ul {display: block;} #site_header .header_menu ul li + li > a {border-top: 0;} #site_header .header_menu ul li a {padding: 11px 24px 11px 40px;font-weight: 400;font-size: 14px;} #site_header .header_menu ul ul {padding: 0;background: none;} #site_header .header_menu ul ul li a {padding-left: 56px;font-size: 13px;} #site_header .header_menu ul li:is(:hover, :focus-within) > a {background: none;} #site_header .header_menu ul li > a:hover {background: #E8F3F5;color: #00809E;} #site_header .header_menu .sub_arrow, #site_header .header_menu ul .sub_arrow {flex: none;margin-left: 0;padding: 0;color: #00809E;font-size: 14px;transform: none;transition: transform .3s;} #site_header .header_menu li.open > a > .sub_arrow {transform: rotate(180deg);} /* 採用情報・お問い合わせ（ボタン） */ #site_header .header_menu > li.menu_btn {display: block;padding: 0 24px;border: 0;} #site_header .header_menu > li:not(.menu_btn) + li.menu_btn {margin-top: 28px;} #site_header .header_menu > li.menu_btn + li.menu_btn {margin-top: 12px;} #site_header .header_menu > li.menu_btn > a {justify-content: center;padding: 14px;border-radius: 5px;background: #00809E;color: #fff;font-size: 14px;} #site_header .header_menu > li.menu_btn > a:hover {background: #3898AF;color: #fff;} /* SNS（ドロワーの一番下） */ #site_header .header_menu > li.menu_sns {display: block;margin-top: 28px;padding: 0 24px;border: 0;} #site_header .menu_sns p {margin: 0 0 6px;color: #00809E;font-weight: 700;font-size: 12px;letter-spacing: .15em;} #site_header .header_menu .menu_sns ul {display: block;padding: 0;background: none;} #site_header .header_menu .menu_sns li a {justify-content: flex-start;gap: 10px;padding: 9px 0;font-weight: 400;font-size: 13px;} #site_header .header_menu .menu_sns li a:hover {background: none;} #site_header .menu_sns i {width: 18px;color: #00809E;font-size: 16px;text-align: center;} #site_header.english {padding-bottom: 0;} #site_header.english .header_inner {height: 70px;} #site_header.english .header_btn.white {margin-left: 0;} } @media only screen and ( max-width : 767px ) { /* SP：ロゴとハンバーガーだけ（採用情報・お問い合わせはドロワーの中） */ #site_header {min-height: 60px;padding: 0 15px;} #site_header .header_inner, #site_header.english .header_inner {height: 60px;} #site_header .header_logo {width: 150px;} #site_header .header_buttons {display: none;} #site_header .header_menu::before {top: 23px;} /* English ページはメニューが無いので、ボタンを小さくして残す */ #site_header.english .header_logo {width: 130px;} #site_header.english .header_buttons {display: flex;gap: 8px;} #site_header.english .header_btn {gap: 4px;padding: 7px 8px 7px 10px;font-size: 11px;letter-spacing: .02em;} } /* 管理バーが固定でなくなる幅（ログイン時のみ） */ @media only screen and ( max-width : 600px ) { #site_header, #site_header .header_menu {top: 0;} } /*------------------------------------------------- フッター --------------------------------------------------*/ #site_footer {display: flex;flex-direction: column;align-items: center;gap: 10px;padding: 45px 20px 15px;background: #00809E;} #site_footer .footer_links {display: flex;flex-wrap: wrap;justify-content: center;} #site_footer .footer_links li {padding: 0 12px 2px;border-right: 1px solid #fff;line-height: 13px;} #site_footer .footer_links li:last-child {border-right: 0;} #site_footer .footer_links a {display: block;color: #fff;font-weight: 400;font-size: 13px;line-height: 13px;} #site_footer .footer_links a:hover {opacity: .8;} #site_footer .copyright {padding: 0 0 10px;color: #fff;font-weight: 400;font-size: 11px;letter-spacing: 1px;line-height: 1.8;text-align: center;} @media only screen and ( max-width : 1024px ) { #site_footer {padding: 30px 20px;} } @media only screen and ( max-width : 767px ) { #site_footer {align-items: stretch;padding: 0 0 5px;} #site_footer .footer_links {display: block;} #site_footer .footer_links li {padding: 0;border-right: 1px solid #fff;} #site_footer .footer_links li:nth-child(odd) {background: #E5F3F6;} #site_footer .footer_links li:nth-child(even) {background: #F1F9FB;} #site_footer .footer_links a {display: block;padding: 14px 30px;color: #3C3C3C;font-size: 12px;line-height: 1.8em;} #site_footer .copyright {letter-spacing: 0;} }