/* ==========================================
roam housing lab — CSS
原本 trip-design.net のCSS構造を正確に再現
========================================== */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap");
/* --- Reset ------------------------------------------------ */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
table{border-collapse:collapse;border-spacing:0}
button,input[type=email],input[type=number],input[type=search],input[type=submit],input[type=text],input[type=tel],select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;font:inherit;outline:none}
*,*::before,*::after{box-sizing:border-box}
/* --- Base ------------------------------------------------ */
html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: var(--anchor-scroll-offset);
--anchor-scroll-offset: 96px;
--sp-page-gutter: clamp(22px, 6vw, 28px);
}
:where([id]) {
scroll-margin-top: var(--anchor-scroll-offset);
}
body {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
min-height: 100%;
position: relative;
min-width: 320px;
font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "游ゴシック",
"Osaka", "ＭＳ Ｐゴシック", "MS PGothic", arial, helvetica, clean, sans-serif;
font-size: 1.6rem;
line-height: 1.75;
color: #333;
word-break: break-word;
overflow-wrap: break-word;
background-color: #fff;
}
body.-fixed { overflow: hidden; }
a { color: #333; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { font-weight: normal; }
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
._en { font-family: "Lato", sans-serif; }
._link { transition: opacity 0.3s; }
._link:hover { opacity: 0.7; text-decoration: none; }
._imgcover {
display: block;
width: 100%; height: 100%;
overflow: hidden;
}
._imgcover > .img,
._imgcover > img {
width: 100%; height: 100%;
object-fit: cover;
}
/* --- Utility: bordertop ----------------------------------- */
._bordertop { position: relative; }
._bordertop::before,
._bordertop::after {
content: ""; display: block;
position: absolute; left: 0; top: 0;
width: 100%; height: 8px;
background-color: #d4dde2;
}
._bordertop::after {
width: 150px;
background-color: #ffeb00;
display: none;
}
/* --- Utility: width wrappers ----------------------------- */
._w960_sidep { width: calc(100% - 40px); max-width: 960px; margin: auto; }
._w1160 { width: 100%; max-width: 1160px; margin: auto; }
._w1160_sidep { width: calc(100% - 50px); max-width: 1160px; margin: auto; }
/* --- Utility: margins ------------------------------------ */
._mt20 { margin-top: clamp(10px, 1.5vw, 20px) !important; }
._mt35 { margin-top: clamp(17px, 2.6vw, 35px) !important; }
._mt50 { margin-top: clamp(25px, 3.75vw, 50px) !important; }
._mt55 { margin-top: clamp(27px, 4.1vw, 55px) !important; }
._mt130 { margin-top: clamp(65px, 9.75vw, 130px) !important; }
._mt140 { margin-top: clamp(70px, 10.5vw, 140px) !important; }
._mtst55 { margin-top: 55px !important; }
._mb40 { margin-bottom: clamp(20px, 3vw, 40px) !important; }
.pc-block { display: inline; }
@media (max-width: 768px) {
.pc-block { display: none; }
}
/* Back to top button */
.backtotop {
position: fixed;
right: clamp(16px, 2vw, 28px);
bottom: clamp(16px, 2vw, 28px);
z-index: 80;
width: 56px;
height: 56px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.08em;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
border-radius: 50%;
}
.backtotop.-show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.backtotop:hover { background-color: #e5e5e5; color: #333; }
.backtotop.-reservation {
width: 74px;
height: 74px;
padding: 0 12px;
border-radius: 50%;
background-color: #58606b;
font-family: "Noto Sans JP", sans-serif;
font-size: 1.2rem;
line-height: 1.3;
letter-spacing: 0;
}
.backtotop.-reservation:hover {
background-color: #d8d8d8;
color: #333;
}
.backtotop-arrow {
display: block;
width: 10px;
height: 10px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(-45deg);
margin-top: 4px;
}
.backtotop-label { line-height: 1; }
@media (max-width: 768px) {
.backtotop { width: 48px; height: 48px; font-size: 0.9rem; }
.backtotop.-reservation { width: 64px; height: 64px; font-size: 1.1rem; }
.backtotop-arrow { width: 8px; height: 8px; }
}
/* --- Fade animations ------------------------------------- */
._fadeio,
._fadeil,
._fadeir,
._fadeiu {
opacity: 0;
transition: opacity 0.8s ease, transform 0.8s ease;
}
._fadeio { transform: translateY(20px); }
._fadeil { transform: translateX(-30px); }
._fadeir { transform: translateX(30px); }
._fadeiu { transform: translateY(30px); }
._fadeio.-active,
._fadeil.-active,
._fadeir.-active,
._fadeiu.-active {
opacity: 1;
transform: translate(0, 0);
}
._fadeiu.-fdgroup:nth-of-type(1) { transition-delay: 0s; }
._fadeiu.-fdgroup:nth-of-type(2) { transition-delay: 0.15s; }
._fadeiu.-fdgroup:nth-of-type(3) { transition-delay: 0.3s; }
/* ==========================================================
CONTAINER
========================================================== */
.container-block { position: relative; }
.container-block.-home,
.container-block.-transparent { padding-top: 0 !important; }
.container-block > .main-header { height: 80px; width: 100%; }
.container-block > .main-visual { width: 100%; height: 100vh; height: 100svh; }
.container-block .page-home { position: relative; z-index: 20; }
.container-block > .main-footer {
position: relative; z-index: 200;
margin-top: clamp(100px, 13.5vw, 150px);
}
/* ==========================================================
HEADER
========================================================== */
.main-header {
display: flex;
align-items: center;
position: fixed;
top: 0;
z-index: 1000;
padding: 0 0 0 24px;
transition: height 0.3s, background-color 0.3s;
background-color: #fff;
width: 100%;
}
.main-header > .headerinner {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
height: 100%;
min-width: 0;
}
.main-header .logo {
flex: 0 0 160px;
height: 50px;
margin-right: 14px;
}
.main-header .logolink {
display: flex;
align-items: center;
width: 100%;
height: 100%;
text-decoration: none;
}
.main-header .logotxt {
font-family: "Lato", sans-serif;
font-size: 2.6rem;
font-weight: 700;
letter-spacing: 0.05em;
color: #333;
line-height: 1;
}
.header-social {
display: flex;
align-items: center;
gap: 7px;
flex: 0 0 auto;
margin-right: 14px;
}
.header-social .sociallink {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid rgba(255, 255, 255, 0.36);
border-radius: 50%;
background-color: rgba(34, 39, 44, 0.58);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.header-social .sociallink:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.62);
background-color: rgba(0, 155, 231, 0.72);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
text-decoration: none;
}
.header-social .sociallink img {
display: block;
width: 16px;
height: 16px;
object-fit: contain;
opacity: 0.94;
}
.header-social .sociallink[aria-label="LINE"] img {
width: 22px;
height: 22px;
}
.main-header .logosub {
display: block;
font-size: 1rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #999;
margin-top: 2px;
}
.main-header .menubtn-area {
display: none;
align-items: center;
justify-content: center;
height: 100%;
flex: 0 0 70px;
cursor: pointer;
}
/* Home init state: transparent header */
.main-header.-home.-init,
.main-header.-menuopen,
.main-header.-transparent.-init {
box-shadow: none;
}
.main-header.-home.-init { background: none; }
.main-header.-menuopen {
background-color: #fff;
box-shadow: none;
z-index: 9900;
}
.main-header.-home.-init.-menuopen { background-color: #fff; }
/* Scrolled state */
.main-header.-scrolled {
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* Header Menu (gnav) */
.header-menu {
display: flex;
align-items: center;
height: 100%;
flex: 1;
justify-content: flex-end;
min-width: 0;
}
.menu-ul {
display: flex;
align-items: center;
height: 100%;
flex: 0 1 auto;
min-width: 0;
}
.menu-ul > .list {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.menu-ul .link {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 100%;
z-index: 10;
font-size: 1.2rem;
line-height: 1;
color: #333;
text-decoration: none;
padding: 0 8px;
white-space: nowrap;
letter-spacing: 0.04em;
}
.menu-ul .link::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: 22px;
height: 2px;
background-color: #009be7;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease;
}
.menu-ul .link.-current::after,
.menu-ul .link:hover::after {
transform: scaleX(1);
}
.menu-ul .link:hover { text-decoration: none; }
/* Home (transparent) state — white text on hero */
.main-header.-home.-init .menu-ul .link { color: #fff; }
.main-header.-home.-init .menu-ul .link::after { background-color: #fff; }
.main-header.-home.-init .logotxt { color: #fff; }
.main-header.-home.-init .estimatebtn { color: #333; }
.main-header.-home.-init .header-social .sociallink {
border-color: rgba(255, 255, 255, 0.46);
background-color: rgba(255, 255, 255, 0.1);
}
.main-header.-home.-init .header-social .sociallink:hover {
border-color: rgba(255, 255, 255, 0.7);
background-color: rgba(255, 255, 255, 0.2);
}
.main-header.-home.-init .menubtnlabel { color: #fff; }
.main-header.-home.-init .menubtnlabel > span { background-color: #fff; }
.main-header.-menuopen .logotxt,
.main-header.-home.-init.-menuopen .logotxt { color: #333; }
.main-header.-menuopen .menubtnlabel,
.main-header.-home.-init.-menuopen .menubtnlabel { color: #333; }
.main-header.-menuopen .menubtnlabel > span,
.main-header.-home.-init.-menuopen .menubtnlabel > span { background-color: #333; }
.main-header.-menuopen .header-social .sociallink,
.main-header.-home.-init.-menuopen .header-social .sociallink {
border-color: rgba(255, 255, 255, 0.36);
background-color: rgba(34, 39, 44, 0.58);
}
/* Estimate button in header */
.estimatebtn {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 14px;
background-color: #e5e5e5;
font-size: 1.2rem;
font-weight: 700;
color: #333;
text-decoration: none;
white-space: nowrap;
transition: 0.3s;
}
.estimatebtn:hover { background-color: #d8d8d8; text-decoration: none; }
.estimatebtn.-current { background-color: #e5e5e5; }
/* Event button in header */
.eventbtn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 12px;
margin-left: 4px;
background-color: #333;
font-size: 1.2rem;
font-weight: 700;
color: #fff;
text-decoration: none;
white-space: nowrap;
transition: 0.3s;
letter-spacing: 0.04em;
}
.eventbtn::before {
content: "";
display: inline-block;
width: 13px; height: 13px;
margin-right: 6px;
background-color: #e5e5e5;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.eventbtn:hover { background-color: #555; text-decoration: none; }
.eventbtn.-current { background-color: #333; color: #fff; }
.eventbtn.-current::before { background-color: #e5e5e5; }
.main-header.-home.-init .eventbtn {
background-color: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
}
/* Header function buttons */
/* Hamburger menu btn */
.menubtnlabel {
appearance: none;
background: transparent;
border: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 70px;
height: 100%;
cursor: pointer;
font-size: 1rem;
line-height: 1;
gap: 5px;
color: #333;
-webkit-user-select: none;
user-select: none;
}
.menubtnlabel > span {
display: block;
width: 26px;
height: 2px;
background-color: #333;
border-radius: 999px;
transform-origin: 50% 50%;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.menubtnlabel > span:not(:last-of-type) { margin-bottom: 0; }
/* Open state: X icon */
.main-header.-menuopen .menubtnlabel > span:nth-of-type(1) {
transform: translateY(7px) rotate(45deg);
}
.main-header.-menuopen .menubtnlabel > span:nth-of-type(2) {
opacity: 0;
}
.main-header.-menuopen .menubtnlabel > span:nth-of-type(3) {
transform: translateY(-7px) rotate(-45deg);
}
.menubtnchk { display: none; }
/* ==========================================================
MAIN VISUAL (HERO)
========================================================== */
.main-visual {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
height: 100svh;
}
.main-visual::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.16) 42%, rgba(0, 0, 0, 0.28) 100%);
pointer-events: none;
}
.main-visual > .imgarea {
width: 100%;
height: 100%;
}
.main-visual > .imgarea img,
.main-visual > .imgarea .img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
/* Placeholder background for demo */
.main-visual > .imgarea {
background: linear-gradient(160deg, #4a6570 0%, #374e58 35%, #28393f 65%, #182025 100%);
}
.main-visual .leadtxt {
display: flex;
flex-direction: column;
align-items: flex-start;
position: absolute;
left: 153px;
bottom: clamp(72px, 10vw, 130px);
z-index: 1;
color: #fff;
text-shadow: 0 3px 18px rgba(0, 0, 0, 0.34);
}
.main-visual .ltxt {
opacity: 0;
width: auto;
flex: none;
padding: 0;
background: transparent;
line-height: 1.35;
letter-spacing: 0;
}
.main-visual .ltxt:first-of-type {
margin-bottom: 14px;
font-size: clamp(2rem, 2.2vw, 2.8rem);
font-weight: 500;
}
.main-visual .ltxt:nth-of-type(2) {
font-size: clamp(4.6rem, 7vw, 8.8rem);
font-weight: 500;
}
.main-visual .ltxt.-show { opacity: 1; }
.main-visual .by {
font-size: 2rem;
line-height: 1;
color: #fff;
margin-top: 30px;
transition: opacity 0.6s;
opacity: 0;
}
.main-visual .by.-show { opacity: 1; }
/* Scroll indicator */
.top-mv__scroll {
position: absolute;
left: 47px;
bottom: 0;
height: 150px;
font-family: "Lato", sans-serif;
font-size: 1.4rem;
color: #fff;
writing-mode: vertical-rl;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
letter-spacing: 0.12em;
z-index: 1;
}
.top-mv__scroll:hover { text-decoration: none; }
.top-mv__scroll-bar {
position: relative;
display: block;
width: 1px;
height: 80px;
background-color: rgba(255,255,255,0.3);
overflow: hidden;
}
.top-mv__scroll-bar::before {
content: "";
display: block;
position: absolute;
left: 0; top: 0;
width: 1px;
height: 80px;
background-color: #009be7;
z-index: 2;
animation: scrollAnim 2.4s infinite normal;
}
@keyframes scrollAnim {
0% { transform: translate3d(0, -100%, 0); }
15% { transform: translate3d(0, -98%, 0); }
85% { transform: translate3d(0, 98%, 0); }
100% { transform: translate3d(0, 100%, 0); }
}
/* ==========================================================
CONTENTS BLOCK
========================================================== */
.contents-block {
padding: clamp(53px, 13.3vw, 100px) 25px;
}
.contents-block.-nopd { padding: 0; }
.contents-block.-bglgray { background-color: #F4F4F4; }
.request-contents-block { background-color: #f2f1e9; }
.contents-block > .contentsinner {
width: 100%;
max-width: 1000px;
margin: auto;
}
.contents-block > .contentsinner.-formcontents { max-width: 800px; }
/* ==========================================================
BLOCK TITLE (section heading)
========================================================== */
.block-ttl {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
font-size: 5rem;
line-height: 1;
}
.block-ttl > .sub {
font-family: "Lato", sans-serif;
font-size: 2rem;
font-weight: bold;
color: #009be7;
letter-spacing: 0.04em;
margin-top: 20px;
}
.block-ttl.-small { font-size: clamp(3rem, 5.3vw, 4rem); }
.block-ttl.-small > .sub { font-size: 1.6rem; }
.block-ttl.-w { color: #fff; }
.block-ttl.-center { text-align: center; align-items: center; }
.block-ttl.-pagettl {
align-items: center;
margin-bottom: 0;
}
.block-ttl.-pagettl > .sub { letter-spacing: 0.08em; }
/* ==========================================================
HOME — sec-homeconcept
========================================================== */
.sec-homeconcept {
position: relative;
padding: clamp(60px, 10vw, 100px) 0;
}
.sec-homeconcept > .secttl {
font-family: "Lato", sans-serif;
font-size: clamp(3.6rem, 6vw, 5rem);
line-height: 1.3;
letter-spacing: 0.02em;
margin-bottom: clamp(30px, 5vw, 50px);
}
.sec-homeconcept > .secinner {
display: flex;
gap: clamp(30px, 5vw, 80px);
align-items: flex-start;
}
.sec-homeconcept .leadtxt {
flex: 0 0 auto;
font-size: clamp(2rem, 3.2vw, 2.8rem);
line-height: 2;
letter-spacing: 0.08em;
}
.sec-homeconcept .rightblock { flex: 1; }
.sec-homeconcept .rightblock .txt {
margin-bottom: 20px;
line-height: 2;
}
/* ==========================================================
HOME — sec-homeabout (ABOUT section with POINTs)
========================================================== */
.sec-homeabout {
position: relative;
margin-top: clamp(30px, 4vw, 58px);
padding: clamp(48px, 7vw, 82px) 0;
overflow: hidden;
margin-bottom: 50px;
}
.sec-homeabout > .secinner {
position: relative;
z-index: 1;
width: 100%;
max-width: 1040px;
margin: auto;
padding: 0 25px;
}
.home-about-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.home-about-bg::after {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.68);
}
.home-about-bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
opacity: 0;
transform: scale(1.02);
transition: opacity 0.45s ease, transform 1.2s ease;
}
.home-about-bg img.is-active {
opacity: 1;
transform: scale(1);
}
.home-about-bg img:nth-child(1) { object-position: center top; }
.home-about-bg img:nth-child(2) { object-position: center center; }
.home-about-bg img:nth-child(3) { object-position: center center; }
.sec-homeabout .seccontents {
display: grid;
grid-template-columns: minmax(0, 560px) minmax(250px, 310px);
gap: clamp(28px, 6vw, 90px);
align-items: flex-start;
justify-content: center;
}
.sec-homeabout .txtarea {
width: 100%;
max-width: 560px;
}
.sec-homeabout .txtarea .leadtxt {
font-size: clamp(2rem, 3vw, 2.6rem);
font-weight: 700;
margin-top: 40px;
}
.sec-homeabout .txtarea .leadtxt:first-child { margin-top: 0; }
.sec-homeabout .txtarea .txt { line-height: 2; }
/* home-aboutnav (POINT 01/02/03 navigation) */
.home-aboutnav {
width: min(310px, 100%);
margin-top: 6px;
}
.home-aboutnav .ul {
display: flex;
flex-direction: column;
gap: 10px;
}
.home-aboutnav .link {
display: flex;
align-items: center;
min-height: 72px;
padding: 16px 18px;
border: 1px solid rgba(0, 155, 231, 0.22);
background: rgba(255, 255, 255, 0.78);
text-decoration: none;
color: #333;
font-size: 1.6rem;
font-weight: 700;
box-shadow: 0 12px 30px rgba(26, 50, 62, 0.08);
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}
.home-aboutnav .link:hover {
border-color: rgba(0, 155, 231, 0.58);
background-color: rgba(255, 255, 255, 0.96);
text-decoration: none;
transform: translateX(4px);
}
.home-aboutnav .point {
display: flex;
flex-direction: column;
align-items: center;
font-family: "Lato", sans-serif;
font-size: 1.2rem;
font-weight: 700;
color: #009be7;
margin-right: 14px;
line-height: 1;
min-width: 52px;
}
.home-aboutnav .point .num {
font-size: 2rem;
margin-top: 2px;
}
/* ==========================================================
HOME — sec-homemodel (MODEL HOUSE & CONSULTATION)
========================================================== */
.sec-homemodel {
overflow: hidden;
padding: clamp(34px, 5vw, 54px) clamp(22px, 5vw, 48px) clamp(38px, 6vw, 64px);
background: #f8f7ef;
}
.sec-homemodel .contents-block {
padding: 0;
}
.sec-homemodel .contentsinner {
width: 100%;
max-width: 1160px;
margin-left: auto;
margin-right: auto;
}
.home-model-heading {
text-align: center;
font-size: clamp(2.2rem, 2.4vw, 3rem);
line-height: 1.4;
font-weight: 700;
}
.home-model-lead {
margin-top: 8px;
text-align: center;
font-size: 1.4rem;
line-height: 1.8;
}
.home-model-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px 20px;
margin-top: clamp(30px, 5vw, 50px);
width: 100%;
}
.home-model-card {
background: transparent;
min-width: 0;
}
.home-model-card .imgarea {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
overflow: hidden;
background: linear-gradient(155deg, #d4dde2 0%, #a8bcc5 60%, #8fadb7 100%);
text-decoration: none;
}
.home-model-card .imgarea img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.home-model-card:hover .imgarea img {
transform: scale(1.03);
}
.home-model-card .badge {
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: inline-flex;
align-items: center;
min-height: 26px;
padding: 0 12px;
background: #3a2922;
color: #fff;
font-size: 1.1rem;
font-weight: 700;
}
.home-model-card .btnarea {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 12px;
}
.home-model-btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 32px;
padding: 0 10px;
border-radius: 2px;
font-size: 1.2rem;
font-weight: 700;
white-space: nowrap;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.home-model-btn:hover {
text-decoration: none;
}
.home-model-btn.-detail {
background: #fff;
color: #333;
border: 1px solid #ddd8cc;
}
.home-model-btn.-detail:hover {
background: #3a2922;
border-color: #3a2922;
color: #fff;
}
.home-model-btn.-reserve {
background: #3a2922;
color: #fff;
}
.home-model-btn.-reserve:hover {
background: #594239;
}
.home-model-card .txtarea {
padding: 10px 0 0;
}
.home-model-card .ttl {
font-size: 1.8rem;
line-height: 1.4;
font-weight: 400;
overflow-wrap: anywhere;
}
/* ==========================================================
HOME — sec-homecase (CASE section)
========================================================== */
.sec-homecase {
overflow: hidden;
padding: clamp(60px, 10vw, 100px) 25px clamp(50px, 8vw, 80px);
}
.sec-homecase .contents-block.-nopd {
padding: 0;
}
.sec-homecase .contentsinner {
max-width: 1160px;
}
.sec-homecase .block-ttl.-center {
text-align: center;
align-items: center;
margin-bottom: clamp(30px, 5vw, 50px);
}
.cmn-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px 20px;
}
/* case-card */
.case-card {
position: relative;
}
.case-card .inner {
display: flex;
flex-direction: column-reverse;
text-decoration: none;
color: #333;
}
.case-card .inner:hover { text-decoration: none; }
.case-card .imgarea {
width: 100%;
height: auto;
aspect-ratio: auto;
overflow: hidden;
background: transparent;
}
.case-card .imgarea img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
transition: transform 0.3s;
}
.case-card .inner:hover .imgarea img { transform: scale(1.03); }
.case-card .txtarea {
padding: 14px 0 0;
}
.case-card .cardttl {
font-size: 1.45rem;
font-weight: 400;
line-height: 1.4;
margin-bottom: 4px;
}
.case-card .tag-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 6px;
}
.case-card .tag-list .list {
font-size: 1.2rem;
padding: 2px 10px;
border: 1px solid #ccc;
color: #666;
}
/* ==========================================================
HOME — sec-homevoice
========================================================== */
.sec-homevoice {
position: relative;
padding: clamp(60px, 10vw, 100px) 0;
background: linear-gradient(135deg, #c8a882 0%, #e2ccaa 50%, #8a6a4a 100%);
}
.sec-homevoice .block-ttl.-w {
color: #fff;
margin-bottom: clamp(30px, 5vw, 50px);
}
.sec-homevoice .journal-card {
color: #fff;
}
.sec-homevoice .journal-card .meta .tag {
border-color: rgba(255, 255, 255, 0.48);
color: rgba(255, 255, 255, 0.84);
}
.sec-homevoice .journal-card .txt {
color: rgba(255, 255, 255, 0.86);
}
/* ==========================================================
HOME — sec-homestaff
========================================================== */
.sec-homeblog {
padding: clamp(60px, 10vw, 100px) 25px;
background-color: #f6f7f8;
}
.sec-homeblog > .inner {
width: 100%;
max-width: 1160px;
margin: auto;
}
.sec-homeblog .home-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px 20px;
}
.sec-homeblog .archive-card {
min-width: 0;
}
.sec-homestaff {
padding: clamp(60px, 10vw, 100px) 25px;
background-color: #f6f7f8;
}
.sec-homestaff > .inner {
width: 100%;
max-width: 1160px;
margin: auto;
}
.sec-homestaff .staff-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px 20px;
}
.staff-card {
background-color: #fff;
padding: 28px 24px;
}
.staff-card .staff-thumb {
width: 88px;
height: 88px;
margin-bottom: 18px;
border-radius: 50%;
background: linear-gradient(155deg, #d4dde2 0%, #a8bcc5 60%, #8fadb7 100%);
overflow: hidden;
}
.staff-card .staff-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.staff-card .staff-role {
display: inline-flex;
margin-bottom: 12px;
font-family: "Lato", sans-serif;
font-size: 1.1rem;
letter-spacing: 0.14em;
color: #009be7;
}
.staff-card .staff-name {
font-family: "Lato", sans-serif;
font-size: 2rem;
line-height: 1.2;
margin-bottom: 10px;
}
.staff-card .staff-name-jp {
font-size: 1.3rem;
color: #777;
margin-bottom: 14px;
}
.staff-card .staff-txt {
font-size: 1.4rem;
line-height: 1.9;
color: #555;
}
/* ==========================================================
HOME — sec-homeinterview
========================================================== */
.sec-homeinterview {
padding: clamp(60px, 10vw, 100px) 25px;
}
.sec-homeinterview > .inner {
width: 100%;
max-width: 1160px;
margin: auto;
}
.journal-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px 20px;
}
.journal-card {
display: block;
color: #333;
text-decoration: none;
}
.journal-card:hover {
text-decoration: none;
opacity: 0.86;
}
.journal-card .imgarea {
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: linear-gradient(155deg, #d4dde2 0%, #a8bcc5 60%, #8fadb7 100%);
}
.journal-card .imgarea img {
width: 100%;
height: 100%;
object-fit: cover;
}
.journal-card .meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 14px 0 8px;
}
.journal-card .meta .tag {
font-size: 1.1rem;
padding: 2px 8px;
border: 1px solid #ccc;
color: #666;
}
.journal-card .ttl {
font-size: 1.9rem;
line-height: 1.5;
margin-bottom: 10px;
}
.journal-card .txt {
font-size: 1.4rem;
line-height: 1.9;
color: #555;
}
/* ==========================================================
HOME — sec-homenews (NEWS section)
========================================================== */
.sec-homenews .secinner { padding-bottom: 40px; }
.sec-homenews .block-ttl {
margin-bottom: clamp(20px, 3vw, 40px);
}
.homenewsul { width: 100%; }
.homenewsul > .list {
border-top: 1px solid #DFDFDF;
}
.homenewsul > .list:last-child {
border-bottom: 1px solid #DFDFDF;
}
.homenewsul .link {
display: flex;
align-items: baseline;
gap: 20px;
padding: 18px 0;
text-decoration: none;
color: #333;
}
.homenewsul .link:hover { text-decoration: none; color: #009be7; }
.homenewsul .date {
flex: 0 0 110px;
font-family: "Lato", sans-serif;
font-size: 1.4rem;
color: #888;
white-space: nowrap;
}
.homenewsul .linktxt {
font-size: 1.5rem;
}
/* ==========================================================
HOME — COMPANY
========================================================== */
.home-company {
padding-left: 20px;
padding-right: 20px;
}
.home-company__inner {
width: 100%;
max-width: 820px;
margin: 0 auto;
}
.home-company .block-ttl {
margin-bottom: clamp(30px, 5vw, 48px);
}
.home-company__body {
display: grid;
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
gap: clamp(30px, 5vw, 48px);
align-items: center;
}
.home-company__photo {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: linear-gradient(155deg, #d4dde2 0%, #a8bcc5 60%, #8fadb7 100%);
}
.home-company__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-company__name {
font-size: 1.8rem;
line-height: 1.5;
margin-bottom: 18px;
}
.home-company__list {
display: grid;
gap: 10px;
margin: 0;
}
.home-company__list > div {
display: grid;
grid-template-columns: 82px 1fr;
gap: 14px;
align-items: start;
padding-bottom: 10px;
border-bottom: 1px solid #dedede;
}
.home-company__list dt {
font-family: "Lato", sans-serif;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.08em;
color: #009be7;
}
.home-company__list dd {
margin: 0;
font-size: 1.3rem;
line-height: 1.7;
color: #444;
}
.home-company__buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 28px;
}
.home-company__button {
display: flex;
align-items: center;
justify-content: center;
min-height: 54px;
border: 1px solid #333;
color: #333;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.08em;
text-decoration: none;
transition: 0.3s;
}
.home-company__button:hover {
background-color: #e5e5e5;
border-color: #e5e5e5;
text-decoration: none;
}
/* ==========================================================
FOOTER CONTACT (CTA)
========================================================== */
.footer-contact {
padding: clamp(50px, 8vw, 80px) 25px;
text-align: center;
}
.footer-contact .inner {
width: 100%;
max-width: 800px;
margin: auto;
}
.footer-contact .ftcttl {
font-size: clamp(3rem, 5vw, 4rem);
margin-bottom: 20px;
}
.footer-contact .ftcttl .linktxt {
color: #333;
text-decoration: none;
}
.footer-contact .ftcttl .linktxt:hover { text-decoration: underline; }
.footer-contact .txt {
font-size: 1.5rem;
line-height: 2;
color: #555;
}
.footer-contact .txt .link { color: #009be7; }
/* ==========================================================
BUTTONS
========================================================== */
/* link-btn2: underline link button with arrow */
.link-btn2 { display: flex; justify-content: flex-start; }
.link-btn2.-center { justify-content: center; }
.link-btn2.-spcenter { justify-content: flex-start; }
.link-btn2 .linkbtn {
position: relative;
display: inline-flex;
align-items: center;
height: 46px;
font-size: 1.6rem;
line-height: 1;
border-bottom: 3px solid #333;
padding-right: 55px;
text-decoration: none;
color: #333;
}
.link-btn2 .linkbtn::before {
content: "";
position: absolute;
right: 2px;
top: 50%;
width: 10px;
height: 10px;
margin-top: -6px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: rotate(-45deg);
}
.link-btn2 .linkbtn::after {
content: "";
position: absolute;
right: 2px;
top: 50%;
margin-top: -1px;
width: 20px;
height: 2px;
background-color: #333;
}
.link-btn2 .linkbtn:hover { text-decoration: none; opacity: 0.7; }
/* round-btn: bordered button */
.round-btn { display: flex; justify-content: flex-start; }
.round-btn.-center { justify-content: center; }
.round-btn .linkbtn {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
min-width: 200px;
height: 56px;
padding: 0 48px 0 24px;
font-size: 1.5rem;
letter-spacing: 0.04em;
text-decoration: none;
transition: 0.3s;
border: 2px solid #333;
color: #333;
}
.round-btn .linkbtn::before {
content: "";
position: absolute;
right: 16px;
top: calc(50% - 5px);
width: 8px;
height: 8px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: rotate(-45deg);
}
.round-btn .linkbtn::after {
content: "";
position: absolute;
right: 16px;
top: calc(50% - 1px);
width: 18px;
height: 2px;
background-color: #333;
}
.round-btn .linkbtn:hover {
background-color: #e5e5e5;
border-color: #e5e5e5;
color: #333;
text-decoration: none;
}
/* yellow-linkbtn */
.yellow-linkbtn { display: flex; justify-content: center; }
.yellow-linkbtn .linkbtn {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 300px;
height: 70px;
font-size: 1.8rem;
font-weight: 700;
background-color: #e5e5e5;
color: #333;
text-decoration: none;
letter-spacing: 0.04em;
transition: 0.3s;
}
.yellow-linkbtn .linkbtn::before {
content: "";
position: absolute;
right: 20px;
top: calc(50% - 6px);
width: 10px;
height: 10px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: rotate(-45deg);
}
.yellow-linkbtn .linkbtn::after {
content: "";
position: absolute;
right: 20px;
top: calc(50% - 1px);
width: 20px;
height: 2px;
background-color: #333;
}
.yellow-linkbtn .linkbtn:hover {
background-color: #d8d8d8;
text-decoration: none;
}
.yellow-linkbtn .linkbtn[href*="contact"] {
background-color: #e5e5e5;
color: #333;
}
.yellow-linkbtn .linkbtn[href*="contact"]::before {
border-right-color: #333;
border-bottom-color: #333;
}
.yellow-linkbtn .linkbtn[href*="contact"]::after {
background-color: #333;
}
.yellow-linkbtn .linkbtn[href*="contact"]:hover {
background-color: #d8d8d8;
}
/* ==========================================================
SCROLL TOP
========================================================== */
.scroll-top {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 64px;
}
/* ==========================================================
FOOTER
========================================================== */
.main-footer {
position: relative;
background-color: #58606b;
color: #fff;
padding: 64px 20px 0;
}
.main-footer > .footerinner {
width: 100%;
max-width: 1160px;
margin: auto;
display: grid;
grid-template-columns: 265px 1fr;
gap: 20px;
align-items: center;
padding: 50px 0 60px;
}
.main-footer .ftlogo {
font-family: "Lato", sans-serif;
font-size: 3rem;
font-weight: 700;
color: #fff;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.main-footer .address {
font-size: 1.3rem;
color: rgba(255,255,255,0.75);
line-height: 1.8;
}
.main-footer .address a,
.main-footer .address a[href^="tel"],
.main-footer .address [x-apple-data-detectors] {
color: inherit !important;
-webkit-text-fill-color: currentColor !important;
text-decoration: none !important;
}
.main-footer > .scroll-top {
position: absolute;
left: 0; top: 0;
width: 100%;
height: 64px;
}
.footer-nav {
display: flex;
justify-content: flex-end;
}
.footer-nav > .ftul {
display: flex;
flex-direction: column;
gap: 8px;
margin-left: 40px;
}
.footer-nav > .ftul:first-child { margin-left: 0; }
.footer-nav .list { font-size: 1.4rem; }
.footer-nav .link {
position: relative;
color: #fff;
text-decoration: none;
}
.footer-nav .link::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 0; height: 1px;
background-color: #fff;
transition: width 0.3s;
}
.footer-nav .link:hover { text-decoration: none; }
.footer-nav .link:hover::after { width: 100%; }
.footer-nav .subul {
margin-top: 8px;
padding-left: 14px;
}
.footer-nav .subul .sublist { margin-bottom: 6px; }
.footer-nav .subul .link { font-size: 1.3rem; opacity: 0.7; }
.footer-btm {
border-top: 1px solid rgba(255,255,255,0.2);
padding: 16px 0 24px;
}
.footer-btm > .inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-btm .privacy {
font-size: 1.1rem;
color: rgba(255,255,255,0.6);
text-decoration: none;
}
.footer-btm .privacy:hover { color: #fff; text-decoration: none; }
.footer-btm .copy {
font-family: "Lato", sans-serif;
font-size: 1.2rem;
color: rgba(255,255,255,0.6);
}
/* ==========================================================
HAMBURGER MENU (SP)
========================================================== */
.hamburger-menu {
display: none;
position: fixed;
inset: 0;
background: #fff;
z-index: 9800;
overflow-y: auto;
padding: 120px 40px 48px;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hamburger-menu.is-open { display: flex; }
.hamburger-menu .hbmenu {
width: min(100%, 720px);
margin-bottom: 32px;
}
.hamburger-menu .link {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
border-bottom: 1px solid #eee;
font-size: clamp(2.2rem, 2.8vw, 3.2rem);
color: #333;
text-decoration: none;
letter-spacing: 0.08em;
overflow-wrap: anywhere;
}
.hamburger-menu .link.-en {
font-family: "Lato", sans-serif;
font-weight: 700;
}
.hamburger-menu .hamburger-social {
justify-content: center;
margin: 0 0 24px;
}
.hamburger-menu .btnmenu {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
padding-top: 20px;
}
.hamburger-menu .btnmenu .linkbtn {
display: flex;
align-items: center;
justify-content: center;
height: 56px;
min-width: 240px;
padding: 0 28px;
font-size: 1.5rem;
text-decoration: none;
}
.hamburger-menu .linkbtn.-estimate {
background-color: #e5e5e5;
color: #333;
font-weight: 700;
}
.hamburger-menu .linkbtn.-contact {
background-color: #58606b;
color: #fff;
}
/* ==========================================================
ARTICLE HEADER (sub-page title area)
========================================================== */
.article-header {
display: flex;
justify-content: center;
align-items: center;
height: 210px;
margin-top: 80px;
background: linear-gradient(155deg, #d4dde2 0%, #a8bcc5 60%, #8fadb7 100%);
}
.article-header > .block-ttl {
width: calc(100% - 40px);
max-width: 1160px;
margin: auto;
}
/* Breadcrumbs */
.bread-crumbs {
display: flex;
align-items: center;
padding: 0 25px;
height: 40px;
font-size: 1.2rem;
color: #888;
background-color: #F4F4F4;
}
.bread-crumbs .bclink {
color: #333;
text-decoration: none;
}
.bread-crumbs .bclink:hover { text-decoration: underline; }
.bread-crumbs .sep {
display: inline-block;
width: 5px; height: 5px;
border-top: 1px solid #888;
border-right: 1px solid #888;
transform: rotate(45deg);
margin: 0 10px;
}
/* ==========================================================
CONCEPT PAGE
========================================================== */
.concept-story {
background: #f4f4f4;
margin-top: 80px;
}
.concept-story-slide {
position: relative;
min-height: calc(100vh - 80px);
overflow: hidden;
}
.concept-story-slide.-photo {
display: flex;
align-items: center;
color: #fff;
}
.concept-story-slide.-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.18) 48%, rgba(0, 0, 0, 0.34) 100%);
pointer-events: none;
}
.concept-story-bg {
position: absolute;
inset: 0;
}
.concept-story-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.concept-story-copy,
.concept-story-inner {
position: relative;
z-index: 1;
width: calc(100% - 80px);
max-width: 1160px;
margin: 0 auto;
}
.concept-story-copy {
padding: clamp(70px, 9vw, 120px) 0;
text-shadow: 0 3px 18px rgba(0, 0, 0, 0.34);
}
.concept-story-kicker {
margin-bottom: 14px;
font-size: clamp(2rem, 2.2vw, 2.8rem);
line-height: 1.35;
font-weight: 500;
}
.concept-story-title {
margin-bottom: clamp(26px, 4vw, 48px);
font-size: clamp(3.7rem, 5.6vw, 7rem);
line-height: 1.18;
font-weight: 500;
}
.concept-story-text {
max-width: 620px;
font-size: clamp(1.5rem, 1.4vw, 1.8rem);
line-height: 2.2;
}
.concept-story-slide.-promise {
display: flex;
align-items: center;
padding: clamp(70px, 8vw, 120px) 0;
background: #f4f4f4;
}
.concept-story-slide.-promise .concept-story-title {
color: #333;
font-size: clamp(2.6rem, 3.2vw, 4rem);
}
.concept-promise-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.concept-promise-item {
display: flex;
flex-direction: column;
min-height: 360px;
padding: clamp(28px, 3vw, 42px);
background: #fff;
border-top: 6px solid #333;
}
.concept-promise-num {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 22px;
color: #777;
font-size: 1.6rem;
line-height: 1;
}
.concept-promise-num span {
color: #333;
font-size: clamp(3.4rem, 4vw, 5.4rem);
font-weight: 700;
}
.concept-promise-title {
margin-bottom: 18px;
font-size: clamp(1.4rem, 1.4vw, 1.82rem);
line-height: 1.55;
font-weight: 700;
}
.concept-promise-text {
font-size: 1.4rem;
line-height: 2;
}
.concept-case-cta {
padding-top: clamp(40px, 5vw, 60px);
padding-bottom: clamp(50px, 7vw, 80px);
}
.sec-concept-lead {
text-align: center;
font-size: 1.6rem;
line-height: 2.1;
max-width: 720px;
margin: 0 auto clamp(30px, 4vw, 60px);
}
.compare-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
margin-bottom: 40px;
}
.compare-card {
background-color: #F4F4F4;
padding: 32px 24px;
}
.compare-card.-roam { background-color: #ffeb00; }
.compare-ttl {
font-family: "Lato", sans-serif;
font-size: 2.4rem;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid rgba(0,0,0,0.12);
}
.compare-list { font-size: 1.4rem; line-height: 2; }
.compare-list li {
padding: 6px 0 6px 16px;
position: relative;
}
.compare-list li::before {
content: "";
position: absolute;
left: 0; top: 14px;
width: 6px; height: 6px;
border-radius: 50%;
background-color: currentColor;
opacity: 0.5;
}
/* Concept feature items */
.concept-feature-item {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
margin-bottom: clamp(40px, 5vw, 70px);
}
.concept-feature-item:nth-child(even) .cf-img { order: -1; }
.spec-feature-block {
padding-bottom: clamp(26px, 6.6vw, 50px);
}
.spec-feature-block .concept-feature-item:last-child {
margin-bottom: 0;
}
.spec-material-section {
padding-top: clamp(30px, 4vw, 50px);
}
.cf-img {
width: 100%;
height: 320px;
aspect-ratio: 4 / 3;
background: linear-gradient(145deg, #d4dde2 0%, #a8bcc5 60%, #8fadb7 100%);
overflow: hidden;
}
.cf-img.-diagram {
background: #fff;
border: 1px solid #eee;
}
.cf-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cf-img.-diagram img {
object-fit: contain;
padding: 24px;
box-sizing: border-box;
}
.cf-num {
font-family: "Lato", sans-serif;
font-size: 1.2rem;
font-weight: 700;
color: #009be7;
letter-spacing: 0.16em;
margin-bottom: 12px;
}
.cf-ttl {
font-size: clamp(2rem, 3vw, 3rem);
line-height: 1.4;
margin: 0 0 18px;
}
.cf-txt { font-size: 1.5rem; line-height: 2; color: #555; }
.cf-more-btn {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 116px;
height: 42px;
margin-top: 24px;
margin-left: auto;
border: 1px solid #333;
color: #333;
font-size: 1.2rem;
letter-spacing: 0.16em;
text-decoration: none;
transition: 0.3s;
}
.cf-more-btn:hover {
background: #e5e5e5;
border-color: #e5e5e5;
text-decoration: none;
}
.cf-txt-area {
display: flex;
flex-direction: column;
}
/* Thermal detail page */
.thermal-detail-head {
margin-bottom: clamp(36px, 5vw, 54px);
}
.thermal-detail-head.-sub {
margin-top: clamp(70px, 8vw, 110px);
}
.thermal-detail-kicker {
font-size: 1.3rem;
letter-spacing: 0.18em;
color: #009be7;
margin-bottom: 18px;
}
.thermal-detail-lead {
font-size: clamp(1.5rem, 2vw, 1.8rem);
line-height: 2;
color: #333;
margin-bottom: 14px;
}
.thermal-detail-title {
font-size: clamp(2.4rem, 4vw, 3.6rem);
line-height: 1.55;
font-weight: 400;
margin: 0;
}
.thermal-detail-section {
display: grid;
grid-template-columns: minmax(280px, 42%) 1fr;
gap: clamp(28px, 5vw, 58px);
align-items: center;
margin-top: clamp(32px, 5vw, 56px);
}
.thermal-detail-media {
background: #f4f4f4;
overflow: hidden;
aspect-ratio: 4 / 3;
}
.thermal-detail-media.-contain {
display: flex;
align-items: center;
justify-content: center;
min-height: 260px;
padding: 24px;
box-sizing: border-box;
background: #fff;
border: 1px solid #eee;
}
.thermal-detail-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.thermal-detail-media.-contain img {
width: auto;
max-width: 100%;
height: auto;
max-height: 280px;
object-fit: contain;
}
.thermal-detail-text,
.thermal-point-text {
font-size: 1.5rem;
line-height: 2;
color: #444;
margin: 0;
}
.thermal-point-grid {
display: grid;
grid-template-columns: 1fr minmax(220px, 0.7fr) 1fr;
gap: clamp(22px, 4vw, 42px);
align-items: center;
margin-top: clamp(34px, 5vw, 62px);
}
.thermal-point-grid--cellulose {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: stretch;
}
.thermal-point-card {
padding: clamp(24px, 4vw, 34px);
background: #f7f7f7;
}
.thermal-point-card.-accent {
background: #fff;
border: 1px solid #e5e5e5;
}
.thermal-point-title {
font-size: clamp(2rem, 2.6vw, 2.8rem);
line-height: 1.5;
font-weight: 400;
margin: 0 0 18px;
}
.thermal-point-card.-accent .thermal-point-title {
color: #009be7;
font-size: 1.8rem;
letter-spacing: 0.18em;
}
.thermal-point-figure {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
text-align: center;
overflow: hidden;
}
.thermal-point-figure img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: contain;
}
.thermal-point-list {
display: grid;
gap: 10px;
margin: 0;
padding-left: 1.4em;
font-size: 1.5rem;
line-height: 1.8;
color: #333;
}
/* ==========================================================
ABOUT (DESIGN) PAGE — Feature section
========================================================== */
.sec-feature {
padding: clamp(60px, 8vw, 100px) 25px;
}
.sec-feature > .secinner {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
counter-reset: ct;
width: 100%;
max-width: 1000px;
margin: auto;
}
.sec-feature .features {
padding: 24px;
counter-increment: ct;
}
.sec-feature .feature-figure {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.sec-feature .feature-figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sec-feature .fttl {
display: flex;
min-height: 82px;
font-size: 3rem;
line-height: 1.4;
counter-increment: ct;
margin-bottom: clamp(30px, 4vw, 45px);
}
.sec-feature .fttl::before {
display: flex;
justify-content: center;
align-items: flex-end;
content: "Point0" counter(ct);
flex: 0 0 60px;
height: 82px;
font-family: "Lato", sans-serif;
font-size: 1.6rem;
line-height: 1;
margin-right: 30px;
}
.sec-feature .fdesc { font-size: 1.4rem; line-height: 1.9; color: #555; }
/* Material cards */
.material-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
width: 100%;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.sec-feature > .secinner.material-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 760px;
counter-reset: none;
}
.material-card-grid--page {
margin-bottom: clamp(50px, 7vw, 80px);
}
.material-card {
display: flex;
flex-direction: column;
min-width: 0;
color: #333;
text-decoration: none;
transition: opacity 0.3s ease;
}
.material-card:hover {
text-decoration: none;
}
.material-card__figure {
width: 100%;
aspect-ratio: 4 / 3;
margin: 0;
overflow: hidden;
background: linear-gradient(155deg, #d4dde2 0%, #a8bcc5 60%, #8fadb7 100%);
}
.material-card__figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.material-card:hover .material-card__figure img {
transform: scale(1.04);
}
.material-card__body {
padding-top: 16px;
}
.material-card__label {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.12em;
color: #009be7;
margin-bottom: 8px;
}
.material-card__title {
font-size: 1.7rem;
line-height: 1.45;
margin: 0 0 8px;
}
.material-card__text {
font-size: 1.3rem;
line-height: 1.8;
color: #555;
}
.material-detail-item {
scroll-margin-top: 100px;
}
/* Material landing page */
.material-lp {
--material-green: #1f5f3d;
--material-blue: #009be7;
--material-border: #dfe5e1;
--material-paper: #fbfbfa;
width: min(1180px, calc(100% - 50px));
margin: clamp(34px, 5vw, 64px) auto clamp(70px, 9vw, 110px);
}
.material-hero-panel,
.material-section {
background: var(--material-paper);
border: 1px solid var(--material-border);
}
.material-hero-panel {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(410px, 0.92fr);
gap: clamp(28px, 4vw, 50px);
align-items: center;
padding: clamp(42px, 6vw, 70px) clamp(34px, 5vw, 58px) clamp(34px, 5vw, 54px);
}
.material-kicker {
color: var(--material-green);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0;
margin-bottom: clamp(28px, 4vw, 50px);
}
.material-lead {
font-size: clamp(1.5rem, 1.4vw, 1.8rem);
font-weight: 700;
line-height: 2;
margin-bottom: clamp(28px, 4vw, 46px);
}
.material-hero-title,
.material-main-title {
font-size: clamp(3.4rem, 4.2vw, 5.3rem);
line-height: 1.52;
font-weight: 500;
margin: 0;
}
.material-hero-title span {
color: var(--material-green);
}
.material-body-text {
font-size: 1.5rem;
line-height: 2.15;
margin-top: clamp(28px, 4vw, 50px);
}
.material-hero-img,
.material-fixed-img,
.material-side-img,
.material-diagram {
margin: 0;
overflow: hidden;
background: #e8ece8;
}
.material-hero-img {
width: 100%;
aspect-ratio: 1.08 / 1;
clip-path: ellipse(78% 58% at 79% 50%);
}
.material-hero-img img,
.material-fixed-img img,
.material-side-img img,
.material-diagram img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.material-icon-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(18px, 4vw, 64px);
margin-top: clamp(28px, 4vw, 54px);
}
.material-icon-row li {
display: flex;
align-items: center;
gap: 18px;
min-width: 0;
color: var(--material-green);
font-weight: 700;
line-height: 1.65;
}
.material-icon {
display: grid;
place-items: center;
flex: 0 0 72px;
width: 72px;
height: 72px;
border-radius: 50%;
background: #eef2ef;
color: var(--material-green);
font-family: "Lato", sans-serif;
font-size: 2rem;
font-weight: 700;
}
.material-section {
margin-top: 28px;
padding: clamp(44px, 6vw, 70px) clamp(34px, 5vw, 62px);
}
.material-section--green {
background: #f4f7f4;
}
.material-section-title {
position: relative;
text-align: center;
font-size: clamp(2.6rem, 3vw, 3.4rem);
font-weight: 500;
margin: 0 0 clamp(42px, 5vw, 62px);
}
.material-section-title::after {
content: "";
display: block;
width: 52px;
height: 1px;
margin: 18px auto 0;
background: #222;
}
.material-split,
.material-top-split,
.material-two-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(28px, 4.5vw, 54px);
align-items: center;
}
.material-text-card,
.material-point-card {
background: rgba(255, 255, 255, 0.86);
border: 1px solid rgba(223, 229, 225, 0.74);
padding: clamp(28px, 4vw, 46px);
}
.material-text-card h3 {
font-size: clamp(2rem, 2.1vw, 2.8rem);
font-weight: 500;
line-height: 1.7;
margin: 0 0 24px;
}
.material-text-card p,
.material-point-card li {
font-size: 1.5rem;
line-height: 2.05;
}
.material-text-card p + p {
margin-top: 22px;
}
.material-fixed-img {
aspect-ratio: 16 / 9;
}
.material-section--green .material-fixed-img img {
object-position: center;
}
.material-point-strip {
display: grid;
grid-template-columns: 120px repeat(4, minmax(0, 1fr));
align-items: center;
margin-top: clamp(34px, 5vw, 58px);
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(223, 229, 225, 0.7);
padding: 22px 18px;
}
.material-point-strip li {
min-height: 82px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 0 18px;
border-left: 1px solid var(--material-border);
color: var(--material-green);
font-weight: 700;
text-align: center;
line-height: 1.65;
}
.material-point-strip .material-point-label {
min-height: 0;
border-left: 0;
justify-self: center;
background: var(--material-green);
color: #fff;
padding: 8px 16px;
font-weight: 700;
letter-spacing: 0;
}
.material-line-icon {
display: grid;
place-items: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border: 1px solid rgba(31, 95, 61, 0.34);
border-radius: 50%;
font-family: "Lato", sans-serif;
font-size: 1.3rem;
}
.material-top-split {
grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
align-items: start;
}
.material-top-split .material-side-img {
align-self: flex-end;
}
.material-top-split .material-kicker {
color: var(--material-blue);
margin-bottom: 24px;
}
.material-main-title {
font-size: clamp(3.2rem, 4vw, 5.2rem);
}
.material-side-img {
aspect-ratio: 16 / 9;
}
.material-wide-text {
max-width: 780px;
}
.material-three-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
gap: 26px;
align-items: stretch;
margin-top: clamp(30px, 5vw, 58px);
}
.material-cellulose-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.material-three-grid > * {
min-height: 300px;
}
.material-diagram {
border: 1px solid var(--material-border);
padding: 20px;
background: #fff;
}
.material-diagram img {
object-fit: contain;
}
.material-point-heading {
color: var(--material-blue);
font-size: 2.4rem;
font-weight: 700;
letter-spacing: 0;
margin-bottom: 18px;
}
.material-point-card ul {
display: grid;
gap: 14px;
}
.material-point-card li {
position: relative;
padding-left: 28px;
}
.material-point-card li::before {
content: "";
position: absolute;
left: 0;
top: 0.78em;
width: 10px;
height: 10px;
border: 2px solid var(--material-blue);
border-radius: 50%;
}
.material-split--cellulose {
margin-top: 28px;
}
.material-section--cellulose .material-fixed-img {
aspect-ratio: 16 / 9;
}
.material-two-grid {
margin-top: clamp(30px, 5vw, 58px);
align-items: stretch;
}
.material-back-wrap {
display: flex;
justify-content: center;
margin-top: clamp(38px, 6vw, 70px);
}
.material-back-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 48px;
min-width: 210px;
min-height: 56px;
border: 1px solid #333;
color: #333;
font-size: 1.5rem;
letter-spacing: 0;
text-decoration: none;
transition: background-color 0.3s, color 0.3s;
}
.material-back-btn:hover {
background: #333;
color: #fff;
text-decoration: none;
}
/* Design series grid */
.design-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.design-card { text-align: center; }
.design-img {
width: 100%;
aspect-ratio: 1;
margin-bottom: 12px;
background: linear-gradient(140deg, #d4dde2, #a8bcc5 55%, #8fadb7);
overflow: hidden;
}
.design-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.design-name {
font-family: "Lato", sans-serif;
font-size: 2rem;
font-weight: 400;
margin: 0 0 4px;
}
.design-name-jp { font-size: 1.3rem; color: #888; }
/* Thermal section */
.thermal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3px;
}
.thermal-card {
background: #fff;
padding: 28px 24px;
text-align: center;
}
.thermal-grade {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px; height: 52px;
background-color: #ffeb00;
font-family: "Lato", sans-serif;
font-size: 2rem;
font-weight: 700;
border-radius: 50%;
margin-bottom: 12px;
}
.thermal-label { font-size: 1.8rem; margin-bottom: 8px; }
.thermal-spec { font-size: 1.3rem; color: #888; }
/* Concept flow */
.concept-flow-panel {
max-width: 860px;
margin: 0 auto;
padding: clamp(24px, 4vw, 42px);
background: #fff;
border: 1px solid #eee;
}
.concept-flow-panel img {
display: block;
width: 100%;
height: auto;
}
/* ==========================================================
WARRANTY (concept page)
========================================================== */
/* Intro */
.warranty-intro {
text-align: center;
max-width: 880px;
margin: 0 auto clamp(40px, 6vw, 70px);
}
.warranty-lead {
font-size: clamp(2.4rem, 3.4vw, 3.4rem);
line-height: 1.5;
margin-bottom: clamp(20px, 2.5vw, 30px);
letter-spacing: 0.02em;
}
.warranty-lead-desc {
font-size: 1.4rem;
line-height: 2;
color: #555;
}
/* Menu */
.warranty-menu {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.warranty-menu-btn {
position: relative;
display: flex;
align-items: center;
gap: 18px;
padding: 26px 50px 26px 28px;
background: #F4F4F4;
border: 1px solid #e5e5e5;
transition: background 0.3s, border-color 0.3s;
}
.warranty-menu-btn:hover {
background: #e5e5e5;
border-color: #e5e5e5;
text-decoration: none;
}
.warranty-menu-btn > .num {
font-size: 2.2rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
}
.warranty-menu-btn > .ttl {
font-size: 1.5rem;
line-height: 1.5;
flex: 1;
}
.warranty-menu-btn > .arrow {
position: absolute;
right: 24px;
top: 50%;
width: 10px; height: 10px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: translateY(-75%) rotate(45deg);
}
/* Chapter header */
.warranty-chapter {
text-align: center;
margin-bottom: clamp(40px, 6vw, 70px);
}
.warranty-chapter-tag {
font-size: 1.2rem;
letter-spacing: 0.18em;
color: #009be7;
font-weight: 700;
margin-bottom: 8px;
}
.warranty-chapter-jp {
font-size: 1.4rem;
color: #555;
margin-bottom: 18px;
position: relative;
display: inline-block;
padding: 0 22px;
}
.warranty-chapter-jp::before,
.warranty-chapter-jp::after {
content: "";
position: absolute;
top: 50%;
width: 14px;
height: 1px;
background: #888;
}
.warranty-chapter-jp::before { left: 0; }
.warranty-chapter-jp::after { right: 0; }
.warranty-chapter-ttl {
font-size: clamp(2.2rem, 3vw, 3rem);
line-height: 1.5;
margin-bottom: 12px;
}
.warranty-chapter-notice {
font-size: 1.2rem;
color: #888;
display: inline-block;
padding: 4px 14px;
border: 1px solid #ccc;
border-radius: 999px;
margin-top: 4px;
}
.warranty-direct-head {
margin-bottom: clamp(34px, 5vw, 56px);
}
.warranty-section-label {
font-family: "Lato", sans-serif;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.18em;
color: #009be7;
margin-bottom: 14px;
}
.warranty-direct-desc {
max-width: 680px;
margin: 0 auto 14px;
font-size: 1.4rem;
line-height: 1.9;
color: #555;
}
/* 60-year timeline */
.warranty-hero {
background: #fff;
padding: clamp(28px, 4vw, 48px);
margin-bottom: clamp(40px, 5vw, 70px);
}
.warranty-hero img {
display: block;
width: 100%;
height: auto;
}
.warranty-hero-timeline {
display: grid;
gap: 10px;
}
.wt-row {
display: grid;
grid-template-columns: 160px repeat(6, 1fr);
align-items: center;
gap: 0;
font-size: 1.3rem;
position: relative;
}
.wt-row-head .wt-cell {
text-align: right;
font-weight: 700;
font-size: 1.4rem;
color: #888;
border-right: 1px dashed #ccc;
padding: 4px 8px 4px 0;
}
.wt-row-head .wt-label {
font-size: 1.2rem;
color: #888;
text-align: right;
padding-right: 14px;
}
.wt-row > .wt-label {
font-size: 1.3rem;
color: #333;
text-align: right;
padding-right: 14px;
}
.wt-bar {
grid-column: calc(2 + var(--start)) / calc(2 + var(--end));
height: 36px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 700;
color: #fff;
letter-spacing: 0.04em;
}
.wt-bar-base { background: #b8c4cc; }
.wt-bar-initial { background: #58606b; }
.wt-bar-check { background: #009be7; }
.wt-bar-extend { background: #ffeb00; color: #333; }
.warranty-hero-note {
margin-top: clamp(20px, 3vw, 30px);
padding-top: clamp(20px, 3vw, 30px);
border-top: 1px solid #eee;
font-size: 1.2rem;
line-height: 1.8;
color: #888;
}
.warranty-hero-note p + p { margin-top: 6px; }
/* Feature (image + text) */
.warranty-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(30px, 4vw, 60px);
align-items: center;
margin-bottom: clamp(40px, 5vw, 70px);
}
.warranty-feature:nth-of-type(even) .wf-img { order: -1; }
.wf-img {
width: 100%;
height: 340px;
overflow: hidden;
background: linear-gradient(145deg, #d4dde2 0%, #a8bcc5 60%, #8fadb7 100%);
}
.wf-img img {
width: 100%; height: 100%;
object-fit: cover;
}
.wf-tag {
display: inline-block;
font-size: 1.2rem;
color: #009be7;
font-weight: 700;
letter-spacing: 0.08em;
border-bottom: 1px solid #009be7;
padding-bottom: 4px;
margin-bottom: 18px;
}
.wf-ttl {
font-size: clamp(2.2rem, 3vw, 3rem);
line-height: 1.4;
margin-bottom: 18px;
}
.wf-ttl > .sub-en {
font-size: 0.6em;
margin-left: 6px;
color: #555;
}
.wf-desc {
font-size: 1.4rem;
line-height: 2;
color: #555;
}
.wf-note {
margin-top: 14px;
font-size: 1.2rem;
line-height: 1.7;
color: #888;
}
.warranty-spec-list {
margin: 18px 0 14px;
display: grid;
gap: 10px;
}
.warranty-spec-list li {
display: flex;
align-items: center;
gap: 14px;
background: #F4F4F4;
padding: 14px 18px;
font-size: 1.5rem;
}
.warranty-spec-list li > .num {
width: 32px; height: 32px;
background: #ffeb00;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
font-weight: 700;
flex: 0 0 auto;
}
.warranty-spec-list li > .note {
font-size: 1.1rem;
color: #888;
margin-left: auto;
}
/* Warranty cards */
.warranty-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
}
.warranty-grid.-col3 {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.warranty-card {
background: #fff;
padding: 28px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.warranty-card-img {
width: calc(100% + 48px);
height: 200px;
margin: -28px -24px 24px;
overflow: hidden;
}
.warranty-card-img img {
width: 100%; height: 100%;
object-fit: cover;
}
.warranty-card-tag {
font-size: 1.2rem;
color: #009be7;
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 14px;
}
.warranty-grade {
display: inline-flex;
align-items: center;
justify-content: center;
width: 96px; height: 96px;
background-color: #ffeb00;
border-radius: 50%;
margin-bottom: 18px;
padding-top: 6px;
}
.warranty-grade > .num {
font-size: 3.4rem;
font-weight: 700;
line-height: 1;
}
.warranty-grade > .unit {
font-size: 1.3rem;
margin-left: 3px;
}
.warranty-label {
font-size: 1.8rem;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0,0,0,0.12);
width: 100%;
}
.warranty-desc {
font-size: 1.3rem;
line-height: 1.9;
color: #555;
text-align: left;
}
.warranty-note {
margin-top: 12px;
font-size: 1.1rem;
line-height: 1.7;
color: #888;
text-align: left;
width: 100%;
}
/* 5 promises list */
.warranty-promise-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.warranty-promise-item {
background: #fff;
padding: 32px 30px;
display: flex;
flex-direction: column;
border-top: 3px solid #009be7;
}
.warranty-promise-item:nth-child(3) {
grid-column: 1 / -1;
}
.wp-num {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.18em;
color: #009be7;
margin-bottom: 14px;
}
.wp-num-fig {
font-size: 2.4rem;
letter-spacing: 0.02em;
}
.wp-ttl {
font-size: clamp(1.8rem, 2.2vw, 2.2rem);
line-height: 1.5;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 155, 231, 0.28);
}
.wp-desc {
font-size: 1.4rem;
line-height: 1.9;
color: #555;
}
/* ==========================================================
CASE ARCHIVE (tax-nav + archive-list)
========================================================== */
.tax-nav .taxoul {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 50px;
}
.tax-nav .cat-item-all,
.tax-nav .cat-item {
border-left: 1px solid #58606b;
}
.tax-nav .cat-item:last-child {
border-right: 1px solid #58606b;
}
.tax-nav .taxoul {
border-top: 1px solid #58606b;
border-bottom: 1px solid #58606b;
}
.tax-nav .cat-item a,
.tax-nav .cat-item-all a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: clamp(1.4rem, 2vw, 1.6rem);
transition: 0.3s;
text-decoration: none;
color: #333;
}
.tax-nav .cat-item a:hover,
.tax-nav .cat-item-all a:hover {
background-color: #e5e5e5;
color: #333;
text-decoration: none;
}
.tax-nav .cat-item-all.current-cat a,
.tax-nav .cat-item.current-cat a {
background-color: #e5e5e5;
color: #333;
text-decoration: none;
}
.archive-list {
display: grid;
grid-template-columns: repeat(3, calc((100% - 40px) / 3));
grid-auto-rows: auto;
gap: 60px 20px;
justify-content: space-between;
}
.archive-card {
display: block;
text-decoration: none;
color: #333;
}
.archive-card:hover { text-decoration: none; }
.archive-card:hover .archive-img { opacity: 0.8; }
.archive-img {
width: 100%;
aspect-ratio: 3 / 2;
overflow: hidden;
background: linear-gradient(155deg, #d4dde2 0%, #a8bcc5 60%, #8fadb7 100%);
transition: opacity 0.3s;
}
.archive-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.case-archive-card .archive-img {
height: auto;
aspect-ratio: auto;
background: transparent;
}
.case-archive-card .archive-img img {
display: block;
height: auto;
object-fit: contain;
}
.archive-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 10px 0 4px;
}
.archive-tag {
font-size: 1.1rem;
padding: 2px 8px;
border: 1px solid #ccc;
color: #666;
}
.archive-ttl {
font-size: 1.45rem;
font-weight: 400;
margin: 0;
}
.case-detail {
padding-top: clamp(45px, 6vw, 72px);
}
.case-detail__article {
width: min(920px, 100%);
}
.case-detail__content {
width: 100%;
}
.case-detail-items {
display: grid;
gap: clamp(54px, 8vw, 96px);
}
.case-detail-item {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(32px, 6vw, 72px);
align-items: start;
}
.case-detail-item__figure {
width: 100%;
aspect-ratio: auto;
margin: 0;
overflow: visible;
background: transparent;
}
.case-detail-item__figure img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.case-detail-item__title {
margin: 0 0 clamp(16px, 2vw, 26px);
font-size: clamp(2.2rem, 2.8vw, 3.2rem);
font-weight: 700;
line-height: 1.5;
}
.case-detail-item__text {
font-size: 1.55rem;
line-height: 2.1;
color: #444;
}
.case-detail-item__text p + p {
margin-top: 16px;
}
.case-detail__content figure,
.case-detail__fallback-gallery figure {
width: 100%;
aspect-ratio: auto;
margin: clamp(34px, 6vw, 70px) 0;
overflow: visible;
background: transparent;
}
.case-detail__content figure img,
.case-detail__fallback-gallery figure img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
.case-detail__content figcaption {
margin-top: 12px;
font-size: 1.4rem;
line-height: 1.8;
color: #555;
}
.case-slider {
width: min(1120px, 100%);
margin: 0 auto;
outline: none;
}
.case-slider__viewport {
position: relative;
overflow: hidden;
background: #e8edf0;
}
.case-slider__track {
display: flex;
width: 100%;
transition: transform 0.45s ease;
}
.case-slider__slide {
flex: 0 0 100%;
width: 100%;
aspect-ratio: 16 / 9;
background: #e8edf0;
}
.case-slider__slide img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.case-slider__arrow {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 56px;
height: 56px;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 50%;
background: rgba(0, 0, 0, 0.38);
cursor: pointer;
transform: translateY(-50%);
transition: background-color 0.3s, border-color 0.3s;
}
.case-slider__arrow:hover {
background: rgba(0, 0, 0, 0.62);
border-color: #fff;
}
.case-slider__arrow::before {
content: "";
width: 14px;
height: 14px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
.case-slider__arrow--prev {
left: clamp(14px, 2vw, 26px);
}
.case-slider__arrow--prev::before {
transform: translateX(3px) rotate(-135deg);
}
.case-slider__arrow--next {
right: clamp(14px, 2vw, 26px);
}
.case-slider__arrow--next::before {
transform: translateX(-3px) rotate(45deg);
}
.case-slider__bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-top: 20px;
}
.case-slider__count {
font-size: 1.4rem;
letter-spacing: 0.08em;
color: #333;
}
.case-slider__dots {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.case-slider__dot {
width: 38px;
height: 3px;
border: 0;
background: #d2d9dd;
cursor: pointer;
transition: background-color 0.3s;
}
.case-slider__dot.is-active {
background: #009be7;
}
.case-detail__back {
display: flex;
justify-content: center;
margin-top: clamp(40px, 6vw, 68px);
}
.blog-tax-nav .cat-item-all,
.blog-tax-nav .cat-item {
border-color: #7f8c93;
}
.blog-tax-nav .taxoul {
border-color: #7f8c93;
}
.blog-tax-nav .cat-item a:hover,
.blog-tax-nav .cat-item-all a:hover,
.blog-tax-nav .cat-item-all.current-cat a,
.blog-tax-nav .cat-item.current-cat a {
background-color: #e8edf0;
color: #009be7;
}
.blog-card .archive-img {
background: #e8edf0;
}
.blog-card:hover .archive-img {
opacity: 0.86;
}
.blog-card .blog-date {
display: inline-flex;
margin: 14px 0 8px;
font-size: 1.2rem;
letter-spacing: 0.12em;
color: #009be7;
}
.blog-card .blog-excerpt {
margin-top: 12px;
font-size: 1.3rem;
line-height: 1.8;
color: #555;
}
.blog-detail {
padding-top: clamp(55px, 7vw, 88px);
}
.blog-detail-inner {
width: min(920px, 100%);
margin: 0 auto;
}
.blog-detail-head {
text-align: center;
margin-bottom: clamp(34px, 5vw, 56px);
}
.blog-detail-date {
display: inline-flex;
color: #009be7;
font-size: 1.3rem;
letter-spacing: 0.12em;
margin-bottom: 18px;
}
.blog-detail-title {
font-size: clamp(3.2rem, 4.2vw, 5.2rem);
font-weight: 400;
line-height: 1.45;
margin: 0;
}
.blog-detail-lead {
max-width: 720px;
margin: 24px auto 0;
font-size: 1.6rem;
line-height: 2;
color: #555;
}
.blog-detail-mainimg {
width: 100%;
aspect-ratio: 16 / 9;
margin: 0 0 clamp(44px, 6vw, 70px);
overflow: hidden;
background: #e8edf0;
}
.blog-detail-mainimg img,
.blog-detail-body figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-detail-body {
width: min(760px, 100%);
margin: 0 auto;
}
.blog-detail-body p {
font-size: 1.6rem;
line-height: 2.15;
color: #333;
}
.blog-detail-body p + p {
margin-top: 22px;
}
.blog-detail-body h2 {
position: relative;
font-size: clamp(2.4rem, 3vw, 3.2rem);
font-weight: 400;
line-height: 1.6;
margin: clamp(48px, 6vw, 70px) 0 24px;
padding-left: 18px;
}
.blog-detail-body h2::before {
content: "";
position: absolute;
left: 0;
top: 0.28em;
bottom: 0.32em;
width: 3px;
background: #009be7;
}
.blog-detail-body figure {
width: 100%;
aspect-ratio: 3 / 2;
margin: clamp(34px, 5vw, 52px) 0;
overflow: hidden;
background: #e8edf0;
}
/*
* CASE本文のGutenbergギャラリーは、外枠まで上の3:2指定を受けると
* 2枚目以降が外枠からあふれ、ページのスクロール範囲に含まれない。
* 外枠だけは内容に応じて伸ばし、登録した全画像を表示対象にする。
*/
.case-detail .blog-detail-body > .wp-block-gallery.has-nested-images {
height: auto;
min-height: 0;
aspect-ratio: auto;
overflow: visible;
background: transparent;
}
.blog-detail-nav {
display: flex;
justify-content: center;
margin-top: clamp(48px, 7vw, 78px);
}
.blog-detail-back {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
min-height: 56px;
border: 1px solid #7f8c93;
color: #333;
font-size: 1.3rem;
letter-spacing: 0.08em;
text-decoration: none;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.blog-detail-back:hover {
background: #e8edf0;
border-color: #009be7;
color: #009be7;
text-decoration: none;
}
/* ==========================================================
EVENT ARCHIVE
========================================================== */
.event-anchor-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: clamp(40px, 5vw, 60px);
}
.event-anchor-nav a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px 10px;
background: #F4F4F4;
border: 1px solid #e5e5e5;
font-size: 1.3rem;
text-align: center;
transition: 0.3s;
position: relative;
padding-bottom: 26px;
}
.event-anchor-nav a:hover {
background: #e5e5e5;
border-color: #e5e5e5;
text-decoration: none;
}
.event-anchor-nav a > .num {
font-size: 1.1rem;
letter-spacing: 0.18em;
color: #009be7;
font-weight: 700;
margin-bottom: 6px;
}
.event-anchor-nav a::after {
content: "";
position: absolute;
bottom: 12px; left: 50%;
width: 8px; height: 8px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: translateX(-50%) rotate(45deg);
}
.event-list {
display: grid;
gap: clamp(28px, 3.5vw, 50px);
margin-top: clamp(42px, 6vw, 72px);
}
.event-card {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(28px, 3.5vw, 50px);
background: #fff;
border: 1px solid #ececec;
align-items: stretch;
overflow: hidden;
}
.event-img-area {
position: relative;
width: 100%;
min-height: 0;
aspect-ratio: 3 / 2;
align-self: start;
overflow: hidden;
background: linear-gradient(155deg, #d4dde2 0%, #a8bcc5 60%, #8fadb7 100%);
text-decoration: none;
}
.event-img-area:hover { text-decoration: none; }
.event-img-area > img {
width: 100%; height: 100%;
object-fit: cover;
position: absolute; inset: 0;
}
.event-badge {
position: absolute;
top: 14px; left: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 14px;
background: #009be7;
color: #fff;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.event-badge.-soon { background: #009be7; color: #fff; }
.event-badge.-fewleft { background: #e74c3c; color: #fff; }
.event-badge.-end { background: #999; color: #fff; }
.event-body {
padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 36px);
display: flex;
flex-direction: column;
}
.event-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 14px;
}
.event-area {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
border: 1px solid #333;
font-size: 1.1rem;
letter-spacing: 0.04em;
}
.event-ttl {
font-size: clamp(2rem, 2.6vw, 2.6rem);
line-height: 1.5;
margin: 0 0 18px;
}
.event-info {
border-top: 1px solid #eee;
margin-bottom: 18px;
}
.event-info > li {
display: grid;
grid-template-columns: 80px 1fr;
gap: 14px;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid #eee;
font-size: 1.4rem;
line-height: 1.6;
}
.event-info > li > .label {
font-size: 1.2rem;
color: #888;
letter-spacing: 0.04em;
}
.event-desc {
font-size: 1.4rem;
line-height: 1.9;
color: #555;
margin-bottom: 18px;
}
.event-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.event-tag {
font-size: 1.1rem;
padding: 4px 10px;
background: #F4F4F4;
color: #555;
}
.event-btns {
display: flex;
gap: 10px;
margin-top: auto;
}
.event-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
height: 50px;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
transition: 0.3s;
}
.event-btn.-primary {
background: #e5e5e5;
color: #333;
}
.event-btn.-primary:hover { background: #d8d8d8; text-decoration: none; }
.event-btn.-secondary {
background: #fff;
color: #333;
border: 1px solid #333;
}
.event-btn.-secondary:hover { background: #333; color: #fff; text-decoration: none; }
.event-notice {
background: #F4F4F4;
padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 36px);
margin-top: clamp(40px, 5vw, 70px);
}
.event-notice-ttl {
font-size: 1.6rem;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 2px solid #ffeb00;
}
.event-notice-list {
font-size: 1.3rem;
line-height: 1.9;
color: #555;
}
.event-notice-list > li {
padding: 4px 0 4px 18px;
position: relative;
}
.event-notice-list > li::before {
content: "";
position: absolute;
left: 0; top: 14px;
width: 6px; height: 6px;
background: #888;
border-radius: 50%;
}
/* ==========================================================
SIMPLE LEAD PAGE
========================================================== */
.page-lead {
text-align: center;
line-height: 2;
color: #555;
}
.empty-state {
margin-top: clamp(36px, 5vw, 60px);
padding: clamp(34px, 5vw, 52px) clamp(22px, 4vw, 40px);
background: #f4f4f4;
text-align: center;
}
.empty-state .ttl {
font-size: clamp(1.8rem, 2.5vw, 2.4rem);
line-height: 1.5;
margin-bottom: 12px;
}
.empty-state .txt {
font-size: 1.4rem;
line-height: 1.9;
color: #666;
}
.page-highlight-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.page-highlight {
background-color: #f4f4f4;
padding: 30px 24px;
}
.page-highlight .num {
display: inline-flex;
margin-bottom: 14px;
font-family: "Lato", sans-serif;
font-size: 1.2rem;
letter-spacing: 0.12em;
color: #009be7;
}
.page-highlight .ttl {
font-size: 2.2rem;
line-height: 1.4;
margin-bottom: 12px;
}
.page-highlight .txt {
font-size: 1.4rem;
line-height: 1.9;
color: #555;
}
.modelhouse-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 20px;
}
.modelhouse-card {
background-color: #f4f4f4;
}
.modelhouse-card .imgarea {
width: 100%;
aspect-ratio: 16 / 9;
background: linear-gradient(155deg, #d4dde2 0%, #a8bcc5 60%, #8fadb7 100%);
}
.modelhouse-card .imgarea img {
width: 100%;
height: 100%;
object-fit: cover;
}
.modelhouse-card .txtarea {
padding: 24px;
}
.modelhouse-card .area {
display: inline-flex;
margin-bottom: 8px;
font-family: "Lato", sans-serif;
font-size: 1.2rem;
letter-spacing: 0.12em;
color: #009be7;
}
.modelhouse-card .ttl {
font-size: 2.2rem;
margin-bottom: 10px;
}
.modelhouse-card .txt {
font-size: 1.4rem;
line-height: 1.9;
color: #555;
}
.modelhouse-detail-head {
width: min(900px, 100%);
margin: 0 auto clamp(28px, 4vw, 44px);
text-align: center;
}
.modelhouse-detail-area {
display: inline-flex;
margin-bottom: 10px;
color: #009be7;
font-size: 1.2rem;
letter-spacing: 0.12em;
}
.modelhouse-detail-title {
font-size: clamp(2.8rem, 4.5vw, 5rem);
line-height: 1.4;
}
.modelhouse-detail-figure {
width: min(1000px, 100%);
margin: 0 auto;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #e8edf0;
}
.modelhouse-detail-figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.modelhouse-detail-body {
width: min(900px, 100%);
}
/* ==========================================================
PRIVACY POLICY
========================================================== */
.policy-block {
display: grid;
gap: clamp(32px, 5vw, 50px);
}
.policy-section {
padding-bottom: clamp(28px, 4vw, 40px);
border-bottom: 1px solid #e5e5e5;
}
.policy-section:last-child { border-bottom: none; }
.policy-section .policy-ttl {
font-size: clamp(1.9rem, 2.5vw, 2.4rem);
line-height: 1.5;
margin-bottom: 16px;
}
.policy-section .policy-txt,
.policy-section .policy-list {
font-size: 1.45rem;
line-height: 2;
color: #555;
}
.policy-section .policy-list {
display: grid;
gap: 8px;
}
.policy-section .policy-list > li {
position: relative;
padding-left: 18px;
}
.policy-section .policy-list > li::before {
content: "";
position: absolute;
left: 0;
top: 1em;
width: 6px;
height: 6px;
background: #009be7;
border-radius: 50%;
}
.policy-contact {
padding: clamp(24px, 4vw, 34px);
background: #f4f4f4;
}
/* ==========================================================
CONTACT FORM
========================================================== */
.sec-form > .formttl {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #58606b;
margin-bottom: 40px;
}
.sec-form > .formttl .en {
font-family: "Lato", sans-serif;
font-size: 3.2rem;
}
.sec-form > .formttl .sub {
font-size: 1.4rem;
line-height: 1;
color: #333;
}
.modelhouse-reservation-form > .formttl {
color: #58606b;
}
.request-form > .formttl {
color: #333;
}
.request-form > .formttl .sub {
color: #009be7;
}
.form-status {
max-width: 760px;
margin: -10px auto 38px;
padding: 16px 20px;
border: 1px solid #cbd4cf;
background: #f3f6f4;
color: #33443b;
font-size: 1.4rem;
line-height: 1.8;
text-align: center;
}
.form-status.-error {
border-color: #dfc8c8;
background: #f8f0f0;
color: #6c3333;
}
.sec-form > .formblock {
display: grid;
grid-template-columns: 30% 70%;
}
.sec-form .inputarea,
.sec-form .namearea {
padding: 50px 0;
border-bottom: 1px solid #DFDFDF;
}
.sec-form .inputarea.-last,
.sec-form .namearea.-last { border-bottom: none; }
.sec-form .namearea {
display: flex;
justify-content: space-between;
line-height: 24px;
padding-top: 65px;
padding-bottom: 0;
padding-right: 10%;
}
.sec-form .namearea.-nes::after {
content: "必須";
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 24px;
font-size: 1.1rem;
line-height: 1;
background-color: #58606b;
color: #fff;
}
.sec-form input[type=text],
.sec-form input[type=email],
.sec-form input[type=tel] {
width: 100%;
height: 50px;
padding: 0 15px;
background-color: #f8f7ef;
font-size: 1.5rem;
color: #333;
}
.sec-form select {
width: 100%;
height: 50px;
padding: 0 15px;
background: #f8f7ef url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M6 8L0 0h12z' fill='%23333'/%3E%3C/svg%3E") right 10px center no-repeat;
background-size: 12px auto;
color: #333;
font-size: 1.5rem;
}
.sec-form textarea {
background-color: #f8f7ef;
width: 100%;
padding: 20px;
font-size: 1.5rem;
resize: vertical;
}
.reservation-slot-picker {
display: grid;
gap: 16px;
}
.reservation-slot-display {
cursor: pointer;
}
.reservation-calendar {
width: min(430px, 100%);
padding: 18px;
border: 1px solid #dedbd0;
background: #fff;
}
.reservation-calendar-nav {
display: grid;
grid-template-columns: 40px 1fr 40px;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.reservation-calendar-month {
text-align: center;
font-size: 1.6rem;
}
.reservation-calendar-prev,
.reservation-calendar-next {
width: 40px;
height: 36px;
border: 1px solid #d8d5ca;
background: #f8f7ef;
color: #333;
cursor: pointer;
}
.reservation-calendar-prev:disabled,
.reservation-calendar-next:disabled {
opacity: 0.35;
cursor: default;
}
.reservation-calendar-weekdays,
.reservation-calendar-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
}
.reservation-calendar-weekdays {
margin-bottom: 6px;
color: #777;
font-size: 1.1rem;
text-align: center;
}
.reservation-calendar-day {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
border: 1px solid transparent;
background: transparent;
color: #bbb;
font-size: 1.3rem;
}
button.reservation-calendar-day {
border-color: #d8d5ca;
background: #f8f7ef;
color: #333;
cursor: pointer;
}
button.reservation-calendar-day:hover,
button.reservation-calendar-day.is-selected {
border-color: #009be7;
background: #009be7;
color: #fff;
}
.reservation-slot-time-wrap {
width: min(430px, 100%);
}
.reservation-slot-time-wrap label {
display: grid;
grid-template-columns: 64px 1fr;
align-items: center;
gap: 12px;
}
.reservation-slot-clear {
margin-top: 10px;
padding: 5px 0;
border: 0;
border-bottom: 1px solid #777;
background: transparent;
color: #555;
font-size: 1.2rem;
cursor: pointer;
}
.reservation-slot-note {
margin-top: 8px;
color: #777;
font-size: 1.2rem;
line-height: 1.7;
}
.reservation-slot-note.-unavailable {
padding: 14px 16px;
border: 1px solid #dfc8c8;
background: #f8f0f0;
color: #6c3333;
}
.sec-form .ppcheckbox {
width: 100%;
max-width: 500px;
margin: auto;
padding: 20px;
background-color: #F4F4F4;
text-align: center;
}
.sec-form .submit-btn {
display: flex;
justify-content: center;
margin-top: 40px;
}
.sec-form .submit-btn button {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 70px;
background-color: #e5e5e5;
color: #333;
font-size: 1.8rem;
font-weight: 700;
cursor: pointer;
transition: 0.3s;
border: none;
}
.sec-form .submit-btn button:hover { background-color: #d8d8d8; }
.sec-form .submit-btn button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* ==========================================================
sec-relatedsec (Related section / CTA bottom)
========================================================== */
.sec-relatedsec {
background-color: #e8edf0;
padding: 0 20px;
padding-top: clamp(93px, 13.5vw, 140px);
padding-bottom: clamp(100px, 13.5vw, 150px);
}
.sec-relatedsec > .secinner {
width: 100%;
max-width: 1000px;
margin: auto;
text-align: center;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media (max-width: 1180px) {
.main-header { padding-left: 20px; }
.main-header .logo {
flex-basis: 130px;
margin-right: 10px;
}
.header-social {
display: flex;
gap: 6px;
margin-right: 10px;
}
.header-social .sociallink {
width: 28px;
height: 28px;
}
.header-social .sociallink img {
width: 15px;
height: 15px;
}
.header-social .sociallink[aria-label="LINE"] img {
width: 21px;
height: 21px;
}
.menu-ul .link {
font-size: 1.1rem;
padding: 0 8px;
}
.menu-ul .link::after {
left: 8px;
right: 8px;
}
.eventbtn,
.estimatebtn {
padding-left: 10px;
padding-right: 10px;
font-size: 1.1rem;
}
.eventbtn::before {
width: 12px;
height: 12px;
margin-right: 6px;
}
}
@media (max-width: 1024px) {
.sec-feature > .secinner {
grid-template-columns: 1fr;
}
.cmn-list { grid-template-columns: repeat(2, 1fr); }
.journal-list { grid-template-columns: repeat(2, 1fr); }
.archive-list { grid-template-columns: repeat(2, 1fr); }
.design-grid { grid-template-columns: repeat(3, 1fr); }
.sec-homeblog .home-blog-grid { grid-template-columns: repeat(2, 1fr); }
.sec-homestaff .staff-grid { grid-template-columns: repeat(2, 1fr); }
.page-highlight-grid { grid-template-columns: 1fr; }
.compare-grid { grid-template-columns: 1fr; }
.warranty-grid { grid-template-columns: repeat(2, 1fr); }
.warranty-grid.-col3 { grid-template-columns: 1fr; }
.warranty-menu { grid-template-columns: 1fr; }
.warranty-feature { grid-template-columns: 1fr; }
.warranty-feature:nth-of-type(even) .wf-img { order: 0; }
.warranty-promise-list { grid-template-columns: 1fr; }
.warranty-promise-item:nth-child(5) { grid-column: auto; }
.event-anchor-nav { grid-template-columns: repeat(2, 1fr); }
.event-card { grid-template-columns: 1fr; }
.event-img-area { min-height: 0; }
.concept-feature-item { grid-template-columns: 1fr; }
.concept-feature-item:nth-child(even) .cf-img { order: 0; }
.concept-promise-list { grid-template-columns: 1fr; }
.material-card-grid,
.sec-feature > .secinner.material-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.material-hero-panel,
.material-top-split,
.material-split,
.material-two-grid {
grid-template-columns: 1fr;
}
.material-hero-img {
max-width: 680px;
aspect-ratio: 16 / 10;
clip-path: none;
}
.material-icon-row,
.material-point-strip,
.material-three-grid {
grid-template-columns: 1fr 1fr;
}
.material-point-strip .material-point-label {
grid-column: 1 / -1;
}
.sec-homeabout .seccontents {
grid-template-columns: 1fr;
justify-content: stretch;
}
.home-aboutnav { width: 100%; }
.modelhouse-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.container-block {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
html { --anchor-scroll-offset: 80px; }
._w960_sidep,
._w1160_sidep {
width: calc(100% - (var(--sp-page-gutter) * 2));
}
.container-block > .main-header { height: 64px !important; }
.main-header { padding-left: 16px; padding-right: 0; }
.main-header > .headerinner { justify-content: flex-start; }
.main-header .logo { flex: 0 1 auto; height: 36px; margin-right: 10px; min-width: 0; }
.main-header .logotxt { font-size: 2.1rem; }
.header-social { display: flex; gap: 6px; margin: 0; }
.header-social .sociallink { width: 26px; height: 26px; }
.header-social .sociallink img { width: 14px; height: 14px; }
.header-social .sociallink[aria-label="LINE"] img { width: 20px; height: 20px; }
.header-menu { display: none; }
.main-header .menubtn-area { display: flex; margin-left: auto; }
.menubtnlabel { display: flex; }
.hamburger-menu {
padding: 88px 22px 40px;
justify-content: flex-start;
align-items: stretch;
}
.hamburger-menu .hbmenu {
width: 100%;
margin-bottom: 20px;
}
.hamburger-menu .link {
justify-content: flex-start;
font-size: 1.6rem;
}
.hamburger-menu .hamburger-social {
justify-content: flex-start;
margin-bottom: 20px;
}
.hamburger-menu .btnmenu {
flex-direction: column;
justify-content: flex-start;
}
.hamburger-menu .btnmenu .linkbtn {
min-width: 0;
width: 100%;
height: 54px;
padding: 0 16px;
font-size: 1.6rem;
}
.main-visual .leadtxt {
left: 66px;
bottom: 78px;
}
.main-visual .ltxt {
height: auto;
padding: 0;
background: none;
line-height: 1.5;
color: #fff;
}
.main-visual .ltxt:first-of-type {
margin-bottom: 8px;
font-size: 1.8rem;
}
.main-visual .ltxt:nth-of-type(2) {
font-size: clamp(3.8rem, 12vw, 5.2rem);
line-height: 1.25;
}
.top-mv__scroll {
display: flex;
left: 32px;
}
.contents-block {
padding-left: var(--sp-page-gutter);
padding-right: var(--sp-page-gutter);
}
.contents-block.-nopd {
padding-left: var(--sp-page-gutter);
padding-right: var(--sp-page-gutter);
}
.article-header > .block-ttl {
width: calc(100% - (var(--sp-page-gutter) * 2));
}
.bread-crumbs {
padding-left: var(--sp-page-gutter);
padding-right: var(--sp-page-gutter);
}
.concept-story-slide { min-height: auto; }
.concept-story { margin-top: 64px; }
.concept-story-copy,
.concept-story-inner {
width: calc(100% - (var(--sp-page-gutter) * 2));
}
.concept-story-copy {
padding: 86px 0 72px;
}
.concept-story-title {
font-size: 3.2rem;
}
.concept-story-text {
font-size: 1.4rem;
line-height: 2;
}
.concept-story-slide.-promise {
padding: 60px 0;
}
.concept-promise-item {
min-height: 0;
}
.sec-homeconcept > .secinner { flex-direction: column; }
.sec-homemodel {
padding: 34px 0 44px;
width: 100%;
overflow: hidden;
}
.sec-homemodel .contents-block {
padding-left: 0;
padding-right: 0;
}
.sec-homemodel .contentsinner,
.home-model-list,
.home-model-card,
.home-model-card .imgarea,
.home-model-card .btnarea {
max-width: 100%;
min-width: 0;
}
.sec-homemodel .contentsinner {
width: calc(100% - (var(--sp-page-gutter) * 2));
}
.home-model-list,
.home-model-card,
.home-model-card .imgarea,
.home-model-card .btnarea {
width: 100%;
}
.home-model-heading {
font-size: 2.4rem;
overflow-wrap: anywhere;
}
.home-model-lead {
max-width: 24em;
margin-left: auto;
margin-right: auto;
font-size: 1.3rem;
overflow-wrap: anywhere;
}
.home-model-card .btnarea {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
margin-top: 10px;
}
.home-model-btn {
min-height: 34px;
padding: 0 8px;
font-size: 1.2rem;
}
.sec-homeabout > .secinner {
padding-left: var(--sp-page-gutter);
padding-right: var(--sp-page-gutter);
}
.cmn-list,
.home-model-list { grid-template-columns: 1fr; }
.journal-list { grid-template-columns: 1fr; }
.archive-list { grid-template-columns: 1fr; }
.design-grid { grid-template-columns: repeat(2, 1fr); }
.sec-homeblog .home-blog-grid { grid-template-columns: 1fr; }
.sec-homestaff .staff-grid { grid-template-columns: 1fr; }
.sec-homecase,
.sec-homeblog,
.sec-homestaff,
.sec-homeinterview,
.sec-feature,
.sec-relatedsec,
.home-company {
padding-left: var(--sp-page-gutter);
padding-right: var(--sp-page-gutter);
}
.sec-homecase .contents-block.-nopd {
padding-left: 0;
padding-right: 0;
}
.thermal-grid { grid-template-columns: 1fr; }
.warranty-grid { grid-template-columns: 1fr; }
.wt-row {
grid-template-columns: 90px repeat(6, 1fr);
font-size: 1.1rem;
}
.wt-row > .wt-label,
.wt-row-head .wt-label { font-size: 1.1rem; padding-right: 8px; }
.wt-bar { font-size: 1rem; height: 30px; }
.wf-img { height: 240px; }
.eventbtn { display: none; }
.event-anchor-nav { grid-template-columns: 1fr; }
.event-info > li { grid-template-columns: 70px 1fr; gap: 10px; }
.event-btns { flex-direction: column; }
.event-btn {
flex: 0 0 50px;
height: 50px;
min-height: 50px;
font-size: 1.5rem;
}
.event-img-area { min-height: 0; }
.thermal-detail-section,
.thermal-point-grid {
grid-template-columns: 1fr;
}
.thermal-point-card { padding: 24px 20px; }
.tax-nav .taxoul {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 50px;
gap: 10px;
}
.tax-nav .cat-item-all,
.tax-nav .cat-item {
border: 1px solid #e5e5e5;
}
.tax-nav .cat-item:last-child { border-right: 1px solid #e5e5e5; }
.blog-tax-nav .taxoul {
border-color: #7f8c93;
}
.blog-tax-nav .cat-item-all,
.blog-tax-nav .cat-item,
.blog-tax-nav .cat-item:last-child {
border-color: #7f8c93;
}
.blog-detail {
padding-top: 42px;
}
.blog-detail-head {
text-align: left;
}
.blog-detail-title {
font-size: 2.9rem;
}
.blog-detail-lead,
.blog-detail-body p {
font-size: 1.45rem;
line-height: 2;
}
.blog-detail-mainimg,
.blog-detail-body figure {
aspect-ratio: 4 / 3;
}
.case-detail {
padding-top: 42px;
}
.case-detail-items {
gap: 52px;
}
.case-detail-item {
grid-template-columns: 1fr;
gap: 22px;
}
.case-detail-item__figure {
aspect-ratio: auto;
}
.case-detail-item__title {
margin-bottom: 12px;
font-size: 2.2rem;
}
.case-detail-item__text {
font-size: 1.45rem;
line-height: 2;
}
.case-slider__slide {
aspect-ratio: 4 / 3;
}
.case-slider__arrow {
width: 44px;
height: 44px;
}
.case-slider__bottom {
align-items: flex-start;
flex-direction: column;
gap: 14px;
}
.case-slider__dots {
width: 100%;
}
.case-slider__dot {
flex: 1;
min-width: 0;
}
.material-card-grid,
.sec-feature > .secinner.material-card-grid {
grid-template-columns: 1fr;
}
.material-card__figure { aspect-ratio: 4 / 3; }
.material-lp {
width: calc(100% - (var(--sp-page-gutter) * 2));
margin-top: 88px;
}
.material-hero-panel,
.material-section {
padding: 32px 20px;
}
.material-kicker {
font-size: 1.3rem;
margin-bottom: 22px;
}
.material-lead {
font-size: 1.4rem;
line-height: 1.9;
margin-bottom: 24px;
}
.material-hero-title,
.material-main-title {
font-size: 3rem;
line-height: 1.55;
}
.material-body-text {
font-size: 1.4rem;
line-height: 2;
}
.material-icon-row,
.material-point-strip,
.material-three-grid {
grid-template-columns: 1fr;
}
.material-icon-row {
gap: 14px;
margin-top: 26px;
}
.material-icon-row li {
align-items: center;
background: rgba(255, 255, 255, 0.78);
border: 1px solid var(--material-border);
padding: 14px;
}
.material-icon {
flex-basis: 56px;
width: 56px;
height: 56px;
font-size: 1.6rem;
}
.material-section-title {
font-size: 2.5rem;
margin-bottom: 30px;
}
.material-text-card,
.material-point-card {
padding: 24px 20px;
}
.material-text-card h3 {
font-size: 2rem;
}
.material-point-strip {
padding: 0;
}
.material-point-strip li {
justify-content: flex-start;
min-height: 68px;
border-left: 0;
border-top: 1px solid var(--material-border);
text-align: left;
}
.material-point-strip .material-point-label {
justify-self: stretch;
justify-content: center;
margin: 16px;
}
.material-three-grid > * {
min-height: 0;
}
.material-diagram {
aspect-ratio: 4 / 3;
}
.material-fixed-img,
.material-side-img,
.material-section--cellulose .material-fixed-img {
aspect-ratio: 4 / 3;
}
.home-company__body { grid-template-columns: 1fr; }
.home-company__photo {
max-width: 360px;
margin: 0 auto;
}
.home-company__buttons { grid-template-columns: 1fr; }
.main-footer > .footerinner {
grid-template-columns: 1fr;
justify-content: center;
padding-top: 20px;
}
.main-footer .ftlogo { text-align: center; }
.main-footer .address,
.main-footer .address a,
.main-footer .address a[href^="tel"],
.main-footer .address [x-apple-data-detectors] {
color: rgba(255, 255, 255, 0.75) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.75) !important;
}
.main-footer .address { text-align: center; }
.footer-nav { display: none; }
.footer-btm > .inner { flex-direction: column; gap: 10px; align-items: center; }
.article-header { height: 160px; margin-top: 70px; }
.bread-crumbs { display: none; }
.sec-form > .formblock { grid-template-columns: 1fr; }
.sec-form .namearea {
padding-top: 20px !important;
padding-right: 0;
border-bottom: none;
}
.sec-form .inputarea { padding: 10px 0 20px; }
.block-ttl { font-size: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
._fadeio, ._fadeil, ._fadeir, ._fadeiu {
transition: none;
opacity: 1;
transform: none;
}
.top-mv__scroll-bar::before { animation: none; }
}