@charset "UTF-8";

body,h1,h2,h3,h4,p,ul,ol{
  margin: 0;
  padding: 0;}

ul,li {list-style: none;}

a{text-decoration: none;}

* {box-sizing: border-box;} /* paddingとborderを幅と高さに含める */
img {object-fit: cover;}
body {font-family: 'LS-colorado ttf','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic';background-repeat:inherit;
  line-height: 1.8;
  color: rgb(0, 0, 0);}

  .wrapper{display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;}
  .logo {display: flex;flex-direction: column;width: 400px;height: 125px;border: black;border-style: solid;margin: 20px; background-color: #f4f4f4;    align-items: center;justify-content: space-evenly;border-radius: 10px;box-shadow: 12px 12px 2px 1px black;}
  .logo h1 {font-size: 55px;font-weight: bolder;text-decoration: none;list-style: none;color: black;}
  .logo h1:hover{text-decoration:none;transition: all 1s ease-out;color: #f5be49;}
  .logo h5 {font-style: italic;}
  .nav {display: flex;flex-direction: row;width: 1100px;flex-wrap: wrap;margin: 60px 0 0 100px}
  .box {display: flex;flex-direction: column;width: 300px;height: 90px;border: 
   black;border-style: solid;margin: 20px; background-color: #f4f4f4;    
   align-items: center;justify-content: space-evenly;border-radius: 10px;box-shadow:
   12px 12px 2px 1px black;}
  
   .box a{list-style: none;text-decoration: none;transition: all 1s ease-out;color: rgb(19, 5, 5);font-size: 25px;font-weight: 600;}
   .box a:hover{transition: all 1s ease-out;color: #f5be49;}
  
  
  
   .sliderBox .bxslider img{width: 100%;}
   .items {display: flex;
    width: 1400px;
    flex-wrap: wrap;}
    .item-box {background-color: white;
      display: flex;
      margin-top: 40px;
      margin-left: 40px;
      flex-direction: column;
      width: 400px;
      height: 500px;
      border-style: solid;
      border-color: rgb(0, 0, 0);
      border-width: 2px;
      padding: 15px 15px 15px 15px;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: flex-end;
      backdrop-filter: blur(2px);
      border-radius: 10px;box-shadow:12px 12px 2px 1px black;}
  
  .item-box img { width: 350px;overflow: hidden;}
  .item-box h3 {color: rgba(54, 32, 32, 0.76);padding-top: 20px;}
  .item-box a {padding-top: 24px;}
  .headline {display: flex;padding-top: 70px;padding-bottom: 50px;}
.headline h2 {font-weight: bold;
margin-left: 30px;color: rgb(34, 0, 0);}
footer {
  position: fixed;
            padding: 10px 10px 0px 10px;
            bottom: 0;
            width: 100%;
            
            height: 40px;
            
 }
.tittle {margin-top: 30px;}
.tittle h1 {font-weight: bold;}
.items {display: flex;margin: 50px 0 20px 20px;}
.item {display: flex;border:black;border-style: solid;margin: 20px; background-color: #f4f4f4;border-radius: 10px;box-shadow:
  12px 12px 2px 1px black;}
  .inside {margin-top: 30px;}

.item img{width: 400px;height: 500px;}
.spec {margin-top: 20px;}
.topPage {
  /* display: none;  */
  position: fixed; 
  bottom: 20px; 
  right: 20px; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background-color: none; 
  color: white; 
  cursor: pointer; 
  padding: 15px; 
  border-radius: 10px; 
  font-size: 18px;
}

.topPage:hover {
  background-color: rgb(0, 0, 0);opacity: 0.2;
}
.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #f5be49;
  display:flex;
  justify-content: center;
  align-items: center;
}
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #Fff;
  animation: loader 2s infinite ease;
}
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
}