/**********
 style-products.css
**********/

h2#title{
	background:#fff url(../products/img/h2Bg.jpg) no-repeat center center;
	background-size:cover;
}

.topCom{
	text-align:left;
	padding-bottom:50px;
}
@media only screen and (max-width: 768px) {
	.topCom{
		padding-bottom:30px;
	}
}

/**********
 productsNavi
**********/
/**  productsNavi **/
#productsNavi{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
	padding-top:35px;
}

#productsNavi a{
	width: 100%;
	margin-bottom:5px;
	text-decoration:none;
	color:#000;
	padding-bottom:50px;
	background:url(../img/arrow_long.png) no-repeat bottom center;
	margin-bottom:70px;
}

#productsNavi a img{
	width:100%;
	max-width:330px;
	margin:0 auto;
	display:block;
}

#productsNavi a div{
	padding-top:15px;
}


#productsNavi a div p{
	line-height:1.5;
}

#productsNavi a div p.title{
	font-size:1.3em;
	display:block;
	font-weight:bold;
	padding-bottom:15px;
	text-align:center;
}



@media only screen and (max-width: 768px) {
	#productsNavi a{
		display:flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}
	#productsNavi a img{
		width:39%;
		max-width:260px;
		margin:0 auto 0 0;
	}
	#productsNavi a div{
		width:54%;
		padding-top:0;
		text-align:left;
		margin:0 0 0 auto;
	}
	#productsNavi a div p.title{
		text-align:left;
		font-size:17px;
	}
	#productsNavi a div p.title span{
		display:block;
		font-weight:normal;
	}

}

/**********
 products_maker
**********/
/**  productsNavi **/
#products_maker{
	padding-top:90px;
}

#products_makerInner{
	background:#f3fdff;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	background:#e0f3f9;
	padding:35px 40px 15px 40px;
}

#products_maker .notes{
	padding-bottom:5px;
	display:block;
	text-align:right;
	font-size:0.8em;
}

#products_makerInner #products_makerList{
	text-align:center;
}
#products_makerInner #products_makerList a{
	display:inline-block;
	width:31%;
	text-align:left;
	text-decoration:none;
	color:#000;
	border:1px solid #a4d3dd;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 80%, #f4f4f4 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffffff 80%,#f4f4f4 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffffff 80%,#f4f4f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	margin-bottom:20px;
}

#products_makerInner #products_makerList a div{
	padding:24px 15px 6px 15px;
}

@media only screen and (max-width: 768px) {
	#products_makerInner #products_makerList a div{
		padding:15px 15px 6px 15px;
	}
}

#products_makerInner #products_makerList a div h4{
	display:block;
	width:100%;
	text-align:center;
	height:85px;
	position:relative;
	margin-bottom:10px;
}

#products_makerInner #products_makerList a div h4 img{
	display:block;
	margin:0 auto;
	width:100%;
	height:auto;
	max-width:150px;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	padding-bottom:35px;
}

#products_makerInner #products_makerList a div h4 img.imgMin{
	max-width:100px;
}

#products_makerInner #products_makerList a div h4 span{
	display:block;
	font-weight:normal;
	font-size:0.8em;
	position:absolute;
	bottom:0;
	width:100%;
	left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}


@media only screen and (max-width: 768px) {
	
	#products_makerInner{
		padding:30px 16px 15px;
	}

	#products_makerInner #products_makerList a{
		width:48%;
		margin-bottom:15px;
	}
}



/** products_makerNavi_button **/

#products_makerNavi{
	width:90%;
	margin:0 auto;
	padding-bottom:40px;
}

#products_makerNavi a{
	width:48%;
	max-width:480px;
	text-align:center;
	margin-bottom:25px;
	background-position: 0 0;
	background-size: 200% auto;
	transition: 0.5s;
	text-decoration:none;
	color: #fff;
	margin:0;
	display:block;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

@media only screen and (min-width: 769px) and (max-width: 1050px) {
	#products_makerNavi{
		width:98%;
	}

	#products_makerNavi a:first-of-type{
		width:52%;
	}
	#products_makerNavi a:last-of-type{
		width:44%;
	}
}



#products_makerNavi a:hover{
	background-position: -100% 0;
}

#products_makerNavi a p{
	display:block;
	padding:14px;
	position:relative;
	text-align:left;
}

#products_makerNavi a p:after{
	content:url(../img/moreLink_arrow_on.png);
	position: absolute;
	top: 50%;
	right: 20px;
	margin-top: -10px;
}

#products_makerNavi a.products_makerNavi_products{
	background-image: linear-gradient(to right, rgba(0,150,185,1) 50%, rgba(0,122,135,1) 50%);
}


#products_makerNavi a.products_makerNavi_maker{
	background-image: linear-gradient(to right, rgba(50,162,140,1) 50%, rgba(5,127,104,1) 50%);
}



@media only screen and (max-width: 768px) {
	#products_makerNavi{
		width:100%;
	}
	
	#products_makerNavi a{
		width:100%;
		max-width:480px;
		text-align:center;
		margin:0 auto;
	}
	#products_makerNavi a:first-of-type{
		margin-bottom:20px;
	}
	#products_makerNavi a p{
		padding:10px 14px;
	}
}



/**********
 pageNavi
**********/

#pageNavi:after {
    content: "";
    display:block;
    width:31%;
}

#pageNavi a{
	width:31%;
	max-width:330px;
    margin-bottom: 20px;
	font-size:1.1em;
}

#pageNavi a:nth-child(4){
	background-image: linear-gradient(to right, rgba(89,178,112,1) 50%, rgba(39,141,30,1) 50%);
}

#pageNavi a:nth-child(5){
	background-image: linear-gradient(to right, rgba(46,49,143,1) 50%, rgba(20,20,100,1) 50%);
}

#pageNavi a#heardlens{
	background-image: linear-gradient(to right, rgba(80,168,14,1) 50%, rgba(56,133,0,1) 50%);
}

#pageNavi a#mels{
	background-image: linear-gradient(to right, rgba(234,134,159,1) 50%, rgba(229,135,122,1) 50%);
}


@media only screen and (max-width: 768px) {
	#pageNavi a{
		width:47.5%;
		max-width:380px;
		margin:0 0 25px 0;
	}
	#pageNavi a p:after{
		content: '';
		display: inline-block;
		width: 22px;
		height: 14px;
		margin-top:-7px;
		right:10px;
		background-image: url(../img/moreLink_arrow_on.png);
		background-size: contain;
		vertical-align: middle;
	}
	
}


#pageNavi_mb{
	display:none;
}

@media only screen and (max-width: 768px) {
	
	#pageNavi{
		display:none;
	}
	
	#pageNavi_mb{
		width:100%;
		margin-bottom:60px;
		display:block;
	}
	
	.menu_item {
		background: #fff;
		color: #fff;
		cursor: pointer;
		display: block;
		margin-bottom: 1px;
		border-top:1px solid #222;
		border-bottom:1px solid #222;
		font-size:17px;
	}
	.menu_item_link {
		display: block;
		line-height: 60px;
		padding: 0 1rem;
		position: relative;
	}
	.menu_item_link:after {
		content: '\f077';
		font-family:'Font Awesome 5 Free';
		display: block;
		font-weight:900;
		line-height: 60px;
		position: absolute;
		right: 0;
		text-align: center;
		top: 0;
		width: 60px;
	}
	
	
	a.menu_item_link{
		text-decoration:none;
		color:#000!important;
	}
	.menu_item a:hover,
	.menu_item a:active{
		text-decoration:none;
	}
	
	.menu_item_link.on:after {
		content: '\f078';
	}
	 
	.submenu {
		background: #fff;
		border-top:1px solid #282828;
		display:none;
	}
	
	.submenu_item {
		width:100%;
	}
	
	.submenu_item:last-of-type{
		border-bottom:none;
	}
	
	.submenu_item a{
		padding:15px 0 15px 15px;
		display:block;
		position: relative;
		font-size:16px;
		background:#e0f3f9;
	}
	
	.submenu_item a:after{
		content: ">";
		font-family:'Font Awesome 5 Free';
		font-weight:900;
		right:15px;
		top:30%;
		position:absolute;
		color:#00a2d5;
	}
	
	.submenu a{
		text-decoration:none;
		color:#000;
	}
	.submenu a:hover,
	.submenu a:active{
		text-decoration:none;
		background:#00a2d5;
		color:#fff;
	}
	.submenu a:hover:after,
	.submenu a:active:after{
		color:#fff;
	}
}



/**********
 makerListWrap
***********/
#makerListWrap{}

#makerListWrap .contentInner{
	padding-bottom:50px;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

#makerListWrap h3{
	display:block;
	width:100%;
	margin-bottom:60px;
}

#makerListWrap .makerListWakuWrap{
	width: 100%;
}
#makerListWrap .makerListWakuWrap:after {
    content: "";
    display: block;
    width: 31%;
    height: 0;
}

#makerListWrap .makerListWaku{
	display:block;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	margin:0 0 28px 0;
	border:1px solid #969696;
	width:31%;
	background: #fff; 
	min-height:180px;
}



.makerListWaku .makerListInner{
	padding:25px;
}


@media only screen and (max-width: 768px) {
    #makerListWrap .makerListWaku{
        width:100%;
    }

	.makerListWaku .makerListInner{
		padding:20px;
	}

}

.makerListInner h4{
	display:block;
    width: 150px;
    margin: 0 auto;
}

.makerListInner h4 img{
    width: 150px;
    display: block;
    margin: 0 auto;
}

.makerListInner h4 img.logoMin{
    width: 100px;
}

.makerListInner h5{
    padding-top: 15px;
    text-align: center;
    width: 100%;
}

.makerListInner img.productImg{
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    display: block;
}

.makerListInner h6{
	margin-top: 10px;
    padding-bottom: 20px;
    font-size: 1.06em;
    color: #0071b9;
}

.makerListInner table.commonTableBase{
    margin-bottom: 18px;
}

.makerListInner table.commonTableBase tr th,
.makerListInner table.commonTableBase tr td{
    border: none;
    font-size: 0.9em;
}

.makerListInner table.commonTableBase tr th{
    width: 48px;
    display: table-cell;
    background: #0096bb;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    border-bottom: 5px solid #fff;
	padding:5px 8px;
}
.makerListInner table.commonTableBase tr td{
    display: table-cell;
	padding:6px 0 6px 15px;
    line-height: 1.4;
}

@media only screen and (max-width: 768px) {
    .makerListInner table.commonTableBase tr th{
        width: 24%;
        display: table-cell;
    }
    .makerListInner table.commonTableBase tr td{
        width: 75%;
        display: table-cell;
    }
}

.makerListInner a.makerLink{
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 15px auto 0 auto;
    text-decoration: none;
    color: #0071b9;
    border: 1px solid #0071b9;
    text-align: center;
}

.makerListInner a.makerLink p{
    padding: 5px ;
}



#makerListWrap #type_1day{}
 #makerListWrap #type_1day .makerListInner table.commonTableBase tr th{
    background: #0096bb;
}
#makerListWrap #type_2week{
	background:#e0f3f9;
	padding:35px 0 15px 0;
	margin-top:20px;
}
#makerListWrap #type_2week .makerListInner table.commonTableBase tr th{
    background: #2aa38c;
}
#makerListWrap #type_1month{
	background:#fff;
	padding:35px 0 15px 0;
	margin-top:20px;
}
#makerListWrap #type_1month .makerListInner table.commonTableBase tr th{
    background: #4799d6;
}

#makerListWrap #type_enkin{
	background: #e0f3f9;
	padding-top:35px;
}
#makerListWrap #type_enkin .makerListInner table.commonTableBase tr th{
    background: #55b36e;
}

#makerListWrap #type_color{
	background:#fff;
	padding:35px 0;
	margin-top:20px;
}
 #makerListWrap #type_color .makerListInner table.commonTableBase tr th{
    background: #2E318F;
}

#makerListWrap #type_heard{
	background: #e0f3f9;
	padding-top:35px;
}
 #makerListWrap #type_heard .makerListInner table.commonTableBase tr th{
    background: #449000;
}


/** lenscolor **/
.lenscolor{
    text-align: center;
}

.lenscolor a{
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}

.lenscolor img{
    width: 100%;
    max-width: 300px;
    display: block;
    vertical-align: baseline;
}



/** cateType **/
.cateType{
    display: block;
    color: #fff;
    line-height: 1;
	border-radius:6px;
    text-align: center;
}

.cateType span{
    padding: 4px;
    display: block;
}

.cateType_hard{
    background: #252a6b;
}

.cateType_soft{
    background: #29a8df;
}

.cateType_other{
    background: #00a69a;
}


/**********
 melsplan
**********/
#melsplan{
    padding: 70px 0;
    background: #fffae9;
}

#melsplan .contentInner{
    background: #fff;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
        padding-bottom: 0;
}

#melsplan .contentInner > div{
    padding: 40px;
}

@media only screen and (max-width: 768px) {
    #melsplan .contentInner > div{
        padding: 30px 20px;
    }
}

#melsplan h3{
    width: 100%;
    max-width: 320px;
    display:block;
    margin: 0 auto 40px auto;
}

#melsplan h3 img{
    width: 100%;
    max-width: 320px;
}

#melsplan h3 span{
    display: block;
    padding-top: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 1.9rem;
    color: #202e4d;
}

#melsplan .topCom{
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    line-height: 1.7;
}

#melsplan .topCom p:nth-of-type(1){
    color: #0071b9;
}

@media only screen and (max-width: 768px) {
    #melsplan .topCom{
        text-align: left;
        font-size: 1.8rem;
    }
}

/** mels_about **/
#mels_about{
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

#mels_about li{
    display: block;
    width: 47.5%;
    margin-bottom: 25px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}

#mels_about li p{
    padding: 12px 9px;
    color: #fff;
    text-align: center;
    font-size: 1.92rem;
    font-weight: bold;
}

#mels_about li:nth-of-type(1){
    background: #ef858c;
}

#mels_about li:nth-of-type(2){
    background: #ef845c;
}

#mels_about li:nth-of-type(3){
    background: #f4a036;
}

#mels_about li:nth-of-type(4){
    background: #ed7c6b;
}


@media only screen and (max-width: 768px) {
    #mels_about li{
        width: 100%;
    }
    #mels_about li:last-of-type{
        margin-bottom: 0;
    }
    #mels_about li p{
        padding: 12px;
        font-size: 1.8rem;
        text-align: left;
    }

}

/** mels_contact **/
#mels_contact{
    padding-top: 25px;
    text-align: center;
}

#mels_contact a{
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 15px auto;
}

#mels_contact a img{
    width: 100%;
    max-width: 420px;
}

#mels_contact span{
    display: block;
    text-align: center;
    font-size: 0.9em;
}


@media only screen and (max-width: 768px) {
    #mels_contact{
        padding-top: 35px;
        text-align: left;
    }


}



/*==========================================
 眼鏡
===========================================*/

/**********
 aboutGlasses
**********/
#aboutGlasses{}

/** aboutGlasses_top **/
#aboutGlasses_top{
	background: #0FA5B5;
	position: relative;
	margin-bottom: 80px;
}

#aboutGlasses_top:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 30px solid transparent;
  border-top: 30px solid #0FA5B5;
}

#aboutGlasses_top > img{
	width:100%;
	max-width: 1050px;
	margin: 0 auto;
	display: block;
	padding: 25px 0 0 0;
}



@media only screen and (max-width: 768px) {
	#aboutGlasses{
		background:none;
		padding-bottom:30px;
	}
	#aboutGlasses_top{
		margin-bottom: 50px;
	}
	
	#aboutGlasses_top > img{
		width:98%;
		margin: 0 auto;
		padding-top: 10px;
	}

	#aboutGlasses_topTxt h3{
		font-size:1.36em;
		line-height:1.5;
	}

}


#aboutGlasses_topImg img{
	width:100%;
	max-width:400px;
	display:block;
	margin:0 auto;
}

@media only screen and (max-width: 768px) {
	#aboutGlasses_topTxt,
	#aboutGlasses_topImg{
		width:100%;
	}
	
	#aboutGlasses_topTx{
		-webkit-box-ordinal-group:2;
		-ms-flex-order:2;
		-webkit-order:2;
		order:2;
				
	}
	#aboutGlasses_topImg{
		padding-bottom:30px;
		-webkit-box-ordinal-group:1;
		-ms-flex-order:1;
		-webkit-order:1;
		order:1;
	}
	#aboutGlasses_topImg img{
		max-width:260px;
	}

}





/**********
 glassesTopCom
**********/
#glassesTopCom{
	display:block;
	width:90%;
	max-width:1050px;
	margin:0 auto;
	text-align:left;
}
#glassesTopCom #topComment .conBF_txt{
	padding-bottom:30px;
}

#glassesTopCom #topComment .conBF_txt h4{
	font-size:2.4rem;
	font-weight: 500;
}

#glassesTopCom #topComment .conBF_txt h4 span{
	font-weight: bold;
	background: linear-gradient(transparent 70%, #FFEA3A 70%);
	font-size: 1.3em;	
}

@media only screen and (max-width: 768px) {
	#glassesTopCom #topComment .conBF_txt h4{
		font-size:2rem;
	}

	#glassesTopCom #topComment .conBF_txt h4 span{
		font-size: 1.3em;	
	}
}

#glassesTopCom #pageNavi_mb{
	margin-bottom:50px;
}

@media only screen and (max-width: 768px) {
	#glassesTopCom{
		width:100%;
	}
	#glassesTopCom h4{
		display:block;
		width:90%;
		max-width:1050px;
		margin:0 auto;
	}
	#glassesTopCom #topComment{
		padding-bottom: 40px;
	}
	
	#glassesTopCom #topComment .conBF_txt > p{
		width:90%;
		max-width:1050px;
		margin:0 auto;
	}
	
	#glassesTopCom #topComment .conBF_img{
		width:90%;
		max-width:1050px;
		margin:0 auto;
	}

}


/**********
 glassContact
**********/
.glassContact{
	width: 90%;
	max-width: 960px;
	margin: 0 auto 50px;
	border: 4px solid #0FA5B5;
	border-radius: 12px;
}

.glassContact h4{
	background: #0FA5B5;
	text-align: center;
}

.glassContact h4 p{
	padding: 8px 5px;
	color: #fff;
	font-weight: 500;
	font-size: 2.1rem;
}

.glassContact > div{
	padding: 20px 40px;
	text-align: center;
	vertical-align: middle;
}

.glassContact > div p:first-of-type{
	font-size: 3.6rem;
	font-weight: 700;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro";
}

.glassContact > div p:first-of-type span{
	font-size:1.6rem;
	border:1px solid #0FA5B5;
	color: #0FA5B5;
	padding: 5px;
	font-weight: 400;
	margin-right: 15px;
	vertical-align: middle
}

.glassContact > div p:last-of-type{
	padding-top: 15px;
	margin-top: 5px;
	border-top: 1px solid #999;
	font-size: 1.5rem;
}

@media only screen and (max-width: 768px) {
	.glassContact{
		margin-bottom: 70px;
	}
	.glassContact h4{
			width: 100%;
	}
	.glassContact h4 p{
		font-size: 1.9rem;
	}
	
	.glassContact > div{
		padding: 5px 15px 15px;
	}
	.glassContact > div p:first-of-type{
		font-size: 3rem;
	}
	
	.glassContact > div p:first-of-type span{
		margin-right: 0;
		vertical-align: middle;
	}
	
}



/**********
 glassPointWrap
**********/
#glassPoint{
	padding:40px 0 0 0;
	margin-bottom: 0;
}
#glassPointWrap{
	background:#edf9f7;
	padding-bottom: 60px;
	margin-bottom: 0;
}


#glassPointWrap h3{
	width: 100%;
	padding: 25px 0;
	position: relative;
	background: #0FA5B5;
	color: #fff;
	text-align: center;
	margin-bottom: 60px;
}

#glassPointWrap h3:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 30px solid transparent;
  border-top: 30px solid #0FA5B5;
}

#glassPointWrap h3 p{
	display: block;
	width: 90%;
	font-size: 2.6rem;
	font-weight: bold;
	margin: 0 auto;
	padding: 0;
}

#glassPointWrap h3 p span{
	color: #FFE000;
	padding: 0;
}

@media only screen and (max-width: 768px) {
	#glassPointWrap h3 p{
		font-size: 2.1rem;
	}

}

 #glassPointWrap h3 p span:last-of-type{
	 display:block;
	 font-size:100%;
	 color:#f9eb21;
}

#glassPointWrap h3 + .contentInner{
	max-width: 1000px;
}



/** glassPointTop **/

#glassPointTop{
	width:100%;
	padding:20px 0 50px 0;
	margin-bottom:30px;
	border-bottom:1px solid #222;
}

#glassPointTop > div{
	width:58%;
}


#glassPointTop h4{
	padding-bottom:20px;
	font-size:1.2em;
}

#glassPointTop h4 span{
	background: linear-gradient(transparent 80%, #f9eb21 80%);
}

#glassPointTop h4 span.notes{
	display:inline;
	font-size:12px;
	background:none;
	padding-left:5px;
}



#glassPointTop > p{
	display:block;
	width:38%;
}

#glassPointTop > p img{
	width:100%;
	max-width:360px;
	margin:0 0 0 auto;
	display:block;
}

@media only screen and (max-width: 768px) {
	
	#glassPointTop > div{
		width:100%;
		padding-bottom:25px;
	}
	#glassPointTop > p{
		width:100%;
	}
	
	#glassPointTop > p img{
		width:100%;
		max-width:360px;
		margin:0 auto;
	}

	
	
}



/** **/
#glassPointInner{
	margin:0 auto;
	width:94%;
	padding-bottom:25px;
}
#glassPointInner .glassPointBlk{
	width:47.5%;
	max-width:490px;
}

@media only screen and (max-width: 768px) {
	#glassPointInner{
		width:92%
		
	}
	#glassPointInner .glassPointBlk{
		width:100%;
		margin-bottom:30px;	
	}
	 #glassPointWrap h3 p span{
		 line-height:1.4;
		 display:block;
	}
	 #glassPointWrap h3 p span:last-of-type{
		 padding-top:5px;
	}

}

#glassPointInner .glassPointBlk .glassPointBlk_layer{
	position: relative;
	padding-top:70px;
	
}

#glassPointInner .glassPointBlk .glassPointBlk_layer img{
	 z-index:99;
	 width:100px;
	 position:absolute;
	 left: 0;
	 right: 0;
	 top:10px;
	 margin:auto;
}


#glassPointInner .glassPointBlk .glassPointBlk_layer .glassPointBlkInner{
	background: #fff;
	border:2px solid #32a28c;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	width:100%;
	padding:35px 0 25px 0;
}

@media only screen and (max-width: 768px) {
	#glassPointInner .glassPointBlk{
		width:100%;
		margin:0 auto 25px auto;
	}
	
	#glassPointInner .glassPointBlk:last-pf-type{
		margin-bottom:0;
	}
}


#glassPointInner .glassPointBlk .glassPointBlk_layer .glassPointBlkInner h4{
	font-weight:bold;
	text-align:center;
	font-size:1.55em;
	line-height:1.5;
	padding-top:29px;
	padding-bottom:15px;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}



#glassPointInner .glassPointBlk .glassPointBlk_layer .glassPointBlkInner h4 span{
	font-size:12px;
	font-weight:normal;
	color:#000;
	padding-left:10px;
}

@media only screen and (max-width: 768px) {
	#glassPointInner .glassPointBlk .glassPointBlk_layer .glassPointBlkInner h4 span{
		display:inline;
	}
}

#glassPointInner .glassPointBlk .glassPointBlk_layer .glassPointBlkInner p.glassPointPu{
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	background:#ffe200;
	font-size:1.12em;
	line-height:1.4;
	text-align:center;
	font-weight:bold;
	width:90%;
	margin:0 auto 15px auto;
	display:block;
}

#glassPointInner .glassPointBlk .glassPointBlk_layer .glassPointBlkInner p.glassPointPu:last-of-type{
	margin-bottom:0;
}

#glassPointInner .glassPointBlk .glassPointBlk_layer .glassPointBlkInner p.glassPointPu span{
	display:block;
	padding:5px;
}


#glassPointInner .notes{
	display:block;
	text-align:left;
	width:100%;
	padding-top:10px;
	font-size:0.76em;
	line-height:1.5;
}



/**********
 glassesSet
**********/
#glassesSet{
	padding-bottom: 60px;
}

#glassesSet .contentInner{
}

#glassesSet h3{
	width: 100%;
	padding: 25px 0;
	position: relative;
	background: #0FA5B5;
	color: #fff;
	text-align: center;
	margin-bottom: 80px;
}

#glassesSet h3:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 30px solid transparent;
  border-top: 30px solid #0FA5B5;
}

#glassesSet h3 p{
	display: block;
	width: 90%;
	font-size: 2.6rem;
	font-weight: bold;
	margin: 0 auto;
	padding: 0;
}

#glassesSet #glassesSet_txt{
	font-size:1.06em;
	line-height:1.7;
	width:52%;
}

#glassesSet #glassesSet_txt .midashi{
	font-size:2.6rem;
	font-weight:600;
	padding-bottom:20px;
}


#glassesSet #glassesSet_img{
	text-align:center;
	width:40%;
}
#glassesSet #glassesSet_img img{
	width:100%;
	max-width:360px;
	margin:0 0 0 auto;
}

@media only screen and (max-width: 768px) {
	#glassesSet #glassesSet_txt{
		width:100%;
	}
	#glassesSet #glassesSet_img{
		width:100%;
		max-width:280px;
		padding-top:35px;
		margin:0 auto;
	}
	#glassesSet #glassesSet_txt span{
		padding-top:4px;
		padding-botom:4px;
	}
}

#glassesSet #glassesSet_img + p{
	width: 100%;
	max-width: 800px;
	margin: 30px auto 0;
	display: block;
	border-radius: 12px;
	background: #FDD000;
	font-weight: 600;
	text-align: center;
	font-size: 1.1em;
}

#glassesSet #glassesSet_img + p span{
	padding: 10px;
	display: block;
}



/**********
 glassesKids
**********/
#glassesKids{
	padding:40px 0;
	margin:20px 0;
}

/** aboutglassesKids **/
#aboutglassesKids{
	background: #00AFDD;
	position: relative;
	margin-bottom: 80px;
}

#aboutglassesKids:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 30px solid transparent;
  border-top: 30px solid #00AFDD;
}

#aboutglassesKids_top > img{
	width:100%;
	max-width: 1050px;
	margin: 0 auto;
	display: block;
	padding: 25px 0 0 0;
}



@media only screen and (max-width: 768px) {
	#glassesKids{
		background:none;
		padding-bottom:30px;
	}
	#aboutglassesKids{
		margin-bottom: 50px;
	}
	
	#aboutglassesKids_top > img{
		width:98%;
		margin: 0 auto;
		padding-top: 10px;
	}

}



#glassesKids .conBF_txt{
	width:55%;
	padding-top:0;
}

#glassesKids .conBF_txt .midashi{
	font-size:2.4rem;
	font-weight: 500;
	margin-bottom: 40px;
}

#glassesKids .conBF_txt .midashi span{
	font-weight: bold;
	background: linear-gradient(transparent 70%, #FFEA3A 70%);
	font-size: 1.3em;	
}

@media only screen and (max-width: 768px) {
	#glassesKids .conBF_txt .midashi{
		font-size:2rem;
	}

	#glassesKids .conBF_txt .midashi span{
		font-size: 1.3em;	
	}
}



#glassesKids .conBF_img{
	width:40%;
	text-align:right;
}
#glassesKids .conBF_img img{
	margin:0 0 0 auto;
	width:100%;
	max-width:400px;
}


@media only screen and (max-width: 768px) {
	#glassesKids .conBF_txt{
		width:100%;
	}
	#glassesKids .conBF_img{
		width:100%;
		padding-top:35px;
		text-align:center;
	}
	#glassesKids .conBF_img img{
		margin:0 auto;
	}
}

#glassesKids .conBlkFlex p#midashi{
	font-size:1.26em;
	font-weight:bold;
	padding-bottom:40px;
	color:#0060bf;
	width:100%;
	text-align:center;
}

@media only screen and (max-width: 768px) {
	#glassesKids .conBlkFlex p#midashi{
		text-align:left;
	}

}




/**********
 glassesAnshin
**********/
#glassesAnshin{
	width: 100%;
	padding:40px 0;
	margin-top: 30px;
}

#glassesAnshin .contentInner{
	max-width: 1000px;
}

#glassesAnshin .contentInner > div{
	border-radius: 12px;
	border: 4px solid #00AFDD;
	background: #fff;
	width: 29%;
}

#glassesAnshin .contentInner > div > div{
	padding: 18px 30px;
}

#glassesAnshin .contentInner > div > div p{
	font-size: 2.4rem;
	line-height: 1.5;
	font-weight: 600;
	color: #00AFDD;
	margin-bottom: 15px;
	text-align: center;
}

@media only screen and (max-width: 768px) {
	#glassesAnshin{
		padding:20px 0 0 0;
	}
	#glassesAnshin .contentInner > div{
		width: 100%;
		margin-bottom: 30px;
	}
	
	#glassesAnshin .contentInner > div:last-of-type{
		margin-bottom: 0;
	}
}


/**********
 glassesAnshinComment"
**********/
#glassesAnshinComment{
	padding-top: 40px;
}

#glassesAnshinComment div:first-of-type{
	order:2;
	width: 58%;
}

#glassesAnshinComment div:first-of-type p{
	padding-bottom: 10px;
}

#glassesAnshinComment div:first-of-type .midashi{
	font-size: 3rem;
	font-weight: 600;
	margin-bottom: 20px;
}


#glassesAnshinComment div:last-of-type{
	order: 1;
	width: 37%;
	text-align: center;
}

#glassesAnshinComment div:last-of-type img{
	width: 100%;
	max-width: 320px;
	margin: 10px auto 0;
}

@media only screen and (max-width: 768px) {
	#glassesAnshinComment {
		padding-top: 60px;
	}
	#glassesAnshinComment div:first-of-type{
		order:1;
		width: 100%;
		padding-bottom: 20px;
	}
	
	#glassesAnshinComment div:first-of-type .midashi{
		text-align: center;
	}
	
	#glassesAnshinComment div:last-of-type{
		order: 2;
		width: 100%;
	}
	#glassesAnshinComment div:first-of-type .midashi{
		font-size: 2.2rem;
	}

}


/**********
 shidou
**********/
#shidou{
	margin: 60px 0 90px;
}
#shidou h3{
	width: 100%;
	padding: 25px 0;
	position: relative;
	background: #0FA5B5;
	color: #fff;
	text-align: center;
	margin-bottom: 80px;
}

#shidou h3:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 30px solid transparent;
  border-top: 30px solid #0FA5B5;
}

#shidou h3 p{
	display: block;
	width: 90%;
	font-size: 2.6rem;
	font-weight: bold;
	margin: 0 auto;
	padding: 0;
}

#shidou .midashi{
	color: #00818E;
	font-size: 2.6rem;
	font-weight: 500;
	margin-bottom: 30px;
}

#shidou .contentInner > div:first-of-type{
	width: 55%;
}

#shidou .contentInner > div:last-of-type{
	width: 30%;
	text-align: center;
}

#shidou .contentInner > div:last-of-type img{
	width:100%;
	max-width: 300px;
	margin: 0 auto;
}

@media only screen and (max-width: 768px) {
	#shidou .contentInner > div:first-of-type{
		width: 100%;
	}

	#shidou .contentInner > div:last-of-type{
		width: 100%;
		padding-top: 30px;
	}

	
}




/**********
 campaignInner
**********/

#campaignNavi{
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	display: block;
}

#campaignNavi #pageNavi{
	margin-bottom: 0;
	padding-bottom: 0;
}

#campaignNavi #pageNavi a{
	width:48%;
	max-width:580px;
    margin-bottom: 20px;
	font-size:1.1em;
}

#campaignNavi #pageNavi a p{
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 1.2em;
}

#campaignNavi #pageNavi a:nth-child(4){
	background-image: linear-gradient(to right, rgba(89,178,112,1) 50%, rgba(39,141,30,1) 50%);
}

#campaignNavi #pageNavi a:nth-child(5){
	background-image: linear-gradient(to right, rgba(46,49,143,1) 50%, rgba(20,20,100,1) 50%);
}

#campaignNavi #pageNavi a#heardlens{
	background-image: linear-gradient(to right, rgba(80,168,14,1) 50%, rgba(56,133,0,1) 50%);
}

#campaignNavi #pageNavi a#mels{
	background-image: linear-gradient(to right, rgba(234,134,159,1) 50%, rgba(229,135,122,1) 50%);
}


@media only screen and (max-width: 768px) {
	#campaignNavi #pageNavi{
		display: block;
	}
	#campaignNavi #pageNavi a{
		width:100%;
		max-width:3100%;
		margin:0 0 25px 0;
	}
	#campaignNavi #pageNavi a p:after{
		content: '';
		display: inline-block;
		width: 22px;
		height: 14px;
		margin-top:-7px;
		right:10px;
		background-image: url(../img/moreLink_arrow_on.png);
		background-size: contain;
		vertical-align: middle;
	}
	
}




.campaignInner{
	border-top: 2px solid #0085d0;
	padding-top: 10px;
	margin-top: 100px;
}


.campaignInner h3{
	position: relative;
	padding-top: 50px;
	padding-bottom: 50px;
	font-size: 2em;
	text-align: center;
}

.campaignInner h3 span {
	position: relative;
	z-index: 2;
}

.campaignInner h3::before {
	content: attr(data-en);
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(180,227,255,0.4);
	font-size: 2.6em;
}


@media only screen and (max-width: 768px) {
	.campaignInner h3{
		padding-top: 40px;
	}

	.campaignInner h3::before {
		top: 0px;
		left: 50%;
		font-size: 2em;
	}
	
	#subscriptions h3{
		padding-top: 40px;
	}

	#subscriptions h3::before {
		top: 16px;
		left: 50%;
		font-size: 1.2em;
	}

}


/** camBlk **/
.campaignInner .camBlk{
	border-bottom: 1px solid #ddd;
	padding-bottom: 50px;
	margin-bottom: 50px;
}

.campaignInner .camBlk:last-of-type{
	border-bottom: none;
	margin-bottom: 0;
}

.campaignInner .camBlk img{
	width: 100%;
	margin: 0 auto;
	display: block;
}

.campaignInner .camBlk .camBlk_txt{
	padding-top: 30px;
}

#campaign .camBlk h4{
	font-weight:bold;
	font-size: 1.4em;
	border-left: solid 5px #0085d0;
	margin: 0 auto 40px;
	padding: 0 0 0 10px;
}


/**********
 subscriptions
***********/
#subscriptions h4{
	position: relative;
	margin: 1.9em 0 3em;
	padding: 7px 10px;
	background: #0085d0;
	border-radius: 16px;
	color: #fff;
	text-align: center;
	font-size: 1.6em;
}

#subscriptions h4:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #0085d0;
}

#subscriptions h4 p {
  margin: 0;
  padding: 10px;
}

#subscriptions h5{
	font-size:2.6rem;
	text-align:center;
	margin-bottom:45px;
	font-weight:bold;
}

#subscriptions h5 span{
	padding-bottom:3px;
	border-bottom:5px solid #00a2d5;
	line-height:1.8;
}


#subscriptions h6{
	font-weight:bold;
	font-size: 1.4em;
	border-left: solid 5px #0085d0;
	margin: 0 auto 40px;
	padding: 0 0 0 10px;
}

#subscriptions > .camBlk{
	border: none;
	margin-bottom: 0;
}

#subscriptions > .camBlk .camBlkInner{
	padding-top: 50px;
	
}



#subscriptions #pageNavi_subs{
	padding-bottom: 0;
	max-width: 900px;
	margin: 0 auto 0;
	padding-top: 50px;
}

#subscriptions #pageNavi_subs a{
	background-position: 0 0;
	background-size: 200% auto;
	transition: 0.5s;
	display:block;
	text-align:center;
	text-decoration:none;
	color: #fff;
	width:48%;
	max-width:580px;
    margin-bottom: 20px;
	font-size:1em;
}

#subscriptions #pageNavi_subs a:hover{
	background-position: -100% 0;
}

#subscriptions #pageNavi_subs a p{
	display:block;
	padding:14px;
	position:relative;
	text-align:left;
	
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 1.2em;
}

#subscriptions #pageNavi_subs a p:after{
	content:url(../img/moreLink_arrow_on.png);
	position: absolute;
	top: 50%;
	right: 20px;
	margin-top: -10px;
}


#subscriptions #pageNavi_subs a#navi_jj{
	background-image: linear-gradient(to right, rgba(80,168,14,1) 50%, rgba(56,133,0,1) 50%);
}

#subscriptions #pageNavi_subs a#navi_menicon{
	background-image: linear-gradient(to right, rgba(234,134,159,1) 50%, rgba(229,135,122,1) 50%);
}


@media only screen and (max-width: 768px) {
	#subscriptions #pageNavi_subs{
		display: block;
	}
	#subscriptions #pageNavi_subs a{
		width:100%;
		max-width:3100%;
		margin:0 0 25px 0;
	}
	#subscriptions #pageNavi_subs a p:after{
		content: '';
		display: inline-block;
		width: 22px;
		height: 14px;
		margin-top:-7px;
		right:10px;
		background-image: url(../img/moreLink_arrow_on.png);
		background-size: contain;
		vertical-align: middle;
	}
	
}



#subscriptions #jj{
}

#subscriptions #jj img{
	max-width: 1050px;
}


/** mels_contact **/
#subscriptions #jj #acuvue_contact{
    padding-top: 55px;
    text-align: center;
}

#subscriptions #jj #acuvue_contact a{
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 15px auto;
}

#subscriptions #jj #acuvue_contact a img{
    width: 100%;
    max-width: 420px;
}

#subscriptions #jj #acuvue_contact span{
    display: block;
    text-align: center;
    font-size: 0.9em;
}


@media only screen and (max-width: 768px) {
    #subscriptions #jj #acuvue_contact{
        padding-top: 35px;
        text-align: left;
    }


}



/**********
 melsplan
**********/
#subscriptions #melsplan{
    padding: 0;
    background: #fff;
}


#subscriptions #melsplan img#melsplan_logo{
    width: 100%;
    max-width: 320px;
	margin-bottom: 45px;
}

#subscriptions #melsplan h3 span{
    display: block;
    padding-top: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 1.9rem;
    color: #202e4d;
}

#subscriptions #melsplan .topCom{
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    line-height: 1.7;
}

#subscriptions #melsplan .topCom p:nth-of-type(1){
    color: #0071b9;
}

@media only screen and (max-width: 768px) {
    #subscriptions #melsplan .topCom{
        text-align: left;
        font-size: 1.8rem;
    }
}





/* PC・大型タブレット：769px～1050px */
@media only screen and (min-width: 769px) and (max-width: 1050px) {
/**@media only screen and (min-width: 769px) and (max-width: 1100px) {**/

/**********
 productsNavi
**********/
/** productsNavi **/
#productsNavi{
	width:96%;
	max-width:1200px;
	margin:0 auto;
	padding-top:50px;
}

#productsNavi a{
	width: 30%;
}




}


/* PC向け：1050px以上で固定 */
@media only screen and (min-width: 1051px) {


/**********
 productsNavi
**********/
/** productsNavi **/
#productsNavi{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding-top:50px;
}

#productsNavi a{
	width: 30%;
}




}

@media print {

/**********
 productsNavi
**********/
/** productsNavi **/
#productsNavi{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding-top:50px;
}

#productsNavi a{
	width: 30%;
}


}



