@charset "UTF-8"; /* Reset style */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) 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 */ @import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap); *: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; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 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; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::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; } .pc { display: block; } @media screen and (max-width: 768px) { .pc { display: none !important; } } .sp { display: none !important; } @media screen and (max-width: 768px) { .sp { display: block !important; } } /* br-sp */ .br-sp_1420 { display: none; } @media screen and (max-width: 1420px) { .br-sp_1420 { display: block; } } .br-sp_1380 { display: none; } @media screen and (max-width: 1380px) { .br-sp_1380 { display: block; } } .br-sp_1280 { display: none; } @media screen and (max-width: 1280px) { .br-sp_1280 { display: block; } } .br-sp_1180 { display: none; } @media screen and (max-width: 1180px) { .br-sp_1180 { display: block; } } .br-sp_880 { display: none; } @media screen and (max-width: 880px) { .br-sp_880 { display: block; } } .br-sp_820 { display: none; } @media screen and (max-width: 820px) { .br-sp_820 { display: block; } } .br-sp_580 { display: none; } @media screen and (max-width: 580px) { .br-sp_580 { display: block; } } .br-sp_480 { display: none; } @media screen and (max-width: 480px) { .br-sp_480 { display: block; } } /* br-sp_oo-oo */ /* br-pc */ .br-pc_580 { display: block; } @media screen and (max-width: 580px) { .br-pc_580 { display: none; } } /* br-pc_oo-oo */ html { font-size: 62.5%; scroll-behavior: smooth; } @media screen and (max-width: 768px) { html { font-size: 54.6%; } } body { width: 100%; margin: 0 auto; font-family: "Zen Kaku Gothic New", serif; color: #000; font-size: 1.6rem; overflow-x: hidden; } img { display: block; width: 100%; -o-object-fit: contain; object-fit: contain; } h2, h3, h4, p, li, a, div { letter-spacing: 0.1em; line-height: 1.8; font-weight: 500; } .toggle_contents { display: none; } .market { font-family: "ff-market-web", sans-serif; } .barlow { font-family: barlow-condensed, sans-serif; } a { display: block; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; } a:hover { opacity: 0.8; } .no-link { pointer-events: none; } .inner { /*max-width: 1280px;*/ width: 100%; margin-inline: auto; /*@media screen and (max-width: 1320px) { padding-inline: 5%; }*/ } .inner02 { max-width: 900px; width: 90%; margin-inline: auto; } .inner03 { max-width: 980px; width: 100%; margin-inline: auto; } @media screen and (max-width: 1080px) { .inner03 { padding-inline: 5%; } } .inner04 { max-width: 700px; width: 90%; margin-inline: auto; } .titlebox { margin-bottom: 6rem; color: #fff; } .titlebox h2 { font-size: 2rem; } .titlebox h2 span { font-family: barlow-condensed, sans-serif; font-size: 12rem; font-weight: 400; display: block; line-height: 1; } @media screen and (max-width: 768px) { .titlebox h2 span { font-size: 8rem; } } .bar { color: #fff; background-color: #173682; text-align: center; width: 100%; padding: 1.5rem 0; line-height: 1; letter-spacing: 0.3em; border-radius: 4rem; font-size: 3rem; margin-bottom: 2rem; } .border { display: inline-block; position: relative; z-index: 3; width: -moz-fit-content; width: fit-content; } .border::after { content: ""; display: inline-block; width: 100%; height: 1.6rem; background-color: #F0D228; position: absolute; top: 50%; left: 0; z-index: -1; } .btnbox { position: absolute; bottom: 0; right: 0; display: flex; align-items: center; gap: 1rem; transform: translateY(50%); } .btnbox .btn00 a { display: flex; align-items: center; justify-content: center; padding: 1rem 0; width: 33rem; background-color: #DF9629; border-radius: 1rem; line-height: 1; color: #fff; font-size: 2rem; gap: 1rem; } .btnbox .btn00 a img { width: 4rem; } .btnbox .btn02 a { background-color: #138E7B; border-radius: 1rem 0 0 1rem; } .copy { font-size: 1.2rem; font-family: "Open Sans", serif; font-style: italic; letter-spacing: 0.09em; font-weight: 400; transform: translateX(-3rem) scale(0.7, 0.9); display: inline-block; width: -moz-fit-content; width: fit-content; margin-inline: auto; } .sp.copy { text-align: center; width: 100%; transform: scale(0.7, 0.9); } .header { /*max-width: 1280px;*/ width: 100%; margin-inline: auto; position: fixed; top: 0; left: 0; z-index: 15; } @media screen and (max-width: 1080px) { .header { position: fixed; } } .header .inner { display: flex; align-items: center; justify-content: space-between; background-color: #fff; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); padding: 1.5rem 3rem; width: 96%; margin-inline: unset; border-radius: 0 0 4rem 0; } @media screen and (max-width: 1080px) { .header .inner { width: 100%; padding: 2rem; border-radius: 0; } } .header .inner .left { width: 36rem; } @media screen and (max-width: 1080px) { .header .inner .left { width: 28rem; } } .header .inner .right { display: flex; align-items: center; gap: 2rem; } @media screen and (max-width: 1080px) { .header .inner .right { display: none; } } .header .inner .right .in-left nav ul { display: flex; align-items: center; gap: 2rem; } .header .inner .right .in-left nav ul li a { font-size: 1.4rem; } .header .inner .right .in-right a { font-size: 1.4rem; color: #fff; background-color: #138E7B; padding: 1rem 3rem; border-radius: 4rem; line-height: 1; } .header .inner .sp-menu { display: inline-block; position: relative; width: 36px; height: 28px; vertical-align: middle; cursor: pointer; display: none; } @media screen and (max-width: 1080px) { .header .inner .sp-menu { display: block; } } .header .inner .sp-menu span { display: inline-block; box-sizing: border-box; position: absolute; left: 0; width: 100%; height: 4px; background-color: #003737; transition: all 0.5s 0.2s; } .header .inner .sp-menu span:nth-of-type(1) { top: 0; } .header .inner .sp-menu span:nth-of-type(2) { top: 12px; } .header .inner .sp-menu span:nth-of-type(3) { bottom: 0; } .header .inner .sp-menu.active span:nth-of-type(1) { transform: translateY(12px) rotate(-45deg); } .header .inner .sp-menu.active span:nth-of-type(2) { opacity: 0; } .header .inner .sp-menu.active span:nth-of-type(3) { transform: translateY(-12px) rotate(45deg); } .sp-nav { width: 100%; background-color: rgba(0, 55, 55, 0.9); color: #fff; text-align: center; display: none; position: fixed; top: 9rem; left: 0; z-index: 10; } .sp-nav ul { padding: 20px 0; } .sp-nav ul li { padding: 5px 0; } .sp-nav ul li a { margin-inline: auto; font-weight: 400; } .link-company { border: 1px solid #003737; color: #003737; font-size: 1.4rem; padding: 1rem 3rem; border-radius: 4rem; line-height: 1; } .link-company:hover { background-color: #138E7B; color: #fff; } .link-company02 { color: #fff; border: 1px solid #fff; } .link-company02:hover { background-color: #fff; color: #003737; } .dpo { margin-bottom: 15rem; /*max-width: 1280px;*/ margin-inline: auto; } .dpo .box { text-align: center; border-radius: 2rem; overflow: hidden; } .dpo .box h2 { color: #fff; font-size: 3.6rem; background-color: #138E7B; letter-spacing: 0; padding: 2rem 0; line-height: 1; } @media screen and (max-width: 768px) { .dpo .box h2 { font-size: 2.6rem; } } .dpo .box .inbox { padding: 3.7rem 5rem; background-image: linear-gradient(180deg, rgb(246, 246, 246), rgb(227, 236, 235)); } @media screen and (max-width: 768px) { .dpo .box .inbox { padding: 2rem; } } .dpo .box .inbox .txt01 { font-family: "Open Sans", serif; } .dpo .box .inbox .txt01 span { color: #DF9629; font-size: 2.4rem; font-style: italic; letter-spacing: 0.09em; font-weight: 650; transform: scale(0.7, 0.9); display: inline-block; } .dpo .box .inbox .txt02 { font-size: 2.6rem; margin-bottom: 3rem; letter-spacing: 0; } @media screen and (max-width: 768px) { .dpo .box .inbox .txt02 { font-size: 2rem; } } .dpo .box .inbox ul { display: flex; align-items: center; gap: 1rem; } @media screen and (max-width: 768px) { .dpo .box .inbox ul { flex-direction: column; } } .dpo .box .inbox ul li { width: calc((100% - 2rem) / 3); } @media screen and (max-width: 768px) { .dpo .box .inbox ul li { width: 25rem; } } .dpo .box .inbox ul li a { width: 100%; border-radius: 1rem; background-color: #fff; padding: 1.7rem 0; line-height: 1; position: relative; transition: all 0.3s; } @media screen and (max-width: 1080px) { .dpo .box .inbox ul li a { font-size: 1.4rem; letter-spacing: 0; } } .dpo .box .inbox ul li a::after { content: ""; display: inline-block; background-image: url("../img/arrorw-bl.png"); background-repeat: no-repeat; background-size: contain; width: 7px; aspect-ratio: 7/12; position: absolute; top: 50%; right: 2rem; transform: translate(0, -50%); transition: all 0.3s; } .dpo .box .inbox ul li a:hover { background-color: #DF9629; color: #fff; } .dpo .box .inbox ul li a:hover::after { background-image: url("../img/arrrow-wh.png"); transform: translate(3px, -50%); } .mv { position: relative; } .mv .left { position: absolute; top: 13rem; width: 12rem; padding-left: 5rem; z-index: 5; } @media screen and (max-width: 768px) { .mv .left { padding-left: 2rem; } } @media screen and (max-width: 580px) { .mv .left { padding-left: 1rem; } } .mv .left .line { border-left: 1px solid #138E7B; width: 2rem; height: 36.5rem; transform: translateX(40%); } @media screen and (max-width: 1180px) { .mv .left .line { height: 30vw; } } @media screen and (max-width: 880px) { .mv .left .line { height: 14vw; } } .mv .left p { writing-mode: vertical-rl; line-height: 2rem; font-family: "Open Sans", serif; font-weight: 600; color: #003737; font-style: italic; margin-top: 3rem; font-size: 1.6rem; letter-spacing: 0.05em; } .mv .right { width: calc(100% - 12rem); margin-left: auto; position: relative; z-index: 5; } @media screen and (max-width: 768px) { .mv .right { width: calc(100% - 6rem); aspect-ratio: 4/3; border-radius: 0 0 0 8rem; overflow: hidden; } } @media screen and (max-width: 580px) { .mv .right { width: calc(100% - 4rem); aspect-ratio: 3/4; } } .mv .right .image { border-radius: 0 0 0 8rem; } @media screen and (max-width: 768px) { .mv .right .image { aspect-ratio: 4/3; -o-object-fit: cover; object-fit: cover; } } @media screen and (max-width: 580px) { .mv .right .image { aspect-ratio: 3/4; } } .mv .right .txt { color: #fff; font-size: 4rem; position: absolute; bottom: 6rem; left: 6rem; line-height: 1.4; } @media screen and (max-width: 768px) { .mv .right .txt { font-size: 3.2rem; bottom: 3rem; left: 3rem; } } @media screen and (max-width: 580px) { .mv .right .txt { text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.9); bottom: 13rem; } } @media screen and (max-width: 768px) { .mv .right .btnbox { flex-direction: column; transform: unset; } .mv .right .btnbox .btn00 a { width: 20rem; font-size: 1.6rem; } .mv .right .btnbox .btn00 a img { width: 2.5rem; } .mv .right .btnbox .btn01 a { border-radius: 1rem 0 0 1rem; } } /* フォーム左のキャッチコピー（PC表示） */ .mv .right { position: relative; } .mv .right .mv-catch { position: absolute; z-index: 6; /* フォームの右:9rem + 幅:40rem + 間隔:2rem → 左側に配置 */ right: calc(5rem + 90rem + 2rem); bottom: 60rem; color: #fff; font-weight: 800; line-height: 1.2; font-size: clamp(5rem, 3.6vw, 5.2rem); text-shadow: 0 6px 18px rgba(0,0,0,.45); letter-spacing: .02em; max-width: 40rem; } /* 画面が狭い時は位置を寄せる or 非表示 */ @media screen and (max-width: 1180px) { .mv .right .mv-catch { right: 52rem; } /* ざっくり寄せる */ } @media screen and (max-width: 992px) { .mv .right .mv-catch { right: 3rem; max-width: 32rem; } } @media screen and (max-width: 768px) { .mv .right .mv-catch { display: none; } /* モバイルは非表示（必要なら表示に変更可） */ } .sec01 .inner .ttlbox { position: relative; display: flex; align-items: center; gap: 2rem; padding: 13.5rem 0 0 12rem; margin-bottom: 2rem; } @media screen and (max-width: 900px) { .sec01 .inner .ttlbox { padding: 8rem 0 0 4rem; } } @media screen and (max-width: 580px) { .sec01 .inner .ttlbox { padding: 4rem 0 0 3rem; flex-wrap: wrap; gap: 0 2rem; margin-bottom: 4rem; } } .sec01 .inner .ttlbox::after { content: ""; display: inline-block; position: absolute; bottom: 0; left: 0; width: 80%; height: 41rem; background-color: #BCE7E0; border-radius: 0 30rem 30rem 0; } .sec01 .inner .ttlbox h2 { line-height: 0.6; width: 23.5rem; } @media screen and (max-width: 768px) { .sec01 .inner .ttlbox h2 { width: 16.5rem; } } .sec01 .inner .ttlbox h2 span { font-family: "Open Sans", serif; color: #138E7B; font-size: 8rem; position: relative; z-index: 5; font-style: italic; letter-spacing: 0.09em; font-weight: 650; transform: translateX(-4.5rem) scale(0.7, 0.9); display: inline-block; } @media screen and (max-width: 768px) { .sec01 .inner .ttlbox h2 span { font-size: 6rem; } } .sec01 .inner .ttlbox .line { width: 10rem; height: 3px; background-color: #138E7B; position: relative; z-index: 5; } .sec01 .inner .ttlbox p { position: relative; z-index: 5; font-size: 2rem; color: #505050; letter-spacing: 0; } @media screen and (max-width: 768px) { .sec01 .inner .ttlbox p { font-size: 1.6rem; } } @media screen and (max-width: 580px) { .sec01 .inner .ttlbox p { width: calc(100% - 3rem); text-align: end; } } .sec01 .inner .txt { line-height: 1.4; padding-left: 12rem; } @media screen and (max-width: 768px) { .sec01 .inner .txt { padding-left: 0; text-align: center; } } .sec01 .inner .img { max-width: 74rem; margin: 6rem auto 4rem; width: 90%; } .sec01 .inner02 ul { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 12rem; } @media screen and (max-width: 768px) { .sec01 .inner02 ul { margin-bottom: 6rem; } } .sec01 .inner02 ul li { background-color: #F1F5F5; border-radius: 1rem; padding: 1rem 2rem; width: 100%; display: flex; align-items: center; gap: 1.5rem; } @media screen and (max-width: 480px) { .sec01 .inner02 ul li { flex-direction: column; gap: 0; } } .sec01 .inner02 ul li p { font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.02em; } .sec01 .inner02 ul li p:nth-child(1) span { font-family: "Open Sans", serif; color: #138E7B; font-size: 2.2rem; font-style: italic; letter-spacing: 0.09em; font-weight: 650; transform: scale(0.7, 0.9); display: inline-block; } .sec01 .inner02 ul li:nth-child(1), .sec01 .inner02 ul li:nth-child(2) { width: calc((100% - 1rem) / 2); } @media screen and (max-width: 768px) { .sec01 .inner02 ul li:nth-child(1), .sec01 .inner02 ul li:nth-child(2) { width: 100%; } } .sec02 .inner .box { background-image: linear-gradient(180deg, rgb(19, 142, 123), rgba(0, 0, 0, 0.73)); padding: 5.4rem 12rem 5rem; text-align: center; border-radius: 6rem 6rem 0 0; position: relative; } @media screen and (max-width: 1080px) { .sec02 .inner .box { padding: 5.4rem 2rem 5rem; width: 100%; } } .sec02 .inner .box::after { content: "ADVANTAGES OF DPO"; display: inline-block; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%) scale(0.7, 0.9); background: linear-gradient(180deg, rgb(19, 142, 123), rgb(188, 231, 224)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "Open Sans", serif; font-size: 8rem; font-style: italic; font-weight: 700; width: 100%; letter-spacing: 0.1em; } @media screen and (max-width: 1080px) { .sec02 .inner .box::after { font-size: 6rem; width: 125vw; line-height: 1; } } .sec02 .inner .box .txt01 { color: #fff; font-size: 2rem; line-height: 1; padding: 2rem 0 4rem; width: -moz-fit-content; width: fit-content; margin-inline: auto; position: relative; } .sec02 .inner .box .txt01::after { content: ""; display: inline-block; width: 80%; height: 3px; background-color: #fff; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .sec02 .inner .box .ul01 { display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 4rem; } .sec02 .inner .box .ul01 li { width: calc((100% - 4rem) / 3); border-radius: 1rem; overflow: hidden; background-color: #fff; } @media screen and (max-width: 1080px) { .sec02 .inner .box .ul01 li { width: 100%; max-width: 500px; margin-inline: auto; } } @media screen and (max-width: 1080px) { .sec02 .inner .box .ul01 li .img { aspect-ratio: 2/1; overflow: hidden; } .sec02 .inner .box .ul01 li .img img { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } } .sec02 .inner .box .ul01 li .txtbox { display: flex; align-items: center; justify-content: center; padding: 1.6rem; height: 7rem; } .sec02 .inner .box .ul01 li .txtbox p { line-height: 1.2; font-weight: 700; font-size: 1.6rem; } .sec02 .inner .box .ul01 li .txtbox p span { color: #DF9629; } .sec02 .inner .box .ul02 li { padding: 2.6rem; line-height: 1.2; font-size: 2rem; font-weight: 500; } .sec02 .inner .box .ul02 li span { color: #138E7B; } .sec02 .inner .box .txt02 { transform: scale(0.7, 0.9); color: #fff; font-family: "Open Sans", serif; font-size: 6rem; font-style: italic; font-weight: 700; letter-spacing: 0.1em; width: -moz-fit-content; width: fit-content; margin-inline: auto; line-height: 1; } .sec02 .inner .box .txt03 { font-size: 2rem; font-weight: 500; line-height: 1.4; margin-bottom: 2rem; color: #fff; } .sec03 { position: relative; } .sec03 .pop { background-color: #DF9629; padding: 1.7rem 0rem; text-align: center; font-size: 2.6rem; letter-spacing: 0; color: #fff; border-radius: 4rem; width: 100%; max-width: 74rem; margin-inline: auto; line-height: 1; transform: translate(-50%, -50%); position: absolute; left: 50%; top: 0; z-index: 5; } @media screen and (max-width: 768px) { .sec03 .pop { line-height: 1.2; font-size: 2rem; } } .sec03 .pop::after { content: ""; display: inline-block; width: 33px; aspect-ratio: 1; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 80%); background-image: url("../img/arrorw-or.png"); background-repeat: no-repeat; background-size: contain; } .sec03 .inner { position: relative; overflow: hidden; padding-bottom: 8.4rem; } .sec03 .inner::before { content: ""; display: inline-block; background-image: url("../img/bg01.png"); background-repeat: no-repeat; background-size: contain; width: 60rem; aspect-ratio: 1; position: absolute; top: -8rem; z-index: -1; } .sec03 .inner::after { content: "SUPPORT"; color: #F6F6F6; font-family: "Open Sans", serif; font-size: 16rem; position: absolute; bottom: -8.5rem; right: 0; z-index: -1; transform: translateX(15%) scale(0.7, 0.9); font-style: italic; font-weight: 700; letter-spacing: 0.1em; } @media screen and (max-width: 768px) { .sec03 .inner::after { font-size: 10rem; bottom: -5.5rem; } } .sec03 .inner03 { position: relative; } .sec03 .inner03 .box { margin: 12rem 0 0; text-align: center; } @media screen and (max-width: 768px) { .sec03 .inner03 .box { margin: 8rem 0 0; } } .sec03 .inner03 .box h2 { font-size: 3.6rem; color: #138E7B; } @media screen and (max-width: 880px) { .sec03 .inner03 .box h2 { line-height: 1.2; margin-bottom: 2rem; } } @media screen and (max-width: 768px) { .sec03 .inner03 .box h2 { font-size: 2.8rem; } } .sec03 .inner03 .box .txt { font-size: 1.6rem; margin-bottom: 4rem; } .sec03 .inner03 .box .inbox { display: flex; align-items: center; gap: 1.2rem; } @media screen and (max-width: 768px) { .sec03 .inner03 .box .inbox { flex-direction: column; } } .sec03 .inner03 .box .inbox .left { width: 30rem; border-radius: 1rem; overflow: hidden; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1); } .sec03 .inner03 .box .inbox .left .ulbox h3 { background-color: #DC1464; color: #fff; line-height: 1; font-size: 2.6rem; padding: 1.5rem; font-weight: 400; } @media screen and (max-width: 768px) { .sec03 .inner03 .box .inbox .left .ulbox h3 { font-size: 2rem; } } .sec03 .inner03 .box .inbox .left .ulbox ul { padding: 1rem 2rem 2rem; background-color: #fff; } .sec03 .inner03 .box .inbox .left .ulbox ul li { padding: 1rem 0; font-size: 1.8rem; font-weight: 400; letter-spacing: 0.01em; border-bottom: 2px solid #E3ECEB; line-height: 1.4; } @media screen and (max-width: 768px) { .sec03 .inner03 .box .inbox .left .ulbox ul li { font-size: 1.6rem; } } .sec03 .inner03 .box .inbox .left .ulbox ul li:last-child { border-bottom: none; } .sec03 .inner03 .box .inbox .center { width: 2rem; } @media screen and (max-width: 768px) { .sec03 .inner03 .box .inbox .center { transform: rotate(90deg); } } .sec03 .inner03 .box .inbox .right { width: calc(100% - 2.4rem - 30rem); } @media screen and (max-width: 768px) { .sec03 .inner03 .box .inbox .right { width: 100%; max-width: 60rem; } } .sec04 .inner { background-image: url("../img/bg02.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 5.7rem 0; } .sec04 .inner .box { text-align: center; } .sec04 .inner .box h2 { color: #fff; font-size: 2.8rem; letter-spacing: 0; margin-bottom: 2rem; line-height: 1; font-weight: 400; } @media screen and (max-width: 768px) { .sec04 .inner .box h2 { font-size: 2rem; } } .sec04 .inner .box a { background-color: #fff; border-radius: 4rem; padding: 1.5rem 0; width: 90%; max-width: 53rem; margin-inline: auto; color: #138E7B; font-size: 2.6rem; line-height: 1.2; font-weight: 400; left: 0; position: relative; transition: all 0.3s; } @media screen and (max-width: 768px) { .sec04 .inner .box a { font-size: 1.8rem; } } .sec04 .inner .box a::after { content: ""; display: inline-block; background-image: url("../img/arrorw-gr.png"); background-repeat: no-repeat; background-size: contain; width: 0.7rem; aspect-ratio: 7/12; position: absolute; top: 50%; right: 2rem; transform: translate(0%, -50%); transition: all 0.3s; } .sec04 .inner .box a:hover { background-color: #138E7B; color: #fff; } .sec04 .inner .box a:hover::after { transform: translate(3px, -50%); background-image: url("../img/arrrow-wh.png"); } .sec05 .inner { background-image: linear-gradient(0deg, rgb(246, 246, 246), rgb(255, 255, 255)); } .sec05 .inner .linkbox { margin-top: 12rem; } @media screen and (max-width: 768px) { .sec05 .inner .linkbox { margin-top: 6rem; } } .sec05 .inner h2 { font-size: 4rem; color: #138E7B; font-weight: 500; text-align: center; line-height: 1.2; letter-spacing: 0.01em; margin-bottom: 3rem; } @media screen and (max-width: 768px) { .sec05 .inner h2 { font-size: 3rem; } } .sec05 .inner h2 span { color: #003737; font-size: 2rem; letter-spacing: 0; } @media screen and (max-width: 768px) { .sec05 .inner h2 span { font-size: 1.6rem; } } .sec05 .inner .ul-link { display: flex; gap: 1rem; margin-bottom: 8rem; max-width: 1070px; width: 90%; margin-inline: auto; } @media screen and (max-width: 1180px) { .sec05 .inner .ul-link { flex-wrap: wrap; } } .sec05 .inner .ul-link li { width: calc((100% - 2rem) / 3); background-image: linear-gradient(170deg, rgb(19, 142, 123), rgb(188, 231, 224)); padding: 2px; border-radius: 1rem; } @media screen and (max-width: 1180px) { .sec05 .inner .ul-link li { width: calc((100% - 1rem) / 2); } } @media screen and (max-width: 480px) { .sec05 .inner .ul-link li { width: 100%; } } .sec05 .inner .ul-link li a { background-color: #fff; border-radius: 1rem; width: 100%; text-align: center; height: 100%; } .sec05 .inner .ul-link li a p { line-height: 1; padding: 0.8rem; letter-spacing: 0; font-weight: 400; } @media screen and (max-width: 580px) { .sec05 .inner .ul-link li a p { font-size: 12px; padding-bottom: 0; } } .sec05 .inner .ul-link li a img { width: 12px; aspect-ratio: 7/12; margin-inline: auto; } .sec05 .inner .inbox { padding-bottom: 8rem; } .sec05 .inner .inbox h3 { color: #fff; font-size: 3.6rem; letter-spacing: 0.01em; background-image: linear-gradient(170deg, rgb(19, 142, 123), rgb(188, 231, 224)); border-radius: 0 4rem 4rem 0; line-height: 1; padding: 1.8rem; margin-right: calc((100% - 900px) / 2); padding-left: calc((100% - 900px) / 2); margin-bottom: 3rem; } @media screen and (max-width: 980px) { .sec05 .inner .inbox h3 { margin-inline: unset; padding-left: 5%; } } @media screen and (max-width: 768px) { .sec05 .inner .inbox h3 { font-size: 2.4rem; width: 95%; } } .sec05 .inner .inbox .inner02 .youtube { width: 100%; aspect-ratio: 16/9; margin-inline: auto; display: block; border-radius: 2rem; } .sec05 .inner .inbox .inner02 .youtube iframe { width: 100%; } .sec05 .inner .inbox .inner02 .ul01 { display: flex; flex-wrap: wrap; } .sec05 .inner .inbox .inner02 .ul01 li { width: calc((100% - 10.4rem) / 3 + 2.6rem); padding-right: 2.6rem; border-right: 1px solid #E3ECEB; } @media screen and (max-width: 900px) { .sec05 .inner .inbox .inner02 .ul01 li { width: 100%; max-width: 500px; margin: 0rem auto 3rem; border-right: none; padding-right: 0; } } .sec05 .inner .inbox .inner02 .ul01 li .img { border-radius: 1rem; } .sec05 .inner .inbox .inner02 .ul01 li .img img { border-radius: 1rem; } .sec05 .inner .inbox .inner02 .ul01 li:nth-of-type(2n) { width: calc((100% - 10.4rem) / 3 + 5.2rem); padding-left: 2.6rem; } @media screen and (max-width: 900px) { .sec05 .inner .inbox .inner02 .ul01 li:nth-of-type(2n) { width: 100%; padding-left: 0; } } .sec05 .inner .inbox .inner02 .ul01 li:nth-of-type(3n) { padding-right: 0; border-right: none; padding-left: 2.6rem; } @media screen and (max-width: 900px) { .sec05 .inner .inbox .inner02 .ul01 li:nth-of-type(3n) { padding-left: 0; margin-bottom: 0; } } .sec05 .inner .inbox .inner02 .ul01 li h4 { font-size: 1.8rem; color: #138E7B; line-height: 1; margin: 1.6rem 0 1rem; text-align: center; letter-spacing: 0; } .sec05 .inner .inbox .inner02 .ul01 li p { font-size: 1.4rem; color: #003737; letter-spacing: 0; line-height: 1.4; font-weight: 400; } .sec05 .inner .inbox .inner02 .ul01 li a { margin-inline: auto; margin-top: 1.6rem; padding: 8px 36px; border-radius: 4rem; border: 1px solid #138E7B; transition: all 0.3s; } .sec05 .inner .inbox .inner02 .ul01 li a p { display: flex; align-items: center; justify-content: center; gap: 1rem; color: #138E7B; line-height: 1; transition: all 0.3s; } .sec05 .inner .inbox .inner02 .ul01 li a p::before { content: ""; display: inline-block; background-image: url("../img/pdf-gr.png"); background-repeat: no-repeat; background-size: contain; width: 13px; aspect-ratio: 1; transition: all 0.3s; } .sec05 .inner .inbox .inner02 .ul01 li a:hover { background-color: #138E7B; } .sec05 .inner .inbox .inner02 .ul01 li a:hover p { color: #fff; } .sec05 .inner .inbox .inner02 .ul01 li a:hover p::before { background-image: url("../img/pdf.png"); } .sec05 .inner .inbox .inner02 .ul02 { display: flex; flex-wrap: wrap; gap: 2rem; } .sec05 .inner .inbox .inner02 .ul02 li { width: calc((100% - 4rem) / 3); } @media screen and (max-width: 768px) { .sec05 .inner .inbox .inner02 .ul02 li { width: 100%; max-width: 500px; margin-inline: auto; } } .sec05 .inner .inbox .inner02 .ul02 li .li-box { box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); background-color: #fff; padding: 0 2.5rem 5rem; } .sec05 .inner .inbox .inner02 .ul02 li .li-box .txt01 { width: -moz-fit-content; width: fit-content; margin-inline: auto; } .sec05 .inner .inbox .inner02 .ul02 li .li-box .txt01 span { text-align: center; color: #fff; background-color: #138E7B; font-size: 1.6rem; font-family: "Open Sans", serif; font-style: italic; letter-spacing: 0.09em; font-weight: 400; transform: scale(0.7, 0.9); display: inline-block; width: -moz-fit-content; width: fit-content; margin-inline: auto; padding: 0.5rem 2.5rem; line-height: 1; border-radius: 4rem; } .sec05 .inner .inbox .inner02 .ul02 li .li-box h4 { font-size: 2rem; color: #138E7B; text-align: center; font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; margin: 1rem 0 2rem; } .sec05 .inner .inbox .inner02 .ul02 li .li-box .img { margin-bottom: 2rem; border-radius: 1rem; overflow: hidden; } .sec05 .inner .inbox .inner02 .ul02 li .li-box .txt02 { text-align: center; letter-spacing: 0.01em; padding-bottom: 5px; border-bottom: 1px solid #E3ECEB; } .sec05 .inner .inbox .inner02 .ul02 li .li-box .txt03 { text-align: center; font-size: 1.4rem; letter-spacing: 0.01em; margin-bottom: 2rem; } .sec05 .inner .inbox .inner02 .ul02 li .li-box .txt04 { font-size: 1.4rem; line-height: 1; letter-spacing: 0.01em; color: #fff; border-radius: 4rem; padding: 5px 2rem; background-color: #138E7B; width: -moz-fit-content; width: fit-content; font-weight: 400; } .sec05 .inner .inbox .inner02 .ul02 li .li-box .txt06 { background-color: #DF9629; } .sec05 .inner .inbox .inner02 .ul02 li .li-box .txt05 { font-size: 1.4rem; line-height: 1.4; margin-top: 1rem; color: #003737; font-weight: 400; } .sec05 .inner .inbox .inner02 .ul02 li .li-box .img02 { margin: 2rem auto; width: 2rem; } .sec05 .inner .inbox#b, .sec05 .inner .inbox#c { border-bottom: 3px solid #E3ECEB; } .sec05 .inner .inbox02 h3 { text-align: end; border-radius: 4rem 0rem 0rem 4rem; margin-right: 0; padding-left: 0; margin-left: calc((100% - 900px) / 2); padding-right: calc((100% - 900px) / 2); } @media screen and (max-width: 900px) { .sec05 .inner .inbox02 h3 { margin-inline: unset; padding-right: 5%; } } @media screen and (max-width: 768px) { .sec05 .inner .inbox02 h3 { margin-left: auto; } } .sec05 .inner .inbox03 h3 { color: #138E7B; text-align: center; margin: 0; padding: 0; background-image: none; margin: 8rem 4rem; } .sec05 .inner .inbox03 .ul-acc { display: flex; flex-wrap: wrap; gap: 1.8rem; } .sec05 .inner .inbox03 .ul-acc li { width: calc((100% - 1.8rem) / 2); } @media screen and (max-width: 768px) { .sec05 .inner .inbox03 .ul-acc li { width: 100%; } } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q { padding: 1.5rem 3rem; color: #fff; background-color: #138E7B; position: relative; cursor: pointer; border-radius: 1rem; transition: all 0.3s; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } @media screen and (max-width: 768px) { .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q { font-size: 1.4rem; } } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q::after { content: ""; display: inline-block; background-image: url("../img/arrorw-down-wh.png"); background-repeat: no-repeat; background-size: contain; width: 12px; aspect-ratio: 2/1; position: absolute; top: 50%; right: 2rem; transform: translate(0, -50%); } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q p { line-height: 1; position: relative; transition: all 0.3s; } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q p::before { content: ""; display: inline-block; background-image: url("../img/q.png"); background-repeat: no-repeat; background-size: contain; width: 15px; aspect-ratio: 1/2; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); transition: all 0.3s; opacity: 0; } @media screen and (max-width: 768px) { .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q p::before { width: 10px; } } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q p span { transition: all 0.2s; } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q:hover p::before { opacity: 0; } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q:hover p span { opacity: 1; } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q.open { border-radius: 1rem 1rem 0 0; box-shadow: none; } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q.open p { padding-left: 1rem; } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q.open p::before { opacity: 1; } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .q.open p span { opacity: 0; } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .a { background-color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); border-radius: 0 0 1rem 1rem; padding: 1.5rem 3rem; } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .a p { display: flex; align-items: center; gap: 1rem; position: relative; } @media screen and (max-width: 768px) { .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .a p { font-size: 1.4rem; } } .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .a p::before { content: ""; display: inline-block; background-image: url("../img/a.png"); background-repeat: no-repeat; background-size: contain; width: 15px; aspect-ratio: 1/2; } @media screen and (max-width: 768px) { .sec05 .inner .inbox03 .ul-acc li .toggle_wrap .a p::before { width: 10px; } } #dpo.dpo { position: relative; } #dpo.dpo::before { content: ""; display: inline-block; position: absolute; top: 0; right: 0; transform: translateY(-50%); width: 55%; height: 8rem; background-color: #E3ECEB; z-index: -1; border-radius: 10rem 0 0 10rem; } #dpo.dpo::after { content: ""; display: inline-block; position: absolute; bottom: 0; left: 0; transform: translateY(50%); width: 55%; height: 12rem; background-color: #F6F6F6; z-index: -1; border-radius: 0 10rem 10rem 0; } .dpo-wrap { margin: 8rem 0 12rem; } .dpo-wrap .dpo { position: relative; } .dpo-wrap .dpo::after { content: ""; display: inline-block; position: absolute; bottom: 0; right: 0; transform: translateY(50%); width: 55%; height: 12rem; background-color: #F6F6F6; z-index: -1; border-radius: 10rem 0 0 10rem; } .contact .inner04 { padding: 8rem 0; } .contact .inner04 .box { background-color: #E3ECEB; padding: 5.4rem 6.5rem 5rem; text-align: center; border-radius: 2rem; position: relative; } @media screen and (max-width: 1080px) { .contact .inner04 .box { padding: 5.4rem 2rem 5rem; width: 100%; } } .contact .inner04 .box::after { content: "CONTACT"; display: inline-block; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%) scale(0.7, 0.9); color: #138E7B; font-family: "Open Sans", serif; font-size: 8rem; font-style: italic; font-weight: 700; width: 100%; letter-spacing: 0.1em; } @media screen and (max-width: 1080px) { .contact .inner04 .box::after { font-size: 6rem; width: 125vw; line-height: 1; } } .contact .inner04 .box .txt01 { color: #505050; font-size: 2rem; line-height: 1; padding: 2rem 0 4rem; width: -moz-fit-content; width: fit-content; margin-inline: auto; position: relative; } .contact .inner04 .box .txt01::after { content: ""; display: inline-block; width: 80%; height: 3px; background-color: #138E7B; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .contact .inner04 .box .inbox form .flex { display: flex; gap: 1rem; } @media screen and (max-width: 580px) { .contact .inner04 .box .inbox form .flex { flex-direction: column; } } .contact .inner04 .box .inbox form .flex .art { width: calc((100% - 1rem) / 2); } @media screen and (max-width: 580px) { .contact .inner04 .box .inbox form .flex .art { width: 100%; } } .contact .inner04 .box .inbox form .art label { width: 100%; display: inline-block; text-align: left; font-weight: 400; letter-spacing: 0.01em; font-size: 1.4rem; line-height: 1; padding: 1.5rem 0; } .contact .inner04 .box .inbox form .art .requis { position: relative; } .contact .inner04 .box .inbox form .art .requis::before { content: "必須"; font-size: 1.2rem; color: #fff; background-color: #DC1464; border-radius: 4rem; padding: 0.5px 12px 2px; margin-right: 1rem; } .contact .inner04 .box .inbox form .art .optional { position: relative; } .contact .inner04 .box .inbox form .art .optional::before { content: "任意"; font-size: 1.2rem; color: #fff; background-color: #A1A1A1; border-radius: 4rem; padding: 0.5px 12px 2px; margin-right: 1rem; } .contact .inner04 .box .inbox form .art input, .contact .inner04 .box .inbox form .art textarea, .contact .inner04 .box .inbox form .art select { background-color: #fff; padding: 8px; border-radius: 1rem; width: 100%; text-align: left; font-size: 1.4rem; letter-spacing: 0.01em; line-height: 1; } .contact .inner04 .box .inbox form .art textarea { line-height: 1.4; min-height: 13.4rem; } .contact .inner04 .box .inbox form .art select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("../img/arrorw-down.png"); background-repeat: no-repeat; background-size: contain; background-size: 12px auto; background-position: right 12px center; cursor: pointer; } .contact .inner04 .box .inbox form .art select option { font-weight: 400; } .contact .inner04 .box .inbox form .art input[type=checkbox] { width: -moz-fit-content; width: fit-content; position: relative; width: 2rem; aspect-ratio: 1; border-radius: 5px; cursor: pointer; margin-bottom: 1rem; } .contact .inner04 .box .inbox form .art input[type=checkbox]:checked:before { content: ""; position: absolute; top: 1px; left: 4px; transform: translate(3px, 2px) rotate(50deg); width: 7px; height: 11px; border-right: 2px solid #000; border-bottom: 2px solid #000; } .contact .inner04 .box .inbox form .art ::-moz-placeholder { color: #A1A1A1; font-weight: 400; } .contact .inner04 .box .inbox form .art ::placeholder { color: #A1A1A1; font-weight: 400; } .contact .inner04 .box .inbox form .consentement label { text-align: center; padding-bottom: 5px; } .contact .inner04 .box .inbox form button { font-weight: 400; letter-spacing: 0.01em; line-height: 1; color: #fff; background-color: #DC1464; border-radius: 4rem; padding: 1rem 0; width: 26rem; } /*Form.Run*/ .layout-vertical .sf-form-cover { display: none; } footer { background-color: #003737; padding: 5rem 0 0; } footer .box { max-width: 90rem; width: 90%; margin-inline: auto; color: #fff; } footer .box .inbox { display: flex; justify-content: space-between; align-items: end; padding-bottom: 2rem; border-bottom: 1px solid #138E7B; } @media screen and (max-width: 900px) { footer .box .inbox { align-items: start; } } @media screen and (max-width: 480px) { footer .box .inbox { flex-direction: column; gap: 2rem; } } footer .box .inbox .left { width: 30rem; } @media screen and (max-width: 900px) { footer .box .inbox .left { width: 20rem; } } @media screen and (max-width: 480px) { footer .box .inbox .left { margin-inline: auto; } } footer .box .inbox .right { display: flex; font-size: 1.2rem; gap: 2rem; } @media screen and (max-width: 900px) { footer .box .inbox .right { flex-direction: column; } } @media screen and (max-width: 480px) { footer .box .inbox .right { margin-inline: auto; text-align: center; } } footer .box .inbox .right p { letter-spacing: 0; font-weight: 400; } footer .box .inbox02 { padding-top: 2rem; display: flex; align-items: start; justify-content: space-between; } footer .box .inbox02 .left { width: calc(100% - 20rem); } footer .box .inbox02 .left nav ul { display: flex; align-items: center; gap: 3rem; padding-top: 2rem; margin-bottom: 2.5rem; } @media screen and (max-width: 980px) { footer .box .inbox02 .left nav ul { flex-direction: column; justify-content: left; gap: 1rem; padding-top: 0; } } @media screen and (max-width: 980px) { footer .box .inbox02 .left nav ul li { width: 100%; text-align: left; } } footer .box .inbox02 .left nav ul li a { font-size: 1.4rem; font-weight: 400; letter-spacing: 0.01em; } footer .box .inbox02 .btnbox { position: static; flex-direction: column; transform: unset; } footer .box .inbox02 .btnbox .btn00 a { width: 20rem; font-size: 1.4rem; padding: 4.5px; gap: 3px; } footer .box .inbox02 .btnbox .btn00 a img { width: 2.5rem; } footer .box .inbox02 .btnbox .btn02 a { border-radius: 1rem; } /*thanks*/ .thanks { padding: 220px 5% 120px; } .thanks p { max-width: 800px; width: 100%; margin: 30px auto; text-align: center; } .thanks button { width: 100%; } .thanks button a { width: -moz-fit-content; width: fit-content; margin-inline: auto; font-size: 1.4rem; color: #fff; background-color: #138E7B; padding: 1rem 3rem; border-radius: 4rem; line-height: 1; }/*# sourceMappingURL=style.css.map */ /* ========== Custom Button ========== */ .btn { display: inline-block; padding: 1.2rem 2.4rem; font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: 0.3s ease; } .btn--orange, a.btn--orange { color: #fff; background-color: #eb6100; } .btn--orange:hover, a.btn--orange:hover { color: #fff; background: #f56500; opacity: 1; /* グローバルのa:hover opacity打ち消し */ } .btn--radius { border-radius: 100vh; } #mid-cta { text-align: center; margin: 3rem 0; } .test-box { background: pink; padding: 20px; } .mv-image-wrap { position: relative; display: inline-block; /* 必要に応じて */ } .mv-image-wrap .image { display: block; width: 100%; height: auto; } .mv-image-wrap .overlay { position: absolute; top: 0; left: 0; width: 30%; /* 必要に応じて調整 */ height: 30%; /* 必要に応じて調整 */ pointer-events: none; /* 画像の上のクリックを透過したい場合 */ } /* MV画像の上にフォームを重ねる（初期レイアウトは維持） */ .mv .right { position: relative; } /* 念のため */ .mv .right .mv-form-card { position: absolute; right: 30rem; bottom: 30rem; /* 必要に応じて調整 */ width: 56rem; /* 例: 400px 相当 */ max-width: 90vw; background: rgba(255,255,255,0.96); border-radius: 2rem; padding: 1.6rem; box-shadow: 0 24px 60px rgba(0,0,0,.25); z-index: 6; /* 画像より前、ヘッダーより後 */ } .mv .right .mv-form-card .form-title { font-size: 1.6rem; font-weight: 700; color: #222; margin: 0 0 1rem; } .mv .right .mv-form-card .form-group { margin-bottom: 1rem; } .mv .right .mv-form-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; } .mv .right .mv-form-card input, .mv .right .mv-form-card select, .mv .right .mv-form-card textarea { width: 100%; background: #fff; border: 1px solid #e6e6e9; border-radius: 10px; padding: 10px 12px; font-size: 1.4rem; color: fieldtext; line-height: 1.4; box-sizing: border-box; } .mv .right .mv-form-card .checkbox-group { display: flex; align-items: flex-start; gap: 8px; font-size: 1.3rem; color: #333; } .mv .right .mv-form-card .form-submit-btn { width: 33%; display: block; /* 追加 */ text-align: center; margin: 0 auto; border: 0; border-radius: 999px; padding: 12px 16px; background: #DC1464; color: #fff; font-weight: 700; font-size: 1.5rem; } /* スマホ時は */ .mv .right .mv-copywrap { position: absolute; left: 6rem; /* 位置はお好みで */ bottom: 18rem; /* 位置はお好みで */ z-index: 6; max-width: min(52rem, 90vw); color: #fff; } /* 既存の .mv-catch の絶対配置を打ち消し、見出しとして使う */ .mv .right .mv-copywrap .mv-catch { position: absolute; z-index: 6; /* フォームの右:9rem + 幅:40rem + 間隔:2rem → 左側に配置 */ right: calc(-27rem + 3rem + 2rem); bottom: 44rem; color: #fff; font-weight: 800; line-height: 1.2; font-size: clamp(2.4rem, 3.6vw, 5.2rem); text-shadow: 0 6px 18px rgba(0,0,0,.45); letter-spacing: .02em; max-width: 40rem; } /* 丸角ボックス3つ */ .mv .right .mv-benefits { display: flex; flex-wrap: wrap; gap: .8rem; } .mv .right .mv-benefits li { background: rgba(255,255,255,.96); color: #003737; border-radius: 999px; bottom: 10rem; padding: .8rem 1.4rem; line-height: 3.2; font-size: 1.4rem; box-shadow: 0 8px 20px rgba(0,0,0,.15); white-space: nowrap; } /* モバイルは重なり回避（必要なら表示に変更） */ @media screen and (max-width: 768px) { .mv .right .mv-copywrap { display: none; } } /* 位置調整用変数（値だけ変えればOK） */ :root{ /* フォームカードの位置 */ --mv-form-right: 30rem; --mv-form-bottom: 30rem; /* キャッチ＋ベネフィット一式の位置 */ --mv-copy-left: 32rem; --mv-copy-bottom: 35rem; /* 以前の見た目に近い高さに */ --mv-benefits-gap: .8rem; /* 微調整用（必要な時だけ使用） */ --mv-form-tx: 0; /* 例: 1rem, -8px */ --mv-form-ty: 0; --mv-copy-tx: 0; --mv-copy-ty: 0; } /* フォームカード：サイズは現状維持、位置だけ変数で制御 */ .mv .right { position: relative; } .mv .right .mv-form-card{ right: var(--mv-form-right); bottom: var(--mv-form-bottom); transform: translate(var(--mv-form-tx), var(--mv-form-ty)); /* width/padding等は既存のまま（サイズは変えない） */ } /* コピー＋ベネフィット一式：位置だけ変数で制御 */ .mv .right .mv-copywrap{ position: absolute; left: var(--mv-copy-left); bottom: var(--mv-copy-bottom); transform: translate(var(--mv-copy-tx), var(--mv-copy-ty)); z-index: 6; max-width: min(52rem, 90vw); color:#fff; } /* キャッチは“静的配置”にして直下にベネフィットが並ぶ */ .mv .right .mv-copywrap .mv-catch{ position: static !important; right: auto !important; bottom: auto !important; margin: 0 0 1.2rem; } /* 丸角3ボックス（サイズは現状のまま） */ .mv .right .mv-benefits{ display:flex; flex-wrap:wrap; gap: var(--mv-benefits-gap); } /* 参考: 画面幅ごとに位置を変えたい場合（任意） */ @media (max-width: 1180px){ :root{ --mv-form-right: 24rem; --mv-copy-left: 3rem; } } @media (max-width: 992px){ :root{ --mv-form-right: 12rem; --mv-form-bottom: 24rem; --mv-copy-left: 2rem; --mv-copy-bottom: 34rem; } } @media (max-width: 768px){ /* SPでは重なり回避のままなら表示制御 */ .mv .right .mv-copywrap{ display:none; } } /* 画像コンテナを“基準点”にする */ #mv .mv .right{ position: relative; } /* 画像は比率を維持して拡縮 */ #mv .mv .right .image{ display:block; width:100%; object-fit: cover; } /* ====== フォーム：PCは画像の右下に相対配置、SPは通常フロー ====== */ #mv .mv .right .mv-form-card{ position: absolute; /* rem固定をやめて %＋clamp で“揺れ”を吸収 */ right: clamp(6rem, 30vw, 60rem); /* min, preferred, max の順に修正 */ bottom: clamp(6rem, 22vw, 35rem); /* 画像高さに対して安定して追従 */ width: min(56rem, 46vw); /* 画面に応じて縮むが、56remを上限に */ max-width: 90%; background: rgba(255,255,255,.98); border-radius: 2rem; padding: clamp(1.4rem, 1rem + 1vw, 2.4rem); box-shadow: 0 24px 60px rgba(0,0,0,.25); border: 1px solid rgba(0,0,0,.04); z-index: 6; } #mv .mv .right .mv-form-card .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:1rem; } /* ====== コピー塊（見出し＋丸バッジ）も%基準に変更 ====== */ #mv .mv .right .mv-copywrap{ position: absolute; left: clamp(4rem, 6vw, 10rem); /* 画像左からの距離を%/vwで安定 */ bottom: clamp(20rem, 20vw, 44rem); /* 画像高さに比例して維持 */ transform: translate(0,0); /* 念のためリセット */ z-index: 6; max-width: min(52rem, 46vw); color:#fff; } #mv .mv .right .mv-copywrap .mv-catch{ position: static !important; /* 以前の絶対配置を打ち消す */ font-weight: 800; font-size: clamp(2.4rem, 3.6vw, 5.2rem); line-height: 1.2; text-shadow: 0 6px 18px rgba(0,0,0,.45); margin: 0 0 1.2rem; } #mv .mv .right .mv-benefits{ display:flex; flex-wrap:wrap; gap:.8rem; padding:0; margin:0; } /* ====== MV下の2ボタン：PCはそのまま、SPは縦積み＆通常フロー ====== */ @media (max-width: 768px){ #mv .mv .right .btnbox{ position: static; transform: none; display:flex; flex-direction: column; gap: 1rem; } #mv .mv .right .btnbox .btn00 a{ width: 100%; max-width: 26rem; } } /* ====== タブレット以下：縦積みに切替（“ズレない”安全地帯） ====== */ @media (max-width: 992px){ /* 2カラム → 1カラム（既存GridがあればそのままでもOK） */ #mv .mv > .inner{ display:block; width:min(92vw, 1200px); margin:0 auto; } /* 画像上の重ね物は全部フローへ */ #mv .mv .right .mv-form-card{ position: static; width: 100%; max-width: 640px; margin: 1.6rem auto 0; } #mv .mv .right .mv-copywrap{ position: static; margin: 1.2rem 0 0; max-width: 100%; color:#fff; } #mv .mv .right .mv-benefits li{ white-space: normal; } #mv .mv{ padding: 6rem 0; } /* 上下余白を少し詰める */ } /* ====== スマホ狭幅の微調整 ====== */ @media (max-width: 560px){ #mv .mv > .inner{ width:92vw; } #mv .mv .right .mv-form-card{ padding: 1.6rem; } } /* ===== MV: PC/Tabletはグリッドで左右固定（重なり防止） ===== */ :root{ --mv-inset-x: clamp(16px, 4vw, 64px); /* 左右の余白 */ --mv-gap: clamp(16px, 3vw, 40px); /* 左右のすき間 */ --mv-inset-y: clamp(16px, 3vw, 40px); /* 下側の余白 */ } /* PC/Tablet: 画像を背景レイヤ、上に左右2カラム */ @media (min-width: 992px){ .mv .right{ position: relative !important; display: grid !important; grid-template-columns: var(--mv-inset-x) /* 左余白 */ minmax(0, 1fr) /* 左：キャッチ＋ベネフィット */ var(--mv-gap) /* すき間 */ clamp(360px, 34vw, 520px) /* 右：フォーム */ var(--mv-inset-x); /* 右余白 */ grid-template-rows: 1fr auto var(--mv-inset-y); /* 下寄せ */ align-items: end; } /* 画像は全面に敷く */ .mv .right .image{ grid-column: 1 / -1; grid-row: 1 / -1; z-index: 1; width: 100%; height: auto; } /* 左カラム：キャッチ＋ベネフィット */ .mv .right .mv-copywrap{ grid-column: 2; grid-row: 2; align-self: end; z-index: 2; position: static !important; /* 既存absoluteを無効化 */ max-width: min(560px, 46vw); margin: 0; } .mv .right .mv-copywrap .mv-catch{ position: static !important; margin: 0 0 12px; } .mv .right .mv-benefits{ gap: clamp(8px, 1vw, 16px); } /* 右カラム：フォーム */ .mv .right .mv-form-card{ grid-column: 4; grid-row: 2; align-self: end; z-index: 2; position: static !important; /* 既存absoluteを無効化 */ width: 100% !important; /* カラム幅にフィット */ max-width: none !important; margin: 0; } /* 下の2ボタンは画像下辺に沿って右寄せ（必要な場合） */ .mv .right .btnbox{ grid-column: 2 / 5; grid-row: 3; justify-self: end; position: static !important; /* 既存のabsoluteを無効化 */ transform: none !important; } } /* Tablet未満（～991px）は縦積み＝重なりなし */ @media (max-width: 991.98px){ .mv .right{ display: block !important; } .mv .right .mv-copywrap{ position: static !important; margin: 1.2rem 0 0; max-width: 100%; } .mv .right .mv-form-card{ position: static !important; width: 100% !important; max-width: 640px !important; margin: 1.6rem auto 0; } .mv .right .btnbox{ position: static !important; transform: none !important; margin-top: 1rem; } } /* === MV（ヒーロー）高さコントローラ === */ :root{ --mv-h-pc-min: 560px; /* 最小高さ */ --mv-h-pc-ideal: 62vh; /* 基本高さ（画面比） */ --mv-h-pc-max: 760px; /* 最大高さ */ } @media (min-width: 992px){ /* ヒーロー本体の高さを固定（幅は既存の calc(100% - 12rem) を利用） */ .mv .right{ height: clamp(var(--mv-h-pc-min), var(--mv-h-pc-ideal), var(--mv-h-pc-max)); } /* 画像はコンテナにフィット（切り抜きOKのときは cover） */ .mv .right .image{ width: 100%; height: 100%; object-fit: cover; /* 切り抜きなしにしたい場合は contain に変更 */ object-position: center; /* 必要なら center 35% などに */ border-radius: 0 0 0 8rem; /* 既存の角丸を維持 */ } } /* タブレット未満は既存の aspect-ratio 指定を優先 */ @media (max-width: 991.98px){ .mv .right{ height: auto; } } /* ===== DPO 3STEP ===== */ #dpo-steps{ padding: clamp(28px, 3vw, 56px) 0; background:#f8f9fa; /* お好みで外してOK */ text-align:center; } #dpo-steps .steps-description{ font-weight: 600; font-size: clamp(14px, 1.2rem, 18px); line-height: 1.8; margin: 0 auto 32px; } .steps-container{ display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: stretch; justify-items: center; } .step-card{ width: 100%; max-width: 360px; /* カードの最大幅 */ background:#fff; border-radius: 14px; padding: clamp(18px, 2vw, 26px); box-shadow: 0 10px 30px rgba(0,0,0,.08); display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .2s ease; } .step-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.12); } /* 番号とタイトル */ .step-card h3{ margin:0 0 4px; font-size: clamp(22px, 3.2vw, 32px); color:#138E7B; font-weight:800; line-height:1; } .step-card > p{ margin: 4px 0 12px; font-weight: 600; } /* 画像を同じサイズの箱に収める（高さ揃え） */ .step-card img{ display:block; margin: auto; /* 中央寄せ */ width: 100%; max-width: 260px; /* 画像の最大横幅 */ max-height: 160px; /* 高さ上限 */ object-fit: contain; /* 比率維持で収める */ image-rendering: -webkit-optimize-contrast; } /* 画像下の補足文（任意） */ .step-card .subtext{ margin-top:10px; font-size:.9rem; color:#6b6b6b; } /* タブレット：2列 */ @media (max-width: 960px){ .steps-container{ grid-template-columns: repeat(2, minmax(260px, 1fr)); } } /* スマホ：1列 */ @media (max-width: 560px){ .steps-container{ grid-template-columns: 1fr; } .step-card{ max-width: 520px; margin: 0 auto; } } /* ===== お悩みセクション ===== */ #troubles{ padding: clamp(40px, 8vw, 96px) 0; background:#fff; text-align:center; } #troubles .container{ width:min(1100px, 92%); margin-inline:auto; } .trb-eyebrow{ font-size: clamp(14px, 1.1rem, 18px); letter-spacing:.08em; color:#333; margin:0 0 8px; font-weight:700; } .trb-title{ font-weight: 900; line-height: 1.2; font-size: clamp(28px, 5.6vw, 56px); margin:0 0 clamp(28px, 4vw, 44px); } /* 3枚並び */ .trb-grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: clamp(18px, 2.2vw, 28px); align-items: end; } /* カード本体（中は縦並び） */ .trb-card{ display:flex; flex-direction:column; align-items:center; gap: clamp(14px, 1.6vw, 18px); } /* 吹き出し（角丸の灰ボックス） */ .trb-balloon{ background:#e9e9e9; border-radius: 14px; padding: clamp(12px, 1.6vw, 18px) clamp(14px, 2vw, 22px); text-align:center; font-weight: 700; line-height:1.7; box-shadow: 0 6px 16px rgba(0,0,0,.06); min-height: 112px; /* 3つの高さを揃える */ display:flex; align-items:center; justify-content:center; } /* アバター（丸背景＋画像） */ .trb-avatar{ width: clamp(160px, 22vw, 240px); aspect-ratio: 1 / 1; border-radius: 50%; background: #5FB6FF; /* 左：青系 */ display:grid; place-items:center; overflow:hidden; margin:0; } .trb-avatar--pink{ background:#FF91C0; } /* 中央：ピンク */ .trb-avatar--blue{ background:#CFE3FF; } /* 右：淡青 */ .trb-avatar img{ width: 78%; height: 78%; object-fit: contain; } /* レスポンシブ：2列→1列 */ @media (max-width: 992px){ .trb-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px){ .trb-grid{ grid-template-columns: 1fr; } .trb-balloon{ min-height: unset; } } /* ----- 微調整：余白・サイズ・重なりを最適化 ----- */ #troubles{ padding: clamp(48px, 7vw, 88px) 0; } .trb-title{ font-size: clamp(32px, 5.2vw, 58px); /* 見出しを少し大きく */ letter-spacing: .02em; } /* カードの縦間隔を少し詰める */ .trb-card{ gap: clamp(10px, 1.2vw, 14px); } /* 吹き出し：中央寄せ＆“しっぽ”を追加してアバターと結びつける */ .trb-balloon{ position: relative; background: #ECECEC; /* ほんの少しだけ明るく */ padding: clamp(12px, 1.7vw, 18px) clamp(14px, 2.2vw, 22px); border-radius: 14px; box-shadow: 0 10px 22px rgba(0,0,0,.08); min-height: 106px; margin-bottom: -8px; /* バルーンと丸の距離を近く */ } .trb-balloon::after{ content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -12px; border: 12px solid transparent; border-top-color: #ECECEC; /* しっぽの色は吹き出しと同じ */ } /* アバター：一回りだけ大きく＆上のバルーンに近づける */ .trb-avatar{ width: clamp(180px, 21vw, 240px); margin-top: 0; box-shadow: 0 12px 28px rgba(0,0,0,.06); } .trb-avatar img{ width: 80%; height: 80%; } /* 3枚の幅バランスを少し引き締める（大画面で横に広がりすぎないように） */ #troubles .container{ width: min(1040px, 92%); } /* タブレット～スマホの視認性強化 */ @media (max-width: 992px){ .trb-grid{ gap: 18px 22px; } .trb-balloon{ min-height: unset; } } @media (max-width: 600px){ .trb-title{ font-size: clamp(28px, 8vw, 36px); } .trb-avatar{ width: clamp(160px, 48vw, 200px); } .trb-balloon{ margin-bottom: -6px; } } /* コンテナ幅を少しだけ絞って中心に寄せる */ #troubles .container{ width: min(1100px, 92%); } /* 3枚の並びの間隔と位置そろえ */ .trb-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px; /* 行間, 列間 */ justify-items: center; align-items: start; } /* 各カードは縦積み＋中央寄せ */ .trb-card{ display:flex; flex-direction:column; align-items:center; } /* 吹き出し：読みやすく・幅調整・しっぽ＆距離をギュッと */ .trb-balloon{ max-width: 280px; /* 270〜300でお好み */ text-align: center; line-height: 1.75; letter-spacing: 0; /* 日本語は詰めめに */ font-weight: 700; padding: clamp(12px,1.7vw,18px) clamp(14px,2.2vw,22px); margin-bottom: -18px; /* ←距離を詰める（-16〜-22で調整） */ background: #ECECEC; /* 少し明るめにして見出しとのコントラスト確保 */ border-radius: 14px; box-shadow: 0 10px 22px rgba(0,0,0,.08); position: relative; } .trb-balloon::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-14px; /* しっぽの位置 */ border:14px solid transparent; border-top-color:#ECECEC; } /* 丸アイコン：少しだけ大きく＆影で浮かせる */ .trb-avatar{ width: clamp(180px, 21vw, 240px); /* 変えたいときはここを上下 */ box-shadow: 0 12px 28px rgba(0,0,0,.06); } /* 見出しのバランスを微調整（少し大きめ＆字間控えめ） */ .trb-title{ font-size: clamp(32px, 5.2vw, 58px); letter-spacing: .02em; } /* タブレット以下：間隔を詰め、吹き出しの最小高さ制限を外す */ @media (max-width: 992px){ .trb-grid{ gap: 26px 22px; } .trb-balloon{ min-height: unset; margin-bottom: -14px; } } /* スマホ：丸を小さくして改行しやすく */ @media (max-width: 600px){ .trb-avatar{ width: clamp(150px, 44vw, 200px); } .trb-balloon{ margin-bottom: -10px; } } /* ===== CFSP解決セクション ===== */ #solution{ background: #138E7B; /* CFSPブランドカラーに寄せる */ color: #fff; padding: clamp(48px, 8vw, 96px) 20px; text-align: center; } .solution-title{ position: relative; /* ←必ず入れる！ */ font-size: clamp(28px, 5vw, 40px); font-weight: 800; margin-bottom: 12px; } .solution-subtitle{ font-size: clamp(16px, 1.6vw, 20px); line-height: 1.8; margin-bottom: clamp(32px, 5vw, 56px); } .solution-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 40px); list-style: none; padding: 0; margin: 0 auto; max-width: 1000px; } .solution-item{ display: flex; flex-direction: column; align-items: center; } .solution-icon{ width: clamp(100px, 14vw, 160px); aspect-ratio: 1/1; border-radius: 50%; background: #fff; display: grid; place-items: center; margin-bottom: 14px; } .solution-icon img{ width: 60%; height: auto; object-fit: contain; } .solution-label{ background: rgba(255,255,255,0.85); color: #000; font-weight: 700; font-size: clamp(14px, 1.4vw, 18px); padding: 6px 16px; border-radius: 6px; display: inline-block; } /* レスポンシブ：2列→1列 */ @media (max-width: 992px){ .solution-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px){ .solution-grid{ grid-template-columns: 1fr; } } /* ===== CFSP解決セクション調整 ===== */ #solution{ background:#138E7B; color:#fff; padding: clamp(72px, 10vw, 140px) 20px; /* 余白UP */ text-align:center; position: relative; overflow: hidden; } .solution-title { position: relative; /* ←必ず入れる！ */ display: inline-block; /* テキスト幅に合わせる場合 */ } .solution-title::before { content: ""; position: absolute; top: 50%; left: -100px; /* これでOK */ width: 50px; height: 4px; background: #fff; transform: translateY(-50%) rotate(-45deg); } .solution-title::before, .solution-title::after{ content: ""; position: absolute; top: 114%; width: 155px; /* 線の長さ */ height: 4px; /* 線の太さ */ background: #fff; } .solution-title { position: relative; /* ::after の基準になる */ } .solution-title::after { content: ""; /* 忘れずに */ position: absolute; /* これがないと right が効かない */ top: 116%; right: -100px; /* ← ここが効くようになる */ transform: translateY(-50%) rotate(126deg); width: 150px; height: 4px; background: #fff; } .solution-title::before{ left: -135; transform: translateY(-50%) rotate(54deg); } .solution-title::after{ right: -110; transform: translateY(-50%) rotate(126deg); } .solution-title { position: relative; /* ←必ず入れる！ */ display: inline-block; /* テキスト幅に合わせる場合 */ } /* セクション本体（色はそのまま） */ #sec-solution { position: relative; background: #117c70; /* いま使っているグリーンに合わせてOK */ overflow: hidden; /* はみ出し防止 */ } #solution::before { content: ""; position: absolute; top: -30px; left: 50%; transform: translateX(-50%) rotate(180deg); width: 0; height: 0; border-left: 20vw solid transparent; border-right: 20vw solid transparent; border-bottom: 100px solid #fff; } /* 上の（solution 内）フォーム専用 */ #contact-solution { background: #138E7B; color: #fff; padding: clamp(40px, 6vw, 80px) 0; } /* 2番目のフォーム専用 */ #contact-solution2 { background: #fff; color: #fff; padding: clamp(40px, 6vw, 80px) 0; } #contact-solution .box::after { /* 上のフォームカード用の装飾 */ content: "CONTACT"; display: inline-block; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%) scale(0.7, 0.9); color: #fff; font-family: "Open Sans", serif; font-size: 8rem; font-style: italic; font-weight: 700; width: 100%; letter-spacing: 0.1em; } #contact-solution .inner04 .box .inbox form .art select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(../img/arrow-down.png); background-repeat: no-repeat; background-size: contain; background-size: 12px auto; background-position: right 12px center; cursor: pointer; } #contact-solution input, #contact-solution textarea, #contact-solution select { background: #fff; color: #333; border: 1px solid #e5e5e5; } /* 送信ボタン（上だけ） */ #contact-solution button[type="submit"] { background: #DC1464; color: #fff; } /* 下の（グローバル）フォームは既存の #contact で管理 */ #contact { /* 既存のスタイルをそのまま使用 */ } /* ========== Flow Section ========== */ #flow{ /* 背景画像は差し替え：スマホでも見切れないよう cover */ --flow-bg: url("../img/flow_bg.png"); background: var(--flow-bg) center/cover no-repeat; position: relative; padding: clamp(48px, 6vw, 80px) 0; } .flow__container{ width: min(1100px, 92%); margin: 0 auto; } .flow__title{ font-weight: 800; text-align: left; font-size: clamp(28px, 3.8vw, 54px); letter-spacing: .06em; line-height: 1.2; margin: 0 0 clamp(28px, 4vw, 48px); } /* 各STEPの行 */ .flow-step{ display: grid; grid-template-columns: 140px 1fr; /* 左カラム幅 + 右コンテンツ */ gap: clamp(16px, 2.4vw, 28px); align-items: start; position: relative; padding: clamp(8px, 1vw, 12px) 0 clamp(28px, 3vw, 40px); } /* 左カラム：ラベル + 丸アイコン */ .flow-step__left{ position: relative; display: grid; justify-items: center; gap: 8px; } /* STEPラベル */ .flow-step__label{ color: #138E7B; /* 緑（サイトに合わせて調整） */ font-weight: 800; font-size: clamp(14px, 1.4vw, 18px); letter-spacing: .06em; margin: 0; } /* 丸アイコン */ .flow-step__icon{ width: clamp(84px, 8.5vw, 120px); height: clamp(84px, 8.5vw, 120px); border-radius: 999px; background: #138E7B; /* 濃い緑の丸背景 */ display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.08); position: relative; z-index: 1; } .flow-step__icon img{ width: 64%; height: auto; } /* 丸と丸の間の点線（左カラムの中央に縦線） */ .flow-step:not(.flow-step--last) .flow-step__left::after{ content:""; position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); width: 0; height: clamp(28px, 6vw, 56px); /* 次の丸までの点線の長さ */ border-left: 2px dashed rgba(0,0,0,.25); } /* 右側：見出しと灰色の帯 */ .flow-step__heading{ font-size: clamp(22px, 2.8vw, 40px); font-weight: 800; letter-spacing: .04em; line-height: 1.3; margin: 4px 0 10px; } .flow-step__desc{ background: #f1f5f5; /* 画像のグレー帯に寄せる */ border-radius: 10px; padding: clamp(12px, 1.6vw, 18px) clamp(16px, 2vw, 24px); font-size: clamp(14px, 1.5vw, 18px); line-height: 1.9; margin: 0; } /* レスポンシブ：横幅が狭い場合は縦積み */ @media (max-width: 768px){ .flow-step{ grid-template-columns: 1fr; gap: 12px; padding-bottom: clamp(20px, 6vw, 36px); border-bottom: 1px solid rgba(0,0,0,.06); } .flow-step:last-child{ border-bottom: none; } .flow-step__left{ grid-auto-flow: column; justify-content: start; gap: 12px; } .flow-step__left::after{ display: none; /* モバイルでは点線を消す */ } .flow-step__label{ order: 1; } .flow-step__icon{ order: 2; } .flow-step__heading{ margin-top: 0; } } .contact-alt { text-align: center; margin-top: 20px; /* フォームとの余白調整、好みで */ } .contact-alt p { margin-bottom: 8px; font-weight: 600; /* ちょっと強調 */ } /* 公式LINE案内だけ中央寄せ */ .contact-alt { text-align: center; margin-top: 20px; } /* グローバルの a{display:block} を上書きして中央に */ .contact-alt a { display: inline-block; /* ← これがポイント */ margin: 0 auto; /* 念のため */ } /* 見出しの余白など微調整（任意） */ .contact-alt p { margin-bottom: 8px; font-weight: 600; } /* 入力欄・テキストエリアの文字色を濃くする */ form input, form select, form textarea, form label, .contact-alt p { color: #222; /* 濃いグレー。黒(#000)でもOK */ } /* プレースホルダーの文字色も調整 */ form input::placeholder, form textarea::placeholder { color: #555; /* デフォルトより濃いめに */ } /* ===== Bottom CTA Popup ===== */ .cta-pop { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 50; /* ヘッダーやフォームより前に */ transform: translateY(110%); /* 初期は画面外 */ transition: transform .35s ease; pointer-events: none; /* 非表示時はクリック無効 */ } .cta-pop.is-active { transform: translateY(0); pointer-events: auto; /* 表示時のみクリック可 */ } .cta-pop__inner { width: min(1100px, 94%); margin: 0 auto clamp(14px, 2vw, 20px); background: rgba(255,255,255,0.98); border: 1px solid rgba(0,0,0,.06); box-shadow: 0 16px 36px rgba(0,0,0,.16); border-radius: 14px; display: grid; grid-template-columns: 1fr auto auto 36px; align-items: center; gap: 10px 12px; padding: 10px 12px; } .cta-pop__lead { font-weight: 700; color: #003737; font-size: clamp(1.4rem, 1.6vw, 1.8rem); line-height: 1.4; letter-spacing: 0.01em; } .cta-pop__btn { display: inline-block; text-align: center; padding: 10px 16px; border-radius: 999px; background: #DC1464; color: #fff; font-weight: 700; font-size: 1.4rem; line-height: 1; transition: transform .08s ease; } .cta-pop__btn:active { transform: translateY(1px); } .cta-pop__btn--line { background: #06C755; /* LINEカラー */ color: #fff; } .cta-pop__close { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #eee; color: #333; font-weight: 700; line-height: 1; } /* 狭幅：ボタン縦積み */ @media (max-width: 560px){ .cta-pop__inner { grid-template-columns: 1fr 32px; grid-template-rows: auto auto; gap: 8px; } .cta-pop__lead { grid-column: 1 / 2; } .cta-pop__btn { grid-column: 1 / 2; } .cta-pop__close{ grid-column: 2 / 3; grid-row: 1 / 3; } }