@charset "UTF-8";

body {
	-webkit-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
	line-height: 1;
	color: #333333;
	font-family: sans-serif;
	-webkit-animation: fadeIn 0.5s ease 0s 1 normal;
	animation: fadeIn 0.5s ease 0s 1 normal;
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}

* {
	box-sizing: border-box;
}
a,
a:visited,
a:active  {
	color: #BB4600;
}  
img {
	max-width: 100%;
	height: auto;
}
a.tel {
	color: #333;
	text-decoration: none;
}

table {
	border-collapse: collapse;
	border: solid thin #CCC;
	width: 100%;
	margin: 0 auto;
	font-size: 0.9em;
}
@media (min-width: 60em) {
	table {
		width: 56em;
	}
}
table caption {
	padding: 0.5em;
	font-size: 1.125em;
	font-weight: bold;
}
table caption::before {
	content: '〜 ';
}
table caption::after {
	content: ' 〜';
}
table th,
table td {
	border: solid thin #CCC;
	padding: 0.5em;
	line-height: 1.75;
}
table th {
	white-space: nowrap;
	background-color: #f9f0df;
}
table td {
	background-color: #fafafa;
}

/*==== ヘッダー ====*/
#header {
	margin: 0 0 2em;
	padding: 0; 
	width: 100%;
	background: #B22222;
}
#header div {
	width: calc(100% - 2em);
	max-width: 60em;
	margin: 0 auto;
	padding: 0;
}
#header div:first-child {
	padding: 2.25em 0 2em;
}
#header div h1 {
	margin: 0;
	padding: 0;
	color: #FF7F50;
	font-size: 1.62em;
	font-family: serif;
}
#header div h1 a,
#header div h1 a:visited {
	color: #FF7F50;
	text-decoration: none;
}
#header div h1 + p {
	margin: 0.5em 0 0 0;
	padding: 0;
	color: white;
	font-size: 0.88em;
}
#header hr {
	margin: 0;
	border: none;
	border-top: solid 2px #CCC;
}
@media (min-width: 30em) {
	#header div ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	#header div ul::after {
		display: block;
		content: '';
		width: 100%;
		height: 0;
		clear: both;
	}
	#header div ul li {
		margin: 0;
		padding: 0.4em 0;
		float: left;
	}
	#header div ul li::before {
		content: '|';
	}
	#header div ul li:last-child::after {
		content: '|';
	}
	#header div ul li a,
	#header div ul li a:visited {
		display: inline-block;
		color: #f9f9f9;
		font-weight: bold;
		font-size: 0.87em;
		margin: 0;
		padding: 0.4em 1em;
		text-decoration: none;
		position: relative;
	}
	#header div ul li a:hover,
	#header div ul li a:active {
		color: #f6bc5b;
	}
	#header div ul li a.here {
		pointer-events: none;
	}
	#header div ul li a.here::before {
		display: block;
		content: '▲';
		color: white;
		position: absolute;
		bottom: -1em;
		left: calc(50% - 0.5em);
	}
}
@media (max-width: 29.999em) {
	#header div:first-child {
		padding: 1em 0;
	}
	#header div ul {
		display: flex;
		justify-content: space-between;
		width: 100%;
		list-style-type: none;
		margin: 0;
		padding: 0.25em 0;
	}
	#header div ul li a,
	#header div ul li a:visited {
		display: block;
		padding: 0.5em 0;
		color: white;
		text-decoration: none;
		font-size: 0.9em;
		font-weight: bold;
		position: relative;
	}
	#header div ul li a.here {
		pointer-events: none;
	}
	#header div ul li a.here::before {
		display: block;
		content: '▲';
		color: white;
		position: absolute;
		bottom: -0.75em;
		left: calc(50% - 0.5em);
	}
}
/*==== ページトップ戻り ====*/
#pagetop {
	width: calc(100% - 2em);
	max-width: 60em;
	margin: 3em auto 1em;
	padding: 0;
	text-align: right;
}
#pagetop a {
	font-size: 0.8em;
}

/*==== フッター ====*/
#footer {
	width: calc(100% - 2em);
	max-width: 60em;
	margin: 0 auto 3em;
	padding: 0;
}
#footer::after {
	display: block;
	content: '';
	width: 100%;
	height: 0;
	clear: both;
}
#footer h3 {
	margin: 1em 0;
	padding: 0.5em 0;
	font-size: 0.95em;
	font-weight: normal;
	color: white;
	background: black;
	text-align: center;
}
#footer #guide_left {
	width: 49%;
	float: left;
}
#footer #guide_right {
	width: 49%;
	float: right;
}
#footer h4 {
	margin: 0;
	padding: 0.25em 0.5em;
	line-height: 1.5;
	font-size: 0.95em;
	font-weight: normal;
	background: #EEE;
	border-left: solid thick #BB4600;
}
#footer ul {
	list-style-type: none;
	margin: -0.5em 0 0;
	padding: 0 0 0 0.5em;
	animation: show .75s linear 0s;
}
#footer ul li {
	font-size: 0.9em;
	line-height: 1.75;
}
#footer ul + h4 {
	margin-top: 2em;
}
#footer h4 span {
	white-space: nowrap;
}
#footer label {
	display: block;
}
#footer input {
	opacity: 0;
}
@media (max-width: 60em) {
	#footer #guide_left {
		width: 100%;
		max-width: 30em;
		margin: 0 auto;
		float: none;
	}
	#footer #guide_right {
		width: 100%;
		max-width: 30em;
		margin: 0 auto;
		float: none;
	}
	#footer ul {
		margin: -0.75em 0 2em;
	}
	#footer ul + h4 {
		margin-top: 0;
	}
}
@media (max-width: 40em) {
	#footer input + ul {
		display: none;
	}
	#footer input:checked + ul {
		display: block;
	}
}

/*==== 著作権表示 ====*/
#copyright {
	font-size: 0.85em;
	color: white;
	margin: 2em 0 0;
	padding: 1em 0;
	background: #B22222;
	text-align: center;
}



/*==== トップページ ====*/
#index_body {
	width: calc(100% - 2em);
	max-width: 60em;
	margin: 0 auto;
	padding: 0;
}
#index_body #block1 {
	width: 12.5em;
	margin: 0;
	padding: 0;
	background: #F5F5F5;
	float: left;
}
#index_body #block1 h3 {
	margin: 0;
	padding: 0.25em 0.5em;
	line-height: 1.5;
	font-size: 0.9em;
	font-weight: bold;
	background: #EEE;
	border-left: solid thick #BB4600;
}
#index_body #block1 ul {
	list-style-type: none;
	margin: 0 0 2em;
	padding: 0;
	
}
#index_body #block1 ul li {
	margin: 0;
	padding: 0.5em 0.5em 0.5em 1.5em;
	font-size: 0.85em;
	line-height: 1.5;
	border-bottom: solid thin #CCC;
	position: relative;
}
#index_body #block1 ul li::before {
	display: block;
	content: '■';
	color: #999;
	position: absolute;
	top: 0.5em;
	left: 0.5em;
}
#index_body #block1 ul li:last-child {
	border: none;
}
#index_body #block1 dl {
	margin: 2em 0.5em 1em;
}
#index_body #block1 dl dt,
#index_body #block1 dl dd {
	font-size: 0.85em;
	margin: 0;
	padding: 0;
	line-height: 1.5;
}
#index_body #block1 dl dd + dt {
	margin-top: 2.5em;
}
#index_body #block1 .shop_title {
	text-align: center;
	line-height: 2.2;
	margin-bottom: 0.25em;
}
#index_body #block1 .shop_title strong {
	font-size: 110%;
	color: darkorange;
	font-family: serif;
	text-shadow: 0.01em 0.01em 0 orange;
	border-top: solid thick #87cefa;
	border-bottom: solid thick #87cefa;
	background: white;
	padding: 0.5em 0.5em;
}
#index_body #block1 .shop_title a {
	text-decoration: none;
}
#index_body #block1 dl dd.url {
	text-align: center;
}
#index_body #block2 {
	width: 32em;
	margin: 0 0 0 2em;
	float: left;
}
#index_body #block2 h2 {
	margin: 0 0 1.5em 0;
	border-bottom: solid thin #999;
	padding: 0 0 0.5em;
	color: #BB4600;
	font-weight: bold;
	font-size: 1.125em;
	line-height: 1.25;
	letter-spacing: 0.05em;
}
#index_body #block2 #curriculum {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
#index_body #block2 #curriculum li {
	margin: 0 0 1.5em;
	padding: 0;
	width: calc(100% / 3);
	float: left;
}
#index_body #block2 #curriculum li div:first-child {
	text-align: center;
}
#index_body #block2 #curriculum li div:first-child img {
	width: 9.375em;
	height: 9.375em;
	object-fit: cover;
}
#index_body #block2 #curriculum li div:last-child h4 {
	font-size: 0.85em;
	text-align: center;
}
#index_body #block2 #curriculum li div:last-child p {
	font-size: 0.85em;
	line-height: 1.5;
	padding: 0 0.5em;
	letter-spacing: 0.05em;
}
#index_body #block2 #message h3 {
	font-size: 1em;
	font-weight: normal;
}
#index_body #block2 #message p {
	font-size: 0.95em;
	line-height: 1.5;
}
#index_body #block2 #news {
	margin: 3em 0 2em;
}
#index_body #block2 #news h3 {
	color: brown;
	margin: 0;
	padding-bottom: 0.5em;
	border-bottom: solid thin #999;
}
#index_body #block2 #news ul  {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#index_body #block2 #news ul li {
	font-size: 0.9em;
	margin: 0;
	padding: 0.75em 0 0.75em 1em;
	line-height: 1.25;
	border-bottom: solid thin #DDD;
	clear: both;
}
#index_body #block2 #news ul li small {
	display: block;
	width: 6rem;
	float: left;
}
#index_body #block2 #news ul li a {
	display: block;
	margin-left: 6rem;
}
#index_body #block3 {
	width: 11.5em;
	float: right;
	border: solid thin #87cefa;
}
#index_body #block3 h3 {
	font-size: 1em;
	font-weight: normal;
	color: white;
	background: #87cefa;
	margin: 0 0 1em 0;
	padding: 0.5em 0;
	text-align: center;
}
#index_body #block3 h4 {
	font-size: 0.9em;
	font-weight: normal;
	color: #87cefa;
	text-align: center;
}
#index_body #block3 div {
	padding: 0 0.5em;
}
#index_body #block3 h4 strong {
	font-size: 160%;
	font-weight: bold;
	line-height: 1.25;
}
#index_body #block3 p {
	font-size: 0.9em;
	line-height: 1.5;
	padding: 0.5em;
}
#index_body #block3 .twitter {
	text-align: center;
}
#index_body #block3 .twitter a,
#index_body #block3 .twitter a:visited {
	display: inline-block;
	color: black;
	text-decoration: none;
	padding: 0.125em 1em;
	border:rgb(238,238,238) outset thin;
	border-radius:0.25em;
	background-color:rgb(238,238,238);
	background: -moz-linear-gradient(top, rgba(238,238,238,0.5), rgb(238,238,238));
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(238,238,238,0.5)), to(rgb(238,238,238)));
}
#index_body #block3 .twitter a::before {
	display: inline-block;
	content: '';
	width: 1.5em;
	height: 1.5em;
	background: url(twitter_icon.svg) center center;
	background-size: contain;
	position: relative;
//	top: 0.25em;
	left: -0.25em;
	vertical-align: middle;
}
#index_body::after {
	display: block;
	content: '';
	width: 100%;
	height: 0;
	clear: both;
}
@media (max-width: 62em) {
	#index_body #block2 {
		margin: 0 0 0 14.5em;
		width: calc(100% - 14.5em);
		float: none;
	}
	#index_body #block3 {
		margin: 2em 0;
		width: 100%;
	}
	#index_body #block3 div {
		float: left;
	}
	#index_body #block3 div img {
		width: 12em;
		max-width: 30vw;
	}
	#index_body #block3 h4 {
		text-align: left;
	}
	#index_body #block3 p {
		clear: both;
		margin: 0;
		padding-top: 0.5em;
	}
	#index_body #block3 p:last-child {
		text-align: right;
		margin: 0 1em 0.5em 0;
	}
}
@media (max-width: 47em) {
	#index_body {
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	#index_body #block1 {
		order: 3;
		width: 30em;
		max-width: 100%;
		margin: 0 auto;
	}
	#index_body #block2 {
		order: 1;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	#index_body #block3 {
		order: 2;
		margin: 2em 0 4em;
	}
	#index_body #block1 dl dt,
	#index_body #block1 dl dd {
		text-align: center;
		font-size: 1em;
	}
	#index_body #block1 dl dt {
		margin-top: 5em;
	}
}
@media (max-width: 34em) {
	#index_body #block2 #curriculum {
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		width: 100%;
	}
	#index_body #block2 #curriculum li {
		width: 100% !important;
	}
	#index_body #block2 #curriculum li div:first-child {
		float: left;
	}
	#index_body #block2 #curriculum li div:first-child img {
		width: 25vw;
	}
	#index_body #block2 #curriculum li div:last-child {
		margin-left: calc(25vw + 0.75em);
	}
	#index_body #block2 #curriculum li div:last-child h4 {
		text-align: left;
		margin: 0.5em 0 1em;
	}
}


/*==== 1日の様子 ====*/
#page_a {
	width: calc(100% - 2em);
	max-width: 60em;
	margin: 0 auto;
	padding: 0;
}
#page_a h2 {
	background: #fcece8;
	text-align: center;
	padding: 0.5em;
	font-size: 1.25em;
	margin: 0 0 1em;
}
#page_a #block1 div {
	float: left;
}
#page_a #block1::after {
	display: block;
	content: '';
	width: 100%;
	height: 0;
	clear: both;
}
#page_a #block1 div img {
	display: block;
	max-width: 30vw;
	margin-right: 2em;
}
#page_a #block1 p {
	line-height: 1.75;
}
#page_a #block2 {
	margin: 3em auto;
}
#page_a #block2 ul {
	width: 50em;
	max-width: 100%;
	margin: 1em auto;
	line-height: 1.5;
}
#page_a #block3,
#page_a #block4 {
	width: 56em;
	max-width: 100%;
	margin: 3em auto;
	padding: 1em 2em;
	font-size: 90%;
	line-height: 1.5;
}
#page_a #block3 {
	background: #f7f1e7;
}
#page_a #block4 {
	background: #f5f5f5;
}
#page_a #block3 h3,
#page_a #block4 h3 {
	margin: 0;
}

/*==== 地図 ====*/
#page_b {
	width: calc(100% - 2em);
	max-width: 60em;
	margin: 0 auto;
	padding: 0;
}
#page_b h2 {
	background: #fcece8;
	text-align: center;
	padding: 0.5em;
	font-size: 1.25em;
	margin: 0 0 1em;
}
#page_b iframe {
	width: 100%;
	height: 40em;
	max-height: 80vw;
	border: solid medium #CCC !important;
}
#page_b ul li {
	line-height: 1.75;
}
#page_b #map {
	margin: 2em 0;
}
#page_b #map div {
	text-align: center;
	vertical-align: middle;
}
#page_b #map div img {
	max-width: 80%;
	vertical-align: middle;
}

/*==== お問い合わせ ====*/
#page_c {
	width: calc(100% - 2em);
	max-width: 60em;
	margin: 0 auto;
	padding: 0;
}
#page_c h2 {
	background: #fcece8;
	text-align: center;
	padding: 0.5em;
	font-size: 1.25em;
	margin:3em 0 1em;
}
#mail_form_table {
	margin: 2em auto;
}
#mail_form_table small {
	font-size: 0.9em;
}
#mail_form_table th {
	width: 18em;
}

#mail_form_table td div:nth-child(3),
#mail_form_table td div:nth-child(5) {
	margin-top: 0.5em;
}
#mail_form_table .required { /* [必須] */
	display: inline-block;
	color: white;
	background: red;
	padding: 0 0.25em;
	font-size: 75%;
	border-radius: 0.25em;
	margin-left: 0.5em;
}
#mail_form_table tr:nth-child(3) td small {
//	display: inline-block;
	margin-left: 0.5em;
}
#mail_form_table tr:nth-child(8) td small {
	display: block;
	margin: -0.125em 0 0.25em;
}



input[type=checkbox],
input[type=radio] {
	font-size: 1em;
}
input[type=text],
input[type=tel],
input[type=number],
textarea {
	box-sizing: border-box;
	border: solid thin #999;
	border-radius: 0.25em;
	padding: 0.25em;
	font-size: 1.25em;
	color: black;
	background: white;
	letter-spacing: 0.1em;
}
textarea {
	display: block;
	line-height: 1.5;
}
select{
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	border: solid thin #999;
	border-radius: 0.25em;
	background: none transparent;
	vertical-align: middle;
	font-size: 1.25em;
	padding: 0.125em 0.25em;
	line-height: 1.5;
	background: white;
}
select::-ms-expand {
	display: none;
}
.confirmation { /* 確認画面での文字の大きさ */
	font-size: 125%;
}


.blinking { /* [ ! ] 警告点滅 */
	-webkit-animation:blink 1s ease-in-out infinite alternate;
	-moz-animation:blink 1s ease-in-out infinite alternate;
	animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
#mail_form_table .name_sup {/* 姓 セイ */
	display: inline-block;
	width: 2.5em;
}
#mail_form_table .name_sup2 {/* 名 メイ */
	display: inline-block;
	width: 2.5em;
	margin-left: 1.75em;
}
#mail_form_table label {
	transition: .2s;
}
#mail_form_table label:hover {
	background: #EEE;
}
/* 入力窓の幅とか */
#name1, #name2, #ruby1, #ruby2 { /* 名前 入力窓 */
	width: 9em;
	max-width: 25vw;
}
#postcode { /* 郵便番号 入力窓 */
	width: 7em;
}
#address2 { /* 住所 入力窓 */
	width: 100%;
}
#age { /* 年齢 入力窓 */
	width: 2.5em;
	text-align: right;
}
#tel { /* 電話番号 入力窓 */
	width: 12em;
}
#email1 { /* メール 入力窓 */
	max-width: 20em;
	width: 100%;
}
#area1 { /* お問い合わせ内容 入力窓 */
	width: 100%;
	height: 12em;
}
#box2ex {
	width: 14em;
}
#mail_form_table ul {
	list-style-type: none;
	display: inline;
	margin: 0;
	padding: 0;
	line-height: 1.5;
	overflow: auto;
}
#mail_form_table ul li {
	display: inline-block;
	margin: 0.125em 0.5em 0.125em 0;
}
#mail_form_table label {
	padding: 0.25em 0.25em;
}
input[type=radio] + label + input[type=text],
input[type=checkbox] + label + input[type=text] {
	opacity: 0.25;
	transform:rotateX(90deg);
	pointer-events : none;
	transition: 0.5s;
}
input[type=radio]:checked + label + input[type=text],
input[type=checkbox]:checked + label + input[type=text] {
	opacity: 1;
	transform:rotateX(0deg);
	pointer-events : auto;
}

/* 送信ボタンの装飾 */
#submit {
	margin: 2em 0 4em;
	text-align: center;
}
#submit button {
	display:inline-block;
	text-align: center;
	font-size:1em;
	width: 10em;
	font-family:sans-serif;
	line-height:1;
	margin: 0.5em;
	padding: 0.5em 0.75em;
	border-left: solid 0.125em #DDD;
	border-top: solid 0.125em #DDD;
	border-right: solid 0.125em #AAA;
	border-bottom: solid 0.125em #AAA;
	color: black;
	background-color:#F3F3F3;
	border-radius:0.25em;
	background: -moz-linear-gradient(top,  #FFF,  #DDD);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD));
	cursor:pointer;
	outline: none;
	transition: 0.1s;
}
#submit button:active {
	color: black;
	border-left: solid 0.125em #AAA;
	border-top: solid 0.125em #AAA;
	border-right: solid 0.125em #DDD;
	border-bottom: solid 0.125em #DDD;
}
#submit1 {
	position: relative;
	top: 1.5em;
	left: 9.75em;
	margin-bottom: 4em;
}
#submit2 {
	position: relative;
	top: 1.5em;
	left: 9.75em;
	margin-bottom: 4em;
}
#allgreen_message { /* 入力に不備が無い時の緑色のメッセージ */
	border: solid medium #0A0;
	color: #0A0;
	background: #FFF;
	margin: 0;
	padding: 1em 2em;
	box-shadow: 0.5em 0.5em 0.5em rgba(0,0,0,0.2);
}
#allgreen_message span {
	padding: 0em 0.4em;
	font-weight: bold;
	color: white;
	background: #0A0;
	border: solid medium #0A0;
	vertical-align: middle;
}
#alert_message { /* 入力に不備がある時の警告メッセージ */
	border: solid medium red;
	color: red;
	background: #FFF;
	margin: 0;
	padding: 1em 2em;
	box-shadow: 0.5em 0.5em 0.5em rgba(0,0,0,0.2);
}
#alert_message span {
	padding: 0 0.4em;
	font-weight: bold;
	color: white;
	background: red;
	border: solid medium red;
	vertical-align: middle;
}
#finish_message {
	text-align: center;
	margin: 8em 0;
}
@media (max-width: 50em) {
	#mail_form_table th,
	#mail_form_table td {
		display: block;
		width: 100%;
	}
	#mail_form_table th {
		border-bottom: none;
		text-align: left;
	}
	#mail_form_table td {
		border-top: none;
	}
}

@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}