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


@media screen and (min-width:961px) {
/*pc用のcssを記述*/








body{
	background-image:none;
       background-attachment: fixed;
	  
	color:#666666;
	font-size: 16px;
	font-family: 'Meiryo',"ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Osaka", sans-serif;
}




/*基本設定
---------------------------------------------------------------------------*/

#outer{
	/*	ボディ直下のページ全体の指定：今はなし
	IDはページに対して1箇所-*/
}

	
/*	ヘッダー背景白指定クラス
--------------------*/
.top {
	background-color:#fff;
}


/*h1タグ*/
h1{
  text-align: center;
}




/*	ヘッダー中央ボタンのフロート
--------------------*/

.yoko_2{
	float:left;/*横並びにする*/
	
/*	ボタンのスタイル*/	
	color:#999;
	margin:5px;
	padding:10px;
	border-radius:10px;
	box-shadow: 1px 1px 3px 1px
	#f6f6f6;
	background:#80c217;
	background:linear-gradient(to bottom,#fff 0%,#fff 50%,#fff 51%,#fff 100%);
/*横並びの解除は戻るボタンにて指示*/	

}	

.clear{
	clear:both;/*横並びの解除*/
}	

/*	ヘッダー中央ボタンのフロートここまで
--------------------*/






/*	ページコンテンツ横幅指定
--------------------*/

.contents {
	
	background:#fff;
	clear: both;
	max-width: 960px;	/*最大幅。*/
	margin: 20px auto;
	overflow: hidden;
	padding:20px 8PX;
	
}
/*h2タグ*/

/*h3タグ*/


/*	ページコンテンツ内のDiv・クラス基本設定
--------------------*/
/*	区切り(div・セクション・スタイル等)について
--------------------*/

/*	セクションボーダー
--------------------*/





/*文字と画像の詳細設定ここから
---------------------------------------------------------------------------*/



/*【角丸】クラスで指定して角丸にする。*/







/*	文字について
--------------------*/

.right {
	text-align:right;
}

.left {
    text-align:left;
	margin-left: 16px;
	margin-right: 16px;
}

.center {
    text-align:center;
	
}


.title {
    text-align:center;
	font-size:1.2em;
	color:#f99;
	font-weight:bold;
	
	 
}

/*	広告文字
--------------------*/





/*	リンク色特別指定
--------------------*/


/*	リンク色特別指定
--------------------*/





/*フッター設定
---------------------------------------------------------------------------*/


/*PAGE TOP設定
---------------------------------------------------------------------------*/



/*TOPイメージ画像と広告画像設定ここから
---------------------------------------------------------------------------*/

/*TOPイメージ画像※ad_imagと異なるのはラインのみではない
-----------*/

.top_img{
	text-align: center;
	padding:10px 0;
	overflow:hidden;
	border-top:solid 1px #FFF;
	border-bottom:solid 1px #DFDFDF;
}

.top_img img{
	 width: 100%;
	max-width:1400px;
	height:auto;
	border:solid 1px #CCC;
	
}


/*	TOP広告画像※top_imagと異なるのはラインのみではない
--------------------*/

.ad_img{
	
	padding:10px 0;
	overflow:hidden;
	border-top:solid 1px #FFF;
	
}

.ad_img img{
	text-align: center;
	 width: 94%;
	max-width:960px;
	height:auto;
	
}
/*	フォト画像※top_imagと異なるのはラインのみではない
--------------------*/

.photo_img{
	width: 100%;
	padding:10px 0;
	overflow:hidden;
	border-top:solid 1px #FFF;
	
}

.photo_img img{
	 width: 100%;
	max-width:960px;
	height:auto;
	
}
/*	TOP画像ad画像のスマホ特別指定
--------------------------------------------------------------------------------------------------------------------------------------*/

   .top_img { width: 100%; }
   .ad_img  { width: 100%; }
   
	


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 640px) {
.pc { display: none !important; }
.sp { display: block !important; }
}
/*TOPイメージ画像と広告画像設定ここまで
---------------------------------------------------------------------------*/




/*特殊画像設定ここから
---------------------------------------------------------------------------*/
/*	チラシ画像リサイズ
--------------------*/
.lb {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.7);
    opacity: 0;
    transition: .3s opacity ease;
    z-index: -1;
}

.lb img {
    width: auto !important;
    max-height: 100%!important;
    transform: scale(.7);
    transition: .4s transform ease;
    pointer-events: none;
}

.lb:target {
    opacity: 1;
    z-index: 103;
}

.lb:target img {
    transform: scale(1);
}

/* なんちゃって閉じるボタン（いらない場合は消す） */
.lb::before,.lb::after {
    display: block;
    position: fixed;
    content: "";
    width: 24px;
    height:3px;
    top: 24px;
    right: 12px;
    background: #fff;
    border-radius: 4px;
}
.lb::before {
    transform: rotate(-315deg);
}
.lb::after {
    transform: rotate(315deg);
}


/*	チラシ画像リサイズここまで
--------------------*/




/*example設定ここから（メイン画像リンク）
---------------------------------------------------------------------------*/
/*	背景に画像おいた文字について()はじめに部分
--------------------*/
.example{
	
	position:relative;
/*	背景に画層おいた白枠部分
--------------------*/
    background:#FFF;
	max-width:93%;
	height:auto;
	margin:auto;
	padding:5px;
	display:block;
	border:solid 1px #E0E4B4;	
}


.example img{
	max-width:100%;
}


.example p{
	position:absolute;
	top: 50%;
    left: 50%;
	-ms-transfrom: translate(-50%,-50%);
	-webkit-transfrom: translate(-50%,-50%);
	transfrom: translate(-50%,-50%);
	margin: 0;
	padding: 0;
    color:#666;
	text-decoration:inherit;
	font-weight:bold;
	font-family:Quicksand,sans-serif;
	font-size:15px;/*	スマホサイズ別途有り-*/
	
	
   } 

/* ▼閲覧領域の横幅が640px以上の場合に適用 */
@media screen and (min-width: 640px) {
   
	.example p{font-size:25px;}
}

/* ▼閲覧領域の横幅が960px以上の場合に適用 */
@media screen and (min-width: 960px) {
  
  .example p{font-size:35px;}
}

/*	exampleのaタグ指定
--------------------*/
.example a:link{
	text-decoration:underline;
	color:#BF1C45;
}
.example a:visited{
	text-decoration:none;
	color:#BF1C45;
}
.example a:active{
	text-decoration:none;
	color:#BF1C45;
}
.example a:hover{
	text-decoration:underline;
	color:#BF1C45;
}




/*example設定（メイン画像リンク）ここまで
---------------------------------------------------------------------------*/


/*特殊画像設定ここまで
---------------------------------------------------------------------------*/






/*テーブル 設定ここから
---------------------------------------------------------------------------*/


/*	テーブル・企業ページの企業内容のテーブル
--------------------*/

.tbl_a{width:100%}
.tbl_a th,td{ padding:10px; border:1px solid #ddd;}
.tbl_a th{ background: #f4f4f4;}


@media screen and (min-width: 640px) {
.tbl_a th,
.tbl_a td{ 
disply: block;
border-top:: none;}
}

@media screen and (min-width: 960px) {
.tbl_a th,
.tbl_a td{ 
disply: block;
border-top:: none;}
}

/*	テーブル・企業ページの企業内容のテーブルここまで
--------------------*/



















/*ta1のテーブル設定（このサイトで利用したオプション表示のテーブル）　　　　*/
.ta1 {
	width: 96%;
	margin: 0 2% 15px;
}
.ta1, .ta1 td, .ta1 th {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	/*ボックス内の余白*/
	word-break: break-all;
}
/*テーブル１行目に入った見出し部分*/
.ta1 th.dai {
	width: auto;
	text-align: left;		/*左よせ*/
	background: #eee;	/*背景色*/
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 150px;	/*幅*/
	text-align: center;	/*センタリング*/
}
/*左側ボックスに画像を入れた場合の設定*/
.ta1 th img {
	width: 100%;
}

/*テーブル ta2
-----------*/
/*ta2設定・サンプルページ画像込のテーブル画像なしも同じ*/
.ta2 {
	width: 96%;
	margin: 0 2% 15px;
	border-top: 1px dashed #ccc;	/*上の線の幅、線種、色*/
}
.ta2 tr:nth-child(odd) {
	background: #f7f6f3;	/*奇数番目の行にだけ色をつける。古いブラウザは未対応。*/
}
.ta2 td,
.ta2 th {
	padding: 10px;	/*ボックス内の余白*/
	border-bottom: 1px dashed #ccc;	/*下の線の幅、線種、色*/
	font-size: 14px;
}
/*一番左の列の設定。メニュータイトルが入っている所。*/
.ta2 th {
	width: 140px;	/*幅*/
	text-align: left;	/*左寄せ*/
	vertical-align: top;	/*文字を上に寄せる*/
}
/*写真用*/
.ta2 img.menu-img {
	width: 100px;	/*画像の幅*/
	border-radius: 10px;	/*角丸のサイズ。この行を削除すれば通常の四角形になります。*/
	float: right;
}
/*価格用*/
.ta2 .price {
	white-space: nowrap;	/*途中で改行させない設定*/
	font-weight: bold;		/*太字*/
	text-align: right;		/*右寄せ*/
}


/*テーブル 設定ここまで
---------------------------------------------------------------------------*/





/*ここまで設定済み
---------------------------------------------------------------------------*/

/*ここまで設定済み
---------------------------------------------------------------------------*/
/*ここまで設定済み
---------------------------------------------------------------------------*/
/*ここまで設定済み
---------------------------------------------------------------------------*/
/*ここまで設定済み
---------------------------------------------------------------------------*/
/*ここまで設定済み
---------------------------------------------------------------------------*/
/*ここまで設定済み
---------------------------------------------------------------------------*/
/*ここまで設定済み
---------------------------------------------------------------------------*/
/*ここまで設定済み
---------------------------------------------------------------------------*/


}