@charset "utf-8";
/* CSS Document */
body { background-color: #272727; color: #E4E4E4; line-height: 2; font-size: 1.171303074670571vw;font-family: 'Noto Sans JP', sans-serif; line-height: 1.8;}
header { padding: 3.513909224011713vw 0; border-top:0.7320644216691069vw solid #E9E328; background-color: #000;}
header h1 img { width: 40.05856515373353vw; height: auto; }
header h1 { text-align: center; line-height: 0;}

#main { height: 64.20204978038067vw; background-image: url("../img/bg.png"); background-position: center; border-bottom:0.7320644216691069vw solid #E9E328;}
#main img { width: 100%; height: 100%; object-fit: contain; object-position: center;}

a.bt {
    display: inline-block;
    background-color: #FFCD00;
    height: 44px;
    border-radius: 22px;
    color: #000;
    text-decoration: none;
    line-height: 44px;
    padding: 0 2em;
    font-weight: bold;
    margin-top: 20px;
}
div.center {
    text-align: center;
}

#date,.date {
    background-color: rgba(255,255,255,.2); text-align: center;
    width: 60%; margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    padding: 1em 2em;
    z-index: 1; color: #FFCD00; box-sizing: border-box;
}


@media screen and (min-width:701px) {
  #main img { object-fit: contain; object-position: center;}
}

section.box { padding: 5.856515373352855vw 1.464128843338214vw;}
section.box.black { background-color: #000000;}
section.box.yellows { background-color:rgba(220,26,29,1.00); position: relative; }
section.box.end { height: 64.05563689604685vw; background-image: url("../img/end.png"); background-size: cover; background-repeat: no-repeat; background-position: center; border-top:0.7320644216691069vw solid #E9E328; position: relative;}

section.box h2 { color: #E9E328; font-size: 2.635431918008785vw; text-align: center; margin-bottom: 1em; line-height: 1.5;}

.clm2 { width: 62.59150805270864vw; margin: 0 auto; display: flex;justify-content: space-between;}
.clm2 li:nth-child(1) { width: 15.2%;}
.clm2 li img { width: 100%; height: auto;}
.clm2 li:nth-child(2) { width: 78.9%;}

.youtube {  position: relative;border:6px solid #E9E328; box-sizing:border-box;
  width: 100%;
  padding-top: 56.25%;  }
.youtube iframe { position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important; }
.videoWrap { width: 77.52562225475842vw; margin: 0 auto;}

.yellow { background-color: rgba(233,227,40,.83); width: 58.63836017569546vw; height: 39.3411420204978vw; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); background-image: url("../img/expo.png"); background-repeat: no-repeat; background-position: center; background-size: 75.40574282147316% auto;}

footer { background-color: #E9E328; text-align: center; padding: 5.563689604685212vw 1.464128843338214vw;}
footer p { color: #000000; font-size: 0.7320644216691069vw; font-weight: bold;}

.sp { display: none;}

a { color: #E9E328; text-decoration: underline;}
a:hover { }

@media screen and (max-width:700px) {
    body { font-size: 3.72093023255814vw;}
    .sp { display: block;}
    .pc { display: none;}
    #main {
    height: auto;
    background-image: none;
}
    #main img {
    width: 100%;
    height: auto;
}
    header {
    border-top: 2.325581395348837vw solid #E9E328;
}
    #main {
        border-bottom: 2.325581395348837vw solid #E9E328;
    }
    section.box.end {border-top: 2.325581395348837vw solid #E9E328;}
    section.box h2 {
    font-size: 6.511627906976744vw;
}
    .clm2 {
    width: auto;
   flex-direction: column;
}
    .clm2 li:nth-child(2) {
    width: auto;
}
    .clm2 li:nth-child(1) {
        width: 30.23255813953488vw; margin: 0 auto 6.7906976744186vw auto;
 line-height: 1;    }
    section.box { padding: 13.95348837209302vw 6.976744186046512vw;}
    .videoWrap { width: auto;}
    footer {padding: 6.976744186046512vw 6.976744186046512vw; text-align: left;}
    
    header h1 img { width: 90vw; }
    header { padding: 12vw 0; }
    section.box.yellows { padding: 13.95348837209302vw 3vw; }
    
    a.bt { padding: 1em 2em; line-height: 1.4; height: auto;}
    a.bt span { display: block;}

#date,.date {
    width: 90%;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
}
    
}
 

.widebanner,.widebanner2 { text-align: center;}

.widebanner img { width: 100%; max-width: 1000px; height: auto; border: .25vw solid #E9E328; box-sizing: border-box;}
figure.widebanner img { /*max-width: 600px;*/ max-width: 100%;}
figure.widebanner{ margin-bottom: 3em; width: 60%; margin-left: auto; margin-right: auto;}
figure.widebanner + p { text-align: center; font-size: 140%;}

.widebanner.widebanner2 img { width: 60%; max-width: 1000px; height: auto; border: .25vw solid #E9E328; box-sizing: border-box;}

a { transition:  opacity .4s ease 0s;}
a:hover { opacity: .5;}
.table tr {  border-bottom: 1px solid #666;}
.table {  margin: 0 auto; width: 75%;}
.table th { color: #E9E328; width: 11em; }
.table.tables th,.table.tables td { display: block; width: auto;  }
.table.tables {
width: 60%;
    margin: 0 auto;
    }
.table.tables th { padding-bottom: 0;}
p.read { text-align: center; margin-bottom: 2em;}
p.reads { text-align: center; margin-top: 2em;}

.table th,.table td { padding: 1em 0;text-align: left;}
.table table { line-height: 1.6;}

section.box.yellows p { color: #000; font-size: 3vw; font-weight: 900; text-align: center; line-height: 1.2;}
section.box.yellows p span { background-color: #000; color: #FFF; font-size: 88%; display: inline-block; padding: .3em; margin-bottom: .3em;}
section.box.yellows p strong { font-size: 90%; line-height: 1;}
section.box.yellows em { display: block; font-size: 100%; font-style: normal; margin-top: 1em; position: absolute; bottom: 1em; left: 50%; transform: translateX(-50%);}

p.idt01 { text-indent: -1em; margin-left: 1em;}

figure.flow { text-align: center;}
figure.flow img { max-width: 1000px; margin-left: auto; margin-right: auto;}
.flowp { max-width: 1000px; margin: 2em auto;}
h3 { max-width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: .8em; font-size: 110%; margin-top: 2em; color: #FFCD00;}
th { text-align: left;}
.flowp td,.flowp th { padding: 1em ; background-color: rgba(255,255,255,.05); border-bottom: 1px solid #000; }
.flowp th { background-color: rgba(255,255,255,.1);}
.flowp tr { }
.flowp td span { color: #CF0003;}

@media screen and (max-width:700px) {
    .flowp td,.flowp th { display: block; }
    
  .table table { font-size: 3.5vw;} 
   .table th,.table td { display: block;} 
    .table th { padding: 1em 0 0em 0; }
    .table { width: 100%;}
    section.box.yellows p { font-size: 4vw;}
    
    .table.tables {
width: auto;
    }
    figure.widebanner{ width: 100%;}
}