@charset "utf-8";

body.doc-main {padding-top:0;}

header {background:rgba(0,0,0,.5);}

#main-visual {background:#aaa;}
#main-visual {font-size:0;}
#main-visual div.img,
#main-visual img,
#main-visual video {height:300px;width:100%;}
#main-visual img {object-fit:cover;}
#main-visual video {object-fit:contain;background:#fff;}
#main-visual div.img {position:relative;overflow:hidden;}
#main-visual div.img::after {content:'';display:block;left:0;top:0;width:100%;height:100%;position:absolute;background:transparent;z-index:2;}
#main-visual div.img iframe,
#main-visual div.img video {width:100%;height:100%;}
#main-visual .slider-nav {z-index:3;}

section .page-container {overflow:hidden;}

#main-1 .page-container {padding:100px 0 40px 0;}
#main-1 h2 {font-size:1.7em;}
#main-1 .bg {position:absolute;top:-10%;left:-10%;width:120%;height:120%;}
#main-1 .bg img {width:100%;height:100%;object-fit:cover;filter:grayscale(0.8) blur(2px);}
#main-1 .texts {position:relative;z-index:2;margin:0 20px;padding:20px 10px;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border-radius:6px;box-shadow:rgba(0,0,0,.5) 2px 4px 12px -3px;}
#main-1 .texts p {margin-top:1em;font-size:.9rem;word-break:keep-all;}

.main-recents .page-container {padding:30px 10px;}
.main-recents h2 {text-align:center;margin-bottom:1rem;font-size:1.5em;color:#0bad6e;}
.main-recents ul li + li {margin-top:10px;}
.main-recents ul a {display:block;position:relative;color:#fff;border-radius:5px;overflow:hidden;font-size:0;}
.main-recents ul a strong {font-size:1.2em;}
.main-recents ul a img {width:100%;}
.main-recents a.go-more {display:block;padding:1em 0;text-align:center;color:#000;font-size:1.2em;}
.main-recents ul a > div {position:absolute;left:0;top:0;width:100%;height:100%;font-size:.9rem;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.8));transition:opacity .3s ease-in;opacity:0;}
.main-recents ul a:hover > div,
.main-recents ul a:focus > div {opacity:1;}
@media screen and (hover:none) {
    .main-recents ul a > div {top:auto;bottom:0;height:auto;opacity:1;display:block;padding:2em 1em 1em;background:linear-gradient(180deg, transparent, rgba(0,0,0,.6));}
}

@media screen and (min-width:768px) {
	#main-visual div.img,
    #main-visual img,
	#main-visual video {height:600px;}

    #main-1 .page-container {padding:60px 0;}
    #main-1 .bg {top:30%;left:60%;width:40%;height:auto;padding-right:40px;}
    #main-1 .bg img {height:auto;filter:none;box-shadow:#fff6da 80px -40px 0 0;}
    #main-1 .texts {background:#fff;box-shadow:none;margin:0 10px;width:55%;}
    #main-1 .texts p {font-size:.85rem;}

    .main-recents h2 {width:1px;height:1px;overflow:hidden;position:relative;left:-1px;top:-1px;text-indent:1000px;margin:0 !important;}
    .main-recents ul {display:flex;padding:0 10px;}
    .main-recents ul li + li {margin-top:0;}
    .main-recents ul li {padding-right:10px;flex:1 1 auto;}
    .main-recents ul li:nth-child(2n) {padding-right:0;padding-left:10px;}
    .main-recents ul a {border-radius:0;}
    .main-recents a.go-more {float:right;}
}

@media screen and (min-width:1280px) {
	#main-visual div.img,
    #main-visual img,
	#main-visual video {height:100vh;}

    #main-1 .texts p {font-size:1rem;}
    #main-1 .page-container {overflow:visible;}

    .main-recents .page-container {padding:80px 10px;}
}


#main-ticker {height:80px;background:#ad1457;color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.85em;}
#main-ticker a.ticker-next,
#main-ticker a.ticker-close {position:absolute;right:0;top:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.1);text-decoration:none;font-size:12px;}
#main-ticker a.ticker-next {right:24px;}
#main-ticker .ticker-item {padding-left:10px;display:none;word-break:break-all;}
#main-ticker .ticker-item h3 {padding-right:48px;}
#main-ticker .ticker-item p {line-height:1.1;}
#main-ticker .ticker-item.active {display:block;}
#main-ticker .ticker-item a {color:#ff4;}
#main-ticker + header {top:0px;position:sticky;}
#main-ticker + header + #main-visual {top:-48px;margin-bottom:-48px;position:relative;}
.nav-on #main-ticker + header .nav-toggle {position:fixed;}
@media screen and (min-width:768px) {
	#main-ticker + header + #main-visual {top:-80px;margin-bottom:-80px;}
}