@charset "UTF-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
    box-sizing:border-box
}

a, address, body, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, html, img, input, li, p, span, table ,th, td, tr, ul {
    border:none
}

article, aside, figure, footer, header, main, nav, section {
    font-size: 100%;
    margin: 0;
    padding: 0;
    display:block
}
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted #000;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}

input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  }

.clear {clear: both;}
.clearfix {min-height:1px}
.clearfix:after {content:".";display:block;clear:both;height:0;visibility:hidden}

/* reset */
/*ul {margin: 0; padding: 0;}*/
li {
  list-style: none
}

html {
	font-size: 62.5%;
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	height: 100%;	
	margin: 0;
	font-family: "Hiragino Kaku Gothic ProN W3", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	font-size: 1.4rem;
	line-height: 1.5;
	color: var(--text-color);
}
@media screen and (max-width:600px){
	body {font-size: 1.3rem;}
	
}

a{ color: var(--link-color); text-decoration: none;}
a:hover { color: var(--link-hover-color);}
a:visited{ color: var(--link-visited-color);}

/* two tone */
main a{color: var(--main-link-color); text-decoration: none;}
main a:hover{color: var(--main-hover-color); text-decoration: none;}
.link__more a{color: var(--main-hover-color); text-decoration: none;}

img {max-width: 100%; height: auto; vertical-align: bottom;}

/* align */
.aC {text-align: center;}
.aL {text-align: left;}
.aR {text-align: right;}

/* on/off */
.pc {display: block;}
.sp {display: none;}
@media screen and (max-width:600px){
.pc {display: none;}
.sp {display: block;}	
}

.wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
}

header {
	background: var(--header-bg-color);
	color: var(--header-txt-color);
	position: fixed;
	width: 100%;
	z-index: 100;
}
main {
	flex: 1;
	background: var(--main-bg-color);
	color: var(--main-txt-color);
	padding-top:100px;/* header固定分 */
	padding-bottom: 60px;
}
footer {
	border-top:1px solid var(--border-color);
	background: var(--footer-bg-color);
	color: var(--footer-txt-color);
}

.copyright__wrap {
	padding: 0.5em;
	background: var(--footer-copy-bg-color);
	color: var(--footer-copy-txt-color);
}

/* --------------------------------- Header 
*/
header h1 {color: var(--header-txt-color);}
header h1 a{color: var(--header-link-color) !important;}
header h1 img{width:200px; height: 75px; vertical-align: top;}
.header__inner {
	max-width:1030px;
	 padding: 0 15px;
	margin-left: auto; 
	margin-right: auto;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	height: 100px;
}
@media screen and (max-width:1000px){
	header h1 img{width:140px; height: 53px; vertical-align: top;}
}
@media screen and (max-width:767px){
	.header__inner {
		width:100%;
		height: 60px;
	}
	main {padding-top:60px;}
	header h1 {font-size: 6vw; line-height: 1; }
	header h1 img{height:50px; width: auto;}
}

/* --------------------------------- Layout 
*/

.inner {width:1030px; margin-left: auto; margin-right: auto; padding: 0 15px;}
@media screen and (max-width:1029px){
	.inner {width:100%;}
}


/* --------------------------------- navi 
*/
div.logo_comment {
    width:760px;
    overflow-wrap:break-word;
}
.nav__float {
    float: right;
}
div.logo_comment div {
    margin-left:10px;
}

.nav__list {
	display: flex;
	flex-flow: row wrap;
}
.nav__list li {margin: 5px 10px;}
.nav__list li a {position: relative; color: var(--header-link-color)}
.nav__list li a:hover {color:var(--header-hover-color)}
.nav__list li a::after {
	position: absolute;
      bottom: -4px;
      left: 0;
      content: '';
      width: 100%;
      height: 1px;
      background: var(--header-hover-color);
      transform: scale(0, 1);
      transform-origin: center top;
      transition: transform .3s;
}
.nav__list li a:hover::after {
      transform: scale(1, 1);
      }

.nav__list li.current a{color:var(--header-hover-color) }
.nav__list li.current a::after{ transform: scale(1, 1);}

@media screen and (max-width:1000px){
	.nav__list li {margin: 10px; font-size: 1.1rem}
}
@media screen and (max-width:767px){
.nav__list {
	display: flex;
	flex-flow: column;
	justify-content: center;
	padding: 15px;
}
	.nav__list a {display: block; padding: 15px 5px;}
	.nav__list li a::after { transform: scale(1, 1); height: 0;}
	.nav__list li a:hover::after {
      }	
	.nav__list li {margin: 0px; padding: 0; border-bottom: 1px solid var(--border-color); font-size: 1.6rem}
	.nav__list li:first-child { border-top:1px solid var(--border-color);}
	.nav__list li:last-child {margin-bottom: 100px}
}

/* --------------------------------- MV
*/

.mv__wrap {
	width: 100%;
	height: 620px;
	/*background-image: url("../img/mv_img.jpg");*/
/*
	background-position: center center;
	background-repeat: no-repeat;
	background-origin: border-box;
	background-size: 1800px auto;
*/
	margin-bottom: 40px;

    position: relative;
    overflow: hidden;
}
.top_img1,.top_img2,.top_img3 {
    width: 100%;
    height: 620px;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-size: 1800px auto;
    animation: image-switch-animation 15s infinite;
    z-index: 0;
    opacity: 0;
}
@keyframes image-switch-animation {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    35% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.top_img1 {
    animation-delay: 0s;
}
.top_img2 {
    animation-delay: 5s;
}
.top_img3 {
    animation-delay: 10s;
}
/**/
.mv__wrap.sec,.mv__wrap.sec .top_img1,.mv__wrap.sec .top_img2,.mv__wrap.sec .top_img3 {
	height: 310px;
}

@media screen and (max-width:600px){
	.mv__wrap {height: 240px; background-size:cover;}
	.mv__wrap.sec {
	height: 140px;
		 background-size:cover;
	}
}

/* --------------------------------- TOP New Arrival
*/
.newArrival__list {
	display: flex;
	flex-flow: row wrap;
}
.newArrival__list li {
	width:22%;
	margin-right: 4%;
	margin-bottom: 20px;
}
.newArrival__list li:nth-child(4n){
	margin-right: 0;
}

.photo__wrap { margin-bottom: 10px;}
/*.photo__wrap img{
  display: block;
  width: 100%;
  height: 165px;
  object-fit: contain;
	transition: 0.3s;
}*/
.photo__wrap img:hover {opacity: 0.8; }
.newA__time {font-size: 1.3rem; margin-top: 0.5em;}

@media screen and (max-width:600px){
.newArrival__list li {
	width:48%;
	margin-right: 4%;
	margin-bottom: 20px;
	}
	.newArrival__list li:nth-child(2n){
	margin-right: 0;
	}
	/*.photo__wrap img{
  display: block;
  width: 100%;
  height: 33.4vw;
  object-fit: contain;
	transition: 0.3s;
	}*/
}

/* --------------------------------- TOP News
*/

.blog .news__box {border-top:1px dotted var(--border-color); padding: 20px 0;}
.blog .news__box:last-of-type {border-bottom:1px dotted var(--border-color);}

.news__box {padding: 10px 0;}
.news__list {
	display: flex;
	flex-flow: row nowrap;
}
.news__list dt {width:10em; margin-right: 20px; }
.news__list dd {flex: 1}
@media screen and (max-width:600px){
	.news__list {
	display: flex;
	flex-flow: column;
	}
	.news__list dt {margin-right: 0%; font-size:1.2rem; line-height: 2;}
}

/* --------------------------------- Footer SNS
*/
.sns__wrap {padding:40px 0;}
.sns__list {
	display: flex;
	justify-content: center;
}
.sns__list li {margin: 10px;}

/* --------------------------------- Footer info
*/

.footer__info__wrap {text-align: center; margin-top: 40px; margin-bottom: 60px;}
.footer__info__wrap h1 {font-size: 1.8rem; margin-bottom: 20px;}
.footer__info__wrap  {line-height: 1.8;}

.tel__wrap ul {display: flex; justify-content: center;}
.tel__wrap ul li {margin: 0 0.5em;}
@media screen and (max-width:600px){
	.tel__wrap ul {display: flex; justify-content: center; flex-flow: column;}
}

/* --------------------------------- Title
*/

h2 {font-size: 3rem; }
h2 small {font-size: 1.6rem; font-weight: normal;}
h3 {font-size: 1.5rem; }
@media screen and (max-width:600px){
	h2 {font-size: 2.2rem;}
	h2 small {font-size: 1.3rem; font-weight: normal;}
	h3 {font-size: 1.4rem;}
}

/* --------------------------------- Margin
*/

.mb5 {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.mb80 {margin-bottom: 80px;}
.mb100 {margin-bottom: 100px;}
.mb200 {margin-bottom: 200px;}

.mb1em {margin-bottom: 1em;}
.mb2em {margin-bottom: 2em;}

.mb1rem {margin-bottom: 1rem;}
.mb2rem {margin-bottom: 2rem;}

/* --------------------------------- SmartPhone
*/
@media screen and (max-width:767px){

	
	header nav {
	position: fixed;
    top: 60px;
    right: 0px;
    width: 100%;
	height: 100vh;
    background: var(--header-bg-color);
	z-index: 5;
    transition: all 0.3s ease;
    opacity: 0;
    display: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  header nav.active {
    opacity: 1;
  }
  header nav.block {
    display: block;
  }

	header #menu-button {
    position: absolute;
    top: 10px;
    right: 0px;
    width: 45px;
    height: 35px;
	display: block;
  }
  header #menu-button > div {
    width: 25px;
    height: 1px;
    background: var(--header-link-color);
    position: absolute;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  header #menu-button > div:nth-child(1) {
    top: 25%;
    left: 6px;
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }
  header #menu-button > div:nth-child(2) {
    top: 50%;
    left: 6px;
  }
  header #menu-button > div:nth-child(3) {
    top: 75%;
    left: 6px;
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }
  header #menu-button.active > div:nth-child(1) {
    top: 50%;
    -webkit-transform: translate(-5%, -50%) rotate(45deg);
    -moz-transform: translate(-5%, -50%) rotate(45deg);
    -ms-transform: translate(-5%, -50%) rotate(45deg);
    -o-transform: translate(-5%, -50%) rotate(45deg);
    transform: translate(-5%, -50%) rotate(45deg);
  }
  header #menu-button.active > div:nth-child(2) {
    opacity: 0;
  }
  header #menu-button.active > div:nth-child(3) {
    top: 50%;
    -webkit-transform: translate(-5%, -50%) rotate(-45deg);
    -moz-transform: translate(-5%, -50%) rotate(-45deg);
    -ms-transform: translate(-5%, -50%) rotate(-45deg);
    -o-transform: translate(-5%, -50%) rotate(-45deg);
    transform: translate(-5%, -50%) rotate(-45deg);
  }	
	
}

/* --------------------------------- SHOP
*/
.shop__description__wrap {
	display: flex;
	flex-flow: row nowrap;
}
.shop__description__ph {
	width:48%;
	margin-right: 2%;
}
.shop__description__txt {
    /*width:50%;*/
    width:100%;
}
h3.shop__copy {font-size: 2.1rem;}
.shop__description__txt p {
	line-height: 1.8;
}

.shop__photo__list {
	display: flex;
	flex-flow: row wrap;
}
.shop__photo__list li {
	width:30%;
	margin-right: 5%;
}
.shop__photo__list li:last-child {
	margin-right: 0;
}
.shop__photo__ph {margin-bottom: 10px;}

.shop__info__wrap table {
	width:100%;
}
.shop__info__wrap table th {
	background: #f2f2f2;
	border:1px solid #ccc;
	text-align: left;
	padding: 0.5em 0.7em;
	white-space: nowrap;
	color: #333;
}
.shop__info__wrap table td {
	background: #fff;
	border:1px solid #ccc;
	padding: 0.5em 0.7em;
	color: #333;
}
.shop__acc li{
	margin-left: 1.5em;
	list-style-type:disc;
}


/* shop smart phone */
@media screen and (max-width:600px){
	.shop__description__wrap {
	display: flex;
	flex-flow: column;
	}
	.shop__description__ph {
	width:100%;
	margin-right: 0%;
	margin-bottom: 20px;
	}
	.shop__description__txt {
	width:100%;
	}	
	
	.shop__photo__list {
	display: flex;
	flex-flow: column;
	}
	.shop__photo__list li {
	width:100%;
	margin-right: 0%;
	display: flex;
	flex-flow: row nowrap;
		margin-bottom: 20px;
	}
	.shop__photo__ph {margin-bottom: 0px; width:40%; margin-right: 5%;}
	.shop__photo__txt {width:55%;}
}

/* --------------------------------- STAFF & SERVICE
*/
.staff__list,.service__list {
	display: flex;
	flex-flow: row wrap;
}
.staff__list dl,.service__list dl {
	width:30%;
	margin-right: 5%;
	margin-bottom: 60px;
}
.staff__list dl:nth-child(3n),.service__list dl:nth-child(3n) {
	margin-right: 0%;
}

/* staff smart phone */
@media screen and (max-width:600px){
	.staff__list,.service__list {
	display: flex;
	flex-flow: column;
	}
	.staff__list dl,.service__list dl {
	width:100%;
	margin-right: 0%;
	margin-bottom: 0px;
		padding: 20px 0;
		display: flex;
		flex-flow: row nowrap;
		border-top: 1px dotted var(--border-color);
	}
	.staff__list dl dt,.service__list dl dt {
		width:40%;
		margin-right: 5%;
	}
	.staff__list dl dd,.service__list dl dd {
		width:55%;
	}	
}

/* --------------------------------- Parts
*/
.parts__list {
	display: flex;
	flex-flow: row wrap;
}
.parts__list dl {
	width:30%;
	margin-right: 5%;
	margin-bottom: 60px;
}
.parts__list dl:nth-child(3n) {
	margin-right: 0%;
}

.parts__price {font-size: 2rem; font-weight: bold; margin-bottom: 10px;}
.parts__price small {font-size:1.3rem;}

.parts__serach__wrap {
	border-bottom:1px solid var(--border-color);
	padding-bottom: 20px;
	margin-bottom: 40px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
}

.parts__serach__wrap > div {
	width:300px;
}
.parts__select__category__wrap {margin-right: 20px; position: relative;}
.parts__select__category__wrap select{
	width:100%;
	padding: .5em;
	border:1px solid var(--border-color);
	color:#333;
	background: #fff;
	-webkit-appearance:none;
}
.parts__select__category__wrap::after {
		position: absolute;
		top:50%;
	right: 10px;
	transform: translateY(-50%);
		content: "▼";
		color: #333;
		pointer-events: none; /* マウスイベントを無効にする */
}

@media screen and (max-width:600px){
	
	.parts__serach__wrap {
		flex-flow: column;
	}
	.parts__serach__wrap > div {
		width:100%;
	}
	.parts__select__category__wrap{
		margin-bottom: 10px;
	}
	
	.parts__list dl {
		width:46%;
		margin-right: 8%;
		margin-bottom: 40px;
	}
	.parts__list dl:nth-child(even) {
		margin-right: 0%;
	}
	.parts__list dl:nth-child(3) {
		margin-right: 8%;
	}
	.parts__list dl:nth-child(9) {
		margin-right: 8%;
	}	
	
	.parts__select__category__wrap select{
		font-size: 1.4rem;
	}
	
	.parts__price {font-size: 1.6rem; font-weight: bold; margin-bottom: 10px;}
	.parts__price small {font-size:1.1rem;}
	
}

/* --------------------------------- Recruit
*/

.recruit__info__wrap table {
	width: 100%;
	margin-bottom: 40px;
}

.recruit__info__wrap table th {
	width:10em;
	background: #f2f2f2;
	border:1px solid #ccc;
	text-align: left;
	padding: 0.5em 0.7em;
	white-space: nowrap;
	color: #333;
	vertical-align: top;
}

.recruit__info__wrap table td {
	background: #fff;
	border:1px solid #ccc;
	padding: 0.5em 0.7em;
	color: #333;
}
@media screen and (max-width:600px){
.recruit__info__wrap table th {
	width:6em;
	}
}

/* --------------------------------- Contact
*/

.contact__wrap input[type="text"] {
	padding: 0.5em;
	width: 100%;
	font-size: 1.5rem;
	border:1px solid #ccc;
}
.contact__wrap select {
	  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
	width: 100%;
	padding: 0.5em;
	font-size: 1.5rem;
	border:1px solid #ccc;
	border-radius: 0;
}
.contact__wrap textarea {
	width:100%;
	border:1px solid #ccc;
}
.contact__pref__wrap {position: relative; width: 20em}
.contact__pref__wrap::after {
		position: absolute;
		top:50%;
		right: 10px;
		transform: translateY(-50%);
		content: "▼";
		color: #333;
		pointer-events: none; /* マウスイベントを無効にする */
}

.contact__wrap dl {
	display: flex;
	flex-flow: row nowrap;
	margin-bottom: 30px;
}
.contact__wrap dl dt {
	width: 15em;
	padding: 0.5em 0;
}
.contact__wrap dl dd{
	flex: 1;
}
.contact__wrap dl dt span {font-size: 1.1rem; margin-left: 0.5em; color: var(--link-hover-color);}

.btn__send {
	font-size: 1.6rem;
	font-weight: bold;
	background: var(--btn-bg-color);
	color: var(--btn-txt-color);
	display: inline-block;
	padding: 1em 1em;
	width:200px;
	border-radius: 8px;
	border:1px solid var(--border-color);
}

.thanks__txt__wrap {
	display: flex;
	justify-content: center;
}

/* contact smart phone */
@media screen and (max-width:600px){
	.contact__wrap dl {
	display: flex;
	flex-flow: column;
	margin-bottom: 30px;
	}
}

/* --------------------------------- Button
*/

.btn__back {
	font-size: 1.6rem;
	font-weight: bold;
	background: var(--btn-bg-color);
	color: var(--btn-txt-color) !important;
	display: inline-block;
	padding: 0.8em 1em;
	width:200px;
	border-radius: 8px;
	border:1px solid var(--border-color);
}
.btn__back:hover {
	color: var(--btn-txt-color);
	opacity: 0.7;
}


/* --------------------------------- BLOG
*/
.blog__list dl {
	display: flex;
	flex-flow: row nowrap;
	border-top:1px dotted var(--border-color);
	padding: 10px 0;
}
.blog__list dl dt {
	margin-right: 20px;
	width: 180px;
}
.blog__list dl dd {
	flex: 1;
}
.blog__list dl:last-child {
	border-bottom:1px dotted var(--border-color);
}

.blog__tit {
	font-size: 1.8rem;
}

.blog__list dl .newA__time {font-size: 1.1rem; margin-top: 0em;}

.pagenation__wrap {text-align: center;}
.page__list {display: flex; flex-flow: row nowrap; justify-content:center;}
.page__list li{border:1px solid var(--border-color); margin: 2px; background: var(--main-bg-color);}
.page__list li a{display: block;  width: 40px; height: 40px; line-height: 40px;}
.page__list li.current {background: var(--link-hover-color); }
.page__list li.current a{color: var(--link-color);}
.page__list li a:hover {background: var(--link-hover-color); color:var(--link-color) }

.page__list__sp {display: flex; flex-flow: row nowrap; justify-content:center;}
.page__list__sp li{border:1px solid var(--border-color); margin: 2px; background: var(--main-bg-color);}
.page__list__sp li:nth-child(1) a{display: block;  width: 40px; height: 40px; line-height: 40px;}
.page__list__sp li:nth-child(4) a{display: block;  width: 40px; height: 40px; line-height: 40px;}
.page__list__sp li:nth-child(2) a{display: block;  width: 100px; height: 40px; line-height: 40px;}
.page__list__sp li:nth-child(3) a{display: block;  width: 100px; height: 40px; line-height: 40px;}
.page__list__sp li a:hover {background: var(--link-hover-color); color:var(--link-color)}


.blog__parts__wrap {
	background: var(--main-bg-color)	
}
.blog__parts__box {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
.blog__parts__box > div{
	width:30%;
}

.blog__p__tit {
	border-bottom:1px solid var(--border-color);
	margin-bottom: 10px;
}
.blog__p__list li {padding: .2em 0; list-style: disc; margin-left: 1.5em;}
.blog__p__list li a {color: var(--main-txt-color);}
.blog__p__list li a:hover{color:var(--main-hover-color);}

.blog__p__year {padding: .2em 0;}
.blog__p__year dt:hover {cursor: pointer; color: var(--main-hover-color);}
.blog__p__year dt i {transition: 0.3s;}
.blog__p__year dt.on i {transform: rotate(90deg);}
.blog__p__year dd {
	display: none;
	margin-top: 5px;
	margin-bottom: 10px;
}

.search__wrap {
	position: relative;
	border: 1px solid #ccc;
}
.search__wrap::before{
	content: "\f002";
	font-size: 1.6rem;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	color: #000;
}
.search__wrap input{
	padding: .5em 2em .5em .5em;
	width: 100%;
	font-size: 1.4rem;
}

/* blog smart phone */
@media screen and (max-width:600px){
	.blog__list dl dt {
	margin-right: 5%;
	width: 90px;
	}
	.blog__tit {
	font-size: 1.5rem;
	}
	
	.blog__parts__box {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	}	
	.blog__parts__box > div{
	width:100%;
		margin-bottom: 20px;
	}
	.blog__parts__box > div:last-child {
		margin-bottom: 0;
	}
	
}