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

html{ scroll-behavior: auto !important;}
body{
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 1px;
  color: #000 !important;
  position: relative;
}

/*================================
Header
================================*/
#header{
	z-index: 1000;
  position: absolute;
  width: 100%;
}
#header .navbar{ padding: 0;}
#header .navbar .container{
	background-color: #fff;
	justify-content: flex-end;
}
#header .navbar-brand{ margin-right: auto;}
#header .navbar-nav{
	flex-direction: inherit;
	align-items: center;
}
#header .navbar-nav .nav-item .nav-link{
	color: #fff;
	background-color: #333;
	border-radius: 4px;
	padding: .25rem;
	text-align: center;
}
#header .tel{ font-weight: bold;}
#header .tel svg{
	width: 18px;
  height: 18px;
	margin-top: -1px;
}
@media (min-width: 768px){
	#header .navbar-brand{ margin-left: auto;}
}
@media (min-width: 768px) and (max-width: 991px){
	#header .navbar .container{ max-width: 100%;}
}
@media (min-width: 768px){
	#header{
		top: 30px;
		padding-left: .75rem;
		padding-right: .75rem;
	}
	#header .navbar .container{ border-radius: 5px;}
	#header .navbar-brand{
		max-width: 300px;
		padding: .75rem;
	}
	#header .navbar-nav{ position: absolute;}
	#header .navbar-nav .nav-item{ padding: .5rem 0 .5rem .5rem;}
	#header .navbar-nav .nav-item .nav-link{
		width: 130px;
		font-size: .85rem;
	}
	#header .tel{ font-size: 1.25rem;}
}
@media (max-width: 991px){
	#header .navbar-brand{ margin-left: 0;}
}
@media (max-width: 767px){
	#header{
		top: 0;
		padding-left: .5rem;
		padding-right: .5rem;
	}
	#header .navbar .container{
		max-width: 490px;
		padding-left: .5rem;
		padding-right: .5rem;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}
	#header .navbar-brand{
		max-width: 250px;
		padding-top: .25rem;
		padding-bottom: .25rem;
	}
	#header .navbar-nav .nav-item{ padding: 0 0 .5rem .5rem;}
	#header .navbar-nav .nav-item .nav-link{
		width: 100px;
		font-size: .8rem;
	}
	#header .sp-tel{
		color: #000;
		text-decoration: none;
	}
}

/*================================
ヘッダー固定
================================*/
#header.fixed{
	position: fixed;
	top: 0;
	left: 0;
}
#header.fixed .navbar .container{
	max-width: 100%;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	background-color: rgba(255,255,255,.9);
}

/*================================
Main
================================*/
@media (min-width: 768px){
	.section{ padding: 4rem 0;}
}
@media (max-width: 767px){
	.section{ padding: 3rem 0;}
}

/*================================
共通パーツ
================================*/
/*タイトル
================================*/
.sect_ttl{
	font-weight: bold;
	text-align: center;
}
.sect_ttl span{
	color: #ffb806;
	font-size: calc(.75rem + 0.9vw);
	display: block;
	margin-bottom: .5rem;
}
.page_ttl{
	position: relative;
	text-align: center;
	font-size: calc(1rem + 0.9vw);
}
.page_ttl::before{
	content: '';
	display: inline-block;
	width: 40px;
	height: 2px;
	background-color: #ffb806;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	bottom: -.8rem;
}
.page_ttl:not(:first-child){ margin-top: 4rem;}
.yel_ttl{
	color: #ffb806;
	font-weight: bold;
	text-align: center;
	font-size: calc(1.1rem + 0.3vw);
}

@media (min-width: 1200px){
	.sect_ttl span{	font-size: 1rem;}
	.page_ttl{ font-size: 1.6rem;}
	.yel_ttl{ font-size: 1.5rem;}
}
@media (min-width: 768px){
	.sect_ttl{ margin-bottom: 2rem;}
	.page_ttl{ margin-bottom: 3rem;}
	.yel_ttl{ margin-bottom: 2rem;}
}
@media (max-width: 767px){
	.sect_ttl{ margin-bottom: 1rem;}
	.page_ttl{ margin-bottom: 2rem;}
	.yel_ttl{ margin-bottom: 1rem;}
}
/*背景
================================*/
.bg_yel{ background-color: #fff6e1;}
.bg_org{ background-color: #fccc44;}

/*================================
トップページ
================================*/
/*MV
================================*/
#mv{
	position: relative;
	background-image: url("../img/mv.jpg");
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	text-align: right;
}
#mv_ttl{
	position: relative;
	display: inline-block;
	-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	text-align: left;
}
#mv_ttl h1{
	position: relative;
	color: #fff;
	font-weight: bold;
	line-height: 2;
	margin: 0;
	z-index: 1;
}
#mv_ttl .mv_ttl_bg{
	position: absolute;
	top: 0;
	background-color: #fccc44;
	mix-blend-mode: multiply;
}
#mv_ttl .mv_ttl_bg:nth-child(2){ height: 100%;}
@media (min-width: 768px){
	#mv{
		background-size: cover;
		height: 615px;
		align-items: center;
	}
	#mv_ttl h1{
		font-size: 2.5rem;
		padding: 10px 0 16px;
	}
	#mv_ttl .mv_ttl_bg{ width: 55px;}
	#mv_ttl .mv_ttl_bg:nth-child(2){ right: 14px;}
	#mv_ttl .mv_ttl_bg:nth-child(3){
		left: 12px;
		height: 233px;
	}
}
@media (max-width: 767px){
	#mv{
		background-size: cover;
		height: 330px;
		align-items: flex-end;
	}
	#mv_ttl{ margin-bottom: 10px;}
	#mv_ttl h1{
		font-size: 1.5rem;
		padding: 5px 0 10px;
	}
	#mv_ttl .mv_ttl_bg{ width: 36px;}
	#mv_ttl .mv_ttl_bg:nth-child(2){ right: 7px;}
	#mv_ttl .mv_ttl_bg:nth-child(3){
		left: 6px;
		height: 140px;
	}
}

/*メッセージ
================================*/
#massage{
	font-size: 1rem;
	text-align: center;
}
@media (min-width: 768px){
	#massage{ font-size: 1.2rem;}
}
@media (max-width: 767px){
	#massage{ font-size: calc(.8rem + 0.9vw);}
}

/*施設紹介
================================*/
#facility{ position: relative;}
#facility::before,
#facility::after{
	content: '';
	display: inline-block;
	width: 100%;
	height: 40px;
	background-image: url("../img/bg_wave.png");
	background-repeat: repeat-x;
	background-position: center;
	position: absolute;
	left: 0;
}
#facility::before{ top: -20px;}
#facility::after{
	bottom: -20px;
	transform: rotate(180deg);
}
.f_box{
	background-color: #fff;
	max-width: 560px;
	margin: 0 auto;
}
.f_box h3{
	color: #ffb806;
	font-weight: bold;
}
.f_photo img{ border-radius: 30px;}
.view_more{
	position: relative;
	color: #fff;
	font-size: .9rem;
	font-weight: bold;
	background-color: #fccc44;
	border-radius: 30px;
	max-width: 200px;
	display: block;
}
.view_more .arrow{
	width: 15px;
	height: 15px;
	display: block;
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 1rem;
}
.view_more .arrow::before,
.view_more .arrow::after{
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
  border-top: 1px solid #fccc44;
  border-left: 1px solid #fccc44;
  position: absolute;
  left: 4px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  top: 5px;
}
.view_more:hover{
	color: #fff;
	background-color: #ffb806;
}
@media (min-width: 992px){
	.f_wrap{ margin-bottom: 3rem;}
	.f_box{ padding: 2rem;}
	.f_box h3{ font-size: 1.7rem;}
	.f_txt{
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}
@media (min-width: 768px) and (max-width: 991px){
	.f_wrap{ margin-bottom: 5.5rem;}
	.f_box{ padding: 1.5rem;}
	.f_box h3{ font-size: 1.4rem;}
	.f_txt{ bottom: -50px;}
}
@media (min-width: 768px){
	.f_wrap{ position: relative;}
	.f_txt{ position: absolute;}
}
@media (max-width: 767px){
	.f_wrap:not(:last-child){ margin-bottom: 2rem;}
	.f_photo{ padding: 0;}
	.f_box{
		margin-top: -1.5rem;
		padding: 1rem;
	}
	.f_box h3{ font-size: 1.1rem;}
	.view_more{
		margin-left: auto;
		margin-right: auto;
	}
}

/*アクセス
================================*/
.access_map{ display: flex;}
.access_map .map_txt h3{ font-weight: bold;}
.access_map .map_txt p{ margin-bottom: 0;}
#gmap{ margin-top: 3rem;}
#gmap iframe{ width: 100%;}
@media (min-width: 768px){
	.access_map{
		align-items: center;
		justify-content: center;
	}
	.access_map .map_txt{ order: 1;}
	.access_map .map_txt h3{ font-size: 1.75rem;}
	.access_map > img{
		order: 2;
		width: 400px;
		margin-left: 4rem;
	}
	#gmap iframe{ height: 350px;}
}
@media (max-width: 767px){
	.access_map{ flex-wrap: wrap;}
	.access_map > img{ margin: 0 auto;}
	.access_map .map_txt{
		width: 100%;
		text-align: center;
		margin-top: 1rem;
	}
	.access_map .map_txt h3{ font-size: 1.25rem;}
	.access_map .map_txt p{
		display: inline-block;
		text-align: left;
	}
	#gmap{
		position: relative;
		padding-bottom: 100%;
		height: 0;
		overflow: hidden;
	}
	#gmap iframe{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/*施設概要
================================*/
#overview .sect_ttl,
#overview .sect_ttl span{ color: #fff;}
.overview_frame{ background-color: #fff;}
.overview_frame .table{
	border-color: #e4e4e4;
	margin-bottom: 0;
}
.overview_frame .table th{
	width: 90px;
	font-weight: normal;
}
@media (min-width: 768px){
	.overview_frame{ padding: 1.5rem 1.5rem 2.5rem;}
	.overview_frame .table > :not(caption) > * > *{ padding: .719rem .5rem;}
}
@media (max-width: 767px){
	.overview_frame{ padding: .5rem;}
	.overview_frame .table{
		border-top-width: 1px;
		border-top-style: solid;
	}
	.overview_frame .table > :not(caption) > * > *{
		width: 100%;
		display: block;
		font-size: .9rem;
	}
	.overview_frame .table th{ background-color: rgba(255, 246, 225, .4);}
}

/*採用
================================*/
#recruit{ padding-bottom: 0 !important;}
#recruit a{
	max-width: 600px;
	display: block;
	margin: 0 auto;
	background-color: #fff;
	transition: .5s;
	overflow: hidden;
}
#recruit a img{ transition: .5s;}
#recruit a:hover{ opacity: .9;}
#recruit a:hover img{	transform: scale(1.05, 1.05);}


/*================================
施設紹介
================================*/
/*共通部分
================================*/
/*page_hd*/
#page_hd{
	position: relative;
	background-size: cover;
	background-position: center;
}
#tokuyo #page_hd{ background-image: url("../img/tokuyo/main.jpg");}
#smallscale #page_hd{ background-image: url("../img/smallscale/main.jpg");}
#grouphome #page_hd{ background-image: url("../img/grouphome/main.jpg");}

#page_hd #hd_ttl{
	background-color: #fff;
  padding: 0.5rem;
	display: block;
	position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center;
  width: 80%;
  margin-bottom: 0;
  font-size: calc(1.2rem + 1.5vw);	
}
@media (min-width: 1200px){
	#page_hd #hd_ttl{ font-size: 2.25rem;}
}
@media (min-width: 768px){
	#page_hd{ height: 400px;}
	#page_hd #hd_ttl{ max-width: 425px;}
}
@media (max-width: 767px){
	#page_hd{ height: 200px;}
	#page_hd #hd_ttl{ max-width: 320px;}
}

/*施設紹介テキスト*/
.intro_txt p:last-child,
.intro_txt ul:last-child{ margin-bottom: 0;}
.intro_txt ul{ padding-left: 1.35rem;}

/*施設紹介スライダー*/
#intro_slider{
	position: relative;
	padding-top: 5rem;
}
#intro_slider .swiper-slide{ height: 100%;}
#intro_slider .swiper-slide:not(.swiper-slide-active) img,
#intro_slider .swiper-slide:not(.swiper-slide-active) p{ opacity: .5;}
#intro_slider .swiper-slide p{
	margin-top: .75rem;
	margin-bottom: 0;
}
#intro_slider .swiper-button-prev,
#intro_slider .swiper-button-next{
	top: 40px;
	width: 50px;
	height: 50px;
	background-color: #e4e4e4;
	border-radius: 50%;
	z-index: 1;
}
#intro_slider .swiper-button-prev::after,
#intro_slider .swiper-button-next::after{
	color: #000;
	font-size: 1rem;
	font-weight: bold;
}
#intro_slider .swiper-button-prev:hover,
#intro_slider .swiper-button-next:hover{ background-color: #fff6e1;}
#intro_slider .swiper-button-prev{
	left: auto;
	right: 70px;
}
#intro_slider .swiper-pagination{
	top: 33px;
	color: #b1b1b1;
	text-align: right;
	padding-right: 140px;
	z-index: 0;
}
#intro_slider .swiper-pagination-current{ color: #000;}
@media (min-width: 768px){
	#intro_slider .swiper-slide{ width: 500px;}
}
@media (max-width: 767px){
	#intro_slider .swiper-slide{ width: 80%;}
	#intro_slider .swiper-slide p{ text-align: center;}
}

/*平面図*/
.viewbox{
	background-color: #fff;
	padding: 1rem .75rem;
}
.viewbox p{
	font-size: .85rem;
  text-align: center;
  margin-top: 0.3rem;
	margin-bottom: 0;
}

/*働くスタッフの想い*/
.working_staff dl{
	border: #ffb806 1px dashed;
}
.working_staff dl dt{
	font-size: 1.1rem;
	margin-bottom: .25rem;
}
.working_staff dl dd{ margin-bottom: 0;}
@media (min-width: 768px){
	.working_staff dl{ padding: 1rem;}
}
@media (max-width: 767px){
	.working_staff dl{ padding: .75rem;}
}

/*================================
local nav
================================*/
/*ページ上部
================================*/
#local_nav .navbar{ padding: 0;}
#local_nav .navbar-nav{
	width: 100%;
	justify-content: center;
	padding: 1rem;
	background-color: #fff;
	filter: drop-shadow(0 0 5px rgba(178, 178, 178, .3));
}
#local_nav .navbar-nav .nav-link{
	position: relative;
	color: #000;
}
#local_nav .navbar-nav .nav-link::before{
	content: '';
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient( rgba(250, 190, 0, .3) 0%, rgba(250, 190, 0, 0) 50%, rgba(250, 190, 0, 0) 100%);
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	opacity: 0;
	transition: .3s;
}
#local_nav .navbar-nav .nav-link:hover::before{ opacity: .6;}
@media (min-width: 992px){
	#local_nav .navbar-nav .nav-link{ padding: 0 1.5rem;}
}
@media (min-width: 768px) and (max-width: 991px){
	#local_nav .container{ max-width: 100%;}
	#local_nav .navbar-nav .nav-link{ padding: 0 1.1rem;}
}
@media (min-width: 768px){
	#local_nav{ margin-top: 4rem;}
}
@media (max-width: 767px){
	#local_nav{ display: none;}
}

/*ページ下部
================================*/
#bottom_link ul{
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}
#bottom_link ul li a{
	position: relative;
	text-align: center;
	display: block;
	color: #000;
	text-decoration: none;
}
#bottom_link ul li a::before{
	content: '';
	display: inline-block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient( rgba(250, 190, 0, .3) 0%, rgba(250, 190, 0, 0) 50%, rgba(250, 190, 0, 0) 100%);
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	opacity: 0;
	transition: .3s;
}
#bottom_link ul li a:hover{ color: #000;}
#bottom_link ul li a:hover::before{ opacity: .6;}
@media (min-width: 768px) and (max-width: 991px){
	#bottom_link .container{ max-width: 100%;}
}
@media (min-width: 768px){
	#bottom_link ul{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#bottom_link ul li{
		width: 33.33333%;
		border-right: #4d4d4d 1px solid;
	}
	#bottom_link ul li:first-child{ border-left: #4d4d4d 1px solid;}
	#bottom_link ul li a{ padding: 0 .8rem;}
}
@media (max-width: 991px){
	#bottom_link ul li a{ font-size: .9rem;}
}
@media (max-width: 767px){
	#bottom_link ul li{ border-bottom: #4d4d4d 1px solid;}
	#bottom_link ul li:first-child{ border-top: #4d4d4d 1px solid;}
	#bottom_link ul li a{ padding: .8rem 0;}
}

/*================================
お問い合わせ
================================*/
.contactbox{
	max-width: 940px;
	margin: 0 auto;
	text-align: center;
	background-color: #f5f5f3;
	padding: 2rem 1rem;
}
.contactbox h2{ font-weight: bold;}
.contactbox ul{
	padding-left: 0;
	list-style: none;
	margin: 0 auto;
}
.contactbox ul li{
	display: table;
  width: 100%;
	background-color: #333;
	border: #f5f5f3 1px solid;
}
.contactbox ul li .btn_txt{
	position: relative;
	color: #fff;
	text-decoration: none;
	display: table-cell;
  vertical-align: middle;
}
.contactbox ul li a:hover{ background-color: #000;}
.btn_icon{
	position: absolute;
	top: 50%;
  -webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn_mail .cls-1{
	fill:none;
	stroke:#333;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:1.2px;
}
.btn_tel .cls-1{
	fill:#333;
	stroke-width:0;
}
.btn_tel .tel{ font-weight: bold;}
@media (min-width: 992px){
	.contactbox ul li{ height: 80px;}
	.btn_icon{
		width: 55px;
		height: 55px;
	}
	.btn_mail svg,
	.btn_tel svg{
		width: 25px;
		height: 25px;
	}
}
@media (min-width: 768px) and (max-width: 991px){
	.contactbox ul li{ height: 70px;}
	.btn_icon{
		width: 45px;
		height: 45px;
	}
	.btn_mail svg,
	.btn_tel svg{
		width: 20px;
		height: 20px;
	}
}
@media (min-width: 768px){
	.contactbox h2{ font-size: 1.4rem;}
	.contactbox ul{
		max-width: 740px;
		display: flex;
		justify-content: center;
	}
	.btn_icon{ left: 1.5rem;}
	.btn_tel .tel{ font-size: 1.3rem;}
}
@media (max-width: 767px){
	.contactbox h2{ font-size: 1.3rem;}
	.contactbox ul{ max-width: 330px;}
	.contactbox ul li{ height: 60px;}
	.contactbox ul li a{ font-size: .9rem;}
	.btn_icon{
		width: 35px;
		height: 35px;
		left: .75rem;
	}
	.btn_mail svg,
	.btn_tel svg{
		width: 15px;
		height: 15px;
	}
	.btn_tel .tel{ font-size: 1.2rem;}
	.btn_tel .sp-tel{
		display: table;
		width: 100%;
		height: 100%;
		text-decoration: none;
	}
}

/*================================
Footer
================================*/
#footer{
	border-top: #e4e4e4 1px solid;
	padding-top: 2rem;
	padding-bottom: .5rem;
}
#ft_logo{
	text-align: center;
	margin-bottom: 1.5rem;
}
#ft_link ul{
	padding: 0;
	list-style: none;
	margin-bottom: 2rem;
}
#ft_link ul li a{
	color: #000;
	text-decoration: none;
}
#ft_link ul li a:hover{
	color: #ffb806;
}
#ft_blank a{
	max-width: 200px;
	display: block;
	margin: 1rem auto 0;
	padding: .25rem 1.5rem;
	border: #e4e4e4 1px solid;
}
#copyright{
	font-size: .85rem;
	text-align: center;
  margin-top: 1rem;
}
@media (min-width: 768px){
	#ft_logo img{ max-width: 300px;}
	#ft_link ul{
		display: flex;
		justify-content: center;
	}
	#ft_link ul li:not(:last-child){ margin-right: 2rem;}
}
@media (max-width: 767px){
	#ft_logo img{ max-width: 250px;}
	#ft_link ul{
		font-size: .95rem;
		text-align: center;
	}
	#ft_link ul li:not(:last-child){ margin-bottom: .5rem;}
}

/*Page Top
================================*/
#page_top{
	position: fixed;
	z-index: 100;
	background-color: rgba(252, 204, 68, .7);
  border-radius: 50%;
  display: block;
  width: 50px;
  height: 50px;
	font-size: .95rem;
	font-weight: bold;
	text-align: center;
  text-decoration: none;
}
#page_top::after{
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%) rotate(45deg);
  transform: translateY(-50%) translateX(-50%) rotate(45deg);
}
#page_top:hover{ background-color: rgba(252, 204, 68, 1);}

@media (min-width: 768px){
  #page_top{ right: 15px;}
}
@media (max-width: 767px){
  #page_top{ right: 8px;}
}