body {
background: #fff;
color: #000;
font-family: heisei-kaku-gothic-std, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height:1.7em;
letter-spacing: 1.3px;
}


#wrap{
width: 100%;
overflow-x: hidden;
position: relative;
}

#content{
width:375px;
line-height:0;
margin:0 auto;
padding:0 0 0 0;
}


.txtBold{font-weight: 600;}
.fontL{ font-size: 120%;line-height: 1.7em;}
.fontS{ font-size: 80%;line-height: 1.7em;}
.txtSpace{ letter-spacing: -2px;}

.imgMax{
width: 100%;
text-align: center;
}



.overlay {
content: "";
display: block;
width: 0;
height: 0;
/*background-color: rgba(0, 0, 0, 0.5);*/
position: absolute;
top: 0;
right: 0;
z-index: 2;
opacity: 0;
transition: opacity .5s;
}

.overlay.open {
width: 100%;
height: 100vh;
opacity: 1;
}

main {
height: 100%;
padding: 0;
transition: all .5s;
display: flex;
flex-direction: column;
justify-content: center;
}

main.open {
transform: translateX(0);
}

main h1 {
text-align: center;
font-weight: 500;
}

main p {
text-align: center;
}

.menu-trigger {
display: inline-block;
width: 20px;
height: 16px;
vertical-align: middle;
cursor: pointer;
position: fixed;
top: 25px;
right: 25px;
z-index: 100;
/*   transform: translateX(0);
transition: transform .5s;
 */}
/* .menu-trigger.active {
transform: translateX(-250px);
}
 */
.menu-trigger span {
display: inline-block;
box-sizing: border-box;
position: absolute;
right: 0;
width: 100%;
height: 2px;
background-color: #e5e5e5;
transition: all .5s;
box-shadow: 1px 2px #000;
}

.menu-trigger.active span {
background-color: #e5e5e5;
box-shadow: 0px 0px #000;
}

.menu-trigger span:nth-of-type(1) {
top: 0;
}

.menu-trigger.active span:nth-of-type(1) {
transform: translateY(7px) rotate(-45deg);
width: 20px;
}

.menu-trigger span:nth-of-type(2) {
top: 7px;
width: 20px;
}

.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

.menu-trigger span:nth-of-type(3) {
bottom: 0;
width: 20px;
}

.menu-trigger.active span:nth-of-type(3) {
transform: translateY(-7px) rotate(45deg);
width: 20px;
}

nav {
background: url("../images/bg_menu.png") no-repeat center bottom;
background-size: 100% auto;
width: 375px;
height: 100%;
padding-top: 65px;
background-color: #210000;
position: fixed;
top: 0;
right: 0;
z-index: 20;
transform: translateY(-100%);
transition: all .8s;
}

nav.open {
transform: translate(0);
}

nav li {
color: #fff;
text-align: center;
padding: 0 0;
font-size: 20px;
}

* {
box-sizing: border-box;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}



/*---------------------------------------------

header

----------------------------------------------*/


#headerAll{
background: linear-gradient(to right, #690006, #b2151e, #690006);
width:100%;
height:100px;
position: relative;
border-bottom: 1px solid #b2a46b;
}

#logokaso{
background: url("../images/logo_s.png") no-repeat center;
background-size: contain;
width:144px;
height:60px;
position: absolute;
top: 18px;
left: 50%;
margin-left: -72px;
z-index: 10;
transition: all .5s;
}

#logokaso a{
width: 100%; height: 100%;
display: block;
}

#logokaso:hover{
opacity: 0.7;
}


/*---------------------------------------------

footer

----------------------------------------------*/

#homeBtn{
font-family: trajan-pro-3, serif;
font-weight: 600;
font-style: normal;
width: 100%;
text-align: center;
font-size: 140%;
line-height: 55px;
padding: 0;
margin: 0 auto;
border-top: 1px solid #6b747e;
}

#homeBtn a{
width: 100%;
height: 100%;
display: block;
text-decoration: none;
color: #a70000;
cursor: pointer;
}


/*---------------------------------------------

ef

----------------------------------------------*/


.ef-fade {
opacity: 0;
transition: 1.5s ease 0.1s;
}


.fade {
opacity: 1.0;
transform: translate(0, 0);
transform: scale(1, 1);
}