@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
html {
    font-size: 16px
}
@media screen and (max-width: 1000px) {
    
}
body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;  
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom
}



.pageTitle {
    padding-top: 0px!important;
}
.pageTitle h1 {
    line-height: 1;
    padding: 15px 0 0px;
}
.pageTitle h1 img {
    height: 23px;
    vertical-align: middle;
}
@media screen and (max-width: 768px) {
    .pageTitle h1 {
        padding: 15px 0 10px;
    }
    .pageTitle h1 img {
        height: auto;
        max-width: 360px;
        width: 50%;
    }
}

.bc-movie-modal { background: #000 !important; }

.containerInner{ position: relative; z-index: 3; }
#contents {
    color: #333;
    position: relative;
    z-index: 1;
}
#cenceptBg{
  background: url(../img/concept_bg1.jpg) center center no-repeat #000;
  background-size: cover;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
}
#contents * {
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
    font-feature-settings: "palt";
    letter-spacing: 0.1em;
    line-height: 2;
}
#mainArea {
    background: #000;
}
#mainImg {
    /* height: 1020px; */
    position: relative;
    /* width: 100%; */
    /* overflow: hidden; */
}
#mainImg img {
    /* position: absolute; */
    /* left: 50%; */
    /* margin-left: -960px; */
    /* max-width: 1920px; */
}
#mainImg p{ position: absolute; right: 3%; bottom: 5%; color: #999; font-size: 12px;  }
#mainImg #kvText {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 220px;
    padding-bottom: 24.5%;
}
#mainImg #kvText span {
    width: 48.1%;
}
#mainImg #kvText img {
    transform: translateY(30px);
    opacity: 0;
    transition: 1s;
    transition-property: transform,opacity;
}
#mainImg #kvText.on img {
    transform: translateY(0);
    opacity: 1;
}
#snsArea {
    text-align: center;
    padding: 0px 0 6%;
}
#snsArea ul {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#snsArea ul li {
    margin: 0 13px;
}
#snsArea ul li a img {
    transition: .25s opacity;
}
#snsArea ul li a:hover img {
    opacity: .75
}
#leadText {
    width: 50.525%;
    margin: auto;
    text-align: center;
    padding: 2.2% 0;
}
#leadText span ,
#snsArea {
    display: block;
    text-align: center;
    transform: translateY(50px);
    opacity: 0;
    transition: .75s;
    transition-property: transform,opacity;
}
.on #leadText span ,
.on #snsArea {
    transform: translateY(0);
    opacity: 1;
}
.on #snsArea {
    transition-delay: .75s
}
#leadText #leadLogo {

}
#leadText #lead {
    padding-top: 9.4%;
    transition-delay: 0.25s;
}
#leadText #date {
    padding-top: 3.6%;
    transition-delay: .5s;
}
#leadText #lead img {
    width: 86.6%;
}
#leadText #date img {
    width: 50%;
}
#eventArea {
    padding: 0rem 0 4rem;
    background: #000;
}
#eventInner {
    width: 100%;
    margin: auto;
    max-width: 1280px;
    background: #fff;
    padding: 5rem 2rem;
    position: relative;
    border: 20px solid #000;
}
#eventInner:before ,
#eventInner:after {
    content: "";
    display: block;
    position: absolute;
    width: 120px;
    height: 180px;
    border: 2px solid #fff;
}
#eventInner:before {
    left: -20px;
    top: -20px;
    border-width: 2px 0 0 2px;
}
#eventInner:after {
    right: -20px;
    bottom: -20px;
    border-width: 0 2px 2px 0;
}
#eventLead {
    text-align: center;
}
#eventLead > * ,
#eventVideo ,
#siteAnnounce > * {
    transform: translateY(50px);
    opacity: 0;
    transition: 1s;
    transition-property: transform,opacity;
}
#eventLead.on > * ,
#eventVideo.on ,
#siteAnnounce.on > * {
    transform: translateY(0);
    opacity: 1;
}
#eventLead .lead {
    font-size: 3.1rem;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 2.5rem;
    font-feature-settings: "palt";
}
#eventLead .text {
    font-size: 1.6rem;
    line-height: 1.6;
    margin-bottom: 3.5rem;
    transition-delay: .25s
}
#eventVideo {
    width: 95%;
    margin: 0 auto 3.5rem;
    max-width: 1080px;
    max-width: 960px;
}
#eventVideo .inner {
    width: 100%;
    margin: 0 auto 2rem;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}
#eventVideo iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
#eventBtn {

}
#eventBtn .btn {
    width: 100%;
    color: #fff;
    text-decoration: none;
    font-size: 1.7rem;
}
#siteAnnounce {
    text-align: center;
}
#siteAnnounce .lead {
    font-size: 2rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}
#siteAnnounce .text {
    font-size: 1.6rem;
    transition-delay: .25s
}




#msgArea{
  position: relative;
  background-color: #000;
}
#msgArea .img{
  opacity: 0;
  transition: all 3s;
}
#msgArea.on .img {
    opacity: 1;
}
#msgArea .msg{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding-left: 10%;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 40%);
  color: #fff;
  letter-spacing: 0.15em;
  text-shadow:0 0 8px rgba(0,0,0,0.5);
  opacity: 0;
  transition: all 1.5s cubic-bezier(0.33, 1, 0.68, 1) .8s;
  transform: translateX(5%);
}
#msgArea.on .msg{ opacity: 1; transform: translateX(0); }

#msgArea .msg p{
  font-size: 1.4vw;
  line-height: 1.8;
  padding: .5em;
}
#msgArea .msg sup{ font-size: 60%; vertical-align: top;  }
#msgArea .msg .note{ font-size: .9vw; color: #ccc; }

h2.maintit{
  text-align: center;
  position: relative;
  margin-bottom: 2.5%;
}
h2.maintit span{
  display: block;
  margin: 0 auto;
}
h2.maintit .logo{
  width: 20%;
  margin-bottom: 1.5%;
  padding: 3px 0;
  overflow: hidden;
}
h2.maintit .tit{
 width: 80%;
 padding: 3px 0;
 overflow: hidden;
}
h2.maintit .logo img{ transform: translateY(20px); position: relative; opacity: 0; transition: all 1s cubic-bezier(0.33, 1, 0.68, 1); }
h2.maintit .tit img{ transform: translateY(30px); position: relative; opacity: 0; transition: all 1.5s cubic-bezier(0.33, 1, 0.68, 1) .5s; }
h2.on.maintit .logo img,h2.on.maintit .tit img{ transform: translateY(0); opacity: 1; }

h2.maintit .bg{
 width: 110%;
 opacity: 0.1;
 position: absolute;
 left: -5%;
 top: -30%;
}
h2.maintit + p{
  font-size: 1.1vw;
  color: #ccc;
  line-height: 2;
  text-align: center;
  opacity: 0;
  position: relative; transition: all 1s cubic-bezier(0.33, 1, 0.68, 1) 1s;
}
h2.maintit.on + p{ opacity: 1; }

#presenArea{
  background: url(../img/presen_bg.jpg) center top no-repeat #000;
  background-size: 100% auto;
  padding: 10% 0 5%;
}

.preMov{ margin: 7% 0; position: relative; opacity: 0;  transition: all 2s; }
.preMov.on{ opacity: 1; }
.preMov .ytVideo{
  max-width: 1200px;
  width: 62.5%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.preMov h3{
  position: absolute;
  right: 5%;
  bottom: 10%;
  text-align: right;
  color: #fff;
  z-index: 2;
  pointer-events: none;
  font-size: 1.2vw;
  font-weight: bold;
}
.preMov h3.left{
  text-align: left;
  right: auto;
  left: 5%;
}
.preMov h3 span{
  display: block;
}
.preMov h3 .tit{
  font-size: 180%;
  line-height: 1.6 !important;
}
.preMov h3 .sub{
  font-size: 80%;
  color: #555;
}

#movieArea{
    background: #000;
    overflow: hidden;
    padding-bottom: 46.25%;
    height: 0;
}

#conceptArea{
  position: relative;
  padding: 10% 0 5%;
}
#conceptArea h2.maintit .tit{
 width: 61%;
}
#conceptArea h2.maintit .bg{
 width: 88%;
 left: 6%;
}
#conceptArea h2.maintit + p{
  font-size: 1.3vw;
}
#conceptArea h2.maintit + p span{
  letter-spacing: -0.3em;
}
.conceptMain{ 
  width: 90%;
  margin: 6% auto;
  position: relative;
  cursor: pointer;
}
.conceptMain .num{
  position: absolute;
  right: 1%;
  top: 3%;
  z-index: 2;
  opacity: 0;
  transition: all 1s cubic-bezier(0.33, 1, 0.68, 1);
  transform:scale(1.8);
}
.conceptMain.on .num{ opacity: 1; transform:scale(1); }
.conceptMain .num img{ width: auto; height: 100px; }

.conceptMain .txt{
  background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 30%);
  color: #fff;
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 36%;
  font-size: 1vw;
  line-height: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 2s .6s;
}
.conceptMain.on .txt{
  opacity: 1;
}
.conceptMain .txt > div{
  width: 75%;
  padding-left: 10%;
  text-align: justify;
}
.conceptMain.left .txt{
  background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 30%);
  right: auto;
  left: 0;
}
.conceptMain.left .txt > div{
  padding-left: 0;
  padding-right: 10%;
}
.conceptMain.left .num{
  right: auto;
  left: 1%;
}

.conceptMain .txt h3{
  font-size: 150%;
  font-weight: bold;
  margin-bottom: .6em;
}
.conceptMain .txt h3 + p{
  margin-bottom: 2em;
  font-size: 90%;
  text-align: justify;
}
.conceptMain .txt .view{
  position: relative;
  border: 1px solid #ccc;
  border-radius:100px;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  text-align: center;
}
.conceptMain .txt .view > span:not(.more){
  width: 20px;
  height: 1px;
  left: 50%;
  top: 50%;
  margin-left: -10px;
  background-color: #fff;
  position: absolute;
  transition: all .5s;
}
.conceptMain .txt .view > span:first-child{
  transform: rotate(90deg);
}
.conceptMain.act .txt .view > span:not(.more){ transform: rotate(-45deg); }
.conceptMain.act .txt .view > span:first-child{
  transform: rotate(45deg);
}

.conceptMain .txt .view .more{
  position: absolute;
  font-size: 10px;
  letter-spacing: 0.2em;
  bottom: -3em;
  left: 0;
  width: 100%;
  text-align: center;
}
.conceptMain.act .txt .view .more,
.conceptMain .txt .view .more.c{ display: none; }
.conceptMain .txt .view .more,
.conceptMain.act .txt .view .more.c{ display: block; }

.conceptList{
  background: url(../img/concept_bg2.png) center top no-repeat;
  background-size: 100% auto;
  padding-bottom: 8%;
  display: none;
}
.conceptList > li:not(.close){
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: 5% auto;
  font-size: .95vw;
  opacity: 0;
}
.conceptList.act > li:not(.close) { opacity: 1; transition: all 1s 1s; }
.conceptList > li:not(.close):nth-of-type(even){
  flex-direction: row-reverse;
}
.conceptList .img{
  width: 53%;
}
.conceptList .txt{
  width: 42%;
  padding: 3%;
}
.conceptList .txt > h3{
  
}
.conceptList .txt > h3 span{
  display: inline-block;
  background-color: #fff;
  color: #000;
  font-size: 160%;
  line-height: 1.3;
  padding: 0 5px;
  font-weight: bold;
}
.conceptList .txt > ul{
  overflow: hidden;
  margin: 1.5em auto 1em;
  font-size: 95%;
}
.conceptList .txt > ul.half li{
  float: left;
  width: 49%;
  margin-right: 1%;
}
.conceptList .txt > ul.half li span{ display: block; }
.conceptList .txt li{
  margin-bottom: .5em;
}
.conceptList .txt li span{
  display: inline-block;
  background-color: #222;
  color: #fff;
  padding: 0 .7em;
}
.conceptList .txt > p{
  color: #aaa;
  font-size: 85%;
  text-align: justify;
}

.conceptList li.close{
  text-align: center;
  width: 340px;
  margin: 0 auto;
  color: #ccc;
  padding: 1em;
  font-size: 110%;
  position: relative;
  cursor: pointer;
  transition: all .5s;
}
.conceptList li.close p:before{
  content: "";
  width: 100%;
  height: 1px;
  background-color: #aaa;
  position: absolute;
  right: 0;
  bottom: 0;
}

.conceptList li.close:before,
.conceptList li.close:after{
  content: "";
  width: 1px;
  height: 20px;
  right: 20px;
  top: 35%;
  margin-left: -10px;
  background-color: #fff;
  position: absolute;
  transform: rotate(-45deg);
}
.conceptList li.close:before{
  transform: rotate(45deg);
}

#allianceArea{ 
  background-color: #000;
  text-align: center;
  padding: 7%;
}
#allianceArea h2{ 
  font-size: 1.5vw;
  font-weight: 400;
  letter-spacing: 0.3em;
  margin-bottom: 1.5em;
  color: #fff;
  opacity: 0;
  transition: all 2s;
}
#allianceArea .img{ 
  max-width: 1000px;
  margin: 0 auto;
  opacity: 0;
  transition: all 2s .6s;
  background-color: #fff;
}
#allianceArea .img a{ display: block; margin: 0 auto;  transition: all 1s; } 
#allianceArea .img a:hover{ opacity: 0.6; }
#allianceArea.on h2,#allianceArea.on .img{ opacity: 1; }

#galleryArea {
  background: #000;
  padding: 7% 5%;
}
#galleryArea h2{
  width: 61%;
  padding: 3px 0;
  text-align: center;
  margin: 0 auto 5%;
  overflow: hidden;
}
#galleryArea h2 img{ transform: translateY(30px); opacity: 0; position: relative; transition: all 1.5s cubic-bezier(0.33, 1, 0.68, 1); }
#galleryArea.on h2 img{ transform: translateY(0); opacity: 1; }

#galleryArea ul{
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
#galleryArea li{
 float: left;
 width: 25%;
 opacity: 0;
 transition: all 1.5s;
}
#galleryArea li:nth-of-type(2){ transition-delay:.3s; }
#galleryArea li:nth-of-type(3){ transition-delay:.6s; }
#galleryArea li:nth-of-type(4){ transition-delay:.9s; }
#galleryArea .on li{ opacity: 1; }

#galleryArea li.w2{ width: 50%; }
#galleryArea li.fr{ float: right; }

#notesArea{
  padding: 0 0 8%;
  background-color: #000;
}
#notesArea p{
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
  font-size: 12px;
  color: #777;
}

#pagetop{ 
  position: fixed;
  right: -50px; bottom: 20px;
  z-index: 3;
  transition: all .5s;
}
#pagetop.on{ right: 0; }
#pagetop a{
  padding: 20px 15px;
  display: block;
  transition: all .5s;
  background: none;
}


@media screen and (max-width: 1254px) {

#msgArea .msg p { font-size: 17px; }
h2.maintit + p { font-size: 14px; }
.preMov h3 { font-size: 17px; }
#conceptArea h2.maintit + p {  font-size: 16px; }
.conceptMain .txt { font-size: 13px; }
.conceptMain .txt > div{ padding-left: 5%; }
.conceptMain.left .txt > div{ padding-left: 0; padding-right: 5%; }
#allianceArea h2{  font-size: 20px; }
.conceptList > li:not(.close) { font-size: 12px; }

}

@media screen and (max-width: 768px) {
#contents * { letter-spacing: 0.05em; }
#mainImg p{ font-size: 10px;  }
#msgArea .msg{
  position: static;
  display: block;
  padding: 0 10% 10%;
  width: 100%;
  height: auto;
  background: #000;
}
#msgArea .msg p{
  font-size: 3vw;
  line-height: 1.8;
}
#msgArea .msg .note{ font-size: 2vw; }
h2.maintit + p { font-size: 2.4vw; color: #ccc; }
h2.maintit .logo{ width: 30%; }
#presenArea{
  background: url(../img/presen_bg_sp.jpg) center top no-repeat #000;
  background-size: 100% auto;
  padding: 15% 5% 7.5%;
}
.preMov h3 { font-size: 2.5vw; position: relative; margin-top: 1.5em; }
.preMov .ytVideo{
  width: 100%;
}
#conceptArea{ padding: 15% 0 8%; }
#conceptArea h2.maintit + p {  font-size: 2.6vw; color: #ccc; }
.conceptMain{  margin: 18% auto 10%; }
.conceptMain .num{ top: -5%; right: -3%; }
.conceptMain .num img{ height: 50px; }
.conceptMain .txt{
  background: none;
  position: relative;
  height: auto;
  width: 100%;
  font-size: 2.5vw;
  display: block;
  margin-top: 1em;
}
.conceptMain .txt > div{
  width: 75%;
  padding-left: 3%;
}
.conceptMain.left .txt{
  background: none;
  right: auto;
  left: 0;
}
.conceptMain.left .txt > div{
  padding-left: 3%;
  padding-right: 0;
}
.conceptMain.left .num{
  right: auto;
  left: -3%;
}
.conceptMain .txt h3{ margin-bottom: .2em; }
.conceptMain .txt h3 + p{
  margin-bottom: 0;
}
.conceptMain .txt .view{
  width: 50px;
  height: 50px;
  position: absolute;
  right: 3%;
  bottom: 2em;
}
.conceptMain .txt .view span:not(.more):not(.more2){
  width: 15px;
  margin-left: -7px;
}
.conceptMain .txt .view .more,.conceptMain .txt .view .more2{
  position: absolute;
  font-size: 9px;
  bottom: -2em;
}
.conceptList{
  background-size: cover;
  padding-bottom: 8%;
}
.conceptList > li:not(.close) {
  display: block;
  font-size: 2.5vw;
}
.conceptList .img{
  width: 100%;
}
.conceptList .txt{
  width: 100%;
  padding: 5%;
}
.conceptList .txt > p { color: #ccc; }
.conceptList .txt li span{
  padding: .5em .8em;
}
.conceptList li.close{
  width: 80%;
  font-size: 2.5vw;
}
.conceptList .txt > ul.half li{
  float: none;
  width: auto;
  display: inline-block;
}
.conceptList .txt > ul.half li span{ display: inline-block; }

#allianceArea{ padding: 10%; }
#allianceArea h2{  font-size: 3vw; }
#galleryArea {
  padding: 12% 5%;
}
#notesArea{
  padding: 0 0 12%;
}
#notesArea p{
  width: 80%;
  font-size: 2.2vw;
}
#pagetop a{
  padding: 15px 10px;
  width: 28px;
}



}

@media screen and (min-width: 768px) {
.conceptList li.close:hover{ color: #fff; }
.conceptList li.close:hover p:before{
  animation: .6s linear closein;
}
@keyframes closein {
  0%{ width: 100%; }
  40%{ width: 0; right: 0; }
  60%{ width: 0; right: 100%; }
  100%{ width: 100%; right: 0; }
}
#pagetop a:hover{ background: #000; }

}














.gallery img {
    transform: translateY(30px);
    opacity: 0;
    transition: 3s;
    transition-property: opacity;
}
.gallery.on img {
    transform: translateY(0);
    opacity: 1;
}
#footInner {
    padding: 2.4% 0 4.1%;
}
.btn {
    display: flex;
    background: #000;
    width: 93%;
    margin: auto;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4% 0;
    transition: .25s background;
}
.btn:hover {
    background: rgba(0,0,0,.75)
}
.btn:after {
    content: "";
    width: 1.5%;
    height: 0;
    padding-bottom: 1.5%;
    display: block;
    position: absolute;
    border: 2px solid #fff;
    border-width: 0.275vw 0.275vw 0 0;
    right: 1.5%;
    top: 43%;
    transform: rotate(45deg);
    /* box-sizing: border-box; */
    transition: .25s right;
}
.btn:hover:after {
    right: 1%
}
.btn img {
    width: 30%;
    max-width: 452px;
}
#copy {
    text-align: center;
    font-family: "Helvetica Neue","Helvetica","Arial";
    font-size: 1.6875rem;
    font-weight: 500;
    padding-bottom: 2%;
}
#footLinkArea {
    text-align: center;
    padding-bottom: 20px;
    font-size: 1.5rem;
    font-family: 'Noto Sans', sans-serif;
}
#footLinkArea ul li {
    display: inline-block
}
#footLinkArea ul li:not(:first-child) {
    border-left: 1px solid #666;
    padding-left: 18px;
    margin-left: 18px;
}
#footLinkArea ul li a {
    color: #000;
    text-decoration: none
}
#footLinkArea ul li a:hover {
    text-decoration: underline;
}
#gdpr-box {
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.8);
    padding: 30px;
    color: #FFF;
    bottom: 0px;
    left: 0px;
    z-index: 999;
    font-size: 14px;
    line-height: 24.5px;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: .1em;
}
#gdpr-box a {
    color: #FFF;
    text-decoration: underline;
}
#gdpr-box span {
    cursor: pointer;
    margin-top: 5px;
    display: inline-block;
    position: relative;
    font-weight: bold;
}
#gdpr-box span:hover {
    opacity: 0.8;
}
#gdpr-box span:after {
    content: "";
    display: inline-block;
    margin-left: 5px;
    border-top: 2px solid #438bc5;
    border-right: 2px solid #438bc5;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    vertical-align: middle;
    box-sizing: border-box;
}

/* youtube */
.ytVideo.type1 {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 56.25%;
}
.ytVideo iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: -8.5%;
}
.ytVideo .linkBtn {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
    margin: 0;
    display: block;
}
.ytVideo.type1 .linkBtn { top: -8.5%; }

.ytVideo .linkBtn .icon {
    display: block;
    position: absolute;
    width: 105px;
    height: 105px;
    border: 1px solid #fff;
    border-radius: 105px;
    z-index: 1;
    left: 50%;
    top: 50%;
    margin-left: -52.5px;
    margin-top: -52.5px;
    background: rgba(255,255,255,0.1);
    transition: .5s transform;
    /* display: none; */
}

.ytVideo .linkBtn:hover .icon {
    transform: scale(1.1)
}
.bc_modal_movie::after {
    opacity: 0!important
}
.ytVideo .linkBtn .icon:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 21px;
    border-color: transparent transparent transparent #ffffff;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}
.video_area .ytVideo {
    transform: translateY(30px);
    opacity: 0;
    transition: 3s;
    transition-property: opacity;
}
.video_area.on .ytVideo {
    transform: translateY(0);
    opacity: 1;
}
@media screen and (min-width: 769px) {
    .u768 {display: none !important;}
}
@media screen and (max-width: 768px) {
    .o768 {display: none;}
    #logo {
        margin-left: 0
    }
    #logo a {
        width: 212px;
    }
    #langArea {
        padding-right: 3%
    }
    #langArea a {
        font-size: 16px;
        height: 30px;
    }
    #mainImg #kvText {
        padding-bottom: 54%;
    }
    #mainImg #kvText span {
        width: 100%
    }
    #mainImg #kvText img {
        width: 100%;
    }
    #leadText {
        width: 90%;
        /* margin-top: -13.2%; */
        padding-bottom: 8%;
    }
    #snsArea {
        padding-bottom: 7%;
        padding-bottom: 11%;
    }
    #snsArea ul li {
        margin: 0 8px
    }

    .ytVideo .linkBtn .icon {
        margin: 0;
        width: 12%;
        height: 0;
        padding-bottom: 12%;
        transform: translate(-50%,-50%) scale(1)
    }
    .ytVideo .linkBtn .icon:after {
        border-width: 1.5vw 0 1.5vw 2.625vw;
    }
    .ytVideo .linkBtn:hover .icon {
        transform: translate(-50%,-50%) scale(1.1)
    }
    #footInner {
        padding: 2.5% 0px 4%;
    }
    .btn {
        padding: 5.25% 0;
        width: 95%;
    }
    .btn:after {
        width: 3.65%;
        padding-bottom: 3.65%;
        top: 35%;
        border-width: 0.6vw 0.6vw 0 0;
        right: 6%;
    }
    .btn:hover:after {
        right: 7%;
    }
    .btn img {
        width: 40%
    }
    #topLink {
        padding-bottom: 6%;
    }
    #topLink a {
        display: block;
        background: #000;
        position: relative;
        height: 0;
        padding-bottom: 10%;
        transition: .25s background
    }
    #topLink a:hover {
        background: rgba(0,0,0,.75)
    }
    #topLink a:after {
        content: "";
        width: 4%;
        height: 0;
        padding-bottom: 4%;
        display: block;
        position: absolute;
        border: 2px solid #fff;
        border-width: 4px 4px 0 0;
        left: 48%;
        top: 40%;
        transform: rotate(-45deg);
    }
    #footLinkArea {
        padding-bottom: 3%;
        font-size: 1.75rem;
    }
    #footLinkArea ul li:not(:first-child) {
        padding-left: 1em;
        margin-left: 1em;
    }
    #eventInner {
        border-width: 15px;
        padding: 5rem 1rem;
    }
    #eventInner:before, #eventInner:after {
        width: 25%;
        height: 30%;
    }
    #eventInner:before {
        left: -13px;
        top: -14px;
        border-width: 1px 0 0 1px;
    }
    #eventInner:after {
        right: -13px;
        bottom: -14px;
        border-width: 0 1px 1px 0;
    }
    #eventLead .lead {
        font-size: 2.8rem
    }
    #eventBtn .btn {
        text-align: center;
        line-height: 1.5;
        font-size: 2rem;
        padding: 3% 0;
    }
}
@media screen and (max-width: 500px) {
    #snsArea ul li {
        width: 40px
    }
    #topLink a {
        padding-bottom: 0;
        height: 50px
    }
    #mainImg #kvText {
        /* padding-bottom: 54%; */
    }
}
.dilb { display: inline-block;}