@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;700&display=swap');*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:#18352f;background:#f2f1eb;font-family:'DM Sans','Noto Sans JP',sans-serif}
a{color:inherit;text-decoration:none}
header{height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:#f2f1eb;position:relative;z-index:2}
.logo{font-size:24px;font-weight:600;letter-spacing:-1px}
.logo small{display:block;font-size:8px;letter-spacing:2px;margin-top:4px}
nav{display:flex;align-items:center;gap:36px;font-size:12px}
nav .contact{border:1px solid;padding:14px 22px}
.hero{min-height:calc(100vh - 92px);display:grid;grid-template-columns:43% 57%;position:relative}
.hero-copy{padding:11vh 5vw}
.eyebrow,.section-no{font-size:11px;letter-spacing:2px}
.hero h1{font-family:'Noto Sans JP';font-size:clamp(48px,6vw,90px);line-height:1.2;letter-spacing:-.06em;margin:35px 0}
.hero-copy>p:not(.eyebrow){line-height:2;font-size:14px}
.button{display:inline-block;background:#e9ff59;padding:18px 25px;margin-top:30px;font-size:13px}
.hero-photo{background:linear-gradient(135deg,rgba(13,44,41,.05),rgba(13,44,41,.3)),url('https://commons.wikimedia.org/wiki/Special:Redirect/file/Skyline_of_Hiroshima_City.jpg') center/cover}
.scroll{position:absolute;bottom:25px;left:5vw;font-size:9px;letter-spacing:2px}
.intro,.company{display:grid;grid-template-columns:32% 68%;padding:140px 8vw;background:#fff}
.intro h2,.company h2,.services h2{font-size:clamp(34px,4vw,60px);line-height:1.35;margin:0 0 45px}
.intro div>p{max-width:650px;line-height:2.2;color:#51605d}
.services{padding:140px 8vw}
.services>h2{margin:25px 0 60px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #b8c0bb}
.service-grid article{padding:35px 30px 60px 0;border-right:1px solid #b8c0bb;margin-right:30px}
.service-grid article:last-child{border:0}
.service-grid b{font-size:11px}
.service-grid h3{font-size:22px;margin:45px 0 20px}
.service-grid p{line-height:1.9;color:#586560;font-size:14px}
.statement{height:70vh;background:linear-gradient(rgba(16,48,42,.45),rgba(16,48,42,.45)),url('https://commons.wikimedia.org/wiki/Special:Redirect/file/広島市_(38509185465).jpg') center/cover;display:flex;align-items:center;justify-content:center;color:white;text-align:center}
.statement p{font-size:clamp(42px,7vw,100px);line-height:1;letter-spacing:-.04em}
.company dl{max-width:750px}
.company dt,.company dd{margin:0;padding:22px 0;border-top:1px solid #ccd1cc}
.company dt{float:left;width:180px;font-size:12px;color:#71807b}
.company dd{padding-left:180px;line-height:1.7}
.cta{padding:130px 8vw;background:#173b34;color:white;text-align:center}
.cta>p{letter-spacing:3px;font-size:11px}
.cta h2{font-size:clamp(34px,4vw,58px)}
.cta a{display:block;max-width:620px;margin:55px auto 12px;padding:22px 0;border-bottom:1px solid #fff;text-align:left}
.cta a span{float:right}
.cta small{opacity:.55}
footer{padding:55px 5vw;display:flex;justify-content:space-between;align-items:end}
footer p{font-size:10px}
@media(max-width:760px){header{height:72px}
nav a:not(.contact){display:none}
nav .contact{padding:10px 14px}
.hero{display:block;min-height:auto}
.hero-copy{padding:70px 7vw 80px}
.hero-photo{height:54vh}
.scroll{display:none}
.intro,.company{display:block;padding:90px 7vw}
.section-no{margin-bottom:40px}
.services{padding:90px 7vw}
.service-grid{grid-template-columns:1fr}
.service-grid article{border-right:0;border-bottom:1px solid #b8c0bb;margin:0}
.statement{height:50vh}
.company dt{float:none;width:auto;border:0;padding-bottom:5px}
.company dd{padding:0 0 20px}
.cta{padding:90px 7vw}
footer{align-items:start;gap:30px}
}
@media(max-width:760px){nav{gap:0}.logo{font-size:20px}.hero-copy{padding:58px 7vw 66px}.hero h1{font-size:clamp(44px,14vw,64px);margin:26px 0}.hero-photo{height:48vh;min-height:330px}.intro,.company,.services{padding:78px 7vw}.section-no{margin:0 0 30px}.intro h2,.company h2,.services h2{margin-bottom:30px}.service-grid article{padding:28px 0 36px}.service-grid h3{margin:22px 0 12px}.statement{height:46vh;min-height:330px}.company dt{padding:17px 0 4px}.company dd{padding:0 0 17px}.cta{padding:78px 7vw}.cta h2{line-height:1.45}.cta a{margin-top:38px}footer{padding:40px 7vw}}
.hero h1,.intro h2,.company h2,.services h2,.cta h2{word-break:keep-all;overflow-wrap:normal}.hero h1{font-size:clamp(42px,4.7vw,72px)}
@media(max-width:760px){.hero h1{font-size:clamp(38px,11vw,54px)}.intro h2,.company h2,.services h2,.cta h2{font-size:clamp(30px,9vw,44px)}}
.access{display:grid;grid-template-columns:32% 68%;padding:140px 8vw;background:#e5e8e1}.access h2{font-size:clamp(34px,4vw,60px);margin:0 0 15px}.access div>p{color:#586560}.map{margin-top:35px;height:420px}.map iframe{width:100%;height:100%;border:0;filter:grayscale(.35)}.map-link{display:inline-block;margin-top:18px;padding-bottom:5px;border-bottom:1px solid;font-size:12px}@media(max-width:760px){.access{display:block;padding:78px 7vw}.access h2{font-size:clamp(30px,9vw,44px)}.map{height:330px;margin-top:28px}}
.section-no{font-size:14px;font-weight:600;letter-spacing:2.5px}@media(max-width:760px){.section-no{font-size:12px}}
html,body{max-width:100%;overflow-x:hidden}img,iframe{max-width:100%}@media(max-width:760px){.cta h2,.intro h2,.company h2,.services h2,.access h2{word-break:auto-phrase;overflow-wrap:anywhere}.cta h2{font-size:clamp(28px,8vw,38px)}.cta a{max-width:100%;overflow-wrap:anywhere}.hero-copy,.intro>div,.company>div,.access>div{min-width:0}}
@media(max-width:760px){.hero h1,.intro h2,.cta h2{white-space:normal;word-break:auto-phrase;overflow-wrap:break-word}.hero h1{font-size:clamp(36px,10vw,50px)}.intro h2,.cta h2{font-size:clamp(28px,8vw,38px)}}
@media(max-width:390px){.hero h1,.intro h2,.company h2,.services h2,.access h2,.cta h2{text-wrap:balance;word-break:auto-phrase;overflow-wrap:normal}.hero h1{font-size:36px;line-height:1.3}.intro h2,.company h2,.services h2,.access h2{font-size:28px;line-height:1.45}.cta h2{max-width:330px;margin-left:auto;margin-right:auto;font-size:26px;line-height:1.55}}
@media(min-width:761px){
  .logo small{font-size:10px}
  nav{font-size:14px}
  .eyebrow{font-size:13px}
  .hero-copy>p:not(.eyebrow){font-size:16px}
  .button{font-size:15px}
  .scroll{font-size:11px}
  .intro div>p{font-size:17px}
  .service-grid b{font-size:13px}
  .service-grid p{font-size:16px}
  .company dt{font-size:14px}
  .company dd{font-size:16px}
  .access div>p{font-size:16px}
  .map-link{font-size:14px}
  .cta>p{font-size:13px}
  .cta a{font-size:18px}
  footer p{font-size:12px}
}