@charset "UTF-8";

#pc-bg, #pc-bg.top, #pc-bg.lower{background: #587c9f;}
/*#pc-bg #fp-wrap{ opacity: 0; transition: 0.5s;}
#pc-bg.top #fp-wrap{ opacity: 0; transition: 0.8s;}
#pc-bg.go #fp-wrap{ opacity: 1;}*/

.nav-story a,.nav-story{position: relative;}
.nav-story a:before,.nav-story:before{ color: #FFF; background-color:#e95894; text-decoration: none; text-indent: 0; display: block; border-radius:4px;
font-size: 13px; line-height: 1; padding: 5px 0; text-align: center; position: absolute; top: -5px; left: 0; right: 0; margin: 0 auto; z-index: 10;}

.s-bnr__item--tver a,.s-bnr__item--tver{position: relative;}
.s-bnr__item--tver a:before,.s-bnr__item--tver:before{ color: #FFF; background-color:#e95894; text-decoration: none; text-indent: 0; display: block; border-radius:4px;
font-size: 13px; line-height: 1; padding: 5px 0; text-align: center; position: absolute; top: -16px; left: 10px;z-index: 10;}


.center{ text-align: center;}
.textRight{ text-align: right;}
.txt-l{ font-size: 1.2em;}
.txt-l { font-size: 1.18em;}

body{ background-attachment: #fff;}
#fp-wrap{
  background: url(../photo/teppachiBgTop.jpg) top center / 1800px auto no-repeat, url(../photo/teppachiBg.jpg) top  center / 1800px auto fixed no-repeat, #0765a8 ; font-size: 1.4rem; font-feature-settings: "palt";
  letter-spacing: 0.05ch; line-height: 1.7;
}

.smal{ font-size: 0.7em; font-weight: 100;}
.bnrTver{ width: auto; margin: 10px 0 0; padding: 0 20px;}

.menu--4.menu--sp2 .menu__item { width: 160px; height: auto; }
.menu--4.menu--sp2 .menu__item a { text-indent: 0; height: auto;}

.cmsn img{ opacity: 0.25;}
.cmsn img{ opacity: 1;}
.white{ color: #fff;}
.bgWhite{ background: #fff;}
.bgGray{ background: #dedede;}
.bgCobaltBlue{ background: #778eb5;}
.bold{ font-weight: bold;}
.blue{ color: #327aca ;}
.deepBlue{ color: #2e3b5a;}
.bgDeepBlue{ background: #2e3b5a;}

.mainvisual{ margin-top: 20px;}
.mainvisual h1{ opacity: 0;}
.cx_smartphoneview .mainvisual{ margin-top: 0px;}
.cx_smartphoneview .mainvisual h1{ opacity: 1;}

.nav-story a:before, .nav-story:before { color: #000; background-color: #fff; border-radius: 0; font-size: 12px; top: -8px; width: calc(100% - 40px);}

.content__title { position: relative; padding: 0; font-weight: 100; background: none; line-height: 1.4em; font-size: 2.1rem;}
.content__title span{ margin: 0.3em 1ch 0;}

.topWn .content__title span{ color: #fff;}

.content__title_left { text-align: left; padding: 0 20px;}

.content__title.bold{ font-weight: bold;}

.content { padding: 40px 0; background: #fff; position: relative;}
.content.bgWhite { background: #fff;}
.content.bgCobaltBlue { background: #587c9f;}

.cx_smartphoneview .content__title { line-height: 1.4em;font-size: 1.7rem;}


.swiper-slide {padding: 0; background-color: #fff;}
.slider__update{ font-size: 1.4rem;  margin-left: 10px; color: #000; line-height: 1;}
.slider__update span{
  background: #327aca; padding: 4px 10px 3px; display: inline-block; border-radius: 0px; vertical-align: middle;
  color: #fff; line-height: 1; letter-spacing: 0ch; font-size: 0.84em; text-transform: uppercase;
}
.slider__text{ padding: 0 10px 10px; font-size: 1.4rem;}

.swiper-container{}
.slider{ overflow: hidden;}
.swiper-container-news{ width: 560px; height: 260px;}
.swiper-container.swiper-container--mov{ width: 560px; height: auto; overflow: visible;}
.swiper-container--mov .swiper-slide{ background: none; opacity: 0.2;}
.swiper-container--mov .swiper-slide.swiper-slide-active{ opacity: 1;}

.swiper-container--mov + .swiper-prev + .swiper-next,
.swiper-container--mov + .swiper-prev { top: 43%;}

.swiper-prev:before{ content: ""; display: block;  width: 72%; height: 72%; transform: translate( 15%, 0) rotate( -225deg); background:none; border-right: #fff solid 4px; border-bottom: #fff solid 4px; }
.swiper-next:before{ content: ""; display: block;  width: 72%; height: 72%; transform: translate( 3%, 0) rotate( -45deg); background:none; border-right: #fff solid 4px; border-bottom: #fff solid 4px; }

.swiper-prev{
    left: 10px;
}
.swiper-next{
    right: 10px;
}


.cx_smartphoneview .topWn .swiper-container--mov .swiper-slide{ background: #fff;}

.topWn{ background: url(../img/wnBg.jpg) center center / 100% 100% no-repeat; border-radius: 6px; box-shadow: 2px 2px 10px 3px rgb(0 0 0 / 12%);}
.topWn .content__title_left{ padding-left: 40px; }
.topWn .content__title span{ color: #fff;}

.txtBox{padding: 0 20px;}
.linkBtn{ text-align: center;}
.linkBtn a{ position: relative; display: inline-block; width: 320px; height: 50px; line-height: 50px; border-radius: 2px; transition: 0.3s; }
.linkBtn a:hover{}
.linkBtn_b a{ background: #327aca; color: #fff; border: 1px solid #327aca;}
.linkBtn_b a:after{ content: ""; width: 48px; height: 5px; position: absolute; top: 50%; right: 20px; background: url(../img/iconAroowW.png) center center / 100% auto no-repeat; transform: translate(0, -50%);}

.linkBtn_b a:hover{ background: #fff; color: #327aca;}
.linkBtn_b a:hover:after{ right: 16px; background: url(../img/iconAroow.png) center center / 100% auto no-repeat; }

.linkBtn_w a{ background: #fff; color: #327aca; border: 1px solid #fff;}
.linkBtn_w a:after{ content: ""; width: 48px; height: 5px; position: absolute; top: 50%; right: 20px; background: url(../img/iconAroow.png) center center / 100% auto no-repeat; transform: translate(0, -50%);}

.linkBtn_w a:hover{ background: #327aca; color: #fff;}
.linkBtn_w a:hover:after{ right: 16px; background: url(../img/iconAroowW.png) center center / 100% auto no-repeat; }


.intvArc{padding: 10px 20px;}
.intvArc + .intvArc{ padding: 40px 20px 10px; border-top: 1px solid #000; margin-top: 20px;}
.intvArcInner{ background: #fff;}
.intvArc figure{ width: 49.5%; display: inline-block; vertical-align: middle;}

.intvArcTxt{width: 49.5%;display: inline-block; vertical-align: middle;}
.intvArcTxt h3{ text-align: center; font-weight: bold; font-size: 3.2rem;}
.intvArcTxt h3 .yaku{ font-weight: 100; font-size: 0.4375em; display: block; line-height: 1;}
.intvArcTxt h3 .keisho{ font-size: 0.75em;}

.intvArcTl{width: 100%;display: inline-block; vertical-align: middle;}
.intvArcTl{ text-align: center; font-weight: bold; font-size: 3.2rem;}
.intvArcTl .yaku{ font-weight: 100; font-size: 0.4375em; display: block; line-height: 1;}
.intvArcTl .keisho{ font-size: 0.75em;}

.qaArea{ padding: 10px;}
.qaArea dt{ background: url(../img/iconQ.png) left top 5px / 40px auto no-repeat; padding-left: 50px;}
.qaArea dd{ background: url(../img/iconA.png) left top 5px / 40px auto no-repeat; padding-left: 50px; margin-top: 10px;}


.contentMsg .content__title img{ margin: 0 5px; vertical-align: middle;}
.contentMsg .content__title span{ margin: 0 5px; vertical-align: middle;}

.contentSns .content__title{ display: inline-block;}
.contentSns .content__title span{ margin:  0.3em 0 0;}

.snsBtnArea{display: inline-block; vertical-align: top;}
.snsBtnArea a{ display: block;}
.snsBtnArea a + a{ margin-top: 20px;}

.content{ border-radius: 6px; }
.cx_smartphoneview #fp-wrap{ background: url(../photo/teppachiBgBootom.jpg) top center / 1800px auto, url(../photo/teppachiBg.jpg) top  center / 1800px auto fixed no-repeat,; font-size: 1.4rem; }

.cx_smartphoneview .bnrTver{width: 100%; margin: 0; padding: 0; box-sizing: border-box; background: #071819;}
.cx_smartphoneview .content { margin: 15px 15px;}
.cx_smartphoneview .s-bnr{ margin: 15px 15px;}


.cx_smartphoneview .menu--4.menu--sp2 .menu__item { width: 320px; padding: 0 60px; box-sizing: border-box; background: #327aca; border: #fff 0.03em solid;}
.cx_smartphoneview .menu--4.menu--sp2 .menu__item:first-child{ border-top: 0; border-left: 0;}
.cx_smartphoneview .menu--4.menu--sp2 .menu__item:nth-child(2){ border-top: 0; border-right: 0;}
.cx_smartphoneview .menu--4.menu--sp2 .menu__item:nth-child(3){ border-bottom: 0; border-left: 0;}
.cx_smartphoneview .menu--4.menu--sp2 .menu__item:nth-child(4){ border-bottom: 0; border-right: 0;}
.cx_smartphoneview .menu--4.menu--sp2 { border-bottom: none;}

/*.cx_smartphoneview .intvArc figure { width: 100%; position: relative; padding-bottom: 56.25%; padding-bottom: 68%; overflow: hidden;}
.cx_smartphoneview .intvArc figure img{ position: absolute; top: 50%; left: 0; transform: translate(0, -38%);}*/

.cx_smartphoneview .intvArc figure { width: 100%; position: relative; padding-bottom: 56.25%; padding-bottom: 68%; overflow: hidden;}
.cx_smartphoneview .intvArc figure img{ position: absolute; top: 50%; left: 0; transform: translate(0, -50%);}

.cx_smartphoneview .intvArcTxt { width: 100%; display: inline-block; vertical-align: middle; padding: 30px; box-sizing: border-box;}

.cx_smartphoneview .snsBtnArea a + a{ margin-top: 10px;}
.cx_smartphoneview .snsBtnArea { display: inline-block; vertical-align: top; padding: 0 20px; width: 52%; box-sizing: border-box;}

.cx_smartphoneview .contentSns .content__title{width: 46%; box-sizing: border-box;}

.cx_smartphoneview .qaArea dt{ background: url(../img/iconQ.png) left top 5px / 50px auto no-repeat; padding-left: 65px;}
.cx_smartphoneview .qaArea dd{ background: url(../img/iconA.png) left top 5px / 50px auto no-repeat; padding-left: 65px; margin-top: 10px;}

.cx_smartphoneview .topWn .content__title.content__title_left{ text-align: center; padding: 0;}
.cx_smartphoneview .topWn .content__title.content__title_left span{ display: block;}

.cx_smartphoneview .topWn .swiper-container { width: 100%; height: 450px;}
.cx_smartphoneview .contentMsg .content__title span{ display: block; padding: 0; margin: 0 auto; height: auto;}
.cx_smartphoneview .contentMsg .content__title img + span{ margin-top: 20px;}

.cx_smartphoneview .linkBtn a { width: 420px; height: 72px; line-height: 72px;}

.topIntro{ padding: 30px 0 20px; }
.topIntro{ position: relative; overflow: hidden;}
.topIntroImg{ width: 400px; position: absolute; top: 0; left: 0;}

.cx_smartphoneview .topIntro{ padding: 40px 0; }
.cx_smartphoneview .topIntroImg{ width: 100%;}

.topIntro .txtBox{margin-left: 400px; text-align: left;}

.topIntro .linkBtn{ text-align: right; padding-right: 20px;}
.topIntro .linkBtn a{
    width: 200px;
    text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
}

.cx_smartphoneview .topIntro .txtBox {
    margin-left: 0;
    text-align: center;
    padding-top: 400px;
}
.cx_smartphoneview .topIntro .linkBtn{
    text-align: center;
    padding: 0;
}
.cx_smartphoneview .topIntro .linkBtn a{
    width: 420px; text-align: center; padding-left: 0px;
}

.topStory{}
.topStory .content__title{ text-align: left; margin-left: 20px;}

.storyMovArea{
    background: url(../img/topMovBg.jpg) center center / cover no-repeat ;
    padding: 30px 0 10px;
}

.storyMovArea figure{ position: relative; height: auto;overflow: hidden;}
.storyMovArea figure img{ width: 100%; max-width: none;}
/*.storyMovArea article + article{ border-top: 1px solid #587c9f; padding-top: 30px;}*/

.storyMovArea .txtBox{ color: #fff;}

.movArea{ overflow: hidden; padding: 30px 40px 15px; background: url(../img/topMovBg.jpg) center center / cover no-repeat; padding: 30px 0 10px;}
/*.movArea .txtBox { padding: 0 20px; font-weight: bold; color: #fff; font-size: 18px;}*/
.movArea .swiper-slide{ width: 91.07%; margin: 0 auto; transition: 0.8s; background: none;}
.movArea .swiper-prev { left: -10px;}
.movArea .swiper-next { right: -10px;}

.swiper-container--mov .swiper-slide{ background: none; opacity: 0.4;}
.swiper-container--mov .swiper-slide.swiper-slide-active{ opacity: 1;}

.swiper-container--mov + .swiper-prev + .swiper-next,
.swiper-container--mov + .swiper-prev { top: 43%;}

.swiper-mov-prev.swiper-prev:before{ border-right: #fff solid 10px; border-bottom: #fff solid 10px; box-sizing: border-box; }
.swiper-mov-next.swiper-next:before{ border-right: #fff solid 10px; border-bottom: #fff solid 10px; box-sizing: border-box;}


#pc-bg.lower .l-header { height: auto; margin-top: 20px; }
#pc-bg.lower .l-header h1{ opacity: 0;}
#pc-bg.lower #fp-wrap{ background: 
    url(../photo/teppachiLowBgTop.jpg) top center / 1800px auto no-repeat, url(../photo/teppachiBg.jpg) top  center / 1800px auto fixed no-repeat, #0765a8; font-size: 1.4rem; font-feature-settings: "palt";
}

.cx_smartphoneview #pc-bg.lower .l-header { height: auto; margin-top: 0px; }
.cx_smartphoneview #pc-bg.lower .l-header h1{ opacity: 1;}

.pageMainImg{ margin-top: -40px;}

.content__body { margin: 0; padding: 30px 20px 30px 20px; padding-bottom: 30px;}
.content__subtitle{ background: #0765a8; border: none; color: #fff; padding: 0.6ch 1.6ch; line-height: 1.3; font-size: 1.6rem; font-weight: bold;}

.content__body .qaArea{ padding: 00px;}
.content__body .qaArea dt{ background: url(../img/iconQ.png) left top 5px / 21px auto no-repeat; padding-left: 32px; padding-top: 4px; min-height: 40px; font-size: 1.1em; font-weight: bold;}
.content__body .qaArea dd{ background: url(../img/iconA.png) left top 5px / 21px auto no-repeat; padding-left: 32px; margin-top: 5px; min-height: 40px; color: #333;}
.content__body .qaArea dd + dt{ margin-top: 20px;}
.content__body .qaArea dd + dd{ background: none; margin-top: 20px; min-height: auto;}


.cast-list dl {display: table; width: 100%; margin: 0px auto 10px auto; font-size: 2.1rem; font-weight: bold;}
.cast-list dd{line-height: 1; }
.cast-list dd span{ font-size: 0.7em; line-height: 1; display: inline-block; font-weight: 100;}
.cast-list p{ text-align: center; font-size: 1.4rem; font-weight: bold; }

.staffList_box dt {font-weight: bold; font-size: 0.9em; width: 100%; display: inline-block; padding: 0px 0 5px; box-sizing: border-box; text-align: center;}
.staffList_box dd { font-size: 1.3em; display: inline-block; width: 100%; vertical-align: top; margin-bottom: 20px; padding: 0px 20px; box-sizing: border-box; font-weight: bold; text-align: center; }
.staffList_box dd cite { font-size: 0.7em; display: block; font-weight: 100; color: #000;}
.cast-list dt { display: table-cell; width: 46.4%; text-align: right;}


.cx_smartphoneview .cast-list dl { font-size: 1.8rem;}
.cx_smartphoneview .cast-list dt { display: table-cell; width: 44.4%; text-align: right;}
.cx_smartphoneview .staffList_box dd{ padding: 0;}

.backnumber__list{padding: 0 15px; font-size: 0;}
.backnumber__list li{ width: 25%; padding: 0 5px; display: inline-block; box-sizing: border-box; vertical-align: top;}
.backnumber .intvArcTl { text-align: center; font-weight: bold; font-size: 1.6rem; margin-top: 5px; color: #000;}

.backnumber__title {
    height: auto;
    margin: 0px auto 10px;
    background: none;
    text-indent: 0;
    text-align: center;
    font-size: 2.4rem;
    font-weight: bold;
}
.backnumber {
    margin: 30px auto 0;
    padding-bottom: 40px;
}



.cx_smartphoneview .backnumber__list li{ width: 33.333%;}
.cx_smartphoneview .backnumber .intvArcTl { font-size: 1.3rem;}
.cx_smartphoneview .cast-list dd span{ font-size: 0.7em; line-height: 1; display: inline-block; padding-left: 20px;}
.cx_smartphoneview .cast-list dd span { font-size: 0.7em; line-height: 1;margin-left: 5px; padding-left: 0;}



.linkBox{
    border: 1px solid #333333;
    font-size: 0;
    background: #fff;
    position: relative;
    margin: 0 40px;
}

.linkBox:after{ content: ""; width: 20px; height: 20px; border-right: 1px solid #;}
.linkBoxFig{
    width: 36%;
    display: inline-block;
    margin-right: 5%;
    vertical-align: middle;
}
.linkBoxTl{
    display: inline-block;
    font-size: 1.6rem;
    font-weight: bold;
    vertical-align: middle;
    color: #000;
}
.linkBoxTl span{ font-size: 1.2em;}

.arrow{
    position: absolute; display: block; width: 20px; height: 20px; border-bottom: 1px solid #333; border-right: 1px solid #333;
    right: 3%; top: 50%; transform: rotate(-45deg) translate(0px, -50%);
}
.linkBox:hover{ border: 1px solid #333; }
.linkBox:hover .arrow{border-bottom: 1px solid #333; border-right: 1px solid #333;}

.contentTl{ text-align: center;}


.cx_smartphoneview .linkBoxFig { margin-right: 2%;}
.cx_smartphoneview .linkBoxTl{ font-size: 1.4rem;}
.cx_smartphoneview .linkBox { margin: 0 20px;}

.cx_smartphoneview .swiper-slide { width: 464px;}


/*.youtubeBox{ position: relative; width: calc(100% - 40px); max-width: 490px; padding-top: calc((100% - 40px) * 0.5625); margin: 0 auto;}*/
.youtubeBox{ position: relative; width: 100%; max-width: 490px; padding-top:; margin: 0 auto; }
/*.youtubeBox{ position: relative; width: 100%; padding-top: 56.25%; margin: 0 auto;}*/
/*.youtubeBox iframe{   position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}*/


@media print{
  .l-main,
  img{ display: none;}
}




.backnumber p{
    font-size: 1.2rem;
    color: #000;
    line-height: 1.6;
    letter-spacing: 0;
}





.pcMainVisial{
    width: calc(100% + 90px);
    margin-left: -80px;
    height: calc(320px - 52px);
    margin-top: 0px;
    overflow: hidden;
    position: relative;
}

.teppachiH1{ opacity: 0; position: absolute; right: -18px; top: 5px; }
.teppachiVisial{
    position: absolute;
    width: 480px;
    top: -20px;
    left: -10px;
}
.mainVisialInfo{ position: absolute; bottom: 0; left: 0px; width: 100%;}

.boxShadow{box-shadow: 2px 2px 10px 3px rgb(0 0 0 / 12%);}


.news_backnumber .backnumber__list li { width: 100%; padding: 0;}
.news_backnumber .backnumber__list li span{ display: inline-block; padding: 2px 2px; background: #999; line-height: 1; color: #fff; width: 12%; text-align: center; font-size: 0.9em;}
.news_backnumber .backnumber__list li span{ font-weight: bold;}
.news_backnumber .backnumber__list li + li{ padding-top: 10px; border-top: 1px solid #999;}

.cx_smartphoneview .news_backnumber .backnumber__list li { width: 100%;}
.cx_smartphoneview .news_backnumber .backnumber__list li span{ padding: 2px 2px; width: 20%;}


.boxHalf{ width: 310px; display: inline-block; padding: 0; margin: 0; }
.boxHalf + .boxHalf{margin-left: 14px;}
.boxHalf .content__title{ text-align: center;}
.boxHalf .content__title img{margin: 0 auto;}

.cx_smartphoneview .boxHalf{ width: 610px; display: block; padding: 0; margin: 15px; }
.cx_smartphoneview .boxHalf + .boxHalf{margin: 15px;}



.lower .l-header h1 a {display: block;}
.cx_smartphoneview .lower .l-header h1 a {display: block; padding-top: 0px;}

.contents_update{
    background: #327aca; color: #fff; font-weight: 100; line-height: 1; font-size: 14px;
    display: inline-block; padding: 7px 20px; border-radius: 0px; position: absolute; right: 40px; top: 45px;
}
.contents_update_pink{ background: #e37790;}

.cx_smartphoneview .contents_update { padding: 4px 10px; font-size: 0.9em;}

.movBox .content__title{ text-align: left; padding-left: 40px;}
.cx_smartphoneview .movBox  .swiper-slide {
    width: 464px;
    padding: 0;
}



.videoBox{ width: 100%; padding: 5px 0 15px; padding: 0;}
.videoBox video{ width: 100%; }


.storyContent{ background: url(../img/bg-deepBlue.jpg); border-radius: 6px;}





.c_popup_bg{ position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(167, 200, 236, 0.75); transition: 0.3s; z-index: 9000}
.chart_box{
    position: fixed; top: 50%; left: 50%; transition: 0.3s;
    -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
    font-size: 0; z-index: 10000;
    width: 100%;
    height: 100%;
    max-width: 900px;
    max-height: 540px;
    background: #fff;
    box-shadow: 2px 2px 12px 2px rgb(0 0 0 / 10%);
}


.photo_area{ position: relative; height: 100%;}
.photo_area img{ height: 100%; width: auto;}

.chrt_date{
    width: 53.33%;
    height: 100%;
    position: absolute;
    top: 0; right: 0;
}
.chrt_txt{ color: #000;  height: 61.5%; margin-top: 40px; margin-bottom: 40px; overflow-x: none; overflow-y: scroll; padding-bottom: ;}
.chrt_txt p{ padding: 0px 30px 30px; line-height: 1.7; font-size: 1.4rem; letter-spacing: 0.03em;}


.cx_smartphoneview .chart_box{ height: 78.46vh; width: 100%; max-height: none;}
.cx_smartphoneview .chrt_date {
    position: absolute; bottom: auto; height: 100%; width: 100%;
    margin-top: 0; bottom: 0;  padding-bottom: 20px;
    background:linear-gradient(to bottom, rgba(255, 255, 255,0) 40%, #FFF 70% );
    padding-top: calc( 73.46vh * 0.62122); box-sizing: border-box;
}
.cx_smartphoneview .photo_area{ position: relative ; overflow: hidden;}
.cx_smartphoneview .photo_area img{ height: auto; width: 100%; margin-top: -5%;}
.cx_smartphoneview .chrt_txt{ height: calc( 78.46vh * 0.278 ); margin-top: 13px;}
.cx_smartphoneview .chrt_txt p { font-size: 1.3rem;}


.p_close{
    top: 0px;
    left: 100%;
    margin: 0;
    text-decoration: none;
    display: block;
    top: 0;
    left: auto;
    right: 0;
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    position: relative;
    position: absolute;
    background: #3179cb;
    z-index: 100;
}
/*.p_close:before, 
.p_close:after { position: absolute; left: 29px; top: 9px; content: ' '; height: 40px; width: 2px; background-color: #a382af; z-index: 100;}
.p_close:before { -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.p_close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}*/
.p_close span {
    display: block; margin: 0 !important;
    width: 20px !important; height: 1px !important;
    background: #fff;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.cx_smartphoneview .p_close{
    top: 0; right: 0; z-index: 100;
    width: 80px !important; height: 80px !important;
}
.cx_smartphoneview .p_close span{
    width: 40px !important; height: 2px !important;
}


.c_popup_bg{ display: none; }
.chart_box{ display: none; }



.c_popup_bg.active{ display: block; }
.chart_box.active{ display: block; }


#character{ position: relative; }

.cimg{  -webkit-transition: 0.3s; transition: 0.3s; cursor: pointer !important;}
.cimg:hover{ opacity: 0.4; cursor: pointer!important;}

#character img.cimg{ position: absolute; display: block; cursor: pointer !important; opacity: 0; -webkit-transition: 0.3s; transition: 0.3s;}
#character img.cimg:hover{ opacity: 0.4; cursor: pointer!important;}
img.cimg{ cursor: pointer !important; display: block;}
.cx_smartphoneview #character img.cimg:hover{ opacity: 0; cursor: pointer!important;}

.chrt_date h3{
    /*font-family: 'Noto Serif JP', serif;*/
    font-size: 4.2rem;
    color: #3179cb;
    font-weight: bold;
    text-align: center;
    padding: 0;
    line-height: 1.3;
    letter-spacing: 0.05em;
    margin-top: 90px;
}
.chrt_date h3 ruby rt{
    font-size: 0.238em;
    text-align: center;
    letter-spacing: 0.25em;
    padding-left: 0.2em;
    padding-bottom: 0.4em;
}
.chrt_date h3 span{
    font-size: 0.4285em; display: block;
    letter-spacing: 0.05em;
}


.cx_smartphoneview .chrt_date h3{
    font-size: 3.0rem; margin: 0;
}
.cx_smartphoneview .chrt_date h3 span{
    display: inline-block ; vertical-align: middle; margin-left: -0.8em;
}


.virtical{
    max-width: 320px; margin: 0 auto 30px;
}

.cx_smartphoneview .virtical{
    max-width: none; margin: 0 auto 30px;
}




.cx_instagram_target{}
.cx_instagram_target ul{
    display: flex;
    flex-wrap: wrap;
    border-top: 8px solid #327aca;
    border-bottom: 8px solid #327aca;
    border: 16px solid #327aca;
}
.cx_instagram_target ul li{ width: 33.333%; background: #327aca;}
.img_wrap{ position: relative; width: 100%; height:0; padding-bottom: 100%; overflow: hidden;}
.img_wrap img{ position: absolute; max-width: none; height: auto%; width: 100%; top: 50%; left: 50%; transform: translate( -50%, -50%);}

li.horizontally-long .img_wrap img{ height: 100%; width: auto;}

.cx_smartphoneview
.cx_instagram_target ul li{ width: 50%; background: #327aca;}

#targetTwitterEmbed{ 
    box-sizing: border-box;
    border-top: 1px solid #327aca;
    border-bottom: 1px solid #327aca;
    width: 100%;
    height: 540px;
}

#fp-l .mutters {
    border-bottom: 1px solid #ddd;
    padding: 40px 50px;
}

.cx_smartphoneview #fp-l .muttersWrap{ font-size: 24px;}
.cx_smartphoneview #targetTwitterEmbed{ height: 64vh;}