@charset "UTF-8";
@font-face { font-family: YuGothicM; src: local(Yu Gothic Medium); }

* { margin: 0; padding: 0; }
body { background: #fceeeb; color: #333; font-family: Meiryo,'メイリオ','M PLUS Rounded 1c',YuGothic,YuGothicM,'ＭＳ Ｐゴシック',sans-serif; font-size: 110%; line-height: 1.6; -webkit-text-size-adjust: 100%; }
img { border: 0; vertical-align: top; -ms-interpolation-mode: bicubic; }
a { outline: none; }
a:link { color: #333; text-decoration: underline; }
a:visited { color: #333; text-decoration: underline; }
a:hover { color: #333; text-decoration: none; transition: all 0.3s ease; }
a:hover img { opacity: 0.8; transition: all 0.3s ease; }
button { background: transparent; border: none; appearance: none; cursor: pointer; outline: none; }
.clearfix:after { content: ''; display: block; clear: both; }

@media screen and (max-width: 767px) {
body { font-size: 95%; }
}

/* --------------------------------------------------
	LOGO
-------------------------------------------------- */

div.logo { display: none; }

@media screen and (max-width: 767px) {
div.logo { padding: 10px 0 15px; text-align: center; display: block; }
div.logo img { width: 150px; height: auto; }
}

/* --------------------------------------------------
	GLOBAL NAVIGATION
--------------------------------------------------*/

nav#globalNavi { background: #fff; text-align: center; }
nav#globalNavi ul { margin: 0 auto; width: 1200px; list-style: none; display: flex; justify-content: space-between; }
nav#globalNavi li { padding: 24px 0; font-size: 100%; line-height: 1.1; display: inline-block; position: relative; }
nav#globalNavi li.active::after { content: ''; margin: 5px auto 0; width: 60px; max-width: 100%; height: 2px; background: #ef9295; display: block; position: absolute; left: 0; right: 0; }
nav#globalNavi li:hover::after { content: ''; margin: 5px auto 0; width: 60px; max-width: 100%; height: 2px; background: #ef9295; display: block; position: absolute; left: 0; right: 0; }
nav#globalNavi li:nth-child(1):hover::after { display: none; }
nav#globalNavi a { padding-top: 6px; text-decoration: none; display: block; }
nav#globalNavi a:hover { text-decoration: none; }
nav#globalNavi a::after { margin: 5px 0 0; color: #ef9295; font-size: 80%; line-height: 1; display: block; }
nav#globalNavi a.navi01 { padding-top: 0; }
nav#globalNavi a.navi01 img { width: 140px; height: auto; }
nav#globalNavi a.navi02::after { content: 'About Us'; }
nav#globalNavi a.navi03::after { content: 'Features'; }
nav#globalNavi a.navi04::after { content: 'Recruit'; }
nav#globalNavi a.navi05::after { content: 'Medical Personnel'; }
nav#globalNavi a.navi06::after { content: 'Access'; }
nav#globalNavi li.contact a { padding: 10px 0; width: 196px; background: #ef9295; border: solid 1px #ef9295; border-radius: 100px; color: #fff; }
nav#globalNavi li.contact a:hover { background: #fff; color: #ef9295; }
nav#globalNavi li.contact a::after { margin: 0; }
nav#globalNavi li.contact:hover::after { display: none; }

@media screen and (max-width: 767px) {
nav#globalNavi { padding: 20px 0; width: 100%; display: none; position: absolute; top: 0; z-index: 1000; }
nav#globalNavi ul { width: auto; display: block; }
nav#globalNavi li { padding: 0; border-bottom: solid 1px #eee; display: list-item; }
nav#globalNavi li.active::after { display: none; }
nav#globalNavi li:hover::after { display: none; }
nav#globalNavi a { padding: 12px 0; }
nav#globalNavi a::after { margin: 3px 0 0; }
nav#globalNavi li.contact { padding: 12px 0; }
nav#globalNavi li.contact a { margin: 0 auto; padding: 8px 0; font-size: 95%; }
}

/* --------------------------------------------------
	TITLE
--------------------------------------------------*/

div#title { height: 140px; display: flex; justify-content: center; align-items: center; }
div#title h1 { color: #4e3b2e; font-size: 160%; font-weight: normal; text-align: center; }
div#title h1::after { margin: 5px 0 0; color: #ef9295; font-size: 65%; line-height: 1; display: block; }

@media screen and (max-width: 767px) {
div#title h1 { font-size: 140%; text-shadow: #fff 1px 1px 10px, #fff -1px 1px 10px, #fff 1px -1px 10px, #fff -1px -1px 10px; }å
}

/* --------------------------------------------------
	PATH
--------------------------------------------------*/

div#path { margin: 20px auto; width: 1200px; color: #ef9295; font-size: 95%; }
div#path a { color: #ef9295; text-decoration: none; }
div#path a:hover { text-decoration: underline; }
div#path span { margin: 0 0.5em; }
div#path strong { font-weight: normal; }

@media screen and (max-width: 767px) {
div#path { margin: 15px 0; padding: 0 10px; width: auto; }
}

/* --------------------------------------------------
	MAIN / PAGE
--------------------------------------------------*/

main { margin: 0 auto; width: 1200px; display: block; }

div#page { margin-bottom: 20px; }
div#page h2 { margin: 3em auto 2em; color: #4e3b2e; font-size: 150%; font-weight: normal; text-align: center; }
div#page h2:first-of-type { margin: 1em auto 2em; }
div#page h2::before { margin: 0 0 5px; color: #ef9295; font-size: 60%; line-height: 1; display: block; }
div#page h2::after { content: ''; margin: 10px auto 40px; width: 70px; height: 2px; background: #ef9295; display: block; }
div#page h3 { margin: 1em 0; padding-left: 50px; background: url(../images/common/h3.png) 0 center no-repeat; font-size: 140%; font-weight: normal; }
div#page h4 { margin: 1em 0; color: #ef9295; font-size: 130%; font-weight: normal; }
div#page h5 {}
div#page h6 {}
div#page p { margin: 1em 0; }
div#page ul, div#page ol { margin: 1em 0 1em 1.5em; }
div#page ul.img3 { margin: 1.5em 0; width: 1250px; list-style: none; }
div#page ul.img3 li { margin: 0 50px 20px 0; width: 350px; text-align: center; float: left; }
div#page ul.img3 img { width: 350px; margin-bottom: 0.5em; }
div#page ul.img3 p { margin: 0; }
div#page dl.imgL, div#page dl.imgR { margin: 1.5em 0; display: flex; }
div#page dl.imgL dt { padding-right: 1.5em; }
div#page dl.imgR { flex-direction: row-reverse; }
div#page dl.imgR dt { padding-left: 1.5em; }
div#page dl.imgR dd { width: 100%; }
div#page dl.imgL p, div#page dl.imgR p { margin: 1em 0; }
div#page table { margin: 1.5em 0; width: 100%; border-collapse: collapse; }
div#page th { padding: 1em 2em; background: #f9d8d9; border: solid 1px #ef9295; font-weight: normal; }
div#page td { padding: 1em 2em; background: #fff; border: solid 1px #ef9295; }
div#page td ul, div#page td ol { margin: 0 0 0 1.5em; }

/* 確認用 */
/*
div#page dl.imgR img, div#page dl.imgL img { min-width: 300px; min-height: 200px; background: #ccc; }
div#page ul.img3 img { height: 260px; background: #ccc; display: block; }
*/

@media screen and (max-width: 767px) {
main { padding: 0 10px 20px; width: auto; }
div#page h2 { font-size: 140%; }
div#page h3 { padding-left: 40px; font-size: 130%; }
div#page h4 { font-size: 120%; }
div#page dl.imgL, div#page dl.imgR { display: block; }
div#page dl.imgL dt, div#page dl.imgR dt { margin: 0 0 1em; padding: 0; text-align: center; }
div#page dl.imgL dt img, div#page dl.imgR dt img { max-width: 100%; height: auto; }
div#page table { border-top: solid 1px #ef9295; }
div#page th { padding: 0.5em 1em; width: 100%; border-width: 0 1px; display: block; box-sizing: border-box; }
div#page td { padding: 0.5em 1em; width: 100%; display: block; box-sizing: border-box; }
}

/* --------------------------------------------------
	GLOBAL FOOTER
--------------------------------------------------*/

footer#globalFooter {}
footer#globalFooter div.inner { margin: 0 auto; padding: 40px 0; width: 1200px; color: #4e3b2e; }
footer#globalFooter dl { display: flex; flex-direction: row-reverse; align-items: center; }
footer#globalFooter dt { width: 600px; }
footer#globalFooter dt ul { list-style: none; }
footer#globalFooter dt li { margin: 0.5em 0; padding: 0 0 0 12px; background: url(../images/common/arrowBrown.svg) 0 center no-repeat; background-size: 6px auto; }
footer#globalFooter dt a { color: #4e3b2e; text-decoration: none; }
footer#globalFooter dt a:hover { text-decoration: underline; }
footer#globalFooter dd { width: 600px; }
footer#globalFooter dd strong { font-size: 150%; }
footer#globalFooter dd div { padding: 0 0 0 20px; background: url(../images/common/telBrown.svg) 0 center no-repeat; background-size: 15px auto; font-size: 150%; font-weight: bold; }
footer#globalFooter dd p {}
div#copyright { padding: 10px 0; background: #4e3b2e; color: #fff; font-size: 90%; text-align: center; }

@media screen and (max-width: 767px) {
footer#globalFooter div.inner { padding: 12px 10px; width: auto; }
footer#globalFooter dl { display: block; }
footer#globalFooter dt { margin-bottom: 20px; width: auto; }
footer#globalFooter dt li { margin: 0 0 0.5em; padding: 0 0 0 10px; width: 50%; background-size: 5px auto; float: left; box-sizing: border-box; }
footer#globalFooter dd { margin: 0 0 15px; width: auto; }
footer#globalFooter dd strong { font-size: 120%; }
footer#globalFooter dd div { background-size: 12px auto; font-size: 120%; }
div#copyright { font-size: 80%; }
}

/* --------------------------------------------------
	BANNER / PAGETOP
--------------------------------------------------*/

a.fixedBanner { width: 56px; height: 155px; background: #4e3b2e; border: solid 1px #4e3b2e; border-radius: 10px 0 0 10px; color: #fff; text-decoration: none; line-height: 1.1; display: flex; justify-content: center; align-items: center; position: fixed; top: 100px; right: 0; z-index: 52; }
a.fixedBanner:hover { background: #fff; color: #4e3b2e; text-decoration: none; }
a#pagetop { width: 100px; height: 100px; background: #ef9295 url(../images/common/arrowPagetop.svg) center 35% no-repeat; background-size: 24px auto; border-radius: 63px; color: #fff; font-size: 95%; text-align: center; text-decoration: none; line-height: 130px; display: block; position: fixed; bottom: 20px; right: 20px; z-index: 2; }
a#pagetop:hover { text-decoration: none; }

@media screen and (max-width: 767px) {
a.fixedBanner { display: none; }
a#pagetop { width: 40px; height: 40px; background-position: center; background-size: 12px auto; text-indent: -9999px; }
}

/* --------------------------------------------------
	OVERLAY / SMARTPHONE MENU
--------------------------------------------------*/

div#overlay {}
a#sp { display: none; }

@media screen and (max-width: 767px) {
div#overlay { width: 100%; height: 0; background: rgba(255,255,255,0.75); position: absolute; top: 0; left: 0; z-index: 999; }
a#sp { width: 48px; height: 48px; background: #ef9295; border-radius: 3px; color: #fff; font-size: 12px; text-align: center; text-decoration: none; line-height: 1; display: block; position: fixed; top: 40px; right: 10px; z-index: 1000; transform: translateY(-50%); }
a#sp span { margin: 0 auto; width: 32px; height: 2px; background: #fff; display: block; position: absolute; left: 0; right: 0; transition: all 0.3s; }
a#sp span:nth-of-type(1) { top: 8px; }
a#sp span:nth-of-type(2) { top: 16px; }
a#sp span:nth-of-type(3) { top: 24px; }
a#sp p { width: 100%; position: absolute; bottom: 4px; }
a#sp.active { background: none; color: #ef9295; }
a#sp.active span { background: #ef9295; }
a#sp.active span:nth-of-type(1) { transform: translateY(8px) rotate(-45deg); }
a#sp.active span:nth-of-type(2) { opacity: 0; }
a#sp.active span:nth-of-type(3) { transform: translateY(-8px) rotate(45deg); }
}