@charset "utf-8";

/* =========================================
	 base
	 サイズは % と min() で指定
	 min(◯vw, ◯px) = 375幅デザイン基準で伸縮し、デザインサイズで頭打ち
========================================= */
:root {
	/* color */
	--color_bg: #c1e3fb;
	--color_navy: #3d85c1;
	--color_slate: #3d85c1;
	--color_blue: #3d85c1;
	--color_text: #383950;
	--color_gray: #777;
	--color_line: #dcdcdc;
	--color_price: #e4004f;
	--color_dummy: #c9c9c9;

	/* font size */
	--fs_xxs: min(2.93vw, 11px);
	--fs_xs: min(3.2vw, 12px);
	--fs_s: min(3.6vw, 13.5px);
	--fs_m: min(3.73vw, 14px);
	--fs_l: min(4vw, 15px);
	--fs_xl: min(4.8vw, 18px);
	--fs_xxl: min(5.33vw, 20px);
	--fs_price: min(6.93vw, 26px);

	/* line */
	--line_thin: 3px;
	--line_bold: 3px;

	/* layout */
	--width_base: 31.25rem;
	--side_padding: 4.27%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: #fff;
	color: var(--color_text);
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
	font-size: var(--fs_m);
	line-height: 1.7;
}

h2, h3, p, ul, ol, dl, dd {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	color: inherit;
	text-decoration: none;
}

.wrapper {
	width: 100%;
	max-width: var(--width_base);
	margin: 0 auto;
	/* background: var(--color_bg); */
	overflow: hidden;
}

#highspec-contact {
	/* =========================================
		メインビジュアル（仮）
	========================================= */
	.mv {
		background: #fff;
	}

	.mv_dummy {
		display: block;
		width: 100%;
		aspect-ratio: 375 / 260;
		background: var(--color_dummy);
	}

	/* =========================================
		セクション共通
	========================================= */
	.section_wrap{
		background: var(--color_bg);
		padding: 2% 0 8%;
	}
	.section {
		width: 90%;
		margin: 0 auto;
	}

	.section + .section {
		padding-bottom: 0;
	}

	.section_title {
		margin: 5% 0 0;
		/* padding: 0 5%; */
		color: var(--color_navy);
		font-size: min(5.6vw, 29px);
		font-weight: 700;
		letter-spacing: .02em;
		text-align: center;
	}

	/* =========================================
		アコーディオン
	========================================= */
	.accordion {
		margin: 5% 0 0;
		background: #fff;
	}

	.accordion_head {
		position: relative;
		display: block;
		width: 100%;
		margin: 0 auto;
		padding: .75em 5%;
		letter-spacing: .05em;
		border: 0;
		background: var(--color_slate);
		color: #fff;
		font-family: inherit;
		font-size: min(4.3vw, 22px);
		font-weight: 500;
		line-height: 1.5;
		text-align: center;
		cursor: pointer;
		appearance: none;
	}

	.accordion_icon {
		position: absolute;
		top: 50%;
		right: 4.66%;
		width: min(3.47vw, 13px);
		height: min(3.47vw, 13px);
		transform: translateY(-50%);
	}

	.accordion_icon::before,
	.accordion_icon::after {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		background: #fff;
		content: "";
		transition: transform .3s;
	}

	.accordion_icon::before {
		width: 100%;
		height: 1.5px;
		transform: translate(-50%, -50%);
	}

	.accordion_icon::after {
		width: 1.5px;
		height: 100%;
		transform: translate(-50%, -50%);
	}

	.accordion-open .accordion_icon::after {
		transform: translate(-50%, -50%) rotate(90deg);
	}

	/* 開閉アニメーション（grid行を 0fr → 1fr で補間） */
	.accordion_body {
		display: grid;
		grid-template-rows: 0fr;
		background: #fff;
		transition: grid-template-rows .4s ease;
	}

	.accordion-open .accordion_body {
		grid-template-rows: 1fr;
	}

	.accordion_inner {
		min-height: 0;
		padding: 0 5%;
		overflow: hidden;
		transition: padding .4s ease;
	}

	.accordion-open .accordion_inner {
		padding: 5% 5% 10%;
	}

	@media (prefers-reduced-motion: reduce) {
		.accordion_body,
		.accordion_inner {
		transition: none;
		}
	}

	.accordion_text {
		font-size: min(4vw, 18px);
		line-height: 1.5;
		color: #383950;
		span{
		font-weight: 700;
		}
	}

	.accordion_text + .accordion_text {
		margin-top: 1em;
	}

	/* チェックリスト */
	.check_list {
		margin: 5% 0;
	}

	.check_item {
		position: relative;
		padding: 0 0 0 1.8em;
		font-size: min(4vw, 18px);
		font-weight: 700;
	}

	.check_item::before {
		position: absolute;
		top: 0;
		left: .1em;
		color: #383950;
		font-weight: 700;
		content: "\2713";
	}

	.note_text {
		color: #383950;
		font-size: min(4vw, 18px);
		line-height: 1.5;
	}

	/* =========================================
		お知らせ帯
	========================================= */
	.product_area {
		background: #fff;
		padding: 8% 0 0;
	}

	.banner_box {
		width: 90%;
		margin: 0 auto;
	}

	.banner_eye_care {
		position: relative;
		width: 100%;
	}

	.banner_eye_care img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* 透明リンク共通 */
	.banner_eye_care .banner_link {
		position: absolute;
		display: block;
		z-index: 2;
		background: rgba(255, 255, 255, 0);
	}

	/* LINE友だち登録 */
	.banner_eye_care .banner_link_line {
		left: 1.4%;
		top: 77%;
		width: 23.6%;
		height: 22%;
	}

	/* メール会員登録 */
	.banner_eye_care .banner_link_mail {
		left: 25.9%;
		top: 77%;
		width: 24%;
		height: 22%;
	}

	.catch_ttl {
		width: max-content;
		margin: 0 auto 3%;
		color: #111;
		font-weight: bold;
		font-size: min(3.6vw, 17px);
		letter-spacing: 0.08em;
		line-height: 2;
		text-align: center;
	}

	.banner {
		text-align: center;
		font-size: min(3.4vw, 14.7px);
		font-weight: bold;
		line-height: 1.8;
		color: #946783;
		letter-spacing: .05em;
	}

	.notice_text {
		color: #fff;
		font-size: var(--fs_xxl);
		font-weight: 700;
		text-align: center;
	}

	/* =========================================
		レンズタイプボタン
	========================================= */
	.lens_nav {
		width: 93%;
		margin: 7% auto 0;
	}

	.lens_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: min(2.63vw, 13px) 2.37%;
	}

	.lens_item {
		width: 31.75%;
	}

	.lens_btn {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10% 5%;
		border-radius: .4em;
		color: #fff;
		font-size: min(3.8vw, 16px);
		font-weight: 700;
		letter-spacing: .06em;
	}

	.lens_btn::after {
		position: absolute;
		top: 50%;
		right: 11%;
		width: min(2.8vw, 11px);
		height: min(2.8vw, 11px);
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		transform: translateY(-50%) rotate(45deg);
		content: "";
	}

	.lens_btn-1day  { background: #3d85c1; }
	.lens_btn-2week { background: #57a96c; }
	.lens_btn-color { background: #c65ecd; }
	.lens_btn-toric { background: #c4a90f; }
	.lens_btn-multi { background: #eb830a; }

	/* =========================================
		ランキング
	========================================= */
	.ranking {
		display: none;
		width: 90%;
		margin: 8% auto 10%;
		border-radius: .1875rem;
		background: #fff;
		box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
	}

	.ranking.is_open {
		animation: fade_animation01 0.5s ease 0s 1 normal;
		display: block;
	}

	.ranking_head {
		padding: 4% 0;
		color: #fff;
		font-size: var(--fs_xxl);
		font-weight: 700;
		letter-spacing: .09em;
		text-align: center;
		&.type01 {
		background: #3d85c1;
		}
		&.type02 {
		background: #57a96c;
		}
		&.type03 {
		background: #c65ecd;
		}
		&.type04 {
		background: #c4a90f;
		}
		&.type05 {
		background: #eb830a;
		}
	}

	.product_list {
		margin: 0 auto 10%;
	}

	.product_item {
		padding: 6.3% 2.1%;
	}

	.product_item_inner {
		width: 100%;
		margin: 0 auto ;
		padding: 0 0 14%;
		border-bottom: solid 2px #5d5d5d;
	}

	.product_item_inner.last {
		border-bottom: none;
	}

	.product_name {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 3.8%;
		color: #000;
		font-size: min(5.6vw, 27px);
		font-weight: 700;
		line-height: 1.4;
		text-align: center;
		letter-spacing: .1em;
		gap: 5%;
	}

	.product_title {
		text-align: left;
		line-height: 1.1;
		font-weight: 800;
		letter-spacing: .05em;
	}

	/* 王冠 ※画像差し替え予定（現在は絵文字の仮表示） */
	.product_crown {
		display: inline-block;
		width: 12%;
		max-width: 100%;
		margin: 0;
	}

	.product_rank {
		margin-left: .05em;
		font-size: min(3.73vw, 14px);
		font-weight: 700;
		vertical-align: .15em;
	}

	.product_sub {
		display: block;
		font-size: min(2.8vw, 13px);
		font-weight: 700;
	}

	/* 商品画像（仮） */
	.product_img {
		width: 60%;
		margin: 0 auto;
	}

	/* スペック */
	.spec_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 92%;
		gap: 6%;
		margin: 0 auto 5%;
	}

	.spec_item {
		width: 46%;
		margin: 2% 0 0;
	}

	.spec_label {
		margin-bottom: .35em;
		font-size: min(4vw, 12px);
		font-weight: 700;
		text-align: center;
	}

	.spec_data {
		margin: 0;
		padding: 2% 3%;
		border-radius: 10em;
		background: #e5ecf1;
		font-size: min(3.07vw, 16px);
		font-weight: 900;
		line-height: 1.4;
		text-align: center;
		letter-spacing: .1em;
		height: min(4.6vh, 44px);
		align-items: center;
		&.silicon{
			font-size: min(2.5vw, 13px);
			padding: 4% 3%;
		}
	}

	#tab_1 .spec_data{
		color: #026cc5;
	}
	#tab_2 .spec_data{
		color: #57a96c;
	}
	#tab_3 .spec_data{
		color: #c65ecd;
	}
	#tab_4 .spec_data{
		color: #c4a90f;
	}
	#tab_5 .spec_data{
		color: #eb830a;
	}
	/* 価格 */
	.price_row {
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 1em;
	}

	.price_label {
		font-size: min(5.2vw, 23px);
		font-weight: 700;
	}

	.price_value {
		color: var(--color_price);
		font-size: min(9vw, 36px);
		font-weight: 700;
		letter-spacing: .01em;
		line-height: 1.2;
		font-family: "Roboto", sans-serif;
	}

	.price_note {
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 1.3em;
		margin-bottom: 3.8%;
		color: #000;
		font-size: min(5.6vw, 20px);
	}

	.price_note_value {
		width: auto;
		text-align: center;
	}

	/* ボタン */
	.cta_btn {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 2.5% 0;
		border-radius: .5rem;
		background: #df2347;
		color: #fff;
		font-size: min(4.27vw, 22px);
		font-weight: 500;
		width: 85%;
		margin: 0 auto;
		letter-spacing: .15em;
		transition: all .3s;
	}

	.cta_btn::after {
		position: absolute;
		top: 50%;
		right: 5%;
		width: min(1.87vw, 10px);
		height: min(1.87vw, 10px);
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		transform: translateY(-50%) rotate(45deg);
		content: "";
	}

	.cta_btn:hover {
		opacity: .6;
	}

	/* =========================================
		ラッパー外の背景（タブレット以上）
	========================================= */
	@media screen and (min-width: 37.5em) {
		body {
		background: #e2e8ec;
		}
	}
}