@import url("common.css");

/* レイアウト　*/

h2{
}

/********** header **********/
header .fv{
    width: 100%;
    height: 80vh;
    overflow: hidden;
    position: relative;
	background-image: url(../images/creative_fv.webp);
    background-color: #000;
    background-position: center center;
    background-size: cover;
}
header .fv:after{
	background-color: rgba(0, 0, 0, 0.8);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
}
header .fv img{
    top: 30%;
    filter: drop-shadow(2px 2px 3px rgba(255, 255, 255, 0.8));
}
header .fv ul{
	margin-top: -5%;
}
header .fv li{
	float: left;
	width: 25%;
    animation-name: FVfadeIn;
    animation-duration: 18.0s;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-iteration-count: infinite;
    transform: translateY(50px);
    opacity: 0;
    padding: 15% 0 0 0;
    background-image: url(https://placehold.jp/3c8337/ffffff/360x240.png?text=dummy);
    background-size: cover;
    background-position: center center;
}
header .fv li.num01{animation-delay: 3030ms;}
header .fv li.num02{animation-delay: 3060ms;}
header .fv li.num03{animation-delay: 3090ms;}
header .fv li.num04{animation-delay: 3120ms;}
header .fv li.num05{animation-delay: 3150ms;}
header .fv li.num06{animation-delay: 3180ms;}
header .fv li.num07{animation-delay: 3210ms;}
header .fv li.num08{animation-delay: 3240ms;}
header .fv li.num09{animation-delay: 3270ms;}
header .fv li.num10{animation-delay: 3300ms;}
header .fv li.num11{animation-delay: 3330ms;}
header .fv li.num12{animation-delay: 3360ms;}

header .fv li.num13{animation-delay: 3390ms;}
header .fv li.num14{animation-delay: 3420ms;}
header .fv li.num15{animation-delay: 3450ms;}
header .fv li.num16{animation-delay: 3480ms;}
header .fv li.num17{animation-delay: 3510ms;}
header .fv li.num18{animation-delay: 3540ms;}
header .fv li.num19{animation-delay: 3570ms;}
header .fv li.num20{animation-delay: 3600ms;}
header .fv li.num21{animation-delay: 3630ms;}
header .fv li.num22{animation-delay: 3660ms;}
header .fv li.num23{animation-delay: 3690ms;}
header .fv li.num24{animation-delay: 3720ms;}
header .fv li.num25{animation-delay: 3750ms;}

header .fv li.num13{animation-delay: 3390ms;}
header .fv li.num14{animation-delay: 3420ms;}
header .fv li.num15{animation-delay: 3450ms;}
header .fv li.num16{animation-delay: 3480ms;}
header .fv li.num17{animation-delay: 3510ms;}
header .fv li.num18{animation-delay: 3540ms;}
header .fv li.num19{animation-delay: 3570ms;}
header .fv li.num20{animation-delay: 3600ms;}
header .fv li.num21{animation-delay: 3630ms;}
header .fv li.num22{animation-delay: 3660ms;}
header .fv li.num23{animation-delay: 3690ms;}
header .fv li.num24{animation-delay: 3720ms;}
header .fv li.num25{animation-delay: 3750ms;}

header .fv li.num01{background-image: url(../images/fv01.jpg);}
header .fv li.num02{background-image: url(../images/fv02.jpg);}
header .fv li.num03{background-image: url(../images/fv03.jpg);}
header .fv li.num04{background-image: url(../images/fv04.jpg);}
header .fv li.num05{background-image: url(../images/fv05.jpg);}
header .fv li.num06{background-image: url(../images/fv06.jpg);}
header .fv li.num07{background-image: url(../images/fv07.jpg);}
header .fv li.num08{background-image: url(../images/fv08.jpg);}
header .fv li.num09{background-image: url(../images/fv09.jpg);}
header .fv li.num10{background-image: url(../images/fv10.jpg);}

header .fv li.num11{background-image: url(../images/fv11.jpg);}
header .fv li.num12{background-image: url(../images/fv12.jpg);}
header .fv li.num13{background-image: url(../images/fv13.jpg);}
header .fv li.num14{background-image: url(../images/fv14.jpg);}
header .fv li.num15{background-image: url(../images/fv15.jpg);}
header .fv li.num16{background-image: url(../images/fv16.jpg);}
header .fv li.num17{background-image: url(../images/fv17.jpg);}
header .fv li.num18{background-image: url(../images/fv18.jpg);}
header .fv li.num19{background-image: url(../images/fv19.jpg);}

header .fv li.num20{background-image: url(../images/fv20.jpg);}
header .fv li.num21{background-image: url(../images/fv21.jpg);}
header .fv li.num22{background-image: url(../images/fv22.jpg);}
header .fv li.num23{background-image: url(../images/fv23.jpg);}
header .fv li.num24{background-image: url(../images/fv24.jpg);}
header .fv li.num25{background-image: url(../images/fv25.jpg);}

@supports (background-image: url('image.webp')) {
header .fv li.num01{background-image: url(../images/fv01.jpg.webp);}
header .fv li.num02{background-image: url(../images/fv02.jpg.webp);}
header .fv li.num03{background-image: url(../images/fv03.jpg.webp);}
header .fv li.num04{background-image: url(../images/fv04.jpg.webp);}
header .fv li.num05{background-image: url(../images/fv05.jpg.webp);}
header .fv li.num06{background-image: url(../images/fv06.jpg.webp);}
header .fv li.num07{background-image: url(../images/fv07.jpg.webp);}
header .fv li.num08{background-image: url(../images/fv08.jpg.webp);}
header .fv li.num09{background-image: url(../images/fv09.jpg.webp);}
header .fv li.num10{background-image: url(../images/fv10.jpg.webp);}

header .fv li.num11{background-image: url(../images/fv11.jpg.webp);}
header .fv li.num12{background-image: url(../images/fv12.jpg.webp);}
header .fv li.num13{background-image: url(../images/fv13.jpg.webp);}
header .fv li.num14{background-image: url(../images/fv14.jpg.webp);}
header .fv li.num15{background-image: url(../images/fv15.jpg.webp);}
header .fv li.num16{background-image: url(../images/fv16.jpg.webp);}
header .fv li.num17{background-image: url(../images/fv17.jpg.webp);}
header .fv li.num18{background-image: url(../images/fv18.jpg.webp);}
header .fv li.num19{background-image: url(../images/fv19.jpg.webp);}

header .fv li.num20{background-image: url(../images/fv20.jpg.webp);}
header .fv li.num21{background-image: url(../images/fv21.jpg.webp);}
header .fv li.num22{background-image: url(../images/fv22.jpg.webp);}
header .fv li.num23{background-image: url(../images/fv23.jpg.webp);}
header .fv li.num24{background-image: url(../images/fv24.jpg.webp);}
header .fv li.num25{background-image: url(../images/fv25.jpg.webp);}
}


@keyframes FVfadeIn {
    0% {
    }
    30% {
        transform: translateY(0);
        opacity: 1;
    }
    70% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);
        opacity: 0;
    }
}
header .fv li img{
	vertical-align: bottom;
	width: 100%;
}

/********** footer **********/

/********** main **********/
 .creative .content01{
    padding-top: 60px;
    margin-bottom: 60px;
}
.creative h1 {
    text-align: center;
    margin-bottom: 40px;
}
.creative h1 strong{
    font-weight: bold;
    font-size: 1.6rem;
    display: block;
}
.creative h1 span {
    position: relative;
    line-height: 20px;
    display: inline-block;
    margin-top: 10px;
}
.creative  h1 span:before {
    left: -80px;
}
.creative  h1 span:after {
    right: -80px;
}
.creative  h1 span:before,
.creative  h1 span:after {
    content: "";
    display: block;
    width: 60px;
    border-top: 1px solid #000;
    position: absolute;
    top: 10px;
}
.creative  h1 + p{
	text-align: center;
}
.creative .content h2 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center;
}
.creative .content h2:after {
    content: "";
    width: 60px;
    display: block;
    margin: 0 auto;
    padding-bottom: 8px;
    border-bottom: 2px solid #000;
}
.creative h2 + .sbtn{
	cursor: pointer;
	text-align: center;
	text-decoration: underline;
	color: #e2007f;
	margin-bottom: 15px;
}
.creative h2 + .sbtn:after{
	content: "▼";
	padding-left: 15px;
}
.creative h2 + .sbtn.active:after{
	content: "▲";
}
.creative .content02 .pbox{
	background-image: url(../images/creative_img01.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	max-height: 0;
	box-sizing: border-box;
	overflow: hidden;
	transition: max-height 0.6s ease-in-out;
}
.creative h2 + .sbtn.active + .pbox{
	max-height: 1000px;
}
.creative .content02 .pbox .inner{
	text-align: center;
	padding: 50px 0 40px 0;
}
.creative .content02 .pbox p{
	text-align: center;
	margin-bottom: 10px;
}
.creative .service{
	background-color: #f0f0f0;
	padding: 40px 0;
}
.creative .service h3{
	text-align: center;
	font-weight: bold;
	font-size: 1.2rem;
	margin-bottom: 40px;
}
.creative .service h4{
	text-align: center;
}
.creative .service img{
	width: 15%;
}
.creative .btnbox{
	width: 80%;
	margin: 0 auto;
}
.creative .acbox {
	width: 80%;
	margin: 0 auto;
}
.creative  a.acbtn {
	display: block;
}
.creative .acbox ul{
	position: relative;
}
.creative .acbox{
	width: 80%;
	position: relative;
	margin: 0 auto;
}
.creative .btnbox{
	display: flex;
	padding: 40px 0;
}
.creative .acbtn{
	cursor: pointer;
	width: 48%;
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid #000;
	padding: 5px 10px;
    font-family: "din-condensed", sans-serif;
    color: #de007f;
    font-weight: bold;
    font-size: 1.2rem;
    position: relative;
    text-align: right;
}
.creative .acbtn:after{
	content: "▼";
	padding-left: 15px;
}
.creative .acbtn.active{
	border-color: #e2007f;;
}
.creative .acbtn.active,
.creative .acbtn.active span{
	background-color: #e2007f;
	color: #fff;
}
.creative .acbtn.active:after{
	content: "▲";
}
.creative .acbtn span{
    font-family: "din-condensed", sans-serif;
    color: #de007f;
    font-weight: bold;
    font-size: 1.4rem;
    position: absolute;
    left: 0;
    padding-left: 15px;
}
.creative .acbtn{
}
.creative .acbtn1,
.creative .acbtn1b,
.creative .acbtn1c{
	margin-right: 4%;
}
.creative .accontent{
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.6s ease-in-out;
}
.creative .accontent .linkbox{
	width: 40%;
	margin: 20px auto 40px auto;
	background-color: #fff;
}
.creative .accontent .linkbox:hover{
	background-color: #e2007f;
}
.creative .accontent.active{
	max-height: 2000px;
}
.creative .accont01 img{
	width: 100%;
	margin-bottom: 30px;
	max-width: 1080px;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.creative .accont01 .tag{
	border: 1px solid #000;
	padding: 0 20px 0;
	text-align: center;
	position: relative;
    margin-top: 60px;
    margin-bottom: 30px;
}
.creative .accont01 .tag h6 {
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.4rem;
    position: relative;
    display: inline-block;
    padding: 0 20px;
    top: -0.7rem;
    background-color: #f0f0f0;
    text-indent: 0;
}
.creative .accont01 .tag li{
    display: inline-block;
    padding: 5px 14px;
    box-sizing: border-box;
    background-color: #ffd2ed;
    border: 1px solid #999;
    margin-bottom: 5px;
}
.creative h5{
	font-weight: bold;
	font-size: 1.8rem;
	text-align: center;
    font-family: "din-condensed", sans-serif;
    margin-bottom: 40px;
}
.creative h5 span{
	font-weight: bold;
	font-size: 1.0rem;
	text-align: center;
	display: block;
	padding-top: 3px;
}
.creative h5 span:before{
	content: "";
	display: block;
	width: 50px;
	border-top: 1px solid #000;
	margin: 0 auto;
}
.creative h6{
	text-align: center;
    margin-bottom: 20px;
}
.creative h6 span{
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    position: relative;
    display: inline;
    z-index: 2;
    border-bottom: 4px solid #ffff00;
}
.creative p{
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}
.creative h6 + p{
}
.creative p strong{
    font-weight: bold;
    font-size: 1.2rem;
    display: block;
}
.creative .content03 .taglist{
	width: 80%;
	margin: 0 auto;
}
.creative .content03 .taglist > ul > li{
	display: flex;
	margin-bottom: 20px;
}
.creative .content03  .taglist li a{
    font-size: 0.8rem;
	}
.creative .content03 .taglist ul > li h3{
	width: 150px;
	background-color: rgba(226, 0, 127, 0.2);
	padding: 5px 5px;
	border-radius: 2px;
	font-weight: bold;
	margin-right: 5px;
	font-size: 0.8rem;
	white-space: nowrap;
    display: flex;
    align-items: center;
  justify-content: center;

}
.creative .content03 .taglist ul > li h3.eng{
	width: auto;
	padding:  5px 15px;
}
.creative .content03 .taglist ul > li ul{
	display: flex;
	flex-wrap: wrap;
    gap: 5px 5px;
}
.creative .content03 .taglist  ul > li ul li{
	background-color: rgba(0, 0, 0, 0.1);
	padding: 5px 5px;
	border-radius: 2px;
	text-align: center;
	font-size: 0.8rem;
    display: flex;
    align-items: center;
}
.creative .content03,
.creative .content04,
.creative .content05 {
	padding-top: 60px;
	padding-bottom: 40px;
}
.creative .content03 .linkbox,
.creative .content04 .linkbox,
.creative .content05 .linkbox{
	width: 30%;
	margin: 0 auto 30px auto;
}
.creative .content04 ul{
	width: 90%;
	margin: 0 auto 60px auto;
	display: flex;
	flex-wrap: wrap;
}
.creative .content04 ul li{
	width: 25%;
	margin: 0 0 50px 0;
}
.creative .content04 ul li:nth-child(1),
.creative .content04 ul li:nth-child(2){
	width: 50%;
}


.creative .content05 ul{
	width: 80%;
	margin: 0 auto 60px auto;
	display: flex;
	flex-wrap: wrap;
}
.creative .content05 ul li{
	width: 20%;
	margin: 0 0 50px 0;
}
.creative .content06 p{
	margin-bottom: 60px;
}
.content06 h2:after{
	content: none;
}
.content06 img{
	width: 80%;
	display: block;
	margin: 0 auto 60px auto;
}

.content07 h3{
	text-align: center;
	font-weight: bold;
	margin-bottom: 40px;
} 
.content07 ul{
	width: 60%;
	margin: 0 auto;
}
.content07 ul li{
	display: flex;
	margin-bottom: 40px;
}
.content07 ul li h4{
    width: 25%;
    margin-right: 5%;
    display: flex;
    align-items: center;
  justify-content: center;
  background-image: url(../images/creative_arrow_white.webp);
  background-position: bottom center;
  background-size: 101% auto;
	border: 1px solid #fff;
    padding: 4% 0 10% 0;
    background-repeat: no-repeat;
    text-align: center;
}
.content07 ul li:nth-child(1) h4{background-color: #f290c1;}
.content07 ul li:nth-child(2) h4{background-color: #f07ab5;}
.content07 ul li:nth-child(3) h4{background-color: #eb4e9d;}
.content07 ul li:nth-child(4) h4{background-color: #e62284;}
.content07 ul li h4 span{
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
	display: block;
	}
.content07 ul li p{
	width: 70%;
    display: flex;
    margin-bottom: 0; 
    text-align: justify;
}
.creative .swiper-slide h6,
.creative .swiper-slide p{
	text-align: left;
	line-height: 1.4;
}
.creative .swiper-slide img{
	width: 100%;
	margin-bottom: 10px;
}
.creative .swiper-slide h6{
	font-weight: bold;
	font-size: 1.05rem;
	margin-bottom: 15px;
}
.creative .swiper-slide{
	background-color: #fff;
	height: auto;
}
.creative .swiper-slide > div {
	padding: 10px 10px;
	box-sizing: border-box;
	height: 100%;
}
.swiper-pagination {
    position: relative;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    padding-top: 30px;
}
.content04 li img{
	width: 100%;
	height: auto;
}
.content05 li img{
	width: 100%;
	height: auto;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 0;
}
.swiper-pagination-bullet{
	border-radius: 0;
	width: 10%;
}
.swiper-pagination-bullet-active{
	background-color: #de007f;
}
.creative .content04 .caselist{
	position: relative;
}
.creative .content04 .caselist li{
	transition: all 1.0s ease-in-out;
	opacity: 1;
	max-width: 100%;
}
.creative .content04 .caselist li.none{
	opacity: 0;
	max-width: 0;
	overflow: hidden;
}
.creative .content04 .caselist li img{
}
.creative .content04 .caselist li.active{
	top: 0;
	left: 0;
	opacity: 1;
	max-width: 100%;
}
.creative .content04 .caselist li.active img{
}
/**************************/
/********** モバイル表示 **********/
/**************************/
@media screen and (max-width:800px) { 


/********** header **********/

header .fv li {
    width: 33.333%;
    padding: 28% 0 0 0;
}


/********** footer **********/



/********** contents **********/
.copy h1 {
    font-size:4.5vw;
    line-height: 1.8;
}
.copy h1 span {
    font-size: 3.2vw;
    margin-bottom: 8%;
}

.copy p {
    font-size: 3vw;
    margin-bottom: 4%;
    line-height: 1.6;
}
.creative h1 + p {
    text-align: justify;
}
.content01 ul li{
	width: 48%;
	margin-right: 4%;
	float: left;
	margin-bottom: 8%;
}
.content01 ul li:nth-child(3n){
	margin-right: 4%;
}
.content01 ul li:nth-child(2n){
	margin-right:0;
}
.creative .content02 .pbox p {
    text-align: justify;
}
.creative .content02 .btnbox {
    display: block;
    padding: 0;
    margin-bottom: 3%;
}
.creative .content02 .btnbox > div{
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
}
.creative .content02 .acbox p{
    text-align: justify;
}
.creative .content02 .pbox {
    background-image: url(../images/sp_creative_img01.webp);
}
.content02 li,
.content03 li {
	width: 31%;
	margin-right: 3.5%;
    float: left;
}
.content02 li:nth-child(4n),
.content03 li:nth-child(4n) {
	margin-right: 3.5%;
}
.content02 li:nth-child(3n),
.content03 li:nth-child(3n) {
	margin-right: 0;
}
.content02 .service h4 img{
	width: 30%;
	margin-bottom: 5%;
}
.content03 .taglist{
	width: 90%;
}
.content03 .taglist ul li{
	width: 100%;
}
.creative .content03 .taglist > ul > li {
    display: block;
    margin-right: 0;
    float: none;
		margin-bottom: 10px;
}
.creative .content03 .taglist > ul > li h3{
	width: 100%;
    margin-right: 0;
        box-sizing: border-box;
        margin-bottom: 10px;
}
.creative .content03 .taglist ul > li ul {
	text-align: center;
	display: block;
	margin-bottom: 20px;
}
.creative .content03 .taglist ul > li ul li {
        margin-bottom: 10px;
        margin-right: 0;
        box-sizing: border-box;
        display: inline-block;
        width: auto;
        line-height: 1.6;
        margin: 2px 0px;
        float: none;
}
.creative .content03 .taglist ul > li ul li a{
        font-size: 0.8rem;
}
.creative .content03, .creative .content04, .creative .content05 {
    padding-top: 30px;
    padding-bottom: 20px;
}
.creative .content04 ul li {
    width: 50%;
    margin: 0 0 20px 0;
}

.creative .content04 ul li:nth-child(1),
.creative .content04 ul li:nth-child(2){
	width: 100%;
}
.creative .content04 ul {
    margin: 0 auto 20px auto;
}
.creative .content05 ul li {
    width: calc(100% / 3);
    margin: 0 0 30px 0;
}
.creative .content06 .cwrap{
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}
.creative .content06 p {
   text-align: justify;
}
.content06 img {
    width: 100%;
}
.content07 ul {
    width: 100%;
}
.content07 ul li h4 {
    text-align: center;
    width: 30%;
}
.content07 ul li h4 span{
	font-size: 3.5vw;
}
.creative .acbox {
    width: 94%;
}
.content02 .acbox li {
        width: 100%;
        float: none;
}
.creative .acbtn {
        font-size: 3.6vw;
}
.creative  a.acbtn {
        width: 100%;
        text-align: right;
        margin-bottom: 10px;
}

.creative .acbtn span {
    font-size: 4.6vw;
}
.content03 ul {
    text-align: center;
    width: 100%;
    margin: 0 auto;
}
.creative .accontent .linkbox {
    width: 80%;
}
.creative .content03 .linkbox,
.creative .content04 .linkbox,
.creative .content05 .linkbox {
    width: 80%;
}




}