@charset "UTF-8";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
	background-image: url("../image/renga1.png");
	min-width:1px;
	color: white;
	font-family: 'メイリオ', 'MS ゴシック', sans-serif;
}

.contena {
	max-width:360px;
	margin: 0 auto;
}
.pc_disp {
	display: none;
}

/*ログインくくり　左右*/
.login_kukuri {
	width: 360px;
	margin: 0 auto;
	margin-top: 40px;
}
/*ログイン　コメント*/
.guest_span {
	font-size: 16px;
}
.guest_out_span {
	font-size: 16px;
	float: right;
}
.guest_span_tyuui {
	font-size: 12px;
	float: right;
}


/*未訪問*/
.guest_out_span a:link {
	color: aqua;
}
/*訪問済*/
.guest_out_span a:visited {
	color: aqua;
}
/*ポイント時*/
.guest_out_span a:hover {
	color: aqua;
}


/*ロゴと営業時間*/
.kanban_kukuri {
	overflow: auto;
	margin-top: 45px;
	width: 360px;
}
.kanban_kukuri_login{
	overflow: auto;
	margin-top: 5px;
	width: 360px;
}
.rogo {
	width: 360px;
	height: auto;
}
.kanban {
	width: 150px;
	height: 145px;
	margin-top: 0px;
	margin-bottom: 10px;
	float: left;	
}
.eigyo {
	width: 210px;
	height: 145px;	
	margin-top: 0px;
	margin-bottom: 10px;
	float: right;
}

/*\\\スマホ用ハンバーガーメニュー\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
/*@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:400,600');*/
  
.nav_mobile {
	width: 100%;
	margin: 0 auto;
	background: #fdfdfd;
	font-family: 'Encode Sans Condensed', sans-serif;
	font-weight: 600;
	letter-spacing: .03em;  /*テキストの水平方向の字間のスペース*/
	color: #212121;
	position: absolute; /*絶対配置*/
	top:0px;
	z-index: 50; /*値が大きい要素ほど上に配置*/
}

.header_mobile {
	display: flex;    /*子要素を横並びにする*/
	position: fixed;  /*画面のきまった位置に固定*/
	width: 100%;
	height: 42px;
	background: #212121;
	color: #fff;
	justify-content: center;  /*主軸のインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置*/
	align-items: center;  /*直接の子要素に集合として align-self の値を設定。フレックスボックスでは交差軸方向のアイテムの配置を制御*/
}
.header_mobile_rogo {
	width:  80px;
	height: 38px;
}
#nav-container {  /*#nav-container自体*/
	position: fixed;  /*スクロールしても変わらずそこに配置されます。またabsoluteと同じく高さがなくなります。*/
	height: 100vh;
	width: 100%;
	pointer-events: none; 
	overflow: hidden; /*親要素からはみ出た部分は非表示。今は開発中だから表示*/
}

#nav-container .bg {  /*#nav-containerの.bg*/  /*headerの後ろに隠れている*/
	position: absolute; /*絶対配置・デフォルトではページ全体を起点*/
	top: 40px;
	left: 0;
	width: 100%;
	height: calc(100% - 70px); /*calc()を使うことで、幅や高さを計算式で指定。※+と-の前後には半角スペースが必須*/  /*headerの高さと合わせている*/
	visibility: hidden; /*レイアウトを変更することなく要素を表示したり非表示にする*/
	opacity: 0; /*要素の不透明度を設定。0は透明*/
	transition: .3s;
	background: #BF7497;
}

#nav-container:focus-within .bg { 
	visibility: visible;  /*表示*/
	opacity: .6;  /*透明度60%*/
}

.nav_button {
	position: relative; /*相対配置*/
	display: flex;  /*子要素を横並びにする*/
	flex-direction: column; /*主軸の方向や向きを定義することにより、フレックスコンテナー内でアイテムを配置する方法を設定 /columnは積み重なるように配置*/
	justify-content: center;  /*主軸のインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置*/
	z-index: 50; /*値が大きい要素ほど上に配置*/
	border: 0;
	background: transparent;  /*要素は色が透明。display: none;と違い要素自体は存在。marginやpaddinngなどの余白要素はそのまま反映。*/
	border-radius: 0; /*要素の境界の外側の角を丸める。1 つの半径を設定すると円の角になり、2 つの半径を設定すると楕円の角に*/
	height: 25px;/*初期値4０*/
	width: 30px;	/*初期値３０*/
	margin-left: 330px;
	margin-top: 5px;
	cursor: pointer;  /*マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定。*/
	pointer-events: auto; /*初期値は「auto」で通常通りホバーやクリックのイベントを受け取る(ここがイベント発生させるポイントに指定)*/

	touch-action: manipulation; /*タッチ操作でドラッグする場面で画面までスクロールしちゃうのを防ぐ。manipulation – スクロールとズームのみ（ダブルタップでの拡大を無効化）*/
}
.icon-bar { 
	display: block; /* ブロック要素にする */
	width: 100%;  /*.nav_buttonサイズ*/
	height: 3px;
	background: #aaa;
	transition: .3s;
}
.icon-bar + .icon-bar { /*.icon-barが隣接している場合。.icon-bar の次の.icon-barが対象。( + は隣接している唯一の弟セレクタ)*/
	margin-top: 5px;
}
.nav_button:after {
	position: absolute;
	left: -5px;
	bottom: -15px;
	content: 'MENU';
	display: block;
	width: 100%;
	color: white;
	font-size: 12px;
}

#nav-container:focus-within .nav_button {
	pointer-events: none; /*.nav_buttonのpointer-events無効化。親要素のnav-containerと同化させて.nav_buttonをクリックしても#nav-container内の他の要素をクリックしても元に戻るようにする(#nav-container内の.nav_buttonにはフォーカス(焦点。ピント。)されてませんの状態にする)*/
}
#nav-container:focus-within .nav_button:after { 
	content: 'CLOSE';
	bottom: -15px;
}


#nav-container:focus-within .icon-bar:nth-of-type(1) { 
	transform: translate3d(0,8px,0) rotate(225deg);  /*要素を三次元空間内で再配置。translate3d(tx[横], ty[縦], tz[立体]。rotate(45deg)＝時計回りに45度回転させる。) サンプルではrotate(45deg)*/
}
#nav-container:focus-within .icon-bar:nth-of-type(2) {  /*2本目*/
	opacity: 0; /*要素の不透明度を設定。0は透明*/
}
#nav-container:focus-within .icon-bar:nth-of-type(3) {  /*3本目*/
	transform: translate3d(0,-8px,0) rotate(-225deg);
}

#nav-content {  /*横から出てくるメニュー*/
	margin-top: 40px;
	padding: 20px;
	width: 65%; /*#nav-containerの幅が親要素*/
	max-width: 300px;
	position: absolute; /*絶対配置・デフォルトではページ全体を起点*/
	top: 0;
	right: 0;
	height: calc(95% - 70px);  /*calc()を使うことで、幅や高さを計算式で指定。※+と-の前後には半角スペースが必須*/  /*headerの高さと合わせている*/
	background: #ececec;
	pointer-events: auto;/*初期値は「auto」で通常通りホバーやクリックのイベントを受け取る(イベント発生させるポイントに指定。ここはnoneでもかまわない)*/
	transform: translateX(100%) ; /*要素を二次元平面上の水平方向で再配置*/
	transition: transform .3s; /*transformに設定した動きを0.3秒で行う*/
	contain: paint; /*その要素の子孫を、境界の外に表示しないことを示す。包含ボックスが画面外の場合、ブラウザーは中の要素を描画する必要はない。そのボックスに完全に含まれていれば、やはり画面外にあるから。子孫が包含要素の領域を溢れている場合、子孫は包含要素の境界ボックスで切り取られる。*/
}

#nav-container:focus-within #nav-content {  /*#nav-container内のインプットやボタンなど(ハンバーガーメニュー)がクリックされたら#nav-contentは*/
	transform: none;  /*初期値。要素を変形しない。transformで-100%サイズ左へ移動させた効果を消す*/
}

#nav-content ul {
	height: 100%;
	list-style: none;
	display: flex;  /*子要素を横並びにする*/
	flex-direction: column; /*主軸の方向や向きを定義することにより、フレックスコンテナー内でアイテムを配置する方法を設定 /columnは積み重なるように配置*/
}
#nav-content li a {
	padding: 7px 3px;
	display: block;
	text-transform: uppercase; /*text-transform 要素のテキストを大文字表記する方法を指定。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定。フリガナの読みやすさを向上するのにも役立つ。uppercase  すべての文字を大文字に変換 */
	transition: color .1s; /*色を0.1秒で変える*/
	font-size: 14px;
}
#nav-content li a:hover {
	color: #BF7497;
}
#nav-content li:not(.small) + .small {    /*notは～以外。ここではsmall以外とsmallが隣接しているときのsmallが対象*/
	margin-top: auto; /*上方に十分にマージンをとる。結果smallは下に配置される。*/
}

#nav-content a,
a:visited,
a:focus,
a:active,
a:link {
	text-decoration: none;
	outline: 0; /*輪郭線 (outline) に関する様々なプロパティを単一の宣言で設定。*/

	color: currentColor;  /*親のカラーのプロパティから値を継承*/
	transition: .2s ease-in-out;  /*ease-out	開始時に早く、終了時にゆっくり変化	*/
}

.small {  /*Facebookなどの箇所*/
	display: flex;
	align-self: center; /*グリッドやフレックスのアイテムを個別に上部や下部、中央などに配置。*/
	color: blue;
}
.small a {
	font-size: 12px;
	font-weight: 400;
	color: #888;
}
.small a + a {  /* + は隣接している唯一の弟セレクタ*/
	margin-left: 15px;
}
/*////////////////////////////////////////////////////////////////////////////////////////*/

/*アコーディオン*/
.accordion_check{
	display: none;	/*チェックボックスは表示・非表示を切り替えるフラグとして使うだけなので、非表示。*/
}

.accordion_label{
	display: block;
	margin-bottom: 0px;
	font-size: 14px;
	padding: 7px 3px;
	text-decoration: none;
	border-bottom: 1px solid ;
	border-top: 1px solid ;
	padding-bottom: 6px;
}
.accordion_content{	/*表示・非表示を切り替えるボックス要素(div)の、チェックが入っていない状態（非表示）の時*/
	border: 1px solid #333;
	height: 0;
	opacity: 0;		/*要素は完全に透明*/
	transition: .5s;	/*0.5秒で変化*/
	visibility: hidden;	/*要素のボックスは不可視 (描画されません) が、レイアウトには通常通り影響*/
}

.accordion_check:checked + .accordion_label + .accordion_content{	/*チェックボックスにチェックが入った状態のaccordion_content。ラベルはチェックボックスと連動しているので書く*/
	height: 250px;
	opacity: 1;
	padding: 0px;
	visibility: visible;
}
.accordion_check:checked + .accordion_label{	/*チェックボックスにチェックが入った状態のaccordion_label*/
	text-decoration: underline;
}

/*リンク*/
a {
	text-decoration: none;/*リンクの下線　なし*/
}
a:link {
	color: #6666cd;
}
a:hover {
	text-decoration: none;
}
/*
.nav-item_mobile:hover{
	background: #77293d;
}
.nav-item_mobile a:link {
	color: #fff;
}
.nav-item_mobile a:visited {
	color: #fff;
}
.nav-item2_mobile:hover{
	background: #77293d;
}
.nav-item2_mobile a:link {
	color: #fff;
}
.nav-item2_mobile a:visited {
	color: #fff;
}
*/


/*TOP画像*/
.index_gazou {
	margin-top: 10px;
	width: 360px;
	height: auto;
	position: relative;
}
.index_buta_gazou {
	width: 360px;
	height: auto;
}
.index_title {
	color: white;
	text-shadow: -1px -1px 10px red,5px 5px 10px red;
	font-size: 40px;
	font-weight :bold;
	line-height: 60px;	
	position: absolute;
	top: 50px;
	left: 70px;
}

.index_comment_kukuri {
	width: 360px;
	background-image: url("../image/washi7.jpg");
}
.index_comment {
	width: 340px;
	color: black;
	font-size: 16px;
	font-weight :bold;
	line-height: 20px;
	margin-left:20px;
}
/*パンフレット請求へのリンク*/
.page_link {
	font-size: 20px;
	font-weight: bold;
	line-height: 60px;
	text-align: center;
}
/*未訪問()*/
.page_link a:link {
	color: blue;
}
/*訪問済*/
.page_link a:visited {
		color: blue;
}
/*ポイント時*/
.page_link a:hover {
	color: #ff9900;
}

/*スキップ*/
.skip{
	margin-top: 20px;
	width: 360px;
	height: 422px;	
}
.skip_first{	
	width: 180px;
	height: 420px;
	margin-bottom: 0px;
	background-color: #ff7711;
	font-size: 16px;
	float: left;
}
.skip_second{
	width: 180px;
	height: 420px;
	margin-bottom: 0px;
	background-color: #ff7711;
	font-size: 16px;
	float: right;
}
.clear {
	clear: both;
}
.skip_block_1 {
	position: relative;
	width: 180px;
	height: 140px;

}
.skip_block_2 {
	position: relative;
	width: 180px;
	height: 140px;

}
.skip_gazou {
	width: 180px;
	height: 140px;
	
	transition: opacity 1s linear, background-color 1s linear;/*画像をゆっくり半透明*/
}
.skip_comment {
	font-size: 16px;
	font-weight: bold;
	text-shadow: 1px 1px 1px black;
	/*  真ん中プログラム*/
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 0;
	padding: 0;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.skip_comment_2 {
	font-size: 16px;
	font-weight: bold;
	text-shadow: 1px 1px 1px black;
	position: absolute;
	left: 55px;
	top: 45px;

}

.skip_comment_3 {
	font-size: 16px;
	font-weight: bold;
	text-shadow: 1px 1px 1px black;
	position: absolute;
	left: 45px;
	top: 55px;
}


/*スキップ コメント */
.skip_comment a:link {      /*未訪問*/
	color: yellow;
}
.skip_comment a:visited {     /*訪問済*/ 
	color: yellow;
}
.skip_comment a:hover {     /*ポイント時*/
	color: olive;
}
/*スキップ コメント_2 */
.skip_comment_2 a:link {      /*未訪問*/
	color: yellow;
}
.skip_comment_2 a:visited {     /*訪問済*/ 
	color: yellow;
}
.skip_comment_2 a:hover {     /*ポイント時*/
	color: olive;
}
/*スキップ コメント_3 */ 
.skip_comment_3 a:link {      /*未訪問*/
	color: yellow;
}
.skip_comment_3 a:visited {     /*訪問済*/
	color: yellow;
}
.skip_comment_3 a:hover {     /*ポイント時*/
	color: olive;
}

/*写真を半透明*/
.skip_gazou:hover {
	opacity: 0.5;
}


/*お知らせ*/

.oshirase {
	margin-top: 20px;
	width: 360px;	
	background-image: url("../image/washi5.jpg");
}

.oshirase_dai {
	padding-top: 20px;
	margin: 10px;
	font-size: 20x;
	font-weight: bold;
	text-align: center;
}

.oshirase_kukurki{
	width: 350px;
	margin-left: 5px;
}
.oshirase_dai {
	padding-top: 20px;
	margin: 10px;
	font-size: 20x;
	font-weight: bold;
	text-align: center;
}

.oshirase_wrapper {
	width: 350px;
}
.oshirase_left {
	width: 20px;
	float: left;
}
.oshirase_right {
	width: 330px;
	float: right;
}
.oshirase-list {
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	margin: 10px;
}
.oshirase-list_twitter {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 20px;
	word-break: break-all;
	white-space: nomal;
	display: block;
}
.n {
	font-size: 15px;
	line-height: 15px;
	margin: 10px;
}

/*未訪問*/
.oshirase-list a:link {
	color: yellow;
}
/*訪問済*/
.oshirase-list a:visited {
	color: yellow;
}
/*ポイント時*/
.oshirase-list a:hover {
	color: blue;
}

/*twitter*/
/*未訪問*/
.oshirase-list_twitter a:link {
	color: yellow;
}
/*訪問済*/
.oshirase-list_twitter a:visited {
	color: yellow;
}
/*ポイント時*/
.oshirase-list_twitter a:hover {
	color: blue;
}
/*htmlから入った場合*/
.move_kukuri {
	text-align: center;
}
.move {
	width:200px;
	height:50px; 
	font-size:18px;
}
/*未訪問*/
.move a:link {
	color: black;
}
/*訪問済*/
.move a:visited {
	color: black;
}
/*ポイント時*/
.move a:hover {
	color: black;
}

/*お知らせページのお知らせ欄*/

.oshirase_page {
	margin-top: 45px;
	width: 360px;	
	background-image: url("../image/washi5.jpg");
}
.oshirase_page_login {
	margin-top: 5px;
	width: 360px;	
	background-image: url("../image/washi5.jpg");
}


/* フッター */
.footer {
	width: 360px;
	text-align: center;
	background-color: gray;
	font-size: 14px;
	margin: 0 auto;
}

/*データベース接続失敗*/
.syougai {
	text-align: center;
	margin-top: 150px;
}
.syougai_span {
	font-size: 18px;
	margin-top: 150px;
}
.button_size_syougai {
		width: 150px;
		height: 30px;
		font-size:16px;
		margin-top: 70px;
		margin-bottom: 70px;
}
.syougai a:link {
	color: black;
}