@charset "UTF-8";
/* CSS Document */

/* リセット定義 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	color: #242424;
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    font-feature-settings: "pkna" 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	display: block;
}
*{ 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* リセット定義ここまで */


/*-------------------------- トップページ --------------------------*/

/* トップ ビジュアル */
#top {
	width: 100%;
	margin: 0 auto;
}

#top h1 img {
	width: 100%;
	margin: 0 auto;
}

/* テキスト */
#top_text {
	width: 90%;
	margin: 20px auto;
	text-align: center;
}

#top_text p {
	font-size: 0.8em;
	line-height: 1.6em;
}

/* ボタン */
#btn_age {
	width: 100%;
	margin: 0 auto;
}

#btn_age ul {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}

#btn_age ul li {
	margin: 20px auto;
}

#btn_age ul li a {
	text-decoration: none;
	display: block;
}

/* ボタン 18歳以上 */
.enter a {
	width: 100%;
	padding: 20px 0;
	border: 2px solid #242424;
	border-radius: 8px;
	background-color: #242424;
	color: #fff;
}

/* ボタン 18歳未満 */
.exit a {
	width: 100%;
	padding: 20px 0;
	font-size: 0.8em;
	border: 2px solid #242424;
	border-radius: 8px;
	color: #242424;
}

/* コピーライト */
.cp {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 0.7em;
}

/* パソコン表示 */
@media screen and (min-width:1000px) {

/* トップ ビジュアル */
#top {
	width: 750px;
}
	
/* ボタン */
#btn_age {
	width: 750px;
	margin: 0 auto;
}
}

/*-------------------- サービス（番組一覧）ページ --------------------*/

.head {
	width: 100%;
	height: 65px;
	background-color: #fff;
	z-index: 2;
	position: fixed;
}

.drawer {
	width: 100%;
	z-index:3;
}

.drawer-menu li a {
	padding: 10px 0 10px 10px;
	font-size: 0.85em;
	line-height: 2em;
}

/* ロゴ */
.logo {
	width: 100%;
}

.logo h1 img {
	width: 150px;
	margin: 10px 0 10px 10px;
}

/* ヘッド画像 */
.head_img {
	width: 100%;
	margin: 0 auto 10px auto;
	padding-top: 65px;
}

.head_img img {
	width: 100%;
	margin: 0 auto;
}

/* ヘッドテキスト */
.head_txt {
	width: 92%;
	margin: 0 auto;
}

/* 見出し */
.head_txt h2 {
	margin: 15px auto 10px auto;
	font-size: 1.15em;
	line-height: 1.4em;
	color: #ED1E6A;
}

/* 本文 */
.head_txt p {
	font-size: 0.85em;
	line-height: 1.65em;
	-webkit-font-feature-settings: "palt";
	font-feature-settings:palt;
}

/* 番組エリア */
.container {
	width: 92%;
	margin: 15px auto;
	padding: 15px 10px;
	border: 2px solid #242424;
	border-radius: 8px;
}

/* 各番組画像＆スキルバー */
.item {
	width: 100%;
	margin: 0 auto;
	display: flex;
}

/* 各番組画像 */
.img_area {
	width: 50%;
}

.img_area img {
	width: 95%;
}

/* スキルバー */
.skillbar_area{
	width: 50%;
}

.skillbar,.skillbar2,.skillbar3,.skillbar4,.skillbar5,.skillbar6,.skillbar7,.skillbar8,.skillbar9,.skillbar10,.skillbar11,.skillbar12,.skillbar13 ,.skillbar14,.skillbar15,.skillbar16,.skillbar17,.skillbar18,.skillbar19,.skillbar20{
    position:relative;
    display:inline-block;
    margin: 0 0 15px 0;
    width:100%;
    background:#DADADA;
    height:30px;
    border-radius:3px;
}
 
.skillbar-title {
    position:absolute;
    top:0;
    left:0;
    width:65px;
    font-weight:bold;
    font-size:0.65em;
    color:#ffffff;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
    background:rgba(0, 0, 0, 0.1);
    padding:0 10px;
    height:30px;
    line-height:30px;	
}
 
.skillbar-bar {
    height:30px;
    width:0px;
    background:#6adcfa;
    border-radius:3px;
    display:inline-block;
	z-index: 1;
}
 
.skill-bar-percent {
    position:absolute;
    right:10px;
    top:0;
    font-size:11px;
    height:30px;
    line-height:30px;
    color:#ffffff;
    color:rgba(0, 0, 0, 0.4);
}

/* 各番組 見出し */
.item_text {
	margin: 0 auto;
}

.item_text h3 img {
	width: 30px;
	margin: 0;
	display: inline-block;
}

.item_text h3 {
	padding-bottom: 10px;
	font-size: 1.15em;
	line-height: 1.4em;
	color: #ED1E6A;
	border-bottom: 1px dotted #242424;
}

/* 各番組 本文 */
.item_text p {
	margin: 10px auto;
	font-size: 0.85em;
	line-height: 1.65em;
}

/* 口コミ */
.rating {
	width: 100%;
	margin: 15px auto;
}

/* 口コミ 画像 */
.rating img {
	width: 85%;
	margin: 0 auto;
}

/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}

/* 各番組へのリンクボタン */
.item_btn_area {
	width: 100%;
	margin: 20px auto 0 auto;
	text-align: center;
}

.item_btn_area ul li a {
	width: 100%;
	padding: 20px 0;
	text-decoration: none;
	display: block;
	border: 2px solid #242424;
	border-radius: 8px;
	background-color: #242424;
	color: #fff;
}

/* マーカーアニメーション */
.marker-animation.active{
    background-position: -100% .5em;
}
 
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}

/*===========
inview
===========*/

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* 初心者ガイドへ */
.guide_link {
	width: 92%;
	margin: 35px auto 0 auto;
}

.guide_link h3 {
	padding-bottom: 10px;
	font-size: 1.15em;
	line-height: 1.4em;
	border-bottom: 1px dotted #242424;
}

.guide_link p {
	margin: 10px auto;
	font-size: 0.85em;
	line-height: 1.65em;
}

/* 初心者ガイドへのリンクボタン */
.go_guide_link_area {
	width: 88%;
	margin: 20px auto 0 auto;
	text-align: center;
}

.go_guide_link_btn a {
	width: 100%;
	padding: 20px 0;
	text-decoration: none;
	display: block;
	border: 2px solid #242424;
	border-radius: 8px;
	background-color: #242424;
	color: #fff;
}

/*----------------------- 初心者ガイドページ ------------------------*/

/* ガイドテキスト */
.head_guide_txt {
	width: 100%;
	margin: 0 auto;
}

/* 見出し */
.stripe {
	margin: 20px auto 10px auto;;
	padding: 10px 10px 10px 20px;
	color: #ffffff;
	font-size: 1.15em;
	line-height: 1.4em;
	background: repeating-linear-gradient(45deg, #4f4f4f, #4f4f4f 3px, #000000 3px, #000000 6px);
}

/* 本文 */
.head_guide_txt p {
	width: 92%;
	margin: 10px auto;
	font-size: 0.85em;
	line-height: 1.65em;
}

.guide_text {
	margin: 0 auto;
}

/* 見出し */
.guide_text h3 {
	padding-bottom: 10px;
	font-size: 1.15em;
	line-height: 1.4em;
	color: #ED1E6A;
	border-bottom: 1px dotted #242424;
}

/* 本文 */
.guide_text p {
	margin: 10px auto;
	font-size: 0.85em;
	line-height: 1.65em;
}

/* 詳しく見るリンクボタン */
.guide_btn_area {
	width: 100%;
	margin: 20px auto 0 auto;
	text-align: center;
}

.guide_btn_area ul a {
	width: 100%;
	padding: 20px 0;
	text-decoration: none;
	display: block;
	border: 2px solid #242424;
	border-radius: 8px;
	background-color: #242424;
	color: #fff;
}

/* フッター*/
footer {
	width: 100%;
	margin: 50px auto 0 auto;
	background-color: #242424;
}

.footer_area {
	width: 92%;
	margin: 0 auto;
	padding: 20px 0;
	display: flex;
	align-items: center;
}

.footer_txt {
	margin: 0 auto;
	text-align: center;
}

/* コピーライト */
.footer_cp {
	margin: 0 auto;
	text-align: center;
	font-size: 0.7em;
	line-height: 2em;
	color: #fff;
}

.management {
	font-size: 0.7em;
	line-height: 2em;
}

.management a {
	text-decoration: underline;
	display: block;
	color: #fff;
}

#pagetop{

    cursor:pointer;
}

#pagetop img {
	width: 50px;
	margin: 0;
}

/*------------------------- 各ガイドページ --------------------------*/

/* 各ガイドイメージ画像 */
.guide_img {
	width: 100%;
	margin: 0 auto 20px auto;
}

.guide_img img {
	width: 100%;
	margin: 0 auto;
}


/*------------------------ 運営者情報ページ -------------------------*/

/* 運営者情報テキスト */
.head_info_txt {
	width: 100%;
	margin: 0 auto;
	padding-top: 65px;
}

/* 本文 */
.head_info_txt p {
	width: 92%;
	margin: 10px auto;
	font-size: 0.85em;
	line-height: 1.65em;
}


/* パソコン表示 */
@media screen and (min-width:750px) {

body {
	width: 750px;
	margin: 0 auto;
	position: relative;
}
	
.head {
	width: 750px;
}

.drawer {
	width: 750px;
	margin: 0 auto;
}
	
.drawer-toggle,.drawer-hamburger {
	position: absolute;
}
	
/* ロゴ */
.logo {
	width: 750px;
	margin: 0 auto;
}

/* ヘッド画像 */
.head_img {
	width: 750px;
}
}


/*------------------------- ツーショットラブバナー追加 20240319 --------------------------*/
.twolove_banner {
	width: 100%;
	margin: 20px auto;
}
.twolove_banner img {
	width: 100%;
	margin: 0 auto;
}
section.container .twolove_banner:last-child{
	margin: 20px auto 0;
}
body > .twolove_banner {
	width: 92%;
}

.head_guide_txt + .twolove_banner{
	position: sticky;
	top: 85px;
}