@charset "utf-8";

body {
  background-color: #fff;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

header nav a, p, footer h2, td, dd {
  font-family: 'Noto Serif JP', serif;
}

h1 {
  font-family: 'BIZ UDGothic', sans-serif;;
}

h2, h3, h4, h5{
  font-family: 'Noto Sans JP', sans-serif;
}

li, th, dt {
  font-family: 'Hina Mincho', serif;
}

.th0, .th1{
  font-family: 'Darumadrop One', sans-serif;
}

h1 {
  color: #000;
  font-size: 5rem;
  padding-left: 7%;
  padding-top: 30px;
  padding-bottom: 15px;
}

nav ul {
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
}

nav ul li {
  width: 20%;
  display: inline-block;
  background-color: lightgoldenrodyellow;
  height: 40px; 
}

nav ul li a {
  display: block;
  color: #333;
  font-size: 2em;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  }

nav ul li a:hover {
  background-color: #d3ad17;
  height: 40px;
}

.navwrapper {
  display: none;
}

/* div.content */
.content {
  display: flex;
  justify-content: space-between;
}

h2 {
  font-size: 4.5rem;
  font-weight: 450;
  line-height: 30px;
  color: #000;
  padding-left: 10%;
  margin-bottom: 50px;
}

h3 {
  font-size: 3.4rem;
  font-weight: 450;
  line-height: 50px;
  color: #010;
  padding-left: 10%;
  margin-top: 50px;
  margin-bottom: 20px;
}

h4 {
  font-size: 4.3rem;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-left: 5%;
  text-align: center;
}

p {
  margin-bottom: 10px;
  font-size: 2rem;
  line-height: 1.5;
  text-align: justify;
}
.off {
  display: none;
}

h2 a {
  text-decoration: none;
}
h4 a {
  text-decoration: none;
}
dd a {
  text-decoration: none;
}

/* footer */

footer {
  background-color: #9cc;
  color: #000;
}

footer h2 {
  font-size: 3.5rem;
  margin-top: 10px;
  width: 100%;
}

/* address */
address {
  font-size: 2rem;
  margin-left: 3%;
  margin-top: -20px;
  margin-bottom: 5px;
  width: 100%;
}

/* nav */
.local {
  margin-top: 10px;
}

.nav {
  display: none;
}

hr {
  border: 0;
  background-color: #111;
  height: 1px;
  margin-top: 20px;
}

/* footer small */
small {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  line-height: 15px;
}

/* index */
.logotop {
  display: flex;
  background: #f1ffff;
}
.topleft {
  width: 30%;
  padding-left: 5%;
}
.logo {
  width: 50%;
  padding: 5%;
}

.loop {
  background-color: #eeedd1;
  overflow: hidden;
}
.loop0 img {
  width: 100%;
}
.video {
  display: none;
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
  }
  .scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
  }
  .scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
  }
  .scroll-infinity__list--left {
    animation: infinity-scroll-left 20s infinite linear 0.125s both;
  }
  .scroll-infinity__item {
    width: calc(100vw / 6);
    margin: 7px;
  }
  .scroll-infinity__item>img {
    width: 100%;
  }

  @keyframes infinity-scroll-right {
    from {
      transform: translateX(-100%);
    }
      to {
      transform: translateX(0%);
    }
    }
    .scroll-infinity__list--right{
      animation :infinity-scroll-right 20s infinite linear 0.125s both;
    }

h5 {
  font-size: 4rem;
  margin: 7px 0;
  padding-top: 50px;
  padding-bottom: 60px;
  text-align: center;
}

.days {
  background:lightblue;
}
.indeximg {
  display: flex;
}

.pricelistindex{
  margin-top: 15px;
  margin-left: 3%;
  margin-bottom: 50px;
  width: 30%;
  background-color: #50c878;
}
.pricelistindex a{
  text-decoration: none;
}

.colorsizeindex{
  margin-top: 15px;
  margin-left: 3%;
  margin-bottom: 50px;
  width: 30%;
  background-color: #add8ff;
}
.colorsizeindex a{
  text-decoration: none;
}
.orderindex {
  margin-top: 15px;
  margin-left: 3%;
  margin-right: 3%;
  margin-bottom: 50px;
  width: 40%;
  background-color: #fa965f;
}
.orderindex a{
  text-decoration: none;
}
dl.info {
  font-size: 2rem;
  border: 1px solid #030;
  padding: 10px 20px;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 20px;
  height: 100px;
  overflow-y: auto;
}

.info div {
  display: flex;
  justify-content: flex-start;
  line-height: 24px;
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 2px dotted #ccc;
}

.info dt {
  width: 9em;
}

.info dd {
  width: calc(100% - 9em);
  text-align: justify;
}

.slidec {
  width: 100%;
  margin: 50px auto;
  display: flex;
  align-items: center;
  overflow: hidden;
 }
 .slidew {
  display: flex;
  animation: slide-flow 20s infinite linear 1s both;
 }
 .slide{
  width: 300px;
  object-fit:cover;
  border: 1px solid #ddd;
 }
 @keyframes slide-flow {
  0% {transform: translateX(0);}
  100% {transform: translateX(-100%);}
 }

 .slide-paused:hover .slidew {
  animation-play-state: paused;
  }
  .slide-paused:hover .slidew img:hover {
  opacity: .8;
  cursor: grabbing;
  }

/* 価格一覧 */
.pricelist {
  display: flex;
}

.list {
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 30px;
  padding-bottom: 10px;
  width: 40%;
  height: 100%;
  background-color: #fffff0;
}
.th0 {
  background-color: #98d2fe;
}
.w33 {
  width: 33%;
}
.w34 {
  width: 34%;
}
.th1 {
  background-color: #98d2fe;
}
.td0 {
  font-size: 1.8rem;
}
.td1 {
  font-size: 1.5rem;
}
.price0 {
  padding-left: 5%;
  padding-right: 10%;
  width: 40%;
  height: auto;
  margin-bottom: 30px;
}

/* カラーとサイズ */
.color {
  display: flex;
}

.works {
  margin-left: 30%;
}

.whitet {
  padding-left: 5%;
  padding-right: 5%;
  margin-top: 20px;
  margin-bottom: 1px;
  width: 40%;
}
.whitet img{
  width: 100%;
}

.colortable {
  padding-left: 5%;
  padding-right: 5%;
  padding-top:  100px;
  margin-bottom: 50px;
  width: 40%;
}
.colortable img{
  width: 21%;
}

.size {
  padding-left: 10%;
  padding-top:  20px;
  margin-bottom: 50px;
  width: 60%;
  text-align: center;
  background-color:#fafad2
}
.heading {
  background-color: #3486fd;
}

/* オンライン販売 */
.lineup1, .lineup2, .lineup3 {
  display: flex;
  padding-top: 30px;
  margin-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.t1, .t2, .t3, .t4, .t5, .t6 {
  width: 40%;
  height: auto;
  padding-left: 5%;
  margin-left: 5%;
  padding-right: 5%;
  margin-right: 5%;
}

.ttt {
  width: 80%;
}
.ttt img {
  width: 80%;
}

.t1 img {
  width: 90%;
}
.t2 img {
  width: 90%
}
.t3 img {
  width: 90%;
}
.t4 img {
  width: 90%
}
.t5 img {
  width: 90%;
}
.t6 img {
  width: 90%
}

.t01:hover, .t02:hover, .t03:hover, .t04:hover, .t05:hover, .t06:hover{
  background-color: #789;
}

.cart {
  margin: 30px;
  margin-left: 35%;
}
.cart img {
  width: 80%;
  border: 2px solid #321;
}

.colorlineup {
  width: 95%;
}

.ttt {
  width: 90%;
  margin-left: 1%;
  margin-right: 10%;
}
.ttt img {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  justify-content: center;
  height: auto;
  border: 3px solid #123;
}
.cart02 img {
    border: 2px solid #321;
    width: 50%;
    margin-left: 5%;
}
.expansion  {
    width: 50%;
}
.expansion img {
  border: 2px solid #123;
  width: 95%;
  padding-left: 4%;
  padding-right: 1%;
}
.color0 {
  padding-left: 5%;
  padding-top: 30px;
  display: flex;
}
.number {
  padding-left: 5%;
  padding-top: 30px;
  padding-bottom: 50px;
  display: flex;
}

.p1500 {
  padding-left: 20%;
  margin-top: -50px;
  margin-bottom: 100px;
}

.onlinel {
  display: flex;
}

.expansion {
  display: flex;
}

/* contact 注文フォーム */
table {
  border: 2px solid #000;
  width: 90%;
  height: 300px;
  text-align: center;
  font-size: 3em;
  margin-left: 9%;
  margin-right: 1%;
}

#order{
  color: #333;
  font-size: 1.8rem;
  width: 80%;
  margin-left: 10%;
}

#order th{
  text-align: center;
  border-bottom: 2px solid #030;
  width: 35%;
}

#order td{
  text-align: left;
  width: 65%;
  border-bottom: 2px solid #030;
  border-right: 2px solid #030;
  padding-left: 5%;
}

#contactform {
  width: 80%;
  margin-left: 10%;
  margin-bottom: 30px;
}

#contactform th{
  width: 30%;
  border-bottom: 2px solid #030;
}

#contactform td{
  width: 60%;
  text-align: left;
  padding-left: 5%;
  border-bottom: 2px solid #030;
  border-right: 2px solid #030;
}

#form01, #form02,#form03, #form04, #form05{
  background-color: #93c965;
  padding-top: 10px;
  padding-bottom: 10px;
}

input {
  font-size: 1.6rem;
  padding: 5px;
}

textarea {
  font-size: 1.6rem;
  width: 70%;
  padding: 5px;
  box-sizing: border-box;
  resize: none;
  vertical-align: bottom;
}

form span {
  color: #f00;
  font-size: 1.4rem;
  margin-left: 10px;
}

input[type="text"] {
  width: 70%;
}

select[name="reply"] {
  width: 70%;
}

input[type="submit"] {
  width: 100px;
}

.send {
  text-align: center;
  padding-top: 3px;
  padding-bottom: 3px;
}

#form1, #form2,#form3, #form4, #form5,#form6, #form7, #form8,#form9, #form10, #form11,#form12, #form13, #form14,#form15{
  background-color: #22be97;
  padding-top: 10px;
  padding-bottom: 10px;
}

th{
  text-align: center;
}

/* 会社概要 */
#companyprofile {
  margin-top: 30px;
  margin-bottom: 50px;
}

#companyprofile th {
  background-color: #398;
}

#companyprofile td {
  text-align: left;
  padding-left: 5%;
  }

/* 販売実績 */
.result img {
  width: 98%;
  height: auto;
}

.result1 {
  display: flex;
  margin-left: 1%;
  margin-top: 20px;
  margin-bottom: 30px;
}
.result11 {
  padding-left: 3px;
  margin-top: 30px;
  width: 80%;
}
.result12 {
  width: 50%;
}

.result2 {
  display: flex;
  margin-left: 1%;
  margin-top: 20px;
  margin-bottom: 30px;
}
.result21 {
  padding-left: 3px;
  margin-top: 30px;
  width: 80%;
}
.result22 {
    width: 50%;
}

.result3 {
  display: flex;
  margin-left: 1%;
  margin-top: 20px;
  margin-bottom: 30px;
}
.result31 {
  padding-left: 3px;
  margin-top: 30px;
  width: 80%;
}
.result32 {
  width: 50%;
}

/* 採用情報 */
#recruit1 th {
  background-color: #3aa;
  width: 20%;
}

#recruit2 {
  margin-bottom: 50px;
}

#recruit2 th {
  background-color: #599;
  width: 20%;
}

#recruit1 td, #recruit2 td {
  text-align: left;
  padding-left: 5%;
}

/* よくある質問 */
.question {
  display: flex;
}

/* SNS */
.sns {
  display: flex;
}
.x {
  width: 40%;
  padding-left: 5%;
  padding-right: 5%;
}
.x img {
  width: 90%;
}
.youtube {
  width: 40%;
  padding-left: 5%;
  padding-right: 5%;
}
.youtube img {
  width: 90%;
}


/*------ min-width:1146px ------*/
@media screen and (min-width: 1146px) {
.br1146 {
  display: none;
}

}
/*------ max-width:1146px ------*/
@media screen and (max-width: 1146px) {
h5 {
  line-height: 25px;
  padding-top: 20px;
  padding-bottom: 20px;
}
  }
/*------ max-width:1000px ------*/
@media screen and (max-width: 1000px) {
.pricelist {
  display: contents;
}

.list {
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 20px;
  padding-bottom: 10px;
  width: 70%;
  height: 100%;
}
.td1 {
  font-size: 1.2rem;
}
.price0 {
  padding-left: 5%;
  padding-right: 5%;
  width: 90%;
  height: auto;
  margin-bottom: 30px;
}
    }

/* レスポンシブ */
/*------ max-width:768px ------*/
@media screen and (max-width: 768px) {
.wrapper {
  width: 100%;
}

.content {
  flex-wrap: wrap;
}
nav {
  height: 35px;
}
nav ul li a {
  font-size: 1.2rem;
  padding-top: 5px;
}
nav ul li a:hover {
  height: 35px;
}
nav ul li:last-child a {
  border-right: none;
}

.local {
  margin-top: 0;
}
.nav {
  display: contents;
}

h1 {
  font-size: 4rem;
  padding-left: 6%;
  padding-top: 20px;
  padding-bottom: 15px;
}

h2 {
  font-size: 4rem;
  padding-left: 10%;
  margin-bottom: 30px;
}

h3 {
  font-size: 2.6rem;
  padding-left: 8%;
  margin-top: 30px;
  margin-bottom: 15px;
}

 h4 {
  font-size: 2.5rem;
  line-height: 30px;
  margin-bottom: 5px;
}

h5 {
  font-size: 3rem;
  padding-top: 5px;
  padding-bottom: 10px;
  line-height: 20px;
}

p {
  margin-bottom: 10px;
  font-size: 1.7rem;
  line-height: 1.5;
}
footer h2 {
  font-size: 2.5rem;
  margin-left: -5%;
  margin-top: 15px;
}

address {
  font-size: 1.5rem;
  padding-left: 3%;
  margin-top: -10px;
  margin-bottom: 5px;
}
.loop0 {
  display: none;
}
.loopa {
  display: none;
}.loopb {
  display: none;
}
.video {
  display: contents;
}

dl.info {
font-size: 1.55rem;
padding: 5px 15px;
height: 80px;
margin-bottom: 10px;
}
.info div {
margin-bottom: 5px;
padding: 5px 0;
}
.info dt {
width: 11em;
}
.info dd {
width: calc(100% - 11em);
}
.slidec {
  margin: 30px auto;
 }
.slide{
  width: 170px;
 }

table {
  height: 200px;
  font-size: 2rem;
}

#order{
  font-size: 1.15rem;
  margin-left: 8%;
  width: 84%;
}

#contactform  {
  font-size: 1.5rem;
  margin-left: 8%;
  width: 84%;
}

.colorlineup {
  width: 95%;
}

.ttt {
  width: 95%;
  margin-right: 5%;
}
.ttt img {
  width: 90%;
  margin-left: 5%;
  margin-right: 5cap;
  margin-top: 60px;
  justify-content: center;
  height: auto;
  border: 3px solid #123;
}
.cart02 img {
  border: 2px solid #321;
  width: 50%;
  margin-top: 50px;
  margin-left: 5%;
}
.expansion  {
  width: 60%;
}
.expansion img {
  border: 2px solid #123;
  width: 95%;
  padding-left: 4%;
  padding-right: 1%;
}
.color0 {
  padding-left: 5%;
  padding-top: 30px;
  display: flex;
}
.number {
  padding-left: 5%;
  padding-top: 30px;
  padding-bottom: 50px;
  display: flex;
  }

.p1500 {
  margin-bottom: 60px;
  margin-top: -30px;
  margin-left: 10%;
}

form span {
  font-size: 1.2rem;
  }

input[type="text"] {
  width: 60%;
}
  
.result img {
  width: 98%;
  height: auto;
  margin-bottom: 15px;
}

.result1 {
  display: contents;
  margin-left: 1%;
  margin-top: 20px;
  margin-bottom: 30px;
}
.result11 {
  padding-left: 0;
  margin-top: 30px;
  width: 100%;
}
.result12 {
  width: 70%;
  margin-left: 15%;
}

.result2 {
  display: contents;
  margin-left: 1%;
  margin-top: 20px;
  margin-bottom: 30px;
}
.result21 {
  padding-left: 0;
  margin-top: 30px;
  width: 100%;
}
.result22 {
  width: 70%;
  margin-left: 15%;
}

.result3 {
  display: contents;
  margin-left: 1%;
  margin-top: 20px;
  margin-bottom: 30px;
}
.result31 {
  padding-left: 0;
  margin-top: 30px;
  width: 100%;
}
.result32 {
  width: 70%;
   margin-left: 15%;
}

nav ul li a:hover {
  background-color: lightgoldenrodyellow
}

.t01:hover, .t02:hover, .t03:hover, .t04:hover, .t05:hover, .t06:hover{
  background: #fff;
}

li {
  display: contents;
} 

}

/*------ min-width:533px ------*/
@media screen and (min-width: 533px) {
  .br533 {
    display: none;
  }
  
  }

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

.content {
  display: block;
}

h1 {
  font-size: 3rem;
  padding-left: 5%;
  margin-top: 20px;
  padding-bottom: 15px;
}

h2 {
  font-size: 2rem;
  margin-top: 10px;
  margin-bottom: 10px;
}

h3 {
  font-size: 1.9rem;
  padding-left: 7%;
  margin-top: 10px;
  margin-bottom: 10px;
}

h4 {
  font-size: 1.8rem;
  line-height: 20px;
}

h5 {
  font-size: 2.5rem;
  padding-top: 3px;
  padding-bottom: 7px;
}

p {
  font-size: 1rem;
}

nav {
  height: 25px;
}

nav ul li a {
  font-size: 0.75rem;
  padding-top: 10px;
}
nav ul li a:hover {
  height: 25px;
}

.scroll-infinity__item {
  margin: 10px;
}

dl.info {
  font-size: 1.1rem;
  margin-bottom: 1px;
  padding: 3px 7px;
}
.info div {
margin-bottom: 1px;
padding: 3px 0;
}
.info dt {
  width: 9em;
}
.info dd {
  width: calc(100% - 9em);
}

.slidec {
  margin: 10px auto;
 }
.slide{
  width: 100px;
 }
footer h2 {
  font-size: 2rem;
  margin-left: -5%;
  margin-top: 15px;
}
address {
  font-size: 1.2rem;
  padding-left: 3%;
  margin-top: -5px;
  margin-bottom: 5px;
}

.logo {
  padding: 5%;
  margin-top: 5px;
}

.pricelistindex{
  margin-bottom: 30px;
}

.colorsizeindex{
  margin-bottom: 30px;
}

.orderindex {
  margin-bottom: 30px;
}

.onlinel {
  display: contents;
}

table {
  height: 150px;
  font-size: 1.3em;
}

.pricelist {
  display: contents;
}

.list {
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 10px;
  width: 80%;
  height: 100%;
}

.td1 {
  font-size: 1.1rem;
}
.price0 {
  padding-left: 5%;
  padding-right: 5%;
  width: 90%;
  height: auto;
  margin-bottom: 1px;
}

.colorlineup {
  width: 100%;
}

.ttt {
  display: none;
}
.cart02 img {
  border: 2px solid #321;
  width: 50%;
  margin-top: 10px;
  margin-left: 30%;
}
.expansion  {
  width: 95%;
}
.expansion img {
  border: 2px solid #123;
  width: 90%;
  padding-left: 0;
  padding-right: 0;
}
.p1500 {
  margin-bottom: 30px;
  margin-top: -30px;
  margin-left: 40%;
}
#order{
  font-size: 1.15rem;
  margin-left: 3%;
  width: 93%;
}

#contactform  {
  font-size: 1.5rem;
  margin-left: 3%;
  width: 93%;
}
#contactform {
  height: 550px;
}

input {
  font-size: 1rem;
  padding: 3px;
}

textarea {
  font-size: 1rem;
  padding: 2px;
}

input[type="text"] {
  width: 60%;
}

select[name="reply"] {
  width: 60%;
}

#order{
  font-size: 1.1rem;
  width: 90%;
  padding: 1px 2px;
  margin: 0;
  margin-left: 3%;
}

#contactform  {
  font-size: 1.1rem;
}
form span {
  font-size: 1rem;
}

.send {
  padding-top: 2px;
  padding-bottom: 2px;
}

.colortable {
  padding-left: 5%;
  padding-right: 5%;
  margin-top: -60px;
  margin-bottom: 50px;
  width: 40%;
}

.ttt img {
  margin-top: 120px;
}

input[type="text"] {
  width: 60%;
}

nav ul li a:hover {
  background-color: lightgoldenrodyellow
}

.t01:hover, .t02:hover, .t03:hover, .t04:hover, .t05:hover, .t06:hover{
  background: #fff;
}

}