@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');



/* ---------------------------------------- 追加修正 ---------------------------------------- */

#catch_s > div > div > ul > li.btn_price > a {
    background-color: #0000;
    border: initial;
}

.slick-next.slick-arrow::after,.slick-prev.slick-arrow::after{
	display: none;
}

.voice__info-person-data {
    display: none !important;
}

/* ---------------------------------------- common ---------------------------------------- */
html {
    scroll-behavior: smooth;
}

body {
    font-size: 3vw;
    font-family: YuGothic, 游ゴシック, ＭＳ Ｐゴシック, MS P Gothic, MS-PGothic, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, arial, helvetica, clean, sans-serif;
    line-height: 1.75;
    font-feature-settings: "palt";
    letter-spacing: 0.04em;
}

a {
    text-decoration: none;
    outline: none;
    transition: all  0.3s ease;
}

a:hover {
    opacity: 0.6;
}

img {
    max-width: 100%;
}

sub {
    font-size: 60%;
}

.md {
    display: none;
}

.lg,
.pcv {
    display: none;
}

.xxl {
    display: none;
}

.sm,
.spv {
    display: block;
}

.wrapper {
    background-image: url(https://store.vaio.com/ec/img/usr/freepage/student2025/img/sp/bg.jpg);
    background-size: 100%;
}

.section {
    position: relative;
    /* overflow: hidden; */

    .section__inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 20px 58px;
        position: relative;
        z-index: 2;

        &.section__inner--merit {
            padding-left: 10px;
            padding-right: 10px;
        }

        &.section__inner--lineup {
            padding-top: 16px;
            padding-bottom: 35px;
            padding-left: 10px;
            padding-right: 10px;
        }

        &.section__inner--standard {
            padding: 58px 35px 18px;
        }

        &.section__inner--banner {
            padding: 60px 20px 58px;
        }
    }

    .section__title {
        font-size: 20px;
        position: relative;
        font-weight: bold;
        text-align: center;
        line-height: 1.3;
        font-family: vdl-penletter, sans-serif;

        &.section__title--lineup {
            color: #fff;
            font-size: 8vw;
        }

        &.section__title--worries {
            font-size: 8vw;
        }
    }

    .section__title-sub {
        font-size: 5vw;
    }

    .section__description {
        font-size: 3.1vw;
        margin-top: 20px;
        line-height: 1.8;
        text-align: center;

        &.section__description--white-stroke {
            text-shadow: 2px 2px 0 #f9f9f9, -2px 2px 0 #f9f9f9, -2px -2px 0 #f9f9f9, 2px -2px 0 #f9f9f9;
        }
    }
}

/* fv
---------------------------------------------------- */
.fv {
	background: url("../img/sp/fv.png") no-repeat;
	background-size: 100% auto;
    position: relative;
	z-index: 1;
	
	h1 {
		width: 100%;
		margin: 0;
		font-size: min(5.2vw, 40px);
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: 0.01em;
		text-align: center;
		color: #284e92;
	}

    .fv__inner {
        padding: 55px 30px 0;
        position: relative;
    }
	.fv__description {
		margin-top: 87%;
		padding: 20px;
		font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", sans-serif;
		text-align: center;
		color: #284e92;
		background: url("../img/sp/bg_description.png") no-repeat #fff;
		background-size: 100% auto;
		border: 2px solid #284e92;
		border-radius: 12px;
		position: relative;
		box-shadow: 0 4px #284e92;
			
		&::before {
			width: 80%;
			margin: 0 auto;
			padding: 10px;
			content: "これ1つで、4年間ずっと安心のノートPC";
			font-size: min(4vw, 12px);
			font-weight: 700;
			color: #fff;
			line-height: 1;
			letter-spacing: 0.006em;
			background-color: #284e92;
			border-radius: 13px;
			position: absolute;
			left: 0;
			right: 0;
			top: -8%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		h2 {
			margin: 5 auto;
			font-size: min(4.5vw, 17px);
			font-weight: 700;
			letter-spacing: 0.004em;
		}
		h2 img {
			max-width: 150px;
			margin-bottom: 2px;
		}
		.price {
			margin-bottom: 0;
			font-family: "din-2014", sans-serif;
			font-weight: 600;
			font-size: min(14vw, 53px);
			font-style: normal;
			line-height: 0.8em;
		}
		.currency {
			padding-right: 5px;
			font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", sans-serif;
			font-size: min(5vw, 19px);
			font-weight: normal;
			letter-spacing: 0.004em;
		}
		.tax {
			font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", sans-serif;
			font-size: min(2.3vw, 9px);
			font-weight: normal;
			letter-spacing: 0.004em;
		}

		.features-list {
			padding: 0;
			list-style: none;
			display: flex;
			justify-content: space-between;
		}

		.features-list li {
			width: 13vw;
			height: 13vw;
			font-size: min(2.3vw, 9px);
			font-weight: 700;
			line-height: 1.2;
			color: #284e92;
			background-color: #ffe829;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

/* selectarea
---------------------------------------------------- */
.content { display: none;}
.show { display: block; }

.selectarea {
	text-align: center;
	position: relative;
	z-index: 11111;
	
	.section__inner {
	}	
	h2 {
		font-size: min(3.4vw, 13px);
		font-weight: 700;
		line-height: 1.4;
		color: #284e92;
		
		&::before {
			margin-right: 15px;
			content: "＼";
		}
		&::after {
			margin-left: 15px;
			content: "／";
		}
	}
	.btn_type {
		width: 96%;
		margin: 15px auto;
		padding: 5px;
		border-radius: 50px;
		background: #fff;
		box-shadow: 0 0 12px #b9b5b5;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;

		button {
			width: 48%;
			padding: 15px 0;
			font-size: min(3.4vw, 13px);
			font-weight: 700;
			text-align: center;
			color: #9e9e9e;
			background: #fff;
			border: none;
			border-radius: 50px;
			display: block;
			cursor: pointer;
			box-sizing: border-box;
			}
		}
		button:hover {
			opacity: .8;
			background: #EFEFEF;
			outline-offset: -1px;
		}
		button.active {
			outline: none;
			background: #284e92;
			color: #fff;
		}
	}

/* catch_s
---------------------------------------------------- */
.catch_s {
	margin-top: -250px;
	padding-top: 80px;
	padding-bottom: 300px;
	text-align: center;
	background: url("../img/sp/bg_problem.png") no-repeat;
	background-size: 100% auto;
	
	.section__inner {
		padding-top: 100px;
		padding-bottom: 0 !important;
	}	
	h3 {
	margin: 30px auto;
	font-size: min(5.5vw, 21px);
	font-weight: 700;
	line-height: 0.6;
	letter-spacing: 0.004em;

	span {
		padding: 0 5px;
		background: linear-gradient(to right, #a5e5ee 0%, #f2daeb 100%);
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 100% 40%;
		line-height: 1.3;
		display: inline;
		&::after {
			content: '\A';
			white-space: pre-wrap;
		}
	}
}
	p {
	font-size: min(3.4vw, 13px);
	line-height: 2em;
}
	.btn_link {
		width: 100%;
		margin: 40px auto 0;
			
		ul {
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
		}
		li {
			width: 49%;
			border-radius: 50px;
			a {
				width: 100%;
				padding: 10px 0;
				font-size: 12px;
				font-weight: 700;
				color: #fff;
				position: relative;
				display: inline-block;
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					right: 10px;
					width: 8px;
					height: 8px;
					border-top: 2px solid #fff;
					border-right: 2px solid #fff;
					transform: translateY(-50%) rotate(45deg);
				}
			}
		}
		.btn_movie a {
			background: #ff2828;
			border-radius: 50px;
			&::before {
				width: 70%;
				margin: 0 auto;
				padding: 1px 0;
				content: "30秒でわかる！";
				font-size: 10px;
				font-weight: 700;
				color: #ff2828;
				line-height: 16px;
				letter-spacing: 0.006em;
				background-color: #FFF;
				border: 1px solid #ff2828;
				border-radius: 50px;
				position: absolute;
				left: 0;
				right: 0;
				top: -12px;
			}
		}
		.btn_price {
			background: #284e92;
		}
	}
}

/* catch_g
---------------------------------------------------- */
.catch_g {
	margin-top: -210px;
	padding-top: 140px;
	padding-bottom: 220px;
	text-align: center;
	background: url("../img/sp/bg_problem.png") no-repeat;
	background-size: 100% auto;
	position: relative;
	z-index: 11;
		
	.section__inner {
		padding-top: 0;
		padding-bottom: 80px;
		background: url("../img/sp/bg_pearent.png") no-repeat;
		background-size: 100% auto;
	}
	h3 {
		max-width: 535px;
		margin: 30px auto;
		font-size: min(5.5vw, 21px);
		font-weight: 700;
		line-height: 1.49;
		letter-spacing: 0.004em;
			
		span {
			padding: 0 5px;
			background: linear-gradient(to right, #9db5f0 0%, #b4ece9 100%);
			background-repeat: no-repeat;
			background-position: center bottom;
			background-size: 100% 40%;
			line-height: 1.3;
			display: inline-block;
		}
		&::after {
			content: '\A';
			white-space: pre-wrap;
		}
	}
	p {
		font-size: min(3.4vw, 13px);
		line-height: 2em;
	}
	.btn_link {
		width: 100%;
		margin: 30px auto 0;
			
		ul {
			width: 96%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
		}
		li {
			width: 100%;
			border-radius: 50px;
			
			a {
				width: 100%;
				padding: 15px 0;
				font-size: min(3.4vw, 13px);
				font-weight: 700;
				color: #fff;
				position: relative;
				display: inline-block;
			
				&::after {
					  content: '';
					  position: absolute;
					  top: 50%;
					  right: 30px;
					  width: 8px;
					  height: 8px;
					  border-top: 2px solid #fff;
					  border-right: 2px solid #fff;
					  transform: translateY(-50%) rotate(45deg);
				}
			}
		}
		.btn_buy a {
			background: #ff2828;
			border-radius: 50px;
		}
	}
}

/* relief
---------------------------------------------------- */
.relief {
	margin-top: -260px;
	text-align: center;
	
	.section__inner {
		padding: 40px 0 0 !important;
	}
	.relief_area {
		width: 100%;
		max-width: 1060px;
		margin: 0 auto;
		position: relative;
		
		&::before {
			content: "";
			width: 80px;
			height: 92px;
			background: url("../img/sp/icon_4years.png") no-repeat;
			background-size: contain;
			position: absolute;
			top: -50px;
			right: 0;
		}
		.box_relief {
			width: calc(100% - 40px);
			margin: 0 auto;
			border-radius: 10px;
			box-shadow: 0 0 12px #b9b5b5;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			background: #fff;
			
			.relief_img {
				width: 100%;
				overflow: hidden;
				
				img {width: 100%;l}
			}
			.relief_txt {
				width: calc(100% - 40px);
				padding: 20px;
				text-align: left;
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				h2 {
					margin-bottom: 0;
					font-size: min(3vw, 12px);
					font-weight: 700;
					
					img {
						width: 78px; 
						margin-bottom: 8px;
					}
				}
				
				.price {
					margin-bottom: 10px;
					font-size: min(7.9vw, 33px);
					font-family: "din-2014", sans-serif;
					font-weight: 600;
					line-height: 1;
					color: #284e92;
					
					span {
						font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", sans-serif;
						font-size: min(3.4vw, 13px);
						letter-spacing: 0.004em;
					}
				}
				
				p {
					margin-bottom: 10px;
					font-size: min(3.4vw, 13px);
					letter-spacing: 0.008em;
				}
				
				ul {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
				}
				
				li {
					margin-right: 4px;
					margin-bottom: 4px;
					padding: 3px 10px 3px 5px;
					font-size: min(2.2vw, 9px);
					font-weight: bold;
					line-height: 0.8;
					letter-spacing: 0.004em;
					color: #284e92;
					background: #e6e7ff;
					border-radius: 5px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					
					&::before {
						width: 14px;
						height: 14px;
						margin-right: 5px;
						content: "";
						display: block;
						background: url("../img/sp/mrk_check.png") no-repeat;
						background-size: contain;
					}
				}
			}
		}
	}
}
		
/* reassurance
---------------------------------------------------- */
.reassurance {
	margin-top: -210px;
	text-align: center;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	background: url("../img/sp/bg_reassurance.png") no-repeat;
	background-size: 100% 100%;
	position: relative;
	z-index: 111;
		
	.layer_reassurance {
		background: url("../img/sp/layer_reassurance.png") repeat-x bottom;
	}
	.wrap_heading {
		width: 100%;
		margin: -130px auto 20px;
		padding-top: 50px;
	    overflow: hidden;
		
		.heading {
			width: 80%;
			margin: auto;
			padding: 15px 0;
			background-color: #284e92;
			position: relative;
			border-radius: 10px;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
				
			&::before {
				width: 200px;
				height: 100px;
				content: '';
				position: absolute;
				display: inline-block;
				border-radius: 50%;
				background: #284e92;
				top: -20px;
				left: 50%;
				transform: translateX(-50%);
			}
			h2 {
				font-size: min(5.9vw, 25px);
				font-weight: 700;
				line-height: 1.2;
				letter-spacing: 0.014em;
				position: relative;
				z-index: 1;
				color: #fff;

				span {
					font-size: min(3.4vw, 13px);
					letter-spacing: 0.01em;
					display: block;
				}
			}
		}	
	}
	.weap_reassurance {
		h3 {
			margin-bottom: 10px;
			font-size: min(5.5vw, 21px);
			font-family:  "din-2014", YuGothic, 游ゴシック, ＭＳ Ｐゴシック, MS P Gothic, MS-PGothic, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, arial, helvetica, clean, sans-serif;
			font-weight: 700;
			font-style: normal;
			letter-spacing: 0.004em;
			text-align: center;
			color: #284e92;
				
			span {
				font-size: min(10.1vw, 43px);
				font-family: "din-2014", sans-serif;
				font-weight: 600;
				line-height: 1;
				display: block;
			}
		}
		.flexwrap {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.box_reassurance_shadow {
			margin-bottom: 40px;
			border: 0px solid transparent;
			border-radius: 20px;
			background-image: 
				linear-gradient(to bottom, #b4ece9, #93a5cf);
			background-origin: border-box;
			background-clip: padding-box, border-box;
			position: relative;
			top: 2px;
			left: 2px;			
		}
		.box_reassurance {
			padding: 0 15px 20px;
			text-align: center;
			border: 3px solid transparent;
			border-radius: 20px;
			background-image: 
				linear-gradient(#fff, #fff),
				linear-gradient(to bottom, #b4ece9, #93a5cf);
			background-origin: border-box;
			background-clip: padding-box, border-box;
			position: relative;
			top: -4px;
			left: -4px;
			
			h4 {
				margin: 25px auto 20px;
				padding: 0 5px;
				font-size: min(3.9vw, 15px);
				font-weight: 700;
				line-height: 1.2;
				letter-spacing: 0.004em;
				text-align: center;
				background:linear-gradient(transparent 60%, #c8e6f5 60%);
				display: inline-block;
					
				&.plane {
					width: 100%;
					margin: 35px auto 25px;
					font-size: min(3.9vw, 15px);
					line-height: 1.6;
					text-align: center;
					background: none;
				}
			}
			.box_border {
				margin-bottom: 15px;
				text-align: left;
				border: 2px solid #c8e6f5;
				border-radius: 10px;
					
				&.wide {width: 100%;padding: 15px;}
				&.half {width: 100%;display: block;padding: 15px;}
				&.mark {display: block;padding: 10px 15px;}
				.title {
					margin-bottom: 10px;
					font-size: min(3.9vw, 15px);
					font-weight: 700;
					letter-spacing: 0.004em;
					background-size: contain;
				}
				p {
					font-size: min(3.4vw, 13px);
					font-weight: 500;
					line-height: 2;
					letter-spacing: 0.004em;
				}
			}
			.spec {
				.left_area {
					width: 100%;
					
					.title {
						padding-left: 35px;
						background: url("../img/sp/icon_cpu.png") no-repeat left 50%;
						background-size: 21.5px 21.5px;
					}
				}
				.right_area {
					width: 100%;
					
					ul {
						margin-bottom: 0;
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						grid-auto-rows: 1fr;
						grid-gap: 10px;
					}
					li {
						width: 100%;
						padding: 15px 0;
						background: #d7f1ff;
						border-radius: 5px;
						text-align: center;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						span {
							width: 100%;
							margin-top: 10px;
							font-size: min(2.6vw, 10px);
							font-weight: 500;
							line-height: 1.25;
							letter-spacing: 0.075em;
							display: block;
						}
					}
				}
			}
			.weight {
				.title {
					padding-left: 35px;
					background: url("../img/sp/icon_weight.png") no-repeat left 50%;
					background-size: 29px 27.5px;
				}
			}
			.touch {
				.title {
					padding-left: 35px;
					background: url("../img/sp/icon_touch.png") no-repeat left 50%;
					background-size: 18.5px 28px;
				}
			}
			.mark {
				.title {
					margin-bottom: 0;
					padding-left: 20px;
					background: url("../img/sp/mrk_check.png") no-repeat left 50%;
					background-size: 14px 14px;
				}
			}	
		}
		.left_area {
			width: 100%;
			margin-bottom: 15px;
			
			img {width: 100%;}
		}
		.right_area {
			width: 100%;
		}
	}
}
@media (max-width: 767px) {
	.reassurance .spec01 {order: 1;}
	.reassurance .spec02 {order: 3;}
	.reassurance .spec03 {order: 2;}
	.reassurance .spec04 {order: 4;}
}

/* comparison
---------------------------------------------------- */
.comparison {
	margin-top: -50px !important;
	padding-bottom: 70px;
	text-align: center;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	background: url(../img/sp/bg_reassurance.png) no-repeat bottom;
	background-size: 100% auto;
	position: relative;
	z-index: 111;
		
	.section__inner {
		padding-bottom: 70px;
		background: url(../img/sp/bg_comparison.png) no-repeat bottom #fff;
		background-size: 100% auto;
		border-radius: 50px;
	}
		
	.box_comparison {
		margin: 40px auto 0;
		padding: 40px 20px 20px;
		background: #ffffc8;
		border-radius: 10px;
			
		.heading_comparison {
			width: 100%;
			margin: -75px auto 15px;
		}
		h2 {
			margin: 10px auto 20px;
			padding: 0 5px;
			background: linear-gradient(to right, #9db5f0 0%, #b4ece9 100%);
			background-repeat: no-repeat;
			background-position: center bottom;
			background-size: 100% 40%;
			font-size: min(5.5vw, 21px);
			line-height: 1.3;
			display: inline;
		}
		p {
			width: 100%;
			margin: 15px auto;
			font-size: min(3.4vw, 13px);
		}
		.box_comparison_flex {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.hd_left {width: 100%;}
		.hd_right {width: 100%;margin-top: 20px;}
		.balloon {
			width: 74%;
			max-width: 330px;
			margin: 1.5em 0;
			padding: 7px 10px;
				color: #fff;
				font-size: min(3.9vw, 15px);
				font-weight: 700;
				letter-spacing: 0.004em;
				background: #e0edff;
				border-radius: 50px;
				position: relative;
				display: inline-block;
			}
			.balloon:before {
				content: "";
				position: absolute;
				top: 100%;
				left: 50%;
				margin-left: -15px;
				border: 15px solid transparent;
				border-top: 15px solid #e0edff;
			}
			.gray {
				background: #5c6986;
			}
			.gray:before {
				border: 11px solid transparent;
				border-top: 11px solid #5c6986;
			}
			.blue {
				background: #22469a;
			}
			.blue:before {
				border: 11px solid transparent;
				border-top: 11px solid #22469a;
			}
			.box_left_wrap {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
			}
			.box_left {
				width: calc(100% - 4px);
				margin: 0 6px 14px 0;
				padding: 15px 0 10px;
				color: #fff;
				background: #7f889c;
				border-radius: 10px;
				box-shadow: 4px 4px #5c6986;
				
				h4 {
					margin-bottom: 17px;
					font-size: min(3.9vw, 15px);
					font-weight: 700;
					line-height: 1em;
					letter-spacing: 0.004em;
				}
			}
			.box_right_shadow {
				width: 100%;
				border: 0 solid transparent;
				border-radius: 10px;
				background-image: linear-gradient(to bottom, #b4ece9, #93a5cf);
				background-origin: border-box;
				background-clip: padding-box, border-box;
				position: relative;
				top: 2px;
				left: 2px;
				padding-bottom: 2px;
			}
			.box_right {
				width: 100%;
				margin-bottom: 2px;
				padding: 20px 30px;
				background: #fff;
				border-radius: 10px;
				box-sizing:border-box;
				position: relative;
				top: -4px;
				left: -4px;
				
				h4 {
					width: 50%;
					margin: 0 auto;
					padding: 10px 0;
					font-size: min(3.9vw, 15px);
					font-weight: 700;
					line-height: 1em;
					letter-spacing: 0.004em;
					color: #fff;
					background: #ff2828;
					border-radius: 50px;
				}
				.price {
					margin: 20px 0 10px;
					font-size: min(5.5vw, 21px);
					line-height: 1em;
					color: #284e92;
					span {
						font-family: "din-2014", sans-serif;
						font-size: min(10.4vw, 39px);
						font-weight: 600;
					}
					span.tax {
						font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", sans-serif;
						font-size: min(2.6vw, 10px);
						font-weight: 400;
					}
				}
				ul {
					width: 100%;
					margin: 0 auto 10px;
				}
				li {
					margin-bottom: 5px;
					padding-left: 20px;
					font-size: min(2.8vw, 11px);
					font-weight: 700;
					line-height: 21px;
					letter-spacing: 0.008em;
					color: #22469a;
					text-align: left;
					background: url(../img/sp/mrk_check.png) no-repeat left 50%;
					background-size: 14px 14px;
				}
				p {
					font-size: min(2vw, 8px);
					font-weight: 500;
					text-align: left;
					line-height: 1.3;
					letter-spacing: 0.006em;
				}
			}
			.box_left p {
				margin: 0;
				font-size: min(3.4vw, 13px);
				font-weight: 700;
				letter-spacing: 0.006em;
			}
			.box_right p {
				margin: 0;
				font-size: min(2vw, 8px);
				font-weight: 700;
				letter-spacing: 0.006em;
			}
			.comment {
				width: 100%;
				position: relative;
			}
			.comment p {
				margin: 0;
				font-size: min(4.2vw, 16px);
				font-weight: 700;
				line-height: 1.2;
				letter-spacing: 0.006em;
			}
			.comment::before {
				content: '';
				width: 2px;
				height: 30px;
				margin: 0 auto;
				background: #93a5cf;
				position: absolute;
				top: -24px;
				left: 0;
				right: 0;
			}
			.comment.left {
				margin-top: 25px;
				padding-top: 15px;
				padding-bottom: 40px;
				background: url("../img/pc/bg_comment_l.png") no-repeat left bottom;
				background-size: 111px 89px;
			}
			.comment.right {
				margin-top: 35px;
				padding-top: 15px;
				padding-bottom: 40px;
				background: url("../img/pc/bg_comment_r.png") no-repeat 90% 50%;
				background-size: 58.5px 66.5px;
			}
			.comment.right p {
				padding: 0 8px;
				font-size: min(5.5vw, 21px);
				font-weight: 700;
				background: linear-gradient(to right, #9db5f0 0%, #b4ece9 100%);
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: 100% 40%;
				line-height: 1.3;
				display: inline;
			}
		}
	}
@media (max-width: 767px) {
	.comparison .hd_left {order: 1;}
	.comparison .box_left_wrap {order: 2;}
	.comparison .comment.left {order: 3;}
	.comparison .hd_right {order: 4;}
	.comparison .box_right_shadow {order: 5;}
	.comparison .comment.right {order: 6;}
}

/* movie
---------------------------------------------------- */
.movie {
	margin-top: -170px;
	text-align: center;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	background: url("../img/sp/bg_movie.png") no-repeat;
	background-size: 100% 100%;
	
	.section__inner {
		padding: 20px 20px 58px;
	}
	
	.layer_movie {
		padding-top: 180px;
		background: url("../img/sp/layer_movie.png") repeat-x bottom;
	}
	.short_movie {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: url("../img/pc/layer_short_movie.png") no-repeat;
		background-size: contain;
		
		.box_movie {
			position: relative;
			width: 70%;
			border-radius: 20px;
			overflow: hidden;
			
			&::before {
				content: "";
				display: block;
				padding-top: 177.77%;
			}			
			iframe {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
		}
		h2 {
			margin: 20px auto;
			padding: 0 5px;
			font-size: min(5.5vw, 21px);
			font-weight: 700;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			span {
				background: linear-gradient(to right, #a5e5ee 0%, #f2daeb 100%);
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: 100% 40%;
				line-height: 1.3;
				display: inline;
			}
		}
	}		
	.area_merit {
		width: 100%;
		margin: 0 auto 90px;
		display: flex;
		flex-direction: column;
			
		.box_merit {
			width: 100%;
			margin-top: 30px;
			background: #fff;
			border-radius: 20px;
				
			.merit_img img {
				width: 100%;
			}
			.merit_txt {
				padding: 20px;
					
				h3 {
					margin: 0 auto;
					padding: 0 5px;
					font-size: min(5.5vw, 21px);
					font-weight: 700;
					background: linear-gradient(to right, #a5e5ee 0%, #f2daeb 100%);
					background-repeat: no-repeat;
					background-position: center bottom;
					background-size: 100% 40%;
					line-height: 1.3;
					display: inline;
				}
				p {
					margin: 15px auto;
					font-size: min(3.3vw, 13px);
				}
				.merit_review {
					display: flex;
					justify-content: space-between;
						
					.icon {
						width: 20%;
					}
					.txt {
						width: 66%;
						padding: 10px;
						font-size: min(3.1vw, 12px);
						line-height: 1.46;
						letter-spacing: 0.006em;
						text-align: left;
						background: #fbfbb9;
						position: relative;
						display: inline-block;
							
						&::before {
							content: "";
							position: absolute;
							top: 50%;
							left: -26px;
							margin-top: -15px;
							border: 7px solid transparent;
							border-right: 20px solid #fbfbb9;
						}
						img {
							padding: 5px;
							
						}
						p {
							margin: 10px 0 0;
							font-size: min(3.1vw, 12px);
						}
					}
				}
			}
		}
		.box_merit._01 .merit_txt .merit_review .txt img {width: 38px;}
		.box_merit._02 .merit_txt .merit_review .txt img {width: 146px;}
	}
}
.movie.guardian {
	margin-top: 0;
	background: url("../img/sp/bg_movie_guardian.png") no-repeat;
	background-size: 100% 100%;
	border-radius: 0;

	.layer_movie {
			padding-top: 200px;
			background: none;
	}
	.short_movie {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: url("../img/pc/layer_short_movie.png") no-repeat;
		background-size: contain;
	}
}

/* point
---------------------------------------------------- */
.point {
	margin-top: -80px !important;
	text-align: center;
	border-radius: 30px;
	background: url(../img/sp/bg_point.png) no-repeat #fff;
	background-size: 100% auto;
	position: relative;
	z-index: 1;
		
	.heading_point {
		width: 80%;
		position: absolute;
		top: -25px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.layer_point {
		width: 100%;
		margin: 0 auto;
		background: url("../img/sp/layer_point.png") no-repeat center top;
		background-size: 100% auto;
	}
	.section__inner {
		padding: 50px 20px 20px;
	}
	h2 {
		padding: 0 5px;
		font-size: min(5.5vw, 21px);
		font-weight: 700;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		span {
			background: linear-gradient(to right, #a5e5ee 0%, #f2daeb 100%);
			background-repeat: no-repeat;
			background-position: center bottom;
			background-size: 100% 40%;
			line-height: 1.3;
			display: inline;
		}
	}
	.box_point {
		margin: 20px auto 30px;
		
		.wrap_sp {
			width: 100%;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content:space-between;
			
			.wrap_sp_img {
				width: 50%;
				text-align: center;
				
				img {width: 86%;}
			}
			.wrap_sp_txt {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
		
		.number {
			width: 100px;
			height: 30px;
			margin: 5px auto;
			padding: 0;
			line-height: 30px;
			background-color: #22469a;
			font-size: min(4.6vw, 17px);
			font-family: "din-2014", sans-serif;
			font-weight: 600;
			color: #fff;
			text-align: center;
			clip-path: polygon(10% 1%, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0% 50%);			
		}
/*		.number {
			width: 100px;
			height: 30px;
			margin: 5px auto;
			padding: 0;
			line-height: 30px;
			background-color: #22469a;
			font-size: min(4.6vw, 17px);
			font-family: "din-2014", sans-serif;
			font-weight: 600;
			color: #fff;
			text-align: center;
			position: relative;
			display: inline-block;

			&::before {
				content: "";
				position: absolute;
				left: -10px;
				top: 0;
				border-right: 10px solid #22469a;
				border-top: 15px solid transparent;
				border-bottom: 15px solid transparent;
			}
			&::after {
				content: "";
				position: absolute;
				right: -10px;
				top: 0;
				border-left: 10px solid #22469a;
				border-top: 15px solid transparent;
				border-bottom: 15px solid transparent;
			}

		}			*/
		h3 {
			margin: 5px auto;	
			font-size: min(4.8vw, 18px);
			font-weight: 700;
			line-height: 1.2;
			letter-spacing: 0.008em;
			color: #22469a;
			position: relative;
		}
		p {
			width: 100%;
			margin-top: 10px;
			font-size: min(3.4vw, 13px);
			line-height: 1.87;
			letter-spacing: 0.004em;

		}
	}	
	._summary {
		width: 100%;
		margin: 20px auto 0;
		text-align: center;
		
		img {width: 90%;margin: auto;}
		
		.summary_txt {
			text-align: left;
			
			span {
				font-size: 10px;
				text-align: left;
			}
		}
	}

	.open-btn {
		width: 62%;
		margin: 10px auto;
		padding: 10px 0;
		font-size: min(3.4vw, 13px);
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.006em;
		color: #22469a;
		background: #fff;
		border: 2px solid #284e92;
		border-radius: 50px;
		box-shadow: 4px 4px #284e92;
		position: relative;
		display: inline-block;
		cursor: pointer;
		
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			right: 30px;
			width: 8px;
			height: 8px;
			border-top: 2px solid #284e92;
			border-right: 2px solid #284e92;
			transform: translateY(-50%) rotate(45deg);
		}
	}
	:root:has(#modal-sim:checked) {
		height: 100dvh;
		overflow: hidden;
	}
	:root:has(#modal-sim:checked) body {
		height: 100dvh;
		overflow: hidden;
	}
    #modal-sim {
      display: none;
    }
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      visibility: hidden;
      transition: 0.3s;
      z-index: 1111;
    }
    #modal-sim:checked ~ .modal-overlay {
      opacity: 1;
      visibility: visible;
    }
	.modal-overlay {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		visibility: hidden;
		transition: 0.3s;
		overflow-y: scroll;
		z-index: 1;
	}
	.modal-content {
		width: 100%;
		height: 100%;
		padding: 40px;
		position: relative;
		transform: translateY(-20px);
		transition: 0.3s;
		overflow-y: auto;
		overscroll-behavior: contain; 
		box-sizing: border-box;
	}
	.box_modal-sim {
		width: 100%;
		margin: 0 auto 30px;
		padding: 10px 20px 1px;
		text-align: left;
		background: #fff;
		border-radius: 10px;
		box-sizing: border-box;
		
		h3 {
			padding: 5px 0 5px 15px;
			font-size: min(4.8vw, 18px);
			font-weight: 700;
			line-height: 1;
			letter-spacing: 0.008em;
			color: #22469a;
			border-left: 8px solid #22469a;
		}
		dt,dd,p {
			font-size: min(3.4vw, 13px);
			line-height: 1.3;
			letter-spacing: 0.004em;
		}
		p {
			margin-bottom: 30px;
		}
		dl {
			margin-top: 30px;
		}
		dt {
			font-weight: 700;
		}
		dd {
			margin-bottom: 20px;
		}
	}
	.close-btn {
		margin: 0;
		padding: 5px;
		position: absolute;
		top: 50px;
		right: 10px;
		font-size: 14px;
		line-height: 1;
		cursor: pointer;
		color: #fff;
		background: #22469a;
	}
	#modal-sim:checked ~ .modal-overlay {
		opacity: 1;
		visibility: visible;
	}
	#modal-sim:checked ~ .modal-overlay .modal-content {
		transform: translateY(0);
	}
}

/* support
---------------------------------------------------- */
.support {
	margin-top: -80px;
	padding: 80px 0 100px;
	text-align: center;
	background: url(../img/pc/bg_support.png) no-repeat;
	background-size: 100% 100%;
	
	.section__inner {
		padding: 40px 20px 0;
	}

	h2 {
		margin: 0px auto 60px;
		font-size: min(5vw, 19px);
		font-weight: 700;
		line-height: 1.3;
	}
	.support_area {
		margin: 20px auto;
			
		.box_support {
			width: calc(100% - 40px);
			margin-bottom: 50px;
			padding: 20px 20px 0;
			background: url("../img/sp/bg_box_support.png") no-repeat #fff;
			background-size: 100% auto;
			border-radius: 10px;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
				
			&::before {
				width: 8vw;
				height: 18vw;
				content: "";
				background: url("../img/sp/icon_clip.png") no-repeat;
				background-size: 100%;
				display: block;
				position: absolute;
				top: -3vw;
				right: 10px;
			}			
			h3 {
				margin: 9.5vw auto 0;
				font-size: min(5vw, 19px);
				font-weight: 700;
			}				
			p {
				font-size: min(3.4vw, 13px);
			}
			.txt {
				margin-top: 15px;
					
				li {
					margin-bottom: 10px;
					padding: 10px;
					font-size: min(3vw, 12px);
					text-align: left;
					background: #fff;
					border: 1px solid #edf3f4;
					border-radius: 5px;
					
					span {
						padding-left: 22px;
						font-size: min(4vw, 15px);
						font-weight: 700;
						color: #284e92;
						background: url("../img/sp/mrk_check.png") no-repeat left 50%;
						background-size: 14px 14px;
						display: block;	
					}
					
					&.attention {
						font-size: min(2.6vw, 10px);
						line-height: 1.3;
						background: #f0f0f0;
							
						span {
							margin-bottom: 5px;
							padding-left: 20px;
							font-size: min(3vw, 12px);
							font-weight: 700;
							line-height: 20px;
							color: #f90606;
							background: url("../img/sp/mrk_attention.png") no-repeat left 50%;
							background-size: 15px 13.5px;
							display: block;	
						}
					}
				}
			}
			.txt_guarantee {
				font-size: min(2.6vw, 10px);
				text-align: left;

				a {
					color: #0084e0;
					text-decoration: underline;
				}
			}
			.txt_support {
				text-align: center;
			}
			.icon {
				width: 90%;
				margin: 40px auto 0;
				display: flex;
				justify-content: space-between;
	
				li {
					width: 30%;
				}
			}
			.img_students {
				margin-top: 24px;
			}
		}
		._01 h3::before {
			width: 18vw;
			height: 18vw;
			content: "";
			background: url("../img/sp/icon_guarantee.png") no-repeat;
			background-size: 100%;
			display: block;
			position: absolute;
			top: -9vw;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
		._02 h3::before {
			width: 18vw;
			height: 18vw;
			content: "";
			background: url("../img/sp/icon_support.png") no-repeat;
			background-size: 100%;
			display: block;
			position: absolute;
			top: -9vw;
			left: 0;
			right: 0;
			margin: 0 auto;
		}	
	}
}
	
/* campus---------------------------------------------------- */
.campus {
	margin-top: -90px;
	text-align: center;
	border-radius: 30px;
	background: #ffffc8;
	position: relative;
	z-index: 1;
		
	.heading_campus {
		width: 94%;
		max-width: 1024px;
		position: absolute;
		top: -15px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.section__inner {
		max-width: 100%;
		padding: 40px 0;
	}
	h2 {
		margin: 0 auto 10px;
		font-size: min(5vw, 19px);
		font-weight: 700;
	}
	p {
		font-size: min(3.4vw, 13px);
		font-weight: 500;
	}
	.wrap_flow {
		padding: 0 2%;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		
		.img_campus {
			width: 35%;
			margin: 0;
			position: relative;

			&::before {
				content: "";
				width: 9px;
				height: 100%;
				margin: auto;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background: #b0e1fa;
				position: absolute;
			}
			ul {
				width: 100%;
				margin: 0;
				padding: 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: relative;
				z-index: 1;
			}
			li {
				width: 100%;
				position: relative;

				&._01 {background: #ffffc8;}

				&._01::after,
				&._02::after,
				&._03::after {
					margin: 0 auto;
					padding: 3px 0;
					font-size: 10px;
					line-height: 10px;
					color: #6acdff;
					background: #fdfd59;
					border: 2px solid #b0e1fa;
					border-radius: 20px;
					position: absolute;
					bottom: -7px;
					left: 0;
					right: 0;
				}
				&._01::after {
					width: 70px;
					content: '08:50 通学';
				}
				&._02::after {
					width: 70px;
					content: '10:30 講義';
				}
				&._03::after {
					width: 90px;
					content: '13:00 空きコマ';
				}
				&:nth-child(2) {margin: 20px 0;}
			}
		}
		.txt_campus {
			width: 57%;
			margin: 0;
			padding-right: 1%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			.box_txt {
				width: 100%;
				height: 33%;
				padding: 0;
				font-size: min(3vw, 12px);
				text-align: left;
				display: flex;
				flex-direction: column;
				justify-content: center;

				span {
					font-size: min(3.4vw, 13px);
					font-weight: 700;
					text-align: left;
					display: block;
				}
			}
		}
	}
}

/* detail
---------------------------------------------------- */
.detail {
	margin-top: 50px;
	text-align: center;
	
	.section__inner {
		padding: 0 20px;
	}		
	h2 {
		margin: 0 auto 30px;
		font-size: min(5.5vw, 21px);
		font-weight: 700;
	}
	.detail_area {
		width: 100%;
		margin: 0 auto;
			
		.img_detail {
			width: 100%;
				
			.slide {
				position: relative;
				margin: 0;
				padding: 0;
			}
			.slide .item {
				position: relative;
				height: 100%;
			}
			.slide .item::before {
				display: block;
				padding-top: 100%;/* 縦横 */
				content: "";
				position: relative;
				overflow: hidden;
			}
			.slide .item img {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				margin: auto;
				width: 100%;
			}
			.slide > .slick-list,
			.slide > .slick-list > .slick-track,
			.slide > .slick-list > .slick-track > .slick-slide > div {
				position: relative;
				height: 100%;
			}
			.slide-navigation {
				position: relative;
				margin-top: 5px;
				padding: 0;
				display: flex;
				justify-content: space-between;
			}
			.slide-navigation .item {
				position: relative;
				cursor: pointer;
				overflow: hidden;
				width: calc(97% / 4);
				height: 100%;
				padding: 0;
			}
			.slide-navigation .item::before {
				display: block;
				padding-top: 100%;
				content: "";
			}
			.slide-navigation .item img {
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				margin: auto;
				width: 100%;
			}
			.slide-navigation .current::after {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 100%;
				content: "";
				opacity: 0.5;
				background: #000;
			}					
			.slick-next::before,
			.slick-prev::before {
				width: 15px;
				height: 15px;
				border-top: 2px solid #000;
				border-right: 2px solid #000;
				position: absolute;
				display: block;
				font-size: 0;
			}
			.slick-next {right: -15px;}
			.slick-next::before {transform: rotate(45deg);}
			.slick-prev {left: -15px;}
			.slick-prev::before {transform: rotate(-135deg);}
		}
		.txt_detail {
			width: 100%;
			padding-top: 40px;
			text-align: left;
			
			h3 {
				font-size: min(3.9vw, 15px);
				font-weight: 700;
			}
			.price {
				font-size: min(3.9vw, 15px);
				font-weight: 700;
				color: #ff2828;
					
				span {
					font-family: "din-2014", sans-serif;
					font-size: min(7.9vw, 33px);
				}
			}
			.btn_buy a {
				width: 94%;
				margin: 10px auto 20px;
				padding: 10px 0;
				font-size: min(3.4vw, 13px);
				font-weight: 700;
				text-align: center;
				color: #fff;
				background: #ff2828;
				border-radius: 50px;
				display: block;
				position: relative;
					
				&::after {
					content: '';
					position: absolute;
					top: 50%;
					right: 30px;
					width: 8px;
					height: 8px;
					border-top: 2px solid #fff;
					border-right: 2px solid #fff;
					transform: translateY(-50%) rotate(45deg);
				}
			}
			p {
				font-size: min(2.6vw, 10px);
			}
			.icon_area {
				margin-top: 20px;
				padding: 20px;
				background: #f7f7f7;
				border: 1px solid #c8c8c8;
				border-radius: 10px;
					
				h3 {
					margin-bottom: 10px;
					padding-left: 10px;
					border-left: 3px solid #2b2b2b;
					font-size: min(3.9vw, 15px);
					font-weight: 400;
					line-height: 1em;
						
					span {
						margin-top: 5px;
						font-weight: 700;
						display: block;
					}
				}
				ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
				}
				li {
					margin-right: 10px;
					margin-bottom: 5px;
					padding: 5px 7px;
					font-size: min(3vw, 12px);
					line-height: 1em;
					border: 1px solid #c8c8c8;
					border-radius: 5px;
					background: #fff;
				}
			}
			.bnr_sim,
			.bnr_guarantee {
				margin-top: 10px;
				padding: 20px 25px 15px 45px;
				background: #f7f7f7;
				border: 1px solid #c8c8c8;
				border-radius: 10px;
				font-size: min(3.9vw, 15px);
				font-weight: 700;
				line-height: 1.2;
				letter-spacing: 0.004em;
			}
			.bnr_sim {
				background: url("../img/sp/icon_detail01.png") no-repeat 15px 50% #f7f7f7;
				background-size: 22.5px 28.5px;
			}
			.bnr_guarantee {
				background: url("../img/sp/icon_detail02.png") no-repeat 15px 50% #f7f7f7;
				background-size: 22.5px 26px;
			}
			.btn_detail {
				margin-top: 15px;
				font-size: min(3.4vw, 13px);
					
				a {
					color: #0084e0;
					text-decoration: underline;
				}
			}
		}
	}
}

/* about
---------------------------------------------------- */
.about {
	text-align: center;
		
	.section__inner {
		width: 100%;
		margin: auto;
		padding: 0px 20px 28px;
		box-sizing: border-box;
	}
	h2 {
		margin: 30px auto;
		font-size: min(5.5vw, 21px);
		font-weight: 700;
	}
	p {
		font-size: min(3.4vw, 13px);
		font-weight: 500;
		line-height: 1.8;
	}
	h3 {
		margin: 30px auto 10px;
		font-size: min(3.9vw, 15px);
		font-weight: 700;
		text-align: center;
	}
	.about_area {
		
		.box_about {
			width: 100%;
			margin-bottom: 10px;
			border-right: 1px solid #b6b6b6;
			border-bottom: 1px solid #b6b6b6;
			border-left: 1px solid #b6b6b6;
			
			h4 {
				padding: 10px;
				font-size: min(3.9vw, 15px);
				font-weight: 600;
				text-align: left;
				letter-spacing: 0.07em;
				color: #fff;
				background: #22469a;
			}
			.txt {
				padding: 15px;
				text-align: left;
					
				p {
					margin-top: 10px;
					padding: 0 5px;
					font-size: min(2.6vw, 10px);
					font-weight: 500;
					letter-spacing: 0.08em;
				}
				span {
					margin-top: 10px;
					font-size: min(3.9vw, 15px);
					font-weight: 700;
					color: #c70557;
				}
				.attention {
					padding: 0;
					font-size: min(2.6vw, 10px);
					letter-spacing: 0;
					color: #e82121;
				}
			}
			&._01 h4 {
					text-align: center;
			}
			&._01 p {
					text-align: right;
			}
			&._02,
			&._03,
			&._04 {
				width: 100%;
			}
			&._02 span {
				height: 31px;
				padding-left: 36px;
				background: url("../img/sp/icon_support02.png") no-repeat 5px 10%;
				background-size: 23.5px  23.5px;
				display: block;
			}
			&._03 span {
				height: 31px;
				padding-left: 36px;
				background: url("../img/sp/icon_support03.png") no-repeat 5px 10%;
				background-size: 23.5px  23.5px;
				display: block;
			}
			&._04 span {
				height: 31px;
				padding-left: 36px;
				background: url("../img/sp/icon_support04.png") no-repeat 5px 10%;
				background-size: 23.5px  23.5px;
				display: block;
			}
		}			
	}
	.disclaimer_area {
		
		dl {
			width: 100%;
			margin: 30px auto;
			text-align: left;
		}
		dt {
			width: 100%;
			padding: 20px;
			font-size: min(3.9vw, 15px);
			background: #e4e4e4;
			box-sizing: border-box;
		}
		dd {
			padding: 20px;
			border-right: 1px solid #e4e4e4;
			border-bottom: 1px solid #e4e4e4;
			border-left: 1px solid #e4e4e4;
			box-sizing: border-box;
				
			li {
				margin-bottom: 10px;
				font-size: min(3.4vw, 13px);
			}
		}
	}
}
	
/* レビュー
---------------------------------------------------- */
.filter_text {
	width: 100% !important;
	max-width: 882px !important;
}
@media (max-width: 767px) {
	.voice {
	margin-top: 0 !important;
	padding-bottom: 0 !important;
	
	h2 {
		height: 16vw;
		margin: 0 auto;
		font-size: min(5.5vw, 21px);
		font-weight: 700;
		text-align: center;
		background: transparent url(https://store.vaio.com/ec/img/usr/moses/pc/uservoice.png) no-repeat;
		background-size: 100% auto !important;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.section__inner {
		padding: 0 20px 38px;
	}
	.evaluation_wrap img {
		height: 2em;
	}
	.evaluation_text {
		font-size: 15px;
	}
	.tab-content {
		padding: 20px 0;
	}
	.voice__label {
		margin-top: 0;
	}
	.voice__info-stars {
		margin-top: 30px;
	}
}
}

/* バナー
---------------------------------------------------- */
.banner {
	display: flex;
	justify-content: center;
		
	.section__inner--banner {
		padding-top: 0 !important;
	}
}





@media (min-width: 768px) {
    /* ---------------------------------------- common ---------------------------------------- */
    body {
        font-size: 20px;
    }

    .sm,
	.spv {
        display: none;
    }

    .md {
        display: block;
    }

    .xxl {
        display: none;
    }

    .lg,
	.pcv {
        display: block; 
    }

    sup {
        font-size: 60%;
    }

    .section {
        .section__inner {
            max-width: 1160px;

            &.section__inner--merit {
                padding-top: 118px;
            }

            &.section__inner--lineup {
                padding-top: 47px;
                padding-bottom: 54px;
            }

            &.section__inner--banner {
                padding-top: 120px;
            }
        }

        .section__title {
            &.section__title--lineup {
                font-size: 60px;
            }

            &.section__title--worries {
                font-size: 60px;
                line-height: 1.5;
            }
        }

        .section__title-sub {
            font-size: 40px;
        }

        .section__description {
            font-size: 18px;
            margin-top: 26px;
        }
    }
	.wrapper {
		background: url("../img/pc/bg_fv.png") no-repeat;
		background-size: contain;
	}

    /* float-banner
    ---------------------------------------------------- */
    .float-banner {
        position: fixed;
        right: 20px;
        bottom: 150px;
        z-index: 999;
        text-align: center;
        display: flex;
        flex-direction: column;

        &::before {
            content: '＼このページを見た方限定！／';
            font-size: 14px;
            font-weight: bold;
            text-align: center;
        }

        .float-banner__close {
            position: absolute;
            right: 0;
            top: 0;
            transform: translateY(-10px)
        }
    }


    /* fv
    ---------------------------------------------------- */
    .fv {
		width: 100%;
		max-width: 1240px;
		height: auto;
		aspect-ratio: 1240 / 630;
		margin: auto;
        padding: 20px 0 0;
/*		padding: 0 13.75%; */
		font-family: "Helvetica Neue", Arial, "Yu Gothic Bold", "YuGothic-Bold", "Yu Gothic Medium", "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Meiryo", "Noto Sans JP", sans-serif;
        background: url(../img/pc/fv.png) no-repeat;
		background-size: 100% auto;
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		
		h1 {
			width: 100%;
			margin: 0;
			font-size: min(2.6vw, 40px);
			font-weight: 700;
			line-height: 1.5;
			letter-spacing: 0.01em;
			color: #284e92;
		}

        .fv__inner {
			padding: 0 20px !important;
			margin: auto;
        }
		
		.fv__title {
			width: 50%;
			max-width: 560px;
			margin-top: 0;
		}

        .fv__description {
            margin-top: 30px;
			padding: 20px;
			font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", sans-serif;
			text-align: center;
			color: #284e92;
			background: url("../img/pc/bg_description.png") no-repeat #fff;
			border: 2px solid #284e92;
			border-radius: 12px;
			position: relative;
			box-shadow: 8px 8px #284e92;
			
			&::before {
				width: 81%;
				max-width: 447px;
				height: 40px;
				margin: 0 auto;
				padding: 0;
				content: "これ1つで、4年間ずっと安心のノートPC";
				font-size: min(1.8vw, 22.5px);
				font-weight: 700;
				color: #fff;
				line-height: 1;
				letter-spacing: 0.006em;
				background-color: #284e92;
				border-radius: 50px;
				position: absolute;
				left: 0;
				right: 0;
				top: -20px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

		
			h2 {
				margin: 5px 0 0px;
				font-size: min(1.9vw, 26px);
				font-weight: 700;
				letter-spacing: 0.004em;
			}
			h2 img {
				margin-bottom: 14px;
			}
			.price {
				margin-bottom: 0;
				font-family: "din-2014", sans-serif;
				font-weight: 600;
				font-size: min(6.3vw, 91px);
				font-style: normal;
				line-height: 0.8em;
			}

			.currency {
				padding-right: 5px;
				font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", sans-serif;
				font-size: min(2.3vw, 33px);
				font-weight: normal;
				letter-spacing: 0.004em;
			}

			.tax {
				font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", sans-serif;
				font-size: min(1.1vw, 16px);
				font-weight: normal;
				letter-spacing: 0.004em;
			}

			.features-list {
				margin-bottom: 5px;
				list-style: none;
				padding: 0;
				display: flex;
				justify-content: space-between;
			}

			.features-list li {
				width: 19%;
				height: auto;
				max-width: 90px;
				max-height: 90px;
				aspect-ratio: 1/1;
				padding: 5px;
				font-size: min(1.1vw, 16px);
				font-weight: 700;
				line-height: 1.2;
				color: #284e92;
				background-color: #ffe829;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
			}
		}
    }

    /* selectarea
    ---------------------------------------------------- */
    .selectarea {
		height: 160px;
		text-align: center;
		position: relative;
		z-index: 111;
		
		.section__inner {
			padding: 20px 20px 0;
		}	
        h2 {
            font-size: min(1.4vw, 20px);
			font-weight: 700;
            line-height: 1.4;
			color: #284e92;


            &::before {
				margin-right: 15px;
				content: "＼";
            }
            &::after {
				margin-left: 15px;
				content: "／";
            }
		}
		.btn_type {
			width: 517px;
			margin: 20px auto;
			border-radius: 50px;
			background: #fff;
			box-shadow: 0 0 12px #b9b5b5;
			
			ul {
				padding: 5px;
				display:flex;
				justify-content: space-between;
			}
			li {
				width: 50%;
				 a {
					width: 100%;
					padding: 15px 0;
					font-size: min(1.4vw, 20px);
					font-weight: 700;
					text-align: center;
					border-radius: 50px;
					color: #9e9e9e;
					display: block;
				}
			}

			li.active a {
				background: #284e92;
				color: #fff;
			}
			li.active a {
				color: #fff;
			}
		}
	}

    /* catch_s
    ---------------------------------------------------- */
    .catch_s {
		margin-top: -190px;
		padding-top: 210px;
		padding-bottom: 260px;
		text-align: center;
		background: url("../img/pc/bg_problem.png") no-repeat;
		background-size: 100% auto;
		position: relative;
		z-index: 11;
		
		.section__inner {
			padding-top: 0px;
			padding-bottom: 0;
			background-image: url("../img/pc/bg_probrem_l.png"),url("../img/pc/bg_probrem_r.png");
			background-position: 4% 33%, 96% 33%;
			background-repeat: no-repeat;
			background-size: 25%;
		}
		h3 {
			max-width: 545px;
			margin: 30px auto;
			font-size: min(2.43vw, 35px);
			font-weight: 700;
			line-height: 1.49;
			letter-spacing: 0.004em;
			
			span {
				padding: 0 5px;
				background: linear-gradient(to right, #a5e5ee 0%, #f2daeb 100%);
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: 100% 40%;
				line-height: 1.3;
				display: inline;
			}
				&::after {
					content: '\A';
					white-space: pre-wrap;
				}
		}
		p {
			font-size: min(1.4vw, 15px);
			line-height: 2em;
		}
		.btn_link {
			width: 530px;
			margin: 70px auto 0;
			
			ul {
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
			}
			li {
				width: 255px;
				border-radius: 50px;
				a {
					width: 100%;
					padding: 15px 0;
					font-size: 16px;
					font-weight: 700;
					color: #fff;
					position: relative;
					display: inline-block;
					&::after {
						  content: '';
						  position: absolute;
						  top: 50%;
						  right: 30px;
						  width: 8px;
						  height: 8px;
						  border-top: 2px solid #fff;
						  border-right: 2px solid #fff;
						  transform: translateY(-50%) rotate(45deg);
					}
				}
			}
			.btn_movie a {
				background: #ff2828;
				border-radius: 50px;
				&::before {
					width: 170px;
					margin: auto;
					padding: 3px 0;
					content: "30秒でわかる！";
					font-size: 16px;
					font-weight: 700;
					color: #ff2828;
					line-height: 16px;
					letter-spacing: 0.006em;
					background-color: #FFF;
					border: 1px solid #ff2828;
					border-radius: 50px;
					position: absolute;
					left: 0;
					right: 0;
					top: -12px;
				}
			}
			.btn_price {
				background: #284e92;
			}
		}
	}

    /* catch_g
    ---------------------------------------------------- */
    .catch_g {
		margin-top: -190px;
		padding-top: 140px;
		padding-bottom: 220px;
		text-align: center;
		background: url("../img/pc/bg_problem.png") no-repeat;
		background-size: 100% auto;
		position: relative;
		z-index: 11;
		
		.section__inner {
			padding-top: 70px;
			padding-bottom: 80px;
			background: url("../img/pc/bg_pearent.png") no-repeat;
			background-size: 100% auto;
		}		
        h2 {
            font-size: min(1.4vw, 20px);
			font-weight: 700;
            line-height: 1.4;
			color: #284e92;


            &::before {
				margin-right: 15px;
				content: "＼";
            }
            &::after {
				margin-left: 15px;
				content: "／";
            }
		}
		.btn_type {
			width: 517px;
			margin: 20px auto;
			border-radius: 50px;
			background: #fff;
			box-shadow: 0 0 12px #b9b5b5;
			
			ul {
				padding: 5px;
				display:flex;
				justify-content: space-between;
			}
			li {
				width: 50%;
				 a {
					width: 100%;
					padding: 15px 0;
					font-size: min(1.4vw, 20px);
					font-weight: 700;
					text-align: center;
					border-radius: 50px;
					color: #9e9e9e;
					display: block;
				}
			}

			li.active a {
				background: #284e92;
				color: #fff;
			}
			li.active a {
				color: #fff;
			}
		}
		h3 {
			max-width: 535px;
			margin: 30px auto;
			font-size: min(2.43vw, 35px);
			font-weight: 700;
			line-height: 1.49;
			letter-spacing: 0.004em;
			
			span {
				padding: 0 5px;
				background: linear-gradient(to right, #9db5f0 0%, #b4ece9 100%);
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: 100% 40%;
				line-height: 1.3;
				display: inline-block;
			}
				&::after {
					content: '\A';
					white-space: pre-wrap;
				}
		}

		p {
			font-size: min(1.04vw, 15px);
			line-height: 2em;
			}
		
		.btn_link {
			width: 302px;
			margin: 70px auto 0;
			
			ul {
				width: 100%;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
			}
			
			li {
				width: 100%;
				border-radius: 50px;
				a {
					width: 100%;
					padding: 15px 0;
					font-size: 16px;
					font-weight: 700;
					color: #fff;
					position: relative;
					display: inline-block;
					&::after {
						  content: '';
						  position: absolute;
						  top: 50%;
						  right: 30px;
						  width: 8px;
						  height: 8px;
						  border-top: 2px solid #fff;
						  border-right: 2px solid #fff;
						  transform: translateY(-50%) rotate(45deg);
					}
				}
			}
			
			.btn_buy a {
				background: #ff2828;
				border-radius: 50px;
			}
		}
	}

    /* pearent
    ---------------------------------------------------- */
    .pearent {
		margin-top: -100px;
		padding-bottom: 220px;
		text-align: center;
		background: url("../img/pc/bg_problem.png") no-repeat;
		background-size: cover;
		
		.section__inner {
			padding-top: 60px;
			padding-bottom: 80px !important;
			background: url("../img/pc/bg_pearent.png") no-repeat center 130px;
			background-size: 100% auto;
\		}
		
		.catch {
			margin-bottom:70px;
		}
		
        h2 {
            font-size: min(1.4vw, 20px);
			font-weight: 700;
            line-height: 1.4;
			color: #284e92;


            &::before {
				margin-right: 15px;
				content: "＼";
            }
            &::after {
				margin-left: 15px;
				content: "／";
            }
		}
		.btn_type {
			width: 517px;
			margin: 20px auto;
			border-radius: 50px;
			background: #fff;
			box-shadow: 0 0 12px #b9b5b5;
			
			ul {
				padding: 5px;
				display:flex;
				justify-content: space-between;
			}
			li {
				width: 50%;
				 a {
					width: 100%;
					padding: 15px 0;
					font-size: min(1.4vw, 20px);
					font-weight: 700;
					text-align: center;
					border-radius: 50px;
					color: #9e9e9e;
					display: block;
				}
			}

			li.active a {
				background: #284e92;
				color: #fff;
			}
			li.active a {
				color: #fff;
			}
		}
		h3 {
			max-width: 535px;
			margin: 30px auto;
			font-size: min(2.43vw, 35px);
			font-weight: 700;
			line-height: 1.49;
			letter-spacing: 0.004em;
			
			span {
				padding: 0 5px;
				background: linear-gradient(to right, #9db5f0 0%, #b4ece9 100%);
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: 100% 40%;
				line-height: 1.3;
				display: inline-block;
			}
				&::after {
					content: '\A';
					white-space: pre-wrap;
				}
		}

		p {
			font-size: min(1.04vw, 15px);
			line-height: 2em;
			}
		
		.btn_link {
			width: 302px;
			margin: 70px auto 0;
			
			ul {
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
			}
			
			li {
				width: 100%;
				border-radius: 50px;
				a {
					width: 100%;
					padding: 15px 0;
					font-size: 16px;
					font-weight: 700;
					color: #fff;
					position: relative;
					display: inline-block;
					&::after {
						  content: '';
						  position: absolute;
						  top: 50%;
						  right: 30px;
						  width: 8px;
						  height: 8px;
						  border-top: 2px solid #fff;
						  border-right: 2px solid #fff;
						  transform: translateY(-50%) rotate(45deg);
					}
				}
			}
			
			.btn_buy a {
				background: #ff2828;
				border-radius: 50px;
			}
		}
	}
	
	/* relief
    ---------------------------------------------------- */
    .relief {
		margin-top: -210px;
		text-align: center;
		position: relative;
		z-index: 111;
		
			.section__inner {
            	padding-bottom: 0 !important;
			}
		
			.relief_area {
			width: 100%;
			max-width: 1060px;
			margin: 0 auto;
			position: relative;
		
				&::before {
					content: "";
					width: 90px;
					height: 103px;
					background: url("../img/pc/icon_4years.png") no-repeat;
					background-size: contain;
					position: absolute;
					top: -60px;
					right: 10px;
				}
				.box_relief {
					width: calc(100% - 60px);
					margin: 0 auto;
					border-radius: 10px;
					box-shadow: 0 0 12px #b9b5b5;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					background: #fff;
			
				.relief_img {
					width: 45%;
					max-width: 407px;
					overflow: hidden;
			}
			.relief_txt {
				width: 50%;
				padding: 20px 40px;
				text-align: left;
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				h2 {
					margin: 0 0 10px;
					font-size: min(1.2vw, 18px);
					text-align: left;
					
					img{
						margin-right: 10px;
						margin-bottom: 2px;
					}
				}
				
				.price {
					margin-bottom: 10px;
					font-size: min(3.5vw, 50px);
					font-family: "din-2014", sans-serif;
					font-weight: 600;
					line-height: 1;
					letter-spacing: 0;
					color: #284e92;
					
					span {
						margin-left: 5px;
						font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", sans-serif;
						font-size: min(1.4vw, 20px);
						letter-spacing: 0.004em;
					}
				}
				
				p {
					margin-bottom: 10px;
					font-size: min(1.04vw, 15px);
				}
				
				ul {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
				}
				
				li {
					margin-right: 7px;
					margin-bottom: 7px;
					padding: 5px 15px;
					font-size: min(1.04vw, 15px);
					font-weight: bold;
					color: #284e92;
					background: #e6e7ff;
					border-radius: 10px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					
					&::before {
						width: 21px;
						height: 21px;
						margin-right: 5px;
						content: "";
						display: block;
						background: url("../img/pc/mrk_check.png") no-repeat;
					}
				}

				}
				}
		}
	}
		
	/* reassurance
    ---------------------------------------------------- */
    .reassurance {
		margin-top: -210px;
		text-align: center;
		border-top-left-radius: 50px;
		border-top-right-radius: 50px;
		background: url("../img/pc/bg_reassurance.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
		z-index: 111;
		
		.layer_reassurance {
			background: url("../img/pc/layer_reassurance.png") repeat-x bottom;
		}
		.wrap_heading {
			width: 432px;
			margin: -130px auto 60px;
			padding-top: 50px;
		    overflow: hidden;
			.heading {
				width: 432px;
				height: 80px;
				padding-top: 5px;
				background-color: #284e92;
				position: relative;
				border-radius: 10px;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				
				&::before {
					width: 200px;
					height: 100px;
					content: '';
					position: absolute;
					display: inline-block;
					border-radius: 50%;
					background: #284e92;
					top: -20px;
					left: 50%;
					transform: translateX(-50%);
				}
			h2 {
				font-size: min(2.43vw, 35px);
				font-weight: 700;
				line-height: 1.2;
				letter-spacing: 0.014em;
				position: relative;
				z-index: 1;
				color: #fff;

				span {
					font-size: min(1.3vw, 18px);
					letter-spacing: 0.01em;
					display: block;
				}
			}
			}	
		}
		
		.weap_reassurance {
			h3 {
				margin-bottom: 30px;
				font-size: min(2vw, 30px);
				font-family:  "din-2014", YuGothic, 游ゴシック, ＭＳ Ｐゴシック, MS P Gothic, MS-PGothic, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, arial, helvetica, clean, sans-serif;
				font-weight: 700;
				font-style: normal;
				letter-spacing: 0.004em;
				text-align: center;
				color: #284e92;
				
				span {
					font-size: min(4vw ,60px);
					font-family: "din-2014", sans-serif;
					font-weight: 600;
					line-height: 1;
					display: block;
				}
			}

			.flexwrap {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			.box_reassurance_shadow {
				margin-bottom: 60px;
				border: 5px solid transparent;
				border-radius: 20px;
				background-image: 
					linear-gradient(to bottom, #b4ece9, #93a5cf);
				background-origin: border-box;
				background-clip: padding-box, border-box;
				position: relative;
				top: 8px;
				left: 8px;
				
			}
			.box_reassurance {
				padding: 0 70px 50px;
				text-align: left;
				border: 3px solid transparent;
				border-radius: 20px;
				background-image: 
					linear-gradient(#fff, #fff),
					linear-gradient(to bottom, #b4ece9, #93a5cf);
				background-origin: border-box;
				background-clip: padding-box, border-box;
				position: relative;
				top: -8px;
				left: -8px;
			
				h4 {
					margin: 50px 0 35px;
					padding: 0 5px;
					font-size: min(1.74vw, 25px);
					font-weight: 700;
					line-height: 1.2;
					letter-spacing: 0.004em;
					text-align: left;
					background:linear-gradient(transparent 60%, #c8e6f5 60%);
					display: inline-block;
					
					&.plane {
						width: 100%;
						margin: 50px auto 35px;
						font-size: min(1.3vw, 18px);
						line-height: 1.6;
						text-align: center;
						background: none;
					}
				}
				
				.box_border {
					margin-bottom: 15px;
					border: 2px solid #c8e6f5;
					border-radius: 10px;
					display: flex;
					justify-content: space-between;
					
					&.wide {width: calc(100% - 60px);padding: 25px 30px;}
					&.half {width: calc((100% - 220px)/2);display: block;padding: 25px 50px;}
					&.mark {display: block;padding: 10px 25px;}
					.title {
						margin-bottom: 15px;
						font-size: min(1.74vw, 25px);
						font-weight: 700;
						letter-spacing: 0.004em;
						background-size: contain;
						}
					p {
						font-size: min(1.04vw, 15px);
						font-weight: 500;
						line-height: 2;
						letter-spacing: 0.004em;
						}
				}
				
				.spec {
					.left_area {
						width: 45%;
							.title {
								padding-left: 55px;
								background: url("../img/pc/icon_cpu.png") no-repeat left 50%;
							}
					}
					.right_area {
						width: 55%;
							ul {
								margin-bottom: -10px;
								display: flex;
								flex-wrap: wrap;
								justify-content: space-between;
							}
							li {
								width: calc((100% - 10px)/2);
								margin-bottom: 10px;
								padding: 20px 0;
								background: #d7f1ff;
								border-radius: 10px;
								text-align: center;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;

								span {
									width: 100%;
									margin-top: 20px;
									font-size: min(1.1vw, 16px);
									font-weight: 500;
									line-height: 1.25;
									letter-spacing: 0.075em;
									display: block;
								}
							}
					}
				}
				.weight {
					.title {
						padding-left: 55px;
						background: url("../img/pc/icon_weight.png") no-repeat left 50%;
					}
				}
				.touch {
					.title {
						padding-left: 40px;
						background: url("../img/pc/icon_touch.png") no-repeat left 50%;
					}
				}
				.mark {
					.title {
						margin-bottom: 0;
						padding-left: 30px;
						background: url("../img/pc/icon_mark.png") no-repeat left 50%;
					}
				}
				
			}
			.left_area {
				width: 45%;
			}
			.right_area {
				width: 53%;
			}
		}
	}
	
	/* comparison
    ---------------------------------------------------- */
    .comparison {
		margin-top: -80px !important;
        text-align: center;
		border-radius: 80px;
        background: url(../img/pc/bg_comparison.png) no-repeat #fff;
		background-size: 100% auto;
		position: relative;
		z-index: 111;
		
		.section_inner {
			padding-bottom: 70px;
		}
		
		.box_comparison {
			max-width: 1160px;
			margin: 80px auto 40px;
			padding: 40px 0 20px;
			background: url("../img/pc/bg_attention.png") no-repeat 95% 70px #ffffc8;
			border-radius: 20px;
			
			.heading_comparison {
				max-width: 1000px;
				margin: -95px auto 30px;
				
			}
			h2 {
				margin: 0 auto 20px;
				padding: 0 5px;
				background: linear-gradient(to right, #9db5f0 0%, #b4ece9 100%);
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: 100% 40%;
				line-height: 1.3;
	            display: inline;
			}
			p {
				width: 100%;
				margin-bottom: 40px;
				font-size: min(1.04vw, 15px);
			}
			.box_comparison_flex {
				width: calc(100% - 80px);
				margin: auto;
				padding: 0 40px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			.hd_left, .hd_right {width: 48%;margin-top: 0;}
			.balloon {
				width: 80%;
				max-width: 330px;
				margin: 1.5em 0;
				padding: 7px 10px;
				color: #fff;
				font-size: min(1.9vw, 26px);
				font-weight: 700;
				letter-spacing: 0.004em;
				background: #e0edff;
				border-radius: 50px;
				position: relative;
				display: inline-block;
			}
			.balloon:before {
				content: "";
				position: absolute;
				top: 100%;
				left: 50%;
				margin-left: -15px;
				border: 15px solid transparent;
				border-top: 15px solid #e0edff;
			}
			.gray {
				background: #5c6986;
			}
			.gray:before {
				border: 11px solid transparent;
				border-top: 11px solid #5c6986;
			}
			.blue {
				background: #22469a;
			}
			.blue:before {
				border: 11px solid transparent;
				border-top: 11px solid #22469a;
			}
			.box_left_wrap {
				width: 48%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
			}
			.box_left {
				width: 100%;
				margin: 0 8px 8px 0;
				padding: 20px 0;
				color: #fff;
				background: #7f889c;
				border-radius: 20px;
				box-shadow: 8px 8px #5c6986;
				h4 {
					margin-bottom: 17px;
					font-size: min(1.6vw, 24px);
					font-weight: 700;
					line-height: 1em;
					letter-spacing: 0.004em;
				}
			}
			.box_right_shadow {
				width: calc(48% - 8px);
				border: 5px solid transparent;
				border-radius: 20px;
				background-image: linear-gradient(to bottom, #b4ece9, #93a5cf);
				background-origin: border-box;
				background-clip: padding-box, border-box;
				position: relative;
				top: 4px;
				left: 4px;
			}
			.box_right {
				width: calc(100% - 4px);
				margin-bottom: 0;
				padding: 20px 30px;
				background: #fff;
				border-radius: 20px;
				box-sizing:border-box;
				position: relative;
				top: -10px;
				left: -8px;
				
				h4 {
					width: 210px;
					margin: 0 auto;
					padding: 15px 0;
					font-size: min(1.6vw, 24px);
					font-weight: 700;
					line-height: 1em;
					letter-spacing: 0.004em;
					color: #fff;
					background: #ff2828;
					border-radius: 50px;
				}
				.price {
					margin: 30px 0;
					font-size: min(2.3vw, 33px);
					line-height: 1em;
					color: #284e92;
					span {
						font-family: "din-2014", sans-serif;
						font-size: min(4vw, 60px);
						font-weight: 600;
					}
					span.tax {
						font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", sans-serif;
						font-size: min(1.1vw, 16px);
						font-weight: 400;
					}
				}
				ul {
					width: 86%;
					margin: 0 auto 30px;
				}
				li {
					margin-bottom: 10px;
					padding-left: 30px;
					font-size: min(1.1vw, 16px);
					font-weight: 700;
					line-height: 21px;
					letter-spacing: 0.008em;
					color: #22469a;
					text-align: left;
					background: url(../img/pc/icon_mark.png) no-repeat left 50%;
				}
				p {
					font-size: min(0.8vw, 12px);
					font-weight: 500;
					text-align: left;
					line-height: 1.3;
					letter-spacing: 0.006em;
				}
			}
			.box_left p,
			.box_right p {
				margin-bottom: 0;
				font-size: min(1.04vw, 15px);
				font-weight: 700;
				letter-spacing: 0.006em;
			}
			.comment {
				width: 48%;
				margin-top: 60px;
				position: relative;
			}
			.comment p {
				font-size: min(1.74vw, 25px);
				font-weight: 700;
				line-height: 1.2;
				letter-spacing: 0.006em;
			}
			.comment::before {
				content: '';
				width: 3px;
				height: 40px;
				margin: 0 auto;
				background: #93a5cf;
				position: absolute;
				top: -55px;
				left: 0;
				right: 0;
			}
			.comment.left {
				margin-top: 70px;
				background: none;
			}
			.comment.right {
				margin-top: 70px;
				background: url("../img/pc/bg_comment_r.png") no-repeat right bottom;
			}
			.comment.right p {
				padding: 0 8px;
				font-size: min(2.6vw, 40px);
				font-weight: 700;
				background: linear-gradient(to right, #9db5f0 0%, #b4ece9 100%);
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: 100% 40%;
				line-height: 1.3;
				display: inline;
			}
		}
		.box_comparison::after {
			content: '';
			width: 170px;
			height: 137px;
			position: absolute;
			background: url("../img/pc/bg_comment_l.png") no-repeat;
			bottom: 40px;
			left: 6%;
			}

	}
	
	/* movie
    ---------------------------------------------------- */
    .movie {
		margin-top: -170px;
		text-align: center;
		border-top-left-radius: 60px;
		border-top-right-radius: 60px;
		background: url("../img/pc/bg_movie.png") no-repeat;
		background-size: 100% 100%;
		position: relative;
		z-index: 11;
		
		.layer_movie {
			padding-top: 200px;
			background: url("../img/pc/layer_movie.png") repeat-x bottom;
		}
		.section__inner {
			padding-bottom: 105px;
		}
		.short_movie {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-size: 100% auto;
			
			h2 {
				padding: 0 5px;
				font-size: min(2.43vw, 35px);
				font-weight: 700;
				background: linear-gradient(to right, #a5e5ee 0%, #f2daeb 100%);
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: 100% 40%;
				line-height: 1.3;
				display: inline;
				
				span {
					background: none;
					display: inline;
				}
			}
			.box_movie {
				width: 27%;
			}
		}
		.area_merit {
			width: 100%;
			max-width: 1000px;
			margin: 30px auto 90px;
			display: flex;
				flex-direction: row;
			justify-content: space-between;
			
			.box_merit {
				width: 48%;
				max-width: 480px;
				background: #fff;
				border-radius: 20px;
				
				.merit_img {
				}
				
				.merit_txt {
					padding: 20px;
					
					h3 {
						margin: 0 auto 10px;
						padding: 0 5px;
						font-size: min(1.74vw, 25px);
						font-weight: 700;
						background: linear-gradient(to right, #a5e5ee 0%, #f2daeb 100%);
						background-repeat: no-repeat;
						background-position: center bottom;
						background-size: 100% 40%;
						line-height: 1.3;
						display: inline;
					}
					p {
						margin-bottom: 15px;
						font-size: min(1.04vw, 15px);
					}

					.merit_review {
						display: flex;
						justify-content: space-between;
						
						.icon {
							width: 30%;
						}
						
						.txt {
							width: 60%;
							padding: 10px;
							font-size: min(1.04vw, 15px);
							line-height: 1.46;
							letter-spacing: 0.006em;
							text-align: left;
							background: #fbfbb9;
							position: relative;
							display: inline-block;
							
							&::before {
								  content: "";
								  position: absolute;
								  top: 45%;
								  left: -20px;
								  margin-top: -15px;
								  border: 7px solid transparent;
								  border-right: 15px solid #fbfbb9;
								}
							
							img {
								padding: 5px;
							}
							
							p {
								margin: 10px 0 0;
							}
						}
					}
				}
			}			
		}
	}
    .movie.guardian {
		margin-top: -60px;
		padding-top: 0;
		background: url("../img/pc/bg_movie_guardian.png") no-repeat center bottom;
		background-size: auto;

		.section__inner {
			padding: 50px 20px 58px;
		}
		.short_movie {
			background-size: 100% auto;
			
			.box_movie {
				width: 27%;
			}
			h2 {
				margin: 0 auto 30px;
			}
		}
	}
	
	/* point
    ---------------------------------------------------- */
    .point {
		margin-top: -70px !important;
        text-align: center;
		border-radius: 50px;
        background: url(../img/pc/bg_point.png) no-repeat #fff;
		background-size: 100% auto;
		position: relative;
		z-index: 11;
		
		.heading_point {
			position: absolute;
			top: -38px;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
		.layer_point {
			width: 100%;
			max-width: 1600px;
			margin: 0 auto;
			background: url("../img/pc/layer_point.png") no-repeat;
			background-size: 100% auto;
		}
		.section__inner {
			width: 100%;
			max-width: 1600px;
			padding: 70px 0 0 !important;
		}
		h2 {
			padding: 0 5px;
			font-size: min(2vw, 30px);
			font-weight: 700;
				background: linear-gradient(to right, #a5e5ee 0%, #f2daeb 100%);
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: 100% 40%;
				line-height: 1.3;
				display: inline;
			
			span {
				background: none;
			}
		}		
		.box_point {
			width: 100%;
			box-sizing: border-box;
			
			&._01 {
				margin: 4% 0 0;
				padding-top: 3%;
				background: url("../img/pc/bg_point01.png") no-repeat;
				background-size: 100% auto;
				aspect-ratio: 160 / 37;
			}
			&._02 {
				margin: -5% 0 0;
			}
			&._03 {
				margin: -1% 0 1%;
				padding-bottom: 2%;
				background: url("../img/pc/bg_point03.png") no-repeat;
				background-size: 100% auto;
				aspect-ratio: 160 / 30;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
			}
			
			.wrap_sp .wrap_sp_img {display: none;}
			.wrap_sp .wrap_sp_txt {
				width: 100%;
				display: inline;
			}
			
			.number {
				width: 10%;
				height: 30px;
				padding: 0;
				margin: 0;
				line-height: 30px;
				font-size: min(1.4vw, 20px);
                font-family: "din-2014", sans-serif;
				font-weight: 600;
				position: relative;
				display: inline-block;
			}
/*			.number {
				width: 10%;
				height: 30px;
				padding: 0;
				margin: 0;
				line-height: 30px;
				background-color: #22469a;
				font-size: min(1.4vw, 20px);
                font-family: "din-2014", sans-serif;
				font-weight: 600;
				color: #fff;
				text-align: center;
				position: relative;
				display: inline-block;

					&::before {
					  content: "";
					  position: absolute;
					  left: -15px;
					  top: 0;
					  border-right: 15px solid #22469a;
					  border-top: 15px solid transparent;
					  border-bottom: 15px solid transparent;
					}

					&::after {
					  content: "";
					  position: absolute;
					  right: -15px;
					  top: 0;
					  border-left: 15px solid #22469a;
					  border-top: 15px solid transparent;
					  border-bottom: 15px solid transparent;
					}
				
				
			}*/
			
			h3 {
				width: 100%;
				margin: 10px auto;
				font-size: 1.6vw;
				font-weight: 700;
				color: #22469a;
				position: relative;
					
			}
			p {
				width: 100%;
				margin: 0;
				font-size: min(1.04vw, 15px);
				line-height: 1.6;
			}
			
			.btn_sim {
				margin: 15px auto 0;

				a {
					width: 21%;
                    max-width: 255px;
                    padding: 0.6% 0;
                    font-size: min(1.1vw, 16px);
                    font-weight: 700;
                    color: #22469a;
					border: 2px solid #284e92;
					border-radius: 50px;
					box-shadow: 4px 4px #284e92;
                    position: relative;
                    display: inline-block;
					
					&::after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        right: 30px;
                        width: 8px;
                        height: 8px;
                        border-top: 2px solid #284e92;
                        border-right: 2px solid #284e92;
                        transform: translateY(-50%) rotate(45deg);
                    }
                }
			}
		}		
		._summary {
			width: 85%;
			max-width: 938px;
			margin: 20px auto 0;
			background: url("../img/pc/img_point.png") no-repeat;
			background-size: contain;
			aspect-ratio: 938 / 385;
			position: relative;
			
			.summary_txt {
				max-width: 580px;
				text-align: left;
				position: absolute;
				bottom: 15px;
				right: 0;
				
				span {
					font-size: min(0.8vw, 12px);
					text-align: left;
					display: block;
				}

			}
		}
		
		.open-btn {
	        width: 22%;
			max-width: 255px;
			margin: 20px auto 0;
			padding: 10px 0;
			font-size: min(1.04vw, 15px);
			font-weight: 700;
			line-height: 1;
			letter-spacing: 0.006em;
			color: #22469a;
			background: #fff;
			border: 2px solid #284e92;
			border-radius: 50px;
			box-shadow: 4px 4px #284e92;
			position: relative;
			display: inline-block;
			cursor: pointer;
    	}
		.close-btn {
			top: 130px;
			right: 100px;
			z-index: 9999;
		}
		.box_modal-sim {
			width: 100%;
			max-width: 1100px;
			margin: 0 auto 30px;
			padding: 10px 20px 1px;
			text-align: left;
			background: #fff;
			border-radius: 10px;
			box-sizing: border-box;
			
			h3 {
				font-size: min(1.74vw, 25px);
			}
			dt,dd,p {
				font-size: min(1.04vw, 15px);
			}
		}
		.modal-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
    }
		
	/* support
    ---------------------------------------------------- */
    .support {
		margin-top: -80px;
		padding: 80px 0 160px;
        text-align: center;
        background: url(../img/pc/bg_support.png) no-repeat;
		background-size: 100% 100%;
		
		
		h2 {
			margin: 10px auto 70px;
			font-size: min(2vw, 30px);
			font-weight: 700;
			line-height: 1.3;
		}
		
		.support_area {
			max-width: 1000px;
			margin: 20px auto;
			display: flex;
			justify-content: space-between;
			
			.box_support {
				width: 43.5%;
				padding: 20px 20px 0;
				background: url("../img/pc/bg_box_support.png") no-repeat #fff;
				border-radius: 20px;
				position: relative;
				display: flex;
                flex-direction: column;
                justify-content: space-between;
				
				&::before {
					width: 33px;
					height: 58px;
					content: "";
					background: url("../img/pc/icon_clip.png") no-repeat;
					display: block;
					position: absolute;
					top: -18px;
					right: 10px;
				}
				
				h3 {
					margin: 60px auto 10px;
					font-size: min(1.74vw, 25px);
					font-weight: 700;
				}
				
				p {
					font-size: min(1.04vw, 15px);

				}
				
				.txt {
					margin-top: 30px;
					
					li {
						margin-bottom: 10px;
						padding: 10px;
						font-size: min(1.04vw, 15px);
						text-align: left;
						background: #fff;
						border: 1px solid #edf3f4;
						border-radius: 5px;
					
						span {
							padding-left: 30px;
							font-size: min(1.4vw, 20px);
							font-weight: 700;
							color: #284e92;
							background: url("../img/pc/mrk_check.png") no-repeat left 50%;
							display: block;	
						}
					
						&.attention {
							line-height: 1.3;
							background: #f0f0f0;
							
							span {
								margin-bottom: 5px;
								padding-left: 28px;
								font-size: min(1.04vw, 15px);
								font-weight: 700;
								line-height: 20px;
								color: #f90606;
								background: url("../img/pc/mrk_attention.png") no-repeat left 50%;
								display: block;	
							}
						}
				}
				}
				
				.txt_guarantee {
					text-align: left;

					a {
						color: #0084e0;
						text-decoration: underline;
					}
				}
				.txt_support {
					text-align: center;
				}
				
				.icon {
					width: 100%;
					max-width: 377px;
					margin: 40px auto 0;
					display: flex;
					justify-content: space-between;
					
					li {
						width: 30%;
					}
				}
				
				.img_students {
					margin-top: 24px;
				}
			}
			
			._01 h3::before {
				width: 141px;
				height: 141px;
				content: "";
				background: url("../img/pc/icon_guarantee.png") no-repeat;
				display: block;
				position: absolute;
				top: -70px;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
			._02 h3::before {
				width: 141px;
				height: 141px;
				content: "";
				background: url("../img/pc/icon_support.png") no-repeat;
				display: block;
				position: absolute;
				top: -70px;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
			
		}
	}
	
	/* campus
    ---------------------------------------------------- */
    .campus {
		margin-top: -100px;
        text-align: center;
		border-radius: 50px;
		background: #ffffc8;
		position: relative;
		z-index: 1;
		
		.heading_campus {
			width: 94%;
			max-width: 1024px;
			position: absolute;
			top: -45px;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
		.section__inner {
			max-width: 100%;
			padding: 40px 0 58px !important;
		}
		h2 {
			margin: 60px auto 10px;
			font-size: min(2vw, 30px);
			font-weight: 700;
		}
		p {
			font-size: min(1.1vw, 16px);
			font-weight: 500;
		}
		
		.wrap_flow {
			padding: 0;
			display: block;
			
			.img_campus {
				width: 100%;
				height: auto;
				margin: 60px auto 30px;
				position: relative;

				&::before {
					content: "";
					position: absolute;
					top: 50%;
					left: 0;
					width: 100%;
					height: 12px;
					background: #b0e1fa;
					transform: translateY(-50%);
				}
				ul {
					width: 90%;
					max-width: 1000px;
					margin: 0 auto;
					padding: 0 20px;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					position: relative;
					z-index: 1;
				}
				li {
					width: 30%;
					position: relative;

					&._01::before {
						width: 134px;
						height: 132px;
						content: '';
						background: url("../img/pc/icon_img_campus.png") no-repeat;
						display: block;
						position: absolute;
						top: -73px;
					}
					&._01::after,
					&._02::after,
					&._03::after {
						margin: 0 auto;
						padding: 5px 0;
						font-size: 17px;
						line-height: 17px;
						color: #6acdff;
						background: #fdfd59;
						border: 3px solid #b0e1fa;
						border-radius: 20px;
						position: absolute;
						bottom: -7px;
						left: 0;
						right: 0;
					}
					&._01::after {
						width: 121px;
						content: '08:50 通学';
					}
					&._02::after {
						width: 121px;
						content: '10:30 講義';
					}
					&._03::after {
						width: 154px;
						content: '13:00 空きコマ';
					}
					&._02:nth-child(2) {
                    	margin: 0;
					}
				}
			}
			.txt_campus {
				width: 100%;
				max-width: 1000px;
				margin: 0 auto;
				padding: 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				
				.box_txt {
					width: 30%;
					padding: 0 10px;
					font-size: min(1.04vw, 15px);
					text-align: left;
					box-sizing: border-box;

					span {
						font-size: min(1.4vw, 20px);
						font-weight: 700;
						text-align: center;
						display: block;
					}
				}
			}
		}
	}
		
	/* detail
    ---------------------------------------------------- */
    .detail {
		margin-top: 60px;
		text-align: center;
		
		h2 {
			margin: 0 auto 30px;
			font-size: min(2.6vw, 40px);
			font-weight: 700;
		}
		
		.detail_area {
			width: calc(100% - 60px);
			max-width: 1000px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			
			.img_detail {
				width: 45%;
				
				.slide {
					position: relative;
					margin: 0;
					padding: 0;
				}
				.slide .item {
					position: relative;
					height: 100%;
				}
				.slide .item::before {
					display: block;
					padding-top: 100%;/* 縦横 */
					content: "";
					position: relative;
					overflow: hidden;
				}
				.slide .item img {
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					margin: auto;
					width: 100%;
				}
				.slide > .slick-list,
				.slide > .slick-list > .slick-track,
				.slide > .slick-list > .slick-track > .slick-slide > div {
					position: relative;
					height: 100%;
				}
				.slide-navigation {
					position: relative;
					margin-top: 5px;
					padding: 0;
					display: flex;
					justify-content: space-between;
				}
				.slide-navigation .item {
					position: relative;
					cursor: pointer;
					overflow: hidden;
					width: calc(97% / 4);
					height: 100%;
					padding: 0;
				}
				.slide-navigation .item::before {
					display: block;
					padding-top: 100%;
					content: "";
				}
				.slide-navigation .item img {
					position: absolute;
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					margin: auto;
					width: 100%;
				}
				.slide-navigation .current::after {
					position: absolute;
					top: 0;
					left: 0;
					display: block;
					width: 100%;
					height: 100%;
					content: "";
					opacity: 0.5;
					background: #000;
				}					
				.slick-next::before,
				.slick-prev::before {
					width: 30px;
					height: 30px;
					border-top: 2px solid #000;
					border-right: 2px solid #000;
					position: absolute;
					display: block;
				}
				.slick-next {right: -30px;}
				.slick-next::before {transform: rotate(45deg);}
				.slick-prev {left: -30px;}
				.slick-prev::before {transform: rotate(-135deg);}
			}
			
			.txt_detail {
				width: 45%;
				text-align: left;
				
				h3 {
					font-size: min(1.4vw, 20px);
					font-weight: 700;
				}
				.price {
					font-size: min(1.4vw, 20px);
					font-weight: 700;
					color: #ff2828;
					
					span {
						font-family: "din-2014", sans-serif;
						font-size: 3vw;
					}
				}
				
				.btn_buy a {
					width: 278px;
					margin-bottom: 10px;
					padding: 10px 0;
					font-size: min(1.04vw, 15px);
					text-align: center;
					color: #fff;
					background: #ff2828;
					border-radius: 50px;
					display: block;
					position: relative;
					
					&::after {
                        content: '';
                        position: absolute;
                        top: 50%;
                        right: 30px;
                        width: 8px;
                        height: 8px;
                        border-top: 2px solid #fff;
                        border-right: 2px solid #fff;
                        transform: translateY(-50%) rotate(45deg);
                    }
				}
				
				p {
					font-size: min(0.8vw, 12px);
				}
				
				.icon_area {
					margin-top: 20px;
					padding: 20px;
					background: #f7f7f7;
					border: 1px solid #c8c8c8;
					border-radius: 10px;
					
					h3 {
						margin-bottom: 10px;
						padding-left: 10px;
						border-left: 3px solid #2b2b2b;
						font-size: min(1.04vw, 15px);
						font-weight: 400;
						line-height: 1em;
						
						span {
							margin-top: 5px;
							font-weight: 700;
							display: block;
						}
					}
					
					ul {
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;
					}
					li {
						margin-right: 10px;
						margin-bottom: 5px;
						padding: 5px 7px;
						font-size: min(0.86vw, 13px);
						line-height: 1em;
						border: 1px solid #c8c8c8;
						border-radius: 5px;
						background: #fff;
					}
				}
				
				.bnr_sim,
				.bnr_guarantee {
					margin-top: 10px;
					padding: 20px 25px 20px 45px;
					background: #f7f7f7;
					border: 1px solid #c8c8c8;
					border-radius: 10px;
					font-size: min(1.04vw, 15px);
					font-weight: 400;
					line-height: 1em;
					letter-spacing: 0.004em;
				}
				.bnr_sim {
					background: url("../img/pc/icon_detail01.png") no-repeat 15px 50% #f7f7f7;
				}
				.bnr_guarantee {
					background: url("../img/pc/icon_detail02.png") no-repeat 15px 50% #f7f7f7;
				}
				
				.btn_detail {
					margin-top: 15px;
					font-size: min(1.04vw, 15px);
					
					
					a {
						color: #0084e0;
						text-decoration: underline;
					}
				}
			}

		}
	}

	/* about
    ---------------------------------------------------- */
    .about {
		margin-top: 60px;
		text-align: center;
		
		.section__inner {
			width: 100%;
			max-width: 1000px;
			margin: auto;
			padding: 0px 20px 58px;
			box-sizing: border-box;
		}
		
		h2 {
			margin: 0 auto 30px;
			font-size: min(2.6vw, 40px);
			font-weight: 700;
		}
		p {
			font-size: min(1.1vw, 16px);
			font-weight: 500;
			line-height: 1.8;
		}
		
		h3 {
			margin-top: 50px;
			font-size: min(1.74vw, 25px);
			font-weight: 700;
			text-align: left;
		}
		
		.about_area {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: stretch;
			
			.box_about {
				width: 100%;
				margin-bottom: 10px;
				border-right: 1px solid #b6b6b6;
				border-bottom: 1px solid #b6b6b6;
				border-left: 1px solid #b6b6b6;
				
				h4 {
					padding: 10px;
					font-size: min(1.4vw, 20px);
					font-weight: 500;
					text-align: left;
					letter-spacing: 0.07em;
					color: #fff;
					background: #22469a;
				}
				.txt {
					padding: 5px;
					text-align: left;
					
					p {
						margin-top: 10px;
						padding: 0 5px;
						font-size: min(1.04vw, 15px);
						font-weight: 500;
						letter-spacing: 0.08em;
					}
					
					span {
						margin-top: 10px;
						font-size: min(1.4vw, 20px);
						font-weight: 700;
						color: #c70557;
					}
					
					.attention {
						padding: 0;
						font-size: 12px;
						letter-spacing: 0;
						color: #e82121;
					}
				}
				
				&._01 p {
					text-align: right;
				}
				&._02,
				&._03,
				&._04 {
					width: calc(98% /3);
				}
				
				&._02 span {
					height: 31px;
					padding-left: 43px;
					background: url("../img/pc/icon_support02.png") no-repeat 5px 50%;
					display: block;
				}
				&._03 span {
					height: 31px;
					padding-left: 43px;
					background: url("../img/pc/icon_support03.png") no-repeat 5px 50%;
					display: block;
				}
				&._04 span {
					height: 31px;
					padding-left: 43px;
					background: url("../img/pc/icon_support04.png") no-repeat 5px 50%;
					display: block;
				}
			}			
		}
		.disclaimer_area {
			dl {
				width: 100%;
				max-width: 1000px;
				margin: 30px auto;
				display: flex;
				flex-direction: row;
				text-align: left;
			}
			dt {
				width: 30%;
				padding: 30px 20px;
				font-size: min(1.3vw, 18px);
				background: #e4e4e4;
			}
			dd {
				width: 70%;
				padding: 40px 30px;
				border-top: 1px solid #e4e4e4;
				border-right: 1px solid #e4e4e4;
				border-bottom: 1px solid #e4e4e4;
				
				li {
					margin-bottom: 10px;
					font-size: min(1.04vw, 15px);
				}
			}
		}
	}
	
	/* レビュー
    ---------------------------------------------------- */
	.voice {
		margin-top: 0 !important;
		padding-bottom: 0 !important;
		
		.section__inner {
			padding: 0 20px 28px;
		}
		h2 {
			margin: 0 auto;
			font-size: min(2vw, 30px);
			font-weight: 700;
			text-align: center;
		}
		.filter_text {
			margin-top: 0;
			background-size: contain;
		}
		.revico-star .revico-star-graph-wrapper .revico-star-graph-label {
			white-space: nowrap;
		}
	}

	/* バナー
    ---------------------------------------------------- */
    .banner {
		text-align: center;
		
		.section__inner--banner {
			padding-top: 0 !important;
		}
	}
				
}

@media (min-width: 1024px) {
    /* fv
    ---------------------------------------------------- */
    .fv {
		padding: 50px 0 0;
		
        .fv__description {
			margin-top: 50px;
			
			&::before {
				height: 48px;
				top: -30px;
			}
		}
	}
	
	    /* catch_s
    ---------------------------------------------------- */
    .catch_s {
		margin-top: -210px;
		
		.section__inner {
			padding-top: 0px;
			padding-bottom: 0;
			background-image: url("../img/pc/bg_probrem_l.png"),url("../img/pc/bg_probrem_r.png");
			background-position: left center, right center;
			background-repeat: no-repeat;
		}
	}
	.catch_g {
		margin-top: -210px;
	}
	
	/* relief
    ---------------------------------------------------- */
    .relief {
		text-align: center;
		position: relative;
		z-index: 111;
		
			.section__inner {
            	padding-bottom: 0 !important;
			}
		
			.relief_area {
			width: 100%;
			max-width: 1060px;
			margin: 0 auto;
			position: relative;
		
				&::before {
					content: "";
					width: 130px;
					height: 150px;
					background: url("../img/pc/icon_4years.png") no-repeat;
					position: absolute;
					top: -75px;
					right: 0;
				}
				.box_relief {
					width: calc(100% - 60px);
					margin: 0 auto;
					border-radius: 10px;
					box-shadow: 0 0 12px #b9b5b5;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					background: #fff;
			
				.relief_img {
					width: 45%;
					max-width: 407px;
					overflow: hidden;
			}
			.relief_txt {
				width: 55%;
				padding: 20px 40px;
				text-align: left;
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				h2 {
					margin: 0 0 10px;
					font-size: min(1.2vw, 18px);
					text-align: left;
					
					img{
						margin-right: 10px;
						margin-bottom: 2px;
					}
				}
				
				.price {
					margin-bottom: 10px;
					font-size: min(3.5vw, 50px);
					font-family: "din-2014", sans-serif;
					font-weight: 600;
					line-height: 1;
					letter-spacing: 0;
					color: #284e92;
					
					span {
						margin-left: 5px;
						font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", sans-serif;
						font-size: min(1.4vw, 20px);
						letter-spacing: 0.004em;
					}
				}
				
				p {
					margin-bottom: 10px;
					font-size: min(1.04vw, 15px);
				}
				
				ul {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
				}
				
				li {
					margin-right: 7px;
					margin-bottom: 7px;
					padding: 5px 15px;
					font-size: min(1.04vw, 15px);
					font-weight: bold;
					color: #284e92;
					background: #e6e7ff;
					border-radius: 10px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					
					&::before {
						width: 21px;
						height: 21px;
						margin-right: 5px;
						content: "";
						display: block;
						background: url("../img/pc/mrk_check.png") no-repeat;
					}
				}

				}
				}
		}
	}
	
	/* movie
    ---------------------------------------------------- */
    .movie {
		margin-top: -210px;
		text-align: center;
		border-top-left-radius: 80px;
		border-top-right-radius: 80px;
		background: url("../img/pc/bg_movie.png") no-repeat;
		background-size: 100% 100%;
		
			.layer_movie {
				padding-top: 200px;
				background: url("../img/pc/layer_movie.png") repeat-x bottom;
			}
			.short_movie {
				margin-top: 30px;
				display: flex;
				flex-direction: column;
				align-items: center;
			
			h2 {
				padding: 0 5px;
				font-size: min(2.43vw, 35px);
				font-weight: 700;
				background: linear-gradient(to right, #a5e5ee 0%, #f2daeb 100%);
				background-repeat: no-repeat;
				background-position: center bottom;
				background-size: 100% 40%;
				line-height: 1.3;
				display: inline;
				
				span {
					background: none;
					display: inline;
				}
			}
		}
		
			.area_merit {
			width: 100%;
			max-width: 1000px;
			margin: 30px auto 90px;
			display: flex;
				flex-direction: row;
			justify-content: space-between;
			
			.box_merit {
				width: 48%;
				max-width: 480px;
				background: #fff;
				border-radius: 20px;
				
				.merit_img {
				}
				
				.merit_txt {
					padding: 30px;
					
					h3 {
						margin: 0 auto 10px;
						padding: 0 5px;
						font-size: min(1.74vw, 25px);
						font-weight: 700;
						background: linear-gradient(to right, #a5e5ee 0%, #f2daeb 100%);
						background-repeat: no-repeat;
						background-position: center bottom;
						background-size: 100% 40%;
						line-height: 1.3;
						display: inline;
					}
					p {
						margin-bottom: 15px;
						font-size: min(1.04vw, 15px);
					}

					.merit_review {
						display: flex;
						justify-content: space-between;
						
						.icon {
							width: 34%;
						}
						
						.txt {
							width: 66%;
							padding: 10px;
							font-size: min(1.04vw, 15px);
							line-height: 1.46;
							letter-spacing: 0.006em;
							text-align: left;
							background: #fbfbb9;
							position: relative;
							display: inline-block;
							
							&::before {
								  content: "";
								  position: absolute;
								  top: 50%;
								  left: -26px;
								  margin-top: -15px;
								  border: 7px solid transparent;
								  border-right: 20px solid #fbfbb9;
								}
							
							img {
								padding: 5px;
							}
							
							p {
								margin: 10px 0 0;
							}
						}
					}
				}
			}			
		}
	}
    .movie.guardian {
		padding-top: 30px;
		background: url("../img/pc/bg_movie_guardian.png") no-repeat center bottom;
		background-size: auto;

		.layer_movie {
				padding-top: 200px;
				background: none;
			}
	}
		
	/* comparison
    ---------------------------------------------------- */
	.comparison {
		.box_comparison {
			.box_comparison_flex {
				width: calc(100% - 120px);
			}
		}
	}

	/* support
    ---------------------------------------------------- */
    .support {
		margin-top: -80px;
		padding: 80px 0 160px;
        text-align: center;
        background: url(../img/pc/bg_support.png) no-repeat;
		background-size: 100% 100%;
		
		
		h2 {
			margin: 60px auto 100px;
			font-size: min(2vw, 30px);
			font-weight: 700;
			line-height: 1.3;
		}
		
		.support_area {
			max-width: 1000px;
			margin: 20px auto;
			display: flex;
			justify-content: space-between;
			
			.box_support {
				width: 45%;
				padding: 20px 20px 0;
				background: url("../img/pc/bg_box_support.png") no-repeat #fff;
				border-radius: 20px;
				position: relative;
				display: flex;
                flex-direction: column;
                justify-content: space-between;
				
				&::before {
					width: 33px;
					height: 58px;
					content: "";
					background: url("../img/pc/icon_clip.png") no-repeat;
					display: block;
					position: absolute;
					top: -18px;
					right: 10px;
				}
				
				h3 {
					margin: 60px auto 10px;
					font-size: min(1.74vw, 25px);
					font-weight: 700;
				}
				
				p {
					font-size: min(1.04vw, 15px);

				}
				
				.txt {
					margin-top: 30px;
					
					li {
						margin-bottom: 10px;
						padding: 10px;
						font-size: min(1.04vw, 15px);
						text-align: left;
						background: #fff;
						border: 1px solid #edf3f4;
						border-radius: 5px;
					
						span {
							padding-left: 30px;
							font-size: min(1.4vw, 20px);
							font-weight: 700;
							color: #284e92;
							background: url("../img/pc/mrk_check.png") no-repeat left 50%;
							display: block;	
						}
					
						&.attention {
							line-height: 1.3;
							background: #f0f0f0;
							
							span {
								margin-bottom: 5px;
								padding-left: 28px;
								font-size: min(1.04vw, 15px);
								font-weight: 700;
								line-height: 20px;
								color: #f90606;
								background: url("../img/pc/mrk_attention.png") no-repeat left 50%;
								display: block;	
							}
						}
				}
				}
				
				.txt_guarantee {
					text-align: left;

					a {
						color: #0084e0;
						text-decoration: underline;
					}
				}
				.txt_support {
					text-align: center;
				}
				
				.icon {
					width: 100%;
					max-width: 377px;
					margin: 40px auto 0;
					display: flex;
					justify-content: space-between;
					
					li {
						width: 30%;
					}
				}
				
				.img_students {
					margin-top: 24px;
				}
			}
			
			._01 h3::before {
				width: 141px;
				height: 141px;
				content: "";
				background: url("../img/pc/icon_guarantee.png") no-repeat;
				display: block;
				position: absolute;
				top: -70px;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
			._02 h3::before {
				width: 141px;
				height: 141px;
				content: "";
				background: url("../img/pc/icon_support.png") no-repeat;
				display: block;
				position: absolute;
				top: -70px;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
			
		}
	}

}




@media(min-width: 1200px) {

    .sm {
        display: none;
    }

    .md {
        display: none;
    }

    .lg {
        display: none; 
    }

    .xxl {
        display: block;
    }

    .section {
        .section__inner {
/*            padding-bottom: 105px; */
        }
    }
    .fv {
        .fv__anchor-list-wrapper {
            max-width: 1200px;
            width: 100%;
        }
    }

    .merit {
        .merit__title {
            &::before {
                width: 292px;
                top: -85%;
            }
        }
    }

    .merit-point01  {
        .merit-point01__fukidashi {
            width: 277px;

            &.merit-point01__fukidashi--color-variation {
                width: 198px;
                top: -29%;
            }
        }
    }

    .merit-point02 {
        .merit-point02__check-list {
            top: 8%;
        }

        .merit-point02__check-list-body {
            height: 705px;
        }

        .merit-point02__check-list-item {
            font-size: 30px;
            gap: 15px;
        }
    }

    .merit-point03 {
        .merit-point03__image-wrapper {
            &:first-of-type {
                transform: translateX(160px);
            }
        }
    }

    .merit-point04 {
        margin-top: 140px;

        .merit-point04__test-detail-title {
            font-size: 40px;
            transform: translateY(130px);
        }
    
        .merit-point04__test-detail-body {
            height: 780px;
        }

        .merit-point04__test-link-wrapper {
            max-width: 650px;
        }
    }

    .test-list-wrapper {
        overflow: hidden;
        margin: 0 -10px;
    }

    .test-list {
        gap: 5px;
        margin: 0 -10px;

        .test-list__item {
            width: calc(100% / 3 - 5px * 3 / 2);
            box-sizing: border-box;
        }
    }

    .guarantee {
        margin-top: 30px;

        .guarantee__list-item-text {
            font-size: 32px;
        }
    }

    .merit-point05 {
        .merit-point05__image-wrapper {
            width: 50%;
            transform: translate(160px, 50px);

            &:nth-of-type(2) {
                transform: translate(-3%, 19px);
            }
        }
    }

    .lineup {
        .lineup__aside-wrapper {
            height: 350px;
        }

        .lineup__spec-support {
            margin-top: 22px;
        }

        .lineup__spec {
            padding: 30px 20px;
        }

        .lineup__voice {
            padding: 30px 20px;
        }

        .lineup__chart-rader {
            width: 196px;
            height: 196px;
            top: 82px;
            clip-path: polygon(51% 7%, 98% 36%, 70% 79%, 22% 91%, 23% 42%);

            &.lineup__chart-rader--s13 {
                clip-path: polygon(51% 10%, 88% 37%, 75% 82%, 28% 82%, 18% 38%);
            }

            &.lineup__chart-rader--sx14-r {
                clip-path: polygon(51% 1%, 88% 37%, 68% 73%, 22% 90%, 9% 36%);
            }

            &.lineup__chart-rader--f14 {
                clip-path: polygon(51% 10%, 84% 38%, 80% 89%, 34% 73%, 13% 36%);
            }
        }
    }
}

@media(min-width: 1600px) {
	/* movie
    ---------------------------------------------------- */
    .movie.guardian {
		padding-top: 30px;
		background: url("../img/pc/bg_movie_guardian.png") no-repeat;
		background-size: 100% 100%;
	}
}


@media(max-width: 576px) {
    .lineup {
        lineup__spec-accordion_wrapper {
            display: block;

            &.is-open {
                display: block;
            }
        }

        .lineup__spec-accprdion-button {
            width: 10px;
            height: 10px;
            position: absolute;
            right: 10px;
            transform: translateY(-5px);
            display: block;
        }

        .lineup__spec-accordion_wrapper  {
            display: none;

            &.is-open {
                display: block;
            }
        }

        .lineup__voice-accrodion-area {
            overflow: hidden;
            height: 11vw;

            &.is-open {
                height: auto;
            }
        }

        .lineup__voice-title {
            position: relative;
        }

        .lineup__voice-accprdion-button {
            width: 10px;
            height: 10px;
            position: absolute;
            right: 10px;
            transform: translateY(-5px);
            display: block;
            top: 0;
        }
    }
}

@keyframes bgAnime {
    0% { opacity: 0; }
    25% { opacity: 0.25; }
    50% { opacity: 0.5; }
    75% { opacity: 0.75; }
    100% { opacity: 1; }
}

@keyframes line{
    0% {
        width: 100%;
        left: 0;
    }
    
    100% {
        width: 0;
        left: 100%;
        display: none;
    }
}

@keyframes graphAnim {
    0% {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
        opacity: 0;
    }
    100% {
        clip-path: polygon(0, 0, 0, 0, 0);
        opacity: .6;
    }
}

/* -----------2026-01-29追加修正----------- */
section#detail {
    margin-bottom: 60px;
}

/* ↓商品スライドショー↓ */

/* * スコープを .img_detail 内に限定しています。
* 他の要素への影響はありません。
*/

/* このエリア内だけのボックスサイズ初期化 */
.img_detail .product-gallery,
.img_detail .product-gallery * {
	box-sizing: border-box;
}

/* コンテナ */
.img_detail .product-gallery {
	max-width: 600px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	font-family: sans-serif; /* 必要であれば指定 */
}

/* メイン画像エリア */
.img_detail .main-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 10px;
	background-color: #fff;
	overflow: hidden;
	/* 外部CSSの影響を受けないようリセット */
	padding: 0;
	border: none;
	line-height: 0;
}

.img_detail .main-stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.3s ease;
	display: block;
	margin: 0;
	padding: 0;
	border: none;
}

/* 矢印ナビゲーション */
.img_detail .nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.5rem;
	color: #333;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	z-index: 2;
	/* 外部CSSのリセット */
	margin: 0;
	padding: 0;
	line-height: 1;
	appearance: none;
}

.img_detail .nav-btn:hover {
	background-color: #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	transform: translateY(-50%) scale(1.05);
}

.img_detail .prev { left: 10px; }
.img_detail .next { right: 10px; }

/* サムネイルリスト */
.img_detail .thumbnail-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none; /* liタグなどが使われていた場合の対策 */
}

.img_detail .thumbnail {
	/* PC：1行5枚基準 */
	width: calc((100% - 40px) / 5);
	aspect-ratio: 1 / 1;
	cursor: pointer;
	border: 2px solid #eee;
	box-sizing: border-box;
	transition: all 0.2s;
	margin: 0;
	padding: 0;
	background: #fff;
}

/* スマホ：1行4枚 */
@media (max-width: 480px) {
	.img_detail .thumbnail {
	width: calc((100% - 30px) / 4);
	}
}

.img_detail .thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	padding: 0;
	border: none;
}

.img_detail .thumbnail.active {
	border-color: #333;
	opacity: 1;
}

.img_detail .thumbnail:hover {
	border-color: #999;
}
/* ↑商品スライドショー↑ */

/* FV調整 */
p.fv_h2_sub {
    font-size: 14px;
	margin-top: 10px;
}