@charset "UTF-8";



/*------------------------------------*\
PCの表示デザイン
\*------------------------------------*/

@media (min-width: 1150px) {


.pc_no_nav{display: none;}


/* TOP以外のナビの高さ分下げる */
#notop header{padding-bottom: 55px;}

/* アンカーズレを治す */
#f_int_a,#p_int_a,#e_int_a,#s_int_a,#access,#terms{
margin-top:-55px;
padding-top:55px;
}

/* ロゴ */
.notop_logo img,.index_logo img{width: 160px;}
#top_index .notop_logo{display: none;}
#notop .index_logo{display: none;}


/* 全体を囲む */
nav{
z-index: 500;
width: 100%;
font-size: 0.9em;
padding: 0 0 0 10px;
box-sizing: border-box;
position: fixed;
}
/* 全体を囲む */
#top_index nav{background-color: rgba( 0, 0, 0, 0.55 );}
#notop nav{
height: 54px;
background-color: rgba( 255, 255, 255, 0.9 );
border-bottom: 1px solid #C7C7C7;
}




/* ロゴ */
nav h1{float:left; margin: 7px 20px 7px 0;}


/* ulを囲む */
.nav{display:inline-block;float:left;}


/* 見えてるボタン */
.nav-item {
list-style: none;
float: left;
text-align: center;
position:relative;
font-size: 0.9rem;
}
.nav-item .nav-item-bt{
box-sizing: border-box;
display: block;
height: 55px;
padding: 20px 5px 0 10px;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
transition: 0.5s all;
}
.nav-item .nav-item-bt:hover {background-color: #089ca0;}

/* 見えてるボタン文字色 */
#top_index .nav-item .nav-item-bt{color: #fff;}
#notop .nav-item .nav-item-bt{color: #333333;}
#notop .nav-item .nav-item-bt:hover{color: #fff;}


/* ドロップ表示されるメニュー */
.nav-sub {
position:absolute;
top:54px;
z-index: 500;
list-style: none;
}

/* ドロップ表示されるメニュー フェードアニメ */
.nav-item .nav-sub {
opacity: 0;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
transition: 0.5s all;
}
.nav-item:hover .nav-sub{opacity: 1;}


.nav-sub-item a{
color: #fff;
height: 40px;
line-height:40px;
display: block; 
background-color: #089ca0;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
transition: 0.5s all;
}
.nav-sub-item a:hover {background-color: #036eb8;}


/* ドロップ表示されるメニュー　左からスライド */
.nav-item .nav-sub .nav-sub-item{
width: 0;
overflow: hidden;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
}
.nav-item:hover .nav-sub .nav-sub-item{width: 230px;}

/* 下線 */
.nav-sub li{border-bottom: 2px solid #32ccc1;}
.nav-sub li:hover{border-bottom: 2px solid #fff;}




/* snsと電話とメール */
.nav_contact{
float: right;
overflow: hidden;

display: -moz-box;		/* Fx用 */
display: -webkit-box; 	/* Safari、スマホ用 */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction:row;
flex-wrap:wrap;/*折り返しても*/
justify-content:space-between;
align-items: center;
}
#top_index .nav_contact{color: #fff;}





/* SNS */
.nav_sns{
margin-right: 30px;
display: -moz-box;		/* Fx用 */
display: -webkit-box; 	/* Safari、スマホ用 */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction:row;
flex-wrap:wrap;/*折り返しても*/
justify-content:space-between;
}
.nav_sns li{
width: 25px;
list-style: none;
margin-left: 15px;
}
.nav_sns li a:hover{
opacity: 0.5;
transition: 0.5s;
}



/* 電話 */
.nav_tel{
height: 55px;
line-height:55px;
}
.nav_tel span{font-size: 1.4em; margin: 0 20px 0 5px;}
/* 電話 文字色 */
.nav_tel a{color: #00a99d;}
#top_index .nav_tel a{color: #fff;}



/* メール */
.nav_mail {
transform:skew(-20deg,0deg);/* 斜め */
margin: 0 -10px 0 0;
background: #29a1d8;
background: -moz-linear-gradient(left, #29a1d8 0%, #009f93 50%, #ff00aa 100%);
background: -webkit-linear-gradient(left, #29a1d8 0%,#009f93 50%,#ff00aa 100%);
background: linear-gradient(to right, #29a1d8 0%,#009f93 50%,#ff00aa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29a1d8', endColorstr='#ff00aa',GradientType=1 );
background-size: 300% 300%;
}
/* 画像の斜めを直す */
.nav_mail img{transform:skew(20deg,0deg);}

.nav_mail a{
display: block;
height: 55px;
line-height:55px;
padding: 0 30px;
}



/* hoverトリガー */
.nav_mail:hover{animation:anime_gra 0.5s ease forwards;}/* forwardsは最後で止まる */


}



/* @keyframesはIE11対策で@mediaの外に */
@-webkit-keyframes anime_gra {
0% {background-position:0% 50%;}
100% {background-position:100% 0%;}
}
@keyframes anime_gra {
0% {background-position:0% 50%;}
100% {background-position:100% 0%;}
}








/*------------------------------------*\
    モバイルの表示デザイン
\*------------------------------------*/

@media (max-width: 1150px) {
/* ロゴ */
.notop_logo img,.index_logo img{width: 140px; margin: 3px;}
#top_index .notop_logo{display: none;}
#notop .index_logo{display: none;}


nav{
z-index: 500;
width: 100%;
padding: 5px;
box-sizing: border-box;
}
/* TOPだけnav背景黒*/
#top_index nav{position:absolute;}
#notop nav{height: 50px;}



/* ロゴ */
nav h1{float:left;}

/* SNSと電話とメール（PC） */
.nav_contact{display: none;}

.nav {
z-index: 500;
width:100%;
top:0;
left: 0;
right: 0;
padding:90px 0 0 0;
position:fixed;/* スクロール固定*/
display:inline-block;
/* ここからメニュー内スクロール*/
max-height:100%;
overflow:scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style:none;/* スクロールバー消す */
}
/* スクロールバー消す */
.nav {overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none;}
.nav::-webkit-scrollbar {display:none;}


/* 下矢印 */
.nav-list { display:none;}


/* 見えてるボタン */
.nav-item {
*display:inline;
zoom:1;
position:relative;
}

.nav-item a {
display:block;
color:#FFF;
background:rgba(0,167,155,0.9);
border-bottom:1px solid #fff;
box-sizing: border-box;
}
.nav-item > a {padding:15px;}
.nav-item > a:hover {background:#00665c;color:#FFF;}
.nav-item:hover .nav-sub {display:none;}





/* ドロップ表示されるメニュー */
.nav-sub {
display:none;
position:static;
left:0;
width:100%;
z-index: 500;
}
.nav-sub-item a {
background:rgba(255,255,255,0.8);
border-bottom:1px solid #00a79b;
display:block;
padding:15px;
color: #00a79b;
}
.nav-sub-item a:hover {
background:#bfefea;
color: #00a79b;
}



.nav-mobile-open {
border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
}



/* モバイルメニューの表示ボタン */
.nav-mobile {
display:block;
cursor:pointer;
position:absolute;
top:15px;
right:15px;
background:#00a79b url(../img/common/nav.svg) no-repeat center center;
background-size:18px;
height:50px;
width:50px;
}


/* サブメニューの表示ボタン */
.nav-click {
position:absolute;
top:0;
right:0;
display:block;
border-left:1px solid #fff;
height:49px;
width:50px;
cursor:pointer;
}
.nav-click i {
display:block;
height:48px;
width:48px;
background:url(../img/common/drop.svg) no-repeat center center;
background-size:20px;
}
.nav-click:hover {
background-color:#6E1656;
}
.nav-rotate {
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
}


/* SNS */
.nav_sns_sp{
padding: 15px 0;
background:rgba(0,167,155,0.9);
}
.nav_sns_sp li{
list-style: none;
width: 50%;
margin: 0 auto;
display: -moz-box;		/* Fx用 */
display: -webkit-box; 	/* Safari、スマホ用 */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction:row;
flex-wrap:wrap;/*折り返しても*/
justify-content:space-between;
}
.nav_sns_sp li img{
width: 25px;
}
.nav_sns_sp li a:hover{
opacity: 0.5;
transition: 0.5s;
border: none;
}

}