#content_wrap {position: relative;width: min(88%,var(--width-xl));margin: 0 auto;color: var(--info);font-family: var(--font-family);}
#content_wrap * { box-sizing: border-box; }
#content_wrap img { display: block; max-width: 100%; }
#content_wrap a { text-decoration: none; }
#content_wrap .course_item { position: relative; }
#course_detail {display: grid;grid-template-columns: minmax(0,1.25fr) minmax(400px,1.15fr);gap: 20px;align-items: start;margin-bottom: 80px;background: #fffefb;border: 1px solid rgba(63,86,63,.12);box-shadow: 0 30px 82px rgba(31,41,36,.08);border-radius: 50px;}
#course_detail #imglist { min-width: 0; }
#course_detail #imglist .img_box { position: relative; overflow: hidden; border-radius: 30px; background: var(--secondary); box-shadow: 0 34px 86px rgba(31,41,36,.13); border: 1px solid rgba(63,86,63,.1); }
#course_detail #imglist .img_box .item {position: relative;overflow: hidden;background: linear-gradient(135deg,rgba(248,244,236,.9) 0%,rgba(239,231,216,.68) 100%);height: 100%;aspect-ratio: 4/3.2;}
#course_detail #imglist .img_box .item a { position: relative; display: block; width: 100%; height: 100%; }
#course_detail #imglist .img_box .item a::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg,rgba(37,48,42,0) 48%,rgba(37,48,42,.16) 100%); opacity: .85; pointer-events: none; }
#course_detail #imglist .img_box .img_contain { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.2s cubic-bezier(.22,1,.36,1),filter .45s ease; }
#course_detail #imglist .img_box .item:hover .img_contain { transform: scale(1.035); filter: brightness(1.02) saturate(1.02); }
#course_detail #imglist .img_nav { position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-top: 18px; display: none; }
#course_detail #imglist .img_nav .item { position: relative; overflow: hidden; aspect-ratio: 1/1; border-radius: 20px; background: var(--secondary); border: 1px solid rgba(63,86,63,.12); cursor: pointer; opacity: .62; transition: all .35s cubic-bezier(.22,1,.36,1); }
#course_detail #imglist .img_nav .item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .35s ease; pointer-events: none; }
#course_detail #imglist .img_nav .item:hover { opacity: 1; transform: translateY(-4px); box-shadow: 0 16px 34px rgba(31,41,36,.1); }
#course_detail #imglist .img_nav .slick-current .item,#course_detail #imglist .img_nav .item.slick-current { opacity: 1; }
#course_detail #imglist .img_nav .slick-current .item::after,#course_detail #imglist .img_nav .item.slick-current::after { border-color: var(--third); }
#course_detail #imglist .img_nav .img_contain { width: 100%; height: 100%; object-fit: cover; }
#course_info {position: relative;padding: 30px 40px 0;}
#course_info .tit_box { position: relative; z-index: 2; }
#course_info .title {margin-bottom: 18px;color: var(--primary);font-size: clamp(24px,3vw,28px);font-weight: 700;line-height: 1.55;letter-spacing: .1em;}
#course_info .cat { display: inline-flex; align-items: center; min-height: 38px; margin: 0 0 34px; padding: 8px 18px; border-radius: 999px; background: rgba(255,255,255,.78); border: 1px solid rgba(185,154,99,.26); color: var(--coffee); font-family: var(--font-sans); font-size: 14px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; display: none; }
#course_info article { position: relative; margin: 0; color: rgba(37,48,42,.72); font-size: 17px; font-weight: 500; line-height: 2.18; letter-spacing: .065em; font-family: var(--font-sans); }
#course_info article p { margin: 0; }
#course_info article p + p { margin-top: 18px; }
#course_info article { position: relative; display: block; max-height: 90px; overflow: hidden; margin: 0; padding-bottom: 0; font-family: var(--font-family); font-size: 17px; font-weight: 500; line-height: 2.05; letter-spacing: .055em; transition: max-height .55s cubic-bezier(.22,1,.36,1),color .35s ease; font-family: var(--font-sans); color: rgb(130 130 130/72%); }
#course_info article::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(180deg,rgb(255 255 255/0%) 0%,rgb(255 254 251) 58%,rgb(255 254 251) 100%); pointer-events: none; transition: opacity .35s ease; }
#course_info article.is_open { max-height: 1200px; color: rgba(37,48,42,.72); }
#course_info article.is_open::after { opacity: 0; }
#course_info .course_article_more { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; color: var(--third); font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; cursor: pointer; transition: color .35s ease,transform .35s ease; }
#course_info .course_article_more::after { content: ""; width: 15px; height: 15px; background: currentColor; clip-path: path("M14.5 6.5c-1.829 0-3.495-1.666-3.495-3.495v-.75h-1.5v.75c0 1.33.583 2.578 1.499 3.495H1.75v1.5h9.254c-.916.917-1.499 2.165-1.499 3.495v.75h1.5v-.75c0-1.829 1.666-3.495 3.495-3.495h.75v-1.5h-.75Z"); transition: transform .35s ease; }
#course_info .course_article_more:hover { color: var(--primary); transform: translateY(-2px); }
#course_info .course_article_more:hover::after { transform: translateX(4px); }
#course_info article.is_open + .course_article_more::after { transform: rotate(-90deg); }
@media (max-width:768px) {
  #course_info article { max-height: 148px; font-size: 16px; line-height: 1.95; }
  #course_info article::after { height: 64px; }
  #course_info article.is_open { max-height: 1200px; }
  #course_info .course_article_more { font-size: 16px; }
}

#course_info .price_box {position: relative;z-index: 2;margin-top: 20px;padding-top: 20px;border-top: 1px solid rgba(63,86,63,.12);display: flex;align-items: center;}
#course_info .price_box ins { display: inline-flex; align-items: baseline; color: var(--primary); font-family: var(--font-sans); font-size: clamp(18px,3vw,26px); font-weight: 600; line-height: 1; letter-spacing: .04em; text-decoration: none; }
#course_info .price_box span { content: "課程費用"; margin-right: 18px; color: var(--third); font-family: var(--font-family); font-size: 16px; font-weight: 500; letter-spacing: .12em; font-family: var(--font-sans); }
#course_info #quantity_box { position: relative; z-index: 2; margin-top: 34px; }
#course_info #buy_btns { display: flex; align-items: center; gap: 16px; }
#course_info #btn_buy {position: relative;width: 170px;height: 55px;padding: 0 34px;border: 0;border-radius: 999px;background: var(--primary);color: var(--white);font-family: var(--font-sans);font-size: 15px;font-weight: 600;letter-spacing: .12em;cursor: pointer;box-shadow: 0 8px 26px rgba(63,86,63,.22);transition: all .42s cubic-bezier(.22,1,.36,1);}
#course_info #btn_buy::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 12px; background: currentColor; clip-path: path("M17 8.25c-2.073 0-3.962-1.889-3.962-3.962v-.85h-1.7v.85c0 1.508.661 2.922 1.699 3.962H2.55v1.7h10.487c-1.038 1.039-1.699 2.453-1.699 3.962v.85h1.7v-.85c0-2.073 1.889-3.962 3.962-3.962h.85v-1.7H17Z"); vertical-align: middle; transition: transform .35s ease; }
#course_info #btn_buy:hover { transform: translateY(-4px); background: #334a35; box-shadow: 0 24px 52px rgba(63,86,63,.28); }
#course_info #btn_buy:hover::after { transform: translateX(5px); }
#content_wrap .course_video_box { position: relative; margin: 30px 0; }
#content_wrap .course_video_box iframe, #content_wrap .course_video_box video {width: 100%;height: 100%;aspect-ratio: 4 / 3;border-radius: 42px;overflow: hidden;box-shadow: 0 28px 76px rgba(31,41,36,.1);}
#content_wrap .course_value_box { position: relative; margin: 30px 0; }
#content_wrap .course_value_list {position: relative;display: grid;grid-template-columns: 1fr;gap: 24px;margin: 0;padding: 0;list-style: none;}
#content_wrap .course_value_item { position: relative; min-height: 220px; padding: 38px 34px; border-radius: 32px; background: rgba(255,255,255,.96); border: 1px solid rgba(63,86,63,.12); box-shadow: 0 20px 58px rgba(31,41,36,.065); overflow: hidden; transition: transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1),border-color .35s ease; }
#content_wrap .course_value_item::before { content: ""; position: absolute; right: -64px; bottom: -64px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle,rgba(220,232,229,.4) 0%,rgba(220,232,229,0) 70%); pointer-events: none; }
#content_wrap .course_value_item:hover { transform: translateY(-7px); border-color: rgba(63,86,63,.24); box-shadow: 0 28px 72px rgba(31,41,36,.1); }
#content_wrap .course_value_title { position: relative; margin: 0 0 18px; color: var(--primary); font-size: 23px; font-weight: 800; line-height: 1.55; letter-spacing: .12em; }
#content_wrap .course_value_title::after { content: ""; display: block; width: 42px; height: 1px; margin-top: 16px; background: var(--gradient-gold); }
#content_wrap .course_value_desc { position: relative; color: rgba(37,48,42,.68); font-size: 16px; font-weight: 500; line-height: 2; letter-spacing: .06em; }
 #content_wrap .course_value_desc iframe{
    width: 100%;
    height: 100%;
    aspect-ratio: 5 / 3;
}
@media (max-width:1180px) {
  #content_wrap .course_value_list {}
}
@media (max-width:768px) {
  #content_wrap .course_video_box {margin: 30px 0;}
  #content_wrap .course_video_box iframe,#content_wrap .course_video_box video {border-radius: 20px;}
  #content_wrap .course_value_box {margin: 30px 0;}
  #content_wrap .course_value_list { grid-template-columns: 1fr; }
  #content_wrap .course_value_item { min-height: auto; padding: 32px 28px; border-radius: 28px; }
  #content_wrap .course_value_title { font-size: 21px; letter-spacing: .08em; }
  #content_wrap .course_value_desc { font-size: 15px; line-height: 1.9; }
}
#content_wrap > div > ul { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 70px 0; padding: 0; list-style: none; align-items: center; }
#content_wrap > div > ul li:hover { border-color: rgba(63,86,63,.24); box-shadow: 0 28px 72px rgba(31,41,36,.1); }
#content_wrap > div > ul li p { position: relative; margin: 0 0 18px; color: var(--primary); font-size: 23px; font-weight: 800; line-height: 1.55; letter-spacing: .12em; }
#content_wrap > div > ul li p::after { content: ""; display: block; width: 42px; height: 1px; margin-top: 16px; background: var(--gradient-gold); }
#content_wrap > div > ul li div { position: relative; color: rgba(37,48,42,.68); font-size: 16px; font-weight: 500; line-height: 2; letter-spacing: .06em; }
#content_wrap .view_share { position: relative; margin: 72px 0 0; padding: 30px 34px; border-radius: 28px; background: rgba(248,244,236,.78); border: 1px solid rgba(63,86,63,.1); }
#content_wrap #community { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
#content_wrap #community .title { margin: 0 10px 0 0; color: var(--third); font-family: var(--font-sans); font-size: 13px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
#course_tabs {position: relative;margin-top: 30px;padding: 30px;border-radius: 50px;background: linear-gradient(135deg,rgba(248,244,236,.86) 0%,rgba(255,255,255,.98) 100%);border: 1px solid rgba(63,86,63,.12);box-shadow: 0 30px 82px rgba(31,41,36,.075);overflow: hidden;}
#course_tabs .tabs { position: relative; z-index: 2; display: flex; gap: 10px; margin: 0px 0 30px; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; align-items: center; }
#course_tabs .tabs::-webkit-scrollbar { display: none; }
#course_tabs .tabs li { position: relative; flex: 0 0 auto; padding: 10px 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.86); border: 1px solid rgba(63,86,63,.12); color: rgba(37,48,42,.66); font-family: var(--font-sans); font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; cursor: pointer; transition: all .35s cubic-bezier(.22,1,.36,1); }
#course_tabs .tabs li:hover,#course_tabs .tabs li.active { color: var(--white); background: var(--primary); border-color: var(--primary); }
#course_tabs #tabs_container { position: relative; z-index: 2; }
#course_tabs .tabs_content {display: none;padding: 30px 30px;border-radius: 34px;background: rgba(255,255,255,.92);border: 1px solid rgba(63,86,63,.1);color: rgba(37,48,42,.72);font-size: 17px;font-weight: 500;line-height: 2.18;letter-spacing: .065em;box-shadow: inset 0 0 0 1px rgba(255,255,255,.62);}
#course_tabs .tabs_content.active { display: block; animation: courseTabFade .5s cubic-bezier(.22,1,.36,1) both; }
#course_tabs .tabs_content h2,#course_tabs .tabs_content h3,#course_tabs .tabs_content h4 {margin: 0px 0 12px;color: var(--primary);font-weight: 800;line-height: 1.55;letter-spacing: .12em;}
#course_tabs .tabs_content p { margin: 0; }
#course_tabs .tabs_content p + p { margin-top: 18px; }
#course_tabs .tabs_content ul,#course_tabs .tabs_content ol { margin: 24px 0; }
#course_tabs .tabs_content li {}
@keyframes courseTabFade {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (max-width:1180px) {
	#content_wrap { width: min(99%,var(--width-xl)); padding: 20px 0 130px; }
	#course_detail { grid-template-columns: 1fr; gap: 30px; }
	#course_info { padding: 0 30px 60px; }
	#course_detail #imglist { position: relative; top: auto; }
	#content_wrap > div > ul { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:768px) {
	#course_detail { gap: 38px; margin-bottom: 50px; }
	#course_detail #imglist .img_box { border-radius: 30px 30px 30px 78px; }
	#course_detail #imglist .img_nav { grid-template-columns: repeat(4,1fr); gap: 10px; }
	#course_detail #imglist .img_nav .item { border-radius: 15px; }
	#course_info .title { letter-spacing: .08em; }
	#course_info article { font-size: 16px; line-height: 2.05; }
	#course_info .price_box { margin-top: 34px; padding-top: 28px; }
	#course_info .price_box ins { font-size: 32px; }
	#course_info .price_box ins::before { display: block; margin: 0 0 10px; font-size: 15px; }
	#content_wrap > div > ul { grid-template-columns: 1fr; margin: 52px 0; }
	#content_wrap > div > ul li { min-height: auto; padding: 32px 28px; border-radius: 28px; }
	#course_tabs { margin-top: 20px; padding: 34px 24px; border-radius: 34px; }
	#course_tabs .tabs { margin-bottom: 28px; }
	#course_tabs .tabs li { min-width: 118px; height: 46px; padding: 0 18px; font-size: 14px; }
	#course_tabs .tabs_content { padding: 34px 26px; border-radius: 26px; font-size: 16px; line-height: 2.05; }
}
@media (max-width:480px) {
	#course_detail #imglist .img_nav { grid-template-columns: repeat(3,1fr); }
	#course_info .cat { font-size: 13px; }
	#course_info #btn_buy { height: 56px; font-size: 16px; }
	#content_wrap #community { display: grid; grid-template-columns: 1fr; align-items: start; }
	#course_tabs .tabs { gap: 10px; }
}