@charset "utf-8";
/******* Common *******/
article {
    overflow: hidden;
}
/***** Slider *******/
.slider {
    width: 100%;
    min-height: 474px;
    max-height: 930px;
    padding: 0;
    background-color: #FFF;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    box-sizing: border-box;
}
.slider {
    background-position: center top\9;
    background-repeat: repeat-x\9;
}
*+html .slider {
    background-position: center top;
    background-repeat: repeat-x;
}
.swiper-pagination {
    margin: 1% 0 0!important;
}
/******* Header nav *******/

/*.navbar-default .navbar-nav > li > a {
    color: #a9a9a9!important;
    transition: .2s;
    font-size: 1vw;
}
.navbar-nav > li > a {
    padding: 10px 0;
}*/
/******* Header *******/
/* header */
header {
/*  background-image: linear-gradient(90deg, #fd942c 0%, #fd942c 50%, #e6e5f5 51%, #e6e5f5 100%);*/
    background-image: linear-gradient(90deg, #e6e5f5 0%, #e6e5f5 50%, #152bc1 51%, #152bc1 0%);
    background-image: linear-gradient(90deg, #152bc1 0%, #152bc1 50%, #e6e5f5 51%, #e6e5f5 100%);
}
header h1 {
    filter: drop-shadow(0 0 1vw rgba(0,0,0,.3));
    position: relative;
    z-index: 2;
}
header h1 div.anmVibration{
    width: 36%;
    max-width: 420px;
    margin: auto;
    padding: 84px 0;
    background: #f503b4;
    clip-path: polygon(90% 10%, 100% 0%, 93% 16%, 100% 10%, 100% 90%, 10% 90%, 0% 100%, 7% 84%, 0% 90%, 0% 10%);
}
header h1 svg {
    max-width: 280px;
}
header .category {
    max-width: 320px;
    width: 44%;
    margin: 20px auto ;
    position: relative;
    padding: 12px 60px;
}
header .flexBox {
    -webkit-box-pack: justify;
    justify-content: center;
    position: relative;
    z-index: 10;
}
.slidesystem .swiper-wrapper,
.slidesystem_2 .swiper-wrapper {
    justify-content: center;
}
header .swiper_system_arrow{
    display: none;
}
.swiper_system_prev ,.swiper_system_next {
    padding: 1%;
    border-radius: 50%;
    border: solid 2px; 
    cursor: pointer;
    transition-duration: 0.2s;
}
.swiper_system_prev:hover ,.swiper_system_next:hover {
    background: #c6fe00;
}
.swiper_system_prev:before ,.swiper_system_next:before {
    content: url(/assets/2022/img/index/arrow_left.png);
    display: block;
}
.swiper_system_next:before {
    content: url(/assets/2022/img/index/arrow_right.png);
}
header .schedule .swiper-slide {
    max-width: 440px;
    margin: 0 .5% 2%;
    padding: 1% 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-family: base-font;
}
header .schedule .swiper-slide .btnBox.btnBase {
    width: 72%;
    font-size: 20px;
    margin-top: 2%;
}
header .schedule .swiper-slide .btnBase.btnBase a,
header .schedule .swiper-slide .btnBase.btnBase span {
    padding: 1% 4%;
}
@media screen and (min-width:668px) {
    header .schedule .swiper-slide {
        width: 31%!important;
    }
}
header dt {
    width: 48%;
    max-width: 220px;
    text-align: center;
    margin: 0 auto;
}
header .main dt,
header .schedule  p.swiper-slide {
    width: 98%;
    max-width: 400px;
    color: #e9ff43;
    font-size: 36px;
}
header .main dt path,
header .main .btnBox path {
    width: 88%;
    max-width: 380px;
    fill: #e9fe00;
}
header .main dd.text {
    text-align: center;
    width: 100%;
    margin-top: 2px;
    font-size: 16px;
}
header dd ul {
    text-align: center;
    margin-bottom: 6%;
}
/* udeoffOrangeBG */
header .udeoffOrangeBG .schedule .swiper-slide {
    max-width: 640px;
    width: 64%!important;
}
header .udeoffOrangeBG .schedule .swiper-slide .btnBase.btnBase a,
header .udeoffOrangeBG .schedule .swiper-slide .btnBase.btnBase span {
    padding: 4%;
    line-height: 20px;
}

header .udeoffOrangeBG .schedule .swiper-slide .btnBox.btnBase {
    width: 48%;
}
header .udeoffOrangeBG h1 div.anmVibration {
    background: #000;
}
header .main.udeoffOrangeBG .category {
    margin: 10px auto;
}
.udeoffOrangeBG .fes2023LogoSVG,
.udeoffOrangeBG .udeoffLogoSVG,
.udeoffOrangeBG .udeoneLogoSVG {
    background: #fcff00;
}
.udeoffOrangeBG .btnBox {
    background: none;
    clip-path: none;
}
header .main.udeoffOrangeBG dt {
    max-width: 560px;
    color: #fff;
    font-size: 56px;
    text-shadow: 0 0 8px #fe4e00, 0 0 8px #fe4e00, 0 0 8px #fe4e00, 0 0 8px #fe4e00;
}
/* SVG */
.fes2023LogoSVG,
.udeoffLogoSVG,
.udeoneLogoSVG {
    background: #fff;
    position: relative;
    width: 80%;
    max-width: 280px;
    margin: 0 auto;
    padding: 6% 0;
    mask-position: 0 0;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}
.fes2023LogoSVG {
    mask-image: url(../img/logo/fes_2023.svg);
    -webkit-mask-image: url(../img/logo/fes_2023.svg);
    padding: 28% 0;
}
.udeoffLogoSVG {
    mask-image: url(../img/logo/fes_udeoff.svg);
    -webkit-mask-image: url(../img/logo/fes_udeoff.svg);
}
.udeoneLogoSVG {
    mask-image: url(../img/logo/fes_udeone_2.svg);
    -webkit-mask-image: url(../img/logo/fes_udeone_2.svg);
}

.anmVibration img{
    max-width: 280px;
    width: 70%;
    margin-top: 1%;
}
/******* arrow triangle *******/
.trianglePink, .triangleGreen {
    position: relative;
    display: inline-block;
    }
.trianglePink:before, .triangleGreen:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 12px solid #ff238d;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    top: 0;
    bottom: 0;
    left: -20px;
    margin: auto;
}
.triangleGreen:before {
    border-left: 12px solid #17de0a;
}
.trianglePink:before, .trianglePink:before {
    -webkit-animation:anmNaviBtn 0.6s infinite linear;
    animation:anmNaviBtn 0.6s infinite linear;
}
@-webkit-keyframes anmNaviBtn {
    from, to {
        -webkit-transform:translate3d(0,0,0);
    }
    50% {
        -webkit-transform:translate3d(6px, 0, 0);
    }
}
@keyframes anmNaviBtn {
    from, to {
        transform:translate3d(0,0,0);
    }
    50% {
        transform:translate3d(6px, 0, 0);
    }
}
/******* slide header *******/
.pagination_header {
    position: absolute;
    top: 680px;
    z-index: 51;
    right: 0;
    left: 0;
    margin: auto;
}
.pagination_header .swiper-pagination-bullet {
    width: 100px;
    height: 6px;
    border-radius: 0;
    background: rgba(0,0,0,.2);
}
.pagination_header .swiper-pagination-bullet-active {
    background: rgba(0,0,0,.4);
}
.swiper-container {
    text-align: center;
}
.swiper-container dl.swiper-slide img {
    max-width: 100%;
    height: auto;
}
.swiper-slide {
    /*overflow: hidden;*/
    height: auto!important;
}
/*header .main.udeoffBG dt {
    color: #2efbfe;
}
.udeoffBG .btnBox.btnBase a:before {
    background: #2efbfe;
}*/
/******* slide *******/
.bannerCate {
    position: relative;
    z-index: 50;
    top: -40px;
}

.grid {
    width: 96%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.grid li {
    max-width: 1160px;
    margin-bottom: 2%;
    overflow: hidden;
    display: block;
    position: relative;
}

.grid li.bnrFlexBox {
    max-width: 1600px;
}
.grid li.bnrFlexBox ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.grid li.itemTwo ul li {
    width: 49%;
    margin-bottom: 0;
}
.grid li.itemThree ul li {
    width: 32%;
    margin-bottom: 0;    
}
.grid li.itemfour ul li {
    width: 24%;
    margin-bottom: 0;    
}

.grid a img, .grid .nolink img {
    transition-duration: 0.5s;
}
.grid a:hover > img {
    transform: scale(1.02);
}
.grid .flexBox {
    width: 100%;
    max-width: 1470px;
}
.grid a img.bnrImgDeco,
.grid .bnrImgFull a img{
    width: 100%;
}
.grid a img.bnrImgMain{
    width: 56%;
    max-width: 720px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.grid a img.bnrImgMain.Lsize {
    width: 84%;
    max-width: 840px;
}
.grid .itemThree a img.bnrImgMain.Lsize {
    width: 100%;
}
/******* News&twitter *******/
.news_twitter {
    background: #d04cf1;
    background:linear-gradient(90deg, #d32df1, #b634d7);
    padding: 6% 0 6%;
    margin: 0 0 -8%;
    clip-path: polygon(0% 2%, 0% 95%, 100% 100%, 100% 0%);
    z-index: 1000;
    position: relative;
}
.news_twitter h2 {
    font-family: Anton-font;
    font-size: 48px;
    color: #000;
    margin-bottom: 8px;
    text-shadow: 0.18vw 0.18vw #e9ff43;
}
.news_twitter .flexBox {
    padding:0% 2% 2%;
    justify-content: center;
    box-sizing: border-box;
    max-width: 1400px;
    margin: auto;
}
.news_twitter .contents_inner {
    height: 620px;
    /*margin-bottom: 36px;*/
    padding: 16px 4%;
    box-sizing: border-box;
}
/* News List */
.news_list {
    width: 58%;
    margin: 0 1%;
}
.news_list h3 img {
    width: 31.75%;
    max-width: 142px;
}
.news_list ul li {
    padding: 3% 0;
    border-bottom: dotted 1px #ccc;
    font-size: 24px;
}
.news_list ul {
    height: 485px;
    overflow: auto;
    padding: 0 4%;
    background-color: #fff;
    list-style: none;
}
.news_list ul li {
    font-size: 14px;
    line-height: 20px;
}
.news_list time {
    color: #9ca798;
    margin-right: 4px;
    min-width: 88px;
    display: inline-block;
}
.news_list ul li a {
    color:#000;
    text-decoration:none;
}
.news_list ul li a:hover {
    color:#009ee7;
}
.news_list ul li span {
    background: #05c51d;
    color: #fff;
    padding: 1px 4px;
    font-size: 12px;
    vertical-align: middle;
}
.news_list ul li .news_udeoff {
    background: #1da1f2;
}
.news_list ul li .news_udeone {
    background: linear-gradient(90deg, #ff016b 0%, #e902c2 100%);
}
/* TwitterFrame */
.twitterFrame {
    width: 38%;
    margin: 0 1%;
}
.twitterFrame h3 img {
    width: 98%;
    max-width: 282px;
}
.twitterDetail {
    background-color: #fff;
    overflow: scroll;
    height: 83%;
}
.btnBox.btnBase a.twitterBtn{
    /*color: #fff;*/
    padding: 2%;
    margin: auto;
    font-weight: bold;
    font-size: 20px;
}
.btnBox.btnBase a.twitterBtn:before {
    /*background: #06adff;*/
}
/******* external_link *******/
.external_link nav {
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0);
    background-image: linear-gradient(135deg, #06bb81 0%, #69c500 100%);
    padding: 12% 0 2%;
}
.external_link h2 {
    width: 60%;
    max-width: 720px;
    margin: 0 auto 2%;
} 
.external_link h2 img {
    width: 100%;
}
.external_link .flexBox {
    width: 98%;
    max-width: 1200px;
    margin: auto;
    justify-content: center;
}
.external_link li {
    width: 29%;
    margin: 0 2% 4%;
    list-style: none;
    text-align: center;
}
.external_link li a {
    border: 3px solid #fff;
    padding: 8%;
    display: inline-block;
}
.external_link li a:hover {
    border: 3px solid #c6fe00;
    transition: .3s;
}
.external_link a:hover .passive, .external_link .active {
    display: none;
}
.external_link .passive, .external_link a:hover .active {
    display: inline-block;
}
.external_link img {
    width: 80%;
    vertical-align: middle;
}
/******* close *******/
.udeoffBG_udeoneBG {
    background-image: url(../img/index/bg_border.png), linear-gradient(90deg, #0453e3 0%, #1026be 50%, #edecfc 50.1%, #d4d5e6 100%);
    background: url(../img/index/bg_border.jpg) no-repeat center;
    background-size:cover ;
}
header .schedule  p.swiper-slide {
    justify-content: center;
    padding: 2% 0!important;
    font-size: 28px;
    line-height: 28px;
    width: 72%!important;
    max-width: 640px;
}
.udeoffBG_udeoneBG.bgEffectLeft:before,
.udeoffBG_udeoneBG.bgEffectRight:after {
    opacity: .3;
}
/* kira_anm */
.kira .imgRight, .kira .imgLeft {
    position: absolute;
    width: 50%;
    height: 100%;
}
.kira .imgRight {
    right: 0;
}
.kira .imgLeft {
    left: 0;
}
.kira ,.kira img {
    position: absolute;
    width: 100%;
    max-width: 1320px;
    height: 100%;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
}
.kira img {
    width: 84px;
    height: auto;
}
.kira .imgRight img:nth-child(1) {
    width: 16%;
    max-width: 84px;
    top: -40%;
    right: -94%;
    animation-delay: .7s;
}
.kira .imgRight img:nth-child(2) {
    width: 9%;
    max-width: 48px;
    top: -66%;
    left: -73%;
    animation-delay: .5s;
}
.kira .imgRight img:nth-child(3) {
    width: 8%;
    max-width: 40px;
    top: 40%;
    right: -10%;
    animation-delay: .6s;
}
.kira .imgRight img:nth-child(4) {
    width: 9%;
    max-width: 48px;
    bottom: 10%;
    left: -20%;
    animation-delay: .4s;
}
.kira .imgLeft img:nth-child(1) {
    width: 15%;
    max-width: 80px;
    top: -53%;
    left: 6%;
    animation-delay: .1s;
}
.kira .imgLeft img:nth-child(2) {
    width: 6%;
    max-width: 40px;
    top: 98%;
    left: -88%;
    animation-delay: .2s;
}
.kira .imgLeft img:nth-child(3) {
    width: 5%;
    max-width: 32px;
    bottom: -40%;
    right: -8%;
    animation-delay: .3s;
}
header .kira {
    height: 64%;
    top: -26%;
    top: -13%
}

.anmBlinking {
    animation:anmBlinking 1.2s infinite linear;
}
@keyframes anmBlinking {
    1% {
        opacity: 1;
        transform: scale(1.0);
    }
    50% {
        opacity: 0;
        transform: scale(0);
    }
    99% {
        opacity: 1;
        transform: scale(1.0);
    }
}
/*===============================================
●smart.css  画面の横幅が668pxから1200pxまで
===============================================*/
@media screen and (min-width:668px) and (max-width:1200px) {
/******* article *******/
    article {
        overflow: hidden;
    }
/******* Header *******/
    .main {
        padding: 18% 0 6%;
    }
    .main ul{
        font-size: 1.6vw;
    }
    header h1 div.anmVibration {
        padding: 8% 0;
    }
    header .category {
        width: 32%;
        margin: 4% auto 8%;
        padding: 1% 2%;
    }
    header .main .category {
        margin: 2% auto;
    }
    header .schedule .swiper-slide {
        width: 30%!important;
        margin: 0 1%;
    }
    header .schedule .swiper-slide .btnBox.btnBase {
        font-size: 2vw;
    }
    header .main dt,
    header .schedule  p.swiper-slide {
        font-size: 2.6vw;
    }
    header .main dd.text {
        font-size: 2vw;
    }
    header .main.udeoffOrangeBG .category {
        margin: 1% auto;
    }
    header .udeoffOrangeBG .schedule .swiper-slide {
        width: 100%!important;
    }
    header .main.udeoffOrangeBG dt {
        max-width: 640px; 
        font-size: 5.2vw;
        text-shadow: 0 0 4px #fe4e00, 0 0 4px #fe4e00, 0 0 4px #fe4e00, 0 0 4px #fe4e00;
    }
    header .udeoffOrangeBG .schedule .swiper-slide .btnBox.btnBase {
        font-size: 2vw;
    }

/******* slide header *******/
    .pagination_header {
        top: 71%!important;
    }

/******* slide *******/
    .grid .flexBox.itemFour a {
        width: 49%;
        margin: 0 0 2%;
    }
    .grid a img.bnrImgMain.Lsize {
        width: 74%;
    }
    .grid .itemThree a img.bnrImgMain.Lsize {
        width: 100%;
    }
/******* arrow triangle *******/
    .trianglePink:before, .triangleGreen:before {
        border-left: 8px solid #ff238d;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        left: -13px;
    }
    /* slideheader */
    .pagination_header {
        top: 68%;
    }
    /* banner */
    .bannerCate {
        top: 0;
        margin: -2% 0 6%;
    }
    .grid {
        width: 88%;
        margin-bottom: 2%;
    }
    .grid li.itemTwo ul li {
        padding: 2% 0;
    }
    .grid li.itemTwo li.bnrSpace:before{
        content: '';
        background: url(../img/banner/bnr1_common_bg_sp.png) no-repeat center;
        background-size: cover;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .grid li.itemTwo a img.bnrImgDeco {
        display: none;
    }
    .grid li.itemTwo a img.bnrImgMain {
        position: relative;
        width: 100%;
    }
    .grid a img.bnrImgMain.Lsize {
        width: 74%;
    }
    .grid .itemThree a img.bnrImgMain.Lsize {
        width: 100%;
    }
　　.news {
        width: 100%;
    }
    .news dd {
        width: 90%;
        height: 34px!important;
    }
    .ticker {
        margin: 0 0 0 1%;
    }
/******* News List-Twitter *******/
    /* News List */
    .news_twitter h2 {
        font-size: 2.8vw;
    }
    .news_twitter .contents_inner {
        height: 560px;
    }
    .news_twitter .flexBox {
        padding: 4% 0%;
    }
    .news_list {
        margin-bottom: 40px;
    }
    .news_list {
        width: 56%;
        margin: 0 1%;
    }
    .news_list ul li {
        font-size: 14px;
    }
    .twitterDetail {
        height: 92%;
    }
    .btnBox.btnBase a.twitterBtn {
        font-size: 2vw;
    }
    header .schedule p.swiper-slide {
        max-width: 800px;
        padding: 3% 0!important;
        font-size: 3vw;
        line-height: 110%;
    }
}/*media screen*/
/*===============================================
●smart.css  画面の横幅が667pxまで
===============================================*/
@media screen and (max-width:667px) {
    /******* Header *******/
    header h1 {
        margin-bottom: 30%;
    }
    header h1 div.anmVibration {
        width: 56%;
        padding: 12% 0;
    }
    header .category {
        max-width: 540px;
        width: 48%;
        margin: 5% auto 16%;
        padding: 1% 2%;
        position: relative;
    }
    header .schedule .swiper-slide {
        width: 90%;
        margin: 0 2% 2%;
        padding: 2% 4% 4%;
    }
    header dt {
        width: 40%;
    }
    header .schedule .swiper-slide .btnBox.btnBase {
        font-size: 3.2vw;
    }
    header .main dt,
    header .schedule  p.swiper-slide {
        font-size: 7vw;
    }
    header .main dd.text {
        font-size: 3vw;
    }
    header .main.udeoffOrangeBG .category {
        margin: 5% auto 10%;
    }
    header .udeoffOrangeBG .schedule .swiper-slide {
        padding: 4% 0;
        max-width: 668px;
        width: 100%!important;
    }
    header .main.udeoffOrangeBG dt {
        font-size: 8.2vw;
        text-shadow: 0 0 4px #fe4e00, 0 0 4px #fe4e00, 0 0 4px #fe4e00, 0 0 4px #fe4e00;
    }
    header .udeoffOrangeBG .schedule .swiper-slide .btnBox.btnBase {
        width: 48%;
        font-size: 4vw;
        line-height: 100%;
    }
    header .udeoffOrangeBG .schedule .swiper-slide .btnBase.btnBase a, 
    header .udeoffOrangeBG .schedule .swiper-slide .btnBase.btnBase span {
        padding: 2% 4%;
        line-height: 110%;
    }
/* deco chara  */
    .decoImgChara{
        height: 75%;
        z-index: 1000;
    }
    .decoImgChara .imgRight,
    .decoImgChara .imgLeft {
        height: 100%;
    }
    .decoImgChara .imgLeft img:nth-child(6) {
        width: 128%;
        top: auto;
        bottom: -2%;
        right: -5%;
    }
    .decoImgChara .imgRight img:nth-child(5) {
        width: 108%;
        top: auto;
        bottom: 0;
        left: -5%;
    }
    .trianglePink:before, .triangleGreen:before {
        border-left: 11px solid #ff238d;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
    }
/* slideheader */
    .pagination_header {
        top: 93%;
        display: flex;
        justify-content: center;
    }
    .pagination_header .swiper-pagination-bullet {
        width: 18%;
        height: 5px;
    }
    .slidesystem .swiper-wrapper, .slidesystem_2 .swiper-wrapper {
        justify-content: initial;
        width: 90%;
    }
    .slidesystem .flexBox, .slidesystem_2 .flexBox {
        display: flex;
    }
    header .swiper_system_arrow {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 8%;
        width: 94%;
        justify-content: space-between;
        margin: auto;
        display: flex;
        z-index: 1000;
    }

/******* slide *******/
    .bannerCate {
        top: 0;
        margin: -2% 0 6%;
    }
    .grid {
        width: 90%;
        margin-bottom: 2%;
    }
    .grid li {
        max-width: 1160px;
        margin-bottom: 0%;
        overflow: hidden;
        display: block;
        position: relative;
    }
    .grid li.itemTwo ul li {
        width: 100%;
    }
    li.bnrSpace,
    .grid li.itemTwo ul li.bnrSpace,
    .grid li.itemTwo ul li.bnrImgFull {
        margin-bottom: 2%;
    }
    .grid li.itemTwo ul li.bnrImgFull {
        padding: 0;
    }
    .grid li.itemThree ul li {
        width: 100%;
        margin-bottom: 2%;
    }
    .grid li.itemfour ul li {
        width: 49%;
        margin-bottom: 2%;
    }
    .grid li.bnrImgFull {
        margin-bottom: 2%;
    }
    .grid li.bnrSpace{
        padding: 6% 0;
    }
    .grid li.bnrSpace:before{
        content: '';
        background: url(../img/banner/bnr1_common_bg_sp.png) no-repeat center;
        background-size: cover;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .grid a img.bnrImgDeco {
        display: none;
    }
    .grid a img.bnrImgMain {
        position: relative;
        width: 100%;
    }
    .grid a img.bnrImgMain.Lsize {
        width: 100%;
    }
/******* News List-Twitter *******/
    /* News List */
    .news_twitter {
        padding: 6% 0 8%;
        margin: 0 0 -30%;
        clip-path: polygon(0% 0%, 0% 98%, 100% 100%, 100% 0%);
    }
    .news_twitter h2 {
        font-size: 8vw;
    }
    .news_twitter .flexBox {
        padding: 10% 0;
        padding: 0 0 10%;

    }
    .news_list, .twitterFrame {
        width: 94%;
        margin: auto;
    }
    .news_list ul {
        height: auto;
        max-height: 479px;
        line-height: 18px;
    }
    .news_list ul li {
        font-size: 12px;
    }
    .news_list time {
        min-width: 72px;
    }
    .news_list ul li span {
        font-size: 10px;
    }
    .news_list h3 img {
        width: 30%;
    }
    .twitterFrame h3 img {
        width: 60%;
    }
    .twitterFrame iframe {
        width: 740px !important;
    }
    .news_twitter .contents_inner {
        height: auto;
        margin-bottom: 4%;
        padding: 6% 4%;
    }
    .btnBox.btnBase a.twitterBtn {
        font-size: 16px;
    }
    /******* external_link *******/
    .external_link {
        padding: 20% 0 0;
    }
    .external_link .flexBox {
        width: 80%;
    }

    .external_link nav {
        padding: 16% 0 8%;
    }
    .external_link li {
        width: 44%;
    }
    .external_link li a {
        border: 2px solid #fff;
    }
    .external_link li a:hover {
        border: 2px solid #c6fe00;
    }
    .external_link img {
        width: 100%;
    }
    header .schedule  p.swiper-slide {
        width: 90%!important;
        font-size: 5vw;
        line-height: 110%;
        padding: 5% 0!important;
    }
    .kira .imgRight img:nth-child(1) {
        top: -50%;
        right: -54%;
    }
    .kira .imgRight img:nth-child(2) {
        top: -104%;
        left: -73%;
    }
    .kira .imgRight img:nth-child(3) {
        top: 73%;
        right: 60%;
    }
    .kira .imgRight img:nth-child(4) {
        bottom: 10%;
        left: 30%;
    }
    .kira .imgLeft img:nth-child(1) {
        top: -83%;
        left: -44%;
    }
    .kira .imgLeft img:nth-child(2) {
        top: -18%;
        left: -68%;
    }
    .kira .imgLeft img:nth-child(3) {
        bottom: -20%;
        right: -8%;
    }
}/*media screen*/

/*===============================================
●smart.css  横画面
===============================================*/
@media only screen and (max-device-width:667px) and (orientation:landscape) {

/******* Header *******/
/* header */
    .main {
        padding: 10% 0;
    }
    header h1 {
        width: 54%;
        margin: auto;
    }
    header .category {
        width: 42%;
        margin: 1% auto;
        position: relative;
    }
    header .decoChara {
        top: -4%;
    }
    header .decoChara img {
        width: 50%;
    }
    header .decoChara .imgRight {
        right: -90%;
    }
    header .decoChara .imgLeft {
        left: -90%;
    }
/* deco chara  */
    .decoImgChara .imgLeft,
    .decoImgChara .imgLeftSP {
        position: absolute;
        width: 50%;
        left: -3%;
    }
    .decoImgChara .imgRight,
    .decoImgChara .imgLeft {
        height: 70%;
    }
    .decoImgChara .imgLeft img:nth-child(6) {
        width: 88%;
        top: 0;
        bottom: -12%;
        right: 30%;
    }
    .decoImgChara .imgRight img:nth-child(5) {
        width: 80%;
        top: 0;
        bottom: 0;
        left: 29%;
    }
    .pagination_header {
        top: 86%;
    }
    /* スワイプ無効 */
    .slidesystem .swiper-wrapper, .slidesystem_2 .swiper-wrapper {
        justify-content: initial; 
        width: 80%;
        margin: auto;
        transform: none!important;
    }
    header .schedule .swiper-slide {
        padding: 3% 2% 2%;
        width: 50%;
    }
    header .swiper_system_arrow {
        display: none;
    }
    /******* News List-Twitter *******/
    .news_list, .twitterFrame {
        width: 80%;
        margin: 0 auto 6%;
    }
    .news_list ul {
        min-height: 480px;
    }
    .news_list h3 img {
        width: 20%;
    }
    .twitterFrame h3 img {
        width: 40%;
    }
}/*media screen*/


/*========== 初回固定表示 ==========*/
header h1 {
    margin: auto;
    position: absolute;
    top: 220px;
    /*bottom: 0;*/
    right: 0;
    left: 0;
}
.main {
    padding: 670px 0 60px;
}

@media screen and (min-width:668px) and (max-width:1200px) {
    header h1 {
        top: 22%;
    }
    .main {
        padding: 58% 0 6%;
    }
}/*media screen*/
@media screen and (max-width:667px) {
    header h1 {
        top: 9%;
    }
    .main {
        padding: 103% 0 14%;
    }
}/*media screen*/
@media only screen and (max-device-width:667px) and (orientation:landscape) {
    header h1 {
        top: 12%;
    }
    .main {
        padding: 42% 0 10%;
    }
    .decoImgChara .imgRight, .decoImgChara .imgLeft {
        height: 80%;
    }
    .slidesystem .swiper-wrapper, .slidesystem_2 .swiper-wrapper {
        justify-content: center;
    }
}/*media screen*/
/*========== 初回固定表示ここまで ==========*/