@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: inline-block;*/
	display: block;
	transition: all .4s;
	margin: auto;
/*	position: absolute;*/
}

.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%;
	margin-top: -21%	/*8_1　三輪追加*/
}
.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%;	/*8_1 三輪*/
}

span#MENU {
    font-weight: bold;
    top: 19px;
    text-transform: uppercase;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.6rem;
    color: #09142e;
    padding: 5% 0;
}

/*三輪 一旦追加*/
div#jiten {
    margin-bottom: 1px;
}


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



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


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


	.whitebox2 p{			/* whiteboxを1と2に分けた 7_28三輪 */
		font-size:19px;
	}
	.line-height{
	margin-top:10px;
	margin-bottom:10px;
	}

	br.pc_br_media {
		display:block;

}

/*}

@media (max-width:820px){*/

.whitebox2 p {
    text-align: center;
    font-family: "HGSｺﾞｼｯｸE",sans-serif;
    font-size: 19px;
    line-height: 1.3;
    padding-top: 10px;
    padding-left: 15px;
    padding-bottom: 5px;
}

.whitebox2 img {
    width: 99%;
}


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


/*}

@media (max-width:767px){

/* 非表示領域*/

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

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


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


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

/* 携帯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: 100px;
		text-align: center;
		margin-left: 50px;
	}

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

#mb_br{
	display: block;
}

.pc_br {
   display: none;
}



.text p{
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 25px; 
}

.text{
	text-align: left;
	font-size: 16px;
}


#motto_miru2 {
    margin-top: 10px;
}

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

/* 正しい眼鏡 */

	#tadashi,#brown,.otoiawase_tenpo,#koshiki,.box{
		display:flex;
		flex-direction:column;
		align-items:center;
	}
	#tadashi{
		text-align:center;
	}
/*	#tadashi img{			/*7_28 コメントアウト 三輪
		width:90%;
		text-align:center;
	}*/


	#t-mozi {			/*7_28 追加 三輪*/
	
		max-width: 60%;
    		text-align: center;
		margin-bottom: 20px;
		padding:initial;

	/*	width: 90%;		/*7_28 コメントアウト 三輪*/
	}


	#t-kazoku {			/*7_28 追加 三輪*/
   		max-width: 97%;
    		text-align: center;
		margin-left:10px;
		padding:initial;

	/*	margin-right: auto;	
    		margin-left: auto;
		margin: 0 -5px 0 5px;	*/

	}




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

	.whitebox1 img{
	}

	.whitebox2 img{
	}

	.whitebox1 p{				/* 自店調整並びに　の文章 whitebox1と2に分けた 7_27三輪*/

		font-size: 26px;
    		text-align: center;
   		 margin: 10px 13px -15px 13px;
    		font-family: 'Roboto', sans-serif;
   		 font-weight: 600;

	/*	font-size:26px;
		text-align:center;

		margin: 0px 13px -20px 0px;	/*7_27 三輪 追加*/

  		/*font-family: "HGSｺﾞｼｯｸE",sans-serif;		7_26 三輪　追加*/

		/*font-size:28px;
		padding:0 20px;
/*		margin-left:auto;
		margin-right:auto;*/
	}

	.whitebox2 p{				/* 安心のスペシャリスト　の文章 三輪 追加 */

		font-size:26px;
		text-align:center;
		margin: 20px 12px -10px 0px;
  	 	font-family: 'Roboto', sans-serif;
    		font-weight: 600;
	}
	

	.left_wb {
   		text-align: left;
		margin-left:5px;
	}


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

/*ブラウンＢＯＸ*/

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

.text_ginoshi p{
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 25px;
}

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


.brownoval_2 {			/*角丸茶色エリア（2つ目）*/
		flex-direction:column;
		justify-content:center;
		border-radius: 20px;
		align-items: center;
		width:91%;
		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要素へ */
   	text-align: center;
 	margin-right: auto;
   	margin-left: auto;
    	margin-top: 0;
  	padding-left: 40px;
}

#info_itiran_mb{
	font-size:16px;
	font-weight:bold;
	padding-top: 5%;
	color: #09142e;
	transition:all 0.5s;
	display: flex;
    	justify-content: flex-end;
}

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


#info-title img {		/*7_28 三輪追加*/

	margin:auto;
	max-width:95%;
}


li#nenmatsu {
	padding-right: 50px;
}

li#eigyojikan {
    	margin-right: 45px;
}

li#sinsaku {
    	margin-right: 36px;
}

li#osirase {
    margin-left: 45px;
}

.osirase {
    width: auto; 
}


/*もっと見る・宝月堂のメガネボタン*/

.DivLink2{
	font-weight: bold;
}

/*#motto_miru2 {
   margin-top: -35px;
}*/

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

/* キャンペーン部分 (追加　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;	/*色変更予定*/
}


#cp-title img {			/*7_28 三輪追加*/
    	margin:auto;
	max-width:90%;
	
	padding: 0 10px 0 0;

	/*height: auto;*/
}

.cp-news {
    	padding-left: 0px;
    	transition: all 0.5s;
   	margin-right: auto;
    	margin-left: auto;
   	text-align: center;
	padding-right: initial;
}

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


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

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

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

#koshiki{
	padding-bottom: 50px;
}

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

/*footer*/


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


}


/********************
三輪 一旦追加
@media (max-width:767px)
*********************
*/

/*#motto_miru2 {
    margin-top: -35px;
}*/

@media (max-width:767px){

#motto_miru2 {
    margin-top: -35px;
}



}