@charset "UTF-8";
html{scroll-behavior: smooth;}
/* reset */
*{margin: 0;
padding:0;}

ul{list-style: none;}

a{display: block;
text-decoration: none;
color: inherit;}

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

body{font-family: sans-serif;
line-height: 1.0;
background:url(../img/background-gray.png) ;
}

/* header */

.first .slider{
height: 100vh;
height:100dvh;}

/* h1 logo */
header h1{background: url(../img/logo2-2-smart.png) no-repeat;
  position:absolute;
  top:0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  line-height: 50px;
  width: 200px;
  z-index: 999;
      }
  
   
  /* telephone */
header p{
position: absolute;
top:20px;
right:70px;
font-weight:bold ;
font-size: 1.2em;
z-index: 999;
color: #fff;}

/* pc navigation */
.pcnav ul{display: flex;
position: absolute;
top:50px;
right:60px;
gap:1em;
z-index: 9999;
}

.pcnav a {
  background: rgba(0, 0, 0, 0.03);
  padding: 5px 10px;
  color: #fff;
  font-weight: 400;
  font-size: 17px;
  }


.pcnav a::after{
  content:"";
  display:block;
  height:3px;
  scale:0 1;
  background:#000;
  margin-top: 2px;
  transition: 200ms;
}

.pcnav a:hover::after{scale:1}

/* spnav */
.spnav,.btn{display: none;}

/*keyvisual*/

.img1{background: url(../img/keyvis001adbe.jpg) no-repeat center center/cover;
  object-fit: cover;
  }
.img2{background: url(../img/kyevisual-shirasuadbe.jpg) no-repeat center/cover;
  object-fit: cover;
  max-width: 100%;
    }
.img3{background: url(../img/keyvisual003.jpg) no-repeat center center/cover;
  object-fit: cover;
  max-width: 100%;
    }

.keyvisual{
height:100vh;
height:100dvh;}

.text{
font-size:1.7em;
line-height: 1.4;
text-align: left;
padding: 100px 0 0 40px;
color: #fff;
text-shadow: 0px 0px 3px #000,
0px 0px 3px #000,
0px 0px 3px #000,
0px 0px 5px #000,
0px 0px 5px #000;
font-weight: bold;
font-family: "Noto Serif JP", serif;
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
  }
  
  @keyframes fadeLeftAnime{
    from {
      opacity: 0;
    transform: translateX(-100px);
    }
  
    to {
      opacity: 1;
    transform: translateX(0);
    }
  }

/* topへ戻る */

.top-btn i{
  width: 50px;
  height:50px;
  border: 3px solid #003459;
  text-align: center;
  font-weight: bold;
  box-sizing: border-box;
  background-color: rgba(252, 253, 251, 0.1);
  position: fixed;
  right: 0;
  bottom: 10px;
  display: none;
  border-radius: 50%;
  }

.top-btn a i
{display: block;
text-align: center;
color: #003459;
line-height: 50px;
font-size: 25px;
font-weight: bold;}

.top-btn:hover{background-color: rgba(12, 4, 248, 0.1);}
  

/* 業務内容 */

/* 見出しlogo */
.content .logo{width: 5%;
width: 5%;
}
/* 見出し */
.content h2{
font-size:1.8em;
background: url(../img/line1.png)no-repeat bottom/400px 15px;
box-sizing: border-box;
padding: 0 0 20px 10px;
text-align: center;
}

.content h2 span{
  font-family: "Noto Serif JP", serif;
  font-style:normal;
  font-weight: bold;
  margin-left: 50px;
  }
/* .wrap{display: flex;
justify-content: center;
/* } */
.business{max-width: 800px;
margin-inline: auto;
display: flex;
justify-content: center;
flex-direction: column; 
   }
.business p
{font-family: "Noto Serif JP", serif;
font-weight: 600;
line-height:1.65;
font-size: 1.2em;
margin-block: 50px ;
}
.business p + p{margin-top:5px;}


/* 横並び画像 */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/

.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left{
animation :infinity-scroll-left 95s infinite linear 0.5s both;
}

.d-demo__item {
  width: calc(100vw / 6);
}
.d-demo__item > img{
   max-width: 100%;
}

svg{
  position: absolute;
  max-width: 100%;
  bottom: 0.4;
  left: 0;
  animation-name: move-left;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.spacer{
  height: 100px;
  width: 100%;
}

/* 区切り線 */
.hr1 {
  margin-top: 100px;
  border-top: 3px solid #003459;
  width: 10%;
  height: 30px;
}

.hr2 {
  border-top: 3px solid #003459;
  width: 50%;
  height: 30px;
}

.hr3 {
  border-top: 3px solid #003459;
  width: 80%;
  height: 30px;
 
}

/* 取扱商品 */

.container h2{margin: 50px 0 20px 0;
text-align: center;
font-size:2em ;
font-family: "Noto Serif JP", serif;
font-weight: bold;
letter-spacing: 5px;
  }

.main
{max-width: 1500px;
display: grid;
gap:20px;
grid-template-columns:repeat(3,1fr);
grid-template-rows:repeat(2,1fr);
box-sizing: border-box;
margin: 50px 28px ;
}

.main li:nth-child(1){
grid-column: 1;
grid-row: 1;
margin-left: 0;
}

.main li:nth-child(2){
grid-column: 2;
grid-row: 1;
}

.main li:nth-child(3){
grid-column: 3;
grid-row: 1;
}

.main li:nth-child(4){
grid-column: 1;
grid-row: 2;
}

.main li:nth-child(5){
grid-column: 2;
grid-row: 2;
}

.main li:nth-child(6){
grid-column: 3;
grid-row: 2;
}

/* 商品名 */
.main h3
{font-family: "Noto Serif JP", serif;
font-size: 1.6em;
text-align: left;
padding: 5px;
font-weight: bold;}

/* 会社概要 */
.logo-second{width: 5%;
  width: 5%;
  padding-top: 20px;}

.company h2{margin: 50px 0 20px 0;
text-align: center;
font-size:2em ; 
font-family: "Noto Serif JP", serif;
font-weight: bold;
letter-spacing: 5px;}

.dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.dot {
  height: 20px;
  width: 20px;
  margin-right: 10px;
  border-radius: 10px;
  background-color: #003459;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:last-child {
  margin-right: 0;
}

.dot:nth-child(1) {
  animation-delay: -0.3s;
}

.dot:nth-child(2) {
  animation-delay: -0.1s;
}

.dot:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    background-color: #7EA1C4;
    box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
  }

  50% {
    transform: scale(1.2);
    background-color: #003459;
    box-shadow: 0 0 0 10px rgba(34, 39, 45, 0);
  }

  100% {
    transform: scale(0.8);
    background-color: #7EA1C4;
    box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
  }
}

.gaiyou{display: flex;
margin: 0 0 0 100px;}

.shamei
{width: 65%;
margin: 50px 0 0 100px;
}
.shamei p
{display: block;
font-family: "Noto Serif JP", serif;
font-weight: bold;
line-height:1.75;
font-size: 1.2em;
letter-spacing: 2px;
}

.shamei dt{
float: left;
text-align: justify;
text-justify:inter-ideograph;}

.shamei dt:nth-of-type(4){letter-spacing: 0.03em;
font-size: 0.9em;}

.shamei dd{margin: 0 0 20px 105px;}

.shamei dl{
  display: block;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  line-height:1.75;
  font-size: 1.2em;
  letter-spacing: 2px
}
/* 社長画像 */
.ceo{background: url(../img/概要.png) no-repeat right center/contain;
width: 300px;
height:300px;
margin-top: 50px;
    }
    
/* カレンダーリンク */
.calender{color: #003459;
text-decoration:underline;
margin-bottom: 20px;
}
.calender i{padding-right: 5px;}

.scroll-space i {padding: 0 5px;}
.scroll-space 
{width:  630px;
line-height:150px;
border: 3px solid #003459;
padding: 5px;
box-sizing: border-box;
}
  
/* map */
.map{max-width: 1600px;
margin: 20px 80px 100px;}
  
.spmap{display: none;}

/* お問い合わせ */
.form h2{margin: 50px 0 20px 0;
  text-align: center;
  font-size:2em ;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
    }
    .dots-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
    }
    
    .dot {
      height: 20px;
      width: 20px;
      margin-right: 10px;
      border-radius: 10px;
      background-color: #003459;
      animation: pulse 1.5s infinite ease-in-out;
    }
    
    .dot:last-child {
      margin-right: 0;
    }
    
    .dot:nth-child(1) {
      animation-delay: -0.3s;
    }
    
    .dot:nth-child(2) {
      animation-delay: -0.1s;
    }
    
    .dot:nth-child(3) {
      animation-delay: 0.1s;
    }
    
    @keyframes pulse {
      0% {
        transform: scale(0.8);
        background-color: #7EA1C4;
        box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
      }
    
      50% {
        transform: scale(1.2);
        background-color: #003459;
        box-shadow: 0 0 0 10px rgba(34, 39, 45, 0);
      }
    
      100% {
        transform: scale(0.8);
        background-color: #7EA1C4;
        box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
      }
    }
   
.form p{font-family:"Noto Serif JP", serif;
  line-height: 1.65;
margin-top: 30px;
text-align: center;
font-weight: bold;
font-size: 1.2em;}

#g-form{max-width: 600px;
  padding:20px;
  box-sizing: border-box;
  margin: 0 auto;}



table,th,td
{border: 1px solid #003459;
border-collapse: collapse;
box-sizing: border-box;
}
table{width: 100%;}

tr{display: flex;
width: 100%;
margin-bottom:20px;}

th{width: 40%;
font-size: 1em;
padding:10px;
font-family:"Noto Serif JP", serif;}

td{width: 60%;}

input,textarea{display: block;
width: 100%;
border: 0;
padding:16px;
box-sizing: border-box;
resize: none;
}

td.submit{
width: 100%;
text-align: center;
border: 0;
padding:5px;
}
td.submit.buttun{padding:20px 30px;
}
#btn{font-size: 1em;
padding: 5px 10px;}


/* お問い合わせform link*/
.policy a
{font-size: 0.9em;
font-weight: bold;
color: #003459;
text-decoration:underline;}

/* footer */
footer{
text-align: center;
color: #fff;
background: #003459;
padding-block: 30px;}


@media (width <= 1392px){
.business{width:500px;
margin-inline: auto;
 display: block;
        }
  .business p
  {line-height:1.5;
  font-size: 1.1em;
  margin-block: 30px ;
    }

/* 概要 */
.gaiyou{display: flex;
  margin: 0 20px 0 20px;}

  /* 取扱商品 */
  .scroll-space
  {width:auto;
  height:310px;
  margin-inline: 3px 10px;
  line-height: 1.25;
  font-size: 0.9em;
  }

}

@media (width <= 743px){


.pcnav{display: none;}
.pcnav a{display: none;}

.btn{display: block;
border: 1px solid #fff;
border-radius: 5px;
width: 50px;
height:50px;
text-align: center;
font-size: 35px;
position: absolute;
top: 5px;
right: 5px;
color: #fff;
overflow: hidden;
z-index: 99999;}

.btn i{display: block;
line-height: 50px;}

.close{color: #fff;
border-color: #fff;}

.close i:first-child{display: none;}

/* spnav */
.spnav{display: none;
position: absolute;
top: 57px;
width: 100%;
height:100vh;
height:100dvh;
top:0;
background: rgba(79, 78, 78, 0.9);
padding-top: 57px;
box-sizing: border-box;
z-index: 9999;
}


.spnav li a{
line-height: 70px;
font-size: 20px;
font-weight: bold;
text-align: center;
color: #003459;
border-bottom: 2px solid #003459;
letter-spacing: 3px;
}

.spnav li:first-child{border-top: 2px solid #003459;}


/*keyvisual*/
/*keyvisual*/

 .img2{background: url(../img/key-shirasu-sp.jpg) no-repeat center center/contain; 
  background-size: auto 100svh;
 object-fit:cover; } 

.img3{background: url(../img/serrmon-sp.jpg) no-repeat center center/contain; 
  background-size: auto 100svh;
object-fit:cover;} 

/* top logo */
header h1{background: url(../img/logo2-2-smart.png) no-repeat left center/contain;
  top:10px;
  line-height: 130px;
  width: 250px;
  left: 0;
      }
.content .logo{width: 10%;
  width: 10%;
  padding: 10px 20px;}


/* 電話 */
header p{
  font-size: 0.9em;
 }
/* keyvisual fontsize */
 .text{
  font-size:1.2em;
   }

/* 業務内容 */
/* 見出しlogo */
.content .logo{margin-bottom: 20px;
padding-right:10px;}

/*  見出し */ 
.content h2{
font-size: 1.6em;
background: url(../img/kasen-kon.png)no-repeat bottom/350px 4px;
padding: 0;
}

.content h2 span{
margin-left: 10px;
  }
  .business{width:300px;
    margin-inline: auto;
    display: block;
           }
  .business p
  {line-height:1.5;
  font-size: 1em;
  margin-block: 30px ;
    }

/* 横並び写真 */
.d-demo__item {
  width: calc(100vw / 3);
}

/* 区切り線 */
.hr1 {
  margin-top: 50px;
  }

/* 取扱商品 */
.container h2{margin: 20px 0 20px 0;
 font-size:1.8em ;
    }
.main
{
gap:10px;
grid-template-columns:repeat(2,1fr);
grid-template-rows:repeat(3,1fr);
margin: 50px 10px ;
}
.main li:nth-child(1){
  grid-column: 1;
  grid-row: 1;
   }
  
  .main li:nth-child(2){
  grid-column: 2;
  grid-row: 1;
  }
  
  .main li:nth-child(3){
  grid-column: 1;
  grid-row: 2;
  }
  
  .main li:nth-child(4){
  grid-column: 2;
  grid-row: 2;
  }
  
  .main li:nth-child(5){
  grid-column: 1;
  grid-row: 3;
  }
  
  .main li:nth-child(6){
  grid-column: 2;
  grid-row: 3;
  }

  /* 商品名 */
.main h3
{
font-size: 1.2em;
padding: 5px;
}

  /* 会社概要 */

  .logo-second{width: 10%;
    width: 10%;
    padding: 10px 20px;}

  .ceo{width: auto;
    height:200px;
    text-align: center;
    background: url(../img/概要.png) no-repeat center center/contain;
    object-fit: cover;
  }
  .company h2{margin: 20px 0 20px 0;
    text-align: center;
    font-size:1.8em ; }

    .gaiyou{display:block;
      margin:10px;}
    .shamei
      {width: auto;
      margin: 10px 0 0 10px;
      }
  .shamei dl{
  line-height:1.35;
  font-size: 0.9em;
  margin-block: 10px;
        }
.shamei p
{line-height:1.35;
font-size: 0.9em;
}
  .scroll-space
  {width:auto;
  height:180px;
  margin-inline: 3px 10px;
  line-height: 1.65;
  }
/* map */

.map{display: none;}
.spmap{display: block;
margin-inline:10px;}

  /* お問い合わせ */
  .dot:nth-child(3) {
    animation-delay: none;
  }
  
  .form h2{margin: 20px 0 20px 0;
    text-align: center;
    font-size:2em ; }

    .form 
    {line-height:1.35;
    font-size: 0.8em;} 

.form p:nth-of-type(1){margin: 20px 30px 10px 30px;}
.form p + p{margin: 10px 0 10px 30px;}  
    
    /*お問い合わせgoogleフォーム */
.form h3{  
  font-size: 1em;}

  #g-form{min-width:auto;
    padding:20px;
    box-sizing: border-box;
    margin: 0 auto;}

    th{width: 45%;
      font-size: 0.8em;
      padding:10px;}

    ::placeholder{font-size: 0.7em;}

 

/* footer */
footer{
 font-size: 13px;
  }
}

@media (width <= 500px){

/*keyvisual*/

.img2{background: url(../img/key_02_sp.jpg) no-repeat center center/contain; 
   object-fit:cover; 
   background-size: auto 100svh;
   } 

.img3{background: url(../img/key_03_sp.jpg) no-repeat center center/contain; 
 object-fit:cover;
 background-size: auto 100svh;
 } 
}