@charset "utf-8";

@import url("reset.css");
@import url("base.css");

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;700;900&display=swap');

/* __________________________________________________
   common
__________________________________________________ */

/*
font-family: 'Noto Sans JP', sans-serif; font-weight: 300;
font-family: 'Noto Sans JP', sans-serif; font-weight: 500;
font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
font-family: 'Noto Sans JP', sans-serif; font-weight: 900;
*/

html { overflow-y: scroll; _overflow: auto; font-size: 62.5%;}/**1rem=10px**/
body { overflow-x: hidden; position: relative; font-family: "Noto Sans JP", sans-serif; font-weight: 300; font-style: normal; font-feature-settings: "palt"; line-height:2.5; color: #000000; padding: 0; margin: 0; font-size: 1.6rem;}

html, body { width: 100%; min-height: 100%; position: relative;}

a { color: #424242; text-decoration: none;}
a:hover { color: #424242;}
a[href^="tel:"]{ display: inline-block; pointer-events: none;}

@media screen and (max-width: 768px) {
body {font-size: 1.5rem;}
a[href^="tel:"] { pointer-events: auto; text-decoration: underline; color: #424242;}
}

@media screen and (max-width: 580px) {
a[href^="tel:"] { pointer-events: auto; text-decoration: underline; color: #424242;}
}


/* fadein -----------------------------------------*/
.fadein { opacity: 0; transform: translateY(100px); transition : all 1s;}
.fadein.active { opacity: 1; transform: translateY(0);}

@keyframes fade-in {
from {opacity:0;}
to {opacity: 1;}
}


/* =================================================
    フェードインアニメーションの指定
================================================= */
.scrollanime { opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
animation-name: fadeInDown;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes fadeInDown {
0% { opacity: 0;}
100% { opacity: 1; transform: translate(0);}
}

.updown {transform: translateY(-80px);}
.downup {transform: translateY(80px);}
 
.sect02 {overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right { transform: translateX(80px);}
.slide-left { transform: translateX(-80px);}



/* __________________________________________________
   header
__________________________________________________ */
header { width: 100%; position: relative;}

.mv { width: 100%; height: 500px; background-position: 50% 50%;}
.mv .inner { width: 100%; max-width: 1080px; height: 100%; margin: 0 auto; position: relative;}
.mv .inner h1 { font-size: 3.6rem; color: #00428b; text-align: center; border: 3px solid #6ac7e2; background-color: rgba(255, 255, 255, 0.8); padding: 0.3em .8em; line-height: 1.4; position: relative;}
.mv .inner h1:after { content: ""; width: 100%; height: 100%;
background-image: radial-gradient(#4c9ac0 8%, transparent 16%), radial-gradient(#4c9ac0 8%, transparent 16%);
background-position: 0 0, 7px 7px;
background-size: 12px 12px;
background-repeat: repeat;
position: absolute;
top: -10px;
left: 15px;
z-index: -1;
}


@media screen and (max-width: 768px){
.mv .inner { max-width: 100%; height: 100%;}
}

@media screen and (max-width: 580px){
.mv { height: 350px;}
.mv .inner { max-width: 100%;}
.mv .inner h1 { font-size: 2.4rem;}
}


/*
gn
*/
.gNav { display: flex; justify-content: center; width: 100%; height: 90px; background: rgba(255, 255, 255, 0.5); position: fixed; top: 0; left: 0; z-index: 3;}
.gNav .inner { display: flex; align-items: center; width: 1080px; height: 100%; margin: 0 auto; padding: 0;}
.gNav .inner a.logo { width: 460px; height: 63px;flex-grow: 1;}
.gNav .inner a.logo img { width: 460px; height: 63px;}
.gNav .inner a.logo:hover img { opacity: .7; transition: .3s;}
.gNav .inner .contact { display: flex; align-items: center; flex-direction: column; width: 90px; height: 100%; background: #6ac7e2; transition: .2s;}
.gNav .inner .contact img { width: 50px; height: 50px; margin-top: 10px;}
.gNav .inner .contact span { font-size: 1.4rem; color: #fff;}
.menuTrigger { display: flex; align-items: center; flex-direction: column; width: 90px; height: 90px; background: #00428b; cursor: pointer; transition: .2s;}
.gNav .inner .contact:hover, .menuTrigger:hover { opacity: .6; transition: .3s;}
.menuIcon { width: 50px;  height: 40px; margin: 20px 0 0; position: relative;}
.menuIcon > div { position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: .3s;}
.menuIcon > div:nth-of-type(1) { top: 0;}
.menuIcon > div:nth-of-type(2) { top: 11px;}
.menuIcon > div:nth-of-type(3) { top: 22px;}

.menuBg { width: 100vw; height: 100vh; overflow-y: scroll; background: #00428b; padding: 0; position: absolute; top: 0; left: 0; z-index: 50;}
.menuArea { max-width: 1080px; padding: 60px; margin: 0 auto; position: relative;}
.menuTrigger.open { background: #fff; width: 60px; height: 60px; position: absolute; top: 40px; right: 20px;}
.menuTrigger.open .menuIcon { content: ""; display: block; width: 60px; height: 60px; margin: 10px 0;}
.menuTrigger.open .menuIcon > div { background: #00428b;}
.menuTrigger.open .menuIcon > div:nth-of-type(1) { top: 20px;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg); transition: .3s;}
.menuTrigger.open .menuIcon > div:nth-of-type(2) { top: 20px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg); transition: .3s;}
.menuTrigger span { font-size: 1.4rem; color: #fff;}
.menuTrigger.open span { display: none;}

.menuArea nav { width: 100%; padding: 50px 0 0;}
.menuArea nav ul.pageLink { display: block; width: 60%; margin: 0 auto 50px; list-style: none;}
.menuArea nav ul.pageLink li { font-size: 2.4rem; font-weight: 700; line-height: 1.4; margin-bottom: 25px;}
.menuArea nav ul.pageLink li a { display: flex; align-items: center; color: #fff; transition: .2s;}
.menuArea nav ul.pageLink li a:before { content: ""; width: 24px; height: 24px; background: url(../images/share/icon_arrow_white.svg) 0 0; margin-right: 5px;}
.menuArea nav ul.pageLink li a:hover { padding-left: 10px; transition: .3s;}

.menuArea nav dl { width: 100%; background: #4a7db8; padding: 30px 0; margin-bottom: 50px;}
.menuArea nav dt { text-align: center; color: #fff; font-size: 2.4rem; margin-bottom: 15px; font-weight: 700;}
.menuArea nav dd ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.menuArea nav dd ul li { list-style: none; margin: 0 10px 20px 0;}
.menuArea nav dd ul li:last-of-type { margin-right: 0;}
.menuArea nav dd ul li a { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100px; height: 100px; background: #fff; border: 3px solid #00428b;}
.menuArea nav dd ul li a:hover { opacity: .7; transition: .3s;}
.menuArea nav dd ul li a img { width: 60px; height: 60px;}
.menuArea nav dd ul li a p { font-size: 1.1rem; line-height: 1.2; color: #00428b; font-weight: 700; margin: 0;}

.menuArea nav ul.otherLink { display: flex; flex-wrap: wrap; justify-content: space-between; width: 70%; margin: 0 auto 50px; list-style: none;}
.menuArea nav ul.otherLink li { width: 45%; border-bottom: 2px solid #fff; font-size: 1.6rem; font-weight: 700; line-height: 1.4; padding-bottom: 20px; margin-bottom: 25px;}
.menuArea nav ul.otherLink li a { color: #fff;}

.menuBg { display: none;}
.fixed { position: fixed;}

@media screen and (max-width: 1081px){
.gNav .inner { width: 100%; padding: 0 30px;}
}


@media screen and (max-width: 1040px){
.menuArea { max-width: 100%; padding: 30px;}
.menuArea nav ul.pageLink,
.menuArea nav ul.otherLink { width: 100%;}
}

@media screen and (max-width: 790px){
.gNav { height: 70px;}
.gNav .inner { width: 100%; height: 100%; padding: 0 0 0 10px;}
.gNav .inner a.logo,
.gNav .inner a.logo img { width: 292px; height: 40px;}
.gNav .inner .contact { width: 70px; height: 100%;}
.gNav .inner .contact img { width: 30px; height: 30px; margin-top: 10px;}
.gNav .inner .contact span { font-size: 1rem;}
.menuTrigger { width: 70px; height: 70px;}
.menuIcon { width: 30px;  height: 30px; margin: 10px 0 0; position: relative;}
.menuIcon > div:nth-of-type(1) { top: 0;}
.menuIcon > div:nth-of-type(2) { top: 8px;}
.menuIcon > div:nth-of-type(3) { top: 16px;}
.menuTrigger span { font-size: 1rem;}
.menuArea nav ul.pageLink li { font-size: 2rem;}
}

@media screen and (max-width: 540px){
.menuArea { padding-top: 100px;}
.menuArea nav ul.pageLink li { font-size: 1.5rem;}
.menuArea nav dd ul li:first-of-type { margin-left: 10px;}
.menuArea nav dd ul li:last-of-type { margin-right: 10px;}
}

.menuArea .snsArea { display: flex; align-items: center; justify-content: center; margin: 50px 0;}
.menuArea .snsArea a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 10px;}
.menuArea .snsArea a img { width: 70%;}

/* __________________________________________________
   footer
__________________________________________________ */
footer { width: 100%; height: auto; padding: 30px 0 0;
background-image: 
  radial-gradient(rgb(252, 252, 252) 14.8%, transparent 17.6%),
  radial-gradient(rgb(252, 252, 252) 14.8%, transparent 17.6%);
background-position: 0px 0px, 16px 16px;
background-size: 32px 32px;
background-color: rgb(245, 245, 245);
background-repeat: repeat;
}

footer .inner { max-width: 1080px; padding: 0; margin: 0 auto;}

footer ul.textLink { display: flex; flex-wrap: wrap; list-style: none; font-weight: 500; margin-bottom: 40px;}
footer ul.textLink li { font-size: 1.4rem; color:#00428b; line-height: 1.4; margin-bottom: 15px;}
footer ul.textLink li a { display: flex; align-items: center; color:#00428b; transition: .2s; margin-right: 20px;}
footer ul.textLink li a:before { content: ""; width: 14px; height: 14px; background: url(../images/share/icon_arrow_blue.svg) 0 0; margin-right: 5px;}

footer .bottomArea { display: flex; align-items: center; justify-content: space-between; font-weight: 500; margin-bottom: 40px;}
footer .bottomArea img { width: 235px; height: 51px;}
footer .bottomArea address { font-size: 1.4rem; line-height: 1.4; font-style: normal; flex-grow: 1; padding-left: 20px;}

footer .snsArea { display: flex; align-items: center; justify-content: center; margin: 0;}
footer .snsArea a { display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; margin: 0 5px;}
footer .snsArea a img { width: 100%;}

footer .copyright { text-align: center; font-size: .9rem; color: #00428b; padding-bottom: 10px;}

@media screen and (max-width: 1080px){
footer .inner { max-width: 100%; padding: 0 30px;}
}

@media screen and (max-width: 800px){
footer .inner { max-width: 100%; padding: 0 30px;}
footer ul.textLink { margin-bottom: 30px;}
footer .bottomArea { flex-direction: column;}
footer .bottomArea img { margin-bottom: 20px;}
footer .bottomArea address { margin-bottom: 40px;}
footer .snsArea { justify-content: center;}
}

@media screen and (max-width: 768px){
footer .inner { max-width: 100%; padding: 0 30px;}
footer .snsArea { width: 60%;}
footer .other { font-size: 1.2rem; margin-bottom: 30px; line-height: 1.4;}

}

@media screen and (max-width: 580px){
footer .inner { max-width: 100%; padding: 0 20px;}
}



/*
Go to top
*/
a.bt_pageTop {display: block; width: 70px; height: 70px; background: url(../images/share/gototop.svg); background-size: 100%; position: fixed; right: 30px; bottom: -50px; z-index: 100;overflow: hidden; opacity: 0; transition: 1s; text-indent: -9876em;}
a.bt_pageTop.fixed { display: block; position: fixed; right: 30px; bottom: 30px; opacity: 1; transition: 1s;}


/* __________________________________________________
   main
__________________________________________________ */
main { width: 100%; padding: 15px 0 50px;}
main section { display: block; width: 100%;}
main section .inner { max-width: 1080px; padding: 50px 0; margin: 0 auto; position: relative;}

.breadcrumbArea { margin-bottom: 20px;}
main .breadcrumbArea .inner { padding: 0 0;}
.breadcrumb { margin: 0; padding: 0; list-style: none;}
.breadcrumb li { display: inline; list-style: none; font-size: 1.2rem; color: #00428b; font-weight: 500}
.breadcrumb li:after { content: '/'; padding: 0 0.5em;}
.breadcrumb li:last-child:after { content: '';}
.breadcrumb li a { text-decoration: none; color: #00428b;}
.breadcrumb li a:hover { text-decoration: underline;}

@media screen and (max-width: 1081px){
main { width: 100%; padding: 15px 0 50px;}
main section .inner { max-width: 100%; padding: 30px;}
main .breadcrumbArea .inner { padding: 0 30px;}
}


@media screen and (max-width: 768px){
main { width: 100%; padding: 15px 0 50px;}
main section .inner { max-width: 100%; padding: 30px;}
main .breadcrumbArea .inner { padding: 0 30px;}
}

@media screen and (max-width: 580px){
main section .inner { padding: 20px;}
main .breadcrumbArea .inner { padding: 0 20px;}
}

.bluedot { width: 100%;
background-color : #f0f9fc;
background-image : radial-gradient(#fafdfe 18%, transparent 21%), radial-gradient(#fafdfe 18%, transparent 21%);
background-position: 0 0, 11px 11px;
background-size : 22px 22px;
background-repeat: repeat;
}

.numBox h2 { position: relative;}
.numBox h2:before { content: attr(data-number); display: block; color: #80c8e2; font-size: 4.8rem; padding: .4em 0;}
.numBox h2:after { content: ""; width: 80px; height: 1px; background-color: #80c8e2;	position: absolute; top: 0; left: 0;}

.numBox { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 50px;}
.numBox .contents { width: 50%;}
.numBox .contents > p { line-height: 2;}
.numBox > img { width: 48%;}

@media screen and (max-width: 768px){
.numBox { flex-direction: column; margin-bottom: 30px;}
.numBox .contents,
.numBox > img { width: 100%; margin-bottom: 15px;}
}


.leadArea .inner { font-size: 2rem; text-align: center; line-height: 2; font-weight: 500;}

@media screen and (max-width: 1010px){
.leadArea .inner br { display: none;}
.leadArea .inner { text-align: left;}
}

@media screen and (max-width: 580px){
.leadArea .inner { font-size: 1.6rem;}
}



/* __________________________________________________
   top
__________________________________________________ */
.top .mv { height: 1080px; background: url(../images/top/top_img.jpg) center center no-repeat;}
.catchcopy_01 { width: 480px; height: 179px; position: absolute; top: 300px; right: 0;}
.catchcopy_02 { width: 57px; height: 390px; position: absolute; top: 500px; right: 200px;}

@media screen and (max-width: 930px){
.catchcopy_01 { width: 400px; height: 149px; position: absolute; top: 300px; right: 0;}
.catchcopy_02 { position: absolute; right: 150px;}
}

@media screen and (max-width: 768px){
.top .mv { height: calc(100vw * 1.533); background: url(../images/top/top_img_sp.jpg) 0 0 no-repeat; background-size: cover; margin-bottom: 50px;}
.mv .inner { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; margin: 0 auto; padding-top: calc(100vw * .2); position: static;}
.catchcopy_01 { width: calc(100vw * .8); height: calc(100vw * .3725); position: static;}
.catchcopy_02 { width: calc(100vw * .8); height: calc(100vw * .1333333); position: static;}
}

.top h1 {text-align: center; font-size: 3.6rem; color: #00428b; font-weight: 900; padding-bottom: 50px;}
.top h1:before { content: attr(data-en); display: block; color: #80c8e2; font-size: 1.8rem; font-weight: 500;}

.eventcalendar .table-wrap { overflow-x: hidden;}
.eventcalendar .mark { width: 80%; margin: 30px auto;}
.eventcalendar .mark ul { display: flex; flex-wrap: wrap; list-style: none;}
.eventcalendar .mark ul > li { display: flex; align-items: center; margin: 0 30px 30px 0;}
.eventcalendar .mark ul > li > span > img { width: 30px; height: 30px; margin-right: 8px;}
.eventcalendar .mark ul > li > span { font-weight: 500;}

@media screen and (max-width: 740px){
.eventcalendar .mark ul > li { margin: 0 30px 15px 0;}
}

@media screen and (max-width: 660px){
.eventcalendar .mark { width: 100%; margin: 20px auto;}
.eventcalendar .table-wrap { overflow-x: scroll; padding: 0 0 15px;}
}

@media screen and (max-width: 600px){
.top h1 { font-size: 3rem; margin-bottom: 20px;}
.eventcalendar .mark ul > li { font-size: 1.4rem; margin: 0 30px 15px 0;}
.eventcalendar .mark ul > li > span > img { width: 20px; height: 20px; margin-right: 3px;}

}


.admissioninfo { padding: 100px 0 200px; clip-path: polygon(0 200px, 100% 0, 100% calc(100% - 200px), 0 100%);}
.admissioninfo ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.admissioninfo ul li { list-style: none; margin: 0 5px 10px 5px;}
.admissioninfo ul li a { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 160px; height: 160px; background: #fff; border: 3px solid #00428b;}
.admissioninfo ul li a:hover { opacity: .7; transition: .3s;}
.admissioninfo ul li a img { width: 90px; height: 90px;}
.admissioninfo ul li a p { font-size: 1.7rem; line-height: 1.2; color: #00428b; font-weight: 700; margin: 0;}

@media screen and (max-width: 560px){
.admissioninfo { padding: 0 0 50px; clip-path: none; margin-bottom: 50px;}
.admissioninfo ul li a { width: 130px; height: 130px;}
.admissioninfo ul li a img { width: 80px; height: 80px;}
}


.aboutus .contBg {
background: rgb(0,66,139);
background: linear-gradient(356deg, rgba(0,66,139,1) 0%, rgba(106,199,226,1) 100%);
}
.aboutus .cont { width: 100%; height: 500px; position: relative;}
.aboutus .cont img { width: 750px;}
.aboutus .cont dl { width: 520px; background: #fff; padding: 20px; position: absolute; bottom: 0;}
.aboutus .cont:nth-child(even) img { position: absolute; right: 0;}
.aboutus .cont:nth-child(odd) dl { right: 0;}
.aboutus .cont dt { font-size: 2.4rem; font-weight: 700; margin-bottom: 15px;}
.aboutus .cont dd { line-height: 2;}
.aboutus .cont dd a { display: block; width: 250px; color: #fff; font-size: 1.8rem; font-weight: 300; letter-spacing: .2em; text-decoration: none; padding: 10px 20px; border-radius: 6px; margin: 20px 0 0 auto; position: relative;
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 200% auto;
background-image: linear-gradient(
  to right,
  #80c8e2 0%,
  #80c8e2 50%,
  #00428b 50%,
  #00428b 100%
);
box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
transition: background-position ease 0.4s;
}
.aboutus .cont dd a:before,
.aboutus .cont dd a:after { content: ""; height: 1px; background: #fff; position: absolute; top: 50%; right: 22px;}
.aboutus .cont dd a:before { width: 30px; transform: translateY(-50%);}
.aboutus .cont dd a:after { width: 8px; transform: translateY(-50%) rotate(45deg); transform-origin: right center;}
.aboutus .cont dd a:hover { background-position: 0 0;}

@media screen and (max-width: 560px){
.aboutus {
background: rgb(0,66,139);
background: linear-gradient(356deg, rgba(0,66,139,1) 0%, rgba(106,199,226,1) 100%);
}
.aboutus .cont { width: 100%; height: 100%; position: static;}
.aboutus .cont dl,
.aboutus .cont:nth-child(odd) dl,
.aboutus .cont img,
.aboutus .cont:nth-child(even) img  { width: 100%; position: static;}
}

.voice h2 { text-align: center; font-size: 2.4rem; font-weight: 900; margin-bottom: 30px;}
.voice .cont { width: 100%; display: flex; justify-content: space-between; margin-bottom: 30px;}
.voice .cont > a { width: 30%; margin: 0 0 3%; transition: .2s;}
.voice .cont > a:hover { transform: scale(1.1); transition: .2s;}
.voice .cont .card { width: 100%;}
.voice .cont .card .imgArea { position: relative;}
.voice .cont .card .imgArea img { width: 100%;}
.voice .cont .card .imgArea span { font-size: 1.4rem; font-weight: 700; color: #fff; padding: .5rem 1rem; position: absolute; top: 20px; left: 0;}
.voice .cont .card dl { padding: 10px; color: #fff;}
.voice .cont .card dt { font-size: 1.2rem; font-weight: 300; margin-bottom: 5px;}
.voice .cont .card dd { font-weight: 700; line-height: 1.4;}

.voice .physiotherapy h2 { color: #f0831e;}
.voice .physiotherapy .cont .card .imgArea span,
.voice .physiotherapy .card dl { background: #f0831e;}

.voice .occupationaltherapy h2 { color: #74a455;}
.voice .occupationaltherapy .cont .card .imgArea span,
.voice .occupationaltherapy .card dl { background: #74a455;}

@media screen and (max-width: 840px){
.voice .cont .card dt { font-size: 1rem;}
}

@media screen and (max-width: 768px){
.voice .cont > a { width: 32%; margin: 0 0 2%;}
.voice .cont .card .imgArea span { font-size: 1.2rem; font-weight: 500; top: 0;}
}

@media screen and (max-width: 580px){
.voice .cont { flex-direction: column;}
.voice .cont > a { width: 100%; margin: 0 0 5%;}
.voice .cont .card .imgArea span { font-size: 1.4rem; font-weight: 500; top: 20px;}
.voice .cont .card dt { font-size: 1.4rem;}
}


/* __________________________________________________
   choose
__________________________________________________ */
.choose .mv { background: url(../images/choose/page_img.jpg) center center no-repeat;}
.choose .mv .pageTitle { position: absolute; bottom: 180px; right: 50px; z-index: 0;}

@media screen and (max-width: 768px){
.choose .mv .inner { display: flex; align-items: center; justify-content: center; background: url(../images/choose/page_img_sp.jpg) center center no-repeat; background-size: cover;}
.choose .mv .pageTitle { position: static;}
}

.choose h2 { font-size: 3.6rem;}
.choose .title { display: flex; align-items: end; margin-bottom: 15px;}
.choose .title img { width: 65px; height: 65px; margin-left: 10px;}

@media screen and (max-width: 800px){
.choose h2 { font-size: 2.8rem;}
}




/* __________________________________________________
   useful
__________________________________________________ */
.useful .mv { background: url(../images/useful/page_img.jpg) center center no-repeat;}
.useful .mv .pageTitle { position: absolute; bottom: 180px; left: 150px; z-index: 0;}
.useful .mv .pageTitle br { display: none;}

@media screen and (max-width: 810px){
.useful .mv .inner { display: flex; align-items: center; justify-content: center; background: url(../images/useful/page_img.jpg) center center no-repeat;}
.useful .mv .pageTitle { position: static;}
.useful .mv .pageTitle br { display: none;}
}

@media screen and (max-width: 768px){
.useful .mv .inner { display: flex; align-items: center; justify-content: center; background: url(../images/useful/page_img.jpg) 30% center no-repeat; background-size: cover;}
.useful .mv .pageTitle br { display: block;}
}

.curriculum { display: flex; justify-content: space-between;}
.curriculumCont { width: 48%;}
.curriculumCont .title,
.curriculumCont .courseName,
.curriculumCont .title h2 { display: flex; align-items: center; justify-content: center;}

.curriculumCont .title img { width: 65px; height: 65px;}
.curriculumCont .title h2 { font-size: 2.4rem; color: #00428b; font-weight: 300; margin: 0 10px;}
.curriculumCont .title h2:before,
.curriculumCont .title h2:after { content: ""; width: 35px; height: 1px; background-color: #00428b;}
.curriculumCont .title h2:before { margin-right: 20px;}
.curriculumCont .title h2:after { margin-left: 20px;}

.curriculumCont .courseName { margin-bottom: 20px;}
.curriculumCont .courseName span { background: #80c8e2; font-size: 2rem; font-weight: 700; color: #fff; padding: .2em 1em; margin: 0 5px;}
.curriculumCont p { line-height: 2;}

.conclusion { margin: 30px 0;}
.conclusion .title { text-align: center; margin-bottom: 30px;}
.conclusion .title img { display: inline; width: 135px; height: 85px;}
.conclusion h2 { display: inline; font-size: 3.6rem; font-weight: 700; color: #00428b; line-height: 1.4; text-align: center;
background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgb(252, 235, 81) 70%);
}
.conclusion h2 br { display: none;}
.conclusion > p { font-size: 2rem; font-weight: 500; text-align: center; line-height: 2;}

@media screen and (max-width: 880px){
.conclusion h2 br { display: block;}
}

@media screen and (max-width: 820px){
.curriculum { flex-direction: column;}
.curriculumCont { width: 100%; margin-bottom: 50px;}
}

@media screen and (max-width: 620px){
.conclusion { margin: 0 0 30px;}
.conclusion .title { margin-bottom: 15px;}
.conclusion h2 { font-size: 3rem;}
.conclusion > p { font-size: 1.8rem; text-align: left;}
.conclusion > p > br { display: none;}
}

@media screen and (max-width: 430px){
.conclusion h2 { font-size: 2.4rem;}
}

@media screen and (max-width: 400px){
.curriculumCont .title h2 { font-size: 2rem;}
.curriculumCont .title img { width: 50px; height: 50px;}
.curriculumCont .courseName { margin-bottom: 10px;}
.curriculumCont .courseName span { font-size: 1.8rem;}
.curriculumCont .title h2:before { margin-right: 10px;}
.curriculumCont .title h2:after { margin-left: 10px;}
}

.schoolmate { background: #eee;}

.schoolmate h2,
.advice h2 {
font-weight: 700; border-bottom: 3px solid #80c8e2; padding: 0.3em; margin-bottom: 10px; position: relative;}
.schoolmate h2:before,
.advice h2:before
{ content: ""; width: 20px; height: 3px; position: absolute; left: 30px; bottom: -3px;}
.schoolmate h2:before { background-color: #eee; }
.advice h2:before { background-color: #fff;}
.schoolmate h2:after,
.advice h2:after
{ content: ""; width: 20px; height: 3px; background-color: #80c8e2; transform: rotate(50deg); position: absolute; left: 25px; bottom: -10px;}

.blackBoard { width: 80%; color: #fff; background: #202020; border: 7px solid #b2771f; border-radius: 3px; box-shadow: 0 0 5px #333; margin: 2em auto; padding: 40px; position: relative;}
.blackBoard:before,
.blackBoard:after { content: ""; position: absolute; bottom: 0;} 
.blackBoard:before { width: 20px; right: 10px; border: solid 3px #ff42a0; border-radius: 3px 2px 0 2px;}
.blackBoard:after { width: 15px;  right: 45px; border: solid 3px #fff; border-radius: 8px 5px 2px 5px;}
.blackBoard ul { list-style: none;}
.blackBoard li { display: flex; margin-bottom: 10px; font-weight: 700;}
.blackBoard li:before { content: "●"; margin-right: 8px;}
.schoolmate p { line-height: 2;}

.adviceList { display: flex; align-items: flex-start; justify-content: space-between;}
.adviceList ul { width: 50%; list-style: none; padding: 50px 0;}
.adviceList img { width: 48%;}
.adviceList ul li { display: flex; font-size: 2rem; font-weight: 500; margin-bottom: 20px;}
.adviceList ul li:before { content: ""; width: 25px; height: 25px; background: url(../images/share/icon_check.svg) 0 0 no-repeat; background-size: 100%; margin-right: 5px;}

@media screen and (max-width: 840px){
.blackBoard { width: 100%;}
}

@media screen and (max-width: 750px){
.adviceList ul { width: 60%; padding: 50px 0;}
.adviceList img { width: 38%;}
}

@media screen and (max-width: 620px){
.adviceList { flex-direction: column;}
.adviceList ul { width: 100%; padding: 30px 0;}
.adviceList img { width: 100%;}
.adviceList ul li { font-size: 1.8rem;}

}

@media screen and (max-width: 580px){
.blackBoard { padding: 20px;}
}

/* __________________________________________________
   feature
__________________________________________________ */
.feature .mv { background: url(../images/feature/page_img.jpg) center center no-repeat; background-size: cover;}
.feature .mv .pageTitle { position: absolute; bottom: 180px; left: 50px; z-index: 0;}

.feature .numBox .contents a { display: block; width: 330px; color: #fff; font-size: 1.8rem; font-weight: 300; letter-spacing: .2em; text-decoration: none; padding: 10px 20px; border-radius: 6px; margin: 20px 0 0 auto; position: relative;
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 200% auto;
background-image: linear-gradient(
  to right,
  #80c8e2 0%,
  #80c8e2 50%,
  #00428b 50%,
  #00428b 100%
);
box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
transition: background-position ease 0.4s;
}
.feature .numBox .contents a:before,
.feature .numBox .contents a:after { content: ""; height: 1px; background: #fff; position: absolute; top: 50%; right: 22px;}
.feature .numBox .contents a:before { width: 30px; transform: translateY(-50%);}
.feature .numBox .contents a:after { width: 8px; transform: translateY(-50%) rotate(45deg); transform-origin: right center;}
.feature .numBox .contents a:hover { background-position: 0 0;}

@media screen and (max-width: 580px){
.feature .mv .inner { display: flex; align-items: center; justify-content: center; background: url(../images/feature/page_img_sp.jpg) center center no-repeat; background-size: cover;}
.feature .mv .pageTitle { position: static;}
}
.feature .numBox .contents a span { font-size: 60%; letter-spacing: 0;}
.feature h2 { font-size: 2.8rem; margin-bottom: 15px;}

.feature .numBox .contents ol { list-style-type: none; padding: 1em; border: 2px solid #80c8e2; counter-reset: li; font-size: 110%; font-weight: 500; margin: 15px 5px 15px 0;}
.feature .numBox .contents li { display: flex; padding: .3em;}
.feature .numBox .contents li:before { content: counter(li); counter-increment: li; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background-color: #80c8e2; border-radius: 50%; font-size: .8em; color: #fff; margin-right: 8px;}

@media screen and (max-width: 967px){
.feature h2 { font-size: 2.4rem;}
}
@media screen and (max-width: 840px){
.feature h2 { font-size: 2.2rem;}
.feature .numBox .contents a { margin: 20px auto;}
}

/* __________________________________________________
   voice
__________________________________________________ */

.voice .mv { background: url(../images/voice/page_img.jpg) center center no-repeat;}
.voice .mv .pageTitle { width: 500px; height: 70px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 0;}

@media screen and (max-width: 768px){
.voice .mv .inner { display: flex; align-items: center; justify-content: center; background: url(../images/voice/page_img_sp.jpg) center center no-repeat; background-size: cover;}
.voice .mv .pageTitle { width: 300px; position: static;}
}

.voice.list h2 { text-align: center; font-size: 2.4rem; font-weight: 900; margin-bottom: 30px;}
.voice.list .cont { width: 100%; display: flex; justify-content: space-between; margin-bottom: 30px;}
.voice.list .cont > a { width: 30%; margin: 0 0 3%; transition: .2s;}
.voice.list .cont > a:hover { transform: scale(1.1); transition: .2s;}
.voice.list .cont .card { width: 100%;}
.voice.list .cont .card .imgArea { position: relative;}
.voice.list .cont .card .imgArea img { width: 100%;}
.voice.list .cont .card .imgArea span { font-size: 1.4rem; font-weight: 700; color: #fff; padding: .5rem 1rem; position: absolute; top: 20px; left: 0;}
.voice.list .cont .card dl { padding: 10px; color: #fff;}
.voice.list .cont .card dt { font-size: 1.2rem; font-weight: 300; margin-bottom: 5px;}
.voice.list .cont .card dd { font-weight: 700; line-height: 1.4;}
.voice.list
.voice.list .physiotherapy h2 { color: #f0831e;}
.voice.list .physiotherapy .cont .card .imgArea span,
.voice.list .physiotherapy .card dl { background: #f0831e;}
.voice.list
.voice.list .occupationaltherapy h2 { color: #74a455;}
.voice.list .occupationaltherapy .cont .card .imgArea span,
.voice.list .occupationaltherapy .card dl { background: #74a455;}

@media screen and (max-width: 840px){
.voice.list .cont .card dt { font-size: 1rem;}
}

@media screen and (max-width: 768px){
.voice.list .cont > a { width: 32%; margin: 0 0 2%;}
.voice.list .cont .card .imgArea span { font-size: 1.2rem; font-weight: 500; top: 0;}
}

@media screen and (max-width: 580px){
.voice.list .cont { flex-direction: column;}
.voice.list .cont > a { width: 100%; margin: 0 0 5%;}
.voice.list .cont .card .imgArea span { font-size: 1.4rem; font-weight: 500; top: 20px;}
.voice.list .cont .card dt { font-size: 1.4rem;}
}

/*
temp
*/
.voice.temp .title .inner { padding: 30px 0 0 ;}
.voice.temp h2 { text-align: center; font-size: 2.4rem; font-weight: 900; margin-bottom: 30px;}

.voice.temp .leadArea .inner { display: flex; align-items: center; color: #fff; padding: 15px 135px;}
.voice.temp .leadArea .inner > dl { text-align: left;}
.voice.temp .leadArea .inner > dl > dt { font-size: 1.6rem; font-weight: 500; margin-bottom: 20px;}
.voice.temp .leadArea .inner > dl > dt > span { display: block; font-size: 1.4rem; font-weight: 300; padding: 10px 0}
.voice.temp .leadArea .inner > dl > dd { font-size: 1.8rem; line-height: 2;}
.voice.temp .leadArea .inner > img { width: 330px; margin-left: 50px;}

.voice.temp .qaArea .inner { padding: 50px 135px;}
.voice.temp .qaArea dl { margin-bottom: 50px;}
.voice.temp .qaArea dt { display: flex; align-items: center; font-size: 2.4rem; margin-bottom: 30px;}
.voice.temp .qaArea dd { display: flex; font-size: 1.8rem; line-height: 2;}
.voice.temp .qaArea dd p { line-height: 2;}
.voice.temp .qaArea dt > img,
.voice.temp .qaArea dd > img { width: 70px; height: 70px; margin-right: 20px;}

.voice.temp .message { width: 90%; font-weight: 500; line-height: 2;
background-color: #e7e1ce;
box-shadow: inset 0 0 40px rgb(211, 195, 150), 0 2px 2px #ccc;
padding: 35px 20px 15px; margin: 80px auto 0; position:relative;}

.voice.temp .message strong  { font-size: 1.8rem; font-weight: 700; color: #555;position: absolute; top: -15px; left: -15px; padding: 4px 20px;
background-color: rgba(255,255,255,.4); 
border-left: 2px dotted rgba(0,0,0,.1);
border-right: 2px dotted rgba(0,0,0,.1);
box-shadow: 0 0 5px rgba(0,0,0,0.2); 
transform: rotate(-5deg);
}

@media screen and (max-width: 930px){
.voice.temp .leadArea .inner,
.voice.temp .qaArea .inner { padding: 40px 30px;}
}

@media screen and (max-width: 700px){
.voice.temp .leadArea .inner { flex-direction: column;}
.voice.temp .leadArea .inner > img { width: 80%; margin-left: 0;}
.voice.temp .leadArea .inner > dl { margin-bottom: 30px;}
.voice.temp .leadArea .inner > dl > dt { margin-bottom: 5px;}
}

@media screen and (max-width: 530px){
.voice.temp .title .inner { padding: 20px 0 0 ;}
.voice.temp .qaArea dt > img,
.voice.temp .qaArea dd > img { width: 50px; height: 50px; margin-right: 20px;}
.voice.temp .message { width: 100%;}
}

@media screen and (max-width: 450px){
.voice.temp .leadArea .inner,
.voice.temp .qaArea .inner { padding: 30px 20px;}
.voice.temp .qaArea dt > img,
.voice.temp .qaArea dd > img { width: 35px; height: 35px; margin-right: 10px;}
.voice.temp .qaArea dt { font-size: 2rem; margin-bottom: 15px;}
.voice.temp .qaArea dd { font-size: 1.6rem;}
}

/*
physiotherapy
*/
.voice.temp.physiotherapy h2 { color: #f0831e;}
.voice.temp.physiotherapy .leadArea { width: 100%;
background-color : #f0831e;
background-image : radial-gradient(#fd9431 18%, transparent 21%), radial-gradient(#fd9431 18%, transparent 21%);
background-position: 0 0, 11px 11px;
background-size : 22px 22px;
background-repeat: repeat;
}
.voice.temp.physiotherapy .qaArea dt { color: #f0831e;}


/*
occupationaltherapy
*/
.voice.temp.occupationaltherapy h2 { color: #74a455;}
.voice.temp.occupationaltherapy .leadArea { width: 100%;
background-color : #74a455;
background-image : radial-gradient(#81a568 18%, transparent 21%), radial-gradient(#81a568 18%, transparent 21%);
background-position: 0 0, 11px 11px;
background-size : 22px 22px;
background-repeat: repeat;
}
.voice.temp.occupationaltherapy .qaArea dt { color: #74a455;}