@charset "utf-8";

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

         TWICE オフィシャルサイト

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

html,body {height:100%;min-height:100%;}
body {
font-family: Avenir ,"游ゴシック", "Yu Gothic","Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
font-size:15px;
line-height: 1.8;
letter-spacing:0.05em;
word-wrap : break-word;
overflow-wrap : break-word;
}
img {max-width: 100%;line-height:0;}

/* Utility */
.bold {font-weight:bold;}
.txt {margin-bottom:20px;}
.subTxt {font-size:0.8em;line-height:1.4em;}
.center {text-align:center;}

.clearfix:after {content:""; display:block; clear:both; }

/* link */
a {color:#000;text-decoration:none;}



/* PC SP 共通
=================================== */

#loading{
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #fff;
}

/* header
--------------------------------- */
#header{
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* footer
--------------------------------- */
#footer{ z-index: 2;position:absolute;bottom:0;width:100%;background: #2d2d2d;color: #ccc;}
#footer a{color: #ccc;}
#footer a:hover{color:#999;}
#footer p.copyright{ padding: 20px 0;background: #202020;text-align: center;color: #999}
#footer .subNavi p:after{
  content: ' ';
  display:block;
  width: 20px;
  height: 1px;
  margin: 10px 0 15px;
  background:#666666;
}


/* contents
--------------------------------- */
#wrapper{
  min-height: 100%;
  position:relative;
  z-index:99;
}
#home .content{position: relative;z-index: 2;}

/* ボタン */
.btn {text-align: center;}
.back a,
.btn a{display: inline-block;margin: 0 auto;}
.btn .sub{min-width: 180px;padding: 10px 0;border: 1px solid #000;}

/* タイトル */
.sectionTit{
  margin-bottom: 30px;
  font-size: 36px;
  text-align: center;
}
.sectionTit:after{
  content:' ';
  display: block;
  width:62px;
  height:1px;
  margin:10px auto 0;
  background: #000;
}

/* TOP
--------------------------------- */

section#keyvisual{
  position: relative;
  height: 100vh;
  background:url(/static/twice/official/top/dot.png);
  background-size:2px;
}
#home .content{background: #fff;}

/* PLAY VIDEO */

.play{
  position:fixed;
  top:90%;
  left:8%;
  z-index:2;
  font-size: 13px;
}
.play a{color:#fff;}

.mfp-iframe-holder .mfp-close{
  width: 60px;
  height: 60px;
  top:-80px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.mfp-iframe-holder .mfp-close:hover{
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.mfp-close span{
  position: absolute;
  display: block;
  background:#fff;
  height: 2px;
  width: 100%;
}
.mfp-close span.top{
  top:30px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.mfp-close span.bottom{
  top:30px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* scroll */

.scroll{
  position: fixed;
  bottom: 0;
  left:50%;
  width: 1px;
  height:70px;
  z-index:2;
}
.scroll:after{
  content:" ";
  width: 100%;
  position: absolute;
  height: 100%;
  display: block;
  content: "";
  top: 0px;
  background: #fff;
  -webkit-animation: scroll 1.2s linear 0s infinite;
  -moz-animation: scroll 1.2s linear 0s infinite;
  animation: scroll 1.2s linear 0s infinite;
}

@-webkit-keyframes scroll {
 0%{height:0%;top:0px;bottom:auto}
46% {
	height: 100%;
	top: 0px;
	bottom: auto
 }
50% {
	height: 100%;
	bottom: 0px;
	top: auto
 }
54% {
	height: 100%;
	bottom: 0px;
	top: auto
 }
100% {
	height: 0%;
	bottom: 0px;
	top: auto
 }
}
@-moz-keyframes scroll {
 0%{height:0%;top:0px;bottom:auto}
46% {
	height: 100%;
	top: 0px;
	bottom: auto
 }
50% {
	height: 100%;
	bottom: 0px;
	top: auto
 }
54% {
	height: 100%;
	bottom: 0px;
	top: auto
 }
100% {
	height: 0%;
	bottom: 0px;
	top: auto
 }
}
@keyframes scroll {
 0%{height:0%;top:0px;bottom:auto}
46% {
	height: 100%;
	top: 0px;
	bottom: auto
 }
50% {
	height: 100%;
	bottom: 0px;
	top: auto
 }
54% {
	height: 100%;
	bottom: 0px;
	top: auto
 }
100% {
	height: 0%;
	bottom: 0px;
	top: auto
 }
}

/* banner */
section#banner{background: #f5f5f5;}
#banner .slick-dots button,.release .slick-dots button{
  -webkit-appearance: none;
  padding:0;
  margin: 0;
  width: 10px;
  height: 10px;
  background: #fff;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid #000;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
}
#banner .slick-dots,.release .slick-dots{margin-top: 20px;text-align: center;}
#banner .slick-dots li,.release .slick-dots li{display: inline-block;margin: 0 5px;}
#banner .slick-dots .slick-active button,.release .slick-dots .slick-active button{background: #000;}
.slick-prev,
.slick-next {
	display: block;
	width: 10%;
	height: 100%;
	background: transparent;
	color: transparent;
	font-size: 0;
	line-height: 0;
	padding: 0;
	position: absolute;
	top: 0;
	z-index: 99;
	cursor: pointer;
	border: none;
	outline: none;
}
.slick-prev { left: 0; }
.slick-next { right: 0; }
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus { color: transparent; outline: none; background: transparent; }
.slick-prev::after, .slick-next::after {
	content: '';
	display: block;
	width: 50px;
	height: 50px;
	border-right: 2px solid #fff;
	border-top: 2px solid #fff;
	position: absolute;
	top: 42%;
}
.slick-prev::after { left: 25%; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
.slick-next::after { right: 25%; -webkit-transform: rotate(45deg); transform: rotate(45deg); }



/* about */
#about .sectionTit:after{background:#fff;}
#about .ph{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
#about .introduction{ background:#999;  color:#fff;}
#about .text{margin-bottom: 30px;}
#about .btn .sub{color:#fff;border-color: #fff;}

/* sns */
#sns .instagram .inner{line-height: 0;}

article{position: relative;}
#news .articleDate{position:relative;}

.shareBox{position: absolute;top:-5px;right:0;color:#999;font-size:12px;}
.shareBox li{display: inline-block;margin-right:8px;vertical-align: middle;}

.noInfo{width: 100% !important;padding:20px 0 0;color:#999;text-align: center;letter-spacing: 0.05em;border: none!important;}
.noInfo:before,
.noInfo:after{display: none}

/* disco */
#disco.detail ol{margin-top: 20px;}
#disco.detail ol li{margin-bottom:20px;font-size:13px;}
#disco.detail ol li h2{margin-bottom:10px;padding-bottom: 5px;border-bottom: 1px solid #ddd;}
#disco.detail ol ol{margin: 0;}
#disco.detail ol li li{margin-bottom:2px;}
#disco.detail ol li li span{margin-right:8px;}
#disco.detail a{text-decoration: underline;}
#disco.detail a:hover{opacity: 0.6}
#disco.detail ol a{text-decoration: none;}
.youtube{
  position: relative;
  width: 100%;
  padding-top: 56.25%
}
.youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%!important;
  height: 100%!important;
}


/* PC
=================================== */
@media screen and (min-width: 1001px){

  a {-webkit-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}

  /* header
  --------------------------------- */
  #header{
    background: #fff;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  #home #header{  background: transparent;}
  #home #header.on{
    background: #fff;
    -webkit-box-shadow: 0px 0px 2px -1px rgba(0,0,0,0.9);
    -moz-box-shadow: 0px 0px 2px -1px rgba(0,0,0,0.9);
    box-shadow: 0px 0px 2px -1px rgba(0,0,0,0.9);
  }
  #home #header.on a{color: #000}
  #header .inner{
    position: relative;
    height: 100px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }

  #header #logo{
    position: absolute;
    left: 50%;
    top: 50%;
    width:80px;
    margin:-40px 0 0 -40px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    text-align: center;
  }
  #header .gNavi{ display: block!important;text-align: center;}
  #header .gNavi ul{position: absolute;}
  #header .gNavi ul.left{right: 50%;margin-right: 60px;}
  #header .gNavi ul.right{left: 50%;margin-left: 60px; text-align: left;}
  #header .gNavi li{display: inline-block;font-size: 13px;}
  #header .gNavi li.comingsoon span,
  #header .gNavi li a{
    display: block;
    padding: 10px 12px;
    line-height: 85px;
  }
  #header .gNavi li.sns a{padding:10px 7px;font-size: 16px;}
  #header .gNavi li.sns.space {margin-left:20px;}
  #header .gNavi li .fa-envelope {font-size: 14px; vertical-align: 1px;}
  #header.small .inner{height:80px;}
  #header.small #logo{ margin-top:-30px;}
  #header .gNavi li.comingsoon span,
  #header.small .gNavi li a{  line-height: 56px;}
  #home #header .gNavi li.comingsoon span{color: #fff}
  #home #header.on .gNavi li.comingsoon span,
  #header .gNavi li.comingsoon span{opacity: 0.3;color:#000}
  #header .gNavi li.comingsoon{position: relative;}
  #header .gNavi li.comingsoon:after{
    /*
    content:'coming soon';
    font-size: 10px;
    letter-spacing: 0.02em;
    position: absolute;
    top:8px;
    left:0;
    width: 100%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    */
  }
  #navBtn{display: none}

  /* footer
  --------------------------------- */
  #footer{ position:absolute;bottom:0;width:100%;background: #2d2d2d;color: #ccc;}
  #footer .inner{ width: 1000px;margin: 0 auto;padding: 45px 0 80px;}
  #footer a{color: #ccc;}
  #footer a:hover{color:#999;}
  #footer p.copyright{ padding: 20px 0;background: #202020;text-align: center;color: #999;font-size: 12px}
  #footer .subNavi p{font-size: 13px}
  #footer .subNavi p:after{
    content: ' ';
    display:block;
    width: 20px;
    height: 1px;
    margin: 10px 0 15px;
    background:#666666;
  }
  #footer .subNavi li{ float:left;width: 120px;margin-right:80px;font-size:12px;line-height:2em;}
  #footer .subNavi li:first-child {width: 245px;}
  #footer .subNavi li li{ float:none;width: auto;display: block;margin-right:0;}
  #footer .subNavi li:first-child li{    width: 120px;float: left;}
  #footer .subNavi li.comingsoon{opacity: 0.3}
	#footer .sub_banner{
		width: 1000px;
		margin: 0 auto;
		padding: 20px 0 10px;
		border-top: 1px solid #333;
		letter-spacing: -0.5em;
	}
	#footer .sub_banner li{ display:inline-block;width: 32.3%;margin: 0 1% 10px 0;letter-spacing:0;line-height: 0;}

  /* contents
  =================================== */

  #contents{padding:100px 0 330px;}
  #home #contents{padding-top:0;}

  /* banner */
  section#banner{padding: 75px 0 55px;}
  #banner .slider {width: 100%;margin: 0 auto;}
  #banner .slick-slide img {width: 150%;height: auto;}
  #banner .slider .slick-slide{margin: 0 7px;}
  #banner .slick-slide a{display: block;}
  #banner .slick-slide a:hover{opacity: 0.8}
  #banner .slider.one li{width: 500px;margin: 0 auto;}
  /* news */
  #news{ padding: 80px 0 120px;}
  #news .inner{ width:800px;margin: 0 auto;}
  .news .inner{
    width:800px;
    margin: -60px auto 0;
    background: #fff;
    padding: 40px;

  }
  .newsList { margin-bottom: 40px;}
  .newsList li:first-child a{ border-top: 1px dotted #ddd;}
  .newsList li a{ position: relative;display: block;padding: 30px 15px;border-bottom: 1px dotted #ddd;}
  .newsList li a:hover{background:#f8f8f8;}
  .newsList li .date{
    position: relative;
    margin-bottom: 15px;
    /*color: #999999;*/
}
  .newsList li .new:after{
    content: 'New!';
    margin-left:10px;
  }
  .newsList li .tit{font-size: 16px}
  .category{
    display: inline-block;
    width:80px;
    margin-right: 15px;
    font-size: 11px;
    text-align: center;
    background: #eee;
    border-radius: 25px;
  }
  .categoryList { margin: 40px 0; text-align: center;}
  .categoryList li{display: inline-block;}
  .categoryList li a{
    display: block;
    width: 110px;
    margin: 0 5px 0;
    padding: 5px 0 3px;
    border: 1px solid;
    border-radius: 34px;
    font-size: 13px;
  }
  .categoryList li a:hover{ background-color: #eee; opacity: 1;}
  .categoryList li.current a{
    background-color: #000;
    color:#fff;
    border: 1px solid #000;
  }
  .articleTit{
    margin-bottom: 20px;
    font-size: 28px;
  }
  article .date{ color: #999;}
  article .date span{font-size: 11px}
  article .eventstart{margin:0 0 20px;}
  article .date .category{margin:0 10px 0 0;}
  article .text p{  margin-bottom: 20px}

  #news article{margin-bottom: 80px}
  .articleDate{margin-bottom: 40px}
  .shareBox a{display: block;width:30px;height:30px;line-height:30px;text-align: center;color:#999;font-size: 18px;border-radius: 25px;border:1px solid #ccc;}
  .shareBox .fa{vertical-align:-2px;}
  .shareBox .twitter a:hover{color: #55acee;}
  .shareBox .facebook a:hover{color: #315096;}
  .shareBox .twitter a:hover{background: #55acee;color: #fff;border:1px solid #55acee;}
  .shareBox .facebook a:hover{background: #315096;color: #fff;border:1px solid #315096;}


  /* about */
  #about .ph{
    position: relative;
    float: left;
    width: 50%;
    height: 500px;
    margin-top:-25px;
    left:1.5%;
    z-index: 2;
  }
  #about .introduction{
    position: relative;
    float: left;
    width: 50%;
    left:-1.5%;
    display: flex;
    display: webkit-flex;
    align-items: center;
    padding: 50px 3% 50px 6%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }

  /* SNS */
  #sns .instagram{padding: 100px 0 0;}
  #sns{padding: 30px 0}
  #sns .other{width: 97%;margin: 0 auto;padding: 80px 0;background: #f5f5f5;}
  #sns .other .inner{ max-width: 1200px;margin: 0 auto; }
  #sns .other .box{ width: 80%;margin: 0 auto;padding: 20px;}

  /* disco */
  section#disco{padding: 80px 0 120px;}
  #disco .inner{
    width: 960px;
    margin: 0 auto;
  }
  #discoList {letter-spacing: -0.5em;}
  #discoList li{
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 32%;
    margin:0 0.5% 5px;
    cursor: pointer;
  }
  #discoList li:after,
  #discoList li:before {
    background: #000;
    width: 200%;
    height: 200%;
    position: absolute;
    content: '';
    opacity: 0.5;
    -webkit-transition: all 0.55s ease-in-out;
    transition: all 0.55s ease-in-out;
    z-index: 1;
  }
  #discoList li:after {
    top: 0;
    left: 0;
    -webkit-transform: skew(-45deg) translateX(-150%);
    transform: skew(-45deg) translateX(-150%);
  }
  #discoList li:before {
    right: 0;
    bottom: 0;
    -webkit-transform: skew(-45deg) translateX(150%);
    transform: skew(-45deg) translateX(150%);
  }
  #discoList li:hover:after,
  #discoList li.hover:after {
    -webkit-transform: skew(-45deg) translateX(-50%);
    transform: skew(-45deg) translateX(-50%);
  }
  #discoList li:hover:before,
  #discoList li.hover:before {
    -webkit-transform: skew(-45deg) translateX(50%);
    transform: skew(-45deg) translateX(50%);
  }
  #discoList li a{
    display: block;
    z-index:2;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
  }
  #discoList .jacket{line-height: 0;border: 1px solid #ddd;}
  #discoList li .text{
    position: absolute;
    letter-spacing: 0.05em;
    right: 10px;
    left:10px;
    bottom: 10px;
    padding: 10px;
    z-index: 2;
    opacity: 0;
    color:#fff;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #discoList li:hover .text{  opacity:1;}
  #discoList .category{margin: 0 0 12px;background: #fff;color:#000;}
  #discoList .tit{margin-bottom: 5px;font-weight: bold;font-size: 20px;line-height: 1.4em}
  #discoList .date{font-size:13px;color:#fff;}
  #disco.detail .jacket{float:left;width: 40%;}
  #disco.detail .jacketList li{margin-bottom: 20px;}
  #disco.detail .jacket img{
    display: block;
    width: 100%;
  }
  #disco.detail .inner{ width: 880px;}
  #disco.detail .jacket div{margin-bottom: 20px}
  #disco.detail .jacket .text{margin-top: 10px;}
  #disco.detail .jacket .ph{border: 1px solid #ddd}
  #disco.detail .category{margin: 0 0 15px 0;}
  #disco.detail .details{float:right;width: 54%;}
  #disco.detail .tit{font-size: 32px;margin-bottom: 10px;}
  #disco.detail .date{margin-bottom: 30px;}
  #disco.detail .txt{margin-bottom: 20px}


  /* 404 */
  .error .inner{
    width: 1000px;
    margin: 80px auto;
  }
  .error .text{margin-bottom: 40px;text-align: center;}

/*  #countdown .sp { display: none;}*/

}


/* SP
=================================== */
@media screen and (max-width: 1000px){
  body { font-size: 14px; line-height:1.8;font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue','游ゴシック  Medium', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', meiryo, sans-serif;}
  .gNavi{display: none;}
  #home #header{background: transparent;}
  #home #header.on{background: #fff}
  #header {
    z-index:99;
    position: fixed;
    height:60px;
    background: #fff;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  #header #logo{
    position: absolute;
    left: 3%;
    top: 10px;
    width:70px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  #header .gNavi{
    z-index: 98;
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 70px 0 0;
    background: rgba(0,0,0,0.9);
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #header .gNavi li{font-size: 18px;}
  #header .gNavi span,
  #header .gNavi a{
    display: block;
    padding: 5px 0;
    color: #fff;
  }
  #header .gNavi span{opacity: 0.4}
  #header .gNavi .sns{
    width: 50px;
    margin-top: 10px;
    display: inline-block;
    font-size: 24px;
  }
  #header .gNavi .naviInner{height: 95%;padding:0 0 5%;overflow: scroll;-webkit-overflow-scrolling: touch;}
  #navBtn{
    z-index: 99;
  	position:absolute;
    right: 4%;
    top: 15px;
  	width:30px;
  	height:30px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  #navBtn span{
  	position:absolute;
  	display:block;
  	height:2px;
  	background:#fff;
  	width:100%;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
  }
  #navBtn.close{ -webkit-transform: rotate(180deg);transform: rotate(180deg);}
  #navBtn.close span{background:#fff;}
  #navBtn span.top{top:6px;}
  #navBtn span.middle{top:15px;}
  #navBtn span.bottom{top:24px;}
  #navBtn.close span.top{top:12px;transform: rotate(45deg);-webkit-transform: rotate(45deg);}
  #navBtn.close span.middle{opacity:0;}
  #navBtn.close span.bottom{
  	top:12px;
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
  }

  #footer .inner{ padding: 25px 4%;}
  #footer p.copyright{ padding: 15px 0;font-size: 12px}
  #footer .subNavi p,
  #footer .subNavi li{font-size: 12px}
  #footer .subNavi li.submenu{display: none;}
  #footer .subNavi{text-align: center;}
  #footer .subNavi p{color: #666;}
  #footer .subNavi p:after { margin: 5px auto 10px;}
  #footer .subNavi li { margin-bottom: 15px;}
  #footer .subNavi li li{
    position: relative;
    display: inline-block;
    margin: 5px 6px 0;
    background: #555;
    border-radius: 25px;
  }
  #footer .subNavi li li a{
    position: relative;
    z-index: 2;
    display: block;
    width: 28px;
    height:38px;
    padding: 5px 10px;
    text-indent:100%;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
  }
  #footer .subNavi li li:after{
    position: absolute;
    top:50%;
    left:50%;
    margin:-14px 0 0 -8px;
    font-family: 'FontAwesome';
    font-size: 16px;
  }
  #footer .subNavi .twitter:after{
    content:'\f099';
  }
  #footer .subNavi .instagram:after{
    content:'\f16d';
  }
  #footer .subNavi .yt:after{
    content:'\f16a';
  }
  #footer .subNavi .line:after{
    font-family: 'icomoon';
    content:'\e900';
  }
	#footer .sub_banner{ padding: 20px 5%}

  /* contents
  --------------------------------- */
  #contents{padding:60px 0 258px;}
  #home #contents{padding-top:0;}

  .sectionTit{margin-bottom: 20px;font-size: 28px;}
  .sectionTit:after{margin:10px auto 0;}

  .btn .more{width: 60%;padding: 10px 0;}

  section#banner{padding: 30px 0 10px;}
  #banner .slick-dots{margin-top: 10px}
  #banner .slick-slide img{width: 98%}
  #banner .slider.one li{width: 88%;margin: 0 auto 10px;}
  .news .inner,
  #news .inner{padding: 0 6%;}
  #news.detail .inner{padding: 0 6%;}
  #home #news .inner{padding: 20px 6% 0;}
  #about .ph{ height:300px; }
  #about .introduction{ padding: 50px 6%; }
  #about iframe{line-height: 0;}

  #sns .instagram{ padding:50px 0 0;}
  #sns .other{ background: #f5f5f5;}
  #sns .tw,#sns .fb{padding: 50px 0;}
  #sns .tw{/* padding-bottom: 0;*/}
  #sns .other .box{width: 92%; margin: 0 auto; padding: 20px; box-sizing: border-box;background: #fff;text-align: center;}
  #sns .other .box iframe{width: 280px!important;margin: 0 auto;}

  .newsList{margin-bottom: 30px;}
  .newsList li:first-child{border-top: 1px dotted #eee;}
  .newsList li{ margin-bottom:5px;border-bottom: 1px dotted #eee;}
  .newsList a{ display: block; padding: 15px 0;}
  .newsList li .new:after{
    content: 'New!';
    margin-left:8px;
  }
  .date{ margin-bottom: 8px; font-size:12px;}
  article .category,
  .newsList .category,
  #discoList .category span,
  #disco.detail .category span{
    display: inline-block;
    width:75px;
    padding: 1px 0;
    margin-right: 10px;
    font-size: 11px;
    text-align: center;
    background: #eee;
    border-radius: 25px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  #disco.detail .category {text-align: center;margin-bottom: 12px;}
  .categoryList {text-align: center;margin:25px 0 20px;}
  .categoryList li{display: inline-block; width: 28%; margin: 0 0.5% 10px;}
  .categoryList li a{
    display: block;
    width:100%;
    margin: 0 5px 0;
    padding: 2px 0;
    border: 1px solid;
    border-radius: 34px;
    font-size: 12px;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #disco   .categoryList li{width: 40%;}
  .categoryList li a:hover{ background-color: #eee; opacity: 1;}
  .categoryList li.current a{
    background-color: #000;
    color:#fff;
    border: 1px solid #000;
  }
  .articleTit{ margin-bottom:20px;font-size: 20px;}
  .articleTit h2{ padding: 0 4%;}
  #news  article{margin-bottom: 30px}
  article .date{color: #999;}
  article .articleDate{margin-bottom: 20px;}
  article .eventstart{margin-bottom:20px;}
  article .category{margin: 0 5px 0 0;}
  article .txt p{margin-bottom: 10px;}
  .shareBox a{display: block;text-align: center;color:#999;font-size: 18px;}



  #disco .inner{ padding: 0 6%;}
  #discoList li:first-child{border-top:1px dotted #eee;}
  #discoList li{position: relative;padding: 20px 0 12px;border-bottom: 1px dotted #eee;}
  #discoList li:after{content:""; display:block; clear:both;}
  #discoList li img{ width:25%;float:left;border:1px solid #eee;}
  #discoList li a{ position: absolute;top:0;left: 0;right: 0;bottom: 0;display: block;z-index:2;}
  #discoList li .category,
  #discoList li .date,
  #discoList li .tit{padding-left: 30%;}
  #discoList li .category,
  #discoList li .tit{ margin-bottom:5px;}
  #disco.detail .category span,
  #discoList li .category span{margin-left: 0}
  #disco.detail .inner{ padding: 0;}
  #disco.detail .details{padding: 20px 6%;}
  #disco.detail .tit{font-size: 18px;margin-bottom: 10px;text-align: center;}
  #disco.detail .date{text-align: center;margin-bottom: 30px}
  #disco.detail .jacketList .text{margin:5px 0 0;font-size:12px;text-align: center;color:#999;}
  #disco.detail .jacketList li{margin-right: 10px}
  #disco.detail .jacketList img{ width: 100%;}
  #disco.detail .jacket .one {padding: 0 6%}
  #disco.detail .jacket .ph img{border:1px solid #ddd;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

  /* 404 */
  .error .inner{
    padding: 20px 4% 60px;
  }
  .error .text{margin-bottom: 20px;}
/* 言語切り替えボタン
	=================================== */
	.langBar {
	    display: inline-block;
	    width: 100px;
	    height: 25px;
	    padding: 0 5px;
	    margin: 0;
	    border-radius: 30px;
		background-color: rgba(222, 105, 156, 0.161);
	    transition: all .3s ease;
	    -webkit-transition: all .3s ease;
	    margin: 0;
	}
	header .langBar { position: absolute; top: 20px; right: 20%;}
	.langSelector {
	    height: 100%;
	}
	.langBar select {
	    width: 100%;
	    padding-left: 25px;
	    font-size: 11px;
	    height: 25px;
		color: #ed6aa0;
		font-weight: bold;
	    -webkit-appearance: none;
	    -moz-appearance: none;
	    border: none;
	    background: transparent;
	    outline: none;
	    font-feature-settings: "palt";
	    letter-spacing: 0.08em;
	    position: relative;
	    bottom: 2px;
	}
	#header .langBar select { position: relative; bottom: 2px;}
	.langSelector:after {
	    position: absolute;
	    left: 8px;
	    top: 13px;
	    content: '\E894';
	    font-family: 'Material Icons';
		color: #ed6aa0;
	    font-size: 17px;
	    font-weight: normal;
	    line-height: 0;
	}
}
/* TABLET
=================================== */
@media screen and (min-width:768px) and (max-width: 1000px){
  #sns .other .box iframe{width: 620px!important;}
}