@charset "utf-8";
html{
font-size: 62.5%;}
body{

line-height: 1.6;}
html,body,h1,h2,h3,h4,p,ul,li {
  margin: 0;
  padding: 0;
 
}.deau{
    box-sizing: border-box;
    width:100%;
    margin: 0;
    padding:5% 2.5%;
    text-align: justify;
position: relative;

  }
  
  .deau::before{
    position: absolute;
    top:0;
    left: 0;
    display: block;
    width:100%;
    height:100%;
    content: '';
    background-color:rgba(243, 223, 156, 0.15) ;
    background-image: linear-gradient(to top, rgba(240, 204, 237, 0.1) 0%, rgba(255,255,255, .1) 80%, rgba(255,255,255, .6) 99%);
    z-index: -1;
  }
  
  
  
.deau h2{
  
  margin-left: -100%;
  margin-bottom:.5em;
  width:100%;will-change:animation;
  animation:deau-h2 3s forwards;
font-size: 1.8rem;
}
@keyframes deau-h2{
  from{
    margin-left: -110%;
    
    }
  to{
    margin-left: 0;
    
  }
}
  .deau p{
    width:100%;
    margin-left: 110%;will-change:animation;
    animation: deau-p 6s forwards;
  }
@keyframes deau-p{
  from{
    
    margin-left:100%;
    
  }
  to{
    
    margin-left: 0;
    
  }
}
.topics-title{position: absolute;
top:0;
left:40%;
z-index: -1;

transform:perspective(5px)
              rotateX(2deg) skew(-5deg, -5deg);
font-size: 10rem;font-weight:bolder;letter-spacing: 0;
text-shadow:1px 1px 0 #fffafd,-1px 1px 0 #fffafd,1px -1px 0 #fffafd,-1px -1px 0 #fffafd;
color: rgb(241, 226, 235,.1);
}
.manabi-box label {
   cursor :pointer;
   display: inline-block;
  position: relative;
   margin: 1em auto;
}

.manabi-box input {
  display: none;
}
.manabi-box .hidden-show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 1s;
}

.manabi-box input:checked ~ .hidden-show {
  padding: 0;
  height: auto;
  opacity: 1;
  text-align: justify;
}
.manabi-box{
  width:100%;
  text-align: center;
  margin:1em 0 5em 0;
position: relative;

}
.manabi-h2g{
width: 95%;
margin: 1em auto;
text-align: justify;

border-bottom: rgba(241, 173, 149, 0.5) 1px solid;}
.manabi-h2g h2{
position: relative;
margin-bottom: 1em;}
.manabi-h2g h2::before{
content: '';
display: block;
position: absolute;
top:-.5em;
left:0;
width: 2em;
height: 2em;
border-radius: 50%;
background-color: rgba(158, 238, 238, 0.3);
filter: blur(2px);
z-index: -1;
}
.manabi-h2g p{
margin:1em auto ;}
.manabi-h2g span{
display: block;
font-size: 1.4rem;}
.manabi-title{
margin-top: 5em;}
.manabi-title p, .manabi-link{
  text-align: center;margin: .5em;
}
/*↓学びのこころが短いため、157新規はhtmlファイルで.hidden-showを削除した。.hidden-showを復活させたら.manabi-p{
  margin: 0 .5em;}のみの記述をする*/
.manabi-p{
  box-sizing: border-box;
width:95%;
max-width:600px;
margin: 1em auto;
  height: auto;
  padding: 2em;
line-height: 2;
text-align: justify;
}
 .manabi-link a{
    letter-spacing: .1em;
}

.manabi-link a::after,.t-cell a::after,.kinenkan-box a::after,.kaitori a::after{
  content: '\0bb';
}



.info{
  width:100%;
  box-sizing: border-box;
  padding:2em .5em;
  margin:-1.5em 0 3em 0;
  background: rgba(237, 237, 228,.3);
}

.info h3{
  font-size: 1.6rem;
  margin: .5em 0 1em 1.5em;

}


.info > h3{margin-bottom:2em;
margin-top:2em;}
.info h3 span:first-of-type{
    font-size: .8em;
  display: block;
  width:19em;
  text-align: center;
  
  color: #fff;
  padding:2px;
  box-sizing: border-box;
  margin: 6em 0 2em -2em;
    transform:rotate(-5deg) translateX(-3em);
  
}
.info h4{
margin: 0 0 1em 5em;
}
.attention{
width:12em;background-color:  rgb(253, 3, 86);

}
.present{
width:12em;background-color: rgba(228, 135, 28, 0.8);
}
.done{
  width:8em;background-color:darkgreen;
}
.attention2{
background-color: #5116af;}
.info p{
width:90%;
margin: 0 0 0 auto;
text-align: justify;}
.info div{
margin-bottom: 2em;}

.info > p{
width:100%;
margin-bottom: 1em;
text-align: left;
font-size: 1.8rem;
letter-spacing: .1em;
border-bottom: rgba(150, 161, 147, 0.3) 1px solid;
}

.sakuhin-index{
  width:100%;
  margin:1em 0 0 0;
position: relative;
background: #fff;
overflow: hidden;
}
.s-i-title{
font-size: 1.8rem;
margin-left: 1em;
}
.sakuhin-index > ul{
position: relative;
overflow: hidden;
z-index: 1;
  margin: 1em 0 1em 2em;
display: -ms-flexbox;
  display: flex;
  align-content: space-between;
  flex-direction: row;
  scroll-snap-type: x mandatory;
  
    border:rgba(250,250,250,1) 1px solid;
  padding:.5em 1em;
  box-sizing: border-box;
  overflow-x:scroll;
background: rgba(255,255,255,.5);
 

}

.index-cell{
  
  height:180px;
margin-right:1em;
box-sizing: border-box;

  
  text-align: center;
  border:rgba(233, 245, 247, 1) 1px solid;
  scroll-snap-align: center;


  box-shadow: 4px 2px 8px rgba(199, 214, 217,.3);
  }
.sakuhin-box a{
  display: block;
  width: 180px;
flex:0 0 180px;
margin-right:1em;
box-sizing: border-box;
}

  .index-cell h4{
    height:3em;
    padding-top: .5em;
    width:100%;
    font-size: 1.6rem;
    letter-spacing: .2em;
    line-height: 1;
    background:rgba(233, 245, 247, 1);
    text-align: center;

  }
.index-cell h4 span{
display: block;font:.9em lighter;
margin-top: 2px;
font-family: inherit;
letter-spacing: .1em;
}
.sakuhin-box a:hover .index-cell h4 {
background:rgb(9, 94, 143);
color: white;
transition : 1s;
}
.shinki{
  background-image: url("https://www.nagaragawagarou.com/visualmuseum/oukyo191kame-i.jpg") ;
background-size: cover;
}
.nihonga1{
background-image: url("https://www.nagaragawagarou.com/visualmuseum/fuku811mikan-i.jpg") ;
background-size: cover;}
.nihonga2{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/bakusen-kikyou-i.gif");
    background-size: cover;

}
.nihonga3{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/ichiyou1002yukaze-i.jpg");
    background-size: cover;

}
.kaiga1{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/saikou143take-i.jpg");
    background-size: cover;
}
.kaiga2{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/shitsushitsu194sakura-i.jpg");
    background-size: cover;
}
.rekishi1{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/kantenjyu-yakei-i.jpg");
    background-size: cover;
}
.rekishi2{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/houseki-syouten8.gif");
    background-size: cover;
}
.buke{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/masamune507shokan-i.jpg");
    background-size: cover;
}
.rinzai{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/hakuin280daruma-i.jpg");
    background-size: cover;
}
.soutou{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/gesshu294mu-i.jpg");
    background-size: cover;
}
.oubaku{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/kakutei156take-i.jpg");
    background-size: cover;
}
.joudo{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/bennei300amida-i.jpg");
    background-size: cover;
}
.shinshuukyou{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/deguchinao198ushitora-i.jpg");
    background-size: cover;
}
.kinseibungaku{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/haiku-souhuku6.gif");
    background-size: cover;
}
.tetsugaku{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/yasunari-geijyutsu-i.jpg");
    background-size: cover;
}
.choukoku{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/rokubei-tessai7.gif");
    background-size: cover;
}
.youga{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/hirosuke134seibutsu-i.jpg");
    background-size: cover;
}
.shoka{
    background-image: url("https://www.nagaragawagarou.com/visualmuseum/yukei-bou-i.jpg");
    background-size: cover;
}
.stick-arrow {
position: relative;
  width: 250px;
  height: 5px;
  margin-left: 3em;
  border-bottom: 2px solid #f5e6f2;
  border-right: 3px solid #f5e6f2;
  transform: skew(45deg);
}
.stick-arrow::before{
content: '上のバーで横にスクロール、またはスワイプしてください。';
position: absolute;top:-.8em;left: -2em;
width:100%;
font-size:1.1rem;
transform: skew(-55deg);}
@media (orientation: portrait) {
.stick-arrow::before{content: '横にスワイプしてください。';}
}
.sakuhin-index div{
width:100%;
margin: 3em 0 1em 0;
padding:5px;
box-sizing: border-box;
line-height: 1.5;
text-align:center;
}
.sakuhin-index div:last-of-type{
margin-bottom: 0;
}

.webmuseum,.tanzaku{
position: relative;
}
.webmuseum::before{
content: '';
display: block;
position:absolute;
top:-20px;
left:30%;
width:100px;
height:100px;
border-radius: 100px;
background-color:rgba(237, 233, 247,.5);
}

.tanzaku::before{
content: '';
display: block;
position:absolute;
top:-20%;
left:60%;
width:100px;
height:100px;
border-radius: 100px;
background-color:rgba(237, 247, 233,.5);
}
.sakuhin-index div h4{
position: relative;

margin:.5em 0 1em 0;
font-weight:bolder;
z-index: 10;
}
.sakuhin-index div h4::after{
content: '\0bb';}
.webmuseum span, .tanzaku span{
font-size:1.4rem;
letter-spacing: 0;
}
.m-t-box span{
position: relative;
z-index:10 ;} 
.kaitori-box{
position: relative;
width:100%;
box-sizing: border-box;
margin-bottom: 5em;
padding-top: 3em;
}

.kaitori-title{
position: absolute;
top:-10px;
left:10px;
z-index: -1;

transform:perspective(10px)
              rotateX(2deg) skew(5deg, 5deg);
font-size: 8rem;font-weight:bolder;letter-spacing: 0;
text-shadow:1px 1px 0 #fcf9f5,-1px 1px 0 #fcf9f5,1px -1px 0 #fcf9f5,-1px -1px 0 #fcf9f5;
color:rgba(248, 241, 231, 0.4);
}
.kaitori{
position: relative;
z-index: 1;

padding:3em .5em;
box-sizing: border-box;
background: rgba(255, 254, 222,.4);
}
.kaitori h4{
font-size: 1.8rem;
margin: .5em 0 .5em 1em;
}
.kaitori>p{
text-align:justify;
margin: .5em 1em;
}

.kaitori-link{
margin: 1em 0;
border-bottom: rgba(179, 189, 179, 0.2) 1px solid;}
.qrcode{
width:95%;
max-width: 700px;
margin: 2em auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;

align-items: center;
  justify-content: center;
}
.qrcode > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
  margin: 10px;
  margin-bottom: 3em;
}
.qrcode h5{
  text-align: center;
  font-size: 1.1em;
}
.qrcode p:last-of-type{
 margin-top:1em;
}
.qrcode img{
  width:130px;
 height:auto;
}
.kaitori a{
display: block;
width:100%;
text-align: right;}
.qrcode a{text-align: center;}
.qrcode a:after{
content:'';
}

.tokushuu-title{
position: absolute;
top:-80px;
right:0;
z-index: -1;
transform:perspective(20px)
              rotateX(2deg) skew(-3deg, -3deg);
font-size: 8rem;font-weight:bolder;letter-spacing: 0;
text-shadow:1px 1px 0 #f2faf3,-1px 1px 0 #f2faf3,1px -1px 0 #f2faf3,-1px -1px 0 #f2faf3;
color:rgba(236, 246, 237, 0.6);
}
.tokushuu-box{
width:95%;
margin: 2em auto 0;
position: relative;}
.tokushuu-box>div{
background: rgba(255, 255, 255,.4);}
.t-cell{
border:1px rgba(247, 245, 233, 1) solid;
box-shadow:4px 2px 8px rgba(230, 229, 225, .2);
margin: 1em 0;
display: flex;
flex-direction: row;
align-items: center;}
.t-cell div{
min-width:135px;
min-height:145px;
background-size: cover;}
.t-cell dl{
margin:0 1em;
line-height: 1.5;}
.t-cell dt{
font-weight: bolder;
}
.t-cell dd{
margin-left: .5em;}

.t-bennei div{
background-image: url("/img/bennei110-hp-title.jpg");
}
.t-hisamatsu div{
background-image: url("/img/houseki-hp-title2.jpg");
}
.t-hideo div{
background-image: url("/img/hideo2-hp-title.jpg");
}
.t-rokurou div{
background-image: url("/img/rokurou-hp-title.jpg");
}
.t-tatsukichi div{
background-image: url("/img/tatsukichi-hp-title.jpg");
}
.t-komichi div{
background-image: url("/img/tanzaku-hp-title.jpg");
}
.t-kyoudo div{
background-image: url("/img/sekkou-hp-title.jpg");
}
.t-genzai div{
background-image: url("/img/girl-hp-title.jpg");
}
.sonota-title{
position: absolute;
top:0;
left:0;
font-size: 8rem;letter-spacing: 0;
text-shadow:1px 1px 0 #faf7fc,-1px 1px 0 #faf7fc,1px -1px 0 #faf7fc,-1px -1px 0 #faf7fc;
color:rgba(247, 243, 250, 0.829);
transform : perspective(70px)
              rotateX(5deg)
skew(-5deg, -5deg);
z-index: -1;
}
.sonota-box{
  width: 95%;
  margin: 0 auto;
position: relative;
padding-top:7em;
}
.sonota-box dl{
 display: flex;
 flex-direction: column;
margin-top: -1em;
 }
 .sonota-box dt{
   background:rgba(214, 227, 209,.3);
   padding: 8px;
   font-weight: bolder;
   border: 1px solid rgba(214, 227, 209,.3);
 }
 .sonota-box dd{
   margin:0 0 1.5em 0;
   padding:8px;
   line-height: 1.5;
   border: 1px solid rgba(214, 227, 209,.3);

 }
.kinenkan-title{
  position: absolute;
top:0;
left:0;
z-index: -1;

transform:perspective(10px)
              rotateX(2deg) skew(5deg, 5deg);
font-size: 8rem;font-weight:bolder;letter-spacing: 0;
text-shadow:1px 1px 0 #fcf9f5,-1px 1px 0 #fcf9f5,1px -1px 0 #fcf9f5,-1px -1px 0 #fcf9f5;
color:rgba(248, 243, 236, 0.6);
}
.kinenkan-box{
  width:95%;
  margin: 0 auto;
position: relative;
padding-top:5em;
}
.kinenkan-box > div{
  margin:0;
  padding:1.5em 1em;
background: rgba(255,255,255,.5);
  border: 1px solid rgba(252, 245, 251,1);
  box-shadow: 4px 2px 8px rgba(230, 236, 238, 0.2);
}

.kinenkan-box  h4 {
margin-bottom: .5em; 
line-height: 1;
font-size: 1.6rem;

}
.kinenkan-box span {display: block;
  font-size: 1.3rem;
  
  
  
}
.kinenkan-box img{
  width:33%;
  max-width: 200px;
  height: auto;
  float: left;
  margin-right: 1.5em;
  border-radius: 50%;
  shape-outside: circle();
}
.kinenkan-box ul{
  text-align: right;
  padding: 1em;
  margin-top: 1em;
  background: rgba(252, 245, 251,.5);
  
 
}
.kinenkan-box li{
  margin-bottom: .5em;
font-size: 1.6rem;
}
.kinenkan-b p,.kinenkan-h p{
  text-align:justify;  
font-size: 1.6rem;
}
.kinenkan-box a{
  letter-spacing: .1em;
}
.hyousou-box{
  width:100%;
  margin: 0;
position: relative;
padding-top:4em;

}
.hyousou-title{position: absolute;
top:0;
right:0;
font-size: 8rem;letter-spacing: 0;
text-shadow:1px 1px 0 #f7fcf5,-1px 1px 0 #f7fcf5,1px -1px 0 #f7fcf5,-1px -1px 0 #f7fcf5;
color:rgba(242, 248, 240, 0.7);
transform : perspective(250px)
              rotateX(40deg)
skew(1deg, 1deg);

}
.hyousou{

margin: 1em 0;
background: rgba(245, 252, 252,.3 );
border:1px solid rgba(245, 252, 252,.8 );
padding: 2em 1em;}
.hyousou h4{font-size: 1.6rem;
width:95%;
margin: 1em auto;}
.hyousou p{
width:95%;
margin: 0 auto;
text-align:justify;
  
  }
.hyousou-box img{
width: 33%;
max-width:200px;
  height: auto;
  float: right;
  margin: 1em;
  border-radius: 50%;
  shape-outside: circle();}

.shoseki-title{position: absolute;
top:-10px;
left:30%;
z-index: -1;
font-size: 8rem;letter-spacing: 0;
text-shadow:1px 1px 0 #fcfbf5,-1px 1px 0 #fcfbf5,1px -1px 0 #fcfbf5,-1px -1px 0 #fcfbf5;
color:rgba(243, 241, 226, 0.8);
transform : perspective(150px)
              rotateX(-5deg)
skew(10deg, -5deg);
}
.shoseki-box{
width: 95%;
position: relative;
margin: 0 auto 5em;
background: rgba(255, 255, 255,.3);
border: rgba(255,255,255,.5) 1px solid;
padding-top: 6em;
}
.book{
width:95%;
margin: 0 auto;
display: flex;
flex-direction: row;

}

.shoseki-box >div{
margin-top: -1em;
background: rgba(255,255,255,.6);}
.zuroku{font-size: 1.8rem;
width: 95%;
margin:0 0 1em auto ;}
.book{
  border: 1px solid #edf5f1;
  padding: 1em .5em;
  margin-bottom: 1em;
  box-shadow:  4px 2px 8px rgba(237, 245, 241,.3);
  display: flex;
flex-direction: row;

}
.book>div{
flex:3;}
.book img{
width: 50px;
margin:.5em 1em 0;
height:auto;
flex:1;
align-self: flex-start;

}
.book h4{
  margin: .5em 0;
  line-height: 1.3;

}
.book p{
  font-size: 1.4rem;
  
}
.book-last{
  background-color: rgba(233, 245, 247, .6);
}
.book-kokorouta{
position: relative;
}
.book-kokorouta span::before{
display: block;
position: absolute;
top:-1em;
left:0;
font-size: .5em;
letter-spacing: -0.1em;
content:'ココロウタ';

}
@media screen and (min-width:550px)
{
.stick-arrow{
width:75%;}
}
@media screen and (min-width:768px) 
 {
.porch{
  width:100%;
position: relative;
  height: 350px;

  overflow:hidden;will-change:animation;
  animation: daisetsu-frame 5s forwards;
  }

.deau{
  padding:2% 10%;

}
.topics-title,.kaitori-title,.sonota-title,.tokushuu-title,.kinenkan-title,.hyousou-title,.shoseki-title{
font-size:10rem;}

.manabi-h2g{
width: 80%;
margin-top: 2em;}
.open{
  margin: 1em;
}
.manabi-h2g h2{
font-size: 1.8rem;}
  .manabi-box label{
    display: none;
  }
  .manabi-box .hidden-show {
  box-sizing: border-box;
width:85%;
margin: 1em auto;
  height: auto;
  padding: 2em;
line-height: 2;
  overflow: hidden;
  opacity: 1;
  
  text-align: justify;
  
  }
  .info{
    padding: 2em 15%;
  }

.sakuhin-index > ul{
  margin-top: 3em;}

.sakuhin-index > ul::-webkit-scrollbar {
  height: 10px;

}
.sakuhin-index > ul::-webkit-scrollbar-thumb {
  background:rgba(255, 242, 171,.5);
  border-radius: 3px;
}
.sakuhin-index > ul::-webkit-scrollbar-track {
  background: rgba(254, 255, 219,.2);
}

.stick-arrow{
width:45%;}

.tokushuu-box,.sonota-box,.kinenkan-box{
  width:70%;
}  

.kinenkan-box >div p{
line-height: 1.8;}
.kaitori{
padding: 3em;

}
.kaitori p{
line-height: 1.8;}
.hyousou{
  padding: 2em 3em;
}
.qrcode>div{
  width:40%;
}
.hyousou p{
line-height: 1.8;
}
.shoseki-box{
  width:90%;
}

.shoseki-shousai{
  width:100%;
  display:-ms-flexbox;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
   -ms-flex-align: start;
   align-items: flex-start;
   align-content: space-between;
}
.book{
  flex-basis: 25%;
  display: flex;
  position: relative;
  flex-direction: column;
  
}
.book img{
  margin: 1em 0 0 auto;
}
}
@media screen and (min-width:1024px) 
 {
.deau{
padding: 1.5% 20%;}
.manabi-h2g{
width: 55%;}
.manabi-box .hidden-show {
width:60%;
margin: 1em auto;
}
.topics-title,.kaitori-title,.sonota-title,.tokushuu-title,.kinenkan-title,.hyousou-title,.shoseki-title{
font-size:11rem;}
.kaitori-box, .tokushuu-box, .sonota-box, .kinenkan-box, .hyousou-box, .shoseki-box{
margin-bottom: 5em;}
.manabi-title p{
margin: 2em;
}
.manabi-link{margin-bottom: 2em;}
.info{
padding:3em 20%;}

.sakuhin-index div{
width:70%;
margin-left: auto;
margin-right: auto;
}
.kaitori{
padding:3em 5em;
}
.kaitori p{
margin-bottom: 1em;}
.tokushuu-box>div{
width: 70%;
margin: 1em auto;}
.kinenkan-box > div{width:80%;
  margin:-1.5em auto 2em auto;}
.kinenkan-box span{
margin-bottom: .7em;}

.inq{
text-align: center;}
 }
@media screen and (min-width:1500px) 
 {
.sakuhin-index{
width:80%;
margin:3em auto;}
.stick-arrow{
width:40%;}
.kaitori{
padding:3em 15em;
}

.hyousou{
  padding: 2em 10em;
}

}