@charset "utf-8";
/*============= 650 screen and ================*/
@media ( max-width: 650px ){	 
/*============ MY 設定 ==============*/
/*body{ overflow-x: hidden; }*/

h1{
		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #fff;
	background-color: #000;
	line-height:120%;
	max-width: 550px;
	margin-left: 20px;
}
h1 br{display: block; }
h2.Head_logo{	float: left; }
h3.Head_online{float: left; }
button{display: inline;}

/*-- display:none; --*/
section .Gazyou_title,
section .Gazyou_txt{ display: none; }

article .BMM{ display: none; }

.Side .Shop{ display: none; }
/*----------------------------*/

/*------- Cont =left= -------*/

ul.banner{
	float: none; width: 650px;
	}
.banner li a{	margin-right: 10px;}


/*---- footer -----*/
footer{ 
	padding-left: 20px; 
	padding-right: 20px; 
	}
footer nav a{display: block;}
footer nav br{ display: none; }


	/**********************************
	    メニュー→→(スライドしてくるメニューの設定)
	**********************************/
	.menu {
	    overflow-y:auto; /* 縦方向のみスクロール */
	    /*ココの「absolute」をはずすと崩れる*/
	    position: absolute;
	    top:0;
	    right:0;/*left:0;*/
	    width: 35%;/*width: 30%;*//*160px*/
	    max-width:400px; /* 320px横に広がり過ぎないように */
	    /*color: #333;
	    font-size:110%;*/
	    background: #fff;/*#eee*/
	    /*text-align:left;*/
	    margin: 0;
	    z-index:9999;
	    /* アニメーション */
	    -webkit-transition:0.2s ease-in-out;
	    -moz-transition:0.2s ease-in-out;
	    transition:0.2s ease-in-out;/*0.2s*/
	}
	 
	/* メニューON/OFF */
	/*メニューが非表示のときの位置(X,Y,-)*/
	.menuOff {
	    -webkit-transform:translate3d(0,-250%, 0);
	    -moz-transform:translate3d(0,-250%, 0);
	    transform:translate3d(0,-250%, 0);/*100%, 0, 0*/
	    /*z-index:9999;  最前面に来るように */
	    /*display: none;
	    opacity: 0;*/
	}
	/*メニューを表示するときの位置(X,Y,-)*/
	.menuOn {
	    box-shadow: 8px 8px 20px 0 rgba(0, 0, 0, 0.2);
	    -webkit-transform:translate3d(0, 0, 0);
	    -moz-transform:translate3d(0, 0, 0);
	    transform:translate3d(0, 0, 0);/*0, 0, 0*/
	    /*display: inline;
	    opacity: 1.0;*/
	}
	.ie .menuOff {
	    left:-100%; /* IE向け */
	}
	.ie .menuOn {
	    left: 0; /* IE向け */
	}
	 
	 
	/* ナビゲーション以外固定 */
	.fixed {
	    position:fixed;
	    top:0;
	    left:0;
	    width:100%;
	}
	 
	/* オーバーレイ */
	.overlay {
	    position:fixed;
	    top:0;
	    left:0;
	    display:none;
	    width:100%;
	    height:100%;/*100%
	    margin-top: 25%;*/
	    background:#000;
	    opacity:0.7;
	    filter:alpha(opacity=70);
	    -ms-filter:"alpha(opacity=70)";
	    z-index:999;
	}
	 
	/**********************************
	    ナビゲーションアイコン
	**********************************/
	.navBtn {/*ボタンを囲んでいるdiv*/
	    position:absolute;
	    top:0.2em;/*top:;*/
	    right:1em;/*left:1em;*/
	    background: #090;
	}
	/* IE8以下はアイコン位置調整 */
	#ie8 .navBtn,
	#ie7 .navBtn,
	#ie6 .navBtn {
	    top:30px;
	}
	.navBtn button {/*バーガーボタン本体*/
	    display: block;
	    border: none;
	    background: #fff;/*none*/
	    outline: 0;
	    /*スマホをタップした時の動作*/
	    -webkit-tap-highlight-color:rgba(0,0,0,0);
	    ?moz?tap-highlight-color:rgba(0,0,0,0);
	    tap-highlight-color:rgba(0,0,0,0);
	}
	.navIcon {/*バーガーボタン本体*/
	    padding: 1.5rem 0.5rem;/*2rem 1rem*/
	    cursor: pointer;
	    /*ボタンの大きさの調整*/
	    -webkit-transform: scale(0.8);
	    -moz-transform: scale(0.8);
	    transform: scale(0.8);/*0.8*/
	}
	 
	/* アイコンレイヤー */
	.iconLayer {/*<button>の中の、空の<span>*/
	    position: relative;/*バーガー線の基準設定*/
	    display: block;
	    width: 50px;/*バーガー真ん中線の設定*/
	    height: 7px;
	    background: #090;/*#0277BD*/
	    -webkit-animation-duration: 300ms;
	    -moz-animation-duration: 300ms;
	    animation-duration: 300ms;/*ミリ秒　1/1000秒*/
	    
	    -webkit-animation-timing-function: ease-in-out;
	    -moz-animation-timing-function: ease-in-out;
	    animation-timing-function: ease-in-out;/*速度の変化パターン*/
	}
	.iconLayer:before, .iconLayer:after {
	    content: '';
	    position: absolute;
	    left: 0;
	    display: block;
	    width: inherit;
/*spanの中のもの（真ん中線）がココの設定を継承している
	    バーガー時と矢印時ともに継承している*/
	    height: 7px;
	    background: inherit;/*継承している*/
	    -webkit-animation-duration: 300ms;
	    -moz-animation-duration: 300ms;
	    animation-duration: 300ms;
	    -webkit-animation-timing-function: ease-in-out;
	    -moz-animation-timing-function: ease-in-out;
	    animation-timing-function: ease-in-out;
	}
	.iconLayer:before {/*バーガー上線*/
	    bottom: 200%;
	}
	.iconLayer:after {/*バーガー下線*/
	    top: 200%;
	}
	 
	/**********************************
	    ナビアイコン：矢印
	**********************************/
	
	/* 矢印の真ん中の線の動きの設定 */
	.arrow {
/*animation-nameは、
アニメーション処理の対象となる @keyframes*/
	    -webkit-animation-name: navIconSlide;
	    -moz-animation-name: navIconSlide;
	    animation-name: navIconSlide;
	    
	    -webkit-animation-fill-mode: forwards;
	    -moz-animation-fill-mode: forwards;
	    animation-fill-mode: forwards;
/*animation-fill-modeはアニメーションが再生中でない場合の扱いです。
アニメーションが再生中でない場合とは、
・アニメーションの再生が終了した後
・アニメーションの再生開始までの時間*/

/*
forwards：アニメーション開始前に@keyframesが
0%もしくはfromのスタイルを適用します。

アニメーションの最後に適用されたキーフレームの
指定によって計算された値を維持。
通常「100%」か「to」のキーフレーム。
*/

	}
	
	@-webkit-keyframes navIconSlide {
	    0% {
	    }
	    100% {
	        -webkit-transform: rotate(90deg);/*180deg*/
	        transform: rotate(90deg);/*180deg*/
	    }
	}
	@-moz-keyframes navIconSlide {
	    0% {
	    }
	    100% {
	        -moz-transform: rotate(90deg);/*180deg*/
	        transform: rotate(90deg);/*180deg*/
	    }
	}
	@keyframes navIconSlide {
	    0% {
	    }
	    100% {
	        transform: rotate(90deg);/*180deg*/
	    }
	}
	 
	/* ナビアイコン：矢印:before */
	/*←の＼の線の動きの設定 = バーガー時は上の線*/
	.arrow:before {
	    -webkit-animation-name: navIconSlideBefore;
	    -moz-animation-name: navIconSlideBefore;
	    animation-name: navIconSlideBefore;
	    -webkit-animation-fill-mode: forwards;
	    -moz-animation-fill-mode: forwards;
	    animation-fill-mode: forwards;
	}
	@-webkit-keyframes navIconSlideBefore {
	    0% {
	    }
	    100% {
	        margin: 0;
	        width: 75%;
	        -webkit-transform: rotate(-45deg);/*45deg*/
	        transform: rotate(-45deg);/*45deg*/
	    }
	}
	@-moz-keyframes navIconSlideBefore {
	    0% {
	    }
	    100% {
	        margin: 0;
	        width: 75%;
	        -moz-transform: rotate(-45deg);/*45deg*/
	        transform: rotate(-45deg);/*45deg*/
	    }
	}
	@keyframes navIconSlideBefore {
	    0% {
	    }
	    100% {
	        /*margin: 0% 31%;
	        width: 75%;*/
/* margin設定3本線間隔になるので
1本づつの設定ではなく3本づつ調整していくようになる */
	        /*↑の設定*/
	        /*margin-top: 0%;
	        margin-bottom: 0%;
	        margin-right:  0%;
	        margin-left: 0%;*/
	        margin: 0;
	        width: 75%;
	        transform: rotate(-45deg);/*45deg*/
	    }
	}
	 
	/* ナビアイコン：矢印:after *//*→の／の部分*/
	.arrow:after {
	    -webkit-animation-name: navIconSlideAfter;
	    -moz-animation-name: navIconSlideAfter;
	    animation-name: navIconSlideAfter;
	    -webkit-animation-fill-mode: forwards;
	    -moz-animation-fill-mode: forwards;
	    animation-fill-mode: forwards;
	}
	@-webkit-keyframes navIconSlideAfter {
	    0% {
	    }
	    100% {
	        /*margin: 0% 31%;
	        width: 75%;*/
	        margin-top: 0%;
	        margin-bottom: -100%;
	        margin-right: 100%;
	        margin-left: 0%;
	        width: 75%;
	        -webkit-transform: rotate(45deg);/*-45deg*/
	        transform: rotate(45deg);/*-45deg*/
	    }
	}
	@-moz-keyframes navIconSlideAfter {
	    0% {
	    }
	    100% {
	        /*margin: 0% 31%;
	        width: 75%;*/
	        margin-top: 0%;
	        margin-bottom: -100%;
	        margin-right: 100%;
	        margin-left: 0%;
	        width: 75%;
	        -moz-transform: rotate(45deg);/*-45deg*/
	        transform: rotate(45deg);/*-45deg*/
	    }
	}
	@keyframes navIconSlideAfter {
	    0% {
	    }
	    100% {
	        /*margin: 0% 31%;
	        width: 75%;*/
	        margin-top: 0%;
	        margin-bottom: -100%;
	        margin-right: 100%;
	        margin-left: 0%;
	        width: 75%;
	        transform: rotate(45deg);/*-45deg*/
	    }
	}
	 
	/**********************************
	    ナビアイコン：ハンバーガー
	**********************************/
	/* 前に設定したバーガーは読み込んだ時の設定 */
	/* ここの設定は矢印からバーガーへ戻るときの設定 */
	/* 0%だから前に設定した状態へ戻るまでの設定?? */
	
	/* 真ん中の線の設定 */

	.hamburger {
	    -webkit-animation-name: navIconSlideFrom;
	    -moz-animation-name: navIconSlideFrom;
	    animation-name: navIconSlideFrom;
	}
	@-webkit-keyframes navIconSlideFrom {
	    0% {
	        -webkit-transform: rotate(-180deg);
	        transform: rotate(-180deg);
	    }
	    100% {
	    }
	}
	@-moz-keyframes navIconSlideFrom {
	    0% {
	        -moz-transform: rotate(-180deg);
	        transform: rotate(-180deg);
	    }
	    100% {
	    }
	}
	@keyframes navIconSlideFrom {
	    0% {
	        transform: rotate(-180deg);
	    }
	    100% {
	    }
	}
	 
	/* ナビアイコン：ハンバーガー:before */
	/* バーガーに戻ったとき上の線＝矢印時＼ */
	.hamburger:before {
	    -webkit-animation-name: navIconSlideBeforeFrom;
	    -moz-animation-name: navIconSlideBeforeFrom;
	    animation-name: navIconSlideBeforeFrom;
	}
	@-webkit-keyframes navIconSlideBeforeFrom {
	    0% {
	        margin: 3% 37%;
	        width: 50%;
	        -webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
	    }
	    100% {
	    }
	}
	@-moz-keyframes navIconSlideBeforeFrom {
	    0% {
	        margin: 3% 37%;
	        width: 50%;
	        -moz-transform: rotate(45deg);
	        transform: rotate(45deg);
	    }
	    100% {
	    }
	}
	@keyframes navIconSlideBeforeFrom {
	    0% {
	        margin: 3% 37%;
	        width: 75%;
	        transform: rotate(45deg);
	    }
	    100% {
	    }
	}
	 
	/* ナビアイコン：ハンバーガー:after */
	
	/* バーガーに戻ったとき下の線 */
	.hamburger:after {
	    -webkit-animation-name: navIconSlideAfterFrom;
	    -moz-animation-name: navIconSlideAfterFrom;
	    animation-name: navIconSlideAfterFrom;
	}
	@-webkit-keyframes navIconSlideAfterFrom {
	    0% {
	        margin: 3% 37%;
	        width: 75%;
	        -webkit-transform: rotate(-45deg);
	        transform: rotate(-45deg);
	    }
	    100% {
	    }
	}
	@-moz-keyframes navIconSlideAfterFrom {
	    0% {
	        margin: 3% 37%;
	        width: 75%;
	        -moz-transform: rotate(-45deg);
	        transform: rotate(-45deg);
	    }
	    100% {
	    }
	}
	@keyframes navIconSlideAfterFrom {
	    0% {
	        margin: 3% 37%;
	        width: 75%;
	        transform: rotate(-45deg);
	    }
	    100% {
	    }
	}
	*/
}