@charset "UTF-8";
/* CSS Document */

/* ----------------------------------------------------------------------------------------------------
*  top
* --------------------------------------------------------------------------------------------------*/

/* mainImage
--------------------------------------------------*/
.mainImage img{
	width: 100%;
}
.mainImageList {
	
}
.mainImageList li {
	float: left;
	width: 25%;
}
@media screen and (max-width:768px) {
	.mainImageList li {
		float: left;
		width: 49.9999%;
	}
}

/* topCol02
--------------------------------------------------*/
.topCol02 > *{
	width: 50%;
	padding: 45px 3.2% 40px;
}
.topCol02 .btnStyle03{
	margin-top: 45px;
}

/* topNews */
.topNews .newsList01 li{
	background: #f8f8f8;
}

/* topBlog */
.topBlog{
	background: #f8f8f8;
}
.topBlog .newsList01 li{
	background: #fff;
}

@media screen and (max-width:768px) {
	.topCol02 > *{
		width: auto;
		float: none;
		padding: 25px 2.666% 40px;
	}
	.topCol02 .btnStyle03{
		margin-top: 40px;
	}
}

/* topShop
--------------------------------------------------*/
.topShop{
	padding: 70px 0 80px;
	overflow: hidden;
}
.topShop .ttlStyle02{
	margin-bottom: 60px;
}
.shopList .listBox {
	padding: 0 25px;
	outline: none;
}
.animeOn {
	-webkit-backface-visibility: hidden;
	-webkit-animation-duration: 1s;
	-webkit-animation-delay: 0.2s;
	-webkit-animation-fill-mode: both;
	-webkit-transition-timing-function: ease-in-out;
	-webkit-animation-name: fadeInRight;
	backface-visibility: hidden;
	animation-duration: 1s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
	transition-timing-function: ease-in-out;
	animation-name: fadeInRight;
}
.an01 {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
.an02 {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}
.an03 {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.an04 {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
.second {
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}
.third {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.3s;
}
.fourth {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.35s;
}

@-webkit-keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(60%, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
	}
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(60%, 0, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.shopList .shopImage a {
	display: block;
	overflow: hidden;
	backface-visibility: hidden;
	outline: none;
}
.shopList .shopImage a img {
	width: 100%;
	-webkit-transition: -webkit-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
}
.shopList .shopImage a:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.shopList .shopText {
	padding: 15px 15px 20px;
	margin-top: 10px;
	background: #201f1d;
	color: #fff;
	font-size: 16px;
}
.shopList .shopAddress {
	display: block;
	margin: 4px 0;
	font-size: 12px;
}
.shopList .shopText .infoBtnList {
	margin-top: 10px;
	overflow: hidden;
}
.shopList .shopText .infoBtnList li {
	width: 45.5%;
	float: left;
}
.shopList .shopText .infoBtnList li:nth-child(even) {
	float: right;
}

@media screen and (max-width:768px) {
	.topShop {
		padding: 40px 0 50px;
	}
	.topShop .contentIn {
		padding: 0 9.333%;
	}
	.topShop .ttlStyle02{
		margin-bottom: 35px;
	}
	.shopList .listBox {
		padding: 0;
	}
	.shopList .listBox:nth-of-type(n+2) {
		margin-top: 35px;
	}
	.shopList .shopText {
		padding: 18px 6.56% 20px;
		font-size: 18px;
	}
	.shopList .shopAddress {
		font-size: 13px;
	}
	.shopList .shopText .infoBtnList {
		margin-top: 14px;
	}
	.shopList .shopText .infoBtnList .btnStyle02 {
		max-width: none;
	}
}


/* ----------------------------------------------------------------------------------------------------
*  company
* --------------------------------------------------------------------------------------------------*/

/* companyGreeting
--------------------------------------------------*/
.companyGreeting {
	padding: 75px 0 45px;
	font-size: 16px;
	line-height: 1.875;
}
.companyGreeting .ttlStyle01 {
	margin-bottom: 2.5em;
}
.companyGreeting p + p {
	margin-top: 2em;
}
.companyGreeting .representative{
	text-align: right;
}

@media screen and (max-width:768px) {
	.companyGreeting {
		font-size: 13px;
		padding: 30px 0;
	}
	.companyGreeting .ttlStyle01 {
		margin-bottom: 2em;
	}
}

/* companyOverview
--------------------------------------------------*/
.companyOverview {
	padding-bottom: 25px;
}
.companyOverview .overviewText {
	width: 49%;
	padding: 0 7.143%;
}
.companyOverview .overviewImage {
	width: 51%;
}
.companyOverview .overviewImage img {
	width: 100%;
}

@media screen and (max-width:768px) {
	.companyOverview {
		padding: 30px 0;
	}
	.companyOverview .overviewText {
		width: auto;
		padding: 0 5.333% 20px;
		float: none;
	}
	.companyOverview .overviewImage {
		width: auto;
		float: none;
	}
}


/* ----------------------------------------------------------------------------------------------------
*  recruit
* --------------------------------------------------------------------------------------------------*/

/* recruitContents
--------------------------------------------------*/
.recruitContents{
	padding: 50px 0 35px;
}

/* recruitBox */
.recruitBox {
	width: 47.5%;
	padding: 25px 3% 0;
	border: dotted 2px rgba(131,131,131,0.40);
	border-radius: 5px;
	background: #fff;
}

@media screen and (max-width:768px) {
	.recruitContents{
		padding: 35px 0 10px;
	}

	/* recruitBox */
	.recruitBox {
		width: auto;
		padding: 25px 5.333% 20px;
		float: none;
	}
	.recruitBox + .recruitBox {
		margin-top: 20px;
	}
}

/* staffInterview --------------------------------------------------*/

.staffInterview{
	padding-bottom: 30px;
}
.staffTtl{
	padding: 58px 0 2px;
	margin-bottom: 70px;
	background: url(http://warai-ya.com/hp/wp-content/themes/waraiya/img/common/_cmn_bg01.png) no-repeat center bottom;
	background-size: contain;
	text-align: center;
}
.staffTtl span{
	display: inline-block;
	position: relative;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 34px;
}
.staffTtl span:before,
.staffTtl span:after{
	display: inline-block;
	vertical-align: bottom;
	content: "∥";
	font-size: 60px;
	line-height: 1.0; 
}
.staffTtl span:before {
	margin-right: 0.7em;
}
.staffTtl span:after {
	margin-left: 0.7em;
}

// staffBox
.staffBox {
	overflow: hidden;
}
.staffBox .staffImage {
	width: 40.7%;
	overflow: hidden;
}
.staffBox .staffImage img {
	width: 100%;
}
.staffBox .staffText {
	width: 59.3%;
	padding: 40px 9% 40px 2.143%;
}
.staffBox .staffText {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.staffBox .staffName {
	margin: 0.7em 0;
	font-size: 24px;
	line-height: 1.1;
}
.staffBox .staffName span{
	display: block;
	font-size: 36px;
}
.staffBox .staffDl {
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
.staffBox .staffDl dt {
	margin-bottom: 0.3em;
	font-weight: bold;
}
.staffBox .staffDl dd + dt {
	margin-top: 1.8em;
}

@media screen and (max-width:768px) {
	.staffInterview {
		padding-bottom: 0;
	}
	.staffTtl {
		padding: 30px 0 0;
		margin-bottom: 30px;
	}
	.staffTtl span {
		font-size: 18px;
	}
	.staffTtl span:before,
	.staffTtl span:after {
		font-size: 32px;
	}
	.staffTtl span:before {
		margin-right: 0.4em;
	}
	.staffTtl span:after {
		margin-left: 0.4em;
	}
	
	// staffBox
	.staffBox .staffImage {
		width: auto;
		float: none;
	}
	.staffBox .staffText {
		width: auto;
		padding: 25px 5.333%;
		float: none;
	}
	.staffBox .staffName {
		margin: 1em 0;
		font-size: 16px;
		line-height: 1.5;
	}
	.staffBox .staffName span {
		font-size: 24px;
	}
}



/* ----------------------------------------------------------------------------------------------------
*  shop
* --------------------------------------------------------------------------------------------------*/

.shopContents{
	padding: 170px 0 0;
	background: url(http://warai-ya.com/hp/wp-content/themes/waraiya/img/common/cmn_bg01.png) no-repeat top 44px center;
	background-size: contain;
	position: relative;
}
.shopContents .bgGray{
	padding: 63px 0 27px;
}

@media screen and (max-width:768px) {
	.shopContents{
		padding-top: 100px;
		background-position: top 40px center;
	}
	.shopContents .bgGray{
		padding: 40px 0;
	}
}