@charset "utf-8";

/*----------------------------------------
	Course Common
-----------------------------------------*/
#course h2 {
	clear:both;
	margin-top:20px;
	margin-bottom:20px;
}
#course #mainArea {
	padding:0;
}

#course section {
	zoom:1;
}
#course section:after {
	content:"";
	display:block;
	clear:both;
}
#course #mainArea-contents {
	position:relative;
}


/*	メインイメージ
-----------------------------------------*/
.main-image {
	position:relative;
	padding:10px 10px 0;
}
.main-image > img {
	border-radius:20px;
}

/*	メインコンテンツ
-----------------------------------------*/
.main-contents {
	padding:0 20px 2.0rem;
}
@media screen and (max-width:640px) {
.main-contents {
	padding:0 10px 2.0rem;
}
}

/*	サブコンテンツ
-----------------------------------------*/
.sub-contents {
	padding:2.0rem 50px 3.5rem;
}
@media screen and (max-width:640px) {
.sub-contents {
	padding:2.0rem 10px;
}
}

/*	タイトル
-----------------------------------------*/
.course-title {
	text-align:center;
	padding-top:20px;
	padding-bottom:10px;
}
.title1 {
	max-width:480px;
	margin:0 auto;
}

.title2 {
	position:absolute;
	bottom:20px;
	max-width:480px;
	margin:0 auto;
}

@media screen and (max-width:640px) {
.course-title {
	display:block;
}
.title1 {
	width:75%;
}
}



/*	Point
-----------------------------------------*/
#course .point {
	position:relative;
	color:#603e26;
}
.point-title {
	position:relative;
	display:flex;
	justify-content:flex-start;
	align-items:flex-end;
	gap:20px;
	padding-left:40px;
	z-index:1; 
}
@media screen and (max-width:640px) {
.point-title {
	padding-left:0px;
}
}
.point-title img {
	display:block;
	width:164px;
	height:auto;
	margin-bottom:-10px; 
}
.point h4 {
	font-family:"Zen Maru Gothic", sans-serif;
	font-weight:500;
	font-size:30px;
	text-align:left;
	line-height:1.2;
	margin:0 0 40px;
}
.point h4 span {
	display:inline-block;
}
.point .point-body {
	position:relative;
	background-color:#fbdfe5;
	padding:20px;
}
.point .point-catch {
	font-family:"Zen Maru Gothic", sans-serif;
	font-weight:500;
	font-size:2.6rem;
	line-height:1;
	margin-top:0;
	margin-bottom:0;
}
.point .point-catch span {
	display:inline-block;
	background-color:#fff;
	padding:2px 4px 3px;
	margin-bottom:10px;
}
.point-content {
	display:flex;
	gap:20px;
	align-items:flex-end; 
}
@media screen and (max-width:640px) {
.point-content {
	display:block;
}
}
.point-content img {
	display:block;
	width:149px;
	height:auto;
	margin:0 auto;
}
.point .note {
	font-size:1.3rem;
	margin-top:0;
	margin-bottom:0;
}


/*	Flow
-----------------------------------------*/
.flow {
	padding:2.0rem 0;
	color:#603e26;
}
.flow-title {
	font-family:"Zen Maru Gothic", sans-serif;
	font-weight:500;
	font-size:2.4rem;
	text-align:center;
}
.flow-title span {
	display:inline-block;
}
.flow-title .sup {
	font-size:0.7em;
	vertical-align:super;
}
.flow .underline {
	display:inline;
	background:linear-gradient(transparent 70%, #ffeb3b 0%); /* 70%の位置から黄色 (#ffeb3b) の線にする */
	padding:0 2px; /* 左右や上下の余白微調整 */
}
.flow .note {
	font-size:1.3rem;
	text-align:right;
	margin-top:0;
	margin-bottom:0;
}

/*	Button
-----------------------------------------*/
#course .button a {
	font-weight:bold;
	color:#d4525a;
	background-color:#ff9;
	border:1px solid #d4525a;
	padding:15px 0;
	margin:4px 0;
	transition:all 0.2s ease-out;
}
#course .button a:hover {
	color:#fff;
	background-color:#d4525a;
	border:1px solid #d4525a;
}
#course .button a::after {
	background-color:#d4525a;
	transition:all 0.2s ease-out;
}
#course .button a:hover::after {
	background-color:#fff
}