@import url('https://fonts.googleapis.com/css2?family=Bad+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table	{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}


* {transition:0.3s;}

body{font:100%/190% 'Noto Sans JP', Arial, Verdana, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;color: #432;background-color:transparent;background-image: url("../images/bg.png");}
body{-webkit-text-size-adjust:100%;overflow-x: hidden;}

a 					{color:#369;text-decoration: none;font-weight:bold;}
a:hover, a:active	{color:#c63;transition:0.5s;}
a:active, a:focus,input:active, input:focus {outline:0;}


/* ヘッダー
------------------------------------------------------------*/

#mainnav .section-list a		{color:#543;font-size:120%;font-weight:normal;line-height:180%;letter-spacing:0.3em;display:block;background-color:transparent;}
#mainnav .section-list a:hover	{color:#c63;background-color:#fff;opacity:.9;border-radius:20px; -webkit-border-radius:20px;box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);}
#sidebar h1 img		{max-width:80%;}

/* フッター
------------------------------------------------------------*/
#footer				{clear: both;text-align: center;letter-spacing:0.1em;padding:2em;}
#footer span		{font-family: 'Bad Script', 'Noto Sans JP',serif;font-size:110%;font-weight:bold;letter-spacing:0.1em;padding:0 1em;}

/* 共通
------------------------------------------------------------*/
h1, h2				{font-family: 'Bad Script', 'Noto Sans JP',serif;font-size:150%;letter-spacing:0.3em;}
img					{max-width: 100%;height: auto;}
section				{clear: both;}
section h2			{width: 60%;margin: 70px auto;font-size: 200%;font-weight:normal;text-align: center;}
section h2 span 	{padding: 0 3em .5em 3em;border-bottom: 1px solid #666;}
.inner{width: 80%;margin: 0 auto;padding-bottom:3em;}
.clear 				{clear:both;}


/* セクション 01 お知らせ
------------------------------------------------------------*/
.information 		{width:80%;margin: 0 auto;padding-bottom:1em;text-align:center;}
.history 			{margin-bottom:3em;}
.history dl			{width:calc(65% + 7em);margin:1em auto 3em auto;}
.history dt , .history dd	{border-bottom:1px solid #fff;display:block;}
.history dl dt		{width:7em;float:left;clear:left;padding:.5em .5em .5em 2em;font-weight:bold;}
.history dl dd		{float:left;margin:0;width:calc(100% - 14em);padding:.5em 2em .5em .5em;}
.history dl dd:after {display: block;clear: both;content: "";}

@media only screen and (max-width: 648px){
	.history dl 	{width:80%;margin:auto;padding:0;}
	.history dt , .history dd
					{float:none!important;width:100%!important;margin:0;padding:0;}
}


/* セクション 02 ギャラリー
------------------------------------------------------------*/

.gallery			{columns:3;padding:0 3em;margin:0;}
.gallery li 		{margin:0 1em 1em 0;list-style:none;}
.gallery img		{width:100%;border:5px solid #fff!important;box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);height:auto;vertical-align: bottom;}
.gallery img:hover	{box-shadow: 0 10px 13px 0 rgba(0, 0, 0, .3);}

@media only screen and (max-width: 768px) {
	.gallery{columns: 2;}	
}


/* セクション 03 ショップリスト
------------------------------------------------------------*/
.shoplist .img		{margin: 0 auto;}
.shoplist li		{display: inline-block;width: 23%;padding: 1em 3%;vertical-align: top;text-align: center;}
.shoplist a img 	{width:100%;}
.shoplist a img 	{border-radius:300px; -webkit-border-radius:300px;border:2px solid #fff;box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);}
.shoplist a img:hover {border-radius:0px; -webkit-border-radius:0px;transition:0.8s ;box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .3);}


/* セクション 04 採用情報
------------------------------------------------------------*/

.recruit			{clear:both;overflow: hidden;padding-bottom:3em;}
.recruit img		{clear:both;width:35%;float:right;margin:1em; border:10px solid #fff;box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);}
.recruit h3			{margin:1.3em 0;}
.recruit p			{margin-bottom: 3em;}


/* セクション 05 会社概要
------------------------------------------------------------*/
.company table		{width:60%;margin:auto;}
.company tr			{border-bottom:1px solid #fff;}
.company th 		{width:7em;text-align:center;}
.company th , table.company td 
					{vertical-align:top;padding:.8em 0;}
.company			{clear: both;overflow: hidden;padding-bottom:3em;}
.company img		{width:30%;float:left;margin:1em; border:10px solid #fff;box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);}


/* 800px以上のとき
------------------------------------------------------------*/

@media only screen and (min-width: 800px){
	body			{font-size:100%;}
	#wrapper		{width:100%;}
	#content		{width:80%;}
	#sidebar		{width:15%;position: fixed;top: 0;right:2%;}
	a#menu			{display:none;}	
	.panel			{display:block !important;}
	#sidebar h1		{padding: 30px 0;}
	#mainnav li		{font-size:100%;padding:.2em 0;text-align:center;}
	#sns			{margin-top: 50px;text-align:center;}
	#sns li			{display: inline-block;padding-right:2px;}

	#sns a:hover img{opacity: .5;}
	#sns img{width:30px;}
	
	.shoplist		{text-align: center;}
	.shoplist li	{display: inline-block;width: 23%;padding: 1em 3%;vertical-align: top;text-align: center;	}
	.shoplist a img {width:100%;}
	#footer			{padding: 30px 10px 70px 0;}
}

/* 640px以下のとき
------------------------------------------------------------*/
@media only screen and (max-width: 640px){

	.company img , .recruit img
						{width:80%;float:none;display: block;margin: 0 auto 1em;}
	.company table		{width:80%;margin:auto;}
	.company table th 	{width:6em;text-align:center;}

}
/* 800px以下のとき
------------------------------------------------------------*/
@media only screen and (max-width: 799px){
	#sidebar		{position: fixed;width: 100%;z-index:500;}
	#sidebarWrap	{position: relative;width: 100%;height:60px;background:#cb9;border-bottom:1px solid #fff;box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);}
	#sidebar h1		{text-align: center;padding-top:1em;}
	#sidebar h1 img	{width:auto !important;margin:0 auto;max-height:30px;}

	#menuBtn			{display: block;position: absolute;top: 50%;left: 50%;width: 18px;height: 2px;margin: -1px 0 0 -7px;background: #000;transition: .2s;}
	#menuBtn:before, #menuBtn:after		{display: block;content: "";position: absolute;top: 50%;left: 0;width: 18px;height: 2px;background: #000;transition: .3s;}
	#menuBtn:before		{margin-top: -7px;}
	#menuBtn:after		{margin-top: 5px;}

	a#menu			{display: inline-block;position: relative;width: 40px;height: 40px;margin: 10px;}
	a#menu .close	{background: transparent;}
	a#menu .close:before, a#menu .close:after	{margin-top: 0;}
	a#menu .close:before		{transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}
	a#menu .close:after			{transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}

	.panel			{width: 100%;display: none;overflow: hidden;position: relative;left: 0;top: -10px;z-index: 100;}
	#mainnav		{position: absolute;top: 0;width: 100%;text-align: right;}
	#mainnav ul		{border-bottom: 1px solid #ccc;background: #fff;text-align: left;}

	#mainnav li a	{position: relative;display: block;padding: 15px 25px;border-bottom: 1px solid #ccc;color: #000;}
	#mainnav li a:before	{display: block;content: "";position: absolute;top: 50%;left: 5px;width: 6px;height: 6px;margin: -4px 0 0 0;border-top: solid 2px #000;border-right: solid 2px #000;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
	#mainnav #sns 	{columns: 5;}
	#mainnav #sns img {width:80%;}
	#mainnav #sns li a{position: relative;display: inline-block;padding: 15px 10px 0;border: 0;}
	#mainnav #sns li a:before{border: 0;}

	.shoplist li	{display: inline-block;width: 40%;padding: 1em 3%;vertical-align: top;text-align: center;}
	.shoplist a img {width:100%;}
	section h2 {margin: 3em auto;}
	#top-image{padding-top:50px;}
}