@charset "UTF-8";

/* case_wrap
===================================*/

.case_wrap {
	width: 100%;
	max-width: 940px;
	position: relative;
}

.case_wrap .ttlbox {
    margin-bottom: 120px;
}
@media screen and (max-width: 768px){
.case_wrap .ttlbox {
    margin-bottom: 60px;
}
}
@media screen and (max-width: 480px) {
.case_wrap .ttlbox{
	margin-bottom: 40px;
}
}

.case_wrap ul{
	max-width: 696px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; 
}

.case_wrap li{
	width: 49%;
	max-width: 326px;
    margin-bottom: 40px;
	display: flex;
	flex-wrap: wrap;
}

.case_wrap li .btn_more{
	margin-top: auto;
}

@media screen and (max-width: 480px){
.case_wrap li{
	width: 100%;
	/*max-width: 100%;*/
	margin-bottom: 20px;
}
.case_wrap li:last-child{
    margin-bottom: 0;
}
}

.case_wrap li h4 {
	width: 100%;
	height: 55px;
	font-size: 2.1rem;
	font-weight: 400;
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	background-color: #999999;
}

/* case-color */
.cs-01 {
	background-color: #29abe2!important;
}
.cs-02 {
	background-color: #c69c6d!important;
}
.cs-03 {
	background-color: #8cc63f!important;
}
.cs-04 {
	background-color: #fbb03b!important;
}
.cs-05 {
	background-color: #d0bdaf!important;
}
.cs-06 {
	background-color: #00ffff!important;
}
.cs-07 {
	background-color: #d4145a!important;
}
.cs-08 {
	background-color: #ff0000!important;
}

@media screen and (max-width: 768px) {
.case_wrap li h4 {
	font-size: 1.8rem;
}

.case_wrap li h4 span{
	width: 32px;
	font-size: 2.0rem;
}
}

.case_wrap li p{
	font-size: 1.4rem;
	line-height: 1.5;
	text-align: justify;
}

.case_wrap .matrix{
	margin-top: 80px;
}
@media screen and (max-width: 768px){
.case_wrap .matrix{
	margin-top: 40px;
}
}

.case_wrap .matrix img{
	max-width: 100%;
	height: auto;
}

/* case_detail
===================================*/

.case_wrap .case-ttl{
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: baseline;
}

.case_wrap .ttlbox p.tag {
	width: 248px;
	height: 36px;
	font-size: 2.1rem;
	font-weight: 400;
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	border-radius: 8px;
	background-color: #e6e6e6;
	padding: 0 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.case_wrap .ttlbox p.tag.sml {
	font-size: 1.6rem;
}

.case_wrap h4,
.case_detail h4{
    font-size: 2.1rem;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 10px;
}
@media screen and (max-width: 768px){
.case_wrap h4{
    font-size: 1.8rem;
}
.case_detail h4{
    font-size: 1.6rem;
}
}

.case_wrap p,
.case_detail p{
    font-size: 1.4rem;
	text-align: justify;
}
@media screen and (max-width: 768px){
.case_wrap p,
.case_detail p{
    font-size: 1.2rem;
}
}

/* case_detail
===================================*/

.case_detail {
	width: 100%;
	max-width: 940px;
	position: relative;
}

.case_detail img{
	max-width: 100%;
	height: auto;
}

.single{
	width: 100%;
	margin-bottom: 40px;
}

/* グレー背景 */
.gray{
	background-color: #efefef;
	padding: 60px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 40px;
}

.gray.mb00{
	margin-bottom: 0px;
}

.gray ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 5%;
}

.gray ul li{
	max-width: 48%;
	/*margin: 0 20px;*/
}

.gray ul li.cs08-L{
	max-width: 44%;
	/*margin: 0 20px;*/
}

.gray ul li.cs08-R{
	max-width: 44%;
	/*margin: 0 20px;*/
}

@media screen and (max-width: 768px){
.gray{
	padding: 30px;
	margin-bottom: 30px;
}
.gray ul {
	gap: 10px 4%;
}
.gray ul li{
	max-width: 48%;
}
.gray ul li.cs08-L{
	max-width: 100%;
	margin-bottom: 20px;
}
.gray ul li.cs08-R{
	max-width: 100%;
}
}

/* 2カラム */
.col-2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between; 
}

.col-2 div{
	width: 49%;
}
@media screen and (max-width: 768px){
.col-2 div{
	width: 100%;
	margin-bottom: 20px;
}
.col-2 div:last-child{
	margin-bottom: 0px;
}
}

/* 2カラム（コピー） */

.col-2 .col-img{
	width: 48%;
	text-align: center;
}
.col-2 .col-txt{
	width: 52%;
	text-align: right;
}

@media screen and (max-width: 768px){
.col-2 .col-img,
.col-2 .col-txt	{
	width: 100%;
	margin-bottom: 20px;
	text-align: center;
}
.col-2 .col-txt{
	margin-bottom: 0px;
}
}

/* 5カラム */
.col-5 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px 20px;
}
.col-5 div{
	max-width: 20%;
}

@media screen and (max-width: 768px){
.col-5 {
	gap: 10px 2%;
}
.col-5 div{
	max-width: 48%;
}
}

@media screen and (max-width: 768px){
.col-5 {
	justify-content: flex-start;
}
.col-5 div{
	max-width: 48%;
}
}

/* MV カラム */
.col-mv {
	max-width: 720px;
}


/* information
===================================*/

table.information{
	width: 100%;
	text-align: left;
	background-color: #FFFFFF;
	font-family: "Noto Serif JP", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", "ＭＳ 明朝", "MS Mincho", serif;
	font-size: 1.7rem;
	border: 1px solid #000000;
}

table.information tr{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}

table.information tr:last-child{
	border-bottom: none;
}

table.information th,
table.information td{
	padding: 16px 40px;
    vertical-align: top;
	/*border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #BABABA;*/
}

table.information th{
	width: 22%;
    font-weight: 400;
}

table.information td{
	padding-left: 0;
}

@media screen and (max-width: 768px) {
table.information{
    font-size: 1.4rem;
}
table.information th,
table.information td{
	padding: 8px 20px;
}
table.information th{
	width: 35%;
}
table.information td{
	padding-left: 0;
}
} /*@mediaEnd*/