@charset "UTF-8";

html,body{
width:100%;
height:100%;
font-feature-settings: "palt";
}

body{ 
text-align:justify;
font-size:15px;
letter-spacing:0.1em;
line-height: 2;
color:#333;
-webkit-text-size-adjust:100%;
}

@media screen and (max-width:767px){

body{ letter-spacing:0.05em; }

}

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

/*----------------------------------------------------------------------------------------------------------------------css_btn----------*/

.more a {
background:url("../images/arrow_bl.png") no-repeat right 20px center;
background-size:16px 13px;
border: 1px solid #8dc21f;
border-radius:30px 30px;
color: #8dc21f;
font-weight:bold;
line-height: 56px;
padding-top:2px;
width:100%;
text-align:left;
padding-left:25px;
}

.more a:hover {
background:url("../images/arrow_wh.png") no-repeat right 20px center;
background-size:16px 13px;
background-color: #8dc21f;
color: #fff;
}

.cssbtn {
display: inline-block;
text-align: center;
outline: none;
}

.cssbtn::before,
.cssbtn::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}

.cssbtn,
.cssbtn::before,
.cssbtn::after {
-webkit-transition: all .3s;
transition: all .3s;
}

/*----------------------------------------------------------------------------------------------------------------------#sp_menu----------*/

.btn_wrapper {
position:fixed; /*absolute*/
top:36px;
right:2.77%;/*4.165%*/
z-index:100;
}

.menu_btn {
width:60px;
height:60px;
background-color:#fff;
border:1px solid #ddd;
border-radius:30px 30px;
overflow:visible;
cursor:pointer;
z-index:100;
}

.menu_btn .line {
position:absolute;
background-color:#333;
overflow:hidden;
width:30px;
height:2px;
left:0;
-webkit-transition: all 400ms ease-out 0ms;
-moz-transition: all 400ms ease-out 0ms;
-o-transition: all 400ms ease-out 0ms;
transition: all 400ms ease-out 0ms;
}

.menu_btn .line:nth-child(1) {
top:25px;
left:15px;
}
.menu_btn .line:nth-child(2) {
bottom:25px;
left:15px;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(1) {
-webkit-transform: translateY(4px) rotate(45deg);
transform: translateY(4px) rotate(45deg);
-webkit-transition: all 400ms ease-out 0ms;
-moz-transition: all 400ms ease-out 0ms;
-o-transition: all 400ms ease-out 0ms;
transition: all 400ms ease-out 0ms;
background-color: #333;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(2) {
-webkit-transform: translateY(-4px) rotate(-45deg);
transform: translateY(-4px) rotate(-45deg);
-webkit-transition: all 400ms ease-out 0ms;
-moz-transition: all 400ms ease-out 0ms;
-o-transition: all 400ms ease-out 0ms;
transition: all 400ms ease-out 0ms;
background-color: #333;
}

#sp_menu{ position:relative; }

#sp_menu nav {
position: fixed;/*absolute*/
width: 100%;
height: 100%;/*100vh*/
top: 0;
left: 0;
display:none;
z-index:99;
background-color: rgba(141, 194, 31, .95);
font-weight:bold;
}

#sp_menu nav a{ color:#fff; }

#sp_menu ul{
position: absolute;
bottom:240px;
left:6.25%;
z-index:100;
display:flex;
}

#sp_menu nav ul li {
font-size:18px;
margin-right:40px;
}

#sp_menu nav a {
transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
opacity:1;
}

#sp_menu nav a:hover{ opacity:0.5; }

#sp_menu .privacy{
position: absolute;
bottom:190px;
left:6.25%;
font-size:13px;
}

#sp_menu .access{
position: absolute;
bottom:138px;
left:6.25%;
font-size:13px;
display:flex;
}

#sp_menu .access p{
width:140px;
padding-left:20px;
background:url("../images/ico_pin_wt.png") no-repeat left 2px;
background-size: 13px 18px;
}

#sp_menu small{
position: absolute;
bottom:70px;
left:6.25%;
color:#fff;
font-size:10px;
}

#sp_menu h1{
position:fixed;
top:42px;
left:2.77%;
width:250px;
height:20px;
z-index:100;
}

#sp_menu h1 img{
width:100%;
height:auto;
}

@media screen and (max-width:1024px){

#sp_menu h1{
width:180px;
height:19px;
}

}

@media screen and (max-width:767px){

.menu_btn {
width:48px;
height:48px;
border-radius:24px 24px;
}

.menu_btn .line { width:24px; }

.menu_btn .line:nth-child(1) {
top:20px;
left:12px;
}
.menu_btn .line:nth-child(2) {
bottom:20px;
left:12px;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(1) {
-webkit-transform: translateY(3px) rotate(45deg);
transform: translateY(3px) rotate(45deg);
}

.btn_wrapper.clicked .menu_btn .line:nth-child(2) {
-webkit-transform: translateY(-3px) rotate(-45deg);
transform: translateY(-3px) rotate(-45deg);
}

#sp_menu ul{
position: absolute;
top:18%;
left:12%;
display:block;
}

#sp_menu nav ul li {
font-size:18px;
margin-right:0px;
margin-bottom:14px;
}

#sp_menu .privacy{ bottom:26%; }
#sp_menu .access{ bottom:17.7%; }
#sp_menu small{ bottom:10%; }

#sp_menu h1{ 
left:5%;
top:40px;
width:250px;
}

}


/*----------------------------------------------------------------------------------------------------------------------header----------*/

header{ 
position:relative;
width:100%;
}

header h1{
position:fixed;
top:42px;
left:2.77%;/*4.165%*/
width:320px;/*185px*/
height:20px;
z-index:1;
}

header h1 img{
width:100%;
height:auto;
}

header h1 a, header div a{ 
opacity: 1;
transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}

header h1 a:hover, header div a:hover{ opacity:0.7; }


@media screen and (max-width:1024px){

header h1{
width:180px;
height:19px;
}

}

@media screen and (max-width:767px){

header h1{ 
left:5%;
top:40px;
width:250px;
}

}


/*----------------------------------------------------------------------------------------------------------------------title_area----------*/

#tit_area{
width:91.66%;
margin-top:142px;
margin-right:8.33%;
height:700px;
}

#tit_area h2{
writing-mode: vertical-lr;
font-size:14px;
font-weight:bold;
color:#fff;
margin-left:2.77%;/*4.165*/
padding-top:50px;
}

@media screen and (max-width:1024px){

#tit_area{
width:95%;
margin-right:5%;
height:500px;
margin-top:120px;
}

}

@media screen and (max-width:767px){

#tit_area{
width:95%;
margin-right:5%;
height:400px;
}

}


/*----------------------------------------------------------------------------------------------------------------------footer----------*/

footer{
width:100%;
margin-top:250px;
background-color:#eee;
position:relative;
padding:80px 0 90px;
}

.back_top{
text-align:center;
width:60px;
height:60px;
position:absolute;
top:-30px;
right:2.77%;
}

.back_top a .bt_btn{
background:url("../images/arrow_bl_up.png") no-repeat 22px 20px;
background-size:13px 16px;
width:60px;
height:60px;
border:2px solid #8dc21f;
border-radius:30px 30px;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.back_top a:hover .bt_btn{
background:url("../images/arrow_wh_up.png") no-repeat 22px 20px;
background-size:13px 16px;
background-color:#8dc21f;
}

footer .inner{
width:83.3%;
margin:0 auto;
display:flex;
}

.cont_left{ width:30%; }

.cont_left h1{
width:250px;
height:20px;
}

.cont_left h1 img{ width:100%; height:auto; }

.cont_right{ width:70%; }

.cont_right h2{ 
font-weight:bold;
border-bottom:1px solid #d5d5d5;
padding:5px 0 8px;
}

.cont_right .info{
display:block/*flex*/;
width:100%;
margin-top:14px;
}

.cont_right .info li{
font-size:13px;
width:100%;
}

.cont_right .info li:last-child{ width:100%; }

.cont_right nav{ margin-top:25px; }

.cont_right nav ul{ width:100%; }

.cont_right nav ul li{ 
display:inline-block;
font-size:13px;
margin-right:15px;
}

.cont_btm{
width:83.3%;
margin:0 auto;
display:flex;
align-items: flex-end;
}

.cont_btm ul{ width:30%; }

.cont_btm ul li{
font-size:12px;
padding-left:18px;
background:url("../images/ico_pin_gr.png") no-repeat left 2px;
background-size:13px 18px;
margin-top: 5px;
}	

.cont_btm small{
font-size:10px;
letter-spacing:0.1em;
width:70%;
display:block;
padding-top:4px;
}

.cont_btm ul li a,
.cont_right nav ul li a{
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
opacity: 1;
}

.cont_btm ul li a:hover,
.cont_right nav ul li a:hover{
opacity: 0.6;
}

.br_sp{ display: none;}

@media screen and (max-width:1200px){	


.cont_left h1{
width:220px;
}

.cont_right .info li{ width:100%; }

.cont_right .info li:last-child{ width:100%; }

}

@media screen and (max-width:1000px){	

.cont_left h1{
width:185px;
}

.cont_right .info{ display:block; }

.cont_right .info li{ width:100%; }

.cont_right .info li:last-child{ 
width:100%;
margin-top:10px;
}

.cont_right .info li:nth-child(2){ 
width:100%;
margin-top:10px;
}

}

@media screen and (max-width:767px){
	
footer{
width:100%;
margin-top:100px;
padding:60px 0 100px;
}

.back_top{
width:48px;
height:48px;
top:-24px;
right:2.77%;
}

.back_top a .bt_btn{
background:url("../images/arrow_bl_up.png") no-repeat 16px 14px;
background-size:13px 16px;
width:48px;
height:48px;
border:2px solid #8dc21f;
border-radius:24px 24px;
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.back_top a:hover .bt_btn{
background:url("../images/arrow_wh_up.png") no-repeat 16px 14px;
background-size:13px 16px;
background-color:#8dc21f;
}

footer .inner{
width:90%;
display:block;
}

.cont_left{ width:100%; }

.cont_left h1{ display:none; }

.cont_right{ width:100%; }

.cont_right h2{ 
font-weight:bold;
border-bottom:1px solid #d5d5d5;
font-size:14px;
}

.cont_right ul{ 
display:flex;
flex-wrap:wrap;
width:100%;
}

.cont_right nav ul li{ 
font-size:13px;
margin-right:0;
width:38%;
}

.cont_btm{
width:90%;
display:block;
margin-top: 30px;
}

.cont_btm ul{ width:100%; }

.cont_btm ul li{
display:inline-block;
margin-right:20px;
font-size:12px;
}	

.cont_btm small{ 
margin-top:20px;
width:100%;
}

.br_sp{ display: block;}

.cont_right ul li span{ display:none; }

.cont_right .info li{ line-height: 1.8; }

}