@charset "utf-8"; /*----------- opacity:0.7; transition:0.3s; ---filter-- https://catnose.me/learning/css/filter/ filter: brightness(90%); 暗くする filter: saturate(90%); ---------*/ @font-face { font-family: "Ionicons"; src: url("fonts/ionicons.eot?v=2.0.0"); src: url("fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("fonts/ionicons.ttf?v=2.0.0") format("truetype"), url("fonts/ionicons.woff?v=2.0.0") format("woff"), url("fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg"); font-weight: normal; font-style: normal; } :root { --COL-BASE:rgba(93, 79, 58, 1);/*#5d4f3a 基本フォント色*/ --COL-BK:rgba(247, 246, 240, 1);/* #f7f6f0 背景の薄いベージュ */ --COL-GREEN:rgba(58, 159, 58, 1);/*#3a9f3a みどり*/ --COL-BROWN:rgba(130, 110, 81, 1);/*#826e51 ブラウン基本*/ --COL-BROWN4:rgba(142, 107, 59, 1);/*#8e6b3b 濃いブラウン*/ --COL-BROWN2:rgba(166, 140, 104, 1);/*#a68c68 欧文*/ --COL-BROWN3:rgba(230, 225, 214, 1);/*#e6e1d6 ボタン薄いブラウン*/ --COL-WHT: #fff; --COL-GRY-100: #eee; --COL-GRY-120: #e9e8ec; --COL-GRY-200: #ccc; --COL-GRY-600: #666; --COL-GRY-800: #333; --COL-BLK: #000; --FONT-BASE: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif; --FONT-BASE-m: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳＰ明朝" , "MS PMincho" , serif; /*グーグルフォント　　: Use a value from 400 to 700*/ --FONT-BASE-en: 'Radio Canada Big', sans-serif; --LINE-HEIGHT:1.9; --LETTER-SPACE:0.15em; --LETTER-SPACE-zero:0; } a[href^="tel:"] { pointer-events: none; } .hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pcDisplay {display: block} .spDisplay {display: none} html { height: 100%; overflow: auto; scroll-behavior: smooth; } body { width: 100%; position: relative; font-family: var(--FONT-BASE); font-size: 16px; line-height: var(--LINE-HEIGHT); letter-spacing: var(--LETTER-SPACE); color: var(--COL-BASE); overflow-wrap: break-word; text-rendering: optimizeLegibility; background-color: var(--COL-BK); } main { flex: 1 0 auto; min-height: 1px; } footer { flex-shrink: 0; } /* ページ移動のアニメーション

*/ .bg { background: rgba(240,128,128, 0.6); display: block; content: ""; position: fixed; z-index: 999; width: 100%; height: 100vh; top: 0; left: 0; } /*アニメーション*/ .bg { animation-name: bg-anime; animation-duration: 1s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } @keyframes bg-anime { 0% { transform-origin: top; transform: scaleY(0); } 50% { transform-origin: top; transform: scaleY(1); } 50.001% { transform-origin: bottom; } 100% { transform-origin: bottom; transform: scaleY(0); } } /* ヘッダー（BEM） */ .site-header { background-color: #faf5e4; /* 背景の薄いベージュ */ padding: 16px 40px; } .site-header__inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .global-header h1{ width: 180px; } .global-header h1 img{ display: block; width: 100%; height: auto; } a.logo:hover { opacity: .8; transition: .3s; } .site-header__logo-link { display: inline-flex; align-items: center; } .site-header__logo-image { display: block; height: 48px; /* ロゴの高さは調整してください */ } /* グローバルナビ block: nav */ .nav { margin-left: 60px; margin-right: auto; } .nav__list { display: flex; gap: 56px; /* メニュー間のスペース */ padding: 0; margin: 0; list-style: none; } .nav__link { text-decoration: none; font-size: 16px; color: #555; letter-spacing: 0.08em; } /* 右側アクション */ .site-header__actions { display: flex; align-items: center; gap: 24px; } /* お問い合わせボタン */ .site-header__contact-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; padding: 12px 32px; border-radius: 999px; /* カプセル型 */ background-color: #333; color: #fff; font-size: 16px; text-decoration: none; } /* ハンバーガーボタン */ .site-header__menu-btn { background: none; border: none; padding: 0; display: inline-flex; flex-direction: column; justify-content: space-between; height: 24px; width: 32px; cursor: pointer; } .site-header__menu-line { display: block; height: 2px; border-radius: 999px; background-color: #555; } /* ================================ FIRST VIEW ================================= */ .first-v { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } /*参考　https://renkosaka.com/slick-zoom-fade/*/ .slide-top { position: absolute; width: 100%; height: auto; margin: 0; z-index: -1; } .first-v__bg { height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; } .first-v__bg:first-child {background-image: url("../images/common/slide-home01@2x.jpg");} .first-v__bg:nth-child(2) {background-image: url(../images/common/slide-home02@2x.jpg);} .first-v__bg:nth-child(3) {background-image: url(../images/common/slide-home03@2x.jpg);} .first-v__bg:nth-child(4) {background-image: url(../images/common/slide-home04@2x.jpg);} .add-animation { animation: zoom-fade 10s both; } @keyframes zoom-fade { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } .first-v__inner { text-align: center; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); padding: 0 16px; } .first-v__title { font-size: clamp(32px, 5vw, 56px); font-family: var(--FONT-BASE-en); letter-spacing: 0.1em; line-height: 1; margin-bottom: 20px; } .first-v__lead { font-size: 15px; letter-spacing: 0.15em; } .first-v__copy { font-size: 24px; line-height: 1.8; font-family: var(--FONT-BASE-m); } /* ================================ EVENT CARD ================================= */ .first-v__event { position: absolute; left: 50%; top: -47px; transform: translateX(-50%); width: min(600px, 100% - 50px); z-index: 5; } .event-card { border-radius: 20px 20px 0 0; overflow: hidden; } .event-card__header { background-color: var(--COL-BROWN4); color: #fff; padding: 12px 24px; font-size: 12px; letter-spacing: 0.15em; display: flex; align-items: center; gap: 8px; } .event-card__header-label { font-family: var(--FONT-BASE-en); font-size: 20px; line-height: 1; } .event-card__header-sub { font-size: 12px; } .event-card__body { display: flex; align-items: center; justify-content: space-between; background-color: #ffffff; padding: 20px 24px; border-radius: 0 0 20px 20px; } .event-card__text-main { font-size: 16px; margin-bottom: 4px; } .event-card__text-date { font-size: 16px; } a.event-card__outer { display: block; width: 100%; cursor: pointer; } a.event-card__outer:hover { color: #999; transition: .3s; } .event-card-bottom { display: flex; justify-content: center; align-items: center; margin-top: 10px; } .event-card-bottom:hover { background: rgba(255,255,255,0.6); transition: .3; } .event-card-bottom-txt { font-size: 14px; margin-right: 1em; letter-spacing: 0; } .event-card-bottom-insta { width: 40px; } .event-card-bottom-insta img{ width: 100%; height: auto; } /**/ .lineup { position: relative; padding: 250px 0 150px 0; } .lineup__inner { width: 80%; margin: 0 0 0 auto; } /* --------------------- HEAD エリア --------------------- */ .home__head { position: relative; margin-bottom: 100px; } .home__head-tag { color: var(--COL-GREEN); font-size: 16px; letter-spacing: var(LETTER-SPACE-zero); } .home__head-title { font-size: 28px; font-family: var(--FONT-BASE-m); line-height: 1.8; margin-bottom: 16px; } .home__head-text { font-size: 14px; line-height: 2; } /*MOREボタン*/ .home__head-more { position: absolute; bottom: -130px; right: 20%; z-index: 5; } /* --------------------- メインビジュアル --------------------- */ .lineup__main { position: relative; margin-bottom: 40px; width: 100%; } .lineup__main-title { position: absolute; top: 16px; left: -10%; font-family: var(--FONT-BASE-en); font-weight: 600; font-size: 55px; letter-spacing: 0.08em; color: var(--COL-BROWN2); z-index: 1; } .lineup__main-visual { margin-top: 40px; } .lineup__main-visual img { width: 100%; height: 800px; display: block; object-fit: cover; } .lineup__main-visual img:hover, .lineup__type-figure img:hover { filter: brightness(90%); transition:0.3s; } .lineup__main-type-logo { position: absolute; right: 30px; top: 50px; width: 180px; } .lineup__main-type-logo img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; } /* --------------------- 4タイプ一覧 --------------------- */ .lineup__types-title { font-family: var(--FONT-BASE-en); font-weight: 600; font-size: 30px; letter-spacing: 0.15em; } /*.lineup__types-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 40px; }*/ .lineup__types-row { display: flex; gap: 16px; margin-bottom: 90px; } .lineup__types-row > * { flex: 1 1 0; } .lineup__type-caption { font-size: 14px; margin-bottom: 5px; font-family: var(--FONT-BASE-m); letter-spacing: 0.09em; } .lineup__type-figure { position: relative; } .lineup__type-figure img { width: 100%; display: block; } .lineup__type-logo { position: absolute; left: 0; bottom: -60px; width: auto; height: 50px; } .lineup__type-logo img { width: auto; height: 100%; display: block; mix-blend-mode: multiply; } .lineup__type-logo--text { background: #fff; padding: 4px 8px; border-radius: 4px; } .lineup__type-brand-en { font-weight: bold; font-size: 14px; } .lineup__type-brand-ja { font-size: 11px; margin-left: 4px; } /*工法と保証*/ .method { padding: 64px 0 250px 0; } .method__inner { width: 80%; margin: 0 0 auto 0; } /* メインビジュアル */ .method__main-visual { position: relative; margin-top: 32px; } .method .home__head { padding: 0 0 0 8%; } .method__main-title { position: absolute; top: 40px; right: -10%; font-family: var(--FONT-BASE-en); font-weight: 600; font-size: 55px; letter-spacing: 0.08em; color: var(--COL-BROWN2); z-index: 1; } /*.method__main-image { display: block; width: 100%; height: auto; }*/ /* Panasonic セクション */ .method__brand { margin-top: 40px; padding: 18px 0 0 0; } .method__brand-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; } .method__brand-label { font-family: var(--FONT-BASE-en); font-size: 30px; padding-left: 4%; } .method__brand-caption { font-family: var(--FONT-BASE-m); font-size: 14px; letter-spacing: 0.09em; } .slide-method { width: 100%; display: flex; margin: auto; margin:0 -4px; } .slide-method li { height: auto; margin:0 4px; } .slide-method img { width: 100%; max-height: 270px; object-fit: cover; } /*リフォーム*/ .reform { background-color: var(--COL-WHT); padding: 0 0 150px; } .reform__inner { width: 90%; max-width: 900px; margin: 0 auto; } .reform__top { display: flex; justify-content: space-between; gap: 40px; } /*.reform__head { flex: 1 1 auto; }*/ .reform__eyecatch { font-family: var(--FONT-BASE-en); font-weight: 600; font-size: 48px; letter-spacing: 0.18em; color: var(--COL-BROWN4); margin: 0 0 4px; position: absolute; top: -50px; left: 0; } .reform .home__head-tag { position: absolute; top: 20px; left: 0; } .reform .home__head-title { margin-top: 140px; } .reform__more { display: inline-flex; align-items: center; margin-top: 16px; padding: 8px 22px; font-size: 12px; letter-spacing: 0.18em; text-decoration: none; color: #555; background-color: #fff; border-radius: 999px; } .reform__more-icon { display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-right: 2px solid #555; border-bottom: 2px solid #555; transform: rotate(-45deg); } .reform__logo-block { width: 260px; text-align: left; margin-top: 140px; } .reform__logo-img { max-width: 100%; height: auto; display: block; margin-bottom: 12px; } .reform__logo-text { font-size: 12px; line-height: 1.6; } .reform__bottom { display: flex; gap: 0; align-items: stretch; position: relative; } /* 左カラム（3fr 相当） */ .reform__bottom > :first-child { flex: 4 1 0; min-width: 0; } /* 右カラム（2fr / min 260px） */ .reform__bottom > :last-child { flex: 2 1 0; min-width: 250px; } /*メイン写真*/ .reform__image-wrap { position: relative; } .reform__image { width: 100%; height: 400px; display: block; object-fit: cover; object-position: 25% 0; } .reform__dummytext { position: absolute; bottom: 4px; left: 10px; font-size: 10px; color: #fff; z-index: 10; } /*上下に並べる*/ .reform__cta { display: flex; flex-direction: column; } .reform__cta-item { /*flex: 1; display: flex; align-items: center; padding: 0 70px;*/ color: #fff; font-size: 16px; letter-spacing: 0.08em; } /*hover*/ a.reform__cta-item:hover .btn__arrow{ transform: translateX(5px); transition-duration: .3s; } a.reform__cta-item:first-child:hover { filter: saturate(150%); } .reform__cta-item:first-child { display: block; flex-direction: column; } a.reform__cta-item:first-child { display: flex; align-items: center; justify-content: center; /*padding-top: 100px;*/ } a.reform__cta-item:first-child .reform__cta-label { margin-bottom: 10px; } a.reform__cta-item:last-child { display: flex; align-items: center; justify-content: center; } .reform__cta-item--result { flex: 3 1 auto; background-color: var(--COL-BROWN4); position: relative; } .reform__cta-item--result img { width: 120px; height: 120px; border-radius: 50%; margin-top: 20px; } .reform__cta-item--reserve { flex: 1 1 auto; background-color: #666; } a.reform__cta-item--reserve:hover { background: #777; transition-duration: .3s; } .reform__cta-label { padding-right: 1em; } .reform__cta-arrow { font-size: 18px; } /*お知らせ*/ .info { padding: 100px 0 30px 0; } .info__inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* ---------------- お知らせ ---------------- */ .info__news { border-top: 1px solid #ccc; } .info__news-item { display: flex; align-items: center; padding: 20px 0; border-top: 1px solid #ccc; font-size: 14px; } .info__news-item:first-child { border-top: none; } .info__news-item:last-child { border-bottom:1px solid #ccc; } .info__news-date { width: 120px; flex-shrink: 0; color: #666; } .info__news-label { width: 150px; text-align: center; } .info__news-label-badge { display: inline-block; min-width: 100px; padding: 5px 0; border-radius: 20px; font-size: 12px; letter-spacing: 0.1em; } .info__news-label-badge--info { background-color: var(--COL-BROWN3); } .info__news-label-badge--event { background-color: #666; color: #fff; } /*hover*/ a.info__news-label-badge:hover { cursor: pointer; } a.info__news-label-badge--info:hover { filter: saturate(200%); } a.info__news-label-badge--event:hover { background: #333; transition: .3s; } .info-nomessage { font-size: 14px; color: #666; text-align: center; margin: 50px 0; } .info__news-title { flex: 1; padding-left: 24px; font-size: 16px; } .info__news-title a:hover { color: #999; transition: .3s; } /* ---------------- 不動産情報 ---------------- */ .info.estate.page { position: relative; z-index: 1; background: var(--COL-BK); } .info.estate { padding: 0; } .info__title-heading { margin: 60px 0 30px; text-align: center; display: flex; justify-content: center; align-items: center; gap: 16px; font-size: 22px; letter-spacing: 0.16em; } .info__estate-list { display: flex; width:85%; margin:0 auto; flex-wrap: wrap; } .info__estate-link { width:48%; border-radius: 8px; padding: 24px 28px; margin-right:4%; margin-bottom:30px; background-color: #fff; border-radius: 8px; padding: 20px; } .info__estate-link:nth-child(2n){ margin-right:0; } .info__estate-item { display: flex; align-items: flex-start; justify-content: space-between; background: #fff; } .info__estate-item:nth-child(2n){ margin-right:0; } .info__estate-body { display: flex; } .info__estate-tag { align-self: flex-start; width: 7em; display: inline-block; padding: 6px 0; border-radius: 5px; font-size: 12px; text-align: center; color: #fff; margin-right: 20px; } .info__estate-tag:hover { filter: brightness(90%); transition-duration: .3s; } .info__estate-tag--house { background-color: var(--COL-GREEN); } .info__estate-tag--land { background-color: var(--COL-BROWN4); } .info__estate-title { font-size: 16px; margin-bottom: 14px; } .info__estate-title a:hover { font-weight: 600; transition-duration: .3s; } .info__estate-text { font-size: 13px; line-height: 1.8; } .info__estate-arrow { margin-left: 16px; align-self: center; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; } /*表紙用の不動産情報　構造が違う*/ .home.info__estate-item { display: flex; align-items: flex-start; flex-flow:wrap; background: #fff; width:48%; border-radius: 8px; margin-bottom:30px; margin-right:4%; padding: 20px; } .home.info__estate-item:nth-child(2n) { margin-right:0; } #estate-filter { scroll-margin-top: 120px; } /*わたしたちについて*/ .about { color: #fff; padding-top: 200px; background-color:var(--COL-BK); position: relative; z-index: 1; } .about__inner { display: flex; min-height: 420px; } /* 左カラム -------- */ .about__left { width: 50%; padding: 4% 4% 2% 4%; box-sizing: border-box; background-color: var(--COL-BROWN4); } .about__label { font-size: 14px; } .about__title { font-family: var(--FONT-BASE-en); font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: 0.15em; margin: 0 0 60px; } /* ナビ */ .about__nav-outer { flex: 1; display: flex; justify-content: space-between; } .about__nav { width: 45%; list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.3); } .about__nav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .about__nav-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 15px 16px 0; color: inherit; text-decoration: none; } .about__nav-link:hover .btn__arrow{ transform: translateX(5px); transition-duration: .3s; } .about__nav-text { font-size: 14px; } .about__nav-arrow { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); } .about__nav-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-55%, -50%) rotate(-45deg); } /* ボタン */ .about__actions { width: 45%; } .about__button { display: block; width: 260px; max-width: 100%; padding: 20px 24px; box-sizing: border-box; border-radius: 4px; text-decoration: none; color: #fff; font-size: 14px; } .about__button + .about__button { margin-top: 12px; } .about__button--recruit { background-color: #3b342e; } .about__button--contact { background-color: #201d1a; } .about__rec-icon { font-size: 24px; vertical-align: middle; line-height: 1; } .about__button:hover { background-color: #444; transitio: .3s; } .about__button.about__button--contact:hover { background-color: #333; transition: .3s; } /* 右カラム　地図 -------------------------------------------------- */ .about__right { width: 50%; min-height: 450px; position: relative; overflow: hidden; } .iframewrap { width: 100%; height: 100%; margin: 0 auto 0 auto; } .iframewrap iframe { width: 100%; height: 450px; vertical-align: bottom; } /* --------------------- フッター --------------------- */ .footer { background-color: var(--COL-WHT); font-size: 14px; position: relative; z-index: 1; } .footer__inner { max-width: 90%; margin: 0 auto; padding: 200px 0 40px 0; } /* ナビ部分 ---------------------------------------------------- */ /*.footer__nav { display: grid; grid-template-columns: 160px repeat(5, minmax(0, 1fr)); gap: 40px; border-bottom: 1px solid #e0d9cc; padding-bottom: 32px; */ .footer__nav { width: 100%; display: flex; gap: 1em; padding-bottom: 32px; letter-spacing: var(--LETTER-SPACE-zero); } .footer__nav-column { flex: 1 1 auto; border-left: 1px solid #ccc; padding-left: 1.5em; } .footer__nav-column:first-child { border-left: none; padding-left: 0; } .footer__nav-column--info { text-align: center; } .footer__nav-icon { margin-bottom: 8px; font-size: 30px; } .footer__nav-label { font-size: 12px; margin-top: 4px; } .footer__nav-title { font-size: 14px; font-weight: 600; margin-bottom: 8px; } .footer__nav-list { list-style: none; padding: 0 0 0 1em; margin: 0; } .footer__nav-item + .footer__nav-item { margin-top: 4px; } .footer__nav-item a { text-decoration: none; color: #666; font-size: 12px; } .footer__nav-icon a:hover, .footer__nav-title a:hover, .footer__nav-item a:hover { color: var(--COL-GRY-200); transition: .3s; } /* 下段：会社情報 ---------------------------------------------- */ .footer__bottom { border-top: 1px solid #e0d9cc; padding-top: 34px; margin-top: 70px; position: relative } .footer__outer { display: flex; justify-content: space-between; gap: 32px; margin-bottom: 16px; } .footer__brand { display: flex; align-items: flex-start; gap: 32px; margin-bottom: 16px; } .footer__logo-mark { width: 180px; height: auto; display: block; } .footer__logo-mark img{ width: 100%; height: auto; opacity: 0.7; } .footer__tel-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; } .footer__tel-label { font-family: var(--FONT-BASE-en); font-size: 12px; letter-spacing: 0.15em; } .footer__tel-number { font-family: var(--FONT-BASE-en); font-weight: 600; font-size: 20px; text-decoration: none; color: #333; } .footer__tel-number:hover { color: var(--COL-GRY-200); transition: .3s; } .footer__hour, .footer__address { font-size: 12px; color: #666; } .footer__license { margin-top: 8px; font-size: 11px; color: #777; } .footer__copyright { font-family: var(--FONT-BASE-en); margin-top: 18px; text-align: center; font-size: 11px; color: #ccc; } /*各ページのタイトル*/ .page__inner{ width: 80%; min-width: 800px; margin: 200px auto 0 auto; } /*幅100%の場合*/ .page__inner.full { width: 100%; } .page__header{ text-align: center; padding: 8px 0 28px; } .page__title{ font-size: 32px; letter-spacing: .08em; margin-bottom: 100px; } .page__title span{ font-size: 16px; display: block; margin-bottom: -5px; } /*お問い合わせのページ幅*/ .contact__page .page__inner{ width: 70%; min-width: 860px; margin: 200px auto 0 auto; } /*各ページのタイトル下　リード*/ .page__lead { margin: 18px 0 0; line-height: 1.9; font-size: 16px; } .page__lead span { display: block; font-size: 14px; color: #666; line-height: 1.7; padding-top: 10px; } /*カテゴリーのタイトル*/ .cat-title { font-size: 20px; font-weight: 500; text-align:center; } .cat-title.position { margin-bottom:40px; } /* ================================= お知らせ ================================= */ .info__page.page__outer { width: 85%; } .info__page .info__news-item { padding: 30px 0; } /* ページネーション */ .info__pager { margin-top: 60px; } .wp-pagenavi { display: flex; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; } .page.larger, .page.smaller { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #ccc; border-radius: 5px; background: #fff; color: #555; text-decoration: none; font-size: 16px; } .page.larger:hover, .page.smaller:hover { background:var(--COL-BROWN3); transition: .3s; } .wp-pagenavi .current { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #ccc; border-radius: 5px; color: #555; text-decoration: none; font-size: 16px; background: #f1f1f1; } .previouspostslink, .nextpostslink { font-size: 16px; font-family: var(--FONT-BASE-en); font-weight: 500; line-height: 2.3; color:var(--COL-BROWN); } .nextpostslink:hover { color:var(--COL-BROWN3); transition-duration: .3s; } /**/ .model__outer { margin:200px auto 0 auto; width: 80%; min-width: 800px; } .model__title-en { font-family: var(--FONT-BASE-en); font-weight: 600; font-size: 45px; letter-spacing: 0.08em; color: var(--COL-BROWN2); text-align: center; line-height: 1.3; } .model__copy { color: var(--COL-BROWN2); font-size: 16px; letter-spacing: 0.08em; text-align: center; margin-bottom: 30px; } .model__outer ul li{ position: relative; margin-bottom: 30px; } .model__outer ul li a { display: block; margin-bottom: 5px; background: #333; } .model__outer ul li a img{ width: 100%; height: 400px; object-fit: cover; } .model__outer ul li a img:hover{ opacity:0.7; transition:0.3s; } .model__outer ul li p { position: absolute; top: 15px; left: 15px; height: 60px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: #fff; } .model__outer ul li p img{ height: 100%; width: auto; } .txt-cap { font-size: 10px; color: #999; letter-spacing: 0; text-align: right; margin-right: 1em; } /* 4 panel links（左右100%） */ .panel-links { width: 100%; /*margin: 300px 0 -200px 0;*/ margin: 0 0 -200px 0; padding-top: 150px; background: var(--COL-BK); position: relative; z-index: 2; } .panel-links__list { display: flex; width: 100%; gap:1px; } .panel-links__item { position: relative; flex: 1 1 0; min-height: 380px; overflow: hidden; text-decoration: none; color: #fff; } /* 背景画像 */ .panel-links__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); } /* うっすら暗幕（テキスト視認性） */ .panel-links__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.28); } /* 中央寄せレイアウト */ .panel-links__content { position: relative; z-index: 1; height: 100%; padding: 30% 16px 24px; gap: 14px; text-align: center; display: flex; flex-direction: column; align-items: stretch; } .panel-links__sub { margin: 0; font-size: 16px; letter-spacing: 0.14em; } .panel-links__title { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: 0.06em; line-height: 1.1; font-family: var(--FONT-BASE-en); } .panel-links__cta { } /* hover（背景を少しズーム） */ .panel-links__item:hover .panel-links__bg { transform: scale(1.06); transition: transform 0.45s ease; } /* ================================= お知らせ DETAIL ================================= */ .news-detail { } .news-detail__inner { width: 100%; margin: 0 auto; } /* meta（上段） */ .news-detail__meta { } .news-detail__date { font-size: 16px; letter-spacing: 0.06em; color: #666; } .news-detail__badge-wrap { display: flex; justify-content: flex-start; gap:50px; align-items: center; } .news-detail__badge { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 104px; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #fff; } .news-detail__badge--default { background: #7a7a7a; } .news-detail__badge--event { background: #2f2f2f; } .news-detail__title { align-self: center; font-size: 28px; font-weight: 500; letter-spacing: 0.10em; line-height: 1.5; } /* 罫線 */ .news-detail__rule { margin: 40px 0 0; border: none; border-top: 1px solid #ccc; } .news-detail__rule--bottom { margin-top: 26px; } /* 本文レイアウト（左テキスト / 右画像） */ .news-detail__body { display: flex; align-items: flex-start; padding: 44px 0 0; } .news-detail__content { flex: 1 1 auto; width: 55%; font-size: 16px; line-height: 2.0; letter-spacing: 0.06em; margin-right: 5%; } .news-detail__content p { margin: 0 0 28px; } .news-detail__figure { width: 100%; max-width: 500px; margin: 0; } .news-detail__image { display: block; width: 100%; height: auto; } .info__kikan { font-size:18px; font-weight:600; margin-top:20px; } .info__shiryo-link { display: inline-block; background: #666; color: #fff; font-size: 16px; padding: 10px 50px; border-radius: 30px; margin:20px 0; } .info__shiryo-link:hover { filter: brightness(80%); transition: transform 0.3s; } /* ================================= 家づくり　product ================================= */ /* hero（上段：写真＋テキストパネル） */ .products-hero { margin-top: 200px; } /*スペースを狭く：　施工実績*/ .products-hero.narrow { margin-top: 50px; } .products-hero__media { position: relative; } .products-hero__image { display: block; width: 100%; height: auto; } .products-hero__panel { position: absolute; top: -200px; left: 5%; width: auto; background: var(--COL-BK); padding: 0px 30px 40px 30px; border-radius: 10px; } .products__head { width: 80%; min-width: 800px; margin: 0 auto 0 auto; } .products__head { margin-top: 50px; } .products__head.page { margin-bottom: 150px; } .home__head-en { font-family: var(--FONT-BASE-en); font-weight: 600; font-size: 55px; letter-spacing: 0.08em; color: var(--COL-BROWN2); line-height: 1.2; } /* リンクボタン横並び（4つ） */ .products__index { background: #fff; padding: 50px 0 50px 0; margin: 50px 0 100px 0; } .products__head-text { font-family: var(--FONT-BASE-m); font-size: 18px; font-weight: 600; text-align: center; letter-spacing: 0.05em; } .products__thumbs { width: 80%; min-width: 800px; margin: 20px auto 0 auto; display: flex; justify-content: center; gap: 22px; padding: 0; list-style: none; } .products__thumb { width: 25%; min-height: 100px; } .products__thumb-link { position: relative; display: block; text-decoration: none; color: #666; } /*.products__thumb-link img:hover { filter: brightness(90%); }*/ .products__thumb-image { display: block; width: 100%; max-height: 170px; object-fit: cover; } .products__thumb-play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 999px; background: rgba(0,0,0,0.25); } .products__thumb-play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid rgba(255,255,255,0.95); } .products__thumb-name { display: block; margin-top: 8px; font-size: 12px; letter-spacing: 0.06em; text-align: left; } /* product block（各商品） */ .product-block { margin: 250px 0 0 0; } .product-block__intro { width: 70%; display: flex; gap:70px; margin: 0 5% 14px auto; } .product-block__intro--reverse { flex-direction: row; } /*商品ロゴ*/ .product-block__brand { height: 80px; width: auto; } .product-block__brand-logo { width: auto; height: 100%; mix-blend-mode: multiply; } /*商品ロゴルミナスのみ*/ .product-block__brand.luminous { height: auto; width: 280px; } .product-block__brand-logo.luminous { width: 100%; height: auto; mix-blend-mode: multiply; } .midashi__copy { padding: 0 30px 30px 30px; background: var(--COL-BK); position: relative; margin-bottom: -80px; z-index: 2; border-radius:0 0 10px 10px; } .midashi__catch { margin: 0 0 20px; font-size: 24px; font-weight: 600; letter-spacing: 0.06em; } .midashi__desc { font-size: 16px; letter-spacing: 0.06em; line-height: 2.0; } /* メイン画像 */ .product-block__media { width: 80%; position: relative; margin: 10px 0 0 auto; } .product-block__side-label { position: absolute; top: 40px; left: 120px; writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.18em; font-size: 18px; font-family: var(--FONT-BASE-m); color: #000; z-index: 2; } .product-block__main { width: 100%; height: auto; margin: 0; } /*.product-block__main-image { display: block; width: 100%; height: auto; }*/ /* 下の3枚 */ .product-block__gallery { width: 80%; display: flex; margin: 30px 0 30px auto; } .product-block__gallery.slide-method { } .product-block__thumb { width: 33.3%; height: auto; margin-left: 5px; } .product-block__thumb-image { display: block; width: 100%; max-height: 270px; object-fit: cover; } /*左寄せ*/ .product-block__intro.product-block__intro--reverse { margin: 0 auto 14px 5%; } .product-block__media.product-block--right { margin: 10px auto 0 0; } .product-block__side-label.product-block--right { top: 40px; right: 90px; } /* 下の3枚 */ .product-block__gallery.product-block--right { margin: 30px auto 60px 0; } .product-block__slide.slide-method { width: 80%; margin: 30px auto 30px 0; } /* responsive（最低限） */ @media (max-width: 980px) { .products__inner { min-width: auto; width: calc(100% - 32px); } .products-hero__panel { position: static; width: auto; margin-top: 10px; } .products__thumbs { flex-wrap: wrap; } .product-block__intro { flex-direction: column; } .product-block__brand { flex-basis: auto; } .product-block__gallery { flex-wrap: wrap; } .product-block__thumb, .product-block__thumb--wide { flex: 1 1 48%; } .product-block__actions { flex-direction: column; align-items: center; } .product-block__btn { width: min(520px, 100%); } } /*ラインナップページにある工法へのナビ*/ .method__nav { margin: 200px 0 200px 0; } .method__nav--title { background: #fff; padding: 25px 0; font-size: 20px; font-weight: 600; text-align: center; margin-bottom: 70px; } .method__nav--inner { width: 80%; min-width: 800px; margin: 0 auto 0 auto; display: flex; justify-content: center; } .method__nav--item { width: 33.3%; padding: 0 35px 15px 35px; border-left: 1px solid #ccc; display: flex; flex-direction: column; } .method__nav--item:nth-child(3) { border-right: 1px solid #ccc; } .method__nav--item figure { width: 38%; min-width: 105px; margin: 0 auto 30px auto; } .method__nav--item figure img { width: 100%; height: auto; } .method__nav--item dl { margin-bottom: 20px; align-self: stretch; height: 100%;/*ボタンの位置を揃えるためdlを伸ばす*/ } .method__nav--item dl dt{ margin-bottom: 10px; } .method__nav--item dl dd{ font-size: 14px; } .method__nav--item a { } .info__estate-midashi { font-size: 16px; font-family: var(--FONT-BASE-m); color: var(--COL-BROWN); text-align: center; border-bottom: 1px solid var(--COL-BROWN); padding-bottom: 20px; } /* Method Page (工法ページ) */ .method-page__inner { } /* 交互レイアウトブロック */ .method-block { display: flex; justify-content: center; gap: 10%; /*padding: 0 10%;*/ margin: 100px 10%; padding-bottom: 100px; align-items: flex-end; } .method-block.method-block--text-right { flex-direction: row-reverse; } .method-block--spaced { padding-top: 54px; } /* 左テキスト／右画像 */ .method-block--text-left { flex-direction: row; } /* 左画像／右テキスト */ .method-block--text-right { flex-direction: row; } .method-block__body { flex: 1 1 auto; max-width: 560px; } .method-block__media { flex: 0 0 420px; margin: 0; } .method-block__image { display: block; width: 100%; height: 540px; object-fit: cover; } .method-block__image--auto { display: block; width: 100%; height: auto; object-fit: cover; } /* 見出し */ .method-block__head { position: relative; } .method-block__head--align-right { text-align: right; } .method-block__eyebrow { margin: -10px 0 20px 0; font-size: 35px; font-weight: 600; letter-spacing: 0.08em; color: var(--COL-BROWN2); position: relative; display: inline-block; padding-bottom: 8px; } /*.method-block__eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--COL-BROWN2); }*/ .method-block__line { content: ""; position: absolute; left: -27%; top: 60px; width: 70%; height: 3px; background: var(--COL-BROWN2); } .method-block__head.method-block__head--align-right .method-block__line { left: 57%; } /*.method-block__head--align-right .method-block__eyebrow::after { left: auto; right: 0; }*/ .method-block__title { margin: 0 0 10px 0; font-size: 25px; letter-spacing: 0.06em; line-height: 1.7; text-align: left; } .method-block__small-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.06em; } /* 本文 */ .method-block__text { font-size: 16px; letter-spacing: 0.06em; line-height: 2.0; color: #666; } .method-block__text p { margin: 0 0 18px; } /* 下部ボタン工法と保証*/ .method-page__cta, .hosho-page__cta{ display: flex; justify-content: center; } .method-page__cta .btn__box{ min-width: 400px; padding: 20px 30px; margin-right: 0; margin-bottom: 200px; margin-top: -100px; } .hosho-page__cta .btn__box { min-width: 400px; padding: 20px 30px; } .method-page__cta .btn__box-text, .hosho-page__cta .btn__box-text{ font-size: 18px; } /* Quality Banner (青空バナー) */ .quality-banner { position: relative; height: 600px; min-height: 300px; overflow: hidden; margin-bottom: -200px; } .quality-banner__bg { position: absolute; inset: 0; background-image: image-set( url("../images/product/method-sky.jpg") 1x, url("../images/product/method-sky@2x.jpg") 2x ); background-size: cover; background-position: center bottom; background-repeat:no-repeat; } .quality-banner__inner { position: relative; z-index: 1; width: 80%; min-width: 500px; margin: 0 auto; padding: 0 0; color: #fff; } .quality-banner__content { width: 700px; margin: 100px auto 0 auto; } .quality-banner__title { margin: 0 0 40px; font-size: 30px; font-weight: 600; letter-spacing: 0.10em; font-family: var(--FONT-BASE-m); text-align: center; color: #fff; } .quality-banner__lead { margin: 0 0 18px; font-size: 16px; line-height: 2.0; letter-spacing: 0.06em; color: #fff; text-align: center; } .quality-banner__list { list-style-type: decimal; margin: 0; padding-left: 1.2em; font-size: 16px; line-height: 2.0; letter-spacing: 0.06em; color: #fff; } .quality-banner__list li { margin: 0 0 6px; } /* ================================= 保証ページ ================================= */ .hosho-page { } .hosho-page__inner { } /* ブロック（工法ページの .method-block 相当） */ .hosho-block { display: flex; justify-content: center; gap: 10%; margin: 100px 10%; padding-bottom: 100px; align-items: flex-start; } .hosho-block--text-left { flex-direction: row; } .hosho-block--text-right { flex-direction: row-reverse; } .hosho-block--last { padding-bottom: 28px; } /* テキスト領域 */ .hosho-block__body { flex: 1 1 auto; max-width: 560px; position: relative; } /* 大きい番号（01/02…） */ .hosho-block__no { margin: 0 0 10px; font-size: 56px; font-weight: 300; letter-spacing: 0.08em; color: #ccc; line-height: 1; } /* 見出し */ .hosho-block__head { margin-bottom: 10px; } .hosho-block__head--align-right { text-align: left; } /*.hosho-block__note { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.06em; color: rgba(0,0,0,0.45); }*/ .hosho-block__eyebrow { line-height: 1.4; font-size: 18px; font-weight: 600; letter-spacing: 0.10em; color: var(--COL-BROWN2); } .hosho-block__title { margin-bottom: 20px; font-size: 24px; letter-spacing: 0.06em; line-height: 1.8; } /* 本文 */ .hosho-block__text { font-size: 16px; letter-spacing: 0.06em; line-height: 2.0; } /* 画像領域 */ .hosho-block__media { flex: 0 0 380px; margin: 0; } .hosho-block__image { display: block; width: 100%; height: 540px; object-fit: cover; } .hosho-block__caption { margin-top: 8px; font-size: 11px; color: #999; letter-spacing: 0; text-align: right; } /* 連絡先カード（05の白箱） */ .hosho-block__contact { margin-top: 24px; padding: 16px 20px; background: rgba(255,255,255,0.75); } .hosho-block__tel { margin: 0 0 15px 0; font-size: 35px; font-weight: 600; letter-spacing: 0.08em; color: var(--COL-BROWN2); line-height: 1.4; } .hosho-block__tel span { font-size: 22px; } .hosho-block__contact-list { margin: 0; padding: 0; list-style: none; font-size: 14px; letter-spacing: 0.06em; line-height: 1.8; color: #666; } /*既存のお客様*/ .hosho__customer { width: 100%; margin: 150px auto -120px auto; background: var(--COL-BROWN3); padding: 50px; position: relative; z-index: 5; } .hosho__customer-inner { width: 80%; margin:0 auto; } .hosho__customer-title { font-size: 24px; font-weight: 600; text-align: center; width: 50%; margin: 0 auto 20px auto; color: #333; } .hosho__customer-text { font-size: 16px; margin-bottom: 30px; } .hosho__customer .hosho-block__contact { background: none; padding: 0; border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 30px; } /* ================================ ステップ ================================= */ .step__product { margin: 150px 0 0 0; padding-bottom: 100px;/*パララックス用*/ } .step__product--inner { width: 70%; min-width: 700px; margin: 0 auto; } .step__product--title { font-size: 24px; font-weight: 600; text-align: center; margin-bottom: 80px; padding-top: 30px; } .step__producttime__item { position: relative; display: flex; gap: 40px; } .step__producttime__item:last-child .step__producttime__content:before { display: none; } .step__producttime__content { flex: 1; position: relative; order: 1; padding-left: 40px; padding-bottom: 100px; } .step__producttime__content:before {/*ライン*/ content: ""; position: absolute; right: 100%; top: 0; height: 100%; width: 4px; background-color: var(--COL-BROWN2) } .step__producttime__content:after {/*まる*/ content: ""; position: absolute; left: calc(0px - 22px); top: 0; width: 40px; height: 40px; background-color: #fff; z-index: 1; border: 4px solid var(--COL-BROWN2); border-radius: 50%; } .step__producttime__title { font-size: 24px; margin-bottom: 20px; } .step__producttime__desc { color: grey; font-size: 16px; margin-bottom: 30px; } .step__product--no { text-align: end; flex: 0 0 100px; min-width: 0; overflow-wrap: break-word; padding-bottom: 1rem; color: rgba(166, 140, 104, .7); font-family: var(--FONT-BASE-en); font-size: 48px; line-height: 1; margin-top: -5px;/*数字がズレているので丸のセンターに合わせる*/ } /*画像並び*/ .lineup__outer .lineup__index--inner {width: 100%;} .lineup__outer p { font-size: 14px; letter-spacing: 0; color: #666; margin-bottom: 5px; } .step__image { width: 150px; height: 150px; position: absolute; top: -50px; right: 0px; } .step__image img{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } /* ========================= 施工実績　新築 ========================= */ .works { margin: 100px 0 100px 0; } .works__inner { width: 80%; min-width: 800px; margin: 0 auto; } .works__filter { } .works__filter-list { width: 80%; justify-content:center; margin: 0 auto 100px auto; display: flex; flex-wrap: wrap; gap: 15px 15px; } .works__filter-item { flex: 0 0 auto } .works__filter-btn { display:block; appearance: none; border: 1px solid #ccc; border-radius:5px; background: #fff; min-width: 100px; /* ラベルが短くても揃う */ padding: 5px 20px; text-align: center; font-size: 14px; color: #666; cursor: pointer; white-space: nowrap; } .works__filter-btn.is-active { background: var(--COL-BROWN); color: #fff; } .works__filter-btn:hover { background: var(--COL-BROWN); transition: .3s; color: #fff; } /*写真部*/ .works__list { display: flex; flex-wrap: wrap; gap: 50px 5%; } .works-card { width: 30%; /*max-width: 320px;*/ } .works-card__link { display: block; text-decoration: none; color: inherit; } .works-card__figure { margin: 0; overflow: hidden; background: rgba(0,0,0,0.04); border-radius: 5px; } .works-card__image { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; /* 画像サイズがバラついても高さを揃える */ object-fit: cover; /* トリミングして整える */ } .works-card__title { margin: 5px 0 0; font-size: 12px; line-height: 1.6; letter-spacing: 0; color: #666; } .works-card__link:hover .works-card__image { transform: scale(1.03); transition: transform 0.35s ease; } /* ========================= 実績詳細 ========================= */ .work-detail { margin: 0 0 0 0; } .work-detail__inner { width:80%; min-width: 800px; margin: 0 auto; } .work-hero { position: relative; margin-bottom: 150px; } .work-hero__media { width: 100%; } .work-hero__image { display: block; width: 100%; height: 500px; object-fit: cover; filter: brightness(60%); } /* 左下の白パネル */ .work-hero__panel { width: 55%; min-width: 300px; background: var(--COL-BK); padding: 25px 20px 10px 50px; margin: -130px 0 0 50px; border-radius: 10px 10px 0 0; } .work-hero__title { margin: 0 0 10px; font-size: 30px; line-height: 1.5; letter-spacing: 0.08em; } .work-hero__meta { margin: 0 0 10px; font-size: 16px; letter-spacing: 0.06em; color: rgba(0,0,0,0.55); } .work-hero__meta-sep { margin: 0 6px; } .work-hero__text { width:50%; margin: 30px 0 0 100px; font-size: 16px; line-height: 2.0; letter-spacing: 0.06em; color: #666; } /*タグ*/ .works__filter.page { } /*.works__filter.page .works__filter-list { position: absolute; right: 10px; bottom: 100px; width: 40%; gap: 10px 15px; z-index: 2; }*/ /*属するターム表示　一時消去*/ .works__filter.page .works__filter-list { display:none;} .works__filter.page .works__filter-btn { background: var(--COL-BROWN); color: #fff; font-size: 12px; } .works__filter.page .works__filter-btn:hover { background: #fff; color: #666; transition: .3s; } /* GALLERY */ .work-gallery { margin-top: 40px; } .work-gallery__item { margin: 0 0 60px; } .work-gallery__image { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3;/*写真の縦横比率*/ object-fit: cover; } .work-gallery__row .work-gallery__image { aspect-ratio: 3 / 4;/*縦長*/ } /* キャプション */ .work-gallery__caption { margin: 8px 0 0; font-size: 14px; letter-spacing: 0.06em; color: #888; } /* 2カラム行（flex） */ .work-gallery__row { display: flex; flex-wrap: wrap; /* 増減・狭い幅でも崩れない */ gap: 5px; margin-bottom: 60px; } .work-gallery__item--half { flex: 1 1 320px; /* 最低幅を確保しつつ、余白は伸びる */ margin: 0; } /*施工前写真*/ .work-gallery__old { width: 100%; background: #fff; padding: 30px 0 35px 0; margin-bottom: 100px; margin-top: 100px; } .work-gallery__old-title { font-size: 30px; color: var(--COL-BROWN2); font-family: var(--FONT-BASE-en); margin-bottom: 10px; } .work-gallery__old-title span { font-size: 14px; padding-left: 1em; letter-spacing: 0; } .work-gallery__old-inner { width: 90%; min-width: 800px; margin: 0 auto 0 auto; } .work-gallery__old-gallery { display: flex; } .work-gallery__old--item { width: calc((100 - 9px) / 4); height: auto; margin-right: 3px; } .work-gallery__old--item:last-child { margin-right: 0; } .work-gallery__old__image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } /*施工の声*/ .work-message { width: 70%; margin:0 auto; padding:50px 0; } .work-message__title { width:50%; font-size:20px; font-weight:500; margin:0 auto 20px auto; } .work-message__text { font-size:16px; } /* SPEC（テーブル風：flex） ========================= */ .work-spec { width: 80%; min-width: 800px; margin: 0 auto 0 auto; } .work-spec__title { margin: 0 0 14px; font-size: 18px; letter-spacing: 0.10em; color: #666; } .work-spec__table { border-top: 1px solid #ccc; } .work-spec__row { display: flex; align-items: stretch; border-bottom: 1px solid #ccc; } .work-spec__th, .work-spec__td { padding: 18px 18px; font-size: 14px; letter-spacing: 0.06em; line-height: 1.8; } .work-spec__th { width: 140px; flex: 0 0 140px; } .work-spec__td { flex: 1 1 auto; } .works__filter-bottom { margin: 150px 0 0 0; } .works__filter-bottom p { font-size: 14px; color: #888; margin: 0 auto 20px auto; width: 30em; } /* ================================= 家をなおす reform ================================= */ .products-hero__media.reform-index{ position: relative; margin-bottom: 3px; } .reform__page { padding: 150px 0 0 0; } .reform__page__inner { width: min(1200px, 80%); min-width: 700px; margin: 0 auto; } /* ===== hero ===== */ .reform-hero { display: flex; align-items: flex-start; justify-content: center; gap: 50px; margin-bottom: 130px; } .reform-hero__body { flex: 1 1 auto; max-width: 600px; } .reform-hero__title { margin: 0 0 16px; font-size: 24px; font-weight: 550; letter-spacing: 0.10em; line-height: 1.7; } .reform-hero__text { margin: 0; font-size: 16px; line-height: 2; letter-spacing: 0.06em; } .reform-hero__logo { margin: 0; flex: 0 0 230px; display: flex; justify-content: flex-end; } .reform-hero__logo-image { width: 100%; height: auto; display: block; } /* ===== menu head ===== */ .reform__menu-head { margin-top: 40px; text-align: center; } /*まとまるくんメニュー*/ .reform__menu-title { width: 50%; margin: 0 auto; font-size: 24px; font-weight: 600; } /* ===== cards ===== */ .reform-menu { margin-top: 40px; margin-bottom: 100px; display: flex; flex-wrap: wrap; /* 増減しても崩れない */ gap: 50px 30px; align-items: stretch; } .reform-card { width: calc((100% - 60px) / 3); /* gap横30px *2 */ padding: 25px; background: rgba(255,255,255,0.7); border-radius: 8px; } .reform-card__link { display: flex; flex-direction: column; height: 100%; } .reform-card__body { flex: 0 0 auto; margin-bottom: 15px; } .reform-card__title { margin: 0 0 15px; font-size: 18px; line-height: 1.5; color: var(--COL-BROWN4); } .reform-card__lead { margin: 0 0 10px; font-size: 14px; line-height: 1.7; } .reform-card__tags { margin: 0 0 4px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .reform-card__tag { font-size: 12px; font-weight: 600; letter-spacing: 0; color: #888; } .reform-card__meta { margin: 0; font-size: 10.5px; line-height: 1.8; color: rgba(0,0,0,0.55); } /* media */ .reform-card__media { margin-top: auto; overflow: hidden; background: rgba(0,0,0,0.04); } /*その他*/ .reform__sub { background: rgba(255,255,255,0.8); padding: 60px 0; } .reform__sub-inner { width: 70%; min-width: 800px; margin: 0 auto 40px auto; display: flex; justify-content: space-between; gap:60px; } .reform__sub-inner dl { width: 50%; } .reform__sub-inner dl dt{ font-size: 18px; border-bottom: 1px dashed #999; padding-bottom: 10px; margin-bottom: 15px; } .reform__sub-inner dl dd{ font-size: 14px; } .reform__sub ul { } .reform__sub ul li { width: 400px; margin: 0 auto; } .reform__sub ul li img{ width: 100%; height: auto; } .method-page__cta.reform__btn .btn__box { min-width: 400px; padding: 20px 30px; margin-right: 0; margin-bottom: 0px; margin-top: 80px; } /* ================================ よくあるご質問　家をなおす ================================= */ .products-hero.re-faq { margin-top: 0; } .re-faq__inner { width: 80%; min-width: 800px; margin: 0 auto; } /* intro */ .re-faq__intro { width: 600px; min-width: 500px; padding: 150px 0 150px; } .re-faq__title { margin: 0 0 15px; font-size: 24px; line-height: 1.7; font-weight: 600; } .re-faq__lead { margin: 0; font-size: 16px; line-height: 2.1; } /* bar */ .re-faq__bar { padding: 20px 0; background: #9b8a6a; /* ここだけ必要なら残してOK。不要なら削除 */ width: 100%; margin-bottom: 100px; } .re-faq__bar-title { text-align: center; color: #fff; font-size: 24px; font-weight: 600; } /* ===== faq grid-like layout (flex wrap) ===== */ .re-faq__grid { display: flex; flex-wrap: wrap; gap: 50px 0; margin-top: 0; } /* 2列固定（幅が足りない時は下で1列に） */ .re-faq-item { width: 50%; box-sizing: border-box; padding: 20px 50px; min-height: 190px; } .re-faq__grid .re-faq-item:nth-child(odd) { border-right:1px solid #ccc; } .re-faq-item__head { margin-bottom: 10px; } .re-faq-item__badge { display: inline-flex; align-items: center; justify-content: center; height: 25px; padding: 0 20px; background: var(--COL-BROWN); color: #fff; font-size: 10px; font-weight: 600; border-radius: 2px; margin-bottom: 10px; } .re-faq-item__title { font-size: 24px; font-weight: 600; line-height: 1.7; color: var(--COL-BROWN); } .re-faq-item__text { font-size: 14px; line-height: 2.0; color: #888; } .re-faq-item__link { margin: 10px 0 0; } .re-faq-item__anchor { text-decoration: none; font-size: 16px; } .re-faq-item__anchor:hover { text-decoration: underline; } /* ===== compare block ===== */ .re-compare { margin-top: 120px; padding: 50px; border-radius: 10px; background: rgba(255,255,255,0.4); } .re-compare__hero { margin: 0; position: relative; overflow: hidden; } .re-compare__hero-image { width: 100%; height: auto; display: block; aspect-ratio: 16 / 5; object-fit: cover; } .re-compare__hero-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 20px; margin: 0; } .re-compare__body { display: flex; gap: 30px; margin-top: 100px; align-items: flex-start; } .re-compare__desc { flex: 1 1 52%; } .re-compare__text { margin: 0; font-size: 14px; line-height: 2.0; } /* table (flex) */ .re-compare__table { flex: 1 1 60%; border: 1px solid #ccc; } .re-compare__row { display: flex; border-top: 1px solid #ccc; } .re-compare__row--head { border-top: none; background: rgba(0,0,0,0.04); } .re-compare__th, .re-compare__cell { padding: 10px 10px; font-size: 12px; line-height: 1.6; border-left: 1px solid rgba(0,0,0,0.12); flex: 1 1 0; } .re-compare__th:first-child, .re-compare__cell:first-child { border-left: none; } .re-compare__cell--head { background: rgba(0,0,0,0.02); font-weight: 600; } .re-compare__th { text-align: center; } /* ================================ リフォーム　実績 ================================= */ .works.reform-page { margin:0 0 100px 0; } .works-card__re-title { margin: 10px 0 10px; font-size: 16px; line-height: 1.6; line-height: 1.8; } .works-card__date { font-size: 12px; line-height: 1.6; color: #666; border-top:1px dashed #ccc; padding-top:10px; } /* ================================= 体験する experience ================================= */ /* showroom */ .showroom-gallery__inner, .access__inner, .showroom-links__inner{ width:80%; min-width: 800px; margin: 0 auto; } .products-hero__panel.showroom-hero { position: absolute; top: -190px; left: 10%; width: 60%; background: var(--COL-BK); padding: 0px 30px 40px 30px; } .showroom-hero__collage { display: flex; gap: 1px; align-items: flex-start; width: 100%; margin: 0 0 0 auto; } .showroom-hero__shot { width: 33.3%; } .showroom-hero__img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 5; object-fit: cover; } /* ===== FEATURE GALLERY ===== */ .showroom-gallery { margin: 200px 0 150px 0; } .showroom-gallery__list { display: flex; flex-wrap: wrap; gap: 50px; align-items: stretch; } .showroom-card { width: calc((100% - 100px) / 3); /* 3列 */ } .showroom-card__link { display: block; text-decoration: none; color: inherit; } .showroom-card__link:hover .showroom-card__img { transform: scale(1.03); transition: transform 0.35s ease; border-radius:5px; } .showroom-card__media { margin: 0; overflow: hidden; background: rgba(0,0,0,0.04); /* 画像枠の見やすさ */ border-radius:5px; } .showroom-card__img { width: 100%; height: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; } .showroom-card__caption { margin: 5px 0 0; font-size: 16px; } /* ===== REFORM BOOTH ===== */ .reform-booth { padding: 50px 0 180px; background: #fff; } .reform-booth__title { margin: 0 0 70px; text-align: center; font-size: 30px; padding-top: 40px; } .reform-booth__inner { width: 100%; margin: 0 auto 0 auto; } .reform-booth__photos .showroom-hero__collage { width: 100%; } .reform-booth__row { display: flex; gap: 15px; width: 85%; margin: 20px auto 0 auto; } /*スライド*/ .reform-booth__slide { width: 49.4% } .reform-booth__desc { display: flex; gap: 26px; align-items: flex-start; width: 85%; margin: 0 auto 0 auto } .reform-booth__block { flex: 1 1 80%; } .reform-booth__block-title { margin: 0 0 8px; font-size: 24px; } .reform-booth__block-text { font-size: 14px; line-height: 2.0; color: #666; } /* ===== ACCESS ===== */ .access { margin: 100px 0 70px 0; } .access__title { width:50%; margin: 0 auto 150px auto; text-align: center; font-size: 20px; font-family: var(--FONT-BASE-en); background:var(--COL-BROWN); color:#fff; padding:10px 50px; } .access__body { display: flex; gap: 50px; align-items: stretch; } .access__info { flex: 0 0 350px; } .access__kicker { font-size: 14px; color: #666; } .access__place { margin: 0 0 5px; font-size: 24px; line-height: 1.5; } .access__address { margin: 0 0 14px; font-style: normal; font-size: 12px; color: #666; } .access__map { flex: 1 1 auto; overflow: hidden; height: 400px; } .access__map iframe { width: 100%; } .btn__box.access-btn { width: 315px; } /* ===== bottom links ===== */ .showroom-links { width: 420px; margin: 0 auto 150px auto; } .showroom-links:hover { filter: brightness(95%); transition:0.3s; } .showroom-links__item { flex: 1 1 420px; } .showroom-links__link { display: flex; align-items: center; gap: 20px; color: inherit; border: 1px solid #ccc; border-radius: 6px; background: #fff; } .showroom-links__media { margin: 0; flex: 1 1 0; overflow: hidden; background: rgba(0,0,0,0.04); /*height: 110px;*/ align-self: stretch; } .showroom-links__media img { width: auto; height: 100px; object-fit: cover; } .showroom-links__label { padding: 20px; font-size: 14px; color: #666; } .showroom-links__label span { display: block; font-weight: 700; font-size: 16px; } .showroom-gallery__inner { position: relative; } .showroom-aside { position: absolute; left: 270px; bottom: 35px; width: 300px; height: auto; z-index: 2; } .showroom-aside img { width: 80%; height: auto; } /* ================================ モデルハウス ================================= */ /* バーチャルモデルハウス */ .virtual__outer { width:80%; position:relative; background: url("../images/experience/ph-vr01@2x.jpg") no-repeat center bottom; background-size: cover; height: 300px; display: flex; margin:0 auto 100px auto; border-radius: 10px; } .virtual__outer:hover { filter: brightness(90%); transition: .3s; } .virtual__inner{ width: 100%; text-align: center; margin-top:-35px; } .virtual__outer-title-en{ font-size: 36px; font-family: var(--FONT-BASE-en); font-weight: 500; color:#fff; line-height: 1; } .virtual__outer-title-jp{ font-size: 16px; } .modelhouse { margin-bottom: 150px; } .modelhouse.secand { margin-top: 150px; } .products-hero.mh-out { margin-top: 0; } .products-hero__media.mh-head { display: flex; width: 80%; min-width: 800px; margin: 0 auto 130px auto; } /* left label */ .mh-label{ flex: 0 0 270px; } .mh-label__inner { display: flex; } .mh-label__en{ margin: 0 15px 0 0; font-size: 35px; font-family: var(--FONT-BASE-en); line-height: 1; color: rgba(0,0,0,0.25); font-weight: 500; } .mh-label__no{ margin: -10px 0 10px; font-size: 92px; line-height: 1; color: rgba(0,0,0,0.25); font-weight: 600; } .mh-label__line{ display: block; width: 100%; height: 1px; background: rgba(0,0,0,0.2); margin: 10px 0 10px; } .mh-label__place{ font-size: 16px; text-align: center; font-weight: 600; color: rgba(0,0,0,0.65); } .products-hero__panel.mh-hero { position: static; top: 0; left: 0; width: auto; margin-left: 100px; padding: 0; } .home__head-text.mh-hero { font-size: 16px; line-height: 2; } /* ===== main visual ===== */ .mh-visual{ width: 100%; min-width: 800px; margin: 0 auto 0 auto; padding-left: 10%; } .mh-visual__inner{ position: relative; } /* brand (overlay) */ .mh-visual__brand{ margin-top:-100px; } /*.mh-visual__mark, .mh-visual__logo{ margin: 0; } .mh-visual__mark-img{ display: block; width: 110px; height: auto; }*/ .mh-visual__logo{ width: 200px; height: auto; } .mh-visual__logo img{ display: block; width: 100%; height: auto; mix-blend-mode: multiply; } /* main image */ .mh-visual__main{ margin: 0; overflow: hidden; } .mh-visual__main-img{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } /* ===== thumbs ===== */ .mh-thumbs{ padding: 14px 0 44px; } .mh-thumbs__inner{ width: 80%; margin: 0 auto 0 auto; } .mh-thumbs__list{ list-style: none; padding: 0; margin: 0; display: flex; /*flex-wrap: wrap;*/ gap: 10px; /*align-items: stretch;*/ } .mh-thumbs__item{ /*flex: 1 1 140px; min-width: 90px;*/ } .mh-thumbs__btn{ width: 100%; padding: 0; border: 1px solid rgba(0,0,0,0.12); background: transparent; /* 背景色指定なし */ cursor: pointer; display: block; } .mh-thumbs__img{ width: 100%; height: 100px; display: block; /*aspect-ratio: 16 / 10;*/ object-fit: cover; } /* hover / focus */ .mh-thumbs__btn:hover{ border-color: rgba(0,0,0,0.28); } .mh-thumbs__btn:focus-visible{ outline: 2px solid rgba(0,0,0,0.35); outline-offset: 2px; } /**/ .access.mh-box { width: 100%; margin: 100px auto 70px auto; padding-left: 10%; } .access__inner.mh-box { width: 100%; padding-right: 10%; } /* ================================= 不動産情報 estate ================================= */ .estate-hero__panel { width: 55%; min-width: 700px; margin: 0 0 100px 10%; } .estate__image { width: 100%; height: auto; display: block; aspect-ratio: 16 / 8; object-fit: cover; } .works__filter-list.estate-page { margin: 0 auto 100px auto; } .estate__figure { margin-bottom:100px; display:block; position: relative; } /* .estate__figure img { position: relative; } .products__head.page { position:absolute; top: 0; left: 100px; z-index:2; } */ /* 宅地情報 */ .estate__bunrui { position: relative; } .estate__bunrui-title { position:absolute; top: 10%; left: 5%; } .estate__bunrui-title-en { font-size: 48px; font-weight: 800px; font-family: var(--FONT-BASE-en); color: var(--COL-BROWN2); line-height: 1.0; } .estate__bunrui-title-jp { font-size: 16px; } .estate__bunrui-title-en.new { font-size: 38px; } .estate__bunrui-title-jp.new{ color:#fff; } .estate__inner{ width:80%; min-width:700px; margin:0 auto; padding: 0 70px 70px 70px; background: #fff; border-radius: 5px; } .info__estate-link .info__estate-naiyo:hover { color:#ccc; transition:0.3s; } /* tag */ .estate__tag-wrap{ display:flex; justify-content:flex-start; } /*宅地*/ .estate__tag{ display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 42px; color:#fff; background:var(--COL-BROWN2); border-radius:4px; font-size:12px; font-weight:600; margin-top: -15px; } /*戸建て*/ .estate__tag.kodate{ background:var(--COL-GREEN); } /* head */ .estate__head{ display:flex; align-items:flex-end; justify-content:space-between; margin: 50px 0 10px 0; } .estate__title{ font-size:30px; color:var(--COL-BROWN2); } .estate__price{ font-size:20px; white-space:nowrap; } .estate__price-num{ font-size:24px; } /*ラインの色*/ .estate__rule{ border-top:3px solid var(--COL-BROWN2); margin:0 0 20px; } /*戸建て*/ .estate__rule.kodate{ border-top:3px solid var(--COL-GREEN); } /* meta list */ .estate__meta{ list-style:none; padding:0; margin:0 0 20px; } .estate__meta-item{ font-size:16px; } .swiper-button-next:after, .swiper-button-prev:after { color:var(--COL-GREEN);} /* media */ .estate__media{ margin:0 0 40px; } .estate__photo, .estate__map{ margin:0 0 20px 0; border:1px solid rgba(0,0,0,0.12); overflow:hidden; } .content-img p img{ display:block; width:100%; height:auto; } .estate__photo-img, .estate__map-img{ display:block; width:100%; height:auto; aspect-ratio: 16 / 10; object-fit:cover; } /* recommend */ .estate__recommend{ position:relative; padding:40px 30px 30px 30px; margin:0 0 70px; background:#f1f1f1; } .estate__recommend-tag{ position:absolute; left:50%; top:-12px; transform:translateX(-50%); display:inline-flex; align-items:center; justify-content:center; height:34px; padding:0 20px; border-radius:100vw; font-size:12px; font-weight:600; color:#fff; background:var(--COL-BROWN2); } .estate__recommend-tag.kodate{ background:var(--COL-GREEN); } .estate__recommend-text{ font-size:16px; line-height:2.0; } /* sections */ .estate__section{ padding:0 0 40px; } /*宅地*/ .estate__section-title{ margin:0 0 10px; font-size:20px; } /*戸建て*/ .estate__title.kodate { color:var(--COL-GREEN); } /* table (dl) */ .estate-table{ margin:0; padding:0; border-top:1px solid #ccc; } .estate-table__row{ display:flex; flex-wrap:wrap; gap:0; border-bottom:1px solid #ccc; padding:10px 0; } .estate-table__th{ flex:0 0 120px; margin:0; font-size:14px; font-weight: normal; } .estate__section.gaiyo .estate-table__th:before{ content: "■"; color: #666; } .estate-table__td{ flex:1 1 calc(50% - 120px); margin:0; font-size:14px; line-height:1.9; } /*１列で表示する場合*/ .estate-table__td--wide{ flex:1 1 100%; } /* footnote */ .estate__footnote{ margin:10px 0 0; font-size:12px; color:#666; } /* contact */ .estate-contact{ margin-top:18px; background:#666; color: #fff; border-radius: 5px; padding: 10px 35px 25px 35px; } .estate-contact__title{ margin-bottom: 15px; text-align:center; font-size:14px; font-weight:600; } .estate-contact__body{ display:flex; gap:40px; align-items:flex-start; justify-content:space-between; } /*採用ページにも同様ありapply*/ .apply__left, .apply__right, .estate-contact__left, .estate-contact__right{ flex:1 1 0; } .apply__place, .estate-contact__place{ font-size:18px; } .apply__addr, .apply__time, .estate-contact__addr, .estate-contact__time{ font-size:12px; line-height:1.8; letter-spacing: 0; } .apply__tel, .estate-contact__tel{ display:flex; align-items:baseline; gap:6px; justify-content:flex-start; } .apply__tel-label, .estate-contact__tel-label{ font-size:16px; } .apply__tel-num, .estate-contact__tel-num{ font-size:30px; font-family: var(--FONT-BASE-en); line-height: 1; } /*一覧へ戻るボタン*/ /*戸建て*/ .btn-center .btn__more.kodate { background: var(--COL-GREEN); color: #fff; } .btn-center .btn__more.kodate:hover { background: rgba(58, 159, 58, .9); transition: .3s; } /*宅地*/ .btn-center .btn__more.takuchi { background: var(--COL-BROWN2); color: #fff; } .btn-center .btn__more.takuchi:hover { background: rgba(166, 140, 104, .9); transition: .3s; } /* ================================= 私たちについて about ================================= */ /* ===== philosophy ===== */ .about-message__inner, .company__inner, .access__inner { width: 80%; min-width: 800px; margin: 0 auto; } .products-hero.about-page { margin-top: 0; } .products-hero__panel.about-page { position: static; top: 0; left: 0; background: none; padding: 0; width: 80%; min-width: 800px; margin: 0 auto 70px auto; } /* ===== hero ===== */ .about-hero__figure { position: relative; margin-bottom: 120px; } .about-hero__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .about-hero__caption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; } .about-hero__brand { margin-bottom: 20px; font-family: var(--FONT-BASE-en); font-size: 48px; line-height: 1; } .about-hero__sub { margin: 0; font-size: 24px; line-height: 1.7; font-family: var(--FONT-BASE-m); } /* ===== message ===== */ .about-message { width: 60%; min-width: 700px; margin: 0 auto 150px auto; } .about-message__title { margin: 0 0 20px; text-align: center; font-size: 24px; font-weight: 600; } .about-message__text p { font-size: 16px; line-height: 2.0; } /* ===== company ===== */ .company { } .company__title { margin: 0 0 20px; text-align: center; font-size: 20px; } .company__table { margin: 0 0 50px 0; padding: 0; border-top: 1px solid #ccc; } .company__row { display: flex; align-items: flex-start; gap: 18px; padding: 25px 0; border-bottom: 1px solid #ccc; } .company__th { flex: 0 0 190px; margin: 0; font-size: 14px; font-weight: 600; } .company__th:before { content: "■"; font-size: 14px; color: #666; } .company__td { flex: 1 1 auto; margin: 0; font-size: 14px; line-height: 1.9; } .company__td span{ font-size: 12px; letter-spacing: 0; padding-left: 1em; } .company__td a span { color: rgba(58, 159, 58, 1); } .company__td a:hover span{ color: rgba(58, 159, 58, 0.7); transition: .3s; } .company__link { text-decoration: none; } .company__link:hover { text-decoration: underline; } .company__list { margin: 0; padding-left: 18px; } .company__list-item { font-size: 14px; line-height: 2.5; } .btn__box--showroom.about-page{ background-color: #666; color: #fff; } .btn__box--showroom.about-page:hover{ background-color: #444; transition: .3s; } /* ===== access maps ===== */ .access { } .access__cols { display: flex; gap: 50px; align-items: stretch; margin-bottom: 40px; border-bottom: 1px solid #ccc; padding-bottom: 100px; } .access-card { flex: 1 1 0; } .access-card__title { margin: 0 0 8px; font-size: 18px; font-weight:600; } .access-card__text { margin: 0 0 20px; font-size: 14px; line-height: 1.7; } .access-card__map { width: 100%; height: 330px; } .access-card__map iframe { width: 100%; height: 100%; } .btn__box-lineup.about-page { width: 555px; margin: 0 auto 0 auto; } .btn__box-lineup.about-page .btn__box:last-child { margin-right: 0; } /* ================================= 採用情報 recruit ================================= */ .recruit-head { position: relative; } .txt-phon { width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); font-size: 24px; font-weight: 600; text-align: center; color: #fff; font-family: var(--FONT-BASE-m); letter-spacing: 0.15em; } .recruit{ } .recruit__inner{ width:80%; min-width:800px; margin:150px auto 0 auto; } .recruit__head{ text-align:center; padding:0 0 35px; } .recruit__title{ font-size:24px; font-weight:600; } .recruit__section-title{ margin:0 0 25px; text-align:center; font-size:20px; } /* ------------------------- */ /* タブ */ /* ------------------------- */ .rec__senpai { margin: 150px 0 0 0; } .rec__senpai-title { font-size: 24px; text-align: center; } .rec__senpai-lead { font-size: 16px; font-family: var(--FONT-BASE-m); text-align: center; padding: 0 30px; } .tab-container{ display: flex; justify-content: space-between; width: 85%; margin: 0 auto; padding: 0 50px 50px; } .tab-wrap { width: 100%; } .tab-area { display: flex; cursor: pointer; width: 100%; margin: 50px auto 0; } .tab { display: flex; justify-content: center; align-items: center; width: calc(100%/2); padding: 10px; background-color: var(--COL-BROWN3); border-radius: 5px 5px 0 0; } .tab ion-icon { font-size: 28px; padding-right: 7px; } .tab:nth-child(n+2) { border-left: 1px solid #fff; } .tab.active { background-color: var(--COL-GREEN); color: #fff; } /* ------------------------- */ /* タブの中身 */ /* ------------------------- */ .panel { display: none; background-color: #fff; box-shadow: 0 2px 3px #ccc inset; width: 100%; margin: 0 auto; padding: 30px; border-radius:0 0 5px 5px; } .panel p { font-size: 14px; margin-bottom: 40px; letter-spacing: 0; border-left: 1px solid #666; padding-left: 10px; color: #666; } .panel__head { display: flex; margin:40px auto; width:330px; } .panel__head ion-icon { font-size: 60px; padding-right: 30px; align-self: baseline; color: var(--COL-GREEN); } .panel-cat { font-size: 14px; font-weight: 600; color: #666; margin-top: -5px; } .panel.active { display: block; animation-name: displayAnime; animation-duration: 1s; animation-fill-mode: forwards; } .panel-ul{ margin: 0 auto; max-width: 90%; list-style-type: disc; line-height: 1.8; } @keyframes displayAnime { from { opacity: 0; } to { opacity: 1; } } .msg__body { } .msg__body dt{ color: var(--COL-GREEN); margin-bottom: 10px; border-bottom: 1px solid var(--COL-GREEN); padding-bottom: 10px; } .msg__body dd{ font-size: 14px; margin-bottom: 40px; } /* ===== table (dl) ===== */ .recruit-table{ margin:0; padding:0; border-top:1px solid #ccc; } .recruit-table__row{ display:flex; gap:18px; align-items:flex-start; padding:18px 0; border-bottom:1px solid #ccc; } .recruit-table__th{ flex:0 0 190px; margin:0; font-size:14px; font-weight: normal; } .recruit-table__td{ flex:1 1 auto; margin:0; font-size:14px; line-height:1.9; } .recruit-table__text{ margin:0 0 8px; } .recruit-table__sub{ margin:0; font-size:11px; } /* 仕事内容の箇条書き */ .recruit-table__list{ margin:8px 0 0; padding-left:18px; } .recruit-table__list-item{ margin:0 0 4px; font-size:14px; line-height:1.9; } /* 年齢の内側（1カラムにまとめる：flexのみ） */ .recruit-table__subgrid{ display:flex; flex-direction:column; gap:6px; margin-top:6px; } .recruit-table__subrow{ margin:0; font-size:14px; line-height:1.9; } .recruit-table__subkey{ display:inline-block; min-width:130px; } /* ===== apply panel (背景色なし → 枠で表現) ===== */ .apply{ width: 80%; margin: 80px auto 0 auto; background: #666; color: #fff; border-radius: 5px; } .apply__title{ text-align:center; font-size:16px; font-weight:600; padding-top: 15px; } .apply__body{ padding:10px 30px 30px 30px; } .apply__text{ margin:0; font-size:14px; line-height:2.0; } .apply__rule{ border:none; border-top:1px solid #fff; margin:14px 0; } .apply__info{ display:flex; gap:40px; align-items:flex-start; justify-content:space-between; } /* bottom link */ .recruit__link{ margin:30px 0 0; text-align:center; font-size:18px; } .recruit__link-anchor{ color: var(--COL-GREEN); } .recruit__link-anchor:hover{ color:rgba(58, 159, 58, .8); transition: 0.3s: } /* ================================= お問い合わせ form-contact ================================= */ .contact{ margin: 200px auto 0 auto; } .contact__inner{ width: 70%; min-width: 700px; margin: 0 auto; } .contact__header{ text-align: center; padding: 8px 0 28px; } .contact__title{ font-size: 32px; letter-spacing: .08em; margin-bottom: 100px; } .contact__lead{ margin: 18px 0 50px 0; line-height: 1.9; color:#666; font-size: 16px; } /* ========== Tel box ========== */ .tel-box{ width:80%; text-align: center; padding: 25px 0;; border-top: 2px dashed var(--COL-BROWN4); border-bottom: 2px dashed var(--COL-BROWN4); margin:0 auto 80px auto; } .tel-box__title{ margin: 0; font-size: 18px; color: var(--COL-BROWN4); } .tel-box__title.conf{ font-size: 24px; font-weight:600; } .tel-box__number{ font-size: 30px; font-weight: 600; letter-spacing: .08em; color: var(--COL-BROWN4); font-family: var(--FONT-BASE-en); } .tel-box__note{ font-size: 14px; color: var(--COL-BROWN4); } /* ========== Form ========== */ .contact-form{ padding-top: 8px; } .contact-form__row{ display: flex; align-items: center; gap: 26px; padding: 20px 0; } .contact-form__row.conf{ border-top:1px solid #ccc; } .contact-form__row.conf.contact-form__row--textarea { border-bottom:1px solid #ccc; } .contact-form__row--textarea{ align-items: flex-start; } /*確認画面*/ .contact__page.confirm .contact-form__row { border-top: 1px solid #ccc; } .contact__page.confirm .contact-form__label { font-weight: 600; } .contact__page.confirm .contact-form__row.contact-form__row--textarea { border-bottom: 1px solid #ccc; } .contact-form__label{ width: 230px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; color:#000; font-size: 16px; line-height: 1.4; } .contact-form__label .kakunin { font-size: 13px; } .contact-form__label-text{ display: inline-block; } .contact-form__required{ display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 18px; padding: 0 8px; border-radius: 999px; background: var(--COL-GREEN); color: #fff; font-size: 11px; line-height: 1; } .contact-form__control{ flex: 1; min-width: 0; } .contact-form__input, .contact-form__textarea{ width: 100%; border: 1px solid #ccc; background: #fff; border-radius: 5px; padding: 17px 12px; font-size: 16px; } input::placeholder, textarea::placeholder { color: #ccc; } .contact-form__input:focus, .contact-form__textarea:focus{ border-color: var(--COL-GREEN); } .contact-form__textarea{ resize: vertical; min-height: 180px; } /* ========== Checks ========== */ .checks{ display: flex; flex-wrap: wrap; width: 600px; gap: 5px 18px; } .checks__item{ display: inline-flex; align-items: center; gap: 8px; font-size: 16px; user-select: none; } .checks__input{ width: 16px; height: 16px; } /* ========== Zip ========== */ .zip{ display: flex; align-items: center; gap: 16px; } .zip__input{ max-width: 180px; } .zip__button{ border: none; background: #6f6a63; color: #fff; padding: 12px 18px; border-radius: 5px; font-size: 14px; cursor: pointer; } .zip__button:hover{ background: #5f5a54; } /* ========== Policy box (placeholder) ========== */ .policy-box{ margin-top: 22px; } /* note */ .contact-form__policy-note{ margin: 0 0 10px 0; text-align: center; color: #666; font-size: 16px; letter-spacing: 0; } .btn-priv { display: flex; width: 19em; margin: 0 auto; font-size: 18px; align-items: center; } /*インライン*/ .contact-form__policy-inline { width: 100%; height: 300px; font-size: 14px; margin: 10px 0 20px 0; overflow: auto; background: #f5f5f7; border: 2px solid #fff; border-radius: 5px; padding: 40px; color: #666; letter-spacing: 0; } .contact-form__policy-inline h4 { text-align: center; margin-bottom: 30px; font-size: 16px; } .contact-form__policy-inline p { font-size: 13px; text-align: center; margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 10px; } .contact-form__policy-inline dl dt { color: #000; font-weight: normal; letter-spacing: 0; } .contact-form__policy-inline dl dd { margin-bottom: 20px; font-weight: normal; } .contact-form__policy-inline dl dd ul{ padding-left: 1em; padding-top: 10px; } .contact-form__policy-inline dl dd .sig-name { font-weight: 600; margin-top: 10px; } .contact-form__policy-inline dl dd .sig-name span { font-size: 16px; font-weight: normal; } /*マイクロエンジン*/ .microengin { display:block; font-size:12px; text-align:center; color:#999; margin-top:15px; letter-spacing: 0; } /* ========== Captcha ========== */ .captcha{ display: flex; justify-content: center; margin: 40px 0 70px; } .captcha__inner{ width: 560px; background: #fff; border-radius: 5px; padding: 20px; } .captcha__label{ margin: 0 0 10px; font-size: 13px; color: var(--COL-BASE); display: flex; align-items: center; gap: 10px; letter-spacing: 0; } .captcha__required{ display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 18px; padding: 0 8px; border-radius: 999px; background: var(--COL-GREEN); color: #fff; font-size: 11px; } .captcha__row{ display: flex; align-items: center; gap: 14px; } .captcha__image{ width: 140px; height: 42px; border: 1px solid #ccc; background: #f3f3f3; } .captcha__input{ flex: 1; min-width: 0; border: 1px solid #ccc; border-radius: 2px; padding: 12px 12px; font-size: 14px; } /* ========== Actions ========== */ .contact-form__actions{ display: flex; justify-content: center; margin-top: 18px; padding-top: 30px; } .contact-form__submit{ width: 100%; max-width: 720px; background: var(--COL-GREEN); color: #fff; border: none; border-radius: 5px; padding: 18px 18px; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: 0.1em; cursor: pointer; } .contact-form__submit:hover{ background: rgba(58, 159, 58, 0.9); transition: .3s; } .engin-name { font-size: 12px; color: #666; text-align: right; margin-top: 20px; } /*アラート表示*/ .alert.alert-danger { font-size: 14px; line-height: 1; color: #ff1493; padding-top: 5px; display: flex; align-items: center; gap:5px; letter-spacing: 0; } .alert.alert-danger::before { content: url("../images/common/alert-circle.svg"); display: block; width: 20px; height: auto; } .alert.alert-danger.center { justify-content: center; } .alert.alert-danger.center.main { font-size: 18px; letter-spacing: 0.15em; font-weight: 600; margin-bottom: 20px; } /* ========== 確認画面　Actions ========== */ .contact-form__actions-confirm{ display: flex; justify-content: center; margin-top: 40px; } .contact-form__actions-confirm input{ width: 100%; max-width: 340px; background: #666; color: #fff; border: none; border-radius: 5px; padding: 18px 18px; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: 0.1em; cursor: pointer; } .contact-form__actions-confirm button{ width: 100%; max-width: 340px; background: var(--COL-GREEN); color: #fff; border: none; border-radius: 5px; padding: 18px 18px; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: 0.1em; cursor: pointer; } .contact-form__actions-confirm .contact-form__submit { background: var(--COL-GREEN); margin-left: 30px; } .contact-form__actions-confirm button:last-child { background: #666; margin-left: 30px; } .contact-form__actions-confirm .contact-form__back:hover{ background: #777; transition: .3s; } .contact-form__actions-confirm .contact-form__submit:hover { background:rgba(58, 159, 58, .8); } .btn__box-lineup--thanks { display: flex; justify-content: center; } .msg-send { font-size: 16px; font-weight: 600; text-align: center; color: var(--COL-BROWN); margin: 50px 0 0 0; } .lineup__index { background: #fff; width: 100%; padding: 80px 0 50px 0; position: relative; margin: 150px 0 100px 0; } .lineup__index--title{ position: absolute; top: -45px; left: 38%; font-family: var(--FONT-BASE-en); font-weight: 600; font-size: 45px; letter-spacing: 0.08em; color: var(--COL-BROWN2); z-index: 1; } .lineup__index--inner{ display: flex; width: 80%; gap:20px; margin: 0 auto; } .lineup__item p { font-size: 12px; color: #666; } .lineup__item a img:hover { filter: brightness(90%); transition: .3s; } .tel-box__title.error { color: red; }