@charset "UTF-8";

/* CSS Document */


/*PC*/
@media print, screen and (min-width: 768px) {

img { width: 100%; }

/*creative_web
----------------------------*/

.creative_web .cont_tit { font-size: 1.8em; text-align: center; margin-bottom: 50px; line-height: 1.3; font-weight: 900; }
.creative_web .cont_tit .sub { display: block; font-size: 1.6rem; text-align: center; color: #ccc; }

.creative_web .cont01 .case_list { width:100%; margin:0 auto 50px; padding:0; list-style-type:none; display: flex; justify-content: flex-start; flex-wrap: wrap; }
.creative_web .cont01 .case_list li { width: 25%; border-right: 1px #999999 dotted; border-top: 1px #999999 dotted; transition: all 0.4s ease 0s; }
.creative_web .cont01 .case_list li:nth-child(4n+2) { border-right: 1px #999999 dotted; }
.creative_web .cont01 .case_list li:nth-child(4n+4) { border-right: none; }
.creative_web .cont01 .case_list li:nth-of-type(1),
.creative_web .cont01 .case_list li:nth-of-type(2),
.creative_web .cont01 .case_list li:nth-of-type(3),
.creative_web .cont01 .case_list li:nth-of-type(4) { border-top: none; }
.creative_web .cont01 .case_list li a { width: auto; padding: 30px 20px; display: block; }
.creative_web .cont01 .case_list li a figure { overflow: hidden; margin: auto auto 20px; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.creative_web .cont01 .case_list li a figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; display: block; }
.creative_web .cont01 .case_list li a:hover figure img { -webkit-transform: scale(1.1); transform: scale(1.1); }
.creative_web .cont01 .case_list li h3 { font-size: 1em; margin-bottom: 10px; }
.creative_web .cont01 .case_list li p:nth-of-type(1){
font-size: 0.7em;
line-height: normal;
text-align: center;
display: inline-table;
padding: 2px 15px;
background: #666;
color: #FFF;
margin: auto auto 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.creative_web .cont01 .case_list li p:nth-of-type(2){ font-size: 0.8em; line-height: normal; }
.creative_web .cont01 .case_list li.is-hidden { display: none; }

.creative_web .cont01 .more { text-align: center; margin: 0 0 50px;}
.creative_web .cont01 .more button {
background: none;
display: block;
font-weight: bold;
margin: 0 auto;
text-align: center;
border: none;
position: relative;
}
.creative_web .cont01 .more button i { font-size: 1.6em; position: absolute; top: 20px; right: 0; left: 0; margin: auto; transition: all 0.3s ease 0s; }
.creative_web .cont01 .more button:hover i { top: 25px; transition: all 0.3s ease 0s; }



/*creative_dtp
----------------------------*/



/*creative_event
----------------------------*/



/*creative_advertising
----------------------------*/



}



/*sp*/
@media only screen and (max-width: 767px) {

/*creative_web
----------------------------*/

.creative_web .cont_tit { font-size: 1.6em; text-align: center; margin-bottom: 30px; line-height: 1.3; font-weight: 900; }
.creative_web .cont_tit .sub { display: block; font-size: 1.4rem; text-align: center; color: #ccc; }

.creative_web .cont01 .case_list { width:100%; margin:0 auto 30px; padding:0; list-style-type:none; display: flex; justify-content: flex-start; flex-wrap: wrap; }
.creative_web .cont01 .case_list li { width: 50%; border-right: 1px #999999 dotted; border-top: 1px #999999 dotted; transition: all 0.4s ease 0s; }
.creative_web .cont01 .case_list li:nth-child(2n+2) { border-right: none; }
.creative_web .cont01 .case_list li:nth-of-type(1),
.creative_web .cont01 .case_list li:nth-of-type(2) { border-top: none; }
.creative_web .cont01 .case_list li a { width: auto; padding: 20px 10px; display: block; }
.creative_web .cont01 .case_list li a figure { overflow: hidden; margin: auto auto 20px; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
.creative_web .cont01 .case_list li a figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; display: block; }
.creative_web .cont01 .case_list li a:hover figure img { -webkit-transform: scale(1.1); transform: scale(1.1); }
.creative_web .cont01 .case_list li h3 { font-size: 1.2em; line-height: 1.6; margin-bottom: 10px; }
.creative_web .cont01 .case_list li p:nth-of-type(1){
font-size: 0.9em;
line-height: normal;
text-align: center;
display: inline-table;
padding: 2px 15px;
background: #666;
color: #FFF;
margin: auto auto 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.creative_web .cont01 .case_list li p:nth-of-type(2){ line-height: normal; }
.creative_web .cont01 .case_list li.is-hidden { display: none; }

.creative_web .cont01 .more button {
background: none;
display: block;
font-weight: bold;
margin: 0 auto;
text-align: center;
border: none;
position: relative;
}
.creative_web .cont01 .more button i { font-size: 1.6em; position: absolute; top: 20px; right: 0; left: 0; margin: auto; transition: all 0.3s ease 0s; }



/*creative_dtp
----------------------------*/



/*creative_event
----------------------------*/



/*creative_advertising
----------------------------*/



}