@charset "utf-8";
/*
 * Front-page.php で追加されるstylesheet
*/

@charset "utf-8";
/*ここは全体用環境の設定*/
/*=====================================
  メインコンテンツ設定
======================================*/
/*メインコンテンツ */
#front_main {
	float: right;											/*右側に回り込み*/
	width: 74%; 										/*メインコンテンツ幅(古いブラウザ用)*/
	width : -webkit-calc(100% - 240px);		/*メインコンテンツ幅(先行実装ブラウザ用)*/
	width: calc(100% - 240px);					/*メインコンテンツ幅(100%-220px-20px)*/
	padding-bottom: 30px;						/*下パディング*/
}

/*front_mainコンテンツのh2タグの設定*/
#front_main h2 {
	border-radius: 10px;								/*角丸のサイズ*/
	background-color: #9a38c2;					/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-gradient(linear, left top, left bottom, from(#9a38c2), to(#680690));	/*グラデーション*/
	background: -webkit-linear-gradient(#9a38c2, #680690);		/*同上*/
	background: linear-gradient(#9a38c2, #680690);				/*同上*/
	font-size: 100%;
	color: #FFF;											/*文字色*/
	padding: 8px 15px;									/*上下、左右への余白*/
	clear: both;
}

/*front_mainコンテンツのh3タグの設定*/
#front_main h3 {
	border-radius: 10px;								/*角丸のサイズ*/
	background-color: #222;							/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#666), to(#222));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#666, #222);		/*同上*/
	background-image: linear-gradient(#666, #222);					/*同上*/
	font-size: 100%;
	padding: 4px 15px;									/*上下、左右への余白*/
	clear: both;
	border: 1px solid #555;							/*枠線の幅、線種、色*/
	color: #FFF;											/*文字色*/
}

/*front_mainコンテンツのh4タグの設定*/
#front_main h4 {
	border-radius: 10px;	/*角丸のサイズ*/
	background-color: #111;	/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#111));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#222, #111);	/*同上*/
	background-image: linear-gradient(#222, #111);				/*同上*/
	font-size: 90%;
	padding: 2px 15px;	/*上下、左右への余白*/
	clear: both;
	border: 1px solid #555;	/*枠線の幅、線種、色*/
	color: #FFF;	/*文字色*/
}


/*front_mainコンテンツの段落タグ設定*/
#front_main p {
	padding: 0.5em 15px 1em;	/*左から、上、左右、下への余白*/
}



/*=====================================
  フロントサブコンテンツ設定
======================================*/
/*front_subコンテンツ */
#front_sub {
	float: left;											/*左側に回り込み*/
	width: 23%; 										/*サブコンテンツ幅(古いブラウザ用)*/
	width : -webkit-calc(220px);					/*サブコンテンツ幅(先行実装ブラウザ用)*/
	width: calc(220px);								/*サブコンテンツ幅(220px)*/
	padding-bottom: 30px;						/*下パディング*/
}

/*front_subコンテンツ内のh2タグ設定*/
#front_sub h2  {
	border: 1px solid #555;			/*枠線の幅、線種、色*/
	border-radius: 8px 8px 0 0;		/*角丸のサイズ。それぞれ左上、右上、右下、左下への設定*/
	font-size: 100%;
	text-align: center;					/*文字をセンタリング*/
	padding: 10px 0px;					/*上下、左右への余白*/
	background-color: #111;			/*背景色（古いブラウザだとここの色のみが出ます）*/
	background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#111));	/*グラデーション*/
	background-image: -webkit-linear-gradient(#222, #111);		/*同上*/
	background-image: linear-gradient(#222, #111);					/*同上*/
}
/*=====================================
  メイン内 slider表示
======================================*/
.main-slider {
	position: relative;
	margin: 0 0 20px 0;
}
.main-slider a {
	display: block
}
.main-slider a:hover {
	opacity: .8
}
.main-slider .slick-dots {
	text-align: center;
	padding: 15px 0 0 0
}
.main-slider .slick-dots li {
	width: 12px;
	height: 12px;
	display: inline-block;
	margin: 0 10px
}
.main-slider .slick-dots li.slick-active button {
	background: #000
}
.main-slider .slick-dots li button {
	border: none;
	width: 12px;
	height: 0;
	padding: 12px 0 0 0;
	overflow: hidden;
	display: block;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	background: #dfdfdf;
	cursor: pointer;
	outline: 0
}
.main-slider .slick-dots li button::-moz-focus-inner {
	border: 0
}
.main-slider-item {
	position: relative
}
.main-slider-img {
	padding-left:50px;
	padding-right:50px;
	width: 600px;
	height: 400px;
	display: block;
}
.main-slider-img img {
	display: none;
}
.main-slider-arrow {
	position: absolute;
	font-size: 60px;
	color: #fff;
	top: 0;
	z-index: 1;
	cursor: pointer;
	line-height: 1;
	width: 50px;
	height: 400px;
}
.main-slider-arrow .icn {
	position: absolute;
	top: 170px;
}
.main-slider-prev {
	left: 0
}
.main-slider-prev .icn {
	-webkit-transition: .2s left;
	transition: .2s left;
	left: 5px
}
.main-slider-next {
	right: 0;
	text-align: right
}
.main-slider-next .icn {
	-webkit-transition: .2s right;
	transition: .2s right;
	right: 5px;
}
.main-slider-prev:hover .icn {
	left: 0;
}
.main-slider-next:hover .icn {
	right: 0;
}

/* half size slider(no-arrow) */
.half-slider {
	position: relative;
	margin: 0 0 20px 0;
}
.half-slider a {
	display: block
}
.half-slider a:hover {
	opacity: .8
}
.half-slider-item {
	position: relative
}
.half-slider-img {
	margin: 0 auto;
	width: 330px;
	height: 220px;
	display: block;
}
.half-slider-img img {
	display: none;
}
/*=====================================
  トップページ内「更新情報・お知らせ」ブロック設定
======================================*/
/*ブロック全体の設定*/
#new {
	margin-bottom: 15px;
}

/*１行分の設定*/
#new dl{
	padding-left: 15px;
}

/*日付設定*/
#new dt {
	font-weight: bold;	/*太字にする設定。標準がいいならこの行削除。*/
	float: left;
	width: 8em;
}

/*記事設定*/
#new dd {
	border-bottom: 1px solid #d2d2d2;	/*下線の幅、線種、色*/
	padding-left: 8em;
}

/*「更新情報・お知らせ」表示部のみ設定*/
#newinfo {
	display: block;
}

/*「更新情報・お知らせ」ナビ表示アイコン設定*/
#newinfo_hdr #newinfo_open,
#newinfo_hdr #newinfo_close {
	display:none;
}

/* 女装3Pレズ&SMコース */
.page-josouko ol, .page-josouko ul,
.page-wasouko ol, .page-wasouko ul {
	padding: 0.5em 15px 1em;
}
.page-josouko ol li, .page-josouko ul li,
.page-wasouko ol li, .page-wasouko ul li{
}

.page-wasouko .threep_course {
}

.wasouko-image {
	width:  300px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.wasouko-image-vertical {
	width:  200px;
	height: auto;
	display: block;
	margin: 0 auto;
}


/* ページのCA表示 */
.main-customer-items {
	margin: 0 10px;
}
.main-customer-items::after {
	content: "";
	display: block;
	clear: both
}
.main-customer-item {
	width: 150px;
	float: left;
	margin: 0 10px 10px 10px;
}
.main-customer-item a {
	display: block
}
.main-customer-item a:hover {
	opacity: .8
}
.main-customer-item figure {
	margin: 0;
	display: block;
	position: relative;
}
.main-customer-img {
	display: block;
	width: 150px;
	height: 150px;
	margin: 0;
}
.main-customer-img img {
	display:none;
}
.main-customer-item .main-customer-caption {
	padding: 1px 0 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
	font-weight: 600;
	font-size: 110%;
	text-align: center;
}

/* 関連表示の CA */
#relations .main-customer-item {
	width: 100px;
	margin: 0 10px 10px 10px;
}
#relations .main-customer-img {
	width: 100px;
	height: 100px;
}


/* new アイコンの点滅 */
.new_icn_small:after {
	content: "";
	display: inline-block;
	width: 30px;
	height: 11px;
	margin-left: 10px;
	background:url( "../assert/images/emi_new.gif");    
    background-size:contain;
    vertical-align:middle;
}

.new_icn:before {
	content: "";
	display: block;
	width: 60px;
	height: 22px;
	background:url( "../assert/images/emi_new.gif");    
    background-size:contain;
    vertical-align:middle;
}



/**仲間(シングルページ)*/
.main-customer-intro {
}

.main-customer-intro:after {
	content: "";
	display: block;
	clear: both
}
.main-customer-intro-img {
	float: left;
	display: block;
	width: 250px;
	max-width: 250px;
	height: 250px;
	max-height: 250px;
	margin: 0 0 0 10px;
}
.main-customer-intro-img img {
	display: none;
}
.main-customer-intro-text {
	width: calc( 100% - 280px );
	float: left;
	margin-left: 20px;
	margin-top: 0;
}
table#introduction {
	width: 100%;
/* 	margin: 0 auto; */
	border-collapse: separate;
	border-spacing: 0px 5px;
	font-size: 12px;
	margin-top: -5px;
}
table#introduction th,
table#introduction td {
	padding: 3px 5px;
}
table#introduction th {
	background: #F8C3CD;
	vertical-align: middle;
	text-align: left;
	width: 30%;
	overflow: visible;
	position: relative;
	color: #fff;
	font-weight: normal;
	font-size: 110%;
	line-height: 110%;
}
table#introduction th:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #F8C3CD;
	border-width: 10px;
	margin-top: -10px;
}
/* firefox */
@-moz-document url-prefix() {
	table#introduction th::after {
		float: right;
		padding: 0;
		left: 30px;
		top: 10px;
		content: " ";
		height: 0;
		width: 0;
		position: relative;
		pointer-events: none;
		border: 10px solid transparent;
		border-left: #F8C3CD 10px solid;
		margin-top: -10px;
	}
}
table#introduction td {
	background: #f8f8f8;
	width: 80%;
	padding-left: 20px;
	color: #000;
}

/* Q and A */
.qanda-items {
	counter-reset:qanumber; 	/* 名前を付けたカウンターをリセット */
}
.qanda-items dl {
	border: 1px solid #ccc;
	margin-bottom:10px;
	border-radius: 10px;            /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;       /* Firefox用 */  
}
.qanda-items dt {
	font-weight: bold;
	color: #111;
	background-color: #fdb4d2;					/*背景色（古いブラウザだとここの色のみが出ます）*/
	background: -webkit-gradient(linear, left top, left bottom, from(#fdb4d2), to(#9e5976));	/*グラデーション*/
	background: -webkit-linear-gradient(#fdb4d2, #9e5976);		/*同上*/
	background: linear-gradient(#fdb4d2, #9e5976);				/*同上*/		
	padding: 8px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-radius-left: 10px 10px 0 0 ;       /* CSS3草案 */  
	-webkit-border-radius: 10px 10px 0 0 ;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px 10px 0 0 ;       /* Firefox用 */  
	line-height: 120%;
}
.qanda-items dt:first-child {
	border-top: none;
}
.qanda-items dt:before {
	counter-increment: qanumber;

	content: "Q"counter(qanumber)":";
	font-weight: bold;
	margin-right: 8px;
}
.qanda-items dd {
	padding: 8px 16px 12px 30px;
	margin: 0;
	line-height: 120%;
}
.qanda-items dd:before {
	content: "A:";
	font-weight: bold;
	margin-right: 8px;
	margin-left: -21px;
}
.josouko-name, .wasouko-name {
	display:block;
	max-width:600px;
	width:100%;
	margin: 20px auto;
}
.josouko-img, .wasouko-img {
	display:block;
	max-width:600px;
	width:50%;
	margin: 20px auto;
}


.page-recruitment {
	padding: 0.5em 15px 1em;	/*左から、上、左右、下への余白*/
}
.page-recruitment p {
	font-size: 120%;
}
.page-recruitment div {
	padding-left: 15px;
}
.recruitment_terms {
	table-layout: fixed;
    width: calc(100% - 20px );
    margin-left: 15px;
}

.recruitment_terms th, .recruitment_terms td{
	border: 2px #b709ff solid;
}
.recruitment_terms td:nth-child(1){
	text-align: center;
	width: 20%;
}
.recruitment_terms td:nth-child(2){
	padding-left: 10px;
	text-align: left;
	width: 79%;
}
.recruitment_terms th {
	text-align: center;
	background-color: #9a38c2;
}
.recruitment_terms thead {
	display: none;
}


/* トップページのコース説明 */
#play-cource-list a {
	text-decoration: none;
}

#beginner p, #kairaku p, #three_p p, #fechi p, #image p {
	padding: 0;
}


/* コース説明の左右２列組み */
.cource .half {
	float: left;
	width:50%;
}

.cource .half_center {
	width:50%;
	margin: 0 auto;
}

.cource .full {
	width: 100%;
}	

.cource .half:after, .cource .full:before {
  display: block;
  clear: both;
  content: "";
}

.cource .cource_txt, .cource .cource_img {
	padding: 0 10px;
	font-size: 120%;
}
.photographer .cource .cource_txt, .photographer .cource .cource_img {
	font-size: 100%;
}


/* コースの流れ 枠あり */
.course-nagare-box {
	background-color: #111;
	border: 1px solid #555;
	border-radius: 10px;
	padding:10px;
}
p.course-nagare-box-titile {
	color:red;
	font-size:120%;
/* 	padding:unset; */
}


/*お客様の声*/
.main-listner-list
{
}
.main-listner-item {
	width: auto;
	margin: 0 10px 30px 10px;
/*   border: solid 1px #ff69b4; */
	display: block;
	overflow: hidden;
	height: 120px;

    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.main-listner-item:after {
	content: "";
	display: block;
	clear: both;
}

.main-listner-header {
	float: left;
	display: block;
	width: 80px;
	margin: 0;
}
.main-listner-body {
	float: left;
	margin: 0 0 0 20px;
/* 	width: 674px; */
    width: calc(100% - 104px);
}
.main-listner-header a {
	display: block
}
.main-listner-header a:hover {
	opacity: .8
}

.main-listner-img {
	display: block;
	width:  80px;
	height: 80px;
	margin: 0 0 0 0;
}
.main-listner-img img {
	display:none;
}
.main-listner-header figure {
	margin: 0;
	display: block;
	position: relative;
}

.main-listner-header .main-listner-caption {
	padding: 1px 0 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
	font-weight: 600;
	font-size: 90%;
	text-align: center;
}
.main-listner-date {
	float: left;
	color: #999;
}

.main-listner-item .morebutton {
	float: left;
	font-size:0.75em;
	display:block;
	width:50px;
	margin: 0;
	padding-top:0px;
	padding-bottom:0px;
	text-align:center;
	border:2px solid;
	border-color:#aaaaaa #444444 #444444 #aaaaaa;
	background:#cccccc;
}

.main-listner-item .morebutton:hover{
	background:#777777;
}
/*お客様の声バルーン*/
.main-listner-item .baloon {
	position: relative;
/* 	background: #f0f5e4; */
	background: #000000;
/* 	border: 2px solid #f5aee9; */
	border: 2px solid #b709ff;
}
.main-listner-item .baloon:after,.main-listner-item .baloon:before {
	right: 100%;
	top: 30px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.main-listner-item .baloon:after {
	border-color: rgba(240, 245, 228, 0);
	border-right-color: #f0f5e4;
	border-width: 15px;
	margin-top: -15px;
}
.main-listner-item .baloon:before {
	border-color: rgba(245, 174, 233, 0);
	border-right-color: #f5aee9;
	border-width: 18px;
	margin-top: -18px;
}

.main-listner-item pre {
/* Mozilla */
white-space: -moz-pre-wrap;
/* Opera 4-6 */
white-space: -pre-wrap;
/* Opera 7 */
white-space: -o-pre-wrap;
/* CSS3 */
white-space: pre-wrap;
/* IE 5.5+ */
word-wrap: break-word;
}


/*エロいねランキング*/
.main-ranking-items {
	counter-reset: number 0;
}

.main-ranking-itemsin {
}
.main-ranking-item {
	width:100%;
	margin-bottom:20px;
	box-sizing:		border-box;
	border: solid 1px #ffd1d1;
	position: relative;
	
	overflow: auto;
	zoom: 1;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	background-color: #555;
	border-radius: 10px;
}
.main-ranking-rankno {
}
.main-ranking-rankno:before {
	font-size:24px;
	display:block;
	position: absolute;
	width: 40px;
	top: 0px;
	left: 0px;
	margin: auto;
	text-align:center;

	counter-increment: number 1;
	content: counter(number);
/* 	margin-top:12px; */
	background-color: rgba( 153,50,204, 0.6);
}
.main-ranking-item:after {
	display: block;
	clear: both;
	content: "";
}

.main-ranking-img {
	float:left;
	width: 25%;
	position: relative;
}
.main-ranking-img:before {

}
.main-ranking-img img {
	width:100%;
	height:100%;
}
.main-ranking-img img:hover {
	opacity: .8
} 

.main-ranking-extension {
	float:right;
	width: 70%;
}
.main-ranking-date {

}
.main-ranking-title {
	font-size:24px;
	line-height:1.5;
	position: relative;
	font-weight: bold;
}
.main-ranking-title:hover {
	opacity: .8
}

.main-ranking-ulike {
	position:absolute;
	right: 10px;
	bottom:0;
}
.main-ranking-ulike .wpulike {
	padding: 0;
	
}
.main-ranking-ulike .heart-svg {
	width:40px;
}

.main-ranking-atag {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
}
/* .main-ranking-atag:hover {
	opacity: .8;
} */

.main-ranking-category {
	float:left;
	font-size: 90%;
}

.main-play {
}
.main-play-beginner-title, .main-play-kairaku-title, .main-play-three_p-title
 {
	color: red;
	font-size:120%;
}
.main-play-beginer,
.main-play-beginner-nomake,.main-play-beginner-make,
.main-play-kairaku-nomake, .main-play-kairaku-make,
.main-play-three_p-nomake, .main-play-three_p-make,
.main-play-fetch-nomake, .main-play-fetch-make
{
	padding:	10px;
	background-color: #1111;
	border: solid 1px #555;
	border-radius: 10px;
}

.main-play .ta1, .main-play .ta1 td, .main-play .ta1 th{
	padding:	0 10px;
	font-size:	130%;
	line-height:1.3em;
	height:		2.5em;
}

.main-play .ta1 .option td, .main-play .ta1 .option th {
	background-color: slategray;
}
.main-play .ta1 .extend td, .main-play .ta1 .extend th {
	background-color: lightsalmon;
}

.main-play th.main-play-other-option {
	text-align:	left;
	font-size:	80%;
}

.main-play-promake {
	font-size:120%;
}

h2#recruitment {
	font-size:150%;
}
/*====================================================================
 accordion
====================================================================*/
.accordion-container {
	position: relative;
/* 	width: 100%; */
/* 	border: 1px solid #0079c1; */
/* 	border-top: none; */
/* 	outline: 0; */
/* 	cursor: pointer */
}

.accordion-container .accordion-title {
	display: block;
	position: relative;
	margin: 0;
	padding: 0.625em 0.625em 0.625em 2em;
	font-size: 1.25em;
	font-weight: normal;
	color: #fff;
	background: #000;
	cursor: pointer;
}

.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
	color: white;
	opacity: .8;
}

.accordion-container .accordion-title:hover i:before,
.accordion-container .accordion-title:hover i:active,
.accordion-container .content-entry.open i {
	color: white;
}

.accordion-title{
	position: relative;
}

.accordion-title:after {
	content: "";
	position: absolute;
	right: 25px;
	top: 38%;
	transition: all 0.2s ease-in-out;
	display: block;
	width: 8px;
	height: 8px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

.accordion-title.open:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 45%;
}

.accordion-content {
	overflow: hidden;
	display: none;
}

.accordion-content-height {
	overflow: hidden;
}

/*================================ */
/* top page search coursers  */

#course_items {
}
#course_items p {
	margin:0;
	padding:0;
}
#course_items figcaption {
	display:none;
}
.crs_box_outer {
	width: 220px;
	height: auto;
	position: relative;
}
.crs_img_box {
}
.crs_img {
	width: 220px;
	height: calc(220px * 2 / 3);
	height:auto;
}
.crs_type {
}
.crs_title_box {
	background: lightpink;
	height:50px;
	color:black;
}
.crs_title {
	text-align:center;
	font-size:12px;
}

.crs_new_box {
	position:absolute;
	top:0;
	left:0;
	width:30px;
	height:auto;
}



.act_crs:before {
	font-family: "Font Awesome 5 Free";
	content: '\f058';
	font-size: 24px;
	font-weight: 400;
	margin-right: 4px;
	color: red;
	
	display: inline-block;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: fa-spin;	
}

.course_items {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.course_item {
	width: 33%;
	padding: 0 5px 10px;
	box-sizing: border-box
}
.crs_title {
	font-size:16px;
	line-height:20px;
}

.crs_type_box .holder_1,
.crs_type_box .holder_2,
.crs_type_box .holder_3,
.crs_type_box .holder_4 {
	position: absolute;
	top:0;
	right:0px;
	z-index:99;
	font-size:24px;
	line-height:1.4;
	width:30px;
	text-align:center;
}
.crs_type_box .holder_1 {
	top:0;
}
.crs_type_box .holder_2 {
	top:30px;
}
.crs_type_box .holder_3 {
	top:60px;
}
.crs_type_box .holder_4 {
	top:90px;
}
.crs_new_icn .ready_new {
	vertical-align:middle;
}

.crs_detai:hover {

}
.crs_detail_txt {
	display:none;
}
.crs_detail_btn {
	display:block;
	position: absolute;
	top:0;
	left:0;

	width: 100%;
	height:100%;
	z-index:100;
}

/* .crs_detail_btn:hover + .crs_detail_txt {
}
 */
span[class*="crs_detail_hover"] {
	display: inline-block;
    bottom: 200px;
}

.crs_detail_txt {
	display: none;
	width: 180px;
	position: absolute;
	padding: 16px;
	border-radius: 5px;
	background: #b709ff;
	color: #fff;
	z-index:101;
}

.act_btn {
/* 	border: solid 4px red; */
}


/**/
.fig-caption-75p,
.fig-caption-100p {
	margin:0 auto;
	text-align:center;
	background:dimgray;
}
.fig-caption-75p {
	width:75%;
}
.fig-caption-100p {
	width:100%;
}

/*ここからPC用（801px～1000px）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (min-width:801px) and (max-width:1000px){
.josouko-name {
	font-size: 2.6em;
}


/* main slider */
.main-slider-img {
	width: calc(100vw - 400px);
	height: calc((100vw - 400px) * 2 / 3 );
}
.main-slider-arrow {
	height: calc((100vw - 400px) * 2 / 3 / 2);
}
.main-slider-arrow .icn {
	top: calc((((100vw - 400px) * 2 / 3 ) / 2) - 30px);
}
.half-slider-img {
	margin: 0 auto;
	width: calc((100vw - 300px) / 2);
	height: calc((100vw - 300px)  / 2 * 2 / 3 );
}

/* course llist of top */
.course_item {
	width: 50%;
}
.crs_box_outer {
	width: 100%;
	max-width:300px;
	margin:0 auto;
}

.crs_img {
	width: 100%;
	max-width: 300px;
	height: auto;
	height:auto;
}

}

/*ここからタブレット用（481px～800px）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (min-width:481px) and (max-width:800px){

/*=====================================
  メインコンテンツ設定
======================================*/
/*メインコンテンツ */
#contents #front_main {
	float: none;
	width: auto;
	overflow: hidden;
}

/*=====================================
  フロントサブコンテンツ設定
======================================*/
/*front_subコンテンツ */
#contents #front_sub {
	float: none;
	width: auto;
	overflow: hidden;
	padding-top: 20px;						/*上パディング*/


	display: flex;
	display: -moz-flex;
	display: -o-flex;
	display: -webkit-flex;
	display: -ms-flex;
	
	flex-direction: row;
	-moz-flex-direction: row;
	-o-flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	
	flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-o-flex-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	
	justify-content:center;
	-moz-justify-content:center;
	-o-flex-justify-content:center;
	-webkit-justify-content:center;
	-ms-justify-content:center;

}

/* main slider */
.main-slider-img {
	width: calc(100vw - 160px);
	height: calc((100vw - 160px) * 2 / 3 );
}
.main-slider-arrow {
	height: calc((100vw - 260px) * 2 / 3);
}
.main-slider-arrow .icn {
	top: calc((((100vw - 160px) * 2 / 3 ) / 2) - 30px);
}
.half-slider-img {
	width: calc(100vw - 160px);
	height: calc((100vw - 160px) * 2 / 3 );
	margin: 0 auto;
}


/* josouko */
.josouko-name {
	font-size: 2.1em;
}

/* コース説明の左右２列組み */
.cource .half {
	width: 100%;
	clear:both;
}

.cource .half_center {
	width: 100%;
	clear:both;
}

/**/
.main-ranking-title {
	font-size: 18px;
	line-height: 1.3;
}

/* course llist of top */
.course_item {
	width: 50%;
}
.crs_box_outer {
	width: 100%;
	max-width:300px;
	margin:0 auto;
}

.crs_img {
	width: 100%;
	max-width: 300px;
	height: auto;
	height:auto;
}

.crs_detail_txt {
	width: 150px;
}


}

/*ここからスマホ用（～480px）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (max-width:480px){

/*=====================================
  メインコンテンツ設定
======================================*/
/*メインコンテンツ */
#contents #front_main {
	float: none;
	width: auto;					/*メインコンテンツ幅*/
	overflow: hidden;
}

/*=====================================
  フロントサブコンテンツ設定
======================================*/
/*front_subコンテンツ */
#contents #front_sub {
	float: none;
	width: auto;
	height: auto;
	overflow: hidden;
	padding-top: 20px;						/*上パディング*/
}

/* main slider */
.main-slider-img {
	width: calc(100vw - 160px);
	height: calc((100vw - 160px) * 2 / 3 );
}
.main-slider-arrow {
	height: calc((100vw - 260px) * 2 / 3 / 2);
}
.main-slider-arrow .icn {
	top: calc((((100vw - 160px) * 2 / 3 ) / 2) - 30px);
}
.half-slider-img {
	width: calc(100vw - 160px);
	height: calc((100vw - 160px) * 2 / 3 );
	margin: 0 auto;
}

/* josouko */
.josouko-name {
	font-size: 1.5em;
}

/*=====================================
  トップページ内「更新情報・お知らせ」ブロック設定
======================================*/
/*１行分の設定*/
#new dl {
	height: auto;
	margin: 5px 5px 0px;
}

/*日付設定*/
#new dt {
	float: none;
	width: auto;
}

/*記事設定*/
#new dd {
	padding-left: 0;
}

/*「更新情報・お知らせ」表示部のみ設定*/
#newinfo {
	display: block;
}

/*「更新情報・お知らせ」ナビ表示アイコン設定*/
#newinfo_hdr #newinfo_open {
	display:none;
}
#newinfo_hdr #newinfo_close {
	display:none;
}

/*「更新情報・お知らせ」ナビ表示アイコンホバー設定*/
#newinfo_hdr i:hover {
	color: #FF7DDF;			/*マウスオン時の文字色（全体）*/
}

/* コース説明の左右２列組み */
.cource .half {
	width: 100%;
	clear:both;
}

.cource .half_center {
	width: 100%;
	clear:both;
}

/*エロいいねランキング*/
.main-ranking-title {
	font-size: 14px;
	line-height: 1.3;
}

/* course llist of top */
.course_item {
	width: 50%;
}
.crs_box_outer {
	width: 100%;
	max-width:300px;
	margin:0 auto;
}

.crs_img {
	width: 100%;
	max-width: 300px;
	height: auto;
	height:auto;
}

.crs_detail_txt {
	width: 150px;
}

.crs_title {
	font-size:12px;
}


}




#resv_sec {
            color: #444;
            background-color: #f2f2f2;
            color: gray;
            background-color: black;
            font-family: Arial, Helvetica, sans-serif;
            margin: 0 auto;

}