@charset "utf-8";
/* na.css */
.mail-ka-ku-ni-nn{text-align: center;
font-size: 2em;
margin-bottom: 30px;}

/* ! mailフォームボタン */
.mail-button-area{
  display: flex;
  justify-content: space-around;

}
.input-page-mail-button,
.mail-button_php-1,
.mail-button_php-2{
    margin: 15% 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.mail-button p {
    margin:30px 50px 30px 50px;
}

/* リセット */
.input-page-mail-button button,
.mail-button_php-1 button,
.mail-button_php-2 button{
    appearance: none;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
}
.input-page-mail-button button,
.mail-button_php-1 button,
.mail-button_php-2 button {
  position: relative;
  display: block;
  padding: .8em 1.7em .8em 1em;
  width: 175px;
  font-size: 20px;
  color: #333;
  text-align: center;
    line-height: 1;
  background: #52ddae;
  border: solid 1px #25bf8c;
  text-indent: 0.1em;
  letter-spacing: 0.1em;
  border-radius: .8em;
  margin-bottom: 40px;
}
.input-page-mail-button button:first-child,
.mail-button_php-1 button{
    padding: .4em .7em .4em 1em;
    background:  #c5ded5;
    width: 160px;
  }

  @media (max-width: 513px) {
    .input-page-mail-button button:first-child,
    .mail-button_php-1 button,
    .mail-button_php-2 button{
        font-size: .7em;
        line-height: 1.5;
    }
  }

.input-page-mail-button button:last-child,
.mail-button_php-1 button,
.mail-button_php-2 button{
  border: solid 3px #25bf8c;
}

.input-page-mail-button button:last-child:after,
.mail-button_php-2 button:after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.5em;
  margin: auto;
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  transform: rotate(45deg);
  transition: right 0.5s;
}
.input-page-mail-button button,
.mail-button_php-1 button,
.mail-button_php-2 button{
    cursor: pointer;
  }
.input-page-mail-button button:hover:after,
.mail-button-area button:hover:after{
  right: 1em;
}

.text-center {text-align:center;
}

/*========= ヘッダーナビメニュー===============*/
/*#と.panelactiveはjsで使用*/
@media (max-width: 864px) {

#g-nav{
    position:fixed;   /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
	top:0; /*ナビの位置*/
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:rgba(37, 38, 47, 0.916);
	transition: all 0.3s; /*動き*/
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{/*.panelactiveはjsで使用*/
	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 {
    width: 80%;
    display: none;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:55%;
    left:50%;
    transform: translate(-50%,-50%);
}

#g-nav.panelactive ul {
    display: block;
}

/*リストのレイアウト設定*/

#g-nav li{
    text-align: center; 
	 z-index: 999999;
	 /* background-color: rgba(246, 238, 186, 0.665); */
}

#g-nav li a{
	color: rgb(189, 189, 189);
	font-size:1em;
	padding:5%;
	display: block;
	letter-spacing: 0.1em;
	font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:79px;
	right: 0px;
	cursor: pointer;
    width: 56px;/*三本線幅*/
    height:50px;
	background-color: #273e81;
}


/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	 background-color: #ff960d;
  	width: 50%;
  }
/*三本線位置*/
.openbtn span:nth-of-type(1) {top:14px;}
.openbtn span:nth-of-type(2) {top:23px;}
.openbtn span:nth-of-type(3) {top:32px;}

/*×の／と／*/
.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 38%;/*／の長さ*/
}

.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: 38%;/*＼の長さ*/
}

/* !ハンバーガーメニュー自動移動*/
.jq-fixed {
  position: fixed;
  top: 0;
  right: 0;
  animation: anim .5s;
}
@keyframes anim {
  0% {
  transform: translateY(80px);
  }
}
}


@media screen and (min-width: 1080px){
/*! ホバーアニメーション */
figure a::after{display: none;}/*ロゴ*/
header a,footer a{
   position: relative;
   display: inline-block;
   text-decoration: none;
 }

 .hover-line p a::after,
 .hover-line li a::after,
 footer a::after {
   position: absolute;
   bottom:5px;
   left: 0;
   content: '';
   width: 100%;
   height: 2px;
   background: #ff960d;
   transform: scale(0, 1);
   transform-origin: center top;
   transition: transform .3s;
 }

 header a:hover::after,
 footer a:hover::after {
   transform: scale(1, 1.5);
 }
 .hover-line p:last-child{
    margin-left: 12px;
 }
 .footer a::after{
   bottom:18px;
 }
}