@charset "utf-8";
html{
  -webkit-text-size-adjust: 100%;
}
body{
	padding: 0;
}
h2{
  font-size: 1.2em;
}
/* スクロールバーを非表示にする     -   */
body::-webkit-scrollbar{ display:none;}
body{-ms-overflow-style:none;}/* IE／Edge 
--------------------------------------- */
.container{
	padding:0px ; 
}
/* header --------------------------------------------*/
header{

}
.header-inner{
  position: relative;
  padding: 0;
  width: 100%;
  height: 100vh;
  text-align: center;
  background: url(images/header-02.jpg) no-repeat 70% 60%;
  background-size: cover;
  display: flex;
  flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
}
.header-inner-img{
  object-fit: none;
}
/*  logo   */
.header-inner h1.logo{
  position:absolute;
  top: 140px;
  padding-bottom: 50px;
  z-index: 2;
}
.header-inner h1.logo img{
  width:80%; 
}
/* catch-copy */
.header-inner .catch-copy{
  position: absolute;
  top: 58%;
  color: #fff;
  width: 80%;
  font-size:80%;
  line-height:1.1;
  z-index: 2;
}

/* nav ------------------------------------------*/
nav{
  position:relative;
  top: 2px;
  z-index: 3;
}
.nav-inner{
  margin-top: -140px;
  margin-bottom: 100px;
}
.nav-inner ul{
 	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.nav-inner li{
  width: 49%;
  border-radius: 4px;
	padding: 6px;
  margin-bottom: 2px;
  list-style: none;
	background-color: rgba(140,81,7,0.90);
  font-size: 80%;
}
.nav-inner a{
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  font-weight: bold; 
}
button{
	width: 3rem;
	padding: 5px;
	background-color: #FFFFFF;
	border-radius: 50%;
	border: solid 1px #261405;
	position:sticky;
	top: 93vh;
	margin-left: 85vw;
	z-index: 3;
	

}

/* section ---------------------- */
section{
}
/* main ----------------------------*/
main{
  width: 90vw;
	background-color: #fff;
	margin: 10px auto;
  padding: 5px;
}
main h2{
  padding: 4px;
}
article{
  background: rgba(255,255,255,1.00);
  color: #000000;
}
article h2{
  padding: 18px;
}
/* teiban */
.teiban,.moriawase{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;

  background-color: rgba(255,255,255,1.00);
} 
.teiban li{
  width: 50%;
  list-style: none;
}
.teiban p{
  width: 95%;
  line-height: 1.2em;
  padding: 5px 0px 30px 10px ;
}
.teiban p span{
  font-size:1.2em; 
  padding-left: 0.3em;
  line-height: 2em;
}
.teiban img{
  border: rgba(71,48,5,1.00) 5px solid;
  width: 98%;
}
/* osinagaki */
.osinagaki{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: #FFFFFF;
   
}
.osinagaki li{
	position: relative;
	width: 46%;
	list-style: none;
	text-align: right;
	background-color: #FFFFFF;
	color: black;
	margin: 4px 1%;
	padding: 5px 20px;
	line-height: 1.1em;
	border-radius: 10px 3px 3px;
	-webkit-box-shadow: 3px 3px 5px rgba(232,221,221,1.00);
	box-shadow: 3px 3px 5px rgba(232,221,221,1.00);
	background-image: -webkit-linear-gradient(282deg,rgba(255,255,255,1.00) 0%,rgba(129,76,7,1.00) 100%);
	background-image: -moz-linear-gradient(282deg,rgba(255,255,255,1.00) 0%,rgba(129,76,7,1.00) 100%);
	background-image: -o-linear-gradient(282deg,rgba(255,255,255,1.00) 0%,rgba(129,76,7,1.00) 100%);
	background-image: linear-gradient(168deg,rgba(255,255,255,1.00) 0%,rgba(129,76,7,1.00) 100%);
}
.osinagaki li:nth-child(5n+1){
  background-color: rgba(180,176,176,1.00); 
}
.osinagaki li:nth-child(6n+2){
  background-color: rgba(205,204,204,1.00); 
}
.osinagaki li span{
  font-size: 0.8em;
}
  .osinagaki li::before{
  content: "";
  display: block;
  width: 14px;
  height: 13px;
  background-color: black;
  position: absolute;
  top: 8px;
  left: 8px;
  border-radius: 50%;
  -webkit-box-shadow: inset 2px 2px 3px rgba(180,174,174,1.00);
  box-shadow: inset 2px 2px 3px rgba(180,174,174,1.00);
  }
/* moriawase */
.moriawase,.h2moriawase{
  background:rgba(255,255,255,1.00);

}
.moriawase{
}
.moriawase li{
  width: 95%;
  list-style: none;
  padding: 20px 0;

}
.moriawase img{
  width: 100%;
  border: rgba(255,255,255,1.00) 5px solid;
}
.moriawase p{
  padding-left: 1em;
}
.eigyou{
	background-color:#FFFFFF;
	padding:50px 0;
	margin: 4px auto;
}
/* ----------------------------------- */
.sidbaer h2{
	margin-bottom: 10px;
	margin-left: 1em;
}
.sidbaer aside{
	border: #EC8E10 5px solid;
}
.sidbaer img{
	width: 80%;
	display: block;
	margin: 10px auto;
}
footer{
	background-color:#F06410; 
	height: 80px;
}
footer .footer-inner{
	margin: 10px;
	color: white;
	text-align: center;
}
.footer-inner p{
	padding: 20px;
}
/*----------------------------------------------------------
      メデアクエリー  @media                                
-----------------------------------------------------------*/

@media (orientation: landscape){
  /* hrader ---------*/
  .header-inner{
    height: 100vh;
  }
.header-inner h1.logo{
  top: 40px;
}
  /* nav------------*/
  .nav-inner{
      margin-top: -36px;
  }
.nav-inner ul{
  flex-direction:row;
  align-items: center;
  text-align: center;
}
  .nav-inner li{
    width: 22.5%;
  }
  /*    */
  .osinagaki li{
    width: 31.2%;
  }
  .teiban li{
    width: 25%;
  }
  .moriawase li{
    width: 33%;
  }
}
/* ---------------------------------------------------------
                       end @media                            
----------------------------------------------------------- */




/*------------- slide ----------------------------------------------*/
#slider {
  position: absolute;
  top:0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.h1image {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  overflow: hidden;
  height: 100%;
}
.h1image:after {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.h1image:nth-child(2) {
  width: 100%;
  height: 0%;
}
.h1image:nth-child(4) {
  width: 100%;
  height: 0%;
}

.h1image:nth-child(1):after { background-image: url(" imges/h1-img-01.jpg") ; }
.h1image:nth-child(2):after { background-image: url(" imges/h1-img-04.jpg"); }
.h1image:nth-child(3):after { background-image: url(" imges/h1-img-02.jpg"); }
.h1image:nth-child(4):after { background-image: url(" imges/h1-img-03.jpg"); }

.h1image:nth-child(1) { animation: slide1 3.0s ease 2.1s forwards; }
.h1image:nth-child(2) { animation: slide2 3.0s ease 9.5s forwards; }
.h1image:nth-child(3) { animation: slide1 3.0s ease 14.5s forwards; }
.h1image:nth-child(4) { animation: slide2 3.0s ease 19.5s forwards; }

@keyframes slide1 {
  from { width: 0%; }
  to   { width: 100%; }
}

@keyframes slide2 {
  from { height: 0%; }
  to   { height: 100%; }
}
@keyframes slide-right {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0%); }
}

@keyframes reset-slide-right {
  from { transform: translateX(0%); }
  to   { transform: translateX(-100%); }
}

@keyframes slide-left {
  from { transform: translateX(100%); }
  to   { transform: translateX(0%); }
}

@keyframes reset-slide-left {
  from { transform: translateX(0%); }
  to   { transform: translateX(100%); }
}

@keyframes show-content {
  from { opacity: 0; }
  to   { opacity: 1.0; }
}

@keyframes disappear {
  from { opacity: 1.0; }
  to   { opacity: 0; }
}