@charset "UTF-8";
/* ================================= CSSリセット ==================================================== */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,
mark,audio,video			{margin:0;	padding:0;	border:0;	outline:0;	font-size:100%;	vertical-align:baseline;	background:transparent;	font-weight:normal;}
body										{line-height:1.5;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ul											{list-style:none;}
blockquote,q						{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
a												{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
del											{text-decoration:line-through;}
abbr[title],dfn[title]	{border-bottom:1px dotted;cursor:help;}
table										{border-collapse:collapse;border-spacing:0;}
hr											{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle;}
/* ====== 汎用の共通設定 ====== */
	.red					{color: red;}

/* ====== タイトル向けＷＥＢフォント ====== */
  	body					{background-color:#fffcff; font-family: "Zen Maru Gothic"; font-weight: 400; font-style: normal;}
	header					{position: relative; }
	p						{line-height:	1.6;	text-indent:none;}

/* ======================================== パソコン向けスタイル 			======================================== */
@media only screen and (min-width:480px) {
	/* Common */
	a:link						{text-decoration:none;	color:#444444;	}
	a:visited					{text-decoration:none;	color:#444444;	}
	a:hover						{text-decoration:none;	color:#088598;	}
	a:active					{text-decoration:none;	color:#444444;	}
	body						{width:980px;	margin:0 auto;	padding:0;	font-size:1.1rem;	color:#333333; box-sizing: border-box;	background-color: #fffffa;}

	/* header */
	aside#top					{text-align: right;	margin: 0 1rem 0 0; font-size: 0.8rem;}
	header nav 					{display: block; background: linear-gradient(180deg, #faf4e7 , #ffffff );  display: flex; align-items: center; justify-content: space-between; height: 5rem;}
	header nav h1.pinyon-script-regular {font-family: "Pinyon Script", cursive; font-weight: 400; font-style: normal; font-size: min(4vw,45px);}
	header nav ul li				{display: inline-block;padding: 0 1rem 0;}
	header nav h1 img 			{height: 2.5rem; padding: 0 2rem 0 1rem;}

	/* Main Article 5th */
	section#contact 			{background-color: #8c9762; padding: 3rem 0 3rem 10rem; color: white;}
	section#contact h2			{font-size: 2rem; padding-bottom: 1rem; }
	section#contact .contact_rap		{display: flex; align-items: center; }
	section#contact address		{margin-right: 4rem;}
	section#contact a	{color: white;}
	section#contact img#mail	 		{width: 30px; vertical-align: middle; margin-right: 0.5rem;}
	section#contact img#instagram 		{width: 30px; vertical-align: middle; margin-right: 0.5rem;}

	/* Footer */
	footer 						{text-align: center; margin: 0 auto; padding: 3rem 0 1rem 0;}
	footer small 				{display: block;}

}
/* ======================================== モバイル向けスタイル 		======================================== */
@media only screen and (max-width:479px) {
	/* Common */
	a:link					{text-decoration:none;	color:#444444;	}
	a:visited				{text-decoration:none;	color:#444444;	}
	a:hover					{text-decoration:none;	color:#444444;	}
	a:active				{text-decoration:none;	color:#444444;	}
	body					{width:97%;	margin:2%;	padding:0% 1% 0% 0%;	font-size:0.5vw;		color:#000000;}

	/* header */
	aside#top					{text-align: right;	margin: 0 1rem 0 0; font-size: 2vw;}
	header nav 					{display: block; background: linear-gradient(180deg, #faf4e7 , #ffffff );  display: flex; align-items: center; justify-content: space-between; height: 12vw;}
	header nav h1.pinyon-script-regular {font-family: "Pinyon Script", cursive; font-weight: 400; font-style: normal; font-size: min(5vw,55px); display: block;}
	header nav 				{display: block;}
	header nav ul li				{display:inline-block; padding: 0 1rem 0; font-size: 2vw;}
	header nav h1 img 			{height: 4vw; padding: 0 2rem 0 1rem;}

	/* Eye Catch */
	section#eye_catch img 					{width: 100%;}
	section#eye_catch #top_image			{position: relative;}
	section#eye_catch #top_image h2 		{position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); font-size: min(3.5vw,2.7rem); background-color: white; width:70%; text-align: center; padding: 0.9vw; vertical-align: top;  }
	section#eye_catch #top_image h3 		{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: min(2.8vw,1.8rem); background-color: white; width:60%; text-align: center; padding: 0.9vw;}

	/* Main Article 5th */
	section#contact 			{background-color: #8c9762; padding: 2vw 0 2vw 0rem; text-align: center; margin-top: 4vw; color: white; }
	section#contact h2			{font-size: 5vw; padding-bottom: 0; margin-bottom: 2vw;}
	section#contact .contact_rap		{text-align: left;}
	section#contact address		{margin-bottom: 2vw;}
	section#contact a	{color: white; font-size: 3.5vw;}
	section#contact img#mail	 		{width: 30px; vertical-align: middle; margin: 0 2vw 0 2vw;}
	section#contact img#instagram 		{width: 30px; vertical-align: middle; margin: 0 2vw 0 2vw;}


	/* Footer */
	footer 						{font-size: 3vw; text-align: center; margin: 0 auto; padding: 3rem 0 1rem 0;}
	footer small 				{display: block;}


}