@charset "utf-8";

/*-----------------------------------------------------
					共通設定
-----------------------------------------------------*/
* {
	box-sizing: border-box;
	font-family: "YuGothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "メイリオ", sans-serif;
	font-size: 14px;
	line-height: 1.5em;
}
body {
	overflow-x: hidden; 
}
a { text-decoration: none; }

h2 {
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 60px;
}
h2 > img {
	margin: 0 auto;
}
h2 > p {
	font-size: 14px;
	letter-spacing: .2em;
}
h3 {
	font-size: 32px;
	text-align: center;
	font-weight: 400;
}
h4 {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}

.wrap {
	width: 100%;
	padding: 70px 20px 100px;
}
.container {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
}
.Fjalla { font-family: "Fjalla One", "Meiryo", "メイリオ", sans-serif; }
.Unica { font-family: "Unica One", "Meiryo", "メイリオ", cursive; }

.bg-orange {background: linear-gradient(180deg, #f25a1b, #ed6d00);}
.bg-gray {background: #eee;}
.bg-darkgray {background: #222;}

.border-w , .border-o {
	width: 220px;
	height: 0;
	margin: 8px auto 10px;
}
.border-w {border-top: 3px solid #fff;}
.border-o {border-top: 3px solid #f25a1b;}

.flex {	display: flex; }


/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}


/*-----------------------------------------------------
					メニューバー/#menu
-----------------------------------------------------*/
#menu {
	width: 100%;
	display: flex;
	position: fixed;
	top:0;
	justify-content: space-between;
	background: #fff;
	padding: 15px 45px;
	z-index: 500;
	transition: .3s;
}
#menu .logo a{
	color: #555;
}
#menu .logo a:visited {
	color: #555;
}
	#menu .logo a img{ 
		height:30px; 
	}
.nav-button {display: none;}
	.nav-wrap{
		display: block;
	}
	.nav li {
		display: inline-block;
		margin: 0 10px;
	}
	.nav a {
		color: rgba(242, 90, 27, .5);
		font-size: 16px;
		font-family: "Fjalla One", "Meiryo", "メイリオ", sans-serif;
		transition: .3s;
		display:inline-block;
	}
	.nav a:hover {
		color: rgba(242, 90, 27, 1);
		transition: .3s;
	}
	.nav li a.on {
		color: rgba(242, 90, 27, 1);
		transition: .3s;
		padding-bottom: 3px;
		border-bottom: 3px solid #f25a1b;
	}


@media screen and (max-width: 767px) {
	#menu {
		padding: 15px 20px;
		z-index: 1000;
	}
	.nav-button {
		display: block;
		cursor: pointer;
		z-index: 1000;
	}
	.nav-wrap {
	    position: fixed;
	    left: 0;
	    top: 0;
	    display: none;
	    z-index: 1000;
	    background-color: rgba(0, 0, 0, 0.8);
	    width: 100%;
	    height: 100%;
	}
		.nav {
			height: 100%;
			position: relative;
			overflow-x: hidden;
			overflow-y: auto;
		}
			.nav li {
				display: block;
				margin: 1em;
				text-align: center;
			}
			.nav li:first-of-type {
				margin: 70px 1em 1em 1em;
			}
			.nav a {
				font-size: 40px;
				color: rgba(242, 90, 27, 1);
			}
			.nav a:hover {font-size: 40px;}
	.nav-wrap.active {
		display: block;
	}
	
	/*メニューボタンのエフェクト*/
	.nav-button, .nav-button span {
		display: inline-block;
		transition: all 0.4s;
	}
	.nav-button {
	    z-index: 2000;
	    position: relative;
	    width: 40px;
	    height: 25px;
	}
	.nav-button span {
	    position: absolute;
	    left: 0;
	    width: 70%;
	    height: 4px;
	    background-color: #f25a1b;
	    border-radius: 4px;
	}
		.nav-button span:nth-of-type(1) {top: 0;}
		.nav-button span:nth-of-type(2) {top: 11px;}
		.nav-button span:nth-of-type(3) {bottom: 0;}

		.nav-button.active span:nth-of-type(1) {
		    -webkit-transform: translateY(15px) rotate(-45deg);
		    transform: translateY(6px) rotate(-45deg);
		}
		.nav-button.active span:nth-of-type(2) {opacity: 0;}
		.nav-button.active span:nth-of-type(3) {
			-webkit-transform: translateY(-15px) rotate(45deg);
			transform: translateY(-15px) rotate(45deg);
		}
}

/*-----------------------------------------------------
					ヘッダー/header
-----------------------------------------------------*/
header {
	position: relative;
	overflow: hidden;
}
header.roop-bg-01 {
	width: 100%;
	height: 100vh;
	min-height: 850px;
    background: url(../img/bg-text-01_Pc.png) repeat-x;
    
}
header .roop-bg-02 {
	width: 100%;
	height: 100vh;
	min-height: 850px;
	background: url(../img/bg-text-02_Pc.png) repeat-x;
}
header .roop-bg-03 {
	width: 100%;
	height: 100vh;
	min-height: 850px;
	background: url(../img/bg-text-01_Pc.png) repeat-x;
}

/*-------------- メインロゴ/#mainlogo --------------*/
#mainlogo {
	width: 70%;
	max-width: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	z-index: 0;
}
	#mainlogo > div {
		margin: 1em;
	}
		.svg-anime{
			stroke:#f25a1b;
			stroke-width:1.2;
			fill:transparent;
			stroke-dasharray:3000px;
			stroke-dashoffset:3000px;
			animation:anim 4s ease-in 0s forwards;
			animation-delay:.5s;
		}
			@keyframes anim{
			0%{stroke-dashoffset:3000px; fill:transparent;}
			30%{stroke-dashoffset:2500px; fill:transparent;}
			50%{stroke-dashoffset:2000px;  fill:#f25a1b;}
			100%{stroke-dashoffset:0; fill:#f25a1b;}
			}
		.cls-3{
			stroke:#f25a1b;
			stroke-width:1;
			fill:transparent;
			stroke-dasharray:3000px;
			stroke-dashoffset:3000px;
			animation:anim2 4s ease-in 0s forwards;
			animation-delay:.5s;
		}
			@keyframes anim2{
			0%{stroke-dashoffset:3000; fill:transparent;}
			30%{stroke-dashoffset:3000; fill:transparent;}
			50%{stroke-dashoffset:3000;  fill:#f25a1b;}
			100%{stroke-dashoffset:3000; fill:#f25a1b;}
			}
	#mainlogo p {
		color: #f25a1b;
		font-size: 30px;
		margin: 0 -95px;
		text-align: center;
		letter-spacing: 1px;
		font-weight: bold;
		-webkit-clip-path: inset(0 100% 0 0);
		clip-path: inset(0 100% 0 0);
		animation: text-crip 2s linear 1s forwards;
		animation-delay: 2.3s;
	}
		@keyframes text-crip{
			0% {
				-webkit-clip-path: inset(0 100% 0 0);
				clip-path: inset(0 100% 0 0);
			}
			100% {
				-webkit-clip-path: inset(0);
				clip-path: inset(0);
			}
		}


/*-------------- 矢印/.arrow --------------*/
.arrow {
	position: absolute;
	left: 50%;
	bottom: 12%;
	opacity: 0;
	transform: translateX(-50%);
	animation:anim3 4s ease-in 0s forwards;
	animation-delay:.5s;
}
	@keyframes anim3{
	0%{opacity: 0;}
	30%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 1;}
	}
	.arrow p { color: #f25a1b; }
	.arrow div { animation: fluffyY 1.5s ease-in-out infinite; }
	.arrow span {display: block;}
	.arrow span:first-of-type {
		content: "";
		border-left: 1px solid #f25a1b;
		width: 1px;
		height: 50px;
		transform: translateX(17px) translateY(10px);
	}
	.arrow span:last-of-type {
		content: "";
		border-bottom: 1px solid #f25a1b;
		width: 15px;
		height: 1px;
		transform: translateX(15px) translateY(4px) rotate(-45deg);	
	}


/*-----------------------------------------------------
					お知らせ/#news
-----------------------------------------------------*/
#news {
	background: #F5F5F5;
	padding: 70px 20px;
}
	#news .flex {
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
	}
		#news .flex h2 {
			margin-bottom: 0;
			font-size: 0;
			align-self: center;
		}
			#news .flex h2 img {
				width: 40px;
			}
			#news .flex h2 p {
				font-size: 16px;
				color: #222;
				letter-spacing: 0.05em;
				font-weight: normal;
			}

		#news .flex .news-inner {
			flex: 1;
			margin-left: 50px;
		}
			#news .flex .news-inner ul{
				list-style: none;
			}
				#news .flex .news-inner > ul > li {
					padding: 7px 0;
					border-top: 1px dotted #9e9e9e;
				}
				#news .flex .news-inner > ul > li:last-of-type {
					border-bottom: 1px dotted #9e9e9e;
				}
						#news .flex .news-inner ul li p span.info {}
					#news .flex .news-inner > ul > li > a{
						display:inline;
						color: #333;
					}
					#news .flex .news-inner > ul > li > a:hover {
						font-weight: bold;
					}	
						#news .flex .news-inner > ul > li > a img{
							width: 18px;
						}
						#news .flex .news-inner > ul > li > ul {
							display: inline-block;
						}
						#news .flex .news-inner > ul > li > ul > li a[href*="cat=1"] {
							background: #999;
							color: #FFF;
							font-size: 10px;
							border-radius: 3px;
							padding: 3px 5px;
						}
						#news .flex .news-inner > ul > li > ul > li a[href*="cat=2"] {
							background: #0082d2;
							color: #FFF;
							font-size: 10px;
							border-radius: 3px;
							padding: 3px 5px;
						}				
						#news .flex .news-inner > ul > li > ul > li a[href*="cat=3"] {
							background: #00d2aa;
							color: #FFF;
							font-size: 10px;
							border-radius: 3px;
							padding: 3px 5px;
						}

						.post-categories li {
						    margin-left: 20px;
						}

/*-----------------------------------------------------
					事業紹介/#products
-----------------------------------------------------*/
#products h2 img { width: 212px; }
#products h2 p { color: #fff; }
#products h3 {color: #fff;}

#products .business-content {
	background: #fff;
	padding: 80px 70px;
	margin: 60px auto 0;
	border-radius: 2px;
	text-align: center;
	box-sizing: border-box;
    width: 100%;
    max-width: 960px;
}
	#products .business-content img { 
		width: 100%;
	    max-width: 850px;
	    display: inline-block;
	 }
	#products .business-content.max-960-hide > p {
		margin-top: 32px;
		font-size: 18px;
		font-weight: 600;
		color: #FF9F1C;
		text-align: right;
	}
	#products .business-content.max-960-hide > p span {
		color: #FF9F1C;
		font-size: 25px;
	}

#achievement {
	text-align: center;
}
	#achievement h4 {
		display: inline-block;
		margin: 0 auto;
		padding: 2px 8px 0;
		color: #fff;
		font-weight: 500;
		border: 1px solid #fff;
		border-radius: 2px;
	}

	#achievement .dott {
		text-align: center;
		margin: 20px auto 20px;
	}
		#achievement .dott span {
			display: block;
			width: 5px;
			height: 5px;
			margin: 10px auto;
			border-radius: 50%;
			background: #fff;
		}

	#achievement .flex{
		text-align: left;
		flex-wrap: wrap;
		justify-content: center;
	}
		#achievement .flex .card {
			margin: 0 5px 20px;
			padding: 4px;
			width: 343px;
		}
			#achievement .flex .card img {
				width: 100%;
				border-radius: 2px;
			}
			#achievement .flex .card span {
				display: inline-block;
				margin: 2px 0 0 10px;
				font-size: 20px;
				color: #fff;
				font-weight: 500;
				line-height: 1.7em
			}
			#achievement .flex .card p {
				padding: 5px 10px;
				color: #fff;
				font-weight: 300;
				line-height: 1.4em;
				text-align: justify;
			}


/*-----------------------------------------------------
					会社紹介/#about
-----------------------------------------------------*/
/*-------------- アリュー株式会社とは？--------------*/
#about h2 img { width: 137px; }
#about h2 p { color: #f25a1b; }

#about .desc {
	width: 100%;
	margin-top: 70px;
}
#about .desc .bg-opacity {
	margin: 0 auto;
	padding-right: 90px;
}
#about .desc .bg-opacity div {
	background: url(../img/araki_new.png) no-repeat;
    background-size: 34%;
    background-position: top right;
    padding: 0 90px;
}
	#about .desc h3 {
		color: #333;
		font-size: 24px;
		font-weight: bold;
		text-align: left;
		width: 100%;
		padding: 0 90px;
		margin-bottom:1.4em;
	}
	#about .desc h3:before {
    content: "";
    width: 4px;
    height: 1em;
    margin-right: 0.8em;
    border-left: 8px solid #f25a1b;
}
	#about .desc p {
		text-align: justify;
		font-weight: 500;
		font-size: 15px;
		color: #333;
		line-height: 1.7em;
		width: 60%;
		margin-top: 1em;
	}
	/*--------
	#about .desc p:first-of-type {
		text-align: center;
		font-size: 26px;
	}
	--------*/
	#about .desc p:last-of-type span {
		display: block;
		text-align: right;
	}
/*-------------- 会社概要/#information --------------*/
#information {
	margin: 90px auto 10px;
}
	#information .inner-l {
		padding: 0 20px 0 90px;
		flex: 1;
	}
		#information .inner-l h2 {
			padding: 10px 30px;
			border-left: 10px solid #f25a1b;
		}
			#information .inner-l h2 img { width: 178px; }
			#information .inner-l h2 p {
				text-align: left;
				color: #6d6e71;
				margin-top: 10px;
			}
		#information .inner-l > img {
			width: 240px;
    		margin: 20% 0 0;
		}
	#information .inner-r {
		flex: 3;
		padding: 0 90px 0 40px;
	}
	#information .inner-r table {
		width: 100%;
		border: 1px solid #f25a1b;
	}
		#information .inner-r table td {
			border: 1px solid #f25a1b;
			padding: 10px 25px;
			font-size: 18px;
			font-weight: 500;
			color: #333;
			vertical-align:middle;
		}
		#information .inner-r table td:first-child {
			width: 160px;
		}
		#information .inner-r table td:last-child {
			font-size: 16px;
		}
			#information .inner-r table td a {
				text-decoration: none;
				color: royalblue;
			}
			#information .inner-r table td a:visited {
				color: royalblue;
			}
			#information .inner-r table td a:hover {
				color: skyblue;
			}
			

/*-------------- マップ/#map --------------*/
#map {
	padding-top: 70px;
}

#map h2 {
    margin-bottom: 25px;
}
#map h2 img {
	width: 250px;
}
#map address {
	text-align: center;
	font-style: normal;
	font-size: 15px;
	font-weight: 500;
}
#maps{
	width: 100%;
	height: 250px;
	margin: 30px auto 10px;
	padding: 0 90px;
}
.mapContainer {
	margin: 30px auto;
	padding: 0 90px;
}
#locationMap {
	width: 100%;
	height: 370px;
	border: 1px solid #ddd;
}



#access {
	text-align: center;
}
	#access img {
		animation: fluffyX 10s ease-in-out infinite;
	}
	#access .rail {
		content: '';
		width: 258px;
		height: 7px;
		background: url(../img/rail.png) repeat-x;
		margin: -5px auto 10px;
	}

	#access div.flex {
		justify-content: center;
	}
		#access div p {
			font-size: 14px;
			padding: 5px 10px;
			font-weight: 600;
			color: #333;
		}
		#access div p:last-child {
			text-align: left;
			font-weight: 500;
			line-height: 1.8em;
		}


/*-----------------------------------------------------
					採用情報/#recruit
-----------------------------------------------------*/
#recruit {
	background: url(../img/bg-image.png) no-repeat;
	background-size: cover;
	background-position: left;
	height: 500px;
}
#recruit h2 img { width: 168px; }
#recruit h2 p { color: #fff; }
#recruit h3 {color: #fff;}

		#recruit .container .inner {
			font-size: 18px;
			color: #fff;
			font-weight: 500;
			text-align: center;
			padding: 40px 0 50px;
		}


/*-----------------------------------------------------
					お問い合せ/#contact
-----------------------------------------------------*/
#contact h2 img { width: 189px; }
#contact h2 p { color: #fff; }
#contact h3 {color: #fff;}

#contact .inner {
	width: 100%;
	max-width: 960px;
	padding: 10px;
	margin: 0 auto;
}
#contact .flex {
	justify-content: center;
}

/*-------------- #contact-info --------------*/
	#contact-info {
		padding-left: 70px;
		width: 40%;
	}
		#contact-info p{
			font-size: 16px;
			color: #000;
			font-weight: 500;
			line-height: 1.3em;
			margin: 25px 0;
			position: relative;
		}
		#contact-info p:first-child span {
			font-size: 14px;
		}
		#contact-info p:first-child:before, #contact-info p:nth-child(2):before, #contact-info p:nth-child(3):before, #contact-info p:nth-child(4):before, #contact-info p:nth-child(5):before {
			position: absolute;
			vertical-align: middle;
			top: -4px;
			left: -50px;
		}
		#contact-info p:first-child:before {
			content: url(../img/location.svg);
		}
		#contact-info p:nth-child(2):before {
			content: url(../img/phone.svg);
		}
		#contact-info p:nth-child(3):before {
			content: url(../img/phone.svg);
		}
		#contact-info p:nth-child(4):before {
			content: url(../img/fax.svg);
		}
		#contact-info p:nth-child(5):before {
			content: url(../img/email.svg);
		}
		#contact-info p:nth-child(3) a {
			display: inline-block;
			color: #1B2CC1;
			font-weight: bold;
		}
		#contact-info p:nth-child(3) a:visited {
			color: #1B2CC1;
		}

		#contact-info .border {
			width: 90%;
			height: 1px;
			border-top: 1px solid #222;
			margin: 0 0 20px -60px;
		}
		#contact-info a.sns {
			display: inline-block;
		}
		#contact-info a.sns:first-of-type {
			margin: 0 20px 0 -50px;
		}
		#contact-info .rotate {
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
		#contact-info a img {
			
		}
		#contact-info a img.target {
			width: 40px;
			transform: rotateZ( 0deg ) ;
			transition: .5s;
		}
		#contact-info a:hover img.target {
			transform: rotateZ( 360deg ) ;
		}

/*-------------- #contact-form --------------*/

#contact-form {
	width: 60%;
	background: #eee;
	padding: 40px 25px;
}
#contact-form form p {
	color: #333;
	font-size: 16px;
	margin-top: 20px;
	font-weight: bold;
}
	#contact-form form p span {
		font-size: 14px;
		font-weight: 500;
	}
#contact-form form p:not(#warning)::after {
	content: '*';
	font-size: 16px;
	margin-left: 3px;
}

input[type="text"], input[type="email"], textarea {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 16px;
	color: #333;
	padding: 5px;
	line-height: 1.7em;
	border: 1px solid #fff;
	border-radius: 1px;
	margin-bottom: 3px;
	width: 100%;
}
input[type="text"], input[type="email"] {
	height: 40px;
}

textarea {
	padding: 10px 15px;
	height: 300px;
}
input[type="text"]:focus, input[type="email"]:focus , textarea:focus {
	outline: 0;
	box-shadow: 0 3px rgba(0,0,0,.2);
	margin-bottom: 5px;
}
input[type="text"]:focus , input[type="email"]:focus {
	height: 38px;
}
textarea:focus {
	height: 298px;
}

#contact-form .submit {
	text-align: right;
}
.submit input[type="submit"] {
	font-family: "YuGothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Meiryo", "メイリオ", sans-serif;
	background: #222;
	font-size: 17px;
	color: #fff;
	letter-spacing: .05em;
	padding: 10px;
	width: 166px;
	border: 2px solid #222;
	border-radius: 4px;
	display: block;
	margin-left: auto;
	margin-top: 30px;
	margin-bottom: 2px;
	box-shadow: 0 2px rgba(0,0,0,0.9);
}
.submit input[type="submit"]:hover {
	outline: 0;
	cursor: pointer;
	background: #111;
	box-shadow: none;
	border: 2px solid #111;
	margin-top: 32px;
	margin-bottom: 0;
}
.submit input[type="submit"][disabled] {
	opacity: .3;
	pointer-events: none;
}

#contact-form hr {
	height: 2px;
	margin: 2.5em 0;
}

/*メールフォームから相談する*/
.contact-mail {
	font-weight: bold;
	margin-top: 5px;
}
#mailform_open {
	display: none;
}
#mailform_open + label {
	position: relative;
	display: block;
	padding: 15px 10px 15px 2.5em;
	color: #192634;
}
#mailform_open + label:hover {
	cursor: pointer;
	opacity: .7;
}
#mailform_open + label::before {
	position: absolute;
	font-family: "FontAwesome";
	content: "\f1d8";
	left: 0.4em;
	font-size: 24px;
	color: #F03446;
}
#mailform_open + label::after {
	position: absolute;
	font-family: "FontAwesome";
	content: "\f0d7";
	right: 1em;
	transition: .3s;
}
#mailform_open:checked + label::after {
	transform: rotate(180deg);
}
#mailform_open + label + form {
	max-height: 0;
	overflow: hidden;
	transition: .5s;
}
#mailform_open:checked + label + form {
	max-height: 1200px;
}

/*チャットワークで相談する*/
.contact-chatw {
	position: relative;
	margin-top: 1.5em;
	padding: 15px 10px 9px;
	transition: .2s;
	border-radius: 4px;
}
.contact-chatw:hover {
	box-shadow: 0 2px 8px #aaa;
}
.contact-chatw::before {
	position: absolute;
	font-family: "FontAwesome";
	content: "\f054";
	right: 1em;
	top: 20px;
	font-size: 14px;
}

.contact-chatw a {
	display: block;
	color: #333;
}
.contact-chatw a img {
	height: 30px;
	width: auto;
}



	
	



/*-----------------------------------------------------
					フッター/footer
-----------------------------------------------------*/
footer {
	width: 100%;
	padding: 45px 10px 10px;
}
#footer-nav {
	width: 100%;
}
#footer-nav ul {
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto;
}
	#footer-nav ul li {
		list-style: none;
		padding: 0 20px;
		margin-bottom: 10px;
		line-height: 1em;
		border-right: 1px solid #fff;
	}
	#footer-nav ul li:last-child {
		border-right: 0;
	}
		#footer-nav ul li a{
			color: #fff;
			font-size: 15px;
			line-height: 1em;
		}
		#footer-nav ul li a:visited {
			color: #fff;
		}
		#footer-nav ul li a:hover {
			color: #f25a1b;
		}
footer img {
	display: block;
	width: 150px;
	margin: 40px auto 30px;
}
footer small {
	display: block;
	font-size: 11px;
	color: #aaa;
	text-align: center;
}


/*-----------------------------------------------------
	[confirmation.php]内容確認画面/#confirmation
-----------------------------------------------------*/
#confirmation.wrap {
	padding: 130px 20px 50px;
}

#confirmation h2 img { width: 189px; }
#confirmation h2 p { color: #fff; }
#confirmation h3 {color: #fff;}

#confirmation .container .inner {
	width: 100%;
	max-width: 600px;
	margin: 70px auto 50px;
	padding: 10px 25px 25px;
	background: #eee;
}


#confirmation .container .inner .box {
	margin: 30px auto;
}
	#confirmation .container .inner .box p:first-child {
		display: inline-block;
		border-radius: 2px;
		padding: 5px 0;
		font-size: 15px;
		color: #333;
		letter-spacing: 1px;
		font-weight: bold;
		margin: 0 0 0.5em 0;
	}
	#confirmation .container .inner .box p:last-child {
		font-size: 16px;
		color: #333;
	    padding: 15px 10px;
	    font-weight:500;
	    background: #f7f7f7;
	    border-radius: 2px;
	}

#confirmation .container .inner form > p {
	font-size: 14px;
    color: #333;
    text-align: center;
    margin: 3em auto 1.5em;
    font-weight: 500;
}
#confirmation .submit input[type="submit"] {
	margin-left: 0;
	margin: 20px auto 30px;
	letter-spacing: 2px;
}
#confirmation .submit input[type="submit"]:hover {
	margin: 22px auto 28px;
}
#confirmation .inner > p {
	text-align: center;
    color: #333;
    font-weight: 500;
    font-size: 13px;
    margin-top: 50px;
}
#confirmation .inner + p {
	text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    margin-top: 30px;	
}
#confirmation .back-btn {
	width: 170px;
    display: block;
    text-align: center;
    margin: 1em auto;
    border: 1px solid #fff;
    border-radius: 2px;
}
#confirmation .back-btn a {
	display: block;
    padding: 10px 15px 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 2px;
    transition: .3s;
}
#confirmation .back-btn a:hover {
	background: #fff;
	color: #f25a1b;
	font-weight: bold;
	transition: .3s;
}


/*-----------------------------------------------------
	[mailto.php]送信結果画面/#mailto
-----------------------------------------------------*/
#mailto {
	height: 100vh;
	padding: 130px 20px 50px;
}


	#mailto h3 {
		color: #fff;
	}
	#mailto p {
		text-align: center;
		color: #fff;
		margin: 2em auto 0;
	}
	#mailto .to-top {
		width: 200px;
		border: 1px solid #fff;
		margin: 3em auto 0;
		border-radius:2px;
	}
		#mailto .to-top a {
			display: block;
			color: #fff;
			letter-spacing: 2px;
			padding: 10px 15px;
			font-size: 16px;
			transition: .4s;
		}
		#mailto .to-top a:visited {
			color: #fff;
		}
		#mailto .to-top a:hover {
			background: #fff;
			color: #f25a1b;
			font-weight: bold;
			transition: .4s;
		}


/*-----------------------------------------------------
					アニメーション@keyframes
-----------------------------------------------------*/

/* 上下にふわふわ */
@keyframes fluffyY{
	0%{transform:translateY(0)}
	50%{transform:translateY(20px)}
	100%{transform:translateY(0)}
}
/* 横にふわふわ？ */
@keyframes fluffyX{
	0%{transform:translateX(0)}
	25%{transform:translateX(-120px)}
	50%{transform:translateX(0)}
	75%{transform:translateX(120px)}
	100%{transform:translateX(0)}
}

/* animation */
.appear.move {
animation : appear 0.8s linear 1 forwards;
}
.fade-in-top.move {
animation : to_top 0.8s ease 1 forwards;
}
.fade-in-left.move {
animation : to_left 1s ease 1 forwards;
}
.fade-in-right.move {
animation : to_right 1s ease 1 forwards;
}
.fade-in-big.move {
animation : to_big 1s ease 1 forwards;
}

.delay3.move {animation-delay:0.3s;}
.delay5.move {animation-delay:0.5s;}
.delay8.move {animation-delay:0.8s;}
.delay20.move {animation-delay:2s;}

@keyframes appear {
	0% { opacity:0;	}
	100% { opacity:1; }
}
@keyframes to_top {
	0% { 
		opacity:0;
		transform:translateY(60px);
	}
	100% { 
		opacity:1;
		transform:translateY(0);
	}
}
@keyframes to_big {
	0% { 
		opacity:0;
		transform: scale(0.3);
	}
	100% { 
		opacity:1;
		transform: scale(1);
	}
}
@keyframes to_left {
	0% { 
		opacity:0;
		transform:translateX(100px);
	}
	100% { 
		opacity:1;
		transform:translateX(0);
	}
}
@keyframes to_right {
	0% { 
		opacity:0;
		transform:translateX(-100px);
	}
	100% { 
		opacity:1;
		transform:translateX(0);
	}
}