@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 24
}

/************************** common ***************/
html{
	scroll-padding-top: 85px;
}

body {
	font-family: "", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "メイリオ", "Meiryo", sans-serif;
/*
	background-color:#DCBEE6;
*/
	padding-top: 85px;
	color:#434343;
}
.container {
	width: 90%;
	font-size: 1rem;
}

.contents{
	background-color:#FFF;
	max-width: 600px;
	margin: 0 auto;
}

.min {
	font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝L", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
img {
	max-width: 100%;
}
ul {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}

ul.list-dot{
	margin-left:20px;
}

ul.list-dot li:before {
	content:  "";
	width:  10px;
	height:  10px;
	display:  inline-block;
	background-color: #DCBEE6;
	border-radius:  50%;
	margin-left: -20px;
	margin-right: 10px;
}

a {
	transition: .5s;
	text-decoration: none;
	color: inherit;
}
a:focus, *:focus {
	outline: none;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	opacity: 0.5;
	color: inherit;
}
a.link{
	text-decoration: underline;
	color: #007bff;
}

p, h2, h3 {
	color: #333;
}

.nowrap{
	white-space: nowrap;
}

.titledot{
	position:relative;
	padding-left:20px;
}

.carouseltitle{
	position:relative;
	padding-left:20px;
	margin-left:10px;
}

.titledot:before
,.carouseltitle:before{
	content:" ● ";
	position:absolute;
	color:#A488C0;
	left:0;
	top:0;
}


.pc3{
	width:32%;
}

.block{
	display:block;
}

@media (max-width: 992px) {
	.pc3{
		width:49%;
	}
}


/** font-size **/
.fontS {
	font-size: 0.8rem;
}
.fontM {
	font-size: 1rem;
}
.fontMM {
	font-size: 14px;
}
.fontL {
	font-size: 1.2rem;
}
.fontLL {
	font-size: 1.4rem;
}

.flex{
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex_strech{
	display: flex;
	justify-content: center;
	align-items:stretch;
}

.flex_btn{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.flex_start{
	display: flex;
	justify-content: center;
	align-items: start;
}

.flex_between{
	display: flex;
	justify-content: space-between;
}

.flex_wrap{
	display: flex;
	flex-wrap: wrap;
}

.space-between{
	justify-content: space-between;
}

.flex_wrap .form-check-inline{
	margin-right: 0;
	width: 31%;
}

.flex_wrap .form-check-inline.form-check-other{
	width: 64%;
}

.form-check-other input[type="text"]{
	margin-left:5px;
	width:60%;
}

.flex_center{
	align-items: center;
}

.flex_column{
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-direction: column;
}

.flex_column_left{
	display: flex;
	justify-content: space-around;
	flex-direction: column;
}

.flex2{
	width:48%;
}

.flex3{
	width:32%;
}

.grow1{
	flex-grow: 1;
}

.flex_c_70{
	flex-basis:70px;
	flex-shrink:0;
}

.main_color{
	color: #A488C0 !important;
}

.sub_color{
	color: #DCBEE6 !important;
}

/** border **/
.gray_border{
	border-bottom: 1px solid #434343;
}
.lightgray_border{
	border-bottom: 1px solid #bbb;
}

.lightgray_border_top{
	border-top: 1px solid #bbb;
}
.ac_border{
	border-bottom: 1px solid #CFBD87;
}

/** bg **/
.main_bg {
	background: #A488C0 !important;
	color:#FFF !important;
}
.sub_bg {
	background: #DCBEE6 !important;
}
.bar_bg {
	background: #F5EFF7 !important;
}
.shadow_box {
  box-shadow: rgba(100, 100, 111, 0.15) 2px 2px 4px 1px;
  overflow: hidden;
}
.radius5 {
  border-radius: 5px;
}
/** ttl **/

/** color **/
.gray_fc {
  color: #7B8796;
}
.error_txt {
  color: #DE3D3D;
}
.message_txt {
  color: #28a745;
}
/** btn **/
.btn_def{
	display: flex;
	align-items: center;
	justify-content: center;
	color:#FFF;
	width:312px;
	height:56px;
	background-image:url("/common/img/bg_btn.png");
	background-size: 100% 100%;
	margin:10px auto;
	font-size:22px;
	font-weight:bold;
}

.btn_def_arrow{
	display: flex;
	align-items: center;
	justify-content: center;
	color:#FFF;
	width:312px;
	height:56px;
	background-image:url("/common/img/bg_btn_arrow.png");
	background-size: 100% 100%;
	margin:10px auto;
	font-size:22px;
	font-weight:bold;
}

.btn_small{
	display: flex;
	align-items: center;
	justify-content: center;
	color:#FFF;
	min-width:200px;
	min-height:35px;
	background-image:url("/common/img/bg_btn.png");
	background-size: 100% 100%;
	font-size:16px;
	font-weight:bold;
	padding: 0 20px;
	border-radius:17.5px;
}

.btn_small_glay{
	display: flex;
	align-items: center;
	justify-content: center;
	color:#FFF;
	min-width:200px;
	min-height:35px;
	font-size:16px;
	font-weight:bold;
	padding: 0 20px;
	background: #DBDBDB;
	color: #333333;
	border-radius:17.5px;
}

.btn_small_red{
	display: flex;
	align-items: center;
	justify-content: center;
	color:#FFF;
	min-width:200px;
	min-height:35px;
	font-size:16px;
	font-weight:bold;
	padding: 0 20px;
	background: #FF3333;
	color: #FFF;
	border-radius:17.5px;
}

.flex_btn .btn_small
,.flex_btn .btn_small_red
,.flex_btn .btn_small_glay{
	max-width:45%;
	min-width:0;
}

.minwidth0{
	min-width:0 !important;
}

.btn_small_s{
	display: flex;
	align-items: center;
	justify-content: center;
	color:#FFF;
	height:35px;
	background-image:url("/common/img/bg_btn.png");
	background-size: 100% 100%;
	font-size:12px;
	font-weight:bold;
	padding: 0 15px;
	border-radius:17.5px;
}

.btn_small_s.selected{
	background-image:none;
	background-color: #DBDBDB;
}

.btn_small_s_gray{
	display: flex;
	align-items: center;
	justify-content: center;
	background: #DBDBDB;
	color: #333333;
	height:35px;
	font-size:12px;
	font-weight:bold;
	padding: 0 15px;
	border-radius:17.5px;
}

.btn_small_s_red{
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF3333;
	color: #fff;
	height:35px;
	font-size:12px;
	font-weight:bold;
	padding: 0 15px;
	border-radius:17.5px;
}

.tab_area{
	display: flex;
	justify-content: center;
	align-items:stretch;
	padding:10px;
}

.tab_def{
	display: flex;
	align-items: center;
	justify-content: center;
	color:#434343;
	font-size:14px;
	padding:5px 10px;
	background: #DCBEE6;
	border-radius:5px;
	margin-right:10px;
}
.tab_def.is-active{
	background: #A488C0 !important;
	color:#fff;
}





.btn_pattern01 {
  background-color: #00A7DB;
  border-color: #00A7DB;
  color: #fff;
  padding: 10px 30px;
  transition: .5s;
  border-radius: 4px;
  white-space: nowrap;
}
.btn_pattern01:hover {
  color: #fff;
}

.btn_pattern02{
  background-color: #DBDBDB;
  border-color: #DBDBDB;
  color: #333;
  padding: 10px 30px;
  transition: .5s;
  border-radius: 4px;
  white-space: nowrap;
}

.btn_pattern03 {
  background-color: #00A7DB;
  border-color: #00A7DB;
  color: #fff;
  padding: 2px 2px;
  transition: .5s;
  border-radius: 4px;
  white-space: nowrap;
}
.btn_pattern03:hover {
  color: #fff;
}

.btn_right{
  float:right;
  padding: 5px 30px;
}
.btn_area {
	display: flex;
	width:100%;
}
.btn_area.beside3 {
  display: flex;
  justify-content: space-between;
}
.btn_area div {
  padding-right: 30px;
}
.btn_area.beside3 div {
  padding-right: 0;
}
.btn_area div:last-child {
  padding-right: 0;
}

.btn_area.beside3_v {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prev_btn a, .next_btn a, .preview_btn a, .del_btn a, .addr_btn a{
  display: block;
  width: 255px;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  border-radius: 4px;
}
.prev_btn a {
  background: #DBDBDB;
  color: #333333;
}
.next_btn a {
  background: #FF8D2C;
  color: #fff;
}
.preview_btn a {
  background: #333333;
  color: #fff;
}
.del_btn a{
  background: #FF3333;
  color: #333333;
}
.addr_btn a {
  background: #6464FF;
  color: #fff;
}

.btns a{
	width:200px;
}


.prev_btn_w a, .next_btn_w a, .preview_btn_w a, .del_btn_w a, .addr_btn_w a{
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  border-radius: 4px;
}
.prev_btn_w a {
  background: #DBDBDB;
  color: #333333;
}
.next_btn_w a {
  background: #FF8D2C;
  color: #fff;
}
.preview_btn_w a {
  background: #333333;
  color: #fff;
}
.del_btn_w a{
  background: #FF3333;
  color: #333333;
}
.addr_btn_w a {
  background: #6464FF;
  color: #fff;
}

.btns_w a{
	width:200px;
}

.next_btn_w a.disabled {
  pointer-events: none;    /* クリック・タップ操作を物理的に無効化 */
  opacity: 0.5;            /* 見た目を薄くする */
  cursor: not-allowed;     /* （参考）非アクティブ状態を示す設定 */
  background-color: #ccc;  /* 必要に応じて背景色を変更 */
  color: #888;             /* 必要に応じて文字色を変更 */
}

/** fadein **/
/** header **/
.header_fix {
	position: fixed;
	top: 0;
	width: 100%;
	background: #fff;
	z-index: 999;
	border-bottom:2px solid #CFBD87;
}
.top-upper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 50px 10px 10px;
}
.top-upper div img {
  height: 30px;
}

.header-btn{
	display:flex;
	justify-content: space-between;
}

a.hd-btn-white{
	display: block;
	padding:3px 10px;
	text-align: center;
	font-size: 14px;
	border-radius: 4px;
	background-color:#FFF;
	border: 1px solid #a488c0;
	margin-right:5px;
}

.top-uname{
	display: flex;
	max-width:calc(100% - 160px);
}

.top-uname span{
	display:inline-block;
	width:100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.top-lower{
	display:flex;
	width:100%;
	justify-content: space-between;
	align-items: center;
	padding: 0px 10px 5px;
	border-bottom: 1px solid #EBEBEB;
}

a.hd-btn-menu{
	display: block;
	padding:3px 10px;
	text-align: center;
	font-size: 14px;
	border-radius: 4px;
	background-color:#DCBEE6;
	border: 1px solid #a488c0;
	width:calc((100% - 42px) / 5);
}

a.hd-btn-menu.login{
	background-color:#a488c0;
	color:#fff;
	font-weight:bold;
}

a.hd-btn-menu:last-child{
	width:calc((100% - 42px) / 5 + 28px);
}


/** サイドメニュー **/
/* top menu */
.menu-wrapper {
	position: relative;
}

.menu-icon {
	width: 20px;
	height: 20px;
	position: fixed;
	top: 10px;
	right: 20px;
	cursor: pointer;
	z-index: 3;
	display: inline-block;
}

.menu-icon span {
	display: block;
	height: 2px;
	margin: 6px 0;
	background: #333;
	border-radius: 2px;
	transition: 0.4s;
}

/* ハンバーガーがXに変形 */
#menu-toggle:checked + .menu-icon span:nth-child(1) {
	transform: translateY(12px) rotate(45deg);
}
#menu-toggle:checked + .menu-icon span:nth-child(2) {
	opacity: 0;
}
#menu-toggle:checked + .menu-icon span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

/* オーバーレイ背景 */
.overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	pointer-events: none;
	transition: 0.4s;
	z-index: 1;
}

#menu-toggle:checked ~ .overlay {
	opacity: 1;
	pointer-events: auto;
}

/* メニュー本体（左から出す） */
.menu {
	position: fixed;
	top: 0;
	right: calc(100% * -1);
	width: 100%;
	height: 100%;
	background-color:#F3F3F3;
	box-shadow: 2px 0 8px rgba(0,0,0,0.2);
	transition: right 0.4s ease;
	z-index: 2;
	padding-top:60px;
}

#menu-toggle:checked ~ .menu {
	right: 0;
}

.menu-header{
	border-bottom:2px solid #CFBD87;
}

.menu-header div{
	display:flex;
	justify-content: center;
	margin-bottom:5px;
}

.menu-header .title{
	width: 30%;
	background-color:#FFF;
	border-radius:5px;
}
.menu-header .body{
	width: 60%;
	background-color:#FFF;
	border-radius:5px;
	margin-left:10px;
}

.menu-wrapper ul{
	overflow: auto;
	height: calc(100% - 165px);
}

.menu-wrapper ul li{
	width:90%;
	margin:10px auto;
	border-radius:5px;
	background-color:#fff;
	padding:10px;
}

.menu-wrapper ul li a{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.menu-wrapper ul li a::after {
	font-family: 'Material Symbols Outlined';
	content: '\eaaa';
	font-weight: normal;
	font-style: normal;
	font-size: 24px; /* サイズの調整 */
	display: inline-block;
	margin-right:10px;
}


/* footer */
footer{
	margin-top:20px;
	padding-top:20px;
	padding-bottom:80px;
	background-color:#f7f7f7;
}

/* form_area */
.form_area .form-control, .form_area .custom-select {
  border: 1px solid #afafaf;
  font-size: 12px;
}

.form_area .form-control-html{
	font-size: 16px;
}

.form_area.column_text .form-control{
	font-size: 1rem;
}

.form_area input.form-control
,.form_area textarea.form-control
,.form_area select.form-control
,.form_area select.custom-select {
  border: 1px solid #333;
  font-size: 16px;
}

.form-control{
  min-height: calc(2.25rem + 2px);
  height:auto;
}

.form_area .btn.btn_pattern01:hover {
  color: #fff;
  opacity: 0.5;
}
.form_area .required {
  background: #DE3D3D;
  color: #fff;
  font-size: 11px;
  font-weight: normal;
  padding: 0 3px;
  margin-left: 3px;
}
.form_area .prefectures .form-check {
  width: 65px;
  margin-bottom: 10px;
  margin-right: 7px;
}
.thumbnail_select {
  position: relative;
  display: table;
}
.thumbnail_select button.close_btn {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 9;
  cursor: pointer;
  background: none;
  box-shadow: none;
  border: none;
}
.thumbnail_select .img_area {
  position: relative;
  width: 160px;
  height: 109px;
  overflow: hidden;
  box-shadow: 0 0 6px #ccc;
}
.form_area .thumbnail_select .img_area img {
  position: absolute;
  max-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.ui-widget.ui-widget-content {
  z-index: 99 !important;
  display: none;
}
.form_area #content1_class, .form_area #content2_class {
  display: none;
  clear: both; /* floatを解除 */
  overflow: hidden;
}
.form_area label.form-check-label {
  vertical-align: middle;
}
.sbh1, .sbh2 {
  display: none;
}
input[type="radio"]:checked#sbh1 ~ div.sbh1 {
  display: block;
}
input[type="radio"]:checked#sbh2 ~ div.sbh2 {
  display: block;
}
#thumbnail {
  height: 100px;
  max-width: 100px;
  margin: 10px;
  border: solid thin lightgray;
  border-radius: 5px;
}
/* 一覧ページ */
.detail_sum_area {
	width:100%;
}
.detail_sum_area .ttl_list {
  color: #ACB8C7;
  display: flex;
  align-items: center;
}
.detail_sum_area .ttl_list li {
  text-align: center;
  padding: 0 10px;
}
.detail_sum_area ul.detail_link {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10px 0;
  border-radius: 5px;
  margin-bottom: 5px;
}
.detail_sum_area .detail_link li {
  padding: 0 4px;
}

.detail_sum_area .detail_link li.dt_area {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.detail_sum_area .btn_pattern01 {
  padding: 10px 20px;
}

@media (max-width: 992px) {}

.band{
	margin-bottom: 10px;
	border-bottom: 2px solid #b4d7fb;
	width: 100%;
	padding-bottom: 5px;
}

.center{
	text-align: center;
}
.flexcenter{
	display: flex;
	align-items: center;
	justify-content: center;
}

.right{
	text-align: right;
}

.left{
	text-align: left;
}

.flexright{
	display: flex;
	align-items: center;
	justify-content: right;
}

.flexleft{
	display: flex;
	align-items: center;
	justify-content: left;
}

.divcenter{
	margin:0px auto;
}

/*モーダルを開くボタン*/
.modal-open{
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 40px;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
}

.modal-container-wide{
	padding: 0;
}

/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 500px;
	width: 90%;
}

.modal-container-wide .modal-body{
	width: 95%;
	padding:0;
}

/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
	top: -20px;
	right: 0px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
	border-radius: 20px;
	background-color:#434343;
	z-index:5;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
	background: #fff;
	text-align: left;
	padding: 30px;
}

.modal-container-wide .modal-body .modal-content{
	width: 95%;
	padding:10px;
	max-height:500px;
}

.modal-scroll{
	height: 70vh;
	overflow: auto;
}

.modal-content p{
	margin-bottom:10px;
}

/* 幅設定 */
.fit{
	width:fit-content;
}

.width10p{
	width:10% !important;
	display:inline-block;
}
.width15p{
	width:15% !important;
	display:inline-block;
}
.width20p{
	width:20% !important;
	display:inline-block;
}
.width30p{
	width:30% !important;
	display:inline-block;
}
.width33p{
	width:33%;
	display:inline-block;
}
.width40p{
	width:40% !important;
	display:inline-block;
}
.width50p{
	width:50% !important;
	display:inline-block;
}
.width60p{
	width:60% !important;
}
.width70p{
	width:70% !important;
}
.width80p{
	width:80% !important;
}
.maxwidth80p{
	max-width:80% !important;
}
.width90p{
	width:90% !important;
}
.width95p{
	width:95% !important;
}
.width100p{
	width:100% !important;
}

.maxwidth50p{
	max-width:50% !important;
}
.maxwidth60p{
	max-width:50% !important;
}
.maxwidth70p{
	max-width:70% !important;
}
.maxwidth80p{
	max-width:80% !important;
}

.div-border{
	border:1px solid #495057;
	border-radius: 5px;
	padding:10px;
}
.div-border-light{
	border:1px solid #ccc;
	border-radius: 5px;
	padding:10px;
}
.mt10{
	margin-top:10px;
}
.mt15{
	margin-top:15px;
}
.mt20{
	margin-top:20px;
}
.mt30{
	margin-top:30px;
}
.ml10{
	margin-left:10px;
}
.ml15{
	margin-left:15px;
}
.ml20{
	margin-left:20px;
}
.ml30{
	margin-left:30px;
}
.mr10{
	margin-right:10px;
}
.mr15{
	margin-right:15px;
}
.mr20{
	margin-right:20px;
}
.mr30{
	margin-right:30px;
}
.mb10{
	margin-bottom:10px;
}
.mb15{
	margin-bottom:15px;
}
.mb20{
	margin-bottom:20px;
}
.mb30{
	margin-bottom:30px;
}

.full-image{
	width:100%;
	padding:0px;
	margin:0px;
	text-align:center;
}

.pagenation{
	width:95%;
	font-size: 14px;
	margin:10px auto;
}

.pagenation span{
	display:inline-block;
	width:25px;
	border:1px solid #ccc;
	text-align:center;
}

.pagenation span.current{
	background-color:#a488c0;
	color:#fff;
}

.linecnt{
	display:inline-block;
	width:200px;
}

.pagemove{
	display:inline-block;
	width:100%;
	text-align:center;
}

.rtn_div{
	width:100%;
}
.detail_title{
	width:100%;
	display: flex;
	border-bottom:1px solid #999;
}
.detail_type{
	width:50%;
}
.detail_time{
	width:50%;
	text-align:right;
	padding-right:10px;
}

.btn_small a{
	width:170px;
}

.omit{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.word_break{
	word-break: break-all;
}

.bold{
	font-weight:bold;
}

.color_black{
	color:black !important;
}
.color_red{
	color: #DE3D3D !important;
}
.chat-div{
	border-bottom: 1px dashed #ccc;
}
.chat-area{
  display: flex;
}
.chat-send{
	flex-basis:15%;
	max-width:100px;
}
p.chat-message{
	padding-left:1em;
	position:relative;
	flex-basis:85%;
}
p.chat-message:before{
	content:" > ";
	position:absolute;
	left:0;
	top:0;
}

.top_logo{
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 10px 30px;
}
.dpn{
	display:none;
}
.iconimg img{
	max-width:30px;
}
h3{
	width:100%;
	font-size: 18px;
	border-bottom:1px solid #ccc;
	margin-bottom:10px;
}

.viewarea {
  margin-top:10px;
  border-radius: 20px;
  border:1px solid #ccc;
  padding: 20px;
}


.sort_area{
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	float: right;
	margin-top:5px;
}
.sort_area .sortup{
	margin-bottom:2px;
}

.sort_area img{
	width: 8px;
}

.dispnonimg img{
	display: none;
}

.title-bar{
	border-bottom:1px solid #ccc;
}
.border-on{
	width:100%;
}

.border-on th
,.border-on td{
	width:calc(100% / 9);
	border:1px solid #333;
}

.title_banner_top{
	background-color: #FFFFFFFF;
	color: #fff;
	padding: 1rem 10px;
	font-size: 18px;
	font-weight: bold;
	margin-top: 1.0rem;
	margin-bottom: 1.0rem;
	background-image: url(/common/img/snstop/snstop_teacher_accent_t.png);
	background-size: 57px 23px;
}

.title_banner_top div{
	width:90%;
	margin:10px auto;
	padding: 4rem 20px;
	background-color: #cccccc99;
	color:#d7a308;
	font-size:1.6rem;
}

.title_banner {
	background-color: #F5EFF7;
	color: #A488C0;
	padding: 20px 20px;
	font-size: 18px;
	font-weight: bold;
	margin-top: 1.0rem;
	margin-bottom: 1.0rem;
}

.title_div{
	background-color: #F5EFF7;
	color: #A488C0;
	padding:3px 10px;
	width:100%;
	font-size: 16px;
	font-weight: bold;
	margin-bottom:10px;
}

.title_banner_guide {
	color: #A488C0;
	padding: 20px 20px;
	font-size: 18px;
	font-weight: bold;
	margin-top: 1.0rem;
	margin-bottom: 1.0rem;
}

/* カルーセル */
.carousel_area{
	background-color: #F5EFF7;
}

.carousel_area_white{
	background-color: #FFF;
}

.carousel_area .more_btn{
	margin:10px;
}

.carousel_area .more_btn .btn_small{
	min-width: 120px;
	width: 120px;
	height: 21px;
	font-size: 12px;
}

.carousel{
	display: flex;                /* 子要素を横並びにする */
	overflow-x: auto;             /* 横方向にはみ出た分をスクロール可能にする */
	-webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
	gap: 16px;                    /* アイテム間の隙間（任意） */
	padding: 16px;                /* 内側の余白（任意） */
}

.carousel .item{
	width:calc(100% / 3 + 25px);
	flex: 0 0 calc(100% / 3 + 25px);
	background-color:#FFF;
	display: flex;
	flex-direction: column;
	border-radius: 5px;
	border: 1px solid #CFBD87;
}

.collist .item{
	width:calc(100% / 2);
	flex: 0 0 calc(100% / 2 - 5px);
	background-color:#FFF;
	display: flex;
	flex-direction: column;
	border-radius: 5px;
}

.carousel .item a
,.collist .item a{
	display: block;
	width: 100%;
	text-align: center;
}

.carousel .item .detail
,.collist .item .detail{
	display:flex;
	flex-flow:column;
	justify-content:space-between;
	padding:5px;
}

.carousel .item .img
,.collist .item .img{
	width:100%;
	aspect-ratio: 4/3;
	border-radius: 5px;
}

.img_face{
	aspect-ratio: 1/1 !important;
}

.carousel .item .img img
,.collist .item .img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-height: 220px;
}

@media (max-width: 640px) {
	.carousel .item .img img
	,.collist .item .img img{
		max-height: 145px;
	}
}

.carousel .item .title
,.collist .item .title
{
	font-weight:bold;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	height: calc(1.5em * 2);
}

.carousel .item .more_area
,.collist .item .more_area{
	margin-top:5px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
}

.carousel .item .nice_area
,.collist .item .nice_area{
	display:flex;
	justify-content: space-around;
}

.carousel .item .nice_area .likes
,.carousel .item .nice_area .fav
,.collist .item .nice_area .likes
,.collist .item .nice_area .fav{
	display: flex;
	place-items: center;
}

.carousel .item .nice_area .likes::before
,.collist .item .nice_area .likes::before{
	font-family: 'Material Symbols Outlined';
	content: '\e87d';
	font-weight: normal;
	font-style: normal;
	font-size: 24px; /* サイズの調整 */
	display: inline-block;
	margin-right:2px;
	color:#A488C0;
}

.carousel .item .nice_area .fav::before
,.collist .item .nice_area .fav::before{
	font-family: 'Material Symbols Outlined';
	content: '\f457';
	font-weight: normal;
	font-style: normal;
	font-size: 24px; /* サイズの調整 */
	display: inline-block;
	margin-right:2px;
	color:#A488C0;
}



.carousel-container {
  display: flex;                /* 子要素を横並びにする */
  overflow-x: auto;             /* 横方向にはみ出た分をスクロール可能にする */
  white-space: nowrap;          /* 子要素の折り返しを防止する */
  -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
  gap: 16px;                    /* アイテム間の隙間（任意） */
  padding: 16px;                /* 内側の余白（任意） */
}

.carousel-item {
  flex: 0 0 250px;              /* 縮まない、伸びない、幅は250pxに固定 */
  height: 150px;                /* 高さを指定（任意） */
  background-color: #f0f0f0;    /* 背景色（任意） */
  border-radius: 8px;           /* 角丸（任意） */
}

.teacher .accent{
	width:30%;
	margin:5px auto;
}

/*** partner ***/
.partner_area label{
	width:100%;
}

.partner .essence{
	width:62px;
	text-align:center;
}

.name_area{
	width: calc(100% - 150px);
	text-align:center;
}

.partner .kishitsu{
	width:37px;
	text-align:center;
}

.partner .delete{
	width:26px;
	text-align:center;
}

.name_area .name{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
/*
	-webkit-line-clamp: 2;
*/
}

.birthday span{
	margin-right:7px;
}

/*** tos ***/
.tos h1{
	font-size:26px;
}

.tos .title{
	font-weight:bold;
	margin-bottom:0.5rem;
	font-size: 18px;
}

.tos .body{
	padding-bottom:1rem;
	border-bottom: 1px solid #bbb;
	margin-bottom:1rem;
	font-size: 14px;
}

.tos .body:last-child{
	border:none;
}

.tos ul
,.tos ol{
	padding-left: 20px;
}

.tos li{
	list-style: inherit;
	padding: revert;
}

.tos ol li ol li{
	list-style: upper-alpha;
}

/*** policy ***/
.policy h1{
	font-size:26px;
}

.policy .title{
	font-weight:bold;
	margin-bottom:0.5rem;
	font-size: 18px;
}

.policy .body{
	padding-bottom:1rem;
	border-bottom: 1px solid #bbb;
	margin-bottom:1rem;
	font-size: 14px;
}

.policy .body:last-child{
	border:none;
}

.policy ul
,.policy ol{
	padding-left: 20px;
}

.policy li{
	list-style: inherit;
	padding: revert;
}

.policy ol li ol li{
	list-style: upper-alpha;
}

/*** scta ***/
.scta h1{
	font-size:26px;
}

.scta .title{
	font-weight:bold;
	margin-bottom:0.5rem;
	font-size: 18px;
	position:relative;
	padding-left:20px;
}

.scta .title:before{
	content:"■";
	position:absolute;
	left:0;
	top:0;
}


.scta .body{
	padding-bottom:1rem;
	border-bottom: 1px solid #bbb;
	margin-bottom:1rem;
	font-size: 14px;
}

.scta .body:last-child{
	border:none;
}

.scta ul
,.scta ol{
	padding-left: 20px;
}

.scta ol li{
	margin-bottom:20px;
}

.scta li{
	list-style: inherit;
	padding: revert;
}

.scta ol li ol li{
	list-style: upper-alpha;
}

ul.ast{
	margin-top:10px;
	margin-bottom:20px;
}

ul.dot{
	padding-left:20px;
}

ul.ast li
,ul.dot li{
	list-style:none;
	position:relative;
}

ul.dot li{
	list-style: disc;
}


ul.ast li:before {
	content:  "※";
	position:absolute;
	left:-20px;
	top:0;
}


/*** openclose ***/
input[type="checkbox"].openclose{
	opacity: 0;
}

.open-label{
	position: relative;
	padding: 0.8em;
	display: block;
	color: #434343;
	font-weight: bold;
	text-align: center;
	box-shadow: 0 2px 0 2px #aaa;
	background: #F5EFF7;
	border-radius: 10px;
}

.open-label::after {
	content: '＋';
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	font-size: 20px;
}
.openclose:checked ~ .open-label::after {
	content: '－';
}

.open-div{
	padding: 0 1em;
	height: 0;
	opacity: 0;
	transition: .5s;
	display: none;
}

.openclose:checked  ~ .open-div{
	padding: 1em;
	height: auto;
	opacity: 1;
	display: block;
}

/*** table ***/
.table_area{
	width:100%;
}

.table_area ul{
	width:100%;
}

.table_area ul li{
	width:20%;
	text-align:center;
}

.table_head{
	position:-webkit-sticky;
	position:sticky;
	top: 0;
	top: 85px;
	background-color: #fff;
	padding-top: 10px;
}

/*  */
input, textarea, select {
	font-size: 16px;
}
/* buy_area */
.buy_div{
	position:relative;
}
/* 透過ではなくCSSでぼかす */
.buy_div .background{
	filter: blur(2px);
}

.buy_div .background4{
	filter: blur(4px);
}

.buy_div .background8{
	filter: blur(8px);
}

.buy_div .buy_area{
	position:absolute;
	top:0;
	background-color:#FFFFFF00;
	height:100%;
}


.buy_title{
	background: linear-gradient(
	to bottom,
	transparent calc(50% - 0.5px),
	#ccc calc(50% - 0.5px),
	#ccc calc(50% + 0.5px),
	transparent calc(50% + 0.5px)
	);
}

.buy_title .title_str{
	background-color:#fff;
	width:fit-content;
	margin: 10px auto;
}

.rank{
	height:48px;
}

.rank_no{
	z-index: 2;
}

.rank span{
	font-size:48px;
	position:absolute;
	opacity: 0.5;
}

.rank1 span{
	color:GOLD;
}

.rank2 span{
	color:SILVER;
}

.rank3 span{
	color:BROWN;
}

.sns_area{
	border: 1px solid #ccc;
	padding: 5px 10px;
	border-radius: 5px;

}

.sns_area.fav{
	background-color:#DCBEE6;
	font-weight:bold;

}

.sns_area.nologin{

}

.buy_btn_area{
	border: 1px solid #ccc;
	border-radius:5px;
	padding:20px;
}

.author_area{
	border:1px solid #ccc;
	border-radius:0.25rem;
	padding:10px;
}

.position_badge{
	border-radius: 14px;
	background-color: #F5EFF7;
	padding: 5px 10px;
}

.item_badge{
	border-radius: 14px;
	background-color: #F5EFF7;
	padding: 5px 10px;
}

.course_card{
	border:1px solid #ccc;
	border-radius:5px;
	padding:10px;
}

.new_icon{
	margin-right:10px;
}

.new_icon span{
	font-size:36px;
}

.limit_icon{
	color:#fff;
	background-color:#DE3D3D;
	border-radius:5px;
	padding:5px;
}

.limit_icon span{
	font-size:18px;
}

.question{
	position:relative;
	margin-left:20px;
}
.question:before {
	content:  "Q.";
	position:absolute;
	left:-20px;
	top:0;
}

.anser{
	position:relative;
	margin-left:20px;
}

.anser:before {
	content:  "A.";
	position:absolute;
	left:-20px;
	top:0;
}

.ec_item_card{
	border:1px solid #ddd;
	border-radius:10px;
	padding:10px;
}

.strikethrough{
	text-decoration: line-through;
}

#faq .anser table th{
	border:1px solid #ccc;
	text-align:center;
}
#faq .anser table td{
	border:1px solid #ccc;
}

.series{
	font-size: 0.8rem;
	background-color: #333;
	color: #fff;
	border-radius: 5px 5px 0 0;
}

.mce_area h2{
	font-size: 1.4rem;
	font-weight: bold;
	color: #2c3e50;
	padding: 0.75rem 0.3em;
	border-top: 3px solid #A488C0;
	border-bottom: 1px solid #e0e0e0;
	line-height: 1.4;
	margin: 1.5rem 0;
	background-color: #f8f9fa;
	letter-spacing: 0.05em;
}

.mce_area h3{
	font-size: 1.2rem;
	color: #333333;
	padding: 0.5em 0.75em;
	border-left: 6px solid #A488C0;
	border-bottom: 2px solid #eeeeee;
	background-color: #f8f9fa;
	margin: 1.5em 0 1em;
}

.mce_area h4{
	font-size: 1.0rem;
	color: #2c3e50;
	border-bottom: 2px dotted #A488C0;
	padding: 0.3em;
	margin: 1.2em 0 0.8em;
	background-color: #f8f9fa;
}

.mce_area table{
	margin:1em 0;
}

.mce_area table th
,.mce_area table td{
	padding:0.3em;
}

.mce_area ul
,.mce_area ol{
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-start: 0px;
	padding-inline-start: 1.5em;
}

.mce_area ul li
,.mce_area ol ul li{
	list-style: disc;
}

.mce_area ul ul li{
	list-style: circle;
}

.mce_area ol li
,.mce_area ul ol li{
	list-style: decimal;
}