/* CSS */


@import url('hamburger.css');

html{font-size: 16px; line-height: 1.8em; color:#333;}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

}

* {transition: 0.2s;box-sizing: border-box;}
/* GRID */

.flex {display: flex;flex-wrap: wrap;}

.half {flex: 0 0 48%;}
.quarter {flex: 0 0 23%;}

section {padding-bottom: 1rem;}

main {flex: 1;}


img {max-width: 100%;}

/* MARGIN ,  PADDING */

.mb-0 {margin-bottom: 0 !important;}
.mb-1 {margin-bottom:1em !important;}
.mb-2 {margin-bottom:2em !important;}
.mb-3 {margin-bottom:3em !important;}

.mt-0 {margin-top: 0 !important;}
.mt-1 {margin-top:1em !important;}
.mt-2 {margin-top:2em !important;}
.mt-3 {margin-top:3em !important;}

.ml-0 {margin-left: 0 !important;}
.ml-1 {margin-left:1em !important;}
.ml-2 {margin-left:2em !important;}
.ml-3 {margin-left:3em !important;}


.pb-0 {padding-bottom: 0 !important;}
.pb-1 {padding-bottom: 1em !important;}
.pb-3 {padding-bottom: 2em !important;}
.pb-3 {padding-bottom: 3em !important;}

.pt-0 {padding-top: 0 !important;}
.pt-1 {padding-top: 1em !important;}
.pt-3 {padding-top: 2em !important;}
.pt-3 {padding-top: 3em !important;}


.mt-0 {margin-top: 0 !important;}
.pt-0 {padding-top:0 !important;}

.p-0 {padding:0 !important;}
.p-1 {padding:1em !important;}
.p-2 {padding:2em !important;}
.p-3 {padding:3em !important;}

.m-0 {margin: 0 !important;}
.m-1 {margin: 1em !important;}
.m-2 {margin: 2em !important;}
.m-3 {margin: 3em !important;}

.li-mb-1 li {margin-bottom: 1em}

/* TEXT */


.page_title {padding:0.8em 0;width: 100vw; margin-left: calc(-50vw + 50%);}
/*
.page_title h1 {color:#fff;}
*/

.fullwidth {width: 100vw; margin-left: calc(-50vw + 50%);}}

.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}

.nowrap {white-space: nowrap;}

.t_white {color:white;}

.button_link {display: inline-block; border-radius: 3em; padding:0.5em 2em; background: #999; color:#fff; text-decoration: none;}
.button_link:hover {opacity: 0.8;}
.button_link::after {font-family: 'Material Symbols Outlined'; content:"\e037";font-variation-settings:'FILL' 1;vertical-align: middle; color:rgba(252,212,48,1.00)}
/* COLORS */
.bg-primary {
  background-color: #45b1e2;
}

.bg-sub {background-color:cornflowerblue !important; color:white;}

.bg-white {background-color: white !important;}

/* FONT */

h1 {padding:0.5em 0; margin:0;}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal !important;
/*+    font-family: "Kosugi Maru", sans-serif; */
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.5em;
	color:#222;
}


/* GOOGLE ICONS */

.material-symbols-outlined, 
.material-symbols-outlined.fill {
  font-family: 'Material Symbols Outlined' !important;
  font-variation-settings:
    'FILL' 0,  
    'wght' 400,
    'GRAD' 0,
    'opsz' 48 !important;
}

.material-symbols-outlined.fill {
  font-variation-settings:
    'FILL' 1,  
    'wght' 400,
    'GRAD' 0,
    'opsz' 48 !important;
}


/*  CIRCLE PANEL*/

.circle_panel {
display: flex; justify-content: center; align-items: center; 
width:200px; height: 200px;
background: linear-gradient(#59a2e0 0%, #4a80bf 100%); 
border-radius: 50%; color:#fff; text-align: center;
margin-left: 3em;
font-size:1.3em;

z-index: 1;
margin-bottom: -120px;
 position: absolute; right:50px; top:-60px;
}



.oval_box {
display: flex; justify-content: center; align-items: center; 
aspect-ratio: 16 / 9; max-width: 100%;
background: linear-gradient(#59a2e0 0%, #4a80bf 100%); 
border-radius: 50%; color:#fff; text-align: center;
margin: auto;
font-size:1.3em;
position: relative;
z-index: 1;
}



.s_circle {width:4em; aspect-ratio: 4 / 3; border-radius: 50%; 
background: linear-gradient(125deg,rgba(255, 255, 255, 1) 0%, rgba(255, 242, 125, 1) 0%, rgba(201, 181, 0, 1) 100%);
margin-bottom:-3em; margin-left:4em; position: relative; z-index: 2;display: flex; justify-content: center; align-items: center; color:white;}



.wonder {width:350px; aspect-ratio: 16 / 9; max-width: 100%;
background-image: linear-gradient(177deg,rgba(255, 255, 255, 1) 0%, rgba(125, 223, 255, 1) 0%, rgba(0, 141, 201, 1) 100%);
transition: 0.2s ease;
}
.wonder:hover {opacity: 0.7;}

.q_text{display: block;padding:1em 0;}
/* HEADER */

nav {}
#navMenu {height: 1em; padding:1.5em 2em;  border-radius: 30px;}
#navMenu a {color:white; text-decoration: none;}
#navMenu a:hover {color:rgba(255,203,0,1.00);}

nav ul {gap: 0 !important;}


    nav ul li:not(:first-child) a:before {
	content:'';
      border-left: 1px solid #fff;
      padding-left: 1rem; /* 縦線と文字の間隔 */
	  border-radius:0;
	  }

/* MAIN VISUAL */
#main_visual {padding-bottom:3em;  overflow-x: hidden;}

#main_visual_wrapper {
	border-radius: 0 0 60% 60%;
	width: 120vw;
	position: relative;
    left: 50%;
    transform: translateX(-50%);
	background: #fff;

}

#main_image {
	aspect-ratio: 1450 / 555;
	display: flex;
	  justify-content: center;
	  align-items: center;
	  background: url(/images/main_visual_noround.png) center/cover no-repeat;

	  border-radius: 150px;
	  position: relative;
	}
#main_text {padding-top:50px;}

.top_catch {display: block; background: rgba(255,255,255,0.60); padding:0.5em 1em; border-radius: 30px; color:#000;}
.sub_catch {font-size:1.8em; padding:1em 0.5em; font-weight: bold; letter-spacing: 0.1em;}




/* BACKGROUND */


section#qa {background: linear-gradient(rgba(194,224,255,1.00) , #fff);}


/* TOP PAGE CTGBOX */


.bg_white {background: white !important;}

.bg_pink::before	{background: url('/css/images/bg_pink.png') repeat;}
.bg_yellow::before 	{background: url(/css/images/bg_yellow.png) repeat;;}
.bg_green::before 	{background: url(/css/images/bg_green.png) repeat;;}
.bg_blue::before 	{background: url(/css/images/bg_blue.png) repeat;;}

.bg_paper {
  position: relative;
  overflow: hidden;
}

.bg_paper::before {
  content: "";
  position: absolute;
  inset: 0;
;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.bg_paper:hover::before {opacity: 1;}


.bg_paper_yellow {background: url(/css/images/bg_yellow.png);}
.bg_paper_green {background: url(/css/images/bg_green.png);}
.bg_paper_blue {background: url(/css/images/bg_blue.png);}


.ctgbox table {
position: relative;
z-index: 1;
}



.h_card {
  display: flex;
  flex-direction: row;
  border-radius: 30px;
  overflow: hidden;

  background: linear-gradient(315deg,rgba(92,197,245,1.00) , rgba(33,153,207,1.00));

}

.h_card img {
  width: 400px;
  height: auto;
  object-fit: cover;

}

.h_card-content {
  padding: 2rem;
  flex: 1;
}


/* INFORMATION */
.info_date {border-radius: 30px; padding:0.1em 0.5em; text-align: center; display: inline-block; color:#fff; font-size:0.9em;}

.info_table th {width:110px;}
.info_table th,
.info_table td {padding:0.3em 0.3em 0.3em 0;}


/* ITEMS */


.ctgbox {margin-bottom:3em;gap:3rem;}
.ctgbox > div{ padding:1em; border-radius: 40px;box-shadow: var(--pico-card-box-shadow);}
.ctgbox table {margin-bottom: 0;}
.ctgbox table th, .ctgbox table td {background-color: transparent; border:none;}
.ctgbox table th {width: 120px;}
.ctgbox table td.arrow {width:1.5em; padding:0; text-align: center;}

.category-image {max-height: 120px; width: auto;}



/* STAFF */


.dept_name {text-align: center; font-size:0.8em;}
.staff_name {text-align: center;}
.staff_photo {text-align: center;}

/* BOX */



.white_wrapper {background: linear-gradient(315deg,rgba(194,224,255,1.00) , #fff); border-radius:100px;padding:3em 6em; box-shadow: var(--pico-card-box-shadow); position: relative;}

.graybox {background: #f5f5f5; padding:20px; border-radius: 8px; margin-bottom:2em;}

.whitebox {background:#fff;border: 1px solid #bbb; padding:20px; border-radius: 15px; margin-bottom:2em;}

.message_box {padding:2em 4em; border-radius: 40px}


.question_box {padding:2em 1em; text-align: center;}
.question_box p {display: block;padding:1em 0;}


/* ROWS */

.row-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}

.row-3-1　.left, .row-3-1　.right {
  padding: 1rem;
  background: #eee;  /* 例として色をつけてるだけ */
  border-radius: 0.5rem;
}

/* FOOTER */

footer {background: #f1f1f1;}

footer ul li {font-size:0.8em; line-height: 1.8em;}
footer ul li a {text-decoration: none;}


.hosp_list {display: block;}

.hosp_list li {display: inline-block; width: 30%;}

#copyright {text-align: center; font-size:0.8em;}

.container {
        max-width: 1200px;
		padding: 20px;
    }
}


/* Pico Reset */


@media (max-width:1536px) {

.white_wrapper {padding:1em 1em;}



}


@media (max-width:1280px) {
/*
.container {width:100% !important; max-width: 96% !important; margin: auto}
*/

}


/* ---------- FOR iPad ALL =---------- */

@media screen and (min-device-width: 820px) and (max-device-width: 1366px) {
  /* iPad全体に共通のスタイル */
  html{font-size: 15px; line-height: 1.5em; }
  

.ctgbox {padding:0;}
.ctgbox table th {width:90px;}
.ctgbox table br {display: none;}

}



@media screen and (min-device-width: 834px) and (max-device-width: 1366px) {
  /* iPad全体に共通のスタイル */
  
  

.ctgbox {padding:0;}
.ctgbox table th {width:90px;}
.ctgbox table br {display: none;}

}




@media screen and (max-width: 1024px) {


html{font-size: 15px; line-height: 1.5em; }



#navMenu {background: transparent;}


h1, h2, h3, h4, h5, h6 {margin-bottom:0.5em;}

header {padding:0,5em;}
#logo {width:85%;}





#main_visual_wrapper {width: 100vw;}

#main_image {height: 300px; width:100vw;aspect-ratio: auto; margin: 0; border-radius: 0;margin-left: calc(-50vw + 50%);}

.nowrap {white-space: normal;}

.top_catch {font-size:1.3rem;padding:0.5em}


#main_text {padding: 0;}

.ctgbox {padding:0; margin-bottom:1rem; gap:1rem;}
.ctgbox table th {width: 80px; max-height: 80px; text-align: center;}
.ctgbox table td {padding:0.5em;}

.ctgbox div{ gap:1; border-radius: 30px; padding:0.5em;}
.ctgbox img {max-width: 60px;}
.ctgbox p br {display: none;}

.sub_catch {font-size:1.2rem; letter-spacing: 0;}

.message_box {padding:1em;}

.row-2-1 {grid-template-columns: 1fr;}

  
.half {flex: 0 0 100%;}
.quarter {flex: 0 0 100%;}

	  
.circle_panel {border-radius:1em 1em 0 0; padding:0.5em 1em; width:auto; height: auto; margin: auto; margin-bottom:0;}
.circle_panel br {display: none;}

.s_circle {width:3em; margin-left:0; margin-bottom:-1.5em;}
.question_box {padding:0 0.5em;}

#categories .white_wrapper {padding:0.5em; border-radius: 0 0 2em 2em;}
#qa .white_wrapper  {padding:0.5em; border-radius: 2em;}

.wonder {font-size:16px; padding:0.5em 3em}
.question_box br {display: none;}

.hosp_list li {;width: 45%;}


} /* ---------- END SMARTPHONE =---------- */


@media screen and (max-width: 768px) {

.oval_box {border-radius: 2em; width:100%; aspect-ratio:auto; padding:1em; height: auto;}

}

/* ---------- ONLY SMARTPHONE =---------- */

@media screen and (max-width: 600px) {


  .h_card {flex-direction: column;}

  .h_card img {
    width: 100%;
    height: auto;
  }


}