/* Pickup
=================================== */

#pickup #container { background:url(../img/bg_pickup.jpg) fixed; background-size:cover; }
#pickup #pagebody { background-color:#fff; color:#333; }
#pagettl-box:after {content:"";clear:both;display:block;}
#pickup #pagettl { float:left; }
#pk-notice { float:right; margin:25px 20px 0 0; font-size:90%; line-height:140%; }

@keyframes pk-fade { 0% { opacity:0; filter: blur(1.5rem); } 100% { opacity:1; filter: blur(0); } }

#pk-ind-list ul { display:flex; flex-wrap:wrap; }
#pk-ind-list li { margin:0 1% 1% 0; width:calc(97% / 4); height:auto; aspect-ratio:3 / 4; /* for animation */ opacity:0; animation: pk-fade 1.0s forwards; }
#pk-ind-list li:nth-child(4n) { margin:0 0 1% 0; }

#pk-ind-list li p { position:relative; width:100%; height:100%; /* hover */ transition:opacity 0.2s ease-out; }
@media (hover: hover) { #pk-ind-list li p:hover { opacity:0.7; text-decoration:none; } }
#pk-ind-list li p a i { position:absolute; display:block; z-index:1; left:0; top:0; width:100%; height:100%; background-position:center top; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; box-shadow:0px 0px 10px rgba(0,0,0,0.03) inset; }
#pk-ind-list li:nth-child(1) p a i { background-image:url(../img/pickup/pickup1.jpg); }
#pk-ind-list li:nth-child(2) p a i { background-image:url(../img/pickup/pickup2.jpg); }
#pk-ind-list li:nth-child(3) p a i { background-image:url(../img/pickup/pickup3.jpg); }
#pk-ind-list li:nth-child(4) p a i { background-image:url(../img/pickup/pickup4.jpg); }
#pk-ind-list li:nth-child(5) p a i { background-image:url(../img/pickup/pickup5.jpg); }
#pk-ind-list li:nth-child(6) p a i { background-image:url(../img/pickup/pickup6.jpg); }
#pk-ind-list li:nth-child(7) p a i { background-image:url(../img/pickup/pickup7.jpg); }

/* blank */
.pk-ind-list-blank span i { position:absolute; display:block; z-index:1; left:0; top:0; width:100%; height:100%; background:url(../img/pickup/pickup_blank.png) center center no-repeat; background-size:cover; text-indent:-9999px; }
@media (hover: hover) { .pk-ind-list-blank p:hover { opacity:1!important; } }

#pk-ind-list li p a i::after{ position:absolute; z-index:3; content:""; bottom:0; display:block; background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3)); width:100%; height:50%; }
#pk-ind-list li p a .name { display:block; position:absolute; z-index:3; bottom:5%; left:5%; color:#fff; text-decoration:none; text-shadow:0px 0px 10px rgba(0,0,0,0.2), 0px 0px 5px rgba(0,0,0,0.4); }
#pk-ind-list li p a .name span { display:block; }
#pk-ind-list li p a .name .jp { margin:0 0 2% -1%; font-family:dnp-shuei-ymincho-std, serif; font-style:normal; font-feature-settings:"palt"; font-weight:500; font-size:235%; line-height:110%; }
#pk-ind-list li p a .name .en { font-family:'Roboto Condensed'; font-weight:bold; }
#pk-ind-list li:nth-child(n+4) p a .name .en { font-size:90%; }
#pk-ind-list li p a .name span.flag { display:inline-block; position:relative; top:0.2em; margin-left:0.5em; }

#pk-nav { margin-bottom:20px; }
#pk-nav ul { /* for space */ font-size:0; background-color:#000; }
#pk-nav ul li { display:inline-block; vertical-align:top; /* for space */ font-size:0.9rem; }
#pk-nav ul li a { display:block; width:100%; padding:0.8em 0; box-sizing:border-box; background-color:#000; color:#fff; line-height:130%; font-family:ryo-gothic-plusn, sans-serif; text-align:center; text-decoration:none; }
#pk-nav ul li:nth-child(-n+3) { width:calc(100% / 3); }
#pk-nav ul li:nth-child(n+4) { width:calc(100% / 4); }
#pk-nav ul li:nth-child(1) a,
#pk-nav ul li:nth-child(2) a,
#pk-nav ul li:nth-child(4) a,
#pk-nav ul li:nth-child(5) a,
#pk-nav ul li:nth-child(6) a { border-right:#333 1px solid; }
#pk-nav ul li:nth-child(-n+3) a { border-bottom:#333 1px solid; }
#pk-nav a:after { position:relative; top:0.25em; right:0.3em; float:right; content:""; vertical-align:middle; width:0.8em; height:0.8em; background:url(../img/arrow.png) center center no-repeat; background-size:contain; }

@media (hover: hover) { #pk-nav ul li a:hover { background-color:#4aab01; } }
.pk1 #pk-nav-itm1 a,
.pk2 #pk-nav-itm2 a,
.pk3 #pk-nav-itm3 a,
.pk4 #pk-nav-itm4 a,
.pk5 #pk-nav-itm5 a,
.pk6 #pk-nav-itm6 a,
.pk7 #pk-nav-itm7 a{ background-color:#4aab01; }


/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

#pickup #pagebody { padding-top:0; }
#pickup #pagettl { float:none; border-bottom:#ddd 1px solid; }
#pk-notice { float:none; margin:5px 0 10px 10px; font-size:80%; }

#pk-notice { float:none; font-size:80%; }

#pk-ind-list li { width:49.5%; margin:0 1% 1.0vw 0; aspect-ratio:1 / 1; }
#pk-ind-list li:nth-child(2n) { margin:0 0 1.0vw 0; }
#pk-ind-list li p a .name { bottom:6%; left:6%; text-align:left; }
#pk-ind-list li p a .name .jp { font-size:7.0vw!important; }
#pk-ind-list li p a .name .en { font-size:2.5vw!important; }
#pk-ind-list li p a i { background-position:0 0; }

#pk-nav ul li { width:100%!important; font-size:0.8rem; }
#pk-nav ul li a { border-right:none; border-bottom:#333 1px solid; }

}


/* detail
----------------------------------- */

.pk-name { margin-bottom:20px; }
.pk-name .jp, .pk-name .en { display:block; }
.pk-name .jp .tbr { display:inline-block; }
.pk-name .jp { font-family:dnp-shuei-ymincho-std, serif; font-style:normal; font-weight:500; padding-bottom:0.1em; font-size:320%; line-height:120%; font-feature-settings:"palt"; }
.pk-name .en { font-family:'Roboto Condensed'; font-weight:bold; letter-spacing:0.025em; font-size:100%; }
.pk-name span.flag { display:inline-block; position:relative; top:0.1em; margin-left:0.5em; }
.pk-name .rank { display:block; margin-top:0.5em; font-weight:bold; color:#999; }

.pk-p { float:right; width:380px; padding:0 0 20px 30px; background-color:#fff; /* for animation */ opacity:0; animation: pk-fade 1.0s forwards; }
.pk-p p { position:relative; width:100%; height:0; padding-top:100%; }
.pk-p p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
#pk-p1 p span { background-image:url(../img/pickup/pickup1.jpg); }
#pk-p2 p span { background-image:url(../img/pickup/pickup2.jpg); }
#pk-p3 p span { background-image:url(../img/pickup/pickup3.jpg); }
#pk-p4 p span { background-image:url(../img/pickup/pickup4.jpg); }
#pk-p5 p span { background-image:url(../img/pickup/pickup5.jpg); }
#pk-p6 p span { background-image:url(../img/pickup/pickup6.jpg); }
#pk-p7 p span { background-image:url(../img/pickup/pickup7.jpg); }

.pk-lead { font-size:110%; line-height:150%; color:#1c9503; margin-bottom:10px; font-weight:800; font-feature-settings:"palt"; }
.pk-subttl { margin-bottom:10px; font-size:140%; line-height:140%; font-weight:800; font-feature-settings:"palt"; }
.pk-sttl { font-size:110%; line-height:150%; color:#1c9503; margin-bottom:10px; padding-bottom:7px; border-bottom:1px solid #ccc; font-weight:800; font-feature-settings:"palt"; }
.pk-txt { margin-bottom:25px; font-size:95%; line-height:170%; }

.pk-record { margin-bottom:0.5em; padding:0.8em 0.8em 1.0em 0.8em; background-color:#fce300; border-radius:10px; }
.pk6 .pk-record,
.pk7 .pk-record { width:530px; box-sizing: border-box; }
.pk-record-list { display:flex; flex-direction:row; flex-wrap:wrap; }
.pk-record-list li { display:flex; margin:0.7em 0 0 0; }
.pk-record-list li dl { display:flex; margin:0 0.5em 0 0; }
.pk-record-list li dl dt { font-weight:600; color:#1c9503; margin:0 0.25em 0 0; }
.pk-record-list li dl dd { margin:0 0.5em 0 0; }
.pk-record-t {  font-size:80%; margin-top:0.7em; }

/* ------ Media Queries ------ */

@media all and (max-width: 767px) {

#pk-p { float:none; margin-left:0; margin-bottom:10px; position:relative; width:100%; height:0; padding-top:63.82%; }
#pk-p span { position:absolute; left:0; top:0; width:100%; height:100%; background-position:left top; background-size:cover; }

.pk-p { float:none; width:100%; margin:0 0 20px 0; padding:0; }

.pk-name { text-align:center; }
.pk-name .jp { font-size:250%; }
.pk4 .pk-name .jp,
.pk5 .pk-name .jp,
.pk6 .pk-name .jp,
.pk7 .pk-name .jp { font-size:220%; letter-spacing:-0.02em; }
.pk-name .en { font-size:90%; }
.pk-name .rank { font-size:85%; }

.pk-lead { text-align:center; }
.pk-subttl { margin-bottom:5px; font-size:120%; text-align:center; }
.pk-sttl { font-size:100%; }
.pk-txt { margin-bottom:15px; font-size:85%; }

.pk-record { margin-bottom:20px; font-size:85%; }
.pk6 .pk-record,
.pk7 .pk-record { width:100%; }

}