@charset "utf-8";
/* CSS Document */

/* ディズプレイがmin-width以上であれば適用 */
@media(min-width:601px)
{
}
/* ディズプレイがmax-width以下であれば適用 */
@media(max-width:600px)
{
}

*
{
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
	font-size:small; line-height:15pt; letter-spacing:1.5px; color:#333333;
}
html{width:100%; height:100%;}
body{width:100%; height:100%; min-height:100%; font-family:"MS Gothic", "Osaka－等幅", Osaka-mono, monospace; color:#333333; margin:0px; font-size:13px; line-height:20px; background:url(img/BG_Main.png);}
.Clear{clear:both; height:0px; margin:0px; padding:0px;}
img{max-width:100%;}

/* ******************** Box ******************** */
/* ディズプレイがmin-width以上であれば適用 */
@media(min-width:601px)
{
	.LeftBox{float:left; width:50%;}
	.RightBox{float:right; width:50%;}
}
/* ディズプレイがmax-width以下であれば適用 */
@media(max-width:600px)
{
	.LeftBox{width:100%;}
	.RightBox{width:100%;}
}
/* ディズプレイがmin-width以上であれば適用 */
@media(min-width:601px)
{
	.TabekiriLeftBox{float:left; width:210px;}
	.TabekiriRightBox{margin-left:210px;}
}
/* ディズプレイがmax-width以下であれば適用 */
@media(max-width:600px)
{
	.TabekiriLeftBox{width:100%;}
	.TabekiriRightBox{width:100%;}
}
.TextBox{margin:10px;}
.BG_White{background:#ffffff;}

/** マスキングテープ風BOX **/
.Maste{position:relative; background-color: #ffffff; background:repeating-linear-gradient(45deg, #fff3b8, #fff3b8 5px, #ffedab 5px, #ffedab 10px); margin:20px 0px 10px 0px; padding:5px;}
.Tape{position:absolute; top:-20px; background-color:rgba(255,255,255,.5); box-shadow:0 0 5px rgba(0,0,0,0.2); padding:10px 20px; transform:rotate(-5deg);}
.Maste p{padding:25px 10px 0px 10px; font-weight:bold;}
/** マスキングテープ風BOX **/

/* ******************** 見出し ******************** */
.BoxRed{background-color:#b7282e; border-left:5px solid #8f2e14; font-weight:bold; font-size:large; color:#ffffff; padding:5px 0px 5px 10px; margin:5px 0;}
.BoxOrange{background-color:#ffd700; border-left:5px solid #ffa500; font-weight:bold; font-size:large; padding:5px 0px 5px 10px; margin:5px 0;}
.BoxGray{background-color:#bbbbbb; border-left:5px solid #999999; font-weight:bold; font-size:large; padding:5px 0px 5px 10px; margin:5px 0;}
.MarkerPink{background:linear-gradient(transparent 50%, #ffd6ea 60%); padding-left:10px; margin:5px 0;}
.MarkerBlue{background:linear-gradient(transparent 50%, #b6f0fc 60%); padding-left:10px; margin:5px 0;}
.StripeGray{background:repeating-linear-gradient(45deg, #eeeeee, #eeeeee 5px, #dddddd 5px, #dddddd 10px); font-weight:bold; font-size:large; padding:5px 0px 5px 10px; margin:5px 0;}
.StripePink{background:repeating-linear-gradient(45deg, #fdeff2, #fdeff2 5px, #fce3e9 5px, #fce3e9 10px); font-weight:bold; font-size:large; padding:5px 0px 5px 10px; margin:5px 0;}
.StripeBlue{background:repeating-linear-gradient(45deg, #ccf1ff, #ccf1ff 5px, #abe7ff 5px, #abe7ff 10px); font-weight:bold; font-size:large; padding:5px 0px 5px 10px; margin:5px 0;}
.StripeYellow{background:repeating-linear-gradient(45deg, #fff3b8, #fff3b8 5px, #ffedab 5px, #ffedab 10px); font-weight:bold; font-size:large; padding:5px 0px 5px 10px; margin:5px 0;}
.StripeLed{background:repeating-linear-gradient(45deg, #660000, #660000 5px, #880000 5px, #880000 10px); font-weight:bold; padding:5px 0px 5px 10px; margin:5px 0; color:#ffffff;}
/* ******************** 線 ******************** */
.LineGray{width:100%; height:2px; background:repeating-linear-gradient(90deg, #dddddd, #dddddd 5px, #eeeeee 5px, #eeeeee 10px); margin:4px 0;}
.LineRed{width:100%; height:2px; background:repeating-linear-gradient(90deg, #ee827c, #ee827c 5px, #f6bfbc 5px, #f6bfbc 10px); margin:4px 0;}
.LineBlue{width:100%; height:2px; background:repeating-linear-gradient(90deg, #a2d7dd, #a2d7dd 5px, #c1e4e9 5px, #c1e4e9 10px); margin:4px 0;}
.LineYellow{width:100%; height:2px; background:repeating-linear-gradient(90deg, #ffd900, #ffd900 5px, #fef263 5px, #fef263 10px); margin:4px 0;}

.TextRight{width:100%; text-align:right;}
/* ******************** Table ******************** */
table{border:none; border-collapse:collapse;}
td{padding:5px;}
th{padding:8px;}
caption{text-align:left; padding:2px;}

/* ******************** Link ******************** */
a{text-decoration:none;}
a img{border:none;}
.Opacity a:hover {filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70;}
.DecoLink a{font-size:14px; color:#d66a35; padding:3px; font-weight:bold;}

/* ******************** Font ******************** */
h1{font-size:14px; font-weight:bold;}
h2{font-size:16px; font-weight:bold;} 
h3{}
.FontRed{color:#bb0000;}
.FontRedBold{font-size:14px; color:#bb0000; font-weight:bold;}

/* ******************** ヘッダー ******************** */
#HeaderLayout{width:100%; height:auto; background:url(img/BG_Color.png);}
@media(min-width:601px)
{
	#Header{width:1000px; height:100px; margin:0 auto;}
	.Logo01{float:left;}
	.Logo02{float:right; width:300px; height:100px; background:url(img/Header_TEL.png);}
	#PrintHeader{display:none;}
}
@media(max-width:600px)
{
	#Header{height:auto; margin:0 auto; text-align:center;}
	.Logo01{margin:0 auto;}
	.Logo02{margin:0 auto;}
	#PrintHeader{display:none;}
}

/* ******************** コンテンツ ******************** */
#ContentsLayout{display:flex; flex-direction:column; min-height:100vh;}

@media(min-width:601px)
{
	#Contents{width:1000px; margin:0 auto;}
	.Information{width:990px; overflow-y:auto; padding:5px; background:#ffffff;}
	.Info_LeftBox{float:left; padding-bottom:10px;}
	.Info_RightBox{float:right; padding-bottom:10px;}
}
@media(max-width:600px)
{
	#Contents{width:100%; margin:0 auto;}
	.Information{width:100%; overflow-y:auto; background:#ffffff;}
	.Info_LeftBox{width:100%; padding-bottom:10px;}
	.Info_RightBox{width:100%; padding-bottom:10px;}
}

/* ******************** メニュー ******************** */

@media(min-width:601px)
{
	#NavLayout{width:100%; height:50px; background:#ffffff;}

	#NavLayout ul{display:flex; display:-webkit-box; display:-moz-box; display:box; display:-webkit-flex; margin:0; padding:0px;}
	#NavLayout li{width:100%; list-style:none; justify-content:flex-start; border-left:solid 1px #cccccc;}
	
	#NavLayout li a{display:block; width:auto; text-align:center; padding:5px 10px;}
	#NavLayout li a:hover{background:#eeeeee;}
	#NavLayout li span{color:#888888; font-size:80%;}
}
@media(max-width:600px)
{
	#NavLayout{width:100%; height:auto; background:#ffffff;}

/*
	#NavLayout ul{display:column; margin:0; padding:0px;}
	#NavLayout li{width:100%; list-style:none; justify-content:flex-start; border-bottom:solid 1px #cccccc;}
	*/
	
	#NavLayout ul{flex-wrap:wrap; display:flex; margin:0; padding:0px; justify-content:space-around;}
	#NavLayout li{list-style:none; border-bottom:solid 1px #cccccc; flex-grow:1;}
	.Row1{width:100%; text-align:center;}
	.Row2{text-align:center; border-right:solid 1px #cccccc;}
	.li_Clear{clear:both;}

	#NavLayout li a{display:block; width:auto; padding:5px 10px; font-size:20px;}
	#NavLayout li a:hover{background:#eeeeee;}
	#NavLayout li span{color:#888888; font-size:70%;}
}

@media(min-width:601px)
{
	#SubNavLayout{width:100%; height:50px; background:#ffffff;}

	#SubNavLayout ul{display:flex; display:-webkit-box; display:-moz-box; display:box; display:-webkit-flex; margin:0; padding:0px;}
	#SubNavLayout li{width:100%; list-style:none; justify-content:flex-start; border-left:solid 1px #cccccc;}
	
	#SubNavLayout li a{display:block; width:auto; text-align:center; padding:5px 10px;}
	#SubNavLayout li a:hover{background:#eeeeee;}
	#SubNavLayout li span{color:#888888; font-size:80%;}
}
@media(max-width:600px)
{
	#SubNavLayout{width:100%; height:auto; background:#ffffff;}
	
	#SubNavLayout ul{flex-wrap:wrap; display:flex; margin:0; padding:0px; justify-content:space-around;}
	#SubNavLayout li{list-style:none; border-bottom:solid 1px #cccccc; flex-grow:1;}
	.Row1{width:100%; text-align:center;}
	.Row2{text-align:center; border-right:solid 1px #cccccc;}
	.li_Clear{clear:both;}

	#SubNavLayout li a{display:block; width:auto; padding:5px 10px; font-size:20px;}
	#SubNavLayout li a:hover{background:#eeeeee;}
	#SubNavLayout li span{color:#888888; font-size:70%;}
}

/* ******************** トップ画像・スライドショー ******************** */

@media(min-width:601px)
{#SlideshowLayout{width:1000px; min-height:100%; margin:0 auto;}}
@media(max-width:600px)
{#SlideshowLayout{width:100%; height:100%; margin:0 auto;}}

.slider{
	width:100%;
	height:100%;
	margin:0 auto;
	
	position:relative;
	overflow: hidden;
	
}
.slider ul{
	margin:0;
	padding:0;
	list-style:none;
}
.slider ul li{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	animation-iteration-count:infinite; /* アニメーション再生回数　infinite：無限　数値で再生回数指定 */
	animation-duration:18s; /* アニメーションの１サイクルに必要な秒数またはミリ秒数を指定 */
}

/*--------------------------------------------------------------------------------------------------*/
/* animation-delay　は、animation-durationに指定した秒をスライドする画像枚数で割る
/*--------------------------------------------------------------------------------------------------*/
.slider ul li:nth-child(1) /* li:nth-child(1)で<li>の画像の１枚目をセレクト */
{
	animation-name:slider; /* @keyframesで設定したアニメーション名の指定 */
	animation-delay:0s; /* 何秒後にアニメーションを開始するか（0sで適用後0秒） */
}
.slider ul li:nth-child(2)
{
	animation-name:slider;
	animation-delay:6s;
	opacity:0;
}
.slider ul li:nth-child(3)
{
	animation-name:slider;
	animation-delay:12s;
	opacity:0;
}

/* アニメーションのキーフレーム（slider）の設定 */

/* ふわっと透明度 */
@keyframes slider

{
	0%{opacity:0; z-index:10;}/* フレームイン開始 */
	10%{opacity:1;}/* フレームイン終了 */
	30%{opacity:1;}/* 30％まで待機した後フレームアウト開始 */
	50%{opacity:0; z-index:-10;}/* フレームアウト終了　画像最後尾へ */
	100%{opacity:0;}/* 100％まで待機 */
}

/* ******************** 各種メニューページ ******************** */
@media(min-width:601px)
{
	.Menu_LeftBox{float:left; width:490px; padding-bottom:10px;}
	.Menu_RightBox{float:right; width:490px; padding-bottom:10px;}
	.MenuTable{background:#ffffff;}
	.MenuTable table{width:100%; border-collapse:collapse; border-spacing:0px; border:0px;}
	.MenuTable th{width:60%; font-weight:normal; text-align:left; border-bottom:dashed 1px;}
	.MenuTable td{width:40%; text-align:right; border-bottom:dashed 1px;}
}
@media(max-width:600px)
{
	.Menu_LeftBox{width:100%;}
	.Menu_RightBox{width:100%;}
	.MenuTable table{width:100%; border-collapse:collapse; border-spacing:0px; border:0px;}
	.MenuTable th{width:80%; font-weight:normal; text-align:left; border-bottom:dashed 1px;}
	.MenuTable td{width:20%; text-align:right; border-bottom:dashed 1px;}
}
.BoxLine{position:relative; border-left:5px solid #ff0000; font-size:larger; font-weight:bold; padding:5px 0px 5px 10px; margin:10px;}


/* ******************** ページトップへ戻る ******************** */
#PageTop
{
    position:fixed;
    right:10%;
    bottom:8%;
    opacity:0;
    -ms-filter:"alpha( opacity=0 )";
    filter:alpha(opacity:0);
    zoom:1;
    z-index:9999;
}
#PageTop a
{
    display:block;
    padding:10px 15px;
    background:#222222;
	border-radius:10px;
    color:#ffffff;
    text-decoration:none;
}
/* ******************** Footer ******************** */

@media(min-width:601px)
{
	#FooterLayout{width:100%; height:400px; background:url(img/BG_Color.png);}
	#FooterContents{width:1000px; height:400px; margin:0 auto;}
	#FooterMenu{width:100%; height:50px; line-height:50px; text-align:center; color:#ffffff;}
	#FooterMenu a{color:#ffffff;}
	#FooterMap{float:left; width:500px; height:300px;}
	#FooterInfo{float:left; width:480px; height:280px; text-align:left; padding:10px; color:#ffffff;}
	.ShopAdd{font-size:20px; line-height:25px; color:#ffffff;}
	#Copyright{width:1000px; height:40px; line-height:40px; text-align:center; font-family:Trebuchet MS; font-size:11px;}
}
@media(max-width:600px)
{
	#FooterLayout{width:100%; height:auto; background:url(img/BG_Color.png);}
	#FooterContents{width:100%; height:auto; margin:0 auto;}
	#FooterMenu{display:none;}
	#FooterMap{float:left; width:100%; height:300px;}
	#FooterInfo{float:left; width:95%; height:auto; text-align:left; padding:10px; color:#ffffff;}
	.ShopAdd{font-size:16px; line-height:20px; color:#ffffff;}
	#Copyright{width:100%; height:100px; color:#ffffff; line-height:20px; text-align:center; font-family:Trebuchet MS; font-size:x-small; margin:0 auto;}
}

/* ******************** 印刷用 ******************** */
@media print
{
	#NavLayout{display:none;}
	#Header{display:none;}
	#PrintHeader{ display:block; width:1000px; height:250px; margin:0 auto;}
	#PageTop{display:none;}
	#FooterLayout{display:none;}
	body{height:auto;}
}

/* ******************** iPhone用 ******************** */
.tel-number a {color:#ffffff; text-decoration:none;}