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

body {
	font-family: 'Noto Sans JP',   sans-serif;
	font-weight: 400;
	line-height: 1.7;
}
_::-webkit-full-page-media, _:future, :root .bold {font-weight: 600;}
a{cursor: pointer;}
* {font-size: 1.3333vw;}
.pc_cnt{display: block;}
.pc_cnt_inline{display: inline;}
.sp_cnt{display: none;}
.sp_cnt_inline{display: none;}

@media screen and (min-width: 1200px) {
	* {font-size: 16px;}
}
/*---------------------------------*/
header{
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}
header h1{
    width: 24%;
}
/*---------------------------------*/
.footer_link{
    background: url("../img/footer_bg.png") no-repeat;
    background-size: cover;
    background-position: center;
    padding: 100px 0;
}
.footer_link h2{
    font-size: 2.2rem;
    color: #009b63;
    font-weight: bold;
    text-align: center;
}
.footer_link p{
    text-align: center;
    margin: 30px 0 50px;
    font-weight: 500;
    line-height: 2;
}
.footer_link ul{
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    justify-content: space-around;
}
.detail_btn{
	text-align: center;
    width: 40%;
}
.detail_btn a{
	font-size: 1.5rem;
	color: #ffffff;
	font-weight: 500;
	padding: 8px;
    width: 100%;
	margin: 0 auto;
	border-radius: 100px;
	background-color: #009b63;
	text-decoration: none;
	display: block;
	position: relative;
    transition: all 0.3s;
}
.detail_btn a:hover{
    opacity: 0.8;
}
.detail_btn a::before {
	content: "";
	position: absolute;
    right: 8%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	top: calc(50% - 5px);
}
/*---------------------------------*/
.footer_tel{
    background: #2fb383; /* Old browsers */
    background: -moz-linear-gradient(left, #2fb383 0%, #18a86b 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #2fb383 0%,#18a86b 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #2fb383 0%,#18a86b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    padding: 80px 0;
}
.footer_tel h2{
    font-size: 2.2rem;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}
.footer_tel_box{
    max-width: 1000px;
    margin: 50px auto 0;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.footer_tel_box > div{
    width: 48%;
    padding: 30px 10px;
    border-radius: 10px;
    background: #f5efef; /* Old browsers */
    background: -moz-linear-gradient(left, #f5efef 0%, #f5efef 52%, #f4efef 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #f5efef 0%,#f5efef 52%,#f4efef 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #f5efef 0%,#f5efef 52%,#f4efef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.footer_tel_box > div h3{
    font-size: 1.7rem;
    font-weight: bold;
    text-align: center;
}
.footer_tel_box > div div{
    text-align: center;
    margin: 15px 0;
}
.footer_tel_box > div div span{
    font-size: 3rem;
    font-weight: bold;
    color: #009b63;
    padding-left: 4.2rem;
    background: url(../img/ico_freedial.png) no-repeat;
    background-size: auto 2.3rem;
    background-position: left 0 center;
    line-height: 1;
}
.footer_tel_box > div p{
    text-align: center;
    line-height: 1.7;
}
/*---------------------------------*/
footer .copy {
	width:96%;
	max-width:1060px;
	margin:0 auto;
	padding:10px 0;
	font-size:0.6rem;
	text-align: right;
	color:#595548;
}
footer .slogan {
	padding:11px 0 8px;
	background:url(../img/footer_line.png) no-repeat center top;
}
footer .slogan p {
	width:96%;
	max-width:1060px;
	height:16px;
	margin:0 auto;
	text-align:right;
	font-size:0;
}
footer .slogan p span {
	display:inline-block;
	width:225px;
	height:16px;
	background:url(../img/footer_text.png) no-repeat;
	background-size:contain;
	font-size:0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
/*----------------------------------------------------*/
/************************
@media
************************/
/* デバイス幅が767px以下 */
@media screen and (max-width: 767px){
    body{
        -webkit-text-size-adjust: 100%;
    }
	* {font-size: 14px;}
    .pc_cnt{display: none;}
    .pc_cnt_inline{display:none;}
    .sp_cnt{display: block;}
    .sp_cnt_inline{display: inline-block;}
    header{
        padding: 15px;
    }
    header h1{
        width: 60%;
    }
    .footer_link{
        padding: 40px 0;
        background-position: center right 0;
    }
    .footer_link h2{
        font-size: 2rem;
    }
    .footer_link p{
        font-size: 1.1rem;
        font-feature-settings: "palt";
    }
    .footer_link ul{
        display: block;
    }
    .footer_link ul li{
        width: 100%;
        margin: 20px 0;
    }
    .footer_tel{
        padding: 40px 0;
    }
    .footer_tel h2{
        font-size: 2rem;
    }
    .footer_tel_box{
        display: block;
        margin: 30px auto 0;
    }
    .footer_tel_box > div{
        width: 100%;
        margin: 20px 0;
    }
    .footer_tel_box > div h3{
        font-size: 1.5rem;
    }
    .footer_tel_box > div div span{
        font-size: 2.6rem;
    }
    footer .copy{
        text-align: center;
    }
    footer .slogan {
        position: relative;
        padding: 16px 0 0;
        background: url(../img/footer_line.png) no-repeat -534px top;
        background-size: 400%;
    }
    footer .slogan p {
        position: absolute;
        top: 4px;
        right: 2%;
        width: 100%;
        height: 8px;
    }
    footer .slogan p span {
        width: 130px;
        height: 8px;
    }
}


/************************
scroll_x
************************/
@media screen and (max-width: 767px){
	.sp_600{
		width: 600px;
	}
	.sp_750{
		width: 750px;
	}
	.sp_900{
		width: 900px;
	}
	.sp_scrolling > figure{
		overflow-x: scroll;
		padding-bottom: 10px;
	}
	.scroll_x_wrap {
		position: relative;
		margin: 20px 0;
		overflow: auto;
		-webkit-overflow-scrolling : touch;
	}
	.scroll_x_wrap .sp_scrolling {
		width: 100%;
	}
	.scroll_x_wrap .scroll_x_overlay {
		position: absolute;
		left: 0;
		top: 0;
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: .7;
	}
	.scroll_x_wrap .scroll_x_btn {
		content: '';
		font-size: 1rem;
		font-weight: bold;
		display: inline-block;
		position: absolute;
		left:calc(50% - 2.6667vw);
		top: calc(50% - 0.5em);
	}
	.scroll_x_wrap .scroll_x_btn span {
		display: table-cell;
		width: 100%;
		height: 100%;
		color: #fff;
		vertical-align: middle;
	}
	.scroll_x_wrap .scroll_x_btn:before {
		content: '';
		position: absolute;
		left: -29.3333vw;
		top: -5.3333vw;
		width: 39.0667vw;
		height: 15.7333vw;
		background: url(../img/icon_swipe.png) no-repeat center center;
		background-size: contain;
	}
	.scroll_x_wrap .scroll_x_btn:before {
		-webkit-animation-name: swipe;
			  animation-name: swipe;
		-webkit-animation-duration: 1s;
			  animation-duration: 1s;
		-webkit-animation-delay: 0s;
			  animation-delay: 0s;
		-webkit-animation-timing-function: linear;
			  animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
			  animation-iteration-count: infinite;
		-webkit-animation-fill-mode: forwards;
			  animation-fill-mode: forwards;
		-webkit-animation-direction: alternate;
			  animation-direction: alternate;
	}
	@-webkit-keyframes swipe {
	  0% {
		-webkit-transform: translateX(-1.6vw);
				transform: translateX(-1.6vw);
	  }
	  50% {
		-webkit-transform: translateX(1.6vw);
				transform: translateX(1.6vw);
	  }
	  100% {
		-webkit-transform: translateX(-1.6vw);
				transform: translateX(-1.6vw);
	  }
	}
	@keyframes swipe {
	  0% {
		-webkit-transform: translateX(-6px);
				transform: translateX(-6px);
	  }
	  50% {
		-webkit-transform: translateX(6px);
				transform: translateX(6px);
	  }
	  100% {
		-webkit-transform: translateX(-6px);
				transform: translateX(-6px);
	  }
	}
	.scroll_x_wrap::-webkit-scrollbar {
		height: 5px;
	}
	.scroll_x_wrap::-webkit-scrollbar-track {
		background: #F1F1F1;
	}
	.scroll_x_wrap::-webkit-scrollbar-thumb {
		background: #BCBCBC;
	}
    .img_link{
        position: relative;
        padding-bottom: 60px !important;
    }
    .img_link::after{
        content: "拡大表示";
        display: block;
        position: absolute;
        bottom: 10px;
        left: 15%;
        padding: 7px;
        background-color: #da5178;
        border-radius: 100px;
        color: #fff;
        width: 70%;
        text-align: center;
        font-size: 12px;
    }
    .img_link::before{
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background: url(../img/zoom.svg) no-repeat;
        background-size: cover;
        position: absolute;
        bottom: 17px;
        left: 8rem;
        z-index: 2;
    }
}