@charset "utf-8";

.title__main{ font-family: 'Noto-Sans-JP-Bold'; }

/* ------------------------------------------------------------ lead */
#lead{ padding: 50px 0 0; }
#lead .title{ padding: 0 0 45px; }

.price-cards{ padding: 0; }


/* ------------------------------------------------------------ comparison */
#comparison{ padding: 120px 0 0; }
thead{ border: 1px solid var(--main-color); }

.price-table{ position: relative; }
.price-table__table{ width: 100%; border-collapse: collapse; table-layout: fixed; background: #fff; }

.price-table__head,
.price-table__cell{ border: 1px solid #F1F1ED; vertical-align: middle; padding: 18px; line-height: 1.5; }
.price-table__head{ height: 70px; font-size: 20px; text-align: center; border: 1px solid #F1F1ED; background: var(--main-color); color: #fff; padding: 5px; position: relative; }

.price-table__blunk{ width: 200px; }
.price-table__mark{ text-align: center; width: 90px; font-size: 15px; }
.popular{ position: relative; }
.price-table_long{ width: 250px; }

.popular{ position: relative; }
.popular__badge{ position: absolute; top: -30px; right: -1px; width: 65px; height: 65px; border-radius: 50%; background: #ffe200; display: flex; align-items: center; justify-content: center; font-size: 13px; font-family: 'Noto-Sans-JP-Regular'; color: #000; line-height: 1.1; z-index: 2; }
.price-table__rowhead{ padding: 10px; font-size: 18px; border: 1px solid #fff; background: #F1F1ED; font-family: 'Noto-Sans-JP-Medium'; width: 18%; line-height: 1.5; }

.price-table__note{ display: block; margin-top: 5px; font-size: 14px; font-family: 'Noto-Sans-JP-Regular'; }
.price-table__cell{ font-size: 22px; text-align: center; line-height: 1.8; background: #fff; }
.price-table__cell--left{ text-align: left; }
.price-table__cell--bottom{ padding: 33px 5px; }
.price-table__small-cell{ font-size: 17px; }
.price-table__shape{ font-size: 20px !important; }

.title--merit{ padding: 0 0 52px; }
.price-table--merit .popular__badge{ right: -20px; top: -44px; }
.price-table--merit .price-table__cell{ font-size: 13px; }
.price-table--merit .price-table__cell:nth-of-type(4n){ padding: 18px 10px; }

.title--support{ padding: 115px 0 55px; }
.price-table--support .price-table__rowhead{ font-family: 'Noto-Sans-JP-Regular'; }
.price-table--support .popular__badge{ top: -48px; }

.title--cost{ padding: 95px 0 100px; }
.price-table--cost .price-table__rowhead{ font-size: 22px; }
.price-table--cost .popular__badge{ top: -52px; }

.price-table__footnote{ padding: 14px 0 0; font-size: 14px; }

.title--merit.avater:before{ width: 93px; height: 141px; bottom: 40px; right: 18%; background-image: url(../images/avater/wolf-06.png); }
.title--support.avater:before{ width: 111px; height: 141px; bottom: 30px; left: 24%; background-image: url(../images/avater/squirrel-04.png); }
.title--cost.avater:before{ width: 90px; height: 153px; bottom: 60px; right: 26%; background-image: url(../images/avater/sheep-04.png); }


/* ------------------------------------------------------------ course */
#course{ padding: 90px 0 105px; }
#course .title{ padding: 0 0 45px; }

#course01 .avater:before{ width: 139px; height: 166px; bottom: 60px; left: calc(50% + 180px); background-image: url(../images/avater/squirrel-06.png); }
#course02 .avater:before{ width: 110px; height: 158px; bottom: 22px; left: calc(50% + 170px); background-image: url(../images/avater/cat-01.png); }
#course03 .avater:before{ width: 91px; height: 147px; bottom: 22px; left: calc(50% + 200px); background-image: url(../images/avater/sheep-07.png); }
#course04 .avater:before{ width: 125px; height: 165px; bottom: 53px; left: calc(50% + 180px); background-image: url(../images/avater/wolf-04.png); }

.course-item:not(:last-of-type){ padding: 0 0 115px; }
.course-title{ display: flex; align-items: center; padding: 0 0 86px; }
.course-head__pic{ width: 70%; }
.course-head__text{ width: 30%; margin: 0 5%; }
.course-head__text .popular__badge{ left: 41%; width: 77px; height: 77px; font-size: 16px; }
.course-head__sub{ position: relative; padding: 0 0 20px; font-size: 26px; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; }
.course-head__sub:before{ position: absolute; content: ""; left: 0; bottom: 0; width: 86px; height: 1px; background: var(--main-color); }
.course-head__main{ padding: 25px 0 0; font-size: min(44px,3vw); font-family: 'Noto-Sans-JP-Bold'; }

.course-body{ padding: 0 0 100px; }
.course-head,
.course-foot{ display: flex; justify-content: space-between; align-items: center; gap: 45px; padding: 0 0 70px; }
.course-head__ttl,
.course-foot__ttl{ font-size: 32px; line-height: 1.5; font-family: 'Noto-Sans-JP-Medium'; }
.course-head__lead,
.course-foot__lead{ width: calc(100% - 480px); font-size: 18px; line-height: 2; }

.course-foot{ padding: 70px 0 0; }
.course-foot__lead{ width: calc(100% - 180px); }

.course-block{ background: #F1F1ED; padding: 40px 20px; }
.course-block__ttl{ text-align: center; font-size: 27px; line-height: 1.5; font-family: 'Noto-Sans-JP-Medium'; padding: 0 0 30px; }
.course-block__row{ margin: 0 auto; display: flex; align-items: stretch; justify-content: center; gap: 20px; }
.course-card{ position: relative; background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px 5px 25px; box-sizing: border-box; text-align: center; }
.course-card__label{ font-size: 18px; line-height: 1.5; }
.course-card__label:not(:first-of-type){ padding: 10px 0 0; }
.course-card__main{ display: block; font-size: 23px; line-height: 1.4; font-family: 'Noto-Sans-JP-Bold'; }
.course-card__sub{ padding: 8px 0 0; font-size: 14px; line-height: 1.2; }
.course-card:not(:last-of-type):after{ content: "+"; position: absolute; top: 50%; right: -10px; transform: translate(50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--main-color); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 500; z-index: 2; }

.course-notes{ padding: 30px 0 60px; }
.course-notes__item{ margin: 3px 0 0; font-size: 12px; line-height: 1.5; }
.course-notes__item:first-child{ margin-top: 0; }
.course-notes__link{ color: var(--main-color); text-decoration: underline; cursor: pointer; }

.course-notes__mordal{ display: none; z-index: 10; overflow-y: scroll; position: fixed; top: 55%; left: 50%; transform: translate(-50%,-50%); width: 90%; padding: 10px; }
.overlay{ display: none; position: fixed; z-index: 9; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.5); }

.course-notes__wrap{ border: 1px solid var(--main-color); background: #fff; padding: 36px 70px 57px; box-sizing: border-box; }
.course-notes__wrap:before{ z-index: -1; right: -8px; bottom: -8px; }
.course-notes__close{ position: absolute; top: 36px; right: 30px; color: var(--main-color); font-family: 'DFPEN4'; font-size: 65px; line-height: 1; cursor: pointer; }
.course-notes__modalTitle{ position: relative; margin: 0 auto 40px; width: 85%; padding: 22px 10px; text-align: center; background: var(--main-color); color: #fff; font-size: 27px; font-family: 'Noto-Sans-JP-Medium'; }
.course-notes__modalTitle::before,
.course-notes__modalTitle::after{ content: ""; position: absolute; bottom: -55px; transform: translateY(-50%); width: 60px; height: 100%; background: var(--main-color); }
.course-notes__modalTitle::before{ left: -30px; clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 30% 50%); }
.course-notes__modalTitle::after{ right: -30px; clip-path: polygon(100% 0, 80% 50%, 100% 100%, 0 100%, 0 0); }
.course-notes__list{ }
.course-notes__row{ display: flex; justify-content: space-between; padding: 23px 0; border-bottom: 1px solid #EBEBEB; }
.course-notes__row:last-child{ border-bottom: none; padding-bottom: 0; }
.course-notes__label{ padding: 5px 0 0; width: 190px; font-size: 18px; line-height: 1.5; font-family: 'Noto-Sans-JP-Bold'; }
.course-notes__label small{ display: block; line-height: 1.3; }
.course-notes__text{ width: calc(100% - 340px); font-size: 18px; line-height: 2; font-family: 'Noto-Sans-JP-Regular'; }
.course-notes__cost{ width: 150px; font-size: 18px; line-height: 2; font-family: 'Noto-Sans-JP-Regular'; }

.course-block__row--3{ width: 600px; }
.course-block__row--3 .course-card{ width: calc(100% / 3); }
.course-block__row--4{ width: 800px; }
.course-block__row--4 .course-card{ width: calc(100% / 4); }
.course-block__row--5{ width: 1000px; }
.course-block__row--5 .course-card{ width: calc(100% / 5); }
.course-block__row--6{ }
.course-block__row--6 .course-card{ width: calc(100% / 6); }

.fs-20{ font-size: 20px; }
.fs-25{ font-size: 25px; }
.fs-15{ font-size: 15px; }

.merit{ padding: 100px 0 0; }
.merit__ttl{ margin: 0 0 34px; text-align: center; font-size: 27px; font-family: 'Noto-Sans-JP-Medium'; }
.merit__grid{ display: flex; align-items: stretch; flex-wrap: wrap; gap: 75px 30px; }
.merit-card{ width: calc(100% / 2 - 15px); }
.merit-card__head{ display: flex; align-items: center; gap: 18px; background: var(--main-color); color: #fff; padding: 25px 15px; }
.merit-card__num{ font-size: 40px; font-family: "neue-haas-grotesk-display", sans-serif; font-weight: 600; font-style: normal; }
.merit-card__headTtl{ line-height: 1.5; font-size: 24px; font-family: 'Noto-Sans-JP-Bold'; }
.merit-card__list{ margin: 31px 5% 0; }
.merit-card__item{ position: relative; padding-left: 50px; margin-bottom: 20px; font-size: 19px; line-height: 1.5; background: url("../images/common/icn_check.png") left center/28px no-repeat; }

.merit__actions{ width: 835px; margin: 100px auto 0; display: flex; align-items: center; gap: 16px; }
.merit__actions .btn{ width: calc(100% / 2); }
.merit__actions .btn__item{ width: 31px; }

.other-course{ }
.other-course__ttl{ margin: 0 0 62px; text-align: center; font-size: 27px; font-family: 'Noto-Sans-JP-Medium'; }
.other-course__grid{ display: flex; gap: 8px; }
.other-card{ position: relative; background: #F5F5F5; border-radius: 10px; width: calc(100% / 3); }
.other-card__inner{ display: flex; align-items: center; gap: 4%; padding: 15px 15px 40px; position: relative; }
.other-card__img{ width: 93px; }
.other-card__img img{ width: 100%; height: auto; }
.other-card__body{ width: calc(100% - 93px); }
.other-card__name{ margin: 0 0 15px; font-size: 22px; font-family: 'Noto-Sans-JP-Bold'; }
.other-card__desc{ }
.other-card__arrow{ position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%) rotate(45deg); width: 13px; height: 13px; border-bottom: 1px solid var(--main-color); border-right: 1px solid var(--main-color); }
.other-card .popular__badge{ position: absolute; top: -50px; right: 10px; width: 76px; height: 76px; border-radius: 50%; background: #FFEB00; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 15px; line-height: 1.4; z-index: 2; }

#course01 .course-head__lead{ width: calc(100% - 335px) }


/* ------------------------------------------------------------ option */
#option{ padding: 78px 0 110px; background: #F1F1ED; }
#option .title{ padding: 0 0 35px; }

.menu_sub{ display: block; padding: 30px 0 0; font-size: 12px; }
.menu{ display: flex; flex-direction: column; gap: 20px; }
.menu-wrap{ background:#fff; padding: 23px 50px 40px; box-sizing: border-box; }
.menu-wrap:last-of-type{ margin: 0; }

.menu-wrap__title{ padding: 0 0 16px; text-align: center; font-size: 20px; line-height:1.5; font-family: 'Noto-Sans-JP-Bold'; border-bottom: 1px solid var(--main-color); }
.menu-flex{ display: flex; align-items: stretch; padding: 34px 0 0; }
.menu-item{ display:flex; align-items:center; gap: 24px; width: calc(100% / 3); }
.menu-item__thumb{ display:block; width:103px; height:103px; object-fit:cover; }
.menu-item__body{ width: calc(100% - 103px); }
.menu-item__name{ margin:0 0 10px; line-height: 1.5; }
.menu-item__price{ font-size:24px; line-height:1.2; font-family: 'Noto-Sans-JP-Bold'; }
.menu-split{ display: flex; align-items: stretch; gap:32px; }
.menu-split .menu-wrap{ width: calc(100% / 2); }
.menu-item--wide{ width: 100%; }

.menu-addon{ text-align:center; }
/* .menu-addon:first-of-type{ width: 90px; } */
.menu-addon__name{ margin:0 0 10px; font-size:14px; line-height:1.6; color:#333; font-weight:600; }
.menu-addon__name small{ display: block; font-size: 13px; }
.menu-addon__note{ margin:0 0 10px; }
.menu-addon__price{ font-size:24px; font-family: 'Noto-Sans-JP-Bold'; }
.menu-grid{ display: grid; grid-template-columns: 1.2fr 0.7fr 1.3fr 0.8fr; align-items: center; padding: 34px 0 0; }

.menu-links{ flex-wrap: wrap; align-items: stretch; gap: 40px 45px; }
.menu-support{ width: calc(100% / 2 - 25px); text-align:center; padding: 35px 10px; background: #F1F1ED; }
.menu-support__title{ margin: 0 0 15px; font-size: 20px; font-family: 'Noto-Sans-JP-Bold'; }
.menu-support__text{ line-height: 1.5; }
.menu-support__text strong{ display: block; padding: 10px 0 0; font-size: 24px; font-family: 'Noto-Sans-JP-Bold'; }
.menu-support__btn{ width: 250px; margin: 50px auto 0; padding: 16px 10px; text-align: center; background: var(--main-color); }
.menu-support__btn a{ display: flex; align-items: center; justify-content: center; color:#fff!important; font-family: 'Noto-Sans-JP-Bold'; line-height:1; background: url(../images/common/icn_blank.svg) 20px center/ 15px no-repeat; }


/* ------------------------------------------------------------ flow */
#flow{ padding: 110px 0 0; }
#flow .title{ padding: 0 0 37px; }

.flow{ }
.flow__item{ }
.flow-wrap{ position: relative; display: flex; align-items: center; gap: 10px; }
.flow__step{ width: 115px; height: 115px; border-radius: 50%; background: var(--main-color); color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.flow__stepLabel{ font-size: 19px; font-family: "cormorant", sans-serif; font-weight: 400; font-style: normal; }
.flow__stepNum{ margin: 5px 0 0; font-size: 44px; font-family: "trajan-pro-3", serif; font-weight: 400; font-style: normal;}

.flow__item:not(:last-of-type){ margin: 0 0 50px; }
.flow__area{ width: calc(100% - 125px); position: relative; padding: 40px 50px; background: #fff; }
.flow__area:before{ z-index: -1; right: -10px; bottom: -10px; }
.flow__flex{ flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; }

.flow__body{ width: calc(100% - 350px); }
.flow__ttl{ margin: 0 0 14px; font-size: 29px; font-family: 'Noto-Sans-JP-Medium'; }
.flow__txt{ font-size: 18px; line-height: 2; }
.flow__txt small{ display: block; font-size: 14px; }
.flow__btn{ cursor: pointer; display: inline-block; position: relative; margin: 40px 0 0; padding: 0 60px 0 0; border: none; font-size: 18px; }
.flow__btn.sp{ display: none; }

.flow__img{ width: 350px; }
.flow__img img{ width: 100%; height: auto; }

.flow__modal{ display: none; margin: 70px auto 0; padding: 47px 57px 67px; background: #F8F8F8; text-align: center; }
.flow__modalTtl{ font-size: 32px; font-weight: 700; position: relative; padding-bottom: 15px; font-family: 'Noto-Sans-JP-Medium'; }
.flow__modalTtl::after{ content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 70px; height: 1px; background: var(--main-color); }
.flow__modalList{ padding: 36px 0 0; text-align: left; }
.flow__modalList li{ position: relative; padding: 0 0 0 18px; margin-bottom: 5px; line-height: 1.8; font-size: 20px; }
.flow__modalList li:last-of-type{ margin-bottom: 0; }
.flow__modalList li::before{ content: "・"; position: absolute; left: 0; top: 0; }
.flow-btn{ width: 215px; margin: 30px auto; border: 1px solid #000; background: #fff; text-align: center; padding: 16px 0; font-size: 14px; cursor: pointer; }
.flow-btn:hover{ background: #F8F8F8; }



/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
/* ------------------------------------------------------------ lead */
	#lead{ padding: 30px 0 0; }
	#lead .title{ padding: 0 0 30px; }


/* ------------------------------------------------------------ comparison */
	#comparison{ padding: 50px 0 0; }
	.title--support,
	.title--cost{ padding: 50px 0 35px; }
	
	thead{ border: none; }
	.popular__badge { width: 40px; height: 40px; font-size: 10px; }
	.price-table--support .popular__badge,
	.price-table--cost .popular__badge{ top: -27px; right: -21px; }
	
	.price-table__table { display: block; }
	.price-table__table tr { display: flex; align-items: stretch; flex-wrap: wrap; }
	.price-table__head { height: auto; font-size: 13px; width: calc(100% / 4); padding: 10px 0; display: flex; align-items: center; justify-content: center; line-height: 1.3; }
	.price-table__head--blank { display: none; }
	
	.price-table__cell { display: flex; align-items: center; justify-content: center; padding: 6px 5px; font-size: 14px; width: calc(100% / 4); line-height: 1.4; }
	.price-table__small-cell{ font-size: 11px; }
	.price-table__shape{ font-size: 13px !important; }
	
	.price-table__rowhead{ border: none; }
	.price-table__rowhead,
	.price-table--cost .price-table__rowhead { font-size: 14px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
	.price-table__note { display: inline; font-size: 10px; }

	/* meritSP */
	.price-table--meritSP{ font-family:'Noto-Sans-JP-Regular'; }
	.price-table--meritSP .popular__badge{ right: 10px; top: -10px; width: 58px; height: 58px; font-size: 13px; }
	
	.meritsp-card{ margin:0 0 40px; background:#f5f5f2; }
	.meritsp-title{ position:relative; padding:10px; background:var(--main-color); color:#fff; font-size:18px; text-align:center; }
	.meritsp-title--popular{ position:relative; }
	
	.meritsp-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
	.meritsp-table th,
	.meritsp-table td{ padding:10px; font-size:14px; line-height:1.8; vertical-align:top; }
	.meritsp-table th{ width:35%; background:#F1F1ED; border:1px solid #fff; font-size:13px; text-align:center; vertical-align:middle; }
	.meritsp-table td{ width:65%; background:#fff; border:1px solid #F1F1ED; }
	
	.meritsp-table .meritsp-center{ text-align:center; font-size:22px; }
	.meritsp-list{ font-size:13px; line-height:1.8; }

	.title--merit.avater::before { bottom: 0; right: 0; width: 61px; height: 68px; }
	.title--support.avater::before { bottom: 0; left: 1px; width: 67px; height: 68px; }
	.title--cost.avater::before { bottom: 0; right: 0; width: 61px; height: 82px; }


/* ------------------------------------------------------------ course */
	#course{ padding: 50px 0; }
	#course .title{ padding: 0 0 30px; }
	
	#course01 .avater::before { width: 83px; height: 107px; bottom: 46px; left: initial; right: 5px; }
	#course02 .avater::before { width: 75px; height: 108px; bottom: 46px; left: initial; right: 10px; }
	#course03 .avater::before { width: 66px; height: 115px; bottom: 20px; left: initial; right: 10px; }
	#course04 .avater::before { width: 87px; height: 119px; bottom: 20px; left: initial; right: 24px; }
	
	.course-item:not(:last-of-type){ padding: 0 0 70px; }
	.course-title{ flex-direction: column; align-items: flex-start; padding: 0 0 10px; gap: 30px; }
	.course-head__pic{ width: 90%; }
	.course-head__text{ width: 90%; margin: 0 auto; }
	.course-head__sub{ font-size: 20px; padding-bottom: 14px; }
	.course-head__sub:before{ width: 60px; }
	.course-head__main{ font-size: 30px; padding-top: 18px; }
	
	.course-head,
	.course-foot{ flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px 0 20px; }
	.course-head__ttl,
	.course-foot__ttl{ width: 100%; font-size: 22px; }
	.course-head__lead,
	.course-foot__lead{ width: 100%; font-size: 14px; line-height: 2; }
	
	.course-foot{ padding: 30px 0 0; }
	
	.course-body{ padding: 0 0 50px; }
	.course-block{ padding: 25px 5%; }
	.course-block__ttl{ font-size: 20px; padding-bottom: 20px; }
	.course-block__row{ flex-direction: column; gap: 20px; }
	.course-block__row--3,
	.course-block__row--4,
	.course-block__row--5,
	.course-block__row--6{ width: 100%; }
	.course-block__row--3 .course-card,
	.course-block__row--4 .course-card,
	.course-block__row--5 .course-card,
	.course-block__row--6 .course-card{ width: 100%; }
	
	.course-card:not(:last-of-type):after{ top: auto; bottom: -10px; right: 50%; transform: translate(50%, 50%); width: 40px; height: 40px; }
	.course-card__label{ font-size: 15px; }
	.course-card__main{ font-size: 20px; }
	.course-card__sub{ font-size: 12px; }

	.course-notes{ padding: 20px 0 40px; }
	.course-notes__item{ font-size: 11px; }
	.course-notes__mordal{ width: 90%; height: 85%; top: 55%; }
	.course-notes__wrap{ padding: 20px 5% 35px; }
	.course-notes__close{ top: 5px; right: 5px; font-size: 40px; }
	.course-notes__modalTitle{ font-size: 18px; margin: 30px auto 0; padding: 10px; width: 90%; }
	.course-notes__modalTitle::before, .course-notes__modalTitle::after{ width: 30px; bottom: -27px; }
	.course-notes__modalTitle::before{ left: -22px; }
	.course-notes__modalTitle::after{ right: -22px; }
	.course-notes__row{ flex-direction: column; gap: 6px; padding: 18px 0; }
	.course-notes__label{ width: 100%; font-size: 17px; }
	.course-notes__text,
	.course-notes__cost{ width: 100%; font-size: 15px; line-height: 1.8; }

	.merit{ padding: 40px 0 0; }
	.merit__ttl{ margin: 0 0 25px; font-size: 20px; }
	.merit__grid{ gap: 20px 0; }
	.merit-card{ width: 100%; }
	.merit-card__head{ padding: 12px 15px; gap: 5px; }
	.merit-card__num{ width: 50px; font-size: 30px; }
	.merit-card__headTtl{ font-size: 16px; }
	.merit-card__item{ font-size: 15px; padding-left: 30px; background-size: 19px; background-position: left 3px; }
	.merit__actions{ width: 100%; flex-direction: column; margin-top: 30px; gap: 5px; }
	.merit-card__list{ margin: 20px 0 0; }
	.merit-card__item{ margin-bottom: 13px; }
	.merit__actions .btn{ width: 100%; }
	
	.other-course__ttl{ font-size: 20px; margin-bottom: 25px; }
	.other-course__grid{ flex-direction: column; gap: 15px 0; }
	.other-card{ width: 100%; }
	.other-card__inner{ gap: 15px; padding: 20px 15px 35px; }
	.other-card__img{ width: 80px; }
	.other-card__body{ width: 100%; }
	.other-card__name{ font-size: 18px; }
	.other-card .popular__badge{ top: -20px; right: 10px; width: 60px; height: 60px; font-size: 12px; }

	#course01 .course-head__lead{ width: 100%; }
	.course-head__text .popular__badge{ top: -16px; width: 54px; height: 54px; font-size: 12px; }
	

/* ------------------------------------------------------------ option */
	#option{ padding: 50px 0; }
	
	.menu_sub{ padding: 20px 0 0; font-size: 11px; }
	.menu{ gap: 15px; }
	.menu-wrap{ padding: 20px 20px 30px; }
	.menu-wrap__title{ font-size: 16px; padding: 0 0 12px; }
	.menu-flex{ flex-direction: column; gap: 15px; padding: 24px 0 0; }
	.menu-item{ width: 100%; gap: 16px; }
	.menu-item__thumb{ width: 80px; height: 80px; }
	.menu-item__body{ width: calc(100% - 80px); }
	.menu-item__name{ margin: 0 0 5px; }
	.menu-item__price{ font-size: 20px; }
	.menu-split{ flex-direction: column; gap: 0; }
	.menu-split .menu-wrap{ width: 100%; }
	.menu-grid{ grid-template-columns: 1fr; gap: 24px; padding: 24px 0 0; text-align: center; }
	.menu-addon{ width: 100% !important; text-align: left; }
	.menu-addon__price{ font-size: 20px; }
	
	.menu-links{ }
	.menu-support{ width: 100%; padding: 20px 10px; }
	.menu-support__title{ font-size: 15px; }
	.menu-support__text strong{ padding: 8px 0 0; font-size: 20px; }
	.menu-support__btn{ width: 100%; max-width: 280px; margin-top: 20px; padding: 25px 10px; }
	.menu-support__btn a{ font-size: 14px; }


/* ------------------------------------------------------------ flow */
	#flow{ padding: 50px 0 0; }
	#flow .title{ padding: 0 0 24px; }
	
	.flow-wrap{ flex-direction: column; align-items: flex-start; gap: 0; }
	.flow__step{ width: 36%; height: 45px; border-radius: 0; flex-direction: row; gap: 10px; }
	.flow__stepLabel{ font-size: 14px; }
	.flow__stepNum{ font-size: 28px; margin: 0; }
	.flow__flex{ flex-direction: column; align-items: flex-start; gap: 24px; }
	.flow__area{ width: 100%; padding: 20px 5% 30px; }
	.flow__body{ width: 100%; }
	.flow__ttl{ font-size: 22px; margin: 0 0 10px; }
	.flow__txt{ font-size: 15px; line-height: 1.8; }
	.flow__btn{ margin: 10px 0 0; padding: 0 40px 0 0; font-size: 15px; }
	.flow__btn.sp{ display: block; }
	.flow__btn.pc{ display: none; }
	.flow__img{ width: 100%; }
	
	.flow__modal{ width: 100%; margin: 40px 0 0; padding: 30px 20px 40px; }
	.flow__modalTtl{ font-size: 22px; padding-bottom: 10px; }
	.flow__modalTtl::after{ width: 50px; }
	.flow__modalList{ padding: 24px 0 0; }
	.flow__modalList li{ font-size: 15px; line-height: 1.7; margin-bottom: 8px; }
	.flow-btn{ width: 100%; max-width: 240px; margin: 24px auto 0; padding: 14px 0; }




}