@charset "utf-8";
/* CSS Document */


/* ----------------------------------------------------
   index setting
------------------------------------------------------- */

/* reset :
--------------------------------------------*/	

.main-container ul {
	margin: 0;
	padding: 0;
}


/* basic :
--------------------------------------------*/	

h2 {
	color: var(--blue-color);
	font-size: 2.2rem;
}

h2 span {
	display: block;
	color: var(--gray-color3);
	font-size: 1rem;
	margin-top: 0.2rem;
    letter-spacing: 0.1rem;
}

@media screen and (max-width: 767px){
	h2 {
		font-size: 1.8rem;
	}

	h2 span {
		font-size: 1.2rem;
	}
}

/* emergency menu :
--------------------------------------------*/	
#emergency{
    background: var(--red-color2); 
    padding: 2rem 1rem;
}

#emergency h2{
    color: var(--red-color);
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

/* main menu :
--------------------------------------------*/	


#main_menu {
	background: url("/common2/img/title01_l.svg") no-repeat;/* img/title01_l.svg */
	background-size: 20%;
	position: relative;
	padding: 4rem 0;
}

#main_menu:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: url("/common2/img/title01_r.svg") no-repeat bottom right;/* img/title01_r.svg */
	background-size: 20%;
	z-index: -1;
}

#main_menu ul {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	grid-gap: 2rem;
	margin: auto;
	padding: 0 1rem;
}

@media screen and (max-width: 1024px){
	#main_menu ul {
		grid-gap: 1.5rem;
	}
}

#main_menu a {
	padding: 2.5rem 2.5rem 2.5rem 140px;
	background-size: 80px!important;
	background-position: 35px center!important;
	background-repeat: no-repeat!important;
}

#main_menu a:after {
	width: 30px;
	height: 20px;
	background-size: 30px;
	bottom: 10px;
	right: 15px;
}

#main_menu a:hover:after {
	right: 10px;
    transition: 0.3s;
}

#main_menu #koubo a {background-image: url("/common2/img/topic1.svg");}/* img/topic1.svg */
#main_menu #jigyo a {background-image: url("/common2/img/topic2.svg");}/* img/topic2.svg */
#main_menu #seika a {background-image: url("/common2/img/topic3.svg");}/* img/topic3.svg */
#main_menu #keiyaku a {background-image: url("/common2/img/topic4.svg");}/* img/topic4.svg */

#main_menu h2 {
	font-size: 1.8rem;
	margin-bottom: 0.8rem;
}

#main_menu h2 span {
	display: block;
	color: var(--gray-color3);
	font-size: 1.1rem;
	margin-top: 0.2rem;
}

#main_menu p {
	color: var(--black-color);
}

@media screen and (max-width: 1366px){
	#main_menu a {
		padding: 2rem 2rem 2rem 120px;
		background-size: 70px!important;
		background-position: 30px center!important;
	}

	#main_menu a:after {
		width: 28px;
		height: 18px;
		background-size: 28px;
		bottom: 8px;
		right: 13px;
	}
}

@media screen and (max-width: 1024px){
	
	#main_menu {
		background-size: 40%;
		padding: 2rem 0;
	}

	#main_menu:after {
		background-size: 40%;
	}
	#main_menu a {
		padding: 1.5rem 1rem 1.5rem 100px;
		background-size: 60px!important;
		background-position: 20px center!important;
	}
	#main_menu a:after {
		width: 25px;
		height: 15px;
		background-size: 25px;
		bottom: 5px;
		right: 10px;
	}
}

@media screen and (max-width: 767px){
	#main_menu a {
		padding: 1rem 1rem 1rem 80px;
		background-size: 50px!important;
		background-position: 15px center!important;
	}
	#main_menu h2 {
		font-size: 1.4rem;
		margin-bottom: 0.5rem;
	}

	#main_menu h2 span {
		font-size: 0.9rem;
	}
	
	#main_menu ul {
		grid-template-columns: 1fr;
		grid-gap: 1rem;
	}
	
	#main_menu a {
/*
		text-align: center;
		padding: 60px 1rem 0.5rem;
*/
/*		background-size: 40px!important;*/
/*		background-position: center top 10px!important;*/
/*		background-repeat: no-repeat!important;*/
	}
}

/* news_release :
--------------------------------------------*/

#news_release {
	background: var(--gray-color1);
	padding: 3rem 0 1rem;
}

#news_release ul {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	grid-gap: 2rem;
	margin: 2rem 0 3rem;
}


#news_release ul li {
	background-color: var(--white-color);
	padding: 2rem;
	height: 100%;
}

@media screen and (max-width: 1024px){
	#news_release ul li {
		padding: 1.5rem;
	}
	
	#news_release ul {
		grid-gap: 1.5rem;
		margin: 1.5rem 0 2rem;
	}
}

#news_release ul time {
	color: var(--black-color);
/*	font-weight: 600;*/
	display: block;
	margin-bottom: 1rem;
}
#news_release ul a{
    font-weight: bold;
}

@media screen and (max-width: 767px){
	#news_release {
		padding: 2rem 0 1rem;
	}
	#news_release ul {
		grid-template-columns: 1fr;
	}
}


/* pickup :
--------------------------------------------*/

#pickup {
	padding: 3rem 0;
	background: url("/common2/img/title02.svg") no-repeat top;/* img/title02.svg */
	background-size: 100%;
}

#pickup h2,
#pickup h2 span {color: var(--white-color);}

#pickup h2 {
	margin-bottom: 5rem;
	display: inline-block;
	background-color:  var(--blue-color);
}

#pickup section {
	margin-bottom: 2rem;
	display: block;
}

#pickup section a {
	padding: 2.5rem;
}

@media screen and (max-width: 1366px){
	#pickup h2 {
		margin-bottom: 4rem;
	}
	#pickup section a {
		padding: 2rem;
	}
}

@media screen and (max-width: 1024px){
	#pickup {
		background-size: 150%;
	}

	#pickup section {
		margin-bottom: 1.5rem;
	}
	#pickup section a {
		padding: 1.5rem;
	}
}

#pickup section a:after {
	width: 30px;
	height: 20px;
	background-size: 30px;
	bottom: 10px;
	right: 15px;
}
#pickup section a:hover:after {
    right: 10px;
    transition: 0.3s;
}
#pickup section a img {
	float: left;
	margin-right: 2rem;
	width: 45%;
}

#pickup section p {
	color: var(--black-color);
}

@media screen and (max-width: 767px){
	
	#pickup {
		padding: 2rem 0;
		background-size: 250%;
	}
	#pickup section a {
		padding: 1em;
	}
	#pickup section a img {
		float: none;
		margin: 0 0 10px;
		width: 100%;
	}
}

@media screen and (max-width: 500px){
	
	#pickup {
		background-size: 350%;
	}
}

/* bnr :
--------------------------------------------*/

#bnr {
	background: var(--gray-color1);
	padding: 3rem 0 1rem;
	position: relative;
	z-index: 1;
}

#bnr .outline {
/*	max-width: 1440px;*/
    max-width: 1367px;
	margin: 0 auto;
	padding: 0 ;
}

#bnr ul.slideImg {
	margin: 2rem auto 1rem;
	position: relative;
	z-index: 3;
}

#bnr .slideImg li {
	margin: 0 1rem 1rem;
}

#bnr .slideImg li a{
    text-decoration: underline;
}
#bnr .slideImg li a:hover{
    text-decoration: none;
}
#bnr .slideImg li img:not([class]) {
/*	border: 1px solid var(--gray-color2);*/
	display: block;
}

#bnr .stop {
	display: none;
}

/*#bnr .pnNav {display: none;}*/
#bnr .internal .pagiNation {
	border: none;
	background: transparent;
	padding: 0;
}

@media (max-width: 1440px) {
	
	#bnr .outline {
		padding: 0 0 1rem;
	}
	#bnr .slideImg li {
		margin: 0 1rem;
	}
}

@media screen and (max-width: 1024px){
	#bnr {
		padding: 2rem 0 1rem;
	}
}

@media screen and (max-width: 767px){
	#bnr {
		padding: 0.5rem 0;
	}
}


/* news :
--------------------------------------------*/


#news {
	padding: 3rem 0;
}

#news .tab_list ul {
	margin: 2rem auto;
}

#news .tab_list ul.outline {
/*	grid-template-columns: 15rem repeat(5,1fr);*/
}

@media screen and (max-width: 1024px){
	#news .tab_list ul.outline {
		grid-template-columns: 12rem repeat(4,1fr);
	}
}

@media screen and (max-width: 767px){
	#news .tab_list ul.outline {
		grid-template-columns: repeat(3,1fr);
	}
	#news .tab_list ul.outline li:first-child {
		grid-column: 1 / 3;
		grid-row: 1;
	}
	
/*
	#news .tab_list ul.outline {
		grid-template-columns: 15rem repeat(2,1fr);
		padding: 0;
	}
	
	#news .tab_list li:nth-child(-n+3) button {
		border-bottom: 1px solid var(--gray-color2);
	}
*/
}


/*-- tabpanel --*/

.tab_panel {
	display: none;
}

.tab_panel.on {
	display: block;
}

