@charset "utf-8";

/* ==========================================================================
   page-common
   ========================================================================== */
.contents_area{
	width: 100vw;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
}
@media (min-width: 415px){
.contents_area{
	width: 100vw;
}
}
@media (min-width: 960px){
.contents_area{
	max-width: 1400px;
  min-width: 920px;
	width: 52vw;
}
}

/* ==========================================================================
   about
   ========================================================================== */
#about{
	overflow: hidden;
  margin: 0 0 0 0;
}
@media (min-width: 415px){
#about{
  margin: 0 0 0 0;
}
}
@media (min-width: 960px){
#about{
  margin: 0 0 0 0;
}
}

#about .section_wrap{
  margin: 0 0 50px;
	padding: 0 5vw;
}
@media (min-width: 415px){
#about .section_wrap{
  margin: 0 0 60px;
	padding: 0 5vw;
}
}
@media (min-width: 960px){
#about .section_wrap{
  margin: 0 0 90px 0;
	padding: 0;
}
}

#about p{
	font-size: 1.4rem;
	line-height: 2.0em;
	color: #ddd;
}
@media (min-width: 415px){
#about p{
	font-size: 1.4rem;
	line-height: 2.0em;
}
}
@media (min-width: 960px){
#about p{
	font-size: 1.4rem;
	line-height: 2.0em;
}
}

#about .about_logo img{
  width: 100px;
  display: block;
	opacity: 0.15;
	opacity: 0.8;
  margin: 70px auto 30px;
}
@media (min-width: 415px){
#about .about_logo img{
  width: 130px;
  display: block;
  margin: 80px auto 30px;
}
}
@media (min-width: 960px){
#about .about_logo img{
  width: 160px;
  display: block;
  margin: 110px auto 50px;
}
}

#about ul.business li{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2px solid #222;
	border-radius: 10px;
	padding: 35px 22px 25px 22px;
	margin: 0 0 24px 0;
}
@media (min-width: 415px){
#about ul.business li{
	flex-direction: row;
  align-items: center;
	justify-content: space-between;
	border-radius: 10px;
	padding: 22px 30px;
	margin: 0 0 24px 0;
}
}
@media (min-width: 960px){
#about ul.business li{
	border-radius: 10px;
	padding: 28px 40px;
	margin: 0 0 30px 0;
}
}

#about ul.business li:last-child{
	margin: 0;
}

#about ul.business h4{
  font-size: 1.6rem;
	font-weight: 500;
	line-height: 1em;
	letter-spacing: 0.15em;
	color: #777;
	margin: 0 0 22px 0;
	padding: 15px 0 0 0;
}
@media (min-width: 415px){
#about ul.business h4{
	font-size: 1.8rem;
	margin: 0 0 28px 0;
	padding: 15px 0 0 0;
}
}
@media (min-width: 960px){
#about ul.business h4{
	font-size: 1.8rem;
	margin: 0 0 30px 0;
	padding: 15px 0 0 0;
}
}

#about .business h3{
	width: 100%;
  font-size: 1.5rem;
	line-height: 1em;
  font-weight: 500;
  letter-spacing: 0.1em;
	text-align: center;
	color: #ddd;
  margin: 0 0 22px 0;
}
@media (min-width: 415px){
#about .business h3{
	width: 30%;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
	text-align: left;
  margin: 0;
}
}
@media (min-width: 960px){
#about .business h3{
	width: 26%;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  margin: 0;
}
}

#about .business p{
	width: 100%;
	color: #ddd;
}
@media (min-width: 415px){
#about .business p{
	width: 68%;
}
}
@media (min-width: 960px){
#about .business p{
	width: 72%;
}
}

#about .section_wrap.outline{
  margin: 0 0 0 0;
}

#about .outline h3{
  font-size: 1.6rem;
	font-weight: 500;
	line-height: 1em;
	letter-spacing: 0.15em;
	color: #777;
	margin: 0 0 18px 0;
	padding: 15px 0 0 0;
}
@media (min-width: 415px){
#about .outline h3{
	font-size: 1.8rem;
	margin: 0 0 18px 0;
	padding: 15px 0 0 0;
}
}
@media (min-width: 960px){
#about .outline h3{
	font-size: 1.8rem;
	margin: 0 0 20px 0;
	padding: 15px 0 0 0;
}
}

#about .outline table{
	width: 100%;
	font-size: 1.4rem;
  border-top: 1px solid #272727;
}
@media (min-width: 415px){
#about .outline table{
  font-size: 1.4rem;
	letter-spacing: 0.1em;
}
}
@media (min-width: 960px){
#about .outline table{
  font-size: 1.4rem;
	letter-spacing: 0.1em;
}
}

#about .outline th{
	color: #999;
	color: #ddd;
  width: 26%;
	line-height: 1em;
	text-align: left;
	font-weight: 300;
	border-bottom: 1px solid #272727;
	padding: 13px 0 12px 5px;
}
@media (min-width: 415px){
#about .outline th{
  width: 25%;
	line-height: 1em;
	padding: 20px 0 20px 7px;
}
}
@media (min-width: 960px){
#about .outline th{
	line-height: 1em;
  width: 25%;
	padding: 22px 0 22px 7px;
}
}

#about .outline td{
	line-height: 1.5em;
	color: #ddd;
	border-bottom: 1px solid #272727;
	padding: 13px 0 12px 0;
}
@media (min-width: 415px){
#about .outline td{
	line-height: 1em;
	padding: 20px 0;
}
}
@media (min-width: 960px){
#about .outline td{
	line-height: 1em;
	padding: 22px 0;
}
}


/* ==========================================================================
   contact
   ========================================================================== */
.grecaptcha-badge{
	visibility: hidden;
}

#contact .section_wrap{
	padding: 0 5vw 50px;
}
@media (min-width: 415px){
#contact .section_wrap{
	padding: 0 5vw 60px;
}
}
@media (min-width: 960px){
#contact .section_wrap{
	padding: 0 0 120px 0;
}
}

#contact p{
	font-size: 1.4rem;
	line-height: 2.0em;
	color: #ddd;
}
@media (min-width: 415px){
#contact p{
	font-size: 1.4rem;
	line-height: 2.0em;
}
}
@media (min-width: 960px){
#contact p{
  font-size: 1.4rem;
	line-height: 2.0em;
}
}

.contact-form{
  margin: 30px 0 10px;
  overflow: hidden;
}
@media (min-width: 415px){
.contact-form{
  margin: 50px 0 10px;
}
}
@media (min-width: 960px){
.contact-form{
  width: 100%;
  margin: 60px 0 20px 0;
}
}

.contact-form dl{
  width: 100%;
	color: #ddd;
  display: block;
  float: left;
  margin: 0;
}
@media (min-width: 415px){
.contact-form dl{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
}
@media (min-width: 960px){
.contact-form dl{
  width: 100%;
}
}

.contact-form dt{
  width: 100%;
  font-size: 1.4rem;
  display: block;
  overflow: hidden;
  padding: 9px 3px 2px 0;
}
@media (min-width: 415px){
.contact-form dt{
  width: 24%;
  font-size: 1.4rem;
  padding: 10px 4px 0 0;
}
}
@media (min-width: 960px){
.contact-form dt{
  width: 24%;
  font-size: 1.4rem;
  padding: 22px 5px 0 0;
}
}

.contact-form dd{
  width: 100%;
  display: block;
  padding: 3px 0 8px 0;
}
@media (min-width: 415px){
.contact-form dd{
  width: 73%;
  display: block;
  padding: 0 0 16px 0;
}
}
@media (min-width: 960px){
.contact-form dd{
  width: 74%;
  display: block;
  padding: 0 0 16px 0;
}
}

.contact-form span{
	color: #555;
	color: #DC143C;
  font-weight: 300;
	padding: 3px 0 0 0;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width: 100%;
  resize: vertical;
  padding: 1.2em 0.8em;
  font-size: 1.5rem;
	letter-spacing: 0.05em;
  border: 0 solid #ddd;
  border-radius: 0;
  box-sizing: border-box;
  margin: 0;
	color: #eee;
	background: #222;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
@media (min-width: 415px){
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  padding: 1.3em 1.6em;
  font-size: 1.6rem;
	letter-spacing: 0.1em;
}
}
@media (min-width: 960px){
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  padding: 1.5em 1.6em;
  font-size: 1.6rem;
}
}

#contact .check_box{
  display: flex;
  align-items: center;
	justify-content: center;
  box-sizing: border-box;
	border: 1px solid #222;
  padding: 22px 15px;
}
@media (min-width: 415px){
#contact .check_box{
  padding: 28px 0;
}
}
@media (min-width: 960px){
#contact .check_box{
  padding: 28px 0;
}
}

#contact .check_box .check_text{
  font-size: 1.4rem;
  letter-spacing: 0;
	color: #ddd;
  font-weight: 300;
}

#contact .check_box th{
	width: 20px;
	padding: 5px 0 0 0;
}

#contact .check_box th input[type="checkbox"]{
	width: 16px;
  height: 16px;
}

#contact .check_box td{
  padding: 0 0 0 25px;
}

#contact .check_box td .br{
  display: block;
}
@media (min-width: 960px){
#contact .check_box td .br{
  display: none;
}
}

#contact .submit{
	width: 100%;
	height: 52px;
	position: relative;
	border-radius: 4px;
  overflow: hidden;
  margin: 20px auto 40px;
}
@media (min-width: 415px){
#contact .submit{
	width: 56%;
	width: 100%;
	height: 54px;
	position: relative;
	border-radius: 4px;
  overflow: hidden;
  margin: 20px auto 45px;
}
}
@media (min-width: 960px){
#contact .submit{
	width: 36%;
	width: 100%;
	height: 58px;
	position: relative;
	border-radius: 4px;
  overflow: hidden;
  margin: 30px auto 60px;
}
}

#contact .wpcf7-submit{
  width: 100%;
	height: 52px;
	line-height: 52px;
	font-size: 1.5rem;
  font-weight: 500;
	letter-spacing: 0.3em;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	color: #ddd;
	background-color: #1b1b1b;
  outline: none;
	position: relative;
	border: none;
	border-radius: 3px;
  overflow: hidden;
	z-index: 2;
  cursor: pointer;
  -webkit-appearance: none;
	display: inline-block;
}
@media (min-width: 415px){
#contact .wpcf7-submit{
	height: 54px;
	line-height: 54px;
	font-size: 1.6rem;
}
}
@media (min-width: 960px){
#contact .wpcf7-submit{
	height: 58px;
	line-height: 58px;
	font-size: 1.6rem;
  transition: all 0.2s ease;
}
}

@media (min-width: 960px){
#contact .wpcf7-submit:hover{
  color: #0f0f0f;
	background: #eee;
}
}

div.wpcf7 .ajax-loader{
  display: none !important;
}

#contact .wpcf7 form .wpcf7-response-output{
	font-size: 1.4rem;
	font-weight: 400;
	color: #DC143C;
	text-align: center;
  margin: -20px 0 60px;
  padding: 0.9em 2em 1em;
  border: 1px solid #DC143C;
}

#contact .form .note{
  font-size: 1.2rem;
	line-height: 1.6em;
	color: #555;
	letter-spacing: 0;
}
@media (min-width: 415px){
#contact .form .note{
  font-size: 1.2rem;
	line-height: 1em;
	letter-spacing: 0;
	text-align: center;
}
}
@media (min-width: 960px){
#contact .form .note{
  font-size: 1.3rem;
	letter-spacing: 0.05em;
}
}

#contact .form .note a{
  color: #555;
  text-decoration: underline;
}
@media (min-width: 960px){
#contact .form .note a{
	transition: all 0.2s ease;
}
}

/* @media (min-width: 960px){
#contact .form .note a:hover{
  opacity: 0.4;
}
}*/


/* ==========================================================================
   common (thanks,404)
   ========================================================================== */
.contents{
	height: calc(100vh - 42.5vh);
}
@media (min-width: 415px){
.contents{
	height: calc(100vh - 31vh);
}
}
@media (min-width: 960px){
.contents{
	height: calc(100vh - 35vh);
}
}

#thanks .contents_area,
#error .contents_area{
	height: calc(100vh - 47vh);
	display: flex;
  align-items: center;
	justify-content: center;
	padding: 0 5vw;
}
@media (min-width: 415px){
#thanks .contents_area,
#error .contents_area{
	height: calc(100vh - 34vh);
	padding: 0 5vw;
}
}
@media (min-width: 960px){
#thanks .contents_area,
#error .contents_area{
	height: calc(100vh - 44vh);
	padding: 0;
}
}

#common h1{
  font-size: 2.0rem;
  letter-spacing: 0.1em;
  font-weight: 500;
	color: #ddd;
  margin: 0 0 20px 0;
}
@media (min-width: 415px){
#common h1{
  font-size: 2.2rem;
  margin: 0 0 20px 0;
}
}
@media (min-width: 960px){
#common h1{
  font-size: 2.4rem;
  margin: 0 0 30px 0;
}
}

#common p{
	font-size: 1.3rem;
	line-height: 2.0em;
	color: #ddd;
	margin: 0 0 60px 0;
}
@media (min-width: 415px){
#common p{
	margin: 0 0 60px 0;
}
}
@media (min-width: 960px){
#common p{
	margin: 0 0 60px 0;
}
}