@charset "utf-8";
/*-----------------------------------------
 common.css
-----------------------------------------*/

@media screen and (max-width: 768px){
	
/* nav */

#nav {
	width: 100%;
	z-index: 200;
	text-align:left;
	position: relative;
}
ul#menu {
	position: absolute;
	width:100%;
	top:-64px;
	left:0;
	display: none;
}
ul#menu li {
	padding: 0;
}
ul#menu li a:link,
ul#menu li span.active {
	display: block;
	padding: 18px 50px 17px 10px;
}
ul#menu li a:hover {
	opacity:1;
}
ul#menu li a:link,
ul#menu li a:active,
ul#menu li a:visited,
ul#menu li a.active,
ul#menu li a:hover,
ul#menu li span.active 
 {
	border-bottom: 1px solid #fff;
	color:#fff;
	background-color:#44bae6;
	line-height:1.4;
}

ul#menu li a:hover,	
ul#menu li span.active{
	background-color:#44bae6;
}
/*	
ul#menu li.gm_greeting a:after,
ul#menu li.gm_purchase a:after,	
ul#menu li.gm_contact a:after{
    display: block;
	position:absolute;
	top:5px;
	right:5px;
    content: "";
    width: 44px;
    height: 44px;
	background: url(img/menu_link.png) 0 -88px no-repeat;
	background-size:44px 132px
}*/
#menu{
    display: none;
  }
ul#menu li{
    width: 100%;
	position: relative;
}

#toggle{
	display: block;
	width: 64px;
	position: fixed;
	position: absolute;/*ヘッダー非固定*/
	top: -173px;
	right: 0;
}
#toggle a{
    display: block;
    position: relative;
    text-decoration: none;
	width: 64px;
	height:64px;
	background:url(img/menu3_swich.png) 0px 0px no-repeat;
	background-size:64px 64px;
}
#toggle a.active{
	background:url(img/menu3_swich.png) 0px 0px no-repeat;
	background-size:64px 64px;
}
	
 ul.child{
	display: none;
}
.acMenu dt{
	width:44px;
	height:44px;
	display:block;
	position:absolute;
	top: 7px;
	right:0px;
	cursor:pointer;
    background:url(img/menu_link.png) 0px 0px no-repeat;
	background-size:44px 132px
    }
.acMenu dd{
    display:none;
    }
.acMenu dt.active{
    background:url(img/menu_link.png) 0px -44px no-repeat;
	background-size:44px 132px
    }
#menu ul.child li.cate {
	background: #999;
	color: #fff;
	text-align: left;
	padding:0.5em;
}	
#menu ul.child li a:link,
#menu ul.child li a:active,
#menu ul.child li a:visited,
#menu ul.child li a.active,
#menu ul.child li a:hover,
#menu ul.child li span.active 
 {
	background-color: #fff;
	color: #1E9CD6;
	 border-bottom: 1px solid #44BAE6;
}
#menu ul.child li a:after{
    display: block;
	position:absolute;
	top:5px;
	right:5px;
    content: "";
    width: 44px;
    height: 44px;
	background: #fff url(img/menu_link_on.png) 0 -88px no-repeat;
	background-size:44px 132px
}	

#nav #close {
	clear:both;
}
#nav #close:after {
	display: none;
}	
#nav #close a {
	display: block;
	padding: 2em;
	text-align: center;
	border-bottom: none;
}
#nav #close a:after {
	background: none;
}	
#nav #close a img {
	width: 22px;
	height: 22px;
}	
	
}

@media screen and (max-width: 768px){
	
/* header */
#headArea {
	position: relative;
	top: 0;
	left: 0;
	height:172px;
	border-bottom: 4px solid #44bae6;
	margin: 0 0 1px;
}
#headArea #rogo {	
	position:absolute;
	top:12px;
	left:10px;
	text-align: left;
	width: 200px;
}

ul#head_menu {
	display: block;
	position: absolute;
	top: 64px;
	width: 100%;
	line-height: 1;
	border-top: #44BAE6 1px solid;
}
ul#head_menu li a {
	font-size: 16px;
	font-weight: bold;
	color: #44bae6;
	text-decoration: none;
	display: block;
	height: 44px;
	line-height: 44px;
}
ul#head_menu li em {
	background: url(../img/common/head/icon_access.png) no-repeat left center;
	background-size: 24px 24px;
	padding:9px 0 8px 30px;
}	
	
/* head gm */
ul#head_gm {
	display: table;
	position: absolute;
	top: 109px;
	width: 100%;
}	
ul#head_gm li {
	display: table-cell;
	width: 50%;
	vertical-align: top;

}
ul#head_gm li a,ul#head_gm li .active {
	padding: 0;
	font-size: 13px;
	font-weight: bold;
	display: table-cell;
	vertical-align: middle;
	line-height: 1.4;
	height: 59px;
}	
ul#head_gm li a {
	background: #e5e5e5;
	color: #6a6a6a;
	text-decoration: none;	
}
ul#head_gm li .active {
	background: #44BAE6;
	color: #fff;
	position: relative;	
}

/* crumb Area */
#crumbArea {
	font-size: 12px;
}	
#crumbArea .inner {
	padding:0 4%;
	width: 100%;
	margin: 0 auto;	
}	

/* Contents Area */
.contentArea {
	margin-top: 0!important;
}
.contentArea .inner {
	padding: 6% 4%;
	font-size: 14px;
}
.contentArea section {
	margin: 0 0 12%;
}	
/* Footer */
#footer .inner {
	padding:0 0 4%;
}
.foot_nav {
	display: none;
}
small {
	text-align: center;
	padding: 6% 2% ;
	font-size: 12px;
}
/* page top */
#page-top{
}

#footer .add {
	width: 100%;
	float: none;
	font-size: 13px;
	padding: 6% 4%;
}
#footer .add em {
	font-size: 14px;
	margin: 0 20% 0.5em;
}		
.pc {
	display: none !important;	
}
.sp {
	display: inline !important;
}

}



/*-----------------------------------------
 contents_common.css
-----------------------------------------*/
@media screen and (max-width: 768px){
/* Margin */
section > p {
	margin: 0 0 6%;
}	
	
/* Title */
.ttl_01 {
	font-size: 16px;
}
	
.ttl_02 em {
	font-size: 16px;
}
.ttl_03 {
	font-size: 14px;
}
.ttl_04 em {
	font-size: 14px;
}
.ttl_08 {
	font-size: 18px;
}	
	
/* Table */
table.type1 {
 	font-size: 14px;
}
table.type1 th,
table.type1 td {
	padding:0.2em 1em 0.1em;
}
table.join1 td {
	width: auto;
}	
	
table.type2 {
 	font-size: 12px;
}	
	
/* ----------------------------------------------------------------
   Others
----------------------------------------------------------------- */
.pt60{padding-top: 12%!important;}
.mb10{margin-bottom: 2%!important;}
.mb20{margin-bottom: 4%!important;}
.mb30{margin-bottom: 6%!important;}
.mb40{margin-bottom: 8%!important;}
.mb50{margin-bottom: 10%!important;}
.mb60{margin-bottom: 12%!important;}	
}

/*-----------------------------------------
 layout.css
-----------------------------------------*/
@media screen and (max-width: 768px){
/* keyTtl */
.keyTtl {
	height: 140px;
	background-position: -80px 0!important;
	background-size: 943px 140px!important;
}
.keyTtl h1,.keyTtl p {
	font-size: 16px;
	text-align: left;
	padding: 0 4%;
}
	/*
.keyTtl.cate_greeting {
	background: url(../img/greeting/key_bg.jpg) no-repeat center left;
	background-size: 752px 115px
}
.keyTtl.cate_contactlens {
	background: url(../img/contactlens/key_bg.jpg) no-repeat center left;
	background-size: 752px 115px
}*/	

.contentArea.wide_bg1 .inner .sp {
	background: #fff;
	padding: 2px 0;
	display: block!important;
}
.contentArea.wide_bg2 .inner {
}
	
/* layout */
.tableBlock.break {
	display: block;
	margin-bottom: 12%;
}
.tableBlock.break > .box,
.tableBlock.break > li{
	display: block;
	margin-bottom: 12%;
}
.tableBlock.break > .box:last-child,
.tableBlock.break > li:last-child{
	margin-bottom: 0;
}	
	
/* top */
.tableBlock.top1 {
	width: 100%;
}
.tableBlock .box.top1L {
	padding-right: 4%;
}	
.tableBlock .box.top1L img {
	width: 46%;
	float: right;
	margin: 0 0 4% 4%
}	
	
.tableBlock .box.top1R {
	width: 50%;
	vertical-align: middle;
	display: none;
}
	
.tableBlock.top2 {
	margin: 0;
	display: block;
}
.tableBlock.top2 .box {
	text-align: center;
	display: block;
	margin: 0 0 1em;
	padding: 0;
}		

.tableBlock.top3 {
	width: 100%;
}
	
/* top Bnr */
.top-bnr {
	border: 4px solid #44BAE6;
	border-radius: 8px;
	padding: 4%;
}
.top-bnr:after {
    border-top: 8px solid transparent;
    border-right: 8px solid #44BAE6;
    border-bottom: 8px solid #44BAE6;
    border-left: 8px solid transparent;

}
.top-bnr span {
	display: table-cell;
	vertical-align: middle;
	height: 80px;
	text-align: center;
}
.top-bnr span:first-child {
	width: 34%;	
}
.top-bnr span:first-child img {
	max-height: 70px;
}
.top-bnr span:last-child {
	font-size: 15px;
}
.top-bnr span p {
	padding: 0.3em ;
	min-width: 9em;
	line-height: 1.2;
}	
.top-bnr.jishu {
	border: 4px solid #e6ba44;
}
.top-bnr.school {
	border: 4px solid #77b866;
}
.top-bnr.keizoku {
	border: 4px solid #6641ae;
}
.top-bnr.tekisei {
	border: 4px solid #55bb7b;
}
.centerSingle a {
	width: 100%;
	margin: 0;
}
	
/* membership top */
.tableBlock.membership1 {
	margin: 0 0 6%;
}	
.tableBlock.membership1 .box:first-child {
	width: 100%;
	display: block;	
	padding: 6% 0;
}
.tableBlock.membership1 .box:last-child {
	width: 100%;
	padding-left: 0;
	display: block;	
}
.tableBlock.membership1 .block:first-child h2 {
	font-size: 16px;
}
.tableBlock.membership1 iframe {
	height: 140px;
}

/* 新着情報 */
.hiduke {
	font-size:14px;
	text-align:left;
	padding: 4% 2%;
}
.hiduke dd a {
color: #000;
	text-decoration: none;
}	
.hiduke dt {
	float:none;
	margin:0 0 0.5em;
	font-size: 12px;
}
.hiduke dd {
	margin:0 0 1.5em;
}

.tableBlock.membership1 .login {
	border: 0;
	padding: 0;
}
.tableBlock.membership1 .login h2 {
	font-size: 16px;
	padding: 6% 0 4%;
	margin: 0;
}
.tableBlock.membership1 .login h2 em {
	font-size: 12px;
	margin: 2% 0 0;
}
.tableBlock.membership1 .login ul {	
	padding: 4% 0;
	display: table;
	table-layout: fixed;
	width: 100%
}
.tableBlock.membership1 .login li {
	display: table-cell;
	padding: 0 1% 0 0;
	vertical-align: top;
}
.tableBlock.membership1 .login li:last-child {
	padding: 0 0 0 1%;
}	
.tableBlock.membership1 .login span {
	display: table;
	width: 100%;
	}	
.tableBlock.membership1 .login a {
	display: table-cell;
	font-size: 16px;
	height: auto;
	line-height: 1;
	padding: 1em;
	vertical-align: middle;
	}
.tableBlock.membership1 .login a:last-child {
	font-size: 16px;
}
.tableBlock.membership1 .login p {
	font-size: 14px;
}
	
	
.contentArea.wide_bg2 .tableBlock.top2 {
	padding: 0;
}
/*.contentArea.wide_bg2 .tableBlock.top2 .box {
	margin: 0 0 2px;
}*/	

/* greeting */
.tableBlock.greeting {
	display: block;
}
.tableBlock.greeting .box {
	margin: 0 0 3em;
	display: block;
}	
.tableBlock.greeting .box.left1 {
	width: 100%;
	text-align: center;
	margin: 0 0 2em;
}

.tableBlock.access {
	margin: 0;
	width: 100%;
	display: block;
}	
.tableBlock.access .box {
	margin: 0 0 3em;
	display: block;
}	
.tableBlock.access .box.right1 {
	margin: 0;
}
	
/* contactlens */
.contactlens2 .box:first-child,
.safely1 .box:first-child,
.disease1 .box:first-child {
	padding-right: 8%;
}
.contactlens2 .box:last-child,
.contactlens2 .box.type2:last-child,
.safely1 .box:last-child,
.disease1 .box:last-child {
	width: 42%;
	vertical-align: top;
}
.tableBlock.c2 div,.tableBlock.c3 div {
	width: 100%;
	display: block;
	margin:0 0 30px;
	padding: 10px 0 0;
}
.tableBlock.c2 div:first-child img {
	margin-bottom: 0;
}	
	
.disease1 .box:first-child {
	padding-right: 4%;
}	
	
/* purchase */
.purchase1 {
	padding: 4%;
	margin-bottom: 12%;
}
.purchase1 dt{
	margin: 0 0 4%;
}
.purchase1 dt em{
	font-size: 16px;
	width: 24px;
	height: 24px;
	line-height: 24px;
}
.purchase1 dt h4{
	padding-left: 0.5em;
}
.purchase1 dd {
	border-left: none;
	margin-left: 0;
	margin-bottom: 4%;
	padding-bottom: 10%;
	padding-left: 0;
}
.purchase1 dd.last {
	border-left: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.purchase1 dd .img {
	margin-top: 4%;
}
	
/* safely */
.disease1 .cap {
	font-size: 12px;
	line-height: 1.2;
	text-align: left;
}
	
.poster .box:first-child {
	padding-right: 0;
	margin-bottom: 2%;
}
.poster .box:last-child {
	padding-left: 0;
}
.poster2 .box:first-child {
	padding-right: 0;
}
.poster2 .box:last-child {
	padding-left: 0;
}
	
/* contactlensday */
.cate_contactlensday .main_ttl {
	text-align: center;
	margin: 10% 0;
}
.contactlensday1 .box:first-child {
	padding-right: 4%;
}
.contactlensday1 .box:last-child {
	width: 35%;
}	
.contactlensday2 .box:first-child {
	padding-right: 0;
	margin: 0 0 6%;
}
.contactlensday2 .box:last-child {
	text-align: center;
	width: 100%;
}
.contactlensday2 .profile {
	margin: 0 auto;
}
	
.contactlensday3 .box {
	margin-bottom: 6%;
}
.contactlensday3 p{
	font-size: 12px;
	white-space: normal;
}
.contactlensday3 .block1 {
	float: none;
	width: 100%;	
}
.contactlensday3 .block2 {
	float: none;	
}
.contactlensday3 .block3 {
	clear: both;
}
.contactlensday3 img.left {
	margin-right: 0;
	margin-bottom: 2%;
}
.contactlensday3 img.right {
	margin-left: 0;
}	
	
/* management */
.soshikizu {
	padding: 4%;
	margin: 0;
}
.soshikizu img {
	margin: 0 0 6%;
}

.yakuin table {
	width: 100%;
	margin: 0;
}
	
.tekigou p{
	padding: 4%;
	width: 100%;
	margin: 6% auto 0;
}
	
.volun .box:first-child{
	width: 100%;
}
.volun .box:last-child{
	padding-left: 0;
}
	
/* access */
.access1 .box{
	margin: 0;
	width: 100%;
}
	
/* information */
.information1 {
	border-top: 2px solid #009944;
	padding: 8% 0;
	margin: 0;
}
.information1 .box:first-child,.information1 .box:last-child {
	width: 100%;
	display: block;
}
.information1 .box:last-child .btn01 {
	width: 100%;
	margin: 4% 0 0;
}
.information1:last-child {
	padding-bottom: 0;
}
	
	
/* retail */
.retail1 .box:first-child {
	padding-right: 0;
}
.retail1 .box:last-child {
	padding-left: 0;
}
	
/* informationprovision */
.informationprovision1 {
	padding: 4%;
	width: 100%;
}
.informationprovision1 dt {
	font-size: 16px;
}
.informationprovision1 dd {
	display: block;
	padding-right: 0;
}
	
/* clios */
.clios1 .box:first-child {
	padding-right: 0;
	margin-bottom: 4%;
}
.clios1 .box:last-child {
	padding-left: 0;
}
.clios1 h2 {
	font-size: 14px;
}
.clios1 ul {
	padding: 4%;
}
.clios1 li {
	display: block;
}	
.clios1 a {
	font-size: 14px;
}
	
.clios2 dt {
	font-size: 14px;
	width: 100%;
}
.clios2 dd {
	font-size: 14px;
}	
	
.clios3 dt {
	font-size: 14px;
	width: 100%;
	padding: 0.5em;
}
p.clios3 {
	width: 100%;
	margin:0 auto 1.5em;
}
.clios3 dd {
	font-size: 14px;
	width: 100%;
	padding: 0.5em;
}
.new-clios-area {
	margin: 0 0 50px;
}
.clios-contact{
	width: 100%;
}
.clios-contact th em{
	width: 100%;
}
.clios-contact th,.clios-contact td{
	display: block;
}
.clios-contact td{
	padding: 10px 4%;
}
.clios-contact li:first-child{
	margin-bottom: 10px;
}


.login-box {
	border: 1px solid #32b16b;
	padding: 15px 4%;
	font-size: 15px;
	display:block;
}
.login-box .btn {
	display:block;
}
.login-box a.button,.login-box a.button.v2 {
	font-size: 16px;
	width: 100%;
}
.login-box a.button.v2 {
	margin-top: 10px;
}
	

/* buttan */
a.arrow01 {
	display: block;
}	
	
a.btn01 {
	width: 100%;
	font-size: 16px;
	background: #f39800 url(../img/common/arrow2.png) no-repeat center right 10px;
	background-size: 12px 20px;
	padding:1.5em 4%;
}
a.btn02 {
	font-size: 16px;
}	
a.btn02.voln-m {
	width: 100%;
}
.cate_clios a.btn02 {
	width: 100%;
}	
a.btn05 {
	font-size: 16px;
	padding:1em;
	width: 100%;
}	
a.btn05 .file {
	width: 30px;
	margin-right: 4%;
}
a.btn06 {
	font-size: 18px;
	width: 100%;
}
	
.monster1 {
	padding: 4% 4% 8%;
}
.monster1 .flex {
	display:block;
}
.monster1 .flex .col-2 {
	width: 70%;
	margin: 0 auto 4%;
	text-align: center;
}
}