@charset "utf-8";

/*
 * File       : main.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.2.0
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) LAYOUT
 * 02) VISUAL
 * 03) COURSE
 * 04) CLINIC
 * 05) COLUMN
 */

 

/* **************************************** *
 * LAYOUT
 * **************************************** */
body.home .main-container { padding-top: 94rem; }

.main-section { margin-top: 120rem; }

.main-section__head { margin-bottom: 48rem; }
.main-section__title { color: var(--wp--preset--color--black); }
.main-section__desc { margin-top: 8rem; color: var(--wp--preset--color--gray-600); }

.main-section__more { margin-top: 48rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 8rem; font-size: 0; }



/* **************************************** *
 * VISUAL
 * **************************************** */
.main-visual { height: 600rem; }
.main-visual__item { width: 100%; height: 100%; position: relative; background: var(--wp--preset--color--jt-primary); overflow: hidden; }

.main-visual__wrap { max-width: 1500rem; height: 100%; margin: 0 auto; position: relative; }

.main-visual__content { height: 100%; padding-top: 176rem; padding-right: calc(50% + 100rem); }
.main-visual__title { color: var(--wp--preset--color--white); }
.main-visual__desc { margin-top: 16rem; color: var(--wp--preset--color--white); }
.main-visual__content .jt-btn__basic { margin-top: 40rem; }
.main-visual__bg { width: 50%; height: 100%; position: absolute; top: 0; right: 0; background: var(--wp--preset--color--gray-200) no-repeat center center; background-size: cover; }

.main-visual .swiper-control { width: 1500rem; margin-top: 0; position: absolute; top: 113rem; left: 50%; transform: translateX(-50%); text-align: left; }
.main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet:after { background: rgba(255,255,255,0.3); }
.main-visual .swiper-control .swiper-pagination.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active:after { background: var(--wp--preset--color--white); }



/* **************************************** *
 * COURSE
 * **************************************** */
.main-course__list { display: flex; gap: 36rem; }
.main-course__list > li { width: calc( (100% - 36rem) / 2 ); border: solid var(--wp--preset--color--gray-300); border-width: 0 1px 1px; }
.main-course__thumb { width: calc(100% + 2px); position: relative; left: -1px; right: -1px; }
.main-course__thumb .jt-lazyload { padding-top: 68.73%; }
.main-course__data { padding: 48rem 40rem; }
.main-course__name { color: var(--wp--preset--color--black) }
.main-course__desc { margin-top: 4rem; color: var(--wp--preset--color--gray-700); }
.main-course__link { display: grid; grid-template-columns: repeat(1, 1fr); gap: 10rem 0; margin-top: 32rem; padding-top: 32rem; border-top: 1px solid var(--wp--preset--color--gray-200); }

.main-clinic__place-item a { box-shadow: 0 1px 0 0 currentColor; transition: box-shadow .3s; -webkit-box-decoration-break: clone; }
html.desktop .main-clinic__place-item a:hover { box-shadow: 0 2px 0 0 currentColor; }



/* **************************************** *
 * CLINIC
 * **************************************** */
.main-clinic__place { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36rem; margin-top: 48rem; position: relative; }
.main-clinic__place-item { padding-right: 48rem; }
.main-clinic__place-item:not(:last-child) { border-right: 1px solid var(--wp--preset--color--gray-300); }
.main-clinic__place-name { margin-bottom: 8rem; color: var(--wp--preset--color--black); }
.main-clinic__place-schedule li { padding-left: 18rem; position: relative; }
.main-clinic__place-schedule li:before { content: ''; display: block; width: 6px; height: 6px; position: absolute; top: 12rem; left: 0; background: var(--wp--preset--color--black); border: 1px solid var(--wp--preset--color--black); border-radius: 50%; box-sizing: border-box; }
.main-clinic__place-schedule li + li { margin-top: 8rem; }
.main-clinic__place-info { margin-top: 8rem; color: var(--wp--preset--color--gray-600); }

html.ios .main-clinic__place-schedule li:before { top: 13rem; }



/* **************************************** *
 * COLUMN
 * **************************************** */
.main-column .jt-slider-list-wrap .swiper-control,
.main-column .jt-slider-list-wrap.jt-slider--run .swiper-control { display: none; }