@charset "UTF-8";

/* 携帯navのCSS*/

#g-nav{
	display: none;
}


/* ハンバーガーメニューのボタン */

.openbtn{
	position: relative;
    	background: #fff;
    	width: 60px;
    	border-radius: 5px;
    	cursor: pointer;
    	display: none;
    	text-align: center;
    	max-width: 58px;
    	min-width: 58px;
}

.openbtn span{ 
	    display: block;
    	    transition: all .4s;
    	    margin: auto;
}

.openbtn span:nth-of-type(1),.openbtn span:nth-of-type(3){
	height: 3px;
	background: #09142e;
	width: 62%;
	left: 10px;
}
.openbtn span:nth-of-type(1){
	top: 10px;
}

.openbtn span:nth-of-type(2){
	font-weight: bold;
	top: 19px;
	left: 12px;
	font-size: 0.6rem;
	text-transform: uppercase;
	color: #09142e;
}

.openbtn span:nth-of-type(3){
	top: 40px;
}

.openbtn.active span:nth-of-type(1){
	top: 18px;
	left: 18px;
	transform: translateY(6px)rotate(-45deg);
	width: 30%;
}
.openbtn.active span:nth-of-type(2){
	opacity:0;
}

.openbtn.active span:nth-of-type(3){
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
	margin-top: -21.6%;
}

/*--------------------------------------*/



/*　↓以下レスポンシブ↓　*/


/* 確かな技術、医療器具として～　の文と画像 
---------------------------------------------*/
@media (max-width:1000px){
	
	.pc_br2{
		display:none;
	}
	.whitebox p{
		font-size:19px;
	}
	.line-height{
	margin-top:10px;
	margin-bottom:10px;
	}

}




@media (max-width:767px){

/* 非表示領域*/

	#ta{ display: none;}
	#header-icon{ display: none;}

	#nav{ display: none;}
	
	.openbtn{ display: block;}	/* ハンバーガーボタン*

/*-----------*/

/* 携帯navのCSS*/

#g-nav{
	background: #fff;
	font-weight: bold;
	height: 100vh;
}


#g-nav.p-active{
	display: block;
	 animation: appear .5s ease;
}

@keyframes appear{
	 0%{
      opacity: 0;
    }
	50%{
	opacity: 0.5;
    }
    100%{
      opacity: 1;
    }
}

.contents{
	display: grid;
	grid-template-columns: 50% 50%;
	text-align: center;
}

.item{
	border: 1px solid;
	border-right: none;
	margin-bottom: -1px;
	margin-left: -1px;
	padding: 15% 0;
}

.item a{
	color: #000;
}

.item2{
	border: 1px solid;
	border-right: none;
	padding: 5% 0;
	margin-left: -1px;
}

.item2 ul{
	display: flex;
	justify-content: center;
}

.item2 ul li{
	margin: 0 2rem;
}

header{
	padding-top: 1%;
	padding-bottom: 1%;
}

.kotei-mb{
	width:100%; 
	position:fixed; 
	left:0; 
	top:0; 
}

#header-left img{
	width: 60%;	/* 変更するかも*/
	padding-top: 1%;
}

/*ブラウンＢＯＸ１*/

.resizeimg_1 img {		/*宝月堂のロゴ（白色）*/
		margin-top:10px;
		width: 150px;
		text-align: center;
		margin-left: 50px;
	}

.brownoval {			/*角丸茶色エリア（1つ目）*/
		flex-direction:column;
		justyfy-content:center;
		text-align:center;
		border-radius: 20px;
		width: 90%;
		padding-left: 10px;
		padding-top:10px;
		padding-right: 10px;
		padding-bottom:10px;
		margin-top: 50px;	/*←スライダー下の余白*/
	}

#mb_br{
	display: block;
}

.pc_br {
   display: none;
}



.text{
	text-align: left;
}

/*----------------*/

/* 正しい眼鏡 */

	#tadashi,#brown,.otoiawase_tenpo,#koshiki,.box{
		display:flex;
		flex-direction:column;
		align-items:center;
	}
	#tadashi{
		text-align:center;
	}
	#tadashi img{
		width:90%;
		text-align:center;
	}

/*-------------------*/

	.whitebox img{
	}
	.whitebox p{				/* 自店調整並びに　の文章 */
		font-size:28px;
	}
	

/* インフォメーション部分 (追加　7_19)*/

/*ブラウンＢＯＸ*/

.resizeimg_2 img {		/*宝月堂のロゴ（白色）*/
		width: 150px;
		text-align:center;
		
}

.text_ginoshi {
		text-align: left;
		margin: 10px 0;
		
}


.brownoval_2 {			/*角丸茶色エリア（2つ目）*/
		flex-direction:column;
		justify-content:center;
		border-radius: 20px;
		align-items: center;
		width:90%;
		padding-left: 10px;
		padding-top: 10px;
		padding-right:10px;
		padding-bottom: 10px;
}

#mb_br{
	display: block;
}

/*-------------*/


#info_itiran{
	display:none;		/* 一覧を見る pc表示なしに*/
}

.info-area{
	display: block;		/* display: flex; 解除 通常のli要素へ */
	margin-top:0;
}

#info_itiran_mb{
	font-size:14px;
	font-weight:bold;
	padding-top: 5%;
	color: #09142e;
	transition:all 0.5s;
	display: block;
}

#info_itiran_mb:hover{
	color: #dd0c2c;	/*色変更予定*/
}



/*------------------------*/

/* キャンペーン部分 (追加　7_19)*/

#cp_itiran{
	display: none;
}

#cp_itiran_mb{
	font-size:14px;
	font-weight:bold;
	padding-top: 5%;
	color: #09142e;
	transition:all 0.5s;
	display: block;
}

#cp_itiran_mb:hover{
	color: #dd0c2c;	/*色変更予定*/
}

/*-----------------*/


/* 店舗紹介・お問い合わせ */

	.otoiawase_tenpo {
    		margin-bottom: 40px;	/*下の余白*/
	}

/* インスタ、フェイスブックの公式SNS */

#koshiki{
	padding-bottom: 50px;
}

#koshiki img{
	width: 80%;	/* 画像の大きさ*/
}

/*footer*/


#footer-nav{
	line-height: 1.7;
}


}