@charset "utf-8";

/* animation1のキーフレーム設定（開閉ブロックのアニメーションに使用）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}

/* opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/* root
------------------------------------------------------- */
:root {

/*	--primary-color: #333;
	--primary-inverse-color: #fff; */
	--primary-color: #fff; 
	--primary-inverse-color: #333;

	--global-space: 3vw;			/* 余白の一括管理 */
}

@font-face { 
	font-family: uzura;
	src: url(/fonts/uzura.eot);
	src: local('うずらフォント'), url(/fonts/uzura.woff) format('woff'), url(/fonts/uzura.ttf) format('truetype');
}


/* common
------------------------------------------------------- */
body * { box-sizing: border-box; }

html,body {
	font-size: 12px;	/* 基準となるフォントサイズ */
}

body {
	margin: 0;
	padding:0;
	font-family: Georgia, "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	-webkit-text-size-adjust: none;
	background: var(--primary-inverse-color);
	color: var(--primary-color);
	line-height: 3;
}	animation: opa1 0.2s 0.5s both;


/* reset */
figure { margin: 0; }
dd { margin: 0; }
nav,ul,li,ol { margin: 0;padding: 0; }
nav ul { list-style: none; }
input { font-size: 1rem; }

/* ul,ol */
ul,ol { margin-left: 1.5rem; margin-bottom: 1rem; }

/* table全般の設定 */
table { border-collapse:collapse; }

/* 画像全般の設定 */
img { border: none; max-width: 100%; height: auto; vertical-align: middle; }

/* iframeタグ */
iframe {width: 100%;}

/* sectionが続く場合 */
section + section {
	margin-top: 8vw;
}

/* links
------------------------------------------------------- */
a { color: inherit;transition: 0.3s; }

a:hover {
	opacity: 0.7;
}

/* container
------------------------------------------------------- */
#container {
	padding-left: var(--global-space);
	padding-right: var(--global-space);
}

/* header
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
	padding-top: var(--global-space);
	padding-bottom: var(--global-space);
	text-align: center;
}

	/* 画面幅901px以上の追加指定 */
	@media screen and (min-width:901px) {
		/*headerブロック*/
		header {
			display: flex;	/*直接の子要素を横並びにする*/
			justify-content: space-between;
			align-items: center;
		}
	}

/* logo in header
---------------------------------------------------------------------------*/
#logo a { text-decoration: none; display: block; }

/*ロゴ*/
#logo {
	margin: 0;padding: 0;
	font-size: 1.5rem;
}

/* main image
---------------------------------------------------------------------------*/
#mainimg {
	margin-bottom: var(--global-space);
}

/* contents
---------------------------------------------------------------------------*/
#contents {
	display: flex;
	gap: var(--global-space);
}

/* main contents
---------------------------------------------------------------------------*/
main {
	flex: 1;
	line-height: 1.5;
}

/* h2 */
main h2 {
	margin-top: 0;line-height: 1;
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--primary-color);
}

/* sub contents
---------------------------------------------------------------------------*/
/* menu block */
#menubar {
	order: -1;
	width: 230px;
}

/* menu */
#menubar li {
	border-bottom: 1px solid var(--primary-color);
}
#menubar li a {
	padding-left: 1rem;
}

/* h3 */
#menubar h3 {
	margin: 0;
	line-height:2;
	font-size: 1rem;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	text-align: center;
}

/* menu block
---------------------------------------------------------------------------*/
#menubar {opacity: 0;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}
.large-screen #menubar {opacity: 1;}
.small-screen #menubar.display-none {display: none;}
.small-screen #menubar.display-block {display: block;opacity: 1;}
#menubar_hdr.display-none {display: none;}


/* menu for SP
---------------------------------------------------------------------------
/* menu block */
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 100px;	
	color: var(--primary-color);
	background: var(--primary-inverse-color);
	animation: animation1 0.2s both;
}

/* menu */
.small-screen #menubar li {
	border-top-style: 1px solid var(--primary-color);
	margin: 1rem;
	/* border-radius: 5px;	/* 角丸 */
}
.small-screen #menubar a {
	padding: 0.5rem 3rem;		/* メニュー内余白: 上下、左右 */
}


/* humberger icon
---------------------------------------------------------------------------*/
#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	top: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	padding: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;
	background: rgba(0,0,0,0.6);	/* 背景色 */
}

#menubar_hdr div {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 2px;			/* 線の太さ */
	background-color: #fff;	/* 線の色 */
	border-radius: 2px;		/* コーナーを少しだけ丸く */
	transition: all 0.5s ease-in-out;
	position: absolute;
}

#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {top: 50%;transform: translateY(-50%);}
#menubar_hdr div span:nth-child(3) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {opacity: 0;}
#menubar_hdr.ham div span:nth-child(3) {top: 50%;transform: translateY(-50%) rotate(-45deg);}

/* footer
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer a {color: inherit;text-decoration: none;}
footer .pr {display: block;}

footer {
	font-size: 0.8rem;
	text-align: center;
	padding-top: 5rem;
	line-height: 1.2;
}


/* list-normal
---------------------------------------------------------------------------*/
/* boxes */
.list-normal .list {
	display: flex;
	gap: 2vw;
	margin-bottom: var(--global-space);
	line-height: 2;
}

/* text block */
.list-normal .text {
	flex: 1;
}

/* image block */
.list-normal figure {
	width: 40%;
}

/* h4 */
.list-normal h4 {
	margin: 0;
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
}

/* complain */
.list-normal p {
	margin: 0;	
}

.openclose {cursor: pointer;}
/* table1
---------------------------------------------------------------------------*/
/* ta1テーブルブロック設定 */
.ta1 {
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;
}

.ta1, .ta1 td, .ta1 th {
	border: 1px solid var(--primary-color);
	padding: 1rem;
	word-break: break-all;
}

/* th（左側）のみの設定 */
.ta1 th {
	width: 25%;
	text-align: left;
}

/* page top
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/* button */
.pagetop a {
	display: block; text-decoration: none; text-align: center; z-index: 99;
	position: fixed;				/* スクロールに追従しない(固定で表示)為の設定 */
	right: 20px;
	bottom: 20px;
	color: #fff;
	background: rgba(0,0,0,0.2);	/* 背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;
	line-height: 60px;
}

/* and so on 
---------------------------------------------------------------------------*/
.clearfix::after { content: ""; display: block; clear: both; }
.color-check, .color-check a {color: red !important; }
.l { text-align: left !important; }
.c { text-align: center !important; }
.r { text-align: right !important; }
.ws { width: 95%; display: block; }
.wl { width: 95%; display: block; }
.mb0 { margin-bottom: 0px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb5vw { margin-bottom: 5vw !important; }
.look { display: inline-block;padding: 0px 10px; background: #fff; color: #333; border: 1px solid #ccc; border-radius: 3px; margin: 5px 0; word-break: break-all; }
.small { font-size: 0.75em; }
.large { font-size: 2em; letter-spacing: 0.1em; }
.pc { display: none; }
.dn { display: none !important; }
.block { display: block !important; }

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws { width: 48%; display: inline; }
	.sh { display: none; }
	.pc { display: block; }

	} 

/* Additional from Blue Wisper
------------------------------------------------------- */
article {
	margin: 0 0 30px 0 ;
}

#recent{
	height:150px;
	padding-left:10px;
	font-size: 11px;
	overflow:auto;
	display:block;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0px 0px 4px #666;
	-moz-box-shadow: 0px 0px 4px #666;
	box-shadow: 0px 0px 4px #666;
	scrollbar-face-color:#eae7ef;
	scrollbar-highlight-color: #eae7ef;
	scrollbar-shadow-color: #eae7ef;
	scrollbar-3dlight-color: #bdb1d6;
	scrollbar-arrow-color: #bdb1d6;
	scrollbar-track-color: #fdfdff;
	scrollbar-darkshadow-color: #bdb1d6;
}

.cute {
	font-family: uzura, Georgia, 'Hiragino Mincho Pro', Meiryo, 'ＭＳ Ｐゴシック', serif;
	font-size: 14px;
}
.beauty {
	font-family: 'Noto Sans Japanese', Georgia, 'Hiragino Mincho Pro', Meiryo, 'ＭＳ Ｐゴシック', serif;
	font-size: 12px;
}