@charset "utf-8";

/* ------------------------------------------
    SUBSCRIPTION BUTTON
------------------------------------------ */
#subscriptionbtn {
    position: fixed;
    top: 110px;
    right: 0px;
    border-radius: 10px 0 0 10px;
	color: #fff;
    width: 4.0rem;
	/* padding: 0.5rem /* 5px */;
    text-align: center;
    height: 30.0rem;
    vertical-align: middle;
    border: 1px solid #d26900;
    background: #d26900;
	cursor: pointer;
    z-index: 97;
    transition-property: width;
    transition-duration:0.5s;
    transition-timing-function:ease-in-out;
}
#subscriptionbtn:hover{
    /* padding: 10px 30px; */
    width: 8.0rem;
}
.vertical{
    display: inline-block;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
@media only screen and ( max-width : 960px ) {
    #subscriptionbtn {top: 60px;}
}
@media only screen and ( max-width : 560px ) {
    #subscriptionbtn {
        width: 100%;
        height: 4.0rem;
        position: fixed;
        bottom: 0;
        left: 0;
        top: auto;
        right: auto;
        border-radius: 0;
        color: #fff;
        /* padding: 0.5rem /* 5px */;
        border: 1px solid #d26900;
        background: #d26900;
        cursor: pointer;
        transition-property: height;
        transition-duration:0.5s;
        transition-timing-function:ease-in-out;
    }
    #subscriptionbtn:hover {width: 100%; height: 6.0rem;}
    .vertical{
        -webkit-writing-mode: horizontal-tb;
        -moz-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
        -ms-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
  }
}
/* ------------------------------------------
    SUBSCRIPTION MENU SETTING
------------------------------------------ */
#glaylayer {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.3;
    z-index: 98;
}
#slidemessage {
	display: none;
	position: fixed;
	top: 0;
	width: 70%;
	max-width: 300px;
	height: 100%;
	background: #d26900;
	list-style: none;
    z-index: 99;
    overflow-y: scroll;
}
.slidemenu-close{margin: 0 auto; padding-top: 2.0rem;width: 90%;}
p.slidemenu-close a{padding: 0;margin: 0; display:inline-block;text-align: right;color: #fff;text-decoration: none;transition-duration:0.5s;transition-timing-function:ease-in-out;}
/*.slidemenu-close a{display: inline-block; color: #fff;transition-duration:0.5s;transition-timing-function:ease-in-out;} */
p.slidemenu-close a:hover{color: #666666;text-decoration: none;}

.sidemenu_inner{margin: 0 auto; padding-top: 5.0rem;width: 90%;}
.sidemenu_inner h2.title {
    /*border-bottom: 1px dotted rgba(179,62,92,0.8);
    width: 100%;
    text-align: center;
    display: block;*/
    margin: 2.0rem auto;
    /* padding-bottom: 1.0rem;
    line-height: 100%;
    font-weight: bold; */
}

p.sidemenu-img{margin: 0 auto;padding:0; width: 100%; height: auto;text-align: center;}
p.sidemenu-img img{width: 100%;}
.sidemessage-btn a{
    text-align: center;
    display: block;
    padding: 1.0rem;
    color: #ffffff;
    border: 1px solid #ffffff;
    margin-bottom: 3.0rem;
    width: 100%;
    transition-duration:0.5s;transition-timing-function:ease-in-out;
}
.sidemessage-btn a:hover{
    color: #ffffff;
    background-color: #202f55;
    border: 1px solid #202f55;
}
@media only screen and ( max-width : 960px ) {
    .noneed-element{display: none;}
    .sidemessage-btn a{margin-bottom: 1.0rem;}
    .sidemenu_inner{padding-top: 0;}
}