@charset "utf-8";


/* web fonts
======================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

.mincho {
	font-family: "Noto Serif JP", serif;
	font-weight: 400;
}
/*===================================================== */
/* html tags
======================================================= */
/* タグ初期化 設定*/
html{
	height: 100%;
	padding:0;
	margin: 0;
	overflow-x:hidden;
}

body {
	position: relative;
	text-align:left;
	padding:0;
	margin:0;	
	line-height:1.3em;
	font-family: "Noto Sans JP", serif;
	font-optical-sizing: auto;
	font-weight: weight;
	font-style: normal;
}
a{
	text-decoration:none;
	color:#f36ec7;
}
a:hover{
	color:#f36ec7;
	text-decoration:underline;
}

.contentsArea > h2{
	margin-bottom:1.5rem;
	text-align: center;
  	font-family: "Noto Serif JP", serif;
	font-size: 2rem;
	font-weight: bold;
	color: #f36ec7;
}



/* layout
-------------------------------------------------------- */


p,ul,li{margin:0;padding:0;}
li{list-style:none;}
img{border:0;}
table{border-collapse: collapse;}
th,td{padding:2%;}


/* page back */

.pageBack{
	margin-bottom:3rem;
}
.pageBack a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 1.5rem;
	padding: 1em 2em;
	width: 220px;
	color: #ffb638;
	font-size: 18px;
	font-weight: 700;
	background-color: #FFF;
	transition: 0.3s;
	border:2px solid #ffb638;
}
.pageBack a::before {
	content: '';
	width: 5px;
	height: 5px;
	border-top: 3px solid #ffb638;
	border-right: 3px solid #ffb638;
	transform: rotate(225deg);
  }
  
  .pageBack a:hover {
	text-decoration: none;
	background-color: #ffedce;
  }


/*===================================================== */
/* 共通設定
======================================================= */

/*===================================================== */
/* オプション検索
======================================================= */

#slideMenu{
}
#slideMenu .readmore{
	width:90%;
	margin:1rem auto;
}

#slideMenu .readmore img{
	border-radius:6px;
}

#slideMenu .displayNone {
    display: none;
}
#slideMenu .readmore .switch{
    text-align:center !important;
    cursor:pointer;
	width:400px;
	margin: 0 auto 0.5rem;
	padding:2px;
 }
#slideMenu .readmore .switch img{
    cursor:pointer;
}
#slideMenu .readmore a {
    display: block;
}
#slideMenu .readmore a img{
    display: block;
}
#slideMenu .contentWrap {
	padding:1rem;
	margin: 0;
	border: 1px solid #f5742e;
	background:#FFF;
}
#slideMenu .contentWrap dl{
    display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding:0;
	margin: 0;
}
#slideMenu .readmore dd{
	display: inline-block;
	width:auto;
	margin: 0 5px 5px;
	font-size: 0.7rem;
}
#slideMenu .readmore dd label{
	cursor: pointer;
}
#slideMenu .readmore .submitArea{
	text-align: center;
}
#slideMenu .readmore .submitArea input[type="submit"]{
	padding:0.5rem 1rem;
}


/* searchArea
======================================================= */

    /* 検索フォーム用デザイン */
    .search-container {
        background: #f8f8f8;
        border-radius: 8px;
        padding: 24px 20px 10px 20px;
        margin: 30px auto 20px auto;
        max-width: 90%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    }
    .search-section {
        margin-bottom: 18px;
    }
    .search-section h3 {
        font-size: 1.1em;
        margin-bottom: 8px;
        color: #333;
        border-left: 4px solid #ee72ba;
        padding-left: 8px;
    }
    .search-btn {
        display: inline-block;
        width:200px;
        margin: 0 5px;
        background: #ee72ba;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 8px 28px;
        font-size: 1.1em;
        cursor: pointer;
        transition: background 0.2s;
    }
    .search-btn:hover {
        background: #00897b;
    }
    .reset-btn {
        display: inline-block;
        width:160px;
        margin: 0 5px;
        background: #9e9e9e;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 8px 28px;
        font-size: 1.1em;
        cursor: pointer;
        transition: background 0.2s;
    }
    .reset-btn:hover {
        background: #757575;
    }
    
    /* チェックボックス・ラジオボタンをボタン風に */
    .btn-check {
        display: none;
    }
    .btn-label {
        display: inline-block;
        margin: 0 10px 10px 0;
        padding: 8px 18px;
        border-radius: 20px;
        background: #e0e0e0;
        color: #333;
        font-size: 0.8rem;
        cursor: pointer;
        border: 2px solid #e0e0e0;
        transition: background 0.2s, color 0.2s, border 0.2s;
        user-select: none;
    }
    .btn-check:checked + .btn-label {
        background: #ee72ba;
        color: #fff;
        border: 2px solid #ee72ba;
    }
    .cast-list-container {
        margin: 30px auto 0 auto;
        max-width: 900px;
    }
    
    /* スマートフォン用メディアクエリ */
    @media screen and (max-width: 600px) {
        
        .search-section {
            margin-bottom: 8px;
            padding:0;
        }
        .search-section h3 {
            font-size: 0.9rem;
            margin-bottom: 8px;
        }
      
        .search-container {
            background: #f8f8f8;
            border-radius: 8px;
            padding: 14px 2px 5px 2px;
            margin: 30px auto 20px auto;
            max-width: 90%;
            box-sizing: border-box;
        }
        
        .search-btn, .reset-btn {
            width: 100px;
            font-size: 0.9em;
            padding: 6px 16px;
            margin: 0 3px;
        }
        
        .btn-label {
            display: inline-block;
            min-width: 2rem;
            margin: 0 5px 6px 0;
            padding: 3px 3px;
            border-radius: 20px;
            background: #e0e0e0;
            color: #333;
            font-size: 0.7rem;
            cursor: pointer;
            /*border: 2px solid #e0e0e0;*/
            border:none;
            transition: background 0.2s, color 0.2s, border 0.2s;
            user-select: none;
            text-align: center;
        }
        .btn-check:checked + .btn-label {
            background: #ee72ba;
            color: #fff;
            /*border: 2px solid #ee72ba;*/
            border:none;
        }
    }
    
    /* アコーディオン式検索フォーム */
    .accordion-toggle {
        display: block;
        width: 250px;
        margin: 0 auto 20px auto;
		background: #ee72ba;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 12px 28px;
        font-size: 1.1em;
        cursor: pointer;
        transition: background 0.2s;
        position: relative;
    }
    
    .accordion-toggle:hover {
        background: #fc62bc;
    }
    
    .accordion-toggle::after {
        content: '▼';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s;
    }
    
    .accordion-toggle.active::after {
        transform: translateY(-50%) rotate(180deg);
    }
    
    .search-form-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        background: #f9f9f9;
        border-radius: 4px;
        margin-bottom: 20px;
    }
    
    .search-form-content.active {
        max-height: 900px;
        padding: 20px;
    }
    
    .search-container {
        margin: 20px auto;
        max-width: 900px;
    }


/* readmore
======================================================= */

.readmore{
	width:98%;
	margin:0 auto 10px;
	padding: 0;
}
.readmore .displayNone {
    display: none;
}
.readmore .switch{
    text-align:center;
    cursor:pointer;
 }
.readmore .switch img{
}
.readmore a {
    display: block;
}
.readmore a img{
    display: block;
}
.readmore .contentWrap {
	padding:0;
	margin: 0;
}

/* ティッカー
======================================================= */
#ticker{
	display: flex;
	width:100%;
	height:36px;
	margin: 0 0 1.5rem;
	padding:8px;
	box-sizing: border-box;
	background:#3b3334;
}
#ticker .info{
	margin: 0 0 ;
	padding:0.4rem 0.4rem 0.9rem;
	text-align: center;
	border: 1px solid #ddd;
	border-radius:4px;
	line-height:1;
	font-size: 0.74rem;
	color: #fff;
	
}
#ticker .inner{
	width:100%;
	padding:0 0px 0 0px !important;
	box-sizing:border-box;
	color: #FFF;
}
#ticker #js_news{

}
#ticker .inner img{
	width:auto;
}





/*===================================================== */
/* sideWigetArea 
======================================================= */
.sideWigetArea{
	width:240px;
	overflow-x: hidden;
	position: absolute;
	top:0;
	right:-240px;
	margin-bottom:1rem;
}
.sideWigetArea ul{
	width:100%;
}
.sideWigetArea ul li{
	display: block;
	margin-bottom:1rem;
}

/*===================================================== */
/* sideWigetArea 
======================================================= */

.sideLeftWigetArea {
	position: relative;
	top:0;
}

.fixBanner {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-920px);
	width: 300px;
	height: 300px;
	z-index: 999;
	transition: top 0.2s ease;
}

.fixBanner.fixed {
	position: fixed;
	top: 10px;
}


.sideLeftWigetArea ul{
	width:100%;
	padding:0;
}
.sideLeftWigetArea ul li{
	display: block;
	padding:0;
	margin-bottom:1rem;
	background:#FFF;
}
.sideLeftWigetArea ul li > div{
	overflow: hidden !important;
	padding:0;
}
.sideLeftWigetArea ul li  iframe{
	overflow: hidden !important;
}


/* ====================================================
   スマホ対応 (768px以下)
   ==================================================== */
@media screen and (max-width: 768px) {

	/* 基本フォント調整 */
	body{
		font-size:0.9rem;
	}

	/* 見出し調整 */
	.contentsArea > h2{
		font-size:1.5rem;
		margin-bottom:1.2rem;
	}

	/* pageBack */
	.pageBack{
		margin-bottom:2rem;
	}

	.pageBack a{
		width:120px;
		font-size:16px;
		padding:0.8em 1.5em;
	}

	/* slideMenu オプション検索 */
	#slideMenu .readmore{
		width:95%;
	}

	#slideMenu .readmore .switch{
		width:100%;
		max-width:300px;
	}

	#slideMenu .contentWrap{
		padding:0.8rem;
	}

	#slideMenu .readmore dd{
		font-size:0.65rem;
		margin:0 3px 5px;
	}

	/* searchArea */
	#searchArea{
		padding:4px;
		margin:0 0 10px;
	}

	#searchArea h4{
		font-size:0.85rem;
		margin:0 0 8px;
	}

	/* sort */
	#searchArea ul#sort{
		width:100%;
		margin:0 0 10px;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
	}

	#searchArea ul#sort li{
		width:45%;
		max-width:160px;
		height:38px;
		margin:0 2px 4px 2px;
		float:none;
		font-size:10px;
		background-size:contain;
	}

	#searchArea ul#sort li:nth-child(2),
	#searchArea ul#sort li:nth-child(3),
	#searchArea ul#sort li:nth-child(4){
		margin-left:2px;
	}

	#searchArea ul#sort li img{
		width:18px;
	}

	#searchArea ul#sort li .title{
		font-size:14px;
		padding:2% 1% 0;
	}

	#searchArea ul#sort li:nth-child(3) .title{
		font-size:11px;
	}

	/* formArea */
	#formArea{
		display:flex;
		flex-direction:column;
	}

	#formArea #search_form{
		float:none;
		width:100%;
		margin-bottom:10px;
	}

	#formArea #search_form li{
		float:none;
		width:100%;
		margin-right:0;
		margin-bottom:6px;
	}

	#formArea #search_form li span{
		width:50px;
		font-size:10px;
	}

	#formArea #search_submit{
		float:none;
		width:100%;
		max-width:200px;
		margin:0 auto;
	}

	/* readmore */
	.readmore{
		width:100%;
		margin:0 auto 8px;
	}

	/* ticker */
	#ticker{
		height:auto;
		min-height:32px;
		margin:0 0 1rem;
		padding:6px;
		flex-direction:column;
		gap:0.5rem;
	}

	#ticker .info{
		padding:0.3rem 0.3rem 0.7rem;
		font-size:0.7rem;
	}

	#ticker .inner{
		padding:0 !important;
		font-size:0.75rem;
	}

	/* sideWigetArea */
	.sideWigetArea{
		position:relative;
		width:100%;
		right:0;
		margin-bottom:1rem;
	}

	.sideWigetArea ul li{
		margin-bottom:0.8rem;
	}

	/* sideLeftWigetArea - 固定バナー非表示 */
	.sideLeftWigetArea{
		display:none;
	}

	.fixBanner{
		display:none;
	}
}

/* ====================================================
   タブレット対応 (769px〜1024px)
   ==================================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {

	/* searchArea調整 */
	#searchArea ul#sort{
		width:100%;
		max-width:690px;
	}

	#formArea #search_form{
		width:70%;
	}

	#formArea #search_submit{
		width:25%;
	}

	/* ticker */
	#ticker{
		height:auto;
		min-height:36px;
	}

	/* 固定バナーの位置調整 */
	.fixBanner{
		transform:translateX(-600px);
		width:250px;
		height:250px;
	}
}