@charset "UTF-8";

/* #### ribon ####*/
#ribon {
	width: 100%;
	background-image: url("../img/trigger/title.jpg");
	position: relative;
}
i.fa-turn-down {
	color: #72A4B7;
}
i.fa-down-long {
	color: #CFBEAE;
	margin-left: 10px;
}

/* #### width 767px 以下の場合の設定 (for All Mobile Dvices) #### */
@media (max-width: 767px) {
	h3 {
		font-size: 18px;
		margin-bottom: 20px;
		font-weight: bold;
	}
	h4 {
		font-size: 16px;
		margin-bottom: 10px;
		font-weight: bold;
	}	
	ul.caseList {
		width: 100%;
		background-color: red;
		margin: 0 auto;
		
	}
	ul.caseList li {
		width: calc(88%/3);
		float: left;
		padding: 10px;
		margin: 5px 0.5%;
		border-radius: 8px;
		text-align: center;
		background-color: #ECECEC;
	}
	ul.caseList li.nowUrl {
		background-color: #EC8006;
		color: #ffffff;
		font-weight: bold;
	}
	ul.caseList li a {
		color: #6A6A6A;
	}
	ul.caseList li.nowUrl a {
		color: #ffffff;
	}
	ul.caseList li a:hover {
		opacity: 0.6;
	}
	
}


/* #### width 768px 以上の場合の設定 (for PC) #### */
@media (min-width: 768px) {
	h3 {
		font-size: 22px;
		margin-bottom: 20px;
		font-weight: bold;
	}
	h4 {
		font-size: 18px;
		margin-bottom: 10px;
		font-weight: bold;
	}
	ul.caseList {
		width: 100%;
		background-color: red;
		margin: 0 auto;
		
	}
	ul.caseList li {
		width: calc(90%/3);
		float: left;
		padding: 10px;
		margin: 5px 0.5%;
		border-radius: 8px;
		text-align: center;
		background-color: #ECECEC;
	}
	ul.caseList li.nowUrl {
		background-color: #EC8006;
		color: #ffffff;
		font-weight: bold;
	}
	ul.caseList li a {
		color: #6A6A6A;
	}
	ul.caseList li.nowUrl a {
		color: #ffffff;
	}
	ul.caseList li a:hover {
		opacity: 0.6;
	}
	
}



/* #### width 980px 以上の場合の設定 #### */
@media (min-width: 980px) {

	

}


/* #### width 1200px 以上の場合の設定 #### */
@media (min-width: 1200px) {



}

/* ## width 376px～499pxの場合の設定 (iPhone12以降) ## */
@media (min-width: 376px) and (max-width: 499px) {
	h3 {
		font-size: 18px;
		margin-bottom: 20px;
		font-weight: bold;
	}
	h4 {
		font-size: 16px;
		margin-bottom: 10px;
		font-weight: bold;
	}
	ul.caseList {
		width: 100%;
		background-color: red;
		margin: 0 auto;
		
	}
	ul.caseList li {
		width: calc(92%/2);
		float: left;
		padding: 5px;
		margin: 5px 0.5%;
		border-radius: 8px;
		text-align: center;
		background-color: #ECECEC;
		font-size: 12px;
	}
	ul.caseList li.nowUrl {
		background-color: #EC8006;
		color: #ffffff;
		font-weight: bold;
	}
	ul.caseList li a {
		color: #6A6A6A;
	}
	ul.caseList li.nowUrl a {
		color: #ffffff;
	}
	ul.caseList li a:hover {
		opacity: 0.6;
	}	
	
}
/* ## width 321px～375pxの場合の設定 (iPhone6〜iPhone11) ## */
@media (min-width: 321px) and (max-width: 375px) {
	h3 {
		font-size: 16px;
		margin-bottom: 20px;
		font-weight: bold;
	}
	h4 {
		font-size: 14px;
		margin-bottom: 10px;
		font-weight: bold;
	}
	ul.caseList {
		width: 100%;
		background-color: red;
		margin: 0 auto;
		
	}
	ul.caseList li {
		width: calc(92%/2);
		float: left;
		padding: 5px;
		margin: 5px 0.5%;
		border-radius: 8px;
		text-align: center;
		background-color: #ECECEC;
		font-size: 12px;
	}
	ul.caseList li.nowUrl {
		background-color: #EC8006;
		color: #ffffff;
		font-weight: bold;
	}
	ul.caseList li a {
		color: #6A6A6A;
	}
	ul.caseList li.nowUrl a {
		color: #ffffff;
	}
	ul.caseList li a:hover {
		opacity: 0.6;
	}	
}


/* ## width 320px以下の場合の設定 (iPhone5s以下) ## */
@media (max-width: 320px) {
h3 {
		font-size: 14px;
		margin-bottom: 20px;
		font-weight: bold;
	}
	h4 {
		font-size: 14px;
		margin-bottom: 10px;
		font-weight: bold;
	}
	ul.caseList {
		width: 100%;
		background-color: red;
		margin: 0 auto;
		
	}
	ul.caseList li {
		width: calc(90%/2);
		float: left;
		padding: 5px 3px;
		margin: 5px 0.3%;
		border-radius: 8px;
		text-align: center;
		background-color: #ECECEC;
		font-size: 10px;
	}
	ul.caseList li.nowUrl {
		background-color: #EC8006;
		color: #ffffff;
		font-weight: bold;
	}
	ul.caseList li a {
		color: #6A6A6A;
	}
	ul.caseList li.nowUrl a {
		color: #ffffff;
	}
	ul.caseList li a:hover {
		opacity: 0.6;
	}	
	
}