html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main {margin:0;padding:0;border:0;font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
body {font-family:Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
/*	TBS reset
============================== */
.alt {position:absolute;top:-5000px;left:-9999px;}
.clearfix:after {content:"";clear:both;display:block;}
.hide-txt {text-indent:110%;white-space:nowrap;overflow:hidden;}
.fp-causion {display:none;}
@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
/*	Youtube Player
============================== */
/*img cover*/
.cover {width:100%; height:100%;}
/*link*/
a{text-decoration:underline;text-underline-position: under;color:#ff00c0;}
a:hover{ text-decoration:underline;color:#999;}

.bg_color:nth-child(odd) a{color:#fff;}
.bg_color:nth-child(odd) a:hover{ color:#fcddff;}
/*font size*/
small{font-size:80%;line-height:80%;}

/*text-align*/
.tCenter{text-align: center !important}

/*///////////////// style ////////////////*/
body{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
div#con-body{color:#666;}

/*///////////////// web font ////////////////*/
.container,h2,h3,button{
font-family: a-otf-ud-shin-go-pr6n, sans-serif;
font-weight: 300;
font-style: normal;
}

/*///////////////// header ////////////////*/
header{position:relative;overflow: hidden;}
header div.main{position:relative;width:100%; overflow:hidden;}

header .main_txt{
z-index: 100;
width:100%;
text-align:center;
white-space: nowrap;
}
header .main_txt span{
  color: #ff00c0;
}
header .main_txt span img{
vertical-align:text-top;
padding:0 .2em;
}
header .main_txt span{
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
header .main_txt span.point_txt{
display: inline-block;
background: linear-gradient( to top, #ffa200 25%, #ff00c0 75% );
-webkit-background-clip: text;
color: transparent;
vertical-align:text-bottom;
}
header .main_txt span.min,
header .main_txt span.big{
  vertical-align:baseline;
  line-height:2em;
}

@media all and (min-width: 768px) {
header .main_txt{
font-size: 150%;
}
header .main_txt span.min{
font-size: 160%;
}
header .main_txt span.big{
font-size: 200%;
}
header .main_txt span.point_txt{
width: 28%;
}
header .main_txt span img{
  width: 90%;
}
}
@media all and (max-width: 767px) {
  header .main_txt{
  font-size: 90%;
  }
  header .main_txt span.min{
  font-size:140%;
  }
  header .main_txt span.big{
  font-size: 180%;
  }
  header .main_txt span.point_txt{
  width: 56%;
  }
  header .main_txt span img{
  width: 85%;
  }
}



/*///////////////// logo video ////////////////*/
#logo  {
margin: 0 auto;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#video {
overflow: hidden;
width: 100%;
}
video {
min-width: 100%;
position: absolute;
}

@media all and (min-width: 1200px) {

video {
top: 0;
transform: translateY(-50%);
}
}
@media all and (min-width: 768px) {

#video {
height:640px;
}
video {
max-height:640px;
min-height:640px;
}
}

@media all and (max-width: 767px) {
#video {
height: 50vh;
}
video {
max-height: 50vh;
min-height: 50vh;
}
}

@media all and (max-width: 290px) {
#video {
height: 40vh;
}
video {
max-height: 40vh;
min-height: 40vh;
}
}
/*画面サイズが変わっても常に動画の中央が表示されるようにする*/
/*動画よりも画面が横に長くなるとき用*/
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
video {
width: 100%;
top: 0;
transform: translateY(0);
}
}
/*動画よりも画面が縦に長くなるとき用*/
@media (max-aspect-ratio: 16/9) {
video {
height: 100%;
left: 50%;
transform: translateX(-50%);
}
}

/*///////////////// container column ////////////////*/
.container{overflow:hidden;background:#fff; !important}
.columnBox{width:100%;overflow: hidden;}
.container h3,.container p,.container li{
line-height:200%;
font-feature-settings : "palt";
letter-spacing:0.08em;
word-break:break-all;
}
.innerBox p,.innerBox li{text-align: justify;}

.innerBox p.lead{white-space: nowrap;}

@media all and (min-width: 768px) {
.container{overflow:hidden;}
.innerBox{width:880px;margin: 0 auto;}
.innerBox p,.innerBox li{font-size:110%;}
.innerBox p:nth-child(even){margin:20px 0;}
.innerBox section:nth-child(even){margin:30px 0;}

.innerBox p.lead{font-size:180%;}
}
@media all and (max-width: 767px) {
.container{width:100%;margin:0 auto;}
.innerBox{width:85%;margin: 0 auto;}
.innerBox p,.innerBox li{font-size:85%;}
.innerBox p:nth-child(even){margin:2em 0;}
.innerBox section:nth-child(even){margin:2em 0;}
.innerBox p.lead{font-size:100%;}
}

/*///////////////// wall color ////////////////*/
.self .bg_color:nth-child(odd){
  background:#ff3887;
}
.other .bg_color:nth-child(odd){
  background:#048afe;
}

/* 背景変化 */
.bg_color:nth-child(odd),
.color_bottom{
color: #fff;
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(124deg, #d93394, #bf56a8, #9b6dc1, #963ad9, #048afe, #d93394, #bf56a8, #9b6dc1, #963ad9, #048afe);
background-size: 1800% 1800%;
-webkit-animation: rainbow 10s ease infinite;
-z-animation: rainbow 10s ease infinite;
-o-animation: rainbow 10s ease infinite;
animation: rainbow 10s ease infinite;
}
@-webkit-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-moz-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@-o-keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}
@keyframes rainbow {
0%{background-position:0% 82%}
50%{background-position:100% 19%}
100%{background-position:0% 82%}
}


/* 背景斜め */
.bg_color:nth-child(odd),
.color_bottom{position: relative;width: 100%;}

.bg_color:nth-child(odd)::after {
content: '';
display: block;
position: absolute;
bottom: 0;
border-top: 60px solid transparent;  /* 透明 */
border-left: 50vw solid #fff;   /* color */
border-right: 50vw solid transparent;  /* 透明 */
border-bottom: 60px solid #fff;   /* color */
}
.bg_color:nth-child(odd)::before{
content: '';
display: block;
position: absolute;
top: 0;
border-top: 60px solid #fff;  /* 透明 */
border-left: 50vw solid #fff;   /* color */
border-right: 50vw solid transparent;  /* 透明 */
border-bottom: 60px solid transparent;    /* color */
}

.color_bottom::before{
content: '';
display: block;
position: absolute;
top: 0;
border-top: 60px solid #fff;  /* 透明 */
border-left: 50vw solid #fff;   /* color */
border-right: 50vw solid transparent;  /* 透明 */
border-bottom: 60px solid transparent;    /* color */
}

@media all and (min-width: 768px) {
.bg_color:nth-child(odd){margin:50px auto;padding:200px 0;}
.color_bottom{margin:50px auto 0;padding:200px 0 50px;}
}
@media all and (max-width: 767px) {
.bg_color:nth-child(odd){margin:2em auto;padding:8em 0;}
.color_bottom{margin:2em auto 0;padding:8em 0 2em;}
}

@media only screen and (max-width: 2000px) {
.bg_color:nth-child(odd)::after::after,
.color_bottom::after::after {
border-left: 1000px solid #fff;
border-right: 1000px solid transparent;
}
.bg_color:nth-child(odd)::before::before,
.color_bottom::before::before{
border-left: 1000px solid transparent;
border-right: 1000px solid #fff;
}
}
@media all and (max-width: 767px)  {
.bg_color:nth-child(odd)::after,
.color_bottom::after{
border-top: 20px solid transparent;  /* 透明 */
border-bottom: 20px solid #fff;  /* color */
}
.bg_color:nth-child(odd)::before,
.color_bottom::before{
border-top: 20px solid #fff;  /* color */
border-bottom: 20px solid transparent;  /* 透明 */
}
}

/*///////////////// h2 title ////////////////*/
.container h2{
color: #666;
position: relative;
line-height:100%;}

.container h2:before {
background-color:#666;opacity:0.6;
border-radius: 50%;
content: '';
display: block;
position: absolute;
top: 10px;
left: 0px;
}
.container h2:after {
background:#fff;
border-radius: 50%;
content: '';
display: block;
position: absolute;
top: 15px;
left: 5px;
}

/* color */
.bg_color:nth-child(odd) h2{color: #fff;}
.bg_color:nth-child(odd) h2:before{background:#fff;opacity:0.4; }
.bg_color:nth-child(odd) h2:after {background:#fff;}

@media all and (min-width: 768px) {
.container h2 {font-size:180%;
padding: 10px 10px 10px 40px;
}
.container h2:before {
width: 25px; /* 円の幅 */
height: 25px; /* 円の高さ */
}
.container h2:after {
width: 15px; /* 白抜き円の幅 */
height: 15px; /* 白抜き円の高さ */
}
}

@media all and (max-width: 767px)  {
.container h2 {font-size:140%;
padding: 10px 10px 10px 25px;
}
.container h2:before {
width: 20px; /* 円の幅 */
height: 20px; /* 円の高さ */
}
.container h2:after {
width: 10px; /* 白抜き円の幅 */
height: 10px; /* 白抜き円の高さ */
}
}

/*///////////////// h3 ////////////////*/
.columnBox h3{color:#666;
line-height: 140%;
white-space:nowrap;
padding-left:1em;
text-indent:-1em;
}
.bg_color:nth-child(odd) h3{color:#fff;}
.columnBox h3:before
{content: "■";opacity:0.6;}

@media all and (min-width: 768px) {
.columnBox h3{font-size: 140%; margin:20px 0;}
}
@media all and (max-width: 767px) {
.columnBox h3{font-size: 110%; margin:1em 0;}
.columnBox h3 small{
white-space:normal;
display:block;
padding:.5em;
line-height: 120%;
}
}

/*///////////////// attention Area ////////////////*/
.attention{
margin-top:2em;
position: relative;
padding: 0 10px;
border-top: solid 1px #666;
border-bottom: solid 1px #666;
}
.attention:before, .attention:after{
content: '';
position: absolute;
top: -10px;
width: 1px;
height: -webkit-calc(100% + 20px);
height: calc(100% + 20px);
background-color: #666;
}
.attention:before {left: 10px;}
.attention:after {right: 10px;}

.attention p{
background:rgba(225,237,238,0.3);
color:#666;
padding:10px 20px;
}

/*///////////////// list style ////////////////*/
.container article ul li{
padding-left:1em;
text-indent:-1em;
}
.container ul li:before
{content: "＊";}

.container #notes ul li:before
{content: "※";}


/*///////////////// mov ////////////////*/
.innerBox .mov .trailer{width: 100%;position: relative;padding-top: 56.25%;}
.innerBox .mov iframe {
position: absolute;top: 0;right:0; left:0;
width: 100% !important;
height: 100% !important;}
/*
#method .innerBox p{white-space: nowrap;}
*/

@media all and (min-width: 768px) {
.innerBox .mov{width: 760px;height: 428px; margin:80px auto 0;}
#method .innerBox p{margin-top:30px;}
}

@media all and (max-width: 767px) {
.innerBox .mov{width: 100%;margin-top:3em;}
#method .innerBox p{margin-top:1em;}
}

/*---- method btn ----*/
#method .innerBox a.mini_btn{
  display:inline-block;
  text-decoration:none;
  text-underline-position: under;
  color: #fff !important;
  padding:0 .5em;
  border:solid 1px #fff;
  border-radius: 10px;
      margin:.5em auto;
}
#method .innerBox a.mini_btn:hover{
  text-decoration:none;
  background: #ff00c0;
  color: #fff !important;
}


/*///////////////// pdf icon ////////////////*/
.icon,.icon2{
letter-spacing:.1em;
border-radius: 5px;
border:solid 1px #fff;
}
.last .icon,
.last .icon2{
border:solid 1px #fcd767;
}

.icon{
background: #ff006e;}
.icon2{
background: #ff6100;}

@media all and (min-width: 768px) {
.icon,.icon2{
font-size: 50%;
border-radius: 5px;
margin-left:20px;
padding:5px 10px;}
}
@media all and (max-width: 767px)  {
.icon,.icon2{
font-size: 10px;
border-radius: 2px;
margin-left:.5em;
padding:.2em .5em;}
}

/*///////////////// faq ////////////////*/
.faq{text-align:center;color:#fff;}
.faq a{ text-decoration:none;color:#666;}
.faq a:hover{ color:#04b6fd;}

.color_bottom .faq a{ text-decoration:none;color:#fff;}
.color_bottom .faq a:hover{ color:#b0e4ff;}
@media all and (min-width: 768px) {
.faq{margin-bottom:50px;}
}
@media all and (max-width: 767px)  {
}

/*///////////////// sns ////////////////*/
#sns ul{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
justify-content: space-between;
}
#sns ul li:before
{content: "" !important;}

#sns li a.tw_btn{
background:url(../img/tw_icon.png) center top no-repeat;
background-size: contain;
}
#sns li a.yb_btn{
background:url(../img/yb_icon.png) center top no-repeat;
background-size: contain;
}
#sns li a.ig_btn{
background:url(../img/ig_icon.png) center top no-repeat;
background-size: contain;
}
#sns li a.ln_btn{
background:url(../img/ln_icon.png) center top no-repeat;
background-size: contain;
}
#sns li a.tt_btn{
background:url(../img/tt_icon.png) center top no-repeat;
background-size: contain;
}

#sns li a{
display: block;
}
#sns li a:hover{
  opacity: 0.8;
}
#sns p{text-align: center;}
@media all and (min-width: 768px) {
#sns ul{
width:600px;
margin: 30px auto;
}
#sns ul li{padding:0 !important;}
#sns li a{width: 100px;height:100px;}
}
@media all and (max-width: 767px) {
#sns ul{
width:90%;
margin: 0 auto;
}
#sns ul li{padding:.5em !important;}
#sns li{
width:20%;
margin:2em auto 1em;
}
#sns li a{
width: 100%;height:0;padding-top:100%;
}
}

/*///////////////// footer ////////////////*/
#entry_mini{transition:0.5s;z-index: 200;}
#entry_mini:hover{cursor: pointer;}
#entry_mini a{
display:block;
background:url(../img/entry_mini.png) center center no-repeat;
background-size:contain;}
#entry_mini a:hover{opacity: 0.8;}

#page-top{transition:0.5s;z-index: 50;}
#page-top:hover{cursor: pointer;}
#page-top a{
display:block;
background:url(../img/pagetop2023.png) center center no-repeat;
background-size:contain;}

footer .bottom{text-align:center;color:#666;font-size:70%;}
footer .bottom a{ text-decoration:none;color:#666;}

.color_bottom footer .bottom{text-align:center;color:#fff;}
.color_bottom footer .bottom a{ text-decoration:none;color:#fff;}

@media all and (min-width: 768px) {
#entry_mini {text-indent: -9999px;position:fixed;bottom:20px;right:20px;width:200px;height:200px;}
#entry_mini a{width:200px;height:200px;}

#page-top {text-indent: -9999px;position:fixed;bottom:20px;right:20px;width:100px;height:100px;}
#page-top a{width:80px;height:80px;}
footer .bottom{margin:100px auto 100px;line-height: 120%;}
}

@media all and (max-width: 767px)  {
#entry_mini {text-indent: -9999px;position:fixed;bottom:10px;right:10px;width:100px;height:100px;}
#entry_mini a{width:100px;height:100px;}

#page-top {text-indent: -9999px;position:fixed;bottom:10px;right:10px;width:50px;height:50px;}
#page-top a{width:50px;height:50px;}
footer .bottom{margin:5em 1.5em 10em;line-height: 160%;}
}

/*----guideline close txt----*/
@media all and (min-width: 768px) {
#guideline .attention{
  font-size:160%;
  margin-bottom:100px;
}
}
@media all and (max-width: 767px)  {
  #guideline .attention{
    font-size:95%;
    margin-bottom:3em;
    font-weight: bold;
  }
}

/*----btn2021----*/
#btn2021{
margin:4em auto 0;
}
#btn2021 a{
display: block;
width:100%;
padding-top:31.25%;
background: url("../img/hp_btn1.png")  center center no-repeat;
background-size:contain;
}
#btn2021 a:hover{
  opacity: .7;
}
@media all and (min-width: 768px) {
#btn2021{
width:600px;
}
}
@media all and (max-width: 767px)  {
#btn2021{
width:80%;
}
}

/*----btn2022----*/
#btn2022{
margin:1em auto 0;
}

#btn2022 a{
display: block;
width:100%;
padding-top:31.25%;
background: url("../img/hp_btn2.png")  center center no-repeat;
background-size:contain;
}
#btn2022 a:hover{
  opacity: .7;
}
@media all and (min-width: 768px) {
#btn2022{
width:600px;
}
}
@media all and (max-width: 767px)  {
#btn2022{
width:80%;
}
}


/*----btn line----*/
#btn2{
  margin:0 auto 2em;
  border-radius: 10px
}

#btn2 a{
display: block;
position: relative;
z-index:0;
margin:0 auto;
display:block;
border-radius: 5px;
cursor: pointer;
width:100%;
padding-top:33.59375%;
background: url("../img/bt2-2023.png")  center center no-repeat #06c755;
background-size:contain;
  transition: 0.5s;
}

#btn2 a:hover{
  opacity:0.7;
}
@media all and (min-width: 768px) {
  #btn2{
    width:500px;
  }

}
@media all and (max-width: 767px)  {
  #btn2{
    width:90%;
  }
}


/*----finalist----*/
#finalist .actor{
white-space: nowrap;
line-height: 130% !important;
text-align: left !important;
}

@media all and (min-width: 768px) {
#finalist .m_top{
margin-top:50px;
}
}
@media all and (max-width: 767px)  {
#finalist .actor span{display: block;}
#finalist .m_top{
  margin-top:2em;
  }
}

/*///////////////// photo ////////////////*/

#finalist .ph-area .lazy{border-radius: 5px; background:#5fd1fc;}
#finalist  .ph-area{width:100%;margin:2em auto 0;}
#finalist  .innerBox .ph-area .lazy{width:100%;padding-top:54.1%;height:0;margin:0 auto;overflow: hidden;background-size:contain;}