@charset "utf-8";
/* ---------------------------------------------------
   File: service_visit.css
   Version: 1.0.0
   Author: https://flowlab.co.jp

   (c)2007-2019 Flowlab inc. All Rights Reserved.
--------------------------------------------------- */



/* ===========================================================================================================================================

   WIDE DESKTOP LAYOUT

=========================================================================================================================================== */
#container {
	padding-top: 269px;
}

/* ====================================================
		h1
==================================================== */
#main .headLine01 {
	margin-bottom: 68px;
	font-weight: 500;
}
#main .headLine01 .text {
	padding-bottom: 12px;
	font-weight: 500;
	border-width: 3px;
	letter-spacing: 0.5px;
}

/*------------------------------------------------------------
	Service Box
------------------------------------------------------------*/
.serviceBox {
  padding-bottom: 80px;
}
#main .serviceBox small {
  display: block;
  font-size: 0.8em;
  font-weight: 400;
}


/* ====================================================
		
==================================================== */
#main .listUl li {
	margin-right: 3.65%;
	width: 30.9%;
	float: left;
}
#main .listUl li a:hover {
	opacity: 0.7;
}
#main .listUl li:nth-child(3n) {
	margin-right: 0;
}
#main .listUl li .image {
	margin-bottom: 25px;
}
#main .listUl .title {
	margin: 0 27px 13px;
	font-size: 2.1rem;
	text-align: center;
	line-height: 1.33;
	font-weight: 500;
	letter-spacing: 1.5px;
}
#main .listUl .title .size {
	margin-bottom: 16px;
	padding-bottom: 8px;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: bold;
	border-bottom: 2px solid #000;
}
#main .listUl p {
	line-height: 1.85;
	letter-spacing: 1.5px;
}
#main .listUl .lableDl {
	margin-top: 19px;
	padding-top: 16px;
	letter-spacing: 1.5px;
	font-weight: normal;
	font-size: 1.3rem;
	border-top: 1px solid #e4e4e4;
}
#main .listUl .lableDl dt {
	float: left;
	font-weight: normal;
}
#main .listUl .lableDl dd {
	padding-left: 5.5em;
}


/* ====================================================
		
==================================================== */
#main .brandBox {
	margin-bottom: 149px;
}


/* ====================================================
		
==================================================== */
#main .fairBox .listUl .image {
	margin-bottom: 19px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#main .fairBox .listUl .image:after {
	content: "";
	padding-bottom: 74%;
	display: block;
}
#main .fairBox .listUl .image img {
	display: none;
}
#main .fairBox {
	margin-bottom: 150px;
}


/* ====================================================
		
==================================================== */
#main .eyeglasses .listUl {
	margin-top: -46px;
}
#main .eyeglasses .listUl li {
	margin: 46px 0 0 0;
	width: 48.18%;
}
#main .eyeglasses .listUl li:nth-child(2n) {
	float: right;
}


/* ====================================================
		
==================================================== */
#main .textList {
	margin: 127px 0 150px;
}
#main .textList li {
	margin-right: 0.52%;
	width: 24.61%;
	float: left;
}
#main .textList li:last-child {
	margin-right: 0;
}
#main .textList li a {
	padding: 65px 0 67px;
	display: block;
	color: #fff;
	text-align: center;
	background: url(../image_index/new/img01.jpg) no-repeat center center;
	background-size: cover;
}
#main .textList li a:hover {
	opacity: 0.7;
}
#main .textList li:nth-child(2) a {
	background-image: url(../image_index/new/img02.jpg);
}
#main .textList li:nth-child(3) a {
	background-image: url(../image_index/new/img03.jpg);
}
#main .textList li:nth-child(4) a {
	background-image: url(../image_index/new/img04.jpg);
}
#main .textList .title {
	font-size: 2.1rem;
	line-height: 1.5;
	margin-bottom: 13px;
}
#main .textList p {
	line-height: 1.75;
	letter-spacing: 1px;
	font-weight: normal;
}


/* ====================================================
		
==================================================== */
#main .historyBox .photo {
	margin-bottom: 80px;
	position: relative;
}
#main .historyBox .photo p {
	color: #fff;
	font-size: 1.3rem;
	position: absolute;
	bottom: 12px;
	right: 15px;
	letter-spacing: 1px;
}
#main .historyBox {
	margin: 0 -15px 42px;
}
#main .historyBox .widBox {
	margin: 0 auto 113px;
	max-width: 898px;
}
#main .historyBox .widBox h2 {
	margin-bottom: 23px;
	font-size: 2.4rem;
	line-height: 1.75;
	text-align: center;
	letter-spacing: 3px;
	font-weight: bold;
}
#main .historyBox .widBox p {
	line-height: 2.14;
}
#main .historyBox .imgBox .textBox {
	width: 39.1%;
	float: left;
}
#main .historyBox .imgBox .textBox p {
	line-height: 2.14;
}
#main .historyBox .imgBox .photo {
	width: 54.5%;
	float: right;
}
#main .historyBox .imgBox .photo p {
	bottom: 7px;
}
#main .historyBox .imgBox .headLine04 {
	margin-bottom: 29px;
}


/* ====================================================
		
==================================================== */
#main .serviceBox .headLine04 {
	margin-bottom: 24px;
}
#main .serviceBox .textUl li {
	margin-bottom: 9px;
	padding-left: 15px;
	position: relative;
}
#main .serviceBox .textUl li:after {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #000;
	position: absolute;
	top: 8px;
	left: 0;
	content: "";
}
#main .serviceBox .textUl li:last-child {
	margin-bottom: 80px;
}
#main .serviceBox .textUl {
	margin-bottom: 80px;
}
#main .serviceBox .imgBox {
	padding: 33px 33px;
	border: 7px solid #e4e4e4;
}
#main .serviceBox .imgBox .photo {
	width: 42.1%;
  margin-bottom: 0;
	float: right;
}
#main .serviceBox .imgBox .textBox {
	width: 52%;
	float: left;
}
#main .serviceBox .imgBox .textBox h3 {
	margin-bottom: 36px;
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: 1.5px;
}
#main .serviceBox .imgBox dl {
	padding-top: 17px;
	font-weight: 500;
	letter-spacing: 1px;
	border-top: 1px solid #e4e4e4;
}
#main .serviceBox .imgBox dt {
	float: left;
	font-weight: 500;
}
#main .serviceBox .imgBox dd {
	margin-bottom: 16px;
	padding: 0 0 16px 12em;
	border-bottom: 1px solid #e4e4e4;
}
#main .serviceBox .imgBox dd:last-child {
	margin-bottom: 0;
}



/* ===========================================================================================================================================

   TABLET

============================================================================================================================================= */
@media all and (min-width: 768px) and (max-width: 1299px) {
  
  #container {
	padding-top: 169px;
}
  
	#main .listUl .title {
		margin: 0 10px 13px;
		font-size: 1.9rem;
	}
	#main .listUl .title .size {
		padding-bottom: 3px;
	}
  
  
/* ====================================================
		
==================================================== */
	#main .textList {
		margin-top: 80px;
	}
	#main .textList li {
		margin: 15px 0 0 0;
		width: 49%;
	}
	#main .textList li:nth-child(2n) {
		float: right;
	}
	#main .textList li a {
		padding: 65px 15px 67px;
	}
}


/* ===========================================================================================================================================

   MOBILE

============================================================================================================================================= */
@media all and (max-width: 767px) {
#container {
	padding-top: 100px;
}
  
  
/* ====================================================
		Main Visual
==================================================== */
	#main .mainVisual {
		margin-bottom: 50px;
		padding: 0;
	}
	#main .mainVisual .arrowUl li {
		width: 22px;
	}
	#main .mainVisual .arrowUl li:hover {
		opacity: 1;
	}
	#main .mainVisual .imageUl li p {
		padding-right: 0;
		font-size: 2.5rem;
		letter-spacing: 2px;
	}
  
  
/* ====================================================
		
==================================================== */
	#main .listUl li {
		margin: 0 0 50px;
		width: auto;
		float: none;
	}
	#main .listUl li:last-child {
		margin-bottom: 0;
	}
	#main .headLine01 {
		margin-bottom: 50px;
	}
	#main .listUl .lableDl {
		margin-top: 8px;
		padding-top: 10px;
		font-size: 1.1rem;
	}
	#main .listUl li .image img {
		width: 100%;
	}
  
  
/* ====================================================
		Brand Box
==================================================== */
	#main .brandBox {
		margin-bottom: 75px;
	}
  
  
/* ====================================================
		
==================================================== */
	#main .listUl .title {
		margin: 0 0 13px;
		font-size: 1.8rem;
		letter-spacing: 0;
	}
  
  
/* ====================================================
		
==================================================== */
	#main .eyeglasses .listUl {
		margin-top: 0;
	}
	#main .eyeglasses .listUl li {
		margin: 0 0 50px 0;
		width: auto;
	}
	#main .eyeglasses .listUl li:last-child {
		margin-bottom: 0;
	}
  
  
/* ====================================================
		
==================================================== */
	#main .listUl p {
		letter-spacing: 0.5px;
	}
	#main .eyeglasses .listUl li:nth-child(2n) {
		float: none;
	}
  
  
/* ====================================================
		
==================================================== */
	#main .textList li {
		margin: 0 0 15px;
		width: auto;
		float: none;
	}
	#main .textList li:last-child {
		margin-bottom: 0;
	}
	#main .textList {
		margin: 60px 0 75px;
	}
  
  
/* ====================================================
		
==================================================== */
	#main .showBox {
		margin-bottom: 40px;
	}
	/*#container {
		padding-top: 53px;
	}*/
  
  
/* ====================================================
		
==================================================== */
	#main .mainVisual .slick-dots {
		margin-top: 10px;
		line-height: 1;
	}
	#main .mainVisual .slick-dots li {
		margin: 0 5px;
		width: 6px;
		height: 6px;
	}
	#main .mainVisual .slick-dots li:hover {
		background-color: #E5E5E5;
	}
	#main .mainVisual .slick-dots li.slick-active:hover {
		background-color: #000;
	}
  
  
/* ====================================================
		
==================================================== */
	#main .historyBox .photo p {
		font-size: 1rem;
	}
	#main .historyBox .widBox h2 {
		font-size: 1.8rem;
		letter-spacing: 1px;
	}
	#main .historyBox .photo {
		margin-bottom: 40px;
	}
	#main .historyBox .imgBox .textBox {
		width: auto;
		float: none;
	}
	#main .historyBox .imgBox .photo {
		width: auto;
		float: none;
	}
	#main .historyBox .widBox {
		margin-bottom: 60px;
	}
  
  
/* ====================================================
		
==================================================== */
	#main .serviceBox .textUl li::after {
		width: 5px;
		height: 5px;
		top: 7px;
	}
	#main .serviceBox .imgBox {
		padding: 20px;
		border: 3px solid #e4e4e4;
	}
	#main .serviceBox .imgBox .photo {
		margin-bottom: 20px;
	}
	#main .serviceBox .imgBox .photo,
	#main .serviceBox .imgBox .textBox {
		width: auto;
		float: none;
	}
	#main .serviceBox .imgBox .textBox h3 {
		margin-bottom: 20px;
	}
	#main .serviceBox .imgBox dt {
		margin-bottom: 10px;
		float: none;
		font-weight: bold;
	}
	#main .serviceBox .imgBox dd {
		padding: 0 0 16px 0;
	}
  
  
}