@charset "UTF-8";
:root{--green:#063d35;--deep:#03352e;--burgundy:#8b2027;--gold:#d4a33c;--ivory:#fbfaf7;--white:#fff;--text:#123f36}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--text);font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;line-height:1.75;-webkit-font-smoothing:antialiased}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}p,h1,h2,h3,figure{margin-top:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sp-only{display:none}.dot{color:var(--burgundy)}.burgundy{color:var(--burgundy)}.gold{color:var(--gold)}
.site-header{height:70px;background:#fff;border-bottom:1px solid rgba(6,61,53,.07)}.header-inner{width:min(1360px,calc(100% - 72px));height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between}.site-logo img{width:165px}.main-nav{display:flex;gap:31px;font-size:12px}.main-nav a{padding:8px 0}.nav-toggle{display:none;border:0;background:none}.nav-toggle span{display:block;width:24px;height:2px;background:var(--green);margin:5px}
.hero-inner{width:100%;height:455px;display:grid;grid-template-columns:47% 53%;overflow:hidden}.hero-copy{align-self:center;padding:42px 24px 36px max(78px,7.4vw);position:relative;z-index:3}.hero-eyebrow{font-size:14px;font-weight:600;letter-spacing:.05em;margin-bottom:14px}.hero h1{font-size:46px;line-height:1.33;letter-spacing:.035em;font-weight:500;margin:0 0 13px}.hero-accent{font-size:18px;color:var(--burgundy);margin-bottom:14px}.hero-text{font-size:11px;line-height:1.85;margin-bottom:20px}.cta{display:inline-flex;align-items:center;gap:17px;background:var(--burgundy);color:#fff;padding:10px 20px;border-radius:2px;font-size:11.5px;font-weight:600}.hero-photo{position:relative;overflow:hidden}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:58% center;filter:brightness(1.035) saturate(.94)}.hero-photo:before{content:"";position:absolute;z-index:2;inset:0 auto 0 0;width:26%;background:linear-gradient(90deg,var(--ivory) 0%,rgba(251,250,247,.94) 18%,rgba(251,250,247,.72) 40%,rgba(251,250,247,.36) 68%,rgba(251,250,247,.10) 86%,rgba(251,250,247,0) 100%)}.hero-photo:after{content:"";position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.045)}
.message{height:170px;position:relative;overflow:hidden;display:grid;place-content:center;text-align:center;color:#fff;background:var(--green)}.message p{font-size:13px;margin:0 0 4px}.message h2{font-size:28px;line-height:1.45;font-weight:500;margin:0}.watermark{position:absolute;right:18%;top:-42px;font-family:Georgia,serif;font-size:235px;color:rgba(255,255,255,.035);line-height:1}
.section{padding:64px 0}.section-head{width:min(590px,calc(100% - 40px));margin:0 auto 36px;text-align:center}.section-head h2{font-size:31px;font-weight:500;line-height:1.5;margin:0 0 15px}.section-head p{font-size:11px;margin-bottom:0}.en{font-size:12.5px!important;letter-spacing:.14em;margin-bottom:5px!important}.sub{font-size:10px}.red{color:var(--burgundy);font-weight:600}.rule{display:block;width:43px;height:1px;background:var(--burgundy);margin:14px 0 24px}.center{margin-inline:auto}
.two-col{width:min(1000px,calc(100% - 100px));margin:auto;display:grid;grid-template-columns:44% 56%;gap:54px;align-items:center}.about{padding-top:72px;padding-bottom:70px}.about-copy{font-size:11.5px;line-height:1.88}.about-copy p{margin-bottom:16px}.about-copy .lead{font-size:15px;font-weight:600;margin-bottom:20px}.about-photo{height:330px;overflow:hidden}.about-photo img{width:100%;height:100%;object-fit:cover}
.strength{background:#fff}.three-col{width:min(1000px,calc(100% - 100px));margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.three-col article{text-align:center;position:relative;padding:0 18px}.three-col article:not(:last-child):after{content:"";position:absolute;right:-20px;top:47%;width:1px;height:58px;background:rgba(139,32,39,.3)}.three-col h3{font-size:15.5px;font-weight:500;margin-bottom:16px}.three-col img{width:44px;height:44px;object-fit:contain;margin:0 auto 17px}.three-col p{font-size:9.5px;line-height:1.72;margin:0}
.service{background:var(--ivory);padding-top:64px;padding-bottom:70px}.service-grid{width:min(1000px,calc(100% - 100px));margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-grid article{background:#fff;border:1px solid #e1e1dc;border-radius:9px;overflow:hidden;box-shadow:0 5px 14px rgba(0,0,0,.05)}.service-grid>article>img{width:100%;height:170px;object-fit:cover}.service-grid article div{text-align:center;padding:21px 16px 24px}.service-grid h3{font-size:16px;font-weight:500;margin-bottom:0}.service-grid p{font-size:9.5px;margin:0}
.achievement{position:relative;overflow:hidden;background:var(--green);color:#fff}.achievement-photos{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}.achievement-photos img{width:100%;height:100%;object-fit:cover}.achievement-shade{position:absolute;inset:0;background:rgba(6,61,53,.72)}.achievement-content{position:relative;z-index:2;width:min(1060px,calc(100% - 80px));margin:auto;padding:48px 0 46px}.light h2,.light p{color:#fff}.metrics{display:grid;grid-template-columns:repeat(4,1fr)}.metrics article{text-align:center;position:relative;padding:0 18px}.metrics article:not(:last-child):after{content:"";position:absolute;right:0;top:22px;width:1px;height:54px;background:rgba(255,255,255,.45)}.metrics strong{display:block;color:var(--gold);font-size:42px;line-height:1.05;font-weight:500}.metrics strong span{font-size:.48em}.metrics h3{font-size:12px;font-weight:500;margin:8px 0 12px}.metrics p{font-size:8.5px;line-height:1.7;margin:0}
.support{background:#fff;padding-top:60px;padding-bottom:62px}.support-grid{width:min(860px,calc(100% - 100px));margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.support-grid article{min-height:116px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #e6e4df;border-radius:6px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.04)}.support-grid h3{font-size:11.5px;margin:0 0 8px}.support-grid h3:after{content:"";display:block;width:29px;height:1px;background:var(--green);margin:6px auto 0}.support-grid img{width:34px;height:34px;object-fit:contain}
.flow{background:var(--ivory);padding-top:62px;padding-bottom:64px}.flow-grid{width:min(1000px,calc(100% - 100px));margin:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:23px}.flow-grid article{text-align:center;position:relative}.flow-grid article:not(:last-child):after{content:"›";position:absolute;right:-17px;top:51px;color:#879e95;font:30px Arial}.flow-grid span{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:#741118;color:#fff;font-size:16px}.flow-grid img{width:34px;height:34px;object-fit:contain;margin:0 auto 9px}.flow-grid h3{font-size:11.5px;margin-bottom:10px}.flow-grid p{font-size:8.5px;line-height:1.7;margin:0}
.contact{width:100%;min-height:390px;display:grid;grid-template-columns:43% 57%;background:var(--green);color:#fff}.contact-copy{align-self:center;padding:50px 22px 50px max(74px,7vw)}.gold-rule{display:block;width:44px;height:1px;background:var(--gold);margin:9px 0 27px}.contact h2{font-size:40px;line-height:1.45;font-weight:500;margin-bottom:22px}.contact-copy p{font-size:10px;margin-bottom:19px}.contact figure{margin:0;overflow:hidden}.contact figure img{width:100%;height:100%;object-fit:cover}.closing{display:flex;align-items:center;justify-content:center;gap:58px;padding:36px 24px;background:#fff}.closing img{width:205px}.closing p{font-size:12.5px;margin:0}.footer{background:var(--deep);color:#fff;text-align:center;padding:16px 20px 17px}.footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 17px;margin-bottom:9px;font-size:9px}.footer small{font-size:8px}
@media(max-width:900px){
.site-header{height:60px}.header-inner{width:calc(100% - 28px)}.site-logo img{width:135px}.nav-toggle{display:block}.main-nav{display:none;position:absolute;z-index:50;top:60px;left:0;right:0;flex-direction:column;gap:0;background:#fff;padding:10px 20px 16px;box-shadow:0 10px 20px rgba(0,0,0,.08)}.main-nav.is-open{display:flex}.main-nav a{padding:10px 0;border-bottom:1px solid #eee}
.hero-inner{height:auto;display:flex;flex-direction:column}.hero-photo{order:1;height:260px}.hero-photo:before,.hero-photo:after{display:none}.hero-photo img{object-fit:contain;background:#f1f1ec}.hero-copy{order:2;text-align:center;padding:36px 20px 42px}.hero h1{font-size:34px}.hero-eyebrow{font-size:11px}.hero-accent{font-size:17px}.hero-text{font-size:10px}.hero-text br{display:none}
.message{height:auto;min-height:175px;padding:35px 20px}.message h2{font-size:24px}.sp-only{display:block}
.section{padding:56px 0}.section-head{margin-bottom:34px}.section-head h2{font-size:27px}
.two-col{width:calc(100% - 38px);grid-template-columns:1fr;gap:28px}.about-photo{height:260px}
.three-col,.service-grid{width:calc(100% - 38px);grid-template-columns:1fr}.three-col article{padding:22px 0;border-bottom:1px solid #ece9e3}.three-col article:not(:last-child):after{display:none}.service-grid article{max-width:500px;margin:auto}
.metrics{grid-template-columns:repeat(2,1fr);gap:30px 0}.metrics article:nth-child(2):after{display:none}.metrics strong{font-size:36px}.metrics h3{font-size:11px}.metrics p{font-size:8px}
.support-grid{width:calc(100% - 38px);grid-template-columns:repeat(2,1fr);gap:11px}.support-grid article{min-height:112px}
.flow-grid{width:min(500px,calc(100% - 38px));grid-template-columns:1fr;gap:0}.flow-grid article{display:grid;grid-template-columns:60px 42px 1fr;column-gap:12px;align-items:center;text-align:left;padding:13px 0}.flow-grid article:not(:last-child):after{content:"↓";left:13px;right:auto;top:auto;bottom:-9px;font-size:20px}.flow-grid span{grid-row:1 / span 2;margin:0;width:42px;height:42px}.flow-grid img{grid-row:1 / span 2;margin:0;width:33px;height:33px}.flow-grid h3,.flow-grid p{grid-column:3}.flow-grid h3{margin:2px 0 3px}
.contact{grid-template-columns:1fr;min-height:0}.contact figure{order:1;height:260px}.contact figure img{object-fit:contain;background:#183d36}.contact-copy{order:2;text-align:center;padding:42px 20px 48px}.gold-rule{margin-inline:auto}.contact h2{font-size:33px}.closing{flex-direction:column;gap:20px;text-align:center}.closing img{width:190px}
}
/* ==================================================
2026-08-14 最終調整 復元用
PC ONLY
================================================== */
@media (min-width: 1251px) {
/* ==================================
ACHIEVEMENT
================================== */
.achievement {
position: relative !important;
height: 470px !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #064f46 !important;
}
/* 上半分：2枚の写真 */
.achievement-photos {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 255px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
z-index: 0 !important;
}
.achievement-photos img {
width: 100% !important;
height: 255px !important;
object-fit: cover !important;
display: block !important;
}
/* 写真の上の緑＋中央を濃くするグラデーション */
.achievement-shade {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 255px !important;
background: linear-gradient(
90deg,
rgba(0, 52, 45, 0.66) 0%,
rgba(0, 50, 43, 0.68) 15%,
rgba(0, 48, 42, 0.72) 29%,
rgba(0, 45, 39, 0.78) 34%,
rgba(0, 42, 36, 0.86) 42%,
rgba(0, 42, 36, 0.86) 58%,
rgba(0, 45, 39, 0.78) 66%,
rgba(0, 48, 42, 0.72) 71%,
rgba(0, 50, 43, 0.68) 85%,
rgba(0, 52, 45, 0.66) 100%
) !important;
z-index: 1 !important;
}
.achievement-content {
position: relative !important;
z-index: 2 !important;
width: 100% !important;
height: 100% !important;
}
/* ACHIEVEMENT中央見出し */
.achievement .section-head {
position: absolute !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100% !important;
height: 255px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
z-index: 3 !important;
}
.achievement .section-head .en {
font-size: 18px !important;
letter-spacing: 0.14em !important;
margin-bottom: 12px !important;
}
.achievement h2 {
font-size: 40px !important;
line-height: 1.45 !important;
margin: 0 0 18px !important;
}
.achievement .section-head > p:last-child {
font-size: 17px !important;
line-height: 1.65 !important;
}
/* 下半分：数字の濃い緑帯 */
.achievement .metrics {
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 215px !important;
margin: 0 !important;
padding: 26px 55px 22px !important;
box-sizing: border-box !important;
background: #003f38 !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
align-items: start !important;
}
.achievement .metrics article {
position: relative !important;
padding: 0 32px !important;
text-align: center !important;
}
.achievement .metrics strong {
font-size: 44px !important;
line-height: 1 !important;
color: #d8a12b !important;
font-weight: 400 !important;
}
.achievement .metrics h3 {
margin-top: 12px !important;
font-size: 18px !important;
color: #fff !important;
}
.achievement .metrics p {
margin-top: 16px !important;
font-size: 14px !important;
line-height: 1.55 !important;
color: #fff !important;
}
.achievement .metrics article:not(:last-child)::after {
content: "" !important;
position: absolute !important;
top: 18px !important;
right: 0 !important;
width: 1px !important;
height: 58px !important;
background: rgba(255,255,255,0.5) !important;
}
/* ==================================
SUPPORT FIELD
================================== */
.support .section-head .en {
font-size: 18px !important;
letter-spacing: 0.14em !important;
}
.support .section-head h2 {
font-size: 46px !important;
line-height: 1.45 !important;
}
.support .section-head > p:last-child {
font-size: 17px !important;
line-height: 1.8 !important;
}
.support-grid h3 {
font-size: 18px !important;
}
.support-grid img {
width: 46px !important;
height: 46px !important;
object-fit: contain !important;
}
/* ==================================
FLOW
================================== */
.flow .section-head .en {
font-size: 18px !important;
letter-spacing: 0.14em !important;
}
.flow .section-head h2 {
font-size: 46px !important;
line-height: 1.45 !important;
}
.flow .section-head > p:last-child {
font-size: 17px !important;
line-height: 1.8 !important;
}
.flow-grid h3 {
font-size: 18px !important;
}
.flow-grid p {
font-size: 14px !important;
line-height: 1.7 !important;
}
.flow-grid img {
width: 46px !important;
height: 46px !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto 14px !important;
}
/* ==================================
CONTACT
元Photoshopデザイン寄せ
================================== */
.contact{
position: relative;
overflow: hidden;
}
.contact::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
z-index:2 !important;
pointer-events:none !important;
background: linear-gradient(
90deg,
rgba(0,56,48,1) 0%,
rgba(0,56,48,1) 34%,
rgba(0,56,48,.96) 40%,
rgba(0,56,48,.88) 46%,
rgba(0,56,48,.68) 54%,
rgba(0,56,48,.40) 62%,
rgba(0,56,48,.16) 70%,
rgba(0,56,48,0) 79%
) !important;
}
}
.contact-copy{
position: relative;
z-index: 3;
background: transparent !important;
}
.contact figure{
position: relative;
z-index: 1;
}
/* CONTACTの境目をグラデーションでなじませる */
.contact{
position: relative !important;
overflow: hidden !important;
background: #00493f !important;
}
.contact-copy{
position: relative !important;
z-index: 3 !important;
background: transparent !important;
}
.contact figure{
position: relative !important;
z-index: 1 !important;
margin: 0 !important;
overflow: hidden !important;
/* まだ境目が見えるとき用 */
margin-left: -2px !important;
}
.contact figure img{
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
@media (min-width: 1251px) {
.contact figure::before{
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
pointer-events: none !important;
background: linear-gradient(
90deg,
rgba(0,73,63,1) 0%,
rgba(0,73,63,0.98) 8%,
rgba(0,73,63,0.90) 16%,
rgba(0,73,63,0.72) 24%,
rgba(0,73,63,0.45) 34%,
rgba(0,73,63,0.20) 46%,
rgba(0,73,63,0.06) 58%,
rgba(0,73,63,0) 70%
) !important;
}
}
/* ===== CONTACT 微調整 ===== */
@media (min-width: 1251px)
{
.contact-copy{
position: relative !important;
z-index: 3 !important;
background: transparent !important;
/* 位置調整 */
padding: 90px 70px 80px 130px !important;
max-width: 520px !important;
}
.contact-copy .en{
font-size: 18px !important;
letter-spacing: 0.14em !important;
}
.contact-copy h2{
font-size: 44px !important;
line-height: 1.45 !important;
letter-spacing: 0.02em !important;
margin: 0 0 26px 0 !important;
}
.contact-copy p{
font-size: 15px !important;
line-height: 1.9 !important;
margin: 0 0 22px 0 !important;
}
.contact-copy .gold-rule{
margin: 14px 0 38px 0 !important;
}
.contact-copy .btn,
.contact-copy a.btn,
.contact-copy .contact-btn,
.contact-copy .cta-btn{
font-size: 16px !important;
padding: 16px 34px !important;
}
/* ===================================
ABOUT / STRENGTH / SERVICE
SUPPORT FIELDと文字サイズを統一
=================================== */
@media (min-width: 1251px) {
/* ===== ABOUT US ===== */
/* ABOUT US */
.about .en {
font-size: 18px !important;
letter-spacing: 0.14em !important;
}
/* 私たちについて */
.about .sub {
font-size: 17px !important;
}
/* 一本の電話にも、品質がある。 */
.about .lead {
font-size: 25px !important;
line-height: 1.45 !important;
}
/* ABOUT本文 */
.about-copy p:not(.en):not(.sub):not(.lead) {
font-size: 17px !important;
line-height: 1.9 !important;
}
/* ===== OUR STRENGTH ===== */
/* OUR STRENGTH */
.strength .section-head .en {
font-size: 18px !important;
letter-spacing: 0.14em !important;
}
/* 営業品質を支える、3つの約束。 */
.strength .section-head h2 {
font-size: 46px !important;
line-height: 1.45 !important;
}
/* 赤い説明文 */
.strength .section-head .red {
font-size: 17px !important;
line-height: 1.8 !important;
}
/* 品質を見える化します。など */
.strength .three-col h3 {
font-size: 18px !important;
line-height: 1.6 !important;
}
/* 各説明文 */
.strength .three-col p {
font-size: 14px !important;
line-height: 1.8 !important;
}
/* ===== SERVICE ===== */
/* SERVICE */
.service .section-head .en {
font-size: 18px !important;
letter-spacing: 0.14em !important;
}
/* 私たちにできること。 */
.service .section-head .sub {
font-size: 17px !important;
}
/* 企業の営業活動を、もっと前へ。 */
.service .section-head h2 {
font-size: 46px !important;
line-height: 1.45 !important;
}
/* 赤い説明文 */
.service .section-head .red {
font-size: 17px !important;
line-height: 1.8 !important;
}
/* 営業活動を支える等 */
.service-grid h3 {
font-size: 18px !important;
line-height: 1.6 !important;
}
/* カード説明文 */
.service-grid p {
font-size: 14px !important;
line-height: 1.8 !important;
}
}
/* TOP メイン見出し以外の文字を少し大きく */
.hero-eyebrow{
font-size:17px !important;
}
.hero-accent{
font-size:20px !important;
}
.hero-text{
font-size:14px !important;
line-height:1.85 !important;
}
@media (min-width: 1251px) {
.footer-nav a{
font-size: 18px !important;
}
.footer-copy{
font-size: 15px !important;
}
}
/* ===== スマホ TOP 微調整 ===== */
@media (max-width: 900px) {
.hero-eyebrow{
font-size: 13px !important;
}
.hero h1{
font-size: 31px !important;
line-height: 1.45 !important;
margin-bottom: 18px !important;
}
.hero-accent{
font-size: 16px !important;
margin-bottom: 16px !important;
}
.hero-text{
font-size: 12px !important;
line-height: 1.9 !important;
margin-bottom: 22px !important;
}
.hero .cta{
font-size: 13px !important;
padding: 13px 22px !important;
}
}
/* ===== スマホ ABOUT 微調整 ===== */
@media (max-width: 900px) {
.about .en{
font-size: 14px !important;
letter-spacing: 0.14em !important;
}
.about .sub{
font-size: 12px !important;
}
.about .lead{
font-size: 22px !important;
line-height: 1.5 !important;
}
.about-copy p:not(.en):not(.sub):not(.lead){
font-size: 13px !important;
line-height: 1.9 !important;
}
.about figure{
margin-top: 28px !important;
}
}
/* ===== スマホ OUR STRENGTH 微調整 ===== */
@media (max-width: 900px) {
.strength .section-head .en{
font-size: 14px !important;
letter-spacing: 0.14em !important;
}
.strength .section-head h2{
font-size: 24px !important;
line-height: 1.5 !important;
}
.strength .section-head .red{
font-size: 13px !important;
line-height: 1.8 !important;
}
.strength .three-col h3{
font-size: 16px !important;
line-height: 1.6 !important;
}
.strength .three-col p{
font-size: 12px !important;
line-height: 1.8 !important;
}
.strength .three-col article{
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.strength .three-col img{
width: 44px !important;
height: 44px !important;
object-fit: contain !important;
}
}
/* ===== スマホ SERVICE 微調整 ===== */
@media (max-width: 900px) {
.service .section-head .en{
font-size: 14px !important;
letter-spacing: 0.14em !important;
}
.service .section-head .sub{
font-size: 12px !important;
}
.service .section-head h2{
font-size: 24px !important;
line-height: 1.5 !important;
}
.service .section-head .red{
font-size: 13px !important;
line-height: 1.8 !important;
}
.service-grid h3{
font-size: 16px !important;
line-height: 1.6 !important;
}
.service-grid p{
font-size: 12px !important;
line-height: 1.8 !important;
}
}
/* ===== スマホ ACHIEVEMENT 微調整 ===== */
@media (max-width: 900px) {
.achievement .section-head .en{
font-size: 14px !important;
letter-spacing: 0.14em !important;
}
.achievement .section-head h2{
font-size: 20px !important;
line-height: 1.5 !important;
}
.achievement .section-head > p:last-child{
font-size: 12px !important;
line-height: 1.8 !important;
}
.achievement .metrics strong{
font-size: 34px !important;
}
.achievement .metrics h3{
font-size: 13px !important;
}
.achievement .metrics p{
font-size: 9px !important;
line-height: 1.6 !important;
}
.achievement{
min-height: 0 !important;
height: auto !important;
}
.achievement-photos{
height: 430px !important;
}
.achievement-photos img{
height: 430px !important;
}
.achievement .section-head h2{
font-size: 20px !important;
line-height: 1.5 !important;
width: 100% !important;
max-width: none !important;
white-space: normal !important;
}
.achievement .section-head{
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
/* ===== スマホ ACHIEVEMENT 説明文の横幅調整 ===== */
@media (max-width: 900px) {
.achievement .metrics article{
padding-left: 10px !important;
padding-right: 10px !important;
}
}
@media (max-width: 900px) {
.achievement .metrics{
padding-left: 8px !important;
padding-right: 8px !important;
}
.achievement .metrics article{
padding-left: 4px !important;
padding-right: 4px !important;
}
.achievement .metrics p{
font-size: 9px !important;
line-height: 1.5 !important;
}
}
/* ===== PC ACHIEVEMENT 復元 ===== */
@media (min-width: 1251px) {
.achievement {
position: relative !important;
height: 470px !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #064f46 !important;
}
.achievement-photos {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 255px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
}
.achievement-photos img {
width: 100% !important;
height: 255px !important;
object-fit: cover !important;
}
.achievement-shade {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 255px !important;
}
.achievement-content {
position: relative !important;
width: 100% !important;
height: 100% !important;
}
.achievement .section-head {
position: absolute !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100% !important;
height: 255px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
}
.achievement .metrics {
position: absolute !important;
left: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 215px !important;
margin: 0 !important;
padding: 26px 55px 22px !important;
box-sizing: border-box !important;
background: #003f38 !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
}
.achievement .metrics article {
position: relative !important;
padding: 0 32px !important;
text-align: center !important;
}
}
@media (max-width: 900px) {
.achievement .metrics article{
padding-left: 2px !important;
padding-right: 2px !important;
}
.achievement .metrics p{
width: 100% !important;
max-width: none !important;
word-break: normal !important;
overflow-wrap: normal !important;
text-align: center !important;
}
}
@media (max-width: 900px) {
.achievement .metrics article:first-child p,
.achievement .metrics article:last-child p{
font-size: 8px !important;
line-height: 1.55 !important;
}
}
@media (max-width: 900px) {
.achievement .metrics article:first-child p,
.achievement .metrics article:last-child p{
font-size: 7px !important;
line-height: 1.55 !important;
}
}
@media (max-width: 900px) {
.achievement .keep-word{
white-space: nowrap !important;
}
}
/* ==================================
ACHIEVEMENT スマホ説明文 改行・表示調整
================================== */
@media (max-width: 900px) {
/* グリッドと余白調整 */
.achievement .metrics {
padding-left: 10px !important;
padding-right: 10px !important;
}
.achievement .metrics article {
padding-left: 6px !important;
padding-right: 6px !important;
}
/* 説明文の文字サイズと折り返し最適化 */
.achievement .metrics p,
.achievement .metrics article:first-child p,
.achievement .metrics article:last-child p {
font-size: 10px !important; /* 読みやすいサイズに固定 */
line-height: 1.6 !important;
letter-spacing: -0.02em !important; /* わずかに字間を詰めて収まりを良くする */
word-break: normal !important;
overflow-wrap: break-word !important;
text-align: center !important;
width: 100% !important;
max-width: none !important;
}
}
/* ==================================
ACHIEVEMENT 改行固定・文字サイズ最終調整
================================== */
/* PC版（横幅が広いとき） */
@media (min-width: 1251px) {
.achievement .metrics article {
padding: 0 10px !important;
}
.achievement .metrics p {
font-size: 13px !important;
line-height: 1.65 !important;
white-space: nowrap !important;
}
}
/* スマホ・タブレット版（画面幅が狭いとき） */
@media (max-width: 1250px) {
/* カード自体の内側余白を最小限にして幅を広く使う */
.achievement .metrics article {
padding-left: 2px !important;
padding-right: 2px !important;
}
/* 説明文のスタイル調整 */
.achievement .metrics p,
.achievement .metrics article p,
.achievement .metrics article:first-child p,
.achievement .metrics article:last-child p {
font-size: 8.5px !important; /* 2列の枠内に綺麗に収まるサイズ */
line-height: 1.45 !important;
letter-spacing: -0.04em !important; /* 文字間を極わずかに詰めて15文字を1行に収める */
text-align: center !important;
white-space: nowrap !important; /*
以外の勝手な改行を防止 */
word-break: keep-all !important;
}
}
/* ==================================
ACHIEVEMENT スマホ改行・枠幅・文字サイズ強制上書き
================================== */
/* PC版（1251px以上） */
@media (min-width: 1251px) {
.achievement .metrics article {
padding: 0 10px !important;
}
.achievement .metrics p {
font-size: 13px !important;
line-height: 1.65 !important;
white-space: nowrap !important;
}
}
/* スマホ・タブレット表示時（1250px以下） */
@media screen and (max-width: 1250px) {
/* 親要素のグリッド余白を削って表示枠を極力広げる */
.achievement .metrics {
gap: 10px 4px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* カード自体の左右余白をゼロにする */
.achievement .metrics article {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
}
/* Pタグとその中のすべての文字サイズ・改行挙動を強制統一 */
html body .achievement .metrics article p,
html body .achievement .metrics article:first-child p,
html body .achievement .metrics article:last-child p {
font-size: 7px !important; /* 枠内に15文字を収めるサイズ */
line-height: 1.35 !important;
letter-spacing: -0.06em !important; /* 字間を少し詰めて確実に1行化 */
text-align: center !important;
white-space: nowrap !important; /*
以外の自動改行を絶対禁止 */
word-break: keep-all !important;
display: block !important;
margin: 0 auto !important;
}
}
/* ==================================
ACHIEVEMENT スマホ縦1列 強制上書き
================================== */
/* 画面幅1250px以下（スマホ・タブレット全般）で適用 */
@media screen and (max-width: 1250px) {
/* 親要素を強制的に縦1列（column）にする */
html body #achievement .achievement-content .metrics,
html body .achievement .metrics {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 20px !important;
width: 100% !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
/* カード幅を100%に広げる */
html body #achievement .achievement-content .metrics article,
html body .achievement .metrics article {
width: 100% !important;
max-width: 340px !important;
padding: 10px !important;
box-sizing: border-box !important;
}
/* テキストの折り返しと文字サイズ調整 */
html body #achievement .achievement-content .metrics article p,
html body .achievement .metrics article p {
font-size: 13px !important;
line-height: 1.6 !important;
text-align: center !important;
white-space: nowrap !important; /*
以外の自動変形改行を防止 */
letter-spacing: 0 !important;
}
}
/* ==================================
スマホ表示（768px以下）のみ縦1列化
================================== */
@media screen and (max-width: 768px) {
/* metrics（枠全体）をスマホ時だけ縦並びに切替 */
.metrics {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 20px !important;
}
/* 各カードの幅をスマホ用に調整 */
.metrics article {
width: 100% !important;
max-width: 340px !important;
}
/* スマホでのテキスト整形 */
.metrics article p {
font-size: 13px !important;
line-height: 1.6 !important;
text-align: center !important;
white-space: nowrap !important;
}
}
/* ==================================
ACHIEVEMENT PC/SP 完全切り替え
================================== */
/* PC表示（769px以上）：スマホ用を消す */
@media screen and (min-width: 769px) {
html body .metrics.pc-hide {
display: none !important;
}
}
/* スマホ表示（768px以下）：PC用を消して、スマホ用を「縦1列」に強制 */
@media screen and (max-width: 768px) {
/* PC用ブロックを消す */
html body .metrics.sp-hide {
display: none !important;
}
/* スマホ用ブロックを無理やり縦1列にする */
html body .metrics.pc-hide {
display: flex !important;
flex-direction: column !important; /* 2列指定を破壊して縦1列に */
grid-template-columns: none !important;
align-items: center !important;
gap: 20px !important;
width: 100% !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
/* 各カードの横幅を確保 */
html body .metrics.pc-hide article {
width: 100% !important;
max-width: 340px !important;
padding: 10px !important;
}
/* フォントと改行の指定 */
html body .metrics.pc-hide article p {
font-size: 13px !important;
line-height: 1.6 !important;
text-align: center !important;
white-space: nowrap !important;
}
}
@media (max-width: 900px) {
.support{
padding-bottom: 0px !important;
}
.flow{
padding-top: 10px !important;
}
}
@media (max-width: 900px) {
.flow .section-head .en{
font-size: 14px !important;
letter-spacing: 0.14em !important;
}
.flow .section-head h2{
font-size: 24px !important;
line-height: 1.5 !important;
}
.flow .section-head > p:last-child{
font-size: 12px !important;
line-height: 1.8 !important;
}
}
@media (max-width: 900px) {
.flow-grid h3{
font-size: 14px !important;
line-height: 1.5 !important;
}
.flow-grid p{
font-size: 11.5px !important;
line-height: 1.7 !important;
}
.flow-grid img{
width: 36px !important;
height: 36px !important;
}
}
@media (max-width: 900px) {
.contact::before{
display: none !important;
content: none !important;
}
.contact figure::before{
display: none !important;
content: none !important;
}
}
@media (max-width: 900px) {
.contact-copy > p:not(.en) {
font-size: 12px !important;
line-height: 1.8 !important;
}
}
@media (max-width: 900px) {
.footer nav a{
font-size: 10px !important;
line-height: 1.8 !important;
}
.footer small{
font-size: 9px !important;
}
}
/* ===== CONTACT FORM PAGE ===== */
.contact-form-section{
width: min(900px, 92%);
margin: 0 auto;
padding: 100px 20px 120px;
}
.contact-form-head{
text-align: center;
margin-bottom: 60px;
}
.contact-form-head .en{
color: #8b2027;
font-size: 16px;
letter-spacing: .16em;
margin-bottom: 14px;
}
.contact-form-head h1{
color: #063d35;
font-size: 42px;
font-weight: 500;
margin: 0 0 22px;
}
.contact-form-head > p:last-child{
color: #264f49;
font-size: 16px;
line-height: 1.9;
}
.contact-form{
max-width: 760px;
margin: 0 auto;
}
.form-item{
margin-bottom: 30px;
}
.form-item label{
display: block;
color: #063d35;
font-size: 16px;
margin-bottom: 10px;
}
.required{
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
background: #8b2027;
color: #fff;
font-size: 11px;
}
.form-item input,
.form-item textarea{
width: 100%;
padding: 14px 16px;
border: 1px solid #d8d3ca;
background: #fff;
color: #123f36;
font-size: 15px;
box-sizing: border-box;
}
.form-item textarea{
resize: vertical;
}
.form-item input:focus,
.form-item textarea:focus{
outline: none;
border-color: #063d35;
}
.privacy-check{
margin: 38px 0;
text-align: center;
color: #264f49;
font-size: 14px;
}
.privacy-check a{
color: #8b2027;
text-decoration: underline;
}
.form-submit{
text-align: center;
}
.form-submit button{
border: 0;
background: #8b2027;
color: #fff;
padding: 16px 50px;
font-family: inherit;
font-size: 15px;
cursor: pointer;
}
.form-submit button span{
margin-left: 16px;
}
@media (max-width: 900px){
.contact-form-section{
width: 100%;
padding: 70px 24px 90px;
}
.contact-form-head{
margin-bottom: 45px;
}
.contact-form-head .en{
font-size: 13px;
}
.contact-form-head h1{
font-size: 28px;
}
.contact-form-head > p:last-child{
font-size: 13px;
line-height: 1.8;
}
.form-item{
margin-bottom: 24px;
}
.form-item label{
font-size: 14px;
}
.form-item input,
.form-item textarea{
font-size: 16px;
padding: 13px 14px;
}
.privacy-check{
font-size: 12px;
line-height: 1.8;
}
.form-submit button{
width: 100%;
max-width: 280px;
}
}
@media (max-width: 900px){
.hero h1{
font-size: 42px !important;
line-height: 1.45 !important;
}
.hero-line2{
display: inline-block !important;
white-space: nowrap !important;
font-size: 0.82em !important;
letter-spacing: 0 !important;
}
}