@charset "UTF-8";

/*======*/
div.today {
	padding: 50px 0px;
	background: url(../img_new/index/bg_today.webp) repeat;
	background-size: 57px 57px;
	background-position: top center;
}

div.today_in {
	padding-top: 20px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: flex-start;
}

/*======*/
.today .girl {
	width: 14%;
	height: auto;
	margin: 0px 1% 15px 1%;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	position: relative;
	padding: 10px 0px;
	background: #ffffff;
	box-shadow: 0 0 5px rgba(68, 34, 34, 0.2);
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
}

.today .girl div.img {
	width: calc(100% - 20px);
	height: auto;
	position: relative;
}

.today .girl div.img .realtime {
	width: 100%;
	height: auto;
	position: absolute;
	top: -10px;
	left: 0px;
}

.today .girl div.img .realtime span {
	display: inline-block;
	width: 90%;
	height: auto;
	background: #b49f69;
	line-height: 26px;
	color: #ffffff;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	position: relative;
}

.today .girl div.img .realtime span:after {
	content: "";
	position: absolute;
	bottom: -6px;
	right: calc(50% - 3px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 6px 0 6px;
	border-color: #b49f69 transparent transparent transparent;
}

.today .girl p.img {
	width: 100%;
	height: auto;
	margin: 0px auto;
	position: relative;
}

.today .girl p.img a {
	display: block;
}

.today .girl .new {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0px auto;
	padding: 0px;
	position: absolute;
	top: 7px;
	left: 7px;
}

.today .girl .x {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0px auto;
	padding: 0px;
	position: absolute;
	bottom: 7px;
	right: 7px;
}

.today .girl .name {
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 3px 0px 5px 0px;
}

.today .girl .name h3 {
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 2px 0px 0px 0px;
}

.today .girl .name p.size {
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 1px 0px 1px 0px;
}

.today .girl .name h3 span,
.today .girl .name p.size span {
	font-size: 10px;
	color: #ff871c;
}

.today .girl .today {
	width: 100%;
	height: auto;
	background: #ffffff;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	align-items: center;
	border: 1px solid #ffa9b0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.today .girl .today dt {
	width: 15%;
	height: 100%;
	background: #ffa9b0;
	padding: 6px 0px;
	position: relative;
}

.today .girl .today dt:after {
	content: " ";
	display: inline-block;
	position: absolute;
	top: calc(50% - 5.5px);
	right: -5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5.5px 0 5.5px 5px;
	border-color: transparent transparent transparent #ffa9b0;
}

.today .girl .today dt img {
	width: 18px;
	height: 16px;
}

.today .girl .today dd {
	width: 85%;
	height: auto;
	color: #61522c;
	line-height: 200%;
}

@media all and (min-width: 1025px) {}

@media all and (max-width: 1024px) {
	.today .box_in {
		width: 100%;
	}

	.today .girl {
		width: 31.5%;
		margin: 0px 0.5% 10px 0.5%;
	}

	.today .girl .today dt {
		width: 18%;
	}

	.today .girl .today dd {
		width: 82%;
	}
}

@media all and (max-width: 776px) {}

@media all and (max-width: 667px) {
	.today .girl {
		width: 47%;
		margin: 0px 1% 10px 1%;
	}
}

@media all and (max-width: 480px) {
	.today .girl p.size {
		font-size: 11px;
	}
}

@media all and (max-width: 320px) {}

/*======*/
div.newface {
	width: 100%;
	margin: 0px auto;
	padding: 50px 0px;
	background: url(../img_new/index/bg_newface.webp) repeat;
	background-size: 104px 155px;
	background-position: top center;
}

div.newface_in {
	padding-top: 15px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: flex-start;
}

div.newface h2.h2 span.en {
	background: url(../img_new/common/wing_b_l.png), url(../img_new/common/wing_b_r.png);
	background-repeat: no-repeat, no-repeat;
	background-size: 61px 15px;
	background-position: 0% 50%, 100% 50%;
}

@media all and (max-width: 1024px) {
	div.newface h2.h2 span.en {
		padding: 0px 55px 1px 55px;
		background: url(../img_new/common/wing_l.png), url(../img_new/common/wing_r.png);
		background-repeat: no-repeat, no-repeat;
		background-size: 48px 12px, 48px 12px;
		background-position: 0% 50%, 100% 50%;
	}

	div.newface h2.h2:before {
		font-size: 50px;
		position: absolute;
		top: 8px;
		left: 0px;
	}
}

/*======*/
.newface .girl {
	width: 14%;
	height: auto;
	margin: 0px 1% 15px 1%;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	position: relative;
	padding: 10px 0px;
	background: #ffffff;
	box-shadow: 0 0 5px rgba(68, 34, 34, 0.2);
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
}

.newface .girl div.img {
	width: calc(100% - 20px);
	height: auto;
	position: relative;
}

.newface .girl p.img {
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding-top: 9px;
}

.newface .girl p.img a {
	display: block;
}

.newface .girl .name {
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 3px 0px 3px 0px;
}

.newface .girl .name h3 {
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 2px 0px 0px 0px;
}

.newface .girl .name p.size {
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 1px 0px 1px 0px;
}

.newface .girl .name h3 span,
.newface .girl .name p.size span {
	font-size: 10px;
	color: #ff871c;
}

.newface .girl dl {
	width: 100%;
	height: auto;
}

.newface .girl dd {
	width: 100%;
	height: auto;
	line-height: 200%;
	border: 1px solid #e7d9c7;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	color: #442222;
}

.newface .girl p.comment {
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 5px 0px 0px 0px;
	text-align: left;
	font-size: 11px;
	line-height: 17px;
	border-top: 1px solid #e7d9c7;
}

@media all and (min-width: 1025px) {}

@media all and (max-width: 1024px) {
	.today .box_in {
		width: 100%;
	}

	.newface .girl {
		width: 31.5%;
		margin: 0px 0.5% 10px 0.5%;
	}

	.newface .girl .today {
		padding: 4px 0px 6px 0px;
	}

	.newface .girl dd {
		width: 100%;
	}
}

@media all and (max-width: 776px) {}

@media all and (max-width: 667px) {
	.newface .girl {
		width: 47%;
		margin: 0px 1% 10px 1%;
	}
}

@media all and (max-width: 480px) {
	.newface .girl p.size {
		font-size: 11px;
	}
}

@media all and (max-width: 320px) {}


/*======*/
.news {
	padding: 50px 0px;
	width: 100%;
	min-height: 100px;
}

.news_in {
	width: 100%;
	margin: 0px auto;
	padding-top: 20px;
}

.news_in ul {
	width: 100%;
	max-width: 1200px;
	margin: 0px auto;
	padding: 0px;
	display: -ms-flexbox;
	
	-ms-flex-pack: center;
	
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	
	background: rgba(157, 138, 91, 0.1);
	height: 300px;
	overflow-y: scroll;
}

.news_in ul li {
	width: 100%;
	/* height: 200px; */
	margin: 0px auto;
	padding: 10px 0px;
	
}

.news_in ul li div p{
	font-size: 16px;
}
.news_in ul li div {
	width: calc(100% - 30px);
	height: auto;
	margin: 0px auto;
	padding: 10px 0px 10px 0px;
	position: relative;
	font-size: 25px;
	--x-gradient: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 8px, transparent 0 calc(100% - 8px), rgba(255, 255, 255, 0.1) calc(100% - 8px));
	--y-gradient: linear-gradient(rgba(255, 255, 255, 0.1) 0 8px, transparent 0 calc(100% - 8px), rgba(255, 255, 255, 0.1) calc(100% - 8px));
	background-image: var(--x-gradient), var(--y-gradient), var(--x-gradient), var(--y-gradient);
	background-repeat: no-repeat;
	background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
	background-position: top, right, bottom, left;
}

.news_in ul li p.date {
	width: 100%;
	margin: 0px auto;
	padding: 0px;
	color: #ff871c;
	font-size: 20px;
	line-height: 20px;
}

.news_in ul li h3 {
	width: 100%;
	margin: 10px auto;
	padding: 0px;
	color: #ff871c;
	font-size: 20px;
}

.news_in ul li p.txt {
	width: 100%;
	margin: 0px auto;
	padding-top: 3px;
}

@media all and (min-width: 1025px) {
	.news_in ul li {
	}

	.news_in ul li:nth-of-type(2) {
		/* margin: 0px 2%; */
	}
}

@media all and (max-width: 1024px) {
	.news_in ul {
		width: 95%;
	}

	.news_in ul li:nth-of-type(2) {
		margin: 10px auto;
	}
}

/*======*/
div.event {
	padding: 50px 0px;
	background: url(../img_new/index/bg_event.webp) repeat;
	background-size: 46px 116px;
	background-position: top center;
}

div.event_in {
	max-width: 1200px;
	padding-top: 20px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: flex-start;
}

@media all and (max-width: 1024px) {
	div.event_in {
		width: 95%;
	}
}


/*======*/
div.access {
	padding: 50px 0px;
}

.map {
	max-width: 1200px;
	width: 100%;
	height: auto;
}

.map_in {
	width: calc(100% - 20px);
	height: auto;
}

@media all and (min-width: 1025px) {
	div.access_in {
		padding-top: 20px;
	}
}

@media all and (max-width: 1024px) {}


p.more {
	width: 100%;
	padding-top: 10px;
	text-align: right;
}

/*===p.more a===*/
.btnchangeline {
	width: 130px;
	position: relative;
	color: #1b1d38;
	padding: 3px 0px;
	display: inline-block;
	text-decoration: none;
	outline: none;
	transition: all 0.3s ease-in-out;
	font-size: 12px;
	line-height: 190%;
	letter-spacing: 0.5px;
	text-align: center;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

.btnchangeline::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #1b1d38;
	transition: all 0.3s;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

.btnchangeline span {
	position: relative;
	z-index: 2;
	color: #fff;
	transition: all 0.3s;
	background: url(../img_new/common/ya_hover.png) no-repeat;
	background-size: 11px 11px;
	background-position: 100% 47%;
	display: inline-block;
	padding-right: 19px;
}

.btnchangeline:hover span {
	color: #1b1d38;
	background: url(../img_new/common/ya.png) no-repeat;
	background-size: 11px 11px;
	background-position: 100% 47%;
	display: inline-block;
	padding-right: 19px;
}

@media all and (min-width: 1025px) {
	.btnchangeline::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		border-top: 1px solid #1b1d38;
		border-bottom: 1px solid #1b1d38;
		opacity: 0;
		transform: scale(0, 1);
		transition: all 0.3s;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}

	.btnchangeline:hover::before {
		opacity: 1;
		transform: scale(1, 1);
	}

	.btnchangeline:hover::after {
		opacity: 0;
		transform: scale(0, 1);
	}
}


/*======*/
.scrolldown {
	position: absolute;
	bottom: 40px;
	left: 50%;
}

.scrolldown span {
	position: absolute;
	left: 10px;
	bottom: 10px;
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

.scrolldown:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #eee;
	animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
}

@keyframes circlemove {
	0% {
		bottom: 45px;
	}

	100% {
		bottom: -5px;
	}
}

@keyframes cirlemovehide {
	0% {
		opacity: 0
	}

	50% {
		opacity: 1;
	}

	80% {
		opacity: 0.9;
	}

	100% {
		opacity: 0;
	}
}

.scrolldown:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 50px;
	background: #eee;
}

@media all and (max-width:1180px) {
	.scrolldown {
		position: absolute;
		bottom: 30px;
		left: 50%;
	}
}




.access_info {
	width: 100%;
	margin: 0px auto;
	padding-bottom: 12px;
	font-size: 13px;
}

@media all and (max-width: 1024px) {
	.access_info {
		font-size: 12px;
	}
}

/*======*/
ul.tabs {
	max-width: 1200px;
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 0px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

ul.tabs li {
	width: 25%;
	height: auto;
	margin: 0px auto;
	padding: 0px;
	display: inline-block;
	cursor: pointer;
	background: #c1e5ff;
}

ul.tabs li a {
	text-align: center;
	width: 100%;
}

ul.tabs li a {
	height: auto;
	margin: 0px auto;
	padding: 0px;
	display: inline-block;
	line-height: 310%;
}

ul.tabs li.active a {
	height: auto;
	margin: 0px auto;
	padding: 0px;
	display: inline-block;
	background: #93d3ff;
}

ul.tabs li.active {
	background: #93d3ff;
}

ul.tabs li a .ja {
	letter-spacing: 1px;
	vertical-align: 1px;
	margin: 0px auto;
	display: inline-block;
	color: #1b1d38;
}

ul.tabs li.active a .ja {
	letter-spacing: 1px;
	vertical-align: 1px;
	color: #1b1d38;
	margin: 0px auto;
	display: inline-block;
}

ul.tabs li span {}

ul.tabs li.active span {}

@media all and (max-width: 1024px) {
	ul.tabs {
		width: 95%;
	}

	ul.tabs li.active a .ja {
		font-size: 11px;
		letter-spacing: 0px;
	}

	ul.tabs li a .ja {
		font-size: 11px;
		letter-spacing: 0px;
	}
}

/*======*/
.tab_content {
	max-width: 1200px;
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 10px 0px;
	background: #ffa9b0;
}

.access_map {
	width: 98%;
	height: auto;
	margin: 0px auto;
	padding: 0px;
}

@media all and (min-width: 1025px) {}

@media all and (max-width: 1024px) {
	.tab_content {
		width: 95%;
	}

	.access_map {
		width: 95%;
	}
}

@media all and (max-width: 667px) {}

@media all and (max-width: 480px) {}

@media all and (max-width: 320px) {}

/*======*/
@media all and (min-width: 1025px) {
	a.link:link {
		color: #ca0775;
		text-decoration: none;
	}

	a.link:visited {
		color: #ca0775;
		text-decoration: none;
	}

	a.link:hover {
		color: #2e0aa3;
		text-decoration: underline;
	}

	a.link:active {
		color: #ca0775;
		text-decoration: none;
	}
}

@media all and (max-width: 1024px) {
	a {
		color: #ca0775;
		text-decoration: none;
	}
}


/*======*/
div.card {
	width: 100%;
	margin: 0px auto;
	padding: 70px 0px 0px 0px;
}

div.card p {
	max-width: 400px;
	width: 95%;
	margin: 0px auto;
	padding: 0px;
}

/*======*/
ul.mens_mg {
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding-bottom: 20px;
}

ul.mens_mg li {
	width: auto;
	height: auto;
	margin: 0px auto;
	padding: 0px;
	display: inline-block;
}

@media all and (min-width: 1025px) {
	ul.mens_mg li {
		width: auto;
	}
}

@media all and (max-width: 1024px) {
	ul.mens_mg li {
		width: 100%;
	}

	ul.mens_mg li img {
		width: 234px;
	}
}