@charset "UTF-8";

*{
-webkit-font-smoothing: antialiased;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

@font-face {
font-family: 'LogoType';
src:url('../fonts/LogoType/logoTypeCondense.eot') format('eot');
src:url('../fonts/LogoType/logoTypeCondense.eot?iefix') format('embedded-opentype'),
      url('../fonts/LogoType/logoTypeCondense.woff') format('woff');
font-weight: normal;
font-style: normal;
}

/* main layout
------------------------------------------------------------------------------------------------------------------------ */
html{
font-family: 'LogoType';
overflow-x:hidden !important;
}

body{
animation: fadeIn 1.5s ease-in 0s 1 normal;
-webkit-animation: fadeIn 1.5s ease-in 0s 1 normal;
width:100%;
height:100%;
background:#FDF8F8;

}
@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
@-webkit-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}

#wrapper{
margin:0 auto;
width:100%;
max-width:1000px;
overflow-x:hidden !important;
position:relative;
padding:0 1.5em;
}

#full{
background:url(../img_top/top1.png) center top no-repeat;
background-size:contain;
width:100%;
height:100vh;
}

img:not('.bonbori'){
display:block;
margin:0 auto;
width:100%;
max-width:300px;
padding-top:3em;
}


a{
color:blue;
}
.slick_slider img{
padding:0;
}

section{
padding:10em 0;
border-bottom:solid 1px #FF4268;
}

section:last-child{
border:none;
padding-bottom:30vh;
}

.onePhoto{
width:100%;
max-width:300px;
margin:0 auto;
padding-top:5em;
display:block;
}

.landscape{
width:100%;
max-width:1000px;
margin:0 auto;
padding-top:5em;
display:block;
}

h2{
font-size:100px;
text-align:center;
color:white;
padding-top:80vh;
line-height:1em;
text-shadow:black 1px 1px 2px, black -1px 1px 2px,
    black 1px -1px 2px, black -1px -1px 2px;

}

h3{
font-size:60px;
text-align:center;
color:white;
}

h4{
font-size:24px;
line-height:1.7;
color:#313538;
padding-bottom:1em;
text-align:center;
}

h6{
line-height:1.7;
padding-bottom:2em;
}

.postdate{
font-size:22px;
font-style:italic;
color:#1E92E0;
}
.posttime{
font-size:22px;
padding-left:.5em;
font-style:italic;
color:#1E92E0;
}

section p{
font-size:20px;
line-height:1.7;
color:#313538;
padding-bottom:1em;
}

.boten{
-webkit-text-emphasis: filled circle #FF4268;
text-emphasis: filled circle #FF4268;
}

.line_through{
text-decoration:line-through;
}

.spacer{
margin:10em 0;
}


#books{
font-size:0;
margin-top:3em;
}
#btn1{
backgrounD:#09F;
border:solid 3px #FDF8F8;
display:inline-block;
width:50%;
text-align:center;
color:#FDF8F8;
font-size:18px;
padding:1.5em 0;
border-radius:6px;
}
#btn2{
background:#090;
display:inline-block;
width:50%;
text-align:center;
color:#FDF8F8;
font-size:18px;
padding:1.5em 0;
border:solid 3px #FDF8F8;
border-radius:6px;
}





/* haiku
------------------------------------------------------------------------------------------------------------------------*/

#essay{
font-family:"游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
background:white;
padding:5em 1em;
margin-top:50vh;
box-shadow:0px 3px 6px rgba(0,0,0,.3);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d2ff52+0,91e842+100&0.5+0,0.5+100;Neon */
background: -moz-linear-gradient(top, rgba(210,255,82,0.1) 0%, rgba(145,232,66,0.2) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(210,255,82,0.1) 0%,rgba(145,232,66,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(210,255,82,0.1) 0%,rgba(145,232,66,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80d2ff52', endColorstr='#8091e842',GradientType=0 ); /* IE6-9 */
}

#essay p{
line-height:2;
}

.essay.title{
font-weight:bold;
font-size:170%;
margin-top:3em;
}


#haiku{
width:100%;
max-width:1000px;
background:white;
}
#haiku img{
width:100%;
height:auto;
max-height:90vh;
padding:0;
}
#haiku img:nth-child(1),
#haiku img:nth-child(2),
#haiku img:nth-child(3),
#haiku img:nth-child(4),
#haiku img:nth-child(5),
#haiku img:nth-child(6),
#haiku img:nth-child(7),
#haiku img:nth-child(8),
#haiku img:nth-child(9){
background:
}

@media screen and (min-width:500px) { 
#essay{
padding:5em 2em;
}
}



/* ohaka anim
------------------------------------------------------------------------------------------------------------------------*/
.changed{
position:relative;
opacity:1;
}
.ohaka_out{
opacity:0;
}


#ohaka{
display:block;
margin:0 auto;
width:100%;
max-width:600px;
padding-bottom:100px;

}


.real_ohaka{
width:100%;
max-width:600px;
margin:0 auto;
position:absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
opacity:0;
padding:0;
}
.pxIn{
opacity:1;
}

#rel{
position:relative;
}

/* karuta
------------------------------------------------------------------------------------------------------------------------*/

#karuta{
width:100%;
font-size:0;
position:relative;
}


.card-grid{
position:relative;
display:inline-block;
width:25%;
border:solid 10px #FDF8F8;
cursor:pointer;
}
.front,
.back{
width:25%;
}

.front img,
.back img{
width:100%;
}
@media screen and (min-width:320px) { 
.card-grid{
width:50%;
border:solid 10px #FDF8F8;
}
.front,
.back{
width:50%;
}
}

@media screen and (min-width:321px) and ( max-width:1024px) {
.card-grid{
width:33.3333%;
border:solid 10px #FDF8F8;
}
.front,
.back{
width:33.3333%;
}

}

@media screen and (min-width:1024px) {
.card-grid{
width:25%;
border:solid 20px #FDF8F8;
}
.front,
.back{
width:25%;
}

}


/* google map
------------------------------------------------------------------------------------------------------------------------*/
#map {
width: 100%;
height: 90vh;
background-color: #ccc;
border:solid 5px #98bb72;
margin-top:;
}

/* other
------------------------------------------------------------------------------------------------------------------------*/
#shelf{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
width:100%;
font-size:0;
position:relative;
}

.item p{
display: block;
position: relative;
bottom: -1em;
text-align: center;
padding-top:2em;
}


#shelf img{
width:100%;
display:inline-block;
padding:0 20px 0;
}

.item:after{
content:'';
width:100%;
height:15px;
display:inline-block;
background:url(../img_tool/filterBG.svg);
box-shadow:0 10px 20px rgba(0,0,0,.4);
}


@media screen and (min-width:320px) { 
.item{
width:100%;
}
}

@media screen and (min-width:321px) and ( max-width:1024px) {
.item{
width:50%;
}

}

@media screen and (min-width:1024px) {
.item{
width:25%;
}

}