@charset "utf-8";

* {
	box-sizing: border-box; /* パディング・ボーダー・幅・高さ込 */
	font-size: 1em;
	margin:0;
	padding:0;
}

body {
	zoom:1;
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", Helvetica, Sans-Serif;
	background-color: #fff;
	color:#333;
	/* background:#9C0 url(image/big_01.jpg) repeat; */
}
img, iframe{ border: none; }




/* --------------------------------------------------
　メディアクエリ
----------------------------------------------------- */

/*ウインドウ幅　（モバイル向け）*/
@media(max-width: 767px) {
/*div{ background: yellow;}*/
}

/*ウインドウ幅　（PC向け）*/
@media(min-width: 768px) {
/*div{ background: red;}*/
}


/* --------------------------------------------------
　ROOT
----------------------------------------------------- */
a {
	color: #f90;
	text-decoration: none;
}

a:hover {
	color: #f00;
}

a:hover img{
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter:"alpha(opacity=70)";
}

td,th{
	text-align:left;
}

ul,li{
	list-style:none;
	/*list-style-position:inside;*/
	margin:0;
	padding:0;
}

.txt-right{text-align:right;}
.txt-center{text-align:center;}
.txt-left{text-align:left;}


/* clearFIX-------------- */
.do-clearfix:after {
	content: "";
	display: block;
	clear: both;
}



/* --------------------------------------------------
　一般
----------------------------------------------------- */

h1,h2,h3,h4,h5{
	margin:0;
	padding:0;
}

/*ドデカ文字*/
h1,h2{
	font-size: 4em;
	margin: 0.8em 0 0;
	text-align: center;
	font-weight:normal;
}
h2{
	font-size: 2.4em;
	margin:2em 0 0;
	padding:0;
}
<!-- ★あとで★ -->
body>h2{ /*color:#00f; background-color:#ccc; margin-top:2em;*/ }

/*冒頭のリード文*/
h2.leadtxt{
	font-size: 1.4em;
	margin:0 2em 2em;
	text-align: center;
	font-weight:normal;
	border:none;
	color:#666;
}

h3{
	font-size:1.5em;
	color:#f90;
	/*font-weight:normal;*/
}


 /*特徴セット（h3+テキストのセット★あとで整理）*/
.danraku{
	margin: 1.6em 5em 1em;
	text-align: center;
}
.danraku h3{
	color:#f90; 
	font-size: 1.2em;
	margin: 0.8em 0 0.6em;
	text-align:center;
}

rt{	font-size:0.6em;}


@media(max-width: 767px) {
h1,h2 {
	font-size: 2em; margin: 1.2em;
	text-align: left;
}
h2.keyword{
	font-size: 1.4em;
	font-weight:bold;
}
.danraku{
	margin: 1.6em 1.6em 1em;
}
}


/* --------------------------------------------------
　ヘッダー
----------------------------------------------------- */
#header {
	text-align:left;
	background-color:#333;
	color:#fff;
	padding-top: 10px;
}
@media screen and (max-width: 650px) {
	#header { text-align:center; }
}


/*ロゴ*/
#logo{
	max-width: 340px;
}
@media screen and (max-width: 650px) {
	#logo { width:100%; max-width:340px;}
}


/*お問い合わせ-----------*/
#header .otoiawase{
	float:right;
	width:auto;
	padding:0 1em 1em;
}
#header:after {
	content: "";
	display: block;
	clear: both;
}
/*電話番号*/
#header .otoiawase .denwa{
	font-family:Arial;
	font-size:2em;
}
#header .otoiawase .bikou{
	font-size:0.8em;
}
@media screen and (max-width: 650px) {
	#header .otoiawase { display:none; }
}





/* --------------------------------------------------
　ナビ
----------------------------------------------------- */

nav{
	z-index:2000;
}

/*
nav {
	background-color: #000;
	width: auto;
	margin: 0 auto;
}

.nav a {
	background-color: #000;
	color: #fff;
	display: block;
	float: left;
	font-size: 16px;
	line-height: 48px;
	font-weight: bold;
	border-right: inset 1px #fff;
	padding: 0 20px;
	text-decoration: none;
	width: 33%;
}
.nav li:last-child a{
	border:none;
}

.nav a:hover {
	background: #900;
	color: #fff;
}
*/


	


@media screen and (max-width: 767px) {
	.nav a {
	float: none;
	margin: 0 0 1px 0;
	width: 100%;
	}
}


/* --------------------------------------------------
　ボタン
----------------------------------------------------- */
	
a.mybtn {
	background: #000;
	color: #fff;
	display: block;
	text-align: center;
	-webkit-border-radius: 10;
	-moz-border-radius: 10;
	border-radius: 10px;
	font-size: 18px;
	padding: 10px 20px;
	margin:1em;
	text-decoration: none;
}
a.mybtn:hover {
	background: #900;
	text-decoration: none;
}


/* このページのTOPへ移動 */
#gototop {
	text-decoration: none;
	/* 表示位置を画面の右下に固定 */
  position: fixed;
  bottom: 80px;
  right: 12px;
  display: none;/* 最初非表示にしておく */
}
@media screen and (max-width: 767px) {
	#gototop{
		position:relative;
		bottom: 0px;
  	right: 0px;
	}
}


/* --------------------------------------------------
　スライダー
----------------------------------------------------- */
#my-slider{
	position:relative;
	/*background-color: #000;*/
}

/*★ロゴ固定*/
#my-slider #logo{
	position:absolute;
	width :50%;
	max-width:600px;
	top: 0;
	bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
	z-index:100;
}
@media screen and (max-width: 767px) {
	#my-slider #logo{
		width :50%;
	}
}







/* --------------------------------------------------
　カラム
----------------------------------------------------- */

/*　2カラム -------------------------------　*/
.cols {
	/*background-color: #fff;*//*#ffefd5*/
	text-align: center;
	padding: 2em;
}
.cols .col {
	float: left;
	width: 48%;
	margin-left: 4%;
}
.cols .col:first-child {
	margin-left: 0;
}
.cols:after {
	content: "";
	display: block;
	clear: both;
}
.cols h2{
	text-align:left;
}


@media(max-width: 767px) {
.cols .col {
	width: 100%;
	margin-left: 0;
	display: block;
}
}


/*　カラム内テーブル -----------------------　*/
.cols .col table {
	width: 100%;
	margin: 0 auto 2em;
}
.cols .col caption {
	font-weight: bold;
	padding: 5px;
	border: 1px solid #000;
}
.cols .col th, .cols .col td {
	padding: 5px;
	border-bottom: 1px solid #ccc;
}

/*メニューのテーブル装飾*/
.cols .col .tb-menu th {
	width: 30%;
}
.cols .col .tb-menu td {
	width: 70%;
}

/*店舗情報のテーブル装飾*/
.cols .col .tb-shopinfo th {
	width: 30%;
}
.cols .col .tb-shopinfo td {
	width: 70%;
}


@media(max-width: 767px) {
.cols .col .tb-menu th, 
.cols .col .tb-menu td,
.cols .col .tb-shopinfo th,
.cols .col .tb-shopinfo td {
	width: 100%;
	display: block;
}
.cols .col{
	margin-bottom: 2em;	
}
}




/* --------------------------------------------------
　カラム：商品ラインナップ
----------------------------------------------------- */

.cols-lineup {
	padding:2em;
}
.cols-lineup li {
	background-color: #f5f5f5;
	display: block;
	float: left;
	width: 33.3%;
	margin-left: 0;
	height:160px;
	overflow:hidden;
	border-left:#ccc dotted 2px;
	border-bottom:#ccc dotted 2px;
	text-align:center;
	padding:1.6em 1em;
}
.cols-lineup li:first-child,
.cols-lineup li:nth-child(4),
.cols-lineup li:nth-child(7),
.cols-lineup li:nth-child(10) {
	margin-left:0;
	clear:both;
	border-left:none;
}

.cols-lineup:after {
	content: "";
	display: block;
	clear: both;
}

/*----*/
.cols-lineup li h4{ font-size:1em;}
.cols-lineup li h4 span{ display:block; font-size:0.4em; color:#f00;}
/*----*/

@media(max-width: 767px) {
.cols-lineup li {
	width: 100%;
	margin-left: 0;
	display: block;
	border-left:none;
}
}




/* --------------------------------------------------
　カラム：ストアイノベーションの特徴etc
----------------------------------------------------- */

.cols-tokuchou {
	padding:2em;
	
}

.cols-tokuchou.ul{
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}


.cols-tokuchou li h3{
	text-align:center;
	margin-bottom:1em;
}
.cols-tokuchou li {
	/*background-color: #f5f5f5;*/
	display: block;
	float: left;
	width: 33.3%;
	margin-left: 0;
	/*height:180px;*/
	/*overflow:hidden;*/
	/*border-left:#ccc dotted 2px;
	border-bottom:#ccc dotted 2px;*/
	text-align:left;
	padding:1em;
}
.cols-tokuchou li:first-child,
.cols-tokuchou li:nth-child(4),
.cols-tokuchou li:nth-child(7),
.cols-tokuchou li:nth-child(10) {
	margin-left:0;
	clear:both;
	border-left:none;
}

.cols-tokuchou:after {
	content: "";
	display: block;
	clear: both;
}

/*----*/
.cols-tokuchou li h4{ font-size:1em;}
.cols-tokuchou li h4 span{ display:block; font-size:0.4em; color:#f00;}
/*----*/

@media(max-width: 767px) {
.cols-tokuchou li {
	width: 100%;
	margin: 0;
	display: block;
	border-left:none;
}
}



/* --------------------------------------------------
　各商品の紹介
----------------------------------------------------- */

/*各商品の各セクションに適用*/
.pr-def{
	position: relative;
	height:540px;
	background-repeat: no-repeat;
	background-size: cover;/*or cover or contain or auto 100% */
	background-position: center center;
	}

/*内部テキスト*/
.pr-def .text-right,
.pr-def .text-left,
.pr-def .text-center{
	text-align: left;
	width: 500px;
	position:absolute;
	top: 100px;
	right: 100px;
	/*background-color: rgba(0,0,0,0.5);*//*確認用半透明*/
	color:#000;
	padding: 1em;
	}
.pr-def .text-left{
	left: 100px;
	}
.pr-def .text-center{
	position:relative;
	margin:0 auto;
	right: 0;	left:0;
	}


.text-right h2,
.text-left h2,
.text-center h2{
	margin:0 0 1em; padding:0;
	color: #f90; 
	font-size: 2em;
	text-align:left;
	}


/*各商品の各背景*/
/*POS*/
#pr-pos{background-image: url(image/bg_pos.jpg); background-position: center; background-attachment:fixed; }
#pr-pos h2,#pr-pos p{ text-align:center; }
#pr-pos p{ color:#fff;}
/*その他*/
#pr-tel{ background-image: url(image/bg_tel.jpg); background-position: left; background-attachment:fixed; }
#pr-card{ background-image: url(image/bg_card.jpg); background-position: right;  background-attachment:fixed; }
#pr-posting{ background-image: url(image/bg_posting.jpg); background-position: left; background-attachment:fixed; }
#pr-web{ background-image: url(image/bg_web.jpg); background-position: right; background-attachment:fixed; }
#pr-camera{ background-image: url(image/bg_camera.jpg); background-position: left; background-attachment:fixed; }
#pr-logo{ background-image: url(image/bg_logo.jpg); background-position: right; background-attachment:fixed; }
#pr-shot{ background-image: url(image/bg_shot.jpg); background-position: left; background-attachment:fixed; }
#pr-pr{ background-image: url(image/bg_pr.jpg); background-position: right; background-attachment:fixed; }
/*#pr-pr{ background-image: url(image/bg_pr.jpg); center center / cover no-repeat fixed; }*/



/*小さいデバイス用★あとで採用を決める*/
@media(max-width: 1000px) {
	.pr-def .text-right,
	.pr-def .text-left{
		color:#fff;
		background-color: rgba(0,0,0,0.5);
	}
	.pr-def .text-right{
		right: 50px;
	}
	.pr-def .text-left{
		left: 50px;
	}
}
@media(max-width: 767px) {
	.pr-def{
		height:auto;
		}
	.pr-def .text-right,
	.pr-def .text-left,
	.pr-def .text-center{
		color:#fff;
		width:100%;
		position:static;
		padding: 2em;
		background-color: rgba(0,0,0,0.8);
	}
	.pr-def .text-center{
		background-color: rgba(0,0,0,0.3);
	}
}


/* --------------------------------------------------
　画像
----------------------------------------------------- */
/*横幅*/
.image-max900{ max-width:100%; }





/* --------------------------------------------------
　特殊コンテナ
----------------------------------------------------- */

/*bodyのお問い合わせ-----------*/
#body-otoiawase{
	width:auto;
	margin:1em auto;
	text-align:center;
	padding:1em;
	background-color:#333;
	color:#fff;
	max-width:900px;
	border:#333 3px solid;
	order-radius: 10px; 
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
}
/*電話番号*/
#body-otoiawase .denwa{
	font-family:Arial;
	font-size:3em;
}
#body-otoiawase .bikou{
	font-size:0.8em;
}
@media(max-width: 767px) {
	#body-otoiawase{
		order-radius: 0;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
	}
}



/*ビデオ（スライダー用）*/
.video-container {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	margin-bottom: 30px;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/*ビデオ（BODY内）*/
.boxs-douga {
	position: relative;
	width: 80%;
	height: 0;
	padding-top: 40%;<!-- 56.25% -->
	overflow: hidden;
	margin-bottom: 30px;
	margin:1em auto 0;
}
.box-douga iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*グーグルマップ*/	
.map-container {
	position: relative;
	padding-bottom: 85%;/*縦横比*/
	height: 0;
	overflow: hidden;
}
.map-container iframe, .map-container object, .map-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

/*ブログ更新情報：RSS*/
#box-rss{
	width:80%;
	margin:0 auto;
	}


/* --------------------------------------------------
　footer
----------------------------------------------------- */	

/*footerのお問い合わせ-----------*/
#footer-otoiawase{
	width:auto;
	/*margin:1em 0 0;*/
	text-align:center;
	padding:1em;
	background-color:#333;
	color:#fff;
}
/*電話番号*/
#footer-otoiawase .denwa{
	font-family:Arial;
	font-size:3em;
}
#footer-otoiawase .bikou{
	font-size:0.8em;
}


/*footer-----------*/
#footer {
	width: 100%;
	text-align: center;
	padding:1em;
	background-color:#000;
	color:#fff;
}
#footer p, #footer div {
	margin: 0 auto;
}
@media screen and (max-width: 650px) {
	#footer { text-align:center; }
}



/* --------------------------------------------------
　ソーシャルボタン
----------------------------------------------------- */


/*SNS box*/
#box_sns {
	overflow: hidden !important;
}
#box-sns li {
	display:inline ;
	float: right;
	margin-right: 10px;
}
#box-sns li:last-child {
	margin:0;
}
/*#sbox_sns iframe {
	width:119px ;
	height: 20px ;
	margin: 0 ;
	padding: 0 ;
}*/


/*Lineボタン整形*/
#box-line img{
	width:82px !important;
	height:20px !important;
}