/* common */ /* * Fluid clamp() formula (SP 407px → PC 1440px): * clamp(SP_VAL, calc(SLOPE_vw + INTERCEPT_px), PC_VAL) * SLOPE = (PC - SP) / 10.33 * INTERCEPT = SP - (PC - SP) / 1033 * 407 */ /* Lexend フォールバック：Arial のメトリクスを Lexend に近似させ FOUT 時のレイアウトシフトを軽減 */ @font-face { font-family: "Lexend-fallback"; src: local("Arial"); size-adjust: 98%; ascent-override: 102%; descent-override: 20%; line-gap-override: 0%; } :root { --color-brand-green: #28C86E; --color-brand-matcha: #008482; --color-brand-dark: #282828; --color-gray: #6C6C6C; --color-gray-light: #BEBEBE; --color-bg: #F5F6F8; --color-white: #FFF; --color-error: #E12850; --font-base: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; --font-heading: "Lexend", "Lexend-fallback", sans-serif; /* PCヘッダー高さ */ --header-height: 75px; /* fluid type scale (SP 407px → PC 1440px) */ --fluid-h1: clamp(50px, calc(1.936vw + 42.12px), 70px); --fluid-h2: clamp(40px, calc(0.968vw + 36.06px), 50px); --fluid-h3: clamp(20px, calc(0.387vw + 18.42px), 24px); /* fluid spacing */ --heading-gradient: linear-gradient(270deg, var(--color-brand-green) 0.13%, #14A778 97.87%); --footer-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4542 4543'%3E%3Cpath d='M4542 2271.5C4542 3157.16 4457.06 3669.15 4093.02 4056.22C3725.58 4446.8 3203.02 4543 2271 4543C1419.03 4543 879.672 4427.15 533.344 4134.02C140.916 3801.81 0 3237.23 0 2271.5C0 1362.56 84.4812 874.414 469.416 469.519C867 126 1362.26 0 2271 0C3179.74 0 3784 127 4133.22 531.758C4492.61 992.191 4542 1405.26 4542 2271.5Z' fill='black'/%3E%3C/svg%3E"); --mask-squircle-gallery: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 355 266%27%3E%3Cpath d=%27M355 133C355 248.963 332.263 266 177.5 266C22.7371 266 0 248.963 0 133C0 17.0368 22.7371 0 177.5 0C332.263 0 355 17.0368 355 133Z%27 fill=%27black%27/%3E%3C/svg%3E"); /* clip-path はデータURI参照だと Safari が解釈しないため、各HTMLの直後にインライン SVG として配置したをフラグメント参照する */ --clip-squircle: url(#squircle); --clip-squircle-sp: url(#squircle-sp); --clip-squircle-card: url(#squircle-card); } * { box-sizing: border-box; text-decoration: none; list-style: none; font-family: var(--font-base); color: var(--color-brand-dark); font-feature-settings: "palt"; } h1, h2, h3, p, label, th, td, button { text-box: trim-both cap alphabetic; } html { overscroll-behavior-y: none; overflow-x: clip; scroll-padding-top: 105px; } @media only screen and (max-width: 820px) { html { scroll-padding-top: 60px; } } body { background-color: var(--color-bg); overflow-x: clip; letter-spacing: 0.05em; } body.top_body { background-color: var(--color-white); } .top_page { background-color: var(--color-bg); margin-top: 0; padding-bottom: 0; padding-top: 0; } p { font-size: 16px; font-weight: 400; } .common_wrap { padding: 0 50px; } @media only screen and (max-width: 960px) { .common_wrap { padding: 0 22px; } } .common_inner { margin: 0 auto; max-width: 1236px; } .page_header { display: flex; justify-content: space-between; align-items: center; } /* フェードインアニメーション（地平線から出てくる表現） */ /* ラッパーが地平線、中のテキストが下から上に移動 */ .fadein_up_wrap { overflow: hidden; display: inline-block; /* ディセンダー/アセンダーが overflow:hidden で切れないよう領域を確保し、 margin で打ち消してレイアウトには影響させない */ padding-block: 0.15em; margin-block: -0.15em; } .fadein_up_wrap > * { display: block; /* wrap の padding-bottom (0.15em) 分も余分に下げて、初期状態で文字が見えないようにする */ transform: translateY(calc(100% + 0.15em)); /* 終盤にゆっくりになるイージング */ transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); } .fadein_up_wrap.is-view > * { transform: translateY(0); } /* 遅延 */ .fadein_up_wrap--delay1 > * { transition-delay: 0.15s; } .fadein_up_wrap--delay2 > * { transition-delay: 0.3s; } .fadein_up_wrap--delay3 > * { transition-delay: 0.45s; } .fadein_up_wrap--delay4 > * { transition-delay: 0.6s; } [data-line-fadein] { opacity: 0; } /* 遅延フェードイン */ .fadein_up--delay1 { transition-delay: 0.2s; } .fadein_up--delay2 { transition-delay: 0.4s; } .common_pc_h1, .common_pc_h2, .common_pc_h3 { font-family: var(--font-heading); font-weight: 800; background: var(--heading-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: normal; } .common_pc_h1 { font-size: var(--fluid-h1); padding: 2px; width: fit-content; } .common_pc_h2 { font-size: var(--fluid-h2); padding: 2px; width: fit-content; } .common_pc_h3 { font-size: var(--fluid-h3); padding: 1px; width: fit-content; } .pankuzu_list { display: flex; align-items: center; justify-content: flex-end; } .pankuzu_list li { flex-shrink: 0; font-size: 14px; line-height: 1; } .pankuzu_list li:not(:last-child)::after { content: ""; display: inline-block; width: 8px; height: 8px; background-image: url("../images/common/icon_dot_ superellipse.svg"); background-size: contain; background-repeat: no-repeat; vertical-align: middle; margin: 0 12px; } .pankuzu_list li:not(:last-child), .pankuzu_list li:not(:last-child) a { color: var(--color-gray-light); font-weight: 400; } .pankuzu_list li:last-child { font-weight: 500; } @media only screen and (max-width: 640px) { .pankuzu_list li { font-size: 12px; } } .common_text_link, .press_kit_article_list p a { color: var(--color-brand-green); font-weight: 700; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: 10%; text-underline-offset: 30%; transition: text-decoration-color 0.2s; } @media (hover: hover) { .common_text_link:hover, .press_kit_article_list p a:hover { text-decoration-line: none; } } @media (hover: none) { .common_text_link:active, .press_kit_article_list p a:active { text-decoration-line: none; } } .common_text_link_outside::after { content: ""; display: inline-block; width: 14px; height: 14px; background-image: url("../images/common/icon_link_outside.svg"); background-size: contain; background-repeat: no-repeat; vertical-align: baseline; margin-left: 4px; } .common_text_link_copy { margin-top: 0.8em; } .common_text_link_copy::after { content: ""; display: inline-block; width: 16px; height: 15px; background-image: url("../images/presskit/icon_copy.svg"); background-size: contain; background-repeat: no-repeat; vertical-align: baseline; position: relative; bottom: -1px; } .sp_br { display: none; } @media only screen and (max-width: 960px) { .page_header { flex-direction: column-reverse; align-items: flex-start; } .pankuzu_list { justify-content: flex-start; margin-bottom: 28px; } } @media only screen and (max-width: 640px) { .sp_br { display: block; } } /* header */ .pc_header { padding-top: 30px; position: fixed; top: 0; left: 0; right: 0; max-width: 100vw; z-index: 100; transition: transform 0.3s ease; } .pc_header.is-hidden, .sp_header.is-hidden { transform: translateY(-100%); } .pc_header_logo_block { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; margin: auto; } /* ヘッダーロゴ色切り替え */ .pc_header_logo_svg .logo_text { fill: var(--color-brand-dark); transition: fill 0.3s ease; } .pc_header_logo_svg .logo_icon_green { fill: var(--color-brand-green); transition: fill 0.3s ease; } .pc_header_logo_svg .logo_icon_teal { fill: var(--color-brand-matcha); transition: fill 0.3s ease; } .pc_header.is-footer-overlap .pc_header_logo_svg .logo_text { fill: var(--color-bg); } .pc_header.is-footer-overlap .pc_header_logo_svg .logo_icon_green { fill: var(--color-white); } .pc_header.is-footer-overlap .pc_header_logo_svg .logo_icon_teal { fill: var(--color-white); } /* culture: 緑グラデ表示中もロゴを白に */ .pc_header.is-on-green .pc_header_logo_svg .logo_text { fill: var(--color-bg); } .pc_header.is-on-green .pc_header_logo_svg .logo_icon_green { fill: var(--color-white); } .pc_header.is-on-green .pc_header_logo_svg .logo_icon_teal { fill: var(--color-white); } /* ヘッダーメニュー色切り替え（ロゴと同タイミング・ホバー時のみ白） */ .pc_header.is-footer-overlap .pc_header_dropdown:not(.pc_header_dropdown_about):hover > a:not(.pc_header_recruit_btn), .pc_header.is-on-green .pc_header_dropdown:not(.pc_header_dropdown_about):hover > a:not(.pc_header_recruit_btn) { color: var(--color-white) !important; } /* 白squircle上では緑に戻す */ .pc_header.is-on-green.is-on-white-squircle .pc_header_dropdown:not(.pc_header_dropdown_about):hover > a:not(.pc_header_recruit_btn) { color: var(--color-brand-green) !important; } .sp_header.is-on-green .sp_header_logo_svg .logo_text { fill: var(--color-bg); } .sp_header.is-on-green .sp_header_logo_svg .logo_icon_green { fill: var(--color-white); } .sp_header.is-on-green .sp_header_logo_svg .logo_icon_teal { fill: var(--color-white); } .sp_header.is-footer-overlap .sp_header_logo_svg .logo_text { fill: var(--color-bg); } .sp_header.is-footer-overlap .sp_header_logo_svg .logo_icon_green { fill: var(--color-white); } .sp_header.is-footer-overlap .sp_header_logo_svg .logo_icon_teal { fill: var(--color-white); } .sp_header.is-footer-overlap .sp_header_menu_btn .menu_btn_bg { fill: var(--color-white); } .sp_header.is-footer-overlap .sp_header_menu_btn .menu_btn_line { stroke: var(--color-brand-dark); } .pc_header_menu_block { position: relative; z-index: 201; } .pc_header_menu_block > ul { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 30px; } .pc_header_menu_block ul li { font-size: 14px; font-weight: 700; text-box-trim: trim-both; } .pc_header_recruit_btn { display: flex; justify-content: center; align-items: center; text-align: center; width: 133.199px; height: 45px; padding: 12px 22px; gap: 12px; border-radius: 999px; background-color: var(--color-brand-dark); border: 2px solid var(--color-brand-dark); box-sizing: border-box; transition: background-color 0.3s, border-color 0.3s; } .pc_header_recruit_btn span { color: #FFF; white-space: nowrap; transition: color 0.3s; } .pc_header_recruit_btn:hover { background-color: #FFF; } .pc_header_recruit_btn:hover span { color: var(--color-brand-dark); } .sp_header { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-top: 18px; padding-bottom: 10px; transition: transform 0.3s ease; } .sp_header_content { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; } .sp_header_menu_btn, .sp_header_menu_close { cursor: pointer; } .sp_header_menu { position: fixed; top: 0; right: -88.2%; width: 88.2%; height: 100vh; height: 100dvh; background-color: var(--color-brand-dark); -webkit-mask-image: var(--footer-mask); mask-image: var(--footer-mask); -webkit-mask-size: 1926px 1926px; mask-size: 1926px 1926px; -webkit-mask-position: left 0 center; mask-position: left 0 center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; z-index: 200; padding: 32px 35px 0px 25.3%; transition: right 0.3s ease; overflow: hidden; } .sp_header_menu_bg { display: none; } .sp_header_menu li a { color: #FFF; } .sp_header_menu.is-open { right: 0; overflow-y: auto; } .sp_header_menu_overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background-color: rgba(0, 0, 0, 0.5); z-index: 199; } .sp_header_menu_overlay.is-open { display: block; } .sp_header_menu_close { text-align: end; margin-bottom: 63px; } .sp_header_menu_item > a { display: block; font-size: 18px; font-weight: 600; margin-bottom: 16px; } .sp_header_menu_item:not(:has(ul)) { margin-bottom: 20px; } .sp_header_menu_item:not(:has(ul)) > a { margin-bottom: 0; } .sp_header_menu_item ul { display: flex; flex-direction: column; gap: 14px; margin-bottom: 35px; } .sp_header_menu_item ul li a { display: inline-block; font-weight: 600; margin-left: 19px; } .sp_header_follow_title { margin-top: 59px; margin-bottom: 18px; color: #FFF; font-size: 14px; font-family: var(--font-heading); font-weight: 800; letter-spacing: normal; text-box-trim: none; } .sp_header_follow_list { display: flex; align-items: center; margin-left: -8px; } .sp_header_menu .sp_logo_note { margin-right: 14px; } .pc_header_dropdown { position: relative; } .pc_header_dropdown_panel { position: fixed; top: 0; right: 0; width: 690px; height: 290px; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-20px); transition: transform 0.3s ease, opacity 0.3s ease; z-index: -1; } .pc_header_dropdown_about > a { cursor: default; } .pc_header_menu_block:has(.pc_header_dropdown_about:hover) .pc_header_dropdown_panel { transform: translateY(0); opacity: 1; pointer-events: auto; } .pc_header_dropdown_bg { position: absolute; bottom: 0; left: 0; width: 884px; height: 884px; z-index: -1; fill: #FFF; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.08)); } .pc_header_dropdown:hover > a { color: var(--color-brand-green) !important; } .pc_header_menu_item_block { position: absolute; top: 100%; left: 0; z-index: 201; padding-top: 8px; display: none; flex-direction: column; gap: 7px; } .pc_header_dropdown:hover .pc_header_menu_item_block { display: flex; } .pc_header_menu_item_block li { list-style: none; white-space: nowrap; padding: 0; } .pc_header_menu_item_block li a { display: block; padding: 2px 0 0 8px; line-height: 1.6; } .pc_header_menu_item_block li a::before { content: "•"; margin-right: 0.3em; } .pc_header_menu_item_block li:hover a { color: var(--color-brand-green); } .pc_header_menu_item_block li:hover { color: var(--color-brand-green); } /* main */ main { padding: 200px 0; } @media only screen and (max-width: 960px) { main { padding: 113px 0 100px; } .pc_header { display: none; } .sp_header { display: block; } } /* menu_list */ .about_common_nav { margin-top: 100px; } .about_common_menu_list { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; gap: 16px; } .about_common_menu_list li { width: 234px; } .about_common_menu_list li a { display: flex; gap: 12px; padding-bottom: 24px; font-size: 14px; font-weight: 700; background-image: linear-gradient(var(--color-brand-green), var(--color-brand-green)), linear-gradient(var(--color-gray-light), var(--color-gray-light)); background-repeat: no-repeat; background-position: bottom right, bottom right; background-size: 0 2px, 100% 1px; transition: background-size 0.3s ease; } @media (hover: hover) { .about_common_menu_list li a:hover { background-position: bottom left, bottom right; background-size: 100% 2px, 100% 1px; } } @media (hover: none) { .about_common_menu_list li a:active { background-position: bottom left, bottom right; background-size: 100% 2px, 100% 1px; } } .about_common_menu_list .menu_highlight a { background-position: bottom left, bottom right; background-size: 100% 2px, 100% 1px; } @media only screen and (max-width: 960px) { .about_common_nav { margin-top: 50px; } .about_common_menu_list { flex-wrap: wrap; gap: 0px; } .about_common_menu_list li { width: calc(50% - 10px); margin-bottom: 21px; } .about_common_menu_list li a { padding-bottom: 16px; } } /* About Us */ .about_mvv_text { line-height: 1.8; } /* value */ .about_values { background-color: #fff; } .values_title_block { padding-bottom: 100px; } /* PC用スクロール固定スライダー */ .values_slider_section { position: relative; } .values_slider_container { height: 100vh; /* 画面高からヘッダー高さを除いた領域の中央に配置するための上部余白 */ padding-top: var(--header-height); background: linear-gradient(180deg, var(--color-bg) 0%, #fff 192px); position: relative; z-index: 1; display: flex; align-items: center; } .values_slider_container.is-pinned { background: #fff; } .values_slider_container .common_wrap, .values_slider_container .common_inner { width: 100%; } .values_slider_wrapper { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .values_text_area { position: relative; } .values_slide { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; display: flex; flex-direction: column; justify-content: space-between; } .values_slide:first-child { position: relative; opacity: 1; visibility: visible; } .values_slide.values_slide--active { opacity: 1; visibility: visible; } .values_image_area { width: 49.353%; max-width: 610px; flex-shrink: 0; } .values_image_frame { position: relative; width: 100%; } .values_image { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; } .values_image:first-child { position: relative; opacity: 1; visibility: visible; } .values_image.values_image--active { opacity: 1; visibility: visible; } .values_image img { width: 100%; } .values_number { color: var(--color-gray-light); font-size: 18px; font-weight: 800; font-family: var(--font-heading); background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: var(--color-gray-light); } /* SP用縦並び（PCでは非表示） */ .values_sp_layout { display: none; } @media only screen and (max-width: 960px) { .values_slider_section { display: none; } .values_sp_layout { display: block; position: relative; background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg) calc(100% - 192px), #fff 100%); } .values_sp_layout .common_wrap { position: relative; z-index: 3; } .values_sp_layout::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 100%); pointer-events: none; } .about_values { padding-bottom: 82px; background-color: var(--color-bg); } } /* 背景トランジションレイヤー（PC用） */ .workstyle_bg_layer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, var(--color-brand-matcha, #008482) 8.08%, var(--color-brand-wasabi, #28C86E) 91.27%); opacity: 0; pointer-events: none; z-index: 0; } @media only screen and (max-width: 960px) { .workstyle_bg_layer { z-index: 0; } } .values_title_block h2 { margin-top: 120px; } .values_title_block p { margin-top: 36px; } .about_value_content { padding-top: 94px; } .about_value_content_block { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 272px; } .value_text { font-size: 40px; font-weight: 800; line-height: 1.5; margin-top: 50px; margin-bottom: 100px; } .value_detail { line-height: 1.8; } .about_value_content_text_block { width: 50%; padding-right: clamp(0px, 5.83vw, 84px); } .about_value_content_text_block .common_pc_h3 { font-size: 24px; } .about_value_content_img_block { width: 50%; } .about_value_content_img_block img { width: 100%; } @media only screen and (max-width: 960px) { .about_values { background: var(--color-bg); padding-bottom: 0px; } .values_title_block h2 { margin-top: 81px; } .about_value_content { padding-top: 0px; } .about_value_content_block { flex-direction: column-reverse; padding-bottom: 120px; } .about_value_content_text_block { width: 100%; max-width: 610px; padding: 0 21px; } .about_value_content_img_block { width: 100%; margin-bottom: 50px; } .value_text { font-size: 24px; line-height: 1.6; margin-top: 36px; margin-bottom: 36px; } .value_text span { display: inline-block; } .value_detail { font-size: 13px; font-weight: 500; line-height: 2; } } .culture_page .values_slider_container { padding-top: 0; } .culture_page .values_slider_wrapper { gap: clamp(0px, 5.83vw, 84px); position: relative; } .culture_page .values_text_area { margin-top: 22px; } /* values progress dots (PC only — slider section自体が ≤960px で非表示) */ /* --slide-left: 画面左端から values_slide(=common_inner) 左端までの距離 */ /* 全 viewport で 1440px 時の比率（dot 左端 14px : slide_left 102px = 14:102）を維持 */ .values_progress { position: absolute; top: 50%; --slide-left: max(clamp(22px, calc(2.711vw + 10.97px), 50px), calc((100vw - 1236px) / 2)); left: calc(var(--slide-left) * -88 / 102); transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; pointer-events: none; } .values_progress_defs { position: absolute; width: 0; height: 0; overflow: hidden; } .values_progress_dot { display: block; width: 6px; height: 6px; flex-shrink: 0; cursor: pointer; pointer-events: auto; } .values_progress_dot_bg { fill: #EBEBEB; } .values_progress_dot_fg { fill: url(#values_progress_gradient); opacity: 0; transition: opacity 0.4s ease; } .values_progress_dot.is-active .values_progress_dot_fg { opacity: 1; } /* workstyle */ .about_culture_workstyle { background: transparent; padding-top: 0; overflow: hidden; position: relative; z-index: 1; } @media only screen and (max-width: 960px) { .about_culture_workstyle { background: transparent; padding-top: 238px; } } .workstyle_title_white { color: #FFF; background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-fill-color: #FFF; } .workstyle_policy { position: relative; margin-top: 68px; padding-top: 59px; margin-bottom: 77px; padding-bottom: 90px; } .workstyle_policy::before { content: "Healthy Self,\A Happy Home,\A High Results."; white-space: pre; position: absolute; top: 50%; left: -142px; transform: translateY(-50%); font-family: var(--font-heading); font-size: 185px; font-weight: 800; line-height: 1; color: rgba(255, 255, 255, 0.05); pointer-events: none; z-index: 0; } .workstyle_heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 16px; } .workstyle_heading_sub { font-size: 12px; font-weight: 700; line-height: 1.8; } .workstyle_policy_text span { display: inline-block; color: #FFF; font-size: 70px; font-weight: 800; line-height: 1.5; } .workstyle_policy_text { margin-top: 78px; margin-bottom: 90px; text-box-trim: none; } .workstyle_policy_detail { color: #FFF; line-height: 1.8; } .workstyle_policy_content_outer { background-image: url("../images/common/bg/bg_squircle_1340x740.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; aspect-ratio: 1340 / 740; max-width: 1340px; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .workstyle_policy_content_block { display: flex; justify-content: space-between; align-items: center; width: 82.69%; } .workstyle_policy_content_text { width: 50%; padding-left: 24px; padding-right: 38px; } .workstyle_policy_content_image { width: 58.57%; } .workstyle_policy_content_image img { width: 100%; } .workstyle_policy_content_text .workstyle_heading_sub { color: var(--color-gray); -webkit-text-fill-color: var(--color-gray); } .workstyle_text { font-size: clamp(22px, 2.78vw, 40px); font-weight: 800; line-height: 1.5; } .workstyle_policy_content_text .workstyle_text { margin-top: clamp(48px, 3.33vw, 62px); margin-bottom: clamp(30px, 5.56vw, 80px); } .workstyle_detail { font-size: 16px; font-weight: 400; line-height: 1.8; } .workstyle_howwework { margin-top: 120px; padding-bottom: 215px; } .howwework_content_block { display: flex; gap: 16px; max-width: 1340px; margin: 44px auto 0; } .howwework_content_outer { display: flex; justify-content: center; align-items: center; background-image: url("../images/common/bg/bg_squircle_666x500.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; aspect-ratio: 666 / 500; width: 100%; position: relative; } .howwework_content_title .workstyle_text { font-size: 8.51cqw; margin: 25px 0; } .howwework_content_image { object-fit:cover; position: absolute; top: 22.5%; right: 10%; width: 36%; } .howwework_content_image img { width: 100%; } .howwework_content_text { display: flex; flex-direction: column; align-items: stretch; width: 71%; height: 60%; } .howwework_content_title { flex-grow: 1; container-type: inline-size; } .howwework_content_text > .common_pc_h3 { display: block; text-box-trim: trim-both; text-box-edge: cap alphabetic; } .howwework_content_detail { display: flex; align-items: flex-start; max-height: 70px; } .howwework_content_detail p { line-height: 1.8; z-index: 1; } .vibes_content_text { text-box-trim: none; } .vibes_content_text span { display: inline-block; text-align: left; } @media only screen and (max-width: 1200px) { .howwework_content_block { flex-direction: column; gap: 50px; } .howwework_content_outer { width: min(666px, 100%); margin: 0 auto; } } @media only screen and (max-width: 960px) { .workstyle_policy { margin-top: 76px; padding: 0px; margin-bottom: 60px; } .workstyle_policy_text span { font-size: 40px; line-height: 1.6; } .workstyle_policy_text { margin-top: 65px; margin-bottom: 44px; } .workstyle_policy::before { font-size: 60px; top: 64%; left: -32px; } .workstyle_text .pc_br { /* display: none; */ } /* yamenai: 横並び → 縦並び、500x666 squircle（666x500を90度回転）に変更 */ .workstyle_policy_content_outer { background-image: url("../images/common/bg/bg_squircle_500x666.svg"); aspect-ratio: 500 / 666; width: min(666px, 100%); max-width: none; } .workstyle_policy_content_block { flex-direction: column-reverse; justify-content: center; width: 85%; } .workstyle_policy_content_text .workstyle_heading { flex-direction: column; gap: 5px 0; } .workstyle_policy_content_text { width: 82.68%; padding: 0px; } .workstyle_policy_content_image { width: 85%; margin-bottom: 30.68px; } .workstyle_policy_content_text .workstyle_text { margin-top: 48px; margin-bottom: 30px; } .howwework_content_block { display: block; } .howwework_content_outer { margin: 0 auto 30px; } .howwework_content_title .workstyle_text .pc_br { display: block; } .howwework_content_title br { display: none; } .howwework_content_image img { width: 100%; } .workstyle_howwework { margin-top: 100px; padding-bottom: 100px; } } @media only screen and (max-width: 640px) { .howwework_content_outer { background-image: url(../images/common/bg/bg_squircle_358x358.svg); aspect-ratio: 1 / 1; width: min(358px, 100%); aspect-ratio: 1 / 1; align-items: end; padding-bottom: min(60px, 16.5%); } .workstyle_howwework { padding-bottom: 70px; } .workstyle_policy_content_outer { background-image: url("../images/common/bg/bg_squircle_358x644.svg"); aspect-ratio: 358 / 644; width: min(358px, 100%); max-width: none; margin: 0 auto; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 358 644'%3E%3Cpath d='M356.591 548.088C351.955 628.403 332.382 637.984 252.184 642.61C231.895 643.785 207.722 644 178.931 644C150.14 644 125.994 643.785 105.714 642.619C25.5155 637.993 5.98734 628.421 1.37825 548.097C0.205843 527.772 0 336.861 0 308.009C0 279.157 0.205843 116.237 1.3693 95.9117C5.98733 15.5791 25.5155 6.01598 105.714 1.38072C125.994 0.206211 150.149 0 178.931 0C207.713 0 231.958 0.215177 252.265 1.38968C332.642 6.04288 352.08 15.7315 356.636 96.6469C357.772 116.829 357.987 278.479 357.987 306.99C357.987 306.99 358.231 519.67 356.591 548.088Z' fill='black'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 358 644'%3E%3Cpath d='M356.591 548.088C351.955 628.403 332.382 637.984 252.184 642.61C231.895 643.785 207.722 644 178.931 644C150.14 644 125.994 643.785 105.714 642.619C25.5155 637.993 5.98734 628.421 1.37825 548.097C0.205843 527.772 0 336.861 0 308.009C0 279.157 0.205843 116.237 1.3693 95.9117C5.98733 15.5791 25.5155 6.01598 105.714 1.38072C125.994 0.206211 150.149 0 178.931 0C207.713 0 231.958 0.215177 252.265 1.38968C332.642 6.04288 352.08 15.7315 356.636 96.6469C357.772 116.829 357.987 278.479 357.987 306.99C357.987 306.99 358.231 519.67 356.591 548.088Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-mode: alpha; mask-mode: alpha; } .workstyle_policy_content_block { width: 100%; padding: 0; } .workstyle_policy_content_text { width: 82.68%; } .workstyle_policy_content_text .workstyle_detail { padding-bottom: 10%; } .howwework_content_title .workstyle_text { margin: 20px 0 30px; } .howwework_content_text { width: 82.68%; height: auto; } .howwework_content_title .workstyle_text .pc_br { display: none; } .howwework_content_detail { max-height: 80px; } .workstyle_detail, .howwework_content_detail p { font-size: 13px; } .howwework_content_image { top: 11.5%; } .howwework_content_detail { max-height: 80px; } } /* vibes */ .vibes_img_block { margin-top: 226px; margin-bottom: 232px; overflow: hidden; width: 100%; } .vibes_img_block_row1, .vibes_img_block_row2 { display: flex; gap: 24px; width: max-content; will-change: transform; backface-visibility: hidden; /* 1サイクル = 元13アイテム幅 + 13個分のgap（接続gap含む） */ --vibes-cycle: calc(391px * 13 + 24px * 13); } .vibes_img_block_row1 { margin-bottom: 24.03px; animation: vibes-scroll-right 120s linear infinite; animation-play-state: paused; } .vibes_img_block_row2 { animation: vibes-scroll-left 120s linear infinite; animation-play-state: paused; } .vibes_img_block.is-visible .vibes_img_block_row1, .vibes_img_block.is-visible .vibes_img_block_row2 { animation-play-state: running; } @keyframes vibes-scroll-right { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--vibes-cycle))); } } @keyframes vibes-scroll-left { from { transform: translateX(calc(-1 * var(--vibes-cycle))); } to { transform: translateX(0); } } .vibes_img { flex-shrink: 0; position: relative; width: 391px; height: 293px; overflow: hidden; -webkit-mask-image: var(--mask-squircle-gallery); mask-image: var(--mask-squircle-gallery); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .vibes_img img { width: 100%; height: 100%; object-fit: cover; display: block; } .vibes_img_caption { position: absolute; bottom: 29px; left: 50%; transform: translateX(-50%); color: #FFF; font-size: 12px; font-weight: 700; opacity: 0; /* ちょっとゆっくり現れる */ transition: opacity 0.3s ease; z-index: 20; } @media (hover: hover) { .vibes_img:hover .vibes_img_caption { opacity: 1; } } @media (hover: none) { .vibes_img:active .vibes_img_caption { opacity: 1; } } .vibes_img::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='391' height='293' viewBox='0 0 391 293' fill='none'%3E%3Cpath d='M391 146.5C391 278.409 371.528 293 195.5 293C19.4718 293 0 278.409 0 146.5C0 14.5914 19.4718 0 195.5 0C371.528 0 391 14.5914 391 146.5Z' fill='url(%23paint0_linear_9009_7616)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_9009_7616' x1='196' y1='205' x2='195.5' y2='293' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white' stop-opacity='0'/%3E%3Cstop offset='1' stop-opacity='0.4'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } @media (hover: hover) { .vibes_img:hover::after { opacity: 1; } } @media (hover: none) { .vibes_img:active::after { opacity: 1; } } @keyframes scroll-right { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-100%); } } .about_culture_vibes { text-align: center; margin-bottom: 60px; } .about_culture_vibes h2 { margin: 0 auto 60px; } .about_culture_vibes p { line-height: 1.8; } .vibes_video { margin-top: 62px; margin-bottom: 200px; max-width: 1069px; width: 100%; aspect-ratio: 560 / 315; margin-left: auto; margin-right: auto; } .vibes_video iframe { width: 100%; height: 100%; } .vibes_video_thumbnail { position: relative; width: 100%; height: 100%; cursor: pointer; background: #000; } .vibes_video_thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; } .vibes_video_play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: none; background: none; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; } @media (hover: hover) { .vibes_video_thumbnail:hover .vibes_video_play { opacity: 1; } } @media (hover: none) { .vibes_video_thumbnail:active .vibes_video_play { opacity: 1; } } @media only screen and (max-width: 960px) { .vibes_img { width: 147px; height: 110px; } .vibes_img_block { margin-top: 100px; margin-bottom: 90.9px; } .vibes_img_block_row1, .vibes_img_block_row2 { gap: 12px; --vibes-cycle: calc(147px * 13 + 12px * 13); } .vibes_img_block_row1 { margin-bottom: 12px; } .about_culture_vibes { margin-bottom: 0px; } .about_culture_vibes h2 { margin-bottom: 28px; } .vibes_video { margin-top: 60px; margin-bottom: 100px; } } /* footer */ .footer_joinus { position: relative; width: 100%; /* 608/1440 = 42.22vw（margin-top -7.5vw と合わせて見える高さ 34.72vw = 500px @1440） */ height: 42.22vw; min-height: 400px; overflow: hidden; } .footer_joinus::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; z-index: 0; background-image: url("../images/footer/footer_back_green.svg"); background-repeat: no-repeat; background-size: 122.137vw auto; background-position: -11.281vw -16.964vw; -webkit-mask-image: var(--footer-mask); mask-image: var(--footer-mask); -webkit-mask-size: 315.417vw 315.486vw; mask-size: 315.417vw 315.486vw; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; } .footer_joinus > * { position: relative; z-index: 1; } .footer_joinus_inner { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: clamp(40px, calc(2.517vw + 29.75px), 66px); /* 185/1440 = 12.85vw（footer_joinus高さと比例） */ margin-top: 12.85vw; } .footer_joinus_left p { color: #FFF; font-size: clamp(50px, 5.56vw, 80px); font-weight: 800; font-family: var(--font-heading); display: block; padding: 0; margin: 0; } .footer_joinus_right_text { color: #FFF; text-shadow: 0 0 10px rgba(0, 0, 0, 0.12); font-size: 16px; font-weight: 500; line-height: 1.8; } .footer_joinus_right_btn_wrap { margin-top: clamp(20px, calc(4.454vw + 1.87px), 66px); } .footer_joinus_right_btn { display: flex; align-items: center; flex-wrap: nowrap; font-size: 16px; font-weight: 700; width: fit-content; gap: 10px; padding: 18px 26px; border-radius: 30px; background-color: #FFF; border: 2px solid #FFF; box-sizing: border-box; transition: background-color 0.3s, border-color 0.3s; } .footer_joinus_right_btn span { color: var(--color-brand-dark); white-space: nowrap; transition: color 0.3s; } @media (hover: hover) { .footer_joinus_right_btn:hover { background-color: var(--color-brand-dark); border-color: #FFF; } .footer_joinus_right_btn:hover span { color: #FFF; } } @media (hover: none) { .footer_joinus_right_btn:active { background-color: var(--color-brand-dark); border-color: #FFF; } .footer_joinus_right_btn:active span { color: #FFF; } } @media only screen and (max-width: 960px) { .footer_joinus_right_btn_wrap { margin-top: 25px; } .footer_joinus_right_btn { gap: 8px; font-size: 14px; padding: 16px 20px; } .footer_joinus_right_btn img { width: 16px; height: 14px; } .footer_joinus_right_text { padding-top: 0.8em; } } .footer_bottom { position: relative; width: 100%; min-height: 661px; overflow: hidden; /* -108px at 1440px = -7.5vw（マスクサイズがvw基準のため比例） */ margin-top: -7.5vw; } .footer_bottom::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; z-index: 0; background-color: var(--color-brand-dark); -webkit-mask-image: var(--footer-mask); mask-image: var(--footer-mask); -webkit-mask-size: 315.417vw 315.486vw; mask-size: 315.417vw 315.486vw; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .footer_bottom > * { position: relative; z-index: 1; } .footer_bottom .common_wrap { position: relative; z-index: 1; } .footer_bottom_content { display: flex; justify-content: space-between; align-items: flex-start; padding-top: clamp(86px, calc(5.518vw + 63.54px), 143px); gap: clamp(0px, 11.94vw, 172px); } .footer_follow_title { color: #FFF; font-family: var(--font-heading); font-size: 16px; font-weight: 800; margin:61px 0px 17px 20px; } .footer_follow_list { margin-left: 11px; display: flex; align-items: center; gap: 8px; } .footer_nav { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(0px, 4.79vw, 69px); flex-wrap: wrap; } .footer_nav > li { flex-shrink: 0; white-space: nowrap; } .footer_nav li a { color: #FFF; font-size: 16px; font-weight: 700; display: block; margin-bottom: 38px; } .footer_nav_list li a{ font-size: 14px; font-weight: 500; line-height: 1.5; display: block; margin-bottom: 30px; } .footer_sub { display: flex; justify-content: space-between; align-items: center; margin-top: clamp(60px, calc(7.454vw + 29.68px), 137px); margin-bottom: clamp(40px, calc(3.485vw + 25.81px), 76px); } .footer_sub_list { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .footer_sub_list li a { color: var(--color-white); font-size: 14px; font-weight: 500; } .footer_bottom_copy { color: var(--color-white); font-size: 12px; font-weight: 400; } .sp_footer_bottom .footer_bottom_copy { text-align: end; margin-bottom: 60px; } .sp_footer_bottom { display: none; position: relative; overflow: hidden; padding-top: 86px; } .sp_footer_content { padding: 0px 55.5px; } .sp_footer_bottom .sp_footer_content { position: relative; z-index: 1; } .sp_footer_nav_group { display: flex; justify-content: center; gap: 47px; margin-bottom: 32px; } .sp_footer_nav_group a { display: inline-block; width: 107px; } .sp_footer_nav_group ul { width: 142px; } .sp_footer_link_block { display: flex; justify-content: center; align-items: first baseline; gap: clamp(10px, 15.88%, 47px); } .sp_footer_sub_list li { margin-bottom: 20px; } .sp_footer_sub_list li a { color: #FFF; font-size: 12px; font-weight: 400; } .sp_footer_logo_title { color: #FFF; font-family: var(--font-heading); font-size: 14px; font-weight: 800; margin-bottom: 22px; } .sp_footer_link_left { width: 107px; } .sp_footer_link_right { width: 142px; } .sp_footer_logo_follow { display: flex; align-items: center; margin-left: -8px; } .sp_logo_note { width: 73px; margin-right: 7px; } .sp_logo_x { width: 19px; } .sp_footer_bottom_logo { text-align: end; margin-top: 56.81px; margin-bottom: 16.75px; } .top_footer { background-color: var(--color-white); } @media only screen and (max-width: 960px) { .footer_joinus { height: auto; min-height: 0; padding-top: 75px; /* 重なり225px + 隙間65px = 290px */ padding-bottom: 290px; } .footer_joinus_inner { gap: 40px; display: block; justify-content: flex-start; max-width: 500px; margin: 0px auto; padding: 0 53px; } .footer_joinus_left { margin-bottom: 40px; } .footer_joinus_right_btn_wrap { display: flex; justify-content: end; } .top_footer_joinus .footer_joinus_right_btn_wrap { display: flex; justify-content: center; } .footer_joinus::before { background-image: url("../images/footer/sp_footer_greeen.svg"); background-size: 100vw auto; background-position: 0 0; -webkit-mask-size: 371.007vw 371.007vw; mask-size: 371.007vw 371.007vw; -webkit-mask-position: top center; mask-position: top center; } .footer_bottom { display: none; margin-top: -180px; } .sp_footer_bottom::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; z-index: 0; background-color: var(--color-brand-dark); -webkit-mask-image: var(--footer-mask); mask-image: var(--footer-mask); -webkit-mask-size: 371.007vw 371.007vw; mask-size: 371.007vw 371.007vw; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .sp_footer_bottom > * { position: relative; z-index: 1; } .footer_bottom_content { flex-direction: column-reverse; align-items: center; gap: 0px; } .footer_nav { display: block; } .footer_nav_group { display: flex; gap: 47px; margin-bottom: 40px; } .footer_nav_title { width: 107px; } .footer_nav li a { font-size: 14px; font-weight: 500; } .footer_nav_list li a { font-size: 12px; margin-bottom: 12px; font-weight: 400; } .sp_footer_bottom { display: block; margin-top: -225px; } .top_footer .sp_footer_bottom { margin-top: -300px; } } /* mission */ .mission_page { padding-bottom: 0px; } .mission_header_wrap { background-color: var(--color-bg); } .mission_page .values_slider_container { padding-top: 0; } .mission_page .values_slider_wrapper { gap: clamp(0px, 3.056vw, 44px); } .mission_page .values_text_area { flex: 1; min-width: 0; margin-top: 22px; } .about_mission_text { margin-top: 120px; padding-bottom: 31px; } .about_mission { background-color: var(--color-white); padding-bottom: 200px; } .mission_footer .footer_joinus { margin-top: 0px; } .mission_content { margin-top: 31px; padding-top: 192px; } .mission_img { max-width: 610px; } .mission_content .about_value_content_block { align-items: flex-start; padding-bottom: 258px; } .mission_text { font-size: clamp(24px, 3.33vw, 48px); font-weight: 800; line-height: 1.8; margin-top: 134px; } .mission_letter_spacing1 { } .vision_detail { font-size: 14px; font-weight: 500; line-height: 2; margin-top: 34px; text-box-trim: trim-start; } .vision_text { font-size: clamp(24px, 3.33vw, 48px); font-weight: 800; line-height: 1.5; margin-top: 54px; text-box-trim: trim-start; } .mission_footer { background-color: var(--color-white); } @media only screen and (max-width: 960px) { .about_mission { padding-bottom: 79px; background-color: var(--color-bg); } .about_mission_text { margin-top: 79px; padding-bottom: 0px; } .mission_content { margin-top: 36px; padding-top: 52px; } .mission_text, .vision_text { font-size: 24px; line-height: 1.6; } .mission_text { margin-top: 36px; margin-bottom: 121px; } .vision_detail { font-size: 13px; font-weight: 500; line-height: 2; padding-left: 3px; text-box-trim: trim-both; } .vision_detail .sp_br { display: block; } .vision_text { margin-top: 40px; margin-bottom: 58px; text-box-trim: trim-both; } .mission_content .about_value_content_block { align-items: center; padding-bottom: 0px; } .mission_footer { background-color: var(--color-bg); } } /* news */ .news_page { padding-bottom: clamp(120px, calc(7.744vw + 88.48px), 200px); } .news_list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 31px; row-gap: clamp(10px, calc(8.713vw - 25.46px), 100px); margin-bottom: clamp(50px, calc(4.841vw + 30.3px), 100px); } .news_category_block { position: relative; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding-bottom: 30px; margin-bottom: 79px; margin-top: 122px; } .news_category_block::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-color: #EBEBEB; border-radius: 2px; } .news_category_list { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 20px; } .news_category_list li a { color: var(--color-brand-dark); font-size: 16px; font-weight: 500; padding: 0px 10px 29px; } @media (hover: hover) { .news_category_list li a:hover { color: var(--color-brand-green); } } @media (hover: none) { .news_category_list li a:active { color: var(--color-brand-green); } } .news_category_list .category_highlight a { color: var(--color-brand-green); position: relative; font-weight: 800; } .category_highlight a::after { content: ""; position: absolute; left: 0; bottom: 1.5px; width: 100%; height: 3px; background: var(--color-brand-green); border-radius: 1.5px; z-index: 1; } .news_card_item { display: flex; flex-direction: column; container-type: inline-size; } .news_card_wrap { text-decoration: none; color: inherit; display: block; clip-path: var(--clip-squircle); /* 初回ペイント時に inline SVG の登録が間に合わず矩形表示される競合を回避（クリック領域のため clip-path は維持） */ will-change: clip-path; } .news_card_meta { display: flex; align-items: center; gap: 14px; margin-bottom: 17px; } .news_card_category { font-size: 15px; font-weight: 700; color: var(--color-brand-green); padding: 10px 0px 10px 5px; } .news_card_date { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--color-gray); padding: 10px 0; } .news_card { display: flex; flex-direction: column; aspect-ratio: 1 / 1; overflow: hidden; /* mask-image だと子の transform と合成順が衝突して描画されないため clip-path を使用 */ clip-path: var(--clip-squircle-card); } @media (hover: hover) { .news_card:hover .news_card_upper::before { transform: scale(1.05); } .news_card:hover .news_card_lower { background: var(--color-brand-green); } .news_card:hover .news_card_title { color: #fff; } } @media (hover: none) { .news_card:active .news_card_upper::before { transform: scale(1.05); } .news_card:active .news_card_lower { background: var(--color-brand-green); } .news_card:active .news_card_title { color: #fff; } } .news_card_upper { flex: 220; min-height: 0; background-size: cover; background-position: center; background-color: #fff; /* upper のボックス自体は拡大せず、内側の画像 (::before) だけスケールさせる。 upper を transform するとボックスが下方向に膨らみ news_card_lower に被さってしまうため */ position: relative; overflow: hidden; } .news_card_upper::before { content: ""; position: absolute; inset: 0; background-image: var(--news-img); background-size: cover; background-position: center; transform: scale(1); transition: transform 0.3s ease; } .news_card_lower { flex: 171; min-height: 0; box-sizing: border-box; background: #fff; transition: background 0.3s ease; overflow: hidden; } .news_card_title { font-size: 18px; font-weight: 800; line-height: 1.8; color: var(--color-brand-dark); /* 30/391=7.67%, 40/391=10.23%, 50/391=12.79%, 41/391=10.49% */ margin: 7.67% 10.23% 12.79% 10.49%; transition: color 0.3s ease; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-box-trim: none; } .pagination ul { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: min(20px, 3.5vw); padding: 17px 0px; } .pagination ul li a, .pagination ul li .current { font-size: 16px; font-weight: 800; font-family: var(--font-heading); } .page_highlight a, .page_highlight .current { color: #fff; background-image: url(../images/common/icon_page_highlight.svg); background-size: 46px 45px; background-position: center center; background-repeat: no-repeat; padding: 17px 18px; margin: 1px; } .pagination ul li:has(.prev) { margin-right: min(12px, 2vw); } .pagination ul li:has(.next) { margin-left: min(12px, 2vw); } @media (hover: hover) { .pagination ul li a:hover { color: var(--color-brand-green); } } @media (hover: none) { .pagination ul li a:active { color: var(--color-brand-green); } } .pagination ul li a.prev svg path, .pagination ul li a.next svg path { fill: var(--color-brand-dark); transition: fill 0.2s; } @media (hover: hover) { .pagination ul li a.prev:hover svg path, .pagination ul li a.next:hover svg path { fill: var(--color-brand-green); } } @media (hover: none) { .pagination ul li a.prev:active svg path, .pagination ul li a.next:active svg path { fill: var(--color-brand-green); } } @media only screen and (max-width: 960px) { .news_list { grid-template-columns: repeat(2, 1fr); } } @media only screen and (max-width: 640px) { .news_category_block { display: block; padding-bottom: 20px; margin-top: 50px; margin-bottom: 50px; } .news_category_list { justify-content: space-between; flex-wrap: nowrap; gap: 0px; } .news_category_list li a { padding-bottom: 19px; font-size: 12px; font-weight: 700; } .news_list { gap: 10px; } .news_card_meta { gap: 10px; margin-bottom: 12px; } .news_card_category { font-size: 10px; font-weight: 700; padding: 0 0 0 5px; } .news_card_date { font-size: 12px; font-weight: 700; } .news_card_wrap { clip-path: var(--clip-squircle-sp); } .news_card { aspect-ratio: 174 / 202; --mask-superellipse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 174 202' fill='none'%3E%3Cpath d='M173.315 150.633C171.062 189.585 161.549 199.082 122.57 201.326C112.709 201.896 100.96 202 86.9664 202C72.973 202 61.2371 201.896 51.3804 201.33C12.4014 199.087 2.91005 189.594 0.669876 150.637C0.100046 140.779 0 114.997 0 101.004C0 87.0113 0.100046 61.2249 0.665526 51.3672C2.91005 12.4059 12.4014 2.91775 51.3804 0.669648C61.2371 0.100012 72.9773 0 86.9664 0C100.956 0 112.739 0.104361 122.609 0.673996C161.675 2.9308 171.123 12.4798 173.337 51.7238C173.889 61.5119 173.994 86.6824 173.994 100.51C173.994 100.51 174.112 136.85 173.315 150.633Z' fill='black'/%3E%3C/svg%3E"); } .news_card_upper { flex: 0 0 48.5%; background-size: cover; background-position: center; } /* SP ではホバー拡大不要 — ::before を非表示にして親が CSS 変数で画像を直接表示 */ .news_card_upper { background-image: var(--news-img); } .news_card_upper::before { display: none; } .news_card_title { font-size: 16px; font-weight: 800; line-height: 1.6; -webkit-line-clamp: 4; } .news_card_item { margin-bottom: 30px; } } @media only screen and (max-width: 460px) { .news_card_title { font-size: 11px; /* 14/174=8.05%, 18/174=10.34% */ margin: 8.05% 10.34% 0; } } @media only screen and (max-width: 390px) { .news_card_title { -webkit-line-clamp: 3; } } /* service */ .service_page { background-color: var(--color-white); padding-bottom: 0; } .service_header_wrap { background: linear-gradient(180deg, #FFF 70%, var(--color-bg) 100%); } @media only screen and (max-width: 960px) { .service_header_wrap { background: var(--color-bg); } .service_body { background-color: var(--color-bg); } } .service_body { background-color: #FFF; } .service_message { /* PC: 165px 83px 291px, SP: 80px 0px 100px */ padding: clamp(80px, calc(8.228vw + 46.5px), 165px) clamp(0px, calc(8.035vw - 32.7px), 83px) clamp(100px, calc(18.49vw + 24.74px), 291px); } .service_text_main { /* PC: 61px @1440, SP: 34px @407, 407以下も緩やかに縮小 */ font-size: clamp(28px, calc(2.6137vw + 23.36px), 61px); font-weight: 800; line-height: 1.5; margin-bottom: clamp(42px, calc(0.774vw + 38.85px), 50px); } .service_text_main .fadein_up_wrap { display: block; } /* h1アニメーション後にフェードイン開始 */ .service_message .service_text_main .fadein_up_wrap > * { transition-delay: 0.3s; } .service_message .service_text_main .fadein_up_wrap--delay1 > * { transition-delay: 0.45s; } .service_message .service_text_main .fadein_up_wrap--delay2 > * { transition-delay: 0.6s; } .service_message .service_text_main .fadein_up_wrap--delay3 > * { transition-delay: 0.75s; } .service_message .service_text_main .fadein_up_wrap--delay4 > * { transition-delay: 0.9s; } .service_message .service_text_main .fadein_up_wrap--delay5 > * { transition-delay: 1.05s; } .service_message .service_text_main .fadein_up_wrap--delay6 > * { transition-delay: 1.2s; } .service_text_main .sp_br { display: none; } @media only screen and (min-width: 374px) and (max-width: 460px) { .service_text_main .sp_br { display: block; } } .service_text_sub { line-height: 2; max-width: 556px; margin-left: auto; } .service_text_sub .fadein_up_wrap { display: block; } .service_wrap { background-color: var(--color-bg); padding: 80px 0px 200px; } .service_block { background-image: url(../images/service/service_back_white_square.svg); background-size: cover; background-repeat: no-repeat; margin: 0px auto 120px; container-type: inline-size; background-position: top center; max-width: 1340px; aspect-ratio: 1 / 1; } .service_block_main { display: flex; justify-content: center; align-items: center; gap: 6.418cqw; margin-top: calc(7.91cqw - 50px); /* 136/1340=10.15%, 103/1340=7.69% */ padding-right: 10.15%; padding-left: 7.69%; } .service_block .common_pc_h1, .service_block_rectangle .common_pc_h1 { display: block; font-family: var(--font-heading); font-size: 100px; text-align: center; position: relative; top: -50px; margin: 0px auto; } .service_sub_title { display: flex; align-items: center; gap: 7px; margin-bottom: 24px; } .service_sub_title img { width: 12px; height: 12px; } .service_sub_title p { font-size: 15px; line-height: 1.4; } .service_sub_title p span { display: inline-block; } .service_main_title { /* PC: 40px, SP: 32px */ font-size: clamp(32px, calc(0.774vw + 28.85px), 40px); font-weight: 800; margin-bottom: 100px; } .service_main_title span { display: inline-block; } .service_main_title .fadein_up_wrap { display: block; } .service_detail { line-height: 1.8; margin-bottom: 36px; } .common_arrow_btn { display: inline-flex; justify-content: center; align-items: center; flex-wrap: nowrap; white-space: nowrap; padding: 18px 26px; background-color: var(--color-brand-dark); cursor: pointer; border: 2px solid var(--color-brand-dark); box-sizing: border-box; border-radius: 30px; gap: 10px; transition: all 0.3s; width: fit-content; } @media (hover: hover) { .common_arrow_btn:hover { background-color: var(--color-white); } .common_arrow_btn:hover p, .common_arrow_btn:hover span { color: var(--color-brand-dark); } .common_arrow_btn:hover svg path { fill: var(--color-brand-dark); } } @media (hover: none) { .common_arrow_btn:active { background-color: var(--color-white); } .common_arrow_btn:active p, .common_arrow_btn:active span { color: var(--color-brand-dark); } .common_arrow_btn:active svg path { fill: var(--color-brand-dark); } } .common_arrow_btn p, .common_arrow_btn span { color: #FFF; font-weight: 600; letter-spacing: 0.05em; } .common_arrow_btn--center { display: flex; width: fit-content; margin: 30px auto 0; } .service_block_voices { /* 136/1340=10.15%, 130/1340=9.7% */ margin: 0 10.15% 0 9.7%; margin-top: 7.985cqw; } .voices_title_jp { color: var(--color-gray); font-size: 12px; font-weight: 700; margin-top: 12px; margin-bottom: 4px; } .voices_block { display: flex; justify-content: flex-end; gap: 18px; margin-top: 16px; } .voices_block_content_outer { background-image: url(../images/service/service_back_green_square.svg); background-size: contain; background-repeat: no-repeat; width: 388px; height: 388px; display: flex; align-items: center; justify-content: center; } .voices_block_content { display: flex; flex-direction: column; } .voices_block_content_outer .voices_block_content { width: 66.24%; height: 60%; } .voice_title { font-weight: 800; font-size: 16px; line-height: 1.8; /* テキスト1行分の余白 */ margin-bottom: 1em; text-box-trim: trim-both; } .voice_title img { width: 12px; height: 12px; margin-right: 5px; } .user_comment { line-height: 1.8; flex-grow: 1; margin-bottom: 0.8em; } .user { display: flex; justify-content: end; align-items: center; gap: 8px; white-space: nowrap; } .user p { font-size: 14px; } .service_block_rectangle { background-image: url(../images/common/bg/bg_squircle_1340x720.svg); /* 横は1340px固定で画面外にはみ出した部分は自動カット、縦は要素に追従し中身が伸びても padding-bottom がsquircle内に収まる */ background-size: 1340px 100%; background-repeat: no-repeat; background-position: top center; aspect-ratio: 1340 / 720; container-type: inline-size; margin: 115px auto 0; /* 138/1340=10.3%, 166/1340=12.39%, 134/1340=10% */ padding: 0 min(10.3%, 138px) 0 min(10%, 134px); max-width: 1340px; } .service_block_rectangle_content { display: flex; align-items: stretch; gap: clamp(10px, 5.694vw ,82px); margin-top: 4.85cqw; } .voice_block { width: 458px; flex-shrink: 0; } .service_block_rectangle_content .service_text_block { flex: 1; min-width: 0; width: auto; display: flex; flex-direction: column; } .service_image_block { /* 556/1340 = 41.49cqw */ width: 41.49cqw; flex-shrink: 0; } .service_image_block img { width: 100%; } .service_text_block { /* 459/1340 = 34.25cqw */ width: 34.25cqw; flex-shrink: 0; } .voices_block_rectangle_outer { background-image: url(../images/service/service_back_green_rectangle.svg); background-size: contain; background-repeat: no-repeat; width: 458px; height: 344px; margin-top: 20px; display: flex; justify-content: center; align-items: center; } .voices_block_rectangle { width: 70.52%; height: auto; min-height: 65%; } .service_footer .footer_joinus { background-color: var(--color-bg); margin-top: 0px; } .service_block_rectangle_content .service_main_title { line-height: 1.5; margin-bottom: 70px; } .service_block_rectangle_content .service_detail { font-size: 16px; margin-top: 27px; flex-grow: 1; } @media only screen and (min-width: 961px) and (max-width: 1200px) { .voice_block { width: 388px; } .voices_block_rectangle_outer { background-image: url(../images/service/service_back_green_square.svg); width: 388px; height: 388px; } } @media only screen and (max-width: 960px) { .service_page { background-color: var(--color-bg); } .service_block { padding: 0 22px; aspect-ratio: unset; } .service_block_main { display: block; max-width: 556px; padding-right: 0px; padding-left: 0px; margin: 25px auto 0; } .service_image_block, .service_text_block { width: 100%; } .service_block_voices { max-width: 556px; margin: 79.59px auto 0px; } .voices_block { display: block; margin: 40px 0 75px; } .voices_block_content_outer { margin: 0 0 30px auto; } .service_sub_title { margin-top: 41.49px; margin-bottom: 20.25px; } .service_main_title { margin-bottom: 39.97px; } .service_wrap .common_arrow_btn { display: flex; width: fit-content; margin: 0 auto; } .service_block_rectangle { background-image: url(../images/service/service_back_white_square.svg); background-size: cover; background-position: top center; padding: 0 22px; aspect-ratio: 1 / 1; height: auto; } .service_block_rectangle_content { display: block; max-width: 556px; margin: 0 auto; } .service_block_rectangle_content .service_main_title { margin-bottom: 40px; } .service_image_block img { width: 100%; } .voices_block_rectangle_outer { margin: 40px 0 100px auto; } .service_text_block { margin-bottom: 80px; } .service_detail { margin-bottom: 45px; } .service_block_rectangle .voice_title_block { display: flex; justify-content: left; align-items: flex-end; gap: 12px; } .voice_block { width: 100%; } } @media only screen and (max-width: 640px) { .service_text_sub { max-width: 100%; } .service_block .common_pc_h1, .service_block_rectangle .common_pc_h1 { font-size: 50px; top: -25px; } .service_sub_title p { font-size: 12px; } .service_block_voices h2 { font-size: 20px; } .voice_title_block .common_pc_h3 { font-size: 20px; } .voices_title_jp { margin-top: 0px; } .user p { font-size: 12px; } .voices_block_content_outer { width: min(87.96vw, 358px); height: auto; aspect-ratio: 1 / 1; margin-right: auto; } .voices_block_rectangle_outer { background-image: url(../images/service/service_back_green_square.svg); background-size: contain; background-repeat: no-repeat; background-position: top center; width: min(358px, 100%); height: auto; aspect-ratio: 1 / 1; margin: 40px auto 75px; } .voices_block_rectangle { width: 71.5%; min-height: 70%; } .voice_title { font-weight: 700; line-height: 1.8; } .voice_title .sp_br { display: block; } .user_comment { font-size: 15px; } .service_block_voices .voice_title_block { display: flex; justify-content: left; align-items: flex-end; gap: 12px; } .voices_block_content_outer .voices_block_content { width: 71.5%; height: 70%; } .common_arrow_btn { padding: 16px 24px; } .common_arrow_btn p, .common_arrow_btn span { font-size: 14px; } .common_arrow_btn svg { width: 16px; height: 14px; } .service_wrap { padding-top: 25px; padding-bottom: 100px; } .service_block { margin-bottom: 125px; } .service_block_rectangle { margin-bottom: 0px; } } /* members */ .members_page { padding-bottom: 0px; } .about_members { padding-top: 120px; background: linear-gradient(180deg, var(--color-bg) 0%, #fff 192px); } .members_content { margin-bottom: 200px; } .group_block { margin-bottom: 150px; } .group_name_block { margin: 60px 0px 50px; } .group_name_block span { display: inline-block; } .group_name_en { font-family: var(--font-heading); font-size: 24px; font-weight: 800; margin-right: 15px; } .group_name_jp { color: var(--color-gray); font-size: 14px; font-weight: 700; } .group_member_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(287px, 100%), 287px)); justify-content: center; gap: 70px 29px; } .member_block { width: 100%; display: flex; flex-direction: column; margin: 0 auto; } .member_img { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; --member-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 287 287'%3E%3Cpath d='M143.5 3.35433e-05C280.225 2.75669e-05 287 6.8252 287 143.543C287 280.26 280.225 287 143.5 287C6.7752 287 -2.94284e-07 280.268 -6.27071e-06 143.543C-1.22471e-05 6.81808 6.77519 3.95197e-05 143.5 3.35433e-05Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image: var(--member-mask); mask-image: var(--member-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .member_img img { width: 100%; object-fit: cover; display: block; } .member_info { margin: 25px 24px 0px 5px; flex: 1; display: flex; flex-direction: column; gap: 16px; } .member_info span { display: inline-block; } .member_position { font-size: 12px; line-height: 1.5; } .member_name_jp { font-size: 20px; font-weight: 800; line-height: 1.5; } .member_name_en { font-family: var(--font-heading); color: var(--color-gray-light); font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: normal; } .members_footer { padding-top: 200px; background-color: var(--color-white); } @media only screen and (max-width: 960px) { .member_block { max-width: 287px; } .group_name_block { margin: 32px 0px 35px; } .group_name_en { font-family: var(--font-heading); font-size: 20px; font-weight: 800; margin-right: 8px; } .group_name_jp { font-size: 13px; } .member_info { margin: 18px 0px 0px; gap: 11px; } .member_name_jp { font-size: 16px; } .group_block { margin-bottom: 100px; } .members_content { margin-bottom: 0px; } .about_members { padding-top: 73px; } .members_footer { padding-top: 79px; } } @media only screen and (max-width: 660px) { .group_member_list { grid-template-columns: 1fr 1fr; gap: 36px 14px; } .member_name_en { font-size: 14px; } } /* message */ .about_greetings { margin-top: 120px; } .message_content_block { display: flex; justify-content: space-between; align-items: flex-start; padding: 0px 84px; margin-top: 55px; } .message_content_text_block { padding-left: clamp(0px, 5.83vw, 84px); } .message_content_img_block { flex: 0 0 390px; max-width: 390px; cursor: pointer; overflow: hidden; position: relative; } .message_content_img_block img { width: 100%; display: block; } .message_content_img_block img:last-of-type { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.1s; --member-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 287 287'%3E%3Cpath d='M143.5 3.35433e-05C280.225 2.75669e-05 287 6.8252 287 143.543C287 280.26 280.225 287 143.5 287C6.7752 287 -2.94284e-07 280.268 -6.27071e-06 143.543C-1.22471e-05 6.81808 6.77519 3.95197e-05 143.5 3.35433e-05Z' fill='black'/%3E%3C/svg%3E"); -webkit-mask-image: var(--member-mask); mask-image: var(--member-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @media (hover: hover) and (min-width: 971px) { .message_content_img_block:hover img:last-of-type { opacity: 1; } } @media only screen and (max-width: 970px) { .message_content_img_block img, .message_content_img_block img:last-of-type { transition: opacity 0.3s ease; } .message_content_img_block.is-toggled img:last-of-type { opacity: 1; } .message_content_img_block.is-toggled img:first-of-type { opacity: 0; } } .message_text { font-size: 40px; font-weight: 800; line-height: 1.5; } .message_detail { font-weight: 500; line-height: 2; margin-top: 50px; } .message_sign { text-align: end; margin-top: 61px; margin-bottom: 93px; } .message_sign p { font-weight: 500; margin-bottom: 26px; } .sign_img { width: 183px; margin-left: auto; } .sign_img img { width: 100%; } @media only screen and (max-width: 1350px) { .message_content_block { padding: 0px; } } @media only screen and (max-width: 970px) { .about_greetings { margin-top: 99px; } .message_content_block { display: block; margin-top: 35px; } .message_content_text_block { width: 100%; padding: 0px; } .message_content_img_block { width: min(100%, 355px); margin: 0px auto 50px; } .message_text { font-size: 24px; line-height: 1.6; margin-top: 40px; margin-bottom: 36px; } .message_detail { font-size: 14px; font-weight: 500; line-height: 2; } .message_sign { margin-top: 30px; margin-bottom: 100px; } .message_sign p { font-size: 13px; } .sign_img { width: 199px; margin-right: 0px; margin-left: auto; } } /* company */ .about_company { margin-top: 120px; } .company_content { margin-bottom: 200px; } .company_content table { margin-top: 40px; width: 100%; } .company_content table tr { border-bottom: 1px solid #DBDBDB; } .company_content table th, .company_content table td { padding-top: 40px; padding-bottom: 40px; } .company_content table th { text-align: left; font-size: 16px; font-weight: 700; width: 20.146%; } .company_content table td p { line-height: 2; text-box-trim: none; } .company_access_title { font-size: 16px; font-weight: 700; margin-top: 20px; margin-bottom: 4px; } .company_content table td iframe { border-radius: 16px; width: 100%; height: auto; aspect-ratio: 986 / 491; margin-top: 21px; margin-bottom: 20px; } .company_content .company_link_block { margin-top: 30px; text-align: end; } .sp_post_code { display: none; } @media only screen and (max-width: 960px) { .about_company { margin-top: 81px; } .company_content { margin-bottom: 80px; } } @media only screen and (max-width: 680px) { .company_content table, .company_content table tr, .company_content table th, .company_content table td { display: block; width: 100%; } .company_content table th { padding-top: 32px; padding-bottom: 24px; } .company_content table td { padding-top: 0px; padding-bottom: 32px; } .post_code { display: none; } .sp_post_code { display: block; } .company_content .company_link_block { margin-top: 20px; } .company_content table td iframe { aspect-ratio: 358 / 268; margin-top: 32px; margin-bottom: 0px; } } /* contact */ .contact_main_content { margin-top: 100px; } .contact_footer_bottom, .contact_footer .footer_bottom { margin-top: 0; } .contact_text { font-weight: 700; line-height: 1.8; max-width: 1020px; margin-bottom: 45px; } .contact_form_layout { margin-top: 55px; display: flex; align-items: flex-start; border-top: 1px solid var(--color-gray-light); padding-top: 80px; } .contact_complete .contact_form_layout { border-top: none; } .contact_stepper { flex: 1; display: flex; flex-direction: column; } .contact_stepper_sticky { position: sticky; top: 100px; padding-bottom: 60px; } @media only screen and (max-width: 960px) { .contact_stepper_sticky { position: static; } } .contact_form_spacer { flex: 1; } .contact_stepper_item:first-child { padding-top: 0; } .contact_stepper_item:first-child::after { top: 12px; height: calc(100% + 16px - 12px); } .contact_stepper_item { display: flex; align-items: center; gap: 35px; position: relative; padding: 26.5px 0; font-size: 16px; font-weight: 700; color: var(--color-gray-light); } .contact_stepper_item:not(:last-child)::after { content: ""; position: absolute; left: 5.5px; top: 11px; width: 1px; height: calc(100% + 18px); background-color: var(--color-gray-light); } .contact_stepper_item svg { position: relative; z-index: 1; } .contact_stepper_item.is-active svg path { fill: var(--color-brand-green); } .contact_stepper_item span { color: var(--color-gray-light); font-weight: 700; font-size: 16px; } .contact_stepper_item.is-active span { color: var(--color-brand-dark); } /* contact form */ .contact_form { width: 55.56vw; max-width: 800px; flex-shrink: 0; } .contact_form_group { margin-bottom: 40px; } .contact_form_label { display: block; font-size: 16px; font-weight: 700; margin-bottom: 16px; } .contact_form_required { display: inline-block; font-weight: 700; color: var(--color-error); } .contact_form_required_text { color: var(--color-error); font-size: 14px; font-weight: 700; text-align: end; } .contact_form_input, .contact_form_select, .contact_form_textarea { width: 100%; padding: 28.5px 24px; font-size: 16px; border: none; border-radius: 8px; background-color: #fff; outline: none; font-feature-settings: normal; } .contact_form_input:focus, .contact_form_select:focus, .contact_form_textarea:focus { outline: 2px solid var(--color-brand-green); } .contact_form_input::placeholder, .contact_form_textarea::placeholder { color: var(--color-gray-light); font-size: 16px; font-weight: 400; line-height: 1.5; } .contact_form_select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23282828' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; cursor: pointer; } .contact_form_textarea { resize: none; height: 400px; line-height: 1.5; } .contact_form_agreement { margin-top: 67px; margin-bottom: 49px; text-align: center; } .contact_form_checkbox_label { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 700; line-height: 1.5; cursor: pointer; } .contact_form_checkbox_label span { font-feature-settings: normal; } .contact_form_checkbox_label input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex-shrink: 0; background: none; border: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9 1C10.771 1 12.1972 1.11795 13.3096 1.4082C14.4113 1.69574 15.1315 2.13306 15.5918 2.72266C16.792 4.26004 17 5.58956 17 9C17 12.5073 16.6419 14.1635 15.4922 15.3857C14.3567 16.5924 12.7006 17 9 17C5.86249 17 4.0722 16.5871 2.9707 15.7822L2.75977 15.6162C1.57918 14.617 1 12.8131 1 9C1 5.41451 1.35197 3.84658 2.58496 2.5498C3.78146 1.29154 5.36219 1 9 1Z' stroke='%23282828' stroke-width='2'/%3E%3C/svg%3E"); background-size: 18px 18px; background-repeat: no-repeat; margin: 4px 0 0; } .contact_form_checkbox_label input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9 1C10.771 1 12.1972 1.11795 13.3096 1.4082C14.4113 1.69574 15.1315 2.13306 15.5918 2.72266C16.792 4.26004 17 5.58956 17 9C17 12.5073 16.6419 14.1635 15.4922 15.3857C14.3567 16.5924 12.7006 17 9 17C5.86249 17 4.0722 16.5871 2.9707 15.7822L2.75977 15.6162C1.57918 14.617 1 12.8131 1 9C1 5.41451 1.35197 3.84658 2.58496 2.5498C3.78146 1.29154 5.36219 1 9 1Z' fill='%2328C86E' stroke='%2328C86E' stroke-width='2'/%3E%3Cpath d='M5.5 9L8 11.5L12.5 6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .contact_form_checkbox_label a { color: var(--color-brand-green); text-decoration: underline; text-decoration-thickness: 10%; text-underline-offset: 30%; text-underline-position: from-font; display: inline; margin-right: 3px; } .contact_form_value { padding: 29.5px 0px 31.5px 24px; border-bottom: 1px solid var(--color-gray-light); font-size: 16px; line-height: 1.8; font-feature-settings: normal; } .error-message { margin-top: 8px; width: 100%; color: var(--color-error); font-size: 12px; } /* contact complete */ .contact_complete .contact_form { width: auto; padding-left: 4.3vw; } .contact_complete_heading { display: flex; align-items: center; gap: 16px; } .contact_complete_icon { position: relative; width: 50px; height: 50px; flex-shrink: 0; } .contact_complete_check { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 28px; height: 20px; } .contact_complete_title { font-size: 32px; font-weight: 800; } .contact_complete_text { margin-top: 36px; font-size: 16px; font-weight: 400; line-height: 1.8; } .contact_form_submit { text-align: center; } @media only screen and (max-width: 960px) { .contact_page { padding-bottom: 121px; } .contact_main_content { margin-top: 50px; } .contact_text { margin-bottom: 65px; } .contact_form_layout { flex-direction: column; align-items: center; gap: 47px; padding-top: 36px; } .contact_stepper { flex-direction: row; gap: 33px; } .contact_stepper_item { flex-direction: column; align-items: center; gap: 28px; padding: 0; } .contact_stepper_item:first-child { padding-top: 0; } .contact_stepper_item:first-child::after { top: 5.5px; height: 2px; width: calc(100% + 33px); left: 12px; } .contact_stepper_item:not(:last-child)::after { left: 12px; top: 5.5px; width: calc(100% + 33px); height: 2px; } .contact_form { width: 100%; max-width: 100%; } .contact_form_textarea { height: 240px; } .contact_form_spacer { display: none; } .contact_form_required_text { text-align: start; margin-bottom: 41px; } .contact_form_checkbox_label input[type="checkbox"] { width: 16px; height: 16px; background-size: 16px 16px; } .contact_form_checkbox_label { font-size: 16px; gap: 4px; } .contact_form_agreement { margin: 30px auto; } .contact_form_value { text-align: center; padding: 28px 20px 30px 21px; } .contact_form_value_left { text-align: left; } .contact_complete_content .contact_text { display: none; } .contact_complete_content .common_text_link { display: none; } .contact_complete_content .contact_form_layout { border-top: 0px solid var(--color-gray-light); } .contact_complete .contact_form { margin: 13px 0 0; padding-left: 0; text-align: center; } .contact_complete_text { margin-top: 42px; padding: 0 18px 0 20px; } .contact_complete_heading { justify-content: center; gap: 13px; } .contact_complete_title { font-size: 20px; } .contact_complete_icon { width: 37px; height: 37px; } .contact_complete_icon > svg:first-child { width: 37px; height: 37px; } .contact_complete_check { width: 22px; height: 16px; } .contact_sp_footer_bottom, .contact_footer .sp_footer_bottom { margin-top: 0; } } @media only screen and (max-width: 460px) { .contact_text .sp_br { display: block; } } /* press kit */ .press_kit_content .page_header { margin-bottom: 100px; } .press_kit_content_block { display: flex; gap: 65px; } .press_kit_title { width: 271px; min-width: 271px; position: sticky; top: 105px; align-self: flex-start; /* 連鎖 sticky: 次タイトルの線・テキストを現タイトルの上に重ねるため、不透明な背景を持たせる。z-index は明示しない（document tree order の natural painting により、後ろのブロックの title が前面で描画される） */ background-color: var(--color-bg); /* fade-out 時は title 全体（::before の線 + p のテキスト）をまとめてフェード */ transition: opacity 0.4s ease; padding-bottom: 100px; } .press_kit_title.is_fading { opacity: 0; } .press_kit_title::before { content: ""; display: block; width: 100%; height: 2px; background-color: var(--color-gray-light); margin-bottom: 50px; } .press_kit_title p { font-size: 32px; font-weight: 800; line-height: 1.5; } .press_kit_title.is_hidden { visibility: hidden; } .press_kit_note img { vertical-align: 3px; margin-right: 6px; } .press_kit_detail { width: 100%; padding-top: 56px; padding-bottom: 100px; } .press_kit_detail p { line-height: 1.8; } .press_kit_content .common_arrow_btn { margin-top: 0px; } .press_kit_desc { text-box-trim: none; } .press_kit_note { text-box-trim: none; } .press_kit_title .press_kit_title_lead { font-size: 16px; font-weight: 700; line-height: 1.8; margin-top: 292px; } .press_kit_sub_title { font-size: 24px; font-weight: 800; line-height: 1.5; text-box-trim: trim-both; margin-bottom: 50px; } .press_kit_logo_block { display: grid; /* minmax(0, 1fr) で各セルが img の自然サイズに引っ張られず縮められるようにする */ grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); /* 右1/3を黒、左2/3を白で塗る。子に背景を当てるとサブピクセル境界で白が漏れて img5 と img6 の間に線が見えるため親の背景で塗る */ background: linear-gradient( to right, #fff 0 66.6667%, var(--color-brand-dark) 66.6667% 100% ); grid-auto-flow: column; aspect-ratio: 898 / 504; border-radius: 10px; overflow: hidden; margin: 20px 0 100px; width: 100%; max-width: 100%; } .press_kit_logo_img { display: flex; align-items: center; justify-content: center; /* grid セルが縮んだとき img でブロックされないように min を0に */ min-width: 0; min-height: 0; overflow: hidden; } /* 1440px 表示時の自然サイズ / セル幅(300px) を比率として固定。 viewport が縮むと cell が縮み、img も同じ比率で縮小する */ .press_kit_logo_img img { height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .press_kit_logo_img img[src$="logo_01.png"] { width: 73%; } .press_kit_logo_img img[src$="logo_02.png"] { width: 50%; } .press_kit_logo_img img[src$="logo_03.png"] { width: 79%; } .press_kit_logo_img img[src$="logo_04.png"] { width: 54%; } .press_kit_logo_img img[src$="logo_05.png"] { width: 82%; } .press_kit_logo_img img[src$="logo_06.png"] { width: 54%; } .press_kit_brand_color_block > div { width: 100%; max-width: 355px; aspect-ratio: 355 / 200; border-radius: 8px; } .press_kit_brand_color_01 { background-color: #008482; } .press_kit_brand_color_02 { background-color: var(--color-brand-green); } .press_kit_brand_color_03 { background-color: var(--color-brand-dark); } .press_kit_brand_color_layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 52px; row-gap: 45px; margin-bottom: 100px; max-width: 762px; } .press_kit_brand_color_text { margin-top: 20px; padding-bottom: 0.8em; white-space: nowrap; } .press_kit_photo_layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 52px; row-gap: 52px; margin: 20px 0 80px; max-width: 762px; } .press_kit_photo { width: 100%; max-width: 355px; } .press_kit_photo img { width: 100%; height: auto; display: block; } .press_kit_photo_block p { margin-top: 35px; } .press_kit_prof_text { margin-bottom: 70px; } .press_kit_article_list p { text-box-trim: none; } .press_kit_article_list { text-box-trim: trim-start; } .press_kit_article_list p img { vertical-align: 3px; margin-right: 6px; } @media only screen and (max-width: 960px) { .press_kit_content .page_header { margin-bottom: 0; } .press_kit_content_block { flex-direction: column; gap: 0; margin-top: 0; padding: 80px 0; border-bottom: 2px solid var(--color-gray-light); } .press_kit_content_block:first-of-type { padding-top: 0; } .press_kit_content_block:nth-last-of-type(1) { border-bottom: none; } .press_kit_title { width: 100%; min-width: 100%; position: static; padding-bottom: 0; } .press_kit_title .pc_br { display: none; } .press_kit_title::before { display: none; } .press_kit_title p { padding-bottom: 36px; } .press_kit_sub_title { margin-bottom: 24px; } .press_kit_title.is_fading p { opacity: 1; } .press_kit_title_lead { display: none; } .press_kit_note { margin-bottom: 1em; } .press_kit_detail { padding: 0; } .press_kit_logo_block { margin: 18px 0 60px; } .press_kit_brand_color_layout { margin-bottom: 60px; } .press_kit_corp_desc_layout { margin-top: 20px; } .press_kit_photo_block p { margin-top: 24px; } .press_kit_article_list p a { display: inline-block; padding-left: 1em; line-height: 2.2; text-underline-offset: 33%; } .press_kit_article_list { margin-bottom: 0px; } } @media only screen and (max-width: 460px) { .press_kit_title p { font-size: 24px; } .press_kit_sub_title { font-size: 16px; font-weight: 700; } .press_kit_brand_color_block > div { max-width: 177px; } .press_kit_brand_color_layout { column-gap: 9px; row-gap: 30px; margin: 0 0 60px; } .press_kit_brand_color_text { font-size: 13px; padding-bottom: 0; } .press_kit_photo { max-width: 177px; } .press_kit_photo_layout { column-gap: 9px; row-gap: 30px; margin: 18px 0 60px; } .press_kit_photo_block p { font-size: 13px; } } /* news_detail */ .news_detail_page { padding-top: 142px; } .news_detail_page .pankuzu_list li:last-child { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news_detail_content { max-width: 935px; margin: 88px auto 0; } .news_title { font-size: 40px; font-weight: 800; line-height: 1.5; } .news_meta { display: flex; align-items: center; gap: 16px; margin-top: 59px; margin-bottom: 57px; } .news_category { font-size: 16px; font-weight: 700; color: var(--color-brand-green); padding: 10px 0 10px 2px; } .news_date { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--color-gray); padding: 10px 0; } .news_cover { width: 100%; aspect-ratio: 933 / 507; border-radius: 10px; background-size: cover; background-position: center; } .news_body { margin: 70px 0 200px; } .news_body p { line-height: 2; margin-bottom: 1em; text-box-trim: none; } .news_body h2 { font-size: 32px; font-weight: 800; line-height: 1.5; margin: 70px 0 40px; } .news_body h3 { font-size: 24px; font-weight: 800; line-height: 1.5; margin: 60px 0 38px; } /* リンク */ .news_body a { color: var(--color-brand-green); font-weight: 700; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: 10%; text-underline-offset: 30%; transition: text-decoration-color 0.2s; word-break: break-all; } @media (hover: hover) { .news_body a:hover { text-decoration-line: none; } } @media (hover: none) { .news_body a:active { text-decoration-line: none; } } /* 外部リンク（functions.php で is-external クラス付与） */ .news_body a.is-external::after { content: ""; display: inline-block; width: 14px; height: 14px; background-image: url("../images/common/icon_link_outside.svg"); background-size: contain; background-repeat: no-repeat; vertical-align: baseline; margin-left: 4px; } /* リスト（緑ドットアイコン） */ .news_body ul { line-height: 2.2; padding-left: 0; list-style: none; } .news_body ul li { padding-left: 1em; margin-bottom: 1em; position: relative; } .news_body ul li::before { content: ""; display: inline-block; width: 4px; height: 4px; background-image: url("../images/common/icon_list_dot_superellipse_green.svg"); background-size: contain; background-repeat: no-repeat; position: absolute; left: 2px; top: 1em; } /* ナンバリング（緑数字） */ .news_body ol { line-height: 2.2; padding-left: 0; list-style: none; counter-reset: news-ol; } .news_body ol li { counter-increment: news-ol; padding-left: 1.8em; position: relative; } .news_body ol li::before { content: counter(news-ol) ". "; color: var(--color-brand-green); font-weight: 600; position: absolute; left: 0; } /* 画像 */ .news_body img { max-width: 100%; border-radius: 10px; margin-top: 40px; } /* Gutenberg 画像ブロック */ .news_body figure { margin: 0; } .news_body .wp-block-image { margin-top: 40px; } .news_body .wp-block-image img { margin-top: 0; } /* Gutenberg 画像キャプション */ .news_body figcaption, .news_body .wp-element-caption { font-size: 12px; line-height: 2; margin-top: 16px; text-box-trim: trim-both; } /* Gutenberg ギャラリーブロック（2列） */ .news_body .wp-block-gallery { display: flex; align-items: stretch; gap: 16px; margin-top: 30px; } .news_body .wp-block-gallery .wp-block-image { flex: 1; margin-top: 0; display: flex; flex-direction: column; } .news_body .wp-block-gallery .wp-block-image img { margin-top: 0; width: 100%; flex: 1; min-height: 0; object-fit: cover; } .news_body .wp-block-gallery figcaption, .news_body .wp-block-gallery .wp-element-caption { font-size: 12px; line-height: 2; margin-top: 16px; text-box-trim: trim-both; flex-shrink: 0; } @media only screen and (max-width: 960px) { .news_body { margin-bottom: 100px; } } @media only screen and (max-width: 660px) { .news_body h2 { font-size: 24px; margin-top: 58px; } .news_body h3 { font-size: 18px; } .news_body .wp-block-gallery { flex-direction: column; } } .news_heading1 { font-size: 32px; font-weight: 800; line-height: 1.5; margin-top: 70px; margin-bottom: 40px; } .news_heading2 { font-size: 24px; font-weight: 800; line-height: 1.5; margin-bottom: 38px; } .news_text { line-height: 2; } .news_general_list { margin-top: 90px; text-box-trim: trim-both; } .news_general_list li { line-height: 2.2; text-box-trim: none; } .news_general_item::before { content: ""; display: inline-block; width: 4px; height: 4px; background-image: url("../images/common/icon_list_dot_superellipse_green.svg"); background-size: contain; background-repeat: no-repeat; margin: 0 8px 2px 2px; vertical-align: middle; } .news_general_order_list { margin-top: 45px; } .news_general_order_list li { line-height: 2.2; text-box-trim: none; } .news_general_order_item span { color: var(--color-brand-green); font-weight: 600; } .news_image { margin-top: 133px; } .news_image img { width: 100%; border-radius: 10px; } .news_image_caption { font-size: 12px; line-height: 2; margin-top: 10px; } .news_image_2 { display: flex; gap: 16px; margin-top: 30px; margin-bottom: 200px; max-width: 935px; } .news_image_2 img { width: calc(50% - 8px); border-radius: 10px; } @media only screen and (max-width: 660px) { .news_detail_page { padding-top: 113px; } .news_detail_content { margin-top: 50px; } .news_title { font-size: 24px; } .news_meta { margin-top: 80px; margin-bottom: 20px; } .news_heading1 { font-size: 24px; margin-top: 58px; } .news_heading2 { font-size: 18px; } } /* top */ .top_fv { position: relative; overflow: hidden; height: 100vh; background-color: #fff; display: flex; align-items: center; } .top_fv_img_wrap { position: absolute; right: 0; bottom: 0; width: max(100%, 1440px); aspect-ratio: 1440 / 458; background-image: url('../images/top/img_fv_bg.svg'); background-size: 100% 100%; z-index: 1; } .top_fv_img_wrap::after { content: ''; position: absolute; right: 9.74vw; bottom: min(15%, 300px); width: 581px; aspect-ratio: 581 / 562; background-image: url('../images/top/img_fv_squircle.svg'); background-size: 100% 100%; } .top_fv_text { position: relative; z-index: 3; padding-left: 8.4vw; } .top_fv_catch { font-size: 48px; font-weight: 800; line-height: 1.6; color: var(--color-brand-dark); letter-spacing: 3.84px; margin-bottom: 20px; text-box-trim: none; } .top_fv_catch span { display: inline-block; } .top_fv_sub { font-family: var(--font-heading); font-size: 36px; font-weight: 700; color: var(--color-gray-light); padding-top: 0.6em; text-box-trim: none; letter-spacing: 0.72px; } @media only screen and (max-width: 690px) { .top_fv { align-items: end; } .top_fv_img_wrap { height: 485px; background-size: cover; } .top_fv_img_wrap::after { right: 8.1vw; bottom: min(62.9%, 250px); width: min(71.4vw, 581px); } .top_fv_text { align-items: end; padding-left: 5.4vw; padding-bottom: 102px; } .top_fv_catch { font-size: 28px; margin-bottom: 0; letter-spacing: 2.24px; } .top_fv_sub { font-size: 24px; letter-spacing: 0.48px; } } @media only screen and (max-width: 460px) { .top_fv_img_wrap::after { bottom: min(62.9%, 305px); } } /*================= who we are =======================*/ .top_whoweare { /* scroll height (5 screens) */ height: 500vh; position: relative; padding-bottom: 140px; background-color: var(--color-bg); } /* whoweareアニメーション完了済みの場合、JS実行前にCSSで先にセクションを縮める */ html.whoweare-collapsed .top_whoweare { height: 100vh; padding-bottom: 0; } /* 復元時は bgText のスライドtransitionをスキップして即時表示 */ html.whoweare-collapsed .whoweare_sticky .whoweare_bg_text { transition: none; transform: translateX(0); } .whoweare_sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; /* background: linear-gradient(179deg, #FFF 0.67%, #FFF 71.78%, rgba(255, 255, 255, 0.00) 91.67%); */ background-color: var(--color-bg); } /*----- Background Text -----*/ .whoweare_sticky .whoweare_bg_text { position: absolute; font-size: clamp(80px, 16vw, 240px); color: var(--color-white); white-space: nowrap; pointer-events: none; user-select: none; z-index: 1; } .whoweare_sticky .whoweare_bg_text--top { font-family: "Cardo"; font-weight: 700; top: 12%; left: -0.4%; transform: translateX(-100vw); transition: transform 2.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; will-change: transform; } .whoweare_sticky .whoweare_bg_text--bottom { font-family: "Source Code Pro"; font-weight: 400; bottom: 22%; right: -2%; transform: translateX(100vw); transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; will-change: transform; } .whoweare_sticky .whoweare_bg_text.is_shown { transform: translateX(0); } .whoweare_voice_info.is_shown { opacity: 1; } @media only screen and (min-width: 641px) { .whoweare_voice_info.is_shown { position: fixed; } } .whoweare_voice_info.is_near_footer { opacity: 0; pointer-events: none; transition: opacity 0.1s ease; } /*----- Stage -----*/ .whoweare_sticky .whoweare_stage { position: relative; width: 700px; height: 700px; display: flex; align-items: center; justify-content: center; z-index: 2; } @media only screen and (max-width: 960px) { .whoweare_sticky .whoweare_stage { width: 500px; height: 500px; } } @media only screen and (max-width: 640px) { .top_whoweare { height: 420vh; padding-bottom: 0px; } .whoweare_sticky .whoweare_stage { width: 452px; height: 452px; margin-bottom: 64px; } .whoweare_sticky .whoweare_bg_text--top { top: 15.5%; } .whoweare_sticky .whoweare_bg_text--bottom { bottom: 21%; right: -29%; } } /*----- whoweare v11 goo SVG figures -----*/ .whoweare_sticky .whoweare_figures { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); pointer-events: none; overflow: visible; z-index: 2; } /*----- Diamond label (Specialist) - approach中のみ表示 -----*/ .whoweare_sticky .whoweare_diamond { position: absolute; width: 500px; /* 1辺500px、対角線 = 500 × √2 ≈ 707 */ height: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); display: flex; align-items: center; justify-content: center; will-change: transform, opacity; z-index: 3; pointer-events: none; } @media only screen and (max-width: 960px) { .whoweare_sticky .whoweare_diamond { width: 336px; height: 336px; } } @media only screen and (max-width: 640px) { .whoweare_sticky .whoweare_diamond { width: 293px; height: 293px; } } /*----- Circle label (Technology) - approach中のみ表示 -----*/ .whoweare_sticky .whoweare_circle { position: absolute; width: 650px; height: 650px; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; will-change: transform, opacity; z-index: 3; pointer-events: none; } @media only screen and (max-width: 960px) { .whoweare_sticky .whoweare_circle { width: 470px; height: 470px; } } @media only screen and (max-width: 640px) { .whoweare_sticky .whoweare_circle { width: 101.72vw; height: 101.72vw; } } /*----- Label -----*/ .whoweare_sticky .whoweare_label { color: #fff; font-size: 50px; white-space: nowrap; pointer-events: none; } .whoweare_diamond .whoweare_label { font-family: "Cardo"; font-weight: 600; } .whoweare_circle .whoweare_label { font-family: "Source Code Pro"; font-weight: 400; } @media only screen and (max-width: 640px) { .whoweare_sticky .whoweare_label { font-size: 24px; } } .whoweare_sticky .whoweare_diamond .whoweare_label { transform: rotate(-45deg); } /*----- Inner White Shape -----*/ .whoweare_sticky .whoweare_inner { --inner-rotate: 0deg; position: absolute; max-width: 615px; /* mask = inner幅 × 1.2 */ min-width: 358px; width: 90.42vw; top: 50%; left: 50%; transform: translate(-49%, -46%) rotate(var(--inner-rotate)) scale(0); opacity: 0; will-change: transform, opacity; z-index: 4; filter: drop-shadow(0 4px 40px rgba(0, 0, 0, 0.08)); } /*----- Content -----*/ .whoweare_sticky .whoweare_content { position: absolute; z-index: 10; text-align: center; max-width: 420px; opacity: 0; transform: translateY(20px); will-change: transform, opacity; } @media only screen and (max-width: 520px) { .whoweare_sticky .whoweare_content { max-width: 260px; } } .whoweare_sticky .whoweare_content .whoweare_eyebrow { font-family: var(--font-heading); font-size: 18px; font-weight: 800; color: var(--color-gray-light); margin-bottom: 40px; text-box-trim: none; } @media only screen and (max-width: 520px) { .whoweare_sticky .whoweare_content .whoweare_eyebrow { font-size: 12px; margin-bottom: 18px; } } .whoweare_sticky .whoweare_content .whoweare_heading { font-family: var(--font-base); font-size: 32px; font-weight: 800; line-height: 1.5; margin-bottom: 40px; text-box-trim: none; } @media only screen and (max-width: 960px) { .whoweare_sticky .whoweare_content .whoweare_heading { font-size: 24px; } .whoweare_sticky .whoweare_content .whoweare_body .sp_br { display: block; } } @media only screen and (max-width: 520px) { .whoweare_sticky .whoweare_content .whoweare_heading { font-size: 18px; margin-bottom: 16px; } } .whoweare_sticky .whoweare_content .whoweare_body { font-family: var(--font-base); font-size: 16px; font-weight: 400; line-height: 1.8; margin-bottom: 40px; text-box-trim: none; } @media only screen and (max-width: 520px) { .whoweare_sticky .whoweare_content .whoweare_body { font-size: 12px; margin-bottom: 20px; } } /* WHO WE ARE 音声プレーヤー（カスタムUI） */ .whoweare_voice_info { width: 224px; height: 72px; position: absolute; right: 50px; opacity: 0; transition: opacity 0.3s ease; bottom: 50px; z-index: 100; background: #082F19; border-radius: 8px; display: flex; align-items: center; gap: 19px; padding: 0 17px; overflow: hidden; } .whoweare_voice_play { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.15s ease; } @media (hover: hover) { .whoweare_voice_play:hover { transform: scale(1.06); } } @media (hover: none) { .whoweare_voice_play:active { transform: scale(1.06); } } .whoweare_voice_play_icon--play { width: 17px; height: 17px; margin-left: 3px; /* 三角形を視覚中央に */ } .whoweare_voice_play_icon--pause { width: 17px; height: 17px; display: none; } .whoweare_voice_play.is-playing .whoweare_voice_play_icon--play { display: none; } .whoweare_voice_play.is-playing .whoweare_voice_play_icon--pause { display: block; } .whoweare_voice_text { flex: 1; min-width: 0; color: #fff; line-height: 1.3; /* プログレスバー(高さ4px)に重ならないよう若干上に寄せる */ padding-bottom: 6px; } .whoweare_voice_title { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; text-box-trim: none; } .whoweare_voice_time { display: flex; justify-content: space-between; font-size: 10px; font-weight: 500; color: var(--color-gray-light); margin-top: 10px; padding-right: 5px; } .whoweare_voice_time_current, .whoweare_voice_time_duration { color: inherit; } .whoweare_voice_progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--color-gray); cursor: pointer; } .whoweare_voice_progress_fill { height: 100%; width: 0%; background: var(--color-brand-green); transition: width 0.1s linear; border-radius: 0 4px 4px 0; } .whoweare_voice_audio { display: none; } @media only screen and (max-width: 960px) { .whoweare_voice_info { right: 22px; } } @media only screen and (max-width: 640px) { .whoweare_voice_info { width: calc(100% - 44px); max-width: 363px; height: clamp(72px, 10.35vh, 91px); left: 0; right: 0; margin: 0 auto; bottom: 26px; } .whoweare_voice_play { width: 5.8vh; height: 5.8vh; } .whoweare_voice_play_icon--play { width: 2.84vh; height: 2.84vh; } .whoweare_voice_title { font-size: 16px; font-weight: 500; } } .top_services { padding-top: 56px; padding-bottom: 100px; background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg) 85%, rgba(255, 255, 255, 0.00) 100%); } .top_services_body { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: clamp(40px, 3.88vw, 56px); margin: 45px auto 140px; } .top_services_main_text { font-size: clamp(40px, 5.56vw, 80px); font-weight: 800; line-height: 1.5; text-box-trim: none; } .top_services_sub_text { line-height: 2.22; max-width: 407px; width: 100%; text-box-trim: none; margin-bottom: 7px; } /* top_service_rectangle */ .top_service_rectangle { background-image: url(../images/common/bg/bg_squircle_1340x720.svg); background-size: contain; background-repeat: no-repeat; aspect-ratio: 1340 / 720; container-type: inline-size; margin: 115px auto 90px; padding: 0px clamp(30px, calc(11.811vw - 18.07px), 152px) 0 clamp(30px, calc(6.487vw + 3.60px), 97px); max-width: 1340px; position: relative; display: flex; justify-content: center; align-items: center; } .top_service_rectangle > .common_pc_h1 { display: block; font-family: var(--font-heading); position: absolute; top: 6px; left: 48px; } .top_service_square_content_outer > .common_pc_h1 { position: absolute; top: -13px; left: 48px; } .top_service_rectangle_block { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 58px; } .top_service_image { flex-shrink: 1; max-width: 582px; /* 1440px 時 .top_service_rectangle_block 1091px に対し 599px = 54.9% */ width: clamp(296px, 54.9%, 599px); } .top_service_image img { width: 100%; } .top_service_content { flex: 1; } .top_service_label { display: flex; align-items: center; } .top_service_label img { width: 12px; height: 12px; margin-right: 10px; } .top_service_label p { color: var(--color-gray-light); font-family: var(--font-heading); font-size: clamp(12px, calc(0.581vw + 9.64px), 18px); font-weight: 800; letter-spacing: normal; white-space: nowrap; } .top_service_title { font-size: clamp(22px, calc(1.743vw + 14.91px), 40px); font-weight: 800; line-height: 1.5; margin: clamp(34px, calc(6.195vw + 8.79px), 98px) 0 clamp(49px, calc(5.034vw + 28.51px), 101px); flex: 1; } .top_service_rectangle_block .top_service_title { width: max(100%, 436px); } @media only screen and (max-width: 960px) { .top_services_body { display: block; margin: 53px auto 112px; } .top_services_main_text { margin-bottom: 40px; text-box-trim: trim-both; } .top_services_sub_text { max-width: 100%; line-height: 1.8; text-box-trim: trim-both; margin-bottom: 0px; } .top_service_image { display: flex; align-items: center; width: 94.3%; height: 60cqi; } .top_service_title { margin: 10% 0 45px; } .top_service_rectangle_block .top_service_title { width: 100%; } .top_service_content { width: 100%; } } .top_service_square_block { display: flex; justify-content: space-between; flex-wrap: nowrap; gap: 16px; max-width: 1340px; margin: 0 auto 120px; } .top_service_square_content_outer { background-image: url(../images/service/service_back_white_square.svg); background-size: contain; background-repeat: no-repeat; flex: 1; min-width: 0; max-width: 662px; aspect-ratio: 1 / 1; position: relative; container-type: inline-size; display: flex; justify-content: center; align-items: center; } .top_service_square_content_outer .top_service_content { display: flex; flex-direction: column; justify-content: center; flex: none; width: 72.2%; padding-left: 4px; } .top_service_square_image { width: 40%; margin-top: 20px; } .top_service_square_image img { width: 100%; } .top_service_square_content_outer .top_service_title { flex-grow: 0; } .top_service_square_block .top_service_title { margin-top: 25px; margin-bottom: 50px; } @media only screen and (max-width: 640px) { .top_service_label p { font-size: 12px; } .top_service_rectangle_block { gap: 35px; } } @media only screen and (max-width: 960px) { .top_service_rectangle { background-image: url(../images/common/bg/bg_squircle_358x524.svg); background-size: contain; aspect-ratio: 358 / 524; padding: 0; max-width: 490px; margin: 0px auto 65px; container-type: size; align-items: start; } .top_service_rectangle > .common_pc_h1 { top: -10px; left: -3px; } .top_service_square_content_outer > .common_pc_h1 { top: -10px; left: -3px; } .top_service_rectangle_block { display: flex; flex-direction: column; align-items: center; width: 100%; height: 75%; padding: 15cqb 8.66cqi 0; gap: 5cqb; } #card2 .top_service_image { width: 90%; } .top_service_title .pc_br { display: none; } .top_service_title span { display: inline-block; } .top_service_rectangle .common_arrow_btn, .top_service_content .common_arrow_btn { position: absolute; left: 50%; transform: translateX(-50%); display: flex; margin: 0; } .top_service_rectangle .common_arrow_btn { bottom: 15%; } .top_service_content .common_arrow_btn { bottom: 12%; } .top_service_square_block { display: flex; flex-direction: column; gap: 65px; max-width: 490px; margin: 0 auto 70px; } .service_detail p { font-size: 14px; } } @media only screen and (max-width: 640px) { .top_services { padding-top: 26px; padding-bottom: 32px; margin-top: 78px; } } .top_section_inset { padding: 0 clamp(0px, calc(6.583vw - 26.79px), 68px); } .top_news { background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 14.39%); padding: 100px 0 170px; } .top_news .news_list { gap: 18px; margin: 39px 0 89px; } .top_news .news_card_lower { background: var(--color-bg); } .top_news .news_card_meta { margin-bottom: 10px; } .top_news .news_card_title { font-size: 16px; margin: 23px 40px 0px; } .top_news .news_card_item:nth-child(4) { display: none; } @media only screen and (max-width: 960px) { .top_news .news_card_item:nth-child(4) { display: block; } .top_service_square_image { margin-top: 6px; } .top_service_square_content_outer .top_service_content { width: 100%; padding-left: 0; } .top_service_square_block .top_service_title { margin-top: 6px; margin-bottom: 20.5%; } .top_service_square_content_outer { padding: 0 8.66%; } } @media only screen and (max-width: 640px) { .top_news { padding: 88px 0 120px; } } @media only screen and (max-width: 460px) { .top_news .news_card_title { font-size: 11px; margin: 14px 18px 0px; } .top_news .news_card_meta { margin-bottom: 12px; } .top_service_label img { width: 8px; height: 8px; margin-right: 6px; } .service_detail p { font-size: 13px; line-height: 1.8; } .top_service_rectangle .common_arrow_btn { bottom: 11%; } .top_service_rectangle { margin-bottom: 60px; } } /* top_media */ .top_media { background-color: var(--color-white); padding-bottom: 150px; } .media_list_layout { display: flex; justify-content: center; } .media_list { display: flex; gap: 17px; margin-top: 40px; overflow-x: scroll; padding: 0 calc(50px + clamp(0px, calc(6.583vw - 26.79px), 68px)); /* scrollbar-color / scrollbar-width は指定しない: Chrome 121+ ではこれらが指定されていると ::-webkit-scrollbar* が無効化される */ } /* スクロールバー（WebKit / Chrome / Safari） */ .media_list::-webkit-scrollbar { height: 3px; } .media_list::-webkit-scrollbar-track { background: transparent; } .media_list::-webkit-scrollbar-thumb { background: var(--color-grey-400, #BEBEBE); border-radius: 3px; } .media_list::-webkit-scrollbar-button:horizontal:start, .media_list::-webkit-scrollbar-button:horizontal:end { width: 12px; height: 3px; background: transparent; display: block; } .media_list a { text-decoration: none; color: inherit; display: block; flex-shrink: 0; width: 355px; } .media_img_outer { --media-squircle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 355 254'%3E%3Cpath d='M355 125.5C355 245.673 347.403 251 177.447 251C7.4905 251 0 245.673 0 125.5C0 5.32748 7.48163 0 177.447 0C347.412 0 355 5.32748 355 125.5Z' fill='black'/%3E%3C/svg%3E"); background-color: var(--color-bg); -webkit-mask-image: var(--media-squircle-mask); mask-image: var(--media-squircle-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-mode: alpha; mask-mode: alpha; aspect-ratio: 355 / 254; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease; } .media_item { transition: color 0.3s ease; } @media (hover: hover) { .media_item:hover .media_img_outer { background-color: var(--color-brand-green); } .media_item:hover .media_title { color: var(--color-brand-green); } } @media (hover: none) { .media_item:active .media_img_outer { background-color: var(--color-brand-green); } .media_item:active .media_title { color: var(--color-brand-green); } } .media_thumb { width: 81.13%; height: 66.93%; display: flex; align-items: center; } .media_thumb img { width: 100%; display: block; border-radius: 18px; } .media_text { padding: 0 16px 50px; } .media_title { font-size: 24px; font-weight: 800; margin: 32px 0; } .media_summary { line-height: 1.8; } @media only screen and (max-width: 960px) { .top_media { padding-bottom: 100px; } .media_list { gap: 21px; margin-top: 50px; padding: 0 22px; } .media_text { padding: 0 5px 50px; } .media_title { margin: 20px 0; } .media_list a { width: 82.8vw; } } @media only screen and (max-width: 640px) { .media_thumb img { border-radius: 6px; } .media_title { font-size: 18px; } .media_summary { font-size: 13px; } } /* フッターマウス追従グローエフェクト */ .footer_glow_grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; transform: translate3d(0, 0, 0); } .top_footer_joinus .footer_glow_grid { -webkit-mask-image: var(--footer-mask); mask-image: var(--footer-mask); -webkit-mask-size: calc(315.417vw * var(--footer-mask-pct)) calc(315.486vw * var(--footer-mask-pct)); mask-size: calc(315.417vw * var(--footer-mask-pct)) calc(315.486vw * var(--footer-mask-pct)); -webkit-mask-position: top center; mask-position: top center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; } .footer_glow_light { position: absolute; left: 100%; top: 50%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(181, 228, 202, 0.8) 0%, rgba(181, 228, 202, 0.4) 20%, rgba(181, 228, 202, 0.15) 45%, transparent 70% ); transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; animation: glow-wobble 3s ease-in-out infinite; } .footer_glow_grid.is-active .footer_glow_light { opacity: 1; } @keyframes glow-wobble { 0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); } 25% { transform: translate(-48%, -52%) scale(1.05) rotate(2deg); } 50% { transform: translate(-52%, -48%) scale(0.95) rotate(-1deg); } 75% { transform: translate(-50%, -53%) scale(1.03) rotate(1deg); } 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); } } @media only screen and (max-width: 960px) { .footer_glow_grid { display: none; } } .top_footer_joinus { height: 1138px; margin-top: 0px; background-color: var(--color-white); overflow: hidden; --footer-mask-pct: 0.01; -webkit-mask-image: var(--footer-mask); mask-image: var(--footer-mask); -webkit-mask-size: calc(315.417vw * var(--footer-mask-pct)) calc(315.486vw * var(--footer-mask-pct)); mask-size: calc(315.417vw * var(--footer-mask-pct)) calc(315.486vw * var(--footer-mask-pct)); -webkit-mask-position: top center; mask-position: top center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-mode: alpha; mask-mode: alpha; } .top_footer_joinus .footer_joinus_left p { font-size: clamp(37px, 5.56vw, 80px); font-family: var(--font-base); line-height: 1.5; } .top_footer_joinus .footer_joinus_inner { margin-top: clamp(104.47px, calc(10.119vw + 63.29px), 209px); margin-bottom: 94.43px; } .top_footer_joinus .footer_joinus_right_title { color: var(--color-white); font-family: var(--font-heading); font-size: clamp(50px, calc(1.936vw + 42.12px), 70px); font-weight: 800; text-box-trim: none; } .top_footer_joinus .footer_joinus_right { max-width: 414px; position: relative; bottom: -5px; } .top_footer_joinus .footer_joinus_right_detail { color: var(--color-white); font-weight: 700; line-height: 1.8; margin: 40px 0; } .top_footer_joinus .footer_joinus_right_btn { margin-top: 0; } .footer_joinus_gallery_item { width: 355px; z-index: 99; } .footer_joinus_gallery_item img { width: 100%; z-index: 100; } .top_footer_joinus::before { background-image: url(../images/footer/top_footer_back_green.svg); width: 100%; background-size: 131.465vw auto; background-position: -15.73vw 0; /* mask-sizeをCSS変数で制御（最終位置はtop centerのまま） */ -webkit-mask-size: calc(315.417vw * var(--footer-mask-pct)) calc(315.486vw * var(--footer-mask-pct)); mask-size: calc(315.417vw * var(--footer-mask-pct)) calc(315.486vw * var(--footer-mask-pct)); } .footer_joinus_gallery { /* margin-top は footer_bottom の margin-top: -7.5vw を相殺するため 140 - 7.5vw（max 108px） */ margin-top: min(108px, calc(140px - 7.5vw)); margin-bottom: 116px; overflow: hidden; width: 100%; } @media only screen and (max-width: 960px) { .top_footer_joinus .footer_joinus_inner { display: flex; justify-content: center; gap: 24px; padding: 0px; margin: 30px auto; } } @media only screen and (max-width: 640px) { .footer_joinus::before { background-image: url("../images/footer/sp_footer_greeen.svg"); background-size: 100vw auto; background-position: 0 0; -webkit-mask-size: 371.007vw 371.007vw; mask-size: 371.007vw 371.007vw; -webkit-mask-position: top center; mask-position: top center; } .top_footer_joinus .footer_joinus_inner { display: block; margin-top: 28px; margin-bottom: 60px; } .top_footer_joinus .footer_joinus_right_title { margin-top: 84px; text-box-trim: trim-both; } .top_footer_joinus .footer_joinus_right_detail { margin: 34px 0 45px; font-weight: 500; } } @media only screen and (max-width:960px) { .footer_joinus_gallery { margin-top: 60px; margin-bottom: 80px; } .top_footer_joinus .footer_joinus_right { bottom: 0px; } } .footer_joinus_gallery_track { display: flex; gap: 20px; width: max-content; /* 1サイクル = 元13アイテムの幅 + 13個分のgap（接続gap含む） */ --gallery-cycle: calc(355px * 13 + 20px * 13); animation: gallery-scroll 120s linear infinite; } @media only screen and (max-width:960px) { .footer_joinus_gallery_track { gap: 12px; --gallery-cycle: calc(146px * 13 + 12px * 13); animation: gallery-scroll 70s linear infinite; } } @keyframes gallery-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--gallery-cycle))); } } .footer_joinus_gallery_item { flex-shrink: 0; width: 355px; height: 266px; overflow: hidden; -webkit-mask-image: var(--mask-squircle-gallery); mask-image: var(--mask-squircle-gallery); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .footer_joinus_gallery_item img { width: 100%; height: 100%; object-fit: cover; } @media only screen and (max-width:960px) { .footer_joinus_gallery_item { width: 146px; height: 110px; } } @media only screen and (max-width: 640px) { .top_news .news_list { gap: 10px; margin: 40px 0 0; } } @media only screen and (max-width: 960px) { .top_sp_footer_bottom { margin-top: -282px; } } /* =================================== * Blueprint - (.top_services) 用スタイル * * - 線/図形の SVG 描画と座標計算は static/js/blueprint-top-scroll.js が担当 * - スクロール発火時には JS から各要素に `.is-view` クラスが付与される * - 色・サイズ・タイミング・ブレークポイント等の調整はこのファイルで完結する * =================================== */ /* ----- セクション基準 ----- */ .top_services { position: relative; } .top_services .common_inner { position: relative; z-index: 1; } /* ----- Blueprint SVG オーバーレイ ----- */ #blueprintSvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; } /* ----- 数式ラベル (本体 / n=4.5) ----- * left/top は JS が card1 中央 O 位置から動的に算出 */ #formulaLabel, #formulaLabelN { position: absolute; z-index: 1; pointer-events: none; font-family: 'Inter', sans-serif; font-size: clamp(10px, 1.1vw, 12px); /* style2.css の `* { color: ... }` に勝つため ID 指定で上書き */ color: rgba(70, 155, 135, .55); line-height: 1.9; white-space: nowrap; opacity: 0; transition: opacity .5s ease; } #formulaLabel.is-view, #formulaLabelN.is-view { opacity: 1; } /* ----- 「事業内容へ」ボタン: Blueprint SVG (z-index:0) より前面に出す ----- */ .top_services .common_wrap > .common_arrow_btn { position: relative; z-index: 1; } /* ----- テキスト fade-in (SERVICES / 見出し / 本文) ----- */ .top_services .common_inner .common_pc_h1, .top_services_main_text, .top_services_sub_text { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; } .top_services .common_inner .common_pc_h1.is-view, .top_services_main_text.is-view, .top_services_sub_text.is-view { opacity: 1; transform: translateY(0); } /* ----- カード本体: 背景を先にフェードイン、コンテンツは少し遅れて ----- */ .top_service_rectangle, .top_service_square_content_outer { opacity: 0; transition: opacity .5s ease; z-index: 2; } .top_service_rectangle.is-view, .top_service_square_content_outer.is-view { opacity: 1; } .top_service_rectangle_block, .top_service_square_content_outer .top_service_content { opacity: 0; transition: opacity .5s ease .3s; } .top_service_rectangle.is-view .top_service_rectangle_block, .top_service_square_content_outer.is-view .top_service_content { opacity: 1; } /* ----- カード番号 (01〜04) fade-in ----- */ .top_service_rectangle .common_pc_h1, .top_service_square_content_outer > .common_pc_h1 { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; } .top_service_rectangle .common_pc_h1.is-view, .top_service_square_content_outer > .common_pc_h1.is-view { opacity: 1; transform: translateY(0); } /* =================================== * タブレット以下: 数式ラベルのみ非表示 * Blueprint SVG はレスポンシブでも描画する * --- ブレークポイントを変更したい場合はここを編集 --- * =================================== */ @media only screen and (max-width: 960px) { #formulaLabel, #formulaLabelN { display: none; } .top_service_rectangle .common_pc_h1, .top_service_square_content_outer > .common_pc_h1 { opacity: 1; transform: none; transition: none; } } /* policy */ .policy_page .page_header { margin-bottom: 100px; } .policy_page .news_detail_content { margin-top: 0; } .policy_page .news_body ul li::before { display: none; } .policy_page h1 { letter-spacing: normal; text-box-trim: none; } .policy_page .news_body { margin-bottom: 0; } @media only screen and (max-width: 640px) { .policy_page .page_header { margin-bottom: 48px; } .policy_page .news_body { margin-top: 50px; } }