@charset "utf-8";
/* CSS Document */
/****************TOPページ******************/
.back{
	width: 100%;
	background: url(../img/back.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding-top: 160px;
    margin-top: -150px;
}
.title01{
    display: block;
    font-size: 4rem;
    color: #514e3d;
    font-family: 'Anton';
    font-weight: 400;
    margin-bottom: 60px;
    text-align: center;
}
.back p{
	text-align: center;
}
p{
    line-height: 1.5;
    font-size: 1.2em;
    font-weight: 500;
}
section{
	position: relative;
	padding-top: 60px;
}
.services_catch{
	margin-bottom: 75px;
}
.catch{
	font-family: 'Anton', sans-serif;
	font-size: 13rem;
	color: #ccc;
	position: absolute;
	top: 45px;
    left: 0;
}
.services_catch .title01 {
    margin-bottom: 0;
    padding-top: 30px;
}
.services {
    width: 100%;
    height: auto;
	background: url(../img/top/back.jpg);
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 60px 0;
    margin-bottom: 60px;
}
.services .c-lead{
	margin-top: 0;
	margin-bottom: 0;
}
.services .flex{
	display: flex;
    flex-wrap: wrap;
    justify-items: flex-start;
    justify-content: start;
}
.services .flex .box{
	width: 31%;
    margin: 13px;
    text-align: center;
    color: #fff;
    background: rgb(0,0,0,0.5);
    padding-bottom: 20px;
}
.services .flex .box img{
	width: 100%;
	height: auto;
}
.services .flex p{
	padding: 10px;
}
.number{
	font-family: 'Anton', sans-serif;
    font-size: 5em;
}
.news{
    /*background-image: linear-gradient(#fff 36%, #000 36%);
    margin-bottom: 60px;*/
 }
.news .title01{
	padding-top: 3em;
}
.news_inner{
	background: #000;
	padding-bottom: 30px;
	padding-top: 40px;
}
.news_inner ul {
    padding-bottom: 60px;
}
.news_inner ul li {
    margin: 5px auto;
    width: 90%;
    padding-left: 20px;
    text-align: left;
    border-bottom: 1px dotted;
    line-height: 3;
    font-weight: 500;
    color: #fff;
    list-style: none;
}
.news_inner ul li span {
    color: #fff;
    margin-right: 20px;
    display: inline-block;
}
.form .title01{
	padding-top: 3.5em;
}

.btn {
    border: 1px solid #fff;
    padding: 10px 25px;
    display: block;
    line-height: 3.5;
    margin: auto;
    width: 300px;
    color: #fff;
    text-align: center;
}
.news a {
    transition: 0.6s;
    color: #FFF;
    text-decoration: none;
    text-align: center;
}
.form{
	padding-bottom: 60px;
}
.sp{
	display: none;
}
.arrow{
	position: relative;
	height: 170px;
	width: 100%;
}
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:1%;
	right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
/*	position: absolute;
	left:-20px;
	bottom:10px;*/
	padding: 0 10px 10px 0;
    /*テキストの形状*/
    font-family: auto;
	color: #000;
	font-size: 0.8em;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #000;
    transform: skewX(-31deg);
}
.scrolldown4:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 130px;
	background:#000;
}
@media screen and (max-width: 1200px){
.services .flex .box {
    width: 30%;
}
}
@media screen and (max-width: 1090px){
.catch {
    font-size: 10rem;
}
}
@media screen and (max-width: 900px){
.catch {
    font-size: 9rem;
}
.services .flex .box {
    width: 46%;
}
}
@media screen and (max-width: 750px){
.back {
    background-size: inherit;
}
.title01 {
    font-size: 2.5rem;
}
.c-lead {
    padding: 0 12px;
}
p {
    font-size: 1em;
}
.back p {
    text-align: left;
}
.sp{
	display: inherit;
}
.catch{
	font-size: 4rem;
}
.services_catch {
    margin-bottom: 25px;
}
.services{
	margin-bottom: 0;
}
.news .title01 {
    padding-top: 1.2em;
}
.title01{
	margin-bottom: 0;
}
.news_inners ul {
    margin-top: 50px;
    padding-bottom: 40px;
}
.news_inner ul li {
    width: 100%;
    line-height: 2;
}
.form .title01 {
    padding-top: 1.5em;
}
}
@media screen and (max-width: 690px){
.services .flex .box{
    width: 41%;
}
.news_inner{
	padding-top: 20px;
    margin-top: 30px;
}
}
@media screen and (max-width: 500px){
.services{
	padding: 30px 0;
}
.services .flex {
    display: block;
}
.services .flex .box{
    margin: 5px auto;
    width: 100%;
}
.number {
    font-size: 4em;
}
.news_inner ul li{
    font-size: 0.9em;
    padding-left: 8px;
}
.news_inner ul li span {
    margin-right: 8px;
}
}
/**************会社概要**************/
.company_info .p-grouptop {
    width: 100%;
    height: 0;
    padding-top: 25%;
    background: url(../img/header_info.png);
    background-position: bottom;
    background-size: cover;
}
.company .title01{
	padding-top: 3em;
}
#table01{
	width: 90%;
    max-width: 900px;
    margin: auto;
}
#table01 tr {
  border-bottom: 1px solid #b5b1b1;
}

#table01 th,
#table01 td {
  padding: 24px 0;
  border: none;
}

#table01 th {
    width: 200px;
    text-align: left;
    padding-left: 30px;
}
.company iframe{
    border: 0;
    margin: 60px auto;
    width: 90%;
    height: 450px;
    display: block;
}
/* sp */
@media only screen and (max-width: 650px) {
#table01{
    margin-top: 30px;
    width: 100%;
}
#table01 th,
#table01 td {
    width: 100%;
    display: block;
  }

  #table01 th {
    width: 100%;
    padding-left: 0;
  }

  #table01 td {
    padding-top: 0;
  }
.company iframe{
	height: 300px;  
}
}
/******************料金表**************/
.price .p-grouptop {
    width: 100%;
    height: 0;
    padding-top: 25%;
    background: url(../img/header_price.png);
    background-position: bottom;
    background-size: cover;
}
.price .title01 {
    padding-top: 1em;
}
.price #table01 {
    width: 90%;
    max-width: 900px;
    margin: 100px auto;
}
.price #table01 th {
    width: 368px;
    text-align: left;
    padding-left: 30px;
}
@media only screen and (max-width: 650px) {
.price #table01 th {
    width: 100%;
	padding-left: 0;
}
.price #table01 {
    margin: 56px auto;
}
.price #table01 {
    width: 100%;
}
}

/*********concept***********/
.concept{
width: 100%;
height: 680px; 
background: url(../img/top/concept_back.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
padding-top: 60px;
margin-bottom: 130px;
}
.concept_back{
background:rgba(81,78,61,0.5);
width: 680px;
padding: 50px 20px;
height: auto;
margin: auto;
}
.concept h2{
color: #fff;
}
.concept span{
color: #fff;
display: block;
font-weight: normal;
margin-top: 10px;
}
.concept p{
color: #fff;
line-height: 1.6;
font-weight: 500;
padding: 50px 0;
}
.concept .btn {
    width: 300px;
    border: 2px solid #FFF;
    padding: 20px;
    margin: 10px 0;
    text-align: center;
    display: block;
    color: #FFF;
}
.concept a{
	display: block;
    color: #FFF;
    font-weight: normal;
}
.concept .point{
    display: inline-block;
    font-size: 6rem;
    font-family: serif;
    font-weight: 100;
    position: absolute;
    left: 59%;
    bottom: 6%;
}
@media screen and (max-width: 750px){
.concept{
background: url(../img/top/concept_back_sp.jpg);
background-position: center;
background-size: cover;
}
.concept .point {
    left: 54%;
    bottom: 0%;
    font-size: 4rem;
}
}
@media screen and (max-width: 750px){
.concept_back{
	width: 100%;
}
.concept .btn {
	margin: 10px auto;
}
}
@media screen and (max-width: 550px){
.concept .point {
	display: none;
}
}
/********************MENU**********************/
.menu{
position: relative;
}
.menu span{
display: block;
font-weight: normal;
}
.menu .flex{
	margin-top: 60px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.menu .flex a{
	width: 49%;
	margin-bottom: 20px;
}
.nayami_menu{
width: 100%;
height: 630px; 
background: url(../img/top/menu_back.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
position: relative;
padding-top: 60px;
margin-bottom: 130px;
}
.menu .menu_back{
	position: absolute;
    top: 23%;
    right: 0;
    z-index: -1;
}
.nayami_menu img{
	position: absolute;
    bottom: 0;
    right: 20%;
}
.menu .sp{
display:none;
}
@media screen and (max-width: 1390px){
.nayami_menu img{
right: 10%;
}
}
@media screen and (max-width: 1200px){
.nayami_menu img{
right: 0;
}
}
@media screen and (max-width: 900px){
.menu .pc{
display:none;
}
.menu .sp{
display:inherit;
}
.menu .sp img{
width: 100%;
}
}
@media screen and (max-width: 680px){
.menu .flex {
    margin-top: 30px;
    display: block;
}
.menu .flex a {
    width: 90%;
    margin: 20px auto;
    display: block;
}
.menu .menu_back{
	display: none;
}
}












/************問い合わせフォーム****************/
table.formTable {
    width: 95%;
    max-width: 850px;
    margin: 20px auto;
    border-collapse: collapse;
}
table.formTable input{
	border: 1px solid #ccc;
    height: 30px;
    border-radius: 0;
}
table.formTable textarea{
	border: 1px solid #ccc;
}
table.formTable select{
	border: 1px solid #ccc;
    height: 36px;
    padding: 10px;
}
form .submit{
	width: 100px;
    height: 40px;
    color: #fff;
    background: #333;
}
form .reset{
	width: 100px;
    height: 40px;
    border: 1px solid;
    background: #fff;
}
table.formTable th {
    width: 30%;
    font-weight: normal;
    background: #efefef;
    text-align: left;
}
table.formTable td, table.formTable th {
    border: 1px solid #ccc;
    padding: 10px;
    height: 39px;
    vertical-align: middle;
}

.boshuu table .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
}
form .text{
	text-align: center;
	padding:0 0 20px 0;
}	
@media screen and (max-width: 650px){
#formWrap {
    width: 100%;
    margin: 0 auto;
}
table.formTable th {
    border-bottom: 0;
}
table.formTable th, table.formTable td {
    width: auto;
    display: block;
    height: auto;
}
input[type="text"], textarea {
    width: 96%;
    padding: 5px;
    font-size: 110%;
    display: block;
    margin: auto;
    margin-bottom: 10px;
    
}
form table .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
}

form table th,
form  table td {
    border-bottom: none;
    display: block;
    width: 100%;
}
form p{
	margin-bottom: 30px;
}
form .text{
	padding:0;
	line-height: 1.6;
	font-size: 14px;
}
}
