@charset "UTF-8";

@media ( min-width :769px) {
	.page-top .info .info-list .item .body {
		display: block !important;
	}
}

@media ( max-width :768px) {
	html, body, #wrapper, #header, #nav, #main, #footer {
		width: 100%;
		max-width: 100%;
		min-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
	body {
		font-size: 24px;
		background-image: url("../img/base/sp/background.png?20210416121949200");
		background-size: contain;
	}
	.container {
		width: 100%;
	}
	#header {
		padding-top: 100px;
	}
	#header .page-top .header-bg {
		background: url("../img/top/sp/header_bg.jpg?20210416121949200") center top no-repeat;
		height: 780px;
	}
	#header .page-top .header-bg .container {
		padding-top: 575px;
	}
	#header .page-other h1.title {
		top: -80px;
		padding: 10px;
		font-size: 1em;
	}
	#header .page-other .inner {
		background: url("../img/base/sp/header_bg.jpg?20210416121949200") center top no-repeat;
		height: 345px;
	}
	#header .fix-header {
		min-width: 320px;
		display: block !important;
		height: 100px;
	}
	#header .fix-header .button-menu {
		position: absolute;
		top: 12px;
		right: 15px;
		background: url("../img/base/sp/icon_menu2.png") center top/100% no-repeat;
	}
	#header .fix-header .button-menu img {

	}
	#header .fix-header .nav {
		width: 0;
		overflow: hidden;
		height: 100%;
		background: rgba(255, 255, 255, 0.9);
		transition: width 0.3s;
		position: fixed;
		top: 100px;
		right: 0;
		box-shadow: -9px 0px 3px -8px rgba(0, 0, 0, 0.3);
	}
	#header .fix-header .nav .inner {
		width: 770px;
		padding: 100px 30px 30px;
		overflow-y: auto;
		height: calc(100% - 100px);
	}
	#header .fix-header .nav .inner .nav-list {
		border: 0.5px solid black;
	}
	#header .fix-header .nav .inner .nav-list .item {
		border: 0.5px solid black;
		width: 50%;
		background: white;
		padding: 0;
	}
	#header .fix-header .nav .inner .button-close {
		padding: 15px;
		font-size: 2em;
		display: block;
		text-align: center;
		color: #fff;
		background: #555555;
		font-weight: bold;
	}
	#header .fix-header #trigger_menu:checked ~ .nav {
		width: 100%;
		transition: width 0.5s;
	}
	#main .page .page-title {
		padding-left: 15px;
		top: 35px;
	}
	#main .page .cast-nav {
		display: none;
	}

	/* b */
	.breadcrumb {
		position: absolute;
		left: 0;
		top: 200px;
		padding: 0 10px;
	}
	.breadcrumb ul {
		padding: 15px 0;
		white-space: nowrap;
		overflow-x: auto;
	}

	/* cast-list */
	.cast-list .cast {
		width: calc(100%/ 3 - 0.4%);
		margin: 0 0.2% 30px;
	}
	.cast-list .cast .profile {
		background: rgba(255, 239, 245, 0.6);
		width: 100%;
		position: static;
		padding: 15px 10px;
	}
	.cast-list .cast .profile .size {
		font-size: 0.9em;
	}
	.cast-list .cast .icon-course {
		width: 100%;
	}
	.cast-list .cast .icon-new {
		bottom: auto;
		top: 280px;
	}
	.cast-list .cast .profile .date, .cast-list .cast .profile .time {
		font-size: 1.1em;
	}
	.form-list th {
		display: block !important;
		width: 100% !important;
		background: #e3e3e3e3;
	}
	.form-list th.empty {
		display: none !important;
	}
	.form-list td {
		display: block !important;
		width: 100% !important;
		background: rgba(255, 255, 255, 0.8);
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.page-top h1.title {
		font-size: 1em;
		text-align: left;
	}
	.page-top .top1 {
		display: block;
	}
	.page-top .top1 .covid19 {
		text-align: center;
	}
	.page-top .info {
		width: 100%;
		flex-shrink: 0;
		margin-left: 0;
		margin-top: 50px;
	}
	.page-top .info .info-list {
		overflow: visible;
		height: auto;
	}
	.page-top .info .info-list .item .head {
		padding-right: 100px;
		position: relative;
		min-height: 100px;
	}
	.page-top .info .info-list .item .head .button {
		position: absolute;
		right: 10px;
		top: 0;
		bottom: 0;
		margin: auto 0;
		width: 80px;
		height: 80px;
	}
	.page-top .info .info-list .item .head .button .open {
		display: none;
	}
	.page-top .info .info-list .item .head.close .button .open {
		display: block;
	}
	.page-top .info .info-list .item .head.close .button .close {
		display: none;
	}
	.page-top .widget-list .item {
		width: 100%;
	}
	.page-top .widget-list .item:nth-child(n+2) {
		margin-top: 50px;
	}
	.page-top .widget-list .item .widget-wrap iframe {
		/* height: 350px; */

	}
	.page-top .newface .cast-list .cast:nth-child(n+4) {
		display: none;
	}
	.page-top .schedule .trigger.schedule+.cast-list .cast:nth-child(n+10) {
		display: none;
	}

	/* schedule */
	.page-schedule .date-list .item:nth-child(n+5) {
		display: none;
	}
	.page-schedule .date-list .item {
		width: calc(100%/ 4 - 1%);
		margin: 0 0.5%;
		height: auto;
	}
	.page-schedule .date-list .item a {
		padding: 15px;
	}
	/* newface */
	.page-newface .newface-list .cast {
		width: 100%;
		padding-bottom: 70px;;
	}
	.page-newface .newface-list .cast .profile {
		padding: 20px 30px;
		background: rgba(255, 255, 255, 0.8);
	}
	.page-newface .newface-list .cast .profile .age {
		font-size: 1em;
	}
	.page-newface .newface-list .cast .owner-comment {
		font-size: 0.9em;
		width: 510px;
		height: 250px;
		top: 150px;
	}
	.page-system .basic .course-other-list .item {

	}
	.page-system .basic .course-other-list .item .value {
		padding-right: 35px;
		font-size: 1.5em;
		text-align: right;
		line-height: 1.8;
	}
	.page-system .basic .course-other-list .item .value:last-lette {
		font-size: 1.2em;
	}
	.page-system .option .option-list {

	}
	.page-system .option .option-list .item {
		width: 40%;
		margin: 0 5% 15px;
	}
	.page-system .area .content {
		display: block;
	}
	.page-system .area-list {
		width: 100%;
	}
	.page-system .area-list .item.price {
		display: block;
		width: 100%;
		text-align: left;
		padding: 15px;
		background: #e3e3e3e3;
	}
	.page-system .area-list .item.label {
		display: block;
		width: 100%;
		padding: 15px;
	}
	.page-system .area .map {
		margin: 30px 0 0;
		width: 100%;
		text-align: center;
	}
	.page-concept .conditions-bg {
		width: 100%;
		height: auto;
	}
	.page-concept .conditions-bg .left-text, .page-concept .conditions-bg .right-text {
		height: auto;
		position: relative;
		margin-top: -200px;
		z-index: 1;
		width: 90%;
	}
	.page-concept .conditions-bg .right-text {
		margin-left: 11%;
	}
	.page-cast .cast-list-form>.inner>.flex {
		height: 60px;
	}
	.page-guide .guide-list .item .container {
		width: 100%;
		height: auto;
		padding-left: 15px;
		padding-right: 15px;
		padding-left: 15px;
		display: flex;
		flex-direction: column;
	}
	.page-guide .guide-list .item .title {
		position: relative;
		order: 1;
		margin-top: -190px;
	}
	.page-guide .guide-list .item .text {
		position: relative;
		top: 0;
		order: 1;
		margin-top: 30px;
		width: 95%;
	}

	/* recruit */
	.page-recruit .recruit-bg {
		background: url("../img/recruit/sp/recruit_bg.png") center bottom/100% no-repeat;
		height: auto;
		padding-bottom: 671px;
	}
	.page-recruit .recruit-bg .title {
		display: block;
	}
	.page-recruit .recruitment-list .item.label {
		width: 100%;
		display: block;
	}
	.page-recruit .recruitment-list .item.value {
		width: 100%;
		display: block;
	}
	.page-recruit .recruitment-list .item.label .title {
		padding: 15px 15px;
		border-left: 4px solid #8e720f;
		font-size: 2em;
	}
	.page-recruit .recruitment-list .item.value {
		margin-top: 15px;
		margin-bottom: 50px;
	}
	.page-recruit .recruitment-list tr:last-child .item.value {
		margin-bottom: 0;
	}
	.page-recruit .recruit-form .text1 {
		text-align: left;
	}
	.form-list .detail input[type="text"], .form-list input[type="email"], .form-list select {
		min-height: 60px !important;
	}
	/* ranking */
	.page-ranking .ranking-list {
		width: 100%;
	}
	.page-ranking .ranking-list .cast .flex {
		flex-wrap: wrap;
		justify-content: center;
	}
	.page-ranking .ranking-list .cast .title {
		width: 100%;
	}
	.page-ranking .ranking-list .cast .photo {
		background: url(../img/ranking/ranking1_girl_bg.png) center top/100% no-repeat;
		padding: 9% 9%;
		position: relative;
		height: auto;
		width: 680px;
		margin-top: -50px;
	}
	.page-ranking .ranking-list .cast .photo .inner {
		padding-top: 150%;
	}
	.page-ranking .ranking-list .cast .photo .inner a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.page-ranking .ranking-list .cast .photo .inner a img {
		height: auto;
		width: 100%;
	}
	.page-ranking .ranking-list .cast .profile {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0 30px;
		text-align: center;
	}
	.page-ranking .ranking-list .cast .profile .name-group {
		padding: 30px;
		background: rgba(255, 255, 255, 0.9);
		margin-top: -100px;
		width: 90%;
		text-align: left;
	}
	.page-ranking .ranking-list .cast .profile .owner-comment {
		position: relative;
		top: 0;
		width: 100%;
		height: 350px;
		left: 0;
		height: 350px;
		text-align: left;
	}
	.page-ranking .ranking-list .cast .profile .button {
		position: static;
		display: inline-block;
		margin-top: 30px;
	}
	.page-ranking .other-ranking-list .cast {
		width: 100%;
		margin-bottom: 50px;;
	}
	.page-ranking .other-ranking-list .cast .flex {
		justify-content: flex-start;
	}
	.page-ranking .other-ranking-list .cast.no2 .photo, .page-ranking .other-ranking-list .cast.no3 .photo {
		width: 50%;
		height: auto;
		padding: 5%;
	}
	.page-ranking .other-ranking-list .cast .photo .inner {
		height: auto;
		padding-top: 150%;
		position: relative;
	}
	.page-ranking .other-ranking-list .cast .photo .inner a {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.page-ranking .other-ranking-list .cast .profile {
		width: 55%;
		height: auto;
		padding: 30px;
		background: rgb(255 239 244/ 80%);
		position: absolute;
		right: 30px;
	}
	.page-ranking .other-ranking-list .cast .profile .title {
		position: static;
	}
	.page-ranking .other-ranking-list .cast .profile .button {
		position: absolute;
		left: 155px;
		top: 310px;
	}
	.page-ranking .other-ranking-list .cast.no4 .photo, .page-ranking .other-ranking-list .cast.no5 .photo {
		width: 50%;
		height: auto;
		padding: 5%;
		margin: 0;
	}
	.page-ranking .other-ranking-list .cast .profile .button {
		position: static;
		margin-top: 30px;
		display: block;
	}
	.page-ranking .other-ranking-list {
		margin-bottom: 0;
	}
	/* info */
	.page-info .info-list {
		width: 100%;
	}
	.page-info .info-list .item {
		padding: 15px;
	}
	.page-info .info-list .item .body {
		padding: 15px 0 0;
	}
	/* profile */
	.page-profile .cast {
		width: 100%;
	}
	.page-profile .cast .photo {
		width: 100%;
		height: auto;
		padding-left: 10%;
		padding-right: 10%;
	}
	.page-profile .cast .photo .slick-dots {
		display: flex !important;
		flex-wrap: wrap;
		width: 100%;
		z-index: 1;
		position: relative;
		top: 0;
		left: 0;
		margin-top: -50px;
		margin-left: 10%;
		padding: 30px 30px 100px;
	}
	.page-profile .cast .profile {
		position: static;
	}
	.page-profile .cast .photo .slick-dots li {
		width: 31%;
	}
	.page-profile .cast .profile {
		position: relative;
		margin-top: -100px;
		top: 0;
		left: 70px;
		z-index: 1;
		width: 80%;
	}
	.page-profile .qa .qa-list .item {
		width: 100%;
	}
	.page-profile .date-list .item {
		width: 100%;
		margin: 0 0 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 15%;
	}
	.page-profile .date-list .item .month {
		font-size: 1.4em;
	}
	.page-profile .date-list .item .date {
		font-size: 1.4em;
	}
	.page-profile .date-list .item .time {
		font-size: 1.4em;
	}
	.page-contact .message {
		text-align: left;
		font-size: 1.0em;
	}
	.page-recruit .message {
		text-align: left;
		font-size: 1.0em;
	}
	.page-enquete .message {
		font-size: 1.0em;
		text-align: left;
	}
}