@charset "utf-8";

.fv__desc{ font-size: 15px; }

/* ------------------------------------------------------------ schedule */
#schedule{ padding: 110px 0 0; }

.tab-panel{ padding: 80px 0 0; }
.tab-group{ display: flex; align-items: stretch; gap: 10px; }
.tab{ cursor: pointer; display: flex; align-items: center; justify-content: center; width: calc(100% / 3 - 5px); height: 75px; border-width: 1px 1px 0 1px; border-style: solid; border-color: var(--main-color); font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; border-radius: 10px 10px 0 0; }
.tab.is-active{ background: var(--main-color); color: #fff; }
.tab:hover{ background: var(--main-color); color: #fff; }

.panel{ display: none; }
.panel.is-show{ display: block; }
.panel-group{ padding: 80px 40px 60px; border: 1px solid var(--main-color); }
.panel-wrap:not(:last-of-type){ padding: 0 0 75px; }
.panel-wrap .title{ padding: 0 0 20px; }

.panel.tab-A.avater:before,
.panel.tab-C.avater:before{ width: 80px; height: 137px; top: -45px; left: calc(50% - 310px); background-image: url(../images/avater/sheep-08.png); }
.panel.tab-A.avater:after{ width: 89px; height: 128px; top: -45px; left: calc(50% + 210px); background-image: url(../images/avater/cat-01.png); }
.panel.tab-B.avater:before{ width: 83px; height: 131px; top: -45px; left: calc(50% - 323px); background-image: url(../images/avater/wolf-01.png); }
.panel.tab-B.avater:after,
.panel.tab-C.avater:after{ width: 101px; height: 128px; top: -45px; left: calc(50% + 223px); background-image: url(../images/avater/squirrel-05.png); }


/* schedule */
.schedule__list{ display: flex; align-items: flex-start; flex-wrap: wrap; }
.schedule-item{ position: relative; margin-bottom: -120px; padding: 40px 40px 40px 0; width: 50%; }
.schedule-item:last-of-type{ margin-bottom: 0; }
.schedule-item__card{ position: relative; display: flex; align-items: center; gap: 10px; background: #fff; padding: 14px 14px 20px; border: 1px solid #E3E3E3; border-right: 6px solid var(--main-color); }
.schedule-item__media{ width: 231px; }
.schedule-item__media img{ width: 100%; height: auto; }
.schedule-item__content{ width: 180px; }
.schedule-item__time{ margin: 0 0 5px; font-size: 43px; color: var(--main-color); font-family: "alternate-gothic-no-3-d", sans-serif; font-weight: 400; font-style: normal; }
.schedule-item__title{ margin: 0 0 13px; font-family: 'Noto-Sans-JP-Medium'; line-height: 1.5; font-size: 15px; }
.schedule-item__text{ font-size: 14px; line-height: 1.8; font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 300; font-style: normal; }

.schedule-item::before,
.schedule-item::after{ content: ""; position: absolute; top: 47%; }
.schedule-item::before{ right: -1px; width: 1px; height: 57%; background: var(--main-color); }
.schedule-item::after{ right: -8px; width: 15px; height: 15px; border-radius: 100px; background: var(--main-color); }
.schedule-item__card:before{ position: absolute; content: ""; width: 26px; height: 21px; right: -30px; top: 50%; transform: translate(0,-50%); background: var(--main-color); clip-path: polygon(0 0, 0% 100%, 100% 50%); }

.schedule-item:nth-of-type(2n){ padding: 150px 0 40px 40px; }
.schedule-item:nth-of-type(2n)::before{ left: 0; }
.schedule-item:nth-of-type(2n)::after{ left: -7px; top: 63%; }
.schedule-item:nth-of-type(2n) .schedule-item__card{ border: 1px solid #E3E3E3; border-left: 6px solid var(--main-color); }
.schedule-item:nth-of-type(2n) .schedule-item__card:before{ left: -30px; clip-path: polygon(0 50%, 100% 100%, 100% 0); }

.schedule-item--none.schedule-item::before{ display: none; }

.panel-wrap02 .schedule-item--none{ margin-top: 40px; }


/* comment */
.schedule-note{ position: relative; padding: 25px; background: #F1F1ED; border-radius: 10px; text-align: center; }
.schedule-note__icon{ position: absolute; left: 25px; top: 50%; transform: translate(0, -50%); }
.schedule-note__text{ font-size: 17px; line-height: 1.5; }




/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
	.fv__desc{ font-size: 14px; }
	
/* ------------------------------------------------------------ schedule */
	#schedule{ overflow: hidden; padding: 0; }
	.tab-panel{ padding: 40px 0 0; }
	.tab-group{ gap: 3px; }
	.tab{ width: calc(100% / 3 - 2px); height: 45px; font-size: 11px; border-radius: 8px 8px 0 0; }
	
	.panel-group{ padding: 25px 5% 30px; }
	.panel-group .title__main{ margin: 0 0 15px; padding: 0 0 15px; font-size: 20px; }
	.panel-group .title__sub{ font-size: 16px; }
	.panel-wrap:not(:last-of-type){ padding: 0 0 50px; }
	
	.panel.tab-A.avater:before{ width: 57px; height: 100px; top: -12px; left: -39px; }
	.panel.tab-A.avater:after{ width: 67px; height: 95px; top: -12px; left: initial; right: -35px; }
	.panel.tab-B.avater:before{ width: 61px; height: 95px; top: -12px; left: -39px; }
	.panel.tab-B.avater:after{ width: 75px; height: 96px; top: -12px; left: initial; right: -45px; }
	.panel.tab-C.avater:before{ width: 57px; height: 100px; top: -12px; left: -39px; }
	.panel.tab-C.avater:after{ width: 75px; height: 96px; top: -12px; left: initial; right: -45px; }
	
	.schedule__list{ display: block; padding: 0 0 30px; }
	.schedule-item{ width: 100%; margin-bottom: 25px; padding: 0; }
	.schedule-item:last-of-type{ margin-bottom: 0; }
	.schedule-item:nth-of-type(2n){ padding: 0; }
	.schedule-item::before,
	.schedule-item::after{ display: none; }
	
	.schedule-item__card{ flex-direction: column; align-items: flex-start; gap: 12px; padding: 15px 10px; border-right: 0; border-left: 6px solid var(--main-color); }
	.schedule-item:nth-of-type(2n) .schedule-item__card{ border-left: 6px solid var(--main-color); }
	.schedule-item__card:before{ display: none; }
	.schedule-item__media{ width: 100%; }
	.schedule-item__content{ width: 100%; }
	.schedule-item__time{ font-size: 30px; margin: 0; }
	.schedule-item__title{ margin: 4px 0 10px; font-size: 14px; }
	.schedule-item__text{ font-size: 13px; line-height: 1.7; }
	
	.panel-wrap02 .schedule-item--none{ margin-top: 0; }
	
	/* comment */
	.schedule-note{ padding: 18px 14px; }
	.schedule-note__icon{ left: 12px; width: 25px; }
	.schedule-note__text{ font-size: 12px; line-height: 1.6; padding-left: 12%; text-align: left; }



}