@charset "utf-8";
* {
	margin: 0px;
	padding: 0px;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
a {
	text-decoration: none;
}
img {
	vertical-align:bottom;
	border:none;
	width:100%;
}
table {
	border-collapse: collapse;
}
.clearfix:after {
	content: ".";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
  	height: 1px;
  	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

body {
	font-family: Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
	scroll-behavior: smooth;
	
}


.main {
	width:100%;
	max-width:760px;
	margin:0 auto;
	overflow:hidden;
}

.relative{
	position:relative;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	
}

.absolute{
	position:absolute;
}



/*ヘッダー*/

header{
	width:100%;
	background-color:#FFF;
	z-index:30;
	text-align:center;
}

#header_logo{
	max-width:330px;
	width:43.4%;
	padding:3%;
}

#line{
	max-width:200px;	
	width:100%;
}

#white{
	max-width:10px;
	width:100%;
}


/*トップアニメーション*/


#top_mozi{
	max-width:760px;
	width:97%;
	top:25%;
	left:0;
	right:0;
	margin:0 auto;

}

#top_contact{
	max-width:560px;
	width:73.6%;
	top:75%;
	left:0;
	right:0;
	margin:0 auto;
}
	
#sononayami{
	max-width:724px;
	width:95.2%;
	top:30%;
	left:0;
	right:0;
	margin:0 auto;
}


/*お問い合わせ*/

#contact_tel{
	max-width:708px;
	width:93.1%;
	top:22%;
	left:0;
	right:0;
	margin:0 auto;
}


#contact_line{
	max-width:708px;
	width:93.1%;
	top:65%;
	left:0;
	right:0;
	margin:0 auto;
}


/*フォーム*/

#form_bg{
	background-color:#F8F8F8;
}

#form_24{
	max-width:380px;
	text-align:center;
	margin:0 auto;
	padding-top:5%;
	display:block;
}
.Form {
  margin-top: 10%px;
  margin-left: auto;
  margin-right: auto;
  padding:4%;
  max-width: 760px;
  background-color:#F8F8F8;
}
@media screen and (max-width: 480px) {
  .Form {
    margin-top: 40px;
  }
}
.Form-Item {
  border-top: 1px solid #ddd;
  padding-top: 24px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
}
.Form-Item:nth-child(5) {
  border-bottom: 1px solid #ddd;
}
.Form-Item-Label {
  width: 100%;
  max-width: 190px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}
.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }
}
.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  background: #F30;
  color: #fff;
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
  }
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 10px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 500px;
  background: #FFF;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 13px;
  }
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 10px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  max-width: 500px;
  background: #FFF;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 92.1%;
  max-width:700px;
  display: block;
  letter-spacing: 0.05em;
  background: #FF9B00;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}
@media screen and (max-width: 480px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
  }
}

/*会社概要*/

#gaiyou{
	background-color:#F7F8FB;
	text-align:center;
	padding:3%;
	font-size:0.8rem;
}


@media screen and (max-width: 800px) {
	#btn_area_border span{
		font-weight:bold;
		font-size:1.2rem;
	}
	input[type=checkbox] {
		transform: scale(1.2);
	}
}
#privacy_text {
	padding:10px;
}


/*フッター*/



#kotei_contact{
	width: 100%;
	position: fixed; /* 固定 */
	bottom: 0; /* 一番下に表示 */
    background: #FF9B00;
	margin:0 auto;
	z-index: 20;
}


#kotei_contact_img{
	display:block;
	margin:0 auto;
	max-width:302px;
	width:39.7%;
}

.flexbox{
	 display: flex;
	 justify-content:center;
	 align-items: center;
	 margin:0 auto;
	 padding:1%;
}

.flexbox img{
	padding:1px;
}

footer{
	font-weight:bold;
	background:#FF9B00;
	padding:20px 0 25%;
	font-size:0.8rem;
	color:#FFF;
	text-align:center;
}

@media screen and (min-width: 760px) {
	.sikaku_box {
		display:none;
	}
	footer{
		padding:20px 0 10px;
	}
}
footer a{
	color:#FFF;
}




/*========= 固定させるためのCSS 125naroom.com/web/3254 ===============*/

.sikaku_box {
    /* 1. メニューを画面下へ隠す */
	transform: translateY(100%);
	/* 2. 0.3秒かけて表示する */
	transition: .3s;
}
.sikaku_box.fixed {
    position: fixed;
    bottom: 0;
    z-index: +1;
}
.sikaku_box.fixed.none {
    opacity: 0;
    z-index: -1;
}
.active{
  /* 3. メニューを定位置へ戻す */
  transform: translateY(0);
}
.oneArea {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1000px;
    background: #f2f2f2;
}
.oneArea .one_title {
    font-size: 30px;
    font-weight: bold;
}
.end_box {
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 1024px) {
    .oneArea .one_title {
        font-size: 18px;
    }
    .end_box {
        font-size: 18px;
    }
}
/*error thanks company*/
.message_area {
	width:100%;
	max-width:800px;
	margin:50px auto;
	text-align:center;
}
#company_title {
	padding:15px 0;
}
#company_table {
	width:98%;
	margin:10px auto 30px;
}
#company_table tr {
	border-top:2px solid #666;
	border-bottom:2px solid #666;
}
#company_table th, #company_table td {
	padding:9px 3px;
	font-size:0.9rem;
}
#back_btn {
	width:100%;
	text-align:center;
}

/*==================*/




/*アニメーション*/

.start_0 {
	opacity: 0;
}

img.text_subetemuryo01 {	
	animation-name: fade_in;
	animation-delay:0.5s;
    animation-duration: 0.5s;
	animation-fill-mode: forwards;
}
img.text_subetemuryo02 {	
	animation: slideIn 0.5s linear ;
	animation-delay:0.2s;
	animation-iteration-count:1;
	animation-fill-mode: forwards;
}

@keyframes slideIn {
	0% {opacity: 0;  transform: translateX(100px); }
  100% {opacity: 1;   transform: translateX(0);  }
}

@keyframes fade_in{
	0% {opacity: 0; transform: translatey(100px);}
	100% {opacity: 1; transform: translatey(0);}
}
