@charset "utf-8";

a {outline: none;}
a:link {text-decoration: none; color:#333333;}
a:visited {text-decoration: none; color:#333333;}
a:hover {text-decoration: none; color: #44bbe4;}
a:active {text-decoration: none; color: #44bbe4;}
a:hover img{opacity:0.7; filter:alpha(opacity=70); -ms-filter:“alpha(opacity=70)”;}
a:focus{ outline:none; }

/*== 5-1-25 ===================================*/
.mainblur{filter: blur(8px);}
#g-nav{position:fixed;
z-index: -1;
opacity: 0;
top:0;
width:100%;
height: 100vh;
background:rgba(266,162,172,0.7);
transition: all 0.3s;}
#g-nav.panelactive{opacity: 1; z-index:999;}
#g-nav.panelactive #g-nav-list{
position: fixed;
z-index: 999; 
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;}

#g-nav ul {display: none;
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);}
#g-nav.panelactive ul {display: block;}
#g-nav li{list-style: none; text-align: center;}
#g-nav li a{color: #ffffff;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;}
#g-nav li a:hover{color: #534741;}

#g-nav-list li:nth-of-type(1) a{
font-size: 2em;
text-transform: none;
font-weight: normal;
line-height: 1;
white-space: nowrap;
margin: 0 0 20px 0;}
#g-nav-list li:nth-of-type(2){animation-delay: .2s;}
#g-nav-list li:nth-of-type(3){animation-delay: .4s;}
#g-nav-list li:nth-of-type(4){animation-delay: .6s;}
#g-nav-list li:nth-of-type(5){animation-delay: .8s;}
#g-nav-list li:nth-of-type(6){animation-delay: 1.1s;}
#g-nav-list li:nth-of-type(7){animation-delay: 1.3s;}
/*= openbtn -------------------===============*/
.openbtn{position:fixed;
z-index: 9999;/*ボタンを最前面に*/
top:10px;
right: 10px;
cursor: pointer;
width: 100px;
height:100px;}

.openbtn span{display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #666666;
width: 45%;}
.openbtn span:nth-of-type(1) {top:15px;}
.openbtn span:nth-of-type(2) {top:23px;}
.openbtn span:nth-of-type(3) {top:31px;}
.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;}

.openbtn.active span:nth-of-type(2) {opacity: 0;}
.openbtn.active span:nth-of-type(3){
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;}

/*==　7-1-21===================================*/
.menu-btn{text-align: center; margin: 48px auto;}
a.btn04 {position: relative; display:inline-block;
width: auto; padding:10px 30px; font-size: 1.5em;
color: #736357; border:1px solid #d2a99a; text-decoration: none;
line-height: 1.2;
letter-spacing:1px;
outline: none;
overflow: hidden;}
a.btn04:hover {color:#ffffff; border-color: transparent; transition-delay: .6s;}
a.btn04 span{display: block; font-size: 0.7em; z-index: 2;}

.bordertop span::before,
.bordertop span::after {content: '';
position: absolute; width:1px; height: 0; background: #d2a99a; transition: all .3s;}
.bordertop span::before {left:0; top:0;}
.bordertop span::after {right:0; top:0;}
.bordertop:hover span::before,
.bordertop:hover span::after {height: 100%;}
.bordertop::before{content: '';
position: absolute;
left: 0; top:0; z-index: -1; width: 100%; height: 0; background:#d2a99a;
transition: all .3s;}
.bordertop:hover::before{height: 100%; transition-delay: .4s;}

/*== btn002 ===========================================*/
a.btn002{display: inline-block; width: 100%;  margin: 22px auto;
padding:10px 30px; font-size: 1.5em;
color: #ffffff;
border:1px solid #d2a99a;
line-height: 1.2;
letter-spacing:1px;
outline: none;
background-color:#d2a99a;
text-align: center;
text-decoration: none;
transition: .4s;}
a.btn002 span{display: block;  font-size: 0.7em;}
/*== banner002   ======================================*/
a.banner002:hover {background: #ffffff; color: #dd7171;}

/*== btn-line =========================================*/
a.btn-line{display: inline-block;
width: 100%; margin: 8px auto; padding: 8px 18px; border: 1px solid #ffffff;
background: transparent;
color:#ffffff; text-align: center; font-size: 1.08em; font-weight:normal;
text-decoration: none;
line-height: 2;
letter-spacing:1px;
transition: .4s;}
a.btn-line span{display: block; padding: 0px 4px;}
a.btn-line .fas{font-size: 1.1em;}
/*== banner-line ======================================*/
a.banner-line {position: relative; z-index: 2; background-color: #00c300;}
a.banner-line::after {display: block; content: ""; position: absolute;
z-index: -1;
top: 0; bottom: 0; left: 0; right: 0; width: 0; height: 0;
margin: auto;
background: rgba(255,255,255,.8);
transition: .3s;}
a.banner-line:hover::after {width: 100%; height: 100%;}

/*==========================================
 btn001-w
===========================================*/
a.btn001-w{display: inline-block;
width: 100%; margin: 30px auto; padding: 4px 0;
border: 1px solid #393e3d;
background: transparent;
color:#393e3d;
text-align: center;
font-size: 1.08em;
/*font-weight: bold;*/
text-decoration: none;
line-height: 1;
letter-spacing:1px;
transition: .4s;}
a.btn001-w span{display: block; margin: 4px auto;}
a.btn001-w i{font-size:1.2em;}
/* banner001-w ======================================*/
a.banner001-w:hover {background: #e2a2b1; color: #333333;}