@charset "UTF-8";
/*
NIKKEI
第17回全中国選抜日本語スピーチコンテスト 
WE WORKS 2024.04 CUSTOM.CSS
*/



/* Hero ============================================== */
#hero { position: relative; margin: 0; padding: 0; width: 100%; height: 85vh; background: url("../images/top/jsc17-hero.jpg") 50% 50% no-repeat #000; background-size: cover; /*display: grid; place-items: center;*/ }
#hero h2 { display: inline-block; margin: 20px 0 0 20px; width: 140px; }
#hero h2 img { width: 100%; }
/* タイトル画像 */
#hero #top-item { margin: 8% 0 0 10%; width: 72%; z-index: 2; }
#hero #top-item img { width: 100%; }
@media(max-width:768px) {
#hero { position: relative; margin: 0; height: 85vh; background: url("../images/top/jsc17-hero.jpg") 100% 50% no-repeat; background-size: cover; display: grid; place-items: center; }
#hero h2 { display: none; }
#hero #top-item { margin: 0 auto; width: 90%; }
}




/* BASIC CONTAINER & TEXT ============================================== */
.container { margin: 0 auto; width: 90%; }
.container h2 { display: inline-block; margin: 0 auto 1.em; padding: 0 0.5em 0.1em; border-bottom: 3px solid #8ac43f; font-family: "brandon-grotesque", "Open Sans", sans-serif; font-size: 18px; font-weight: 600; line-height: 1.1; text-align: center; color: #000; }
.container h2 span { font-size: 28px; }
.container p { margin: 0 auto; font-family: "Noto Sans JP", "brandon-grotesque", "Open Sans", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.75; text-align: left; color: #333; }
@media(max-width:768px) {
.container { width: 90%; }
.containe h2 { font-size: 16px; }
.containe h2 span { font-size: 24px; }
.containe p { font-size: 14px; }
}

 
 
 

/* Concept - TopPage ============================================== */
section#concept { position: relative; margin: 0 auto; padding: 80px 0; overflow: hidden; width: 100%; 
background-image:
repeating-linear-gradient(
90deg,
#eee ,
#eee 1px,
transparent 1px,
transparent 10px
),
repeating-linear-gradient(
0deg,
#eee ,
#eee 1px,
#fff 1px,
#fff 10px
);
}
section#concept .container { width: 80%; }
section#concept .container p { margin: 0 auto; font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 500; line-height: 1.75; color: #000; }
section#concept .container .conceptbox { display: flex; margin-bottom: 40px; }
section#concept .container .conceptbox div.movie { width: 60%; margin-right: 2%; }
section#concept .container .conceptbox div.ad { width: 38%; }
div.movie div.iframe { width: 100%; margin: 0; padding-top: 56.25%; }
div.movie div.iframe iframe { border: 0; }
div.movie a.btn-movie { display: block; margin: 10px auto 0; width: 80%; }
div.movie a.btn-movie:hover { opacity: 0.8; }
div.movie a.btn-movie img { width: 100%; }
div.movie p { margin: 0.5em auto 0!important; font-size: 12px!important; text-align: center!important; color: #999!important; }
section#concept .container .conceptbox div.ad img { margin: 0 auto 10px; width: 80%; }
section#concept .container .conceptbox div.ad img.adimg { width: 100%; }
section#concept .container .conceptbox div.ad p { mfont-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; }
section#concept .container .conceptbox div.ad p a { color: #369; text-decoration: underline; }
@media(max-width:768px) {
section#concept { padding: 60px 0; }
section#concept .container { width: 90%; }
section#concept .container .conceptbox { flex-direction: column; }
section#concept .container .conceptbox div.movie { width: 100%; margin-right: 0%; margin-bottom: 20px; }
section#concept .container .conceptbox div.ad { width: 100%; }
div.movie a.btn-movie { width: 100%; }
}




/* Rule - TopPage ============================================== */
section#rule { position: relative; margin: 0 auto; padding: 80px 0; overflow: hidden; width: 100%; }
section#rule .container { width: 80%; }
section#rule .container p { margin: 0 auto; font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.75; color: #000; }
section#rule .container p span { font-weight: 600; }
section#rule .container .rulebox { display: flex; margin-bottom: 40px; }
section#rule .container .rulebox div.txt { width: 50%; margin-right: 2%; }
section#rule .container .rulebox div.ph { width: 48%; }
section#rule .container .rulebox div.ph img { margin: 0 auto 10px; width: 100%; }
@media(max-width:768px) {
section#rule { padding: 60px 0; }
section#rule .container { width: 90%; }
section#rule .container .rulebox { flex-direction: column; }
section#rule .container .rulebox div.txt { width: 100%; margin-right: 0%; margin-bottom: 20px; }
section#rule .container .rulebox div.ph { width: 100%; }
}








/* Agenda - TopPage ============================================== */
section#agenda { position: relative; margin: 0; padding: 80px 0; background: #f9f7f4; width: 100%; }
@media(max-width:768px) {
section#agenda { padding: 60px 0; }
}

/* agenda box */
.abendabox { margin: 0 auto; border: 0;  width: 100%; }
.abendabox p { margin: 0.5em auto 2em!important; font-size: 12px!important; text-align: center!important; color: #666!important; }

@media(max-width:768px) {
.abendabox { width: 100%; }
}

/* agenda flex */
.agenda-flex { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; margin: 20px 0 20px; text-align: left; width: 100%; flex-wrap: wrap; }
.agenda-flex div { margin: 0 0.25%; width: 24.5%; text-align: center; }
.agenda-flex div img { margin: 0 auto 10px; border-radius: 50%; width: 90%; }
.agenda-flex div img.crown { margin: 0 auto 10px; border-radius: 0; width: 50%; }
.agenda-flex div img.movie { margin: 0 auto 0px; border-radius: 0; width: 10%; }
.agenda-flex div h4,
.agenda-flex div h5,
.agenda-flex div h6 { margin: 0 auto; font-weight: 500; text-align: center; line-height: 1.25; text-decoration: none; }
.agenda-flex div h4 { margin-bottom: 0.5em; font-size: 20px; font-weight: 600; color: #000; }
.agenda-flex div h4 rt { line-height: 1.1; color: #999!important; }
.agenda-flex div h5 { margin-bottom: 0.75em; font-size: 16px; font-weight: 600; color: #8ac43f; line-height: 1.4; }
.agenda-flex div h6 { display: inline-block; margin: 0 auto 0.25em; padding: 0 1em; border-left: 1px solid #0c5a92; border-right: 1px solid #0c5a92; font-size: 12px; font-weight: 500; text-align: center!important; text-decoration: underline; color: #0c5a92; width: auto; }
.agenda-flex div hr { margin: 0 auto 8px; border: 0; border-bottom: 3px solid #000; width: 80%; }
@media(max-width:768px) {
.agenda-flex div { margin: 0 1% 20px; width: 48%; }
.agenda-flex div:first-child { margin: 0 26% 20px;  }
}




/* Activities - TopPage ============================================== */
section#activities { position: relative; width: 100%; margin: 0; padding: 80px 0; border-bottom: 1px solid #ccc; overflow: hidden; background-color: #fff; }
section#activities .container .activitiesbox { display: flex; margin: 0; }
section#activities .container .activitiesbox div { margin: 0 0.5%; width: 32%; }
section#activities .container .activitiesbox div img { margin-bottom: 5px; width: 100%; }
section#activities .container .activitiesbox div p { margin: 0; font-size: 14px; color: #666; text-align: center; }
@media(max-width:768px) {
section#activities .container .activitiesbox { flex-direction: column; }
section#activities .container .activitiesbox div { margin: 0 0 20px; width: 100%; }
section#activities .container .activitiesbox div:last-child { margin-bottom: 0; }
}





/* Outline - TopPage ============================================== */
section#outline { position: relative; width: 100%; margin: 0; padding: 80px 0; border-bottom: 1px solid #ccc; overflow: hidden; background-color: #fff; }
section#outline .container p { margin-top: 1em; font-size: 14px; color: #888; text-align: right; }
.outline { }
.outline dl { display: flex; margin: 0 auto 0; padding: 1.2em 2em 1.2em 0; border-top: 1px solid #999; width: 100%; }
.outline dl:last-of-type { border-bottom: 1px solid #999; }
.outline dl.wht { background-color: #fff; }
.outline dl dt,
.outline dl dd { text-align: left; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.outline dl dt { padding-left: 2em; font-size: 16px; font-weight: 400; color: #000; width: 25%; }
.outline dl dd { font-size: 16px; font-weight: 500; color: #000; width: auto; }
/* logo image */
.outline dl dd img { display: inline-block; margin: 2px 15px 2px 0; height: auto; }
.outline dl dd img.jfe { width: 140px; }
.outline dl dd img.seven { width: 240px; }
.outline dl dd img.nakatake { width: 240px; }
.outline dl dd img.yamaso { width: 240px; }
.outline dl dd img.minamifuji { width: 180px; }
.outline dl dd img.jal { width: 300px; }
@media(max-width:768px) {
section#outline { padding: 60px 0; }
section#outline .container p { text-align: left; }
.outline dl { padding: 1.2em 1em; flex-wrap: wrap; width: 100%; }
.outline dl dt { width: 100%; min-width: 100%; margin: 0 0 0.4em 0; padding-left: 0; }
.outline dl dd { width: 100%; }
/* logo image */
.outline dl dd img { display: block; margin: 0 auto 15px; }
.outline dl dd img.jfe { width: 60%; }
.outline dl dd img.seven { width: 90%; }
.outline dl dd img.nakatake { width: 90%; }
.outline dl dd img.yamaso { width: 90%; }
.outline dl dd img.minamifuji { width: 70%; }
.outline dl dd img.jal { width: 98%; }
}




/* ARCHIVES - TopPage ============================================== */
section#archives { position: relative; width: 100%; margin: 0; padding: 80px 0; border-bottom: 1px solid #ccc; overflow: hidden; background-color: #fff; 
background-image:
repeating-linear-gradient(
90deg,
#eee ,
#eee 1px,
transparent 1px,
transparent 10px
),
repeating-linear-gradient(
0deg,
#eee ,
#eee 1px,
#fff 1px,
#fff 10px
);
}
section#archives .container .archivesbox { display: flex; flex-wrap: wrap; margin: 0; }
section#archives .container .archivesbox div { margin: 0 5px 10px 0; width: 120px; }
section#archives .container .archivesbox div a { display: inline-block; padding: 0.5em 2em; border-radius: 14px; background-color: #8ac43f; font-size: 14px; font-weight: 600; line-height: 1.0; color: #fff; text-align: center; text-decoration: none; width: 100%; }
section#archives .container .archivesbox div a:hover { background-color: #39b34a; text-decoration: underline; }
section#archives .container .archivesbox div a.none { background-color: #ccc; pointer-events: none!important; }
@media(max-width:768px) {
section#archives .container .archivesbox div { margin: 0 0.5% 10px; width: 24%!important; }
section#archives .container .archivesbox div a { padding: 0.5em; font-size: 12px; width: 100%; }
}



/* advertisement - TopPage ============================================== */
.adbox { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 40px 0; }
.adbox div { margin: 0; width: 24%; }
.adbox div img { width: 100%; }
@media(max-width:768px) {
.adbox { flex-direction: column; margin: 40px 0; }
.adbox div { margin: 0 0 15px 0; width: 100%; }
.adbox div:last-child { margin-bottom: 0; }
}


/* Contact - TopPage ============================================== */
section#contact { margin: 0 auto; padding: 80px 0; border: 0; }
section#contact h2 { margin: 0 0 20px; }
section#contact p { margin: 0 0 10px; font-size: 14px; font-weight: 500; color: #000; }
section#contact a { display: block; margin: 0; padding: 0.25em; border: 1px solid #999; border-radius: 1em; font-size: 14px; font-weight: 400; text-align: center; letter-spacing: 0; color: #999; text-decoration: none; width: 500px; }
section#contact a:hover { background-color: #efefef; color: #08c; }
section#contact a i { color: #ff0!important; }
@media(max-width:768px) {
section#contact { padding: 60px 0; }
section#contact a { width: 100%; }
}






/* Footer ============================================== */
footer#footer { margin: 0; padding: 40px 0; background: #000; width: 100%; }
footer#footer .container { display: flex; justify-content: space-between; flex-direction: row-reverse; }
footer#footer .container .logo { margin-left: 2%; width: 8%; }
footer#footer .container .logo img { width: 100%; }
footer#footer .container .text { margin: 0; padding: 0; width: 80%; }
footer#footer .container .text p,
footer#footer .container .text a { margin: 0; font-size: 12px; font-weight: 400; font-family: "Noto Sans JP", sans-serif; line-height: 1.25; text-align: center; color: #fff; text-decoration: none; letter-spacing: 0; }
footer#footer .container .text p { margin: 1em 0 0; font-size: 12px; line-height: 1.5; text-align: left; color: #ccc; }
footer#footer .container .text a { margin-left: 0em; padding-left: 1em; padding-right: 1em; border-left: 1px solid #fff; }
footer#footer .container .text a:last-of-type,
footer#footer .container .text a.last { padding-right: 1em; border-right: 1px solid #fff; }
footer#footer .container .text a:hover { text-decoration: underline; }
@media(max-width:768px) {
footer#footer .container { display: flex; flex-direction: column; text-align: left; }
footer#footer .container .logo { width: 30%; margin: 0 auto 20px; }
footer#footer .container .logo img { width: 100%; }
footer#footer .container .text { width: 100%; margin: 0; padding: 0; }
footer#footer .container .text p { margin-top: 2em; line-height: 1.75; text-align: center; }
footer#footer .container .text a { display: block; margin-left: 0; padding-left: 0; border: 0; line-height: 1.75; }
footer#footer .container .text a:last-of-type,
footer#footer .container .text a.last { padding-right: 0; border-right: none; }
}








/* cookie同意バナー */
.cookie-consent {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
font-size: 12px;
color: #fff;
background: rgba(0,0,0,0.7);
padding: 1em 2em;
box-sizing: border-box;
visibility: hidden;
z-index: 9999;
}
.cookie-consent.is-show {
visibility: visible;
}
/*.policy-link, :link, :visited, :hover, :active {
color: rgb(0, 136, 255);
font-size: 15px;
text-decoration: none;
}*/
.cookie-agree, 
.cookie-reject {
color: #fff;
background: dodgerblue;
padding: 0.5em 1em;
margin-left: 15px;
}
.cookie-agree:hover, .cookie-reject:hover {
cursor: pointer;
}
/* パッと消える */
.cc-hide1 {
display: none;
}
/* ゆっくり消える */
.cc-hide2 {
animation: hide 1s linear 0s;
animation-fill-mode: forwards;
}
@keyframes hide {
from {
opacity: 1;
}
to {
opacity: 0;
visibility: hidden;
}
}
/* メディアクエリ */
@media screen and (max-width: 600px) {
.cookie-consent {
flex-direction: column;
}
.cookie-text {
margin-bottom: 1em;
}
}
/* cookie同意カスタム */
.cookie-text { width: 85%; }
.cookie-agree,
.cookie-reject { width: 10%; font-family: "Noto Sans JP", sans-serif; font-size: 12px; font-weight: 500; }
.cookie-agree { background: #003E70; }
.cookie-reject { background: #999; }
.cookie-consent h6,
.cookie-consent p { margin: 0; font-family: "Noto Sans JP", sans-serif; letter-spacing: 0.2; text-align: left; color: #fff; }
.cookie-consent h6 { font-size: 16px; font-weight: 500; }
.cookie-consent p { font-size: 12px; }
.cookie-consent p a { color: rgb(0, 136, 255); text-decoration: none; }
@media(max-width:768px) {
.cookie-consent {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
background: rgba(0,0,0,0.7);
padding: 2em;
}
.cookie-text { width: 100%; }
.cookie-agree { width: 100%; margin-left: 0; margin-bottom: 0.5em; }
.cookie-reject { width: 100%; margin-left: 0; }
}