@charset 'utf-8';

html {
  text-align: center;
  min-width: 750px;
}
body {
  font-family:'Noto Sans JP',sans-serif;
  padding: 0;
  margin: 0 auto;
  letter-spacing: 0.1em;
  line-height: 1.9em;
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: #000;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

h1 {
  font-family: 'Noto Serif JP',serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 400;
  display: inherit;
  text-align: center;
  margin-bottom: 40px;
}
h2 {
  font-family:'Noto Sans JP',sans-serif;
  font-size: 17px;
  letter-spacing: 0.1em;
  font-weight: 400;
}

h3 {
  letter-spacing: 0.1em;
}
p {
  font-size: 15px;
  text-align: left;
}
* {
  margin: 0;
  padding: 0;
}

a{
  outline:none;
  text-decoration:none;
  color: inherit;
  -moz-transition:opacity 200ms ease-in-out;
  -o-transition:opacity 200ms ease-in-out;
    -webkit-transition:opacity 200ms ease-in-out;
  transition:opacity 200ms ease-in-out;
  }
  a:hover {
    opacity: 0.6;
  }

#wrapper {
  margin: 0 auto;
  text-align: center;
}

#contents {
  margin: 0 auto;
}



#logo{
  margin-top: 254px;
  margin-bottom: 180px;
  width: 396px;
  display: inline-block;
}

#navi {
  padding-top: 2px;
  margin: 0 auto;
  max-width: 750px;
}
#navi .contents {
  width: 200px;
  margin: 22px 19px;
  vertical-align: top;
  display: inline-block;
}

#topics{
  margin-top: 120px;
  margin-bottom: 20px;
  width: 690px;
  display: inline-block;
}


#section-news ul{
  width:660px;
  margin: 0 auto;
  padding:0
  font-family:'Noto Sans JP',sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #9b8718;
  text-align: left;
  letter-spacing: 0.1em;
  line-height: 1.9em;

}
#section-news ul li{
  list-style:none;
  border-bottom:2px dashed #9b8718;
  padding-bottom: 15px;
}
#section-news ul li+li{
  margin-top:17px
}
#section-news ul a{
  display:inline-block;
  vertical-align:top;
  padding-bottom:2px;
  color:inherit
}
#section-news ul a:hover{
  text-decoration:underline
}


#footer {
  margin: 110px 0 160px 0 ;
}


/* 要素が読み込まれて1秒後に、fadeinというアニメーションを3秒かけてlinearの進め方で実行する */
/* duration | timing-function | delay | name */
.element {
  animation: 2s linear 1s fadein;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  
  to {
    opacity: 1;
  }
}


@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}



/* 画面外にいる状態 */
.fadein {
    opacity : 0;
    transform : translate(0, 20px);
    transition : all 500ms;
    }

/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    }

.fade-elem{
  text-align: center;
  transition: .4s;
  transform: translateY(10px);
  opacity: 0;
  margin-bottom: 0px;
  width: 238px;
  display: inline-block;
}

.fade-elem:last-of-type{
  margin-bottom: 0;
}

.fade-elem:nth-of-type(2){transition-delay: .100s;}
.fade-elem:nth-of-type(3){transition-delay: .200s;}
.fade-elem:nth-of-type(4){transition-delay: .300s;}
.fade-elem:nth-of-type(5){transition-delay: .400s;}
.fade-elem:nth-of-type(6){transition-delay: .500s;}

.fade-up{
  transform: translateY(0);
  opacity: 1;
  width: 238px;
  display: inline-block;
}





#midashi{
  margin-top: 180px;
  margin-bottom: 76px;
  width: 674px;
  display: inline-block;
}

#message {
  margin: 0 auto;
  max-width: 750px;
}

#profile {
  margin: 0 auto 25px;
  max-width: 750px;  　
}

#abouttext {
  margin: 55px auto 62px ;
  width: 674px;
  font-family:'Noto Sans JP',sans-serif;
  font-size: 16px;
  line-height: 2em;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: #9b8718;
}

#shopinfo {
  margin: 92px auto 20px;
  max-width: 750px;  　
}


#section-shop ul{
  width:674px;
  margin: 0 auto;
  padding:0
  font-family:'Noto Sans JP',sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #9b8718;
  text-align: left;
  letter-spacing: 0.05em;
  line-height: 2.1em;
  border:2px dashed #9b8718;
}
#section-shop ul li{
  list-style:none;
  padding: 28px;
}
#section-shop ul li+li{
  margin-top:17px
}

#logo2 {
  margin: 100px auto 36px;
  max-width: 750px;  　
}

#hinmoku {
  margin: 0 auto 15px;
  max-width: 750px;  　
}

#nouhou {
  margin: 30px auto 14px;
  max-width: 750px;  　
}


#navi2 {
  padding-top: 2px;
  margin: 0 auto;
  max-width: 750px;
}
#navi2 .contents {
  width: 100px;
  margin: 120px 5px 140px 5px;
  vertical-align: top;
  display: inline-block;
}