:root {

	/**** 基本要素 ****/
	/* 下部マージン */
  --margin_bottom_s: 20px;
  --margin_bottom_ml: 25px;

	/**** ヘッダー ****/
	/* 上部マージン */
  --margin_top_h_s: 45px;/* ヘッダーの上部マージン */
  --margin_top_h_ml: 50px;

}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ common
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/********************************************************
■ ユニバーサルセレクタ・要素セレクタ
 （例：*, html）
********************************************************/
/*--------------------------------------------------------
■ ブラウザが勝手につけるマージンを削除
--------------------------------------------------------*/

*,*:before, *:after{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

/*--------------------------------------------------------
■ html
--------------------------------------------------------*/

html{
	font-size: 15px;
	color: #606060;
	letter-spacing: 0.05em;
	line-height: 1.7;
	/* %で指定すると子や孫にも本要素で「計算後の実値」が継承されてしまうため、単位無しで指定 */
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
	touch-action: manipulation; /*ダブルタップによるズームを無効化*/
}
*{
    font-family: inherit;/* フォントを継承（button等で勝手に他のフォントになるのを防ぐ */
}
/*--------------------------------------------------------
■ a
--------------------------------------------------------*/

a{
	color:#5193f7;
	text-decoration:none;
}

/*--------------------------------------------------------
■ アイコン
--------------------------------------------------------*/

i{
	margin-right: 0.4em;/* アイコンと右の文字の間にマージン */
}

i.sentence{
	margin-left: 0.4em;/* 文中なのでアイコンと左の文字の間にもマージン */
}

/********************************************************
■ クラス名のみ
 （例：.number）
********************************************************/
/*--------------------------------------------------------
■ 強調
--------------------------------------------------------*/

.number{
	font-family: 'Quicksand', sans-serif;
}

strong{
	border-bottom: dashed 2px #5193f7;
}
strong.red{
	border-bottom: none;
	color:#f45079;
	font-size:1.1em;
}
.italic{
	font-style: italic;
}
.bold{
	font-weight: bold;
}

/*--------------------------------------------------------
■ 最後要素にだけ使いたいマージン調整
--------------------------------------------------------*/

.last_margin_bottom{
	margin-bottom: var(--margin_bottom_s) !important;/* !importantで読込順序やクラスの詳しさを無視して強制させる */

}
@media only screen and (min-width: 738px){
	.last_margin_bottom{
		margin-bottom: var(--margin_bottom_ml) !important;/* !importantで読込順序やクラスの詳しさを無視して強制させる */
	}
}

/*--------------------------------------------------------
■ 文字の寄せ（中央・右）
--------------------------------------------------------*/

.center{
	text-align: center !important;/* !importantで読込順序やクラスの詳しさを無視して強制させる */
}
.right{
	text-align: right !important;/* !importantで読込順序やクラスの詳しさを無視して強制させる */
}
/*--------------------------------------------------------
■ SP版で改行させる
--------------------------------------------------------*/
br.sp_new_line {
	display:inline;
}
@media screen and (min-width: 738px){
	br.sp_new_line {
		display:none;
	}
}
/*--------------------------------------------------------
■ 単語の途中でも無理やり改行させる
--------------------------------------------------------*/
.break_all {
	word-break: break-all;
}
/*--------------------------------------------------------
■ matelializeより
--------------------------------------------------------*/

.clearfix{
	clear:both;
}

.float_right{
	float: right !important;
}

/*--------------------------------------------------------
■ メディアクエリ
--------------------------------------------------------*/
.hide_on_small_only{/* smallの時だけ非表示 */
  display: none !important;
}
.hide_on_med_and_down{/*medium以下の時非表示 */
  display: none !important;
}
@media only screen and (min-width: 738px){
	.hide_on_small_only{/* medium以上では表示 */
		display: block !important;
	}
	.hide_on_med_and_up{/* medium以上では非表示 */
   		display: none !important;
  }
}
@media only screen and (min-width: 1117px){
	.hide_on_med_and_down{/* largeでは表示 */
	  display: block !important;
	}
	  .hide_on_large_only{/* largeでは非表示 */
	  display: none !important;
	}
}
/********************************************************
■ 要素セレクタに特定クラスを付与
 （div.left_box）
********************************************************/
/*--------------------------------------------------------
■ left_box,right_box,full_box
--------------------------------------------------------*/

@media only screen and (min-width:1117px){
	div.full_box{/* 開発者用に利用 */
		float:left;
		width:1087px;
	}
	div.left_box{
		float:left;
		width:700px;
	}
	div.right_box{
		float:left;
		width:336px;
		margin-left:51px;
	}
}

/*--------------------------------------------------------
■ container
--------------------------------------------------------*/
div.container{
	margin: 0 5px;
	width: initial;
}
@media only screen and (min-width: 738px){
		div.container{
		margin: 0 10px;
		width: initial;
	}
}
@media only screen and (min-width: 1117px){
	div.container{
		margin: 0 auto;
		width: 1087px;/* 700 + 51 + 336 */
	}
}
/*--------------------------------------------------------
 ■ overflow_hidden
本divで外側から囲むことにより、
「ネガティブマージンによって見た目は保たれるがwidthが100%を超える要素」に横スクロールが出現してしまう不具合を回避できる。
【使用例】
・separate_table
--------------------------------------------------------*/
div.overflow_hidden{
	overflow: hidden;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ nav
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

nav{
	background-color: #5193f7;
}
nav.developer{
	background-color: #000000;
}
/*  width 738未満の表示 */
/*  */
/* 【飛松アプデ】メニューを表示させんたくなったら */
/* ↓を有効化して・・・ */

/*
nav div.logo_box{
	float: left;
	width: calc(100% - 70px);
	text-align: center;
}
*//* nav-openのmargin-leftとwidthの合計の2倍 */


/* ↓を削除すればOK */
nav div.logo_box{
	float: left;
	width: 100%;
	text-align: center;
}

nav div.logo_box a img.logo{
	max-height: 50px;
	vertical-align: bottom;/* 下の余白を削除 */
}

@media only screen and (min-width: 738px){
	nav div a img.logo{
		max-height: 63px;
		vertical-align: bottom;/* 下の余白を削除 */
	}
	nav ul li{
		font-size:14px;
		list-style-type: none;
		margin: 0 0 0 20px;/* 左を空けて次のリストへのマージンを取る */
		float: left;
	}
	nav ul li a{
		display: block;
		padding: 20px 0;/* logoのheightに合わせる形でpaddingを設定 */
		color: #ffffff;
	}
}
/*--------------------------------------------------------
 ■ ハンバーガーメニュー
--------------------------------------------------------*/
body::before {/* ハンバーガメニュークリック時に背景を固定する */
	background-size: 100% auto;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-bottom: 108px;
	content: "";
	z-index: -1;
}
nav .ham_menu{
    background-color: #fff;
    box-sizing: border-box;
    height: 100%;
    padding: 0px; /*メニュー内左右上下余白*/
    position: fixed;
    right: -300px; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: .2s ease-in-out;
    width: 300px;
    z-index: 1000;
}
nav .ham_menu ul{
	list-style:none;
}
nav .ham_menu ul li{
	border-bottom:1px #e8f1ff dashed;
	width:300px;
	margin:0 20px;
}
nav .ham_menu ul li a{
	color:#5193f7;
	display:block;
	font-size:16px;
	width:100%;
	height:100%;
	padding:14px 0;
}
nav .menu_background {
    background-color: #333; /*黒背景*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: .2s ease-in-out;
    width: 100%;
    z-index: -1;
}
nav .menu_icon {
    color: #fff;
    cursor: pointer;
    display: block;
    height: 50px;
    line-height: 50px;  /*縦位置中央*/
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px;
    transition: .2s ease-in-out;
    z-index: 1000;
}
nav .menu_icon::before {
	font-family:'Font Awesome 6 Pro';
	content: '\f0c9';
	font-size: 32px;
}
nav .menu_cb:checked ~ label#menu_icon::before {
	content: '\f00d';
}
nav .menu_cb {
    display: none; /*チェックボックス本体は消しておく*/
}
nav .menu_cb:checked ~ #ham_menu,
nav .menu_cb:checked ~ #menu_icon {
    transform: translate(-300px); /*メニュー本体横幅 width と合わせる*/
}
nav .menu_cb:checked ~ #menu_background {
    opacity: 0.5;
    z-index: 999;
}
@media only screen and (max-width: 320px){/* iphone5/se用 */
	nav .ham_menu {
		right: -240px;
		width: 240px;
	}
	nav .ham_menu ul li{
		width:240px;
	}
	nav .ham_menu ul li a{
	font-size:14px;
}
	nav .menu_cb:checked ~ #ham_menu,
	nav .menu_cb:checked ~ #menu_icon {
    transform: translate(-240px); /*メニュー本体横幅 width と合わせる*/
	}
}
/*--------------------------------------------------------
 ■ 更新メッセージ付きナビ
--------------------------------------------------------*/
div.nav_update_message{
	background:#ea9c2e;/* 青色だとnavの色と被り、目立ちづらいため黄色に */
	position: fixed;
	display:flex;
	justify-content: center;
	align-items: center;
	top: 0;
	width: 100%;
	min-height:50px;
	transform: translateY(-100%);
	opacity: 0.96;
	font-weight: 600;
	z-index: 2000;
	transition: transform 0.24s cubic-bezier(0.55, 0.055, 0.675, 0.19);
	padding:0 12px;
}
@media only screen and (min-width: 1117px){
	div.nav_update_message{
		min-height:63px;
	}
}
div.nav_update_message.show {
    transform: translateY(0);
}
div.nav_update_message .message{
	display:flex;
	align-items: center;
	width:calc(100% - 40px);
	color:#fff;
	padding:10px 0;
}
@media only screen and (min-width: 1117px){
	div.nav_update_message .message{
		justify-content: center;/* 大画面のときは、文字を中央に持ってくる */
	}
}
div.nav_update_message .message i{
	font-size:18px;
}
div.nav_update_message .close_btn{
	display:flex;
	justify-content: center;
	align-items: center;
	width:40px;
	height:100%;
	color:#fff;
	font-size:20px;
	cursor: pointer;
}
div.nav_update_message .close_btn i{
	margin-right:0px;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ breadcrumb_box
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

div.breadcrumb_box{
	background-color:#e8f1ff;
	line-height:24px;
	padding:6px 0;
	border-bottom:1px solid #dddddd;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.breadcrumb_box{
		margin-bottom: var(--margin_bottom_ml);
	}
}
.breadcrumb:before{
	color: #5193f7;
	vertical-align: top;
	display: inline-block;
	font-family: "Font Awesome 6 Pro";
	content: '\f0da';/* 右のアイコン */
	font-weight:900;
	font-style: normal;
	margin: 0 15px;
	-webkit-font-smoothing: antialiased;
}
.breadcrumb:first-child:before{
	content: '\f015';/* 家のアイコン */
	margin: 0 12px 0 0;/* ホームアイコンの右マージンを調整してバランスを取る */
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ footer
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

footer{
	/* margin-bottom: 200px; */
}

/*--------------------------------------------------------
■ ul li
--------------------------------------------------------*/

footer div.footer_link{
	color: #ffffff;
	text-align: center;
	background-color: #5193f7;
	font-weight: normal;
	height: initial;
}

footer ul{
	float: right;
	margin: 10px 0;
	text-align: right;
}
@media only screen and (min-width:738px){
	footer ul{
		margin: 20px 0 0 0;
		text-align: center;
	}
}

footer ul li{
	color: #ffffff;
	font-size:14px;
	list-style-type: none;
}
@media only screen and (min-width:738px){
	footer ul li{
		float: left;
		margin: 0 0 0 20px;/* 左を空けて次のリストへのマージンを取る */
	}
}
footer ul li a{
	display: block;
	color: #ffffff;
	padding: 5px 0;
}
@media only screen and (min-width:738px){
	footer ul li a{
		padding: 0 0 20px 0;
	}
}


/*--------------------------------------------------------
■ copyright
--------------------------------------------------------*/

footer div.copyright{
	color: #ffffff;
	text-align: center;
	background-color: #2a77eb;
	font-weight: normal;
	padding: 10px;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ sub_box
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* sub_boxとは、main_boxの下に来るボックスです。
 但し、1117px以上の端末では、右にも現れます。  */
/*--------------------------------------------------------
■ border_box_title
--------------------------------------------------------*/
div.sub_box div.border_box_title{
	color: #ffffff;
	font-weight: bold;
	padding: 12px 10px;
	border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
}
@media only screen and (min-width: 738px){
	div.sub_box div.border_box_title{
	padding: 12px 15px;
	}
}
/*--------------------------------------------------------
■ border_box_content
--------------------------------------------------------*/
div.sub_box div.border_box_content{
	margin-bottom: var(--margin_bottom_s);
	padding: 10px;
	border-radius: 0px 0px 10px 10px / 0px 0px 10px 10px;
}
@media only screen and (min-width: 738px){
	div.sub_box div.border_box_content{
		padding: 10px 15px;
		margin-bottom: var(--margin_bottom_ml);
	}
}
div.sub_box div.border_box_content ul{
	margin-left: 20px;
}
div.sub_box div.border_box_content ul li a{/* paddingを設定（aタグ全体がリンクで飛べるように） */
    padding: 8px 0;
	display: block;
	color: #808080;
}

/* 色違い */
div.sub_box div.border_box_title.blue{
	border: 1px solid #5193f7;
	background-color: #5193f7;
}
div.sub_box div.border_box_content.blue{
	border: 1px solid #5193f7;
}
div.sub_box div.border_box_title.yellow{
	border: 1px solid #ea9c2e;
	background-color: #ea9c2e;
}
div.sub_box div.border_box_content.yellow{
	border: 1px solid #ea9c2e;
}
div.sub_box div.border_box_title.red{
	border: 1px solid #f45079;
	background-color: #f45079;
}
div.sub_box div.border_box_content.red{
	border: 1px solid #f45079;
}
div.sub_box div.border_box_title.black{
	border: 1px solid #000000;
	background-color: #000000;
}
div.sub_box div.border_box_content.black{
	border: 1px solid #000000;
}
/* list-style-typeの点無し */
div.sub_box div.border_box_content ul{
	margin-left: 0px;
	list-style-type: none;
}
/* 以下、各ピースのカテゴリを表示する「border_box」を想定 */
div.sub_box div.border_box_content.piece ul{/* list-style-typeの点無し */
	margin-left: 0px;
	list-style-type: none;

}
div.sub_box div.border_box_content.piece > ul > li{/* paddingを設定（上とデザイン上の統一を取るため） */
    font-weight: bold;

}
div.sub_box div.border_box_content.piece > ul > li.sub{/* 入れ子に対応 */
	margin-left: 40px;
    font-weight: normal;
	list-style-type: disc;
}

/*--------------------------------------------------------
■ adsense
--------------------------------------------------------*/

div.sub_box div.adsense{
	margin-left:-5px;
	margin-right:-5px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.sub_box div.adsense{
		margin-bottom: var(--margin_bottom_ml);
		margin-left:0px;
		margin-right:0px;
	}
}

/*--------------------------------------------------------
■ main_boxの下に位置する場合
middleサイズ以上の場合は2つに分ける。
--------------------------------------------------------*/

@media only screen and (min-width:738px){
	div.sub_box div.bottom_left_box{
		float: left;
		width: calc(50% - 20px);
		margin-right: 40px;
	}
	div.sub_box div.bottom_right_box{
		float: left;
		width: calc(50% - 20px);
	}
}
/*--------------------------------------------------------
■ 関連記事
--------------------------------------------------------*/
div.sub_box h2.article{
	font-size: 22px;
	margin-top: 0px;
	margin-bottom: var(--margin_bottom_ml);
    font-weight: bold;
    color: #606060;
    line-height: 1.4;
    position: relative;
    padding: 6px 0 6px 20px;
}
div.sub_box h2.article:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px;
    width: 6px;
    height: 100%;
    background: #5193f7;
}
div.sub_box .article_block{
	display:flex;
	gap:30px;
	flex-wrap: wrap;
	margin-bottom:50px;
}
div.sub_box .article_block .article_item{
	display:flex;
	flex-direction: column;
	position:relative;
	overflow:hidden;
	box-shadow: 0 1px 8px rgba(0,0,0,0.1);
	border-radius: 8px;
    transition: all .3s;
}
div.sub_box .article_block .article_item:hover{
     box-shadow: 0 1px 10px rgba(0,0,0,0.2), 0 0 50px rgba(128, 128, 128, 0.1) ;
}
div.sub_box .article_block .article_link{
	color:#606060;
}
div.sub_box .article_block .article_link img{
	width:100%;
}
div.sub_box .article_block .article_item .article_title{
	padding: 10px;
}
/* 左下 かつ タブレット以上の場合は2カラム */
div.left_box div.sub_box .article_block .article_item{
	width: 100%;
}
@media only screen and (min-width: 738px){
	div.left_box div.sub_box .article_block .article_item{
		width: calc((100% - 30px)/2);
	}
}
div.right_box div.sub_box .article_block .article_item{
	width: 100%;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ main_box
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*********************************************************
 ■ main_box no_class
*********************************************************/

/*--------------------------------------------------------
■ h1
--------------------------------------------------------*/

div.main_box h1{
	font-size: 20px;
	line-height: 1.4;
	margin-top: 0px;
	margin-bottom: var(--margin_bottom_s);
	font-weight: bold;
	color: #303030;
}
@media only screen and (min-width: 738px){
	div.main_box h1{
		font-size: 26px;
		margin-bottom: var(--margin_bottom_ml);
	}
}

/*--------------------------------------------------------
■ h2
--------------------------------------------------------*/

div.main_box h2{
	font-size: 19px;
	margin-top: var(--margin_top_h_s);
	margin-bottom: var(--margin_bottom_s);
	font-weight: bold;
	line-height: 1.4;
}
@media only screen and (min-width: 738px){
	div.main_box h2{
		font-size: 23px;
		margin-top: var(--margin_top_h_ml);
		margin-bottom: var(--margin_bottom_ml);
	}
}
/* h1に続く、h2だけ上マージンを調整し、h1の上下マージンの見た目バランスを取る */
div.main_box h1 + h2{
	margin-top: 0px;
}
div.main_box h2 a{
	color: #303030;
}
div.main_box h2 span.number{
	font-size: 200%;
	font-size: 150%;
	margin-right: 10px;
}
div.main_box h2.fill{
	color: #ffffff;
	padding: 8px 8px 8px 28px;
	border-radius: 28px 10px 10px 10px;
	background-color: #5193f7;
}
/* 本来のh2に加え左に線を引く */
div.main_box  h2.bar{
	position: relative;
	color: #606060;
	background-color: #ffffff;
	padding: 6px 0 6px 25px;
}
div.main_box h2.bar:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 5px;/* widthの半分 */
	width: 10px;
	height: 100%;
	background: #99dcff;
}

body.sheet_music div.breadcrumb_box{
	margin-bottom: 10px;/* 必要 */
}
body.sheet_music div.main_box img{
	margin-bottom: 10px;/* 必要 */
}
body.sheet_music div.main_box div.adsense{
	margin-top: 25px;/* 必要 */
	margin-bottom: 20px;
}
@media only screen and (min-width: 738px){
	body.sheet_music div.breadcrumb_box{
		margin-bottom: 20px;
	}
	body.sheet_music div.main_box img{
		margin-bottom: 10px;
	}
	body.sheet_music div.main_box div.adsense{
		margin-top: 0px;
		margin-bottom: 20px;
	}
}
/*--------------------------------------------------------
■ h3
--------------------------------------------------------*/

div.main_box h3{
	font-size: 18px;
	margin-top: 45px;
	margin-bottom: var(--margin_bottom_s);
	font-weight: bold;
	color: #606060;
	line-height: 1.4;
}
@media only screen and (min-width: 738px){
	div.main_box h3{
		font-size: 22px;
		margin-top: 50px;
		margin-bottom: var(--margin_bottom_ml);
	}
}
div.main_box h3 a{
	color: #606060;
}
div.main_box h3 span.number{
	font-size: 150%;
	margin-right: 10px;
}

div.main_box h1 + h3{
	margin-top: 0px;
}
div.main_box h2 + h3{
	margin-top: 0px;
}

div.main_box  h3.bar{
	position: relative;
	padding: 6px 0 6px 25px;
}
div.main_box h3.bar:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 5px;/* widthの半分 */
	width: 10px;
	height: 100%;
	background: #99dcff;
}

/*--------------------------------------------------------
■ h4
--------------------------------------------------------*/

div.main_box h4{
	font-size: 17px;
	margin-top: 45px;
	margin-bottom: var(--margin_bottom_s);
	font-weight: bold;
	color: #606060;
	line-height: 1.4;
}
@media only screen and (min-width: 738px){
	div.main_box h4{
		font-size: 20px;
		margin-top: 50px;
		margin-bottom: var(--margin_bottom_ml);
	}
}
div.main_box h4 a{
	color: #606060;
}
div.main_box h4 span.number{
	font-size: 120%;
	margin-right: 5px;
}
div.main_box h3 + h4{
	margin-top: 0px;
}

div.main_box  h4.dashed{
	border-bottom: 3px dashed #99dcff;
	padding: 6px 0;
}

/*--------------------------------------------------------
■ h5
--------------------------------------------------------*/

div.main_box h5{
	font-size: 16px;
	margin-top: 20px;
	margin-bottom: var(--margin_bottom_s);
	font-weight: bold;
	color: #606060;
	position: relative;
	padding: 6px 0 6px 25px;
	line-height: 1.4;
}
@media only screen and (min-width: 738px){
	div.main_box h5{
		font-size: 20px;
		margin-top: 25px;
		margin-bottom: var(--margin_bottom_ml);
	}
}
div.main_box h5:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 3px;
	width: 6px;
	height: 100%;
	background: #8cbaff;
}
div.main_box h5 a{
	color: #606060;
}
div.main_box h4 + h5{
	margin-top: 0px;
}

/*--------------------------------------------------------
■ p
--------------------------------------------------------*/

div.main_box p{
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box p{
		margin-bottom: var(--margin_bottom_ml);
	}
}
div.main_box p.img_title,
div.main_box p.table_title
{
	margin-bottom: 5px;
}
div.main_box p.error{
	font-weight: bold;
	color:#eb2f5d;
}

/*********************************************************
ul olについて

以下の仕様を実装するために、やや複雑になっている。

・liの中で2行になった場合、line-heightは他の要素と同じにしたい。
→ line-heightを大きくするのではなく、各liに上下5pxのパディングを設ける。・・・① 各liのパディング調整

・pタグなどの他のタグと同様、ulのmargin-bottomは25pxとしたい
→ 最初のliのmargin-topを-5px、最後のliのmargin-bottomを-5pxとする。・・・② 上下のマージン調整

*********************************************************/

/*--------------------------------------------------------
■ ul li
--------------------------------------------------------*/

div.main_box ul{
	margin-left: 25px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box ul{
		margin-bottom: var(--margin_bottom_ml);
	}
}
div.main_box ul ul,
div.main_box ol ul{/* 入れ子に対応 */
	margin-bottom: 0px;
}
div.main_box ol ul{/* 入れ子に対応 */
	list-style-type: disc;
}
div.main_box ol ol{/* 入れ子に対応 */
	list-style-type: decimal;
}
div.main_box ul li.none{/* olは番号をスキップしないため用意しない */
	list-style-type: none;
}

/* ① 各liのパディング調整 */

div.main_box ul li{
	padding: 4px 0;
}
div.main_box ul li ul li:nth-child(1),
div.main_box ul li ol li:nth-child(1){
	padding-top: 8px;/* 最初を調整 */
}

/* ② 上下のマージン調整 */

div.main_box ul li:nth-child(1){
	margin-top: -4px;/* 最初を調整 */
}
div.main_box ul li ul li:nth-child(1),
div.main_box ul li ol li:nth-child(1){
	margin-top: 0px;/* 但し、レベル2は調整しない */
}
div.main_box ul li:nth-last-child(1){
	margin-bottom: -4px;/* レベル1の最後を調整 */
}

/*--------------------------------------------------------
■ ol li
--------------------------------------------------------*/

div.main_box ol{
	margin-left: 25px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box ol{
		margin-bottom: var(--margin_bottom_ml);
	}
}
div.main_box ul ol,
div.main_box ol ol{/* 入れ子に対応 */
	margin-bottom: 0px;
}

/* ① 各liのパディング調整 */

div.main_box ol li{
	padding: 5px 0;
}
div.main_box ol li ul li:nth-child(1),
div.main_box ol li ol li:nth-child(1){
	padding-top: 10px;/* 最初を調整 */
}
div.main_box ol li ul li:nth-last-child(1),
div.main_box ol li ol li:nth-last-child(1){
	padding-bottom: 0px;/* 最後を調整 */
}

/* ② 上下のマージン調整 */

div.main_box ol li:nth-child(1){
	margin-top: -5px;/* 最初を調整 */
}
div.main_box ol li ul li:nth-child(1),
div.main_box ol li ol li:nth-child(1){
	margin-top: 0px;/* 但し、レベル2は調整しない */
}
div.main_box ol li:nth-last-child(1){
	margin-bottom: -5px;/* レベル1の最後を調整 */
}
div.main_box ol li ul li:nth-last-child(1),
div.main_box ol li ol li:nth-last-child(1){
	margin-bottom: 0px;/* 但し、レベル2は調整しない */
}

/*--------------------------------------------------------
■ hr 水色の破線
--------------------------------------------------------*/

div.main_box hr{
	border: 0;
	border-top: 1.5px dashed #99c2ff;
	background: #ffffff;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box hr{
		border-top: 2px dashed #99c2ff;
		margin-bottom: var(--margin_bottom_ml);
	}
}
/*--------------------------------------------------------
■ img
--------------------------------------------------------*/

div.main_box img{
	width:100%;
	max-width:100%;
	height:auto;
	margin-bottom: var(--margin_bottom_s);
	vertical-align:bottom;
}
@media only screen and (min-width: 738px){
	div.main_box img{
		margin-bottom: var(--margin_bottom_ml);
	}
}

div.main_box img.iwa_image{
	cursor:pointer;
}

/*--------------------------------------------------------
■ video
--------------------------------------------------------*/

div.main_box video{
	width:100%;
	max-width:100%;
	height:auto;
	margin-bottom: var(--margin_bottom_s);
	vertical-align:bottom;
}
@media only screen and (min-width: 738px){
	div.main_box video{
		margin-bottom: var(--margin_bottom_ml);
	}
}

/*********************************************************
■ main_box common（広範囲に影響を与えるクラス）※ 全controller共通の前提
*********************************************************/
/*--------------------------------------------------------
■ 検索ボックス
--------------------------------------------------------*/
div.main_box #search_form{
	position:relative;
	width:100%;
	min-width:300px;
}
div.main_box input#search_box{ /* スマホ版でも検索ウィンドウのサイズ同じ*/
	height:50px;
	padding-right:50px;
}
div.main_box button.search_btn{ /* 虫眼鏡アイコン */
	position:absolute;
	right:10px;/*アイコン左右の位置調整*/
	top:11px; /*見た目で調整*/
	background:none;
	color:#808080;
	border:none;
	font-size:20px;/*アイコンサイズ*/
	cursor: pointer;
}
div.main_box .search_btn i{
	margin:0px 0px;
}

/*--------------------------------------------------------
■ スクロールバー
--------------------------------------------------------*/
div.main_box #vertical_scroll_box{
	overflow-y: scroll;
	overflow-x: hidden;
	/* スクロールをなめらかにするプロパティ。
	しかし、これをONにしていると、スクロール内の領域のうち「初期描写範囲」外をクリックした時に
	色変更などができなくなる不具合がある。場合によってはコメントアウト */
	-webkit-overflow-scrolling: touch;
	/* ※heightは使う箇所に応じて適宜設定する */
}
div.main_box #vertical_scroll_box::-webkit-scrollbar {/* スクロールの幅の設定 */
	width: 12px;
}
div.main_box #vertical_scroll_box::-webkit-scrollbar-track {/* スクロールの背景の設定 */
	border-radius: 5px;
	box-shadow: 0 0 4px #aaa inset;
}
div.main_box #vertical_scroll_box::-webkit-scrollbar-thumb {/* スクロールのつまみ部分の設定 */
	 border-radius: 5px;
	 background: #d8d8d8;
}

/*********************************************************
■ main_box specific（main_box内で局所的に影響を与えるクラス）
 （div.main_box div.page_link_box）
*********************************************************/

/*=================================
■ 全controller共通
=================================*/

/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
■ box
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

/*--------------------------------------------------------
■ page_link_box
--------------------------------------------------------*/

div.main_box div.page_link_box{
	padding: 10px 10px 10px 10px;
	overflow: hidden;/*子要素のmargin-bottomを有効化させるために必要*/
	margin-bottom: var(--margin_bottom_s);
	border-top:5px solid #5193f7;
	background-color:#f4f8ff;
	border-radius: 0px 0px 20px 20px / 0px 0px 20px 20px;
}
@media only screen and (min-width: 738px){
	div.main_box div.page_link_box{
		padding: 15px 15px 15px 15px;
		margin-bottom: var(--margin_bottom_ml);
	}
}
div.main_box div.page_link_box div.title{/* クラス名変更 */
	font-size: 16px;
	font-weight: bold;
	color: #5193f7;
	text-align: center;
	margin-bottom: 10px;
}
@media only screen and (min-width: 738px){
	div.main_box div.page_link_box div.title{
		margin-bottom: 15px;
		font-size: 17px;
	}
}

div.main_box div.page_link_box ul,
div.main_box div.page_link_box ol,
div.main_box div.page_link_box ul a,
div.main_box div.page_link_box ol a{
	font-weight: bold;
	color: #606060;
	margin-bottom:0px;/* box内のul,olのmargin-bottomは無くす */
}

div.main_box div.page_link_box ul ul,
div.main_box div.page_link_box ul ol,
div.main_box div.page_link_box ol ul,
div.main_box div.page_link_box ol ol,
div.main_box div.page_link_box ul ul a,
div.main_box div.page_link_box ul ol a,
div.main_box div.page_link_box ol ul a,
div.main_box div.page_link_box ol ol a{
	font-weight: normal;
	color: #808080;
}

/*--------------------------------------------------------
li全体をリンクにするための調整
--------------------------------------------------------*/

div.main_box div.page_link_box a{
	display: block;
	padding:4px 0;
	padding:6px 0;
}
/* aタグがパディングを受け持つため「① 各liのパディング調整」（←で検索）を上書き調整 */
div.main_box div.page_link_box ol li,
div.main_box div.page_link_box ul li{
	padding: 0;
}
div.main_box div.page_link_box ol li ol li:nth-child(1),
div.main_box div.page_link_box ol li ul li:nth-child(1),
div.main_box div.page_link_box ul li ol li:nth-child(1),
div.main_box div.page_link_box ul li ul li:nth-child(1){
	padding-top: 0;/* 最初を調整 */
}
/*--------------------------------------------------------
■ border_box
--------------------------------------------------------*/
div.main_box div.border_box{
	position: relative;
	margin-top: 25px;/* タイトルの位置を-10するため、前の要素とのマージンを25px（15 + 10）取る。 */
	margin-bottom: var(--margin_bottom_s);
	padding: 12px 10px 0px 10px;/* padding-topはタイトルのはみだし分余裕を持たせる*/
	border-radius: 20px;
}
@media only screen and (min-width: 738px){
	div.main_box div.border_box{
		margin-top: 30px;/* タイトルの位置を-10するため、前の要素とのマージンを35px（25 + 10）取る。 */
		margin-bottom: var(--margin_bottom_ml);
		padding: 16px 15px 0px 15px;/* padding-topはタイトルのはみだし分余裕を持たせる*/
	}
}
div.main_box div.border_box div.title{
	position: absolute;
	top: -10px;
	left: 10px;
	padding: 0 5px;
	background: #ffffff;
	font-size: 16px;
	line-height: 1;
	font-weight: bold;
}
@media only screen and (min-width: 738px){
	div.main_box div.border_box div.title{
		padding: 0 15px;
		font-size: 17px;
	}
}
/* 色違い */
div.main_box div.border_box.blue{
	border: dashed 3px #5193f7;
}
div.main_box div.border_box.red{
	border: dashed 3px #f45079;
}
div.main_box div.border_box.yellow{
	border: dashed 3px #ea9c2e;
}
div.main_box div.border_box.blue strong{
	border-bottom: dashed 2px #5193f7;
}
div.main_box div.border_box.red strong{
	border-bottom: dashed 2px #f45079;
}
div.main_box div.border_box.red strong.red{
	border-bottom: none;
	color:#f45079;
	font-size:1.1em;
}
div.main_box div.border_box.yellow strong{
	border-bottom: dashed 2px #ea9c2e;
}
div.main_box div.border_box.blue div.title{
	color: #5193f7;
}
div.main_box div.border_box.red div.title{
	color: #f45079;
}
div.main_box div.border_box.yellow div.title{
	color: #ea9c2e;
}

/* ボックス内要素 */
div.main_box div.border_box p,
div.main_box div.border_box ul,
div.main_box div.border_box ol,
div.main_box div.border_box img,
div.main_box div.border_box div.mswa_ms{
	margin-bottom: 8px;/* boxの左右paddingは10pxだが、文字列にはline-height:1.5の影響で上下に余白が生まれるため、8pxとした */
}
div.main_box div.border_box ul ul,
div.main_box div.border_box ul ol,
div.main_box div.border_box ol ul,
div.main_box div.border_box ol ol{
	margin-bottom: 8px;/* boxの左右paddingは10pxだが、文字列にはline-height:1.5の影響で上下に余白が生まれるため、8pxとした */
}
@media only screen and (min-width: 738px){
	div.main_box div.border_box p,
	div.main_box div.border_box ul,
	div.main_box div.border_box ol,
	div.main_box div.border_box img,
	div.main_box div.border_box div.mswa_ms{
		margin-bottom: 10px;/* boxの左右paddingは15pxだが、文字列にはline-height:1.7の影響で上下に余白が生まれるため、10pxとした */
	}
	div.main_box div.border_box ul ul,
	div.main_box div.border_box ul ol,
	div.main_box div.border_box ol ul,
	div.main_box div.border_box ol ol{
		margin-bottom: 10px;/* boxの左右paddingは15pxだが、文字列にはline-height:1.7の影響で上下に余白が生まれるため、10pxとした */
	}
}
/*--------------------------------------------------------
■ background_box
--------------------------------------------------------*/
div.main_box div.background_box{
	padding: 7px 10px 0 10px;/* padding-topはタイトルのline-heightの影響でアイコンの上には3pxの余白があるため、(取りたい余白10px)-3px=7pxとした */
	overflow: hidden;/* 子要素のmargin-bottomを有効化させるために必要 */
	margin-bottom: var(--margin_bottom_s);
	border-radius: 20px;
}
@media only screen and (min-width: 738px){
	div.main_box div.background_box{
		padding:11px 15px 0 15px;/* padding-topはタイトルのline-heightの影響で文字の上には4pxの余白があるため、(取りたい余白15px)-4px=11pxとした */
		margin-bottom: var(--margin_bottom_ml);
	}
}

div.main_box div.background_box div.title{
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 2px;/* 取りたい余白10px-(タイトルのline-height分の余白3px+文字列の余白5px)=2px */
}
@media only screen and (min-width: 738px){
	div.main_box div.background_box div.title{
		font-size: 17px;
		margin-bottom: 6px;/* 取りたい余白15px-(タイトルのline-height分の余白4px+文字列の余白5px)=6px */
	}
}

/* 色違い */
div.main_box div.background_box.blue{
	background-color: #e8f1ff;
}
div.main_box div.background_box.yellow{
	background-color: #fff0db;
}
div.main_box div.background_box.red{
	background-color: #ffe8ed;
}


div.main_box div.background_box.blue div.title{
	color: #5193f7;
}
div.main_box div.background_box.yellow div.title{
	color: #ea9c2e;
}
div.main_box div.background_box.red div.title{
	color: #f45079;
}

div.main_box div.background_box.blue strong{
	border-bottom: dashed 2px #5193f7;
}
div.main_box div.background_box.red strong{
	border-bottom: dashed 2px #f45079;
}
div.main_box div.background_box.red strong.red{
	border-bottom: none;
	color:#f45079;
	font-size:1.1em;
}
div.main_box div.background_box.yellow strong{
	border-bottom: dashed 2px #ea9c2e;
}
div.main_box div.background_box.blue a{
	color:#5193f7;
}
div.main_box div.background_box.red a{
	color:#f45079;
}
div.main_box div.background_box.yellow a{
	color:#ea9c2e;
}
/* 丸数字のリスト */
div.main_box div.background_box .ol_circle ol{
	list-style-type:none;
	margin-left:0px;
	counter-reset: list-counter;
}
div.main_box div.background_box .ol_circle li{
	position:relative;
	padding-left:34px;
}
div.main_box div.background_box .ol_circle li:before{
	display: flex;
	align-items: center;
	justify-content:center;
    position: absolute;
    left: 0;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
    border-radius: 50%;
    color: #fff;
    counter-increment: list-counter;
    content: counter(list-counter);
    font-weight:bold;
}
/* 色違い */
div.main_box div.background_box.blue .ol_circle li:before{
	background: #5193f7;
}
div.main_box div.background_box.red .ol_circle li:before{
	background: #f45079;
}
div.main_box div.background_box.yellow .ol_circle li:before{
	background:#ea9c2e;
}
div.main_box div.background_box .ol_circle .title{
	margin-bottom:10px;
}
@media only screen and (min-width: 738px){
	div.main_box div.background_box .ol_circle .title{
	    margin-bottom:15px;
	}
}
/* ボックス内要素 */
div.main_box div.background_box p,
div.main_box div.background_box ul,
div.main_box div.background_box ol,
div.main_box div.background_box img,
div.main_box div.background_box div.mswa_ms{
	margin-bottom: 8px;/* 取りたい余白は10pxだが、文字列にはline-height:1.5の影響で上下に余白が生まれるため、8pxとした */
}
div.main_box div.background_box ul ul,
div.main_box div.background_box ul ol,
div.main_box div.background_box ol ul,
div.main_box div.background_box ol ol{
	margin-bottom: 8px;/* 取りたい余白は10pxだが、文字列にはline-height:1.5の影響で上下に余白が生まれるため、8pxとした */
}
/* ボックス内要素 */
@media only screen and (min-width: 738px){
	div.main_box div.background_box p,
	div.main_box div.background_box ul,
	div.main_box div.background_box ol,
	div.main_box div.background_box img,
	div.main_box div.background_box div.mswa_ms{
		margin-bottom: 10px;/* 取りたい余白は15pxだが、文字列にはline-height:1.7の影響で上下に余白が生まれるため、10pxとした */
	}
	div.main_box div.background_box ul ul,
	div.main_box div.background_box ul ol,
	div.main_box div.background_box ol ul,
	div.main_box div.background_box ol ol{
		margin-bottom: 10px;/* 取りたい余白は15pxだが、文字列にはline-height:1.7の影響で上下に余白が生まれるため、10pxとした */
	}
}
/*--------------------------------------------------------
■ blue_title_box
--------------------------------------------------------*/
div.main_box div.blue_title{
	padding: 8px 10px 8px 10px;
	border-radius: 10px 10px 0 0;
	background: #5193f7;
	color:#fff;
	font-size: 16px;
	position: relative;/* アイコンを正しく配置するのに必要 */
	width:100%;
}
@media only screen and (min-width: 738px){
	div.main_box div.blue_title{
		font-size: 17px;
	}
}
div.main_box div.blue_title i{/* アイコン */
	color:#fff;
	font-size:22px;
	position:absolute;
	top:calc((100% - 22px) /2);/* 22pxはアイコンのheight */
	left:20px;
	width:20px;
}
div.main_box div.blue_title span{/*  タイトルの文字列*/
	margin-left:50px;
	font-weight:bold;
	max-width:calc(100% - 50px);/* 50px = margin-left 50px */
	display:inline-block;
}
/* 本体部分 */
div.main_box div.blue_title_box{
	position: relative;
	background: #fff;
	border:#5193f7 1px solid;
	border-radius: 0 0 10px 10px;
	width:100%;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box div.blue_title_box{
		margin-bottom: var(--margin_bottom_ml);
	}
}
/* 中身部分 */
/*--------------------------------------------------------
■ fixed_th_scroll_block
--------------------------------------------------------*/
div.main_box div.blue_title_box .fixed_th_scroll_block{
	border-top:none;
	padding:0 10px 10px 10px;
}
/*--------------------------------------------------------
スクロールバー
--------------------------------------------------------*/
div.main_box div.blue_title_box .fixed_th_scroll_block #vertical_scroll_box{
	max-height: 600px;
}

div.main_box div.blue_title_box .fixed_th_scroll_block #vertical_scroll_box::-webkit-scrollbar-track{/* スクロールの背景の設定 */
	margin:10px 0 0 0;
}

/*--------------------------------------------------------
検索結果0のとき
--------------------------------------------------------*/
div.main_box div.blue_title_box .fixed_th_scroll_block .search_result_zero{
	margin:10px 0 0 0;
	text-align:center;
}
/*--------------------------------------------------------
fixed_th_scroll_table
--------------------------------------------------------*/

div.main_box div.blue_title_box table.fixed_th_scroll_table{
	width:100%;
	margin-bottom:0px;
    border-top: none;
}
@media only screen and (min-width: 738px){
	div.main_box div.blue_title_box table.fixed_th_scroll_table{
		width:calc(100% - 10px);
		margin-right:10px;
	}
}
div.main_box div.blue_title_box table.fixed_th_scroll_table thead tr{
	text-align:center;
	width:100%;
	margin:0 -10px;
}
div.main_box div.blue_title_box table.fixed_th_scroll_table thead tr th{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1;/* 	tbody内のセルより手前に表示する */
	background:#fff;
	padding:9px;
	text-align:center;
}
div.main_box div.blue_title_box table.fixed_th_scroll_table tr td{
	word-break: break-all;/* 文字折返し */
	padding:9px;
}
@media only screen and (min-width: 738px){
	div.main_box div.blue_title_box table.fixed_th_scroll_table thead tr th,
	div.main_box div.blue_title_box table.fixed_th_scroll_table tr td{
		padding:12px
	}
}
div.main_box div.blue_title_box table.fixed_th_scroll_table tr td .checkbox,
div.main_box div.blue_title_box table.fixed_th_scroll_table tr th .checkbox {
	text-align:center;
	width:20px;
	margin:0px;
}
div.main_box div.blue_title_box table.fixed_th_scroll_table tr td .checkbox input,
div.main_box div.blue_title_box table.fixed_th_scroll_table tr th .checkbox input {
	position:static; /*  absoluteを解除する */
	display:none;/* デフォルトのチェックボックスを消す */
}
div.main_box div.blue_title_box table.fixed_th_scroll_table tr td .checkbox label,
div.main_box div.blue_title_box table.fixed_th_scroll_table tr th .checkbox label {
	height:20px;
    margin-left: 0px;
    padding:0px;
    display: flex;
    align-items: center;
}
div.main_box div.blue_title_box table.fixed_th_scroll_table tr td .checkbox label:before,
div.main_box div.blue_title_box table.fixed_th_scroll_table tr th .checkbox label:before {
	left:0;
}

div.main_box div.blue_title_box table.fixed_th_scroll_table tr td .checkbox input[type="checkbox"]:checked + label:after,
div.main_box div.blue_title_box table.fixed_th_scroll_table tr th .checkbox input[type="checkbox"]:checked + label:after{
	left:4px;
}
div.main_box div.blue_title_box table.fixed_th_scroll_table tr td .checkbox input:disabled + label,
div.main_box div.blue_title_box table.fixed_th_scroll_table tr th .checkbox input:disabled + label {
    cursor: not-allowed;
    opacity: 0.5; /* ラベル全体（チェックマーク含む）を薄く */
}

div.main_box div.blue_title_box table.fixed_th_scroll_table tr td .checkbox input:disabled + label:before,
div.main_box div.blue_title_box table.fixed_th_scroll_table tr th .checkbox input:disabled + label:before {
    background-color: #eee; /* ボックスをややグレーに */
    border-color: #ccc;     /* 枠線も薄めに */
}
div.main_box div.blue_title_box table.fixed_th_scroll_table tr:hover td {
    cursor: pointer;
}
div.main_box div.blue_title_box table.fixed_th_scroll_table tr:has(input:disabled) td {
    cursor: not-allowed;
}
div.main_box div.blue_title_box table.fixed_th_scroll_table tr.clicked td {
    background: #e8f1ff ;
    cursor: pointer;
}
div.main_box div.blue_title_box table.fixed_th_scroll_table tr td a.dummy{
	color:#606060;
}
@media only screen and (max-width: 320px){/* iphone5/se用 */
	div.main_box div.blue_title_box table.fixed_th_scroll_table tr th,
	div.main_box div.blue_title_box table.fixed_th_scroll_table thead tr th{
		padding:5px;
	}
	div.main_box div.blue_title_box table.fixed_th_scroll_table tr td{
		padding:5px;
	}
	div.main_box div.blue_title_box table.fixed_th_scroll_table thead tr th.check{
	width:36px;
	}
}

/*--------------------------------------------------------
■ blue_th_link_block
--------------------------------------------------------*/
/* 見出し */
div.main_box div.blue_title_box div.blue_th_link_block h3.heading{
	background:#e8f1ff ;
	color:#5193f7;
    display: block;
    font-size:16px;
    padding: 8px;
    position: relative;
    margin-top:0px;
    margin-bottom:0px ;
    border-radius:0;
}
div.main_box div.blue_title_box div.blue_th_link_block h3.heading:first-child{
	border-top:none;
}
div.main_box div.blue_title_box div.blue_th_link_block h3.heading a.link{/*ヘッダーにリンク有りのスタイル*/
	color:#5193f7;
	text-decoration:underline;
}
div.main_box div.blue_title_box div.blue_th_link_block h3.heading a.head_no_link{/*ヘッダーにリンク無しのスタイル*/
	color:#5193f7;
	cursor:auto;
}
/*データにリンク無しのスタイル*/
div.main_box div.blue_title_box div.blue_th_link_block a.no_link{
	color:#808080;
}

div.main_box div.blue_title_box div.blue_th_link_block ul.data_group{
    padding: 10px 10px 0 10px;
    margin:0;
    letter-spacing: -.4em;/* 文字間を詰めて横並びリストの隙間をなくす */
}
div.main_box div.blue_title_box div.blue_th_link_block ul.data_group li{
	display:inline-block;
	padding-top:0px;
	padding-bottom:10px;
	letter-spacing: normal;
	margin-right:20px;
	margin-bottom:0px;
}
div.main_box div.blue_title_box div.blue_th_link_block ul.data_group li i{
	font-size:18px;
}
@media only screen and (min-width: 738px){
	div.main_box div.blue_title_box div.blue_th_link_block h3.heading{
		padding: 8px 15px;
		font-size:17px;
	}
}
/*--------------------------------------------------------
■ adsense
--------------------------------------------------------*/

div.main_box div.adsense{
	margin-left:-5px;
	margin-right:-5px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box div.adsense{
		margin-left:0px;
		margin-right:0px;
		margin-bottom: var(--margin_bottom_ml);
	}
}

/*--------------------------------------------------------
■ accordion_block
--------------------------------------------------------*/
div.main_box .accordion_block{
	width:100%;
}
div.main_box .accordion_block .accordion_item{
	width:100%;
	display:-webkit-box;
  	display:-ms-flexbox;
	display:flex;
	border-radius:10px;
	box-sizing:border-box;
	min-height:70px;
}
div.main_box .accordion_block .accordion_item.item_visible{
	padding:10px;
	margin-bottom: var(--margin_bottom_s);
	background:#5193f7;
	color:#fff;
	cursor:pointer;
}
@media only screen and (min-width: 738px){
	div.main_box .accordion_block .accordion_item.item_hidden{
		padding-top: 20px;
		margin-bottom: var(--margin_bottom_ml);
	}
}
div.main_box .accordion_block .accordion_item.item_visible.active{
	border-radius:10px 10px 0 0;
	margin-bottom:0px;
}
div.main_box .accordion_block .accordion_item.item_hidden{
	background:#e8f1ff;
	border-radius:0 0 10px 10px;
	display:none;
	padding: 15px 10px 0px 10px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box .accordion_block .accordion_item.item_hidden{
		padding-top: 20px;
		margin-bottom: var(--margin_bottom_ml);
	}
}
div.main_box .accordion_block .accordion_item.item_visible .txt{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	width:calc(100% - 30px - 10px);/* 30pxはアイコンのwidth、10pxはtxtの右margin */
	margin-right:10px;
	font-weight:bold;
}
div.main_box .accordion_block .accordion_item.item_hidden .txt .blue{
	color:#5193f7;
	margin-bottom:20px;
}
div.main_box .accordion_block .accordion_item.item_visible .icon{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
	width:30px;
}
/* プラス／マイナスアイコン */
div.main_box .accordion_block .accordion_item.item_visible .icon i{
	font-size:22px;
	color:#fff;
	margin-right:0px;
}
/*--------------------------------------------------------
■ SNSボタン
--------------------------------------------------------*/
.sns_account_block{
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	max-width: 100%;
	margin-top:15px
}
@media only screen and (min-width: 738px){
	.sns_account_block{
		margin-top:0;
	}
}
.sns_account_block .title{
	margin-bottom: var(--margin_bottom_s);
	font-size: 16px;
	font-weight:bold;
}
.sns_account_block .content .sns_account_list{
	display: flex;
	margin:0;
	gap:20px;
	list-style: none;
	justify-content: center;
}
.sns_account_block .content .sns_account_list a{
	display:block;
	width:50px;
	height:50px;
}
.sns_account_block .content .sns_account_list img{
	width:50px;
	height:50px;
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
■ 入力フォーム系
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/*--------------------------------------------------------
■ フォームタイトル
--------------------------------------------------------*/

div.main_box div.form_block{
	margin-top: 15px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box div.form_block{
		margin-bottom: var(--margin_bottom_ml);;
		margin-top: 20px;
	}
}
div.main_box div.form_title{
	font-weight: bold;
	font-size: 16px;
	margin-bottom:7.5px;
}
@media only screen and (min-width: 738px){
	div.main_box div.form_title{
		font-size: 20px;
		margin-bottom:10px;
	}
}
div.main_box div.value{
	margin-right: 7.5px;
	width: 75%;
}
@media only screen and (min-width: 738px){
	div.main_box div.value{
		margin-right:10px;
		width:60%;
	}
}
div.main_box mark.required{
    color: #ffffff;
    background-color: #eb2f5d;/* style_memo.cssに沿って。赤系SWスウォッチ1より */
    margin-left: 6px;
    font-size: 10px;
    padding:2px 8px;
    border-radius: 8px;
    vertical-align:2px;/* 上下中央になるよう調整 */
}
@media only screen and (min-width: 738px){
	div.main_box mark.required{
	    margin-left: 10px;
		font-size: 12px;
	}
}
div.main_box mark.optional{
    color: #ffffff;
    background-color: #ea9c2e;/* style_memo.cssに沿って。黄系SWスウォッチ1より */
	margin-left: 6px;
    font-size: 10px;
    padding:2px 8px;
    border-radius: 8px;
	vertical-align:2px;/* 上下中央になるよう調整 */
}
@media only screen and (min-width: 738px){
	div.main_box mark.optional{
	    margin-left: 10px;
	    font-size: 12px;
	}
}
/*--------------------------------------------------------
■ テキストボックス
--------------------------------------------------------*/

div.main_box div.flex{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

div.main_box input[type="text"],
div.main_box input[type="number"],
div.main_box input[type="email"],
div.main_box input[type="password"],
div.main_box input[type="search"]{/* textボックスにのみ対応するスタイル */
	border: 2px solid #d8d8d8;/* style_memo.cssに沿って。白黒系より。 */
	border-radius:3px;
	background-color: #e8f1ff;
	cursor:text;
	-webkit-appearance: none;/* iPhone表示時に上に影ができる問題を修正 */
	width:100%;
	padding:0px 7.5px;/* heightで調整済みなので上下padding不要。iOSでプレイスフォルダがずれる問題があるが仕様とする */
	height:40px;
	font: 400 15px Arial;/* Chromeのユーザーエージェント仕様に合わせる */
}
@media only screen and (min-width: 738px){
	div.main_box input[type="text"],
	div.main_box input[type="number"],
	div.main_box input[type="email"],
	div.main_box input[type="password"],
	div.main_box input[type="search"]{
		padding:0px 10px;
		height:50px;
		font-size:16px;
	}
}
div.main_box input[type="text"]::placeholder,
div.main_box input[type="number"]::placeholder,
div.main_box input[type="email"]::placeholder {
  color: #c0c0c0;
}
input[type="search"] {
  -webkit-appearance: searchfield;
}
/* input[type="search"]のバツボタンを非表示 */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
/*--------------------------------------------------------
■ テキストエリア
--------------------------------------------------------*/

div.main_box textarea{
	border: 2px solid #d8d8d8;/* main.cssに書くのなら他と同居できるように */
	background-color: #e8f1ff;
	border-radius:3px;
    padding:10px;
    width: 100%;
    max-width:100%;
    min-height: 140px;
    line-height: 1.2;
    -webkit-appearance: none;
    overflow-y: scroll;/* スマホ版はスクロールさせる */
	-webkit-overflow-scrolling: touch;
	display: block;
	cursor:text;
	font: 400 16px Arial;/* Chromeのユーザーエージェント仕様に合わせる */
}

@media only screen and (min-width: 738px){
	div.main_box textarea{
    	min-height: 100px;
		overflow-y: visible;
	}
}
div.main_box textarea::placeholder {
  color: #c0c0c0;
}

/*--------------------------------------------------------
■ ラジオボタン
--------------------------------------------------------*/

div.main_box .radio input{/* 他の入力フォーム同様、タブ移動＆スペースで移動できるように（display:noneだとタブ移動できなくなる） */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
}
div.main_box .radio label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 10px;/* 左を揃えるように */
	padding: 8px 20px;
}
div.main_box .radio label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #dee2e6;
	border-radius: 50%;
}
div.main_box .radio input[type="radio"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #5193f7;
}

/*--------------------------------------------------------
■ チェックボックス
--------------------------------------------------------*/

div.main_box .checkbox input{/* 他の入力フォーム同様、タブ移動＆スペースで移動できるように（display:noneだとタブ移動できなくなる） */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:3px;
}
div.main_box .checkbox label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 10px;/* 左を揃えるように */
	padding: 8px 20px;
}

div.main_box .checkbox label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #dee2e6;
}
div.main_box .checkbox input[type="checkbox"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -6px;
	margin-top: -5px;
	/* ↓の5行。透明な長方形の左と下にボーダーを引き、それを反時計回りに45度回転させることによって、チェックマークをデザインしている */
	width: 12px;
	height: 8px;
	border-left: 3px solid #0171bd;
	border-bottom: 3px solid #0171bd;
	transform: rotate(-45deg);
}

/*--------------------------------------------------------
■ 写真のアップロードボックス
--------------------------------------------------------*/
div.main_box div.img_upload_box_container{
	font-size:0px;
}
div.main_box div.img_upload_box{
    display: inline-block;
    position: relative;
    cursor: pointer;
}
div.main_box input[type="file"] {
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    font-size: 100px;
    cursor: pointer;
    height:100%;
    width:100%;
}
div.main_box div.img_upload_box label {
   background: #e8f1ff;
   border: 2px solid #d8d8d8;
   padding: 10px;
   border-radius: 3px;
   display: inline-block;
   position: relative;
   height:300px;
   width:100%;
}
div.main_box div.img_upload_box label i.fa-file{
	font-size:40px;
	position:absolute;
	top:30%;
	left:calc(50% - 15px);
	margin-right:0px;
	color:#dddddd;
}
div.main_box div.img_upload_box span.insert_img_txt{
	position:absolute;
	top:calc(50% - 20px);
	padding:10px;
	left:0;
	font-size:15px;
}
div.main_box div.img_upload_box div.update_img_txt {
   display:none;
}
div.main_box div.img_upload_box button.clear_img_btn{
    opacity: 1;
    padding: 4px 8px;
    color: #5193f7;
    z-index: 7;
    border: 2px solid #5193f7;
    border-radius: 5px;
    position:absolute;
    top: auto;
    bottom:10px;
    right:10px;
    background:transparent;
    display: none;
    cursor: pointer;
}
div.main_box div.img_upload_box .img_display_box img{
   max-height:238px;
   width:auto;
}
/*--------------------------------------------------------
■ 動画のアップロードボックス
--------------------------------------------------------*/
div.main_box div.video_upload_box_container{
    font-size:0px;
}
div.main_box div.video_upload_box{
    display: inline-block;
    position: relative;
    cursor: pointer;
}
div.main_box input[type="file"] {
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    font-size: 100px;
    cursor: pointer;
    height:100%;
    width:100%;
}
div.main_box div.video_upload_box label {
    background: #e8f1ff;
    border: 2px solid #d8d8d8;
    padding: 10px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    height: 300px;
    width: 100%;
}
div.main_box div.video_upload_box label i.fa-file{
    font-size:40px;
    position:absolute;
    top:30%;
    left:calc(50% - 15px);
    margin-right:0px;
    color:#dddddd;
}
div.main_box div.video_upload_box span.insert_video_txt{
    position:absolute;
    top:calc(50% - 20px);
    padding:10px;
    left:0;
    font-size:15px;
}
div.main_box div.video_upload_box div.update_video_txt {
    display:none;
}
div.main_box div.video_upload_box button.clear_video_btn{
    opacity: 1;
    padding: 4px 8px;
    color: #5193f7;
    z-index: 7;
    border: 2px solid #5193f7;
    border-radius: 5px;
    position:absolute;
    top: auto;
    bottom:10px;
    right:10px;
    background:transparent;
    display: none;
    cursor: pointer;
}
div.main_box div.video_upload_box .video_display_box video{
    max-height:238px;
    width:100%;
}
/*--------------------------------------------------------
■ コメントとエラーメッセージ
--------------------------------------------------------*/

div.main_box div.comment{
	color:#808080;
	font-size: 12px;
	margin-bottom:9px;
	margin-top:3px;
}
@media only screen and (min-width: 738px){
	div.main_box div.comment{
		font-size: 14px;
		margin-bottom:12px;
		margin-top:4px;
	}
}

div.main_box div.info{/* インフォメッセージ */
	font-weight: bold;
	color:#25ae78;
}

div.main_box div.error{/* エラーメッセージ */
	font-weight: bold;
	color:#eb2f5d;
}
/* 背景色付きのエラーメッセージ */
div.main_box div.background_error{/* 初期表示は非表示(display:noneだが、jsでdisplay:blockにすることで表示させる */
	font-weight: bold;
    color: #eb2f5d;
	text-align:center;
	background-color:#ffe8ed;
	margin:0px auto 15px auto;
	padding:7.5px 22.5px;
	max-width:300px;
	font-size:10.5px;
	border-radius:6px;
}
@media only screen and (min-width: 738px){
	div.main_box div.background_error{
		margin:0px auto 25px auto;
		padding:10px 30px ;
		max-width:400px;
		font-size:14px;
		border-radius:8px;
	}
}
/* 上部のオブジェクトのlast_margin_bottomを考慮し、ネガティブマージンを与えたメッセージ */
div.main_box div.comment.negative_margin{
	margin-top: calc(var(--margin_bottom_s) * -1);
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box div.negative_margin{
		margin-top: calc(var(--margin_bottom_ml) * -1);
		margin-bottom: var(--margin_bottom_ml)
	}
}
div.main_box div.comment.cb_radio_bottom{/* チェックボックスやラジオボタンの下に来るメッセージ */
	margin-top:-5px;
}
div.main_box div.comment.margin_none{/* チェックボックスやラジオボタンの下に来るメッセージ */
	margin-top:0px;
	margin-bottom:0px;
}
/*--------------------------------------------------------
■ Datepicker（カレンダー）の設定
--------------------------------------------------------*/
.ui-widget-header {
    border: 1px solid #5193f7;
    background: #5193f7 url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x;
    color: #fff;
    font-weight: bold;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #e8f1ff;
    background: #e8f1ff url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #808080;
}

table.ui-datepicker-calendar span{
	color: #808080;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #ea9c2e;
    background: #ea9c2e;
    color: #ffffff;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid #79b7e7;
    background: #5193f7 url(images/ui-bg_inset-hard_100_f5f8f9_1x100.png) 50% 50% repeat-x;
    font-weight: bold;
    color: #ffffff;
}

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    cursor:pointer;
}
.ui-datepicker-header a:hover {
    background: #e8f1ff;
    display:block;/* クリック範囲を広げる */
    cursor:pointer;
}
/*--------------------------------------------------------
■ 入力ボックス（■ 全controller共通の入力フォーム系に移動の可能性あり？）
--------------------------------------------------------*/
div.main_box .form_block .detail_title{
	margin-bottom:6px;
	font-weight:bold;
}
div.main_box .form_block .detail_title.with_icon{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	align-items: center;
  	margin-bottom:10px;
}
div.main_box .form_block .value.size_100_percent{
	width:100%;
}
div.main_box .form_block .flex_group{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	align-items: center;
}
div.main_box .form_block .value.zip_1{
	width:70px;
}
div.main_box .form_block .value.zip_2{
	width:95px;
	margin:0 0 0 7.5px;
}
div.main_box input[type="text"].bg_white_input,
div.main_box textarea.bg_white_input{
	background:#ffffff;
}
div.main_box textarea.trip_area{
	min-height:100px;
}
div.main_box textarea.message{
	min-height:200px;
}
div.main_box .bg_gray_box{
	background:#f3f3f3;
	border-radius:5px;
	padding:10px;
	font-size:12px;
}
div.main_box .bg_gray_box .example_img{
	margin:5px 0;
	text-align:center;
}
@media only screen and (min-width: 738px){
	div.main_box .bg_gray_box .example_img{
		text-align:left;
	}
}
div.main_box .bg_gray_box .example_img img{
	 margin-bottom:0;
	 width:300px;
}
div.main_box .form_block .pull_down{
	display:block;
	position:relative;
	width:250px;
}
div.main_box .form_block .pull_down:before {
    content: "";
    display: block;
    position: absolute;
    top: auto;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 48px;
    background: #99c2ff;
    pointer-events: none;
    border-radius:0 3px 3px 0;
}
div.main_box .form_block .pull_down:after {
    position: absolute;
    top:0;
    right: 11px;/* ((水色の四角部分40px - アイコンのwidth18px)/2) */
    height:48px;
    width:18px;
    color:#ffffff;
    font-family:'Font Awesome 6 Pro';
	content: '\f107';
	font-size: 28px;
    pointer-events: none;
}
div.main_box .form_block .pull_down select {
    display: inline-block;
    width: 100%;
    padding:0px 7.5px;
    border: 2px solid #d8d8d8;
    border-radius: 3px;
    height: 48px;
    background:#fff;
    color:#000;
    font-size:15px;
}
/* フォーカス時に勝手につく枠線を削除 */
div.main_box .form_block .pull_down select:focus {
  outline: none;
}
/* 文字数のカウント */
div.main_box .txt_count{
	text-align:right;
	margin-top:5px;
}
/*--------------------------------------------------------
 ■ checkboxを包括するbox
--------------------------------------------------------*/
div.main_box .checkbox_devision_block{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	flex-wrap : wrap;
}
div.main_box .checkbox_devision_block .checkbox{
	width:calc(100%/2);
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	align-items:center;
}
div.main_box .checkbox_devision_block.one_row .checkbox{
	width:100%;
}
@media only screen and (min-width: 738px){
	div.main_box .checkbox_devision_block .checkbox{
		width:calc(100%/4);
	}
	div.main_box .checkbox_devision_block.one_row .checkbox{
		width:calc(100%/2);
	}
}
div.main_box .form_block .blue_table th.day{
	width:50px;
}
div.main_box .form_block .blue_table tr.border_none{
	border-bottom:none;
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 ■ 表示切替系
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/* ------------------------------------------------------
■ セレクトボックス
-------------------------------------------------------- */
div.main_box div.select_box{
	width: 150px;
	position: relative;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box div.select_box{
		margin-bottom: var(--margin_bottom_ml);;
	}
}

div.main_box div.select_box::after {
	content: '';
	width: 6px;
	height: 6px;
	border: 0px;
	border-bottom: solid 2px #808080;
	border-right: solid 2px #808080;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -4px;
}
div.main_box div.select_box select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 40px;
	background: transparent;
	position: relative;
	z-index: 1; /*  重なりの順序を指定 */
	padding: 0 40px 0 10px;
	border: 1px solid #d8d8d8;
	border-radius: 5px;
	font-size:15px;
	cursor: pointer;
}
@media only screen and (min-width: 738px){
	div.main_box div.select_box select{
		font-size:16px;
	}
}
div.main_box div.select_box select::-ms-expand { /* select要素のデザインを無効にする */
    display: none;
}
/* --------------------------------------------------
■ タブ切り替えボタン
 -------------------------------------------------- */
div.main_box .tab_wrap_title{
	font-weight:bold;
	font-size:17px;
}
@media only screen and (min-width: 738px){
	div.main_box .tab_wrap_title{
		font-size:18px;
	}
}
div.main_box .tab_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
}
 div.main_box .tab_wrap .tab_switch {
    display: none;
}
div.main_box .tab_btn_with_triangle {
    color: #5193f7;
    border: 1px solid #99c2ff;
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
    padding: 8px;
    order: -1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    border-radius: 5px;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 10px;
}
div.main_box .tab_btn_with_triangle:last-of-type {
    margin-right: 0px;
}
div.main_box .tab_switch:checked+.tab_btn_with_triangle,
div.main_box .tab_btn_with_triangle:hover {
    background: #5193f7;
    color: #fff;
}
div.main_box .tab_switch:checked+.tab_btn_with_triangle:before,
div.main_box .tab_btn_with_triangle:hover:before {
    content: "";
    border: 10px solid transparent;
    border-top-color: #5193f7;
    display: block;
    left: 50%;
    bottom: 2px;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    position: absolute;
}
div.main_box .tab_content {
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
}
div.main_box .tab_switch:checked+.tab_btn_with_triangle+.tab_content {
    height: auto;
    padding: 20px 0px 0px 0px;
    opacity: 1;
    transition: .5s opacity;
}
/* --------------------------------------------------
■ タブ切り替えボタン（ボーダー）
 -------------------------------------------------- */
div.main_box .border_tab_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
}
div.main_box .border_tab_wrap:after {
    content: '';
    width: calc(100% + 10px);
    margin:0 -5px;
    height: 2px;
    background: #5193f7;
    display: block;
    order: -1;
}
@media only screen and (min-width: 738px){
	div.main_box .border_tab_wrap:after {
	    width: 100%;
	    margin:0;
	}
}
 div.main_box .border_tab_wrap .border_tab_switch {
    display: none;
}
div.main_box .border_tab_btn {
    color: #5193f7;
    border: 2px solid #5193f7;
    border-bottom:none;
    font-weight: bold;
    font-size:14px;
    white-space: nowrap;
    text-align: center;
    padding: 8px;
    order: -1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 5px;
}
@media only screen and (min-width: 738px){
	div.main_box .border_tab_btn {
		font-size:15px;
		margin-right: 10px;
	}
}
div.main_box .border_tab_btn:last-of-type {
    margin-right: 0px;
}
@media only screen and (min-width: 738px){
	div.main_box .border_tab_btn:first-of-type {
		margin-left:10px;
	}
	div.main_box .border_tab_btn:last-of-type {
		margin-right:10px;
	}
}
div.main_box .border_tab_switch:checked+.border_tab_btn,
div.main_box .border_tab_btn:hover {
    background: #5193f7;
    color: #fff;
}
div.main_box .border_tab_switch:disabled+.border_tab_btn{
	cursor:default:
}
div.main_box .border_tab_switch:disabled+.border_tab_btn:hover{
    color: #5193f7;
    background:#fff;
}
div.main_box .border_tab_content {
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
}
div.main_box .border_tab_switch:checked+.border_tab_btn+.border_tab_content {
    height: auto;
    padding: 20px 0px 0px 0px;
    opacity: 1;
    transition: .5s opacity;
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 ■ button
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
/*--------------------------------------------------------
■ 大ボタン
--------------------------------------------------------*/

div.main_box button.big_border_btn{
	border:1px solid #5193f7;
	background-color:#ffffff;
	font-size:16px;
	font-weight:bold;
	color:#5193f7;
	cursor:pointer;
	padding:15px;
	border-radius:5px;
	margin-bottom: var(--margin_bottom_s);
	min-width:240px;
}
div.main_box button.big_border_btn.gray{
	border:1px solid #c0c0c0;
	color:#606060;
}
@media only screen and (min-width: 738px){
	div.main_box button.big_border_btn{
		font-size:18px;
		margin-bottom: var(--margin_bottom_ml)
	}
}
div.main_box button.big_border_btn:disabled{
	opacity: 0.4;
	cursor: not-allowed;
}
/* 横並びボタン */
div.main_box .two_btn button.big_border_btn{
	margin-right:auto;
	margin-left:auto;
	display:block;
}
@media only screen and (min-width: 738px){
	div.main_box .two_btn{
		margin-bottom: var(--margin_bottom_ml)
	}
	div.main_box .two_btn button.big_border_btn{
		margin: 0 10px;/* 上下両方に0px、左右両方に10pxのCSS */
		display:inline-block;
	}
}
/*--------------------------------------------------------
■ カード風ラジオボタン
--------------------------------------------------------*/

div.main_box div.card_radio_btn{
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box div.card_radio_btn{
		margin-bottom: var(--margin_bottom_ml);;
	}
}

div.main_box .card_radio_btn label {
	width:100%;
	max-width:500px;
    padding: 15px 15px 15px 40px; /* radioボタンと文字の間隔を取るため左paddingを大きく取る */
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    cursor: pointer;
   	margin-left: 0px;
   	margin-bottom: 15px;
}
div.main_box .card_radio_btn .radio:last-of-type label{
	margin-bottom:0px;
}
div.main_box .card_radio_btn label:before{
	left: 10px;/* ラベルの中にラジオボタンを入れる */
}
div.main_box .card_radio_btn input[type="radio"]:checked + label:after { /* ラジオボタンの色を変える */
	left: 16px;/* ラジオボタンの真ん中に青い点が入るように位置調整*/
}
div.main_box .card_radio_btn input[type=radio]:checked + label{
 background-color:#e8f1ff;/* クリック時にラベルの背景色を変える */
}
div.main_box .card_radio_btn input[type=radio]:disabled + label{
    border: 1px solid #f0f0f0;
	color: #c0c0c0;
}
/*--------------------------------------------------------
■ ボタングループ（PC版のみ使用）
-------------------------------------------------------- */
div.main_box .only_pc_btn_group{
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box .only_pc_btn_group{
	  	display:-webkit-box;
  		display:-ms-flexbox;
  		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
	    gap: 12px;/* ボタンとボタンの間を開ける */
		padding:8px 12px;
		z-index:1;
	}
	div.main_box .only_pc_btn_group .only_pc_btn_inner{
		display:-webkit-box;
	  	display:-ms-flexbox;
	  	display:flex;
		align-items:center;
		justify-content:center;
		width:200px;
		height:50px;
		border-radius:5px;
		font-weight:bold;
	}
	div.main_box .only_pc_btn_group .only_pc_btn_inner.main{
		background:#dddddd;
		color:#fff;
		pointer-events:none;
	}
	div.main_box .only_pc_btn_group .only_pc_btn_inner.detail{
		background:#fff;
		color:#c0c0c0;
		border:1px #c0c0c0 solid;
		pointer-events:none;
	}
	div.main_box .only_pc_btn_group .only_pc_btn_inner.main.active{
		background:#5193f7;
		color:#fff;
		pointer-events: auto;
		cursor: pointer;
	}
	div.main_box .only_pc_btn_group .only_pc_btn_inner.detail.active{
		background:#fff;
		color:#606060;
		border:1px #c0c0c0 solid;
		pointer-events: auto;
		cursor: pointer;
	}
}
/*--------------------------------------------------------
■ 下部フィックスボタン
--------------------------------------------------------*/
div.main_box .bottom_fixed_btn_box{
  	display:none;/* デフォルトは非表示 */
	align-items:center;
	justify-content:center;
	width:100%;
	background-color: rgba(51, 51, 51, 0.7);/* 背景を黒半透明にする */
    gap: 12px;/* ボタンとボタンの間を開ける */
	position:fixed;
	left:0;
	bottom:0;
	padding:8px 12px;
	z-index:102;
}
@media only screen and (min-width: 738px){
	div.main_box .bottom_fixed_btn_box{
		gap: 20px;/* ボタンとボタンの間を開ける */
	}
}
div.main_box .bottom_fixed_btn_box.active{/* activeクラスのある時には表示させる */
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
}
div.main_box .bottom_fixed_btn_box .bottom_fixed_btn{
	flex: 1 1 0%;
}
@media only screen and (min-width: 738px){
	div.main_box .bottom_fixed_btn_box .bottom_fixed_btn{
		flex:initial;
	}
}
div.main_box .bottom_fixed_btn_box .bottom_fixed_btn_inner{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:50px;
	border-radius:5px;
	font-weight:bold;
}
@media only screen and (min-width: 738px){
	div.main_box .bottom_fixed_btn_box .bottom_fixed_btn_inner{
		width:250px;
	}
}
div.main_box .bottom_fixed_btn_box .bottom_fixed_btn_inner.main{
	background:#5193f7;
	color:#fff;
	cursor: pointer;
}
div.main_box .bottom_fixed_btn_box .bottom_fixed_btn_inner.main.incomplete{
	background:#f45079;
}
div.main_box .bottom_fixed_btn_box .bottom_fixed_btn_inner.detail{
	background:#fff;
	color:#606060;
	cursor: pointer;
}

div.main_box .bottom_fixed_btn_box .bottom_fixed_overlay {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;               /* 親いっぱいに広げる */
  height: 100%;
  background: #ea9c2e;
  color: #fff;
  
  /* フォントサイズを最小14px・最大18px・中間は2.5vwで調整 */
  font-size: clamp(14px, 2.5vw, 18px);
  font-weight: 600;
  
  /* 中央揃え＋自動折返し */
  align-items: center;
  justify-content: center;
  text-align: center;
  
  /* 横の余白を固定 */
  padding: 0 16px;
  box-sizing: border-box;
  
  /* アニメーション設定 */
  transform: translateY(100%);
  transition: transform 0.24s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  z-index: 999;
  pointer-events: all;
}

div.main_box .bottom_fixed_btn_box .bottom_fixed_overlay.active {
  transform: translateY(0);
}

/* 市区群の選択ボタン */
div.main_box .return_btn{
	font-weight:bold;
	cursor:pointer;
}
@media only screen and (min-width: 738px){
	div.main_box .return_btn{
		display:none;/* PC版では非表示 */
	}
}
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
 ■ table
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
div.main_box table{
	width: 100%;
	border-top:1px solid #dddddd;
	padding:0px 5px;
	margin-bottom: var(--margin_bottom_s);
	border-collapse: collapse;
}
div.main_box table tr{
	border-bottom:1px solid #dddddd;
}
@media only screen and (min-width: 738px){
	div.main_box table{
		margin-bottom: var(--margin_bottom_ml);;
	}
}
div.main_box table th{
	padding:9px;
	font-weight:bold;
	text-align:center;
	color:#505050;
	border:none;
}
div.main_box table.blue_table th{
	background:#e8f1ff;
}
div.main_box table.yellow_table th{
	background:#fff0db;
}
@media only screen and (min-width: 738px){
	div.main_box table th{
		padding:12px;
	}
}
div.main_box table td{
	border:none;
	padding:9px;
}
@media only screen and (min-width: 738px){
	div.main_box table td{
		padding:12px;
	}
}

/* 以下、スカイプ名等の単語区切りが不明なものを強制的に折り返すためのCSS */
/* ここから～ */
div.main_box table{/* 各セルのwidthを以下に指定する通りに */
	table-layout: fixed;
}
div.main_box table th.break_word,
div.main_box table td.break_word{/* 単語区切りが不明なものを強制的に折り返す */
	overflow-wrap : break-word;
}
/* ～ここまで */

/* border付きのテーブル */
div.main_box table.border_table td,
div.main_box table.border_table th{
	border:1px solid #dddddd;
}

/* スクロール可能なテーブル */
div.main_box .scrollable_table_block{
	position:relative;
}
div.main_box .scrollable_table_wrap{
	overflow-x: scroll;
	overflow-y: visible;
}
div.main_box .scrollable_table_block .scrollable_icon{
	position:absolute;
	width:30px;
	right:12px;
	top:-12px;
	z-index: 10;
	animation: scrollAnimation 1.5s ease-in-out infinite;/* 左右に揺れるアニメーション */
}
/* アニメーションの設定 */
@keyframes scrollAnimation {
    0% {
        transform: translateX(0); /* 左端 */
    }
    50% {
        transform: translateX(10px); /* 右に動かす */
    }
    100% {
        transform: translateX(0); /* 元の位置に戻る */
    }
}
div.main_box .scrollable_table_block .scrollable_icon img{
	width:100%;
	margin-bottom:0px;
}
div.main_box .scrollable_table_wrap table{
	margin-bottom:0px;
	min-width: max-content;
	width: auto; /* 自動調整 */
	table-layout: fixed;
	border-collapse: separate;/* タイトルをstickyにしているので、separateにしないとborderが消えてしまう */
	border-spacing: 0px;/* 隙間をなくす */
	padding:0px;
	border-right: 1px solid #dddddd;
}
div.main_box .scrollable_table_wrap table.scrollable_table tr > :first-child{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
}
/* 他のセル（tdやth）のスタイル */
div.main_box .scrollable_table_wrap table.scrollable_table tr > th,
div.main_box .scrollable_table_wrap table.scrollable_table tr > td {
    z-index: -1;  /* 背面に表示 */
}
div.main_box .scrollable_table_wrap table.scrollable_table td,
div.main_box .scrollable_table_wrap table.scrollable_table th{
	max-width: 1000px;
	min-width: 100px;
	border-top:none;/* tableのseparateの影響で隣通しの線がくっついて表示されるのでここではborder-topはなくす */
	border-right:none;
}
div.main_box .scrollable_table_wrap td.table_icon_double_circle {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="none" stroke="%23ffe8ed" stroke-width="2"/><circle cx="12" cy="12" r="6" fill="none" stroke="%23ffe8ed" stroke-width="2"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 50%;
	background-size: 60px;
	padding: 10px;
}
div.main_box .scrollable_table_wrap td.table_icon_circle {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="10" fill="none" stroke="%23e8f1ff" stroke-width="2"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60px;
	padding: 10px;
}
div.main_box .scrollable_table_wrap td.table_icon_triangle {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><polygon points="12,4 4,20 20,20" fill="none" stroke="%23e5fff3" stroke-width="2"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60px;
	padding: 10px;
}
div.main_box .scrollable_table_wrap table.scrollable_table td .link_btn{
	display: inline-block;
	background:#5193f7;
	cursor: pointer;
    padding: 6px 10px;
    border-radius: 3px;
	color:#fff;
	font-weight: bold;
}
/*--------------------------------------------------------
■ confirm_edit_table
--------------------------------------------------------*/
div.main_box table.confirm_edit_table th{
	background:#e8f1ff;
}
/*
	↑のtdにて登録されていたwidthを↓のcolタグに移動。
	理由は最初のレコード（お名前）tdにcolspan=2を設定した際にwidthプロパティが効かなくなるため。
	この理由はテーブルタグにtable-layout: fixed;が設定されているから、だが、
	table-layout: fixed;は単語強制折返しに必要なプロパティなので削除できない。
	よって、colタグを使い、最初のレコード（お名前）、の前の段階で、各tdのwidthを固定させる。
*/
div.main_box table.confirm_edit_table col.title{
	width:25%;
}
@media only screen and (min-width: 738px){
	div.main_box table.confirm_edit_table col.title{
		width:22%;
	}
}
div.main_box table.confirm_edit_table col.value{
	width:60%;
}
div.main_box table.confirm_edit_table td.detail{
	width:15%;
	text-align: center;
}
@media only screen and (min-width: 738px){
	div.main_box table.confirm_edit_table td.detail{
		width:18%;
	}
}
/* 以下、スカイプ名等の単語区切りが不明なものを強制的に折り返すためのCSS */
/* ここから～ */
div.main_box table.confirm_edit_table{/* 各セルのwidthを以下に指定する通りに */
	table-layout: fixed;
}
div.main_box table.confirm_edit_table th.break_word,
div.main_box table.confirm_edit_table td.break_word{/* 単語区切りが不明なものを強制的に折り返す */
	overflow-wrap : break-word;
}
/* ～ここまで */

/*--------------------------------------------------------
各td内の共通
--------------------------------------------------------*/

div.main_box table.confirm_edit_table td input.save_button{
	cursor:pointer;
	margin-top:9px;
	padding:1.5px 7.5px;
	border-radius:3.75px;
	font-size:16px;
	background-color:#5193f7;
	border:1px solid #5193f7;
	color:#ffffff;
	-webkit-appearance: none;
	height:40px;
}
@media only screen and (min-width: 738px){
	div.main_box table.confirm_edit_table td input.save_button{
	margin-top:12px;
	padding:2px 10px;
	border-radius:5px;
	}
}
div.main_box table.confirm_edit_table td input.cancel_button{
	cursor:pointer;
	margin-top:9px;
	margin-left:9px;
	padding:1.5px 7.5px;
	background-color:#ffffff;
	border:1px solid #5193f7;
	color:#5193f7;
	border-radius:3.75px;
	font-size:16px;
	-webkit-appearance: none;
	height:40px;
}
@media only screen and (min-width: 738px){
	div.main_box table.confirm_edit_table td input.cancel_button{
		margin-top:12px;
		margin-left:12px;
		padding:2px 10px;
		border-radius:5px;
	}
}
div.main_box table.confirm_edit_table td input.delete_button{
	cursor:pointer;
	margin-top:9px;
	margin-left:9px;
	padding:1.5px 7.5px;
	background-color:#ffffff;
	border:1px solid #5193f7;
	color:#5193f7;
	border-radius:3.75px;
	font-size:16px;
	-webkit-appearance: none;
	height:40px;
}
@media only screen and (min-width: 738px){
	div.main_box table.confirm_edit_table td input.delete_button{
		margin-top:12px;
		margin-left:12px;
		padding:2px 10px;
		border-radius:5px;
	}
}

div.main_box table.confirm_edit_table span.public{
	color:#eb2f5d;
}
div.main_box table.confirm_edit_table span.private{
	color:#2a77eb ;
}
div.main_box table.confirm_edit_table td.detail a.edit{
	cursor:pointer;
}
div.main_box table.confirm_edit_table hr.main{
	border: 0;
	border-top: 1px solid #dddddd;
	background: #ffffff;
	margin-top: 10px;
	margin-bottom: 10px;
}
div.main_box table.confirm_edit_table hr.sub{
	border: 0;
	border-top: 1px dashed #dddddd;
	background: #ffffff;
	margin-top: 10px;
	margin-bottom: 10px;
}

/*--------------------------------------------------------
テキストボックス
--------------------------------------------------------*/

div.main_box  table.confirm_edit_table input[type="text"],
div.main_box  table.confirm_edit_table input[type="email"],
div.main_box  table.confirm_edit_table input[type="password"]{
	border:  1px solid #d8d8d8;
	padding:0px 7.5px;
	height: 30px;
}
@media only screen and (min-width: 738px){
	div.main_box  table.confirm_edit_table input[type="text"],
	div.main_box  table.confirm_edit_table input[type="email"],
	div.main_box  table.confirm_edit_table input[type="password"]{
		height: 40px;
		padding: 0px 10px;
	}
}
/*--------------------------------------------------------
ボタンの下部のエラーメッセージ
--------------------------------------------------------*/

div.main_box table.confirm_edit_table div.comment{
	margin-top:9px;
	margin-bottom:0px;/*テーブルセルのパディングがあるので消す */
}
div.main_box table.confirm_edit_table div.comment.success{
	font-weight: bold;
	color: #25ae78;
}
/*--------------------------------------------------------
各項目の詳細
--------------------------------------------------------*/

div.main_box table.confirm_edit_table td div.card_element_outer_box{
	padding: 8px 0px 8px 0px;
}
/*--------------------------------------------------------
アカウント削除系の色合い変更（分かりやすいのでアカウント削除のみ別にまとめる）
--------------------------------------------------------*/

div.main_box h2.red:before{
	background: #ff99b3;
}

div.main_box table.confirm_edit_table th.red{
	background:#ffe8ed;
}

div.main_box table.confirm_edit_table td input.save_button.red{
	background-color:#f45079;
	border:1px solid #f45079;
}
div.main_box table.confirm_edit_table td input.cancel_button.red{
	border:1px solid #f45079;
	color:#f45079;
}
div.main_box input.red[type="text"],
div.main_box input.red[type="password"]{/* textボックスにのみ対応するスタイル */
	background-color: #ffe8ed;
}
/*--------------------------------------------------------
■ テーブルの下部のエラーメッセージ
--------------------------------------------------------*/
div.main_box table + div.comment.error.table_bottom{
	margin-top:-5px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box table + div.comment.error.table_bottom{
		margin-top:-10px;
		margin-bottom: var(--margin_bottom_ml)
	}
}
/*--------------------------------------------------------
	■ ラジオボタン付き、列ごと選択できる表
【JASRAC管理曲登録入力】で使用
--------------------------------------------------------*/
div.main_box div.scroll_box {
    position: relative;
    margin:0px;
    overflow-x: auto;
    white-space: nowrap;
}
@media only screen and (min-width: 738px){
	div.main_box div.scroll_box {
	    overflow-x:visible;
	    white-space:normal;
	}
}
div.main_box .can_select_row_box {
	width:100%;
}
div.main_box .can_select_row_box .can_select_row_item{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	width:100%;
  	min-width:416px;
  	justify-content: center;
  	border-bottom:1px solid#dddddd;
  	cursor: pointer !important;
}
@media only screen and (min-width: 738px){
	div.main_box .can_select_row_box .can_select_row_item{
	    width:100%;
	}
}
div.main_box .can_select_row_box .can_select_row_item.selected{
	background:#e8f1ff;
}
div.main_box .can_select_row_box .can_select_row_item.header{
	font-weight:bold;
}
div.main_box .can_select_row_box .can_select_row_elm{
	padding:8px;
	over-flow:hidden;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	max-height:68px;
	height:68px;
	cursor: pointer !important;
	white-space:normal;/* 行を折り返す */
}
div.main_box .can_select_row_box .can_select_row_elm span{
	 display: -webkit-box;/* Flexboxの状態にするプロパティ。 */
	-webkit-line-clamp: 2;/* 行数を指定（2行） */
	-webkit-box-orient: vertical;/* Flexbox の要素方向を設定するプロパティ。 */
	overflow: hidden;
}
@media only screen and (min-width: 738px){
	div.main_box .can_select_row_box .can_select_row_elm{
		padding:12px;
	}
}
div.main_box .can_select_row_box .elm_1{
	flex-basis:8%;
	min-width:36px;
}
div.main_box .can_select_row_box .elm_2{
	flex-basis:32%;
	min-width:140px;
}
div.main_box .can_select_row_box .elm_3{
	flex-basis:30%;
	min-width:120px;
}
div.main_box .can_select_row_box .elm_4{
	flex-basis:30%;
	min-width:120px;
}
div.main_box .can_select_row_box .radio{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
div.main_box .can_select_row_box .can_select_row_elm label{
	padding:0px;
	margin:0px;
}
/*--------------------------------------------------------
	■ 横スクロール可能テーブル
--------------------------------------------------------*/
div.main_box 
/*--------------------------------------------------------
■ ページャー
--------------------------------------------------------*/
div.main_box div#pager ul.pagination {
	text-align: center;
	margin-left: 0px;
	letter-spacing: -.4em;
	height:40px;
	margin-bottom: var(--margin_bottom_s);
}
@media only screen and (min-width: 738px){
	div.main_box div#pager ul.pagination {
		margin-bottom: var(--margin_bottom_ml)
	}
}
div.main_box div#pager ul.pagination.bottom {
	text-align: center;
	margin-top:15px;
}
@media only screen and (min-width: 738px){
	div.main_box div#pager ul.pagination.bottom {
		margin-bottom: var(--margin_bottom_ml)
	}
}
div.main_box div#pager ul.pagination li{
	display: none;
}
div.main_box div#pager ul.pagination li.prev,
div.main_box div#pager ul.pagination li.next{
	padding: 0;
	position: relative;
	border-radius: 10px;
	background:#fff;
	border: 1px solid #5193f7;
	display: inline-block;
	width: 40%;
	height: 40px;
	text-align: center;
	margin: 0;
	letter-spacing:normal;
}
div.main_box div#pager ul.pagination li.prev{
	margin-right: 10px;
}
div.main_box div#pager ul.pagination li.next{
	margin-left: 10px;
}
div.main_box div#pager ul.pagination li.prev a,
div.main_box div#pager ul.pagination li.next a{
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display:table;
	color: #5193f7;
	text-decoration: none;
	width: 100%;
	text-align: center;
}
div.main_box div#pager ul.pagination li.prev span.prev_txt::after{
	content: "　前の10件へ";
}
div.main_box div#pager ul.pagination li.next span.next_txt::before{
	content: "次の10件へ　";
}
div.main_box div#pager ul.pagination li.disabled{
    opacity:0.4;
    pointer-events:none;
}
div.main_box div#pager ul.pagination li a span{
	display:table-cell;
	vertical-align:middle;
}
@media only screen and (min-width: 738px){
	div.main_box div#pager ul.pagination {
		text-align: right;
	}
	div.main_box div#pager ul.pagination li{
		padding: 0;
		position: relative;
		border-radius: 10px;
		background:#fff;
		border: 1px solid #5193f7;
		display: inline-block;
		width: 40px;
		height: 40px;
		text-align: center;
		margin: 0 5px;
		font-size:18px;
		letter-spacing:normal;
	}
	div.main_box div#pager ul.pagination li.prev,
	div.main_box div#pager ul.pagination li.next{
		width: 40px;
		height: 40px;
	}
	div.main_box div#pager ul.pagination li.prev{
		margin-right: 5px;
	}
	div.main_box div#pager ul.pagination li.next{
		margin-left: 5px;
	}
	div.main_box div#pager ul.pagination li.selected{
		background-color:#5193f7;
		pointer-events:none;
	}
	div.main_box div#pager ul.pagination li a{
		vertical-align: middle;
		position: absolute;
		top: -2px;
		left: 0;
		height: 100%;
		display:table;
		color: #5193f7;
		text-decoration: none;
		width: 100%;
		text-align: center;
	}
	div.main_box div#pager ul.pagination li.selected a{
		font-weight: bold;
		color:#fff;
	}
	div.main_box div#pager ul.pagination li.prev a,
	div.main_box div#pager ul.pagination li.next a{
		width: 100%;
		height: 100%;
		position: absolute;
		top: -2px;
		left: 0;
	}
	div.main_box div#pager ul.pagination li a span{
		height:40px;
		line-height:40px;
	}
	div.main_box div#pager ul.pagination li.prev span.prev_txt::after{
		content: "";
	}
	div.main_box div#pager ul.pagination li.next span.next_txt::before{
		content: "";
	}
}
/* --------------------------------------------------
■ レートチャート
 -------------------------------------------------- */
div.main_box .rating_block .rating_item_main{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:space-between;
	margin:0 15px;
	width:calc(100% - 30px);
	position:relative;
	height:25px;
}
div.main_box .rating_block .rating_item{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	align-items:center;
  	height:30px;
}
div.main_box .rating_block .rating_label{
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box .rating_block .rating_item_main{
		width:calc(100% - 320px);
	}
	div.main_box .rating_block .rating_label{
	   	background:#e8f1ff;
	   	display:inline-block;
	   	padding:2px 4px;
	   	border-radius:5px;
	   	width:160px;
	   	text-align:center;
	   	font-size:14px;
	}
}
/* 横棒 */
div.main_box .rating_block .rating_item_main:after {
    position: absolute;
    top: 50%;
    z-index: 1;
    content: "";
    width: 100%;
    width: calc(100% - 24px);
    margin:-1px 12px 0 12px;
    height: 1px;
    display: inline-block;
    position: absolute;
    border-top: 2px solid #99c2ff;
}
/* 吹き出し */
div.main_box .rating_block .balloon_box {
   	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	justify-content: space-between;
  	margin-bottom:10px;
}
@media only screen and (min-width: 738px){
	div.main_box .rating_block .balloon_box {
	   	display:none;
	}
}
div.main_box .rating_block .balloon_box .balloon{
   background:#e8f1ff;
   border-radius:5px;
   padding:2px 4px;
   position:relative;
   font-size:14px;
}
/*  吹き出しの三角*/
div.main_box .rating_block .balloon_box .balloon:after{
    content: "";
    border: 10px solid transparent;
    border-top-color: #e8f1ff;
    display: block;
    bottom: 2px;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    position: absolute;
}
div.main_box .rating_block .balloon_box .balloon.left:after{
	left: 27px;
}
div.main_box .rating_block .balloon_box .balloon.right:after{
    right: 7px;/* -20px +   rating_item_mainのmargin-left15px + ○の半径4px*/
}
/* ○マーク */
div.main_box .rating_block .rating_item_main .circle{
	width:24px;
	height:24px;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
}
div.main_box .rating_block .rating_item_main .circle:before{
	background:#99c2ff;
	width:8px;
	height:8px;
	border-radius:50%;
	content:"";
}
/* 星マーク */
div.main_box .rating_block .rating_item_main .circle.star:after{
    color:#ea9c2e;
    font-family:'Font Awesome 6 Pro';
	content: '\f005';
	font-size: 22px;
	font-weight:900;
    z-index: 2;
    position:absolute;
}
/* --------------------------------------------------
■ カレンダー
 -------------------------------------------------- */
/*--------------------------------------------------------
カレンダー部分
--------------------------------------------------------*/
div.main_box div.select_date_box_head{
    padding: 8px 10px 8px 10px;
    border-radius:0;
    background: #5193f7;
    color: #fff;
    font-size:1.25em;
    display: block;
    margin:0 -5px;
}
div.main_box div.select_date_box_head i{
	margin-left:10px;
}
@media only screen and (min-width: 738px){
	div.main_box div.select_date_box_head{
		font-size:1.5em;
		border-radius: 10px 10px 0 0;
		margin:0px;
	}
}
div.main_box form#select_date_box{
	margin:0 -5px;
}
@media only screen and (min-width: 738px){
	div.main_box form#select_date_box{
		margin:0;
	}
}
div.main_box form#select_date_box ul{
    list-style:none;
    display:flex;
    margin:0px;
    flex-wrap: wrap;
}
div.main_box form#select_date_box ul.day_of_week{
    border-top: 1px solid #dddddd;
    background:#e8f1ff;
}
div.main_box form#select_date_box ul.day_of_week li{
	background:#e8f1ff;
}
div.main_box form#select_date_box li.dow.disabled{/* Day of the week  */
	opacity:1;
	font-weight:bold;
	color:#5193f7;
}
div.main_box form#select_date_box li{
	width:calc(100%/7);
	margin:0px;
	padding:0px;/* padding:8px; */
	text-align:center;
	background-color:#ffffff;
	border-collapse: collapse;
	cursor:pointer;
	border-right:1px solid #d8d8d8;
	border-bottom: 1px solid #dddddd;
}
div.main_box form#select_date_box li:last-of-type{
	border-right:none;
}
@media only screen and (min-width: 738px){
	div.main_box form#select_date_box li:first-of-type{/* 最初のliにborder追加 */
		border-left: 1px solid #dddddd;
	}
		div.main_box form#select_date_box li:last-of-type{/* 最初のliにborder追加 */
		border-right: 1px solid #dddddd;
	}
}
div.main_box form#select_date_box li.disabled{/* クリックできない日付を設定 */
    pointer-events:none;
    opacity:0.6;
}
div.main_box form#select_date_box li span{
	font-weight:bold;
	font-size:1.2em;/* font-size:1.2em; */
}
@media only screen and (min-width: 738px){
	div.main_box form#select_date_box li span{
		/* font-size:1.5em; */
	}
}
div.main_box form#select_date_box li span.date{
	display: inline-block;
	text-align:center;
}
div.main_box form#select_date_box li span.date i{
	margin-right:0px;
	color:#d8d8d8;
}
div.main_box form#select_date_box li a.select_day{
	color:#606060;
}
div.main_box form#select_date_box li.selected,
div.main_box form#select_date_box li:hover{
	background:#5193f7;
	text-align:center;
}
div.main_box form#select_date_box li.selected a.select_day,
div.main_box form#select_date_box li:hover a.select_day,
div.main_box form#select_date_box li.selected span.date i,
div.main_box form#select_date_box li:hover span.date i{
	color:#fff;
}
div.main_box form#select_date_box dl{
	display:flex;
	flex-wrap: wrap;
	margin-top:20px;
}
div.main_box form#select_date_box dd{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
div.main_box form#select_date_box dd input[type=checkbox]{
	display: none;/* checkboxの丸ポチをなくす */
}
div.main_box form#select_date_box dd label.checkbox_label{
	border:1px solid #5193f7;
	border-radius:10px;
	padding:12px 4px;
	display:block;
	float:left;
	width:31.3%;
	margin-right:1.5%;
	text-align:center;
	background-color:#fff;
	color:#5193f7;
	cursor :pointer;
}
div.main_box form#select_date_box dd label.checkbox_label.left{
	margin-left: 1.5%;
}
div.main_box form#select_date_box dd label.checkbox_label.second_record{
	margin-top: 5px;
}
 div.main_box form#select_date_box dd input[type=checkbox]:checked + label.checkbox_label{
 	 background-color:#5193f7;
 	 color:#fff;
}
/* --------------------------------------------------
■ タイムテーブル
 -------------------------------------------------- */
/*--------------------------------------------------------
講師検索結果フォーム
--------------------------------------------------------*/
div.main_box div.schedule_detail_inner{
	margin: 0 -5px;
}
@media only screen and (min-width: 738px){
	div.main_box div.schedule_detail_inner{
		margin: 0;
	}
}
div.main_box div.schedule_detail_inner ul#date_list{
	list-style-type:none;
    margin:0px;
    border-top: 2px solid #dddddd;
	border-bottom: 2px solid #dddddd;
	overflow: hidden;
	width: 100%;
	/* width: 99.6%; */
}

div.main_box div.schedule_detail_inner ul#date_list li.date{
	border-right: 1px solid #dddddd;
	padding:3px;
	margin-top:0px;
	margin-bottom: 0px;
	float:left;
	width:calc((100% - 107px - 4px - 4.3px));/* (横いっぱい- margin-left - border - padding)/4*/
	box-sizing: content-box;
}
div.main_box div.schedule_detail_inner ul#date_list li.date:nth-child(3) {
	border-right:none;
}
@media only screen and (min-width: 738px){
	div.main_box div.schedule_detail_inner ul#date_list li.date{
		width:calc((100% - 156px - 6px - 3px ));
	}
}
@media only screen and (min-width: 865px){
	div.main_box div.schedule_detail_inner ul#date_list li.date{
		width:calc((100% - 156px - 7px - 2px ));
	}
}
@media only screen and (min-width: 991px){
	div.main_box div.schedule_detail_inner ul#date_list li.date{
		width:calc((100% - 156px - 8px - 1px ));
	}
}
@media only screen and (min-width:1117px){
	div.main_box div.schedule_detail_inner ul#date_list li.date{
		width:calc((100% - 156px - 6px - 3px));
	}
}
div.main_box div.schedule_detail_inner ul#date_list li.date:first-of-type{
	margin-left:107px;
	border-left: 2px solid #dddddd;
}
@media only screen and (min-width: 738px){
	div.main_box div.schedule_detail_inner ul#date_list li.date:first-of-type{
		margin-left:156px;
	}
}
div.main_box div.schedule_detail_inner ul#date_list li.date div{
	margin:0px;
	text-align:center;
	position:relative;
	width:100%;
}
div.main_box div.schedule_detail_inner ul#date_list li.date div a{
	color:#808080;
	position:relative;
}
div.main_box div.schedule_detail_inner ul#date_list li.date div p.date_text{
	margin-bottom:7px;
	margin-top:7px;
}
div.main_box div.schedule_detail_inner ul#date_list li.date div span{
	font-seize:14px;
}
div.main_box div.schedule_detail_inner ul#date_list li.date div p.count{
	margin-bottom:0px;
	font-size:14px;
}
div.main_box div.schedule_detail_inner ul#date_list li.date div img{
	margin-bottom:0px;
	vertical-align: top;
	width:100%;
}
/*--------------------------------------------------------
スクロールバーのある講師スケジュール欄
--------------------------------------------------------*/
div.main_box #schedule_list {
	/* height: 360px; *//* 後のフェーズでスクロール必要になった際はheightを定める必要あり */
	overflow: auto;
	display: flex;/* ブラウザの倍率表示が100%ではない場合にfloatしたものが、下段に落ちるのを防ぐ */
}
div.main_box #schedule_list::-webkit-scrollbar,
div.main_box #schedule_list::-webkit-scrollbar-track,
div.main_box #schedule_list::-webkit-scrollbar-thumb{
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box #schedule_list::-webkit-scrollbar {/* スクロールの幅の設定 */
		width: 12px;
	}
	div.main_box #schedule_list::-webkit-scrollbar-track {/* スクロールの背景の設定 */
		border-radius: 5px;
		box-shadow: 0 0 4px #aaa inset;
	}
	div.main_box #schedule_list::-webkit-scrollbar-thumb {/* スクロールのつまみ部分の設定 */
		 border-radius: 5px;
		 background: #d8d8d8;
	}
}
div.main_box #schedule_list ul.time{
	list-style: none;
	margin:0px;
	float:left;
	width:109px;

}
@media only screen and (min-width: 738px){
	div.main_box #schedule_list ul.time{
		width:158px;
	}
}
div.main_box #schedule_list ul.time li{
	border-right: 2px solid #dddddd;
	width:100%;
	height: 45px;
	background:#f3f3f3;
	text-align:center;
	padding:0px;
	margin:0px;
}
div.main_box #schedule_list ul.time li:nth-child(even){/* リストの偶数番目の背景色変える */
	background:#f9f9f9;
}
div.main_box #schedule_list ul.time li span{
	line-height:45px;
}
div.main_box #schedule_list ul.book{
	list-style: none;
	margin:0px;
	float:left;
	width:calc((100% - 109px - 2px));
	border-right: none;
	box-sizing: content-box;
}
@media only screen and (min-width: 738px){
	div.main_box #schedule_list ul.book{
		width:calc((100% - 158px - 1px));
		border-right: 1px solid #dddddd;
	}
}
div.main_box #schedule_list ul.book li{
	width:100%;
	height: 45px;
	background:#fbfbfb;
	text-align:center;
	padding:3px;
	margin:0px;
	position: relative;
}
div.main_box #schedule_list ul.book li:nth-child(even){
	background:#ffffff;
}
div.main_box #schedule_list ul.book li a.reservable_btn{
	border:1px solid #66a3ff;
	background-color:#66a3ff;
	font-weight:bold;
	color:#ffffff;
	cursor:pointer;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	padding:2px 10px;
	border-radius:3.75px;
	width: 150px;
}
div.main_box #schedule_list ul.book li a.reservable_btn.force{
	border:1px solid #000000;
	background-color:#000000;
}
@media only screen and (min-width: 738px){
	div.main_box #schedule_list ul.book li a.reservable_btn{/*  予約可ボタン*/
		padding:2px;
		border-radius:5px;
		width: 200px;
	}
}
div.main_box #schedule_list ul.book li a.reservable_btn.disable{
	pointer-events: none;
}
div.main_box #schedule_list ul.book li span{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	width:100px;
}
/* 追加事項 */
div.main_box #schedule_list ul.book li .checkbox_in_schedule{
	width:30px;
	height:20px;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display:none;
    align-items: center;
    justify-content: center;
	position:absolute;
	left:0px;
	top:12.5px;
}
div.main_box #schedule_list ul.book li .checkbox_in_schedule label{
	padding:0px;
}
/*--------------------------------------------------------
■ 強調タイトル
--------------------------------------------------------*/
div.main_box .login_type_box i{
	color:#ea9c2e;
}
div.main_box .login_type_box p{
	font-size:18px;
	font-weight:bold;
}
@media only screen and (min-width: 738px){
	div.main_box .login_type_box p{
		font-size:20px;
	}
}
div.main_box .login_type_box span.highlight{
	font-size: 130%;
	margin:0 5px;
	position:relative;
	color:#5193f7;
}
div.main_box .login_type_box span.highlight.blue{
	color:#5193f7;
}
div.main_box .login_type_box span.highlight.red{
	color:#f45079;
}
div.main_box .login_type_box span.highlight.yellow{
	color:#ea9c2e;
}
div.main_box .login_type_box span.highlight.green{
	color:#25ae78;
}
div.main_box .login_type_box span.highlight::before {
    position: absolute;
    top: -10px;
    right: -14px;
    width: 25px;
    height: 16px;
    content: '';
    background:url("../../img/common/img_deco_blue.png") no-repeat center/contain;
}
div.main_box .login_type_box span.highlight.blue::before {
    background:url("../../img/common/img_deco_blue.png") no-repeat center/contain;
}
div.main_box .login_type_box span.highlight.yellow::before {
    background:url("../../img/common/img_deco_yellow.png") no-repeat center/contain;
}
div.main_box .login_type_box span.highlight.red::before {
    background:url("../../img/common/img_deco_red.png") no-repeat center/contain;
}
div.main_box .login_type_box span.highlight.green::before {
    background:url("../../img/common/img_deco_green.png") no-repeat center/contain;
}
@media only screen and (min-width: 738px){
	div.main_box .login_type_box span.highlight::before {
	    top: -16px;
	    right: -20px;
	    width: 36px;
	    height: 23.04px;
	}
}
/*--------------------------------------------------------
■ 画像サイズを制御
--------------------------------------------------------*/
div.main_box .img_only_sp_block{
	width:100%;
	max-width:320px;
	margin:0 auto 15px auto;
}
@media only screen and (min-width: 738px){
	div.main_box .img_only_sp_block{
		display:none;
	}
}
div.main_box .img_only_pc_block{
	width:100%;
	max-width:600px;
	margin:0 auto 15px auto;
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box .img_only_pc_block{
		display:block;
	}
}
/*--------------------------------------------------------
■ ステップインジケーター
--------------------------------------------------------*/
div.main_box .step_indicator_block{
	display:flex;
	width:280px;
	justify-content: space-between;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:25px;
}
@media only screen and (min-width: 738px){
	div.main_box .step_indicator_block{
		width:450px;
	}
}
div.main_box .step_indicator_block .step_indicator_item{
	display:flex;
	flex-flow: column;
	align-items:center;
	width:calc(100%/3);
	gap:2px;
}
div.main_box .step_indicator_block .step_indicator_item .step_indicator_circle{
	display:flex;
	width:44px;
	height:44px;
	border-radius:50%;
  	justify-content: center;
	align-items:center;
	font-weight:bold;
	background:#e9ecef;
	border:solid #fff 3px;
	position:relative;
	font-size:20px;
}
div.main_box .step_indicator_block .step_indicator_item .step_indicator_circle:before{
	position: absolute;
    top: 50%;
    left:28px;
    z-index: -1;
    content: "";
    width:64px;
    margin-top: -3px;
    height: 1px;
    display: inline-block;
    border-top: 6px solid #e9ecef;
}
@media only screen and (min-width: 738px){
	div.main_box .step_indicator_block .step_indicator_item .step_indicator_circle:before{
		width:138px;
	}
}
/* 最後要素には線つけない */
div.main_box .step_indicator_block .step_indicator_item:last-child .step_indicator_circle:before{
	display:none;
}
div.main_box .step_indicator_block .step_indicator_item.finished .step_indicator_circle{
	background:#5193f7;
	color:#fff;
}
div.main_box .step_indicator_block .step_indicator_item.finished .step_indicator_circle:before{
	border-top: 6px solid #5193f7;
}
div.main_box .step_indicator_block .step_indicator_item .step_indicator_txt{
	font-size:14px;
	font-weight:bold;
	color:#aaa;
}
div.main_box .step_indicator_block .step_indicator_item.finished .step_indicator_txt{
	color:#606060;
}
/*=================================
■ piece
=================================*/
.main_box.piece{
	overflow: hidden;/*楽譜ページの横ブレを矯正*/
}

.img_slider{
	width:calc(100% + 10px);
	margin:0 -5px;
}

.img_slider .slider_main{
	width:100%;
	overflow: scroll;
	position: relative;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.slider_main.able_swipe{
	scroll-snap-type: x mandatory;
}
.slider_main::-webkit-scrollbar{
  display:none;
}
.slider_main.visible{
	overflow:visible !important;
}
.slider_main.swiping{
	overflow:hidden !important;/*連続スワイプの挙動を安定化（タッチデバイス）*/
}

.img_slider .swiper_wrapper{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	position: relative;
	width: auto;
	height: 100%;
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property:transform, -webkit-transform;
	transition: all 0.3s;
 	-webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
}
.swiper_wrapper_main .swiper_slide{
    position: relative;
    width: 100%;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height:100%;
    display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-items:center;
	justify-content:center;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.img_slider .swiper_slide .image{
	text-align:center;
}
.img_slider .swiper_slide img{
	width:auto;
	max-width:100%;
	object-fit: cover;
	max-height:100%;
	margin-bottom:0px;
}
@media only screen and (min-width: 738px){
	.img_slider .swiper_slide img{
		max-height:100%;
	}
}


/* ページスライダー */
.img_slider .page_slider{
	padding: 5px 0;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	list-style: none;
}
.img_slider .page_slider .swiper_wrapper{
	justify-content:center;
}
.img_slider .page_slider .swiper_slide{
	overflow: hidden;
	position: relative;
	width: calc((100% - 24px)/7);
	margin: 0 2px;
	border-radius: 4px;
	border:2px solid #fff;
	height: 100%;
	display:block;
}
.img_slider .page_slider .swiper_slide.img_active{
	border:2px solid #99c2ff;
}
.img_slider .page_slider .swiper_slide img{
	width:100%;
    height:auto;
}

/*ページネーション*/
.sheetmusic_pagination{
	padding: 5px 0;
	white-space: nowrap;
	overflow: scroll;
	position: relative;
	letter-spacing: -10px;
	-ms-overflow-style: none;
	scrollbar-width: none;
	cursor: pointer;
}
.sheetmusic_pagination::-webkit-scrollbar{
  display:none;
}

.pagination_point{
	display: inline-block;
	background-color: #dee2e6;
	border-radius: 50%;
	width:10px;
	height:10px;
	border: 5px 15px;
	margin: auto 15px;
}
.this_page{
	background-color: #99c2ff;
}

.img_slider .swiper_btn{
	position: absolute;
	top: 50%;
	margin-top: -22px;
	width: 7%;
	height: 44px;
	display: flex;
	align-items: center;
}
.img_slider .swiper_btn.prev{
	left:0;
	justify-content: right;
}
.img_slider .swiper_btn.next{
	right: 0;
	justify-content: left;
}

.img_slider .swiper_btn i{
	color:#808080;
	font-size:30px;
	font-weight: bold;
	margin: 0;
}

.pagination_area{
	width: 7%;
	height: 100%;
	position: absolute;
	z-index: 1;
}
.pagination_area.prev{
	left: 0;
}
.pagination_area.next{
	right: 0;
}
.img_slider .swiper_btn.disable{
	opacity:0.4;
	pointer-events:none;
}
.img_slider .swiper_btn.hovering i{
	color: #99c2ff;
}
.pagination_area.hovering{
	background-color: #99c2ff;
	opacity: 0.2;
	cursor: pointer;
}
.pagination_area.disable{
	pointer-events: none;
}

/*再生ボタンセット*/
.playing_btn_set{
	display: flex;
	justify-content: center;
	padding: 10px 0;
	user-select: none;
	text-align: center;
}
.playing_btn_set i{
	font-size: min(7vw,30px);
	width: 30px;
	color: #3e70bc;
	margin: 0 min(5vw,20px);
	cursor: pointer;
}
.playing_btn_set i.active {
	color: #5193f7;
}
@media (hover: hover) and (pointer: fine) {
	.playing_btn_set i:hover{
		color: #5193f7;
	}
}

/*再生ヘッド*/
.playing_scroll_bar{
	padding: 10px 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0 25px;
	cursor: pointer;
}
.scroll_bar{
	background-color: #dee2e6;
	width: 100%;
	height: 4px;
	margin: auto;
	position: relative;
	flex-direction: row;
}
.playing_point{
	background-color: #f45079;
	border-radius: 50%;
	width:15px;
	height:15px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

/*全画面表示*/
.fullscreen_background{
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	-webkit-user-select: none;
	user-select: none;
}
.fullscreen_background.show{
	position: fixed;
	display: flex;
	justify-content: center;
	background-color: white;
	z-index: 1010;
	align-items: baseline;
}
.loading{
	pointer-events: none;
}
.no_scroll{
	position: fixed;
	left: 0;
	right: 0;
	overflow: hidden;
}

/*ファーストビュー*/
.controller.fix{
	position: fixed;
	bottom: 0;
	background-color: #fff;
	z-index: 1011;
	opacity: 0.95;
}
/*ガイド表示*/
.swiper_nav{
	overflow-x: auto;
	white-space: nowrap;
	font-size: 0;
	margin: 0;
	padding: 0;
}
.swiper_nav .horizontal_list{
	margin: 10px 0;
}
.swiper_nav .horizontal_list a li{
	display: inline-block;
	font-size: clamp(14px,3.5vw,30px);
	text-align: center;
	position: relative;
	color: #606060;
	padding: 0.5vw 3.5vw;
	margin: 0px;
	box-sizing: border-box;
	border-top: 4px solid #E9ECEF;
}
.swiper_nav .horizontal_list a li.selected{
	font-weight: bold;
	border-top: 4px solid #5193F7;
}

.firstview_popup{
	display:none;
}
.guide{
	background-color: #ea9c2e;
	color: #fff;
	font-size: 24px;
	text-align: center;
	padding: 6px;
	border-radius: 10px;
	opacity: 0.8;
	position: fixed;
	z-index: 1011;
}

.main_box .firstview_btn_group{
	margin-left: 0;
	margin-top: 10px;
	display: flex;
}
.firstview_btn_group li{
	width: 40%;
	background-color: #e8f1ff;
	border-radius: 10px;
	color: #5193F7;
	font-size: 18px;
	font-weight: bold;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	padding: 4px;
	cursor: pointer;
}
div.main_box .firstview_btn_group .pdf_btn,
div.main_box .firstview_btn_group .operation_guide_btn{
	margin: 0 1%;
	width: 48%;
}
.firstview_btn_group li i{
	font-size: 18px;
}
/*操作ガイドポップアップ*/
.guide_modal{
	position:fixed;
	width: 100%;
	height: 100%;
	z-index: 2000;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.guide_modal.hide{
	display: none;
}
.operation_guide{
	height: 80%;
	width: 90%;
	position: relative;
}
.guide_img{
	height: 100%;
	position: absolute;
	z-index: 2002;
	display: none;
	bottom: 0;
}
.guide_canvas{
	max-height: 100%;
	max-width: 100%;
}

div.guide_modal .over_lay {/* オーバーレイ（薄い黒幕）*/
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,0.5);
	width:100%;
	height:100vh;/*  表示画面いっぱいにする*/
	z-index:2001;
}
.operation_guide .guide_close_btn{
	font-size:min(10vw,48px);
	color: #fff;
	z-index: 2010;
	position: absolute;
	right: 0;
	display: none;
}
.operation_guide .guide_close_btn i{
	margin: 0;
}

/* --------------------------------------------------
■ 教室情報テーブル
 -------------------------------------------------- */
 .blue_table.school_info{
	font-size:14px;
}
.blue_table.school_info th{
	width:25%;
}
.blue_table.school_info td.padding_none{
	padding:0px;
}
.blue_table.school_info td.padding_none .open_day_table{
	margin-bottom:0px;
	border:none;
}
.blue_table.school_info td.padding_none .open_day_table td{
	border-bottom:none;
}
.blue_table.school_info td.padding_none .open_day_table tr:last-child{
	border-bottom:none;
}
.blue_table.school_info td.padding_none .open_day_table tr td:first-child{
	border-left:none;
}
.blue_table.school_info td a{
	overflow-wrap: break-word;
}
.blue_table.school_info td img{
	margin-bottom: 0px;
}



/*--------------------------------------------------------
■ category
--------------------------------------------------------*/
div.main_box.piece h2.category{
	font-size: 16px;
	margin-top: 25px;
	margin-bottom: 0px;/* liにmargin-top: 20pxがあるため */
	font-weight: bold;
	color: #5193f7;
	text-align: center;
	background-color: #e8f1ff;
	border-radius: 0px 0px 20px 20px / 0px 0px 20px 20px;
	padding: 10px;
	border-top:5px solid #5193f7;
}
@media only screen and (min-width: 738px){
	div.main_box.piece h2.category{
		font-size: 17px;
		margin-top: 35px;
		margin-bottom: 5px;/* liにmargin-top: 20pxがあるため */
	}
}
div.main_box.piece h2.category span{
	color: #606060;
}
div.main_box.piece div.category{
	margin: 0 auto;
}
div.main_box.piece div.category ul{
	margin-left: 0;/* デフォルトでは20pxなので */
	margin-bottom: var(--margin_bottom_s);
	text-align: left;
}
@media only screen and (min-width: 738px){
	div.main_box.piece div.category ul{
		margin-bottom: var(--margin_bottom_ml);;
	}
}
div.main_box.piece div.category ul li{
	width: 48%;
	margin: 15px 0 15px 0;
	padding: 0;
	box-shadow: 0 2px 4px rgba(0,0,0,.25);
	display: inline-block;
	border-radius: 10px 10px 0 0;
}
div.main_box.piece div.category ul li:nth-child(2n+1){
	margin-right: 2%;
	margin-left: 0%;
}
div.main_box.piece div.category ul li:nth-child(2n+2){
	margin-right: 0%;
	margin-left: 2%;
}
@media only screen and (min-width: 738px){
	div.main_box.piece div.category ul li{
		width: 31%;
		margin: 20px 0 20px 0;
	}
	div.main_box.piece div.category ul li:nth-child(3n+1){
		margin-right: 1.75%;
		margin-left: 0%;
	}
	div.main_box.piece div.category ul li:nth-child(3n+2){
		margin-right: 1.75%;
		margin-left: 1.75%;
	}
	div.main_box.piece div.category ul li:nth-child(3n+3){
		margin-right: 0%;
		margin-left: 1.75%;
	}
}
div.main_box.piece div.category div.title{
	color: #ffffff;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	background-color: #66a3ff;
	text-align: center;
	padding: 10px;
	border-radius: 10px 10px 0 0;
}
div.main_box.piece div.category ul li img{
	margin-bottom: 0;
}
/*--------------------------------------------------------
■ mswa_ms
--------------------------------------------------------*/

/* タッチ領域を確保するため、下マージンは0にする */
div.main_box.piece div.mswa_ms{
	margin-left: -5px;/* 引き伸ばして表示 */
	margin-right: -5px;
}
div.main_box.piece div.mswa_ms.variations{
	transition: opacity 1s, visibility 0s ease 1s;
  	opacity: 0;
  	visibility: hidden;
}
div.main_box.piece div.mswa_ms.variations.show{
  transition-delay: 0s;
  opacity: 1;
  visibility: visible;
}
@media only screen and (min-width: 738px){
		div.main_box.piece div.mswa_ms{
		margin-left: -10px;/* 引き伸ばして表示 */
		margin-right: -10px;
		margin-bottom: 20px;
	}
}
@media only screen and (min-width: 1117px){
	div.main_box.piece div.mswa_ms{
		margin-left: 0px;
		margin-right: 0px;
	}
}

div.main_box.piece div.mswa_ms div.outer_box{
	position: relative;
	height: 400px;
}
div.main_box.piece div.mswa_ms img{
	pointer-events: none;/* キャンバスをクリック対象とする */
	position: absolute;
}
div.main_box.piece div.mswa_ms canvas{
	width: 100%;
	max-width: 100%;
	height: 100%;
	vertical-align: bottom;
	position: absolute;
	cursor: pointer;
}

/*--------------------------------------------------------
■ btn_box（4分割でも5文字までなら入ります）
--------------------------------------------------------*/

div.main_box.piece div.btn_box{
	margin: 0 auto;
	font-size: 13px;
}
@media only screen and (min-width: 375px) {/* iPhone6以上iPad未満 */
	div.main_box.piece div.btn_box{
		font-size: 14px;
	}
}
@media only screen and (min-width: 738px){/* iPad以上 */
	div.main_box.piece div.btn_box{
		font-size: 16px;
	}
}

div.main_box.piece div.btn_box ul{
	margin-left: 0;/* デフォルトでは20pxなので */
	margin-bottom: 20px;
	text-align: left;
}
div.main_box.piece div.btn_box ul li{
	width: 31%;
	padding: 0px;
	margin: 0px;
	box-shadow: 0 2px 4px rgba(0,0,0,.25);
	display: inline-block;
	border-radius: 5px;
	cursor: pointer;
}
div.main_box.piece div.btn_box ul li.selected{
	box-shadow: 0 1.5px 3px rgba(0,0,0,.25);
	cursor: auto;
}
div.main_box.piece div.btn_box ul li.disabled{
	box-shadow: none;
	cursor: auto;
}
div.main_box.piece div.btn_box ul li div{
	color: #ffffff;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
	padding: 6px 0;
	border-radius: 5px;
}

/*--------------------------------------------------------
ボタングループが連続する場合
--------------------------------------------------------*/

div.main_box.piece div.btn_group div.btn_box:not(:last-child) ul{
	margin-bottom: 10px;
}

/*--------------------------------------------------------
青
--------------------------------------------------------*/

div.main_box.piece div.btn_box.blue ul li div{
	background-color: #5193f7;
}
div.main_box.piece div.btn_box.blue ul li.selected div{
	background-color: #3e70bc;
}
div.main_box.piece div.btn_box ul li div.blue{
	background-color: #5193f7;
}
div.main_box.piece div.btn_box ul li div.red{
	background-color: #f45079;
}
div.main_box.piece div.btn_box ul li div.yellow{
	background-color: #ea9c2e;
}

/*--------------------------------------------------------
赤
--------------------------------------------------------*/

div.main_box.piece div.btn_box.red ul li div{
	background-color: #f45079;
}
div.main_box.piece div.btn_box.red ul li.selected div{
	background-color: #ba3d5c;
}

/*--------------------------------------------------------
黄
--------------------------------------------------------*/

div.main_box.piece div.btn_box.yellow ul li div{
	background-color: #ea9c2e;
}
div.main_box.piece div.btn_box.yellow ul li.selected div{
	background-color: #b7923c;
}

/*--------------------------------------------------------
1個ボタン
--------------------------------------------------------*/

div.main_box.piece div.btn_box.one ul li{
	width: 100%;
}

/*--------------------------------------------------------
2個ボタン
--------------------------------------------------------*/

div.main_box.piece div.btn_box.two ul li{
	width: 49%;
}

div.main_box.piece div.btn_box.two ul li:nth-child(2n+1){
	margin-right: 1%;
	margin-left: 0%;
}
div.main_box.piece div.btn_box.two ul li:nth-child(2n+2){
	margin-right: 0%;
	margin-left: 1%;
}

/*--------------------------------------------------------
3個ボタン
--------------------------------------------------------*/

div.main_box.piece div.btn_box.three ul li{
	width: 32%;
}

div.main_box.piece div.btn_box.three ul li:nth-child(3n+1){
	margin-right: 1%;
	margin-left: 0%;
}
div.main_box.piece div.btn_box.three ul li:nth-child(3n+2){
	margin-right: 1%;
	margin-left: 1%;
}
div.main_box.piece div.btn_box.three ul li:nth-child(3n+3){
	margin-right: 0%;
	margin-left: 1%;
}

/*--------------------------------------------------------
4個ボタン
--------------------------------------------------------*/

div.main_box.piece div.btn_box.four ul li{
	width: 23.5%;
}

div.main_box.piece div.btn_box.four ul li:nth-child(4n+1){
	margin-right: 1%;
	margin-left: 0%;
}
div.main_box.piece div.btn_box.four ul li:nth-child(4n+2),
div.main_box.piece div.btn_box.four ul li:nth-child(4n+3){
	margin-right: 1%;
	margin-left: 1%;
}
div.main_box.piece div.btn_box.four ul li:nth-child(4n+4){
	margin-right: 0%;
	margin-left: 1%;
}
/*=================================
■ lesson
=================================*/

/*--------------------------------------------------------
■ lesson_content
--------------------------------------------------------*/
div.main_box.lesson table.lesson_content{
	border-top: none;
}
div.main_box.lesson table.lesson_content tr{
	border-bottom: none;
}
div.main_box.lesson table.lesson_content h3{
	margin-top:20px;
	margin-bottom: 15px;
}
div.main_box.lesson table.lesson_content td{
	border:none;
	padding:0;
	vertical-align:top;
}
div.main_box.lesson table.lesson_content td:first-child{
	display:none;
}
div.main_box.lesson table.lesson_content td.photo{
	width:25%;
}
@media only screen and (min-width: 738px){
	div.main_box.lesson table.lesson_content td:first-child{
		display:table-cell;/* テーブルの元々の表示属性はdisplay: blockではなくtable-cell */
	}
}
div.main_box.lesson table.lesson_content td p{
	margin-bottom: 15px;
}
div.main_box.lesson table.lesson_content td.piece h3{
	margin-top: 25px;
}
div.main_box.lesson table.lesson_content td.piece > h3:first-child{/* レッスン楽譜のh3はマージン無し */
	margin-top: 0px;
}
div.main_box.lesson table.lesson_content td.piece ul,
div.main_box.lesson table.lesson_content td.piece p{
	margin-bottom: 0px;
}
div.main_box.lesson table.lesson_content td.piece .video_info {
  display: none;
}
div.main_box.lesson div.lesson_content_profile{
	margin:0px;
	text-align:center;
	position:relative;
	width:150px;
	border: 1px solid #dddddd;
	border-radius:5px;
	padding:5px;
}

/* スマホ用の講師プロフィール */

div.main_box.lesson div.lesson_content_profile.sp{
	margin:0 auto;
	width:280px;
}
@media only screen and (min-width: 738px){
	div.main_box.lesson div.lesson_content_profile.sp{
		display:none;
	}
}
div.main_box.lesson div.lesson_content_profile.sp table{
	margin:0px;
	border-top: none;
}
div.main_box.lesson div.lesson_content_profile.sp table tr{
	border-bottom: none;
}
div.main_box.lesson div.lesson_content_profile.sp td{
	border:none;
	padding:0px;
}
div.main_box.lesson div.lesson_content_profile a{
	color:#808080;
	position:relative;
}
div.main_box.lesson div.lesson_content_profile p.skype_teacher_name{
	margin-bottom:7px;
	margin-top:7px;
}
div.main_box.lesson div.lesson_content_profile span{
	font-size:14px;
}
div.main_box.lesson div.lesson_content_profile p.count{/* 現在使っていないが評価有りバージョンで使用 */
	margin-bottom:0px;
	font-size:14px;
}
div.main_box.lesson div.lesson_content_profile img{
	margin-bottom:0px;
	vertical-align: top;
	width:100%;
}
/*--------------------------------------------------------
■ お気に入り講師の星マーク・NEWマーク
--------------------------------------------------------*/
div.main_box.lesson .photo_frame{
	position:relative;
}
div.main_box.lesson .photo_frame img.favorite{
	cursor:pointer;
	position: absolute;
	width:25%;
   	top: 5%;
   	left: 5%;
   	z-index: 20;
}
div.main_box.lesson .photo_frame img.new{
	cursor:pointer;
	position: absolute;
	width:40%;
   	bottom: 5%;
   	right: 5%;
   	z-index: 20;
}
/*--------------------------------------------------------
■ 星の評価マーク
--------------------------------------------------------*/
div.main_box.lesson div.profile ul.star{
	margin:0px;
	list-style:none;
	width:100%;
}
div.main_box.lesson div.profile ul.star li{
	display: inline-block;/* 横ならびにする */
    margin: 0px 1px auto auto;
    padding:0px;
	line-height:9px;/* 文字を上下中央寄せ */
}
@media only screen and (min-width: 738px){
	div.main_box.lesson div.profile ul.star li{
    margin: 0px 2px auto auto;
	}
}
div.main_box.lesson div.profile ul.star li span{
    font-size:14px;
}
div.main_box.lesson div.profile ul.star li img.star{
	width:12px;
	height:11px;
}

/*--------------------------------------------------------
■ 曲検索ボックス
虫眼鏡アイコン付きの検索ボックスは#search_formで定義
--------------------------------------------------------*/
div.main_box.lesson div.search_piece{
	background-color:#f9f9f9;
	padding:15px 5px;
	margin-right:-5px;
	margin-left:-5px;
}
@media only screen and (min-width: 738px){
	div.main_box.lesson div.search_piece{
	border-radius:6px;
	padding:15px;
	margin:0px;
	}
}
div.main_box.lesson div.search_piece div.title{
	font-size: 18px;
	font-weight: bold;
	margin-top:0px;
	margin-bottom: 15px;
	border-bottom: solid 3px #e9ecef;
}
div.main_box.lesson div.search_piece input[type="search"]{
	background-color: #ffffff;
}

/*--------------------------------------------------------
曲検索　チェックボックス付きのラベル
--------------------------------------------------------*/
div.main_box.lesson div.search_piece div.checkbox{
	display:inline;
	margin-right:8px;
}
div.main_box.lesson div.search_piece label{
    padding-left: 40px; /* チェックボックスと文字の間隔を取るため左paddingを大きく取る */
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    cursor: pointer;
   	margin-left: 0px;
   	margin-bottom: 15px;
   	background:#ffffff;
   	display:inline-block;
   	max-width: calc(100% - 8px);/* スクロールバーとラベルのmargin確保のため */
   	width: calc(100% - 8px);
}
@media only screen and (min-width: 738px){
	div.main_box.lesson div.search_piece label{
		max-width: calc(100% - 15px);/* 曲名が長い場合に対応 */
		width:auto;
	}
}
div.main_box.lesson div.search_piece label:before{
	left: 10px;　/* ラベルの中にラジオボタンを入れる */
}
div.main_box.lesson div.search_piece input[type="checkbox"]:checked + label:after { /* ラジオボタンの色を変える */
	left: 14px;　/* ラジオボタンの真ん中に青い点が入るように位置調整 */
}
div.main_box.lesson .search_piece input[type=checkbox]:checked + label{
 	background-color:#e8f1ff;　/* クリック時にラベルの背景色を変える */
}
/*--------------------------------------------------------
選んだ曲の矢印アイコン
--------------------------------------------------------*/
div.main_box .select_piece_arrow_icon{
	font-size: 30px;
	margin-right: 0px
}
@media only screen and (min-width: 738px){
	div.main_box .select_piece_arrow_icon{
		font-size: 40px;
	}
}
/*--------------------------------------------------------
■ 選んだ曲のボックス
--------------------------------------------------------*/
div.main_box div.select_piece{
	background-color:#f9f9f9;
	padding-left:5px;
	padding-right:5px;
	padding:10px 5px 0px 5px;
	margin-left:-5px;
	margin-right:-5px;
	border-radius:0px;
}
@media only screen and (min-width: 738px){
	div.main_box div.select_piece{
		border-radius:6px;
		padding:10px 15px 0px 15px;
		margin:0px;
	}
}
div.main_box div.select_piece div.title{
	position:relative;
	margin:0px;
	height:30px;
}
div.main_box div.select_piece div.title{
	font-size: 18px;
	position:relative;
	margin-top:0px;
	display:inline; /* pと横並びにするため */
	font-weight:bold;
}
div.main_box .select_piece table.select_piece{
	width:100%;
	padding: 0;
	border: 0;
	margin-bottom:0px;
	border-collapse: separate;/* 行や列の間をあける */
    border-spacing: 0px 15px;/* 行の間をあける */
}
div.main_box .select_piece td{
	border:none;
	padding:0px;
}
/*--------------------------------------------------------
閉じるボタン付きのラベル
--------------------------------------------------------*/
div.main_box .select_piece .selected_piece_label{
	width: 100%;
	padding: 6px 28px 6px 6px; /* 文字と閉じるボタンが重ならないようにpadding-rightを設ける */
	border: 1px solid #d8d8d8;
	background: #e8f1ff;
	position: relative;
	border-radius: 5px;
}
@media only screen and (min-width: 738px){
	div.main_box .select_piece .selected_piece_label{
	  max-width:450px;
	  padding: 8px 28px 8px 8px; /* 文字と閉じるボタンが重ならないようにpadding-rightを設ける */
	}
}
div.main_box .select_piece button.close_btn{
    position: absolute;
    color: #dddddd;
    top: 50%;/* 上下中央寄せ */
    transform: translateY(-50%);/* 上下中央寄せのズレを補正*/
    right: 9px;
    font-size:24px;
    background:none;
    border:none;
    padding:0px;
    cursor: pointer;
}
div.main_box .select_piece button.close_btn i{ /* 不要なマージンをなくす */
	margin-right:0px;
}
/*--------------------------------------------------------
デフォルトで表示させる”追加できます”ラベル
--------------------------------------------------------*/
div.main_box .select_piece .add_piece_label{
	width: 100%;
	 border: 1px dashed #d8d8d8;
	 padding: 6px;
	 background: #fff;
	 position: relative;
	 border-radius: 5px;
	 color:#c0c0c0;
	 display:block;
}
@media only screen and (min-width: 738px){
	div.main_box .select_piece .add_piece_label{
	 	max-width: 450px;
		padding: 8px;
	}
}
/*--------------------------------------------------------
■ レパートリー講師希望の星マーク
【要確認】講師が増えた際に使用する。タグのあり方は
スタッフメモ>丹澤>レパートリー講師希望ボタンbkのファイルに書かれている
--------------------------------------------------------*/
div.main_box.lesson div.star_repertory input{
	display:none;
}
#star_off{
	color:#5193f7  ;
	font-size:23px;
}
div.main_box.lesson div.star_repertory label.circle{
	border-radius: 50%;
    overflow: hidden;
    padding: 6px 4.1px;
    background:#ffffff;
    height: 35px;
    width: 35px;
    border:none;
    cursor: pointer;
    display:inline-block;
    transition: 0.3s;
    margin-left:15px;/* 閉じるボタン付きラベルとのmargin */
}
div.main_box.lesson div.star_repertory input[type=checkbox]:checked + label.circle{
	background-color:#5193f7;　/* クリック時にラベルの背景色を変える */
}
div.main_box.lesson div.star_repertory input[type=checkbox]:checked + label #star_off{
	color:#fff;　/* クリック時に星の色を変える */
}

/*--------------------------------------------------------
hiddenに一時的に曲名（作曲者名）を保管するため
--------------------------------------------------------*/
div.main_box.lesson div.hidden_piece_id input[type=hidden]{
	display: none;
}
/*--------------------------------------------------------
■ 自動予約のラベル
--------------------------------------------------------*/
span.auto_book_label{
	background:#ea9c2e;
	border-radius:5px;
	color:#fff;
	padding:3px;
	margin-right: 6px;
}
/*=================================
■ school
=================================*/

/*--------------------------------------------------------
■ 都道府県一覧テーブル
（外枠はblue_title_box）
-------------------------------------------------------- */
div.main_box.school table.all_pref_block{
	border:none;
	border-collapse: separate;/* 角丸をつけるために必要 */
	border-spacing: 0;/* tabelの隙間をなくす */
	border-radius: 0 0 10px 10px;
	overflow: hidden;
	padding:0px;
	margin:0px;
}
div.main_box.school table.all_pref_block tr.pref_group{
	border-bottom:none;
}
div.main_box.school table.all_pref_block tr.pref_group th{
	width:122px;
	background:#e8f1ff;
	padding:10px;
}
div.main_box.school table.all_pref_block tr.pref_group td{
	padding: 10px 10px 0px 10px;
}
div.main_box.school table.all_pref_block tr.pref_group td div{
	border-bottom: 2px dashed #e8f1ff;
}
div.main_box.school table.all_pref_block tr.pref_group td div.last{
	border-bottom: none;
}
div.main_box.school table.all_pref_block tr.pref_group td ul{
	list-style:none;
	margin:0px;
	letter-spacing: -.4em;/* 文字間を詰めて横並びリストの隙間をなくす */
}
div.main_box.school table.all_pref_block tr.pref_group td ul li{
	display:inline-block;
	width:calc(100%/3);/* ３等分 */
	margin:0;
	padding:0;
	margin-bottom:10px;
	letter-spacing: normal;
}
div.main_box.school table.all_pref_block tr.pref_group td ul li a{
	display:inline-block;
	width:100%;
}
/*topページのリンク無しの都道府県カラー*/
div.main_box.school table.all_pref_block tr.pref_group td ul li a.no_link{
	color:#808080;
}
@media only screen and (min-width: 738px){
	div.main_box.school table.all_pref_block tr.pref_group td ul li{
		width:calc(100%/7);
	}
}
/*--------------------------------------------------------
■ 各エリア・駅別一覧ブロック
（外枠はblue_title_box）
-------------------------------------------------------- */
div.main_box.school div.area_station_block{
	position: relative;
	background: #fff;
	padding:0 5px 0 70px;
	color: #333;
	border-radius: 0 0 10px 10px;
	left: 0px;
	width:100%;
}
/* ブロックの左部分 */
div.main_box.school div.area_station_block:before{
	content: "";
	display: inline-block;
	position: absolute;
	padding: 0em;
	color:#606060;
	background: #e8f1ff;
	border-right:none;
	font-weight: normal;
	width: 60px;
	text-align: center;
	height: 100%;
	left:0px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: 0 0 0 9px;/* 10pxだと若干隙間ができるため */
}
div.main_box.school div.area_station_block div#vertical_scroll_box{/* 基本のスクロールバーは共通項目 ☆後ほどprivate.cssに移動させる */
	max-height:268px;
    white-space: nowrap;
	padding-right:5px;
}
div.main_box.school div.area_station_block i.fa-subway{
	position:absolute;
	left:10px;
	top:calc((100% - 58px) /2);
	color:#5193f7  ;
	font-size:24px;
	margin-right:0px;
	display:block;
	width:40px;
}
div.main_box.school div.area_station_block i.fa-subway.area:after{
	margin-top:10px;
	content:"エリアの駅";
	font-size:12px;
	display:block;
}
div.main_box.school div.area_station_block i.fa-subway.station:after{
	margin-top:10px;
	content:"近くの駅";
	font-size:12px;
	display:block;
}
div.main_box.school div.area_station_block span.icon_text{
	font-size:13px;
}
div.main_box.school div.area_station_block div.station_name{
	height:100%;
	position:relative;
	border-bottom:#e8f1ff 2px dashed;
}
div.main_box.school div.area_station_block div.station_name:last-child{
	border-bottom:none;
}
div.main_box.school div.area_station_block div.station_name:last-child{
	margin-bottom:0;
}
div.main_box.school div.area_station_block span.text{
	max-width:calc(100% - 50px);/* ◯件部分のwidthを確保 */
	display:inline-block;
	white-space:normal;
}

div.main_box.school div.blue_title span.station{
	max-width:calc(100% - 160px);/* 160px =margin-left 60px + imgの最大width 90px ＋imgのmargin 10px */
}
/* 変更ボタン */
div.main_box.school div.blue_title span.change_btn{
	margin-left:10px;
	position:absolute;
	right:10px;
	top:calc((100% - 30px) /2);
	display:inline-block;
	cursor:pointer;
}
div.main_box.school div.blue_title span.change_btn a{
	color:#fff;
	font-weight:bold;
}
div.main_box.school div.blue_title span.change_btn a img{
	width:63px;
	margin-bottom:0px;
}
/* 別エリアボタン */
div.main_box.school div.blue_title span.change_btn.change_area a img{
	width:90px;
}
/* スクロールバーの調整 */
div.main_box.school .area_station_block #vertical_scroll_box::-webkit-scrollbar-track {/* スクロールの背景の設定 */
		margin-top:10px;
		margin-bottom:10px;
}
/* 駅名リンク */
div.main_box.school div.area_station_block div.station_name a{
	display:block;
	padding-bottom:10px;
}
div.main_box.school div.area_station_block div.station_name a:first-child{
	padding-top:10px;
}
div.main_box.school div.area_station_block .station_name span.station_link span.school_count_station{
	position:absolute;
	right:0px;
	top:calc((100% - 20px) /2);
	display:inline-block;
	font-size:12px;
	margin-right:0px;
	color:#606060;
}
/*駅ページのリンク無しの駅カラー*/
div.main_box.school div.area_station_block .station_name span.station_link span.no_link{
	color:#808080;
}
/* vertical_scroll_boxが一行（heightが38px or 要検討px以下)だった場合、area_station_blockタグにクラス名one_rowを付与 */
	div.main_box.school div.area_station_block.one_row {
  	 	min-height:80px;
}
/*  vertical_scroll_boxが一行（heightが38px or 要検討px以下)だった場合、
vertical_scroll_box タグの子（Station_nameの親）としてstation_name_rowを追加*/
div.main_box.school div.area_station_block.one_row div#vertical_scroll_box.station_name_row{
	overflow: visible;
}
div.main_box.school div.area_station_block.one_row div#vertical_scroll_box.station_name_row div.station_name{
	margin-top:16.5px;
}
@media only screen and (min-width: 738px){
	div.main_box.school div.area_station_block{
		padding:10px 10px 0 70px
	}
	div.main_box.school div.area_station_block div#vertical_scroll_box {
    	max-height:204px;
    	white-space: normal;
    	padding-right:0px;
	}
	div.main_box.school .area_station_block #vertical_scroll_box::-webkit-scrollbar-track {/* スクロールの背景の設定 */
		margin-top:0px;
	}
	div.main_box.school div.area_station_block div.station_name{
		display:inline-block;
		margin-right:20px;
		border-bottom:none;
		margin-bottom:10px;
	}
	div.main_box.school div.area_station_block div.station_name:last-child{
	margin-bottom:10px;;
	}
	div.main_box.school div.area_station_block div.station_name a{
		display:inline;
	}
	div.main_box.school div.area_station_block div.station_name a:first-child {
    	padding-top:0px;
	}
	div.main_box.school div.area_station_block span.text {
    	max-width: 100%;/* 必要 */
	}
	div.main_box.school div.area_station_block span.school_count_station{
		margin-left:5px;
		float:none;
		font-size:14px;
		heignt:25px;
		line-height:25px;
		position:static !important;
	}
	div.main_box.school div.area_station_block span.school_count_station:before{
		content:"（";
	}
	div.main_box.school div.area_station_block span.school_count_station:after{
		content:"）";
	}

	/* vertical_scroll_boxが一行（heightが38px or 要検討px以下)だった場合、area_station_blockタグにクラス名one_rowを付与 */
	div.main_box.school div.area_station_block.one_row {
    	position:relative;
	}
	/*  vertical_scroll_boxが一行（heightが38px or 要検討px以下)だった場合、
	vertical_scroll_box タグの子（Station_nameの親）としてstation_name_rowを追加*/
	div.main_box.school div.area_station_block.one_row div#vertical_scroll_box.station_name_row{
		position:absolute;
		top:calc((100% - 28px) /2);
	}
	div.main_box.school div.area_station_block.one_row div#vertical_scroll_box.station_name_row div.station_name{
		margin-top:0px;
	}
}
@media only screen and (max-width: 320px){/* iphone5/se用 */
	div.main_box.school div.blue_title span.change_btn{
		font-size:16px;
		top:calc((100% - 27px) /2);
	}
	div.main_box.school div.blue_title span.change_btn a img{
		width:56.7px;
	}
		div.main_box.school div.blue_title span.change_btn.change_area a img{
		width:81px;
	}
	div.main_box.school div.blue_title span.station{
		max-width:calc(100% - 151px);/* 151px =margin-left 60px + imgの最大width 81px ＋imgのmargin 10px */
	}
}
/*--------------------------------------------------------
■ ジャンルボタン
--------------------------------------------------------*/
div.main_box.school ul.genre_button{
    padding: 0 0 5px 0;
    margin:0 0 15px 0;
    letter-spacing: -.4em;
    width:100%;
   	overflow-x: scroll;/* スマホ版はスクロールさせる */
    white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
div.main_box.school ul.genre_button li{
    cursor: pointer;
    border: 1px solid #5193f7;
    padding: 8px 10px;
    font-weight: bold;
    text-align:center;
    margin-top:0px;
    margin-right:10px;
    margin-bottom:0px;
    letter-spacing: normal;
   	display:inline-block;
	font-size:13px;
	border-radius:10px;
}
div.main_box.school ul.genre_button li:last-child{
	margin-right:5px !important;
}
div.main_box.school ul.genre_button li.active{
    cursor: auto;
	background:#5193f7;
	color: #fff;
	font-weight:bold;
}
div.main_box.school ul.genre_button li a{
	color: #5193f7;
	font-weight:normal;
	display: block;
}
div.main_box.school ul.genre_button li a i{
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box.school ul.genre_button{
	    white-space: normal;
	    overflow-x: visible;
	}
	div.main_box.school ul.genre_button li{
		width:calc((100% - 40px)/5);
		font-size:15px;
		padding: 5px 10px;
	}
	div.main_box.school ul.genre_button li:last-child{
		margin-right:0px !important;
}
	div.main_box.school ul.genre_button li a i{
		display:inline;
	}
}
/*--------------------------------------------------------
■ 詳細条件ボタン
--------------------------------------------------------*/
div.main_box.school .detailed_condition_block{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	width:100%;
   	overflow-x: scroll;/* スマホ版はスクロールさせる */
    white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 738px){
	div.main_box.school .detailed_condition_block{
	    white-space: normal;
	    overflow-x: visible;
	}
}
div.main_box.school .detailed_condition_block .detailed_condition_txt{
	margin-right:10px;
}
div.main_box.school .detailed_condition_block .detailed_condition_txt i{
	color:#5193f7;
}
div.main_box.school .detailed_condition_block .detailed_condition_item{
    border: 1px solid #e9ecef;
    border-radius: 10px;
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	justify-content:center;
	align-items:center;
	padding-left:10px;
	height:36px;
	margin-right:10px;
	position: relative;
	cursor:pointer;
}
div.main_box.school .detailed_condition_block .detailed_condition_item.active{
	background:#e8f1ff;
}
div.main_box.school .detailed_condition_block .detailed_condition_item .icon_btn{
	width:30px;
	height:27.5px;
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	justify-content:center;
	align-items:center;
}
/* ポップアップ部分 */
div.main_box.school .detailed_condition_popup {
    display: none;
    height: 100vh;
    width: 100%;
    background-color: rgba(51, 51, 51, 0.7);/* 背景を黒半透明にする */
    position: fixed;
    top: 0;
    left: 0;
    z-index:1001;
}
div.main_box.school .detailed_condition_popup .overlay{
    height: 100vh;
    width: 100%;
    background-color: rgba(51, 51, 51, 0.7);/* 背景を黒半透明にする */
    position: fixed;
    top: 0;
    left: 0;
    z-index:1001;
}
div.main_box.school .detailed_condition_popup.show{
    display: flex;
    justify-content: center;
    align-items: center;
}
div.main_box.school .detailed_condition_popup .content{
    background: #fff;
    padding: 15px;
    width: 100%;
    border-radius:10px;
    margin:0 10px;
    position:relative;
}
@media only screen and (min-width: 1117px){
	div.main_box.school .detailed_condition_popup .content{
		max-width:680px;
	}
}
div.main_box.school .detailed_condition_popup .content .title{
	font-weight:bold;
	margin-bottom:4px;
	font-size:16px
}
@media only screen and (min-width: 738px){
	div.main_box.school .detailed_condition_popup .content .title{
		font-size:17px
	}
}
div.main_box.school .detailed_condition_popup .content .title i{
	color:#5193f7;
}
/* 閉じるボタン */
div.main_box.school .detailed_condition_popup .content .close_btn{
	position:absolute;
	right:15px;
	top:10px;
    color:#c0c0c0;
    font-size:32px;
    background:none;
    border:none;
    cursor:pointer;
}
div.main_box.school .detailed_condition_popup .content .close_btn i{
	margin-right:0px;
}
/* 検索ボタン */
div.main_box.school .detailed_condition_popup .content .search_btn{
	background:#5193f7;
	padding: 10px;
    border-radius: 5px;
    color:#fff;
    position:static;
    font-weight:bold;
    font-size:15px;
    min-width:250px;
    height:50px;
}
/*--------------------------------------------------------
■ 小ボタン
--------------------------------------------------------*/
div.main_box.school .two_small_btn{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	flex-wrap: wrap;/* 横並びにする */
  	justify-content:center;
}
@media only screen and (min-width: 738px){
	div.main_box.school .two_small_btn{
		justify-content:left;
	}
}
div.main_box.school button.small_border_blue_btn{
	border:1px solid #5193f7;
	background-color:#ffffff;
	font-size:15px;
	font-weight:bold;
	color:#5193f7;
	cursor:pointer;
	border-radius:10px;
	min-width:150px;
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	justify-content:center;
	align-items:center;
	height:50px;
}
div.main_box.school button.small_border_blue_btn.pc{/* SP版では非表示 */
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box.school button.small_border_blue_btn{
		font-size:16px;
		min-width:180px;
	}
	div.main_box.school button.small_border_blue_btn.pc{
		display:-webkit-box;
  		display:-ms-flexbox;
  		display:flex;
  		margin-left:auto;
	}
}
div.main_box.school .two_small_btn button.small_border_blue_btn:first-child{
	margin-right:10px;
}
div.main_box.school .two_small_btn button.small_border_blue_btn i{
	font-size:20px;
}
/*--------------------------------------------------------
■ リンクボタン
--------------------------------------------------------*/
div.main_box.school .small_link_btn{
	margin-bottom:5px;
	margin-right:11px;
	text-align:right;
	font-weight:bold;
}
div.main_box.school .small_link_btn a{
  	cursor:pointer;
}
/*--------------------------------------------------------
■ アイコンつきボタン
--------------------------------------------------------*/
div.main_box.school a.border_blue_icon_btn{
	background-color:#ffffff;
	border:solid 1px #5193f7;
	font-size:16px;
	font-weight:bold;
	color:#5193f7;
	cursor:pointer;
	border-radius:10px;
	width:calc((100% - 10px)/2);
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	flex-flow: column;/* 縦並びにする */
	align-items:center;
	padding:12px;
}
div.main_box.school a.border_blue_icon_btn .main_icon{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	justify-content: center;
	align-items:center;
	width:100%;
	height:28px;
	margin-bottom:10px;
}
div.main_box.school a.border_blue_icon_btn .btn_txt{
	width:100%;
	text-align:center;
}
div.main_box.school a.border_blue_icon_btn .main_icon i{
	font-size:28px;
	margin-right:0px;
}
div.main_box.school a.border_blue_icon_btn .sub_icon{
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box.school a.border_blue_icon_btn{
		flex-flow: row nowrap;/* 横並びに戻す */
		height:90px;
		padding:0px 20px;
		font-size:20px;
	}
	div.main_box.school a.border_blue_icon_btn .btn_txt{
		width:calc(100% - 44px);/* 170pxは左右のアイコン領域のwidth分 */
	}
	div.main_box.school a.border_blue_icon_btn .btn_txt .big{
		font-size:28px;
		margin-right:2px;
	}
	div.main_box.school a.border_blue_icon_btn .main_icon{
		display:-webkit-box;
	  	display:-ms-flexbox;
	  	display:flex;
	  	justify-content: center;
		align-items:center;
		width:30px;
		margin-bottom:0px;
	}
	div.main_box.school a.border_blue_icon_btn .main_icon i{
		font-size:32px;
		margin-right:0px;
	}
	div.main_box.school a.border_blue_icon_btn .sub_icon{
		display:-webkit-box;
	  	display:-ms-flexbox;
	  	display:flex;
	  	justify-content: center;
		align-items:center;
		width:14px;
		margin-left:auto;
	}
	div.main_box.school a.border_blue_icon_btn .sub_icon i{
		font-size:32px;
		margin-right:0px;
	}
}
div.main_box.school .two_small_btn a.border_blue_icon_btn:first-child{
	margin-right:10px;
}
/*--------------------------------------------------------
■ 検索ワードボックス
--------------------------------------------------------*/
div.main_box.school .search_word_box{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	border:1px solid #5193f7;
	background-color:#ffffff;
	border-radius:5px;
	padding:10px;
}
div.main_box.school .search_word_box .main_icon{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
	width:20px;
	margin-right:10px;
}
div.main_box.school .search_word_box .main_icon i{
	font-size:20px;
	color:#5193f7;
	margin-right:0px;
}
div.main_box.school .search_word_box .search_word{
	max-width:calc(100% - 20px - 10px - 96px);/* 20px：main_iconのwidth、10px20px：main_iconのmargin-right、96px：filter_btnの最大width */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;/* 2行以上になる場合は末尾に...を追加して省略 */
    overflow: hidden;
}
div.main_box.school .search_word_box .filter_btn{
	margin-left:auto;
	color:#5193f7;
	cursor:pointer;
}
div.main_box.school .search_word_box .filter_btn i{
	margin-left:6px;
	margin-right:0px;
}
/*--------------------------------------------------------
■ エリア選択・町名選択
-------------------------------------------------------- */
div.main_box.school .check_box_list_block{
    margin-right:-5px;
    margin-left:-5px;
}
@media only screen and (min-width: 738px){
	div.main_box.school .check_box_list_block{
	    margin-right:0px;
	    margin-left:0px;
	}
}
div.main_box.school .check_box_list_block .blue_title{
    display:none;
}
@media only screen and (min-width: 738px){
	div.main_box.school .check_box_list_block .blue_title{
	    display:block;
	}
}
div.main_box.school h3.blue_header{
	background:#e8f1ff;
    font-size: 16px;
    padding: 8px 12px;
    margin:0px;
}
@media only screen and (min-width: 738px){
	div.main_box.school h3.blue_header{
	    padding: 8px 15px;
	    border-radius:5px;
	}
	/* 2個目以降のblue_headerはmargin-topを入れて、少し余白を作る */
	div.main_box.school h3.blue_header:nth-child(n + 2) {
	    margin-top:5px;
	}
}
div.main_box.school h3.wrap_header{
    font-size: 16px;
    padding: 8px 12px;
    margin:0px;
    border-bottom:#e8f1ff 1px solid;
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
}
@media only screen and (min-width: 738px){
	div.main_box.school .check_box_list_box:nth-child(n + 2) .blue_header {
	margin-top:5px;
	}
	div.main_box.school .check_box_list_box .wrap_group{
		display:-webkit-box;
  		display:-ms-flexbox;
  		display:flex;
  		margin:10px 0;
  		padding-bottom:10px;
  		border-bottom: #e8f1ff 2px dashed;
	}
	div.main_box.school .check_box_list_box .wrap_group:last-child{
  		border-bottom: none;
  		margin-bottom: 0;
	}
	div.main_box.school h3.wrap_header{
    	display:-webkit-box;
  		display:-ms-flexbox;
  		display:flex;
  		align-items:center;
  		justify-content:center;
	    width:110px;
	    font-size:14px;
	    padding:8px;
	    background:#f3f3f3;
	    border-radius:5px;
	}
	div.main_box.school h3.blue_header + h3.wrap_header{
	    padding-top: 8px;
	}
}
div.main_box.school h3.wrap_header .open_icon{
	margin-left:auto;
}
@media only screen and (min-width: 738px){
	div.main_box.school h3.wrap_header .open_icon{
		display:none;/* PC版ではアイコン表示しない */
	}
}
div.main_box.school h3.wrap_header .open_icon input{
	display:none;
}
div.main_box.school h3.wrap_header .open_icon i{
	margin-right:0;
	color:#5193f7;
	font-size:18px;
}
div.main_box.school .check_box_list{
	margin:0 -5px;
}
@media only screen and (min-width: 738px){
	div.main_box.school .check_box_list{
		display:-webkit-box;
  		display:-ms-flexbox;
  		display:flex;
  		flex-wrap: wrap;
  		margin:0px;
  		padding:10px 8px 0 8px;
	}
	/* select_area_detailのときはwidth変更 */
	div.main_box.school .select_area_detail .check_box_list{
		width:calc(100% - 80px);
		padding-right:0;
	}
}
div.main_box.school .check_box_list .check_box_item{
	padding:0 12px;
	border-bottom:#e8f1ff 1px solid;
	height:56px;
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	cursor:pointer;
}
@media only screen and (min-width: 738px){
	div.main_box.school .check_box_list .check_box_item{
		width:calc(100%/3);
		border-bottom:none;
		height:auto;
		font-size:14px;
		padding:0 0 10px 0;
	}
}
div.main_box.school .check_box_list .check_box_item.gray{
	color:#c0c0c0;
	cursor:text;
}
div.main_box.school .check_box_list .check_box_item.gray a{
	text-decoration:none;
	color:#c0c0c0;
}
div.main_box.school .check_box_list .checkbox{
  	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
	width:20px;
	margin-right:20px;
}
@media only screen and (min-width: 1117px){
	div.main_box.school .check_box_list .checkbox{
		margin-right:12px;
	}
}
div.main_box.school .check_box_list .checkbox label{
	padding:0px;
}
div.main_box.school .check_box_list .checkbox_main_item{
	width:calc(100% - 50px - 50px);/* チェックボックスの50pxと教室件数の50px分を引く  */
}
div.main_box.school .check_box_list .checkbox_main_item a{
	color: #606060;
	pointer-events: none;
}
@media only screen and (min-width: 738px){
	div.main_box.school .check_box_list .checkbox_main_item{
		width:auto;
	}
}
@media only screen and (min-width: 738px){
	div.main_box.school .check_box_list .checkbox_main_item a{
		color:#5193f7;
		text-decoration:underline;
		pointer-events: auto;
	}
	div.main_box.school .check_box_list .checkbox_main_item a:hover{
		text-decoration:none;
	}
}
div.main_box.school .check_box_list .checkbox_right_item{
    margin-left: auto;
    font-size:12px;
}
@media only screen and (min-width: 738px){
	div.main_box.school .check_box_list .checkbox_right_item{
	    margin-left: 5px;
	    margin-left: 0px;
	}
}
@media only screen and (min-width: 738px){
	div.main_box.school .check_box_list .checkbox_right_item:before {
	    content: "（";
	}
	div.main_box.school .check_box_list .checkbox_right_item:after {
	    content: "）";
	}
}
/*--------------------------------------------------------
■ 駅名検索ボックス
-------------------------------------------------------- */
div.main_box.school .suggest_btn_form{
	position:relative;
}
div.main_box.school input[type="search"]#search_box.search_station{
	background-color: #ffffff;
	border: 2px solid #d8d8d8;
	padding-right:7.5px;
}

div.main_box.school input[type="search"]#search_box.search_station::-webkit-search-cancel-button {
  cursor:pointer;
}
div.main_box.school input[type="search"]#search_box.search_station::-webkit-calendar-picker-indicator {
	display: none !important;
}
div.main_box.school input[type="search"]#search_box.search_station::-webkit-search-cancel-button {
	cursor:pointer;
	content: url("../../img/common/main_btn_clear.png");
	width:20px;
	padding-right: 0px;
}
/* 候補の駅 */
div.main_box.school .suggest_list{
	border: 1px solid #d8d8d8;
	background:#fff;
	border-top: none;
	display:none;
	position:absolute;
	width:100%;
	z-index:1000;
}
div.main_box.school .suggest_list .suggest_item{
	padding:4px 8px;
	border-bottom: 1px solid #d8d8d8;

}
div.main_box.school .suggest_list .suggest_item.selected{
	background:#d8d8d8;
}
div.main_box.school .suggest_list .suggest_item:last-child{
	border-bottom: none;
}
div.main_box.school .suggest_list .suggest_item a{
	color:#606060;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
}
div.main_box.school .suggest_list .suggest_item .right_item{
	font-size:12px;
	margin-left:auto;
}
/*--------------------------------------------------------
■ ピアノ教室コンテンツ（検索結果）
-------------------------------------------------------- */
div.main_box.school p.search_criteria{/* 検索条件 */
	font-size: 16px;
	font-weight:bold;
	margin-bottom:20px;
}
div.main_box.school p.search_criteria span.school_count{
	color:#2cb1ea;
	margin-left:10px;
	font-size:20px;
}
@media only screen and (min-width: 738px){
	div.main_box.school div.search{
		height:40px;
		line-height:50px;
		position:relative;
	}
	div.main_box.school p.search_criteria{/* 検索条件 */
		font-size: 22px;
		position:absolute;
	}
	div.main_box.school p.search_criteria span.school_count{
		font-size:30px;
	}
}
/* 教室コンテンツ */
div.main_box.school ul.school_list{/* ブロック */
	list-style:none;
	margin:0 -5px;
	padding:0px;
	background:#f3f3f3;/* スマホ版は背景 */
}
@media only screen and (min-width: 738px){
	div.main_box.school ul.school_list{
		background:#fff;
	}
	div.main_box.school ul.school_list:first-child{
		padding-top:20px;
	}
}
div.main_box.school ul.school_list li{
	margin: 15px 0;
	padding:0px 5px;
	background:#fff;
}
div.main_box.school ul.school_list li:first-child{
	margin-top:0;
}
div.main_box.school ul.school_list li:last-child{
	margin-bottom:0;
	border:none;
}
@media only screen and (min-width: 738px){
	div.main_box.school ul.school_list li{
		background:#fff;
		border-bottom:3px solid #e9ecef;
		margin-bottom:0px;
	}
}
div.main_box.school ul.school_list li.fixed{
	top: 0px;
}
div.main_box.school ul.school_list .school_detail_link{
	cursor: pointer;
	display:block;
	/* width:100%; */
	color:#606060;
}
/* 教室ヘッダー部分 */
div.main_box.school div.school_content div.school_header{
	padding:10px 0;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
    border-bottom: 3px dashed #e9ecef;
    margin-bottom:10px;
}
div.main_box.school div.school_content div.school_header.pc{
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box.school div.school_content div.school_header.sp{
		display:none;
	}
	div.main_box.school div.school_content div.school_header.pc{
		padding:0;
		padding-bottom:10px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
}
div.main_box.school div.school_content div.title{
    position:relative;
    width: calc(100% - 42px);/* お気に入りアイコン分（32px）を減算。かつ適切なマージン10pxをとって */
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items: center;
}
div.main_box.school div.school_content div.title i.right_icon{
	color:#5193f7;
	font-size:18px;
	margin-left:auto;
	margin-right:0;
}
div.main_box.school div.school_content span.school_name {
	font-size:15px;
	font-weight:bold;
    color:#606060;
    display:block;
    letter-spacing: normal;
    position:relative;
    padding-left: 18px;
}
@media only screen and (min-width: 738px){
	div.main_box.school div.school_content span.school_name.teacher:hover{
	    color:#5193f7;
	    text-decoration:underline;
	}
}
@media only screen and (min-width: 738px){
	div.main_box.school div.school_content span.school_name {
		font-size:16px;
	    margin-bottom:0px;
	    display:inline-block;
	}
}
div.main_box.school div.school_content span.school_name:before {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    width: 9px;
    height: 100%;
}
div.main_box.school div.school_content span.school_name.teacher:before {
    background:#99dcff;
}
div.main_box.school div.school_content span.school_name.staff:before {
    background:#dddddd;
}
div.main_box.school .tag_box{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	flex-wrap : wrap;
}
div.main_box.school .tag_box span.tag{
	font-size:13px;
	border: 1px solid #e9ecef;
	border-radius:5px;
	text-align:center;
	padding:2px 3px;
	background:#e8f1ff;
	margin-right:5px;
	margin-top:5px;
}
div.main_box.school .tag_box span.tag.yellow{
	background:#fff0db;
}
div.main_box.school div.favorite {
	width: 32px;
	height:32px;
	margin-left:10px;
   	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	align-items:center;
  	justify-content:center;
  	cursor: pointer;
  	border-radius:50%;
  	border:1px solid #dddddd;
}
div.main_box.school div.favorite i{
	font-size: 16px;
	color:#808080;
	margin-right:0px;
	height:16px;
	width:16px;
}
div.main_box.school div.favorite i.active{
	color:#f45079;
	position:relative;
	transition: all .05s;
}
/* 教室概要部分 */
div.main_box.school div.school_content div.school_main{
	padding:0 0 10px 0;
}
@media only screen and (min-width: 738px){
	div.main_box.school div.school_content div.school_main{
		padding:0 0 15px 0;
	}
	div.main_box.school div.school_content  div.school_main .layout_pc{
	  	display:-webkit-box;
	  	display:-ms-flexbox;
	  	display:flex;
	}
	div.main_box.school div.school_content .layout_pc .layout_pc_left{
	  	width:228px;
	  	padding-right:10px;
	}
	div.main_box.school div.school_content .layout_pc .layout_pc_right{
	  	width:calc(100% - 220px);
	}
}
div.main_box.school div.school_content div.school_main dl{
	font-size:14px;
	margin-bottom:4px;
    display: flex;
}
div.main_box.school div.school_content div.school_main dl dt{
	display:block;
	width:25px;
}
div.main_box.school div.school_content div.school_main dl dt i{
	color:#5193f7;
}
div.main_box.school div.school_content div.school_main span.strong{
    font-weight: bold;
    font-size: 100%;
    color: #000000;
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #e8f1ff 0%) repeat scroll 0 0;
    margin-right:18px;
}
div.main_box.school div.school_content div.school_main p.lesson_fee{
	font-size:14px;
	margin-bottom:0px;
}
div.main_box.school div.school_content div.school_main p.margin_left{/* 月謝のタグがない場合margin-leftを設ける */
	margin-left:25px;
	margin-bottom:10px;
}
/* 写真 */
div.main_box.school .school_media_block{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
  	flex-wrap: wrap;
  	margin-bottom:4px;
  	justify-content:center;
}
div.main_box.school .school_media_block .media_frame{
    overflow: hidden;
   	border-radius: 10px;/* 写真を角丸にする */
   	margin-right:4px;
}
div.main_box.school .school_media_block .media_frame.empty{
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box.school .school_media_block .media_frame.empty{/* 写真なし（スタッフ登録）の場合はグレー背景にする */
		background:#f3f3f3;
		display:-webkit-box;
	  	display:-ms-flexbox;
	  	display:flex;
	  	justify-content:center;
	  	align-items:center;
	  	color:#c0c0c0;
	}
	div.main_box.school .school_media_block .media_frame:nth-child(n + 2) {
		cursor:pointer;
	}
	div.main_box.school .school_media_block .media_frame:nth-child(n + 2):hover {
		border:2px solid #99c2ff;
	}
}
div.main_box.school .school_media_block .media_frame:last-child{
	border-right:none;
	margin-right:0;
}
div.main_box.school .school_media_block .media_frame{
	width:calc((100% - 8px)/3);
}
div.main_box.school .school_media_block .media_frame:nth-child(4){
	margin-right:0px;
}
@media only screen and (min-width: 738px){
	div.main_box.school .school_media_block{
		justify-content:normal;
	}
	div.main_box.school div.school_content .layout_pc .layout_pc_left .school_media_block .media_frame:first-child{
		margin-bottom:4px;
		margin-right:0px;
	}
	div.main_box.school div.school_content .layout_pc .layout_pc_left .school_media_block .media_frame:first-child,
	div.main_box.school div.school_content .layout_pc .layout_pc_left .school_media_block .media_frame:first-child img,
	div.main_box.school div.school_content .layout_pc .layout_pc_left .school_media_block .media_frame:first-child video{
		width:218px;
		height:218px;
	}
	div.main_box.school div.school_content .layout_pc .layout_pc_left .school_media_block .media_frame:nth-child(n + 2),
	div.main_box.school div.school_content .layout_pc .layout_pc_left .school_media_block .media_frame:nth-child(n + 2) img,
	div.main_box.school div.school_content .layout_pc .layout_pc_left .school_media_block .media_frame:nth-child(n + 2) video{
		width:70px;
		height:70px;
	}
}
div.main_box.school .school_media_block .media_frame img,
div.main_box.school .school_media_block .media_frame video{
	width:100%;
	margin-bottom:0;
	object-fit: cover; /* 写真の比率を維持するために必要 */
}
div.main_box.school .school_media_block.three .media_frame:nth-child(4){
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box.school .school_media_block.three .media_frame:nth-child(4){
		display:block;
	}
}
/* 星の評価マーク */
div.main_box.school .rate_box{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
}
div.main_box.school .rate_box .rate_star{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	align-items:center;
	margin-right:5px;
}
div.main_box.school .rate_box .rate_star img{
	margin:0 4px 0 0;
	width:18px;
}
div.main_box.school .rate_box .rate_val{
	font-weight:bold;
	font-size:20px;
	color:#f45079;
	margin-right:10px;
}
div.main_box.school .rate_box .comment_count{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	align-items:center;
	position:relative;
}
div.main_box.school .rate_box .comment_count i{
	color:#cc8828;
	font-size:18px;
}
div.main_box.school .comment_box{
	font-size:14px;
	margin-bottom:4px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
/* 開講曜日のテーブル */
div.main_box.school .open_day_table{
	border: 1px solid #dddddd;
	font-size:14px;
	margin-bottom:5px;
}
div.main_box.school .open_day_table .day_line{
	height:30px;
}
div.main_box.school .open_day_table td{
	border-bottom: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
	padding:3px 6px;
}
div.main_box.school .open_day_table .icon_line td{
	color:#5193f7;
	border-bottom: none;
}
div.main_box.school .open_day_table td.closed{
	color:#c0c0c0;
}
div.main_box.school .open_day_table td i{
	margin-right:0px;
}
div.main_box.school .open_day_table th{
	width:56px;
	padding:3px 6px;
	font-weight:normal;
}
/* ボタン（お問い合わせとホームページボタン） */
div.main_box.school div.school_content .btn_group{
	text-align:center;
	letter-spacing: -.4em;/* 文字間を詰めて横並びリストの隙間をなくす */
}
div.main_box.school div.school_content .link_btn {
	display: inline-block;
	padding: 10px;
	text-decoration: none;
	border-radius: 10px;
	width:140px;
	width:calc((100% - 20px)/2);
	text-align:center;
	font-size:15px;
	font-weight:bold;
	letter-spacing:normal;
	color:#fff;
	margin-top:4px;
	margin-top:15px;
}
div.main_box.school div.school_content .link_btn.mail {
	margin-right:20px;
	 background:#66a3ff;
}
div.main_box.school div.school_content .link_btn.home {
	background:#ea9c2e;
}
@media only screen and (min-width: 738px){
	div.main_box.school div.school_content .link_btn {
		padding: 10px;
	}
}
@media only screen and (max-width: 320px){/* iphone5/se用 */
	div.main_box.school div.school_content .link_btn i{
		display:block;/* アイコンを文字の上に載せる */
	}
	div.main_box.school div.school_content .link_btn{
		width:120px;
	}
}
/*=================================
■ lesson_help
=================================*/
/*--------------------------------------------------------
■ ダイアログボックス（講師）
--------------------------------------------------------*/
div.main_box .teacher_dialog_box{
	width: 100%;
	overflow: hidden;
	margin-bottom: 10px;
}
div.main_box .teacher_dialog_box .photo{
	float: left;
	margin-right: -110px;
	width: 100px;
}
@media only screen and (min-width: 738px){
	div.main_box .teacher_dialog_box .photo{
		margin-right: -190px;
		width: 140px;
	}
}
div.main_box .teacher_dialog_box .photo img{
	margin: 0;
	border-radius: 50%;
}
div.main_box .teacher_dialog_box .speech_bubble_outer{
	width: 100%;
}
div.main_box .teacher_dialog_box .speech_bubble_inner{
	display: inline-block;
	position: relative;
	margin: 0px 0 0 125px;
	padding: 20px;
	border-radius: 32px;
	font-size: 100%;
	background-color: #5193f7;
	color: white;
	width: calc(100% - 125px);/* marginを引く */
}
@media only screen and (min-width: 738px){
	div.main_box .teacher_dialog_box .speech_bubble_inner{
		margin: 5px 0 0 165px;
		font-size: 125%;
		width: calc(100% - 165px);/* marginを引く */
	}
}
div.main_box .teacher_dialog_box .speech_bubble_inner:after{
	content: "";
	display: inline-block;
	position: absolute;
	top: calc(50% - 8px);/* 三角が真ん中に来るように（8pxは三角のheight16pxの半分） */
	left: -32px;
	border: 8px solid transparent;
	border-right: 24px solid #5193f7;
}
div.main_box .teacher_dialog_box .speech_bubble_inner p{
	margin: 0;
	padding: 0;
}
/* --------------------------------------------------
■ 料金説明テーブル
 -------------------------------------------------- */
div.main_box table.separate_table{
	border-collapse: separate;
    border-spacing:8px;
    width: calc(100% + 16px);
    border:none;
    padding:0px;
    margin:0 -8px;
}
@media only screen and (min-width: 738px){
	div.main_box table.separate_table{
		border-spacing:12px ;
		width: calc(100% + 24px);
		margin:0 -12px;
	}
}
div.main_box table.separate_table th,
div.main_box table.separate_table td {
    border-radius: 5px;
    text-align: center;
    padding: 10px 0;
    position:relative;
}
div.main_box table.separate_table th{
    background-color: #99c2ff;
    color: #fff;
}
div.main_box table.separate_table th a{
    color: #fff;
    text-decoration: underline;
}
div.main_box table.separate_table th.none{
    background-color: #fff;
}
div.main_box table.separate_table th.small_padding{
    padding:2px;
}
div.main_box table.separate_table tr.colmn_2 th:first-child{
	width:35%;
}
div.main_box table.separate_table tr.colmn_2 th{
	width:65%;
}
@media only screen and (min-width: 738px){
	div.main_box table.separate_table tr.colmn_2 th:first-child{
		width:30%;
	}
	div.main_box table.separate_table tr.colmn_2 th{
		width:70%;
	}
}
div.main_box table.separate_table tr.colmn_3 th:first-child{
	width:30%;
}
div.main_box table.separate_table tr.colmn_3 th{
	width:35%;
}
@media only screen and (min-width: 738px){
	div.main_box table.separate_table tr.colmn_3 th:first-child{
		width:22%;
	}
	div.main_box table.separate_table tr.colmn_3 th{
		width:39%;
	}
}
div.main_box table.separate_table tr.colmn_4 th{
	width:32%;
}
div.main_box table.separate_table tr.colmn_4 th:first-child{
	width:16%;
}
div.main_box table.separate_table tr.colmn_4 th:nth-child(2){
	width:20%;
}
div.main_box table.separate_table th.gray,
div.main_box table.separate_table td.gray{
    background-color: #f3f3f3;
    color: #808080;
}
div.main_box table.separate_table th.yellow,
div.main_box table.separate_table td.yellow{
    background-color: #FFF0DB;
    color: #CC8828;
}
div.main_box table.separate_table .triangle_right:after {/* 三角形 */
    position: absolute;
    top:calc((100% - 10px)/2);
    width: 0;
    height: 0;
    right: -7px;
    margin: auto;
    border-top: 5px solid transparent;
  	border-bottom: 5px solid transparent;
  	border-left: 5px solid #EA9C2E;
    content: '';
    box-sizing: border-box;
}
@media only screen and (min-width: 738px){
	div.main_box table.separate_table .triangle_right:after {
		top:calc((100% - 14px)/2);
		right: -10px;
    	border-top: 7px solid transparent;
  		border-bottom: 7px solid transparent;
  		border-left: 7px solid #EA9C2E;
	}
}
div.main_box table.separate_table .small_font{
	font-size:14px;
}
div.main_box table.separate_table .normal{
	font-weight:normal;
}
/* --------------------------------------------------
■ 名称変更ボックス
 -------------------------------------------------- */
div.main_box .name_change_block{
	display:flex;
	gap:20px;
	width:100%;
}
div.main_box .name_change_block .name_change_item{
	display:flex;
	align-items:center;
	justify-content:center;
	width:calc((100% - 20px)/2);
	width:50%;
	position: relative;
	background:#f3f3f3;
	border-radius:10px;
	text-align: center;
	padding: 10px;
}
div.main_box .name_change_block .name_change_item.blue{
	background:#e8f1ff;
	color:#5193f7;
	font-weight:bold;
}
div.main_box .name_change_block .name_change_item.triangle:after{
    position: absolute;
    top:calc((100% - 20px)/2);
    width: 0;
    height: 0;
    right: -15px;
    margin: auto;
    border-top: 10px solid transparent;
  	border-bottom: 10px solid transparent;
  	border-left: 10px solid #5193f7;
    content: '';
    box-sizing: border-box;
}
/*=================================
■ teacher
=================================*/
/*--------------------------------------------------------
 ■ リンクブロック
--------------------------------------------------------*/
div.main_box.teacher .link_block{
	display: flex;
	justify-content:center;
	align-items: stretch;/* 要素の高さを揃える */
	gap: 10px;
}
div.main_box.teacher .link_block .link_item{
	background:#e8f1ff;
	height:60px;
	color:#5193f7;
	font-weight:bold;
	border-radius:10px;
	cursor:pointer;
	 flex: 1;/* itemを均一幅に */
	 text-align:center;
}
div.main_box.teacher .link_block .link_item a{
	display: flex;
	justify-content:center;
	align-items: center;
	width:100%;
	height:100%;
}
div.main_box.teacher .link_block .link_item i{
	margin:0 0 0 10px;
}
/*--------------------------------------------------------
 ■ ご紹介の流れ
--------------------------------------------------------*/
div.main_box.teacher .flow_step_group_pc{
	display: none;
}
@media only screen and (min-width: 738px){
	div.main_box.teacher .flow_step_group{
		display: none;
	}
	div.main_box.teacher .flow_step_group_pc{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 6.3%;
		padding: 0 4.25% 0 0;
		margin-bottom:30px;
	}
	div.main_box.teacher .flow_step_group_pc.reverse{
		padding: 0 0 0 4.25%;
	}
	div.main_box.teacher .flow_step_item.item_1{
		width:100%;
		max-width:200px;
	}
	div.main_box.teacher .flow_step_item:item_2{
		width:calc(100% - 200px);
	}
	div.main_box.teacher .flow_step_item .flow_step_img img{
		margin-bottom:0px;
	}
	div.main_box.teacher .flow_step_title{
		font-size:20px;
	}
}
div.main_box.teacher .flow_step_txt{
	color:#5193f7;
	font-weight:bold;
	font-size:20px;
	border-bottom:2px solid #5193f7;
}
div.main_box.teacher .flow_step_img{
	width:90%;
	max-width:150px;
	text-align:center;
	margin:0 auto;
}
@media only screen and (min-width: 738px){
	div.main_box.teacher .flow_step_img{
		max-width:200px;
	}
}
/*--------------------------------------------------------
■ 順位ポイントとは
--------------------------------------------------------*/
/* div.main_box.teacher .odpt_block{
  	display:flex;
  	align-items: center;
  	margin:0 auto 15px auto;
  	gap: 10px;
}
@media only screen and (min-width: 738px){
	div.main_box.teacher .odpt_block{
	  	flex-flow: row wrap;横並び
	  	margin-bottom:20px;
	  	gap: 50px;
	  	width:700px;固定にする
	}
}
div.main_box.teacher .odpt_item{
	width:220px;固定にする
	width:calc((100% - 20px)/3);
	margin-bottom:50px;
}
@media only screen and (min-width: 738px){
	div.main_box.teacher .odpt_item{
		width:calc((100% - 100px)/3);
	}
}
div.main_box.teacher .odpt_item .img_main{
	width:100%;
	height:100%;
	position:relative;
}
div.main_box.teacher .odpt_item .img_main img{
	width:100%;
	vertical-align:top;
}
div.main_box.teacher .odpt_item .img_main img.plus{
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box.teacher .odpt_item .img_main img.plus{
		display:inline;
		width:30px;
		position:absolute;
		position:absolute;
		right:-40px;
		top:50%;
	}
} */
/*--------------------------------------------------------
■ 特典の星マーク
--------------------------------------------------------*/
div.main_box.teacher span.yellow {
	color:#ea9c2e;
}
div.main_box.teacher i.margin_right_small{
	margin-right:3px;
}
/*=================================
■ column
=================================*/
/*--------------------------------------------------------
■ ヘッダー
--------------------------------------------------------*/
div.main_box.column h2.article{
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: var(--margin_bottom_s);
	font-weight: bold;
	color: #606060;
	line-height: 1.4;
	position: relative;
	padding: 6px 0 6px 20px;
}
@media only screen and (min-width: 738px){
	div.main_box.column h2.article{
		font-size: 22px;
		margin-top: 25px;
		margin-bottom: var(--margin_bottom_ml);;
	}
}
div.main_box.column h2.article:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 3px;
	width: 6px;
	height: 100%;
	background: #5193f7;
}
div.main_box.column .column_h2{
	background:#5193F7;
	border-radius:10px;
	color:#fff;
	padding:10px 10px 10px 25px;
    position:relative;
}
div.main_box.column .column_h2:before {
    content: "";
    position: absolute;
    top:0;
    left: 10px;
    border-radius: 5px;
    margin-top:10px;
    margin-bottom:10px;
    width: 5px;
    height: calc(100% - 20px);
    background: #fff;
}
div.main_box.column .column_h2 .column_subtitle{
    font-weight:normal;
    font-size:17px;
}
div.main_box.column  h3.column_h3{
	padding-bottom:5px;
	border-bottom:3px solid #5193F7;
}
div.main_box.column  h4.column_h4{
	position:relative;
	padding: 6px 0 6px 25px;
}
div.main_box.column  h4.column_h4:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 3px;
	width: 6px;
	height: 100%;
	background: #5193F7;
}
div.main_box.column  h5.column_h5{
	position:relative;
	padding: 6px 0 6px 25px;
}
div.main_box.column  h5.column_h5:before{
	border-radius:50%;
	width:18px;
	height:18px;
	top:50%;
	margin-top:-9px;
}
div.main_box.column  h4.article_heading{
	margin:0px;
	padding:0px;
	font-size:14px;
}
div.main_box.column  h4.article_heading:before{
	display:none;
}
div.main_box.column .article_link h4.article_heading{
	margin-bottom:5px;
}
/*--------------------------------------------------------
■ 出典
--------------------------------------------------------*/
div.main_box.column p.source{
	font-size:14px;
	color:#808080;
}
/*--------------------------------------------------------
■ 更新日
--------------------------------------------------------*/
div.main_box.column .modified_date{
	display:block;
	font-size:13px;
	color: #606060;
}
/*--------------------------------------------------------
■ アイキャッチ
--------------------------------------------------------*/
div.main_box.column .eyecatch{
    margin-bottom:25px;
}
div.main_box.column .eyecatch img{
	margin-bottom:0px;
}
/*--------------------------------------------------------
■ メインページのメイン記事
--------------------------------------------------------*/
div.main_box.column .article_card_block{
	cursor:pointer;
	transition: all .3s;
}
div.main_box.column .article_card_block .article_title{
	padding: 10px;
}
div.main_box.column .article_card_block .article_title h3{
	margin-top: 0px;
}
div.main_box.column .article_card_block p{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 任意の行数を指定 */
}
div.main_box.column .eyechatch_link{
	width:100%;
	overflow:hidden;
	border-radius:10px;
	box-shadow: 0 1px 8px rgba(0,0,0,0.1);
	transition: all .3s;
}
div.main_box.column .eyechatch_link:hover{
     box-shadow: 0 1px 10px rgba(0,0,0,0.2), 0 0 50px rgba(128, 128, 128, 0.1) ;
}
div.main_box.column .eyechatch_link img{
	margin-bottom:0px;
}
/*--------------------------------------------------------
■ 記事のカテゴリー
--------------------------------------------------------*/
div.main_box.column .article_category_block{
	display:flex;
	flex-wrap: wrap;
	gap:10px;
}
div.main_box.column .categories_link{
	background:#e8f1ff;
	font-weight:bold;
	padding:5px 10px;
	border-radius:5px;
	font-size:14px;
	color:#606060;
	cursor:pointer;
    -webkit-transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    transition: all .4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
    -webkit-transition-property: border, background, color;
    transition-property: border, background, color;
}
div.main_box.column .categories_link:hover{
	background:#5193f7;
	color:#fff;
}
/*--------------------------------------------------------
■ 吹き出しのエリア
--------------------------------------------------------*/
div.main_box.column .balloon_block{
	display:flex;
	gap:10px;
	align-items: flex-start;
}
div.main_box.column .balloon_block .balloon {
    width:calc(100% - 75px);
    background:#FFF0DB;
    border-radius:10px;
    padding:8px 12px;
	padding: 7px 10px 0 10px;
    position:relative;
}
@media only screen and (min-width: 738px){
	div.main_box.column .balloon_block .balloon {
		padding:11px 15px 0 15px;/* padding-topはタイトルのline-heightの影響で文字の上には4pxの余白があるため、(取りたい余白15px)-4px=11pxとした */
	}	
}
div.main_box.column .balloon_block.writer .balloon {
	background:#e8f1ff;
}
div.main_box.column .balloon_block .balloon:after{
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -10px;
	border: 10px solid transparent;
	border-left: 10px solid #FFF0DB;
}
div.main_box.column .balloon_block.writer .balloon:after{
	content: "";
	position: absolute;
	top: 50%;
	left: -20px;
	margin-top: -10px;
	border: 10px solid transparent;
	border-right: 10px solid #e8f1ff;
}
div.main_box.column .balloon_block .balloon p{
	margin-bottom:0px;
	margin-bottom:8px;
}
div.main_box.column .balloon_block .balloon ul{
	margin-bottom: 8px;/* 取りたい余白は10pxだが、文字列にはline-height:1.5の影響で上下に余白が生まれるため、8pxとした */
	margin-top:5px;
}
div.main_box.column .balloon_block .icon img{
    width:75px;
    margin-bottom:0px;
}
/*--------------------------------------------------------
■ あわせて読みたいブロック
--------------------------------------------------------*/
div.main_box.column .recommended_article_link_block{
	margin:50px 0px 15px 0px;
	position:relative;
	border:solid 2px #99C2FF;
	border-radius:10px;
	display:flex;
	align-items: center;
	padding:5px;
	gap:10px;
    box-shadow: 0 1px 7px rgba(0,0,0,0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(128, 128, 128, 0.1) ;
    transform: translateY(-2px);
    cursor:pointer;
    transition: all .3s;
}
div.main_box.column .recommended_article_link_block:hover{
	box-shadow: 0 1px 10px rgba(0,0,0,0.4), 0 0 50px rgba(128, 128, 128, 0.1) ;
}
div.main_box.column .recommended_article_link_block .recommended_article_title{
	position:absolute;
	top: -2em;
}
div.main_box.column .recommended_article_link_block .recommended_article_title i{
	color:#5193F7;
}
div.main_box.column .recommended_article_link_block img{
	max-width:175px;
	margin-bottom:0px;
	border-radius:5px;
}
/*--------------------------------------------------------
■ この記事を書いた人
--------------------------------------------------------*/
div.main_box.column .writer_box{
	margin:50px 0px 15px 0px;
	position:relative;
	border:solid 2px #99C2FF;
	border-radius:10px;
	display:flex;
	align-items: center;
	padding:25px 10px 10px 10px;
	gap:10px;
}
div.main_box.column  .writer_box .writer_box_title{
	position:absolute;
	top: -1em;
	background:#99c2ff;
	border-radius:20px;
	color:#fff;
	padding:3px 10px;
}
div.main_box.column .writer_box img{
	max-width:80px;
	margin-bottom:0px;
}
div.main_box.column .writer_box .profile_block{
	display:flex;
	 flex-direction: column;
}
div.main_box.column .writer_box .profile_block .writer_name{
	margin-bottom:5px;
}
/*--------------------------------------------------------
■ 関連記事（コンテンツではなくカテゴリで使用）
--------------------------------------------------------*/
/* マテリアルデザイン */
div.main_box.column .article_block{
	display:flex;
	gap:30px;
	flex-wrap: wrap;
	margin-bottom:50px;
}
div.main_box.column .article_block .article_item{
	width:100%;
	display:flex;
	flex-direction: column;
	position:relative;
	overflow:hidden;
	box-shadow: 0 1px 8px rgba(0,0,0,0.1);
	border-radius: 8px;
    transition: all .3s;
}
@media only screen and (min-width: 738px){
	div.main_box.column .article_block .article_item{
		width:calc((100% - 30px)/2);
	}
}
div.main_box.column .article_block .article_item:hover{
     box-shadow: 0 1px 10px rgba(0,0,0,0.2), 0 0 50px rgba(128, 128, 128, 0.1) ;
}
div.main_box.column .article_block .article_item img{
	width:100%;
	margin-bottom:0px;
}
div.main_box.column .article_block .article_item .article_title{
	padding: 10px;
}

/*=================================
■ ptnr（developerでも利用）
=================================*/

/*--------------------------------------------------------
■ 講座一覧（スマホ版）
--------------------------------------------------------*/
div.main_box .lecture_list{
	width:calc(100% + 10px);
	display:flex;
	flex-direction: column;
	gap:15px;
	background:#f3f3f3;
	margin-right:-5px;
	margin-left:-5px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_list{
	   display:none;
	}
}
div.main_box .lecture_list .lecture_link{
	color:#606060;
}
div.main_box .lecture_list .lecture_item{
	width:100%;
	display:flex;
	align-items: center;
	flex-direction: column;
	background: #ffffff;
	cursor:pointer;
}
div.main_box .lecture_list .lecture_item .video_frame{
	width:100%;
	position:relative;
}
div.main_box .lecture_list .lecture_item .video_frame video{
	width:100%;
	vertical-align: top;
}
div.main_box .lecture_list .lecture_item .video_frame .mute_button {
	position: absolute;
	top: 10px; /* 適切な位置に調整してください */
	right: 10px; /* 適切な位置に調整してください */
	opacity: 0;
	transition: opacity 0.3s ease; /* 変化を滑らかにするトランジション */
}
div.main_box .lecture_list .lecture_item:hover .video_frame .mute_button {
	/* opacity: 1; */
}
div.main_box .lecture_list .lecture_item .video_frame .mute_toggle {
	cursor: pointer;
	background-color: #333;
	background-color: rgba(51, 51, 51, 0.8);
	width:40px;
	height:40px;
	border-radius:50%;
	 border: none;
	 font-size: 16px;
	 transition: color 0.3s;
}
div.main_box .lecture_list .lecture_item .video_frame i{
	color:#fff;
	margin:0px;
}
div.main_box .lecture_list .lecture_item .lecture_content{
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 10px 10px 10px 10px;
}
div.main_box .lecture_list .lecture_item .lecture_date{
	margin-bottom:8px;
	display:flex;
	flex-wrap: wrap;/* 折り返す */
	gap:10px;
}
div.main_box .lecture_list .lecture_item .lecture_status{
	border-radius:7px;
	font-weight:bold;
	padding:2px 5px;
	font-size:13px;
}
div.main_box .lecture_list .lecture_item .lecture_status.blue{
	background:#e8f1ff;
	color:#2668cc;
}
div.main_box .lecture_list .lecture_item .lecture_status.red{
	background:#ffe8ed;
	color:#e05578;
}
div.main_box .lecture_list .lecture_item .lecture_status.gray{
	background:#e9ecef;
	color:#606060;
}
div.main_box .lecture_list .lecture_item .lecture_title{
	font-size:16px;
	font-weight:bold;
	color:#303030;
	margin-bottom:4px;
	margin-top:0;
}
div.main_box .lecture_list .lecture_item .lecture_teacher{
	display:flex;
	align-items: center;
	gap:10px;
	margin-bottom:8px;
	font-size:14px;
}
div.main_box .lecture_list .lecture_item .lecture_teacher img{
	width:38px;
	margin-bottom:0px;
}
div.main_box .lecture_list .lecture_item .toc{
	margin-bottom:12px;
}
div.main_box .lecture_list .lecture_item .toc span{
	font-size:14px;
    display: -webkit-box;           /* 使うブラウザのベンダープレフィックス */
    -webkit-line-clamp: 3;          /* 行数を指定 */
    -webkit-box-orient: vertical;   /* 縦のボックスを指定 */
    overflow: hidden;               /* ボックスからはみ出した部分を非表示にする */
    text-overflow: ellipsis;        /* 「・・・」を表示する */
}
div.main_box .lecture_list .lecture_item .toc ul{
	list-style: none;
	margin-left: 30px;
	margin-bottom:0px;
}
div.main_box .lecture_list .lecture_item .toc ul li{
	position:relative;
	font-size:14px;
	line-height:1.5;
	padding:3px 0;
	font-style: italic;
}
div.main_box .lecture_list .lecture_item .toc ul li::before {
	position: absolute;
	left: -20px;
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	color: #5193f7;
	content: '\f00c';
}
div.main_box .lecture_list .lecture_item .toc i{
	color:#5193f7;
}
div.main_box .lecture_list .lecture_item .toc p{
	margin-bottom:2px;
	font-size:14px;
}
div.main_box .lecture_list .lecture_item .tag_group{
	display:flex;
	align-items: center;
	gap:6px;
	margin-bottom:4px;
	flex-wrap: wrap;/* 折り返す */
}
div.main_box .lecture_list .lecture_item .tag_group .tag{
	background:#e8f1ff;
	border-radius:7px;
	padding:2px 5px;
	font-size:13px;
}
div.main_box .lecture_list .lecture_item .tag_group .tag.is_recommended_first_lecture{
	background:#fff0db;
	border:solid 1px #ea9c2e;
	color:#cc8828;
	font-weight: 500;
}
div.main_box .lecture_list .lecture_item .tag_group .tag.is_recommended_first_lecture i{
	color:#cc8828;
}
div.main_box .lecture_list .lecture_item .tag_group .tag i{
	margin-right:2px;
	font-weight:bold;
	color:#5193f7;
}
div.main_box .lecture_list .lecture_item .capacity_block{
	display: flex;
	justify-content: flex-end; /* 右寄せ */
	align-items: end;
}
div.main_box .lecture_list .lecture_item .capacity_block span{
	margin-right:5px;
}
div.main_box .lecture_list .lecture_item .capacity_block .participants{
	color:#ea9c2e;
	font-size:26px;
	font-weight:bold;
	line-height:1.2;
}
/*--------------------------------------------------------
■ 講座一覧（PC版）
--------------------------------------------------------*/
div.main_box .lecture_list_pc{
	display:none;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_list_pc{
		display:flex;
	}
}
div.main_box .lecture_list_pc{
	width:100%;
	flex-direction: column;
	gap:15px;
}
div.main_box .lecture_list_pc .lecture_link{
	color:#606060;
}
div.main_box .lecture_list_pc .lecture_item{
	display:flex;
	flex-direction: column;
	gap:10px;
	padding-top:10px;
	position:relative;
	cursor:pointer;
}
div.main_box .lecture_list_pc .lecture_item:nth-child(n+2){
	border-top:3px solid #e9ecef;
}
div.main_box .lecture_list_pc .lecture_header{
	display:flex;
	flex-direction: column;
	border-bottom:3px dashed #e9ecef;
}
div.main_box .lecture_list_pc .lecture_header .lecture_title{
	font-size:18px;
	font-weight:bold;
	color:#303030;
	margin-bottom:0px;
	margin-top:0;
}
div.main_box .lecture_list_pc .lecture_header .lecture_data{
	display:flex;
	 align-items: flex-end; /* 要素を下揃えに配置 */
	 margin-bottom:5px;
}
div.main_box .lecture_list_pc .lecture_header .lecture_data .lecture_date{
	font-size:16px;
}
div.main_box .lecture_list_pc .lecture_header .lecture_status{
	background:#e8f1ff;
	border-radius:7px;
	font-weight:bold;
	margin-left:10px;
	padding:3px 5px;
	font-size:13px;
}
div.main_box .lecture_list_pc .lecture_header .lecture_status.blue{
	background:#e8f1ff;
	color:#2668cc;
}
div.main_box .lecture_list_pc .lecture_header .lecture_status.red{
	background:#ffe8ed;
	color:#e05578;
}
div.main_box .lecture_list_pc .lecture_header .lecture_status.gray{
	background:#e9ecef;
	color:#606060;
}
div.main_box .lecture_list_pc .lecture_header .lecture_data .capacity_block{
	margin-left:auto;
}
div.main_box .lecture_list_pc .lecture_header .lecture_data .capacity_block span{
	margin-right:5px;
}
div.main_box .lecture_list_pc .lecture_header .lecture_data .capacity_block .participants{
	color:#ea9c2e;
	font-size:26px;
	font-weight:bold;
	line-height:1.2;
}
div.main_box .lecture_list_pc .lecture_content{
	display:flex;
	gap:15px;
	align-items: flex-start;
}
div.main_box .lecture_list_pc .lecture_content .video_frame{
	border-radius:20px;
	overflow:hidden;
	width:42%;
	position:relative;
}
div.main_box .lecture_list_pc .lecture_content .video_frame video{
	width:100%;
	vertical-align: top;
}
div.main_box .lecture_list_pc .video_frame .mute_button {
	position: absolute;
	top: 10px; /* 適切な位置に調整してください */
	right: 10px; /* 適切な位置に調整してください */
	opacity: 0;
	transition: opacity 0.3s ease; /* 変化を滑らかにするトランジション */
}
div.main_box .lecture_list_pc .lecture_item:hover .video_frame .mute_button {
	opacity: 1;
}
div.main_box .lecture_list_pc .video_frame .mute_toggle {
	cursor: pointer;
	background-color: #333;
	background-color: rgba(51, 51, 51, 0.8);
	width:40px;
	height:40px;
	border-radius:50%;
	 border: none;
	 font-size: 16px;
	 transition: color 0.3s;
}
div.main_box .lecture_list_pc .video_frame .mute_toggle i{
	color:#fff;
	margin:0px;
}
div.main_box .lecture_list_pc .lecture_content .lecture_info{
	display:flex;
	flex-direction: column;
	gap:15px;
	width:58%;
}
div.main_box .lecture_list_pc .lecture_content .lecture_teacher{
	display:flex;
	align-items: center;
	gap:10px;
	/* margin-bottom:12px; */
	font-size:15px;
	margin-top:4px;
}
div.main_box .lecture_list_pc .lecture_content .lecture_teacher img{
	width:38px;
	margin-bottom:0px;
}
div.main_box .lecture_list_pc .lecture_content .toc span{
    font-size:14px;
    display: -webkit-box;           /* 使うブラウザのベンダープレフィックス */
    -webkit-line-clamp: 3;          /* 行数を指定 */
    -webkit-box-orient: vertical;   /* 縦のボックスを指定 */
    overflow: hidden;               /* ボックスからはみ出した部分を非表示にする */
    text-overflow: ellipsis;        /* 「・・・」を表示する */
}
div.main_box .lecture_list_pc .lecture_content ul{
	list-style: none;
	margin-left: 30px;
	margin-bottom:0px;
}
div.main_box .lecture_list_pc .lecture_content ul li{
	position:relative;
	font-size:14px;
	line-height:1.5;
	padding:3px 0;
	font-style: italic;
}
div.main_box .lecture_list_pc .lecture_content ul li::before {
	position: absolute;
	left: -20px;
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	color: #5193f7;
	 content: '\f00c';
}
div.main_box .lecture_list_pc .lecture_content i{
	color:#5193f7;
}
div.main_box .lecture_list_pc .lecture_content .tag_group{
	display:flex;
	align-items: center;
	gap:6px;
	margin-bottom:4px;
	flex-wrap: wrap;
}
div.main_box .lecture_list_pc .lecture_content .tag_group .tag{
	background:#e8f1ff;
	border-radius:7px;
	padding:2px 5px;
	font-size:13px;
}
div.main_box .lecture_list_pc .lecture_content .tag_group .tag.is_recommended_first_lecture{
	background:#fff0db;
	border:solid 1px #ea9c2e;
	color:#cc8828;
	font-weight: 500;
}
div.main_box .lecture_list_pc .lecture_content .tag_group .tag.is_recommended_first_lecture i{
	color:#cc8828;
}
div.main_box .lecture_list_pc .lecture_content .tag_group .tag i{
	margin-right:2px;
	font-weight:bold;
}
/*--------------------------------------------------------
■ 講座詳細
--------------------------------------------------------*/
div.main_box .lecture_detail{
	width:calc(100% + 10px);
	display:flex;
	flex-direction: column;
	gap:15px;
	background:#f3f3f3;
	margin-right:-5px;
	margin-left:-5px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail{
		width:100%;
		margin-right:0px;
		margin-left:0px;
	}
}
div.main_box .lecture_detail .lecture_link{
	color:#606060;
}
div.main_box .lecture_detail .lecture_item{
	width:100%;
	display:flex;
	align-items: center;
	flex-direction: column;
	background: #ffffff;
}
div.main_box .lecture_detail .lecture_item .video_frame{
	width:100%;
	position:relative;
	margin-bottom:15px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_item .video_frame{
		border-radius: 20px;
    	overflow: hidden;
    	margin-bottom:20px;
	}
}
div.main_box .lecture_detail .lecture_item .video_frame video{
	width:100%;
	vertical-align: top;
}
div.main_box .lecture_detail .lecture_item .video_frame .mute_button {
	position: absolute;
	top: 10px; /* 適切な位置に調整してください */
	right: 10px; /* 適切な位置に調整してください */
	opacity: 1;
	transition: opacity 0.3s ease; /* 変化を滑らかにするトランジション */
}
div.main_box .lecture_detail .lecture_item:hover .video_frame .mute_button {
	/* opacity: 1; */
}
div.main_box .lecture_detail .lecture_item .video_frame .mute_toggle {
	cursor: pointer;
	background-color: #333;
	background-color: rgba(51, 51, 51, 0.8);
	width:40px;
	height:40px;
	border-radius:50%;
	 border: none;
	 font-size: 16px;
	 transition: color 0.3s;
}
div.main_box .lecture_detail .lecture_item .video_frame i{
	color:#fff;
	margin:0px;
}
div.main_box .lecture_detail .lecture_item .lecture_content{
	box-sizing: border-box;
	width: 100%;
	height: auto;
	padding: 0px 5px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_item .lecture_content{
		padding:0px;
	}
}
div.main_box .lecture_detail .lecture_data{
	display:flex;
	 align-items: flex-end; /* 要素を下揃えに配置 */
	 margin-bottom:10px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_data{
		 margin-bottom:15px;
	}
}
div.main_box .lecture_detail .lecture_data .lecture_date{
	font-size:16px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_data .lecture_date{
		font-size:18px;
	}
}
div.main_box .lecture_detail .lecture_status{
	background:#e8f1ff;
	border-radius:7px;
	font-weight:bold;
	margin-left:10px;
	padding:3px 5px;
	font-size:13px;
}
div.main_box .lecture_detail .lecture_status.blue{
	background:#e8f1ff;
	color:#2668cc;
}
div.main_box .lecture_detail .lecture_status.red{
	background:#ffe8ed;
	color:#e05578;
}
div.main_box .lecture_detail .lecture_status.gray{
	background:#e9ecef;
	color:#606060;
}
div.main_box .lecture_detail .lecture_data .capacity_block{
	margin-left:auto;
}
div.main_box .lecture_detail .lecture_data .capacity_block span{
	/* margin-right:5px; */
}
div.main_box .lecture_detail .lecture_data .capacity_block .participants{
	color:#ea9c2e;
	font-size:26px;
	font-weight:bold;
	line-height:1.2;
}
/* div.main_box .lecture_detail .lecture_item .lecture_date{
	margin-bottom:8px;
	display:flex;
	flex-wrap: wrap;折り返す
	gap:10px;
	display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
}
div.main_box .lecture_detail .lecture_item .lecture_status{
	border-radius:7px;
	font-weight:bold;
	padding:2px 5px;
	font-size:13px;
}
div.main_box .lecture_detail .lecture_item .lecture_status.blue{
	background:#e8f1ff;
	color:#2668cc;
}
div.main_box .lecture_detail .lecture_item .lecture_status.red{
	background:#ffe8ed;
	color:#e05578;
}
div.main_box .lecture_detail .lecture_item .lecture_status.gray{
	background:#e9ecef;
	color:#606060;
} */
div.main_box .lecture_detail .lecture_item .lecture_title{
	font-size:16px;
	font-weight:bold;
	color:#303030;
	margin-bottom:4px;
	margin-top:0;
}
div.main_box .lecture_detail .lecture_item .lecture_teacher{
	display:flex;
	align-items: center;
	gap:10px;
	margin-bottom:8px;
}
div.main_box .lecture_detail .lecture_item .lecture_teacher img{
	width:38px;
	margin-bottom:0px;
}
div.main_box .lecture_detail .lecture_item .toc span{
	font-size:14px;
	display:block;
    margin-bottom:10px;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_item .toc span{
		margin-bottom:15px;
	}
}
div.main_box .lecture_detail .lecture_item .toc ul{
	list-style: none;
	margin-left: 30px;
	margin-bottom:0px;
}
div.main_box .lecture_detail .lecture_item .toc ul li{
	position:relative;
	font-size:14px;
	line-height:1.5;
	padding:3px 0;
	font-style: italic;
}
div.main_box .lecture_detail .lecture_item .toc ul li::before {
	position: absolute;
	left: -20px;
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	color: #5193f7;
	content: '\f00c';
}
div.main_box .lecture_detail .lecture_item .toc i{
	color:#5193f7;
}
div.main_box .lecture_detail .lecture_item .toc p{
	margin-bottom:2px;
	font-size:14px;
}
div.main_box .lecture_detail .lecture_item .tag_group{
	display:flex;
	align-items: center;
	gap:6px;
	margin-bottom:10px;
	flex-wrap: wrap;/* 折り返す */
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_item .tag_group{
		margin-bottom:15px;
	}
}
div.main_box .lecture_detail .lecture_item .tag_group .tag{
	background:#e8f1ff;
	border-radius:7px;
	padding:2px 5px;
	font-size:13px;
}
div.main_box .lecture_detail .lecture_item .tag_group .tag.is_recommended_first_lecture{
	background:#fff0db;
	border:solid 1px #ea9c2e;
	color:#cc8828;
	font-weight: 500;
}
div.main_box .lecture_detail .lecture_item .tag_group .tag.is_recommended_first_lecture i{
	color:#cc8828;
}
div.main_box .lecture_detail .lecture_item .tag_group .tag i{
	margin-right:2px;
	font-weight:bold;
	color:#5193f7;
}
div.main_box .lecture_detail .lecture_item .capacity_block{
/* 	display: flex;
	justify-content: flex-end; 右寄せ
	align-items: end; */
	margin-left: auto;
}
div.main_box .lecture_detail .lecture_item .capacity_block span{
	/* margin-right:5px; */
}
div.main_box .lecture_detail .lecture_item .capacity_block .participants{
	color:#ea9c2e;
	font-size:22px;
	font-weight:bold;
	line-height:1;
}
@media only screen and (min-width: 738px){
	div.main_box .lecture_detail .lecture_item .capacity_block .participants{
		font-size:26px;
		line-height:1.2;
	}
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ popup
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/********************************************************
■ アンカー
********************************************************/
div.anchor{
	width:100%;
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index:1;
}
div.anchor div.anchor_main{
	width:100%;
	position:absolute;
	left:0;
	bottom:0;
	margin-bottom:0px;
	height:50px;
	background:#e8f1ff;
}
div.anchor span.anchor_detail_btn{
	display:inline-block;
	height:40px;
	line-height: 40px;
	text-align:center;
	background:#5193f7;
	position:absolute;
	margin-bottom:0px;
	border:1px solid #5193f7;
	font-weight:bold;
	bottom:5px;
}
div.anchor img.anchor_detail_txt{
	width:280px;
	display:inline-block;
	padding:7px 0;
	margin-bottom:0;
}
@media only screen and (max-width: 320px){/* iphone5/se用 */
	div.anchor img.anchor_detail_txt{
		width:240px;
		padding:11px 0;
	}
}
@media only screen and (min-width: 738px){
	div.anchor img.anchor_detail_txt{
		width:500px;
		display:inline-block;
		padding:0;
	}
}
div.anchor img.anchor_close_btn{
	position:absolute;
	bottom:5px;
	margin-bottom:0px;
	width:40px;
}
/*--------------------------------------------------------
■ お気に入りリストボタン
--------------------------------------------------------*/
.fav_list_btn{
    position:fixed;
    z-index: 100;/* ピアノ教室探し方いろは、より下 */
	background:#eb2f5d;
	opacity: 0.8;
	border:none;
    padding: 10px;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
	bottom:10px;
    cursor: pointer;
}
.fav_list_btn:focus{/* ボタンクリック時の不要な線を消す */
	outline:0;
}
@media only screen and (min-width: 1117px){
	.fav_list_btn {
		left:auto;
	}
}
/*--------------------------------------------------------
■ ピアノ教室掲載告知 アンカー広告
--------------------------------------------------------*/
.anchor_school_publication{
	display:none;/* jsでふわっと表示させるため */
	width:calc(100% - 10px);
	height:100%;
	max-width:335px;
	max-height:125px;
	position: fixed;
	bottom: 5px;
	left:50%;
	margin-left:-167px;/* リサイズ時はJSで調整 */
	z-index:101;/* お気に入り詳細ボタン、より上 */
	filter: drop-shadow(5px 5px 5px #aaa);/* 影 */
	cursor:pointer;
}
div.anchor_school_publication img#anchor_school_publication_btn{
    position:absolute;
	bottom:0;
	left:0;
	margin-bottom:0px;
	width:100%;
}
div.anchor_school_publication img#anchor_close_btn{
	position:absolute;
	top:-18px;
	right:5px;
	margin-bottom:0px;
	width:36px;
}
/*--------------------------------------------------------
■ レッスン診断ポップアップ
--------------------------------------------------------*/
div.anchor_lesson_diagnosis{
	position: fixed;
	width:calc(100% - 10px);
	max-width:335px;
	aspect-ratio:74/27;/* 縦横比 */
	bottom: 5px;
	z-index:101;
	left:50%;
	margin-left:-167px;/* リサイズ時はJSで調整 */
	filter: drop-shadow(5px 5px 5px #aaa);/* 影 */
	cursor:pointer;
	display:none;/* jsでふわっと表示させるため */
}
@media only screen and (min-width: 738px){
	div.anchor_lesson_diagnosis{
		max-width:500px;
		width:calc(100% - 20px);
		aspect-ratio:68/21;
		margin-left:-250px;
	}
}
@media only screen and (min-width: 1117px){
	div.anchor_lesson_diagnosis{
		max-width:335px;
		margin-left:-167px;
		aspect-ratio:74/27;/* 縦横比 */
	}
}
div.anchor_lesson_diagnosis .anchor_lesson_diagnosis_btn{
	cursor:pointer;
}
div.anchor_lesson_diagnosis img#anchor_lesson_diagnosis_btn_small{
	width:100%;
	display:block;
    position:absolute;
	bottom:0;
	left:0;
	margin-bottom:0px;
}
@media only screen and (min-width: 738px){
	div.anchor_lesson_diagnosis img#anchor_lesson_diagnosis_btn_small{
		display:none;
	}
}
div.anchor_lesson_diagnosis img#anchor_lesson_diagnosis_btn_big{
	display:none;
}
@media only screen and (min-width: 738px){
	div.anchor_lesson_diagnosis img#anchor_lesson_diagnosis_btn_big{
		width:100%;
		display:block;
	    position:absolute;
		bottom:0;
		left:0;
		margin-bottom:0px;
	}
}
@media only screen and (min-width: 1117px){
	div.anchor_lesson_diagnosis img#anchor_lesson_diagnosis_btn_small{/* large画面では小さい画像を使用 */
		max-width:680px;
		display:block;
	}
	div.anchor_lesson_diagnosis img#anchor_lesson_diagnosis_btn_big{
		display:none;
	}
}
div.anchor_lesson_diagnosis img#anchor_close_btn{
	position:absolute;
	top:-18px;
	right:5px;
	margin-bottom:0px;
	width:36px;
	z-index:102;
}
@media only screen and (min-width: 738px) and (max-width: 1116.999px) {
	div.anchor_lesson_diagnosis img#anchor_close_btn{
		position:absolute;
		top:-20px;
		right:15px;
		margin-bottom:0px;
		width:40px;
		z-index:102;
	}
}
/* 円状に広がるBG */
.circle_bg{
    position: fixed;
	z-index:101;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #F45079;
    background: rgba(0,0,0,.7);
    /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
    top:calc(50% - 50px);/*50%から円の半径を引いた値*/
    left:calc(50% - 50px);/*50%から円の半径を引いた値*/
 	transition: transform 0.3s ease;/*0.6秒かけてアニメーション*/
}
.circle_bg.active{
	animation: circleAnimation 0.3s ease-in-out forwards;
	display: flex;
    justify-content: center;
    align-items: start;
}
@keyframes circleAnimation {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(50);
    }
}
.circle_bg.inactive{
	animation: resetCircleAnimation 0.3s ease-in-out forwards;
}
@keyframes resetCircleAnimation {
    0% {
        transform: scale(50);
    }
    100% {
        transform: scale(0);
    }
}
.answer_popup{
	 box-sizing: border-box;
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    text-align: left;
    z-index: 9999;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
	transition: transform 0.3s ease;
}
.answer_popup.active{
    display:flex;
    justify-content: center;
    align-items: start;
     animation: answerPopupAnimation 0.3s ease-in-out forwards;
}
@keyframes answerPopupAnimation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5; /* 半透明にすることでフワッと表示 */
    }
    100% {
        opacity: 1;
    }
}
.answer_popup .content{
	background:#99c2ff;
    padding: 15px;
    width: 100%;
    margin: 90px 0px 20px 0px;
    position: relative;
    display:flex;
    flex-direction: column;
    gap:15px;
}
@media only screen and (min-width: 738px){
    .answer_popup .content{
        border-radius: 20px;
        margin: 90px 10px 20px 10px;
    }
}
@media only screen and (min-width: 1117px){
	.answer_popup .content{
	    max-width: 1100px;
	}
}
.answer_popup .content.answer{
	background:#fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.answer_popup .content.answer.visible {
    opacity: 1;
}
.answer_popup .content .title{
	font-weight:bold;
	margin-bottom:10px;
	font-size:17px;
}
@media only screen and (min-width: 738px){
	.answer_popup .content .title{
		font-size:20px;
	}
}
.answer_popup .content .title.answer{
	color:#5193F7;
	position:relative;
	padding:10px 20px;
	width:fit-content;
	margin-right:auto;
	margin-left:auto;
	margin-top:30px;
}
.answer_popup .content .title.answer.red{
	color:#F45079;
}
.answer_popup .content .title.answer.yellow{
	color:#ea9c2e;
}
.answer_popup .content .title.answer:before,
.answer_popup .content .title.answer:after{
	position:absolute;
	color:#99c2ff;
	font-size:24px;
	font-family:'Font Awesome 6 Pro';
	background:none;
}
.answer_popup .content .title.answer.red:before,
.answer_popup .content .title.answer.red:after{
	color:#FFE8ED;
	color:#ff99b3;
}
.answer_popup .content .title.answer.yellow:before,
.answer_popup .content .title.answer.yellow:after{
	color:#ffd199;
}
.answer_popup .content .title.answer:before{
	content: '\f10d';
	top:0px;
	left:-8px;
}
.answer_popup .content .title.answer:after{
	font-family:'Font Awesome 6 Pro';
	content: '\f10e';
	bottom:0px;
	right:-8px;
}
.answer_popup .content .recommend{
	margin-top:-10px;
}
.answer_popup .content .point_box{
	padding: 20px;
    border-radius: 20px;
    background:#e8f1ff;
    display:inline-flex;
    width:100%;
    flex-direction: column;
    position: relative;
    gap:15px;
    margin-bottom:10px;
}
.answer_popup .content .point_box .point_item{
    display:flex;
    gap:20px;
    align-items: center;
}
.answer_popup .content .point_box .point_item .img_point{
    width:36px;
    margin-bottom:0px;
}
.answer_popup .contendiv.background_box.red ul li:before {
    width:36px;
    margin-bottom:0px;
}
.answer_popup .content .point_box .point_item a.video_link{
    width:calc(100% - 56px;);
    font-weight:bold;
    text-decoration: underline;
}
.answer_popup .content .balloon_comment {
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
	padding: 8px 10px;
	border-radius:15px;
	min-width: 120px;
	max-width: 100%;
	color: #555;
	font-size: 16px;
	background: #e8f1ff;
}
.answer_popup .content .balloon_comment:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #e8f1ff;
}

.answer_popup .content .balloon_comment p {
  margin: 0;
  padding: 0;
}
.answer_popup .content .close_btn{
    position: absolute;
    top: 10px;
    right: 16px;
    color: #fff;
    font-size: 32px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
}
.answer_popup .content.answer .close_btn{
	color: #606060;
}
.answer_popup .content .close_btn i{
	margin-right:0px;
}
.answer_popup .content .video_box{
    aspect-ratio: 16 / 9;
    overflow-x: hidden;
    width:calc(100% + 30px);
    margin-left:-15px;
    margin-right:-15px;
}
@media only screen and (min-width: 738px){
    .answer_popup .content .video_box{
        width:100%;
        margin-left:0px;
        margin-right:0px;
    }
}
.answer_popup .content .video_box iframe{
	width:100%;
	height:100%;
}
.answer_popup .content .comment_with_bar{
    font-size:13px;
    font-weight:bold;
    position: relative;
    display:inline-block;
    margin:0 auto;
    margin-bottom:10px;
    color:#5193f7;
}
.answer_popup .content .comment_with_bar::before,
.answer_popup .content .comment_with_bar::after {
    position: absolute;
    top: -6px;
    top: 0px;
    width: 2px;
    height:100%;
    content: '';
    background:#5193f7;
}
.answer_popup .content .comment_with_bar::before {
    left: -10px;
    transform: rotate(-30deg);
}
.answer_popup .content .comment_with_bar::after {
    right: -10px;
    transform: rotate(30deg);
}
/* レッスンタイプ診断LINE風 */
.diagnostic_block{
	background:#99c2ff;
	margin-bottom:90px;
}
.diagnostic_block .diagnostic_inner{
	max-width:1100px;
	margin-right:auto;
	margin-left:auto;
	display:flex;
	gap:30px;
	 flex-direction: column;
}
.diagnostic_block .diagnostic_item{
	display:none;
	transition: transform 0.3s ease;
}
.diagnostic_block .diagnostic_item.visible{
	display:flex;
	gap:30px;
}
.diagnostic_block .diagnostic_item.answer{
	justify-content:flex-end;/* answerは右寄せにする */
}
.diagnostic_block .icon_box{
	width:55px;
	transform: scale(0);/*scaleをはじめは0に*/
	transition: transform 0s ease;/*0.6秒かけてアニメーション*/
}
.diagnostic_block .diagnostic_item.visible .icon_box{
	animation: iconAnimation 0.3s ease-in-out forwards;
}
@keyframes iconAnimation {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@media only screen and (min-width: 738px){
	.diagnostic_block .icon_box{
		width:100px;
	}
}
.diagnostic_block .icon_box img{
	width:100%;
}

.diagnostic_block .comment_box{
	  width: fit-content; /* コンテンツに合わせる */
	  transition: transform 0s ease;/*0.6秒かけてアニメーション*/
	  display:none;
}
.diagnostic_block .diagnostic_item.visible .comment_box{
	display:block;
	transform: scale(0);/*scaleをはじめは0に*/
	overflow:visible;
}
.diagnostic_block .diagnostic_item.visible .comment_box.question{
	animation: commentQuestionAnimation 0.3s ease-in-out forwards;
	animation-delay: 0.6s; /* 0.6秒後にアニメーションを開始 */
}
.diagnostic_block .diagnostic_item.visible .comment_box.answer{
	animation: commentAnswerAnimation 0.3s ease-in-out forwards;
	animation-delay: 0.6s; /* 0.6秒後にアニメーションを開始 */
}
@keyframes commentQuestionAnimation {
  0% {
    transform: translateX(-100%) scale(0); /* 左側から出現し、初期サイズ0 */
  }
  100% {
    transform: translateX(0) scale(1); /* 左から右に移動し、フルサイズに拡大 */
  }
}
@keyframes commentAnswerAnimation {
  0% {
    transform: translateX(100%) scale(0); /* 右側から出現し、初期サイズ0 */
  }
  100% {
    transform: translateX(0) scale(1); /* 右から左に移動し、フルサイズに拡大 */
  }
}
.diagnostic_block .comment_box.answer{
	width:calc(100% - 55px);
	max-width:500px;
}
.diagnostic_block .comment_box .comment_main{
	background:#fff;
	padding:8px 10px;
	border-radius:15px;
	position: relative;
	font-weight:bold;
	color:#2668cc;
}
@media only screen and (min-width: 738px){
	.diagnostic_block .comment_box .comment_main{
		padding:16px 20px;
		font-size:18px;
	}
}
.diagnostic_block .comment_box.answer .comment_main{
	background:#5193f7;
	display:flex;
	flex-direction: column;
	gap:10px;
	padding:20px;
	z-index:1;
}
@media only screen and (min-width: 738px){
	.diagnostic_block .comment_box.answer .comment_main{
		gap:20px;
	}
}
.diagnostic_block .comment_box.question .comment_main::before {
	content: '';
	position: absolute;
	top: 13px;
	left: -20px; /* 三角形が左にずれる量 */
	border-width: 8px 10px;
	border-style: solid;
	border-color: transparent #fff transparent transparent; /* 左側に三角形を配置する */
	z-index: 10000;
}
@media only screen and (min-width: 738px){
	.diagnostic_block .comment_box.question .comment_main::before {
		top: 21.5px;
		left: -24px; /* 三角形が左にずれる量 */
		border-width: 10px 12px;
	}
}
.diagnostic_block .comment_box.answer .comment_main::after {
  content: '';
  position: absolute;
  top: 13px;
  right: -20px; /* 三角形が右にずれる量 */
  border-width: 8px 10px;
  border-style: solid;
  border-color: transparent transparent transparent #5193f7; /* 右側に三角形を配置する */
  z-index: 10000;
}
@media only screen and (min-width: 738px){
	.diagnostic_block .comment_box.answer .comment_main::after {
		top: 21.5px;
		right: -24px; /* 三角形が左にずれる量 */
		border-width: 10px 12px;
	}
}
.diagnostic_block .comment_box .comment_main p{
	margin-bottom:0px;
}
.diagnostic_block .comment_box .comment_main .answer_btn{
	border:none;
	badkground:#fff;
	height:50px;
	border-radius:40px;
	background:#fff;
	font-weight:bold;
	color:#2668cc;
	cursor:pointer;
	font-size:15px;
	transition: background-color 0.3s ease; /* 背景色の変化をスムーズにするアニメーション */
}
.diagnostic_block .comment_box .comment_main .answer_btn.active{
	background:#2668cc;
	color:#fff;
}
.diagnostic_block .comment_box .comment_main .answer_btn:focus {
    outline: none;
}
@media only screen and (min-width: 738px){
	.diagnostic_block .comment_box .comment_main .answer_btn{
		font-size:18px;
		height:60px;
	}
	.diagnostic_block .comment_box .comment_main .answer_btn:hover{
		background:#2668cc;
		color:#fff;
	}
}
/* リセットボタン */
.answer_popup .reset_btn{
    position: relative;
    display:none;
    padding:20px 30px;
    color: #fff;
    z-index: 1;
    border:none;
    background:none;
    outline: none;
    cursor:pointer;
    font-weight:bold;
    font-size:15px;
    margin-bottom:20px;
}
@media only screen and (min-width: 738px){
	.answer_popup .reset_btn{
	   /* margin-bottom:45px; */
	}
}
.answer_popup .reset_btn.visible{
    display: inline-block;
     animation: resetBtnAnimation 0.6s ease-in-out forwards;
}
@keyframes resetBtnAnimation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5; /* 半透明にすることでフワッと表示 */
    }
    100% {
        opacity: 1;
    }
}
.answer_popup .reset_btn:before {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    background:#2668cc;
    transition: all .3s;
 }
.answer_popup .reset_btn:hover:before {
  right: 0;
  transform: scale(1.1);
  background: #2668cc;
}
.answer_popup .reset_btn i{
    margin-left:10px;
    margin-right:0px;
}
/********************************************************
■ 全画面ポップアップ
********************************************************/
div.modal{
	position:absolute;
	width:100%;
	height: 100vh;/* 表示画面いっぱいにする */
	/*display:none;*/
	margin-left:-5px;/* .containerのmargin分をネガティブマージンで無くす */
	margin-right:-5px;
}
@media only screen and (min-width: 738px){
	div.modal{
		margin-left:-10px;/* .containerのmargin分をネガティブマージンで無くす */
		margin-right:-10px;
	}
}
@media only screen and (min-width: 1117px){
	div.modal{
		margin-left:0px;/* .containerのmargin分をネガティブマージンで無くす */
		margin-right:0px;
	}
}
div.modal .over_lay {/* オーバーレイ（薄い黒幕）*/
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,0.8);
	width:100%;
	height:100vh;/*  表示画面いっぱいにする*/
	z-index:1001;/* 重ね順（ハンバーガーメニューより前面にする） */
}
div.modal .inner {
	position:absolute;
	z-index:1002;/* 重ね順（最も手前） */
/* 	bottom:0;
	left:0; */
}
div.modal img#popup_main{
	width:100%;
	margin-bottom:0px;
}
div.modal img#popup_piece{
	position:absolute;
	left:0;
	width:100%;
	margin-bottom:0px;
}
div.modal img#btn_popup_detail{
	position:absolute;
	margin-bottom:0px;
}
div.modal img#btn_popup_close{
	position:absolute;
	margin-bottom:0px;
}
body.no_scroll {/* ポップアップ表示時はbodyのスクロールをできないように */
    overflow: hidden;
}
div.beginner_tab_select div.slider_beginner{/*初心者画面*/
	z-index:3;
	position:absolute;
	width:100%;
	top:40%;
	height:40%;
}
div.intermediate_tab_select div.slider_intermediate{/*中級者画面*/
	z-index:3;
	position:absolute;
	width:100%;
	top:40%;
	height:40%;
}
div.advanced_tab_select div.slider_advanced{/*上級者画面*/
	z-index:3;
	position:absolute;
	width:100%;
	top:40%;
	height:40%;
}

div.title_img img{
	position:absolute;
	height:13%;
}

div.template_img img{
	width:78%;
	margin-top: 13.5%;
	margin-left:11%;
	box-shadow: 2px 2px 4px;
}
.prev-arrow {/*前矢印について*/
	top:30%;
	left: -1%;
	z-index: 10;
	height	:85%;
	cursor: pointer;
}
.next-arrow {/*後矢印について*/
	top:30%;
	right: -1%;
	z-index: 10;
	height: 85%;
	cursor: pointer;
}

div.intermediate_tab_select{
	display: none;/*タブを切り替えるまでは不可視*/
}
div.advanced_tab_select{
	display: none;/*タブを切り替えるまでは不可視*/
}
div.modal img#beginner_first_tab{
	position:absolute;
	top:25%;
	left:0;
	width:100%;
	margin-bottom:0px;
	z-index:1;
}
div.modal img#beginner_second_tab{
	position:absolute;
	top:25%;
	left:37%;
	width:26%;
	margin-bottom:0px;
	cursor: pointer;
	z-index:2;
}
div.modal img#beginner_third_tab{
	position:absolute;
	top:25%;
	left:68.5%;
	width:26%;
	margin-bottom:0px;
	cursor: pointer;
	z-index:2;
}

div.modal img#intermediate_first_tab{
	position:absolute;
	top:25%;
	left:5.5%;
	width:26%;
	margin-bottom:0px;
	cursor: pointer;
	z-index:2;
}
div.modal img#intermediate_second_tab{
	position:absolute;
	top:25%;
	left:0;
	width:100%;
	margin-bottom:0px;
	z-index:1;
}
div.modal img#intermediate_third_tab{
	position:absolute;
	top:25%;
	left:68.5%;
	width:26%;
	margin-bottom:0px;
	cursor: pointer;
	z-index:2;
}

div.modal img#advanced_first_tab{
	position:absolute;
	top:25%;
	left:5.5%;
	width:26%;
	margin-bottom:0px;
	cursor: pointer;
	z-index:2;
}
div.modal img#advanced_second_tab{
	position:absolute;
	top:25%;
	left:37%;
	width:26%;
	margin-bottom:0px;
	cursor: pointer;
	z-index:2;
}
div.modal img#advanced_third_tab{
	position:absolute;
	top:25%;
	left:0;
	width:100%;
	margin-bottom:0px;
	z-index:1;
}
div.count{/*5秒カウントについて*/
	position:absolute;
	top:90.6%;
	left:81.5%;
	color:white;
	font-weight:600;
	font-size:3.8vh;
	height: 6.9vh;
	width: 6.9vh;
	border-radius:50%;
	text-align:center;
	background:#C0C0C0;
	line-height: 6.5vh;
}

div.modal_close #btn_popup_close{/*閉じるボタンについて*/
	top:90.6%;
	width:9.2%;
	left:81.5%;
	cursor: pointer;
}

@media screen and (min-width: 481px) and (max-width: 1024px){/*タブレット縦*/
	div.count{
		top:90.7%;
		left:82%;
		font-size:31px;
		height: 62px;
		width: 62px;
		line-height: 62px;
	}
	div.modal_close #btn_popup_close{
		top:90.7%;
		left:82%;
	}
}

@media only screen and (min-width: 896px) and (max-width: 1024px) and (orientation: landscape) {/*タブレット横*/
	div.count{
		top:90.8%;
		left:81%;
		font-size:23px;
		height: 46px;
		width: 46px;
		line-height: 46px;
	}
	div.modal_close #btn_popup_close{
		top:90.8%;
		left:81%;
	}
}

@media screen and (max-width: 896px) and (orientation: landscape){/*スマホ横*/
	div.count{
		top:90.8%;
		left:81.3%;
		font-size:13px;
		height: 25px;
		width: 25px;
		line-height: 25px;
	}
	div.modal_close #btn_popup_close{
		top:90.8%;
		left:81.3%;
	}
}

@media screen and (max-width: 480px) {/*スマホ縦*/
	div.count{
		top:90.7%;
		left:82%;
		font-size:5vw;
		height: 9.2vw;
		width: 9.2vw;
		line-height: 8.8vw;
	}
	div.modal_close #btn_popup_close{
		top:90.7%;
		left:82%;
	}
}

@media screen and (max-width: 374px) {/*iphone5s縦*/
  	div.count{
		font-size:2.9vh;
		height: 5.2vh;
		width: 5.2vh;
		line-height: 4.8vh;
	}
	div.modal_close #btn_popup_close{
		top:90.7%;
		left:82%;
	}
}
/********************************************************
■ モーダルウィンドウ
********************************************************/
.modal_window {
    /* display:none; */
    height: 100vh;
    width: 100%;
    background-color: rgba(51, 51, 51, 0.7);/* 背景を黒半透明にする */
    position: fixed;
    top: 0;
    left: 0;
    z-index:1001;
}
.modal_window.show {
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal_window .content{
    display: flex;
    justify-content: center;
    flex-flow: column;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
  	justify-content:space-between;
	background: #fff;
    padding: 30px;
    width: 100%;
    max-width:500px;
    min-height:250px;
    border-radius: 10px;
    margin: 0 10px;
    position: relative;
    gap:10px;/* 要素と要素の余白を指定 */
}
@media only screen and (min-width: 1117px){
	.modal_window .content{
	    max-width: 680px;
	}
}
.modal_window .content .title{
	font-weight:bold;
	font-size:17px;
	position:relative;
	padding:4px 0 4px 25px;
}
.modal_window .content .title.info,
.modal_window .content .title.error{
	color:#606060;
}
/*  見出しの縦棒*/
.modal_window .content .title:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 3px;
    width: 6px;
    height: 100%;
}
.modal_window .content .title.info:before {
	background: #25ae78;
}
.modal_window .content .title.warning:before {
	background: #ea9c2e;
}
.modal_window .content .title.error:before {
	background: #eb2f5d;
}
.modal_window .content p{
	flex-grow: 1;/* flex-grow: 1;を指定することで、親要素の余白を埋めるように要素が伸びる */
	display: flex;
	align-items:center;
	margin-bottom:0px;
}
/*  ボタン*/
.modal_window .content .modal_btn_block{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;/* ボタンとボタンの間を開ける */
    align-items:center;
	justify-content:center;
	width:100%;
	margin-top: auto;
}
.modal_window .content .modal_btn_block a{/* 実際のボタン描画領域はaタグのため、カーソルCSSはこちらに記述 */
	cursor: pointer;
}
@media only screen and (min-width: 738px){
	.modal_window .content .modal_btn_block{
		gap: 20px;/* ボタンとボタンの間を開ける */
	}
}
.modal_window .content .modal_btn_block .modal_btn{
	flex: 1 1 0%;
}
.modal_window .content .modal_btn_block.one .modal_btn{
	flex:initial;
	flex-grow: 1;
	max-width:180px;
}
@media only screen and (min-width: 738px){
	.modal_window .content .modal_btn_block .modal_btn{
		flex:initial;
	}
}
.modal_window .content .modal_btn_block .modal_btn .modal_btn_inner{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:50px;
	border-radius:5px;
	font-weight:bold;
}
@media only screen and (min-width: 738px){
	.modal_window .content .modal_btn_block .modal_btn .modal_btn_inner{
		width:180px;
	}
}
.modal_window .content .modal_btn_block .modal_btn .modal_btn_inner.main{
	background:#5193f7;
	color:#fff;
}
.modal_window .content .modal_btn_block .modal_btn .modal_btn_inner.sub{
	background:#fff;
	color:#5193f7;
	border:1px solid #5193f7;
}
/* 情報／警告／エラーが見分けられるアイコン入の○ */
.modal_window .content .i_circle_main{
	position: absolute;
    left: 50%;
    top: -24px;
    width:48px;
    height:48px;
    border-radius:50%;
    margin-left:-24px;
    background: #ffffff;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
}
.modal_window .content .i_circle_sub{
	width:38px;
    height:38px;
    border-radius:50%;
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	align-items:center;
	justify-content:center;
}
.modal_window .content .i_circle_sub.info{
	background:#25ae78;
}
.modal_window .content .i_circle_sub.warning{
	background:#ea9c2e;
}
.modal_window .content .i_circle_sub.error{
	background: #eb2f5d;
}
.modal_window .content .i_circle_sub i{
	font-size:18px;
	color:#fff;
	margin-right:0;
}