@charset "UTF-8";

body { margin: 0; padding:0; background-color: hsla(55,54%,79%,0) }
body { font-size: 1.4rem; }
.pc { display: none } 

a:hover { opacity: 1; }

#container { position: relative; padding-bottom: 400px}

nav { position: absolute; bottom: 0px; left: 0px; width: 100%; font-size: 1.2em }

nav ul { margin-left: 40px }

nav ul li { margin-bottom: 5px }
nav ul li a {
position: relative;
display: block; 
z-index: 1;
padding: 0 0;
}

nav ul li a::before, 
nav ul li.hit a::before {
background: hsla(0,0%,0%,1);
content: "";
display: block;
width: 100px;
height: 5px;
position: absolute;
left: -108px;
top: 11px;
margin: auto;
}


nav ul li a::before {
transform: scale(0, 1);
transform-origin: right top;
transition: transform .9s;
z-index: -1;
}

nav ul li.hit a::before {
transform: scale(1, 1);
}

main { padding: 0 0 0; background-color: hsla(0,100%,50%,.0); border-bottom: 1px solid #ccc; }

footer { padding: 50px 0 170px 0; }

.h1box { padding: calc(50vh - 15vw) 0em calc(50vh - 15vw) .6em ; }
.h1like { font-size: 14vw; line-height: 15vw; height: 32vw; overflow-y: hidden; background-color: hsla(0,100%,50%,.0); }

.h1like span:nth-child(1) { letter-spacing: .3em; }
.h1like span:nth-child(2) { letter-spacing: .3em; }
.h1like span:nth-child(3) { letter-spacing: .3em; }
.h1like span:nth-child(4) { letter-spacing: .3em; }
.h1like span:nth-child(5) { display: block;  }
.h1like span:nth-child(6) { letter-spacing: .2em; }
.h1like span:nth-child(7) { letter-spacing: .2em; }
.h1like span:nth-child(8) { letter-spacing: .2em; }
.h1like span:nth-child(9) { letter-spacing: .2em; }

.indexh1 { font-size: 1.2em; line-height: 1.4em; padding-right: .5em; background-color: hsla(0,100%,50%,.0) }
.indexh1 span { display: block; }

.h1child, .h2box {  }

.h1child {  }

body#index .h1child { padding-bottom: 20px }
.h1child .coco { font-size: 1.4em; line-height: 1.0em; margin-bottom: 10px }
body#index .h1child .coco { font-size: 2.0em; line-height: 1.0em; }
.h1child h1 { font-size: 2.2em; line-height: 1.1em; font-weight: normal; margin: 0 0 40px }
#shingengaku h1 span { font-size: .8em; padding-top: 10px }

.h2box h2 { font-size: 1.2em; line-height: 1.6em; }

.headerlogo { padding: 20px 20px 0 ; height: 100px; }
.grid.intoro p { font-size: 1.2em }
.sptxj { text-align: justify ; }
.time { font-size: 1.2em}

.messagebox .gridtxt p.fsttxt { font-size: 1.2em; }
.sign img { padding: 10px 0 0 0 }
#index .sign { width: 40%; padding: 20px 0 0 0% }
#profile .sign { width: 40%; padding: 20px 0 0 0% }

.shingenread p { font-size: 1.3em; }
p.shingenread2 { font-size: 1.1em; line-height: 2em }
.sns { margin: 30px 0 0 40px }

body#books .grid { width: calc(100% - 120px); padding: 30px 60px; }
body#shopping .grid { width: calc(100% - 80px); padding: 30px 40px; }

#shopping span.faty:nth-child(6) { width: 1.2em;}

/**************************************    contact    ******************************************/

#contact { padding: 30px 20px 50px ; }
dl.toiawase dd{ padding: 0px 0 10px 0; margin: 0px 0 10px 0; }
dl.toiawase dt{ padding: 10px 0 0 0; margin: 0px 0 10px 0; }

dl.toiawase dd input.meru{ width: 80%!important; }
dl.toiawase dd input.nama{ width: 80%!important; }
dl.toiawase dd input.pos{ width: 50%!important; }
dl.toiawase dd input.add{ width: 90%!important; }
dl.toiawase dd textarea.you{ width: 90%!important; min-height: 100px!important; }

.sppy20 { padding-left: 20px!important; padding-right: 20px!important }
.sppy40 { padding-left: 40px!important; padding-right: 40px!important }
.sppb20 { padding-bottom: 20px!important; }
.sppb30 { padding-bottom: 30px!important; }

/************* anime **************/

.zr1 { animation-delay: 0.3s;}
.zr2 { animation-delay: 0.6s;}
.zr3 { animation-delay: 0.9s;}
.zr4 { animation-delay: 1.2s;}
.zr5 { animation-delay: 0.3s;}
.zr6 { animation-delay: 0.3s;}
.zr7 { animation-delay: 0.3s;}
.zr8 { animation-delay: 0.3s;}
.zr9 { animation-delay: 0.3s;}
.zr10 { animation-delay: 0.3s;}
.zr11 { animation-delay: 0.3s;}
.zr12 { animation-delay: 0.3s;}





@media only screen and (min-width: 768px) {


}