@charset "utf-8";

/* -------------------------------------------------
	#fv
------------------------------------------------- */

#fv {
	position: relative;
}
#fv .fv-slider {
	position: relative;
	z-index: 2;
}
#fv .fv-slider::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%; /* SPは40%など適宜メディアクエリで調整 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1; /* スライダー画像より上 */
}
#fv h1 {
	width: calc(600 var(--pcp));
	position: absolute;
	left: 50%;
	top: calc(240 var(--pcv));
	transform: translateX(-50%);
	z-index: 4;
}
#fv h1 img {
	width: 100%;
}
#fv .copy {
	width: calc(300 var(--pcp));
	position: absolute;
	left: 50%;
	top: calc(500 var(--pcv));
	transform: translateX(-50%);
	z-index: 4;
}

#fv .slick-dots {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 0 16px;
	position: absolute;
	left: 0;
	bottom: 15px;
	z-index: 4;
}
#fv .slick-dots li {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	overflow: hidden;
}
#fv .slick-dots li.slick-active {
	background: #F40000;
}
#fv .slick-dots li button {
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.drop-shadow-img {
  filter: drop-shadow(2px 4px 5px rgba(20, 60, 50, 0.9));
}


@media screen and (max-width:767px) {
	#fv h1 {
		width: calc(264 var(--spp));
		left: calc(25 var(--spp));
		top: calc(39 var(--spv));
		transform: translateX(0);
	}
	#fv .copy {
		width: calc(280 var(--spp));
		top: calc(475 var(--spv));
	}
	
	#fv .slick-dots {
		bottom: 24px;
	}
	#fv::after {
        height: 40%; /* SPでは文字が重なる範囲が広いため少し高さを出すのが定石です */
  }
}

/* -------------------------------------------------
	#concept
------------------------------------------------- */

#concept {
	margin-top: 2px;
	/*padding: 195px 0 calc(250 var(--pcv));*/
	padding: 280px 0 calc(250 var(--pcv));
	text-align: center;
}
#concept .headline .small {
	display: block;
	font-size: 20px;
	letter-spacing: 0.17em;
	color: #ed4728;
	font-family: 'Albert Sans';
	font-weight: 700;
}
#concept .headline .large {
	margin-top: 0.9em;
	font-size: 36px;
	font-weight: bold;
	display: block;
}
#concept .lead {
	margin-top: 40px;
}
#concept .lead p {
	font-size: 20px;
	line-height: 1.5;
}
#concept .lead p + p {
	margin-top: 1.5em;
}
#concept .col2 {
	margin-top: 53px;
}
#concept .col2 li {
	border: solid 1px #B9B9B9;
	border-radius: 23px;
	overflow: hidden;
	box-shadow: 2px 6px 6px 0 rgba(0,0,0,0.2);
}
#concept .col2 .pic img {
	width: 100%;
}
#concept .col2 .texts {
	padding: 29px 4% 38px;
	background: #fff;
}
#concept .col2 .texts .title {
	font-size: 28px;
	font-weight: bold;
}
#concept .col2 .texts .desc {
	margin-top: 1.3em;
	font-size: 16px;
	line-height: calc(22 / 16);
	text-align: left;
}

@media print, screen and (min-width:768px) {
	#concept {
		background: url("../img/bg_concept.jpg") no-repeat center top / cover;
	}
	#concept .col2 {
		display: flex;
		justify-content: space-between;
	}
	#concept .col2 li {
		width: calc(585 / 1194 * 100%);
	}
}

@media screen and (max-width:767px) {
	#concept {
		padding: calc(596 var(--spv)) 0 calc(180 var(--spv));
		background: url("../img/bg_concept_sp.jpg") no-repeat center top / cover;
	}
	#concept .sp-group1 {
		width: 100%;
		position: absolute;
		top: 278vw;
		transform: translateY(-50%);
	}
	#concept .headline .small {
		font-size: calc(20 var(--spv));
	}
	#concept .headline .large {
		margin-top: 0.6em;
		font-size: calc(26 var(--spv));
		line-height: calc(38 / 26);
	}
	#concept .lead {
		margin-top: calc(20 var(--spv));
	}
	#concept .lead p {
		font-size: calc(16 var(--spv));
		line-height: calc(25 / 16);
	}
	#concept .col2 {
		margin-top: 0;
	}
	#concept .col2 li {
		border-radius: 17px;
	}
	#concept .col2 li + li {
		margin-top: 37px;
	}
	#concept .col2 .texts {
		padding: 22px 6% 15px;
	}
	#concept .col2 .texts .title {
		font-size: 20px;
	}
	#concept .col2 .texts .desc {
		margin-top: 1.1em;
	}
}

@media screen and (max-width:767px) and (min-width:450px) {
	#concept .sp-group1 {
		top: 266vw;
		transform: translateY(-50%);
	}
}

/* -------------------------------------------------
	#feature
------------------------------------------------- */

#feature {
	margin-top: -9vw;
	position: relative;
	z-index: 4;
}
#feature::before {
	width: 100%;
	display: block;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
}
#feature .bg-color {
	padding-bottom: 116px;
	background: #A74130;
}
#feature .features {
	margin-top: 45px;
}
#feature .features li {
	border-radius: 25px;
	overflow: hidden;
	background: #fff;
	box-shadow: 2px 3px 6px 0 rgba(0,0,0,0.3);
}
#feature .features .texts {
	padding: 30px 8% 33px;
}
#feature .features .texts .title {
	padding-left: 39px;
	font-size: 18px;
	line-height: calc(30 / 18);
	font-weight: bold;
	position: relative;
}
#feature .features .texts .title::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0.7em;
	transform: translateY(-50%);
}
#feature .features li:nth-child(1) .texts .title::before {
	width: 26px;
	height: 32px;
	background: url("../../shared/img/ico_01.svg") no-repeat left center / 100% auto;
}
#feature .features li:nth-child(2) .texts .title::before {
	width: 31px;
	height: 23px;
	background: url("../../shared/img/ico_02.svg") no-repeat left center / 100% auto;
}
#feature .features li:nth-child(3) .texts .title::before {
	width: 31px;
	height: 27px;
	background: url("../../shared/img/ico_03.svg") no-repeat left center / 100% auto;
}
#feature .features li:nth-child(4) .texts .title::before {
	width: 30px;
	height: 30px;
	background: url("../../shared/img/ico_04.svg") no-repeat left center / 100% auto;
}

#feature .features .texts .desc {
	margin-top: 0.8em;
	font-size: 15px;
	line-height: calc(25 / 15);
}

@media print, screen and (min-width:768px) {
	#feature {
		padding-top: 7vw;
	}
	#feature::before {
		height: 7vw;
		background: url("../../shared/img/bg_02.svg") no-repeat center top / 100% auto;
	}
	#feature .bg-color {
		padding-top: 20px;
	}
	#feature .features {
		display: flex;
		justify-content: space-between;
	}
	#feature .features li {
/*		width: calc(324 / 1368 * 100%);*/
width: calc(356 / 1120 * 100%);
	}
}

@media screen and (max-width:767px) {
	#feature {
		margin-top: -26vw;
		padding-top: 29.6vw;
	}
	#feature::before {
		height: 29.6vw;
		background: url("../../shared/img/bg_02_sp.svg") no-repeat center top / 100% auto;
	}
	#feature .bg-color {
		padding-bottom: 100px;
	}
	#feature .features {
		margin-top: 26px;
	}
	#feature .features li {
		border-radius: calc(20 var(--spv));
	}
	#feature .features li + li {
		margin-top: 22px;
	}
}

/* -------------------------------------------------
	#beginner
------------------------------------------------- */

#beginner {
	border-top: solid 3px #fff;
}
#beginner ul li {
	padding: 30px 10px 23px;
	border: solid 2px #B9B9B9;
	border-radius: 20px;
	background: #fff;
	text-align: center;
	box-shadow: 0 0 16px 0 rgba(0,0,0,0.16);
}
#beginner ul li .text1 {
	margin-bottom: 0.8em;
	color: #ACABAB;
	font-size: 16px;
	font-family: 'Albert Sans';
	font-weight: 700;
	letter-spacing: 0.17em;
}
#beginner ul li .text2 {
	font-size: 20px;
	font-weight: bold;
}
#beginner ul li .text3 {
	margin-top: 1em;
	font-size: 15px;
	line-height: calc(25 / 15);
}
#beginner ul li .btn-type1 {
	margin-top: 22px;
}

#beginner .btn-type2 {
	margin-top: 70px;
}
#beginner .h-type1 {
	margin-top: 50px!important;
}

@media print, screen and (min-width:768px) {
	#beginner {
		padding-bottom: 115px;
		background: url("../../shared/img/bg_04.png") no-repeat fixed center center / cover;
	}
	#beginner ul {
		max-width: 1020px;
		width: 96%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	#beginner ul li {
		/*width: calc(324 / 1020 * 100%);*/
		width: calc(496 / 1020 * 100%);
	}
}

@media screen and (max-width:767px) {
	#beginner {
		padding-bottom: 101px;
		background: url("../../shared/img/bg_04_sp.png") no-repeat fixed center center / cover;
		border-top-width: 2px;
	}
	#beginner ul li {
		padding: 30px 10px;
	}
	#beginner ul li + li {
		margin-top: 22px;
	}
	#beginner ul li .btn-type1 {
		margin-top: 16px;
	}
	
	#beginner .btn-type2 {
		margin-top: 54px;
	}
}

/* -------------------------------------------------
	#pertners
------------------------------------------------- */

#partners {
	padding-bottom: 57px;
}
#partners ul {
	margin-top: 67px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px 20px;
}
#partners ul .actimori img {
	width: 237px;
}

@media print, screen and (min-width:768px) {
	#partners ul li a:hover {
		opacity: 0.7;
	}
}

@media screen and (max-width:767px) {
	#partners {
		padding-bottom: 37px;
	}
	#partners ul {
		margin-top: 58px;
	}
	#partners ul .actimori img {
		width: 162px;
	}
}