@charset "UTF-8"; /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; box-sizing: border-box; scroll-behavior: smooth; font-size: 62.5%; } *, *:before, *:after { box-sizing: inherit; --min-size: 53; --max-size: 146; --min-viewport: 375; --max-viewport: 1440; --slope:calc((var(--max-size) - var(--min-size)) / (var(--max-viewport) - var(--min-viewport))); --intercept: calc(var(--min-size) - var(--slope) * var(--min-viewport)); --fluid-size:calc(var(--slope) * 100vw + var(--intercept) * .1rem); --clamp-size: clamp(var(--min-size) * .1rem, var(--fluid-size), var(--max-size) * .1rem); } body { line-height: 1.7; --min-size: 16; --max-size: 16; font-size: var(--clamp-size); font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: #606976; letter-spacing: 0.05em; } img { max-width: 100%; height: auto; vertical-align: bottom; } figure { margin: 0; } iframe { width: 100%; } table { border-spacing: 0; } button { -webkit-appearance: none; appearance: none; cursor: pointer; } a { color: inherit; text-decoration: none; } a,input,textarea { transition: all .3s ease-in-out; } /* レイアウト */ .w-container { width: min(92%, 1045px); margin-inline: auto; } .h-container { padding: clamp(4rem, 5vw, 70px) 0; } /* 共通パーツ */ @media (width >= 751px) { .sp-br { display: none; } } /* ボタン */ .commonBtnWrapper { text-align: center; margin-top: 4rem; } .commonBtn { display: inline-flex; align-items: center; justify-content: space-between; min-width: 32rem; padding: 1.2rem 1.8rem; border-radius: 9999px; text-decoration: none; font-weight: 700; font-size: 1.5rem; transition: all 0.3s; } .commonBtn.isOutline { background-color: transparent; border: 2px solid currentColor; } .commonBtn.isBlue { color: #005084; } .commonBtn .serviceLinkArrowIcon { display: block; width: 2rem; height: 2rem; fill: none !important; stroke: #005084; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform 0.3s; } .commonBtn:hover { opacity: .7; } .commonBtnText { flex: 1; text-align: center; padding-left: 2rem; } /* CTAボタン */ .ctaArea { display: flex; justify-content: center; margin-top: 4rem; } .ctaBtn { display: block; width: 100%; max-width: 34rem; transition: opacity 0.3s, transform 0.3s; line-height: 0; } .ctaBtn img { width: 100%; height: auto; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.2)); } .ctaBtn:hover { opacity: 0.8; transform: scale(1.02); } @media (width >= 751px) { .ctaArea { margin-top: 6rem; } } /* 追従CTA */ .stickyCta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; width: 100%; gap: 1px; /* SP：1pxほど隙間 */ background: transparent; } .stickyCtaLink { flex: 1; display: block; } .stickyCtaImg { display: block; width: 100%; height: auto; } .stickyCtaLink:hover { opacity: .8; } @media (width >= 751px) { .stickyCta { left: 0; right: 0; transform: none; width: 100%; background: rgba(255, 255, 255, 0.8); padding: 1rem 0; box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05); display: flex; gap: 4rem; justify-content: center; bottom: 0; } .stickyCtaLink { flex: 0 0 auto; } .stickyCtaImg { max-width: 34rem; /* PC：1つの画像最大幅34rem */ } } /* 見出し */ .sectionTitle { position: relative; margin: 0 0 3rem; text-align: center; line-height: 1.4; padding-bottom: 6rem; } .sectionTitleMain { display: inline-block; position: relative; color: #000000; font-weight: 700; font-size: 2.4rem; margin-top: .8rem; } .sectionTitleAccent { display: inline-block; position: relative; color: #47C3E5; font-weight: 700; font-size: 3.2rem; } .sectionTitleAccent::after { content: ""; position: absolute; left: 0; width: 100%; height: 4px; background: #47C3E5; top: 10.5rem; display: block; } .sectionTitleAccent::before { content: ""; position: absolute; left: 50%; top: 10.5rem; width: 14px; height: 14px; border-right: 4px solid #47C3E5; border-bottom: 4px solid #47C3E5; background: #ffffff; transform: translate(-50%, -30%) rotate(45deg); z-index: 1; display: block; } .serviceLinks .sectionTitleAccent::before{ background: #F9F9F9; } .serviceLinks .sectionTitleMain { font-size: 2.4rem; } .sectionTitle._short { padding-bottom: 4rem; } .sectionTitle._short .sectionTitleAccent::after, .sectionTitle._short .sectionTitleAccent::before { top: 5.5rem; } .sectionTitle._reverse .sectionTitleAccent { color: #000000; } .sectionTitle._reverse .sectionTitleMain { display: inline-block; position: relative; color: #FF4323; font-weight: 700; font-size: 3.2rem; margin-top: .8rem; } .sectionTitle._reverse .sectionTitleAccent::after, .sectionTitle._reverse .sectionTitleAccent::before { display: none !important; } .sectionTitle._reverse .sectionTitleMain::after { content: ""; position: absolute; left: 0; width: 100%; height: 4px; background: #FF4323; top: 100%; margin-top: 1.2rem; z-index: 1; display: block; } .sectionTitle._reverse .sectionTitleMain::before { content: ""; position: absolute; left: 50%; top: 100%; margin-top: 1.2rem; width: 14px; height: 14px; border-right: 4px solid #FF4323; border-bottom: 4px solid #FF4323; background: #ffffff; transform: translate(-50%, -30%) rotate(45deg); z-index: 2; display: block; } .voiceSection .sectionTitleAccent { font-size: 2.4rem; } .bringItems .sectionTitle._reverse .sectionTitleAccent { font-size: 2.4rem; } .bringItems .sectionTitle._reverse .sectionTitleMain { color: #005084; } .bringItems .sectionTitle._reverse .sectionTitleMain::after { background: #ffffff; } .bringItems .sectionTitle._reverse .sectionTitleMain::before { border-color: #ffffff; background: #B9E8F5; } .inspectionSupport .sectionTitleAccent{ color: #000; font-size: 2.4rem; } .inspectionSupport .sectionTitleMain { font-size: 3.2rem; color: #47C3E5; } .reasonSection .sectionTitle { padding-bottom: 12rem; } .reasonSection .sectionTitleAccent{ color: #000; font-size: 2.4rem; } .reasonSection .sectionTitleMain { font-size: 3.2rem; color: #47C3E5; } .serviceLinks .sectionTitleAccent { font-size: 2.8rem; } /* main */ /* fv */ .fv { position: relative; width: 100%; /* padding: 9rem 0 20rem; */ padding: 9rem 0 16rem; background-image: url("/beN8uW4H0gC06hUh/wp-content/themes/shakenkan/src/img/contents/lp05/fvBgSp.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; } @media (width >= 751px) { .fv { padding: 10rem 0; height: 90vh; background-image: url("/beN8uW4H0gC06hUh/wp-content/themes/shakenkan/src/img/contents/lp05/fvBgPc.jpg"); display: flex; align-items: center; justify-content: center; / } } /* レイアウト制御 */ .fvInner { display: grid; /* エリア定義：テキスト → 画像 → ボタンの順 */ grid-template-areas: "content" "visual" "cta"; text-align: center; } .fvContent { grid-area: content; } .fvVisual { grid-area: visual; /* margin-top: 2rem; */ /* transform: translateY(16rem); */ transform: translateY(12rem); } @media (width >= 751px) { .fvVisual { transform: none; } } @media (width >= 751px) { .fvInner { /* grid-template-columns: 1fr 1fr; */ grid-template-columns: 4fr 6fr; grid-template-areas: "content visual" "cta visual"; /* 画像を右側に結合、テキストとCTAを左側に配置 */ text-align: left; align-items: center; column-gap: 10rem; } .fvVisual { margin-top: 0; } .fvCtaWrapper { margin-top: 2rem; } } /* テキスト装飾 */ .fvLead { font-weight: 700; color: #47C3E5; --min-size: 16; --max-size: 24; font-size: var(--clamp-size); } .fvTitle { margin-top: 1.6rem; font-weight: 700; color: #005084; line-height: 1.4; --min-size: 32; --max-size: 50; font-size: var(--clamp-size); text-align: center; font-feature-settings: "palt"; text-wrap: balance; } @media (width >= 751px) { .fvTitle { text-align: left; font-feature-settings: "normal"; } } /* ロゴ & バッジ */ .fvLogo { position: absolute; left: 1.6rem; top: 1.6rem; width: 12rem; z-index: 10; } .fvBadge { position: absolute; left: -1rem; top: -2rem; width: 12rem; height: auto; z-index: 5; } @media (width >= 751px) { .fvLogo { width: 14rem; } .fvBadge { left: -2rem; top: -4rem; width: 16rem; } } /* スライダーアニメーション */ .fvVisualFrame { position: relative; width: 100%; /* max-width: 50rem; */ margin-inline: auto; } @media (width >= 751px) { .fvVisualFrame { max-width: 60rem; } } .fvStack { position: relative; width: 100%; /* aspect-ratio を削除し、中身の画像（1枚目）に高さを出させる */ border-radius: 4rem; } /* --- スライド画像 --- */ /* --- スライダーアニメーション --- */ .fvVisualFrame { position: relative; width: 100%; max-width: 50rem; margin-inline: auto; } .fvStack { position: relative; width: 100%; border-radius: 4rem; background-color: #fff; overflow: hidden; } .fvSlide { width: 100%; height: auto; border-radius: 4rem; opacity: 0; will-change: transform, opacity; /* 周期を16秒に固定 */ animation: fvFloat 16s infinite both; } .fvSlide.is1 { position: relative; } .fvSlide:not(.is1) { position: absolute; inset: 0; } /* 【重要】遅延時間を正確に4秒（25%）ずつずらす */ .fvSlide.is1 { animation-delay: 0s; } .fvSlide.is2 { animation-delay: 4s; } .fvSlide.is3 { animation-delay: 8s; } .fvSlide.is4 { animation-delay: 12s; } /* --- アニメーションの計算を修正 --- 16秒のうち、4秒（25%）が1枚の持ち時間。その中で「フェードイン」「静止・拡大」「フェードアウト」を完結させる */ @keyframes fvFloat { 0% { opacity: 0; transform: scale(1.0); z-index: 1; } /* 1. フェードイン開始 (前の画像が消え始めるのと同時に重なる) */ 1% { opacity: 0; z-index: 3; /* 最前面へ */ } 10% { opacity: 1; z-index: 3; transform: scale(1.02); } /* 2. 表示維持 & 拡大 (次の画像が出てくるまで粘る) */ 25% { opacity: 1; z-index: 3; transform: scale(1.05); } /* 3. フェードアウト開始 (次の画像が10%地点に来るまで消えきらない) */ 35% { opacity: 0; z-index: 2; /* 背後に回る */ transform: scale(1.08); } 100% { opacity: 0; z-index: 1; transform: scale(1.0); } } /* CTA */ /* --- CTA制御 --- */ .fvCtaWrapper { grid-area: cta; display: flex; /* SPでは中央寄せ */ justify-content: center; /* transform: translateY(20rem); */ transform: translateY(16rem); } .fvCta { /* blockではなく、中身のサイズに合わせる設定に変更 */ display: inline-block; width: fit-content; transition: transform 0.3s; /* text-alignは不要になるため削除（またはleft） */ text-align: left; } .fvCta:hover { transform: scale(1.05); } @media (width >= 751px) { .fvCtaWrapper { justify-content: flex-start; transform: none; } .fvCta { /* 左端固定を維持するため、ホバー時の拡大の基準点を左に設定 */ transform-origin: left center; } .fvCta img { max-width: 43rem; } .fvCta:hover { /* opacityはimgではなくaタグにかける方が一般的です */ opacity: 0.8; transform: scale(1.02); } } /* reason */ .reasonSection { margin-top: 6rem; } @media (width >= 751px) { .reasonSection { margin-top: 10rem; } } .reasonCards { display: grid; gap: 8rem; /* ← ここを増やす */ } .reasonCard { position: relative; border-radius: 2rem; background: transparent; /* 内側で白背景を持つ */ box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.15); overflow: visible; /* ← 重要：バッジを切らない */ } .reasonCardInner { border-radius: 2rem; overflow: hidden; /* ← 角丸クリップは内側だけ */ background: #ffffff; } /* バッジ画像（上はみ出し＋下だけカードに少しかかる） */ .reasonBadgeImage { position: absolute; left: 50%; top: -5.6rem; /* ← 上にはみ出す量（ここが肝） */ transform: translateX(-50%); z-index: 5; width: 6.6rem; height: auto; } /* 画像 */ .reasonImage { margin: 0; } .reasonImage img { width: 100%; height: auto; display: block; } /* 下の白エリア */ .reasonBody { padding: 2rem; } .reasonTitle { margin: 0; text-align: center; font-weight: 700; font-size: 2.2rem; color: #005084; line-height: 1.5; } .reasonText { margin-top: 1.2rem; font-size: 1.6rem; color: #606976; line-height: 1.8; } @media (width >= 751px) { .reasonCards { grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } } .priceSection { background: #B9E8F5; padding-top: 4rem; padding-bottom: 4rem; margin-top: 4rem; } @media (width >= 751px){ .priceSection { padding-top: 6rem; padding-bottom: 6rem; margin-top: 6rem; } } .priceHeading { font-size: 3.2rem; color: #005084; font-weight: 700; text-align: center; } /* スライダー */ .priceSection .w-container { overflow: visible !important; position: relative; } .priceSlider { margin-top: 2.5rem; position: relative; overflow: visible; } .sliderViewport { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; /* 手動スクロールを禁止し、JS制御を優先 */ position: relative; } @media (width >= 751px) { .sliderViewport { width: 100%; margin-left: 0; } } /* JSで動かすレール */ .sliderTrack { display: flex; gap: 1.2rem; padding: 4rem 0; /* 左右の余白をJSで制御するため 4% から 0 に変更 */ width: max-content; will-change: transform; } .slide { flex: 0 0 85vw; /* スマホサイズ維持 */ } @media (width >= 751px) { .slide { flex: 0 0 30rem; /* PCサイズ維持 */ } } /* ドット */ .sliderDots { margin-top: 2.5rem; display: flex; justify-content: center; gap: 1.2rem; position: relative; z-index: 50; width: 100%; min-height: 1.2rem; } .sliderDot { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: none; background-color: #ffffff; cursor: pointer; padding: 0; transition: background-color 0.3s; } .sliderDot.isActive { background-color: #47C3E5; } .priceCard { background: #ffffff; border-radius: 2rem; padding: 2rem; position: relative; border: 5px solid #FEF2AE; padding-top: 4.2rem; } .priceCardLabel { position: absolute; left: 50%; top: 0rem; transform: translate(-50%, -50%); width: min(90%, 24rem); background: #005084; color: #ffffff; padding: 1rem 2rem; border-radius: 1.2rem; min-height: 6.4rem; display: flex; text-align: center; flex-direction: column; justify-content: center; align-items: center; font-size: 2.2erm; font-weight: 700; } .priceCardLabel::after { content: ""; position: absolute; left: 50%; bottom: -.9rem; transform: translateX(-50%); width: 0; height: 0; border-left: .8rem solid transparent; border-right: .8rem solid transparent; border-top: 1.2rem solid #005084; } .priceCardLabel span { display: block; font-size: 1.2rem; font-weight: 400; line-height: 1.2; margin-top: .4rem; } .priceCarImage { width: 100%; max-width: 20rem; margin: 2rem auto; display: block; } .priceMain { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; } .priceTag { display: inline-flex; align-items: center; justify-content: center; background: #FF7600; color: #ffffff; font-weight: 700; padding: .8rem 2.2rem .8rem 1.4rem; line-height: 1; clip-path: polygon( 0 0, 80% 0, 100% 100%, 0 100% ); } .priceAmount { font-size: 3.6rem; color: #FF7600; font-weight: 600; font-family: "Figtree", sans-serif; } .priceYen { font-size: 2rem; } .priceBreakdownTitle { margin-top: 2rem; background: #f0f0f0; text-align: center; font-weight: 700; color: #005084; } .priceRow { display: flex; justify-content: space-between; padding: 1.2rem 0; border-bottom: 1px solid #ddd; align-items: center; } .sliderArrowRight { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); font-size: 2rem; background: none; border: none; } .priceDetail { font-family: "Figtree", sans-serif; font-weight: 500; font-size: 2.4rem; } .sliderDots { margin-top: 1.6rem; display: flex; justify-content: center; gap: 1rem; } .sliderDot { width: 1.2rem; height: 1.2rem; border-radius: 9999px; border: none; background: #ffffff; } .sliderDot.isActive { background: #47C3E5; } .inspectionSupport { margin-top: 4rem; } @media (width >= 751px) { .inspectionSupport { margin-top: 6rem; } } .inspectionSupportLead { margin-top: 1.6rem; text-align: center; font-weight: 700; font-size: 2.2rem; color: #005084; } .inspectionSupportLeadAccent { color: #FF7600; } .inspectionSupportImage { width: 10rem; height: auto; display: block; margin: 1.6rem auto 0; } .inspectionSupportText { margin-top: 1.6rem; text-align: center; font-size: 1.6rem; color: #606976; line-height: 1.8; } @media (width >= 751px) { .inspectionSupportFlex { display: grid; max-width: 68rem; margin: 3.2rem auto 0; column-gap: 2rem; grid-template-columns: 13rem 1fr; grid-template-areas: "image lead" "image text"; align-items: center; } .inspectionSupportLead { grid-area: lead; margin: 0; text-align: left; } .inspectionSupportText { grid-area: text; margin-top: 1rem; text-align: left; } .inspectionSupportImage { grid-area: image; width: 13rem; margin: 0; justify-self: start; } } .inspectionSupportAccordion { margin-top: 4.8rem; border: 2px solid #005084; border-radius: 1rem; max-width: 70rem; margin-inline: auto; overflow: hidden; } .inspectionSupportAccordionHead { width: 100%; background: #005084; padding: 1.6rem; display: flex; align-items: center; justify-content: center; position: relative; } .inspectionSupportAccordionTitle { font-size: 1.6rem; font-weight: 700; color: #ffffff; } .inspectionSupportAccordionIcon { position: absolute; right: 1.6rem; top: 50%; transform: translateY(-50%); display: block; width: 1.2rem; height: 1.2rem; } .inspectionSupportAccordionIcon::before, .inspectionSupportAccordionIcon::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; } .inspectionSupportAccordionIcon::before { width: 1.6rem; height: 2px; } .inspectionSupportAccordionIcon::after { width: 2px; height: 1.6rem; } .inspectionSupportAccordion.isOpen .inspectionSupportAccordionIcon::after { display: none; } .inspectionSupportAccordionBody { display: none; padding: 1.6rem; background: #ffffff; } .inspectionSupportAccordion.isOpen .inspectionSupportAccordionBody { display: block; } .inspectionSupportList { display: grid; gap: 1.2rem; } .inspectionSupportItem { display: grid; grid-template-columns: 4.2rem 1fr; align-items: start; } .inspectionSupportNo { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; aspect-ratio: 1 / 1; border-radius: 4px; background: #FF7600; color: #ffffff; font-family: "Figtree", sans-serif; font-weight: 700; font-size: 1.4rem; line-height: 1; } .inspectionSupportItemText { margin: 0; color: #005084; font-weight: 700; font-size: 1.6rem; line-height: 1.7; } @media (width >= 751px) { .inspectionSupportList { grid-template-columns: 1fr 1fr; /* 左 01-05 / 右 06-10 */ column-gap: 2.4rem; row-gap: 1.2rem; } } /* voice section */ /* .sectionTitle._reverse .sectionTitleAccent { color: #000000; } .sectionTitle._reverse .sectionTitleMain { display: inline-block; position: relative; color: #FF4323; font-weight: 700; font-size: 3.2rem; margin-top: .8rem; } .sectionTitle._reverse .sectionTitleAccent::after { display: none; } .sectionTitle._reverse .sectionTitleMain::after { content: ""; position: absolute; display: block; left: 50%; transform: translateX(-50%); width: 100%; height: 2rem; background: url("/beN8uW4H0gC06hUh/wp-content/themes/shakenkan/src/img/contents/lp05/underline_voice.png") no-repeat center; background-size: 100% 100%; top: 100%; margin-top: 1rem; z-index: 1; } */ .voiceSection { margin-top: 8rem; } .voiceSectionImage { text-align: center; } /* voice card */ .voiceCardsWrapper { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; } .voiceCardInner { background: #ffffff; border: 4px solid #47C3E5; border-radius: 3rem; padding: 3rem; box-shadow: 0 0 0 rgba(0,0,0,0); } .voiceCardTop { display: grid; grid-template-columns: max-content 1fr; gap: 2rem; align-items: center; } .voiceAvatar img { max-width: 10rem; height: auto; } .voiceHead { text-align: left; } .voiceTitle { color: #005084; font-weight: 700; --min-size: 16; --max-size: 22; font-size: var(--clamp-size); line-height: 1.5; padding-top: 1rem; } .voiceRating { display: flex; align-items: center; gap: 1.6rem; justify-content: flex-start; margin-top: 1.8rem; } .voiceScore { color: #FF7A00; font-weight: 500; --min-size: 22; --max-size: 22; font-size: var(--clamp-size); } .voiceStars { display: inline-flex; align-items: center; gap: .2rem; color: #FF7A00; } .voiceStar { width: 2.4rem; height: 2.4rem; } .voiceStar.isFull path { fill: currentColor; } .voiceStar.isHalf .voiceStarBase { fill: none; stroke: currentColor; stroke-width: 1.5; } .voiceStar.isHalf .voiceStarFill { fill: url(#halfFill); } .voiceText { margin-top: 1.7rem; color: #606976; font-weight: 500; --min-size: 16; --max-size: 16; font-size: var(--clamp-size); line-height: 1.9; } .voiceFooter { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; } .voiceShop { display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.6rem; border-radius: 9999px; border: 1px solid #47C3E5; color: #47C3E5; font-size: 1.2rem; } .voiceMeta { color: #9F9F9F; --min-size: 12; --max-size: 12; font-size: var(--clamp-size); } @media (width >= 751px) { .voiceCardsWrapper { margin-top: 4rem; flex-direction: row; align-items: stretch; } .voiceSectionImage img { max-width: 45rem; } .voiceCardInner { padding: 3rem 2.5rem; height: 100%; } .voiceCard { flex: 1; } .voiceTitle { padding-top: 2rem; } .voiceCardTop { gap: 1.5rem; } .voiceRating { justify-content: flex-start; } } /* inspection flow */ .inspectionFlow { margin-top: 8rem; padding-bottom: 4rem; } /* .sectionTitle._short { padding-bottom: 4rem; } .sectionTitle._short .sectionTitleAccent::after { top: 5.5rem; background: url(/beN8uW4H0gC06hUh/wp-content/themes/shakenkan/src/img/contents/lp05/underline-short.png) no-repeat center; background-size: 100% 100%; } */ .inspectionFlowList { width: 100%; max-width: 66rem; margin-inline: auto; } .inspectionFlowItem { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: start; padding: 2rem 0; border: 2px solid #DEDEDE; border-radius: 1rem; padding: 1.6rem 2rem; background: #ffffff; } .inspectionFlowIcon { width: 5rem; height: auto; } .inspectionFlowHead { margin: 0; display: flex; align-items: baseline; gap: 1.2rem; } .inspectionFlowNo { color: #47C3E5; font-family: "Figtree", sans-serif; font-weight: 700; font-size: 3.2rem; line-height: 1; } .inspectionFlowTitle { color: #005084; font-weight: 700; font-size: 2.2rem; line-height: 1.2; } .inspectionFlowText { margin: 1rem 0 0; color: #606976; font-weight: 500; font-size: 1.6rem; line-height: 1.7; } .inspectionFlowArrow { display: flex; justify-content: center; padding: 1rem 0; } .inspectionFlowArrow img { width: 3.3rem; height: auto; } @media (width >= 751px) { .inspectionFlow { margin-top: 10rem; padding-bottom: 6rem; } .inspectionFlowList { padding: 2rem 3rem; } .inspectionFlowItem { gap: 4.5rem; } } /* bringItem */ .bringItems { background: #B9E8F5; padding: 3rem 0; } /* .bringItems .sectionTitle._reverse .sectionTitleMain { color: #005084; } .bringItems .sectionTitle._reverse .sectionTitleMain::after { background: url(/beN8uW4H0gC06hUh/wp-content/themes/shakenkan/src/img/contents/lp05/underline_white.png) no-repeat center; } */ .bringItemsGrid { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .bringItemCard { background: #ffffff; padding: 1.5rem; border-radius: 1.6rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; } .bringItemIcon { width: 8rem; height: auto; } .bringItemTitle { margin: 0; font-weight: 700; font-size: 1.8rem; color: #005084; line-height: 1.3; } .bringItemNoteMark { font-size: 1rem; font-weight: 700; margin-left: .3rem; vertical-align: -.5rem; } /* .bringItemText { margin: 0; font-size: 1.4rem; color: #606976; line-height: 1.7; } */ .bringItemsNotes { margin-top: 2rem; display: grid; } .bringItemsNote { font-size: 1.2rem; color: #606976; display: grid; grid-template-columns: 4.6rem 1fr; gap: .8rem; align-items: start; } .bringItemsNoteMark { color: #00214D; } @media (width >= 751px) { .bringItems { padding: 6rem 0; } .bringItemsGrid { margin-top: 4rem; grid-template-columns: repeat(4, 1fr); max-width: 66rem; margin-inline: auto; } .bringItemsNotes { margin-top: 4rem; max-width: 66rem; margin-inline: auto; } } /* faq */ .faq { padding-bottom: 4rem; margin-top: 8rem; } @media (width >= 751px) { .faq { padding-bottom: 6rem; margin-top: 6rem; } } .faqInner { max-width: 66rem; margin-inline: auto; display: grid; gap: 2rem; } .faqItem { background: rgba(71, 195, 229, 0.06); border-radius: 2rem; padding: 2rem 1.5rem; } .faqButton { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; text-align: left; } .faqQLabel { font-family: "Figtree", sans-serif; font-weight: 700; font-size: 2.4rem; color: #005084; } .faqQuestion { font-weight: 700; font-size: 1.6rem; color: #005084; } .faqIcon { width: 1.6rem; height: 1.6rem; position: relative; } .faqIcon::before, .faqIcon::after { content: ""; position: absolute; background: #47C3E5; left: 50%; top: 50%; transform: translate(-50%, -50%); } .faqIcon::before { width: 1.6rem; height: 2px; } .faqIcon::after { width: 2px; height: 1.6rem; } /* open state */ .faqItem.isOpen .faqIcon::after { display: none; } .faqAnswer { display: none; margin-top: 1rem; } .faqItem.isOpen .faqAnswer { display: block; } .faqAnswerLead { font-weight: 700; font-size: 1.6rem; color: #FF7600; } .faqAnswerText { margin-top: 1rem; font-size: 1.6rem; color: #00214D; } /* service links */ .serviceLinks { background: rgba(222, 222, 222, 0.2); padding: 4rem 0; } .serviceLinksInner { padding-inline: 12%; margin-inline: auto; } /* .sectionTitle { position: relative; margin: 0 0 3rem; text-align: center; line-height: 1.4; padding-bottom: 6rem; } .sectionTitleAccent { display: inline-block; position: relative; color: #47C3E5; font-weight: 700; font-size: 3.2rem; } .sectionTitleUnderline { display: none; } .sectionTitleAccent::after { content: ""; position: absolute; left: 0; width: 100%; height: 20px; background: url("/beN8uW4H0gC06hUh/wp-content/themes/shakenkan/src/img/contents/lp05/underline.png") no-repeat center; background-size: contain; top: 10.5rem; } .sectionTitleMain { display: inline-block; color: #000000; font-weight: 700; font-size: 2.4rem; margin-top: .8rem; } */ .serviceLinksGrid { display: flex; flex-direction: column; gap: 2rem; } .serviceLinkCard { background: #ffffff; border-radius: 2rem; padding: 2rem; display: grid; gap: 1.6rem; box-shadow: 3px 3px 20px rgba(0,0,0,.12); } .serviceLinkCard:hover { opacity: .8; } .serviceLinkImage { width: 100%; height: auto; border-radius: 1.2rem; } .serviceLinkBody { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; } .serviceLinkText { margin: 0; font-weight: 700; --min-size: 18; --max-size: 18; font-size: var(--clamp-size); color: #005084; } .serviceLinkArrow { width: 4rem; height: 4rem; border-radius: 9999px; background: #005084; display: inline-flex; align-items: center; justify-content: center; } .serviceLinkArrowIcon { width: 2rem; height: 2rem; color: #ffffff; } @media (width >= 751px) { .serviceLinks { padding: 6rem 0; } .serviceLinksInner { width: 900px; padding-inline: 0; } .serviceLinksGrid { flex-direction: row; } .serviceLinkCard { width: calc((100% - 4rem) / 3); } } /* footer */ .footer { background: #fff; padding-top: 1.5rem; padding-bottom: 10rem; } .copyright { text-align: center; font-size: 1rem; } /* チャットボット位置調整 */ .lp05-test .hitobo { bottom: 90px !important; } @media (width >= 751px) { .lp05-test .hitobo { bottom: 120px !important; } } .fvCaption { font-size: 12px; color: #888888; text-align: right; margin-top: 10px; line-height: 1.5; } .fvCaption a { text-decoration: underline; }