@charset "utf-8";

/* ============================================
   ATELIER Onn 総合サイト スタイルシート
   （旧デザインの style.css は下層ページ用に残置）
   ============================================ */

:root{
	--paper:   #f7f4ec;
	--paper-2: #efeadd;
	--ink:     #3a3630;
	--ink-soft:#6b6559;
	--olive:   #6e7955;
	--olive-d: #4f593c;
	--beige:   #dcd3b2;
	--akane:   #8f2e14;
	--line:    #d8d2c2;
	--shadow:  0 2px 14px rgba(58,54,48,.10);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
	margin:0;
	background:var(--paper);
	background-image:url(img/back3.png);
	background-attachment:fixed;
	color:var(--ink);
	font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
	line-height:1.9;
	letter-spacing:.02em;
}

img{ max-width:100%; height:auto; }

a{ color:var(--olive-d); text-decoration:none; transition:.25s; }
a:hover{ color:var(--akane); }

.serif, h1, h2, h3{
	font-family:"Shippori Mincho","解ミン 月 B","Kaimin Tsuki Bold","Hiragino Mincho ProN",serif;
	font-weight:600;
	letter-spacing:.08em;
}

/* ---------- ヘッダー ---------- */
.site-header{
	position:sticky;
	top:0;
	z-index:50;
	background:rgba(247,244,236,.92);
	backdrop-filter:blur(6px);
	border-bottom:1px solid var(--line);
}
.site-header .inner{
	max-width:1080px;
	margin:0 auto;
	padding:.6em 1em;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1em;
	flex-wrap:wrap;
}
.brand{
	font-family:"Shippori Mincho",serif;
	font-size:1.25rem;
	letter-spacing:.14em;
	color:var(--ink);
}
.brand small{
	display:block;
	font-size:.62rem;
	letter-spacing:.3em;
	color:var(--olive);
}
.global-nav{ display:flex; gap:1.4em; flex-wrap:wrap; }
.global-nav a{
	font-size:.88rem;
	letter-spacing:.12em;
	padding:.2em 0;
	border-bottom:2px solid transparent;
}
.global-nav a:hover{ border-bottom-color:var(--akane); }

/* ---------- ヒーロー ---------- */
.hero{
	text-align:center;
	padding:4.5em 1em 3em;
}
.hero .title{
	font-family:"Shippori Mincho",serif;
	font-size:clamp(2.4rem, 7vw, 4.2rem);
	letter-spacing:.18em;
	margin:0;
	color:var(--ink);
}
.hero .title span{ color:var(--olive); }
.hero .tagline{
	margin:1.2em auto 0;
	max-width:34em;
	color:var(--ink-soft);
	font-size:.95rem;
	letter-spacing:.14em;
}
.hero .hero-img{
	margin-top:2em;
	height:180px;
	width:auto;
	filter:drop-shadow(0 4px 10px rgba(58,54,48,.15));
}
.hero .divider{
	width:72px;
	border:none;
	border-top:2px solid var(--beige);
	margin:2em auto 0;
}

/* ---------- セクション共通 ---------- */
.section{
	max-width:1080px;
	margin:0 auto;
	padding:3.5em 1em;
}
.section-title{
	text-align:center;
	font-size:1.5rem;
	margin:0 0 .3em;
}
.section-title .en{
	display:block;
	font-size:.68rem;
	letter-spacing:.32em;
	color:var(--olive);
	font-family:"Zen Kaku Gothic New",sans-serif;
	margin-bottom:.4em;
}
.section-lead{
	text-align:center;
	color:var(--ink-soft);
	font-size:.92rem;
	max-width:36em;
	margin:0 auto 2.4em;
}

/* ---------- カードグリッド ---------- */
.card-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
	gap:1.4em;
}
.card{
	background:#fffdf7;
	border:1px solid var(--line);
	border-radius:12px;
	overflow:hidden;
	box-shadow:var(--shadow);
	display:flex;
	flex-direction:column;
	transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{
	transform:translateY(-5px);
	box-shadow:0 10px 24px rgba(58,54,48,.18);
	color:inherit;
}
.card .thumb{
	background:var(--paper-2);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:1.2em;
	height:190px;
}
.card .thumb img{
	max-height:100%;
	width:auto;
	transition:transform .4s ease;
}
.card:hover .thumb img{ transform:scale(1.06); }
.card .body{
	padding:1em 1.2em 1.3em;
	flex:1;
}
.card .body h3{
	margin:0 0 .35em;
	font-size:1.02rem;
}
.card .body p{
	margin:0;
	font-size:.82rem;
	color:var(--ink-soft);
	line-height:1.7;
}
.card .tag{
	display:inline-block;
	font-size:.68rem;
	letter-spacing:.14em;
	color:var(--olive-d);
	background:var(--beige);
	border-radius:999px;
	padding:.1em .9em;
	margin-bottom:.6em;
}

/* ---------- About ---------- */
.about-box{
	background:#fffdf7;
	border:1px solid var(--line);
	border-radius:12px;
	box-shadow:var(--shadow);
	padding:2em 2.2em;
	max-width:760px;
	margin:0 auto;
	font-size:.95rem;
}

/* ---------- ギャラリーページ ---------- */
.page-hero{
	text-align:center;
	padding:3em 1em 1em;
}
.page-hero h1{
	font-size:clamp(1.5rem, 4vw, 2.1rem);
	margin:0 0 .3em;
}
.page-hero .en{
	display:block;
	font-size:.68rem;
	letter-spacing:.32em;
	color:var(--olive);
	font-family:"Zen Kaku Gothic New",sans-serif;
	margin-bottom:.5em;
}
.page-note{
	max-width:720px;
	margin:0 auto;
	padding:0 1em;
	color:var(--ink-soft);
	font-size:.92rem;
	text-align:left;
}
.gallery{
	max-width:1080px;
	margin:2.5em auto;
	padding:0 1em;
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
	gap:1.6em;
}
.work{
	background:#fffdf7;
	border:1px solid var(--line);
	border-radius:12px;
	overflow:hidden;
	box-shadow:var(--shadow);
}
.work img{
	display:block;
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
	transition:transform .4s ease;
}
.work:hover img{ transform:scale(1.04); }
.work figcaption{
	padding:.9em 1.1em 1.1em;
	font-size:.8rem;
	color:var(--ink-soft);
	line-height:1.7;
}
.work figcaption b{
	display:block;
	font-family:"Shippori Mincho",serif;
	font-size:.95rem;
	color:var(--ink);
	margin-bottom:.2em;
}

/* ---------- 日記の記事一覧 ---------- */
.diary-hero{
	max-width:880px;
	margin:0 auto 2.5em;
	padding:0 1em;
}
.diary-hero img{
	display:block;
	width:100%;
	border-radius:12px;
	border:1px solid var(--line);
	box-shadow:var(--shadow);
}
.area{
	max-width:880px;
	margin:0 auto 2.8em;
	padding:0 1em;
}
.area-title{
	font-size:1.15rem;
	border-left:5px solid var(--olive);
	padding:.15em 0 .15em .7em;
	margin:0 0 .4em;
}
.area-note{
	margin:.2em 0 1.1em;
	font-size:.88rem;
	color:var(--ink-soft);
}
.entry-list{
	list-style:none;
	margin:0;
	padding:0;
}
.entry-list li{
	margin-bottom:.6em;
}
.entry-list a{
	display:block;
	background:#fffdf7;
	border:1px solid var(--line);
	border-radius:8px;
	box-shadow:var(--shadow);
	padding:.75em 1.2em;
	line-height:1.6;
	transition:transform .25s ease, box-shadow .25s ease;
}
.entry-list a:hover{
	transform:translateX(4px);
	box-shadow:0 6px 16px rgba(58,54,48,.16);
}
.entry-list .date{
	display:inline-block;
	min-width:7.5em;
	font-size:.78rem;
	letter-spacing:.08em;
	color:var(--olive-d);
}
.entry-list .desc{
	display:block;
	font-size:.8rem;
	color:var(--ink-soft);
}

/* ---------- 日記の記事ページ（1カラム） ---------- */
.article-date{
	text-align:center;
	color:var(--ink-soft);
	font-size:.85rem;
	letter-spacing:.14em;
	margin:.4em 0 0;
}
.article{
	width:min(760px, calc(100% - 2em));
	margin:2em auto;
	padding:1.8em 2em;
	background:#fffdf7;
	border:1px solid var(--line);
	border-radius:12px;
	box-shadow:var(--shadow);
	font-size:.95rem;
}
.article p{ margin:1em 0; }
.article figure{ margin:1.8em 0; text-align:center; }
.article figure img{
	max-width:100%;
	height:auto;
	border-radius:8px;
	box-shadow:var(--shadow);
}
.article figcaption{
	font-size:.75rem;
	color:var(--ink-soft);
	margin-top:.5em;
	letter-spacing:.08em;
}
.quote-box{
	margin:1.8em 0;
	padding:1.2em 1.5em;
	background:var(--paper-2);
	border-left:4px solid var(--olive);
	border-radius:0 8px 8px 0;
	font-size:.88rem;
	line-height:2;
}
.quote-box p{ margin:.6em 0; }
.aside-note{
	display:flex;
	gap:1.2em;
	align-items:center;
	background:var(--paper-2);
	border-radius:10px;
	padding:1em 1.2em;
	margin:0 0 1.6em;
}
.aside-note img{
	width:120px;
	flex-shrink:0;
	border-radius:8px;
}
.aside-note p{ margin:0; font-size:.82rem; color:var(--ink-soft); }
.pn-nav{
	display:flex;
	justify-content:space-between;
	gap:1em;
	width:min(760px, calc(100% - 2em));
	margin:1.5em auto;
	font-size:.88rem;
}
.pn-nav a{
	background:#fffdf7;
	border:1px solid var(--line);
	border-radius:999px;
	padding:.45em 1.4em;
	box-shadow:var(--shadow);
}
.ref-box{
	width:min(760px, calc(100% - 2em));
	margin:1.5em auto;
	padding:1.2em 2em;
	background:rgba(220,211,178,.28);
	border:1px solid var(--line);
	border-radius:12px;
	font-size:.85rem;
}
.ref-box h2{
	font-size:.98rem;
	margin:.4em 0 .5em;
}
.ref-box ul{ margin:.4em 0 1em; padding-left:1.3em; }
.ref-box li{ margin:.25em 0; }

/* ---------- リンク一覧のグループ見出し ---------- */
.group-head{
	max-width:1080px;
	margin:2em auto .8em;
	font-size:1.05rem;
	border-left:5px solid var(--olive);
	padding:.1em 0 .1em .7em;
}
.card .url{
	display:block;
	font-size:.72rem;
	color:var(--olive-d);
	letter-spacing:.04em;
	margin-top:.4em;
	word-break:break-all;
}

/* ---------- 共有ボタン ---------- */
.share-block{
	text-align:center;
	margin:2.5em auto 1.5em;
	padding:0 1em;
}
.share-label{
	font-size:.78rem;
	letter-spacing:.22em;
	color:var(--ink-soft);
	margin:0 0 1em;
}
.share-buttons{
	display:flex;
	justify-content:center;
	gap:.7em;
	flex-wrap:wrap;
}
.share-btn{
	display:inline-block;
	padding:.5em 1.7em;
	border:1px solid var(--olive);
	border-radius:999px;
	color:var(--olive-d);
	background:#fffdf7;
	font-family:inherit;
	font-size:.85rem;
	letter-spacing:.15em;
	cursor:pointer;
	transition:.3s ease;
	box-shadow:var(--shadow);
}
.share-btn:hover{
	background:var(--olive);
	color:#fffdf7;
}

/* ---------- 戻るリンク・フッター ---------- */
.back-link{
	display:block;
	text-align:center;
	margin:2em auto 0;
	font-size:.88rem;
	letter-spacing:.12em;
}
.site-footer{
	margin-top:3em;
	border-top:1px solid var(--line);
	background:rgba(220,211,178,.35);
	text-align:center;
	padding:2em 1em;
	font-size:.8rem;
	color:var(--ink-soft);
	letter-spacing:.1em;
}
.site-footer .brand-foot{
	font-family:"Shippori Mincho",serif;
	font-size:1rem;
	color:var(--ink);
	letter-spacing:.18em;
	margin-bottom:.4em;
}

/* ---------- スマホ ---------- */
@media (max-width:600px){
	.site-header .inner{ justify-content:center; text-align:center; }
	.global-nav{ gap:1em; justify-content:center; }
	.hero{ padding-top:3em; }
	.hero .hero-img{ height:130px; }
	.section{ padding:2.5em 1em; }
}