@charset "UTF-8";
/*  ======スマホ用 hamburger.css======  */
/*  ======ハンバーガーメニューのパネル mnavi  ======  */
/*  ====== 電話番号 ======  */
/* ======キャッチ横 ワン======	*/
/* ↓ keyのリスト横スクロール ↓ */
/* #ffff00	/*  黄色  */

* {			/* 初期化 */
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html	{
	max-width: 1000px;	/* 最大幅 */
	scroll-behavior: smooth;
/*	margin: 0 auto;	/*		*/
	}

body{
	background: #fefee1;	/* クリーム色 */
}
body {	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
		 "Hiragino Sans", Meiryo, sans-serif;
	font-size: 16px;
}

h2 {	/*    */
	margin: 10px 20px 0px 40px;	/*		*/
	color: #0085b2;	/* 文字色　	*/
}	/*    */
/*	スクロールバー		*/
.wrap01::-webkit-scrollbar{
	display: none;
}

#wrap01{
	background: #FFFEE1;	/*  色だけならbodyで指定してるから要らない  */
}
.head{
	text-align: center;		/*	効くところと効かない所がある	*/
	justify-content:center;	
	/*	border: 2px solid #000000;	*/
}
#logo { /*  これだけはタブレットモードを設定したい  */
/*	position: relative; */
	position:fixed;
	height: 75px;	/* 高さ60pxのとき幅は225px */
	width: 100%;	
	margin: -5px 0px 0px 0px; /*  これだけはタブレットモードを設定したい  */
	padding: 0px 0px 0px 0px;
	z-index:400;
	text-align: left;	 /* 効く  */
/*	text-align: centesr;	 /* タブレットモードのときON  */
/*	background: #5fdef5;	  /* 水色　メニュー   */ 
	background: #00CEF7;	  /* 水色　メニュー   */ 
	opacity: 92%; /* 透明度 */
	z-index:600;
/*	border: 1px solid #ff0000;	*/
}	

.relative {
	position: relative;
/*	border: 1px solid #000000;	/*  表示すると位置がずれる */ 
	/*  width: 60px;	/* 指定するとdokoが前詰めになる　logoには影響なし */
}

.relative img {
	height: 63px;	
	margin: 3px 0px 0px 0px; /*	左に余裕幅があれば?左が効く */
	padding: 7px 0px 0px 5px;	/*  上　左　効く */
/*	width: 225; 	/* 効かない */
	filter: drop-shadow(0px 2px 2px #000000); /* 影 */
}
@media screen and (min-width:600px) {	/*  600以上のとき  */
.relative img {
	margin: 3px 0px 0px 30%; /*	左に余裕幅があれば左が効く */
}
}
.dokodemo {
	position: absolute;
	bottom: -15px;
	right: -15px;
	width: 100px;
/*	background: rgba(200,200,3, 0.6); /* デバッグ用 */
/*	max-width: 250px;	効かない？	*/
	margin: 0px 40px -10px 0px;	/* テスト dokoだけ	右左効く	下効く */
	padding: 0px 0px 0px 0px;	/* テスト	dokoだけ	下効く　マイナスはだめ*/
	font-size: 80%;	/* 効く */
/* font-style: italic;	/* 効かない？ */
	font-weight: bold; /*  FFはここで効いた  */
/*	border: 1px solid #000000;	  */
	z-index:400;
	}
.dokodemo p {	/* どこでもメニュー */
	margin: -60px 0px 0px 0px; /* 幅方向は効かない? */
	padding: 0px 20px 0px 0px;	/* 効き方が変？ */
	font-size: 80%;
	z-index:200;
	text-align: center;
	color: #ffff00;
}
.catch  {
  margin: 0px 0px 0px 0px; /* 幅方向は効かない */
  padding: 80px 0px 0px 0px;	/* 効き方が変？ */
  z-index: 300;
}

.catch12	{
  text-align: center;
  font-size: 12pt;
  font-weight: bold;
  font-style: oblique;
  color: #FF3426;
  padding-bottom: 10px;
  }

.catch a{
/*	height: 60px;	*/
	text-align: center;	
	justify-content:center; 
/*	width: 230px;		widthが指定されると左寄せになる	*/
	margin: 0px 0px 0px -30px;

	font-weight: bold;
	font-style: italic;
	color:#112A8A;
	font-size: 120%;
	border: 0px solid #ff0000;
/*	background: #FFF2C1;	  */
}
.kagi919	{
  font-size: 120%;	/*	カギのクイック 稲毛駅前 店	*/
	}

/*	======電話番号 開始======	*/
.te	{
	display:flex;  
	margin: px 0px 0px 0px;
	border: 2px solid #112A8A;	/*  横全体 藍色  */
	text-align: center;	
	justify-content: space-evenly;
	padding: 0px 0px 0px 0px;
	} 
.tel{
	height:30px;
	padding: 5px 0px 0px 5px;
	margin: 0px 0px 0px 0px;
/*	border: 1px solid #000000; /*    */
/*	background: #FFB27F; */
	} 
.tel:hover {
	background-color:#5fdef5;	/* マウスが乗ったら背景色を変更→スマホ関係なし */
	}
.telno	{ /* 電話番号 FireFoxがはみ出し易い */
	margin: 0 0 0 0;
	font-size: 17px;
	font-weight: bold;
	color: #112A8A;	/* 藍色	*/
	text-decoration： none!important;
}
.tel1 img	{  /* フリーダイヤル 電話マーク */
	width:25px;	
	margin: 0px 0px 0px 0px;
	}
/*	====== 電話番号終わり ======	*/

/*	====== LINE ======	*/
.linea {
	text-align: center;
}
.linea img {
	margin: 10px 0px 0px 0px;
	border-radius: 10px 10px 10px 10px;
/*	box-shadow: 0px 0px 5px #000030; /*    */
}

/* LINE ジャンプ部分のハードコピー画像作成用 */
.line-cap {
	display: flex;		/*    */
	margin: 20px 0px 0px 50px;
	color: #0085b2;	/* 文字色　	*/
}
.line-capb img{
	height: 45px;
	margin: 0px 23px 20px 50px;
}

/* =====ハンバーガー===== */
.burger {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 50px;
  height: 40px;
  cursor: pointer;
  z-index: 800;
}

.burger-line {
  position: absolute;
  width: 40px;
  height: 4px;
  right: 0;
  background-color: #ffffff; /* 線の色 */
  transition: all 0.1s;
}

.burger-line1 {
	position:fixed;
	top: 25px;	/*  最初は5  */
	right: 18px;
}
.burger-line2 {
	position:fixed;
	top: 39px;	/*  top+14  */
	right: 18px;
}
.burger-line3 {
	position:fixed;
	top: 53px;	/*  top+28  */
	right: 18px;
}

/*  ===== ハンバーガーがクリックされたら ===== */
.open .burger-line1 {
  transform: rotate(-45deg);
  top: 38px;
}

.open .burger-line2 {
  opacity: 0;
}

.open .burger-line3 {
  transform: rotate(45deg);
  top: 38px;
}

/* ↓ ===== ハンバーガーメニューのパネル ===== mnavi ↓ */
.mnavi {	/* ul li のul */
	position: fixed;	/*  */
	top: -110%;	/*  ハンバーガーがクリックされる前はWindow上部に隠す  */
	left: 0;
	width: 100%; /* 出てくるスライドメニューの幅 */
	height: 370px;  /*  画面の縦の長さ */
/*	background-color: #2894D4;	/*  */
	background-color: #00CEF7;	/*  */
	opacity: 92%; /* 透明度 */
	transition: all 0.1s;
	z-index: 300;
	overflow-y: auto;
	margin: 71px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
	font-size: 22px;
	font-weight: bold;
}
.mnavi img {	/*  メニューのワン  */
	max-width: 100px;
	max-height:100px;
}
.mnavi li {
	list-style: none;	/*  頭の●とか  */
	text-align: left;		/*		*/
	border-top:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	padding: 12px 0px 0px 100px;	/*	上の隙間　右寄せ	*/
	height: 50px;	/*  １行の高さ  */
}
.mnavi li a {
	display: block;	/* li全体でクリック可能 */
	text-decoration: none!important;
	color: #ffffff;	/* 文字色　白色	*/
}
.mnavi li:hover {
	background-color:#00E1F7;	/* マウスが乗ったら背景色を変更→スマホ関係なし */
}
.mnavi li:first-child {	/*ロゴ下の線*/
/*	border-top:5px solid #aafee1;	/*	*/
/*	border-top:2px solid #ffffff;	/*	*/
}
.mnavi li:last-child {
	border-bottom:2px solid #ffffff;
}

/*ハンバーガーがクリックされたら上からスライド*/
.open .mnavi {
  top: 0;
}

/*  ====== black-bg(ハンバーガーメニュー解除用bg) ====== */
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.1s;
  cursor: pointer;
  z-index: 100;
}

/*  ハンバーガーメニューが開いたら表示  */
.open .black-bg {
  opacity: 0.1;
  visibility: visible;
}
/* ↑ ===== ハンバーガーメニュー 終わり ↑===== */

/* ↓ ===== keyのリスト横スクロール ↓===== */

@keyframes loop {  /*  自動スクロール  */
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
}

.keyscroll {
	margin: 10px 0px 0px 0px;  /*    */
	max-width: 1000px; /* タブレットモードで大きくする？ */
	background: #F74CAA;	
	display: flex;
	border: 2px solid #112A8A;	/*   藍色  */	
/*	-webkit-box-align: center;	/*		*/
/*	-ms-flex-align: center;	/*  */
	align-items: center;
	height: 85px;
	overflow-y: hidden;
	padding: 30px;
	}
.keyscroll::-webkit-scrollbar {  
	display: none; /*Google Chrome、Safari、Microsoft Edge対応のスクロールバー非表示コード*/
}
.keyscroll li:hover {
	background-color:#5fdef5;	/* マウスが乗ったら背景色を変更→スマホ関係なし */
/*	transform: perspective(100px) translateZ(20px);	/*	画像を大きく	*/
	}
.keyscroll:hover ul {
		animation-play-state: paused;	/* マウスが乗ったら止める ul で指定*/
	}
.keyscrollul {
	display: flex;
	list-style: none;
	padding: 5px 0px 0px 0px;
	align-items: center;
	animation: loop infinite linear 60s both;
	li {
		min-width: 150px;
	}
}
.keyscroll img { /* 画像のスタイル */
	height: 75px;	
	object-fit: cover;
/*	border: 1px solid #112A8A;	/*   藍色  */	
	margin: 0px 10px 0px 10px;  /*    */
	}
/* =====↑ keyのリスト横スクロール 終わり ↑===== */

/* ======キャッチ横 ワン======	*/
.wan01 {
	display: flex;	
	position:absolute;	/*    */
	top: 120px;			/*		*/
	right: 15px;	/*		*/
	max-width: 100px; /* タブレットモードで大きくする？ */
	z-index: 200;
	}
.wan01 { /* 画像のスタイル */
	max-width:100px;
	object-fit: cover;
	}
@media screen and (max-width:600px) {	/*  600(スマホの時だけ)以下のとき 小さく */
.wan01 img {
	max-height: 75px;
/*	border: 1px solid #00ff00;	/*   緑 debug */	
}
.wan01 {
	top: 100px;
	right: 0px;	/*		*/
}
}	
@media screen and (min-width:600px) {	/*  600以上のとき  */
.wan01 { /* ワン上 */
	top: 100px;
	right: 20px;	/*		*/
/*	border: 1px solid #112A8A;	/*  横全体 藍色 debug */	
}
}
/*	↑ キャッチ横 ワン 終わり ↑	*/

.jyusho {
	margin: 0px 0px 0px 20px; 
	font-size: 16px;	/*    */
	font-weight: bold;
	color: #0085b2;	/* 文字色　	*/
	max-width: 350px;	/*	効く	*/
}

.capt {	/*  キャプション  */
	margin: 10px 3px 15px 3px; 
	text-align: center;	/*    */
/*	font-size: 16px;	/*    */
	font-weight: bold;
	color: #0085b2;	/* 文字色　	*/
/*	max-width: 500px;	/*	効く	*/
/*	border: 1px solid #ff0000;	/*  thml横 全体   */	
}
.capt-sp {	/*  キャプション  */
	text-align: center;	/*    */
	font-weight: bold;
	color: #0085b2;	/* 文字色　	*/
}
.capt-s {	/*  キャプション sサイズ用 */
	margin: 20px 30px 0px 30px; 
	font-size: 16px;	/*    */
	font-weight: bold;
	color: #0085b2;	/* 文字色　	*/
}
.capt-400 {	/*  キャプション max400 */
/*	margin: 0px 0px 0px 20px; 
	text-align: center;	/*    */
	font-size: 16px;	/*    */
	font-weight: bold;
	color: #0085b2;	/* 文字色　	*/
	max-width:500px;	/*    */
}
/* ↓ ２個並び用 ↓ */
.niko-com	{	/*  外の枠  */
	display: flex;		/*    */
	align-items: center;
	flex-wrap: wrap;	/*	htmlの幅を狭めたとき縦１列に	*/	
	justify-content:center;	/*	２つの画像を同時に中央寄せ	*/
/*	border: 1px solid #00ff00;	/*  thml横 全体 緑色  */	
}
.niko-in {	/*  中の枠  */
	margin:0px 0px 0px 15px;  /*  */
	text-align: center;	/*    */
/*	border: 1px solid #ff0000;	/*		*/
/*	justify-content:center;	/*    */
}
.niko-in img	{	/*	中の図	*/
	max-width:350px;	/*    */
/*	border:0px solid #ff0000;	/*  thml横 全体 赤色  */	
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0px 0px 10px #000030;
}
.only-pc {	/*  タブレット以下非表示  */
	display: none;	/*    */
}	/*    */
/* ↑ ２個並び用 終わり ↑ */

/*	====== Google map ======	*/
iframe {
  display: block;
  margin: 5px 0px 20px 0px; 
  width: 100%;
  height: 500px;
  border: double #000000;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0px 0px 10px #000030;
}
maptenpo.iframe {	/* Google Map */
    border: double #000000;
margin: 0 auto;
    }
/*  =====店舗・マップ 終わり=====  */

/*  ====== 家・車・アイコン ======  */
.iekubai {
	text-align: center;
	}
.iekubai img	{
	width: 23%;
	border: double #000000;	/*    */
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0px 0px 5px #000030;
	background-image: url(image/backg07.gif);
	background-repeat: repeat-x;
/*	vertical-align:center;	/*  効く  */
	}
.img-com {	/*  アイコン　説明  */
	display:inline-block;	/*    */
	background: #aafee1;	/*    */
	width: 330px;	/*   */
	padding: 0 0 0 10px;
	text-align: left;
	border: 1px solid #000;
	} 
.icom01	{	/*	文字	*/
	display:inline-block;
/*	vertical-align:top;	/*    */
	margin: 5px 5px 0px 10px;
	padding: 0;
	font-size: 15px;
	font-weight: bold;
	list-style:none;
	text-align: left;
	}
.icom01 li	{	/*	liの行間	*/
	margin-bottom: 3px;
	}

/*	======LINE start======	*/
.widline {
	margin: 0 auto;	/*    */
	padding-top: 0px;	/*    */
	max-width: 420px;	/*    */
}
.didline {
	max-width: 330px;	/*    */
	margin: 0 auto;	/*    */
}
.iconline {
	text-align: center;	/*    */
/*	margin: 0 auto;	/*    */
/*	justify-content:center;	/*    */
}
.line-tomo	{	/*  line-tomo  */
	height: 60px;	
/*	width: 220px; */
	padding: 0 10 0 0px;
}
.line-qr {		/*  line-qr  */
	height: 70px;
/*	width: 60px; */
	padding: 0 0 0 10px;
}

/*	======LINE end  ======	*/

/*	======cashキャッシュレスアイコン 開始======	*/
.cap-11 {
	text-align: center;
	}
.g-cash {
	text-align: center;	/*	緑枠の中でセンター	*/
	width: 100%;
/*	border: 1px solid #ff0000;	/*	幅いっぱの枠がないとセンターにこない	*/
	}
.g-wrapper	{
	display:inline-block;	/*		*/
	text-align: center;		/*		*/
	vertical-align: top;	/*	重要	*/
	margin: 0px 0px 15px 15px;	/*		*/
	}
.grid-tes	{
	display: grid;
	grid-template-columns: 100px 100px 100px;	/*	*/
	gap: 0px;
	width: 300px;
/*	border: 1px solid #00ff00;	/*	幅いっぱいの枠の中で中央寄せ	*/
	margin: 0 auto;	/*	*/
}
.grid-tes img	{	/*		*/
	max-width: 80px;	/*	効く	*/
	max-height: 40px;	/*	効く	*/	
/*	border: 1px solid #000000;	/*		*/
	}
/*	======キャッシュレスアイコン　終わり======	*/

.wan02	{
	text-align: center;		/*		*/
	justify-content:center;
}

.copyr {	/*	コピーライト	*/
	text-align: center;		/*		*/
}


/*	======spare のページ　======	*/
.tokusyukey	{
	display:flex;
	text-align: center;		/*		*/
	flex-wrap: wrap;
	max-width: 660px;	/*	効く	*/
	margin: 0 auto;		/*		*/
}
.spare {
	list-style-type: square;	/*		*/
/*	margin: 0px 30px 0px 30px;	/*		*/
}
.keyli  {
	margin: 0 auto;		/*		*/
}
.keyli img {
	width: 160px;
}

.cytest {
	text-align: center;		/*		*/
	font-size: 16px;	/*    */
	font-weight: bold;	/*    */
	color: #0085b2;	/* 文字色　	/*    */
}
.capt-400 {	/*  キャプション  */
	margin: 0 auto;	/*    */
	font-size: 16px;	/*    */
	font-weight: bold;	/*    */
	color: #0085b2;	/* 文字色　	*/
	max-width: 550px;	/*    */
	padding: 0px 15px 0px 15px;
}
.cytest3  {
	text-align: center;		/*		*/
}
/*	======spare のページ　終わり======	*/

/*	======bouha nのページ　======	*/
.boulink {
	list-style-type: square;
	line-height: 2;
	background: #fffcf4;
	border-radius :8px;/*角の丸み*/
	box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
	margin: 10px 15px 30px 15px;	/*		*/
	padding: 0px 0px 0px 30px;
}
/*	======bouha nのページ　終わり======	*/

/*	#0085b2	/*  文字 青水色？ */
/*	#fefee1	/*  背景色　淡い黄色  */
/*	#00CEF7	/*  メニューの色  */
/*	#112A8A;	/*   藍色文字　線  */