@charset "utf-8";

/************************************************
 ブラウザリセット
************************************************ */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
}

table,
caption,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    border-collapse : collapse ;
    border-spacing: 0px;
    empty-cells: show;
    text-align: left;
    font-weight: normal;
}

a img,
iframe {
    border: none;
}
ol,
ul,
li {
    list-style: none;
}

input,
textarea,
select,
button {
    font-size: 100%;
    font-family: inherit;
}

article,
section {
  display: block;
}


body {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #333333;
    font-size: 1em;
    line-height: 1.6;
    min-width: 312px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    letter-spacing: 0.1em;
    overflow-x: hidden;
}


/* リンク指定
----------------------------------------------- */
a:link,
a:visited {
    color: #FFF;
    text-decoration: none;
}
a:link:hover,
a[href]:hover {
	color: #333;
    text-decoration: none;
}

#contents {
    margin: auto;
    width: 95%;
}
#area-top {
    margin: 1.5em 0;
}

#area-top .sec-head-txt {
    font-size: 4.5vw;
    line-height: 1.5em;
    margin-top: 1.5em;
    text-align: center;
    font-family: vdl-v7mincho, sans-serif;
    font-weight: 900;
    font-style: normal;
}
#area-top .book-front {
    display: flex;
}

.uk-monkai-img {
    height: 0;
    width: 100%;
    overflow: hidden;
    background: no-repeat center center;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;
}

#area-top .uk-monkai-img.a {
	background-image: url(../img/uk-monaki-01.png);
	padding-top: 70%;
	margin-bottom: 3%;
	margin-top: 4%;
}
#area-top .uk-monkai-img.b {
	background-image: url(../img/uk-monaki-02.png);
	padding-top: 70%;
	margin-bottom: 3%;
	margin-top: 4%;
}
#area-top .uk-monkai-img.c {
	background-image: url(../img/uk-monaki-03.png);
	padding-top: 35%;
	margin-bottom: 3%;
	margin-top: 4%;
}
#area-top .sec-sub-txt,
#area-02 .sec-sub-txt {
    width: 90vw;
    margin: 0.25em auto 0.5em;
	padding: 0.25em;
    color: #FFF;
	font-family: vdl-v7mincho, sans-serif;
	font-weight: 900;
	font-style: normal;
    font-size: 5vw;
	text-align: center;
}
#area-top .sec-sub-txt.salesstart,
#area-02 .sec-sub-txt.salesstart {
	background: #A78338;
}
#area-top .sec-sub-txt.nowonsale,
#area-02 .sec-sub-txt.nowonsale {
	background: #A78338;
}
#area-top .sec-sale-link,
#area-top .sec-reservation-link,
#area-02 .sec-sale-link,
#area-02 .sec-reservation-link {
	text-align: center;
	margin-bottom: 2em;
}
#area-top .sec-sale-link a,
#area-top .sec-reservation-link a,
#area-02 .sec-sale-link a,
#area-02 .sec-reservation-link a {
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 5.5vw;
    line-height: 18vw;
    font-family: tbcgothic-std, sans-serif;
    font-weight: 800;
    font-style: normal;
}
#area-top .sec-reservation-link a,
#area-top .sec-sale-link a,
#area-02 .sec-reservation-link a,
#area-02 .sec-sale-link a {
    background-color: #1d2d50;
}
#area-top .sec-reservation-link a:hover,
#area-top .sec-sale-link a:hover,
#area-02 .sec-reservation-link a:hover,
#area-02 .sec-sale-link a:hover {
    opacity: 0.8;
	color: #707070;
}
#area-01 .circle-area-top,
#area-01 .circle-area-middle,
#area-01 .circle-area-bottom {
	display: inline-flex;
    width: 100%;
}
#area-01_sp .circle-area-top,
#area-01_sp .circle-area-middle,
#area-01_sp .circle-area-bottom {
	display: inline-flex;
    width: 100%;
}

#area-01 {
    display: none;
}



@keyframes book-front {
   0%{scale: 0.05;}
 100%{scale: 1.2;}
}
.expand {
    animation: book-front ease forwards;
    animation-timeline: view();
    animation-range: cover 0% contain 75%;    
}

@keyframes scrollAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.fade-in {
    animation: scrollAnime linear;
    animation-timeline: view();
    animation-range: entry;
}


#area-01 .uk-monkai-img.d,
#area-01_sp .uk-monkai-img.d {
	background-image: url(../img/uk-monaki-04.png);
	padding-top: 35%;
	margin-bottom: 3%;
	margin-top: 4%;
}
#area-01 .uk-monkai-img.e,
#area-01_sp .uk-monkai-img.e {
	background-image: url(../img/uk-monaki-05.png);
	padding-top: 35%;
	margin-bottom: 3%;
	margin-top: 4%;
}
#area-01 .uk-monkai-img.f,
#area-01_sp .uk-monkai-img.f {
	background-image: url(../img/uk-monaki-06.png);
	padding-top: 35%;
	margin-bottom: 3%;
	margin-top: 4%;
}
#area-01 .uk-monkai-img.g,
#area-01_sp .uk-monkai-img.g {
	background-image: url(../img/uk-monaki-07.png);
	padding-top: 35%;
	margin-bottom: 3%;
	margin-top: 4%;
}
#area-01 .uk-monkai-img.h,
#area-01_sp .uk-monkai-img.h {
	background-image: url(../img/uk-monaki-08.png);
	padding-top: 35%;
	margin-bottom: 3%;
	margin-top: 4%;
}
#area-01 .uk-monkai-img.i,
#area-01_sp .uk-monkai-img.i {
	background-image: url(../img/uk-monaki-09.png);
	padding-top: 35%;
	margin-bottom: 3%;
	margin-top: 4%;
}

#area-02 .uk-monkai-img.sp {
	background-image: url(../img/uk-monaki-detail_sp.png);
	padding-top: 85%;
	margin-bottom: 10%;
	margin-top: 10%;
}


#footer {
	background:#666;
	color:#FFF;
	padding: 1em;
    margin: auto;
	border-top: 1px #DDD solid;
}
#copyright {
    text-align: center;
    font-size: 85%;
    margin-top: 5px;
}


@media screen and (min-width: 641px) {
    body {
        min-width: 960px;
    }
    #area-top .book-front {
        max-width: 50vw;
        margin: auto;
    }    
    #area-top .sec-head-txt {
        margin-top: 1em;
        font-size: 3.5vw;
        font-family: vdl-v7mincho, sans-serif;
        font-weight: 900;
        font-style: normal;
    }
    #area-top .uk-monkai-img.a {
        padding-top: 50%;
    }
    #area-top .uk-monkai-img.b {
        padding-top: 50%;
    }
    #area-top .uk-monkai-img.c {
        padding-top: 18vw;
        margin-top: 0;
    }
    #area-top .sec-sub-txt,
    #area-02 .sec-sub-txt {
        width: 35vw;
        margin: 0 auto 0.5em;
        padding: 0.25em;
        color: #FFF;
        font-family: vdl-v7mincho, sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 2vw;
        text-align: center;
    }
    #area-top .sec-sale-link,
    #area-top .sec-reservation-link,
    #area-02 .sec-sale-link,
    #area-02 .sec-reservation-link {
        text-align: center;
        margin-bottom: 2em;
    }
    #area-top .sec-sale-link a,
    #area-top .sec-reservation-link a,
    #area-02 .sec-sale-link a,
    #area-02 .sec-reservation-link a {
        color: #fff;
        font-size: 2vw;
        line-height: 5vw;
        font-family: vdl-v7mincho, sans-serif;
        font-weight: 900;
        font-style: normal;
		width: 25vw;
		margin: 0 auto;
    }
    #area-top .sec-reservation-link a,
    #area-top .sec-sale-link a,
    #area-02 .sec-reservation-link a,
    #area-02 .sec-sale-link a {
        background-color: #1d2d50;
    }
    #area-top .sec-reservation-link a:hover,
    #area-top .sec-sale-link a:hover,
    #area-02 .sec-reservation-link a:hover,
    #area-02 .sec-sale-link a:hover {
        opacity: 0.8;
        color: #707070;
    }
    #area-01 {
        display: block;
        width: 70vw;
        margin: auto;
    }
    #area-01_sp {
        display: none;
    }
    #area-01 .circle-area-top,
    #area-01 .circle-area-bottom {
        display: inline-flex;
        width: 100%;
    }
    #area-01 .uk-monkai-img.d {
        padding-top: 20%;
    }
    #area-01 .uk-monkai-img.e {
        padding-top: 20%;
    }
    #area-01 .uk-monkai-img.f {
        padding-top: 20%;
    }
    #area-01 .uk-monkai-img.g {
        padding-top: 20%;
    }
    #area-01 .uk-monkai-img.h {
        padding-top: 20%;
    }
    #area-01 .uk-monkai-img.i {
        padding-top: 20%;
    }
    #area-02 .uk-monkai-img.j {
        background-image: url(../img/uk-monaki-detail.png);
        padding-top: 35%;
        margin-bottom: 7%;
        margin-top: 7%;
    }
    #area-02 .uk-monkai-img.sp {
        display: none;
    }
}


/* ==============================================
 ページトップ
=============================================== */
#pagetop_wrap .pagetop {
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 100%;
}
#pagetop_wrap .pagetop a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 50px;
    padding: 15px;
    text-align: center;
    display: block;
}
#pagetop_wrap .pagetop a:hover {
    text-decoration: none;
    background: #999;
}
#pagetop_wrap .arrow{
	position: relative;
	display: inline-block;
	padding: 6px 0 5px 15px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
}