@charset "utf-8";
/* ========================================

	monkichi

	--------------------
	service.css 
	-------------------
	   
========================================== */

/* root
----------------------------------- */
:root {
	--color-white: #fff;
    --color-white-opc50: #ffffff50;
	--color-black: #000;
	--color-orange: #ec6f2c;
	--color-blue: #00aad9;
	--color-yellow: #F5E23A;
	--font-common: "Roboto", "Noto Sans JP", sans-serif;
	--font-title: "Raleway", sans-serif;
}


/* clearfix
----------------------------------- */
.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display:block;}
.clear { clear: both; }


.red { color: #ff2222!important; }
.center { text-align: center!important; }
.bold {font-weight: bold!important;}

#next .loading {
	display: none;
    padding: 30px;
    text-align: center;
}
#next .loading img {
	width: 40px;
}
#next .pageAuto{
    padding: 0;
    pointer-events: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
	display: block;
	width: 100%;
}

a, a:link, a:visited {
    color: var(--color-yellow);
    text-decoration: none;
}

/* リセット
-------------------------------- */

.loginNav ul{
	background: transparent;
	border:none;
}
.loginNav li {
    width: 100%;
    float: none;
}
.loginNav li a {
    display: block;
    color: var(--color-black);
    text-align:center;
    padding: 5px 0 7px;
	font-weight:normal;
}
.loginNav li a:before {
    font-size: 0.8em;
    padding: 0 5px 0 0;
}

.contentsList li  {
    border:none;
}

.contentsList li:nth-child(even) {
    background: transparent
}

.contentsList .tit {
    font-size: 15px;    
}

body .contentsList .date{
    color:var(--color-black);
    font-size: 13px;
}

.contentsList li.noData {
    padding: 30px 10px;
}
.contentsList li.noData:after {
    content: none;
}
.contentsList li.nolink:after {
    content: none;
}


.arrow li::after, .contentsList li::after, .childList li::after, .supportList li::after, .appList li::after, .txtBnr li::after, #headerNav li::after {
content: '';
}

.eventDate{
/*display:none;*/
}

#headerNav li{
	border:none;
}


/* animation top
----------------------------------- */
#top .anim.fadeY {
    opacity: 0;
    transform: translateY(20px);
    transition: all .5s ease-out;
}
#top .anim.fadeY.on {
    opacity: 1;
    transform: translateY(0px);
}

#top #contents section.anim:after,
#top #contents section.anim h2,
#top #contents section.anim .inBox {
    opacity: 0;
    transition: all .5s ease-out;
}
#top #contents section#infoTop.anim:after,
#top #contents section#infoTop.anim h2,
#top #contents section#infoTop.anim .inBox {
    transform: translateX(20px);
}
#top #contents section#movieTop.anim:after,
#top #contents section#movieTop.anim h2, 
#top #contents section#movieTop.anim .inBox {
    transform: translateX(-20px);
}
#top #contents section#infoTop.anim.on:after,
#top #contents section#movieTop.anim.on:after {
    opacity: 0.9;
    transform: translateX(0);
}
#top #contents section#infoTop.anim.on h2,
#top #contents section#infoTop.anim.on .inBox,
#top #contents section#movieTop.anim.on h2,
#top #contents section#movieTop.anim.on .inBox {
    opacity: 1;
    transform: translateX(0);
}
#top #contents section#infoTop.anim.on:after,
#top #contents section#infoTop.anim.on .inBox,
#top #contents section#movieTop.anim.on:after,
#top #contents section#movieTop.anim.on .inBox {
    transition-delay: 0.3s;
}


/* base
----------------------------------- */
html,body {
	 height: 100%; 
	 background: var(--color-yellow);
}
body {
	position: relative;
	z-index: 1;
	color: var(--color-white);
	font-size: 14px;
	font-family: var(--font-common);
	line-height: 1.5em;
	text-align: justify;
	text-justify: inter-ideograph;
	word-break: break-all;
	font-family: sans-serif;
}
#wrap {
	min-height: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background: var(--color-yellow);
	-moz-background-size: contain;
	-webkit-background-size: contain;
	background-size: contain;
	padding: 105px 0 0;
	position: relative;
}
#wrap ~ iframe,
#wrap ~ img { height: 1px !important; line-height: 0; display: none; }
#container { margin: auto; }

/*==================================
	スライダー
====================================*/
.bnrList {
    padding: 0 4% 20px 4%;
}
.fixBnr{
    padding: 0 4% 0 4%;
}
.slick-slider{
    padding: 0 0 20px;
    margin: 0 0 20px;
}
.bnrList li {
    margin-bottom: 0;
}

/* anchor
----------------------------------- */
a {
	color: #167544;
	text-decoration: underline;
}

@-webkit-keyframes blink {
    from { opacity: 1.0; }
    to { opacity: 0.0; }
}
img { max-width: 100%; }

/* btn
----------------------------------- */
.btn { text-align: center; }
.btn a,
.btn input {
	display: inline-block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	padding: 0 20px;
	margin: 0 auto 10px;
	font-family: 'Raleway', sans-serif;
	font-weight: bold;
	letter-spacing: 0.1em;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-radius: 0;
}

.btn .btnBack {
	display: block;
	font-size: 13px;
	border-radius: 0;
    border: none;
    font-size: 13px;
    text-align: left;
    margin: 20px 0 0;
    color: var(--color-white);
    padding: 0;
}
.btn .btnBack i {
    padding-right: 5px;
}

.btn .main,
.btn input[type="submit"].main {
	width:100%;
	background: var(--color-black);
	color: var(--color-white);
	font-size: 13px;
	padding: 15px 0;
	position: relative;
	border-radius: 0;

}

.btn .sub {
    border: 1px solid var(--color-black);
    display: block;
    color: var(--color-black);
    text-decoration: none;
    padding: 10px 0;
    text-shadow: none;
    background: transparent;
    font-size: 13px;
    width: 150px;
    border-radius: 100vmax;
}

.btn .sub, .btn input[type="submit"].sub {
background: transparent;
color: var(--color-black);
text-shadow: none;
}

.detail{
padding:0;
}

/* header
----------------------------------- */
#header {
	width: 100%;
	height: 65px;
	position: fixed;
	z-index: 100;
	top: 0;
}
body #header {
	background: transparent;
}
#header h1 {
	width: 100%;
	position: absolute;
	z-index: 100;
}
#header h1 a {
    display: inline-block;
    text-align: center;
    line-height: 0;
    padding: 20px 0 0 15px;
}
#header h1 img { height: 40px; width: auto;}


/* nav
----------------------------------- */
#navBtn {
    width: 45px;
    height: 45px;
    z-index: 10000;
    position: absolute;
    right: 15px;
    top: 15px;
    background: var(--color-orange);
    border-radius: 100vmax;
}
#navBtn span{
    display: block;
    position: absolute;
    left: 10px;
    width: 25px;
    height: 2px;
    background: var(--color-white);
}
#navBtn .top{ top:14px; }
#navBtn .middle{ top: 21.5px; }
#navBtn .bottom{ top:31px; }

#navBtn.menuOpen {
    background: var(--color-yellow);
}
#navBtn.menuOpen span {
    background: var(--color-orange);
}

#headerNav {
    display: none;
    position: fixed;
    height: 100vh;
    top: 0;
    padding: 0;
    background: var(--color-blue);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    z-index: 98;
    border-radius: 0;
}
#headerNav .navInr {
	background: none;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	overflow-y: auto;
	height: 100%;
	-webkit-overflow-scrolling: touch;
}
#headerNav .nav {
    background: var(--color-orange);
    text-align: left;
    overflow: hidden;
    padding: 85px 5% 30px;
}

#headerNav #navSNS {
    padding: 0 5% 40px;
    background: var(--color-orange);
    display: flex;
    justify-content: center;
    gap: 20px;
}
#headerNav #navSNS li {}
#headerNav #navSNS li a {
    color: var(--color-white);
    font-size: 18px;
    padding: 0;
    height: auto;
}
#headerNav #navSNS li a i {}
#headerNav #navSNS li a span {
    font-size: 15px;
    padding: 0 0 0 2px;
}

#headerNav .mNav {
    padding: 40px 5% 120px;
    background: var(--color-blue);
}
#headerNav .mNav .nav{
    background:var(--color-blue);
    overflow: hidden;
    padding: 0;
}

#headerNav .mNav .memberTit{
    display: flex;
    margin: 0 auto 30px;
    justify-content: center;
}
#headerNav .mNav .memberTit img{
    width:55%;
}

#headerNav .nav {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
#headerNav .nav li {
    width:calc(100% / 2 - 5px / 2);
}
#headerNav .nav li a {
    display: block;
    padding: 15px;
    border-left: 5px solid;
    color: var(--color-blue);
    background: var(--color-white);
    height: auto;
    font-family: var(--font-title);
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
}
#headerNav .mNav .nav li a {
    color: var(--color-orange);
}

/*
#headerNav li a:after{
    position:absolute;
    right:4%;
    font-family: 'FontAwesome';
    content:'\f105';
    margin-left:5px;
    font-size:14px;
    color:#AAAAAA;
}

#headerNav .mNav a{
text-align:left;
color:#000;
}

#headerNav .mNav a:after{
position:absolute;
right:4%;
    font-family: 'FontAwesome';
    content:'\f105';
    margin-left:5px;
font-size:14px;
color:var(--color-black);
}
*/

/*
#headerNav .nav {
	position:absolute;
	top:50%;
	left:50%;
	width:100%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	text-align: center;
}
#headerNav .nav a {
	display: block;
	color: #54c7ed;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	padding: 10px 0 30px;
	position: relative;
}
#headerNav .nav a::after {
	content:'';
	display: block;
	width: 30px;
	height: 1px;
	background: #54c7ed;
	position: absolute;
	bottom: 10px;
	left: 50%;
	margin: 0 0 0 -15px;
}
#headerNav .nav .twitter a { font-size: 36px; }
#headerNav .nav li:last-child a::after { content: none; }
*/


/* pagetop
----------------------------------- */
#pageTop { display: none; }


/* 曼荼羅
----------------------------------- */
#bgLogo {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background: var(--color-yellow) url(/static/monkichi/official-sp/top/202601/bg_mandara_xG6UQje2.jpg) no-repeat center center;
	background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	z-index:0;
}
.bgLogo p {
	width: 90%;
    position: absolute;
	top:50%;
	left:50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.bgLogo p img {width: 100%;}
.bgLogo p.back {
	display: none;
}
.bgLogo p.back img {
	width: 100%;
}
.bgLogo p.nowloading {display: none;}
.bgLogo .imgOutside li {
    position: absolute;
    z-index: -1;
}

.bgLogo .rotate {
	height: 100%;
	position: absolute;
	background: url(/static/monkichi/official-sp/top/202601/ph_mandara_out_xG6UQje2.svg) no-repeat center center;
	-moz-background-size: contain;
	-webkit-background-size: contain;
	background-size: contain
}
.bgLogo .leftTop {
	width: 130%; left: -50%; top: -40%;
}
.bgLogo .leftBtm {
	width: 160%; left: -70%; bottom: -50%;
}
.bgLogo .rightTop {
	width: 90%; right: -30%; top: -30%;
}
.bgLogo .rightBtm {
	width: 110%; right: -60%; bottom: -20%;
}

/* patternA */
.bgLogo.patternA .leftTop {
	-moz-animation: rotateR 20s linear infinite;
	-webkit-animation: rotateR 20s linear infinite;
	animation: rotateR 20s linear infinite;
}
.bgLogo.patternA .leftBtm {
	-moz-animation: rotateL 30s linear infinite;
	-webkit-animation: rotateL 30s linear infinite;
	animation: rotateL 30s linear infinite;
}
.bgLogo.patternA .rightTop {
	-moz-animation: rotateL 30s linear infinite;
	-webkit-animation: rotateL 30s linear infinite;
	animation: rotateL 30s linear infinite;
}
.bgLogo.patternA .rightBtm {
	-moz-animation: rotateR 40s linear infinite;
	-webkit-animation: rotateR 40s linear infinite;
	animation: rotateR 40s linear infinite;
}

.bgLogo.patternA p:nth-of-type(1) img,
.bgLogo.patternA p:nth-of-type(3) img,
.bgLogo.patternA p:nth-of-type(5) img {
	-moz-animation: rotateR 40s linear infinite;
	-webkit-animation: rotateR 40s linear infinite;
	animation: rotateR 40s linear infinite;	
}
.bgLogo.patternA p:nth-of-type(2) img,
.bgLogo.patternA p:nth-of-type(4) img {
	-moz-animation: rotateL 50s linear infinite;
	-webkit-animation: rotateL 50s linear infinite;
	animation: rotateL 50s linear infinite;	
}

/* patternB */
.bgLogo.patternB .leftBtm {
	-moz-animation: rotateL 30s linear infinite;
	-webkit-animation: rotateL 30s linear infinite;
	animation: rotateL 30s linear infinite;
}
.bgLogo.patternB .rightTop {
	-moz-animation: rotateR 30s linear infinite;
	-webkit-animation: rotateR 30s linear infinite;
	animation: rotateR 30s linear infinite;
}

.bgLogo.patternB p:nth-of-type(2) img,
.bgLogo.patternB p:nth-of-type(3) img,
.bgLogo.patternB p:nth-of-type(4) img {
	-moz-animation: rotateR 40s linear infinite;
	-webkit-animation: rotateR 40s linear infinite;
	animation: rotateR 40s linear infinite;	
}
.bgLogo.patternB p:nth-of-type(1) img,
.bgLogo.patternB p:nth-of-type(5) img {
	-moz-animation: rotateL 50s linear infinite;
	-webkit-animation: rotateL 50s linear infinite;
	animation: rotateL 50s linear infinite;	
}

/* patternC */
.bgLogo.patternC .leftTop {
	-moz-animation: rotateL 20s linear infinite;
	-webkit-animation: rotateL 20s linear infinite;
	animation: rotateL 20s linear infinite;
}
.bgLogo.patternC .rightBtm {
	-moz-animation: rotateR 40s linear infinite;
	-webkit-animation: rotateR 40s linear infinite;
	animation: rotateR 40s linear infinite;
}

.bgLogo.patternC p:nth-of-type(1) img,
.bgLogo.patternC p:nth-of-type(2) img,
.bgLogo.patternC p:nth-of-type(4) img {
	-moz-animation: rotateR 40s linear infinite;
	-webkit-animation: rotateR 40s linear infinite;
	animation: rotateR 40s linear infinite;	
}
.bgLogo.patternC p:nth-of-type(3) img,
.bgLogo.patternC p:nth-of-type(5) img {
	-moz-animation: rotateL 50s linear infinite;
	-webkit-animation: rotateL 50s linear infinite;
	animation: rotateL 50s linear infinite;	
}


@keyframes rotateL {
	0% {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(-360deg);
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}
}
@keyframes rotateR {
	0% {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotateL {
	0% {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(-360deg);
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}
}
@keyframes rotateR {
	0% {
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* TOP
=================================== */

/* loading */
#top #loading {
	width: 100%;
	height: 100%;
	background: var(--color-yellow);
	position: fixed;
	left: 0;
	top: 0;
	z-index:9999;
}
#top #loading::after {
	content: '';
	display: block;
	width: 100px;
	height: 100px;
	background: url(/static/monkichi/official-pc/cmn/ph_loading.png);
	-moz-background-sizeg: contain;
	-webkit-background-size: contain;
	background-size: contain;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -50px 0 0 -50px;
	-moz-animation: spin 5s linear infinite;
	-webkit-animation: spin 5s linear infinite;
	animation: spin 5s linear infinite;
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

/* wrap */
#top #wrap {}

#top .fv {
	position: relative;
    width: 100%;
    height: calc(100svh - 65px);
	margin-bottom: 50px;
}

#top .fv .loginNav{
    position: absolute;
	width: 92%;
    left: 50%;
    bottom: 30px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}
#top .fv .loginNav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
	gap: 10px;
}
#top .fv .loginNav ul li {
    width: 50%;
}
#top .fv .loginNav ul li a {
	display:block;
	width:100%;
	color:var(--color-white);
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	background: var(--color-orange);
	border-radius: 100vmax;
	padding: 10px;
}
#top .fv .loginNav li:last-child a {}

#top #contents {
    background: transparent;
    padding: 0!important;
    width: 100%;
    margin: 0 auto;
}

/* #top #header h1 img { height: 60px; margin: 0 0 0 -5%; } */


/* slider */
.bnrCap {
	display: none;
}
.slick-dots {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
}
.slick-dots li {
	position: relative;
    display: inline-block;
    margin: 0 15px 0 0 !important;
}
.slick-dots li:last-child {
	margin: 0 !important;
}
.slick-dots li button {
    display: block;
    width: 5px;
    height: 5px;
    font-size: 0;
    line-height: 0;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--color-white);
    opacity: 0.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100vmax;
}
.slick-dots li.slick-active button:before {
    opacity: 1;
}

#top .topContents {
	overflow: hidden;
}

#top .topBnrArea {
	position: relative;
	margin-bottom: 80px;
}
#top .topBnrArea .bnrSlider {
    padding: 0;
}
#top .topBnrArea .bnrSlider li.slick-slide {
	padding: 0 10px;
}
#top .topBnrArea .bnrSlider .slick-track {
	padding-bottom: 5px;
}
#top .topBnrArea .bnrSlider.one .slick-track {
    transform: translate3d(0, 0, 0) !important;
}
#top .topBnrArea .bnrSlider li.slick-slide a img {
	box-shadow: 5px 5px var(--color-blue);
}
#top .topBnrArea .bnrSlider li.slick-slide.slick-center a img {
	box-shadow: 5px 5px var(--color-orange);
}
#top .topBnrArea .bnrSlider {
	margin-bottom: 20px;
}
#top .topBnrArea .bnrSlider .slick-dots {
	bottom: -20px;
} 


/* section */
#top #contents section {
    position: relative;
    margin: 0 auto 80px;
    width: 85%;
    max-width: 1200px;
}
#top #contents section#infoTop {
	padding: 0 0 20px 20px;
}
#top #contents section#movieTop {
	padding: 0 20px 20px 0;
}
#top #contents section:after {
    content: '';
    position: absolute;
    z-index: -1;
    display: block;
    width: 100vw;
    height: calc(100% - 20px);
    bottom: 0;
    opacity: 0.9;
	pointer-events: none;
}
#top #contents section#infoTop:after {
	left: 0;
	background-color: var(--color-orange);
}
#top #contents section#movieTop:after {
	right: 0;
	background: var(--color-blue);
}

#top #contents section h2{
    position: relative;
	z-index: 3;
    font-family: var(--font-title);
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-size: 44px;
    line-height: 1;
    margin-bottom: 20px;
    letter-spacing: 0;
}
#top #contents section#infoTop h2 {
	left: -35px;
    width: 100vw;
}
#top #contents section#movieTop h2 {
    text-align: right;
    right: -35px;
}
#top #contents section h2:after {
	position: absolute;
	z-index: -1;
	display: block;
}
#top #contents section#infoTop h2:after {
    color: var(--color-blue);
    top: 3px;
    left: 3px;
}
#top #contents section#movieTop h2:after {
	color: var(--color-orange);
	top: 3px;
	right: -3px;
}
#top #contents section#infoTop h2:after {content: "INFORMATION";}
#top #contents section#movieTop h2:after {content: "MOVIE";}

#top #contents section .inBox {
    position: relative;
	z-index: 3;
}

/* topInfoList */
#top #contents .topInfoList {
    display: flex;
    flex-direction: column;
    gap: 5px;
	margin-bottom: 20px;
}
#top #contents .topInfoList li {}
#top #contents .topInfoList li a {
	position: relative;
    display: block;
    background: var(--color-white);
    color: var(--color-black);
    text-decoration: none;
    padding: 15px 25px 15px 15px;
    font-weight: bold;
    transition: all .5s ease-out;
    border-left: 5px solid var(--color-blue);
}
#top #contents .topInfoList li a .date {
    line-height: 1;
    margin: 0 0 5px;
}
#top #contents .topInfoList li a .new {
	color: var(--color-orange);
}
#top #contents .topInfoList li a .title {
	font-size: 15px;
}
#top #contents .topInfoList li a .arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 14px;
    background: var(--color-blue);
}

#top #contents .topInfoList.topDay {}
#top #contents .topInfoList.topDay li {}
#top #contents .topInfoList.topDay li a {
    display: flex;
    gap: 5px;
    align-items: flex-start;
}
#top #contents .topInfoList.topDay li a .dateBox {
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1;
    width: 100px;
}
#top #contents .topInfoList.topDay li a .dateBox span, 
#top #contents .topInfoList.topDay li a .dateBox p {
    font-family: var(--font-common);
}
#top #contents .topInfoList.topDay li a .dateBox .new {
    position: absolute;
    top: -9px;
    left: -1px;
    font-size: 10px;
    -webkit-animation-name: blink;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 0s;
}
#top #contents .topInfoList.topDay li a .dateBox .month {
    font-size: 20px;
    line-height: 1;
}
#top #contents .topInfoList.topDay li a .dateBox .month .category {
    display: block;
    font-size: 8px;
    color: var(--color-blue);
}
#top #contents #infoBlock2 .topInfoList.topDay li a .dateBox .month .category {
    font-size: 10px;
}
#top #contents .topInfoList.topDay li a .dateBox .day {
    font-size: 36px;
    padding: 0 0 0 3px;
    position: relative;
}
#top #contents .topInfoList.topDay li a .dateBox .week {
    writing-mode: vertical-rl;
    font-size: 12px;
    padding: 0 0 0 3px;
}
#top #contents .topInfoList.topDay li a .title {
	width: calc(100% - 90px);
}

#top #contents .viewMore {}
#top #contents .viewMore a {
    display: block;
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-title);
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.05em;
    line-height: 1;
}
#top #contents .viewMore a i {
	margin-left: 5px;
}

#top #contents .fa-arrow-up {
    transform: rotate(45deg);
}

/* informationArea */
#top .tabBox {
    border: none;
    border-radius: 0;
    margin: 0 0 20px;
    display: flex;
    gap: 5px;
}
#top .tabBox li {
	width: calc(100% / 3);
}
#top .tabBox li a {
    font-family: var(--font-title);
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.05em;
    line-height: 1;
    padding: 6px 4px;
    border: 1px solid;
    border-radius: 5px 5px 0 0;
	font-size: 15px;
}
#top .tabBox li a.active {
	background-color: var(--color-white);
	color: var(--color-blue);
	border-color: var(--color-white);
}
#top .informationArea .section {display: none;}
#top .informationArea #infoBlock1 {display: block;}

#top .informationArea a {
	color: #fff;
	text-decoration: none;
}


/* youtube */
#movieTop .yt_slider {
    margin-left: -100%;
    width: 200%;
}
#movieTop .yt_slider li.slick-slide {
    padding-left: 20px;
}
#movieTop .yt_slider li.slick-slide a {
    position: relative;
    display: block;
}
#movieTop .yt_slider li.slick-slide a:after {
    content: '\f144';
    font-family: 'FontAwesome';
    color: var(--color-yellow);
    text-shadow: 0px 0 15px rgba(0,0,0,0.5);
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
}

#movieTop .yt_slider {
    margin-bottom: 20px;
    padding: 0;
}
#movieTop .yt_slider .slick-dots {
	bottom: -20px;
    width: calc(100% / 2 - 20px);
    right: 0;
} 
#movieTop .yt_slider .slick-dots li button:before {
    background: var(--color-yellow);
}


/* infoTicker
#top #infoTicker {
	width: 100%;
	position: fixed;
	top: 30px;
	left: 0;
	background: #252525;
	z-index: 90;
}
#top #infoTicker .tickerFirst {
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.05em;
    color: var(--color-black);
    padding: 0 10px;
    font-size: 10px;
    background: #54c7ed;
    display: inline-block;
    position: absolute;
    height: 30px;
    line-height: 30px;
    top: 0;
    left: 0;
    z-index: 1;
}
#top #infoTicker .tickerFirst span{
	display: inline-block;
    top: 1px;
    position: relative;
}
#top #infoTicker .tickerList li * {height: 30px; line-height: 30px;}
#top #infoTicker .tickerList li > span {
    display: inline-block;
    top: -1px;
    position: relative;
}
#top #infoTicker .tickerList li a{
	display: inline-block;
	color: #fff;
	font-weight: normal;
	font-size: 12px;
	position: relative;
	padding: 0 0 0 70px;
}
#top #infoTicker .tickerList li a:after {
    content: '';
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    display: inline-block;
    top: -1px;
    position: relative;
    margin: 0 0 0 5px;
    opacity: 0.5;
    display: none;
}
#top #infoTicker .tickerList .cat {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.05em;
    margin: 0 12px 0 0;
    color: #aaa;
}
 */

/* pulgin
.ticker-container {
	height: 30px;
	position: relative;
	overflow: hidden;
}
.ticker-container ul div {
	overflow: hidden;
	position: absolute;
	z-index: 0;
	display: inline;
	min-width: 100%;
	left: 0;
	transition: 0.5s ease;
}
.ticker-container ul div.ticker-active {top: 0;}
.ticker-container ul div.not-active {top: 30px;}
.ticker-container ul div.remove {top: -30px;}
 */

/* membersNav */
#top .membersNav {
    position: relative;
    padding: 40px 5%;
    background: var(--color-orange);
    margin: 0 0 80px;
}

#top .membersNav .memberTit {
    width: 75%;
    max-width: 450px;
    margin: 0 auto 40px;
}

#top .membersNav .membersBox {
    margin: 0 auto 40px;
}
#top .membersNav .membersBox:nth-child(odd) {}
#top .membersNav .membersBox:nth-child(odd) {}
#top .membersNav .membersBox:last-of-type {
	margin-bottom: 0;
}

#top .membersNav .membersBox .block {}

#top .membersNav .membersBox .block h2 {
    font-family: var(--font-title);
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    margin-bottom: 20px;
}
#top .membersNav .membersBox:nth-child(odd) .block h2 {}
#top .membersNav .membersBox:nth-child(odd) .block h2 {
	text-align: right;
}

#top .membersNav .membersBox .contentsList {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 20px;
}
#top .membersNav .membersBox .contentsList li {}
#top .membersNav .membersBox .contentsList li a {
	position: relative;
    display: block;
    background: var(--color-white);
    padding: 15px 25px 15px 15px;
}
#top .membersNav .membersBox .contentsList li a .date {
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 5px;
    line-height: 1;
}
#top .membersNav .membersBox .contentsList li a .tit {
    font-size: 14px;
    margin: 0;
}
#top .membersNav .membersBox .contentsList li a .question {
    padding: 5px 0 0;
    font-size: 12px;
}
#top .membersNav .membersBox .contentsList li a .arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 14px;
    background: var(--color-blue);
}

#top .membersNav .membersBox .contentsList.thumbList {}
#top .membersNav .membersBox .contentsList.thumbList li {
    width: 100%;
}
#top .membersNav .membersBox .contentsList.thumbList li a {
    display: flex;
}
#top .membersNav .membersBox .contentsList.thumbList li a .thumb {
    width: 60px;
    height: 60px;
    margin: 0 10px 0 0;
    float: initial;
}
#top .membersNav .membersBox .contentsList.thumbList li a .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}
#top .membersNav .membersBox .contentsList.thumbList li a .detailBox {
	width: calc(100% - 70px);
}
#top .membersNav .membersBox .contentsList.thumbList li a .detailBox .date {}
#top .membersNav .membersBox .contentsList.thumbList li a .detailBox .date .category {
    color: var(--color-blue);
    padding-right: 5px;;
}
#top .membersNav .membersBox .contentsList.thumbList li a .detailBox .tit {}

#top .membersNav .membersBox .thumbList {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 20px;
}
#top .membersNav .membersBox .thumbList li {
    width: 50%;
}
#top .membersNav .membersBox .thumbList li a {
    position: relative;
    display: block;
    background: var(--color-white);
}
#top .membersNav .membersBox #aopblog_top .thumbList li a {
    padding: 10px 10px 25px 10px;
}
#top .membersNav .membersBox .thumbList li a .thumb {}
#top .membersNav .membersBox .thumbList li a .list__txt {
    color: var(--color-black);
    padding: 10px 0 0;
}
#top .membersNav .membersBox .thumbList li a .list__txt .date {
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 5px;
    line-height: 1;
}
#top .membersNav .membersBox .thumbList li a .list__txt .tit {
    font-size: 14px;
    margin: 0;
}
#top .membersNav .membersBox .thumbList li a .arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 14px;
    background: var(--color-blue);
}
#top .membersNav .membersBox .thumbList li a .arrow i {}

#top .membersNav .membersBox:nth-child(odd) .viewMore {
	text-align: right;
}


/* top bnrListWrap */
#top .bnrListWrap {
    width: 90%;
    margin: 0 auto 80px;
}
#top .bnrListWrap .bnrList {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#top .bnrListWrap .bnrList li {}
#top .bnrListWrap .bnrList li a {
    display: block;
}
#top .bnrListWrap .bnrList.sub {
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
}
#top .bnrListWrap .bnrList.sub li {
    width: calc(100% / 2 - 5px / 2);
}
#top .bnrListWrap .bnrList.sub li a {}


/* bnr
.bnrList { padding:0 4% 20px 4%; }
.bnrList li a {
	display: block;
	margin: 0 0 10px;
	line-height: 0;
}
.bnrList li:last-child a {margin: 0;}
.bnrList li a img { width: 100%; }
.bnrList .bnrCap {
    background: #252525;
    color: #fff;
    font-weight: normal;
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 5px;
}


.more a {
	display: block;
	text-decoration: none;
	font-size: 14px;
	text-align: center;
	border: 1px solid #aaa;
	padding: 10px;
	margin: 10px 0 0;
	color:var(--color-black);
}
 */

#top .youtube{
background:#FFF;
padding:10px;
margin-bottom:40px;
}
#top .youtube iframe{
width:100%;
height:65%;
}
#top .blockVideo {
    background:#FFF;
    margin-bottom:40px;
    padding: 10px;
}
#top .blockVideo iframe{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
}
#top .video{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
#top .blockVideo .thumb{
    position: absolute;
   width: 100%;
    top: 0;
    left: 0;
}
#top .blockVideo .thumb::after{
    content:'\f144';
    font-family: 'FontAwesome';
    color: #54c7ed;
    text-shadow: 0px 0 15px rgba(0,0,0,0.5);
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
}
#top .blockVideo img{
width:100%;
}

/*
.membersNav{background:#54c7ed;}
#top .membersNav .contentsList .date{color: var(--color-black);}
.topNav{margin-bottom:40px;}
.topNav li { background: #fff; }
.membersNav .topNav li{background:#54c7ed;}
.membersNav .topNav li:first-child a span{border-top:solid 1px #000;}
.topNav li a{
	display: block;
	text-decoration: none;
	color: var(--color-black);
	font-family: 'Raleway', sans-serif;
	font-weight: bold;
	letter-spacing: 0.1em;
	font-size: 13px;
	background: url(/static/monkichi/official-sp/cmn/ico_arrow_right_main.png) no-repeat 96% center;
	background-size: 7px auto;
	-webkit-background-size: 7px auto;
}
.membersNav .topNav li a{
	background: url(/static/monkichi/official-sp/cmn/ico_arrow_right_members.png) no-repeat 96% center;
	background-size: 10px auto;
	-webkit-background-size: 10px auto;
}
.topNav li a span {
	border-bottom: 1px solid #AAA;
	display: block;
	margin: 0 0 0 4%;
	padding: 15px 15px 15px 0;
}
.membersNav .topNav li a span{
	font-size:16px;
	border-bottom: 1px solid var(--color-black);
}

.memberTit{
	padding: 40px 0 50px;
	text-align:center;
}

.memberTit img{width: 60%;}
#top .membersNav h2.pageTit {
	margin: 0 0 20px 4%;
}
#top .membersNav h2.pageTit.addBorder:after {
    background: #000;
}
.membersNav .block li{
	margin: 0 0 0 4%;
	padding: 0;
	border-top: 1px solid #000;
	background: url(/static/monkichi/official-sp/cmn/ico_arrow_right_members.png) no-repeat 96% center;
	background-size: 10px auto;
	-webkit-background-size: 10px auto;
}
.membersNav .block li  a {padding: 20px 10% 20px 0;}

.membersNav .more {margin: 0 4% 50px;}
.membersNav .more a {
	border-color: #252525;
	color: var(--color-black);
	margin-top: 0;
}
.membersNav #topQa .nickname {
    margin: 7px 0 0;
    line-height: 1.6em;
    font-size: 11px;
}
.membersNav .block .tit{font-size: 13px;}
.membersNav #topQa .tit {margin: 0 0 5px;}
.membersNav .block .tit,
.membersNav #topQa .question {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	text-align: left;
	margin: 0;
	font-weight: normal;
	font-size: 12px;
	line-height: 1.4;
}.membersNav #topBlog .tit {-webkit-line-clamp: 3;}
.membersNav #topQa .question:before{
	content: 'Q.';
	margin: 0 3px 0 0;
	font-weight: 400;
	color: #F44125;
}
*/	
/*.membersNav .thumbList li{
    float: left;
    width: 31%;
    margin-right: 3.5%;*
}*/
/*
.membersNav .thumbList li{
    border-top: 1px solid #000;
}
.membersNav .thumbList .thumb {
    width: 60px;
    background: #fff;
    margin: 0 10px 0 0;
}
.membersNav .thumbList .cat {
    background: none;
    color: #000;
    font-weight: normal;
    padding: 0;
    margin: 0 0 8px;
    line-height: 1em;
}
.membersNav .thumbList .thumb img {
	width: 100%;
	height: 100%;
	background: no-repeat center;
	background-size: contain;
}
#top .membersNav .block .more {display: none;}
.topNav li:last-child a span {
	border: none;
}
.topNav li.twitter a{
	background: none;
	position: relative;
}
.topNav li.twitter a span {font-size: 13px;color:}
.topNav li.twitter a:after {
	    content: "\f08e";
    font-family: 'FontAwesome';
    font-size: 16px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 3%;
	color: #AAA;
	font-weight: normal;
}


.membersNav #aopblog_top.block ul {
    margin: 20px 4%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.membersNav #aopblog_top.block li {
    width: 48%;
    margin: 0;
    background: none;
    border: none;
}

.membersNav #aopblog_top.block li a {
    padding: 0;
    color: var(--color-black);
}

.membersNav #aopblog_top.block .thumbList .thumb {
    width: 100%;
    margin-bottom: 7px;
}
.membersNav #aopblog_top.block .thumbList .thumb img {
    background-size: cover;
}

.membersNav #aopblog_top.block li a .date {
    font-family: Helvetica Neue,Helvetica,Arial,san-serif;
    margin-bottom: 0;
}

.membersNav #aopblog_top.block li a .tit {
    font-weight: bold;
}
*/



/* 下層共通
----------------------------------- */
#contents.detail .date {
    line-height: 1;
}
#contents.detail .tit {
    padding: 0 0 15px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--color-white-opc50);
}
#contents.detail .detailTxt {}


/* info detail
----------------------------------- */
#contents.infoContents .infoList {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#contents.infoContents .infoList li {}
#contents.infoContents .infoList li a {
	position: relative;
    display: block;
    background: var(--color-white);
    color: var(--color-black);
    text-decoration: none;
    padding: 15px 25px 15px 15px;
    font-weight: bold;
    border-left: 5px solid var(--color-blue);
}
#contents.infoContents .infoList li a .date {
    line-height: 1;
}
#contents.infoContents .infoList li a .date .new {
    color: var(--color-orange);
}
#contents.infoContents .infoList li a .title {
	font-size: 15px;
}
#contents.infoContents .infoList li a .arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 14px;
    background: var(--color-blue);
}
#contents.infoContents .infoList li a .arrow i {
    transform: rotate(45deg);
}

#contents.infoContents .infoList.dayList {}
#contents.infoContents .infoList.dayList li {}
#contents.infoContents .infoList.dayList li a {
    display: flex;
    gap: 5px;
    align-items: flex-start;
}
#contents.infoContents .infoList.dayList li a .dateBox {
    font-family: var(--font-common);
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1;
    width: 100px;
}
#contents.infoContents .infoList.dayList li a .dateBox span, 
#contents.infoContents .infoList.dayList li a .dateBox p {
    font-family: var(--font-common);
}
#contents.infoContents .infoList.dayList li a .dateBox .new {
    position: absolute;
    top: -9px;
    left: 3px;
    font-size: 10px;
    -webkit-animation-name: blink;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
    -webkit-animation-delay: 0s;
    color: var(--color-orange);
}
#contents.infoContents .infoList.dayList li a .dateBox .month {
    font-size: 20px;
    line-height: 1;
}
#contents.infoContents .infoList.dayList li a .dateBox .month .category {
    display: block;
    font-size: 8px;
    color: var(--color-blue);
}
#contents.infoContents .infoList.dayList li a .dateBox.live .month .category {
    font-size: 10px;
}
#contents.infoContents .infoList.dayList li a .dateBox .day {
    font-size: 36px;
    padding: 0 0 0 3px;
    position: relative;
}
#contents.infoContents .infoList.dayList li a .dateBox .week {
    writing-mode: vertical-rl;
    font-size: 12px;
    padding: 0 0 0 3px;
}
#contents.infoContents .infoList.dayList li a .title {
	width: calc(100% - 90px);
}


/* ソーシャル連携ボタン
---------------------------------------*/
.social {
    text-align: center;
    padding: 20px 0;
}
.socialList {
    width: 260px;
    margin: 0 auto;
}
.socialList li{
    float:left;
    margin: 0 10px 0 0;
}
.socialList li:last-child {
    margin-right: none;
}
.socialList .twitter  { width: 90px; }
.socialList .facebook { width: 100px; }
.socialList .line { width: 36px; }
.socialList .hatebu { widt: 80px; clear: left; padding-left: 30px; }
.socialList .google { width: 50px; }


#contents {
    position: relative;
    z-index: 2;
    background: var(--color-orange);
    color: var(--color-white);
    padding: 30px 20px 20px!important;
    width: 90%;
    margin: 0 auto 160px;
}

#contents #insideBnr {
	margin: 20px 0 0 ;
}

body:not(#top) h2.pageTit {
    font-family: var(--font-title);
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    position: relative;
    font-size: 36px;
    margin: 0 0 30px;
    text-shadow: 3px 3px var(--color-blue);
    text-align: center;
}
body:not(#top) h2.pageTit.ja,
body#feature h2.pageTit,
body#faq  h2.pageTit {
    line-height: 1.5;
    font-size: 32px;
}
#faq

/*
h2.pageTit.addBorder {
    margin: 0 0 40px;
}
h2.pageTit.addBorder:after {
    content: '';
    width: 65px;
    height: 2px;
    background: var(--color-black);
    position: absolute;
    bottom: -20px;
    left: 0;
}

#top #aopblog_top .pageTit {
    border-bottom: 1px solid;
    padding-bottom: 20px;
}
*/

h2 .subTit {
	display: block;
    font-size: 13px;
    font-weight:bold;
	margin: 5px 0 0;
}

.formList{
margin-bottom:20px;
}

/* info
----------------------------------- */
.detail .social{
border:none;
}
.date { font-size: 12px; margin: 0 0 3px; }
.date .year { font-size: 11px; margin: 0 5px; }
.date .new,
#top .informationArea .date .new {
	color: #F12C00;
	-webkit-animation-name: blink;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: alternate;
	-webkit-animation-delay: 0s;
}
#top .informationArea .date.eventDate,
#information .date.eventDate{ margin: 4px 0 0 ; font-weight: bold;}
#information .detail .date.eventDate {
	font-size: 13px;
	font-weight: bold;
	margin: 0 0 5px;
}

#information .date.eventDate{
font-weight:normal;
}

#information .date{
font-size: 12px;
margin: 0 0 5px;
}

.tit { font-size: 14px; font-weight: bold; }

.contentsList  a {
	display: block;
	color: var(--color-black);
	text-decoration: none;
	padding: 10px 0;
}

#information .detail .tit { 
    font-size: 15px;
    margin: 0 0 15px;
    font-weight: bold;
    line-height: 1.5em;
    padding: 0;
    border: none;
}
#information .detail .txt { 
    margin: 0 0 20px;
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 15px;
    box-shadow: 3px 3px var(--color-blue);
}
#information .detail .txt a {
    color: var(--color-orange);
}
#information .detail .detailTxt img{margin: 10px 0;}
.twitterBtn{
	display: inline-block;
	margin-right: 15px;
	position: relative;
	top: 4px;
	margin: 0 0 30px;
}

.noInfo {
    padding: 30px 0;
    text-align: center;
}
.fb-like{
	display: inline-block;
	position: relative;
	top: -1px;
}

/* プルダウンメニュー */
.pulldownBox{
    padding:3px 0px 3px 0px;
    text-align:center;
    border-bottom:1px solid #bbbbbb;
    background-color:#dddddd;
}
.pulldownBox form {
    margin: 0;
}
.pulldownBox select{
    width: 80%;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    color:var(--color-black)333;
}

/* タブ */
.tabBox {
	border: 1px solid var(--color-black);
	border-radius: 3px;
	margin: 0 0 10px;
}
.tabBox li {
	width: 33.3%;
	float: left;
}

.tabBox li:last-child{
	width:33.4%;
}
.tabBox li a,
.tabBox li span {
	display: block;
	color: var(--color-black);
	font-size: 11px;
	text-align: center;
	text-decoration: none;
	line-height: 26px;
	border-right: 1px solid var(--color-black);
}
.tabBox li span {
	background: var(--color-black);
	color: #fff;
}
.tabBox li:last-child a,
.tabBox li:last-child span { border: none; }

.iframeWrap{
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.iframeWrap iframe,
.iframeWrap object,
.iframeWrap embed{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*pager */
#next a {
	display: none;
	font-weight: bold;
	text-align: center;
	padding: 20px 0;
	-webkit-animation-name: blink;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: alternate;
	-webkit-animation-delay: 0s;
}


/* disco
----------------------------------- */
#disco .tabBox {
    border: none;
    border-radius: 0;
    margin: 0 0 15px;
}
#disco .tabBox li {
    width: 20%;
}
#disco .tabBox li a,
#disco .tabBox li span {
    color: var(--color-white);
    border-right: none;
    font-size: 12px;
    font-weight: bold;
}
#disco .tabBox li span {
    background: transparent;
    border-bottom: 1px solid;
}

#disco .thumb {
	width: 70px;
	float: left;
	width: 70px;
	margin: 0 4% 0 0;
	position: relative;
}
#disco .imgGuard {position: relative;}
#disco .thumb .dummy,
#disco .imgGuard .dummy {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
#disco .thumb img {
	height: 70px;
}
#disco .contentsList {
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 15px;
    box-shadow: 3px 3px var(--color-blue);
}
#disco .contentsList li {
    margin-bottom: 10px;
}
#disco .contentsList li:last-child {
    margin-bottom: 0;
}
#disco .contentsItem a {
	display: block;
	padding: 0;
	text-decoration: none;
	color: var(--color-black);
}
#disco .tit {
	font-size: 14px;
	font-weight: bold;
}
#disco .date {
    font-size: 12px;
    margin: 0 0 5px;
}
#disco .date .year {
	font-size: 11px;
	margin: 0 5px;
}
#disco .detail .tit {
	padding: 0;
    color: var(--color-white);
    border: none;
}
#disco .detail .ph {
	text-align: center;
	margin: 0 0 20px;
	line-height: 0;
}
#disco .detail .ph img {
    max-width: 80%;
    margin: 0 auto;
}
#disco .detail .txt {
	margin: 0 0 30px;
    color: var(--color-black);
}
#disco .detail .jacketTit {
font-size: 11px;
line-height: 1.7em;
}
#disco .detail .discType  {
    font-size: 11px;
    margin: 0 0 12px;
    letter-spacing: 0.1em;
    line-height: 2em;
    color: var(--color-black);
    position: relative;
    font-weight: bold;
}
#disco .detail .discType:after{
	content: '';
	width: 20px;
	height: 2px;
	background: var(--color-black);
	position: absolute;
	bottom: -5px;
	left: 0;
}
#disco .detail .trackListOuter {
	margin: 0 0 20px;
}
#disco .detail .trackList li {margin: 0 0 3px;}
#disco .detail .tieup {
    font-size: 10px;
    color: var(--color-black);
    display: inline-block;
    vertical-align: 1px;
    margin-left: 5px;
}
#disco .detail .tieup span {
    margin: 0 5px;
}
#disco .detail .txtArea {
    margin: 0 0 30px;
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 15px;
    box-shadow: 3px 3px var(--color-blue);
}

#disco .detail .trackList {}
#disco .detail .trackList li {
	padding:0;
	background: transparent;
	border-left:none;
	border-right:none;
}
#disco .detail .trackList li:nth-child(odd){
	background-color:transparent;
}
#disco .detail .trackList li:first-child {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}
#disco .detail .trackList li:last-child {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-bottom: none;
	border-radius: 0;
}


/* profile
----------------------------------- */
.featureProfile .profileArea {
    background-size: auto 300px;
    padding: 330px 0 0;
}
.featureProfile .profileArea .txtBox {
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 15px;
    box-shadow: 3px 3px var(--color-blue);
}
.featureProfile .profileArea .txt {
    text-align: justify;
    text-justify: inter-ideograph;
    word-break: break-all;
    line-height: 1.7em;
    margin-bottom: 10px;
}
.featureProfile .profileArea .txt:last-of-type {
    margin-bottom: 0;
}
.featureProfile .profileArea .txt a {
    color: var(--color-orange);
}

/* gallery
----------------------------------- */

.featureGallery .dummy {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
}
.featureGallery .year {
    margin: 0 0 30px;
    text-align: center;
    font-size: 20px;
}

.featureGallery .ph {
	width: 32%;
	float: left;
	background: center center no-repeat;
	background-size: cover;
    position: relative;
    margin: 0 2% 8px 0;
}
.featureGallery .ph:nth-child(3n) { margin: 0 0 10px; }

.featureGallery .ph a {
	display: block;
	line-height: 0;
}
.featureGallery .ph img {
    width: 100%;
}


#swipebox-prev {left: 4%;}
#swipebox-next {right: 4%;}
#swipebox-slider .slide img, #swipebox-slider .slide .swipebox-video-container {max-height: 90%;}

.featureGallery .yearList li {
	height: 100px;
	background: #ccc center center no-repeat;
	background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	color: #fff;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-shadow: 0 0 1px rgba(0,0,0,0.5);
	margin: 0 0 10px;
	position: relative;
}
.featureGallery .yearList li .noLink {
	display: block;
	padding: 30px 0 0;
}
.featureGallery .yearList li .noLink  .yearTxt { font-size: 20px; }
.featureGallery .yearList li .noLink span { display: block; font-size: 13px; }
.featureGallery .yearList li a {
	display: block;
	color: #fff;
	font-size: 30px;
	line-height: 100px;
	text-decoration: none;
}
.featureGallery .yearList .year2013 { background-image: url(/static/monkichi/official-pc/gallery/2013/ph09.jpg); }

#swipebox-caption {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding: 20px 0;
}

.featureGallery #phArea .more {
    text-align: center;
    background: var(--color-black);
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.1em;
    margin: 30px 0;
    cursor: pointer;
    color: #54c7ed;
    width: 100%;
	font-weight: bold;
	font-size: 14px;
	padding: 10px 0;
	margin: 10px 0 0;
	border: 1px solid var(--color-black);
}
.featureGallery #phArea {margin: 0!important;padding: 0!important;}


/* player
----------------------------------- */
#audioArea {
	position: fixed;
	width: 100%;
	margin: 0 auto;
	bottom: 0;
	left: 0;
	z-index: 900;
}
@keyframes anime1 {
	0% { color: #fff;}
	50% {color: #f963be;}
}
@-webkit-keyframes anime1 {
	0% { color: #fff;}
	50% {color: #f963be;}
}
.audioWrap {
    z-index: 50;
	top:auto;
	bottom: 0;
	left: 0;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
	height: 46px;
	background: rgba(0, 0, 0, 0.9);
}
#jp_container_1 {
    width: 100%;
    margin: 0 auto 8px;
}
.jp-title {
	width: 70%;
    position: absolute;
	left: 90px;
	top: 15px;
	background: none;
}
.jp-title span {display: inline-block;}
.jp-title li{
    padding: 5px 6px;
    font-size: 12px;
    line-height: 10px;
    color: #fff;
    animation: anime1 1.5s ease infinite;
    -webkit-animation: anime1 1.5s ease infinite;
}

.jp-audio{
height:50px;
}

.jp-audio .jp-progress {margin: 0;}
.jp-progress div {
	top: 0;
	height: 3px;
}
.jp-seek-bar {
    position: absolute;
    bottom: -8px;
    left: 0px;
    background-color: #d01988;
}
.jp-controls a {top: 10px;}
a.jp-play,
a.jp-pause {
	left: 10px;
	width: 30px;
	height: 30px;
}
a.jp-stop{
	left: 45px;
	width: 30px;
	height: 30px;
}
a.jp-play {background: url(/static/monkichi/official-sp/top/ico_audio_play.png);background-size: 30px;-moz-background-size: 30px;-webkit-background-size: 30px;}
a.jp-pause {background: url(/static/monkichi/official-sp/top/ico_audio_pause.png);background-size: 30px;-moz-background-size: 30px;-webkit-background-size: 30px;}
a.jp-stop {background: url(/static/monkichi/official-sp/top/ico_audio_stop.png);background-size: 30px;-moz-background-size: 30px;-webkit-background-size: 30px;}
a.jp-play:hover {background: url(/static/monkichi/official-sp/top/202112/ico_audio_play_h.png);background-size: 30px;-moz-background-size: 30px;-webkit-background-size: 30px;}
a.jp-pause:hover {background: url(/static/monkichi/official-sp/top/202112/ico_audio_pause_h.png);background-size: 30px;-moz-background-size: 30px;-webkit-background-size: 30px;}
a.jp-stop:hover {background: url(/static/monkichi/official-sp/top/202112/ico_audio_stop_h.png);background-size: 30px;-moz-background-size: 30px;-webkit-background-size: 30px;}
a.jp-mute {background: url(/static/monkichi/official-sp/top/ico_audio_sound.png);background-size: 30px;-moz-background-size: 30px;-webkit-background-size: 30px;right: 20px;}
a.jp-mute:hover{background: url(/static/monkichi/official-sp/top/202112/ico_audio_sound_h.png);background-size: 30px;-moz-background-size: 30px;-webkit-background-size: 30px;}
.jp-unmute {background: url(/static/monkichi/official-sp/top/ico_audio_mute.png);background-size: 30px;-moz-background-size: 30px;-webkit-background-size: 30px;right: 20px;}
.jp-unmute:hover {background: url(/static/monkichi/official-sp/top/202112/ico_audio_mute_h.png);background-size: 30px;-moz-background-size: 30px;-webkit-background-size: 30px;}
.jp-volume-bar {background: url(/static/monkichi/official-sp/top/ico_audio_vol.png) 0 center;background-size: 30px;-moz-background-size: 30px;-webkit-background-size: 30px; width: 20px; right: 0;}
.jp-volume-bar-value {background: url(/static/monkichi/official-sp/top/202112/ico_audio_vol_h.png) 0 center;background-size: 30px;-moz-background-size: 30px;-webkit-background-size: 30px;}

.jp-play-bar {background: #ed83c3;}
.jp-title .label {display: none;}




/* TOPムービー
----------------------------------- */
#moviePopup {
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
}
#moviePopup #bg {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	cursor: pointer;
}
#moviePopup #close {
    width: 20px;
    height: 20px;
    background-image: url(/static/monkichi/official-pc/gallery/ico_close.png);
    background-size: 100%;
    top: 20px;
    right: 20px;
    position: absolute;
    z-index: 9999;
    cursor: pointer;
}
#moviePopup #inner { 
    aspect-ratio: 16 / 9;
    width: 90%;
    position: absolute;
    z-index: 99;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#moviePopup #inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}



/* MOVIE
----------------------------------- */

.titArea {
margin: 15px 0 5px;
border:none;
padding:0;
}

.titArea .date {
    font-size: 13px;
    line-height: 1;
    color: var(--color-white);
}

#aop_page_movie .titArea{
margin: 0 0 30px;
}

.titArea .txt {
margin-bottom:10px;
}

.titArea .tit {
line-height: 1.3em;
font-size: 15px;
}

.thumb .dummy, .ph .dummy {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}

#movie .contentsList li{
	width:48%;
	float:left;
	border:none;
	margin-bottom:10px;
	margin-right:4%;
}
#movie .contentsList li a{
	padding:0;
text-decoration:none;
}

#movie .date{
font-size: 13px;
margin: 0 0 5px;
color:var(--color-white);
font-weight:normal;
}

#movie .tit {
font-size: 15px;
font-weight: bold;
color:var(--color-white);
}

.subTxt{
line-height:1.6em;
font-size: 11px;
margin: 0 0 30px;
}

#movie .contentsList li:nth-child(even){
	margin-right:0;
}
#movie .contentsList li .thumb{
	width:100%;
	float:none;
	position:relative;
	line-height:0;
}
#movie .contentsList .txtArea{
	padding:8px 0 0;
}
#movie .contentsList .tit{
	font-size:13px;
}
#moviePlay embed{
width:100% !important;
height:100%;
padding:15px 0 10px;
}

video{
width:100%;
height:50%;
padding:5px 0 10px;
text-indent:-99999px;
}

#moviePlay img{
width:100% !important;
height:100% !important;
position: absolute;
top: 0;
left: 0;
}
#moviePlay div {
width:320px !important;
margin:0 auto 15px;
}

#moviePlay div div{
width:320px !important;
height:180px !important;
}

/* WALLPAPRE
----------------------------------- */
#aop_page_wallpaper .contentsList{
    display: flex;
    flex-wrap: wrap;
}

#aop_page_wallpaper .contentsList li{
	border:none;
	width:30%;
	margin-right:5%;
	margin-bottom:5%;
}
#aop_page_wallpaper .contentsList li a{
	padding:0;
	text-decoration:none;
}
#aop_page_wallpaper .contentsList li:nth-child(3n){
	margin-right:0;
}
#aop_page_wallpaper .contentsList li img{
	width:100%;
}
#aop_page_wallpaper .contentsList li .thumb{
	float:none;
	width:auto;
border:solid 1px var(--color-white);
}

#aop_page_wallpaper .contentsList li .thumb .dummy{
	height:100%;
}
#aop_page_wallpaper .contentsList li .tit{
	font-size:11px;
	line-height:1.3em;
	color:var(--color-white);
	margin-top:7px;
}

#aop_page_wallpaper .dlArea{
padding-top:10px;
}

.pointList{
border:solid 1px var(--color-white);
margin-bottom:20px;
}
.pointList dd{
border-color:var(--color-white);
}

.pointList .necessary{
color:var(--color-white);
}

.pointList .rest{
color:var(--color-yellow);
}

.wpThum{
padding:10px 0 20px 0;
}


/* Q&A
----------------------------------- */
#qanda .qandaList .tit{
	overflow:visible;
	white-space:normal;
}

#qanda .mainLead{
padding:0;
}

.formList{
margin-bottom:15px;
}

.formArea .formTit{
color:var(--color-black);
}

.formArea .titArea .txt{
margin-bottom:20px;
font-size:13px;
line-height:1.6em;
}

.formArea .txtArea {
margin-bottom:20px;
}

#qa .titArea {
margin: 0 0 10px;
border:none;
padding:0;
color:var(--color-white);
}

#qa .contTit{
font-weight:bold;
text-align:center;
}

.txtArea .txt{
color:var(--color-white);
}

#qanda .mainLead .txt{
	font-weight:normal;
	margin-bottom:20px;
}
#qanda .mainLead{
	border:none;
}
#qanda.detail:after {
    content: "";
    display: block;
    clear: both;
}
.pageNav ul,
.pageNav li{
border-color:#000 !important;
}

.pageNav ul{
}

.pageNav li{
color:#999;
}


.pageNav li span{
}

#qanda.detail .answer,
#qanda.detail .question {
    clear: both;
    position: relative;
    width:100%;
    margin-bottom:10px;
    padding: 15px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-sizing:border-box;
    line-height:1.6em;
}
#qanda .qandaList a .tit:before,
#qanda.detail .q,
#qanda.detail .a{
	font-weight:400;
	font-size:18px;
	margin-bottom:10px;
}
#qanda .qandaList a .tit:before,
#qanda.detail .q{
	color:var(--color-white);
}
#qanda .qandaList .subTxt{
	text-align:right;
}

.qandaList{
margin-top:20px;
}

.qandaList li:first-child{
border-top: 1px solid var(--color-white);
}


.qandaList li {
border-bottom: 1px solid var(--color-white);
}

.qandaList li a{
padding:15px 0;
color: var(--color-white);
}


#qanda.detail .a{
color: var(--color-white);
}
#qanda.detail .answer:before,
#qanda.detail .question:before {
    z-index: 1;
    content: "";
    position: absolute;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 2px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
}
#qanda.detail .backLink a{
	padding:10px 0;
}
#qanda.detail .answer {
	margin-bottom:20px;
	background:var(--color-blue);
	color:var(--color-white);
}
#qanda.detail .answer:before {
    border-right: 10px solid var(--color-blue);
    left: -12px;
}

#qanda.detail .question {
    background: var(--color-white);
    color: var(--color-black);
}
#qanda.detail .question:before {
    border-left: 10px solid var(--color-white);
    right: -12px;
}


#qanda .qandaList a .tit::before {
color: var(--color-white)
}
#qanda.detail .q {
color: var(--color-black)
}

.pageNav{
    margin-top:10px;
    padding:0 ;
}
.pageNav ul{
background:transparent;
    border:none;
}
.pageNav li{
    border:none;
    color:var(--color-white);
}
.pageNav li a{
    color:var(--color-white);
}

.pageNav li span {
color: #FFEBC9;
}

.pageNav li:first-child{
    text-align:left;
    border:none;
}
.pageNav li:last-child{
    text-align:right;
    border:none;
}

.pageNav li:first-child a:before,
.pageNav li:first-child span:before{
    font-family: 'FontAwesome';
    content:'\f104';
    margin-right:5px;
font-size:14px;
}
.pageNav li:last-child a:after,
.pageNav li:last-child span:after{
    font-family: 'FontAwesome';
    content:'\f105';
    margin-left:5px;
font-size:14px;

}

/* BD Mail
----------------------------------- */
.detail .sectionTit{
color:var(--color-black);
border-color:var(--color-black);
}

.accordionList{
border-color:var(--color-black);
}

.accordionList dt{
color:var(--color-black);
border-color:var(--color-black);
}

.formArea .txt{
color:var(--color-black);
}

.alertBox li{
color:var(--color-black);

}

/* BLOG
----------------------------------- */
#blog .detail .tit{ 
    font-size: 15px;
    margin: 0 0 20px;
    font-weight: bold;
    line-height: 1.5em;
}
#blog .txtArea{
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 15px;
    box-shadow: 3px 3px var(--color-blue);
    line-height:1.6em;
    margin-bottom:3px;
}
#blog.page--blog .txtArea span {
    color: var(--color-black)!important;
}
#blog .txtArea * {white-space: normal!important;}


/* aopBLOG
----------------------------------- */
#aopblog .titArea .tit {
    font-size: 16px;
    margin: 0px 0 5px;
    font-weight: bold;
    line-height: 1.5em;
}

#aopblog .icon--area {
    font-size: 11px;
}

#aopblog .icon--like {
    display: inline-block;
    background: var(--color-black);
    color: var(--color-white);
    padding: 5px 6px 6px 8px;
    border-radius: 3px;
    font-weight: bold;
    line-height: 1;
    font-size: 13px;
    font-family: '-apple-system', 'Roboto', sans-serif;
}

#aopblog .icon--like_num {
    display: inline-block;
    margin-left: 3px;
}

#aopblog .icon--area #likes {
    font-size: 10px;
}

#aopblog .titArea {
    margin: 0 0 20px;
}

#aopblog .blog_detail {
    margin-bottom: 40px;
}


#aopblog .blog_thumbList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding-top: 3px;
}

#aopblog .blog_thumbList::after {
    content: '';
    width: 32%;
    height: 0;
}

#aopblog .blog_thumbList li {
    width: 32%;
    margin-bottom: 1.9%;
}

#aopblog .blog_thumbList li a {
    display: block;
    width: 100%;
}

#aopblog .blog_thumbList li .thumb img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#aopblog .pagingBox {}

#aopblog .pagingBox ul {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#aopblog .pagingBox ul li {
    padding: 0px 5px;
    margin: 0 4px;
}
#aopblog .pagingBox ul li.current {
    border-bottom: 3px solid;
}

#aopblog .pagingBox ul li a.page {
    color: var(--color-white);
    font-size: 13px;
    font-weight: bold;
}

#aopblog .pagingBox ul li.current span {
    font-weight: bold;
}

#aopblog .blog_thumbList li .tit {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-black);
    padding-top: 3px;
}


/* SUPORT
----------------------------------- */

#top .copyright { 
    position: relative;
    padding:10px 0 0 0;
    background:var(--color-blue);
    color: var(--color-white);
}
.suportList{
    padding: 40px 10% 160px;
    overflow: hidden;
    position: relative;
    background: var(--color-blue);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.suportList li  {
    width: calc(100% / 2 - 10px / 2);
    display: block;
}
.suportList li a{
    display: block;
    text-decoration: none;
    color: var(--color-white);
    letter-spacing: 0.05em;
    font-size: 12px;
}

/* footer
----------------------------------- */
.copyright {
	width: 100%;
	text-align: center;
	padding: 20px 0;
	color: var(--color-white);
	position: absolute;
	left: 0;
	bottom: 0;
    font-size: 10px;
}
#footer{
padding:0;
}
#top #footer {
bottom: 55px;
}
#footer .jasrac{
	display:none;
    text-align: center;
    margin: 0 0 10px;
}
#top #footer .jasrac{
    display: flex;
    justify-content: center;
}
#footer .jasrac img{
    width: 120px;
}

/* 会員規約
----------------------------------- */

.supportCaption li {
padding: 0 0 5px 1em;
line-height: 1.5em;
text-indent: -1em;
}

.supportTxt {
padding: 0 0% 15px;
line-height: 1.5em;
}


/* 特商法
----------------------------------- */
.companyTable{
border:solid 1px var(--color-white);
padding:0 5%;
}
.companyTable th{
width:34%;
padding:10px;
border-right:solid 1px var(--color-white);
border-bottom:solid 1px var(--color-white);
vertical-align:middle;
font-size:11px;
background:var(--color-blue);
color:var(--color-white);
}

.companyTable td{
padding:10px;
border-bottom:solid 1px var(--color-white);
font-size:12px;
line-height:1.5em;
}

/* プライバシーポリシー
----------------------------------- */
.supportTit {
padding: 0 0 5px;
font-size: 13px;
font-weight:bold;
}



/* APPLI
----------------------------------- */
.cat_list li:nth-child(odd) {
margin: 0px;
}

.cat_list li a {
padding: 5px 0;
display: block;
}

.cat_list p {
display: block;
font-size: 20px;
line-height: 18px;
font-weight: bold;
text-align: left;
color: black;
padding: 21px 20px 20px 0px;
vertical-align: middle;
}

.appicon {
border-radius: 7px;
float: left;
height: 40px;
margin: 2px 0 0 1px;
position: relative;
width: 40px;
background: white;
}

p.app_tit {
color: var(--color-black);
font-size: 14px;
letter-spacing: 0.02em;
line-height: 180%;
padding: 0 0 2px 55px;
}

p.app_txt {
color: var(--color-black);
font-size: 10px;
line-height: 130%;
margin: 0 0 0 55px;
padding: 0 0 5px;
}

.appicon.cal::after{
color:#54c7ed;
}


/* FAQ
----------------------------------- */

.faqList{
margin:0%;
border-top:solid 1px var(--color-white);

}
.faqList li{
position:relative;
padding:0;
border-bottom:solid 1px var(--color-white);

}
.faqList li:after{
height: 16px;
margin-top: -8px;
content: "\f105";
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
color: var(--color-white);
position: absolute;
right: 0%;
top: 50%;
}


.faqList li a{
display: block;
width: 100%;
padding: 15px 15px 15px 1.6em;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-size:13px;
color:var(--color-white);
line-height:1.6em;
text-indent:-1.8em;
text-decoration:none;
}


.faqList li a span{
font-weight: 600;
color:var(--color-white);
}


.faqTit{
padding-bottom:10px;
border-bottom:solid 1px var(--color-white);
margin-bottom:10px;
font-size:14px;
font-weight:bold;
line-height:1.5em;
color:var(--color-white);
}

#faqDetail p {
line-height: 1.6em;
}

.faqLead {
margin-bottom: 5%;
}

#faqDetail p span{
color:var(--color-white)!important;
}

#faqDetail .cat {
display: none;
padding:4px 5px 3px 5px;
background:var(--color-black);
margin-bottom: 5px;
color: var(--color-white);
font-size: 10px;
line-height: 1.2em;

}

#faqDetail .faqLead .answer {
font-size: 14px;
font-weight: bold;
color: var(--color-white) !important;
display:inline;
}

#faq .faqTop .tit { margin: 0 0 15px;}
#faq .faqTop .faqList { margin: 0 0 40px;}
#faq .faqTop .searchBox {
	width: auto;
  position: relative;
  text-align: center;
  margin: 0 0 30px;
  padding: 0;
}
#faq .faqTop .searchBox input[type="text"] {
  width: 100%;
  height: 40px;
  margin: 0 5px 0 0;
  padding: 0 10px;
  background: #fff;
  border: solid 1px #aaa;
  border-radius: 5px;
  line-height: 1.6em;
}
#faq .faqTop .searchBox input[type="text"]:placeholder-shown { color: #ccc;}
#faq .faqTop .searchBox input[type="text"]::-webkit-input-placeholder { color: #ccc;}
#faq .faqTop .searchBox input {
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  font-size: 15px;
  line-height: 1.4em;
  box-sizing: border-box;
}
#faq .faqTop .searchBox input[type="submit"] {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  line-height: 40px;
  font-size: 20px;
  color: #999;
  background: transparent;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  border: none;
  z-index: 2;
  font-family: FontAwesome;
  transition: all .3s ease;
  margin: 0;
}

/* FAQ
----------------------------------- */
.pager {
margin-bottom:15px;
}

.pager .left {
width: 50%;
float: left;
}

.pager .right {
width: 50%;
float: right;
}

.pager a {
display: block;
color: var(--color-white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 10px 0;
font-size: 13px;
font-weight: bold;
}

.pager .left a .fa {
margin: 0 5px 0 0;
}

.pager .right a .fa {
margin: 0 0 0 5px;
}

.pager a .fa {
width: 1em;
text-align: center;
border: none;
vertical-align: 1px;
}


#qanda .pagerArea {
	margin: 0 0 15px;
}
#qanda .pagerArea li {
	width: 50%;
	display: inline-block;
	box-sizing: border-box;
}
#qanda .pagerArea li p {
list-style: none;
    background: var(--color-black);
    display: inline-block;
    border-radius: 5px;
    text-align: center;
    padding: 2px 5px;
}

#qanda .pagerArea li.right {
	text-align: right;
}
#qanda .pagerArea li a {
	color: #fff;
	padding: 7px 10px;
}
#qanda .pagerArea li a .fa {
	margin: 0 5px 0 0;
}
#qanda .pagerArea li:nth-child(2) a .fa {
	margin: 0 0 0 5px;
}



/* アンケートフォーム
----------------------------------- */
#contents.questionnaireArea{
	background:#fff;
}
.enqTit{
text-align: center;
background: #F29300;
padding: 10px;
color: white;
font-weight: bold;
font-size: 16px;
margin: 0 0 10px;
}

.enqTxt{
color: black;
font-weight: bold;
margin: 0 0 10px;
font-size: 14px;
line-height: 1.4em;
border-bottom: 1px solid #EEE;
padding: 0 0 18px 0;
}
.enqueteList {
padding: 9px 0 18px;
margin: 0 0 9px;
overflow: hidden;
border-bottom: 1px solid #EEE;
}

.enqueteList dt {
font-size: 14px;
font-weight: bold;
color: black;
margin: 0 0 8px;
line-height: 1.4em;
}

.enqueteList dd {
font-size: 13px;
font-weight: bold;
line-height: 2em;
color: #666;
}


#questionnaire_form select{
width: 100%;
color: #666;
font-size: 13px;
font-weight: bold;
height: 40px;
padding: 6px 50px 6px 12px;
border: 1px solid var(--color-black);
border-radius: 4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: .01px;
text-overflow: "";
background: #FAFAFA url(/static/monkichi/official-sp/feature/sarutabi2016/ico_arrow_down-1.png) no-repeat right center;
background-size: 24px 13px;
-moz-background-size: 24px 13px;
-webkit-background-size: 24px 13px;
}

select#city {
width: 100%;
color: #666;
font-size: 13px;
font-weight: bold;
height: 40px;
padding: 6px 50px 6px 12px;
border: 1px solid var(--color-black);
border-radius: 4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: .01px;
text-overflow: "";
background: #FAFAFA url(../images/ico_arrow_down.png) no-repeat right center;
background-size: 24px 13px;
-moz-background-size: 24px 13px;
-webkit-background-size: 24px 13px;
}
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"]{
width: 100%;
height: 45px;
font-size: 13px;
padding:8px;
	border-radius:5px;
	box-sizing: border-box;
	border: solid 1px var(--color-black);
}
textarea {
width: 100%;
font-size: 13px;
padding: 5px;
box-sizing: border-box;
}

.textBox {
width: 100%;
font-size: 13px;
padding: 5px;
box-sizing: border-box;
}
#questionnaire_form .check li{
	text-indent:-1.5em;
	padding:0 0 10px 1.6em;
	line-height:1.4em;
}
#questionnaire_form .check li:last-child{
	padding:0 0 0 1.6em;
}

.radioList li {
position: relative;
border-bottom: solid 1px var(--color-black);
border-left: solid 1px var(--color-black);
border-right: solid 1px var(--color-black);
background: #FAFAFA;
}

.radioList li:first-child{
border-top: solid 1px var(--color-black);
border-radius: 5px 5px 0 0;
}
.radioList li:last-child{
border-radius: 0 0 5px 5px;
}
.radioList input {
display: inline;
position: absolute;
top: 15px;
left: 10px;
}
.radioList label {
display: block;
cursor: pointer;
width: 87%;
margin: 0;
padding: 15px 0 15px 13%;
color: #666;
font-size: 14px;
line-height: 1;
transition: .2s;
}

.btn .main, .btn input[type="submit"].main {
width: 90%;
font-size: 15px;
position: relative;
display: block;
font-weight: bold;
line-height: 1.4em;
text-align: center;
text-decoration: none;
border: none;
border-radius: 100vmax;
-webkit-border-radius: 100vmax;
-moz-border-radius: 100vmax;
padding: 20px;
margin: 0 auto 10px;
}
.btn input.back{
	background:#ccc;
}

.btn_app a {
    color: var(--color-blue) !important;
}

table#birthday{
	width:100%;
}
#questionnaire_form table#birthday select{
	padding:6px 30px 6px 12px;
}
table#birthday tr td.date{
	padding:0 3px;
	line-height:1.2em;
	vertical-align:bottom;
}
.questionnaireArea #insideBnr{
	display:none;
}


/* birthday
----------------------------------- */
.birthday {
	position: absolute;
    width: 100%;
    height: 360px;
	z-index: 50;
}
 
.birthday p {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,   -50%);
    transform: translate(-50%,   -50%);
	width: 92%;
}


/* movie
----------------------------------- */
.contentsMov{

}
.contentsMov section#movie.movieList{

}
.contentsMov section#movie.movieList .contentsList{
    margin: 0 0 40px;
}
.contentsMov section#movie.movieList .contentsList li{
    float: none;
    width: 100%;
    margin: 0;
}
.contentsMov section#movie.movieList .contentsList li:last-child{

}

.contentsMov section#movie.movieList .contentsList li a{
	position: relative;
    display: block;
    padding: 10px;
}
.contentsMov section#movie.movieList .contentsList li:nth-child(even) a{
	background: rgba(255,255,255,0.3);
}
.contentsMov section#movie.movieList .contentsList li a:after{
	position: absolute;
    right: 10px;
    top: 50%;
    content: '\f105';
    font-family: FontAwesome;
    margin-right: 5px;
    font-size: 16px;
    z-index: 10;
    visibility: visible;
    transform: translateY(-50%);
    display: inline-block;
    height: auto;
}

.contentsMov .btnBack{
    width: 92%;
    margin: 0 auto;
}

/* newMovie list */
.page--movie h2.pageTit {
    line-height: 1.5;
    font-size: 24px;
}

.page--movie.new-movie.new-movie-list .sortBox {
	display: none;
}
.page--movie.new-movie.new-movie-list .block--nav--category {
	display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
	margin: 0 0 10px;
}
.page--movie.new-movie.new-movie-list .block--nav--category li {
	margin-right: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    padding: 5px 10px;
    border-radius: 5px;
}
.page--movie.new-movie.new-movie-list .block--nav--category li:last-child {}
.page--movie.new-movie.new-movie-list .block--nav--category li.current {
	background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
}
.page--movie.new-movie.new-movie-list.movie-list-12 .block--nav--category li:nth-child(2),
.page--movie.new-movie.new-movie-list.movie-list-14 .block--nav--category li:nth-child(3),
.page--movie.new-movie.new-movie-list.movie-list-16 .block--nav--category li:nth-child(4),
.page--movie.new-movie.new-movie-list.movie-list-15 .block--nav--category li:nth-child(5),
.page--movie.new-movie.new-movie-list.movie-list-13 .block--nav--category li:nth-child(6) {
	background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
}
.page--movie.new-movie.new-movie-list .block--nav--category li a {
	color: var(--color-white);
}
.page--movie.new-movie.new-movie-list .block--nav--category li.current a {
	background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
	pointer-events: none;
}
.page--movie.new-movie.new-movie-list.movie-list-12 .block--nav--category li:nth-child(2) a,
.page--movie.new-movie.new-movie-list.movie-list-14 .block--nav--category li:nth-child(3) a,
.page--movie.new-movie.new-movie-list.movie-list-16 .block--nav--category li:nth-child(4) a,
.page--movie.new-movie.new-movie-list.movie-list-15 .block--nav--category li:nth-child(5) a,
.page--movie.new-movie.new-movie-list.movie-list-13 .block--nav--category li:nth-child(6) a {
	background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white); 
    pointer-events: none;
}

.page--movie.new-movie.new-movie-list #movie {
	text-align: center;
}
.page--movie.new-movie.new-movie-list #movie .block--category-list {
	text-align: left;
}
.page--movie.new-movie.new-movie-list #movie .latest-tit {
	display: none;
}
.page--movie.new-movie.new-movie-list #movie .block--category-list-other {
	display: none;
}
.page--movie.new-movie.new-movie-list #movie .contentsList {
	display: flex;
	flex-wrap: wrap;
}
.page--movie.new-movie.new-movie-list #movie .contentsList li:nth-child(even) {
	margin: 0 0 10px 0;
}
.page--movie.new-movie.new-movie-list #movie .contentsList li .thumb img {
	width: 100%;
}
.page--movie.new-movie.new-movie-list #movie .contentsList .txtArea .date .year {
	margin: 0 5px;
}
.page--movie.new-movie.new-movie-list #movie .contentsList .txtArea .date .year.new {
	color: var(--color-black);
}
.page--movie.new-movie.new-movie-list #movie .contentsList .category {
	display: none;
}
.page--movie.new-movie.new-movie-list .detail__btn {
	display: none;
}
.page--movie.new-movie.new-movie-list #insideBnr {
	display: none;
}
.page--movie.new-movie.new-movie-list #footer {
	bottom: 0;
}

.page--movie.new-movie.new-movie-list .block--pager {
    display: inline-flex;
    padding: 25px 0 0;
    margin: 0 auto;
    align-items: center;
    position: relative;
}
.page--movie.new-movie.new-movie-list .block--pager li {}
.page--movie.new-movie.new-movie-list .block--pager li a {
    padding: 0 7px;
	color: var(--color-white);
}
.page--movie.new-movie.new-movie-list .block--pager li.pager__item--newer {
	position: absolute;
	left: -15px;
}
.page--movie.new-movie.new-movie-list .block--pager li.pager__item--newer a {
	padding: 0;
}
.page--movie.new-movie.new-movie-list .block--pager li.pager__item--current {
    border-bottom: 1px solid;
    padding: 0px 7px;
}
.page--movie.new-movie.new-movie-list .block--pager li.pager__item--other {
	border-bottom: 1px solid #25252500;
}
.page--movie.new-movie.new-movie-list .block--pager li.pager__item--other a {}
.page--movie.new-movie.new-movie-list .block--pager li.pager__item--older {
	position: absolute;
	right: -25px;
}
.page--movie.new-movie.new-movie-list .block--pager li.pager__item--older a {}

/* newMovie detail */
.page--movie.new-movie.new-movie-detail {}
.page--movie.new-movie.new-movie-detail #new_movie {
    position: relative;
    z-index: 3;
    padding: 30px 20px 20px;
    width: 90%;
    margin: 0 auto 160px;
    background: var(--color-orange);
}
.page--movie.new-movie.new-movie-detail #new_movie .section-tit {
	display: none;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin: 0 auto 35px;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--movie .block--player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--movie video {
	padding: 0;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--movie .vjs-big-play-centered .vjs-big-play-button {
	margin-top: -0.85em;
  }
  .page--movie.new-movie.new-movie-detail #new_movie .area--movie .video-js .vjs-play-control.vjs-paused,
  .page--movie.new-movie.new-movie-detail #new_movie .area--movie .video-js .vjs-play-control.vjs-playing {
	border: none;
	outline: none;
	box-shadow: none;
  }
  .page--movie.new-movie.new-movie-detail #new_movie .area--movie .video-js .vjs-play-control.vjs-paused span:before,
  .page--movie.new-movie.new-movie-detail #new_movie .area--movie .video-js .vjs-play-control.vjs-playing span:before {
	width: 1.6em;
	height: 1.6em;
	margin-top: 0.5em;
	margin-left: -0.25em;
  }
.page--movie.new-movie.new-movie-detail #new_movie .block--tit {
    padding: 0 0 15px;
    margin: 0 auto 20px;
    border-bottom: 1px solid var(--color-white-opc50);
}
.page--movie.new-movie.new-movie-detail #new_movie .block--tit .date {
    font-size: 12px;
    margin: 0 0 5px;
	opacity: 1;
}
.page--movie.new-movie.new-movie-detail #new_movie .block--tit .tit {
    margin: 0;
    line-height: 1.3em;
    font-size: 15px;
    font-weight: bold;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--more-info .block--tab {
	display: none;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--more-info .block--tab__main .block--more_movies {
	border: none;
	padding: 0;
	background: none;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--more-info .block--tab__main .block--more_movies .more_movies_title {
    color: inherit;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 0.03em;
    font-weight: 700;
    text-align: center;
    margin: 0 0 20px;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--more-info .block--tab__main .block--more_movies .list--contents {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--more-info .block--tab__main .block--more_movies .list--contents .item--more_movie {
	border-bottom: none;
	width: 48%;
	margin: 0 0 20px 0;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--more-info .block--tab__main .block--more_movies .list--contents .item--more_movie a {
	display: flex;
	flex-wrap: wrap;
	text-decoration: none;
	padding: 0;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--more-info .block--tab__main .block--more_movies .list--contents .item--more_movie a .thumb {
	width: 100%;
	margin-bottom: 10px;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--more-info .block--tab__main .block--more_movies .list--contents .item--more_movie a .list__txt {
	width: 100%;
	padding: 0;
	color: var(--color-white);
}
.page--movie.new-movie.new-movie-detail #new_movie .area--more-info .block--tab__main .block--more_movies .list--contents .item--more_movie a .list__txt .category {
	display: none;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--more-info .block--tab__main .block--more_movies .list--contents .item--more_movie a .list__txt .date {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
	margin: 0 0 5px;
	opacity: 1;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--more-info .block--tab__main .block--more_movies .list--contents .item--more_movie a .list__txt .date span {
	margin: 0 5px;
}
.page--movie.new-movie.new-movie-detail #new_movie .area--more-info .block--tab__main .block--more_movies .list--contents .item--more_movie a .list__txt .tit {
	font-size: 12px;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.05em;
	margin: 0;
}
.page--movie.new-movie.new-movie-detail #new_movie .detail__btn {
    padding: 20px 0 10px;
    display: block;
}
.page--movie.new-movie.new-movie-detail #new_movie .detail__btn a {
	color: var(--color-white);
	line-height: 1.5;
}	

/* newMovie detail point */
#pointMovie {
    position: relative;
    padding: 20px;
    width: 90%;
    margin: 0 auto 160px;
    background: var(--color-orange);
    color: var(--color-white);
}
#pointMovie .titArea {
    margin: 0 0 20px;
    padding: 0 0 15px;
    border-bottom: 1px solid var(--color-white-opc50);
}
#pointMovie .subTxt {
    font-size: 13px;
    line-height: 1.5em;
    margin: 0 0 20px;
}
#pointMovie .bkBtn a {
	display: block;
    width: 90%;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4em;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    padding: 10px 0;
    margin: 0 auto 10px;
    color: var(--color-black);
    letter-spacing: 0.1em;
}


/* page--blog */
.page--blog h2.pageTit.ja {
    line-height: 1.5;
    font-size: 24px;
}

.page--blog .contentsList {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.page--blog .contentsList li {}
.page--blog .contentsList li a {
	position: relative;
    display: block;
    background: var(--color-white);
    color: var(--color-black);
    text-decoration: none;
    padding: 15px 25px 15px 15px;
    font-weight: bold;
    border-left: 5px solid var(--color-blue);
}
.page--blog .contentsList li a p {
    font-family: var(--font-common);
}
.page--blog .contentsList li a .date {
    line-height: 1;
    font-size: 13px;
}
.page--blog .contentsList li a .date .new {
    color: var(--color-orange);
}
.page--blog .contentsList li a .title {
	font-size: 15px;
}
.page--blog .contentsList li a .arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 14px;
    background: var(--color-blue);
}
.page--blog .contentsList li a .arrow i {
    transform: rotate(45deg);
}

.page--blog .titArea {
    margin-top: 0;
}
.page--blog .txtArea .thumb {
    margin-bottom: 10px;
}
.page--blog .txtArea span {
    color: var(--color-white)!important;
}


/*===================================================================

	プレイリストページ

====================================================================*/

.monkichi_playlis {

}
.monkichi_playlist #wrap{
    background: var(--color-black);
}
.monkichi_playlist #contents {}
.monkichi_playlist h2.pageTit{
    color: var(--color-white);
    text-align: center;
    margin: 0 0 30px 0;
}
.monkichi_playlist h2.pageTit.addBorder:after {
    display: none;
}
.monkichi_playlist .contentsList li {
    border: none;
    padding:0;
    background: var(--color-white);
}
.monkichi_playlist .contentsList .date {
    font-weight: bold;
    color: var(--color-black);
    font-size: 13px;
    margin: 0 0 5px 0;   
}
.monkichi_playlist .contentsList .date .year {
    font-size: 13px;
    margin: 0 5px;
}
.monkichi_playlist .contentsList .tit {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.4em;
    margin: 0;
}
.monkichi_playlist .contentsList a {
    display: block;
    padding: 30px 20px 40px;
}
.monkichi_playlist #contents #insideBnr {
    margin: 20px 0 0;
    display: none;
}
.monkichi_playlist .detail {}
.monkichi_playlist .btn .btnBack {}
.monkichi_playlist .titArea .date {
    font-weight: bold;
    font-size: 12px;
    margin: 0 0 10px 0;
    line-height: 1;
}
.monkichi_playlist .titArea .date .year{
    font-size: 11px;
    font-weight: bold;
    margin: 0 5px;
}
.monkichi_playlist .titArea{
    margin: 0;
    border: none;
    padding: 0;

}
.monkichi_playlist .pager {
    width: 100%;
    margin: 0 auto 30px;
}
.monkichi_playlist .pager a {}
.monkichi_playlist .pager a .fa {
    border: none;
}
#blog.monkichi_playlist .detail .tit {
    margin: 0 0 25px;
}
#blog.monkichi_playlist .txtArea {
    margin-bottom: 0!important;
    font-size: 13px;
    line-height: 1.8em;
}
#blog.monkichi_playlist .txtArea img {
    width: auto;
}

/* アプリ終了対応 */
.body-app #load{display: none;}

.body-app #contents{
	background:#fff;
	color:#000;
}
.attentionBox{
	margin: 0 auto;
	width: 90%;
	padding: 20vw 4%;
}

.attentionBox{
	color:var(--color-white);
}
.attentionBox .tit{
	text-align: center;
	font-weight: bold;
	font-size: 4.5vw;
	margin-bottom: 1em;
	line-height: 1.4;
}
.attentionBox .lead{
margin-bottom: 1em;
font-size: 1.1em;
}
.attentionBox .lead a{
color:#BC0000;
text-decoration: underline;
font-weight: bold;
padding: 2px;
}
.attentionBox .txt-link{text-align:center;}


/*====================================================
	スマートバナー
======================================================*/

#top #wrap {
    padding-top: 80px;
    transition: 0.3s ease;
}
#top.close #wrap,
#top.openmenu #wrap {
    padding-top: 0;
}
#top #header {
    top: 0px;
    position: sticky;
}
#top #header h1 {
    width: 100%;
    position: absolute;
    z-index: 100;
    height: 65px;
}
#top #app-bnr {
    position: absolute;
    top: -65px;
    left: 0;
    background: #FFF;
    width: 100%;
    transform: translatey(-100%);
}
#top #app-bnr a {
    display: block;
    margin: 0 25px 0 0;
    padding: 10px 0 10px 10px;
    position: relative;
    font-size: 10px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    letter-spacing: 0;
    border-radius: 10px;
}
#top #app-bnr .icon {
    width: 60px;
    float: left;
    line-height: 0;
    margin: 0 3.5% 0 0;
    border-radius: 15px;
    border: 1px solid #ccc;
    overflow: hidden;
    box-sizing: border-box;
}
#top #app-bnr .txt {
    overflow: hidden;
    -webkit-flex: 1;
    flex: 1;
    margin: 0;
    font-size: 12px;
    line-height: inherit;
	color: #000;
}
#top #app-bnr .close {
    width: 30px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}
#top #app-bnr .close:before, #top #app-bnr .close:after {
    content: '';
    width: 12px;
    height: 2px;
    background: #999;
    border-radius: 2px;
    position: absolute;
    top: 15px;
    left: 9px;
}
#top #app-bnr .close:before {
    transform: rotate(-45deg);
}
#top #app-bnr .close:after {
    transform: rotate(45deg);
}


/*====================================================
	page--notice
======================================================*/
.page--notice .list--info {
	border-top: 1px dashed;
}
.page--notice .list--info a {
    padding: 15px 0;
    border-bottom: 1px dashed;
    color: var(--color-black);
    display: block;
}
.page--notice .list--info a .txt {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4em;
    margin: 0;
}
.page--notice .list--info a .date {
    font-size: 12px;
    font-weight: normal;
    font-family: Helvetica Neue, Helvetica, Arial, san-serif;
    margin: 0 0 5px;
    line-height: 12px;
}
.page--notice .list--info a .date .new {
	background: none;
    color: #E83232;
    font-size: 10px;
    margin: 0 0 0 5px;
}



/* latest contents
----------------------------------- */
.latestContents .contentsList.latestList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.latestContents .contentsList.latestList li {
    width: 100%;
}
.latestContents .contentsList.latestList li a {
    position: relative;
    background: var(--color-white);
    display: flex;
    padding: 15px 25px 15px 15px;
}
.latestContents .contentsList.latestList li a .thumb {
    width: 60px;
    height: 60px;
    margin: 0 10px 0 0;
    float: initial;
}
.latestContents .contentsList.latestList li a .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}
.latestContents .contentsList.latestList li a .detailBox {
	width: calc(100% - 70px);
}
.latestContents .contentsList.latestList li a .detailBox .date {}
.latestContents .contentsList.latestList li a .detailBox .date .category {
    color: var(--color-blue);
    padding-right: 5px;;
}
.latestContents .contentsList.latestList li a .detailBox .tit {}
.latestContents .contentsList.latestList li a .arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 14px;
    background: var(--color-blue);
}
.latestContents .contentsList.latestList li a .arrow i {
    transform: rotate(45deg);
}