@charset "utf-8";
/*=======================================================================

共通レイアウト(layout.css)

========================================================================*/

@font-face {
  font-family: 'Noto Sans JP';
  src: local('Noto Sans JP');
  ascent-override: 100%;
  descent-override: 22%;
}

html {
	background-color: #fff;
}
body {
  color: #222;
	background-image: linear-gradient(0deg, #fff 20%, #bde1f5 70%);
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Arial, "メイリオ", Meiryo, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
}

/*----------------------------------------------------------------------
 Links
----------------------------------------------------------------------*/
a {
  color: #006eb0;
  text-decoration: none;
	transition: .3s;
}
#content a {
  text-decoration: underline;
}
@media (any-hover: hover) {
  a:hover,
	#content a:hover {
    opacity: .7;
    text-decoration: none;
  }
}

:focus-visible img {
	display: block;
}


/*----------------------------------------------------------------------
 Header
----------------------------------------------------------------------*/
#header .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
	max-width: 1200px;
	min-height: 72px;
  margin: 0 auto 24px;
}
#header .site_logo {
	width: calc(100% - 400px);
}
#header .header_nav {
  width: 400px;
}
#header .header_nav ul {
  display: flex;
	align-items: center;
	justify-content: flex-end;
	column-gap: 32px;
}
#header .header_nav ul li a {
	color: #222;
	font-size: 0.875rem;
}
@media (any-hover: hover) {
  #header .header_nav ul li a:hover {
    text-decoration: underline;
  }
}

/*----------------------------------------------------------------------
 Nav
----------------------------------------------------------------------*/
.slicknav_menu {
	display: none;
}
#menu {
	background-color: #fff;
	box-shadow: 0 8px 8px rgba(0,0,0,.1);
}
#menu nav {
	max-width: 1200px;
  margin: 0 auto;
}
#menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
	position: relative;
}
#menu li {
  width: calc(100% / 5);
	position: relative;
}
#menu ul::before,
#menu li::after {
	content: '';
	width: 1px;
	height: 60px;
	background-color: #808080;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 2;
}
#menu li::after {
	left: inherit;
	right: 0;
}
#menu li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 56px 8px 16px;
  color: #66525c;
	font-size: 1rem;
	font-weight: 900;
  line-height: 1.2;
	position: relative;
  text-align: center;
}
#menu li a::before {
  display: block;
  content: '';
  position: absolute;
	width: 44px;
  height: 34px;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}
#menu li.case a::before {
  background: url("../images/icon_case.svg") no-repeat;
}
#menu li.injury a::before {
  background: url("../images/icon_injury.svg") no-repeat;
}
#menu li.health a::before {
  background: url("../images/icon_health.svg") no-repeat;
}
#menu li.about a::before {
  background: url("../images/icon_about.svg") no-repeat;
}
#menu li.contact a::before {
  background: url("../images/icon_contact.svg") no-repeat;
}

#menu li a:hover,
#menu li.hover a,
#menu li.current a {
	background-color: #eef8eb;
	opacity: 1;
}


#menu #gNav li ul {
  display: none;
	width: auto;
  z-index: 100;
  position: absolute;
}
#menu #gNav li ul li {
  position: static;
  width: 240px;
}
#menu #gNav li ul li a {
  display: block;
  width: 100%;
  min-height: auto;
  padding: 16px 12px;
	background-color: #39b54a;
  border-top: 1px solid #87dd93;
  color: #fff;
  font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
  text-align: left;
  text-decoration: none;
  opacity: 1;
  position: relative;
}
#menu #gNav li ul li a:hover {
  background-color: #eef8eb;
	color: #66525c;
}
#menu #gNav li ul::before,
#menu #gNav li ul li::after,
#menu #gNav li ul li a::before {
  content: none;
}
.droppy::after {
  content: '';
  display: block;
  clear: both;
}

#menu .hnav {
  display: none;
}

/*----------------------------------------------------------------------
 Contents 
----------------------------------------------------------------------*/
#main {
  display: flex;
  flex-wrap: wrap;
	gap: 32px 24px;
	max-width: 1200px;
	margin: 40px auto 0;
}
#main #content {
	width: calc(100% - 274px);
	padding: 32px 40px 40px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 8px rgba(0,0,0,.1);
}


/*----------------------------------------------------------------------
 Sidebar 
----------------------------------------------------------------------*/
#main #sidebar {
	width: 250px;
}

#sidebar .side_benner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Side Nav */
#sidebar .side_nav h2 {
  margin: 0;
  padding: 16px;
  background: #39b54a;
  background: #006eb0;
	border-radius: 8px 8px 0 0;
  color: #fff;
	font-weight: 700;
  text-align: center;
}
.side_nav ul {
  /*border: 1px solid #ccc;*/
	box-shadow: 0 4px 4px rgba(0,0,0,.05);
  line-height: 1.3;
}
.side_nav ul ul {
  border: 0;
  display: none;
}
.side_nav ul .active  ul {
  display: inherit;
}
.side_nav li a {
  display: block;
  padding: 16px;
  background: #fff;
  border-top: 1px dotted #ccc;
  color: #333;
  font-size: 0.875rem;
  text-decoration: none;
}
.side_nav li:nth-last-of-type(1) a {
	border-radius: 0 0 8px 8px;
}
.side_nav li a:hover {
  background: #eef8eb;
  background: #cdebfc;
  opacity: 1;
}
.side_nav li.active a {
	background: #f9f9f9;
  color: #666;
}
.side_nav li:first-child a {
    border-top: none;
}


/*----------------------------------------------------------------------
 Footer
----------------------------------------------------------------------*/
#footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 24px 16px;
	max-width: 1200px;
	margin: 0 auto;
  padding: 40px 0 32px;
}
#footer .footer_nav {
	display: none;
}
#footer .address {
	flex: 1;
}
#footer .address dl {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}
#footer .address dd {
	font-size: 0.875rem;
	line-height: 1.4;
}

#footer .copyright {
	flex: 1;
	font-size: 0.875rem;
	text-align: right;
}


/*----------------------------------------------------------------------
 Pagetop 
----------------------------------------------------------------------*/
.pagetop {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 100;
}
.pagetop a {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #39b54a;
	text-align: center;
	text-decoration: none;
}
.pagetop a:hover {
	opacity: 0.75;
}
span.arrow {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
span.arrow:after {
	content: '';
	position: absolute;
	top: 25px;
	left: 21px;
	display: block;
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(-45deg);
}


/*----------------------------------------------------------------------
 TopicPath
----------------------------------------------------------------------*/
#content ul.topic_path {
	margin: 0 0 8px;
	padding: 0 12px;
	font-size: 0.875rem;
}
#content .topic_path li {
	display: inline-block;
	margin: 0;
}
#content .topic_path li a {
  text-decoration: none;
}
#content .topic_path li + li:before {
  padding: 0 4px;
  color: #999;
  content: ">";
}