/*! HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */

/* ==========================================================================
   contact 共通要素
   ========================================================================== */

header h1{
	padding: 25px 25px;
}

/* --------------------- MENU ---------------------*/



#nav-toggle {
    position: absolute;
    top: 25px;
    right: 25px;
    height: 60px;
    cursor: pointer;
}
    
#nav-toggle div {
    position: relative;
    width: 42px;
  }

#nav-toggle div span {
    width: 100%;
    height: 4px;
    left: 0;
    display: block;
    background: #ff8d33;
    position: absolute;
    transition: transform .4s ease-in-out, top .4s ease;
}
#nav-toggle .menu__line--top {
      top: 0;
    }
#nav-toggle .menu__line--center{
      top: 14px;
    }
#nav-toggle .menu__line--bottom{
      top: 28px;
    }

#nav-toggle .menu__line--text{
	width: 100%;
    left: 0;
    display: block;
    position: absolute;
	top: 33px;
	font-size: 21px;
	font-family: "Khand",sans-serif;
	color: #ff8d33;
	transition: all 0.8s ease-in-out;
	opacity: 1;
}

#nav-toggle .menu__line--close{
	width: 100%;
    left: 0;
    display: block;
    position: absolute;
	top: 33px;
	font-size: 21px;
	font-family: "Khand",sans-serif;
	color: #ff8d33;
	transition: all 0.8s ease-in-out;
	opacity: 0;
}

.open #nav-toggle .menu__line--top {
      top: 15px;
      transform: rotate(45deg);
}
.open #nav-toggle .menu__line--center {
      top: 15px;
      width: 0;
      left: 50%;
    }
.open #nav-toggle .menu__line--bottom {
      top: 15px;
      transform: rotate(-45deg);
    }
 
.open #nav-toggle .menu__line--text{
	opacity: 0;
}

.open #nav-toggle .menu__line--close{
	opacity: 1;
}

/* z-index */
#nav-toggle {
    z-index: 1000;
}
#container {
    z-index: 900;
}

#gloval-nav {
    background: linear-gradient(135deg,rgba(255,141,51,0.95),rgba(62,45,145,0.95));
    color: #fff;
	position: absolute;
	position: fixed;
	width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    text-align: left;
    display: flex;
    visibility: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
	font-family: "Khand",sans-serif;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
}

#gloval-nav span{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 16px;
	padding-left: 20px;
}

#gloval-nav a {
	font-size: 30px;
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px 0;
    transition: color .4s ease;
}
#gloval-nav a:hover {
  color: #3e2d91;
}
 
  
#gloval-nav ul {
    list-style: none;
}

#gloval-nav ul li {
      opacity: 0;
      transform: translateX(200px);
      transition:  transform .3s ease, opacity .1s ease;
}
      #gloval-nav ul li:nth-child(2) {
        transition-delay: .12s;
      }
      #gloval-nav ul li:nth-child(3) {
        transition-delay: .24s;
      }
      #gloval-nav ul li:nth-child(4) {
        transition-delay: .36s;
      }
      #gloval-nav ul li:nth-child(5) {
        transition-delay: .48s;
      }

#gloval-nav ul li a:before{
	content:"■";
	font-size: 12px;
	vertical-align: middle;
	padding-right: 10px;
}

/* open */
/*.open {
    overflow: hidden;
}*/

.open #nav-toggle{
	position: fixed;
}

.open #gloval-nav {
    visibility: visible;
    opacity: 1;
  }

.open #gloval-nav li {
    opacity: 1;
    transform: translateX(0);
    transition:  transform 0.5s ease, opacity .6s ease;
  }


footer .footer__sitemap a,
footer .footer__office address a{
	text-decoration: none;
	color: #000;
}

.contact__inner{
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1060px;
	width: 100%;
	margin-bottom: 100px;
	padding: 30px 50px 0 50px;
}

.contact .contact__ttl {
	font-size: 28px;
	background: url(../img/icon_01.svg) top left no-repeat ;
	background-size: 53px auto;
	padding: 40px 0 50px 0;
	line-height: 1.4;
}
	
.contact .contact__ttl span{
	font-size: 60px;
	font-family: "Khand",sans-serif;
	display: block;
	border-bottom: 1px solid;
    border-image: linear-gradient(to right, #ff8d33 0%, #3e2d91 100%);
    border-image-slice: 1;
}

.contact .contact__txt span{
	color: red;
}

footer a{
	transition: 0.5s ;
}

footer a:hover{
	color: #ff8d33;
	transition: 0.1s ;
}


@media (max-width:750px) {
	
	header h1{
		padding: 20px 20px;
	}
	
	header h1 img{
		width: 160px;
		height: auto;
	}
	
	.contact__inner{
		margin-bottom: 60px;
		padding: 30px 20px 0 20px;
	}
	
	.contact .contact__ttl {
		font-size: 18px;
		background: url(../img/icon_01.svg) top left no-repeat ;
		background-size: 50px auto;
		padding: 35px 0 30px 0;
		line-height: 1.9;
	}

	.contact .contact__ttl span{
		font-size: 33px;
		line-height: 1.4;
	}
	
	#nav-toggle {
		top: 20px;
		right: 20px;
	}
	
	#nav-toggle div span {
		height: 3.3px;
	}
	
	#nav-toggle div {
    width: 35px;
 	 }
	
	#nav-toggle .menu__line--center{
		  top: 11px;
		}
	#nav-toggle .menu__line--bottom{
		  top: 22px;
		}

	#nav-toggle .menu__line--text{
		top: 26px;
		font-size: 17px;
	}
	
	#nav-toggle .menu__line--close{
		top: 26px;
		font-size: 17px;
	}

	#gloval-nav ul li {
		  transform: translateX(0px);
	}

	#gloval-nav span{
		font-size: 13px;
		padding-left: 10px;
	}

	#gloval-nav a {
		font-size: 23px;
		padding: 20px 0;
	}
	
	#gloval-nav ul li a:before{
		content:"■";
		font-size: 6px;
		vertical-align: middle;
		padding-right: 10px;
	}
}


/* ==========================================================================
   contact input
   ========================================================================== */


/* --------------------- input tel ---------------------*/


.contact .contact__tel{
	max-width: 500px;
	margin: 0 auto;
	margin-top: 70px;
}

.contact .contact__tel a{
	text-decoration: none;
}

.contact .contact__tel p{
	font-size: 19px;
}

.contact .tel__inner{
	padding: 25px 30px 20px 30px;
	color: #fff;
	text-align: center;
	background: linear-gradient(90deg, rgba(255,141,51,1) 40%,rgba(62,45,145,1));
}

.contact .tel__number{
	font-family: "Khand",sans-serif;
	font-size: 34px;
	line-height: 1.3;
	font-weight: lighter;
	
}

.contact .tel__time{
	line-height: 1.6;
}

.contact .tel__time span{
	font-family: "Khand",sans-serif;
	font-size: 23px;
	font-weight: lighter;
}

@media (max-width:750px) {
	.contact .contact__tel{
		margin-top: 50px;
	}
	
	.contact .contact__tel p{
		font-size: 15px;
	}
}

/* --------------------- input form ---------------------*/

.formGroup__Label span{
	color: red;
}

.contact .contact__form{
	width: 100%;
	margin-top: 100px;
}
.formGroup__Label{
	width:30%;
	padding:15px 50px 40px 0;
	vertical-align: top;
	text-align: left;
}

.formGroup__input{
	width: 70%;
	padding-bottom: 40px;
}

.formGroup__control{
	width: 100%;
	height: 54px;
	border: 1px solid #b3b3b3;
	box-sizing: border-box;
	padding-left:15px;
}

.formGroup__controlWide{
	width: 100%;
	border: 1px solid #b3b3b3;
	box-sizing: border-box;
	padding:15px 0 0 15px;
}

input::placeholder {
  color: #b3b3b3;
}

input:-ms-input-placeholder {
  color: #b3b3b3;
}

input::-ms-input-placeholder {
  color: #b3b3b3;
}

.formGroup__input .error .comment{
	color: red;
}

@media (max-width:750px) {
	
	.contact .contact__form{
		margin-top: 50px;
	}
	
	.formGroup__Label{
		display: block;
		width:100%;
		padding:0 0 5px 0;
	}
	
	.formGroup__input{
		display: block;
		width: 100%;
		padding-bottom: 30px;
	}
}

/* --------------------- input privacy ---------------------*/

.privacy {
		overflow:auto;
		width:100%;
		height:254px;
		padding:20px;
		border:1px solid #b3b3b3;
		box-sizing: border-box;
		line-height: 1.5;
	margin-bottom: 50px;
	}

.privacy h4{
	font-size: 16px;
	line-height: 1.5;
}

.privacy h5,
.privacy li,
.privacy p{
	font-size: 13px;
}

/* --------------------- input btn ---------------------*/

.formSubmit{
	text-align: center;
}

.submit__inner input{
	width: 249px;
	height: 67px;
	border: #fff 1px solid;
	box-sizing: border-box;
	margin: 0 auto;
	margin-top: 50px;
	transition: 0.4s;
	background-size: 200% auto;
}

/* 発行されるCSS */
.submit__inner input{background-image: linear-gradient(to right, #ff8d33 0%, #ff8d33 10%, #3e2d91 48%, #ff8d33 100%)}
.submit__inner input:hover { background-position: right center; }

.confirm__btn{
	line-height: 65px;
	color: #fff;
	font-family: "Khand",sans-serif;
	font-size: 20px;
	display: block;
	text-align: center;
	padding: 2px 0 0 0;
	/*background: url(../../img/allow_02.png) 180px 26px no-repeat;*/
}

.submit__inner{
	position: relative;
}

.submit__inner img{
	position: absolute;
	top: 30px;
	left: 56%;
}

@media (max-width:750px) {
	.submit__inner img{
		position: absolute;
		top: 30px;
		left: 60%;
	}
	
	.formSubmit{
		text-align: left;
	}
	
	.submit__inner input{
		margin-top: 20px;
	}
}


/* ==========================================================================
   contact confirm
   ========================================================================== */


.alpha{
	width: 100%;
	margin: 100px 0 100px 0;
}

.alpha th{
	width:30%;
	padding:0px 50px 55px 0;
	vertical-align: top;
	text-align: left;
}

.alpha td{
	width: 70%;
	height: 54px;
	vertical-align: top;	
}

.confirm__inner{
	margin: 0 auto;
	width: 553px;
	padding: 50px 0 80px 0;
}

/* --------------------- confirmPage returnBtn ---------------------*/

.confirm__return{
	width: 249px;
	height: 63px;
	height:100%;
	border-left:1px solid #3e2d91;
	border-right:1px solid #ff8d33;
	box-sizing: border-box;
	float: left;
}

	.confirm__return:before,
	.confirm__return:after {
		content:"";
		display:block;
		height:1px;
		width:100%;
		background:-webkit-gradient(linear, left top, right bottom, from(#3e2d91), to(#ff8d33));
		background:-moz-linear-gradient(left, #3e2d91, #ff8d33);
		background:linear-gradient(left, #3e2d91, #ff8d33);
	}

.return__btn{
	width: 249px;
	height: 63px;
	line-height: 63px;
	color: rgba(255,141,51,1);
	font-family: "Khand",sans-serif;
	font-size: 20px;
	display: block;
	text-align: center;
	padding: 2px 0 0 10px ;
	background: url(../../img/allow_03.svg) 15px 26px no-repeat;
	background-size: 50px auto;
	border: none;
}

.return__btn{
	transition: 0.2s ;
}

.return__btn:hover {
	color:#3e2d91;
	transition: 0.5s ;
}

/* --------------------- confirmPage sendBtn ---------------------*/

/*.confirm__send{
	float: right;
	background: linear-gradient(90deg, rgba(255,141,51,1) 40%,rgba(62,45,145,1));
	width: 249px;
	height: 67px;
	box-sizing: border-box;
}*/

/*.send__btn{
	width: 249px;
	height: 67px;
	line-height: 65px;
	color: #fff;
	font-family: "Khand",sans-serif;
	font-size: 20px;
	display: block;
	text-align: center;
	padding: 2px 20px 0 0;
	background: url(../../img/allow_02.png) 180px 26px no-repeat;
	border: none;
}*/

.send__btn{
	width: 249px;
	height: 67px;
	border: #fff 1px solid;
	transition: 0.4s;
	background-size: 200% auto;
	margin-top: -1px;
}

/* 発行されるCSS */
.send__btn{background-image: linear-gradient(to right, #ff8d33 0%, #ff8d33 10%, #3e2d91 48%, #ff8d33 100%)}
.send__btn:hover { background-position: right center; }

.send__btn{
	line-height: 67px;
	color: #fff;
	font-family: "Khand",sans-serif;
	font-size: 20px;
	display: block;
	text-align: center;
	padding: 2px 10px 0 0;
	/*background: url(../../img/allow_02.png) 180px 26px no-repeat;*/
}

.confirm__send{
	position: relative;
	float: right;
}

.confirm__send img{
	position: absolute;
	top: 30px;
	right: 7%;
}

@media (max-width:750px) {
	.confirm__inner{
		width: 249px;
		padding: 20px 0 0 0;
	}
	
	.confirm__return{
		float: none;
	}
	
	.confirm__submit{
		float: none;
	}
	
	.alpha th{
		width:100%;
		padding:0px 0px 5px 0;
		display: block;
	}

	.alpha td{
		width: 100%;
		height: inherit;
		padding:0px 0px 50px 20px;
		display: block;
		box-sizing: border-box;
	}
	
	.alpha{
		margin: 50px 0 0px 0;
	}
	
	.send__btn{
		margin-top: 20px;
	}
	
	.confirm__send img{
		position: absolute;
		top: 50px;
		right: 7%;
	}
}

/* ==========================================================================
   contact error
   ========================================================================== */

.contact__btn{
	margin: 0 auto;
	margin-top: 50px;
	width: 249px;
}