@charset "utf-8";

/*-----------------------------------------------------------
タブ切り替え
-----------------------------------------------------------*/

.tab-group {
    max-width: 1240px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 6rem;
  	position: relative;
    margin: auto;
}

.tab {
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	max-width: 58rem;
	width: 100%;
    padding: 1.2rem 1.5rem 1.3rem;
	transition: .3s;
	cursor: pointer;
}

.tab:hover, .tab.active {
    opacity: .7;
    transition: .3s;
}

.tab p {
	font-size: 4rem;
	letter-spacing: 0;
	line-height: 1.2;
}

.tab p span {
	font-family: var(--base-font-family);
	font-size: 1.8rem;
	letter-spacing: 0.05em;
	line-height: 1.2;
}


.panel-group {
    margin: 6rem auto 0;
}

.panel {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.panel.show {
  opacity: 1;
  visibility: visible;
  height: auto;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 768px) {

/*-----------------------------------------------------------
タブ切り替え
-----------------------------------------------------------*/

.tab-group {
    grid-template-columns: repeat(1,1fr);
    gap: 3rem;
}

.tab {
	margin: 0 auto;
	padding: 1rem 1.5rem;
}


}
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 576px) {

/*-----------------------------------------------------------
タブ切り替え
-----------------------------------------------------------*/

.tab p {
	font-size: 3rem;
}

.tab p span {
	font-size: 1.5rem;
}


}
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */