株式会社星屋 - TOPページ デザインカンプ v1
(function(){
try {
var saved = localStorage.getItem('hoshiya-theme');
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
var initial = saved || (prefersDark ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', initial);
} catch(e) { document.documentElement.setAttribute('data-theme','light'); }
})();
/* =========================================================
RESET & BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* =========================================================
COLOR TOKENS -- ガイドライン v2 準拠
========================================================= */
:root {
/* Gold */
--gold-primary: #C9A77E;
--gold-light: #E0C9A7;
--gold-dark: #9B7F5A;
--gold-pale: #F8F1E5;
/* Grayscale */
--black: #1A1A1A;
--gray-900: #2C2C2C;
--gray-700: #555555;
--gray-500: #888888;
--gray-300: #CCCCCC;
--gray-100: #F5F5F5;
--white: #FFFFFF;
/* Semantic */
--bg-primary: var(--white);
--bg-secondary: var(--gray-100);
--bg-card: var(--white);
--bg-footer: var(--black);
--text-primary: var(--gray-900);
--text-heading: var(--black);
--text-muted: var(--gray-700);
--text-accent: var(--gold-primary);
--text-on-dark: rgba(255,255,255,0.92);
--text-on-dark-muted: rgba(255,255,255,0.7);
--border-color: var(--gray-300);
--border-accent: var(--gold-primary);
--border-soft: #E5E5E5;
/* Fonts */
--font-sans: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", system-ui, sans-serif;
--font-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
--font-en: "Cormorant Garamond", "Times New Roman", Georgia, serif;
/* Layout */
--header-h: 80px;
--header-h-sp: 60px;
--pad-x: 64px;
--pad-x-sp: 20px;
--max-w: 1440px;
}
/* DARK MODE -- 暗背景でも上品さを保つ調整 */
[data-theme="dark"] {
--bg-primary: #0F0F0F;
--bg-secondary: #1A1A1A;
--bg-card: #222222;
--bg-footer: #0A0A0A;
--text-primary: #E8E8E8;
--text-heading: #FFFFFF;
--text-muted: #AAAAAA;
--text-accent: #D4B790; /* 暗背景でも視認性のあるゴールド */
--text-on-dark: rgba(255,255,255,0.92);
--text-on-dark-muted: rgba(255,255,255,0.65);
--border-color: #333333;
--border-accent: var(--text-accent);
--border-soft: #2A2A2A;
--gold-primary: #D4B790;
--gold-dark: #BFA178;
--gold-pale: #2A241A;
}
/* テーマ切替時の遷移 */
html, body, .gheader, .work, .news, .dual-tile, .gfooter,
.fab, .fab-bar, .theme-toggle, .mobile-menu {
transition:
background-color 0.35s ease,
color 0.35s ease,
border-color 0.35s ease;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
color: var(--text-primary);
background: var(--bg-primary);
line-height: 2;
font-size: 15px;
font-weight: 400;
letter-spacing: 0.04em;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.wrap {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--pad-x);
}
/* =========================================================
SECTION COMMON
========================================================= */
section { padding: 128px 0; }
/* セクションラベル: Cormorant Garamond + ゴールド + 大きな ls */
.sec-label {
font-family: var(--font-en);
font-size: 12px;
letter-spacing: 0.3em;
color: var(--text-accent);
margin-bottom: 24px;
font-weight: 400;
text-transform: uppercase;
}
/* 英文ディスプレイ見出し */
.sec-title {
font-family: var(--font-en);
font-size: clamp(36px, 5vw, 48px);
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.1;
color: var(--text-heading);
margin-bottom: 12px;
}
/* 日本語サブ見出し */
.sec-title-jp {
font-family: var(--font-serif);
font-size: 14px;
letter-spacing: 0.3em;
color: var(--text-muted);
margin-bottom: 80px;
font-weight: 400;
}
/* ゴールド細線 装飾 */
.gold-line {
width: 60px;
height: 1px;
background: var(--gold-primary);
display: inline-block;
vertical-align: middle;
}
/* テキストリンク（→ 付き） */
.txt-link {
display: inline-block;
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.25em;
color: var(--text-accent);
border-bottom: 1px solid var(--border-accent);
padding-bottom: 6px;
transition: opacity 0.2s ease, color 0.2s ease;
}
.txt-link:hover { opacity: 0.7; }
/* 写真プレースホルダー（仕様: グレー矩形のまま維持） */
.ph {
background: #C9C9C9;
color: #555555;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.15em;
text-align: center;
background-image: repeating-linear-gradient(
135deg,
rgba(255,255,255,0) 0,
rgba(255,255,255,0) 14px,
rgba(255,255,255,0.35) 14px,
rgba(255,255,255,0.35) 15px
);
}
/* ダーク時はプレースホルダーを少し落ち着いた色味に */
[data-theme="dark"] .ph {
background-color: #4A4A4A;
color: rgba(255,255,255,0.7);
background-image: repeating-linear-gradient(
135deg,
rgba(255,255,255,0) 0,
rgba(255,255,255,0) 14px,
rgba(255,255,255,0.10) 14px,
rgba(255,255,255,0.10) 15px
);
}
/* =========================================================
HEADER
========================================================= */
.gheader {
position: fixed;
top: 0; left: 0;
width: 100%;
height: var(--header-h);
z-index: 100;
background: transparent;
color: var(--white);
border-bottom: 1px solid transparent;
}
.gheader.is-scrolled {
background: var(--bg-primary);
color: var(--text-primary);
border-bottom: 1px solid var(--border-soft);
}
[data-theme="dark"] .gheader.is-scrolled {
background: rgba(15,15,15,0.96);
backdrop-filter: blur(8px);
}
.gheader-inner {
height: 100%;
width: 100%;
padding: 0 var(--pad-x);
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
order: 2;
display: inline-flex;
align-items: center;
height: 100%;
}
.logo img {
height: 48px;
width: auto;
display: block;
transition: opacity 0.2s ease;
}
.logo:hover img { opacity: 0.85; }
/* 透過ヒーロー上ではロゴをホワイト風に（ロゴ画像がゴールドと前提だが念のため） */
.gheader:not(.is-scrolled) .logo img {
filter: brightness(0) invert(1); /* ヒーロー透過時は白抜き */
}
.gnav { order: 1; }
.gnav ul { display: flex; gap: 40px; }
.gnav a {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.25em;
padding: 4px 0;
transition: color 0.2s ease, opacity 0.2s ease;
position: relative;
}
.gnav a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 1px;
background: var(--gold-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.gnav a:hover::after { transform: scaleX(1); }
/* ハンバーガー（SP） */
.hamb {
display: none;
width: 32px;
height: 32px;
position: relative;
order: 1;
}
.hamb span {
position: absolute;
left: 4px;
width: 24px;
height: 1px;
background: currentColor;
transition: transform 0.3s, opacity 0.3s, top 0.3s;
}
.hamb span:nth-child(1) { top: 11px; }
.hamb span:nth-child(2) { top: 17px; }
.hamb span:nth-child(3) { top: 23px; }
body.menu-open .hamb span:nth-child(1) { top: 17px; transform: rotate(45deg); }
body.menu-open .hamb span:nth-child(2) { opacity: 0; }
body.menu-open .hamb span:nth-child(3) { top: 17px; transform: rotate(-45deg); }
.mobile-menu {
display: none;
position: fixed;
inset: 0;
background: var(--bg-primary);
color: var(--text-primary);
z-index: 99;
padding: calc(var(--header-h-sp) + 32px) var(--pad-x-sp) 32px;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
overflow-y: auto;
}
body.menu-open .mobile-menu {
opacity: 1;
pointer-events: auto;
}
.mobile-menu ul li { border-bottom: 1px solid var(--border-soft); }
.mobile-menu ul a, .mobile-menu .theme-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 4px;
font-family: var(--font-sans);
font-size: 14px;
letter-spacing: 0.25em;
color: var(--text-primary);
}
.mobile-menu .theme-row {
cursor: pointer;
width: 100%;
text-align: left;
}
.mobile-menu .theme-row .icon { display: inline-flex; align-items: center; justify-content: center; }
.mobile-menu .theme-row .label-state { color: var(--text-muted); font-size: 12px; }
/* =========================================================
01. HERO
========================================================= */
.hero {
position: relative;
height: 100vh;
min-height: 600px;
padding: 0;
color: var(--white);
overflow: hidden;
}
.hero .ph {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-color: #5C5C5C;
color: rgba(255,255,255,0.6);
background-image: repeating-linear-gradient(
135deg,
rgba(255,255,255,0) 0,
rgba(255,255,255,0) 22px,
rgba(255,255,255,0.10) 22px,
rgba(255,255,255,0.10) 23px
);
font-size: 14px;
letter-spacing: 0.2em;
}
/* テキスト可読性のためのダークオーバーレイ */
.hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.15) 0%,
rgba(0,0,0,0.3) 60%,
rgba(0,0,0,0.55) 100%
);
pointer-events: none;
z-index: 1;
}
.hero-copy {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 0 var(--pad-x) 18vh;
}
.hero-copy h1 {
font-family: var(--font-serif);
font-size: clamp(32px, 5vw, 56px);
font-weight: 300;
letter-spacing: 0.08em;
line-height: 1.4;
margin-bottom: 24px;
color: var(--white);
}
.hero-copy .sub {
font-family: var(--font-en);
font-size: clamp(13px, 1.1vw, 16px);
letter-spacing: 0.35em;
color: rgba(255,255,255,0.85);
font-weight: 400;
}
.scroll-guide {
position: absolute;
z-index: 2;
left: var(--pad-x);
bottom: 32px;
font-family: var(--font-en);
font-size: 11px;
letter-spacing: 0.4em;
color: var(--white);
text-align: left;
}
.scroll-guide .arrow {
display: block;
width: 1px;
height: 56px;
background: var(--white);
margin: 12px 0 0;
position: relative;
animation: scroll-down 2.4s ease-in-out infinite;
transform-origin: top;
}
@keyframes scroll-down {
0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
50% { transform: scaleY(1); opacity: 1; }
}
/* =========================================================
02. PICKUP
========================================================= */
.pickup { padding: 128px 0 0; background: var(--bg-primary); }
.pickup-head {
margin-bottom: 80px;
padding: 0 var(--pad-x);
max-width: var(--max-w);
margin-left: auto;
margin-right: auto;
}
.pickup-label-row {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid var(--border-color);
padding-bottom: 24px;
}
.pickup-label-row .sec-label { margin: 0; }
.pickup-label-row .sec-label.jp {
font-family: var(--font-serif);
color: var(--text-muted);
letter-spacing: 0.25em;
text-transform: none;
}
.work {
width: 100%;
background: var(--bg-secondary);
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
padding: 96px 0;
}
.work + .work { border-top: none; }
.work:nth-child(even) { background: var(--bg-primary); }
.work-row {
display: grid;
grid-template-columns: minmax(280px, 22%) 1fr;
gap: 0;
align-items: stretch;
min-height: 380px;
}
.work-info {
padding: 0 32px 0 var(--pad-x);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.work-year {
font-family: var(--font-en);
font-size: 14px;
letter-spacing: 0.2em;
color: var(--text-accent);
margin-bottom: 12px;
font-weight: 400;
}
.work-name {
font-family: var(--font-serif);
font-size: clamp(20px, 1.8vw, 24px);
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1.6;
color: var(--text-heading);
margin-bottom: 8px;
}
.work-loc {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.25em;
color: var(--text-muted);
margin-bottom: 32px;
}
.work-controls {
display: flex;
align-items: center;
gap: 14px;
}
.work-controls button {
width: 44px;
height: 44px;
border: 1px solid var(--gold-primary);
border-radius: 999px;
font-family: var(--font-en);
font-size: 14px;
color: var(--gold-dark);
background: transparent;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.work-controls button:hover {
background: var(--gold-primary);
color: var(--white);
}
[data-theme="dark"] .work-controls button { color: var(--gold-primary); }
[data-theme="dark"] .work-controls button:hover { color: var(--black); }
.work-counter-text {
font-family: var(--font-en);
font-size: 12px;
letter-spacing: 0.2em;
color: var(--text-muted);
margin-left: 8px;
}
.work-carousel { overflow: hidden; position: relative; }
.work-track {
display: flex;
gap: 16px;
transition: transform 0.5s ease;
height: 100%;
}
.work-slide {
flex: 0 0 auto;
width: 480px;
height: 380px;
}
.work-slide .ph { width: 100%; height: 100%; }
.work-slide.is-tall { width: 320px; }
.work-slide.is-wide { width: 560px; }
.pickup-more {
text-align: center;
padding: 96px var(--pad-x);
background: var(--bg-primary);
}
/* =========================================================
03. ABOUT
========================================================= */
.about {
position: relative;
padding: 0;
height: 100vh;
min-height: 600px;
color: var(--white);
overflow: hidden;
}
.about .ph {
position: absolute;
inset: 0;
background-color: #6E6E6E;
color: rgba(255,255,255,0.65);
background-image: repeating-linear-gradient(
135deg,
rgba(255,255,255,0) 0,
rgba(255,255,255,0) 22px,
rgba(255,255,255,0.10) 22px,
rgba(255,255,255,0.10) 23px
);
}
.about::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.35));
pointer-events: none;
z-index: 1;
}
.about-inner {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 var(--pad-x);
max-width: var(--max-w);
margin: 0 auto;
}
.about-inner .sec-label {
color: var(--gold-light);
}
.about-inner h2 {
font-family: var(--font-serif);
font-size: clamp(24px, 3.2vw, 40px);
font-weight: 300;
letter-spacing: 0.12em;
line-height: 1.8;
margin-bottom: 32px;
max-width: 900px;
color: var(--white);
}
.about-body {
font-family: var(--font-sans);
font-size: clamp(14px, 1vw, 15px);
line-height: 2.2;
letter-spacing: 0.05em;
max-width: 720px;
margin-bottom: 40px;
color: rgba(255,255,255,0.92);
font-weight: 300;
}
.about-inner .txt-link {
color: var(--white);
border-bottom-color: rgba(255,255,255,0.7);
}
.about-inner .txt-link:hover { opacity: 0.8; }
/* =========================================================
04. NEWS
========================================================= */
.news { padding: 128px 0; background: var(--bg-primary); }
.news-list {
border-top: 1px solid var(--border-soft);
margin-bottom: 48px;
}
.news-item {
display: grid;
grid-template-columns: 160px 140px 1fr;
gap: 32px;
align-items: center;
padding: 32px 8px;
border-bottom: 1px solid var(--border-soft);
transition: opacity 0.2s ease, background-color 0.2s ease;
}
.news-item:hover { opacity: 0.7; }
.news-item .date {
font-family: var(--font-en);
font-size: 14px;
color: var(--text-accent);
letter-spacing: 0.15em;
}
.news-item .cat {
display: inline-block;
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: 0.25em;
border: 1px solid var(--border-color);
padding: 5px 12px;
text-align: center;
color: var(--text-muted);
width: fit-content;
}
.news-item .title {
font-family: var(--font-sans);
font-size: 15px;
letter-spacing: 0.05em;
color: var(--text-heading);
font-weight: 400;
}
.news-foot { text-align: right; }
/* =========================================================
05. DUAL CTA
========================================================= */
.dual-cta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0;
}
.dual-tile {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
aspect-ratio: 16 / 9;
overflow: hidden;
color: var(--white);
transition: opacity 0.3s ease;
}
.dual-tile .ph {
position: absolute;
inset: 0;
background-color: #5E5E5E;
color: rgba(255,255,255,0.6);
background-image: repeating-linear-gradient(
135deg,
rgba(255,255,255,0) 0,
rgba(255,255,255,0) 22px,
rgba(255,255,255,0.10) 22px,
rgba(255,255,255,0.10) 23px
);
}
.dual-tile:nth-child(2) .ph { background-color: #4A4A4A; }
.dual-tile::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.42);
transition: background-color 0.3s ease;
pointer-events: none;
}
.dual-tile:hover::after { background: rgba(0,0,0,0.55); }
.dual-tile-inner {
position: relative;
z-index: 2;
padding: 32px;
max-width: 480px;
}
.dual-tile h3 {
font-family: var(--font-serif);
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 400;
letter-spacing: 0.18em;
margin-bottom: 24px;
color: var(--white);
}
.dual-tile p {
font-family: var(--font-sans);
font-size: 13px;
line-height: 2;
margin-bottom: 32px;
color: rgba(255,255,255,0.92);
font-weight: 300;
}
/* ホワイト枠線ボタン風 link */
.dual-tile .tile-link {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.25em;
padding: 14px 28px;
border: 1px solid rgba(255,255,255,0.85);
transition: background 0.3s ease, color 0.3s ease;
}
.dual-tile:hover .tile-link {
background: var(--white);
color: var(--black);
}
.dual-tile .tile-link .arrow-circle {
width: 22px;
height: 22px;
border: 1px solid currentColor;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
transition: background 0.3s ease, color 0.3s ease;
}
/* =========================================================
FOOTER
========================================================= */
.gfooter {
background: var(--bg-footer);
color: rgba(255,255,255,0.85);
padding: 96px 0 40px;
text-align: center;
}
.gfooter .logo {
display: inline-flex;
margin: 0 auto 56px;
height: 32px;
}
.gfooter .logo img {
height: 32px;
width: auto;
/* ロゴはゴールド前提だが、フッターで明るめに見せたい場合のフィルタ調整は不要 */
}
.footer-nav ul {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
margin-bottom: 56px;
}
.footer-nav a {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.3em;
color: rgba(255,255,255,0.85);
transition: color 0.2s ease;
}
.footer-nav a:hover { color: var(--gold-light); }
.footer-related {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.7);
margin-bottom: 56px;
}
.footer-related .lbl {
display: block;
font-family: var(--font-en);
margin-bottom: 16px;
color: var(--gold-primary);
letter-spacing: 0.3em;
font-size: 11px;
}
.footer-related a {
border-bottom: 1px solid rgba(255,255,255,0.4);
padding-bottom: 2px;
margin: 0 12px;
transition: opacity 0.2s ease;
}
.footer-related a:hover { opacity: 0.7; }
.copyright {
font-family: var(--font-en);
font-size: 11px;
letter-spacing: 0.3em;
color: rgba(255,255,255,0.5);
border-top: 1px solid rgba(255,255,255,0.12);
padding-top: 32px;
}
/* =========================================================
固定CTA + テーマトグル
========================================================= */
.fab {
position: fixed;
right: 32px;
bottom: 32px;
z-index: 90;
background: var(--gold-primary);
color: var(--white);
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.3em;
padding: 18px 30px;
box-shadow: 0 8px 24px rgba(155,127,90,0.28);
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
border: 1px solid var(--gold-primary);
}
.fab:hover {
background: var(--gold-dark);
border-color: var(--gold-dark);
}
[data-theme="dark"] .fab { color: var(--black); }
[data-theme="dark"] .fab:hover { background: var(--gold-light); border-color: var(--gold-light); }
.fab-bar {
display: none;
position: fixed;
left: 0; right: 0;
bottom: 0;
background: var(--gold-primary);
color: var(--white);
text-align: center;
padding: 18px;
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: 0.25em;
z-index: 90;
}
[data-theme="dark"] .fab-bar { color: var(--black); }
/* テーマトグル: PC では右下 CONTACT ボタンの上に配置 */
.theme-toggle {
position: fixed;
right: 32px;
bottom: 96px; /* fab の上 */
z-index: 91;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border-color);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(0,0,0,0.10);
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.theme-toggle:hover {
transform: translateY(-2px);
border-color: var(--gold-primary);
color: var(--gold-primary);
}
.theme-toggle svg { width: 20px; height: 20px; }
/* アイコン切替 */
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }
/* =========================================================
FADE IN
========================================================= */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.is-visible {
opacity: 1;
transform: translateY(0);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1280px) {
:root { --pad-x: 48px; }
section { padding: 96px 0; }
}
@media (max-width: 1024px) {
:root { --pad-x: 40px; }
section { padding: 80px 0; }
.work { padding: 80px 0; }
}
@media (max-width: 768px) {
:root { --pad-x: var(--pad-x-sp); }
body { font-size: 14px; padding-bottom: 56px; }
section, .pickup, .news { padding: 80px 0; }
.gheader { height: var(--header-h-sp); }
.gheader-inner { padding: 0 var(--pad-x-sp); }
.gnav { display: none; }
.hamb { display: block; }
.mobile-menu { display: block; }
.logo img { height: 32px; }
.sec-title { font-size: 32px; }
.sec-title-jp { margin-bottom: 48px; font-size: 13px; }
.hero { min-height: 520px; }
.hero-copy { padding: 0 var(--pad-x-sp) 14vh; }
.hero-copy h1 {
font-size: 24px;
line-height: 1.7;
letter-spacing: 0.08em;
}
.hero-copy .sub { font-size: 11px; letter-spacing: 0.3em; }
.scroll-guide { left: var(--pad-x-sp); }
.scroll-guide .arrow { height: 36px; }
.pickup { padding: 80px 0 0; }
.pickup-head { margin-bottom: 32px; }
.work { padding: 56px 0; }
.work-row {
grid-template-columns: 1fr;
gap: 24px;
min-height: auto;
}
.work-info { padding: 0 var(--pad-x-sp); }
.work-name { font-size: 20px; }
.work-loc { margin-bottom: 16px; }
.work-controls button { width: 40px; height: 40px; }
.work-carousel {
padding-left: var(--pad-x-sp);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.work-carousel::-webkit-scrollbar { display: none; }
.work-track {
transform: none !important;
gap: 8px;
height: auto;
}
.work-slide,
.work-slide.is-tall,
.work-slide.is-wide {
width: 75vw;
max-width: 360px;
height: 240px;
}
.pickup-more { padding: 56px var(--pad-x-sp); }
.about { height: 80vh; min-height: 460px; }
.about-inner {
justify-content: center;
padding: 0 var(--pad-x-sp);
}
.about-inner h2 { font-size: 20px; line-height: 2; letter-spacing: 0.1em; }
.news-item {
grid-template-columns: 1fr;
gap: 8px;
padding: 24px 4px;
}
.news-item .date { font-size: 13px; }
.news-item .cat { font-size: 9px; padding: 3px 8px; }
.dual-cta { grid-template-columns: 1fr; }
.dual-tile { aspect-ratio: 4 / 3; }
.dual-tile h3 { font-size: 20px; letter-spacing: 0.15em; margin-bottom: 16px; }
.dual-tile p { font-size: 12px; margin-bottom: 24px; }
.dual-tile-inner { padding: 24px; }
.gfooter { padding: 64px 0 32px; }
.footer-nav ul { gap: 20px 28px; }
.fab { display: none; }
.fab-bar { display: block; }
.theme-toggle { display: none; } /* SP ではハンバーガー内に配置 */
}
@media (max-width: 414px) {
.hero-copy h1 { font-size: 21px; }
}
/* prefers-reduced-motion: アニメーションを抑制 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.fade-in { opacity: 1; transform: none; }
}
写真: ヒーロー画像（建築物・全画面）
未来へ受け継がれる景色をつくる。
HOSHIYA Architecture & Design
SCROLL
2024
Amber Echoland
白馬 / HAKUBA
images 1 / 16
写真01: Amber Echoland 外観メイン
2023
Amber MIZUHO
白馬 / HAKUBA
images 1 / 12
2023
星屋旅館 晴博
京都 / KYOTO
images 1 / 14
2022
星屋旅館 東山望月居
京都 / KYOTO
images 1 / 10
写真: 建築物の俯瞰（全幅・背景）
02 — ABOUT
私たちは、
三方よしの精神で
建築をつくる。
白馬の山岳に佇む Amber Echoland、京都・嵐山に息づく星屋旅館 晴博、東山に月を望む望月居。
それぞれの土地に固有の物語があり、私たちはその物語を建築のかたちに翻訳する。
設計から施工管理まで一貫して手がけることで、図面だけでは伝わらない細部まで、思想を貫く。
三方よしの精神は、星屋の建築の出発点です。
会社案内を見る
04 — INFORMATION
News
お知らせ
CONTACT
お問い合わせ
(function() {
/* ヘッダー: スクロールで透過→白背景 */
var header = document.getElementById('gheader');
var hero = document.getElementById('hero');
function onScroll() {
var threshold = (hero ? hero.offsetHeight - 80 : 80);
if (window.scrollY > threshold) header.classList.add('is-scrolled');
else header.classList.remove('is-scrolled');
}
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
/* SP: ハンバーガー */
var hamb = document.getElementById('hamb');
hamb.addEventListener('click', function() {
document.body.classList.toggle('menu-open');
var open = document.body.classList.contains('menu-open');
hamb.setAttribute('aria-expanded', open ? 'true' : 'false');
});
document.querySelectorAll('#mobileMenu [data-close]').forEach(function(a) {
a.addEventListener('click', function() {
document.body.classList.remove('menu-open');
hamb.setAttribute('aria-expanded', 'false');
});
});
/* PICKUP: 各 work のカルーセル制御（左右ボタンで横スクロール） */
document.querySelectorAll('.work').forEach(function(work) {
var carousel = work.querySelector('[data-carousel]');
var track = work.querySelector('.work-track');
var prev = work.querySelector('[data-dir="-1"]');
var next = work.querySelector('[data-dir="1"]');
var counter = work.querySelector('.work-counter-text');
var slides = work.querySelectorAll('.work-slide');
if (!track || !slides.length) return;
var idx = 0;
var total = slides.length;
function isMobile() {
return window.matchMedia('(max-width: 768px)').matches;
}
function update() {
if (isMobile()) {
track.style.transform = '';
return;
}
// 該当スライドの left オフセット分シフト
var offset = slides[idx].offsetLeft;
track.style.transform = 'translateX(' + (-offset) + 'px)';
if (counter) {
var totalText = counter.textContent.split('/')[1] || ' ' + total;
counter.textContent = 'images ' + (idx + 1) + ' /' + totalText;
}
}
function move(dir) {
idx = (idx + dir + total) % total;
update();
}
if (prev) prev.addEventListener('click', function() { move(-1); });
if (next) next.addEventListener('click', function() { move(1); });
window.addEventListener('resize', update);
update();
});
/* フェードイン */
var io = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible');
io.unobserve(entry.target);
}
});
}, { threshold: 0.12 });
document.querySelectorAll('.fade-in').forEach(function(el) { io.observe(el); });
/* =========================================================
THEME TOGGLE (light / dark)
─ OS設定に追従、localStorage に保存
========================================================= */
function getCurrentTheme() {
return document.documentElement.getAttribute('data-theme') || 'light';
}
function applyTheme(t) {
document.documentElement.setAttribute('data-theme', t);
try { localStorage.setItem('hoshiya-theme', t); } catch(e) {}
var label = document.getElementById('themeLabel');
if (label) label.textContent = (t === 'dark' ? 'ダーク' : 'ライト');
}
function toggleTheme() {
applyTheme(getCurrentTheme() === 'dark' ? 'light' : 'dark');
}
/* 初期ラベル */
(function(){
var label = document.getElementById('themeLabel');
if (label) label.textContent = (getCurrentTheme() === 'dark' ? 'ダーク' : 'ライト');
})();
var btnPc = document.getElementById('themeToggle');
var btnSp = document.getElementById('themeToggleSp');
if (btnPc) btnPc.addEventListener('click', toggleTheme);
if (btnSp) btnSp.addEventListener('click', toggleTheme);
/* OS のテーマ設定が変わった場合（ユーザーが localStorage で固定していなければ追従） */
if (window.matchMedia) {
var mql = window.matchMedia('(prefers-color-scheme: dark)');
var onChange = function(e) {
var saved = null;
try { saved = localStorage.getItem('hoshiya-theme'); } catch(_) {}
if (!saved) applyTheme(e.matches ? 'dark' : 'light');
};
if (mql.addEventListener) mql.addEventListener('change', onChange);
else if (mql.addListener) mql.addListener(onChange);
}
})();
