@charset "utf-8";
#wrapper {
}

section {
	padding: 50px;
	font-family: "M PLUS 1", sans-serif;
	border-top: 1px solid var(--blue1);
	letter-spacing: 0.01em;
}
	@media screen and (max-width:850px) {
		section {
			width: 100%;
			padding: 30px 10px 30px 10px;
			}
	}
section h3 {
	font-size: 32px;
	font-size: clamp(1.25rem, -3rem + 8vw, 2rem);
	color: var(--blue1);
	font-weight: 500;
}
section h3 > span {
	font-size: 12px;
	color: #666;
	display: block;
	margin-top: 10px;
	padding-bottom: 50px;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--blue1);
}
	@media screen and (max-width:850px) {
		section h3 > span {
			padding-bottom: 20px;
			margin-bottom: 20px;
		}
	}
section p {
	font-size: 16px;
	font-size: clamp(0.875rem, 0.167rem + 1.33vw, 1rem);
	line-height: 2.0em;
	text-align: justify;
}

#company, 
#allMembers {
	background: var(--yellow1);
}

section.newsBlock {
	background: #EFEFEF;
}
section.newsBlock a.btnAL {
	float: right;
}
section.newsBlock ul.news {
	clear: both;
}

/* # =================================================================
   main
   # ================================================================= */
#contents .main {
	width: 100%;
	height: 250px;
	border-top: 1px solid var(--blue1);
	background: url(../../img/main.jpg) no-repeat;
	background-size: cover;
	background-position-y: bottom;
	position: relative;
}

#contents .main h2 {
	position: absolute;
	top: 20%;
	left: 3%;
	font-size: 20px;
	font-size: clamp(1.125rem, 0.417rem + 1.33vw, 1.25rem);
	line-height: 1.5;
	color: #000;
	font-family: "M PLUS 1", sans-serif;
}
#contents .main h2 strong {
	font-weight: bold;
	display: inline-block;
	padding: 5px 5px 5px 10px;
	background: rgba(255,255,255,0.5);
}

	@media screen and (max-width:850px) {
		#contents .main {
		height: 300px;
		background-size: 150%;
		background-position-x: center;
		}
		#contents .main h2 {
		top: 10%;
		left: 3%;
		}
	}


/* # =================================================================
   newsBlock
   # ================================================================= */
.newsBlock {
	width: 100%;
	background: var(--yellow1);
	font-family: "M PLUS 1", sans-serif;
	padding-bottom: 50px;
	position: relative;
	z-index: 0;
}
.newsBlock > a {
	margin: 0 !important;
}
.newsBox {
	width: 100%;
	margin: 0 auto 0 auto;
	display: block;
}
.newsBlock ul.head {
	width: 100%;
	margin: 0 auto 0px auto;
	display: block;
	position: relative;
}
@media screen and (max-width:850px) {
	.newsBlock ul.head {
	max-width: 100%;
	}
}
.newsBlock ul.head li {
	display: block;
	width: 100%;
}
.newsBlock ul.head li.index2 {
	text-align: right;
	font-weight: bold;
	color: #FFF;
	opacity: 0.5;
	font-size: clamp(1.25rem, -0.114rem + 6.82vw, 5rem); /* 80px->20px */
	line-height: 0.9em;
	font-style: normal;
	padding: 0;
	margin: 0;
	position: relative;
	z-index: 1;
}
.newsBlock ul.head li.h3 {
	padding: 0px 0 0 5%;
}
.newsBlock ul.head li.h3 h3 {
	color: #000;
	font-size: clamp(1rem, 0.68rem + 1.31vw, 1.5rem); /* 24px->16px */
	font-size: clamp(2.25rem, 1.676rem + 2.35vw, 3rem);/*900-48->390-36*/
	font-weight: bold;
	position: absolute;
	top:-20px;
	left: 0;
	padding: 0px 30px 0 0;
}
.newsBlock ul.head li.h3 > a {
	position: absolute;
	right: 0;
	top: 30px;
	z-index: 3;
	line-height: 1.3em;
	padding-left: 50px;
}
.newsBlock ul.news {
	width: 100%;
	margin: 0 auto;
	padding: 0px 0px 0 0px;
	display: block;
	overflow: hidden;
}
.newsBlock ul.news li {
	width: 100%;
	float: none;
	border-bottom: 1px solid var(--blue1);
	padding: 10px;
}
.newsBlock ul.news li:hover {
	background: var(--yellow2);
}
.newsBlock ul.news li:nth-child(1) {
}
.newsBlock ul.news li a {
	display: block;
    transition: 0.5s;
}
.newsBlock ul.news li a:hover {
     color: var(--blue1);
}
.newsBlock ul.news li.title strong {
	font-size: 16px;
}
.newsBlock ul.news li.title img.line {
	width: 80%;
	display: block;
	margin-bottom: 10px;
}
.newsBlock ul.news li.title a {
	display: none;
}
.newsBlock ul.news li span.up_ymd {
	font-size: 14px;
	display: inline-block;
	text-align: left;
	color: var(--blue1);
	font-weight: normal;
	padding-top: 20px;
	width: 15%;
	max-width: 10em;
	vertical-align: top;
}

.newsBlock ul.news li span.thumbNailWrap {
	width: 80px;
	height: 80px;
	display: inline-block;
	float: left;
	padding: 5px 10px 10px 0;
}
.newsBlock ul.news li span.thumbNailWrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 100px;
}
.newsBlock ul.news li span.title {
	width: 84%;
	font-size: 16px;
	font-size: clamp(0.875rem, 0.167rem + 1.33vw, 1rem);
	padding-top: 20px;
	padding-bottom: 20px;
	display: inline-block;
	text-align: left;
	font-weight: bold;
}
@media screen and (max-width:850px) {
	.newsBlock ul.news li span.up_ymd {
		width: 100%;
		padding-top: 10px;
	}
	.newsBlock ul.news li span.title {
		width: 100%;
		padding-top: 5px;
	padding-bottom: 10px;
	}
	.newsBlock h3 > span {
		margin-bottom: 0px;
	}
}

.newsBlock ul.news li span.comment {
	width: 100%;
	font-size: 12px;
	display: none;
	text-align: left;
	margin-bottom: 20px;
}


/* # =================================================================
   policy
   # ================================================================= */
#policy {
	
}
	@media screen and (max-width:850px) {
		#policy p {	display: block; width: 96%; 
			margin-left: auto;
			margin-right: auto;
		}
	}



/* # =================================================================
   company
   # ================================================================= */
#company .profile {
	width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
#company .profile ul:first-child {
	width: 50%;
}
#company .profile ul:last-child {
	width: 40%;
}
#company .profile ul li {
	font-size: clamp(0.875rem, 0.167rem + 1.33vw, 1rem);
	line-height: 1.8;
	padding-bottom: 30px;
}
#company .profile ul li h4 {
	color: var(--blue1);
	font-weight: bold;
}
#company .profile ul li a {
	float: right;
	margin-right: 10%;
}
	@media screen and (max-width:850px) {
		#company .profile {	display: block; width: 96%; }
		#company .profile ul:first-child { width: 100%; }
		#company .profile ul:last-child { width: 100%;	}
	}


/* # =================================================================
   history
   # ================================================================= */
.history {
	max-width: 700px;
	margin: 0 auto;
	width:70%;
	display:block;
}
	@media screen and (max-width:850px) {
		.history {
			width:96%;
		}
	}
.history details {
	border-radius: 10px;
	font-weight: bold;
	transition: .5s;
	position: relative;
	cursor: pointer;
	display: block;
}
.history details[open] {
	color: #000;
	padding: 0px 0px 0px 0px;
}
.history summary {
	background: #DBDBDB;
	font-size: 16px;
	padding: 15px 15px 15px 25px;
	font-weight: bold;
	border-radius: 5px;
}
.history summary:hover {
	background: var(--blue1);
	color:#FFF;
}
.history summary::-webkit-details-marker {
	display: none;
}
.history summary:before {
	content: "＋";
	position: absolute;
	right: 15px;
}
.history details[open] summary:before,
.history summary details[open] summary:before {
	content: "−";
	position: absolute;
	right: 15px;
}
.history details:hover {
}
.history details[open]:hover {
}


.history table {
	
}
.history table th, 
.history table td {
	font-size: 14px;
	font-weight: normal;
	padding: 10px 0 10px 0;
	border-bottom: 1px dotted #CCC;
	line-height: 1.8;
}
.history table th {
	width: 100px;
}
	@media screen and (max-width:850px) {
		.history table { width: 96%; margin: 0 auto 0 auto;}
	}


/* # =================================================================
   allMembers
   # ================================================================= */
#allMembers {
	
}
#allMembers strong {
	color: var(--blue1);
}
#allMembers p {
	line-height: 1.6;
}
	@media screen and (max-width:850px) {
		#allMembers p {
			width: 96%;
			margin-left: auto;
			margin-right: auto;
		}
	}
#allMembers span.indent {
	display: block;
	text-indent: -1em;
	padding-left: 1em;
	padding-bottom: 10px;
}


/* # =================================================================
   info
   # ================================================================= */
#info {
	background: #F0EFEF;
}

#info ul {
	width: 60%;
	margin: 0 auto;
}
#info ul li {
	font-size: 16px;
	font-size: clamp(0.875rem, 0.167rem + 1.33vw, 1rem);
	text-indent: -1em;
	padding-left: 1em;
	line-height: 1.5;
}
	@media screen and (max-width:850px) {
		#info ul {
			width: 96%;
			margin: 0 auto;
		}
	}




/* # =================================================================
   access
   # ================================================================= */
#access {
}

#access .map {
}
#access .map iframe {
	width: 100%;
	height: 450px;
}

#access .accessInfo {
	width: 70%;
	margin: 25px auto;
	border: 3px solid var(--blue1);
	border-radius: 10px;
	padding: 25px;
}
	@media screen and (max-width:850px) {
		#access .accessInfo {
			width: 94%;
			padding: 25px;
		}
	}

#access .accessInfo li {
	font-size: 16px;
	font-size: clamp(0.875rem, 0.167rem + 1.33vw, 1rem);
	position: relative;
	padding-left: 50px;
	line-height: 1.8;
}
#access .accessInfo li strong {
	font-size: 18px;
	font-size: clamp(1rem, 0.292rem + 1.33vw, 1.125rem);
	font-weight: bold;
}
#access .accessInfo li:first-child {
	border-bottom: 1px dotted var(--blue1);
	padding-bottom: 20px;
	margin-bottom: 20px;
}
#access .accessInfo li:first-child:after {
content: "";
	position: absolute;
	background: url(../../img/icon_access.svg) no-repeat;
	width: 40px;
	height: 40px;
	left: 0;
	top: 0;
}