@charset "utf-8";

html, body {height: 100%;}

body, text {
font-family: 'Noto Serif JP', serif;
word-break: break-all;
-webkit-text-size-adjust: 100%;
letter-spacing: 1.5px;
font-weight: 600;
font-size: 18px;
line-height: 3;
margin: 0;}

a:hover {color: #8b7456;}
a {text-decoration: none;}
a{outline: none;}
:focus {outline: none;}
::-moz-focus-inner {border: 0;}

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

img {vertical-align: bottom;}

h1, h2, h3, p {margin: 0; font-size: 100%;}
ul, li {list-style: none; margin: 0; padding: 0;}


/* opning -------------------------------------------------------- */
.is_opning .body-wrap {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
margin: 0;}

.opning {
display: table;
position: fixed;
z-index: 999;
width: 100%;
background-color: #fff;
top: 0;
left: 0;
right: 0;
margin: 0;}

.opning_contents {
display: table-cell;
text-align: center;
vertical-align: middle;}

.logo-area {
overflow: hidden;
width: 400px;
height: 180px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;}

.opning_logo {
opacity: 0;
transition: 1s;
width: 330px;}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.logo-area {width: 300px;}
.opning_logo {width: 230px;}
}


/* First view -------------------------------------------------------- */
.first-contents {
border: 1px solid rgba(0,0,0,0);
height: 100vh;
background: url("image/fc-bg.png") center center / cover no-repeat;}

.main-logo {margin: 50px auto 0; width: 300px;}
.main-logo img {display: block; width: 100%;}

.scroll-down {
display: inline-block;
position: absolute;
right: 40px;
bottom: 20px;
z-index: 2;
padding: 10px 10px 110px;
overflow: hidden;
color: #fff;
font-size: 14px;
line-height: 1;
letter-spacing: .2em;
text-transform: uppercase;
text-decoration: none;
writing-mode: vertical-lr;}

.scroll-down::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 1px;
height: 100px;
background: #fff;}

.scroll-down::after {animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;}

@keyframes sdl {
0% {
transform: scale(1, 0);
transform-origin: 0 0;}
50% {
transform: scale(1, 1);
transform-origin: 0 0;}
50.1% {
transform: scale(1, 1);
transform-origin: 0 100%;}
100% {
transform: scale(1, 0);
transform-origin: 0 100%;}
}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.main-logo {width: 250px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.main-logo {margin: 30px auto 0; width: 200px;}
.scroll-down {right: 10px; bottom: 30px; font-size: 13px;}
}


/* Concept area -------------------------------------------------------- */
.concept .bg-washi {
position: relative;
margin-bottom: 80px;
height: 620px;}

.concept .contents-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
overflow: hidden;}

.concept .contents-inner {
padding: 150px 0 0;
width: 1500px;
margin: 0 auto;
background: url("image/bg-sakura.png");
background-size: 480px;
background-repeat: no-repeat;
background-position: top 0 right 50px;}

.concept .contents-box {
overflow: hidden;
background: url("image/bg-kuriya.png");
background-size: 280px;
background-repeat: no-repeat;
background-position: bottom 100px left 280px;}

.concept .contents-box-l {
width: 45%;
float: left;
padding-top: 120px;}

.concept .contents-box-r {
width: 53%;
float: right;}

/* under 1700 -------------------------------------------------------- */
@media screen and (max-width : 1700px) {
.concept .bg-washi {
margin-bottom: 80px;
height: 440px;}

.concept .contents-inner {
padding: 100px 0 0;
width: 1100px;
background-size: 400px;
background-position: top 0 right 50px;}

.concept .contents-box {
background-size: 200px;
background-position: bottom 80px left 240px;}

.concept .contents-box-l {padding-top: 55px;}
}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.concept .bg-washi {
margin-bottom: 80px;
height: 300px;}

.concept .contents-inner {
padding: 70px 0 0;
width: 750px;
background-size: 300px;
background-position: top 0 right 20px;}

.concept .contents-box {
background-size: 150px;
background-position: bottom 60px left 160px;}

.concept .contents-box-l {padding-top: 30px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.concept .bg-washi {
margin-bottom: 80px;
height: 600px;}

.concept .contents-inner {
padding: 60px 0 0;
width: 600px;
background-size: 230px;
background-position: top 0 right 30px;}

.concept .contents-box {
background-size: 130px;
background-position: top 30px left 30px;}

.concept .contents-box-l {
width: 100%;
float: none;
padding: 0 0 50px;
margin-bottom: 30px;
text-align: center;}

.concept .contents-box-r {
width: 100%;
float: none;}
}

/* under 650 -------------------------------------------------------- */
@media screen and (max-width : 650px) {
.concept .bg-washi {
margin-bottom: 80px;
height: 510px;}

.concept .contents-inner {
padding: 60px 0 0;
width: 430px;
background-size: 230px;
background-position: top 0 right 10px;}

.concept .contents-box {
background-position: top 50px left 30px;}

.concept .contents-box-l {
width: 100%;
float: none;
padding: 0 0 50px;
margin-bottom: 10px;
text-align: left;}
}

/* under 450 -------------------------------------------------------- */
@media screen and (max-width : 450px) {
.concept .bg-washi {height: 460px;}
.concept .contents-box {background-position: top 50px left 20px;}
.concept .contents-inner {width: 100%; background-position: top -20px right 0;}
.concept .contents-box-l {width: 95%; margin: 0 auto;}
.concept .contents-box-r img {display: none;}
.concept .contents-box-r {
background: url("image/osake-main.jpg") center center;
background-size: cover;
background-repeat: no-repeat;
height: 240px;}
}


/* Eat-in area -------------------------------------------------------- */
.eat-in .contents-inner {
padding: 130px 0 140px;
width: 1500px;
margin: 0 auto;
background: url("image/fude-maru.png");
background-size: 680px;
background-repeat: no-repeat;
background-position: top 220px right 60px;}

.eat-in .contents-box {overflow: hidden;}

.eat-in .contents-box-l {
width: 56%;
float: left;}

.eat-in .contents-box-r {
width: 40%;
float: right;
padding-top: 110px;}

/* under 1700 -------------------------------------------------------- */
@media screen and (max-width : 1700px) {
.eat-in .contents-inner {
padding: 80px 0 110px;
width: 1100px;
background-size: 520px;
background-position: top 120px right 40px;}

.eat-in .contents-box-r {padding-top: 50px;}
}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.eat-in .contents-inner {
padding: 50px 0 90px;
width: 750px;
background-size: 390px;
background-position: top 60px right 20px;}

.eat-in .contents-box-r {padding-top: 30px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.eat-in .contents-inner {
float: left;
padding: 0;
width: 600px;
background: url("image/fude-maru-sp.png");
background-size: 360px;
background-repeat: no-repeat;
background-position: top 30px center;}

.eat-in .contents-box {
display: flex;
flex-direction: column-reverse;}

.eat-in .contents-box-l {
float: none;
width: 100%;
min-height: 0%;}

.eat-in .contents-box-r {
float: none;
width: 100%;
text-align: center;
padding: 0 0 30px;}
}

/* under 650 -------------------------------------------------------- */
@media screen and (max-width : 650px) {
.eat-in .contents-inner {
padding: 0;
width: 430px;
background-size: 290px;
background-position: top 40px center;}
}

/* under 450 -------------------------------------------------------- */
@media screen and (max-width : 450px) {
.eat-in .contents-inner {width: 100%; background-size: 350px;}
.eat-in .contents-box-r {text-align: left; width: 95%; margin: 0 auto;}
.eat-in .contents-box-l {width: 330px;}
}


/* Ozashiki area -------------------------------------------------------- */
.ozashiki .contents-inner {
width: 1500px;
margin: 0 auto;
padding: 0 0 30px;
background: url("image/fude-nami.png");
background-size: 560px;
background-repeat: no-repeat;
background-position: bottom 0 left 20px;}

.ozashiki .contents-box {overflow: hidden;}

.ozashiki .contents-box-l {
width: 40%;
float: left;
margin-top: 50px;}

.ozashiki .contents-box-r {
width: 56%;
float: right;}

.ozashiki .flexbox {
margin-top: 30px;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;}

.ozashiki .flexbox li {width: 32%;}

/* under 1700 -------------------------------------------------------- */
@media screen and (max-width : 1700px) {
.ozashiki .contents-inner {
padding: 0 0 30px;
width: 1100px;
background-size: 400px;}

.ozashiki .contents-box-l {margin-top: 20px;}
}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.ozashiki .contents-inner {
width: 750px;
background-size: 260px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.ozashiki .contents-inner {
float: right;
margin: 50px 0;
padding: 0;
width: 600px;
background-size: 360px;
background-position: top 40px center;}

.ozashiki .contents-box-l {
float: none;
width: 100%;
text-align: center;
margin-top: 0;}

.ozashiki .contents-box-r {
float: none;
width: 100%;
margin-top: 30px;}

.ozashiki .flexbox {margin-top: 10px;}
}

/* under 650 -------------------------------------------------------- */
@media screen and (max-width : 650px) {
.ozashiki .contents-inner {
padding: 0;
width: 430px;
background-size: 290px;}
}

/* under 450 -------------------------------------------------------- */
@media screen and (max-width : 450px) {
.ozashiki .contents-inner {
width: 100%;
background-size: 350px;
background-position: top 30px center;}

.ozashiki .flexbox {margin-top: 6px;}
.ozashiki .contents-box-l {text-align: right; width: 95%; margin: 0 auto;}
.ozashiki .contents-box-r {width: 330px; float: right;}
}


/* Takeout area -------------------------------------------------------- */
.takeout .bg-washi {
position: relative;
height: 655px;}

.takeout .contents-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
overflow: hidden;}

.takeout .contents-inner {
width: 1500px;
margin: 0 auto;
background: url("image/fude-nami2.png");
background-size: 560px;
background-repeat: no-repeat;
background-position: top 220px left 20px;}

.takeout .contents-box {
overflow: hidden;
padding: 150px 0 0;}

.takeout .contents-box-l {
width: 40%;
float: left;
margin-top: -30px;}

.takeout .contents-box-r {
width: 56%;
float: right;}

.takeout .flexbox {
margin-top: 30px;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;}

.takeout .flexbox li {width: 32%;}

/* under 1700 -------------------------------------------------------- */
@media screen and (max-width : 1700px) {
.takeout .bg-washi {
position: relative;
height: 480px;}

.takeout .contents-inner {
width: 1100px;
background-size: 400px;
background-position: top 150px left 20px;}

.takeout .contents-box {padding: 110px 0 0;}
.takeout .contents-box-l {margin-top: -30px;}
}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.takeout .bg-washi {
position: relative;
height: 450px;}

.takeout .contents-inner {
width: 750px;
background-size: 260px;
background-position: top 220px left 20px;}

.takeout .contents-box {padding: 80px 0 0;}
.takeout .contents-box-l {margin-top: -10px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.takeout .bg-washi {
position: relative;
height: 820px;}

.takeout .contents-inner {
float: right;
margin: 50px 0;
padding: 0;
width: 600px;
background-size: 360px;
background-position: top 30px center;}

.takeout .contents-box {padding: 0;}

.takeout .contents-box-l {
float: none;
width: 100%;
text-align: center;
margin-top: 0;}

.takeout .contents-box-r {
float: none;
width: 100%;
margin-top: 30px;}

.takeout .flexbox {margin-top: 10px;}
}

/* under 650 -------------------------------------------------------- */
@media screen and (max-width : 650px) {
.takeout .bg-washi {
position: relative;
height: 660px;}

.takeout .contents-inner {
padding: 0;
width: 430px;
background-size: 290px;}
}

/* under 450 -------------------------------------------------------- */
@media screen and (max-width : 450px) {
.takeout .bg-washi {
position: relative;
height: 560px;}

.takeout .contents-inner {
width: 100%;
background-size: 280px;
background-position: top 40px center;}

.takeout .flexbox {margin-top: 6px;}
.takeout .contents-box-l {text-align: right; width: 95%; margin: 0 auto;}
.takeout .contents-box-r {width: 330px; float: right;}
}


/* Menu area -------------------------------------------------------- */
.menu {overflow: hidden;}

.menu .contents-inner {
width: 1500px;
margin: 0 auto;
background: url("image/fude-nami.png");
background-size: 560px;
background-repeat: no-repeat;
background-position: bottom 300px right 20px;}

.menu .contents-box {
overflow: hidden;
padding: 200px 0 0;
background: url("image/bg-sakana.png");
background-size: 480px;
background-repeat: no-repeat;
background-position: top 20px left 80px;}

.menu .contents-box-l {
width: 56%;
float: left;}

.menu .contents-box-r {
width: 40%;
float: right;}

.menu .flexbox {
margin-top: 30px;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;}

.menu .flexbox li {width: 32%;}

/* under 1700 -------------------------------------------------------- */
@media screen and (max-width : 1700px) {
.menu .contents-inner {
width: 1100px;
background-size: 400px;
background-position: bottom 200px right 20px;}

.menu .contents-box {
padding: 150px 0 0;
background-size: 380px;
background-position: top 20px left 60px;}

.menu .contents-box-r {margin-top: -20px;}
}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.menu .contents-inner {
width: 750px;
background-size: 260px;
background-position: bottom 150px right 20px;}

.menu .contents-box {
padding: 80px 0 0;
background-size: 200px;
background-position: top 10px left 70px;}

.menu .contents-box-r {margin-top: -10px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.menu .contents-inner {
float: left;
margin: 50px 0;
padding: 0;
width: 600px;
background-size: 360px;
background-position: top 40px center;}

.menu .contents-box {
background: none;
padding: 0;
display: flex;
flex-direction: column-reverse;}

.menu .contents-box-l {
float: none;
width: 100%;
min-height: 0%;
margin-top: 0;}

.menu .contents-box-r {
float: none;
width: 100%;
margin: 0 0 30px 0;
text-align: center;}

.menu .flexbox {margin-top: 10px;}
}

/* under 650 -------------------------------------------------------- */
@media screen and (max-width : 650px) {
.menu .contents-inner {
padding: 0;
width: 430px;
background-size: 290px;}
}

/* under 450 -------------------------------------------------------- */
@media screen and (max-width : 450px) {
.menu .contents-inner {
width: 100%;
background-size: 350px;
background-position: top 50px center;}

.menu .flexbox {width: 330px; float: left; text-align: left; margin: 6px auto 0;}
.menu .contents-box-r {width: 95%; text-align: left; margin: 0 auto 30px;}
.menu .contents-box-l img {width: 330px; float: left;}
.menu-box {overflow: hidden;}
}


/* Osake area -------------------------------------------------------- */
.osake {
overflow: hidden;
background: url("image/bg-washi.jpg") repeat; background-size: 600px;
background-position: center center;
margin-top: 150px;}

.osake .contents-inner {
width: 1500px;
margin: 150px auto 0;
padding: 0 0 150px;
background: url("image/bg-aranami.png");
background-size: 560px;
background-repeat: no-repeat;
background-position: top 120px left 20px;}

.osake .contents-box {overflow: hidden;}

.osake .contents-box-l {
width: 40%;
float: left;}

.osake .contents-box-r {
width: 56%;
float: right;}

.osake .flexbox {
margin-top: 30px;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;}

.osake .flexbox li {width: 32%;}

/* under 1700 -------------------------------------------------------- */
@media screen and (max-width : 1700px) {
.osake {margin-top: 100px;}

.osake .contents-inner {
margin: 100px auto 0;
padding: 0 0 100px;
width: 1100px;
background-size: 400px;
background-position: top 80px left 20px;}

.osake .contents-box-l {margin-top: -20px;}
}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.osake {margin-top: 80px;}

.osake .contents-inner {
margin: 80px auto 0;
padding: 0 0 80px;
width: 750px;
background-size: 260px;}

.osake .contents-box-l {margin-top: -10px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.osake {
margin-top: 0;
background-size: 400px;}

.osake .contents-inner {
float: right;
margin: 50px 0;
padding: 0;
width: 600px;
background-size: 360px;
background-position: top 20px center;}

.osake .contents-box-l {
float: none;
width: 100%;
text-align: center;
margin-top: 0;}

.osake .contents-box-r {
float: none;
width: 100%;
margin-top: 30px;}

.osake .flexbox {margin-top: 10px;}
}

/* under 650 -------------------------------------------------------- */
@media screen and (max-width : 650px) {
.osake .contents-inner {
padding: 0;
width: 430px;
background-size: 290px;}
}

/* under 450 -------------------------------------------------------- */
@media screen and (max-width : 450px) {
.osake .contents-inner {
width: 100%;
background-size: 350px;
background-position: top 30px center;}

.osake .flexbox {margin-top: 6px;}
.osake .contents-box-l {text-align: right; width: 95%; margin: 0 auto;}
.osake .contents-box-r {width: 330px; float: right;}
}


/* Photo area -------------------------------------------------------- */
.photo-area {
padding: 100px 0;
background-image: url(image/bg-marumaru.png), url(image/bg-syusyu.png);
background-position: top 30% left 4%, bottom 10px right 20px;
background-repeat: no-repeat, no-repeat;
background-size: 300px, 500px;}

.goraiten {width: 550px; margin: 0 auto 30px;}
.photo-area ul {width: 1300px; margin: 0 auto; overflow: hidden;}
.photo-area li {width: 23%; margin: 1%; float: left;}

/* under 1700 -------------------------------------------------------- */
@media screen and (max-width : 1700px) {
.photo-area {
padding: 80px 0;}

.goraiten {width: 450px;}
.photo-area ul {width: 1100px;}
}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
.photo-area {
background-position: top 30% left 4%, bottom 10px right 20px;
background-size: 200px, 400px;}

.goraiten {width: 350px;}
.photo-area ul {width: 750px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.photo-area {
padding: 50px 0;
background-image: none;}

.goraiten {width: 250px;}
.photo-area ul {width: 95%;}
.photo-area li {width: 48%; margin: 1%;}
}


/* Footer -------------------------------------------------------- */
footer{background: linear-gradient(to bottom, #702e1b, #350b00); padding: 100px 0 30px;}
.footer-wrap {color: #fff; width: 700px; margin: 0 auto; text-align: center;}
.footer-logo {width: 300px; margin: 0 auto 20px;}
address {font-style: normal;}
.map {width: 50px; margin: 30px auto;}
ul.contact {width: 680px; margin: 0 auto 30px; overflow: hidden;}
ul.contact li {width: 46%; margin: 2%; float: left; background-color: #fff;}
ul.sns {width: 250px; margin: 0 auto 50px; overflow: hidden;}
ul.sns li {width: 28%; margin: 2.65%; float: left;}
.copy {font-size: 13px;}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
footer{padding: 80px 0 30px;}
.footer-wrap {600px;}
.footer-logo {width: 230px;}
ul.contact {width: 100%;}
ul.sns {width: 200px;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
footer{padding: 50px 0 20px;}
.footer-wrap {width: 90%; letter-spacing: 2px;}
.footer-logo {width: 200px;}
.map {width: 35px;}
ul.contact {width: 80%;}
ul.sns {margin: 0 auto 30px;}
}

/* under 650 -------------------------------------------------------- */
@media screen and (max-width : 650px) {
ul.contact {margin: 0 auto 10px;}
.footer-logo {width: 180px;}
ul.contact li {width: 100%; margin: 20px auto; float: none;}
.copy {font-size: 11px; letter-spacing: 1px;}
}



/* Other -------------------------------------------------------- */
main {background-color: #fff; display: block;}

.bg-washi {
background: url("image/bg-washi.jpg") repeat; background-size: 600px;
background-position: center center;}

.photo, .photo2 {
overflow: hidden;
position: relative;}

.photo .caption {
text-align: center;
padding-top: 23%;
color: #fff;
font-size: 13px;}

.photo2 .caption {
text-align: center;
padding-top: 25%;
color: #fff;
font-size: 15px;}

.photo .mask, .photo2 .mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0,0,0,0.4);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;}

.photo:hover .mask, .photo2:hover .mask {opacity: 1;}

.scrollanime {opacity: 0;}
.fadeInDown {
animation-name: fadeInDown;
animation-duration: 1s;
animation-fill-mode: forwards;}

@keyframes fadeInDown {
0% {opacity: 0;}
100% {
opacity: 1;
transform: translate(0);}
}
 
.updown {transform: translateY(-30px);}
.downup {transform: translateY(30px);}
 
.sect02 {overflow: hidden;}
.slide-right {transform: translateX(30px);}
.slide-left {transform: translateX(-30px);}

#loader {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10;}

#loader .loader-slide {
position: relative;
width: 100%;
height: 100%;
background-color: #efefef;}

#loader .loader-slide img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 230px;}

#loader .loader-slide.open {
animation-name: slideOut;
animation-fill-mode: forwards;
animation-duration: 1.5s;
animation-delay: 1.5s;}

@keyframes slideOut {
from {transform: translateX(0%);}
to {transform: translateX(100%);}
}

.block-ttl, .block-ttl2 {font-size: 33px; margin-bottom: 30px; text-align: center;}
.moji-red {color: #910000;}
.space {letter-spacing: 8px;}
.text-small {font-size: 80%; margin-top: -5px;}
.counter-img {margin: 120px 0 0;}

/* under 1700 -------------------------------------------------------- */
@media screen and (max-width : 1699px) {
body, text {font-size: 15px;}
.block-ttl, .block-ttl2 {font-size: 28px; margin-bottom: 15px;}
.counter-img {margin: 80px 0 0;}
.photo .caption {padding-top: 19%;}
}

/* under 1200 -------------------------------------------------------- */
@media screen and (max-width : 1200px) {
body, text {font-size: 15px; line-height: 1.6;}
.text-small {margin-top: 5px;}
.counter-img {margin: 60px 0 0;}
.photo .caption {padding-top: 21%;}
}

/* under 800 -------------------------------------------------------- */
@media screen and (max-width : 800px) {
.pc {display: none!important;}
body, text {font-size: 14px; letter-spacing: 1px;}
.bg-washi {background-size: 400px;}
.block-ttl, .block-ttl2 {font-size: 23px;}
.photo .caption {padding-top: 27%;}
.photo2 .caption {padding-top: 27%; font-size: 13px;}
.counter-img {margin: 50px 0 0;}

#loader .loader-slide img {top: -15%; width: 200px;}

#loader .loader-slide.open {
animation-name: slideOut;
animation-fill-mode: forwards;
animation-duration: 1s;
animation-delay: 1.5s;}
}

/* under 450 -------------------------------------------------------- */
@media screen and (max-width : 450px) {
body, text {letter-spacing: 0;}
.block-ttl {text-align: left;}
.block-ttl2 {text-align: right;}
.photo .caption {padding-top: 26%; font-size: 12px;}
.counter-img {margin: 30px 0 0;}
.kakudai {width: 330px; float: left;}
.sp-br, .pc-br {display: none;}
}

/* over 800 -------------------------------------------------------- */
@media screen and (min-width : 799px) {
.sp, .sp-br {display: none!important;}
}