@charset "utf-8";

/* ------------------------------------- top.php */
.topMovie {
	background:url(/images/top/top-header.jpg) center top no-repeat, url(/images/header_pat2.png) center center;
	background-size:cover;
	padding: 20px 0 6px 0;
	position: relative;
}
.topMovie .inner {
	width: 1200px;
	height: 546px;
	margin: auto;
	position: relative;
	z-index: 100;
}
.topMovie::before {
  content:"";
  display:block;
  background-image: url(/images/kugiri_bg.png);
  background-repeat: repeat-x;
  background-position: top;
  height: 22px;
  position: absolute;
  top: -7px;
  width: 100%;
  z-index: 10;
}
.topMovie::after {
  content:"";
  display:block;
	/*background-image:url(/images/top/concept_bg.png);*/
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: auto;
	position: absolute;
	min-width: 1200px;
	max-width: 1600px;
  height: 572px;
  top: 0;
	left: 0;
	right: 0;
  z-index: 2;
}
.topMovie .inner::before {
  content:"";
  display:block;
  background-image: url(/images/kugiri_img.png);
  background-repeat: no-repeat;
  background-position: top center;
  height: 22px;
  position: absolute;
  top: -27px;
  width: 100%;
}

/*お知らせ欄*/
.alphaInfo,
.groupInfo,
.freeInfo {
	margin: 0 auto 40px;
  width: 968px;
	background-color: #FFF;
	border: 3px solid #8d390e;
	box-sizing: border-box;
}
.groupInfo {
	border-color: #b30026;
}
.freeInfo {
	border-color: #0576b4;
}
.alphaInfo h2,
.groupInfo h2,
.freeInfo h2 {
	position: relative;
	margin: 0 !important;
	padding: 5px 0;
	background-color: #FBF5EC;
	color: #f24618;
	font-size: 16px;
}
.groupInfo h2 {
	color: #b40536;
	background-color: #fff4f4;
}
.freeInfo h2 {
	color: #0576b4;
	background-color: #f1fcff;
}
.alphaInfo h2::before,
.groupInfo h2::before,
.freeInfo h2::before {
	font-family: 'FontAwesome';
	content: "\f0f3";
	margin-right: 5px;
}
.alphaInfo .infoText,
.groupInfo .infoText,
.freeInfo .infoText {
	text-align: left;
	padding: 10px 20px;
}


/*トピックス*/
.topTopics {
	background-image:url(/images/contents_pat1.png);
	background-position: center center;
	position: relative;
}
.topTopics > .inner {
	width: 1200px;
	margin: auto;
	position: relative;
	padding: 50px 0;
}
.topTopics h2 {
	margin-bottom: 30px;
}
.topTopics .topicsArticle {
	margin: 0 auto 15px;
	padding: 5px 5px 0 5px;
	width: 970px;
	height: 330px;
	background-image: url(/images/top/realtime_bg.png);
	background-repeat: no-repeat;
	box-sizing: border-box;
}
.topTopics .topicsArticle > .inner {
	position: relative;
	width: 960px;
	height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	padding: 15px;
}
.topTopics .topicsArticle li {
	position: relative;
	border-bottom: 1px solid #CCC;
	padding-bottom: 15px;
	margin-bottom: 15px;
}
.topTopics .topicsArticle li img {
	max-width: 100%;
	height: auto;
}
.topTopics .topicsArticle li .topicsHeader {
	position: relative;
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  text-align: left;
  padding: 15px;
  box-sizing: border-box;
}
.topTopics .topicsArticle li .topicsHeader h3 {
	float: left;
}
.topTopics .topicsArticle li .topicsHeader p {
  float: right;
  font-size: 12px;
}

.topTopics .topicsItem {
	margin-bottom: 20px;
	padding-bottom: 5px;
	border-bottom:1px dashed #666;
}
.topTopics .topicsItem img {
	max-width: 100%;
	height: auto;
}
.topTopics .topicsItem .topicsDate {
	padding: 5px;
	font-size: 12px;
	text-align: right;
	background-color: #ddd4be;
}



body.top .contentsWrap {
	margin: auto;
	padding: 60px 10px;
}
body.top .contentsWrap img {
	max-width: 100%;
}
.topTaiki,
.topShame,
.topNewface {
	border: 1px solid #dbd7d4;
	padding: 20px 0;
	margin: 0 10px;
	float: left;
/*	width: 370px;*/
	width: 555px;
	height: 450px;
	box-sizing: border-box;
}
.topTaiki h2,
.topShame h2,
.topNewface h2 {
	margin: 0 auto 15px;
	width: 340px;
}
.topTaiki {
	margin-left: 0 !important;
}
.topShame {

}
.topNewface {
  margin-right: 0 !important;
}
.topNewface .newfaceInner {
	margin: auto;
	box-sizing: border-box;
	width: 320px;
	height: 326px;
	background-color: #FFF;
	padding: 10px;
	overflow-y: auto;
}

.topRanking {
	background-image:url(/images/contents_pat1.png);
	background-position: center center;
	position: relative;
	padding: 60px 0;
}
.topRanking h2 {
	margin-bottom: 20px;
}
.topRanking .rankingList {
	width: 1150px;
	margin: auto;
}
.topRanking .rankingList li {
	float: left;
	width: 210px;
	padding: 8px 5px 5px 5px;
	margin: 0 10px;
	position: relative;
	box-sizing: border-box;
	background-color: #514338;
}
.topRanking .rankingList li a {
	text-decoration: none;
}
.topRanking .rankingList li .rankigHeader {
	margin: 0 auto 8px;
}
.topRanking .rankingList li .girlInfo {
	float: right;
	width: 150px;
	text-align: left;
}
.topRanking .rankingList li .girlInfo .girlName {
	font-size: 16px;
	color: #FF970A;
}
.topRanking .rankingList li .girlInfo .girlAge,
.topRanking .rankingList li .girlInfo .girlStyle {
	font-size: 10px;
	color: #FFF;
	line-height: 1
}
.topRanking .rankingList li .rankIcon {
	float: left;
	width: 39px;
	padding-top: 3px;
}
.topRanking .rankingList li .girlImg img {
	width: 200px;
}


/* --------Additional notes　20180422nomura------ top.php */
.box30 {
    margin: 2em 0;
	/* background-image:url(/images/contents_pat1.png)*/
    /* background: #f1f1f1; */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
    font-size: 1.2em;
    background: #ffcc66;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
}
/*--------------------------------------------------------------▼めくれたテープ風*/
.box25{
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
}
.box25:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25 p {
    margin: 0; 
    padding: 0;
}
/*--------------------------------------------------------------▲めくれたテープ風*/

/*--------------------------------------------------------------▼めくれたテープ風_red*/
.box25_red{
    position: relative;
    background: #ffdddd;
    box-shadow: 0px 0px 0px 5px #ffc0cb;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #FF0000;
}
.box25_red:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.box25_red p {
    margin: 0; 
    padding: 0;
	font-size:16px;
}
.box25_red a{
  text-decoration: none;
}
.box25_red a:hover{
  text-decoration: underline;
}
/*--------------------------------------------------------------▲めくれたテープ風_red*/
/*ここから--お知らせ折りたたみ 220916追加*/
.infoText summary,
.topicsTxt summary {
  padding: .8rem 1.5rem;
  outline: 0;
  cursor: pointer;
  display: block;
  color: #c30d23;
  font-weight: 700;
  font-size: 16.5px;
  &:hover {
    background: #eee;
    transition: all linear 0.2s;
  }
  list-style: none;
  &::-webkit-details-marker {
    display: none;
  }
}

.infoText details,
.topicsTxt details {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size: 10px;
  display: block;
}

.infoText details p,
.topicsTxt details p {
  font-size: medium;
}


.infoText details summary::before,
.topicsTxt details summary::before {
  content: none !important;
}
.infoText details summary::after,
.topicsTxt details summary::after {
  content: "＋";
  color: #aaa;
  font-weight: 400;
  float: right;
  width: 1rem;
  text-align:center;
}
.infoText details[open] summary::after,
.topicsTxt details[open] summary::after {
  content: "−";
  margin-top: -0.1rem;
}

.infoText details[open] div,
.topicsTxt details[open] div {
  animation: accordion 0.4s linear;
  overflow: hidden;
  border-bottom: 2px solid #eee;
  font-size: 1rem;
  padding: 1rem;
}

.infoText @keyframes accordion,
.topicsTxt @keyframes accordion {
  0% {
    opacity: 0;
    height: 0;
  }
  70% {
    opacity: 0;
    //height: auto; //コレだとカクカクする
    height: 200px;
  }
  100% {
    opacity: 1;
  }
}

/*ここまで--お知らせ折りたたみ 220916追加*/