/*--------------------------
(有)プラザハウス
https://praza.jp/
--
2025-07-11	org
--------------------------*/
@charset "UTF-8";

/*------------------------
A Modern CSS Reset
------------------------*/
/* Box sizingの定義 */
*, *::before, *::after	{ box-sizing: border-box; }
/* デフォルトのpaddingを削除 */
ul[class], ol[class]	{ padding: 0; }
/* デフォルトのmarginを削除 */
body, 
h1, h2, h3, h4, h5, h6,
ul[class], ol[class], li,
figure, figcaption, blockquote, dl	{ margin: 0; }
/* bodyのデフォルトを定義 */
body {
	min-height: 100vh;
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
}
/* class属性を持つul、ol要素のリストスタイルを削除 */
ul[class], ol[class]	{ list-style: none; }
/* classを持たない要素はデフォルトのスタイルを取得 */
a:not([class])	{ text-decoration-skip-ink: auto; }
/* img要素の扱いを簡単にする */
img	{ max-width: 100%; margin: auto; }
img	{ display: block; }
/* iframe */
iframe	{ max-width: 100%; margin: auto; }
iframe	{ display: block; }
/* Natural flow and rhythm in articles by default */
/* article要素内の要素に自然な流れとリズムを定義 
article > * + * { margin-top: 1em; }
*/
/* inputやbuttonなどのフォントは継承を定義 */
input, button, textarea, select	{ font: inherit; }
 
/* Remove all animations and transitions for people that prefer not to see them */
/* 見たくない人用に、すべてのアニメーションとトランジションを削除 */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/*----------------------
Inview
----------------------*/
/*
.effect		{ overflow: hidden; }
*/
.ef-fade,
.ef-fade01,
.ef-zoom,
.ef-rotate	{ transition: .6s; }
.ef-fade:nth-child(even)	{ transition: .9s; }
.ef-fade:nth-child(3)	{ transition: 1.2s; }
.ef-fade	{ opacity: 0; transform: translate(0, 60px); -webkit-transform: translate(0, 60px); }
.fade		{ opacity: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0); }
.ef-fade01	{ opacity: 0; }
.fade01		{ opacity: 1; }
.ef-zoom	{ transform: scale(0, 0); -webkit-transform: scale(0, 0); }
.zoom		{ transform: scale(1, 1); -webkit-transform: scale(1, 1); }
.ef-rotate	{ transform: rotateY(0deg); -webkit-transform: rotateY(0deg); }
.rotate		{ transform: rotateY(360deg); -webkit-transform: rotateY(360deg); }


/*----------------------
Customize
--------------------- */
html { scroll-behavior: smooth; }

body {
	color: #334;
	font-size: 1rem;
	line-height: 1.5;
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;	/* mobile safariの自動文字サイズ調整をoffにする */
	-webkit-tap-highlight-color: transparent;	/* モバイルでタッチ時のハイライトカラーを消す */
	-webkit-font-smoothing: antialiased;	/* 文字のアンチエイリアスをきれいに表示 */
	-moz-osx-font-smoothing: grayscale;
}
/*
section:nth-child(odd)	{ background-color: #63548b; }
section	{ background-color: transparent; }
section	{ background-color: rgba(255,255,255,1); }
*/
section:nth-child(even) .grid	{ direction: rtl; }
section:nth-child(even) .grid > *	{ direction: ltr; text-align: start; }

a		{ text-decoration: none; }
a:hover	{ text-decoration: underline; }

h1 span,
h2 span,
h3 span,
h4 span	{ display: inline-block; }

table	{ border-collapse: collapse; }

/*----------------------
⭐カラー調整
----------------------*/
body	{ color: #333; background-color: #fff; }
/*section:nth-child(even)	{ background-color: #f1dea736; }*/
/*a	{ color: #fff; }*/
/*h1,h2	{ color: #fff; }*/
/*h3	{ color: #fff; }*/
/*h4	{ color: #fff; }*/

/*----------------------
※印つき<ul>、<ol>リスト
----------------------*/
ul.asterisk		{margin-top: 1em; }
ul.asterisk li	{padding-left: 1em; text-indent: -1em; }
ul.asterisk li:before { content: '※'; display: inline; }
ol.asterisk		{ counter-reset: number; }
ol.asterisk li:before { content: "※"counter(number)" "; counter-increment: number; }

/*----------------------
矢印つき<ul>リスト
----------------------*/
ul.arrow	{margin-top: 1em; }
ul.arrow li	{padding-left: 1em; text-indent: -1em; }
ul.arrow li:before { content: '\f138'; font-family: fontawesome; padding-right: .5em; opacity: .3; }


/*----------------------
共通要素
--------------------- */
.inner {
	max-width: 1200px;
	margin: auto;
	padding: 2em 1em;
}
.inner > * + h2	{ margin-top: 4rem; }
.inner > h2 + *	{ margin-top: 2rem; }
.inner > * + h3	{ margin-top: 3rem; }
.inner > h3 + *	{ margin-top: 1rem; }
.inner > * + h4	{ margin-top: 3rem; }
.inner > h4 + *	{ margin-top: 1rem; }
.inner > * + h5	{ margin-top: 2rem; }
.inner > h5 + *	{ margin-top: 1rem; }

/*.title	{ white-space: nowrap; background-color: transparent; }*/
.title	{ text-align: center; }
.title+*	{ margin-top: 2em; }

.serif	{ font-family: serif; }

.cbar	{ text-align: center; }
.cbar:after	{
	content: '';
	display: block;
	margin: .5em auto 0;
	height: 3px;
	border-radius: 1em;
	background-color: #ecd47f;
}

.more	{ max-width: 280px; margin: 2rem auto; text-align: center; }
.more a { display: inline-block; padding: .5rem 2rem; }
.more a { color: #fff; background-color: #0367ac; border: 1px solid #0367ac; border-radius: 3em; transition: .2s; }
.more a:hover { color: #0367ac; background-color: #fff; text-decoration: none; }

.more.blk a { font-weight: bold; color: inherit; background-color: #fff; border: 2px solid #111; border-radius: .5em; }
.more.blk a:hover { transform: scale(1.1); }

.morebtn	{ display: inline-block; padding: .05rem 1rem; }
.morebtn	{ color: #fff; background-color: #36d; border-radius: 3em; transition: .2s; }
.morebtn:hover { background-color: #039; text-decoration: none; }

/*----------------------
Grid
----------------------*/
.grid	{
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
	gap: 1em;
	align-items: stretch;
	list-style-type: none;
}
.grid > *	{
	position: relative;
	padding: .5rem;
	color: #333;
	background-color: rgba(255,255,255,.8);
	border-radius: .3em;
	box-shadow: 0 0 12px rgba(0,0,0,.1);
	list-style-type: none;
}
.grid.x2	{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.x3	{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.x4	{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.shadow{ box-shadow: none; }
.grid.shadow > *	{ padding: .5rem; box-shadow: 0 0 10px rgba(0,0,0,.1); }
.grid.rvs	{ direction: rtl; }
.grid.rvs > *	{ direction: ltr; text-align: start; }
.grid.plain	{}
.grid.plain > *,
.grid .none	{ padding: 0; color: inherit; background: none; box-shadow: none; overflow-wrap: break-word; }
.grid .img	{ text-align: center; }
.grid img	{ margin: auto; display: block; max-width: 100%; }
.grid span	{ display: block; margin-top: .5rem; font-size: .9em; text-align: center; }
.grid p		{ font-size: .9em; }
.grid h3	{ text-align: center; }
.grid h3:after	{
	content: '';
	display: block;
	margin: .5em auto 0;
	height: 3px;
	border-radius: 1em;
	background-color: #d0c190;
}
/*.grid h4	{ margin-bottom: 8px; padding-bottom: 4px; font-size: 1em; border-bottom: 3px solid #61AFA0; }*/

/*----------------------
Flexbox
----------------------*/
.flex	{
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2em;
}
.flex > *	{ min-width: 280px; }
.flex.vt	{ align-items: start; }
.flex.rvs	{ flex-direction: row-reverse; }
.flex .img	{ flex: 1 0 auto; max-width: 50%; }
.flex.x2 >*	{ flex: 1 0 40%; }
.flex.x3 >*	{ flex: 1 0 30%; }
.flex.shadow >*	{ border-radius: .3em; box-shadow: 0 0 12px rgba(0,0,0,.1); }
.flex.shadow >*	{ aspect-ratio: 4/3; }

.flex .cph	{ margin: auto; max-width: 40%; }
.flex .cph img	{ margin: auto; width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 100em; }

.flex+.flex,
.flex+.grid,
.grid+.flex,
.grid+.grid	{ margin-top: 1.5rem; }

/*----------------------
Flex
list with box-shadow
----------------------*/
.flexs	{ margin: 1em auto;; padding: 0; list-style-type: none; }
.flexs	{ display: flex; flex-wrap: nowrap; justify-content: center; }
.flexs li	{ padding: 1em; box-shadow: 0 0 16px 0px rgba(0,0,0,.2); }
.flexs li	{ flex: 1 0 auto; }
.flexs li+li	{ margin-left: 1em; }
.flexs .phbox	{ color: #666; font-size: .8em; text-align: center; }


.note	{ padding: .75em; border: 3px solid #666; }
.note.red	{ border: 3px solid #e33; }
.note ul	{ margin: 0; padding-left: 1.5em; }
.note li+li	{ margin-top: .5em; }
.note strong{ color: #e00; }

.mbo	{ display: initial; }
.pco	{ display: none; }

.b	{ font-weight: bold; }
.bb	{ font-weight: bold; color: #000; font-size:1.2em; }

.xs	{ font-size: .6rem; }
.s	{ font-size: .8rem; }
.m	{ font-size: 1rem; }
.lg	{ font-size: 1.1rem; }
.xl	{ font-size: 1.2rem; }

.l	{ text-align: left;  }
.r	{ text-align: right; }
.c	{ text-align: center; }
.vt	{ vertical-align: top; }

.caution	{ color: #c00; }
.red	{ color: #e00; }
.grn	{ color: #393; }
.date	{ color: #393; }
.url	{ color: #393; word-break: break-all; }


.marker,
.marker.yellow	{ background: linear-gradient(transparent 50%, #ffef8f 50%); }	/* 黄色 */
.marker.lime	{ background: linear-gradient(transparent 50%, #66FFCC 50%); }	/* 黄緑色 */
.marker.water	{ background: linear-gradient(transparent 50%, #66ccff 50%); }	/* 水色 */
.marker_pink	{ background: linear-gradient(transparent 50%, #ff66ff 50%); }	/* 桃色 */


/*----------------------
アイコン付加
----------------------*/
a[href$=".pdf"]:after	{ content: '\f1c1'; font-family: fontawesome; margin-left: .5em; opacity: .7; }
a[href$=".docx"]:after,
a[href$=".doc"]:after	{ content: '\f1c2'; font-family: fontawesome; margin-left: .5em; opacity: .7; }
a[href$=".xlsx"]:after,
a[href$=".xls"]:after	{ content: '\f1c3'; font-family: fontawesome; margin-left: .5em; opacity: .7; }
a[href$=".zip"]:after	{ content: '\f1c6'; font-family: fontawesome; margin-left: .5em; opacity: .7; }
a[href^="mailto:"]:after{ content: '\f0e0'; font-family: fontawesome; margin-left: .5em; opacity: .7; }
/*
a[href^="http"]:after	{ content: '\f08e'; font-family: fontawesome; margin-left: .5em; opacity: .7; }
*/
/* No Icon */
.no_icon:after {
	content: '' !important;
	margin-left: 0 !important;
}


/*----------------------
Fit Content - Centering
----------------------*/
.fit-content {
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
	max-width: 960px;
}
.fit-content.image	{ max-width: 800px; }

/*----------------------
レスポンシブ対応（横スクロール）
<div class="scroll-box">
	<table>〜</table>
</div>
----------------------*/
.scroll-x {
/*	white-space: nowrap;*/
	overflow-x: auto;
	overflow-y: hidden;
}

/*----------------------
テーブル要素
----------------------*/
table.solid		{ margin: 1em 0; }
table.solid th,
table.solid td	{ padding: .5em .5em; border: 1px solid #fff9; }
table.solid th	{ font-weight: normal; background-color:#e7f3fa; }
table.solid .d	{ text-align: center; background-color:#e7f3fa; }
table.solid .e	{ text-align: center; background-color:#fffff0; }

table.uline		{ margin: 1em 0; min-width: 80%; }
table.uline th,
table.uline td	{ padding: 1em; border-bottom: 1px solid #0006; }
table.uline th	{ text-align: left; font-weight: normal; }
/*table.uline th+td	{ padding-left: 2em; }*/

table.noline	{ margin: 1em 0; }
table.noline th,
table.noline td	{ padding: .5em .8em; vertical-align: top; }
table.noline .d	{ white-space: nowrap; text-align: center; background-color: #f0f0f0; }


/*----------------------
画像関連
----------------------*/
.phbox {
	margin: 2em auto;
	font-size: .8rem;
	text-align: center;
}
.phbox.shadow {
	padding: 1em;
	background-color: rgba(255,255,255,.9);
	border-radius: .3em;
}

.phbox_c,
.phbox_r,
.phbox_l,
.phbox_nc,
.phbox_nr,
.phbox_nl	{
	display: flex;
	justify-content: center;
	text-align: center; color: #666; font-size: .8em;
}
.phbox_c p,
.phbox_r p,
.phbox_l p	{ padding: 1em; box-shadow: 0 0 16px 0px rgba(0,0,0,.2); }


/*----------------------
YouTube
----------------------*/
.youtube iframe	{ display: block; aspect-ratio: 16/9; width: clamp(160px, 100%, 800px); height: auto; }


/*----------------------
Googlemap
----------------------*/
.googlemap iframe	{ display: block; width: 100%; height: auto; max-width: 800px; aspect-ratio: 16/9; }


/*----------------------
SNS Icon
----------------------*/
.sns { display: flex; gap: 1rem; }
.sns a	{
	display: flex; justify-content: center; align-items: center;
	width: 32px; height: 32px;
	transition: .2s;
/*
	font-size: 18px;
	color: #fff;
	background-color: rgba(0,0,0,.2);
	border-radius: 8px;
*/
}
.sns a:hover	{ transform: scale(1.2); text-decoration: none; }
.sns i	{ display: none; }
.sns .facebook	{ background-color: #1977f1; }
.sns .facebook:before	{ content: '\f09a'; font-family: fontAwesome; }
.sns .envelope	{ background-color: #6c9; }
.sns .website	{ background-color: #f90; }
.sns .website2 	{ background-color: #f60; }

.sns .twitter	{ background: #000 url(ico_x_twitter.svg); }	/* Replace Twitter → X */
.sns .line		{ background: url(ico_line_.svg) no-repeat 50% 50% / contain; }
.sns .youtube	{ background: url(ico_youtube.svg) no-repeat 50% 50% / contain; }
.sns .instagram	{ background: url(ico_instagram.svg) no-repeat 50% 50% / contain; }
.sns .tiktok	{ background: url(ico_tiktok.svg) no-repeat 50% 50% / contain; }
/*
.sns .youtube	{ background-color: #f00; }
.sns .youtube:before	{ content: '\f16a'; font-family: fontAwesome; }
.sns .twitter	{ background-color: #1DA1F2; }
.sns .twitter:before	{ content: '\f099'; font-family: fontAwesome; }
.sns .instagram	{ background-image: url(ico_instagram.png); background-size: cover; }
.sns .instagram	{ background-image: url(gradient-768x768.jpg); background-size: cover; font-size: 20px; }
.sns .instagram:before	{ content: '\f16d'; font-family: fontAwesome; }
*/





/*----------------------
Header
----------------------*/
.header {
	background-color: #fff;
	width: 100%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	z-index: 10;
}
.header .inner	{ position: relative; padding: 1.5em 1em; }
.header .inner	{ display: flex; justify-content: space-between; align-items: center; }
.header .logo	{}
.header .logo a	{
	display: block;
	width: clamp(200px, 60vw, 450px);
	aspect-ratio: 10/1;
	background: url(logo10x1.png) no-repeat 0 0 / contain;
	text-indent: -9999px;
	transition: .2s;
}
.header .inquiry a	{ display: none; }

.header .sns { display: none; }

/*----------------------
追従ヘッダー Sticky
----------------------*/
/*.header.fixed { position: fixed; top: 0; width: 100%; z-index: 1; }*/
.header.fixed { position: sticky; top: 0; background-color: #fffe; }
.header.fixed .logo a	{ width: clamp(200px, 60vw, 400px); }
.header.fixed .pc-nav	{ display: none; }

.head-navi	{ display: flex; justify-content: center; align-items: center; gap: 20px; }

/*----------------------
SmartPhone Navigation
----------------------*/
.sp-nav	{ margin-left: 20px; font-size: clamp(12px, 4vw, 18px); }
/* Toggle Button */
.sp-nav .toggle	{ position: relative; width: 2em; aspect-ratio: 1.2/1; cursor: pointer; z-index: 10; }
.sp-nav .toggle > span	{
	position: absolute; left: 0;
	display: block; width: 100%; height: 15%;
	background-color: #333;
	border-radius: 5px;
	transition: .2s;
}
.sp-nav .toggle > span:nth-child(1)	{ top: 0; }
.sp-nav .toggle > span:nth-child(2)	{ top: 50%; transform: translatey(-50%); }
.sp-nav .toggle > span:nth-child(3)	{ bottom: 0; }
/* Navigation Content */
/*inset: 0 と position: fixed を指定すると画面全体に背景を覆うことができる。モーダルウィンドウやローディング画面を表示させる時*/
.sp-nav .nav-content	{ position: fixed; inset: 0; color: #fff; background-color: #000d; z-index: 3; }
.sp-nav .nav-content	{ -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); }
/*.sp-nav .nav-content	{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; color: #fff; background-color: #000d; z-index: 3; }*/
.sp-nav .nav-content	{ opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.sp-nav .nav-content ul	{ width: clamp(100px, 70%, 600px); margin: auto; padding: 0; list-style-type: none; }
/*.sp-nav .nav-content ul	{ height: clamp(100px, 100%, 800px); }*/
.sp-nav .nav-content ul	{ display: flex; flex-direction: column; justify-content: center; gap: .5em; }
.sp-nav .nav-content li	{ width: 100%; }
.sp-nav .nav-content a	{ display: block; padding: 2vh; color: inherit; text-align: center; text-decoration: none; transition: .2s; }
.sp-nav .nav-content a	{ background-color: #00968800; border: 1px solid #fff6; border-radius: 1em; background-image: none !important; }
.sp-nav .nav-content a span	{ display: none; }
/*.sp-nav .nav-content a	{ pointer-events: none; }*/
.sp-nav .nav-content .fa,
.sp-nav .nav-content .fa-solid,
.sp-nav .nav-content .fa-regular	{ display: inline-block; opacity: .75; }
.sp-nav .nav-content .fa	{ display: none; }
.sp-nav .nav-content a:hover	{ opacity: 1; background-color: #3fc4b6; transform: scale(1.0); }
.sp-nav .nav-content a:hover .fa,
.sp-nav .nav-content a:hover .fa-solid,
.sp-nav .nav-content a:hover .fa-regular	{ opacity: 1; }
/* SNS */
.sp-nav .sns_wrap	{ display: none; }
.sp-nav .sns_wrap	{ max-width: 320px; margin: auto; }
.sp-nav .sns_wrap a	{ aspect-ratio: auto; margin: auto; background: none; }
.sp-nav .sns_wrap ul	{ display: flex; justify-content: center; gap: 20px; }
.sp-nav .sns_wrap img	{ height: 48px; }
/* is-open */
.is-open #toggle > span { background-color: #fff; }
.is-open #toggle > span:nth-child(1) { top: 50%; transform: translatey(-50%) rotate(45deg); }
.is-open #toggle > span:nth-child(2) { top: 50%; transform: translatey(-50%) rotate(90deg); opacity: 0; }
.is-open #toggle > span:nth-child(3) { top: 50%; transform: translatey(-50%) rotate(-45deg); }
.is-open #sp-nav .nav-content	{ opacity: 1; visibility: visible; }
.is-open #sp-nav .nav-content a	{ pointer-events: auto; }

/* アコーディオン用 */
.sp-nav .acc	{ position: relative; margin: 0; padding: 1em; cursor: pointer; transition: background .2s ease; }
.sp-nav .acc::before,
.sp-nav .acc::after	{ position: absolute; top: 0; bottom: 0; right: 1em; width: 12px; height: 2px; margin: auto; background:#fff; content: ''; }
.sp-nav .acc::after	{ transform: rotate(-90deg); transition: transform .2s; }
.sp-nav .acc.active	{ background-color: #20b8aa; border-radius: 1em 1em 0 0; }
.sp-nav .acc.active::after	{ transform: rotate(0deg); }

.sp-nav .nav-content ul ul	{ display: none; width: auto; margin: 1em auto; }
.sp-nav .nav-content li li	{ background-color: transparent; }
.sp-nav .nav-content li li a	{ padding: .25em; }
.faq .ans span	{ display: block; margin-top: 1em; }
.faq .ans span a:before	{
	display: inline-block;
	content: '\f054'; font-family: fontawesome;
	padding-right: 8px; color: initial; text-decoration: none; opacity: .5;
}
/* SNS Icon */
.sp-nav .nav-content .sns	{ height: auto; padding: 60px 0; }
.sp-nav .nav-content .sns	{ display: flex; flex-direction: row; justify-content: center; gap: 1.5rem; }
.sp-nav .nav-content .sns li	{ width: auto; }
.sp-nav .nav-content .sns a	{ padding: 0; border: none; border-radius: 0; }
.sp-nav .nav-content .sns a:hover	{ background-color: transparent; transform: scale(1.2); }
.sp-nav .nav-content .sns *:before	{ content: ''; font-size: 32px; font-family: fontawesome; line-height: 1; color: #fff; }
.sp-nav .nav-content .sns .line:before	{ content: '\f3c0'; }
.sp-nav .nav-content .sns .twitter:before	{ content: '\e61b'; }
.sp-nav .nav-content .sns .facebook:before	{ content: '\f09a'; }
.sp-nav .nav-content .sns .youtube:before	{ content: '\f167'; }
.sp-nav .nav-content .sns .instagram:before	{ content: '\f16d'; }
.sp-nav .nav-content .sns .tiktok:before	{ content: '\e07b'; }


/*----------------------
PC Navigation
----------------------*/
.pc-nav	{ display: none; }
.pc-nav	{ padding: 20px 20px 0; color: #fff; background-color: #e7eaed; }
.pc-nav a	{ display: block; height: 50px; text-indent: -9999px; color: inherit; text-decoration: none; }
.pc-nav ul	{
	position: relative; max-width: 1200px; margin: auto; padding: 0; list-style-type: none;
	display: flex; justify-content: center; align-items: center; gap: 1px;
	text-align: center;
}
.pc-nav li	{ position: relative; z-index: 1; flex: 1; }
.pc-nav li ul	{ position: absolute; top: 50px; display: block; width: 100%; box-shadow: 0px 10px 10px 2px rgba(0,0,0,0.2); }
.pc-nav li ul	{ visibility: hidden; }
.pc-nav li:hover ul	{ visibility: visible; }
.pc-nav li ul li		{ width: 100%; }
.pc-nav li ul li+li	{ border: none; }
.pc-nav li ul li a	{ line-height: 50px; text-indent: 0; background-color:#3767b3; background-image: none; border: none; }

.pc-nav li ul li a:hover	{ color: #fff; transition: all 0.3s ease; }

/*----------------------
Page Title
----------------------*/
.sectitle	{ max-width: 1200px; margin: auto; padding: 1.5em 1em; }
.sectitle	{ display: flex; flex-wrap: wrap; align-items: center; gap: 1em; }
.sectitle h1	{ font-family: serif; }
.sectitle h2	{ font-size: 1rem; font-weight: normal; }
.sectitle br	{ display: none; }

/*----------------------
Page Visual Image
----------------------*/
.secvimage	{ background-color: #ccc; }
.secvimage	{ width: 100%;aspect-ratio: 16/9; max-height: 50vh; }
.secvimage img	{ width: 100%; aspect-ratio: 16/9; max-height: 50vh; object-fit: cover; }

/*----------------------
Footer
----------------------*/
.footer	{ margin-top: 5vh; }
.footer .inner	{ padding: 1em; display: flex; flex-wrap: wrap; gap: 2em 4em; }
.footer .company	{
	flex: 1 0 30%;
	min-width: 300px;
	p	{ margin: 0; padding: 0; }
	span	{ display: inline-block; }
	.cname	{ font-size: 1.4em; font-weight: bold; color: #0367ac }
	.adder	{ font-size: .9em; }
	.phone	{}
}
.footer .foot-nav	{
	flex: 1 0 60%;
	ul	{ margin: 0; padding: 0; list-style-type: none; }
	ul	{ display: flex; flex-wrap: wrap; gap: .5em 1em; }
	li	{ flex: 1 0 25%; min-width: 7em; }
	a	{ color: inherit; }
	a+a	{ border-top: thin solid rgba(255,255,255,.3); }
	.sns	{ margin-bottom: 1em; gap: 1em; }
	.sns li	{ flex: 0 1 auto; min-width: auto; }
	.sns a	{ color: #fff; }
}
.footer .cprt	{ padding: 1em; text-align: center; font-size: 12px; font-family: arial, sans-serif; }


/*----------------------
Page Top
----------------------*/
#pagetop { position: fixed; bottom: 1rem; right: 1rem; z-index: 99; }
#pagetop {
	width: 4rem;
	aspect-ratio: 1/1;
	line-height: 1;
	font-size: 12px;
	text-align: center;
	color: white;
	background-color: orange;
	border-radius: 3em;
}
#pagetop	{ display: flex; flex-flow: column; justify-content: center; align-items: center; }
/*#pagetop	{ opacity: .6; }*/
#pagetop a	{ display: block; width: 100%; padding: .5em 0 1em; color: inherit; text-decoration: none; }
#pagetop a:before { content: '\f106'; display: block; font-size: 200%; font-family: fontawesome; }



/*----------------------
House
----------------------*/
#content-house	{
	.sectitle	{ display: block; max-width: none; }
	.sectitle	{ width: 100%; aspect-ratio: 16/9; max-height: 60vh; }
	.sectitle	{ color: #fff; background: #666 url(../images/img-house.jpg) no-repeat 50% 10% / cover; }
	.sectitle	{ text-shadow: 0 0 6px #030, 0 2px 6px #030; }
	.sectitle h1	{ max-width: 1200px; margin: auto; }
	.sectitle h2	{ max-width: 1200px; margin: 1em auto; font-weight: bold; line-height: 1.8; }
	.sectitle h2 strong	{ font-size: 130%; font-family: serif; }
	.sectitle br	{ display: initial; }
	.flex	{ align-items: initial; font-weight: bold; }
	.phot	{ background-color: #ccc; }
	.phot img	{ margin-bottom: 1em; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
	.inner p	{ max-width: 32em; }
}

/*----------------------
Room Tour
----------------------*/
#content-roomtour	{
	.sectitle h2	{ max-width: 640px; }
	.gallery	{ display: flex; flex-wrap: wrap; gap: 3em 1.5em; }
	.gallery >*	{ flex: 1 0 30%; min-width: 300px; }
	.gallery p	{ margin: 0; max-width: none; font-size: 1rem; }
	.date	{ color: inherit; }
	.ttle	{}
	.phot	{ position: relative; aspect-ratio: 16/9; background-color: #ccc; }
	.phot:before {
		content: '';
		position: absolute; top: 0; left: 0;
		width: 100%; aspect-ratio: 16/9;
		background: url(ico_youtube.svg) no-repeat 50% 50% / 64px;
		/*background: url(ico_youtube.svg) no-repeat 50% 50% / 18%;*/
	}
	.phot img	{ display: block; aspect-ratio: 16/9; object-fit: cover; }
	iframe	{ width: 100%; height: auto; aspect-ratio: 16/9; }
}

/*----------------------
Achievements
----------------------*/
#content-achievements	{
	.sectitle h2	{ max-width: 640px; }
	.gallery	{ display: flex; flex-wrap: wrap; align-items: center; gap: 3em 1.5em; }
	.gallery >*	{ flex: 1 0 30%; min-width: 300px; }
	.gallery > :nth-child(1)	{ flex: 1 0 100%; }
	.gallery p	{ margin: 1em auto 0; max-width: none; font-size: 1rem; }
	.date	{ color: inherit; }
	.ttle	{ text-align: center; }
	.ttle a	{ color: inherit; font-size: 80%; font-weight: bold; text-decoration: none; }
	.ttle i	{ color: red; font-size: 130%; }
	.phot	{ position: relative; aspect-ratio: 16/9; background-color: #ccc; }
	/*.phot:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 16/9; background: url(ico_youtube.svg) no-repeat 50% 50% / 64px; }*/
	.phot img	{ display: block; aspect-ratio: 16/9; object-fit: cover; }
	iframe	{ width: 100%; height: auto; aspect-ratio: 16/9; }
}

/*----------------------
Reform
----------------------*/
#content-reform	{
	.sectitle h2	{ max-width: 640px; }
}

/*----------------------
Staff
----------------------*/
#content-staff	{
	.sectitle h2	{ max-width: 640px; }
	.staff-container	{ display: flex; flex-wrap: wrap; align-items: center; gap: 1em 2em; }
	.staff-container >*	{ flex: 1 0 auto; }
	.staff-container p	{ margin: 0; max-width: none; }
	.staff-container span	{ display: block; }
	.staff-container img	{ height: 100%; object-fit: cover; }
	.profile	{ width: 40%; }
	.photo		{ width: 50%; aspect-ratio: 1/1; }
	.space		{ width:  0%; }
	.message	{ width: 100%; }
	.post	{ font-family: serif; }
	.name	{ font-family: serif; font-size: clamp(1.8em, 4.2vw, 2.4em); }
	.qual	{}
	.theme	{ font-size: 1.2em; }
	@media screen and (min-width:728px) {
		.profile	{ width: 15%; }
		.photo		{ width: 70%; aspect-ratio: 16/9; }
		.space		{ width: 15%; }
		.message	{ width: 70%; }
	}
}



/*----------------------
for SmartPhone 
Landscape （横）
----------------------*/
@media screen and (min-width:480px) {
/*	.grid	{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 1.5em; }*/
	.title	{ display: flex; align-items: center; }
	.title:before,
	.title:after	{ content: ''; height: 3px; background-color: rgb(209 185 105 / 60%); flex-grow: 1; }
	.title:before	{ margin-right: 1.5em; }
	.title:after	{ margin-left: 1.5em; }
}


@media screen and (min-width:640px) {
/*	.grid	{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-gap: 1.5em; }*/
	.grid > *	{ padding: 1rem; }
}


/*----------------------
for Tablet
----------------------*/
@media screen and (min-width:768px) { /* and ( max-width:1024px) { */

	h2	{ font-size: 2.4rem; }
	h3	{ font-size: 2.0rem; }
	h4	{ font-size: 1.4rem; }
	h5	{ font-size: 1.2rem; }
/*
	h3 { letter-spacing: .1em; }
	h4 { letter-spacing: .1em; }
	section:not([class])	{ min-height: 320px; }
*/
	.xs	{ font-size: .6rem; }
	.s	{ font-size: .8rem; }
	.m	{ font-size: 1rem; }
	.lg	{ font-size: 1.2rem; }
	.xl	{ font-size: 1.5rem; }

	.fl	{ float: left; }
	.fr	{ float: right; }
	.clr{ clear: both; }

	.inner { padding: 3em 1em; }
	.inner p	{ max-width: 800px; margin: 1.75em auto; line-height: 1.75; font-size: 110%; }
	.inner .phbox	{ max-width: 800px; font-size: .9rem; }

	.header .sns { display: flex; }

	.sectitle	{ padding: 2em 1em; gap: 2em; }
	.sectitle h1	{ font-size: 3.0em; }
	.sectitle h2	{ font-size: 1.2em; }
	.sectitle br	{ display: initial; }

	.grid	{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 2em; }
	/*.grid.x2	{ grid-template-columns: 3fr 2fr; }*/
	.grid p		{ font-size: 1em; }

	.mbo	{ display: none; }
	.pco	{ display: initial; }

	/* Responsive Table Adjust 横スクロール解除 */
	table	{ display: table; white-space: normal; }

	.link .ttl,
	.link a	{ font-size: 1.2em; }
	.arrow li a		{ font-weight: normal; font-size: 1.1em; }
	.arrow li.sub a	{ font-weight: normal; font-size: 1.0em; }

	.phbox_r,
	.phbox_nr	{ float: right; margin: 0 0 2em 1em; }

	.phbox_l,
	.phbox_nl	{ float: left; margin: 0 1em 2em 0; }

	.nav-pc ul	{ gap: 1em 2em; }
}


/*----------------------
for PC
----------------------*/
@media screen and (min-width:1024px) {
}