@charset "Shift_JIS";

body{
	font-size:14px; color:#333333;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
	line-height:17pt;
	text-align:center;
	margin: 0px auto 0px auto;
	background-image:url("../img/common/bg.jpg");
	background-repeat: repeat-x;
	background-color:#ffffff;
}

h1 { margin:0px;font-size:11px; color:#660000; }
h2 { margin: 0px; }
h3 { margin: 0px; }


a:link { color: #990000; } 
a:visited { color: #666666; } 
a:active { color: #ff3300; } 
a:hover { color: #ffffff; background-color:#6e2222; } 
a:focus { outline: 2px solid #6e2222; outline-offset: 2px; } 

.red{ color:#cc0000; }
.red-b{ color:#cc0000; font-weight:bold; }

p{margin: 0px;}
a img { border: none; } 
.font-red{font-size:9pt;color:#cc0000;}
.font-red-b{font-size:9pt;color:#cc0000;font-weight:bold;}

ul {
	list-style: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
}


ul.menu li {
	list-style :none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
ul.submenu li {
	list-style :none;
	margin: 4px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}



.clear{
	clear:left;
}

.base{
	width: 960px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	text-align: left;
}

.head{
	width: 960px;
	height:80px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:left;
}
.logo-box{
	width: 960px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
.logo{
	float:left;
	width: 500px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.logo-right{
	float:left;
	width: 460px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
.logo-right-h{
	width: 460px;
	height:26px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:right;
}
.logo-right-tel{
	width: 460px;
	height:54px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:right;
}




.contents{
	width: 960px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 60px 0px;
	text-align:left;
	background-color:#ffffff;
}
.top-image{
	width: 950px;
	margin: 0px 0px 0px 5px;
	padding: 5px 0px 0px 0px;
	text-align:left;
	background-color:#ffffff;
}

.contents-box{
	width: 950px;
	margin: 40px 0px 0px 5px;
	padding: 0px 0px 0px 0px;
	text-align:left;
}
.contents-left{
	float:left;
	width: 180px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:left;
}
.contents-left-contact{
	width: 180px;
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:center;
}
.contents-left-submenu{
	width: 180px;
	margin: 30px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:center;
}
.contents-left-ba{
	width: 180px;
	margin: 30px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:center;
}

.contents-right{
	float:left;
	width: 770px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:left;
}
/* インフォメーション用　〜ここから〜　横幅430pxまで */

.info-text-1{
	width: 430px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:left;
	font-weight:bold;
	color:#5f1916;
}
.info-text-2{
	width: 430px;
	margin: 10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:left;
	font-weight:bold;
	color:#5f1916;
}
.info-text-3{
	width: 430px;
	margin: 18px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align:left;
	font-weight:bold;
	color:#009900;
}
.info-text-4{
	width: 400px;
	margin: 2px 0px 0px 14px;
	padding: 0px 0px 0px 0px;
	text-align:left;
}
/* インフォメーション用　〜ここまで〜 */





.footer{
	clear:both;
	width: 100%;
	height: 120px;
	margin: 0px 0px 0px 0px;
	padding: 30px 0px 0px 0px;
	text-align: center;
}

.sitemap{
	width: 960px;
	margin:10px auto 0px auto;
	padding:0px 0px 0px 0px;
	text-align:center;
}
.copy{
	width: 960px;
	margin:10px auto 0px auto;
	padding:0px 0px 0px 0px;
	text-align:center;
}




/* ---- Responsive shell overrides (mobile) - added 2026-07-10 ---- */
@media screen and (max-width: 768px) {
	img { max-width: 100%; height: auto; }

	.base, .head, .logo-box, .contents, .top-image, .contents-box, .sitemap, .copy {
		width: auto;
		max-width: 100%;
	}
	.head { height: auto; padding-bottom: 10px; }

	.logo, .logo-right {
		float: none;
		width: 100%;
	}
	.logo-right-h, .logo-right-tel {
		width: 100%;
		height: auto;
		text-align: center;
	}

	.contents-left, .contents-right {
		float: none;
		width: 100%;
	}
	.contents-left-contact, .contents-left-submenu, .contents-left-ba {
		width: 100%;
	}

	.tile-row {
		flex-direction: column;
		margin: 20px 0 0 0 !important;
	}
	a.tile-item {
		display: flex !important;
		align-items: center;
		gap: 12px;
		width: 100% !important;
		margin: 0 !important;
		text-align: left !important;
		padding: 10px 4px;
		border-bottom: 1px solid #eee;
		border-radius: 0 !important;
		overflow: visible !important;
		box-shadow: none !important;
		background-color: transparent !important;
	}
	a.tile-item:last-child {
		border-bottom: none;
	}
	a.tile-item img {
		width: 88px !important;
		height: 88px !important;
		aspect-ratio: 1 / 1 !important;
		border-radius: 8px !important;
		box-shadow: 0 0 0 1px #c8c8c8 !important;
		flex-shrink: 0;
	}
	.tile-item-text {
		display: flex !important;
		flex-direction: column;
		padding: 0 !important;
		min-height: 0 !important;
	}
	.tile-item-text .tile-item-logo {
		display: block !important;
		width: 90px !important;
		height: auto !important;
		aspect-ratio: auto !important;
		object-fit: contain;
		margin: 0 0 4px 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		flex-shrink: 0;
	}
	.tile-item-cat {
		font-size: 12px !important;
		margin-bottom: 0 !important;
	}
	.tile-item-name {
		font-size: 16px !important;
	}

	.footer {
		height: auto;
	}
	.sitemap, .copy {
		width: auto;
		padding: 0 10px;
	}
}

/* ---- Responsive inner-content overrides (mobile) - added 2026-07-10 phase 2 ---- */
@media screen and (max-width: 768px) {
	iframe { max-width: 100%; }

	/* Page-specific content-block naming convention: *-ico, *-text, *-box, *-left, *-right, *-logo, *-map, *-mail, *-gaiyou */
	[class*="-ico"],
	[class*="-box"],
	[class*="-text"],
	[class*="-left"],
	[class*="-right"],
	[class*="-logo"],
	[class*="-map"],
	[class*="-mail"],
	[class*="-gaiyou"],
	.main-contents,
	.po {
		width: auto !important;
		max-width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Layout tables (photo galleries / info tables): stack rows on mobile */
	.contents table,
	.contents thead,
	.contents tbody,
	.contents tfoot,
	.contents tr,
	.contents td,
	.contents th {
		display: block;
		width: 100% !important;
	}
}

/* ---- Responsive table margin fix (mobile) - added 2026-07-10 phase 2b ---- */
@media screen and (max-width: 768px) {
	.contents table {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* ---- Responsive table box-sizing fix (mobile) - added 2026-07-10 phase 2c ---- */
@media screen and (max-width: 768px) {
	.contents table,
	.contents thead,
	.contents tbody,
	.contents tfoot,
	.contents tr,
	.contents td,
	.contents th {
		box-sizing: border-box;
	}
}

/* ---- Responsive gallery: 2 photos per row (mobile) - added 2026-07-12, rewritten 2026-07-13, rewritten again 2026-07-13b (CSS Grid + display:contents), refined 2026-07-13c (uniform photo size + even spacing; page CSS had a fixed height:110px on .cell-image for anzu/sakura/tsubaki causing photos to overflow their cell and overlap the next row on mobile) ---- */
@media screen and (max-width: 768px) {
	.contents table.table-anzu tbody,
	.contents table.table-sakura tbody,
	.contents table.table-tsubaki tbody,
	.contents table.table-concept tbody,
	.contents table.table-service tbody,
	.contents table.table-service-2 tbody {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}

	.contents table.table-anzu tr,
	.contents table.table-sakura tr,
	.contents table.table-tsubaki tr,
	.contents table.table-concept tr,
	.contents table.table-service tr,
	.contents table.table-service-2 tr {
		display: contents !important;
	}

	.contents table.table-anzu td.cell-image,
	.contents table.table-sakura td.cell-image,
	.contents table.table-tsubaki td.cell-image,
	.contents table.table-concept td.cell-concept-image,
	.contents table.table-service td.cell-service-left,
	.contents table.table-service td.cell-service-right,
	.contents table.table-service-2 td.cell-service-image {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		box-sizing: border-box !important;
		padding: 0 !important;
		text-align: center !important;
		vertical-align: top !important;
	}

	/* Square photo galleries (anzu/sakura/tsubaki/concept): force a uniform 1:1 box so
	   slightly non-square source photos don't render at different sizes. */
	.contents table.table-anzu td.cell-image img,
	.contents table.table-sakura td.cell-image img,
	.contents table.table-tsubaki td.cell-image img,
	.contents table.table-concept td.cell-concept-image img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
		object-fit: cover !important;
		max-width: 300px !important;
		margin: 0 auto !important;
	}

	/* Service galleries keep their original (non-square) photo proportions. */
	.contents table.table-service td.cell-service-left img,
	.contents table.table-service td.cell-service-right img,
	.contents table.table-service-2 td.cell-service-image img {
		width: 100% !important;
		height: auto !important;
		max-width: 300px !important;
	}

	/* Instagram badge (anzu.html, first gallery cell) was staying at its fixed 100x100px
	   desktop size while neighboring photos scaled up to fill the cell, so it looked much
	   smaller than the photos next to it. Scale it to match. */
	.contents table.table-anzu td.cell-image a.anzu-sns-instagram {
		display: flex !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
		max-width: 300px !important;
		margin: 0 auto !important;
	}
	.contents table.table-anzu td.cell-image a.anzu-sns-instagram svg {
		width: 60% !important;
		height: 60% !important;
	}
}

/* ---- TOP page: 4 tiles in a single row (sakura/tsubaki/anzu/nishikouen) - info card design, updated 2026-07-13 ---- */
.tile-row {
	display: flex;
	margin: 6px 12.5px 14.43px 12.5px;
}
a.tile-item {
	display: block;
	width: 172px;
	margin-right: 20px;
	text-align: center;
	text-decoration: none;
	color: #333333;
	background-color: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 0 1px #c8c8c8;
}
a.tile-item:last-child {
	margin-right: 0;
}
a.tile-item img {
	display: block;
	width: 172px;
	height: 172px;
	object-fit: cover;
}
.tile-item-text {
	display: block;
	padding: 12px 8px 10px;
	min-height: 46px;
	margin-bottom: 3.5px;
}
.tile-item-text .tile-item-logo {
	display: block;
	width: 120px;
	height: auto;
	object-fit: contain;
	margin: 0 auto 11px;
}
.tile-item-cat {
	display: block;
	font-size: 11px;
	color: #595959;
	letter-spacing: 0.02em;
	margin-bottom: 0.5px;
}
.tile-item-name {
	display: block;
	font-size: 14px;
	font-weight: bold;
	color: #333333;
	line-height: 1.3;
}

@media (hover: hover) and (pointer: fine) {
	a.tile-item {
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}
	a.tile-item:hover {
		color: inherit;
		background-color: #ffffff;
		transform: translateY(-4px);
		box-shadow: 0 0 0 1px #c8c8c8, 0 6px 14px rgba(0, 0, 0, 0.3);
	}
	a.tile-item:focus:not(:focus-visible) {
		outline: none;
	}
}

/* ---- TOP page: header photo slideshow - added 2026-07-13 ---- */
.top-slideshow {
	position: relative;
	width: 950px;
	height: 360px;
}
.top-slideshow .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 950px;
	height: 360px;
	object-fit: cover;
	opacity: 0;
	transition: opacity 2.5s ease-in-out;
}
.top-slideshow .slide.active {
	opacity: 1;
}
.top-slideshow-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 2;
}
.top-slideshow-dots .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.top-slideshow-dots .dot.active {
	background-color: #ffffff;
}

@media screen and (max-width: 768px) {
	.top-slideshow {
		width: 100%;
		height: auto;
		aspect-ratio: 950 / 360;
	}
	.top-slideshow .slide {
		width: 100%;
		height: 100%;
	}
	.top-slideshow-dots {
		bottom: 8px;
		gap: 6px;
	}
	.top-slideshow-dots .dot {
		width: 6px;
		height: 6px;
	}
}