/* CATEGORY COMMON CSS */
/******************************************************************************* COMMON */
.container h2{
	text-align:center;
	font-size:2.6em;
	line-height:1.2;
	margin:0 auto 40px;
	padding:0 0 10px; 
	border-bottom:2px solid #7EBABB;
	display:inline-block;
	font-family: 'Roboto Condensed', sans-serif;
}
/******************************************************************************* TITLE */
#title{
	padding:0;
	overflow:hidden;
	padding:0.1% 0;
	background-repeat:no-repeat;
	background-image:none;
	background-position:center top;
	background-color:#D8E9E9;
}
#title h1{
	position:relative;
	background:rgba(107,182,182,0.9);
	color:#FFF;
	margin:4em 0;
	padding:1.2em 2.5em 1.2em 1.5em;
	text-align:center;
	display:inline-block;
	font-size:1.8em;
}
#title h1:before{
	content:"";
	display:inline-block;
	vertical-align:middle;
	width:64px;
	height:45px;
	margin-right:0.5em;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:96% auto;
}
#title h1:after{
    content: "";
    border-bottom: solid 2px #FFF;
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100% - 0px);
	height: calc(100% - 6px);
}

/******************************************************************************* INTRODUCTION */
#introduction{
	padding:5em 0 2em;
	margin:0;
	text-align:center;	
    word-wrap: break-word;
    overflow-wrap: break-word;
}
#introduction h2{
	text-align:center;
	font-size:2em;
	line-height:1.2;
	margin:0 auto 20px;
	padding:0 1% 0.5em;
	border-bottom:2px solid #7EBABB;
	display:inline-block;
}
#introduction h2 br {display:none;}
#introduction h2:before{
	content:"";
	display:block;
	width:31px;
	height:54px;
	margin:0 auto 10px;
	background:url(../img/icon_light.png) no-repeat center center;
}
/******************************************************************************* CLASSIFICATION */
#classification{
	padding:4em 0 7em;
}
#classification {
    word-wrap: break-word;
    overflow-wrap: break-word;
}
#classification .width{
    display:flex;
    flex-wrap:wrap;
}
#classification dl {
	width: 48%;
    margin: 0 4% 4% 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    position: relative;
}
#classification dl:nth-of-type(2n){margin-right:0;}

#classification dl dt{
	background-color:#7EBABB;
	color:#FFF;
	font-size:1.2em;
	padding:0.2em 0;
	text-align:center;
	margin-bottom:0.5em;
    flex-basis: 100%;
}
#classification dl dd:nth-of-type(1){
    flex-basis: 30%;
    max-width: 30%;
}
#classification dl dd:nth-of-type(1) img{
    width: 100%;
}
#classification dl dd:nth-of-type(2) {
	color:#333;
	text-align: justify;
	text-justify: inter-ideograph;
    flex-basis: 70%;
    max-width: 70%;
	padding:0 0 0 3%;
}

/*項目に詳細ページがあるとき*/
.linkDetail{
    text-align: right;
}
.linkDetail span{
    display: inline-block;
    position: relative;
    padding: 1em 2em 0.8em 0;
    z-index: 0;
    font-weight: bold;
}
.linkDetail span::before{
    content: "";
    display: block;
    width: 40px;
    height: 70px;
    background: linear-gradient(to top left,  #f8c300 51%,transparent 50%) no-repeat bottom left/100% 50%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.linkDetail a{
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
}


/*--------------------------------------------------- ------
					950px対応
-----------------------------------------------------------*/
@media only screen and (max-width: 950px) {
/******************************************************************************* TITLE */
#title h1{margin:4em 3%;}
/******************************************************************************* INTRODUCTION */
#introduction{padding:5em 3% 2em;}
#introduction p {text-align:left;}
/******************************************************************************* CLASSIFICATION */
#classification{padding:2em 3% 7em;}




}
/*--------------------------------------------
	768px以下（タブレット調整）
---------------------------------------------*/
@media screen and (max-width: 768px)  {

/******************************************************************************* TITLE */
#title{ background-size: auto 100%;}
#title h1{margin:3em 3%;}
/******************************************************************************* INTRODUCTION */
#introduction h2 br {display: block;}









}

/*--------------------------------------------
	640x以下（微調整）
---------------------------------------------*/
@media screen and (max-width: 640px)  {

/******************************************************************************* TITLE */
#title{text-align:center;}
#title h1{ width:80%; margin:3em auto; font-size:1.6em;}

/******************************************************************************* INTRODUCTION */
#introduction{padding:4em 5% 2em;}
/******************************************************************************* CLASSIFICATION */
#classification{padding:2em 5% 5em;}
#classification dl {width: 100%;  margin: 0 0 6% 0;}


}



/*--------------------------------------------
	480x以下（スマートフォン）
---------------------------------------------*/
@media screen and (max-width: 480px)  {
/******************************************************************************* TITLE */
#title h1{text-align:center; padding:1em 1em;}
#title h1:before {display: block; width: 50px; height: 40px; margin: auto auto 5px;}
/******************************************************************************* INTRODUCTION */
#introduction h2{
	font-size:1.6em;
}


}