@import url('https://fonts.googleapis.com/css2?family=Qwigley&display=swap');

/* フレーム設定-------------------------------------------------------------------------------- */

#adspecial_bcp_202006{
padding: 0;

}

#adspecial_bcp_202006.adspecial_type1{
max-width:none !important;
width:100% !important;
}

#adspecial_bcp_202006.adspecial_type1 .content-inner {
max-width: 1000px;
margin: 0 auto;
padding: 0 16px;
}

footer{
margin-top:0;
}


.block_sponsored {
position: relative;
z-index: 5;
background: #fff;
border-top: 1px solid #ccc;
padding: 24px 0;
    text-align: center;
}

body {position: relative;}
body::before {
content: "";
position: fixed;
z-index: -1;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100vh;
background: url(/extra/bcp_202006/media/hero.jpg) no-repeat center center;
background-size: cover;
}

.hero {
position: relative;
height: calc(100vh - 152px);
width: 100%;
}

.hero::before,
.hero::after {
content: "";
position: absolute;
bottom: 0;
right: 30%;
display: block;
width: 2px;
height: 100px;
opacity: 0;
background: #fff;
animation: fadedown 1.5s ease-out 1.5s 1 forwards;
}
.hero::after {
right: calc(30% + 1px);
width: 24px;
height: 24px;
background: none;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
transform-origin: bottom right;
}
@keyframes fadedown {
0% {opacity: 0; bottom: 50%;}
100% {opacity: 1; bottom: 0;}
}



.hero h1 {
position: fixed;
top: 92px;
left: 80px;
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
height: calc(100vh - 152px);
font-size: 2rem;
color: #fff;
line-height: 1.3;
font-feature-settings: "palt" 1;
text-shadow: 1px 1px 3px #000;
}
.hero h1 strong {
display: block;
font-size: 2.5rem;
transform: translate(0,32px);
opacity: 0;
animation: fadeup 0.8s linear 0.5s 1 forwards;
}
.hero h1 span {
display: block;
letter-spacing: -0.05em;
transform: translate(0,32px);
animation: fadeup 0.8s linear 0.8s 1 forwards;
opacity: 0;
}
@keyframes fadeup {
0% {opacity: 0; transform: translate(0,32px);}
100% {opacity: 1; transform: translate(0,0);}
}

.hero h1.hide {opacity: 0; transition: 0.2s;}




h2.adspecial {
position: relative;
margin-bottom: 64px;
font-size: 2rem;
color: #333;
font-feature-settings: "palt" 1;
}
h2.adspecial::before {
position: absolute;
z-index: -1;
bottom: -64px;
left: -64px;
content: "Special";
color: rgb(198,94,129);
font-family: 'Qwigley', cursive, san-serif;
font-size: 10rem;
font-weight: normal;
transform: rotate(-15deg);
}

.overlay,
footer {
position: relative;
z-index: 5;
}


.summary {
display: flex;
align-items: center;
width: 40%;
float: right;
min-height: 100vh;
margin: 0 10% 80px 0;
padding: 48px;
background: rgba(0,0,0,.7);
color: #fff;

}
.summary p {margin-bottom: 16px;}


.special {
clear: both;
position: relative;
padding: 80px 0 160px;
background: #fff;
}
.special::before {
content: "";
position: absolute;
z-index: -1;
top: -50px;
left: 50px;
display: block;
width: 30%;
height: 80%;
background-color: rgba(198,94,129,0.3);
}
.special .panel-item {
width: 48%;
background: #fff;
}
.special .panel-item .panel-thumb {position: relative;}
.special .panel-item:first-of-type .panel-thumb::after,
.special .panel-item:nth-of-type(2) .panel-thumb::after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(152,50,59,.2);
}
.special .panel-item:nth-of-type(2) .panel-thumb::after {background: rgba(45,145,218,.2);}

.special .panel-item .panel-thumb img {filter: grayscale(100%);}

.whitepaper {
padding: 80px 0 160px;
background: rgba(255,255,255,.7);
}
/*
.whitepaper .content-inner {
padding: 64px 16px 48px !important;
background: #fff;
}
*/
.whitepaper h2.adspecial {text-align: center;}
.whitepaper h2.adspecial::before {
bottom: -64px;
left: auto;
right: auto;
content: "Whitepaper";
color: #8fa8cd;
opacity: .7;
}
.whitepaper .panel-item a {display: flex; flex-direction: column; height: 100%;}
.whitepaper .panel-item .panel-thumb {display: flex; align-items: center; justify-content: center; max-height: 252px; height: 100%; padding: 16px;}
.whitepaper .panel-item .panel-thumb img {max-width: 150px; width: auto;}
.whitepaper .panel-item .panel-ttl {margin-top: auto;}



.articles {
padding: 80px 0;
background-color: #f5f5f5;
}
.articles::before {
content: "";
position: absolute;
z-index: -1;
top: -50px;
right: 0;
display: block;
width: 70%;
height: 40%;
background-color: rgba(250,192,56,0.3);
}
.articles h2.adspecial {text-align: right;}
.articles h2.adspecial::before {
bottom: -64px;
left: auto;
right: 0;
content: "Articles";
color: rgb(250,192,56);
}
.articles .panel-item {background-color: #f5f5f5;}

.sponsor {
padding: 80px 0;
background: #fff;
}
.sponsor h2.adspecial::before {
content: "Sponsor";
color: #eee;
}
.sponsor .panel-item {box-shadow: none;}

.panel {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.panel-item {
width: 23%;
margin: 0 1% 24px;
box-shadow: 8px 8px 16px #ccc;
transition: box-shadow .5s;
}
.panel-item:hover {box-shadow: 0 0 0 #ccc;}
.panel-item .panel-a {display: block;}
.panel-item .panel-thumb {
margin-bottom: 16px;
}
.panel-item .panel-thumb img {
width: 100%;
}
.panel-item .panel-ttl {
padding: 0 16px 16px;
}



/* responsive -------------------------------------------------------------------------------- */

@media screen and (max-width:960px){
  .summary {
    width: 100%;
    min-height: 0;
    float: none;
    margin: 0;
    padding-bottom: 100px;
    background: rgba(0,0,0,.9);
  }
  h2.adspecial::before {left: 0; opacity: .3;}
  .panel-item {width: 48%;}
  .whitepaper .content-inner {margin: 0 48px !important;}
  .whitepaper h2.adspecial::before {font-size: 7rem;}

}




@media screen and (max-width:600px){
  .hero h1 {left: 24px; font-size: 1.6rem;}
  .summary {padding: 24px 16px 64px;}

  .special .panel-item,
  .panel-item {width: 100%;}

  .special::before {left: 0; height: calc(100% + 50px);}

  .whitepaper .content-inner {margin: 0 24px !important;}
  .whitepaper h2.adspecial::before {font-size: 5rem;}

  .articles .panel-item {margin-bottom: 16px;}
  .articles .panel-item a {display: flex; align-items: center; padding: 16px;}
  .articles .panel-item .panel-thumb {width: 100px; margin: 0 8px 0 0; flex-shrink: 0;}
  .articles .panel-item .panel-ttl {padding: 0; font-size: 0.85rem; line-height: 1.5;}

}