@charset 'UTF-8';

/* ================================================================================

	トップページ

================================================================================ */




/* ================================================================================

	Site origin 不要設定解除
	※案件によって使い分けてください。
	※価格表のcssと一緒に使うとバグりますので、その時は個別に設定すると吉です。

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	/*
	.panel-grid{
		margin:0 auto !important;
	}
	.panel-grid-cell{
		margin:0 auto !important;
	}
	.so-panel{
		margin:0 auto !important;
	}
	*/
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	/*
	.panel-grid{
		margin:0 auto !important;
	}
	.panel-grid-cell{
		margin:0 auto !important;
	}
	.so-panel{
		margin:0 auto !important;
	}
	*/
}




/* ================================================================================

	レイアウト

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#wrapper{
	}

	main.outer_wrap{
		max-width:1920px;
		width:100%;
		min-height: 66vh;
		background:
			url(../img/blog.bg.png) center 2667px no-repeat,
			url(../img/content02-img.png) center 1840px no-repeat, 
			url(../img/head-bg01.png) center top no-repeat, 
			url(../img/head-bg02.png) center 515px no-repeat;
		display:block;
	}

	.inner_wrap{
	}
	
	/* スライダー */
	.slide{
		position:absolute;
		left:50%;
		width:1124px;
		height:789px;
		margin-left: -448px;
		z-index:1;
		
	}
	
	.slide .viewer img {
		position:absolute;
		left:0;
		top:0;
	}
	/* トップのみのフッター設定 */
	footer {
		position:relative;
		background: url(../img/footer-bg.png) center bottom no-repeat;
		display: block;
		margin-top: -161px;
	}
	/* トップの電話番号非表示 とPCのイメージスライダー　*/
	.sp-head-tel,
	.sp-slide{
		display:none;
	}
	/* snsボタン　*/
	.sns_box {
		position:absolute;
		right:0;
		top: 0;
        width: 30%;
		z-index:3;
		display: grid;
		
	}
	.sns_box a {
		background: #00000061;
	}
	.sns_box a:hover {
		background: #6f7600;
	}
	.sns_box img {
		width:80%
	}
}




/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#wrapper{
		background-color:#100b0a !important;
		background:url(../img/sp-bg.jpg) center top repeat;
	}
	main.outer_wrap{
		width:100%;
	}
	
	.inner_wrap{
	}
	
	/* スライダー */
	.sp-slide{
		border-bottom: 15px #2b2e27 solid;
	}
	
	/* ヘッダーの電話番号 */

	.head-tel{
		position: relative;
		z-index: 5;
		width: 80%;
		height: 169px;
		margin: 15px auto 0;
	}
	/* トップの電話番号非表示 とPCのイメージスライダー　*/
	.sp-head-tel,
	.slide{
		display:none;
	}
		
}




/* ================================================================================

	コンテンツ01

================================================================================ */
/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	
	
	/* 歌って飲んで笑井飛ばそう！ */
	.row-01{
		position:relative;
		width:1200px;
		height: 1825px;
		margin:0 auto;
		padding-top:729px;
	}
	
	
	
	.content01-panda{/* パンダ店員　画像 */
		width: 1081px;
		height: 501px;
		position: absolute;
		left:50%;
		transform:translate(-642px,44px);
		-webkit-transform:translate(-642px,44px);
		-ms-transform:translate(-642px,44px);
		
	}	
	.content01-hukidasi{/* 吹き出し　画像 */
		width: 391px;
		height: 122px;
		position: absolute;
		left:50%;
		transform:translate(-254px,572px);
		-webkit-transform:translate(-254px,572px);
		-ms-transform:translate(-254px,572px);
	}
	.content01-owl{/* 気まぐれ店長　画像 */
		width: 347px;
		height: 375px;
		position: absolute;
		left:50%;
		transform:translate(257px,307px);
		-webkit-transform:translate(257px,307px);
		-ms-transform:translate(257px,307px);
	}
	.content01-darts{/* ダーツ　画像 */
		width: 376px;
		height: 428px;
		position: absolute;
		left:50%;
		transform:translate(-604px,634px);
		-webkit-transform:translate(-604px,634px);
		-ms-transform:translate(-604px,634px);
	}
	.row01-widget02{/* テキスト */
		transform:translate(322px,388px);
		-webkit-transform:translate(322px,388px);
		-ms-transform:translate(322px,388px);
		line-height: 2.2;
		height: 182px;
		width: 500px;
	}
	.row01-widget03{/* テキスト */
		transform:translate(410px,365px);
		-webkit-transform:translate(410px,365px);
		-ms-transform:translate(410px,365px);
		line-height: 2.2;
		height: 182px;
		width: 555px;
	}
	
	
	.sistem-botan{/* システムボタン */
		width: 413px;
		height: 171px;
		position: absolute;
		left:50%;
		transform:translate(-94px,459px);
		-webkit-transform:translate(-94px,459px);
		-ms-transform:translate(-94px,459px);
	}
	/* psで非表示 */
	.sp-images01,
	.sp-images02{
		display:none;
	}
	
}
/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row-01{background:url(../img/sp-bg.jpg) center top repeat;
	}
	
	.pc-images{
		display:none;
	}
	.row01-widget02,
	.row01-widget03{/* テキスト */
		margin: 0 auto;
		padding: 0 15px;
	}
	.sp-images01 .sp-content01-title{
		padding: 43px 15px 15px;
	}
	.sp-content01-panda-owr{/* パンダフクロウ画像 */
		padding:0 15px 15px 15px;
	}
	.sp-images02{/* ダーツもあるよ画像 */
		width:50%;
		margin: -28px auto 17px;
	}
	.sistem-botan{/* システム・料金ボタン */
		width: 80%;
		margin: 57px auto 17px;
	}	
}


/* ================================================================================

	コンテンツ02

================================================================================ */
/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row-02{
		position: relative;
		height: 933px
	}
	.content02-botan1{/* メニュー */
		width: 448px;
		height: 354px;
		position: absolute;
		left:50%;
		transform:translate(-478px,54px);
		-webkit-transform:translate(-478px,54px);
		-ms-transform:translate(-478px,54px);
	}
	.content02-botan2{/* イベント */
		width: 498px;
		height: 399px;
		position: absolute;
		left:50%;
		transform:translate(31px,48px);
		-webkit-transform:translate(31px,48px);
		-ms-transform:translate(31px,48px);
	}
	.content02-botan3{/* アクセス */
		width: 425px;
		height: 399px;
		position: absolute;
		left:50%;
		transform:translate(-162px,465px);
		-webkit-transform:translate(-162px,465px);
		-ms-transform:translate(-162px,465px);
	}

	.row-02 .sp-content02-botan3{/* スマホ用のアクセスが画像非表示 */
		display:none;
	}
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	
	#pl-2 > div{
		margin-bottom:0px !important;
	}
	
	.row-02{
		background:url(../img/sp-content03-bg.png) center top no-repeat;
	}
	
	.row-02 .content02-botan1 img{
		width:80%;
		margin: 57px auto 33px;
	}
	
	.row-02 .content02-botan2 img{
		width:95%;
		margin: 0 auto;
	}
	
	.row-02 .sp-content02-botan3 img{
		width: 85%;
		margin: 37px auto 82px;
	}
	.row-02 .content02-botan3{/* PC用のアクセスが画像非表示 */
		display:none;
	}
}
/* ================================================================================

	コンテンツ03 (ブログ)

================================================================================ */
/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row-03{
		position: relative;
		height: 568px
	}
	.news_box{
		width:1000px;
		margin:0 auto;
		padding: 59px 0 0 108px;
		font-family: "Times New Roman",Kokoro,"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN", "MS P明朝", "MS PMincho","Sawarabi Mincho","メイリオ",Meiryo,serif !important;
	}
	.news_case{
		float:left;
	}
	.trim_box img{/* サムネイルの画像のサイズ*/
		width:220px;
		height:230px;
		object-fit: cover;
		font-family: 'object-fit: cover;'; /* IE対策 */
	}
	
	.txt_date span.txt_title{/* タイトル */
		font-size:18px;
		color:#ca2b2f;
	}
	
	/* --------------------------最初の記事の傾き-------------------------- */
	.news_box ul li:nth-of-type(1) .news_case{
		transform: rotate(3deg);
		padding: 33px 0 0 3px;
	}
	.news_box ul li:nth-of-type(1) .news_case span.news_title_date{/* 日付 */
		font-size:12px;
		color:#3a1508;
		display: block;
	}
	.news_box ul li:nth-of-type(1) .news_case .txt_title{/* タイトル */
		font-size:18px;
		color:#ca2b2f;
		margin-top: 0px !important;
		display: block;
		width: 225px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	
	/* ------------------------二番目の記事の傾き-------------------------- */
	.news_box ul li:nth-of-type(2) .news_case{
		padding: 35px 0 0 61px;
		transform: rotate(-0.1deg);
	}
	.news_box ul li:nth-of-type(2) .news_case span.news_title_date{/* 日付 */
		font-size:12px;
		color:#3a1508;
		display: block;
	}
	.news_box ul li:nth-of-type(2) .news_case .txt_title{/* タイトル */
		font-size:18px;
		color:#ca2b2f;
		margin-top: 0px !important;
		display: block;
		width: 225px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	
	/* ------------------------最後の記事の傾き-------------------------- */
	.news_box ul li:nth-of-type(3) .news_case{
		transform: rotate(-4deg);
		padding: 10px 0 0 56px;
	}
	.news_box ul li:nth-of-type(3) .news_case span.news_title_date{/* 日付 */
		font-size:12px;
		color:#3a1508;
		display: block;
	}
	.news_box ul li:nth-of-type(3) .news_case .txt_title{/* タイトル */
		font-size:18px;
		color:#ca2b2f;
		margin-top: 0px !important;
		display: block;
		width: 225px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	
	
	
	
	/* ブログリンク */
	.content03-botan01{/* フクロウ画像 */
		position: absolute;
		left: 50%;
		width: 141px;
		height: 132px;
		z-index: 2;
		transform:translate(-205px,46px);
		-webkit-transform:translate(-205px,46px);
		-ms-transform:translate(-205px,46px);
		pointer-events: none;
	}
	.content03-botan02 img{/* ボタン画像 */
		position: absolute;
		left: 50%;
		width: 252px;
		height: 158px;
		z-index: 1;
		transform:translate(-111px,4px);
		-webkit-transform:translate(-111px,4px);
		-ms-transform:translate(-111px,4px);
	}
	

	.content03-botan03 img{/* ツイッターもあるよ */
		position: absolute;
		left: 50%;
		width: 215px;
		height: 223px;
		z-index: 1;
		transform:translate(429px,-301px);
		-webkit-transform:translate(429px,-301px);
		-ms-transform:translate(429px,-301px);
	}
	
	.content03-botan02 a:hover img,
	.content03-botan03 a:hover img{ /*ボタン画像 */
		opacity: 0.7;
		filter: alpha(opacity=70);
		-ms-filter: "alpha(opacity=70)";
	}
	.sp-content03-botan03{
		display:none;
	}
	
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row-03{
		background:
			url(../img/sp-content02-bg.jpg) center top no-repeat,
			url(../img/sp-bg02.jpg) center top repeat;
			padding-top:100px;
	}
		
	
	
	/* 記事の設定 */
	.news_box ul li .news_case{/* 記事の背景色 */
		width: 80%;
		margin: 30px auto 0;
		padding: 13px;
		background: #f6eedd;
	}
	.news_box ul li .news_case span.news_title_date{/* 日付 */
		font-size:12px;
		color:#3a1508;
	}
	.news_box ul li .news_case .txt_title{/* タイトル */
		font-size:18px;
		color:#ca2b2f;
		margin-top: 0px !important;
		display: block;
		width: 225px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	
	.news_box ul li .news_case .txt_title {
    width: 100% !important;
	}
	
	/* ブログリンク */
	.content03-botan01{/* フクロウ画像 */
		position: absolute;
		left: 50%;
		width: 141px;
		height: 132px;
		z-index: 1;
		transform:translate(-55px,-101px);
		-webkit-transform:translate(-55px,-101px);
		-ms-transform:translate(-55px,-101px);
		pointer-events: none;
	}
	
	/* ボタン画像 */
	.content03-botan02{
		margin: 161px 0 0;
	}
	.content03-botan02 img{
		position: relative;
		z-index: 2;
	}

	
	.sp-content03-botan03{/* ツイッターもあるよ */
		width:80%;
		margin: 0 auto 50px;
	}
	
	.content03-botan03{
		display:none;
	}
	
}

/* ================================================================================

	コンテンツ04 (ストリートビュー)

================================================================================ */
/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row-04 img{
		width: 100%;		
	}
}
/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row-04{
		margin-top: 50px !important;
	}
}
