/* すべてのページに適用される設定 */
html {
  font-size: 16px; 
  font-family: sans-serif; 
  scroll-behavior: smooth; 
}
*{
   box-sizing: border-box;
}
/* 四隅スペースを無くす */
body {
   margin: 0 0 0 0;
}
/* p li td 行間の高さ指定 */
p, li, td {
   line-height: 1.7;
}
a:link {
   color: #000;
   text-decoration: none;
}
a:visited {
   color: #000;
   text-decoration: none;
}
a:hover {
   color: #f07d34;
   text-decoration: underline;
}
a:active {
   color: #f07d34;
   text-decoration: underline;
}
img {
   max-width: 100%;
}
/* 横スクロール　*/
@keyframes loop {
   from{
      transform: translateX(0);
   }
   to {
      transform: translateX(-150%);
   }
} 
.scroll-list1 {
   /* position: absolute 重ね合わせ */
   background-image: url(../images/tatami-39.jpg);
   position: absolute;
   margin: 0px;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   height: 86%;
   overflow: hidden;
 /*  border: 2px solid; */
   padding: 0px;
/* スクロール数増減  */
   max-width: 1300px;
}
.scroll-list2 {
   display: flex;
   align-items: center;
   animation: loop infinite linear 60s both;
   li {
      min-width: 800px;
   }
}
/*  横スクロールここまで  */
.kasane {
   color: #000;
   text-align: center;
   font-size: xx-large;
   font-family: 'Courier New', Courier, monospace;
   text-shadow:0px 3px 0px #ffffff;
   /* 縦書き表示 */
   writing-mode: vertical-rl;
   padding: 30px 0 40px 550px;
   height: 450px;
   max-width: 100%;
}
/* すべてのページに適用 - ヘッダー */
 .header { 
  background-image: url(../images/favicon.png);
  background-repeat: no-repeat;
  /*写真サイズ変更*/
  background-size: 90px 90px;
  background-position: center 500%;
  padding: 20px 50px 0 50px;
  font-family: serif;
  font-size: larger;
  display: flex;
  justify-content: space-between;
}
.logo {
   text-align: center;
}
.nav ul {
   margin: 30px 0 0 0;
   padding: 0;
/* ドットを表示しない　*/
   list-style-type: none;
   display: flex;
   justify-content: center;
   gap: 40px;
   font-size: 1.1rem;
   background-color: burlywood; 
}
.nav a:link {
   color: #253958;
}
.nav a:visited {
   color: #253958;
}
.nav a:hover {
   text-decoration: none;
   color: gold;
}
.nav a:active {
   text-decoration: none;
}
.nav2 ul {
   background-image: url(../images/tatami-41.jpg);
   background-size: 1300px 1200px;
   padding: 50px;
   margin: 0, 0, 0, 0,;
   list-style-type: none;
   display: flex;
   justify-content: center;
   gap: 10px;
   font-size: 1.3rem;
   display: grid;
   /*  grid-template-columns: 1fr 1fr 1fr; */
   /* スマホ画面にあわせるための処理 */
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.nav2 a:link {
   color: #253958;
}
.nav2 a:visited {
   color: #253958;
}
.nav2 a:hover {
   text-decoration: none;
   opacity: 0.5;
}
.nav2 a:active {
   text-decoration: none;
}
.nav3 {
   background-image: url(../images/tatami-118.jpg);
   border-radius: 10%;
   margin: 10px 10px;
   padding: 0 0 20px;
   text-align: center;
   font-size: medium;
   font-weight: bold;
}
/*カーソルを合わせると画像が拡大する*/
.nav4 {
 transition: .3s;
}
.nav4:hover {
   filter: grayscale(0);
   transform: scale(1.1);
}
/* すべてのページに適用 - ヒーロー */
.hero {
   padding: 80px 0;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   color: #ffffff;
   text-align: center;
}
.hero.tatami {
   background-image: url(../images/tatami-175.jpg);
   /* 画面サイズ変更*/
   position: absolute;
   background-size: 1300px 700px;
   width: 1300px;
   height: 700px;
}
.hero.index {
   background-image: url(../images/tatami-20.jpg);
   /* 画面固定*/
  /* opacity: 0.4; */
  background-size: cover;
   text-shadow: rgba(0, 0, 0, 0.902) 10px 10px 5px; 
}
.hero.index2 {
   background-image: url(../images/tatami-24.jpg);
   text-align: center;
   padding: 800px 50px 0px 0px;
}
.hero.access {
   background-image: url(../images/tatami-57.jpg);
   /* 画面サイズ変更*/
   background-size: 1300px 700px;
}
.hero.tenpo {
   background-image: url(../images/tatami-6.jpg);
   /* 画面サイズ変更*/
   background-size: 1300px 700px;
}
.hero.kokusan {
   background-image: url(../images/tatami-33.jpg);
   /* 画面サイズ変更*/
   background-size: 1300px 700px;
}
.hero.washi3 {
   background-image: url(../images/tatami-36.jpg);
   /* 画面サイズ変更*/
   background-size: 1300px 700px;
}
.hero.menu {
   background-image: url(../images/tatami-22.jpg);
}
.hero.yokuaru {
   background-image: url(../images/tatami-29.jpg);
   background-size: 1300px 700px;
}
.hero.bfaf {
      background-image: url(../images/tatami-29.jpg);
      background-size: 1300px 700px;
}
.hero.igseko {
   background-image: url(../images/tatami-29.jpg);
   background-size: 1300px 700px;
}
.hero.nou {
   background-image: url(../images/tatami-19.jpg);
   background-size: 1300px 700px;
}
.hero.kakonou {
   background-image: url(../images/tatami-132.jpg);
   background-size: 1300px 700px;
}
.hero.contact {
   background-image: url(../images/tatami-5.jpg);
}
.hero.herinashi {
   background-image: url(../images/tatami-255.jpg);
   background-size: 1300px 700px;
}
.hero.fusuma {
   background-image: url(../images/tatami-219.jpg);
   background-size: 1300px 700px;
}
/* すべてのページに適用 - メイン */
/*main {
   margin: auto; 
   max-width: 2000px; 
}
main h2 {
   margin: 60px 0 20px 0; 
   border-bottom: 2px solid #253958; 
   padding: 0 0 5px 0; 
   color: #000;
   font-size: 1.3rem;
} */

/* すべてのページに適用 - フッター */
.gotop {
position: fixed;
bottom: 10px;
right: 10px;
background-size: 50px 50px;
width: 70px;
height: 70px;
}
.copyright {
   margin-top: 20px;
   margin-bottom: 0;
   padding-top: 30px;
   padding-bottom: 30px;
   color: #fff;
   text-align: center;
}

/* 個別のスタイル */
/* index.html */
.logo-whale {
   text-align: center;
}
.shop-info {
   border-collapse: collapse;
}
.shop-info th, .shop-info td{
   border: 1px solid #DBDBDB;
   padding: 20px;
}
.shop-info th {
   width: 112px;
   text-align: left;
   vertical-align: top;
}

/* menu.html */
.items {
   display: grid;
  /* grid-template-columns: 1fr 1fr 1fr; */
   /* スマホ画面にあわせるための処理 */
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 20px;
   padding: 20px 20px;
 } 
.items2 { 
   width: 100%; 
   aspect-ratio: 4 / 3; 
   object-fit: cover; 
   text-align: center;
 } 
.items3 {
    background-image: url(../images/tatami-39.jpg);
    background-size: cover;
    background-attachment: fixed;
  } 
.items4 {
   display: grid;
  /* grid-template-columns: 1fr 1fr 1fr; */
   /* スマホ画面にあわせるための処理 */
   grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
   gap: 20px;
   padding: 20px 20px;
 } 

/* contact.html */
form{
   margin: 0 auto;
   max-width: 640px;
}
input[type="text"], textarea {
   padding: 6px;
   width: 100%;
   font-size: 1rem;
}
textarea {
   height: 140px;
}
/* アクセス　acccess.html */
#location {
   padding: 0% 0;
}
#location .wrapper {
   display: flex;
   justify-content: space-between;
}
.location-info {
   text-align: center;
   font-size: xx-large;
   font-family: serif;
}
.location-info1 {
   font-family: serif;
   font-size: x-large;
   font-weight: bold;
   background-image: url(../images/tatami-42.jpg);
   /* 画像サイズ　*/
   background-size: 500px 300px;
   background-position: right;
   padding: 50px 50px 0 100px;
   /* 外枠のサイズ　*/
   width: 1300px;
   height: 300px;
}
   /* 横幅指定　*/
.location-map {
   width: 100%;
}
/* iframe */
iframe {
   width: 100%;
}
.kokusan1 {
   padding-top: 30px;
 /*  padding-left: 20px; */
}
.kokusan2 {
   padding-left: 20px;
  /* padding-bottom: 80px; */
}
/* ２カラム　メイン　*/
article {
   margin-top: 20px;
   width: 50%;
}
/* サイドバー */
aside {
   margin-top: 20px;
   margin-left: 70px;
   margin-bottom: 20px;
   width: 30%; 
}
/* サイドバー 商品一覧 */
aside a:hover {
   opacity: 0.6;
}
.omote  {
   text-align: center;
   display: flex; 
}
.omote1 {
   background-image: url(../images/tatami-40.jpg);
   background-size: 1400px 1000px;
   font-family: serif;
}
/* リンク範囲拡大*/ 
.omote a {
   display: block;
}
.yokuaru {
   background-image: url(../images/tatami-28.jpg);
   background-size: 1400px 1000px;
}
.yokuaru2 {
   text-shadow: rgba(0, 0, 0, 0.902) 10px 10px 5px;
   color: #ffffff;
   font-family: serif;
   font-size: x-large;
   font-weight: bold;
   border: 10px outset #66f034;
   border-radius: 20px;
   padding: 50px;
   box-shadow: 10px 10px 20px 12px #f07d34;
}
.yokuaru3 {
   background-image: url(../images/tatami-32.jpg);
   background-attachment: fixed;
   background-size: 1300px 1000px;
}
.yokuaru4 {
   text-align: center;
}
.youkoso {
   background-image: url(../images/tatami-37.jpg);
   background-attachment: fixed;
   background-size: 1300px;
   padding: 20px 100px 20px 100px;
   font-family: serif;
   font-size: x-large;
   font-weight: bold;
   color: #ffffff;
}
.youkoso1 {
   text-align: center;
   font-family: serif;
   font-size: 30px;
   font-weight: bold;
   padding: 30px 0 30px 0;
   background-color: beige;
}
.youkoso2 {
   background-image: url(../images/tatami-172.jpg);
   border-radius: 100px;
   background-size: 500px 300px;
   background-position: center;
   border: 3px solid grey;
   margin: 50px 30px 50px 300px;
   padding: 150px 10px;
   width: 500px;
   height: 300px;
   text-align: center;
   font-size: 30px;
   font-weight: bold;
   color: #ffffff;
   box-shadow: 0px 0px 8px 8px rgba(0,0,0,0.16);
   /* 横幅指定　*/
   flex-basis: 700px;
}
.youkoso3 {
   padding: 50px 30px 20px;
   margin: 20px 30px;
   color: #ffffff;
   font-size: larger;
}
.nokoto {
  background: linear-gradient(rgb(185, 211, 185), white,rgb(185, 211, 185)); 
  text-align: center;
  margin: 20px;
}
.nokoto1 {
   margin: 0px 100px 20px 100px;
   padding: 5px;
   font-family: serif;
   font-size: x-large;
   font-weight: bold;
}
.nokoto2 {
   border: 3px solid grey;
   border-radius: 20px;
   box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.16);
   border-color: greenyellow;
   padding: 5px;
   margin: 30px 20px;
   text-align: center;
   font-family: serif;
   font-size: x-large;
   font-weight: bold;
}
.nokoto3 {
   background-image: url(../images/tatami-115.jpg);
   background-position: right;
   background-size: 500px 300px;
   background-color: antiquewhite;
   border-radius: 20px;
   padding: 20px;
   margin: auto;
   width: 1000px; 
   height: 300px;
   box-shadow: 10px 5px 5px 10px #34f0a2;
}
.nokoto4 {
   background-image: url(../images/tatami-116.jpg);
   /*background-position: right;*/
   background-size: 500px 300px;
   background-color: antiquewhite;
   border-radius: 20px;
   padding: 20px;
   margin: auto;
   text-align: right;
   width: 1000px;
   height: 300px;
   box-shadow: 10px 5px 5px 10px #34f0a2;
}
.nokoto5 {
   background-image: url(../images/tatami-254.jpg);
   background-position: right;
   background-color: antiquewhite;
   border-radius: 20px;
   padding: 20px;
   margin: auto;
   background-size: 500px 300px;
   width: 1000px;
   height: 300px;
   box-shadow: 10px 5px 5px 10px #34f0a2;
}
.nokoto7 {
  background: radial-gradient(white 30%,rgb(117, 128, 0) 60%); 
  text-align: center;
  padding: 5px 10px 5px 10px;
  border-radius: 10%;
}
.nokoto8 {
   background: radial-gradient(white 30%,rgb(117, 128, 0) 60%); 
   margin: 50px 350px;
   padding: 5px 235px 5px 235px;
   border-radius: 10%;
 }
/* ピョンピョン跳ねる処理　*/
.osusume {
   color: #000;
   display: inline-block;
   position: relative;
   animation: osusume-animation 1s 100;
   padding: 10px;
   font-family: serif;
   font-size: x-small;
   font-weight: bold;
   width: 150px;
   height: 150px;
   text-align: center;
   margin:auto 525px;
}
/* ピョンピョン跳ねる処理　*/
@keyframes osusume-animation {
   0%, 50%, 100% {
      top: 0;
   }
   50% {
      top: -.8rem;
   }
   100% {
      top: -.5rem;
   }
   }
.hajimete {
   margin: 20px 100px 20px 100px;
}
.hajimete1 {
   border-bottom: 2px solid #253958;
}
.kansei {
   text-align: center;
   background-size: 1200px 360px;
   background-position: center;
   width: 950px;
   height: 360px;
   padding: 5px 20px 50px 350px;
   font-family: serif;
   font-size: x-large;
   font-weight: bold;
}
/*　画面左右リバース  */
/* @media (min-width: 600px) {
   .flex-reverse {
      flex-direction: row-reverse;
   }
} */
.nagare {
   border: 3px solid gray;
   border-radius: 10px;
   padding: 20px;
   margin: 20px;
}
.igusa {
   background-image: url(../images/tatami-45.jpg);
   background-size: cover;
   background-attachment: fixed;
   padding: 20px;
   width: 100%;
   height:4220px;
}
.igusa1 {
   background-image: url(../images/tatami-211.jpg);
   background-size: cover;
   padding: 20px;
   width: 1300px;
   height: 400px;
   }
.igusa2 { 
   background-color: antiquewhite;
   border-radius: 20px;
   padding: 10px 10px 100px 10px;
/* margin: 10px auto 左右真ん中上下１０ｐｘ開ける */
      margin:  10px auto;
      width: 700px;
      height: 550px;
}
.igusa3 {
      height: 1200px;
}
.igusa4 {
   float: left;
   margin-right: 50px;
   bottom: 100px;
   width: 150px;
   height: 150px;
}
.igusa5 { 
   background-color: antiquewhite;
   border-radius: 20px;
   padding: 10px 10px 100px 10px;
/* margin: 10px auto 左右真ん中上下１０ｐｘ開ける */
   margin:  10px auto;
   width: 1000px;
   height: 800px;
}
.igusa6 {
   background-image: url(../images/tatami-114.jpg);
   background-size: cover;
   background-attachment: fixed;
   padding: 20px;
   width: 100%;
   height:7200px;
}
.fontf {
   font-family: serif;
   font-size: x-large;
   font-weight: bold;
      }
.line {
   background:linear-gradient(white, green);
            }
.washi {
   display: grid;
    /* grid-template-columns: 1fr 1fr 1fr; */
    /* スマホ画面にあわせるための処理 */
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 35px;
   text-align: center;
   padding: 35px 70px;
 } 
.washi1 {
   background-image: url(../images/tatami-39.jpg);
   background-size: cover;
   background-attachment: fixed;
 } 
.washi2 {
   width: 200px;
   height: 200px;
  } 
.washi4 {
   margin: 60px 0 20px 0; 
   border-bottom: 2px solid #253958; 
   padding: 0 0 5px 0; 
   color: #000;
   font-size: 1.3rem;
}
.saigo {
   background-image:  url(../images/tatami-117.jpg);
   background-size: 1265px 700px;
   width: 100%;
   height: 700px;
   font-family: serif;
   font-size: x-large;
   font-weight: bold;
   text-align: center;
   padding: 40px;
   color:#fff;
  }
  .tenpo1 {
   font-family: serif;
   font-size: large;
   font-weight: bold;
   padding:10px;
   display: flex;
   z-index: 100;
   justify-content: space-between;
  }
  .tenpo2 {
   padding:20px 0px 0px 40px;
  }
  .tenpo3 {
   background-image:  url(../images/tatami-173.jpg);
   background-size: 500px 300px;
   width: 500px;
   height: 300px;
   padding:20px 0px 300px 200px;
  }
  .tenpo4 {
   background-image:  url(../images/tatami-125.jpg);
   background-size: 500px 300px;
   width: 500px;
   height: 300px;
   padding:20px 0px 300px 200px;
  }
  .tenpo5 {
   background-image:  url(../images/tatami-118.jpg);
   background-size: 100% 1215px;
   width: 100%;
   height: 1215px;
  }
  .tenpo6 {
   background-image:  url(../images/tatami-124.jpg);
   background-size: 500px 300px;
   width: 500px;
   height: 300px;
   padding:20px 0px 300px 200px;
  }
  .bfaf1 {
   padding: 20px;
   text-align: center;
   font-family: serif;
   font-size: medium;
   font-weight: bold;
  }
  .bfaf2 {
   background-size: 1200px 800px;
   width: 1200px;
   height: 800px;
   display: grid;
   padding: 40px 10px 30px 80px;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
   /*grid-template-columns: 1fr 1fr; */
   gap: 35px;
  }
  .bfaf3 {
   background-image: url(../images/tatami-45.jpg);
   margin: 10px 10px;
   padding: 10px 10px 20px 10px;
   text-align: center;
   font-size: x-large;
   font-weight: bold;
   font-family: serif;
   border-radius: 5%;
}
.bfaf4 {
   background-image:  url(../images/tatami-138.jpg);
   background-size: 1300px 900px;
   width: 100%;
   height: 4700px;
   background-attachment: fixed;
}
.nouhin1 {
   background-image:  url(../images/tatami-138.jpg);
   background-size: 100% 1115px;
   background-attachment: fixed;
   display: flex;
   width: 100%;
   height: 750px;
  }
.nouhin2 {
  padding: 50px 10px 50px 20px;
  width: 1200px;
  height: 800px;
  }
.nouhin3 {
   background-size: 100% 800px;
   border-radius: 3%;
   margin: 50px;
   padding: 20px;
   width: 550px;
  height: cover;
  background-image:  url(../images/tatami-40.jpg);
   }
  .shirase1 {
      margin: 10px;
      padding: 10px 10px 150px 10px;
   }
  .shirase2 {
      float: left;
      margin-right: 0.8em;
      margin-bottom: 1.0em;
      border-radius: 12px;
      box-shadow: rgba(0,0,0,0.7) 3px 3px 10px;
      width: 250px;
      height: 150px;
   }
   .shirase3 {
      margin: 10px 230px;
      padding: 10px 50px;
      text-align: center;
      background-size: 800px 500px;
      width: 800px;
      height: 500px;
     }
     .shirase4 {
      padding: 5px 250px;
      font-weight: 200;
     }
     .kakonou1 {
      background-image:  url(../images/tatami-238.jpg);
      background-size: 1300px 700px;
      width: 100%;
      height: 250px;
      padding: 40px 60px;
      color: #ffffff;
      text-align: center;
      font-size: x-large;
      font-weight: bold;
      font-family: serif;
      /*opacity: 0.3; */
      text-shadow:1px 4px 1px #000 
     }
     /* 次ページ表示　*/
     .pagination {
       display: flex;
       justify-content: center;
       font-family: 'Courier New', Courier, monospace;
       font-size: 1.5rem;
       text-align: center;
   /* ドットを表示しない　*/
       list-style-type: none;
     }
     .pagination a:hover {
      background: #34f0a2;
      color: #fff;
     }
     .pagination a,
     .pagination .current {
      border-radius: 50%;
      padding-top: 0px;
      display: inline-block;
      width: 36px;
      height: 36px;
      margin-bottom: 20px;
     }
     .pagination .current {
      background: #ccc;
     }
    /* 次ページ表示ここまで　*/
    .herinashi1 {
      padding: 50px 10px 50px 40px;
      font-family: serif;
      text-align: center;
      }
    .herinashi2 {
      padding-top: 50px;
      font-family: serif;
      text-align: center;
      }
    .herinashi3 {
      padding-left: 50px;
      font-family: serif;
      width: 750px;
      }
    .herinashi2a {
      padding-top: 50px;
      font-family: serif;
      text-align: center;
      }
    .herinashi3a {
      padding-left: 50px;
      padding-right: 10px;
      font-family: serif;
      width: 750px;
      text-align: left;
      }
    .herinashi4
       {
       /*  float: left; */
       margin-top: 50px;
       margin-left: 10px;
       margin-right: 0.8em;
       margin-bottom: 1.0em;
       border-radius: 20px;
       box-shadow: rgba(57, 38, 126, 0.196) 3px 3px 10px;
       width: 400px;
       height: 300px;
      }
     .herinashi4a
       {
       /*  float: left; */
       margin-top: 50px;
       margin-left: 10px;
       margin-right: 0.8em;
       margin-bottom: 1.0em;
       border-radius: 20px;
       box-shadow: rgba(57, 38, 126, 0.196) 3px 3px 10px;
       width: 400px;
       height: 300px;
      }
    .herinashi5  {
       background-image: url(../images/tatami-251.jpg);
       background-size: 1300px 1250px;
       font-family: serif;
      }
    .herinashi6  {
       display: flex; 
      }
    .herinashi7 {
       display: grid;
        /* grid-template-columns: 1fr 1fr 1fr; */
         /* スマホ画面にあわせるための処理 */
       grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
       gap: 40px;
       padding: 40px 40px;
       background-image: url(../images/tatami-39.jpg);
       background-size: cover;
       background-attachment: fixed;
       }
    .herinashi8  {
         text-align: center;
         display: flex; 
      }
    .herinashi9 {
       background-image:  url(../images/tatami-238.jpg);
       background-size: 1300px 700px;
       width: 100%;
       height: 280px;
       padding: 40px 60px;
       color: #ffffff;
       text-align: center;
       font-size: x-large;
       font-weight: bold;
       font-family: serif;
         /*opacity: 0.3; */
       text-shadow:1px 4px 1px #000 
        }
    .herinashi10 {
       padding: 50px 10px 50px 40px;
       font-family: serif;
       text-align: center;
       font-size: small;
       background-color: antiquewhite;
         }
    .fusuma1 {
       background-image: url(../images/tatami-211.jpg);
       background-size: 1400px 1000px;
       text-align: center;
       font-family: serif;
       padding: 20px;
         }
.fusuma2 {
   padding: 20px 80px;
         }
.fusuma3 {
   background-image: url(../images/tatami-266.jpg);
   background-size: 1100px 600px;
   margin: 10px 0px 0px 90px;
   border-radius: 50%;
   width: 1100px;
   height: 600px;
   text-align: center;
   font-family: serif;
  /* display: flex;
   padding-left: 50px; */
         }
.fusuma4 {
   display: grid;
 /* grid-template-columns: 1fr 1fr 1fr; */
 /* スマホ画面にあわせるための処理 */
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 20px;
   padding: 20px 20px;
   margin: 30px 30px;
       }
.fusuma5 {
   margin: 5px 230px 30px;
  }
.fusuma6 {
   width: 150px;
   height: 80px;
  }   
.fusuma7 {
   background-image:  url(../images/tatami-267.jpg);
   background-size: 1300px 700px;
   width: 100%;
   height: 550px;
   padding: 40px 60px;
   color: #000;
   text-align: center;
   font-size: x-large;
   font-weight: bold;
   font-family: serif;
   /*opacity: 0.3;*/
   text-shadow:1px 4px 1px #ffffff 
    }  
  /* スマートフォン画面用CSS  */
@media screen and (max-width: 640px) {
.header { 
  /*写真サイズ変更*/
   background-size: 50px 50px;
   background-position: center 90%;
   padding: 30px 10px 0 10px;
   font-family: serif;
   font-size: medium;
}
  /* ナビメニュー 縦２列 */
.nav ul {
   flex-wrap: wrap;
   gap: 20px;
}
.nav2 ul {
   background-size: 2500px 2400px;
   width: 100%;
   height: 2400px;
}
.scroll-list1 {
   max-width: 450px;
   height: 62%;
   padding: 0;
}
.hero.tatami {
   /* 画面サイズ変更*/
   background-image: url(../images/tatami-261.jpg); 
   background-size: 600px 400px;
   width: 100%;
   height: 400px;

}
.kasane {
   text-align: center;
   font-size: x-large;
   font-family: 'Courier New', Courier, monospace;
   text-shadow:0px 3px 0px #ffffff;
   writing-mode: vertical-rl;
   padding: 30px 0 20px 130px;
   height:400px;
   max-width: 100%;
}
.igusa {
   background-size:800px 1200px;
/*スマホ用背景画像スクロール*/
   /*attachment fixed解除*/
   background-attachment: scroll;
   background-repeat: repeat;  
/*スマホ用背景画像スクロールここまで*/
   padding: 5px;
   width: 100%;
   height: 2620px;
   margin: auto;
   font-size: small;
   font-weight: normal;
}
.igusa1 {
   background-size: 800px 1200px;
   /*background-size: cover;*/
   padding: 15px;
   width: 100%;
   height: 580px;
}
.igusa2 { 
   background-color: antiquewhite;
   border-radius: 20px;
   padding: 7px;
/* margin: 10px auto 左右真ん中上下１０ｐｘ開ける */
   margin:  10px auto;
   width: 100%;
   height: 400px;
}
.igusa3 {
   height: 600px;
}
.igusa4 {
   float: left;
   margin-right: 5px;
   bottom: 10px;
   width: 45px;
   height: 45px;
}
.igusa5 { 
   background-color: antiquewhite;
   border-radius: 20px;
   padding: 7px 5px 100px 5px;
/* margin: 10px auto 左右真ん中上下１０ｐｘ開ける */
   margin: auto;
   width: 100%;
   height: 600px;
}
.igusa6 {
   background-image: url(../images/tatami-114.jpg);
   background-size: 1200px 1200px;
/*スマホ用背景画像スクロール*/
   background-attachment: scroll;
   background-repeat: repeat;  
/*スマホ用背景画像スクロールここまで*/
   padding: 5px;
   width: 100%;
   height:9150px; 
   margin: auto;
   font-size: small;
   font-weight: normal;
}
.hajimete {
   margin: 20px;
}
.nokoto1 {
   background-size: cover;
   font-family: serif;
   font-size: small;
   font-weight: normal;
   margin: 5px;
}
.nokoto6 {
   text-shadow: rgba(0, 0, 0, 0.902) 10px 10px 5px;
   font-size: large;
   color: #ffffff;
}
.nokoto8 { 
   margin: 50px 110px;
   padding: 5px 60px 5px 60px;
   border-radius: 10%;
 }
.nagare {
   border: 3px solid gray;
   background-size: cover;
   border-radius: 10px;
   width: 100%;
   padding: 1px;
   margin: 1px;
}
.youkoso {
   background-attachment: scroll; 
   background-size: cover;
   width: 100%;
   padding: 20px 10px 20px 10px;
   font-family: serif;
   font-size: small;
   font-weight: normal;
   color: #fff;
}
.youkoso2 {
   border-radius: 100px;
   background-size: 250px 200px;
   background-position: center;
   border: 3px solid grey;
   margin: 20px 80px 20px 80px;
   padding: 60px 10px;
   width: 200px;
   height: 200px;
   text-align: center;
   font-size: 30px;
   font-weight: bold;
   box-shadow: 0px 0px 8px 8px rgba(0,0,0,0.16);
   /* 横幅指定　*/
   flex-basis: 250px; 
}
.youkoso3 {
   padding: 170px 10px 10px;
   margin: 10px;
}
.location-info1 {
   /* 画像サイズ　*/
   background-size: 500px 300px;
   background-position: bottom;
   padding: 50px 50px;
   /* 外枠のサイズ　*/
   width: 500px;
   height: 600px;
}
.kansei {
   text-align: center;
   background-size: 600px 300px;
   background-position: center;
   width: 100%;
   height: 300px;
   padding: 50px 50px;
   font-family: serif;
   font-size: small;
   font-weight: normal;
}
.nokoto {
   font-size: medium;
}
.nokoto3 {
   background-size: 500px 300px;
   padding: 20px;
   text-align: center;
   margin: auto;
   width: 100%; 
   height: 300px;
   color: #fff;
}
.nokoto4 {
   background-size: 500px 300px;
   padding: 20px;
   text-align: center;
   margin: auto;
   width: 100%;
   height: 300px;
   color: #fff;
}
.nokoto5 {
   border-radius: 20px;
   padding: 20px;
   text-align: center;
   margin: auto;
   background-size: 500px 300px;
   width: 100%;
   height: 300px;
   color: #fff;
}
.yokuaru2 {
   font-size: x-large;
   text-shadow: none;
   color: #000;
}
.yokuaru3 {
   background-image: url(../images/tatami-211.jpg);
   /*スマホ用背景画像スクロール*/
   background-attachment: scroll;
   background-repeat: repeat;  
/*スマホ用背景画像スクロールここまで*/
  /* background-attachment: fixed; */
   background-size: 800px 1200px;
  /* スマホ用fixed設定 */
  /* width: 100%; */
  /* height: 120vh; */
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  /* z-index: -1; */
  /* display: block; */
  /* background-size: cover; */
  /* background-position: center; */
}
.kokusan1 {
   padding-top: 5px;
 /*  padding-left: 20px; */
}
.kokusan2 {
   padding-left: 5px;
  /* padding-bottom: 80px; */

}
.omote  {
   margin: 5px;
   background-size: 500px 300px;
}
.omote1 {
   background-size: 700px 700px;
}
.items {
  /* grid-template-columns: 1fr 1fr 1fr; */
   /* スマホ画面にあわせるための処理 */
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 10px;
   padding: 10px 10px;
 } 
 .items2 {
   font-size: x-small;
 } 
 .items3 {
   background-image: url(../images/tatami-46.jpg);
   background-size: 900px 800px;
   /*スマホ用背景画像スクロール*/
   background-attachment: scroll;
   background-repeat: repeat;  
/*スマホ用背景画像スクロールここまで*/
   font-size: x-small;
 } 
 .items4 {
   /* grid-template-columns: 1fr 1fr 1fr; */
    /* スマホ画面にあわせるための処理 */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    padding: 10px 10px;
  } 
 .washi {
   display: grid;
    /* grid-template-columns: 1fr 1fr 1fr; */
    /* スマホ画面にあわせるための処理 */
   grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
   gap: 30px;
   padding: 30px 20px;
   margin: auto;
   background-size: 500px 300px;
   text-align: center;
 }
 .washi1 {
   background-image: url(../images/tatami-39.jpg);
   background-size: 1310px 1710px;
   background-attachment: scroll; 
 }
 .washi2 {
   width: 180px;
   height: 180px;
 }
 .osusume {
   color: #000;
   display: inline-block;
   position: relative;
   animation: osusume-animation 1s 100;
   padding: 10px;
   width: 120px;
   height: 120px;
   text-align: center;
   margin:auto 150px;
}
.saigo {
   background-image: url(../images/tatami-119.jpg);
   font-family: serif;
   font-size: medium;
   font-weight: bold;
   background-size: 100% 550px;
   padding: 20px;
   width: 100%;
   height: 550px;
}
.tenpo1 {
   font-family: serif;
   font-size: medium;
   font-weight: bold;
   padding:10px;
   /* display flex 解除*/
   display: block;
  }
  .tenpo2 {
   padding:5px 0px 0px 5px;
  }
  .tenpo3 {
   background-size: 100% 250px;
   width: 100%;
   height: 250px;
   padding: 5px 5px 0px 5px;
  }
  .tenpo4 {
   background-size: 100% 250px;
   width: 100%;
   height: 250px;
   padding: 5px 5px 0px 5px;
  }
  .tenpo5 {
   background-image:  url(../images/tatami-118.jpg);
   background-size: 100% 1650px;
   width: 100%;
   height: 1570px;
  }
  .tenpo6 {
   background-size: 100% 250px;
   width: 100%;
   height: 250px;
   padding: 5px 5px 0px 5px;
  }
  .bfaf1 {
   font-size: small;
  }
  .bfaf2 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
   gap: 10px;
   margin: auto;
   padding: 5px 5px 10px 5px;
   text-align: center;
   background-size: 100% 100px;
   width: 100%;
   height: 100px;
  }
  .bfaf3 {
   font-size: x-small;
   padding: 5px 5px 10px 5px;
}
  .bfaf4 {
/*スマホ用背景画像スクロール*/
   background-attachment: scroll;
   background-repeat: repeat;  
/*スマホ用背景画像スクロールここまで*/
   background-size: 100% 1200px; 
   width: 100%; 
   height: 1830px; 
}
  .nouhin1 {
 /*スマホ用背景画像スクロール*/
    background-attachment: scroll;
    background-repeat: repeat;  
 /*スマホ用背景画像スクロールここまで*/
   background-size: 100% 1200px;
   display: block;
   width: 100%;
   height: 1100px;
  }
  .nouhin2 {
   padding: 10px;
   width: 430px;
   height: 400px;
   }
   .nouhin3 {
    border-radius: 3%;
    margin: 10px;
    padding: 10px;
    width: 410px;
   height: 600px;
   background-image:  url(../images/tatami-40.jpg);
    }
    .shirase1 {
      margin: 10px;
      padding: 5px 5px 70px 5px;
   }
  .shirase2 {
      float: left;
      margin-right: 0.8em;
      margin-bottom: 1.0em;
      width: 140px;
      height: 100px;
   }
   .shirase3 {
      margin: 5px 5px;
      padding: 5px 5px;
      text-align: center;
      background-size: 300px 200px;
      width: 450px;
      height: 300px;
     }
     .shirase4 {
      padding: 5px 10px;
      font-weight: 100;
     }
     .kakonou1 {
      background-size:cover;
      width: 100%;
      height: 300px;
      padding: 25px 40px;
      color: #ffffff;
      text-align: center;
      font-size: large;
      font-weight: bold;
      font-family: serif;
      /*opacity: 0.4;*/
      text-shadow:1px 4px 1px  #000
     }
     .herinashi1 {
      padding: 50px 10px 50px 40px;
      font-family: serif;
      font-size: x-large;
      text-align: center;
      }
     .herinashi2 {
      padding: 20px;
      background-size: 800px 700px;
      width: 100%;
      text-align: center;
      }
    .herinashi3 {
      padding: 20px;
      background-size: 800px 700px;
      width: 100%;
      }
    .herinashi2a {
      padding: 20px;
      background-size: 800px 700px;
      font-family: serif;
      text-align: center;
      width: 100%;
      }
    .herinashi3a {
      padding: 20px;
      background-size: 800px 700px;
      font-family: serif;
      width: 100%;
      }
     .herinashi5  {
      width: 100%;
      background-image: url(../images/tatami-46.jpg);
      background-size: 900px 800px;
      background-repeat: repeat;
     }
     .herinashi6  {
      display: block;
     }
     .herinashi7 {
      /* grid-template-columns: 1fr 1fr 1fr; */
       /* スマホ画面にあわせるための処理 */
       grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
       gap: 10px;
       width: 100%;
       padding: 10px 10px;
       background-image: url(../images/tatami-46.jpg);
       background-size: 900px 800px;
       /*スマホ用背景画像スクロール*/
       background-attachment: scroll;
       background-repeat: repeat;  
    /*スマホ用背景画像スクロールここまで*/
       font-size: x-small;
     } 
     .herinashi8 {
      display: block;
   }
    .herinashi9 {
      background-size:cover;
      width: 100%;
      height: 420px;
      padding: 25px 40px;
      color: #ffffff;
      text-align: center;
      font-size: large;
      font-weight: bold;
      font-family: serif;
      /*opacity: 0.4;*/
      text-shadow:1px 4px 1px  #000
     }
     .herinashi10 {
      padding: 10px 10px 10px 10px;
      font-family: serif;
      text-align: center;
      font-size: small;
      background-color: antiquewhite;
      }
      .fusuma2 {
         padding: 5px 5px;
      }
      .fusuma3 {
         background-size: 800px 400px;
         margin: 5px 0px 0px 5px;
         border-radius: 50%;
         width: 400px;
         height: 400px;
         text-align: center;
         font-family: serif;
         font-size: small;
        /* display: flex;
         padding-left: 50px; */
         }
       .fusuma5 {
         margin: 5px 5px;
         font-size: xx-small;
         }
       .fusuma6 {
         width: 80px;
         height: 50px;
           } 
       .fusuma7 {
         background-size:cover;
         width: 100%;
         height: 1200px;
           }
}