@charset "utf-8";

#h_logo h1 a {
color: var(--text-color);
}

#contents {
width:100%;
}

/*-----------------------------
ページヘッダー
-------------------------------*/
#page_header {
width: 100%;
}

.page_headerbox {
width: 90%;
max-width: 1400px;
padding: 50px 0 20px 0;
margin: 0 auto;
text-align: left;
padding-bottom: 3rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border-color);
}

.page_header_title {
font-size: var(--font-size-16-24);
line-height: 1.2;
position: relative;
padding-left: 3rem;
margin-bottom: 1rem;
color: var(--text-color-purple);
}

.page_header_title:before {
content: "―";
position: absolute;
top:0;
left: 0;
border: 0;
color: var(--text-color-purple);
}

.page_headerbox h2 {
font-size: var(--font-size-24-48);
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.1em;
}

.page_headerbox h2 span {
display: block;
font-size: var(--font-size-18-24);
letter-spacing: 0;
}

#pan {
margin-bottom: 3rem;
}

.panbox {
width: 90%;
max-width: 1400px;
margin: 0 auto;
text-align: right;
}

.panbox p {
font-size: var(--font-size-10-15);
color: var(--text-color-light-purple);
}

.panbox p a {
position: relative;
padding-right: 2rem;
margin-right: 1rem;
color: var(--text-color-purple);
}

.panbox p a::before {
content: ">";
position: absolute;
right: 0;
margin-left: 1rem;
}


@media screen and (max-width: 1023px) {
	.page_header_title {
	padding-left: 2rem;
	margin-bottom: 0.5rem;
	}
}

/*-----------------------------
コンテンツ部分
-------------------------------*/
#main {
width: 90%;
max-width: 1400px;
margin: 0 auto;
text-align: left;
}

.mainbox {
padding: 0 0 5rem 0;
}

.mainbox h3 {
clear:both;
font-size: var(--font-size-24-36);
margin: 6rem 0 3rem 0;
letter-spacing: 0.1em;
}

.mainbox.greetingbox h3 {
letter-spacing: 1em;
}

.mainbox h3.h3title {
font-size: var(--font-size-22-28);
text-align: center;
line-height: 1.4;
padding: 1rem 2rem;
border: 1px solid var(--border-color-light-purple);
}

.mainbox > div > h3:first-child {
margin-top: 0;
margin-bottom: 1.6rem;
}

.mainbox h4 {
clear:both;
color: var(--text-color-purple);
font-family: 'Noto Serif JP', sans-serif;
font-size: var(--font-size-18-24);
line-height: 1.4;
margin: 5rem 0 4rem 0;
position: relative;
}

.mainbox h3 + h4 {
margin-top:0;
}

.mainbox h4:before {
content: "";
position: absolute;
bottom: -1rem;
left: 0;
width: 100%;
height: 2px;
background: var(--background-color-light-purple);
}

.mainbox h5 {
color: var(--text-color-light-purple);
font-size: var(--font-size-20-26);
line-height: 1.4;
border-left: 5px solid var(--background-color-light-purple);
padding-left: 1rem;
margin: 2em 0 1em 0;
}

.mainbox p {
font-size: var(--font-size-16-18);
line-height: 2.0;
}

.mainbox p.catch {
color: var(--text-color-white);
background-color: var(--background-color-purple);
font-size: var(--font-size-24-36);
font-weight: 600;
font-family: 'Noto Serif JP', sans-serif;
line-height: 1.4;
padding: 1rem 2rem;
}

.red {
color: var(--text-color-red);
}

.mainbox ul {
padding-left: 2rem;
margin-bottom: 1rem;
}

.mainbox ul li {
font-size: var(--font-size-16-18);
list-style-type: disc;
margin-bottom: 1rem;
}

.mainbox ul.ul-style1 {
padding: 0;
}
.mainbox ul.ul-style1 li {
font-size: var(--font-size-16-18);
list-style-type: none;
line-height: 1.4;
position: relative;
margin: 0 0 1em 0;
padding: 0 0 0 2em;
}

.mainbox ul.ul-style1 li:before {
content: "―";
position: absolute;
top:0;
left: 0;
border: 0;
color: var(--text-color-purple);
}

.mainbox ul.ul-list2c {
width: 100%;
margin-bottom: 3rem;
padding: 0;
display: -webkit-flex;
display:flex;
-webkit-flex-wrap: wrap;
word-wrap: break-word;
}

.mainbox ul.ul-list2c li {
position: relative;
width: 50%;
list-style-type: none;
margin: 0 0 1em 0;
padding: 0 0 0 2em;
}

.mainbox ul.ul-list2c li:before {
content: "―";
position: absolute;
top:0;
left: 0;
border: 0;
color: var(--text-color-purple);
}

.mainbox ol {
padding-left: 3rem;
margin-bottom: 1rem;
}

.mainbox ol li {
font-size: var(--font-size-16-18);
list-style-type: decimal;
padding-left: 1rem;
margin-bottom: 1rem;
}

.mainbox hr {
height: 0;
margin: 5rem 0;
padding: 0;
border: 0;
border-bottom :1px solid var(--border-color);
}

a.bt {
display: inline-block;
color: var(--text-color-white);
font-weight: 400;
padding: 1rem 3rem 0.6em 3rem;
margin: 2rem 0 1rem 0;
background: var(--background-color-gradation2);
letter-spacing: 0.1em;
line-height: 1.4;
text-align: center;
text-decoration: none;
position: relative;
transition: 0.6s;
border-radius: 50vh;
box-shadow: 2px 2px 6px #CCC;
}

a.bt:hover {
color :var(--text-color-white);
background: var(--background-color-gradation);
}

span.link-btn a{
display: inline-block;
color: var(--text-color-white);
font-weight: 400;
padding: 0.6rem 4rem 0.6em 3rem;
margin: 2rem 0 1rem 0;
background: var(--background-color-gradation);
letter-spacing: 0.1em;
line-height: 1.4;
text-align: center;
text-decoration: none;
position: relative;
border-radius: 50vh;
box-shadow: 2px 2px 6px #CCC;
transition: 0.6s;
}

a.bt:hover,
span.link-btn a:hover {
color :var(--text-color-light-purple);
transition: 0.6s;
}

span.link-btn a:before {
content: "→";
position: absolute;
top: 50%;
right: 1rem;
margin:auto;
transform: translateY(-50%);
}

.mainbox button {
display: block;
color: var(--text-color-white);
font-weight: 400;
padding: 0.6rem 3rem 0.6em 4rem;
margin: 3rem auto 1rem auto;
background: var(--background-color-gradation);
letter-spacing: 0.1em;
line-height: 1.4;
text-align: center;
text-decoration: none;
position: relative;
border: none;
border-radius: 50vh;
box-shadow: 2px 2px 6px #CCC;
transition: 0.6s;
}

.mainbox button:before {
content: "←";
position: absolute;
top: 50%;
left: 1rem;
margin:auto;
transform: translateY(-50%);
}

.mainbox blockquote {
border: 1px solid var(--border-color);
background-color: var(--background-color);
margin: 5rem 0 1rem 0;
padding: 2rem 2rem 1rem 2rem;
}

.mainbox blockquote h3 {
display: inline-block;
font-size: var(--font-size-18-24);
color: var(--text-color-white);
background-color: var(--background-color-light-purple);
padding: 0.1rem 2rem;
margin: 0 0 1em 0;
}

.mainbox span.text-line {
background: linear-gradient(transparent 50%, #FFD700 75%);
font-weight: bold;
}

@media screen and (max-width: 767px) {
	.mainbox > div > h3:first-child {
	margin-bottom: 1rem;
	}
	.mainbox ul.ul-list2c li {
	width: 100%;
	}
}

/*-----------------------------------

画像

-----------------------------------*/

.wp-caption.aligncenter {
text-align: center;
width:auto!important;
max-width: 80%;
display: block;
margin: 0 auto 4rem auto;
}

.wp-caption.alignnone {
text-align: center;
width:100%!important;
display: block;
margin: 0 auto 4rem auto;
}

.mainbox p.wp-caption-text {
font-size: var(--font-size-13-14);
}

.wp-caption.aligncenter img,
.wp-caption.alignright img,
.wp-caption.alignleft img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 0.8rem auto;
}

.alignright {
float:right; 
margin:0 0 2rem 3rem;
max-width: 40%;
height: auto;
}

.alignleft {
float:left; 
margin:0 3rem 2rem 0;
max-width: 40%;
height: auto;
}


.aligncenter {
display: block;
margin: 0 auto 2rem auto;
}

p.photo2 img {
float: left;
width: 48%;
margin-right: 2%;
}

p.photo2 {
overflow: hidden;
}
p.photo2 img:nth-of-type(even) {
float: left;
width: 48%;
margin-left: 0;
margin-right: 2%;
}

p.photo_right {
float: right;
margin:0 0 2em 2em;
}

p.photo_right img {
vertical-align: bottom;
}

p.photo_left {
float: left;
margin:0 0 2em 2em;
}

p.photo_left img {
vertical-align: bottom;
}

.mainbox p.photo80 {
text-align: center;
}

p.photo80 img {
width:80%;
margin:0 auto;
}

p.clear {
overflow: hidden;
}

@media screen and (max-width: 767px) {
	.wp-caption.aligncenter {
	max-width: 100%;
	}
	.alignright {
	float:none;
	margin:0 auto 1rem auto;
	display: block;
	max-width: 100%;
	}
	.alignleft {
	float:none;
	margin:0 auto 1rem auto;
	display: block;
	max-width: 100%;
	}
	p.photo80 img {
	width: 100%;
	}
	p.photo_right {
	float:none;
	text-align: center;
	margin: 0 0 1em 0;
	}
	p.photo_left {
	float:none;
	text-align: center;
	margin: 0 0 1em 0;
	}
	span.link-btn a{
	padding: 0.6rem 2rem ;
	}
}

/*-----------------------------------

2カラム用

-----------------------------------*/
.mainbox table.t_style2 {
width: 100%;
margin:0 0 1em 0;
border-top:1px solid var(--border-color-light-purple);
border-right:1px solid var(--border-color-light-purple);
}

.mainbox table.t_style2 th {
width: 20%;
text-align:left;
font-weight:normal;
padding: 1.5rem 2rem;
color :var(--text-color-white);
background-color:var(--background-color-purple);
border-left:1px solid var(--border-color-light-purple);
border-bottom:1px solid var(--border-color-light-purple);
}

.mainbox table.t_style2 td {
width: 80%;
text-align:left;
padding: 1.5rem 2rem;
border-left:1px solid var(--border-color-light-purple);
border-bottom:1px solid var(--border-color-light-purple);
}

.mainbox table.t_photo {
width: 100%;
margin: 3rem 0;
}

.mainbox table.t_photo td {
width: 50%;
padding: 1rem;
font-size: var(--font-size-13-14);
}

.mainbox table.t_photo3 {
width: 100%;
margin:3rem 0;
}

.mainbox table.t_photo3 td {
width: 33.33%;
padding: 1rem;
font-size: var(--font-size-13-14);
}

@media screen and (max-width: 767px) {
	.mainbox table.t_style2 th {
	width:100%;
	display: block;
	}
	.mainbox table.t_style2 td {
	width:100%;
	display: block;
	}
	.mainbox table.t_photo td {
	width:100%;
	display: block;
	}
}

/*-----------------------------------

2カラム用

-----------------------------------*/
.columnbox {
width: 100%;
display: flex;
justify-content: space-between;
}

.columnbox_main {
width: calc(100% - 300px);
padding-right: 5%;
border-right: 1px solid var(--border-color);
}

.columnbox_side {
width: 260px;
margin-left: 5%;
}

.columnbox_sidebox {
position: sticky;
top: 20px;
}

.columnbox_side_title {
font-family: 'Noto Serif JP', sans-serif;
font-size: var(--font-size-16-18);
font-weight: 400;
color: var(--text-color-white);
background: var(--background-color-purple);
text-align: center;
padding: 0.8rem 1rem;
margin-bottom: 3rem;
}

.columnbox_side_title a {
text-decoration: none;
color :var(--text-color-white);
transition: 0.6s;
}

.columnbox_side_title a:hover {
color :var(--text-color-light-purple);
}

.columnbox_sidebox ul {
padding: 0;
}

.columnbox_sidebox ul li {
position: relative;
line-height: 1.5;
list-style-type: none;
text-align: left;
border-bottom: 1px dotted var(--border-color-light-purple);
}

.columnbox_sidebox ul li a {
font-size: 1rem;
text-decoration: none;
display: block;
color :var(--text-color-purple);
padding-left: 2rem;
padding-bottom: 1rem;
position: relative;
transition: 0.6s;
}

.columnbox_sidebox ul li a:hover {
color :var(--text-color-light-purple);
}

.columnbox_sidebox ul li a:before {
    content: "→";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
}

.columnbox_sidebox ul li ul {
padding-left: 26px;
}

.columnbox_sidebox ul li ul li {
position: relative;
line-height: 1.5;
list-style-type: none;
text-align: left;
border-bottom: none;
margin-bottom: 0.3rem;
}

.columnbox_sidebox ul li ul li a {
font-size: 1rem;
text-decoration: none;
display: block;
color :var(--text-color-purple);
padding-left: 2rem;
padding-bottom: 0.5rem;
position: relative;
transition: 0.6s;
}

.columnbox_sidebox ul li ul li a:before {
    content: "ー";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
}



/*-----------------------------------

当センターのご案内

-----------------------------------*/

.greeting_photo {
float: right;
width: max(40%, 300px);
margin: 0 0 2rem 4rem;
overflow: hidden;
}

.greeting_photo img {
width: 100%;
height: auto;
border-top-left-radius: 12px;
}

p.post {
font-size: var(--font-size-16-22);
line-height: 1.4;
margin-top: 3rem;
text-align: right;
}
p.post span.name {
font-size: var(--font-size-24-36);
display: block;
}

.mainbox.greetingbox h4 {
font-size: var(--font-size-16-18);
font-weight: 600;
margin-bottom: 2em;
color: var(--text-color);
}

.mainbox.greetingbox h4:before {
display:none;
}


@media screen and (max-width: 1023px) {
	.columnbox {
	display: block;
	justify-content:inherit;
	}
	.columnbox_main {
	width: 100%;
	display: block;
	padding-right: 0;
	margin-bottom: 5rem;
	border: none;
	}
	.columnbox_side {
	clear: both;
	width: 100%;
	display: block;
	position:static;
	margin-left: 0;
	}
	.greeting_photo {
	float:none;
	display: block;
	margin: 0 auto 2rem auto;
	}
}

@media screen and (max-width: 768px) {
	.page_headerbox {
	padding-top: 30px;
	padding-bottom: 1rem;
	}
	.page_header_title {
	font-size: 1rem;
	margin-bottom: 0.2em;
	}
}


/* 施設・施設紹介 */

.facilitybox .wp-caption.alignnone {
width: 48%!important;
float:left;
margin-right: 2%;
}

.facilitybox .wp-caption.alignnone:nth-of-type(even){
margin-right: 0;
margin-left: 2%;
}

.facilitybox .wp-caption.alignnone img {
vertical-align: bottom;
}

@media screen and (max-width: 767px) {
	.facilitybox .wp-caption.alignnone {
	width: 100%!important;
	float:none;
	margin-right: 0;
	margin-bottom: 1rem;
	}
	.facilitybox .wp-caption.alignnone:nth-of-type(even){
	margin-left: 0;
	}
}

/* DMAT */

.dmatbox img.alignleft {
width: 48%!important;
float:left;
margin-right: 2%;
}

.dmatbox img.alignleft:nth-of-type(even){
margin-right: 0;
margin-left: 2%;
}


/* スタッフ紹介 */

.staffbox1 {
padding: 2rem 3rem;
margin-bottom: 3rem;
border: 1px solid var(--border-color-light-purple);
}

.staff_post {
font-size: var(--font-size-16-18);
color: var(--text-color-purple);
}

.staffbox1 h3 {
font-size: var(--font-size-22-28);
border:none;
margin:0;
}

.staffbox1 h3::before {
display: none;
}

.staffbox1 h4 {
font-size: var(--font-size-16-22);
width: 50%;
display: inline-block;
padding:0.2rem 0 0.8rem 1rem;
margin: 2rem 0 1rem 0;
border-left: 3px solid var(--border-color-light-purple);
border-bottom: 1px dotted var(--border-color);
}

.staffbox1 h4::before {
	display: none;
}

@media screen and (max-width: 767px) {
	.staffbox1 {
	padding: 1.5rem 1rem;
	}
	.staffbox1 h4 {
	width: 100%;
	}
}


.staff_content {
margin-top:2rem;
}

.staffbox1 ul {
padding: 0;
}

.staffbox1 ul li {
font-size: var(--font-size-16-18);
list-style-type: none;
line-height: 1.4;
position: relative;
margin: 0 0 1em 0;
padding: 0 0 0 2em;
}

.staffbox1 ul li:before {
content: "―";
position: absolute;
top:0;
left: 0;
border: 0;
color: var(--text-color-purple);
}



/*-----------------------------------

募集

-----------------------------------*/

/* 下部スライドショー　*/

#rectuit_slide {
width: 100%;
}

#rectuit_slide h3 {
width: 94%;
max-width: 1600px;
margin: 0 auto;
text-align: left;
font-size: var(--font-size-24-80);
color: var(--text-color-light-purple);
}

#rectuit_slide h3 span {
font-size: var(--font-size-24-36);
color: var(--text-color);
margin-left: 1rem;
}

.rectuit_slide_footer {
width: 94%;
max-width: 1600px;
margin: 0 auto 5rem auto;
text-align: right;
color: var(--text-color-light-purple);
font-family: 'Noto Serif JP', sans-serif;
font-size: var(--font-size-14-36);
}

.slider-wrapper {
width: 100%;
}

.slider {
width: 100%;
height: 400px;
overflow: hidden;
}

.slider li {
width: 400px!important;
height: auto;
margin: 0;
padding: 1rem;
overflow: hidden;
}

@media screen and (max-width: 767px) {
.slider {
width: 100%;
height: 200px;
overflow: hidden;
}

.slider li {
width: 200px!important;
height: auto;
margin: 0;
padding: 1rem;
overflow: hidden;
}
}

.slick-track li img {
width: 100%;
height: auto;
}

.slick-track li.photo1 img {
border-bottom-right-radius: 5vh;
border-top-left-radius: 5vh;
}
.slick-track li.photo2 img {
border-bottom-left-radius: 5vh;
border-top-right-radius: 5vh;
}
.slick-track li.photo3 img {
border-bottom-right-radius: 5vh;
border-top-left-radius: 5vh;
}
.slick-track li.photo4 img {
border-bottom-left-radius: 5vh;
border-top-right-radius: 5vh;
}
.slick-track li.photo5 img {
border-bottom-right-radius: 5vh;
border-top-left-radius: 5vh;
}
.slick-track li.photo6 img {
border-bottom-left-radius: 5vh;
border-top-right-radius: 5vh;
}

/*-----------------------------------

Information

-----------------------------------*/

.informationbox {
width: 80%;
max-width: 1400px;
margin: 0 auto;
padding: 0 0 5rem 0;
display: -webkit-flex;
display:flex;
-webkit-flex-wrap: wrap;
word-wrap: break-word;
}

.informationbox dl {
width: 100%;
display: -webkit-flex;
display:flex;
-webkit-flex-wrap: wrap;
word-wrap: break-word;
margin-bottom: 1rem;
padding: 3rem 7%;
position: relative;
background-color: var(--background-color);
}

.informationbox dl::after{
position: absolute;
content: "";
top:0;
right: 1rem;
bottom: 0;
margin: auto;
background-image: url("../images/arrow.svg");
background-size: 1rem;
background-repeat: no-repeat;
}

.informationbox dl dt {
width: 220px;
font-weight: 600;
}

.informationbox dl dt span.new {
font-size: var(--font-size-13-14);
display: inline-block;
padding: 0.3em 1rem;
margin-left: 2rem;
line-height: 13px;
color: var(--text-color-white);
background-color: var(--background-color-purple);
}

.informationbox dl dd {
flex:1;
min-width:0;
margin-left: 7%;
padding-right: 50px;
text-align: left;
}

.informationbox dl dd a {
color: var(--text-color);
text-decoration: none;
}

.informationbox dl:hover {
transition: 0.6s;
transform: translateX(5%);
}

.informationbox dl dd a::before {
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
}

.informationbox dl dd a:hover {
color: var(--text-color-purple);
}

.btn_right {
width: 100%;
margin: 2rem 0;
text-align: right;
}
.btn_right a {
font-weight: 400;
display: inline-block;
text-decoration: none;
color: var(--text-color);
}

.information_page {
width: 80%;
max-width: 1400px;
margin: 0 auto;
}

.information_photo {
width: 50%;
max-width: 50%;
display: inline-block;
float: right;
margin: 0 0 2rem 2rem;
}

.information_photo img {
max-width: 100%;
height: auto;
}

.wp-pagenavi {
margin: 2rem auto 0 auto;
}
.wp-pagenavi a, .wp-pagenavi span{
padding: 0.3rem 0.8rem!important;
border: 1px solid var(--border-color-light-purple)!important;
}
.wp-pagenavi .current {
color: var(--text-color-white)!important;
background-color: var(--background-color-purple)!important;
}

@media screen and (max-width: 1023px) {
	#information {
	padding: 8rem 0 2rem 0;
	}
	.informationbox {
	width: 90%;
	max-width: 90%;
	padding: 5rem 0 2rem 0;
	}
	.informationbox dl {
	padding: 1rem 2rem;
	text-align: left;
	}
	.informationbox dl dt {
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
	}
	.informationbox dl dd {
	flex: none;
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
	}
	.information_page {
	width: 90%;
	max-width: 90%;
	}
}


.information_page h3 {
margin:0 0 2rem 0;
}

.information_page h3.h3title {
color: var(--text-color-white);
background-color: var(--background-color-purple);
font-weight: 600;
font-family: 'Noto Serif JP', sans-serif;
line-height: 1.4;
padding: 1rem 2rem;
}

@media screen and (max-width: 767px) {
	.informationbox {
	width: 100%;
	max-width: 100%;
	padding: 2rem 0 2rem 0;
	}
	.information_page {
	width: 100%;
	max-width: 100%;
	}
	.information_page h3.h3title {
	color: var(--text-color-purple);
	background-color: var(--background-color-white);
	border:none;
	padding: 0;
	}
	.information_photo {
	width: 100%;
	max-width: 100%;
	display: block;
	float: none;
	margin: 0 0 1rem 0;
	text-align: center;
	}
}


.information_page p.day {
text-align: right;
}

#pagefooter {
border: 1px solid var(--background-color-light-purple);
padding: 1rem 2rem;
margin-top: 5rem;
text-align: center;
}

#pagefooter span {
margin: 0 2rem;
}