/*
繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ 1譁�ｭ励★縺､
 */
.smooth {
  clip-path: inset(0 100% 0 0);
  transition: 4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
}
.smooth.is-active {
  clip-path: inset(0);
}

/*
繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ 繝輔ぉ繝ｼ繝峨い繝��
 */
.matrix .bg-wrap,
.matrix .bg-wrap .inn {/*
  display: block;*/
}

.matrix .bg-wrap {
  overflow: hidden;
  opacity: 0;
}

.matrix .bg-wrap + .bg-wrap {/*
  margin-top: 10px;*/
}

.matrix .bg-wrap .inn {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 4s cubic-bezier(0.22, 1, 0.36, 1);
}

.matrix.is-active .bg-wrap {
  opacity: 1;
}

.matrix.is-active .bg-wrap .inn {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}
 
/*
 *縺顔衍繧峨○繧ｿ繝�
*/
.cp_tab *, .cp_tab *:before, .cp_tab *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_tab {
	margin: 0 auto;
	position: relative;
	height: auto;/*
	max-height: 720px;
	min-height: 500px;*/
	display: block;
}
@media (max-width: 480px) {
.cp_tab {
	margin-top: 30px;
}
}
.cp_tab input[type='radio'] {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	outline: none;
	background: none;
	-webkit-appearance: none;
	        appearance: none;
	display: none;
}
.cp_tab .cp_tabpanel {
	display: none;
}
.cp_tab > input:first-child:checked ~ .cp_tabpanels > .cp_tabpanel:first-child,
.cp_tab > input:nth-child(3):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(2),
.cp_tab > input:nth-child(5):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(3),
.cp_tab > input:nth-child(7):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(4),
.cp_tab > input:nth-child(9):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(5),
.cp_tab > input:nth-child(11):checked ~ .cp_tabpanels > .cp_tabpanel:nth-child(6) {
	display: block;
}
.cp_tab .cp_tabpanels {
	position: relative;
	top: -354px;
	left: 200px;/*10em*/
	display: block;/*
	height: 720px;*/
	width: calc(100% - 200px);
    background-image: url("../images/top-bg.jpg");
	border-radius: 30px;
	padding: 60px;/*0.5em 1em*/
	min-height: 500px;
	margin-bottom: -354px;/*30px*/
}
.cp_tab > input + label {
	position: relative;
	z-index: 100;
	top: 30px;
	left: 1px;
	display: block;
	width: 200px;
	margin-bottom: 10px;
	padding: 15px 0 15px 15px;
	cursor: pointer;
	border-right: 0;
	border-radius: 30px 0 0 30px;
	font-family: "Kosugi Maru", sans-serif;
}
.cp_tab > input + label:nth-of-type(1) {
	border-top: 1px solid #67c8b2;
	border-bottom: 1px solid #67c8b2;
	border-left: 1px solid #67c8b2;
	color: #67c8b2;
}
.cp_tab > input + label:nth-of-type(2) {
	border-top: 1px solid #328072;
	border-bottom: 1px solid #328072;
	border-left: 1px solid #328072;
	color: #328072;
}
.cp_tab > input + label:nth-of-type(3) {
	border-top: 1px solid #f75f60;
	border-bottom: 1px solid #f75f60;
	border-left: 1px solid #f75f60;
	color: #f75f60;
}
.cp_tab > input + label:nth-of-type(4) {
	border-top: 1px solid #ecb935;
	border-bottom: 1px solid #ecb935;
	border-left: 1px solid #ecb935;
	color: #ecb935;
}
.cp_tab > input + label:last-of-type {
	margin-bottom: 100px;
}
.cp_tab > label:hover,
.cp_tab > input:focus + label {
}
.cp_tab > input:checked + label {
	color: #fff;
	width: 220px;
	border-radius: 30px 30px 30px 30px;
}

@media only screen and (max-width: 767px) {
.cp_tab .cp_tabpanels {
	left: 120px;
	width: calc(100% - 120px);
	padding: 30px;
}
.cp_tab > input + label {
	width: 120px;
}
.cp_tab > input:checked + label {
	width: 140px;
}
}
/*
繧ｨ繝｡繝ｩ繝ｫ繝�#67c8b2
阮�＞豌ｴ濶ｲ#ebf7f5
鮟�牡#ecb935
襍､#f75f60
邱�#328072
 */
.cp_tab > input:checked + label:nth-of-type(1) {
	border-right: 1px solid #67c8b2;
	background: #67c8b2;
}
.cp_tab > input:checked + label:nth-of-type(2) {
	border-right: 1px solid #328072;
	background: #328072;
}
.cp_tab > input:checked + label:nth-of-type(3) {
	border-right: 1px solid #f75f60;
	background: #f75f60;
}
.cp_tab > input:checked + label:nth-of-type(4) {
	border-right: 1px solid #ecb935;
	background: #ecb935;
}
@media (max-width: 480px) {
	.cp_tab {
		width: 100%;
	}
	.cp_tab > input + label {
	font-size: 0.7em;
	width: 80px;
		letter-spacing: 0;
	}
	.cp_tab .cp_tabpanels {
	left: 80px;
	min-width: 7em;
	width: calc(100% - 80px);
	}
	.cp_tab > input:checked + label {
	width: 100px;
}
}