@charset "utf-8";

/*##################################################
	RESET
##################################################*/

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
	display: block;
}

body {
	line-height: 1;
	font-size: 16px;
}

ol, ul{
	list-style: none;
}

blockquote, q{
	quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after{
	content: '';
	content: none;
}

table{
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	vertical-align: top;
}




/*##################################################
	BASE
##################################################*/

body{
	color: #492f58;
	font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	background: #ffee3a;
}

img {
	width: 100%;
	height: auto;
}

a:hover {
	opacity: 0.7;
}

#header {
	width: 100%;
	margin: 0 auto;
	padding: 30px 0;
	overflow: hidden;
}

h1 {
	width: 100%;
	max-width: 350px;
	margin: 0 auto 30px;
	padding: 0;
}

@media screen and (max-width: 636px) {
	#header {
		padding: 15px 0 0;
	}

	h1 {
		width: 50%;
		margin: 0 auto 15px;
	}
}

h1 a img {
	width: 100%;
	height: auto;
}

nav {
	background: #ffffff;
}

button {
	margin: 0;
	padding: 0;
	outline: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	vertical-align: middle;
	text-align: inherit;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.btn {
	/* ボタンの配置位置  */
	position: fixed;
	top: 15px;
	right: 15px;
	/* 最前面に */
	z-index: 30;
	/* ボタンの大きさ  */
	width: 36px;
	height: 36px;
}

/***** 真ん中のバーガー線 *****/
.btn-line {
	display: block;
	/* バーガー線の位置基準として設定 */
	position: relative;
	/* 線の長さと高さ */
	width: 100%;
	height: 4px;
	/* バーガー線の色 */
	background-color: #492f58;
	transition: .2s;
}
/***** 上下のバーガー線 *****/
.btn-line::before , .btn-line::after {
	content: "";
	/* 基準線と同じ大きさと色 */
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #492f58;
	transition: .5s;
}
.btn-line::before {
	/* 上の線の位置 */
	transform: translateY(-14px);
}
.btn-line::after {
	/* 下の線の位置 */
	transform: translateY(14px);
}
/***** メニューオープン時 *****/
.btn-line.open {
	/* 真ん中の線を透明に */
	background-color: transparent;
}
.btn-line.open::before , .btn-line.open::after {
	content: "";
	background-color: #492f58;
	transition: .2s;
}
.btn-line.open::before {
	/* 上の線を傾ける */
	transform: rotate(45deg);
}
.btn-line.open::after {
	/* 上の線を傾ける */
	transform: rotate(-45deg);
}
/**************** ここまで、ハンバーガーボタンのスタイリング ****************/
/**************** 以下、メニューのスタイリング ****************/

.global_nav {
	/* メニューを縦に */
	display: flex;
	flex-direction: column;
	position: fixed;
	/* メニューの位置マイナス指定で画面外に */
	right: -65%;
	width: 65%;
	height: 100vh;
	background-color: rgba(255, 255, 255, 1);
	color: #492f58;
	transition: .3s;
	padding: 5rem 0;
}

.global_nav li {
	/* メニューテキスト位置をリスト内中心に */
	display: flex;
	align-items: center;
	width: 100%;
	height: auto;
	padding: 1rem;
	border-bottom: 1px dashed #492f58;
}

.global_nav li:first-child {
	border-top: 1px dashed #492f58;
}

.global_nav li:hover {
	background-color: rgba(255, 255, 255, .5);
	color: #333;
	cursor: pointer;
	transition: .3s;
}

.global_nav li.bnr-sp {
	border-bottom: none;
	margin: 0;
}

.global_nav li.bnr-sp:first-child {
	margin-top: 15px;
}

@media screen and (max-width: 636px) {
	.global_nav li.bnr-sp a {
		padding: 0;
	}
}



/***** メニューオープン時位置0にして画面内に *****/
.global_nav.open {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 20;
}
/* 600px以上はハンバーガーボタン非表示、ヘッダー固定 */
@media screen and (min-width: 637px) {
	.btn {
		display: none;
	}

	.global_nav {
		/* メニューを横に */
		display: flex;
		flex-direction: row;
		position: relative;
		justify-content: center;
		top: 0;
		right: 0;
		width: 100%;
		max-width: 700px;
		height: 70px;
		margin: 0 auto;
		padding: 0;
		border-bottom: none;
	}

	.global_nav li {
		justify-content: center;
		padding: 0;
		border-bottom: none;
	}

	.global_nav li:first-child {
		border-top: none;
	}

	.global_nav li.bnr-sp {
		display: none;
	}
}

/*nav {
	background: #ffffff;
	padding: 0px;
}

nav ul.global_nav {
	width: 600px;
	margin: 0 auto;
	padding: 10px;
	display: flex;
}

nav ul.global_nav li {
	width: 200px;
	height: 50px;
	text-align: center;
	line-height: 50px;
}*/

nav ul.global_nav li a {
	padding: 15px;
	color: #492f58;
	font-size: 17px;
	font-weight: bold;
	text-decoration: none;
}

@media screen and (max-width: 636px) {
	nav ul.global_nav li a {
		width: 100%;
		display: block;
	}
}

nav ul.global_nav li:hover {
	opacity: 0.7;
}

#wrapper::after {
	margin: 0 auto;
	padding: 0;
	content: '';
	background: url(../images/foot-bg.png);
	background-repeat: repeat-x;
	display: block;
	width: 100%;
	height: 95px;
}

.content {
	width: 100%;
	max-width: 900px;
	margin: 0 auto 60px;
	padding: 30px;
	background: #ffffff;
	border-radius: 20px;
	clear: both;
}

@media screen and (max-width: 929px) {
	.content {
		width: 95%;
		margin: 0 auto 30px;
	}
}

@media screen and (max-width: 636px) {
	.content {
		padding: 15px 30px;
		width: 95%;
	}
}

h2.head {
	margin: 0 auto 30px;
	padding: 0;
	font-size: 36px;
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 636px) {
	h2.head {
		font-size: 24px;
		margin: 0 auto 15px;
	}
}

#footer {
	margin: 0;
	padding: 30px;
	background: #bcdb79;
}

#footer p.copy {
	color: #ffffff;
	text-align: center;
}

@media screen and (min-width: 637px) {
	img.pc {
		display: inherit;
	}
	img.sp {
		display: none;
	}

}

@media screen and (max-width: 636px) {
	img.pc {
		display: none;
	}
	img.sp {
		display: inherit;
	}

}



/*##################################################
	INDEX
##################################################*/

.top-img {
	position: relative;
}

.slider {
	clear: both;
	width: 100%;
/*
	height: auto;
	max-height: 500px;
	margin: 0 auto;
	padding: 0 0 35%;
*/
}

.slider img {
	width: 100%;
}

.flag {
	width: 100%;
	height: 114px;
	position: absolute;
	z-index: 10;
	background-image: url(../images/flag-bg2.png);
	background-repeat: repeat-x;
	background-position: top center;
	background-size: contain;
}

.content.index {
	background: none;
	box-shadow: none;
	border-radius: 0;
}

#news {
	width: 100%;
	max-width: 840px;
	margin: 0 auto 60px;
	padding: 0;
}

#news h2 {
	margin: 0 auto 20px;
	padding: 0;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 636px) {
	#news h2 {
		font-size: 18px;
	}
}

#news ul {
	margin: 0;
	padding: 30px;
	border-top: 1px solid #492f58;
	border-bottom: 1px solid #492f58;
}

@media screen and (max-width: 636px) {
	#news ul {
		padding: 15px;
		font-size: 12px;
	}
}

#news ul li {
	margin: 0 0 20px;
	padding-bottom: 3px;
	border-bottom: 1px dashed #492f58;
}

@media screen and (max-width: 636px) {
	#news ul li {
		line-height: 1.25em;
	}
}

#news ul li:last-child {
	margin: 0;
}

#news ul li span {
	margin-right: 30px;
}

@media screen and (max-width: 636px) {
	#news ul li span {
		margin-right: 15px;
	}
}

@media screen and (max-width: 636px) {
	#news ul li span {
		margin-right: 15px;
	}
}

#flyer {
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	padding: 30px;
	background: #ffee3a;
	position: relative;
	/*bottom: 130px;	チラシリンク有の場合使用*/
	bottom: 100px;
	border-radius: 20px 20px 0 0;
	margin-bottom: -130px;
}

@media screen and (max-width: 636px) {
	#flyer {
		padding: 15px 30px;
		bottom: 0;
		margin-bottom: 0;
	}
}

#flyer div {
	width: 100%;
	max-width: 877px;
	/*margin: 0 auto 20px;	※受付期間表示時に使用*/
	margin: 0 auto 15px;
	padding: 0;
}

#flyer div img {
	width: 100%;
	height: auto;
}

#flyer p {
	margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 400px;
    height: 60px;
    background: #f47234;
    border-radius: 30px;
    text-align: center;
    line-height: 60px;
}

@media screen and (max-width: 636px) {
	#flyer p {
		max-width: 250px;
		height: 40px;
	    border-radius: 20px;
	    line-height: 40px;
	}
}

#flyer p a {
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	position: relative;
	left: 15px;
}

@media screen and (max-width: 636px) {
	#flyer p a {
		font-size: 16px;
	}
}

#flyer p a::after {
	content: ">";
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
	position: relative;
	left: 40px;
}

@media screen and (max-width: 636px) {
	#flyer p a::after {
		font-size: 16px;
	}
}

.index section {
	margin: 0 auto 60px;
	padding: 45px 60px;
	background: #ffffff;
	border-radius: 20px;
}

@media screen and (max-width: 636px) {
	.index section {
		margin: 0 auto 30px;
		padding: 15px;
	}
}

.index section h2 {
	margin: 0 auto 30px;
	padding: 0;
	color: #492f58;
	font-size: 34px;
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 636px) {
	.index section h2 {
		font-size: 20px;
		margin: 0 auto 15px;
	}
}

.index section p {
	font-size: 20px;
	font-weight: bold;
	line-height: 27px;
}

@media screen and (max-width: 636px) {
	.index section p {
		font-size: 14px;
		line-height: 18px;
	}
}

.index section div.link {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 320px;
    height: 60px;
    background: #f47234;
    border-radius: 30px;
    text-align: center;
    line-height: 60px;
}

.index section div.link a {
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

.index section div.link a::after {
	content: ">";
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
}

.index section div.link a:hover {
	opacity: 0.7;
}

.index section.about div.sec-cnt {
	width: 100%;
	display: flex;
}

@media screen and (max-width: 636px) {
	.index section.about div.sec-cnt {
		display: inherit;
	}
}

.index section.about div.sec-img {
	margin-right: 30px;
	flex-shrink: 0;
}

@media screen and (max-width: 636px) {
	.index section.about div.sec-img {
		margin: 0 auto 15px;
		width: 75%;
	}
}

.index section.about div.sec-txt p {
	margin-bottom: 30px;
}

@media screen and (max-width: 636px) {
	.index section.about div.sec-txt p {
		margin-bottom: 15px;
	}
}

.index section.about div.sec-txt p:last-child {
	margin-bottom: 0;
}

.index section.lesson {
	padding: 45px 60px 0;
}

@media screen and (max-width: 636px) {
	.index section.lesson {
		padding: 15px 15px 0;
	}
}

.index section.lesson p {
	text-align: center;
	margin-bottom: 30px;
}

.index section.lesson div.lesson-img {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
}

.index section.lesson div.link {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 320px;
    height: 60px;
    background: #f47234;
    border-radius: 30px;
    text-align: center;
    line-height: 60px;
    position: relative;
    top: 30px;
}

@media screen and (max-width: 636px) {
	.index section.lesson div.link {
	    max-width: 200px;
		padding: 0;
	    height: 40px;
	    border-radius: 20px;
	    line-height: 40px;
	    top: 15px;
	}
}

.index section.lesson div.link a {
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	position: relative;
	left: 15px;
}

@media screen and (max-width: 636px) {
	.index section.lesson div.link a {
		font-size: 16px;
	}
}

.index section.lesson div.link a::after {
	content: ">";
	color: #ffffff;
	font-size: 20px;
	font-weight: bold;
	position: relative;
	left: 40px;
	border: 2px;
}

@media screen and (max-width: 636px) {
	.index section.lesson div.link a::after {
	    left: 20px;
	}
}

.index section.apply div.app-img {
	width: 100%;
	max-width: 601px;
	margin: 0 auto 30px;
	padding: 15px 30px;
	border: 1px solid #492f58;
	box-sizing: border-box;
}

@media screen and (max-width: 636px) {
	.index section.apply div.app-img {
	}
}

.index section.apply div.app-img img {
    width: 100%;
    height: auto;
}

.index section.apply div.note {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
	padding: 30px;
	background: #f1f1f1;
	border-radius: 20px;
}

@media screen and (max-width: 636px) {
	.index section.apply div.note {
		padding: 25px 20px;
	}
}

.index section.apply div.note h3 {
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: bold;
}

@media screen and (max-width: 636px) {
	.index section.apply div.note h3 {
		font-size: 18px;
		text-align: center;
	}
}

.index section.apply div.note ul {
	padding: 0 15px;
}

@media screen and (max-width: 636px) {
	.index section.apply div.note ul {
		font-size: 12px;
		padding: 0;
	}
}

.index section.apply div.note ul li {
	margin-bottom: 15px;
	text-align: justify;
}

.index section.apply div.note ul li:last-child {
	margin-bottom: 0;
}

ul.notes {
	width: 830px;
	margin: 0 auto;
	padding: 0;
}

ul.notes li {
	font-size: 18px;
	margin: 0 0 15px;
	padding: 0;
}

ul.notes li.red {
	color: #e4006e;
}

ul.notes li span {
	color: #e4006e;
	font-weight: bold;
}

.index section.movie .yutbe {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.index section.movie .yutbe iframe {
	width: 100%;
	height: 100%;
}

.index section.banner {
	margin: 0 auto 30px;
	padding: 0;
	background: none;
	border-radius: 00;
}

@media screen and (max-width: 636px) {
	.index section.banner {
		margin: 0 auto 30px;
	}
}

.index section.banner .sns {
	margin: 0 auto 15px;
}

.index section.banner .sns:last-child {
	margin: 0 auto;
}

.index section.apply p.link {
	background: #b74c96;
}

.index section.apply p.link {
	background: #b74c96;
}

.index section.apply .flow {
	width: 100%;
	max-width: 700px;
	margin: 0 auto 30px;
	padding: 0;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	overflow: hidden;
}

.index section.apply .flow li {
	width: 100%;
	max-width: 220px;
}

.index section.apply .flow li:last-child {
	margin-right: 0;
}



/*##################################################
	LESSON
##################################################*/

p.click {
	color: #cc0000;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	text-decoration: underline;
	margin: 0 auto 15px;
	padding: 0;
}

p.click .sp {
	display: none;
}

@media screen and (max-width: 636px) {
	p.click .pc {
		display: none;
	}

	p.click .sp {
		display: inline;
	}
}

.cp-ae_grp {
	display: flex;
	width: 100%;
	max-width: 570px;
	margin: 0 auto;
}

@media screen and (max-width: 636px) {
	.cp-ae_grp {
		display: inherit;
	}
}

p.coupon-ae, p.coupon-ae2 {
	font-size: 0.85em;
	font-weight: bold;
	text-align: center;
	margin: 0 auto 15px;
}

p.coupon-ae img {
	width: 40px;
	height: 20px;
	margin-right: 0.25em;
	vertical-align: middle;
}

p.coupon-ae2 img {
	width: 20px;
	height: 20px;
	margin-right: 0.25em;
	vertical-align: middle;
}

.corona {
	margin: 0 auto 30px;
	padding: 30px 0;
	border: 2px solid #999999;
	border-radius: 20px;
}

.corona h3 {
	margin: 0 auto 10px;
	padding: 0;
	font-size: 24px;
	text-align: center;
}

.corona .antivirus {
	display: flex;
	margin: 0 auto;
	justify-content: space-around;
}

p.type {
	margin: 0 auto 30px;
	padding: 0;
	font-size: 18px;
	text-align: center;
	line-height: 24px;
}

p.type span {
	font-size: 24px;
	font-weight: bold;	
}

@media screen and (max-width: 636px) {
	p.type {
		font-size: 14px;
	}

	p.type span {
		font-size: 18px;
	}
}

ul.category {
	width: 100%;
	max-width: 950px;
	margin: 0 auto 30px;
	padding: 0;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 636px) {
	ul.category {
		flex-wrap: wrap;
	}
}

ul.category li {
	width: 100%;
	max-width: 175px;
    margin: 0 5px;
	padding: 10px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	border-radius: 10px;
	box-sizing: border-box;
	cursor: pointer;
}

@media screen and (max-width: 636px) {
	ul.category li {
		width: 30%;
		margin: 0 0 0.5rem;
		font-size: 15px;
	}
}

ul.category li:hover {

}

ul.category li.cat00 {
	background: #999;
}

ul.category li.cat01 {
	background: #44b034;
}

ul.category li.cat02 {
	background: #e85282;
}

ul.category li.cat03 {
	background: #0091d7;
}

ul.category li.cat04 {
	background: #b74c97;
}

ul.category li.cat05 {
	background: #ef8200;
}

ul#lesson-list {
	width: 100%;
	max-width: 850px;
	margin: 0 auto;
	padding: 0;
	display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 911px) {
	ul#lesson-list {
		max-width: 560px;
	}
}

@media screen and (max-width: 636px) {
	ul#lesson-list {
	}
}

ul#lesson-list::after {
	content: "";
	display: block;
	width: 33.3%;
}

@media screen and (max-width: 636px) {
	ul#lesson-list::after {
		width: 50%;
	}
}

ul#lesson-list li {
	margin: 0 auto 10px;
	padding: 0;
	max-width: 270px;
}

@media screen and (max-width: 636px) {
	ul#lesson-list li {
		width: 47.5%;
		max-width: 270px;
	}
}

ul#lesson-list li.mix {
	display: none;
}

.modal {
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 40;
}

.modal__bg {
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

.modal__content {
	color: #333333;
    background: #fff;
    left: 50%;
    padding: 20px 30px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 50;
    width: 75%;
    max-width: 800px;
}

@media screen and (max-width: 636px) {
	.modal__content {
		padding: 15px 20px;
		display: inherit;
		width: 85%;
	    height: 85vh;
		overflow-y: scroll;
	}
}

.modal__content.wide {
    max-width: 100%;
}

.modal__content .title {
	color: #ffffff;
    font-size: 1.25rem;
    font-weight: bold;
    border-radius: 10px;
    margin: 0 auto 15px;
    padding: 0;
    padding-right: 3em;
    display: flex;
    align-items: center;
    position: relative;
}

@media screen and (max-width: 636px) {
	.modal__content .title {
		font-size: 1rem;
		display: flex;
		align-items: center;
		padding: 0;
		padding-right: 3em;
	}
}

.modal__content div.title span.num {
    background-color: #ffffff;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    padding: 12px 10px;
    margin-right: 0.5rem;
}

@media screen and (max-width: 636px) {
	.modal__content div.title span.num {
		font-size: 1.125rem;
		padding: 18px 10px;
	}
}

.modal__content .title.health {
    background: #44b034;
    border: 2px solid #44b034;
}

.modal__content .title.health span.num {
    color: #44b034;
}

.modal__content .title.health::after {
	content: url(../images/title-ico01.png);
	position: absolute;
	right: 0;
}

.modal__content .title.health.wine::after {
	content: url(../images/title-ico01_w.png);
	position: absolute;
	right: 0;
}

.modal__content .title.health.kenkou::after {
	content: url(../images/title-ico01_k.png);
	position: absolute;
	right: 0;
}

.modal__content .title.beauty {
    background: #e85282;
    border: 2px solid #e85282;
}

.modal__content .title.beauty span.num {
    color: #e85282;
}

.modal__content .title.beauty::after {
	content: url(../images/title-ico02.png);
	position: absolute;
	right: 0;
}

.modal__content .title.beauty.wine::after {
	content: url(../images/title-ico02_w.png);
	position: absolute;
	right: 0;
}

.modal__content .title.beauty.kenkou::after {
	content: url(../images/title-ico02_k.png);
	position: absolute;
	right: 0;
}

.modal__content .title.learn {
    background: #0091d7;
    border: 2px solid #0091d7;
}

.modal__content .title.learn span.num {
    color: #0091d7;
}

.modal__content .title.learn::after {
	content: url(../images/title-ico03.png);
	position: absolute;
	right: 0;
}

.modal__content .title.learn.wine::after {
	content: url(../images/title-ico03_w.png);
	position: absolute;
	right: 0;
}

.modal__content .title.learn.kenkou::after {
	content: url(../images/title-ico03_k.png);
	position: absolute;
	right: 0;
}

.modal__content .title.make {
    background: #b74c97;
    border: 2px solid #b74c97;
}

.modal__content .title.make span.num {
    color: #b74c97;
}

.modal__content .title.make::after {
	content: url(../images/title-ico04.png);
	position: absolute;
	right: 0;
}

.modal__content .title.make.wine::after {
	content: url(../images/title-ico04_w.png);
	position: absolute;
	right: 0;
}

.modal__content .title.make.kenkou::after {
	content: url(../images/title-ico04_k.png);
	position: absolute;
	right: 0;
}

.modal__content .title.food {
    background: #ef8200;
    border: 2px solid #ef8200;
}

.modal__content .title.food span.num {
    color: #ef8200;
}

.modal__content .title.food::after {
	content: url(../images/title-ico05.png);
	position: absolute;
	right: 0;
}

.modal__content .title.food.wine::after {
	content: url(../images/title-ico05_w.png);
	position: absolute;
	right: 0;
}

.modal__content .title.food.kenkou::after {
	content: url(../images/title-ico05_k.png);
	position: absolute;
	right: 0;
}

.modal__content .title.cp-img::before {
	content: url(../images/coupon-img.png);
	position: absolute;
	top: -12px;
	left: 1px;
}

@media screen and (max-width: 636px) {
	.modal__content .title.cp-img::before {
		left: 0;
	}
}

.modal__content .lesson-info {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}

@media screen and (max-width: 636px) {
	.modal__content .lesson-info {
		display: inherit;
	}
}

.modal__content .lesson-info .image {
	margin-right: 15px;
	flex-shrink: 0.5;
}

.modal__content .lesson-info .image.img-s {
	flex-shrink: 0.6;
}

.modal__content .lesson-info .info {
	width: 100%;
}

@media screen and (max-width: 636px) {
	.modal__content .lesson-info .image {
		margin: 0 auto 10px;
	}

	.modal__content .lesson-info .image img {
		width: 75%;
		margin: 0 auto;
		display: block;
	}
}

.modal__content .lesson-info .info .lesson-txt {
	margin-bottom: 10px;
}

.modal__content .lesson-info .info table {
	border-top: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	width: 100%;
	margin-bottom: 10px;
	font-size: 0.875rem;
}

.modal__content .lesson-info .info table th {
	color: #ffffff;
	vertical-align: middle;
}

.modal__content .lesson-info .info table th, .modal__content .lesson-info .info table td {
	vertical-align: middle;
}


.modal__content .lesson-info .info table th, .modal__content .lesson-info .info table td {
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	padding: 5px 10px;
}

.modal__content .lesson-info.health .info table th, .modal__content .store-info.health .info01b .tag, .modal__content .store-info.health .info02 li.link ul li {
	background: #44b034;
}

.modal__content .lesson-info.beauty .info table th, .modal__content .store-info.beauty .info01b .tag, .modal__content .store-info.beauty .info02 li.link ul li {
	background: #e85282;
}

.modal__content .lesson-info.learn .info table th, .modal__content .store-info.learn .info01b .tag, .modal__content .store-info.learn .info02 li.link ul li {
	background: #0091d7;
}

.modal__content .lesson-info.make .info table th, .modal__content .store-info.make .info01b .tag, .modal__content .store-info.make .info02 li.link ul li {
	background: #b74c97;
}

.modal__content .lesson-info.food .info table th, .modal__content .store-info.food .info01b .tag, .modal__content .store-info.food .info02 li.link ul li {
	background: #ef8200;
}

.modal__content .lesson-info .info table.date ul {
	display: flex;
	flex-wrap: wrap;
}

.modal__content .lesson-info .info table.date ul li.other-li {
	margin-left: 1em;
	font-weight: bold;
}

.modal__content .lesson-info .info table.date ul li:nth-child(n+1) {
	margin-bottom: 0.437rem;
}

.modal__content .lesson-info .info table.date ul li:nth-last-child(2), .modal__content .lesson-info .info table.date ul li:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 636px) {
	.modal__content .lesson-info .info table.date ul li:nth-last-child(2) {
		margin-bottom: 0.437rem;
	}
}

.modal__content .lesson-info .info table.venue a {
	margin-left: 0.25rem;
}

.modal__content .lesson-info .info table.course-info th, {
	width: 20%;
}

.modal__content .lesson-info .info table.course-info td {
	width: 30%;
}

.modal__content .store-info .info01a {
	margin-bottom: 0.5em;
	text-align: center;
}

.modal__content .store-info .info01b, .modal__content .store-info .info02 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    gap: 0.5em;
}

@media screen and (max-width: 636px) {
	.modal__content .store-info .info01b, .modal__content .store-info .info02 {
		display: inherit;
	}
}

.modal__content .store-info {
	margin-bottom: 15px;
}

.modal__content .store-info .info01b {
	margin-bottom: 0.5em;
}

.modal__content .store-info .info01b li, .modal__content .store-info .info02 li {
	margin-right: 0.5rem;
}

.modal__content .store-info .info01b li:last-child, .modal__content .store-info .info02 li:last-child {
	margin-right: 0;
}

@media screen and (max-width: 636px) {
	.modal__content .store-info .info01b li, .modal__content .store-info .info02 li {
		text-align: center;
		margin: 0 auto 5px;
	}
}

.modal__content .store-info .info01a li.name {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 0.25em;
}

.modal__content .store-info .info01a li.name span {
	font-size: 0.5em;
	vertical-align: middle;
}

@media screen and (max-width: 636px) {
	.modal__content .store-info .info01a li.name {
		font-size: 26px;
		margin-bottom: 10px;
	}
}

.modal__content .store-info .info01a li.name.sml {
	font-size: 26px;
}

.modal__content .store-info .info01a li.adrs {
	font-size: 15px;
}

.modal__content .store-info .info01b li.tag {
	color: #ffffff;
	padding: 5px 10px;
	font-size: 0.75rem;
	border-radius: 0.75rem;
}

.modal__content .store-info .info02 li.tel {
	font-size: 1.75rem;
	font-weight: bold;
}

.modal__content .store-info .info02 li.tel {
	font-size: 1.25rem;
	text-align: left;
}

@media screen and (max-width: 636px) {
	.modal__content .store-info .info02 li.tel {
		text-align: center;
	}
}

.modal__content .store-info .info02 li.tel i {
	margin-right: 0.25rem;
	font-weight: bold;
}

.modal__content .store-info .info02 li.tel span.apply {
	font-size: 1rem;
	vertical-align: middle;
}

.modal__content .store-info .info02 li.link {
}

.modal__content .store-info .info02 li.link ul {
	display: flex;
	justify-content: center;
}

.modal__content .store-info .info02 li.link ul li {
	margin: 0 0.25rem;
	padding: 5px;
    border-radius: 5px;
}

.modal__content .store-info .info02 li.link ul li i {
	color: #ffffff;
}

.modal__content .store-info .info02 li span.recep {
	margin-left: 0.5rem;
	font-weight: bold;
	text-decoration: underline;
}

.modal__content .buried {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

@media screen and (max-width: 636px) {
	.modal__content .buried {
		display: inherit;
	}
}

.modal__content .buried .ytube {
	margin-right: 15px;
}

@media screen and (max-width: 636px) {
	.modal__content .buried .ytube, .modal__content .buried .gmap {
		height: 0;
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;
		margin: 0 auto 15px;
	}

	.modal__content .buried .gmap {
		margin: 0 auto;
	}

	.modal__content .buried .ytube iframe, .modal__content .buried .gmap iframe {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
	}	
}

.modal__content p.close {
	position: absolute;
	top: 1%;
	right: 1%;
}

/*==================================================*/

.modal__content p.map {
	margin: 0 auto;
	padding: 15px;
	text-align: center;
	background: #ffee3a;
}

.modal__content p.map a {
	color: #492f58;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 10px;
}

.flyer-link {
	width: 50%;
	margin: 30px auto;
	padding: 15px;
	text-align: center;
	background: #e69439;
	border-radius: 1.5rem;
}

@media screen and (max-width: 636px) {
	.flyer-link {
		width: 75%;
		margin: 15px auto;
		padding: 10px;
		border-radius: 1.25rem;
	}
}

.flyer-link a {
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: bold;
	text-decoration: none;
}

@media screen and (max-width: 636px) {
	.flyer-link a {
		font-size: 1em;
	}
}

.calendar {
	width: 100%;
	max-width: 900px;
	margin: 30px auto 0;
	padding: 0;
}

.calendar a:hover {
	opacity: 0.7;
}

.calendar a img {
	width: 100%;
	height: auto;
}

.no_lsn {
	text-align: center;
	margin: 20% auto;
	font-size: 20px;
}



/*##################################################
	COUPON
##################################################*/

.cp-flow {
	margin: 0 auto 5%;
	padding: 2em;
	border: 4px solid #999999;
	border-radius: 10px;
}

.cp-flow h3 {
	margin-bottom: 1em;
	font-size: 1.75em;
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 636px) {
	.cp-flow h3 {
		font-size: 1.25em;
	}
}

.cp-flow .flow {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

@media screen and (max-width: 636px) {
	.cp-flow .flow {
		display: inherit;
		margin-bottom: 2em;
	}
}

/*.cp-flow .flow .flow-li::after {
	content: url(../images/flow-arrow.png);
	vertical-align: middle;
}*/

.cp-flow .flow .arrow {
	text-align: center;
	vertical-align: middle;
}

@media screen and (max-width: 636px) {
	.cp-flow .flow .arrow img {
		width: auto;
		height: auto;
		margin: 0 auto 1em;
	}
}

.cp-flow .flow .flow-li .txt {
	text-align: center;
}

@media screen and (max-width: 636px) {
	.cp-flow .flow .flow-li .img {
		text-align: center;
		margin: 0 auto;
		width: 50%;
	}

	.cp-flow .flow .flow-li .img img {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
}

.cp-flow h4 {
	margin-bottom: 0.5em;
	font-weight: bold;
}

.cp-flow .precautions {
	margin-bottom: 1em;
}

.cp-flow .precautions li {
	margin-bottom: 0.25em;
	line-height: 1.25em;
}

@media screen and (max-width: 636px) {
	.cp-flow .precautions li {
		font-size: 0.8em;
	}
}

.cp-flow .precautions li:last-child {
	margin-bottom: 0;
}

.cp-flow .precautions li span {
	color: #ff0000;
	font-weight: bold;
}

.cp-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.coupon_contents {
	flex-shrink: 0;
	width: 100%;
	max-width: 410px;
	margin: 0 auto 15px;
	padding: 0;
	border: 3px solid #0096b4;
	background: #ffffff;
}

@media screen and (max-width: 636px) {
	.coupon_contents {
	}
}

.cp-head {
	margin: 0 auto 1em;
	font-size: 1.75em;
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 636px) {
	.cp-head {
		font-size: 1.25em;
	}
}

.cp-info {
	display: flex;
}

@media screen and (max-width: 636px) {
	.cp-info {
	}
}

.cp-info .cp-img {
	width: 125px;
    height: 125px;
}

@media screen and (max-width: 636px) {
	.cp-info .cp-img {
		width: 100px;
		height: 100px;
	}
}

@media screen and (max-width: 469px) {
	.cp-info .cp-img.narrow {
		height: 115px;
	}
}

.cp-info .cp-img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.cp-info .cp-txt {
	flex: 1;
}

.cp-info .cp-txt .shop-name {
	width: 100%;
	color: #ffffff;
	font-size: 1.1em;
	font-weight: bold;
	background: #0096b4;
	padding: 0.25em 0.5em;
}

@media screen and (max-width: 636px) {
	.cp-info .cp-txt .shop-name {
		font-size: 0.9em;
		line-height: 1.1em;
	}
}

.cp-info .cp-txt .shop-name span {
	font-size: 0.75em;
}

.cp-info .cp-txt .cp-content {
	display: grid;
	place-content: center;
	place-items: center;
	font-size: 0.9em;
	height: 98px;
}

@media screen and (max-width: 636px) {
	.cp-info .cp-txt .cp-content {
		font-size: 0.8em;
		height: 77px;
	}
}

.cp-info .cp-txt .cp-content p {
	flex: 1;
	font-weight: bold;
	text-align: center;
	line-height: 1.3em;
}

@media screen and (max-width: 636px) {
	.cp-info .cp-txt .cp-content p {
		font-size: 0.95em;
	}
}

.cp-info .cp-txt .cp-content span {
	color: #e60064;
	font-size: 1.3em;
}

@media screen and (max-width: 636px) {
	.cp-info .cp-txt .cp-content span {
		font-size: 1.15em;
	}
}

.cp-info .cp-txt .cp-content span span.sml2 {
	font-size: 0.8em;
}

.cp-info .cp-txt .cp-content span.sml {
	color: #333333;
	font-size: 0.8em;
	font-weight: inherit;
}

@media screen and (max-width: 636px) {
	.cp-info .cp-txt .cp-content span.sml {
		font-size: 0.95em;
		line-height: 0.95em;
	}
}

.cp-info .cp-txt .cp-content span span.sml3 {
	font-size: 0.75em;
}

.cp-info .cp-txt .cp-content span.sml4 {
	color: #333333;
	font-size: 0.6em;
	font-weight: inherit;
	display: block;
	line-height: 1.5em;
	padding: 0.5em 1em 0;
}

.coupon_contents .shop-info {
	margin: 0;
	padding: 1em;
	background: #e4f4f6;
	font-size: 0.9em;
}

@media screen and (max-width: 636px) {
	.coupon_contents .shop-info {
		padding: 0.5em;
	}
}

.coupon_contents .shop-info.qr {
	display: flex;
	align-items: center;
}

.coupon_contents .shop-info.qr .qrcode {
	flex-shrink: 0;
}

.coupon_contents .shop-info.qr .qrcode img {
	vertical-align: top;
}

.shop-info ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1em;
}

@media screen and (max-width: 636px) {
	.shop-info ul {
		font-size: 0.85em;
	}
}

.shop-info ul li::before {
	vertical-align: middle;
	margin-right: 0.25em;
}

.shop-info ul li.tel::before {
	content: url(../images/cp-icon01.png);
}

.shop-info ul li.hol::before {
	content: url(../images/cp-icon02.png);
}

.shop-info ul li.adrs::before {
	content: url(../images/cp-icon03.png);
}

.shop-info ul li.time::before {
	content: url(../images/cp-icon04.png);
}

.shop-info ul li.line::before {
	content: url(../images/cp-icon_line.png);
}




/*##################################################
	CONTACT
##################################################*/

p.c-text {
	margin: 0 auto 30px;
	padding: 0;
	font-size: 18px;
	line-height: 26px;
	text-align: center;
}

@media screen and (max-width: 636px) {
	p.c-text {
		font-size: 14px;
		line-height: 20px;
		margin: 0 auto 15px;
		text-align: left;
	}
	p.c-text br {
		display: none;
	}
}

#ContactInput h3.thanks {
	width: 100%;
	max-width: 420px;
    margin: 0 auto 30px;
    padding: 0;
}

#ContactInput table, #ContactConfirm table {
	width: 100%;
    max-width: 800px;
    margin: 0 auto 30px;
    padding: 0;
    color: #444;
    font-size: 14px;
}

@media screen and (max-width: 636px) {
	#ContactInput table, #ContactConfirm table {
		font-size: 12px;
	}
}

#ContactInput table tr, #ContactConfirm table tr {
    border-top: 1px dashed #ccc;
}

#ContactInput table tr.ln2, #ContactConfirm table tr.ln2 {
    background: #f0f0f0;
}

#ContactInput table tr:last-child, #ContactConfirm table tr:last-child {
    border-bottom: 1px dashed #ccc;
}

#ContactInput table tr#Cnt1 td br {
	display: none;
}

@media screen and (max-width: 636px) {
	#ContactInput table tr#Cnt1 td br {
		display: inherit;
	}

	#ContactInput table tr#Cnt1 td input {
		margin-bottom: 5px;
	}
}

#ContactInput table th, #ContactConfirm table th {
    padding: 15px 0 15px 30px;
    text-align: left;
    vertical-align: middle;
}

@media screen and (max-width: 636px) {
	#ContactInput table th, #ContactConfirm table th {
	    padding: 10px;
	}
}

#ContactInput table th span.ns {
    color: #e4006e;
    font-size: 14px;
    margin-left: 2px;
}

#ContactInput table th span.an, #ContactConfirm table th span.an {
    color: #bbb;
    font-size: 12px;
}

@media screen and (max-width: 636px) {
	#ContactInput table th span.an, #ContactConfirm table th span.an {
		font-size: 10px;
	}
}

#ContactInput table td, #ContactConfirm table td {
    padding: 15px 0 15px 30px;
    border-left: 3px solid #492f58;
    vertical-align: middle;
}

@media screen and (max-width: 636px) {
	#ContactInput table td, #ContactConfirm table td {
		padding: 10px 0 10px 10px;
	}
}

#ContactInput table td span {
	font-size: 12px;
	margin-left: 1em;
}

@media screen and (max-width: 636px) {
	#ContactInput table td span {
		font-size: 10px;
		margin-left: 0.5em;
	}

	#ContactInput table td span.cnt1 {
		margin-left: 0;
	}
}

#ContactInput p#confirm, #ContactConfirm p#confirm {
	width: 100%;
	max-width: 800px;
    margin: 0 auto 45px;
    padding: 0;
    text-align: center;
}

#ContactInput p#notice {
	width: 100%;
	max-width: 800px;
    margin: 0 auto 5px;
    padding: 0;
    text-align: right;
    color: #666;
    font-size: 12px;
}

@media screen and (max-width: 636px) {
	#ContactInput p#notice {
		font-size: 10px;
	}
}

#ContactInput td .ex {
    color: #666;
    font-size: 12px;
    margin-left: 10px;
}

#ContactInput p#notice span {
    color: #e4006e;
    font-weight: bold;
}

#ContactConfirm {
    display: none;
}

#ContactInput input.ze {
    ime-mode: active;
}

#ContactInput input.ha {
    ime-mode: inactive;
}

#ContactInput input.yornam {
	width: 50%;
}

@media screen and (max-width: 636px) {
	#ContactInput input.yornam {
		width: 60%;
	}
}

#ContactInput input.comnam {
	width: 90%;
}

#ContactInput input.telnum {
	width: 50%;
}

@media screen and (max-width: 636px) {
	#ContactInput input.telnum {
		width: 58%;
	}
}

#ContactInput input.maladr {
	width: 80%;
}

#ContactInput textarea {
	width: 80%;
	height: 150px;
}