@charset "utf-8";
/* CSS Document */

/*==================================================
index
================================================== */

/*====== mv-top ======*/

.mv{
	width: 100%;
	height: 420px;
	color: #fff;
	position: relative;
	padding-top: 160px;
}

.mv img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mv-top-catch{
	position: absolute;
    width: 100%;
    display: block;
    text-align: center;
    font-size: 38px;
    z-index: 99;
    top: 320px;
    left: 0;
}

.mv-top-catch small{
	display: block;
	font-size: 54%;
}





@media only screen and (max-width: 480px) { 

.mv{
	height: calc(100vh - 60px);
	padding-top: 60px;
}
	
	header .contents-area{
		width: 100%;
	}

.mv-top-catch{
	    font-size: 8vw;
    top: 47%;
    left: 5%;
    width: 90%;
}

.mv-top-catch small{
	font-size: 54%;
	padding-top: 20px;
}
	
}

/*====== about ======*/


#top-about article{
	text-align: center;
	line-height: 2.2;
}

#top-about article p{
	margin-bottom: 50px;
}


@media only screen and (max-width: 480px) { 

#top-about article{
	line-height: 2.0;
}

#top-about article p{
	margin-bottom: 35px;
}

}

/*====== top-service ======*/

#top-service ul li{
	height: 30vw;
	color: #fff;
}

#top-service ul li a{
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-decoration: none;
	text-align: center;
	color: #fff;
	font-size: 21px;
	font-weight: 600;
	background-size: cover;
	background-repeat: no-repeat;
}

#top-service ul li a:hover{
	opacity: 0.8;
}

#top-service ul li a.sp-only{
	display: none !important;
}

#top-service ul li h3{
	width: 90%;
	font-size: 21px;
	margin: 10vw auto 20px;
}

#top-service ul li p{
	width: 90%;
	margin: 0 auto;
}

#top-service ul li:first-child a{
	background-image: url("../images/top_service01.jpg");
}

#top-service ul li:nth-child(2) a{
	background-image: url("../images/top_service02.jpg");
	transition-delay: 200ms;
}

#top-service ul li:nth-child(3) a{
	background-image: url("../images/top_service03.jpg");
	transition-delay: 400ms;
}

#top-service ul li:last-child a{
	background-image: url("../images/top_service04.jpg");
	transition-delay: 600ms;
}

#top-service .btn-area{
	margin: 80px 0 ;
}

#top-service .btn-area a{
	margin: 0 10px;
	width: 160px;
}

@media only screen and (max-width: 480px) { 
	
#top-service{
    padding-top: 40px;
}

#top-service ul li{
	height: 75vw;
}

#top-service ul li a.sp-only{
	display: flex !important;
	font-size: 18px;
	padding: 0;
}

#top-service ul li a.pc-only{
	display: none !important;
}

#top-service ul li h3{
	width: 90%;
	margin: 0 auto 20px;
}

#top-service ul li p{
	width: 90%;
	margin: 0 auto;
}

#top-service .btn-area{
	margin: 50px 0;
}

#top-service .btn-area a.btn{
	display: inline-block;
	margin:  0 5px;
	width: 30%;
	padding: 15px ;
}

#top-service ul li:nth-child(2){
	transition-delay: 0ms;
}

#top-service ul li:nth-child(3){
	transition-delay: 0ms;
}

#top-service ul li:last-child{
	transition-delay: 0ms;
}

}

/*====== top-recruit ======*/

#top-recruit{
	color: #fff;
	padding: 70px 0 80px;
	background: url("../images/bg01.jpg") no-repeat center center;
	background-size: cover;
	text-align: center;
}

#top-recruit .title-contents{
	margin-bottom: 45px;
}

#top-recruit p{
	margin-bottom: 45px;
}


@media only screen and (max-width: 480px) { 



}


/*==================================================
下層ページ共通
================================================== */

.mv-page{
	width: 100%;
	height: 580px;
	text-align: center;
	align-items: center;
	justify-content: center;
	display: flex;
	color: #fff;
}

.page-contents{
	padding: 160px 0;
	
	background-repeat: repeat-y;
	background-size: 100%;
	background-attachment: fixed;
}

.page-img img{
	width: 100%;
	vertical-align: bottom;
	position: relative;
	z-index: 1;
}

.mv-page .title-contents{
	font-size: 7.6vw;
}

.txt-att{
    font-size: 80%;
    display: flex;
}


@media only screen and (max-width: 480px) {
	
.mv-page{
	height: 70vw;
}

.page-contents{
	padding: 60px 0;
}
    
    .txt-att-01{
        width: 10%;
    }
    
    .txt-att-02{
        width: 90%;
    }

}


/*==================================================
service
================================================== */

.service-txt{
    line-height: 2.2;
}

.service-txt p{
    margin-bottom: 35px;
}

.mv-service{
    width: 100%;
    margin-bottom: 40px;
    vertical-align: bottom;
}

.title-price{
    display: block;
    font-size: 25px;
    padding: 10px 20px 10px 30px ;
    border-left: 6px solid #e21b1b;
    margin: 50px 0 35px;
}

.title-price.title-w{
    background: #fff;
}

.title-price small{
    padding-left: 20px;
    font-size: 50%;
}

.ex-price{
        padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    background: #f7f7f7;
    margin-bottom: 25px;
}

.ex-price small{
    padding-left: 20px;
    font-size: 50%;
}

.contents .title-contents{
    line-height: 1.5;
}

.att-price{
    text-align: right;
    padding: 50px 0 0;
}

#header-service h3{
    margin-bottom: 0 !important;
}

#service-01{
    border-top: 1px solid #ddd;
}

#service-02, #service-04{
    background: #f7f7f7;
}

#service-02 table,
#service-04 table{
    background: #fff;
}

#service-02 table th,
#service-04 table th{
    background: #fff;
    border-right: 1px solid #ddd;
}

#service-02 .ex-price,
#service-04 .ex-price{
    background: #fff;
}


@media only screen and (max-width: 480px) {

.service-txt{
    line-height: 1.9;
}

.service-txt p{
    margin-bottom: 30px;
}

.mv-service{
    margin-bottom: 30px;
}

.title-price{
    display: block;
    font-size: 19px;
    padding: 5px 0 5px 18px ;
    border-left: 6px solid #e21b1b;
    margin: 35px 0 25px;
}

.title-price small{
    padding-left: 15px;
    font-size: 70%;
}

.ex-price{
    padding: 10px 20px;
    font-size: 15px;
    margin-bottom: 25px;
}

.ex-price small{
    padding-left: 15px;
    font-size: 70%;
}

.contents-service .title-contents{
    line-height: 1.5;
}

.att-price{
    padding: 20px 0 0;
}  
    
}


/*==================================================
top-info
================================================== */

#top-info{
	padding-bottom: 65px;
}


.ul-info{
	list-style: none;
}

.ul-info li{
	border-bottom: 1px dotted #ddd;
	padding: 25px 5px;
	display: flex;
}

.ul-info li span.info-date{
	width: 160px;
}

.ul-info li > a{
}

.title-info{
	font-size: 22px;
}

.date-info{
	display: block;
	color: #999;
	font-size: 13px;
	margin: 5px 0 10px;
}

p.summery-info{
	line-height: 1.8;
	margin: 0;
}




@media only screen and (max-width: 480px) {

#top-info{
	padding-bottom: 40px;
}

.ul-info li{
	border-bottom: 1px dotted #ddd;
	padding: 15px 5px;
	display: block;
}

.ul-info li span.info-date{
	display: block;
	width: 100%;
	margin-bottom: 7px;
}

.ul-info li > a{
}

.title-info{
	font-size: 18px;
}
	
}

@media only screen and (max-width: 320px) {

	
}


/*==================================================
calendar
================================================== */

.body-calendar iframe{
    width: 100%;
    height: 800px;
    vertical-align: bottom;
}

#head-calendar{
	margin-bottom: 50px;
}

#head-calendar p{
	margin-bottom: 25px;
}


@media only screen and (max-width: 480px) {
    
    .body-calendar{
        overflow: hidden;
        overflow-x: auto;
    }    

.body-calendar iframe{
    width: 700px;
    height: 520px;
    max-width: inherit !important;
    max-height: inherit !important;
}
    
}



/*==================================================
tab切り替え
================================================== */

.tab{
	display: flex;
	flex-wrap: wrap;
}
.tab li a{
	display: block;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
}


/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	width: 1160px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
	display: flex;
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@media only screen and (max-width: 480px) {
	
.area {
	width: 100%;
}	
}


/*==================================================
information
================================================== */

#information,
#information-detail{
	padding-top: 225px;
}

#information-detail .title-contents{
	text-align: left;
	line-height: 1.5;
	border-bottom: 1px solid #ddd;
	padding-bottom: 20px;
}

#information-detail .title-contents span{
	font-size: 40%;
	display: block;
	padding-left: 5px;
	padding-bottom: 10px;
}

.body-info{
	line-height: 2.0;
	margin: 40px 0;
}

.body-info p,
.body-info img{
	margin-bottom: 30px;
}

.bottom-info{
	position: relative;
	padding: 30px 0 ;
	border-bottom: 2px solid #000;
	height: 80px;
}

.bottom-info span a{
	display: inline-block;
	color: #fff !important;
	text-align: center;
	background-color: #000;
	font-size: 14px;
	text-decoration: none !important;
	position: relative;
	border: 1px solid #000;
	padding: 18px 30px;
	line-height: 1;
	letter-spacing: 0.08em;
}

.bottom-info span a:hover{
	background-color: transparent;
	color: #000 !important;
}


.bottom-info a.btn,
.bottom-info span{
	position: absolute;
	top: 40px;
}

.bottom-info a.btn.btn-back{
	left: 0;
}

.bottom-info span.btn-next{
	right: 0;
}

.bottom-info span.btn-prev{
	right: 170px;;
}



@media only screen and (max-width: 480px) {

#information,
#information-detail{
	padding-top: 115px;
}

#information-detail .title-contents{
	text-align: left;
	line-height: 1.5;
	border-bottom: 1px solid #ddd;
	padding-bottom: 20px;
}

#information-detail .title-contents span{
	font-size: 40%;
	display: block;
	padding-left: 5px;
	padding-bottom: 10px;
}

.body-info{
	margin: 30px 0;
}

.body-info p,
.body-info img{
	margin-bottom: 25px;
}

.bottom-info{
	position: relative;
	padding: 30px 0 ;
	border-bottom: 2px solid #000;
	height: 130px;
}
	
.bottom-info span a{
	font-size: 13px;
	padding: 15px 0;
	width: 100%;
}	

.bottom-info a.btn,
.bottom-info span{
	top: 30px;
	width: 50%;
	padding: 15px 0;
	text-align: center;
	font-size: 13px;
}

.bottom-info a.btn.btn-back{
	top: 100px;
	left: 0;
	width: 100%;
}

.bottom-info span.btn-next{
	right: 0;
}

.bottom-info span.btn-prev{
	left: 0;
	right: inherit;
}


}

/*==================================================
wp page navi
================================================== */

.wp-pagenavi {text-align:center; clear: both; margin-top: 50px; position: relative; padding-top: 50px;}
.wp-pagenavi span,
.wp-pagenavi a{
    display: inline-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    text-decoration: none; 
	background: #fff;
	color: #222;
	line-height: 1;
	font-size: 17px;
	margin: 0 5px 20px 0;
}


.wp-pagenavi span.current,
.wp-pagenavi a:hover{
    background: #222;
	color: #fff;
}

@media (max-width: 480px) {

.wp-pagenavi{margin-top: 0; padding-top: 50px;}
.wp-pagenavi span,
.wp-pagenavi a{
    width: 40px;
    height: 40px;
	font-size: 12px;
	margin: 0 5px 10px 0;
}
}




/*==================================================
Privacy-Policy
================================================== */
	
#Privacy-Policy{
    padding-bottom: 0;
}


.box-privacy{
	line-height: 2.0;
	letter-spacing: 0.08em;
	margin-bottom: 70px;
}

.title-privacy{
	display: block;
	font-size: 36px;
	margin-bottom: 35px;
	font-weight: 600;
}

.box-privacy p{
	margin-bottom: 35px;
}

.ol-basic{
	margin: 0 0 35px 25px;
}

.ul-basic{
	margin: 0 0 35px 25px;
	list-style: disc;
}

@media only screen and (max-width: 480px) {
	
.box-privacy{
	margin-bottom: 50px;
}

.title-privacy{
	font-size: 21px;
	margin-bottom: 25px;
	line-height: 1.7;
}

.box-privacy p{
	margin-bottom: 25px;
}

.ol-basic{
	margin: 0 0 25px 20px;
}

.ul-basic{
	margin: 0 0 25px 20px;
}
	
}


/*==================================================
about
================================================== */


.body-about article{
	text-align: center;
	line-height: 2.2;
}

.body-about article p{
	margin-bottom: 70px;
}

.contents-about{
    margin-bottom: 50px;
}


@media only screen and (max-width: 480px) { 

.body-about article{
	line-height: 2.0;
}

.body-about article p{
	margin-bottom: 50px;
}

.contents-about{
    margin-bottom: 45px;
}

}



/*==================================================
お問い合わせ
================================================== */

.table-contact{
    border-collapse:collapse;  
    box-sizing:border-box; 
    margin: 0 auto 50px; 
	width: 100%;
}

.table-contact tr{
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.table-contact th{
    width: 220px;  
    padding: 30px 30px; 
	vertical-align: middle;
    text-align: left;
	background: #f7f7f7;
	letter-spacing: 0.08em;
}

.table-contact td{
    font-weight:normal; 
    padding: 30px 40px; 
    text-align: left;
    line-height: 2.0;
    vertical-align: middle;
}

@media only screen and (max-width: 480px) {

.table-contact{ 
    margin: 0 auto; 
}

.table-contact tr{
	border-bottom: none;
}

.table-contact th{
    display: block;
    width: 100%; 
    box-sizing: border-box;
    padding: 15px ; 
}

.table-contact td{
    display: block;
    width: 100%; 
    box-sizing: border-box;
    padding: 25px 10px 25px; 
}
    
}


/*==================================================
フォーム画面
================================================== */

input[type="text"],
input[type="number"], 
input[type="email"], 
input[type="password"] , 
input[type="tel"] ,
input[type="date"] ,
input[type="time"] ,
input[type="search"]  {
	width: 100%;
    box-sizing: border-box;
	height:42px;
	font-size:100%;
	border:1px solid #ddd;
	padding:2px 8px;
	background:#fff;
    color: #333;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
textarea:focus {
background: #faf8f4;    
}

textarea{
	min-height:160px;
	border:1px solid #ddd !important;
	padding:2px 8px;
	width:100%;
    box-sizing: border-box;
	background:#fff;
}

input[type="checkbox"]{
    display: inline-block; 
    width: 22px; 
    height: 22px; 
    background:#f5f5f5; 
    vertical-align: bottom;
    margin-right: 5px;
}

input[type="radio"]{
    display: inline-block; 
    width: 22px; 
    height: 22px; 
    background:#fff; 
	vertical-align: middle;
    margin-right:5px;
	border-color: #ddd !important;
}


select {
cursor: pointer;
	width: 40%;
text-indent: 0.01px;
text-overflow: ellipsis;
border: 1px solid #ccc !important;
outline: none;
background: #fff;
background-image: none;
box-shadow: none;
height: 46px;
box-sizing: border-box;
font-size: 14px;
	border-radius:6px;
}

.required{
    display: inline-block; 
    border-radius: 2px; 
    margin-left: 10px; 
    color: #fff; 
    font-size: 10px; 
    background: #e21b1b; 
    padding:3px 10px; 
    line-height: 1;
    vertical-align: middle;
}

#contact-confirm .required{
    display: none;
}

.btn-form{
    display: block;
    border-radius: 0;
    color: #fff !important;
    cursor: pointer;
    background:#e21b1b !important;
    text-decoration: none;
    border:1px solid #e21b1b;
    font-size: 15px;
    text-align: center;
    width: 40%;
	height: 64px;
	line-height: 64px;
	margin: 0 auto;
    font-weight: 600;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    letter-spacing: 0.1em;
}

.btn-form:hover{
    background:#fff !important;
    color: #e21b1b !important;
    text-decoration: none;
}

.btn-noactive{
    display: inline-block;
    border-radius: 6px;
    color: #999;
    cursor: pointer;
    background:#ccc;
    padding: 10px 0;
    text-decoration: none;
    border:1px solid #ccc;
    font-size: 14px;
    text-align: center;
    width: 200px;
    cursor: default;
}

label{
    display: inline-block;
    margin: 5px 30px 5px 0;
}




@media (max-width: 480px) {

input[type="text"], 
input[type="number"], 
input[type="email"], 
input[type="password"] , 
input[type="tel"] ,
input[type="date"] ,  
input[type="time"] ,     
input[type="search"]  {
	height: 38px;
	font-size: 14px;
}
	
input[type="submit"],
button{-webkit-appearance:none !important;}	

textarea{
	min-height: 120px;
	font-size: 14px;
}

    
.btn-form{
    -webkit-appearance:none;
    display: block;
    width: 94%;
    margin: 0 auto;
    border-radius: 4px;
    font-size: 14px;
}

select {
width: 100%;
height: 42px;
} 
    


label{
    display: inline-block;
    margin: 5px 20px 5px 0;
}    
    
	
}