@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');


html {
    font-size: 62.5%;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
img {
    border: 0;
    image-rendering: -webkit-optimize-contrast;
}
body {
    background: #ccc;
    font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.2rem;
	line-height: 2.4rem;	
	color: #000;
}
ul {
	list-style: none;
}
.main p {
	margin-bottom: 1rem;
}
em {
	font-weight: 700;
	font-style: normal;
}
.ex::after,
.a-mk::before,
.perfectcheck dt::before,
.maintenance h4::before,
.consign h4::before {
  	padding: 0 0.2rem;
	font-family: 'Material Icons';
	font-weight: 400;
}
.ex::after {
	content:'\e895';
}
.menu .ex::after,
.sub .ex::after{
	color: #666;
}
.main .ex::after {
	color: #ccc;
}
.a-mk::before {
	content:'\e5e1';
	color: #666;
}
.perfectcheck dt::before{
	content:'\e8b8';
	font-size: 80%;
}
.maintenance h4::before,
.consign h4::before {
	content:'\e937';
}
.main a,
.sub a {
	text-decoration: none;
	color: #f00;  
}
.main a:hover,
.sub a:hover {
	color: #c00; 
}
.main .a-bt{
	margin: 1rem 0;
	padding: 0.5rem 1rem;
	background-color: #f1f3f4;
	border-radius: 5px;
	border-top: solid 1px #f0f0f0;
	border-left: solid 1px #f0f0f0;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	display: block;
	width: 100%;
}
a img:hover {
   opacity: 0.75; /* 25％ほど透明にする */
   border: 0;
}
.main a,
dt {
	font-weight: 700;
}
h2 {
	margin: 1.5rem 0;
	padding: 3.5rem 0 0.5rem 0rem;
	font-size: 1.6;
	border-bottom: solid 3px #f0f0f0;
	background: url(img/sdg-mark.png) no-repeat left bottom;
}
h3 {
	margin: 20px 0 10px;
	padding: 8px 5px 5px 15px;
	background: #000;
	border-top: solid 1px #666;
	border-bottom: solid 2px #f00;
	color: #fff;
	font-size: 140%;
}
h4 {
	font-size: 140%;
	color: #06c;
}
.main img {
	width: 100%;
	height: auto;
	vertical-align: top;
	line-height: 1.0rem;
}
.inner,
.main 
.sub,
footer {
	width: 100%;
	box-sizing: border-box;
}
/* footer */
.sub {
	background: #f0f0f0;
}
.sub_nav {
	font-size: 1.6rem;
	padding-bottom: 2rem;
    display: flex;
    flex-flow :row wrap;		
}
.sub_nav ul{
	font-size: 1.4rem;
}
.sub_nav_item {
     margin-right: 30px;
}
.sub_nav_list,
.sub_nav_heading {
     padding-top: 1.5rem;
	 font-weight: 700;
}
.sub_nav li {
    margin-left: 0rem;
	line-height: 2.7rem;
}
.sub .address {
    margin: 1rem 0;
	padding: 1rem 0;
}
.sub .address p{
	margin: 0.5rem 0;
	font-weight: 700;
	font-size: 120%;
}
.sub .adress ul {
    margin-top: 0.5rem;
}
.sub .address img {
	width: 120px;
	height: auto;
}
footer {
	padding: 1rem;
	text-align: right;
}
.main {
	font-size: 1.5rem;
	text-align: left;
	background: #fff;
}

/* slidebox */
.main_imgbox {
	width: 100%;
	padding-top: 75%;
    overflow: hidden;
    position: relative;
}
.title {
    width: 90%;
    font-size: 0.8rem;
    color: #fff;
    z-index: 11;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%,-50%);
	text-align:center;
}
.title img {
  max-width: 800px;
}
.main_img {
    z-index:10;
    opacity: 0;
    width: 100%;
	padding-top: 75%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 36s 0s infinite;
    animation: anime 36s 0s infinite;
}
.main_img:nth-of-type(2) {
	-webkit-animation-delay: 6s;
	animation-delay: 6s; 
}
.main_img:nth-of-type(3) {
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}
.main_img:nth-of-type(4) {
	-webkit-animation-delay: 18s;
	 animation-delay: 18s;
}
.main_img:nth-of-type(5) {
	-webkit-animation-delay: 24s;
	animation-delay: 24s;
}
.main_img:nth-of-type(6) {
	-webkit-animation-delay: 30s;
	animation-delay: 30s;
}
@keyframes anime {
	0% {
       opacity: 0;
    }
    8% {
       opacity: 1;
    }
    17% {
       opacity: 1;
    }
    25% {
       opacity: 0;
       transform: scale(1.2) ;
       z-index:9;
    }
    100% { 
	   opacity: 0 }
}
.factory img {
	max-width: 630px;
}

.factory dl div,
.maintenance .checklist,
.maintenance .price,
.consign .section {
	border-bottom: solid 1px #ccc;
}
.maintenance .checklist,
.maintenance .price,
.consign .section {
	margin-bottom: 2rem;
}
.factory dt {
	float :left;
	width: 8rem;
}
.factory dd {
    float: none;
	width: auto;
	margin-left: 8rem;
}
.factory iframe {
	margin-top: 3rem;
}

.maintenance h4,
.consign h4 {
	padding: 8px 0;
}
.factory dt,
.factory dd,
.maintenance dt,
.maintenance dd,
.consign .section p {
	padding: 10px 0 6px 15px;
}
.maintenance dt,
.coating dd,
.price dd,
.consign .section p {
	border-top: solid 1px #ccc;
}
.price dt {
	float :left;
	width: 23rem;
}
.price dd {
	float: none;
	margin-left: 23rem;
	text-align: right;
}
.newboat ul,
.coating_img {
	display: flex;
    flex-flow :row wrap;
	justify-content: center;
}
.newboat li,
.coating_img li {
	margin: 0 6px 6px 0;
}
.loan {
	max-width: 360px;
}
.newboat ul li figcaption {
	text-align:	center;
}
.newboat .list li  {
	width: 47%;
	height: auto;
}

.contact dl{
	text-align:left;

}
.contact dt,
.contact dd{
	padding:10px;

}
.contact dt{
	margin-top: 20px;
	background: #efefef;
	color: #000;
}
.contact input{
	padding:5px 10px;
	display:block;
}
.contact .radio,
.contact .button {
	display: inline-flex;
}
.contact .time span,
.contact option {
	padding:10px;
}
.contact textarea {
    width: 100%;
} 


@media screen and (max-width: 750px) {
  .main {
	padding: 40px 10px 50px;	
  }
  .home {
    padding: 10px 10px 50px;
  }
  .sub {
    padding: 10px;
  }
  .sub .address ul {
	display: flex;
	flex-flow: wrap;
  }
  .sub .address {
  	border-top: solid 1px #fff;
  }  
  .sub .address li {
    padding-right: 1.5rem;
  }
  .perfectcheck dd {
	padding-left: 3rem;
  }
  .coating_img li {
	width: calc(50% - 3px);
  }
  .coating_img li:nth-child(2n) {
	margin-right: 0;
  }
  .coating .logo {
	width: 100px;
	height: auto;
	padding-right: 10px;
	float: left;
  }
  .cl {
	clear:both;
  }
}

@media screen and (min-width: 751px){
  .usedboat .a-bt,
  .consign .a-bt{
  	width: 50%;
  }
  .main {
	padding: 80px 30px 50px;
  }
  .home {
	padding-top: 110px;
  }
  .sub {
    padding: 0 30px;
	display: flex;
	justify-content: space-between;
  }
  .sub .address {
    text-align: right;
  }
  /* 表 */
  .coating h4,
  .perfectcheck dd,  
  .consign .section h4 {
	border-top: solid 1px #ccc;
  }  
  .perfectcheck dt,
  .coating h4,
  .consign .section h4 {
	float :left;
  }   
  .perfectcheck dd,
  .price dl,
  .consign .section p {
	float: none;
	width: auto;
	display: block;
  }
  .perfectcheck dt,
  .coating h4 {
 	width: 23rem;
  }   
  .perfectcheck dd,
  .coating dl {
	margin-left: 23rem;	
  }
  .consign .section h4 {
	width: 15rem;
  }
  .consign .section p {
	padding-left:15rem;	
  }
  .coating .logo {
	width: 150px;
	padding-right: 10px;
	float: left;
  }
  .coating .about {
	float: none;	
	height: auto;
	padding-left: 160px;
  }  
  .coating_img li {
	width: calc(33.3% - 4px);
  }
  .coating_img li:nth-child(3n) {
	margin-right: 0;
  }
  .newboat .list li {
	width: 30%;
	height: auto;
  }
}

@media screen and (max-width: 859px){
  .link ul {
	display: flex;
    flex-flow :row wrap;
	justify-content: center;
  }
  .link li {
	width: 23%;
  }  
}
@media screen and (min-width: 860px){
  .home {
	display: flex;
    flex-flow :row nowrap;
	justify-content: space-between;
  }
  .home .content {
    width: 80%;
  }
  .home .link {
  	width: 15%;	
  }
}
@media screen and (min-width: 1024px) {
  .inner,
  .main,
  .sub,
  footer {
	width: 1024px;
	margin: 0 auto;
  }
  .factory .wrap {
  	display: flex;
	flex-flow: wrap;
  }
  .factory img {
  	width: 500px;
  }
  .factory dl {
  	width: 450px;
	padding-left: 2rem;
	box-sizing: border-box;
  }
  .perfectcheck h4 {
	float :left;
	width: 15rem;
	border-top: solid 1px #ccc;
  }
  .perfectcheck dl{
    float: none;
	padding-left:15rem;
	display: block;
  }
}