@charset "utf-8";

@-ms-viewport {
	width: auto;
}
  
@viewport {
	width: device-width;
}
.pc{display:block;}
.sp{display:none;}
.f-large{
    font-size:1.5em;
}
.small{
	font-size:0.6em;
}
.capTxt{
	font-size:0.8em;
}
@media screen and (max-width:480px){
    .pc{display:none;}
    .sp{display:block;}

    .f-large{
        font-size:100%;
    }
}
.jstfy{
	text-align:justify;
	text-justify:inter-ideograph;
	-ms-text-justify:inter-ideograph;
}

.center{
    text-align:center;
}
.left{
    text-align:left;
}
.right{
    text-align:right;
}
/*===================================================================
basic setting
===================================================================*/
* html body {
	background: url(null) fixed;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html,body{
	overflow-x: hidden;
	height: 100%;
	margin: 0 auto;
}
html{
	position: relative;
	height:100%;
	min-height: 100%;
	font-size: 100%;
	line-height:1.6;
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	padding: 0;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	color: #fff;
	width:100%;
	height:auto;
    background:#101229;
}
body::-webkit-scrollbar {
    /* width: 10px;
    height: 10px; */
    display:none;
}
    
body::-webkit-scrollbar-thumb {
    /* background-color: #00a294;
    border-radius: 2px;
    box-shadow: inset 3px 3px 3px rgba(255,255,255,0.2); */
    display:none;
}    
body::-webkit-scrollbar-corner {
    display: none;
}

/* =========================================================
link icon SETTING 
========================================================= */
.iconLink{
	font-weight:900;
}
.iconLink:before {
	margin: 0 3px 0 3px;
	font-family: "Font Awesome 5 Free";
	content: '\f138';
	font-weight: 900;
	display:inline-block;
}
.iconExternal{
	font-weight:900;
}
.iconExternal:after {
	margin: 0 3px 0 3px;
	font-family: "Font Awesome 5 Free";
	content: '\f35d';
	font-weight: 900;
	display:inline-block;
}
.iconJump{
	font-weight:900;
}
.iconJump:after {
	margin: 0 3px 0 3px;
	font-family: "Font Awesome 5 Free";
	content: '\f13a';
	font-weight: 900;
	display:inline-block;
}
.iconOpen{
	font-weight:900;
}
.iconOpen:before {
	margin: 0 3px 0 3px;
	font-family: "Font Awesome 5 Free";
	content: '\f13a';
	font-weight: 900;
	display:inline-block;
}
.iconPdf{
	font-weight:900;
}
.iconPdf:after {
	margin: 0 3px 0 3px;
	font-family: "Font Awesome 5 Free";
	content: '\f1c1';
	font-weight: 900;
	display:inline-block;
}

/*layout&margin
----------------------------------------------------------*/
.mt5{margin-top:5px!important;}
.mt10{margin-top:10px!important;}
.mt15{margin-top:15px!important;}
.mt20{margin-top:20px!important;}
.mt25{margin-top:25px!important;}
.mt30{margin-top:30px!important;}
.mt35{margin-top:35px!important;}
.mt40{margin-top:40px!important;}
.mt45{margin-top:45px!important;}
.mt50{margin-top:50px!important;}
.mt60{margin-top:60px!important;}
.mt70{margin-top:70px!important;}
.mt80{margin-top:80px!important;}
.mt90{margin-top:90px!important;}
.mt100{margin-top:100px!important;}

.mb0{margin-bottom:0px!important;}
.mb5{margin-bottom:5px!important;}
.mb10{margin-bottom:10px!important;}
.mb15{margin-bottom:15px!important;}
.mb20{margin-bottom:20px!important;}
.mb25{margin-bottom:25px!important;}
.mb30{margin-bottom:30px!important;}
.mb35{margin-bottom:35px!important;}
.mb40{margin-bottom:40px!important;}
.mb45{margin-bottom:45px!important;}
.mb50{margin-bottom:50px!important;}
.mb80{margin-bottom:80px!important;}
.mb100{margin-bottom:100px!important;}
.mb120{margin-bottom:120px!important;}


/* =========================================================
	CONTENTS SETTING 
========================================================= */
.commonSec{
    width:100%;
    height: 100%;
}
.commonSec .container{
    width:1400px;
    height:100%;
    margin:0 auto;
    padding:30px 20px;
    text-align:left;
}
.commonSec .container h1 {
    font-size:250%;
}
.commonSec .container p a:hover::after {
    width: 100%;
}
.flexbox{
    display: flex;
    flex-wrap: wrap;
}
.imgBox{
    width:100%;
}
.imgBox img{
    width:100%;
}
.topicsAtricles{
    width:1200px;
    margin:0 auto;
}
.topicsAtricles a{
    color:#fff;
    text-decoration: none;
}
.topicsAtricles a:hover{
    color:rgb(0, 162, 148);
    text-decoration: underline;
    transition:0.5s;
}
.topicsAtricles h2{
    font-size:150%;
    font-weight:300;
}
.topicsAtricles img{
    width:50%;
    display:block;
    margin:0 auto;
}
@media screen and (max-width:1600px){
    .commonSec .container{
        width:90%;
        height:auto;
        margin:0 auto;
        padding:30px;
        text-align:left;
    }
    .commonSec .container h1 {
        font-size:200%;
    }
}
@media screen and (max-width:1280px){
    .commonSec .container{
        width:100%;
        height:100%;
        margin:0 auto;
        padding:30px;
        text-align:left;
    }
    .commonSec .container h1 {
        font-size:300%;
    }
    .topicsAtricles{
        width:100%;
        margin:0 auto;
    }
    .topicsAtricles img{
        width:100%;
        display:block;
        margin:0 auto;
    }
}
@media screen and (max-width:920px){
    .commonSec .container h1 {
        font-size:200%;
    }
}
@media screen and (max-width:480px){
    .commonSec{
        width:100%;
        height: 100%;
        margin-bottom:50px;
    }
    .commonSec .container{
        width:90%;
        height:100%;
        margin:0 auto;
        padding:30px;
        text-align:left;
    }
    .commonSec .container h1 {
        font-size:200%;
    }
}

/*===================================================================
loading setting
===================================================================*/
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background:#101229;
    text-align:center;
    color:#fff;
}

#splash_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.logoItem{
    padding: 0;
    width: 50%;
    transition:0.5s;
}
/*--- Loading icon size　---*/
#splash_logo img {
    width:65%;
}
@media screen and (max-width:480px){
    #splash_logo img {
        width:100%;
    }
}
.fadeUp{
    animation-name: fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes fadeUpAnime{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ======================================
	header setting
=======================================*/
header{
    position: fixed;
    top: 0;
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
    transition: all 0.3s ease-out;
}
header .header-flexbox{
    background:#000;
}
.header-flexbox{
	display:flex;
	flex-direction:row;
	width:100%;
	height:auto;
}
.mainTtl{
    font-size:25px;
    line-height:55px;
}
.header-boxItem:nth-child(1) {
    width:7%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-boxItem img{
    width:70%;
    padding:10px;
}
.header-boxItem:nth-child(2) {
    width:42%;
}
.header-boxItem:nth-child(3) {
    width:50%;
}
.header-boxItem a{
	color:#fff;
	text-decoration: none;
}
.header-boxItem a:hover{
	color:#2296ee;
	text-decoration: none;
	transition: 0.5s;
}
@media screen and (max-width:1280px){
	header{
		width:100%;
        height: 80px;
        
	}
    .mainTtl{
        font-size:120%;
        padding-left:0px;
        line-height:50px;
    }

	header .header-flexbox{
        width:100%;
		height:100%;
	}
    .header-boxItem:nth-child(1) {
        width:15%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header-boxItem img{
        width:80%;
        padding:10px;
    }
    .header-boxItem:nth-child(2) {
        width:100%;
        padding:0;
        margin:0;

    }
    .header-boxItem:nth-child(3) {
        width:50%;
    }
}

@media screen and (max-width:478px){
	header{
		width:100%;
        height: 80px;
        
	}
    .mainTtl{
        font-size:80%;
        padding-left:0px;
        padding-top:1em;
        line-height:1.5em;
    }

	header .header-flexbox{
        width:100%;
		height:100%;
	}
    .header-boxItem:nth-child(1) {
        width:40%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header-boxItem img{
        width:70%;
        padding:10px;
    }
    .header-boxItem:nth-child(2) {
        width:100%;
        padding:0;
        margin:0;

    }
    .header-boxItem:nth-child(3) {
        width:50%;
    }
}

#nav-btn{
    display: none;
}

.menu{
    width: 100%;
    text-align: center;
    display:block;
}
.menu ul{
    display: flex;
    list-style: none;
}
.menu li{
    width:100%;
    line-height:50px;
}

.menu a:link {color:#fff;text-decoration:none;font-weight:bold;}
.menu a:visited {color:#fff;text-decoration:none;}
.menu a:focus{outline:none;}
.menu a img {text-decoration:none;}
.menu a:hover {
	color:#2296ee;
	text-decoration:underline;
	transition:0.5s;
	-webkit-transition:0.5;
	-moz-transition:0.5s
}

@media screen and (max-width:1280px){
	#nav-btn{
		display: block;
		position: fixed;
		z-index: 11;
		top: 25px;
		right: 25px;
		background: transparent;
		border: none;
		cursor:pointer;
	}
	.hamburger{
		position: relative;
		display: block;
		width: 25px;
		height: 22px;
	}
	.hamburger .bdr{
		position: absolute;
		left: 0;
		width: 100%;
		height: 4px;
		border-radius: 4px;
		background: #fff;
		transition: all .5s;
	}
	.hamburger .bdr:nth-child(1){
		top: 0;
	}
	.hamburger .bdr:nth-child(2){
		top: 9px;
	}
	.hamburger .bdr:nth-child(3){
		bottom: 0;
	}
	.hamburger.is-active .bdr{
		background: #fff;
	}
	.hamburger.is-active .bdr:nth-child(1){
		transform: translateY(9px) rotate(-45deg);
	}
	.hamburger.is-active .bdr:nth-child(2){
		opacity: 0;
	}
	.hamburger.is-active .bdr:nth-child(3){
		transform: translateY(-9px) rotate(45deg);
	}
	.menu{
		position: fixed;
		top: 0;
		right: 0;
		width: 200px;
		height: 100%;
		padding-top: 70px;
		text-align: left;
		font-size: 16px;
		background:rgb(16, 18, 41, 0.7);
		z-index: 9;
		transform: translateX(200px);
		transition: .4s all;
        border-left:1px solid #2296ee;
	}
    .menu ul{
        display: block;
        list-style: disc;
    }
	.menu li{
		width:100%;
        padding:0;
        line-height:50px;
        border:none;
	}
    .menu ul li{
        border-bottom:1px dotted #fff;
        transition: all .5s;
    }
    .menu ul li a:after{
        display: none;
    }
    .nav-open .menu{
        transform: translateX(0);
    }
}

@media screen and (max-width:920px){
	#nav-btn{
		display: block;
		position: fixed;
		z-index: 11;
		top: 25px;
		right: 25px;
		background: transparent;
		border: none;
		cursor:pointer;
	}
}


/* topCnt setting
----------------------------------------------------------*/
#topCnt {
    width: 100%;
    height: 100vh;
    position: relative;
    background: rgba(16, 18, 41, 0.5);
    overflow: hidden;
}
#bgLayer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center top;
    transition: opacity 1s ease-in-out;
}
.ttlBox{
    position: absolute;
    top: 200px;
    left: 100px;
}
.ttlBox h1{
    text-align: center;
    margin:0;
    padding:0;
    font-size:400%;
}
.ttlBox h2{
    text-align: center;
    margin:0;
    padding:0;
    font-size:220%;
    line-height:1.2em;
}
.ttlBox p{
    margin:0 auto;
    padding:0;
    text-align:center;
    font-size:150%;
}
.infoBox{
    position: absolute;
    bottom: 100px;
    left: 250px;
    font-size:100%;
}
.infoBox h3{
    text-align:center;
}
.infoBox a{
    color:#fff;
    text-decoration: none;
}
.infoBox a:hover{
    text-decoration: underline;
    color:#2296ee;
    transition:0.5s;
}
@media screen and (max-width:1600px){
    .ttlBox{
        position: absolute;
        top: 100px;
        left: 50px;
    }
    .infoBox{
        position: absolute;
        bottom: 50px;
        left: 200px;
        font-size:90%;
    }
}

@media screen and (max-width:1280px){
    .ttlBox{
        position: absolute;
        top: 100px;
        left: 50px;
    }
    .ttlBox h1{
        text-align: center;
        margin:0;
        padding:0;
        font-size:220%;
    }
    .ttlBox h2{
        text-align: center;
        margin:0;
        padding:0;
        font-size:120%;
    }
    .ttlBox p{
        margin:0;
        padding:0;
        font-size:90%;
    }
    .infoBox{
        position: absolute;
        bottom: 50px;
        left: 100px;
        font-size:70%;
    }
    .infoBox h3{
        text-align:center;
    }
    .infoBox a{
        color:#fff;
        text-decoration: none;
    }
    .infoBox a:hover{
        text-decoration: underline;
        color:#2296ee;
        transition:0.5s;
    }
}

@media screen and (max-width:1024px){
    #topCnt,#topCnt:before{
        height: 100vh;
    }
    .ttlBox{
        position: absolute;
        top: 150px;
        left: 0;
        right:0;
        text-shadow: 0 0 15px #666;
    }
    .ttlBox h1{
        text-align: center;
        margin:0;
        padding:0;
        font-size:250%;
    }
    .ttlBox h2{
        text-align: center;
        margin:0;
        padding:0;
        font-size:150%;
    }
    .ttlBox p{
        margin:0;
        padding:0;
        font-size:100%;
    }
    .infoBox{
        position: absolute;
        bottom: 150px;
        left: 0;
        right:0;
        margin:0 auto;
        text-align:center!important;
    }
}
@media screen and (max-width:920px){
    #topCnt,#topCnt:before{
        height: 100vh;
    }
    .ttlBox{
        position: absolute;
        top: 150px;
        left: 0;
        right:0;
        margin:0 auto;
        text-shadow: 0 0 15px #666;
    }
    .ttlBox h1{
        text-align: center;
        margin:0;
        padding:0;
        font-size:200%;
    }
    .ttlBox h2{
        text-align: center;
        margin:0;
        padding:0;
        font-size:150%;
    }
    .ttlBox p{
        margin:0;
        padding:0;
        font-size:100%;
    }
    .infoBox{
        position: absolute;
        bottom: 150px;
        left: 0;
        right:0;
        margin:0 auto;
        font-size:100%;
        text-align:center!important;
    }    
}
@media screen and (max-width:480px){
    .ttlBox{
        position: absolute;
        top: 20%;
        left: 0;
        right:0;
        margin:0 auto;
        text-shadow: 0 0 15px #666;
    }
    .ttlBox h1{
        text-align: center;
        margin:0;
        padding:0;
        font-size:200%;
    }
    .ttlBox h2{
        text-align: center;
        margin:0;
        padding:0;
        font-size:100%;
    }
    .ttlBox p{
        font-size:80%;
        margin:0;
        padding:0;
    }
    .infoBox{
        position: absolute;
        bottom: 20%;
        left: 0;
        right:0;
        margin:0 auto;
        width:90%;
        text-align:center!important;
    }
    .infoBox h3{
        font-size:0.8rem;
    }
    .infoBox p{
        font-size:0.7rem;
    }
    .infoBox .border_btn01{
        display: inline-block;
        width: 70%;
        /* max-width: 350px; */
        color: #fff;
        border: 2px solid #fff;
        padding: 1em 2em;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        transition: 0.3s;
        font-size:0.8rem;
    }
}

/* #sec01 setting
----------------------------------------------------------*/
#sec01{
    width:100%;
    height: 100%;
    position: relative;
    z-index:1;
    display: flex;
    justify-content: center;
    align-items: center;
    background:rgba(16, 18, 41, 0.8);
}

/* -- carousel slider -- */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding:0 20px;
    
}

.swiper-slide .title {
    font-size: 40px;
    font-weight: 300;
    padding:0;
    margin:0;
}

.swiper-slide .subtitle {
    font-size: 24px;
}
.swiper-slide .text {
    font-size:100%;
}

.swiperBox{
    padding:20px;
    width:50%;
}

.swiperBox img{
    display: block;
    width:80%;
    margin:0 auto;
}
@media screen and (max-width:1024px){
    #sec01{
        width:100%;
        height: 100%;
    }
    .swiper-slide .title {
        font-size: 20px;
    }
    .swiper-slide .subtitle {
        font-size: 100%;
    }
    .swiperBox{
        padding:20px;
        width:100%;
    }
    


}
/*-- 3 rows-- */
.pickUpBox{
    padding:0;
    width:32%;
    background: #fff;
    border-right:#457290;
    border-bottom:#607290;
    transition:0.5s;
}
.pickUpBox:not(:nth-child(3n+3)) {
    margin-right: 2%;
}
.pickUpBox a{
    text-decoration: none;
    color:#000;
}
.pickUpBox p{
    font-size:90%;
    padding:0 1em 0 1em;
}
.box-item{
    padding: 0;
    width: 30%;
    background: #fff;
    color:#000;
    border-right:#607290;
    border-bottom:#607290;
    transition:0.5s;
}
.box-item:hover{
    box-shadow: 2px 2px 4px #dde3ec;
    transition:0.5s;
}
.box-item:not(:nth-child(3n+3)) {
    margin-right: 2%;
}

.box-item:nth-child(n+4) {
    margin-top: 30px;
}
.box-item a{
    text-decoration: none;
    color:#000;
}
.box-item p{
    font-size:90%;
    padding:0 1em 0 1em;
}
.dateCap{
    color:#878e99;
    font-weight:bold;
    font-size:90%;
    padding-left:1em;
}
.tag-news{
    background:#e37703;
    width:150px;
    font-weight:bold;
    color:#fff;
    margin:0;
    padding:5px;
    text-align:center;
}
.tag-news::after{
    content:"【NEWS】";
}
.tag-column{
    background:#e37703;
    width:150px;
    font-weight:bold;
    color:#fff;
    margin:0;
    padding:5px;
    text-align:center;
}
.tag-column::after{
    content:"【COLUMN】";
}
.tag-event{
    background:#e37703;
    width:150px;
    font-weight:bold;
    color:#fff;
    margin:0;
    padding:5px;
    text-align:center;
}
.tag-event::after{
    content:"【EVENT】";
}
.tag-gallery{
    background:#e37703;
    width:150px;
    font-weight:bold;
    color:#fff;
    margin:0;
    padding:5px;
    text-align:center;
}
.tag-gallery::after{
    content:"【GALLERY】";
}
.tag-movie{
    background:#e37703;
    width:150px;
    font-weight:bold;
    color:#fff;
    margin:0;
    padding:5px;
    text-align:center;
}
.tag-movie::after{
    content:"【MOVIE】";
}

.tag-blue{
    background:#0e1df3;
    width:150px;
    font-weight:bold;
    color:#fff;
    margin:0;
    padding:5px;
    text-align:center;
}
.tag-new{
    background:#ff0000;
    width:150px;
    font-weight:bold;
    color:#fff;
    margin:0;
    padding:5px;
    text-align:center;
    right:0;
}
.border_btn01 {
	display: inline-block;
	width: 100%;
	max-width: 350px;
	color: #fff;
    border: 2px solid #fff;
	padding: 1em 2em;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	transition: 0.3s;
}
.border_btn01:hover {
	color: #333;
	background: #fff;
    border: 2px solid #333;
}
ul.scheduleStyle li{
    font-size:120%;
    line-height:2em;
}
dl.timeschedule{
    display: flex; 
    flex-wrap: wrap;
    width: 100%;
    font-size:120%;
}
dl.timeschedule dt {
    width: 12%;
    padding:10px;
}
dl.timeschedule dd {
    width: 88%;
    margin:0;
    padding:10px;
}

rt{
    position: relative;
    top: -.3em;
    transform: translateY(-.3em);
}

/*================================
topics setteing
=================================*/
.topicsBox{
    width:100%;
}
.topicsBox dl{
	margin:5px;
	width:100%;
    height:50px;
    color:#fff;
    font-size:130%;
}
.topicsBox dt{
	margin:0;
	padding:0;
    float:left;
    width:12%;
}
.topicsBox dd{
	margin:0;
	padding:0px 0px 5px 0px;
    width:100%;
}
.topicsBox .topicsSet dd a{
	color:#fff;
    text-decoration:none;
    position: relative;
}
.topicsBox .topicsSet dd a:hover{
    color:#2296ee;
    transition: 0.3s;
}
.topicsBox .topicsSet dd a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #2296ee;
    bottom: -1px;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform 0.3s;
}
.topicsBox .topicsSet dd a:hover::after {
    transform: scale(1, 1);
}
.topicsCLInline.satellite {
	background: #ff6ba3;
	color:#fff;
	font-size:80%;
	padding:2px;
    margin-right:10px;
	float:left;
	border-radius:3px;
}

@media screen and (max-width:1024px){
    .box-item{
        padding: 0;
        width: 48%;
        background: #fff;
        color:#000;
        border-right:#607290;
        border-bottom:#607290;
        transition:0.5s;
    }
    .box-item:hover{
        box-shadow: 2px 2px 4px #dde3ec;
        transition:0.5s;
    }
    .box-item:not(:nth-child(2n+2)) {
        margin-right: 2%;
    }
    
    .box-item:nth-child(n+3) {
        margin-top: 30px;
    }
    dl.timeschedule{
        display: flex; 
        flex-wrap: wrap;
        width: 100%;
        font-size:120%;
    }
    dl.timeschedule dt {
        width: 100%;
        padding:0;
    }
    dl.timeschedule dd {
        width: 100%;
        margin:0;
        padding:0 0 1em 0;
    }
}
@media screen and (max-width:920px){
    .box-item{
        padding: 0;
        width: 48%;
        background: #fff;
        color:#000;
        border-right:#607290;
        border-bottom:#607290;
        transition:0.5s;
    }
    .box-item:hover{
        box-shadow: 2px 2px 4px #dde3ec;
        transition:0.5s;
    }
    .box-item:not(:nth-child(2n+2)) {
        margin-right: 2%;
    }
    
    .box-item:nth-child(n+3) {
        margin-top: 30px;
    }
    .pickUpBox{
        padding:0;
        width:100%;
        background: #fff;
        border-right:#457290;
        border-bottom:#607290;
        transition:0.5s;
        margin-bottom:30px
    }
    .pickUpBox:first-child{
        margin-right: 0!important;
    }
    .pickUpBox:nth-child(2) {
        margin-top: 0;
        margin-right: 0!important
    }
    .pickUpBox a{
        text-decoration: none;
        color:#000;
    }
    .pickUpBox p{
        font-size:90%;
        padding:0 1em 0 1em;
    }
    .topicsBox dl{
        margin:5px;
        width:100%;
        height:100%;
        color:#fff;
        font-size:75%;
        margin-bottom:1em;
    }
    .topicsBox dt{
        margin:0;
        padding:0;
        clear:both;
        width:100%;
    }
    .topicsBox dd{
        margin:0;
        padding:0;
        width:100%;
    }
}

@media screen and (max-width:480px){
    .box-item{
        width: 100%;
    }
    
    .box-item:hover{
        box-shadow: 2px 2px 4px #dde3ec;
        transition:0.5s;
    }
    .box-item:not(:nth-child(1n+1)) {
        margin-right: 2%;
    }
    
    .box-item:nth-child(n+2) {
        margin-top: 30px;
    }
}

/* #sec02 setting
----------------------------------------------------------*/
#sec02{
    width:100%;
    height: 100%;
    position: relative;
    z-index:1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.movie-coverdImg{
    width:100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background:url("../img/galleryBgImg.jpg") no-repeat center top;
    background-color:rgba(16, 18, 41, 0.4);
    background-blend-mode:darken;
    background-size:cover;
    background-attachment: fixed;
}
.galleryBox{
    padding: 0;
    width: 23%;
    color:#000;
    transition:0.5s;
}
.galleryBox iframe{
    width:100%;
    height:258px;
}
.galleryBox:not(:nth-child(4n+4)) {
    margin-right: 2%;
}

.galleryBox:nth-child(n+5) {
    margin-top: 30px;
}
.galleryBox a{
    text-decoration: none;
    color:#fff;
}
.galleryBox a:hover{
    text-decoration: none;
    color:#2296ee;
}
.galleryBox h3{
    color:#fff;
    font-weight:bold;
    font-size:100%;
    padding-left:1em;
}

@media screen and (max-width:1280px){
    .galleryBox iframe{
        width:100%;
        height:190px;
    }
}
@media screen and (max-width:1024px){
    #sec02{
        width:100%;
        height: 100%;
        position: relative;
        z-index:1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .movie-coverdImg{
        width:100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background:url("../img/galleryBgImg.jpg") no-repeat top center;
        background-color:rgba(16, 18, 41, 0.4);
        background-blend-mode:darken;
        background-size:cover;
        background-attachment:none;
    }
    .galleryBox{
        padding: 0;
        width: 23%;
        color:#000;
        border-right:#607290;
        border-bottom:#607290;
        transition:0.5s;
    }
    .galleryBox iframe{
        width:100%;
        height:170px;
    }
}

@media screen and (max-width:920px){
    #sec02{
        height:100%;
    }
    .galleryBox{
        padding: 0;
        width: 100%;
        color:#000;
        transition:0.5s;
    }
    .galleryBox:not(:nth-child(1n+1)) {
        margin-right: 2%;
    }
    
    .galleryBox:nth-child(n+2) {
        margin-top: 30px;
    }
    .galleryBox iframe{
        width:100%;
        height:100%;
    }
}

/* #sec03 setting
----------------------------------------------------------*/
#sec03{
    width:100%;
    height: 100vh;
    position: relative;
    z-index:1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.linkBox-item{
    padding: 0;
    width: 33%;
    margin-right:2%;
    text-shadow:1px 1px 3px #364e96;
}
.inner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0);
 }
.coverdImg{
    width:100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:url("../img/bottombackImg.jpg") no-repeat center top;
    background-color:rgba(16, 18, 41, 0.5);
    background-blend-mode:darken;
    background-size:cover;
    background-attachment: fixed;
}
#sec03 a{
    text-decoration:none;
    color:#fff;
}
#sec03 a:hover{
    text-decoration:underline;
    color:#2296ee;
    transition:0.5s;
}

@media screen and (max-width:1024px){
    #sec03{
        width:100%;
        height: 100vh;
        position: relative;
        z-index:1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .inner{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip-path: inset(0);
     }
    .coverdImg{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:url("../img/bottombackImg.jpg") no-repeat center center;
        background-color:rgba(16, 18, 41, 0.5);
        background-blend-mode:darken;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }
    #sec03 h2{
        font-size:110%;
    }
    #sec03 li{
        font-size:80%;
    }
}
@media screen and (max-width:920px){
    #sec03{
        width:100%;
        height: 100vh;
        position: relative;
        z-index:1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #sec03 h1{
        font-size:150%;
    }
    #sec03 h2{
        font-size:110%;
    }
    #sec03 li{
        font-size:80%;
    }
    .inner{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip-path: inset(0);
     }
    .coverdImg{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:url("../img/bottombackImg.jpg") no-repeat center center;
        background-size: cover;
        background-position: center;
        z-index: -1;
        background-color:rgba(16, 18, 41, 0.5);
        background-blend-mode:darken;
    }
}
@media screen and (max-width:480px){
    #sec03{
        width:100%;
        height: 100vh;
        position: relative;
        z-index:1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .linkBox-item{
        padding: 0;
        width: 100%;
        margin-right:0%;
    }
    #sec03 h1{
        font-size:150%;
    }
    #sec03 h2{
        font-size:110%;
        margin-bottom:0;
    }
    #sec03 ul{
        margin:0 0 0 1.5em;
        padding:0;

    }
    #sec03 li{
        font-size:80%;
    }
    .inner{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip-path: inset(0);
     }
    .coverdImg{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background:url("../img/bottombackImg.jpg") no-repeat center center;
        background-size: cover;
        background-position: center;
        z-index: -1;
        background-color:rgba(16, 18, 41, 0.5);
        background-blend-mode:darken;
    }
}

/* #sec04 setting
----------------------------------------------------------*/
.sec04{
    width:100%;
    height: 100%;
    position: relative;
    z-index:1;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff;
}
.sec04 a{
    text-decoration: none;
    color:#fff;
}
.sec04 a:hover{
    text-decoration: underline;
    color:#2296ee;
    transition:.5s;
}
.aboutFlexBox-item{
    padding: 0;
    width: 48%;
}
.messageTtl{
    font-size:37px!important;
}
.aboutFlexBox-item{
    margin-right:2%;
}
.aboutFlexBox-item:last-child{
    margin-right:0;
}
.aboutFlexBox-item-full{
    width:100%;
}
.aboutFlexBox-item img{
    display:block;
    margin:0;
    padding:0;
    text-align:center;
    width:100%;
}
.aboutFlexBox-item-sevenThree-left{
    padding: 0;
    width: 70%;
    text-align: center;
    margin-right:2%;
}
.aboutFlexBox-item-sevenThree-right{
    padding: 0;
    width: 28%;
    text-align: center;
}
.columnBox-item{
    padding: 0;
    width: 30%;
    margin-bottom:80px;
}
.columnBox-item:nth-child(2n+1){
    margin-right:1%;
}
.columnBox-item:nth-child(2n){
    padding: 0;
    width: 69%;
} 
.columnBox-item img{
    display:block;
    margin:0 auto;
    padding:0;
    text-align:center;
    height:100%;
}
.columnBox-item ul{
    padding:0;
    margin:0;
}
.columnBox-item ul li{
    list-style:none;
}
.messageBox-itemImages{
    padding: 0;
    width: 40%;
}
.itemImages-right{
    margin-right:5%;
}

.messageBox-itemTexts{
    padding: 0;
    width: 55%;
}
.messageBox-itemImages img{
    display:block;
    margin:0 auto;
    padding:0;
    text-align:center;
    width:100%;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.news-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.3s;
}

.news-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-info {
    padding: 10px;
}
.news-label.notice {
    color: #fff;
    background: #3498db;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin: 5px 0;
}

.news-label.event {
    color: #fff;
    background: #9034db;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin: 5px 0;
}

.news-title a {
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    }
.news-title a:hover {
    text-decoration: underline;
}
.pagination {
    margin: 1rem auto 2rem;
    max-width: 1500px;
    text-align: center;
    user-select: none;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.pagination button {
    background: none;
    border: none;
    margin: 0 6px;
    font-size: 1rem;
    cursor: pointer;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.pagination button:hover {
    border:1px solid #eee;
}

.pagination button.active {
    background-color: #333;
    color: #fff;
    font-weight: bold;
    cursor: default;
}
@media screen and (max-width:1024px){
    .sec04{
        width:100%;
        height: 100%;
        position: relative;
        z-index:1;
        display: flex;
        justify-content: center;
        align-items: center;
        color:#fff;
    }
    .messageTtl{
        font-size:25px!important;
    }
}

@media screen and (max-width:920px){
    .aboutFlexBox-item{
        padding: 0;
        width: 100%;
    }
    .aboutFlexBox-item{
        margin-right:0;
    }
    .aboutFlexBox-item:nth-child(n+2) {
        margin-top: 30px;
    }

    .columnBox-item{
        padding: 0;
        width: 47%;
    }
    .columnBox-item:nth-child(2n+1){
        margin-right:2%
    }
    .columnBox-item:nth-child(2n){
        padding: 0;
        width: 47%;
    
    } 
    .columnBox-item img{
        display:block;
        margin:0 auto;
        padding:0;
        text-align:center;
        height:100%;
    }
    .aboutFlexBox-item-sevenThree-left{
        padding: 0;
        width: 100%;
        text-align: center;
        margin-right:0%;
        margin-bottom:50px;
    }
    .aboutFlexBox-item-sevenThree-right{
        padding: 0;
        width: 100%;
        text-align: center;
    }
    .news-grid {
        grid-template-columns: 1fr;
    }

    .news-thumb img {
        height: 200px;
    }
    .pagination {
        margin: 1rem auto 2rem;
        max-width: 100%;
        text-align: center;
        user-select: none;
        display: flex;
        justify-content: center;
        gap: 8px;
    }
    .pagination button {
        background: none;
        border: none;
        margin: 0 6px;
        font-size: 1rem;
        cursor: pointer;
        color: #fff;
        padding: 6px 10px;
        border-radius: 4px;
        transition: background-color 0.3s ease;
    }
    .pagination button:hover {
        border:1px solid #eee;
    }
    .pagination button.active {
        background-color: #333;
        color: #fff;
        font-weight: bold;
        cursor: default;
    }
}
@media screen and (max-width:480px){
    .columnBox-item{
        padding: 0;
        width: 100%;
    }
    .columnBox-item:nth-child(2n+1){
        margin-right:0;
        margin-bottom:30px;
    }
    .columnBox-item:nth-child(2n){
        padding: 0;
        width: 100%;
    } 
    .messageBox-itemImages{
        padding: 0;
        width: 100%;
    }
    .itemImages-right{
        margin-right:0;
        margin-bottom:30px
    }
    .messageBox-itemTexts{
        padding: 0;
        width: 100%;
    }
}

/*################################################
    footter setting
#################################################*/
footer{
    width:100%;
    height:100%;
    margin:0 auto;
    position:relative;
    background:#000;
    color:#fff;
}
footer .footCnt{
    width:1200px;
    height:50px;
    margin:0 auto;
    display:flex;
	flex-direction:row;
    text-align:left;
}
.copy{
    width:100%;
    text-align:center;
    font-size:80%;
}
@media screen and (max-width:1024px){
    footer .footCnt{
        width:100%;
        margin:0 auto;
        display:flex;
        flex-direction:row;
        text-align:left;
    }
}

/*################################################
    .fade-in setting
#################################################*/

.fade-in {
    opacity: 0;
    transition-duration: 1000ms;
    transition-property: opacity, transform;
}
.fade-in-up {
    transform: translate(0, 50px);
}
.fade-in-down {
    transform: translate(0, -50px);
}
.fade-in-left {
    transform: translate(-50px, 0);
}
.fade-in-right {
    transform: translate(50px, 0);
}
.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}
.load-fade {
    opacity: 0;
    visibility: hidden;
    transition: all 1s;
}
.load-fade.is-show {
    opacity: 1;
    visibility: visible;
}


/*===================================================================
scroll down setting
===================================================================*/
.scroll_down a{
    opacity: 1;
    -webkit-transition: all .5s ease-in 3s;
    transition: all .5s ease-in 3s;
}

.scroll_down a{
    color: #fff;
    position: absolute;
    bottom: 60px;
    left: 50%;
    display: block;
    background-size: 14px auto;
    z-index: 2;
    text-decoration: none; 
    transform: translate(-50%, -50%);
}

.scroll_down a:before {
    position: absolute;
    top: calc(50% + 24px);
    left: calc(50% - 8px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid #fff;
    border-width: 0px 0 2px 2px;
    animation: bounce 2s linear infinite;
}

.scroll_down a:after {
    position: absolute;
    width: 32px;
    height: 32px;
    border: 2px solid #fff;
    content: "";
    border-radius: 50%;
    top: calc(50% + 16px);
    left: calc(50% - 19px);
}

@keyframes bounce {
    0%,
    100%,
    20%,
    50%,
    70%,
    80% {
        -webkit-transform: translateY(0)rotate(-45deg);
        -ms-transform: translateY(0)rotate(-45deg);
        transform: translateY(0)rotate(-45deg);
    }
    40% {
        -webkit-transform: translateY(-8px)rotate(-45deg);
        -ms-transform: translateY(-8px)rotate(-45deg);
        transform: translateY(-8px)rotate(-45deg);
    }
    60% {
        -webkit-transform: translateY(-4px)rotate(-45deg);
        -ms-transform: translateY(-4px)rotate(-45deg);
        transform: translateY(-4px)rotate(-45deg);
    }
}

/*===================================================================
image hover zoom setting
===================================================================*/
.zoomIn img{
  transform: scale(1);
  transition: .5s ease-in-out;
}
.zoomIn a:hover img{
  transform: scale(1.2);
}
.mask{
    display: block;
    line-height: 0;
    overflow: hidden;
}

/*===================================================================
voice setting
===================================================================*/
.voiceTtl {
    background: #2296ee;
    padding: 0.2em 0.5em;
    /* font-weight:300; */
    margin:80px 0 80px 0;
}

input[type="radio"] {
    position: absolute;
    left: -9999px;
}
.filters {
    text-align: left;
    margin-bottom: 2rem;
    height:auto;
}
.filters * {
    display: inline-block;
}
.filters label {
    text-align: left;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
    min-width: 50px;
    line-height: normal;
    cursor: pointer;
    transition: all 0.2s;
    color: #999;
}
.filters label:hover {
    background: #2296ee;
    color: #fff;
}
.targets {
    display: grid;
    grid-gap: 2em 5rem;
    grid-template-columns: repeat(2, 1fr);
}
  
.targets .target {
    height:auto;
    /* padding:10px; */
    color:#fff;
}

.c-bnr.bg {
    position: relative;
    overflow: hidden;
}
.c-bnr.bg::before,
.c-bnr.bg::after {
    content: "";
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    margin: auto;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
    opacity: 0;
}
.c-bnr.bg::before {
    background: rgb(227, 119, 3, 0.6);
    width: 100%;
    height: 100%;
}
.c-bnr.bg::after {
    color: #fff;
    content: "Read More";
    font-size: 18px;
    font-weight: 500;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    bottom: 0;
    right: 0;
}
.c-bnr.bg:hover::before,
.c-bnr.bg:hover::after {
    opacity: 1;
}
.voiceBox-left{
    text-align:left;
    padding:0 10px;
    margin:0 2% 0 0;
    width:30%;
}
.voiceBox-left img{
    width:100%;
}
.voiceBox-right{
    text-align:left;
    padding:0 10px;
    margin:0px;
    width:68%;
}
.targets .target-title {
    font-size:120%;
    margin: 5px 0;
    color: #fff;
}
.targets .target-categories {
    margin-bottom: 0;
    padding-left:0;
}
.targets .target-categories * {
    display: inline-block;
}
.targets .target-categories li {
    margin-bottom: 0;
    /* color: #e37703; */
    color: #fff;
    font-size:100%;
    padding-left:4em;
    text-indent:-4em;
}
.targets .targetNameTtl {
    font-size:110%;
    color: #E8380D;
    text-align:left;
}
.targets a:hover{
    text-decoration: none!important;
}
.targets .target-detalis{
    font-size:100%;
}

#sec05 {
    width:100%;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 25% 75%;
    grid-template-areas:
        "areaA areaB"
        "areaC areaC";
    margin:0 auto 50px auto;
}
.cmtTtl{
    padding: 0;
    margin:0;
    text-shadow:1px 1px 3px #364e96;
    font-size:28px!important;
}
.nameTtl {
    border-bottom: solid 3px #607290;
    position: relative;
}
.nameTtl:after {
    position: absolute;
    content: " ";
    display: block;
    border-bottom: solid 3px #e37703;
    bottom: -3px;
    width: 20%;
}
#personalImg {
    grid-area: areaA;
    margin-right:50px;
    margin-bottom:80px;
}

#detailArea {
    grid-area: areaB;
    width:100%;
    text-shadow:1px 1px 3px #101229;
    /* background:url(../img/dummy-top.png) no-repeat center center; */
    /* background-size:40%; */
    margin-bottom:80px;
}
#detailArea h2{
    margin:0 0 20px 0;
}
#detailArea h3{
    color: #fff;
    /*border-left: solid 5px #7db4e6;*/
    width:100%;
}
#detailArea .voiceAfiliation{
    font-size:70%;
}
#txtArea {
    grid-area: areaC;
    width:100%;
    text-shadow:1px 1px 3px #101229;
}
#txtArea h3{
    color: #fff;
    /*border-left: solid 5px #7db4e6;*/
    width:100%;
}
#txtArea img{
    display:block;
    margin:0 auto;
}
.voiceFlexBox-item{
    padding: 0;
    width: 48%;
}
.voiceFlexBox-item{
    margin-right:2%;
}
.voiceFlexBox-item:last-child{
    margin-right:0;
}
.voiceFlexBox-item img{
    display:block;
    padding:0;
    text-align:center;
    /* width:80%; */
}
.voiceFlexBox-item-full{
    padding: 0;
    width: 100%;
}
.voiceFlexBox-item-full img{
    display:block;
    padding:0;
    text-align:center;
}
.voiceFlexBox-item-three{
    padding: 0;
    width: 30%;
    margin-right:5%;
}

.voiceFlexBox-item-three:last-child{
    margin-right:0;
}
.voiceFlexBox-item-three img{
    display:block;
    padding:0;
    text-align:center;
    width:100%;
}
ol.numberLing {
    list-style: none;
    counter-reset: number;
    padding:0;
    margin:0;
}
ol.numberLing li {
    position: relative;
    padding-left: 40px;
}
ol.numberLing li::before {
    counter-increment: number;
    content: '（' counter(number) '）';
    position: absolute;
    left: 0;
}



@media screen and (max-width:478px){
    .voiceTtl {
        background: #2296ee;
        padding: 0.2em 0.5em;
        /* font-weight:300; */
    }
    .targets {
        display: grid;
        grid-gap:2em 1rem;
        grid-template-columns: repeat(1,1fr);
    }
    /* .targets .target {
        width:100%;
        height:auto;
        border:1px solid #e37703;
    } */
    .c-bnr.bg {
        position: relative;
        overflow: hidden;
    }
    .c-bnr.bg::before,
    .c-bnr.bg::after {
        content: "";
        display: block;
        position: default;
        margin: default;
        top: default;
        left: default;
        margin: default;
        transition: default;
        opacity: default;
    }
    .c-bnr.bg::before {
        background: none;
        width: 100%;
        height: 100%;
    }
    .c-bnr.bg::after {
        color: #fff;
        content: "";
        font-size: default;
        font-weight: default;
        display: default;
        text-align: default;
        justify-content: default;
        align-items: default;
        bottom: default;
        right: default;
    }
    .c-bnr.bg:hover::before,
    .c-bnr.bg:hover::after {
        opacity: default;
    }
    .targets .target img{
        width:100%;
        display:block;
        margin:0 auto;
    }
    .filters {
        text-align: left;
        margin:0 0 2rem 0;
        padding:0;
    }
    .filters * {
        display: inline-block;
    }
    .filters label {
        text-align: left;
        padding: 0.25rem 0.2rem;
        margin:0 0 0.25rem 0;
        min-width: 50px;
        line-height: normal;
        cursor: pointer;
        transition: all 0.2s;
        color: #999;
    }
    .targets .target-title {
        font-size: 1.2rem;
        margin: 1rem 0 1rem 0.25rem;
        color: #fff;
    }
    .targets .target-title:hover {
        text-decoration: underline;
    }
    .targets .target-categories {
        font-size: 1.0rem;
    }
    .targets .target-categories * {
        display: inline-block;
    }
    .targets .target-categories li {
        margin-bottom: 0.2rem;
        color: #fff;
        padding-left:4em;
        text-indent:-4em;
    }

    .voiceBox-left{
        text-align:left;
        padding:0 10px;
        margin:0;
        width:100%;
    }
    .voiceBox-left img{
        width:100%;
    }
    .voiceBox-right{
        text-align:left;
        padding:0 10px;
        margin:0 0 50px 0;
        width:100%;
    }
    
    #sec05 {
        width:100%;
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: repeat(auto-fit);
        grid-template-areas:
            "areaA areaA"
            "areaB areaB"
            "areaC areaC";
        margin:0 auto 50px auto;
    }

    #personalImg {
        grid-area: areaA;
        width:100%;
        text-align:center;
        margin-right:0!important;
        margin-bottom:50px!important;
    }
    
    #detailArea {
        grid-area: areaB;
        width:100%;
        text-shadow:1px 1px 3px #101229;
        /* background:url(../images/h3voice/h3LogoImg.png) no-repeat center center;
        background-size:70%; */
        margin-bottom:30px!important;
    }
    #detailArea h3{
        color: #fff;
        width:100%;
        margin-left:0;
    }
    /* #detailArea p{
        margin-left:1em;
    } */
    #txtArea {
        grid-area: areaC;
        width:100%;
        text-shadow:1px 1px 3px #101229;
    }
    #txtArea h3{
        color: #fff;
        width:100%;
    }
    h1.cmtTtl{
        padding: 10px 0;
        text-shadow:1px 1px 3px #364e96;
        font-size:150%;
    }
    h2.nameTtl {
        border-bottom: solid 3px #607290;
        position: relative;
    }
    h2.nameTtl:after {
        position: absolute;
        content: " ";
        display: block;
        border-bottom: solid 3px #2296ee;
        bottom: -3px;
        width: 40%;
    }
    .voiceFlexBox-item{
        padding: 0;
        width: 100%;
    }
    .voiceFlexBox-item{
        margin-right:0%;
        margin-bottom:50px;
    }
    .voiceFlexBox-item:last-child{
        margin-right:0;
    }
    .voiceFlexBox-item img{
        display:block;
        padding:0;
        text-align:center;
        /* width:80%; */
    }
    .voiceFlexBox-item-three{
        padding: 0;
        width: 100%;
        margin-right:0;
        margin-bottom:30px;
    }
    .voiceFlexBox-item-three img{
        display:block;
        padding:0;
        text-align:center;
        width:100%;
    }
    
}

.coverColor{
    width: 100%;
    height: 100%;
    background:rgb(16, 18, 41, 0.9);
}
.lineStrike{
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/*################################################
    .historyList setting（臨時用なので、公開前に以下から削除すること）
#################################################*/

dl.historyList.historyList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding:0 0 0 20px;
    height:500px;
    overflow-y: scroll;
}
dl.historyList.historyList::-webkit-scrollbar {
	width: 15px;
}

dl.historyList.historyList::-webkit-scrollbar-thumb {
	background: linear-gradient(0deg,#43e2c6,#3183d0);
	border-radius: 3px;
}

dl.historyList.historyList::-webkit-scrollbar-track {
	background: rgba(100,100,100, .5);
}
dl.historyList dt {
    text-align: left;
    width: 8.5em;
    padding: 0.5em 1.0em 0.5em 0.5em;
    position: relative;
    font-size:20px;
    font-weight:700;
}
dl.historyList dt::after {
    content: '●';
    position: absolute;
    left: -0.7em;
    top: 8px;
    font-size: 22px;
    color: #212dd5;
}  
dl.historyList dd {
    width: calc(100% - 8.5em);
    padding: 0.5em 1.0em;
    border-left: 2px solid #ccc;
}
dl.historyList dd span{
    font-weight: 700;
    font-size:18px;
}

@media screen and (max-width:478px){
/*################################################
    .historyList setting
#################################################*/
	dl.historyList.historyList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding:0 0 0 20px;
		height:500px;
		overflow-y: scroll;
	}
	dl.historyList.historyList::-webkit-scrollbar {
		width: 10px;
	}

	dl.historyList.historyList::-webkit-scrollbar-thumb {
		background: linear-gradient(0deg,#43e2c6,#3183d0);
		border-radius: 2px;
	}

	dl.historyList.historyList::-webkit-scrollbar-track {
		background: rgba(100,100,100, .5);
	}
	dl.historyList dt {
		text-align: left;
		width: 8.5em;
		padding: 0.5em 1.0em 0.5em 0.5em;
		position: relative;
		font-size:16px;
		font-weight:700;
	}
	dl.historyList dt::after {
		content: '●';
		position: absolute;
		left: -0.7em;
		top: 8px;
		font-size: 16px;
		color: #212dd5;
	}  
	dl.historyList dd {
		width: 100%;
		padding: 0.5em 1.0em;
		border-left: 2px solid #ccc;
	}
	dl.historyList dd span{
		font-weight: 700;
		font-size:14px;
	}
}