@charset "utf-8"; /* CSS Document */ *, *::before, *::after { box-sizing: border-box; } html, body { scroll-behavior: smooth; text-spacing-trim: trim-both; } /* ========================================================= Opening: skip mode (2nd+ view in same tab) – flash prevention ========================================================= */ /* NOTE: html.opening-skip is set in before first paint */ /*html.opening-skip #loader{ display: none !important; opacity: 0 !important; visibility: hidden !important; transition: none !important; } /* 2回目以降：openingは“背景”として即有効化（白フラッシュ防止） */ /*html.opening-skip #opening{ opacity: 1 !important; visibility: visible !important; background: transparent !important; transition: none !important; /*pointer-events: none !important;*/ /* z-index: 0 !important; } /* 背景画像(main)を最初から出す（is-bg を待たない） */ /*html.opening-skip #opening .opening-full.is-main{ opacity: 1 !important; transform: none !important; } /* ========================================================= Typography / body ========================================================= */ @font-face { font-family: "TsukuB"; src: url("../fonts/TsukuB.woff2") format("woff2")/*, url("../fonts/TsukuB.woff") format("woff")*/; font-style: normal; font-display: swap; } :root{ --col_text:#251e1c; --col_gre:#abb314;/*緑*/ --col_gre_10:#abb3141a; --col_gre_60:#abb31499; --col_ora:#f5ac3c;/*橙*/ --col_ora_10:#f5ac3c1a; --col_ora_60:#f5ac3c99; --col_red:#e95550;/*赤*/ --col_red_10:#e955501a; --col_red_60:#e9555099; --col_blu:#6c9bd2;/*青*/ --col_blu_10:#6c9bd21a; --col_blu_60:#6c9bd299; --col_bla:#333; --col_yel:#ffff00;/*黄*/ --col_yel_10:#ffff001a; --col_whi:#fff; --col_gra:#595757;/*灰*/ /* layout */ --app-maxw: clamp(450px, 40%, 600px); --news-h: 5rem; --nav-h: 3rem; /*茶枠*/ --app-frame-col: #7D5D53; --app-frame-wid: 25px; --app-frame-wid_sp: 15px; } body{ margin: 0; padding: 0; font-family: "Yu Gothic","YuGothic","游ゴシック","Yu Gothic Medium","Noto Serif JP",sans-serif; font-size: clamp(15px, 3.4vw, 17px); line-height: 1.7; color: var(--col_text); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } @media (max-width: 500px){ body{ font-size: 80%; } } a{ text-decoration: none; color: inherit; transition: opacity 0.2s ease-in-out; } a:hover, a:focus{ opacity: 0.7; } /* accessibility */ a:focus-visible, button:focus-visible{ outline: 2px solid #000; outline-offset: 3px; } ul, ol{ list-style: none; padding: 0; margin: 0; } img{ max-width: 100%; height: auto; display: block; } table{ border-collapse: collapse; width: 100%; } th, td{ padding: 0.5em; text-align: left; vertical-align: top; } input, textarea, select, button{ font: inherit; color: inherit; } button{ cursor: pointer; background: none; border: none; padding: 0; } h1, h2, h3, h4, h5, h6{ line-height: 1.3; } .t_center{ text-align: center; } .mt0{ margin-top: 0!important; } .mb0{ margin-bottom: 0!important; } .ml0{ margin-left: 0!important; } .mr0{ margin-right: 0!important; } .mt1{ margin-top: 1rem!important; } .mb1{ margin-bottom: 1rem!important; } .ml1{ margin-left: 1rem!important; } .mr1{ margin-right: 1rem!important; } .pt1{ padding-top: 1rem!important; } .pb1{ padding-bottom: 1rem!important; } .pl1{ padding-left: 1rem!important; } .pr1{ padding-right: 1rem!important; } /* ========================================================= Anchor offset (fixed nav) ========================================================= */ #top,#concept,#features,#model-home,#achievements,#voices,#affinityPoints,#message{ scroll-margin-top: var(--nav-h); } /* ========================================================= Arrow link parts ========================================================= */ .arrow_link{ position: relative; padding-right: 1.2em; color: #fff; } .arrow_link::after{ content:""; position:absolute; top:50%; right:2em; width:16px; height:16px; border-top:4px solid currentColor; border-right:4px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: transform 0.2s ease; } .arrow_link:hover::after{ transform: translate(4px, -50%) rotate(45deg); } .arrow_link_s{ position: relative; padding-right: 1em; color: #fff; } .arrow_link_s::after{ content:""; position:absolute; top:50%; right:1em; width:12px; height:12px; border-top:3px solid currentColor; border-right:3px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: transform 0.2s ease; } .arrow_link_s:hover::after{ transform: translate(3px, -50%) rotate(45deg); } /* ========================================================= Loader ========================================================= */ #loader{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; /* ローダーが出る時は白でOK。スキップ時は上で完全に消す */ display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease, visibility 0.5s ease; } #loader .logo{ width: 20vw; animation: fadein 1s ease; } #loader.hidden{ opacity: 0; visibility: hidden; } .logo{ font-weight: 600; font-size: 1.1rem; } @keyframes fadein{ from{ opacity: 0; } to{ opacity: 1; } } @media (max-width: 767px){ #loader .logo{ width: 60vw; } } /* ========================================================= オープニング ========================================================= */ /* オープニング中はスクロール禁止 */ body.is-opening{ overflow: hidden; height: 100svh; touch-action: none; } /*スクロールバーが出たときのズレ防止*/ html{ scrollbar-gutter: stable; } :root{ --sbw: 0px; /* scrollbar width */ } body.is-opening{ overflow: hidden; height: 100dvh; touch-action: none; padding-right: var(--sbw); } .bg-fixed, .app-wrap, .side-links, .side-links-m, .news-bar{ opacity: 1; transition: opacity .6s ease, transform .6s ease; } body.is-opening .bg-fixed, body.is-opening .app-wrap, body.is-opening .side-links, body.is-opening .side-links-m, body.is-opening .news-bar{ opacity: 0; transform: translateY(8px); pointer-events: none; } /* opening内のbg-fixed(ロゴ)は表示 */ body.is-opening #opening .bg-fixed{ opacity: 1; transform: none; pointer-events: none; } html.opening-done #opening .bg-fixed{ pointer-events: auto; } .opening{ position: fixed; inset: 0; background: #fff; z-index: 9000; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; } .opening.is-show{ opacity: 1; visibility: visible; } .opening .bg-fixed{ position: absolute; inset: 0; background: transparent; z-index: 10; } .opening .bg-text{ opacity: 0; } .bg-fixed h1{ position: relative; z-index: 20; display: inline-block; width: clamp(200px, 20vw, 280px); } .opening-layers{ position: absolute; inset: 0; } .opening-layer{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .6s ease, transform .6s ease; pointer-events: none; padding-bottom: var(--news-h); } @media (max-width: 1150px){ .opening-layer{ object-position: 35% center; } } .opening-layer.is-on{ opacity: 1; transform: translateY(0); } .opening-boy { z-index: 2; } .opening-line { z-index: 3; } .opening-mother { z-index: 4; } .opening-father { z-index: 4; } .opening-full { z-index: 5; } .opening-cat { z-index: 6; } @media (max-width: 767px){ .opening-boy { z-index: 4; } } .opening-skipfloor{ position: absolute; left: 50%; top: 60%; transform: translate(-50%, -40px); z-index: 15; opacity: 0; transition: opacity .8s ease, transform .8s ease; pointer-events: none; } .opening-skipfloor span{ display: block; text-align: center; font-family: "TsukuB", sans-serif; font-size: clamp(3rem, 8vw, 7rem); letter-spacing: 0.5em; padding-left: 0.5em; color: var(--col_gra); text-shadow: 0 4px 10px rgba(255,255,255,0.6); } .opening-skipfloor.is-on{ opacity: 1; transform: translate(-50%, 0); } .opening-skipfloor.is-off{ opacity: 0; transform: translate(-50%, 20px); transition: opacity .25s ease, transform .25s ease; } @media (min-width: 900px){ .opening-skipfloor span{ white-space: nowrap; } } .opening.is-bg{ background: transparent; z-index: 0; /*pointer-events: none;*/ pointer-events: auto; } /* ただし背景画像レイヤーはクリック不要なので無効のまま */ .opening.is-bg .opening-layers, .opening.is-bg .opening-layer{ pointer-events: none; } .opening.is-bg .opening-line, .opening.is-bg .opening-boy, .opening.is-bg .opening-mother, .opening.is-bg .opening-father, .opening.is-bg .opening-cat{ opacity: 0 !important; visibility: hidden; } /* Background switch (full 2 images) */ .opening.is-bg .opening-full{ opacity: 0 !important; transition: opacity .8s ease; will-change: opacity; backface-visibility: hidden; transform: translateZ(0); } .opening.is-bg .opening-full.is-main{ opacity: 1 !important; } .opening.is-bg .opening-full.is-scrolled{ opacity: 0 !important; } body.is-bg-scrolled .opening.is-bg .opening-full.is-scrolled{ opacity: 1 !important; } /* Final z-order */ .bg-fixed{ position: fixed; inset: 0; z-index: 1; } /* Opening中はbg-text隠す / 本編で表示 */ body.is-opening .bg-fixed .bg-text{ opacity: 0; transform: translateY(8px); } .bg-fixed .bg-text{ display: inline-block; opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; } .bg-fixed .bg-text p{ margin-top: 15vh; font-family: "TsukuB"; font-size: clamp(1rem, 2vw, 1.5rem); /*font-weight: 600;*/ transform: translateX(-3rem); color: #000; text-shadow: 1px 1px 3px rgba(255,255,255,0.8); } /* オープニング中はロゴリンクを無効化 */ body.is-opening #opening .opening-bg a{ pointer-events: none; } /* 終了後は触れる（念のため明示） */ html.opening-done #opening .opening-bg a{ pointer-events: auto; } /* 本文側の背景(bg-fixed)は全面固定で“透明でもクリックを吸う”ので、常にクリックを通す */ body > .bg-fixed{ pointer-events: none; } @media (min-width: 900px){ body > .bg-fixed.pc{ pointer-events: auto; } } /* ただし opening 内のロゴ用 bg-fixed はクリック制御したいので対象外（保険） */ #opening .bg-fixed{ pointer-events: auto; } /* ========================================================= Sections / layout ========================================================= */ .section{ background:#fff; padding: 2rem 10% 3rem; text-align: justify; } /* Background content */ .bg-fixed{ position: fixed; inset: 0; z-index: 1; padding: 5% 8%; } /* モデルハウス/お問い合わせ(PC) */ .side-links-m{ position: fixed; top: 10%; right: 0; /*z-index: 50;*/ z-index: 10; display: flex; align-items: center; justify-content: flex-end; min-width: 5em; min-height: 4em; background-color: #e95550; border-radius: 50% 0 0 50%; font-family: "TsukuB"; } .side-links-m a{ color: #fff; padding: 1.5em 1em 1.5em 1.5em; font-weight: 600; line-height: 1.4; letter-spacing: 0.3em; transition: padding 0.2s ease, transform 0.2s ease; } .side-links-m a:hover{ padding-right: 1.6em; transform: translateX(-0.2em); } .side-links{ position: fixed; right: 5vw; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1.5rem; /*z-index: 50;*/ z-index: 10; } .side-links a{ display:flex; align-items:center; justify-content:center; width: 5vw; height: 5vw; border-radius: 50%; border: 2px solid #f5ac3c; background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); transition: transform .2s; } .side-links a:hover{ transform: scale(1.1); } .side-links a svg{ width: 24px; height: 24px; fill: #f5ac3c; } /* ========================================================= メインコンテンツ ========================================================= */ .app-wrap{ min-height: 100vh; display: flex; justify-content: flex-end; justify-content: right; } .app{ position: relative; z-index: 10; isolation: isolate; width: 100%; max-width: var(--app-maxw); transition: transform .3s ease; } /*茶色枠*/ .app::before{ content:""; position: absolute; z-index: 9; inset: 0; pointer-events: none; box-sizing: border-box; border-left: var(--app-frame-wid) solid var(--app-frame-col); border-right: var(--app-frame-wid) solid var(--app-frame-col); border-bottom: var(--app-frame-wid) solid var(--app-frame-col); } @media (min-width: 900px){ .app{ margin-right: 15vw; } } @media (min-width: 1000px){ .app{ margin-right: 20vw; } } @media (max-width: 767px){ .app-wrap{ width: 100%; justify-content: stretch; } .app{ max-width: none; width: 100%; margin-right: 0!important; } .app::before{ border-left-width: var(--app-frame-wid_sp); border-right-width: var(--app-frame-wid_sp); border-bottom-width: var(--app-frame-wid_sp); } } /* ========================================================= メインコンテンツ下部固定ボタン ========================================================= */ .app .contact-fixed{ position: static; width: auto; height: auto; box-shadow: none; } .app .contact-fixed-wrap{ position: fixed; bottom: 0; width: var(--app-maxw); height: var(--news-h); display: flex; flex-direction: row; z-index: 5; box-shadow: 0 -1px 5px rgba(0,0,0,.25); opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease; will-change: opacity, transform; } .app .contact-fixed-wrap.is-hidden{ opacity: 0; pointer-events: none; transform: translateY(40px); box-shadow: none; } .app .contact-fixed-wrap .contact-split{ flex: 1; height: 100%; display:flex; align-items:center; justify-content:center; font-family: "TsukuB"; font-weight: 600; line-height: 1.4; color: #fff; transition: background-color 0.3s ease; opacity: 1; } .app .contact-fixed-wrap a{ width: 100%; height: 100%; display:flex; align-items:center; justify-content:center; text-align:center; line-height: 1.2; } .app .contact-fixed-wrap .contact-split:hover{ background: var(--col_ora); opacity: 1; } @media (min-width: 901px){ .app .contact-fixed-wrap{ height: var(--news-h); } .app .contact-fixed-wrap .model-link{ display: none; } .app .contact-fixed-wrap .contact-fixed{ flex: 1; background: var(--col_gre); font-size: 1.4rem; letter-spacing: 0.05em; } } @media (max-width: 900px){ .app .contact-fixed-wrap{ height: var(--news-h); flex-direction: row; } .app .contact-fixed-wrap .model-link{ background: var(--col_red); letter-spacing: 0.2em; } .app .contact-fixed-wrap .contact-fixed{ background: var(--col_gre); font-size: 1.1rem; letter-spacing: 0.05em; } } @media (max-width: 767px){ .app{ max-width: 100%; width: 100%; /*overflow: hidden;*/ } .app .contact-fixed-wrap{ max-width: 100%; width: auto!important; left: var(--app-frame-wid_sp); right: var(--app-frame-wid_sp); } .app .contact-fixed-wrap a{ font-size: 1.1rem; } } /* Hero */ .hero{ min-height: calc(100vh - var(--nav-h) - var(--news-h)); display: grid; place-items: center; padding: var(--app-frame-wid); overflow-wrap: anywhere; position: relative; } .hero h2{ font-size: clamp(4rem, 5vw, 5rem); font-family: "TsukuB"; letter-spacing: clamp(0.2em, 1.3vw, 0.4em); padding-left: clamp(0.2em, 1.3vw, 0.4em); text-shadow: 1px 1px 8px rgba(255, 255, 255, 0.6); } @media (max-width: 767px){ .hero h2{ top: 20vh; position: absolute; letter-spacing: 3vw; } } /* hero スクロールバー */ .scroll_cont { position: absolute; right: calc(var(--app-frame-wid) + 20px); bottom: 40px; width: 20px; height: 200px; } .scrollbar-text { display: inline-block; position: absolute; bottom: 0; left: 50%; padding: 10px 7px 110px; color: var(--bla); font-weight: 800; line-height: 1; letter-spacing: 0.2em; } .scrollbar-text > span{ display: inline-block; white-space: nowrap; transform: rotate(270deg); transform-origin: left bottom; } .scrollbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1px; } .scrollbar { position: absolute; left: 52%; transform: translateX(-50%); bottom: 1px; width: 20px; /* 矢印用の横幅 */ height: 100px; /* アニメの最大高さ（元の100px） */ } /* 線＋矢印（この要素が伸び縮みする） */ .scrollbar-line{ position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0; */ display: block; transform: scaleY(0); transform-origin: 50% 0; /* keyframesで切り替える */ animation: liner 2.5s cubic-bezier(1, 0, 0, 1) infinite; } /* 縦線 */ .scrollbar-line::after{ content:""; position:absolute; left: 50%; top: 0; width: 2px; height: 100%; background:#000; transform: translateX(-50%); } /* 矢印（左側だけ）＝線の先端にくっつく */ .scrollbar-line::before{ content: ""; position: absolute; bottom: 4px; left: 0%; width: 15px; height: 0px; border-left: 2px solid #000; border-bottom: 2px solid #000; transform: translateX(-2px) rotate(45deg); } @keyframes liner { 0% { transform: scale(1, 0); transform-origin: 0 0; } 30% { transform: scale(1, 1); transform-origin: 0 0; } 70% { transform: scale(1, 1); transform-origin: 0 100%; } 100% { transform: scale(1, 0); transform-origin: 0 100%; } } @media (max-width: 767px){ .scroll_cont{ display: none; } } /* お知らせ */ .news-bar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; height: var(--news-h); display:flex; align-items:center; justify-content:flex-start; gap: 12px; padding: 0 clamp(12px,4vw,24px) max(env(safe-area-inset-bottom)); padding-bottom: 0; padding-bottom: env(safe-area-inset-bottom); padding-bottom: max(0px, env(safe-area-inset-bottom)); background:#f6f7e7; } .news-bar span.day{ font-weight: 600; padding-right: 1em; } @media (min-width: 901px){ .news-bar{ padding-right: calc(20vw + var(--app-maxw) + 24px); } } @media (min-width: 901px) and (max-width: 1000px){ .news-bar{ padding-right: calc(15vw + var(--app-maxw) + 24px); } } @media (max-width: 900px){ .news-bar{ padding-right: calc(var(--app-maxw) + 24px); } } @media (max-width: 767px){ .news-bar{ display: none; } } .news-label{ min-width: 80px; display: inline-flex; align-items: center; justify-content: flex-start; padding: 6px 10px; font-weight: 600; font-size: .9rem; color: #000; border-right: 1px solid #000; } .news-item{ display: inline-flex; align-items: center; gap: 10px; color: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; max-width: 100%; line-height: 1.4; font-size: 90%; } .news-item time{ color: var(--muted); font-size: .9em; } /* ========================================================= Responsive ========================================================= */ /* < 900px */ @media (max-width: 899px){ .pc{ display: none!important; } .side-links-m, .side-links{ display: none !important; } .bg-fixed .bg-text p{ transform: translateX(-2rem); } } /* >= 900px */ @media (min-width: 900px){ .app .contact-fixed{ height: var(--news-h); } .header{ min-height: var(--news-h); } .pc{ display: block; } .sp{ display: none; } } /* .hero{ background-image: url("../img/top_full_sp.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; }*/ .hero .opening-bg.is-in-hero{ position: absolute; top: var(--app-frame-wid); left: var(--app-frame-wid); z-index: 20; padding: 0; } .hero .opening-bg.is-in-hero { position: absolute; top: calc(var(--nav-h) + 1rem); left: var(--app-frame-wid); right: var(--app-frame-wid); z-index: 20; padding: 0; } .hero .opening-bg.is-in-hero h1{ width: clamp(140px, 55vw, 250px); } .hero .footer_contact.is-in-hero{ position: absolute; left: var(--app-frame-wid); bottom: var(--app-frame-wid); z-index: 4; } .hero .footer_contact.is-in-hero .side-links{ display: flex !important; position: static; transform: none; margin-bottom: 0; gap: 1rem } .hero .footer_contact.is-in-hero .side-links a{ /*width: 10vw; height: 10vw;*/ border-width: 2px; width: clamp(50px, 7vw, 80px); height: clamp(50px, 7vw, 80px); } /* index.thml　css */ .section h3{ color: var(--col_gre); text-align: center; /*font-size: 1.75rem;*/ font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: 0.2em; padding-left: 0.2em; } img.h_line{ margin: 0.75rem auto 1.5rem; max-width: 85%; } #top .section h4{ /*font-size: 1.75rem;*/ font-size: clamp(2rem, 2vw, 2.5rem); text-align: center; margin: 1.5em auto 1em; font-family: "TsukuB", sans-serif; } @media (max-width: 500px){ #top .section h3{ font-size: 1.4rem;} /*#top .section h4{ font-size: 1.4rem;}*/ } /*コンセプト*/ #concept.section p{ line-height: 2; } /*マルトモホームの特徴*/ #features{overflow: hidden;} .features_cont{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin:3rem auto 5rem; } .features_cont:nth-of-type(1) { margin:4rem auto 5rem; } .features_cont:nth-of-type(2) { margin:3rem auto 8rem; } .features_cont .features_img{ position: relative; display: inline-block; width: 80%; } .features_cont .features_tit{ height: 100px; position: relative; top: 10px; z-index: 2; } .features_cont p{ margin-top: 1rem; text-align: center; font-size: clamp(12px, 12px + 1vw, 16px); display: inline-block; /*white-space: nowrap;*/ } .features_link{ background-color: var(--col_gra); border-radius: 999px; width: 70%; text-align: center; margin: 1em auto 0; transition: background-color 0.3s; } .features_link a{ font-weight: 600; padding: 0.6em; display: block; width: 100%; } .features_link:hover{background-color: var(--col_gre);} .features_cont:nth-of-type(3) .features_link:hover{background-color: var(--col_red);} .features_link a:hover{ opacity: 1; } .features_cont .features_img img{ display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 15px solid var(--col_gre); position: relative; z-index: 1 } .features_cont:nth-of-type(2) .features_img img{border: 15px solid var(--col_ora);} .features_cont:nth-of-type(3) .features_img img{border: 15px solid var(--col_red);} .features_img::before{ content: ""; position: absolute; width: clamp(500px, 200%, 600px); height: clamp(500px, 200%, 600px); top: 50%; left: 50%; background-color: var(--col_gre_10); border-radius: 50%; transform: translate(-50%, -50%); z-index: 0;} .features_cont:nth-of-type(2) .features_img::before{background-color: var(--col_ora_10);} .features_cont:nth-of-type(3) .features_img::before{background-color: var(--col_red_10);} @media (max-width: 500px){ .features_cont p{font-size: 12px;} } /*-end-マルトモホームの特徴*/ /*施工実績*/ #achievements.section{ padding: 2rem 5% 3rem; } .achievements_cont div{ margin: 0 13%; position: relative; } .achievements_cont div h4{ position: relative; top: 0.5em; left: -1em; margin: 0!important; font-size: 1.75rem!important; text-align: left!important; } .achievements_cont div a{ display: flex;justify-content: center;align-items: center; text-align: center; font-family: "TsukuB", sans-serif; border-radius: 50%; border: 2px solid var(--col_gre); background-color: #fff; width: 80px; height: 80px; line-height: 1.2; position: absolute; bottom: -40px; right: -40px; margin: auto 0 auto auto; transition: all 0.3s; z-index: 0; opacity: 1; } .achievements_cont div a::before{ content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #fff; border: 2px solid var(--col_gre); z-index: -1; transform: scale(0); transition: all 0.3s ease; } .achievements_cont div a:hover::before{ transform: scale(1.1); background-color: var(--col_gre); } .achievements_cont div a:hover{ color: #fff; opacity: 1; } .achievements_cont p{ text-align: center; line-height: 2; margin-top: 0.8em; font-size: 0.8rem; } .achievements_cont p span{ display: inline-block; } /* 施工実績-スライダー */ .splide__arrow{ background-color: transparent; } /*.splide__arrow--prev, .splide__arrow--next{ top: 47%; }*/ .splide__arrow svg { display: none; } .splide__arrow { position: absolute; top: 47%; transform: translateY(-50%); width: 44px; height: 44px; background: transparent; color: #000; } .splide__arrow::before { content: ""; position: absolute; inset: 0; margin: auto; width: 2.5rem; height: 2.5rem; background: currentColor; clip-path: polygon(51% 0, 50% 100%, 0 50%); } .splide__arrow--next::before { transform: scaleX(-1); } @media(max-width:767px){ #achievements.section{ padding: 2rem 2rem 3rem; } } @media (max-width: 500px){ .achievements_cont div h4{ font-size: 1.5rem; } .achievements_cont div a { width: 70px; height: 70px; bottom: -30px; right: -30px; } } /*-end-施工実績*/ /*voices*/ #voices p{ margin: 1rem auto 2rem; letter-spacing: 0.2em; /*font-weight: 600;*/ } /*-end-voices*/ /*マルトモホーム8つの愛着ワクワク*/ #affinityPoints{ padding:2rem 0 ; } #affinityPoints h3{ position: relative; display: inline-block; margin: 0 auto 3rem; left: 50%; transform: translateX(-50%); color: var(--col_bla) !important; font-family: "TsukuB"; /*font-weight: bold;*/ font-size: 1.5rem; background: linear-gradient(transparent 85%, var(--col_yel) 85%); box-sizing: border-box; } #affinityPoints h3 span{ color: var(--col_bla); font-size: 80%; font-weight: normal; } /* 左右のSVG（共通） */ #affinityPoints h3::before, #affinityPoints h3::after{ content: ""; position: absolute; top: 55%; width: 40px; height: 60px; background: url("../img/top_aff_h3line.svg") center / contain no-repeat; transform: translateY(-50%); opacity: 1; pointer-events: none; } /* 左 */ #affinityPoints h3::before{ left: -40px; /*transform: translate(-100%, -50%);*/ } /* 右（左右反転して使う） */ #affinityPoints h3::after{ right: -40px; /*transform: translate(100%, -50%) scaleX(-1);*/ transform: translateY(-50%) scaleX(-1); } #affinityPoints h4{ position: relative; display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; color: #fff; line-height: 1.5; background-color: var(--col_gre); border-radius: 50%; border: 5px solid #ced07b; font-size: 1.2rem!important; text-align: center; margin: 3.125rem auto; } #affinityPoints h4 span{ display: flex; justify-content: center; align-items: center; width: 27px; height: 27px; position: absolute; top: 0; left: 0; color: var(--col_bla); background-color: var(--col_yel); border: 2px solid var(--col_bla); border-radius: 50%; padding-bottom: 1px; padding-right: 2px; } #affinityPoints ul li:nth-of-type(4n+2) h4{ background-color: var(--col_ora); border: 5px solid #f7c066;} #affinityPoints ul li:nth-of-type(4n+3) h4{ background-color: var(--col_red); border: 5px solid #f3a8b4;} #affinityPoints ul li:nth-of-type(4n+4) h4{ background-color: var(--col_blu); border: 5px solid #a7c3e4;} #affinityPoints ul{ background-color: var(--col_yel_10); padding-bottom: 3rem; } #affinityPoints ul li{ padding: 3rem 10% 0; } .affinityPoints_txt{ display: flex; align-items: flex-start; } .affinityPoints_txt p{ font-size: 90%; text-align: justify; } .affinityPoints_txt img{ width: 30%; display: inline-block; margin-left: 1rem; } @media (max-width: 500px){ #achievements .achievements_cont div h4{ font-size: 1.5rem; } #affinityPoints h4{ width: 100px; height: 100px; font-size: 1rem!important; margin: 3rem auto; } } /*-end-マルトモホーム8つの愛着ワクワク*/ /*代表メッセージ*/ #message .message_txt{ color: #fff; background-color: var(--col_gre); position: relative; padding: 10%; margin-bottom: 3rem; text-align: center; } #message .message_txt::before{ content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 32px solid var(--col_gre); } #message .message_txt h3{ color: #fff!important; font-family: "TsukuB"; letter-spacing: 0.5em!important; margin-bottom: 1.5rem; } #message .message_txt h3 span{ font-size: 1rem; letter-spacing: 0.1em; } #message .message_txt p{ display: inline-block; line-height: 2.5; font-size: 90%; font-weight: bold; border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 1rem 0; } #message .message_txt p span{ display: inline-block; } #message .message_img{ display: flex; justify-content: center; } #message .message_img img{ width: clamp(200px, 60%, 400px); } @media (max-width: 900px) { #message .message_txt{ padding: 5%; } } /*-end-代表メッセージ*/ /*お問合せ先*/ .footer_contact p{ font-size: 90%; margin-bottom: 2rem; text-align: justify; } .footer_contact ul{ display: flex; justify-content: center; column-gap: 2rem; margin-bottom: 1rem; } .footer_contact ul li a{ display: flex; align-items: center; justify-content: center; border: 3px solid var(--col_ora); border-radius: 50%; width: clamp(60px, 7vw, 80px); height: clamp(60px, 7vw, 80px); transition: transform .2s; opacity: 1; } .footer_contact ul li a:hover{ transform: scale(1.1); } .footer_contact ul li img{ width: 50%; height: auto; } .footer_contact ul li:nth-child(2) a{ border: 3px solid var(--col_red); } .footer_contact ul li:nth-child(3) a{ border: 3px solid var(--col_blu); } .footer_contact .footer_tel{ font-weight: 700; font-size: clamp(1.5rem, 2vw, 3rem); text-align: center; margin: 0 auto; padding: 0 0 1rem; } .footer_contact .footer_tel span{ font-size: clamp(1.2rem, 2vw, 1.5rem); } /*-end-お問合せ先*/ /*TOPに戻るボタン*/ .to-top-wrap{display: flex;justify-content: flex-end;} .to-top-btn { display: inline-block; width: 50px; height: 50px; background-color: #fff; border:3px solid var(--col_gre); border-radius: 50%; position: relative; text-decoration: none; } .to-top-btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; border-left: 3px solid var(--col_gre); border-top: 3px solid var(--col_gre); transform: translate(-50%, -25%) rotate(45deg); } @keyframes jump { 0% { transform: translateY(0);} 30% { transform: translateY(-10px);} 50% { transform: translateY(0);} 80% { transform: translateY(-5px);} 100% {transform: translateY(0);} } .to-top-btn:hover { animation: jump 0.4s ease-out; } /*-end-TOPボタン*/ /*footer*/ footer{ background-color: #fff; } footer ul { columns: 2; column-gap: 1em; margin: 2.5rem auto 2rem; } footer ul li{ position: relative; font-size: 0.8rem; -webkit-column-break-inside: avoid; margin: 0 0 .5em; padding-left: 1rem; } footer ul li::before{ content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #555555; border-right: 0; top: 0.3em; left: 0; transform: none; } address img{ padding: 1rem 2rem; margin: 0 auto; } address div{ font-size: 0.9rem; font-style: normal; padding: 1em 0; border-top: 5px solid var(--col_gre); border-bottom: 5px solid var(--col_gre); } address div span{ display: inline-block; } .footer_link a { font-family: "TsukuB"; display: block; width: 100%; background-color: var(--col_gre); color: #fff; font-size: 1.4rem; padding: 1em; text-align: center; font-weight: 500; line-height: 1; } .footer_link a:last-child{ letter-spacing: 0.3em; } @media (max-width: 500px){ .footer_link a { font-size: 1.1rem; } footer ul li { font-size: 0.7rem; } } @supports (height: 100dvh){ .app-wrap{ min-height: 100dvh; } .hero{ min-height: calc(100dvh - var(--nav-h) - var(--news-h)); } } /*調整時使用*/ /**{ outline: 1px solid rgba(255,0,0,.2); } @media (max-width: 767px){ html{ outline: 6px solid red; } }*/