@charset "utf-8";
/*------------------------------------------------------------
	遮光眼鏡の選び方ートップ
------------------------------------------------------------*/
#selection .selection_content {
  padding: 50px 0;
}
#selection.selection_top .selection_content {
  padding-top: 0;
}
.reverse #selection .selection_content::before {
  background-color: #afafaf;
}
#selection .selection_content > p {
  text-align: center;
  font-size: clamp(1.6rem, 5vw, 2.0rem);
  margin-bottom: 30px;
}

#selection .selection_list ul li {
  background-color: #fff;
  border: 1px solid #FF8500;
  border-radius: 10px;
  margin-bottom: 15px;
}
.reverse #selection .selection_list ul li {
  background-color: #000;
}
#selection .selection_list ul li a {
  display: grid;
  grid-template-columns: 35% 1fr;
  align-items: center;
}
.reverse #selection .selection_list ul li a .img {
  background-color: #fff;
  border-radius: 10px 0 0 10px;
}
#selection .selection_list ul li a .img img {
  border-radius: 10px 0 0 10px;
  max-width: 150px;
  width: 100%;
}
#selection .selection_list ul li a .ttl {
  padding: 0 20px;
}
#selection .selection_list ul li a .ttl h3 {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1.3;
}
#selection .selection_list ul li a .ttl h3 span {
  font-size: 1.2rem;
}
#selection .selection_list ul li a .ttl p {
  font-size: 1.4rem;
  line-height: 1.3;
}
#selection .selection_list ul li a .ttl img {
  width: 80px;
  margin-top: 10px;
  display: block;
  margin-left: auto;
}
@media screen and (min-width:769px) {
  #selection .selection_list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  #selection .selection_list ul li {
    width: calc(100% / 2 - 20px);
    margin-bottom: 0;
  }
}
@media screen and (max-width:768px) {
	#selection.selection_top .selection_content {
		padding: 0;
	}
}

/*ーーーーーーーーーーー 製品ページタイトル ーーーーーーーーーーー*/
#selection .selection_ttl {
  text-align: center;
  margin-bottom: 30px;
}
#selection .selection_ttl h2 {
  font-size: 2.8rem;
	font-weight: 500;
	color: #FF8500;
}

/*ーーーーーーーーーーー 製品ページナビ ーーーーーーーーーーー*/
#selection .selection_nav {
  width: fit-content;
  margin: 0 auto 50px;
}
#selection .selection_nav nav ul li a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}
#selection .selection_nav nav ul li a span {
  width: 17px;
  height: 17px;
  background-color: #FF8500;
  border-radius: 50%;
  display: block;
  position: relative;
}
#selection .selection_nav nav ul li a span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
}
@media screen and (min-width:769px) {
  #selection .selection_nav nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 45px;
    justify-content: center;
  }
}


/*------------------------------------------------------------
	フレームの選び方
------------------------------------------------------------*/
#selection .selection_frame > h3, #selection .selection_color > h3 {
	font-size: 2.6rem;
	font-weight: 500;
	text-align: center;
	border-bottom: 3px solid #FF8500;
	width: fit-content;
	padding-bottom: 5px;
	margin: 0 auto 20px;
}
#selection .selection_frame > p, #selection .selection_color > p {
	font-size: 1.8rem;
}
#selection .selection_frame-item {
	margin: 50px 0;
	font-size: 1.8rem;
}
#selection .selection_frame-item h3 {
	font-size: 2.4rem;
	margin-bottom: 20px;
}
#selection .selection_frame-item h3 span {
	color: #FF8500;
	margin-right: 5px;
}
#selection .selection_frame-item img {
	margin: 0 auto 20px;
	display: block;
	width: 100%;
	max-width: 600px;
}
.reverse #selection .selection_frame-item img {
	background-color: #afafaf;
}
#selection .selection_frame-item .box {
	margin: 20px 0 10px;
	padding: 20px;
	background-color: #FFEDD9;
}
.reverse #selection .selection_frame-item .box {
	background-color: #afafaf;
}
#selection .selection_frame-item .box h4 {
	text-align: center;
	color: #FF8500;
	font-size: 2.2rem;
	margin-bottom: 20px;
}
#selection .selection_frame-item .box p {
	font-size: 1.8rem;
	margin-bottom: 20px;
}
#selection .selection_frame-item .box p:last-child {
	margin-bottom: 0;
}
#selection .selection_frame-item a {
	font-size: 1.6rem;
	text-align: right;
	display: block;
	text-decoration: underline;
}
.selection_frame-table table {
	width: 100%;
}
.selection_frame-table table th {
	background-color: #FF8500;
	color: #fff;
	text-align: center;
	padding: 7px;
	width: calc(100% / 6);
	font-weight: 400;
}
.selection_frame-table table th img {
	height: 15px;
	vertical-align: middle;
}
#selection .selection_frame-table table td {
	padding: 15px;
}
#selection .selection_frame-table table td h4 {
	font-weight: normal;
	font-size: 1.9rem;
	line-height: 1.0;
	text-align: center;
}
#selection .selection_frame-table table td h4 span {
	font-size: 1.1rem;
}
#selection .selection_frame-table table td > p {
	text-align: left;
	vertical-align: middle;
	font-size: clamp(1.2rem, 1.7vw, 1.6rem);
}
#selection .selection_frame-table table tr:last-child td {
	vertical-align: top;
	line-height: 1.5;
}
#selection .selection_frame-table table tr:last-child td:first-child {
	vertical-align: middle;
}

#selection .selection_frame-table table tr:nth-child(odd) td {
	background-color: #FFE7CC;
}
#selection .selection_frame-table table tr:nth-child(even) td {
	background-color: #FFF3E5;
}
.reverse #selection .selection_frame-table table tr:nth-child(odd) td {
	background-color: #d1d1d1;
}
.reverse #selection .selection_frame-table table tr:nth-child(even) td {
	background-color: #afafaf;
}

#selection .selection_frame-table table td .inner p {
	font-size: 1.2rem;
}
#selection .selection_frame-table table td .inner .red {
	margin-bottom: 15px;
	color: #FF5500;
}
#selection .selection_frame-txt {
	font-size: 1.6rem;
	margin-top: 10px;
}
#selection .selection_frame-btn a {
	position: relative;
	background-color: #2c78db;
	display: block;
	text-align: center;
	color: #fff;
	font-size: clamp(2.0rem, 4vw, 2.4rem);
	font-weight: 500;
	letter-spacing: 3px;
	padding: 20px;
	max-width: 500px;
	margin: 50px auto;
}
.reverse #selection .selection_frame-btn a {
	background-color: #4a4a4a;
}
#selection .selection_frame-btn a img {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translate(0, -50%);
	width: 88px;
}

@media screen and (max-width:768px) {
	#selection .selection_frame-btn a {
		padding: 20px;
		max-width: 300px;
	}
	#selection .selection_frame-btn a img {
		right: 20px;
		top: auto;
		bottom: 15px;
		transform: translate(0, 0);
	}
}
@media screen and (min-width:897px) {
	#selection .selection_frame-item h3 {
		margin-bottom: 30px;
	}
	#selection .selection_frame-item img {
		margin-bottom: 30px;
	}
	#selection .selection_frame-item .box {
		margin: 50px 0 10px;
		padding: 50px;
	}
}
@media screen and (max-width:896px) {
	#selection .selection_frame-table table {
		min-width: 705px;
	}
	#selection .selection_frame-table table td {
    padding: 10px;
	}
	#selection .selection_frame-table table td > p {
		font-size: 1.2rem;
	}
}

.selection_frame-table_clone {
	display:none;
	position:fixed;
	top:0;
	z-index:100;
	overflow:hidden;
	background:#fff;
	padding-top: 30px;
}
.reverse .selection_frame-table_clone {
	background:#000;
}

/*------------------------------------------------------------
	カラーの選び方
------------------------------------------------------------*/
#selection .selection_color-img {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin: 30px 0;
}
#selection .selection_color-img p {
	font-size: 1.6rem;
}
#selection .selection_color-item {
	margin: 75px 0;
}
#selection .selection_color-item h3 {
	font-size: 2.4rem;
	margin-bottom: 20px;
}
#selection .selection_color-item h3 span {
	color: #FF8500;
	margin-right: 5px;
}
#selection .selection_color-item p {
	line-height: 1.8;
	font-size: 1.8rem;
}
#selection .selection_color-item p span {
	background-color: #FFE7CC;
}
.reverse #selection .selection_color-item p span {
	background-color: #FF8500;
}
#selection .selection_color-item .img {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: center;
	margin: 30px 0 0;
	padding: 10px;
}
.reverse #selection .selection_color-item .img {
	background: #fff;
}   
#selection .selection_color-item .inner {
	max-width: 500px;
	margin: 30px auto 0;
}
#selection .selection_color-item .inner img {
	margin-bottom: 30px;
}
#selection .selection_color-item .inner img:last-child {
	margin-bottom: 0;
}
#selection .selection_color-item.bg {
	position: relative;
	padding: 75px 0;
}
#selection .selection_color-item.bg::before {
	content: "";
	width: 100vw;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: #F3F7F9;
	z-index: -1;
}
.reverse #selection .selection_color-item.bg::before {
	background-color: #4a4a4a;
}

#selection .selection_step-item {
	margin: 75px 0;
}
#selection .selection_step-item:last-child {
	margin-bottom: 0;
}
#selection .selection_step-item p {
	font-size: 1.8rem;
}
#selection .selection_step-item > img {
	margin: 30px auto;
	max-width: 600px;
	width: 100%;
	display: block;
}
#selection .selection_step-ttl {
	margin-bottom: 20px;
	padding-bottom: 10px;
	position: relative;
}
#selection .selection_step-ttl::before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-image: linear-gradient(to right, #FF8500 2px, transparent 2px);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
#selection .selection_step-ttl p {
	position: relative;
	z-index: 0;
	width: fit-content;
	color: #fff;
	font-size: 1.8rem;
	padding: 0 15px 0 10px;
	margin-bottom: 10px;
}
#selection .selection_step-ttl p::before {
	content: "";
	width: 100%;
	height: 100%;
	background-color: #FF8500;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
	z-index: -1;
	clip-path: polygon(calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 0 0);
	border-radius: 3px;
}
#selection .selection_step-ttl h4 {
	font-size: 2.2rem;
}
#selection .selection_step-item .img {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin: 50px 0;
}
#selection .selection_step-item .img img {
	margin-bottom: 15px;
}
#selection .selection_step-item01 {
	margin-top: 30px;
}
#selection .selection_step-item01 .box {
	background-color: #FFEDD9;
	padding: 50px;
}
.reverse #selection .selection_step-item01 .box {
	background-color: #afafaf;
}
#selection .selection_step-item01 .box ul li {
	margin-bottom: 30px;
}
#selection .selection_step-item01 .box ul li h4 {
	background-color: #fff;
	color: #FF8500;
	width: fit-content;
	display: block;
	padding: 0 3px;
	margin-bottom: 5px;
	font-size: clamp(2.0rem, 4vw, 2.2rem);
}
#selection .selection_step-item01 .box ul li p {
	font-size: clamp(1.6rem, 3vw, 1.8rem);
}
#selection .selection_step-item02 .base_color {
	border-bottom: 1px solid #000;
	padding-bottom: 15px;
}
#selection .selection_step-item02 .base_color > p {
	position: relative;
	margin-bottom: 15px;
}
#selection .selection_step-item02 .base_color > p::before {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #000;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
	z-index: -1;
}
.reverse #selection .selection_step-item02 .base_color > p::before {
	background-color: #fff;
}
#selection .selection_step-item02 .base_color > p span {
	background-color: #fff;
	padding-right: 10px;
}
.reverse #selection .selection_step-item02 .base_color > p span {
	background-color: #000;
}
#selection .selection_step-item02 .base_color ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
}
#selection .selection_step-item02 .base_color ul li {
	width: calc(100% / 3 - 20px);
	text-align: center;
}

#selection .selection_step-inner {
	padding: 50px 0;
}
#selection .selection_step-inner h4 {
	margin-bottom: 10px;
	font-size: 2.2rem;
}
#selection .selection_step-inner02 ul {
	display: flex;
	justify-content: center;
	gap: 30px;
	margin: 50px 0;
}
#selection .selection_step-inner02 ul li p {
	font-size: 1.6rem;
}
#selection .selection_step-inner02 ul li {
	aspect-ratio: 1/1;
	text-align: center;
	padding: 20px;
	max-width: 160px;
	width: 100%;
	align-content: center;
}
#selection .selection_step-inner02 ul li::after {
	content: none;
	width: 13px;
	height: 25px;
	background-color: #AEC9D5;
	display: block;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
#selection .selection_step-inner02 ul li:first-child {
	background: url(../img/selection/selection_color_icon_01.png) no-repeat center;
	background-size: contain;
}
#selection .selection_step-inner02 ul li:last-child {
	background: url(../img/selection/selection_color_icon_02.png) no-repeat center;
	background-size: contain;
}
#selection .selection_step-inner .inner h5 {
	margin-bottom: 10px;
	font-size: 2.0rem;
}
.reverse #selection .selection_step-inner .inner img {
	background-color: #fff;
}
#selection .selection_step-inner .inner .box {
	background-color: #DFE9EE;
	padding: 50px;
	margin: 30px 0;
}
.reverse #selection .selection_step-inner .inner .box {
	background-color: #4a4a4a;
}
#selection .selection_step-inner .inner .box p {
	margin-bottom: 10px;
}
#selection .selection_step-inner .inner .box p:last-child {
	margin-bottom: 0;
}
#selection .selection_step-inner02 .inner {
	margin-bottom: 50px;
}
#selection .selection_step-inner02 .inner:last-child {
	margin-bottom: 0;
}
#selection .selection_step-inner02 .inner > p {
	margin-bottom: 30px;
}
#selection .selection_step-inner03 .box {
	background-color: #fff;
	padding: 50px;
	margin-top: 30px;
}
.reverse #selection .selection_step-inner03 .box {
	background-color: #000;
}
#selection .selection_step-inner03 .box ul li {
	margin-bottom: 30px;
}
#selection .selection_step-inner03 .box ul li:last-child {
	margin-bottom: 0;
}
#selection .selection_step-inner03 .box ul li h4 {
	color: #FF8500;
	margin-bottom: 5px;
}
#selection #top_shop .top_shop-content > p {
	margin-bottom: 30px;
	text-align: center;
	font-size: 1.8rem;
}
#selection #top_shop .top_shop-content .frame_btn {
	margin-bottom: 30px;
}

@media screen and (max-width:896px) {
	#selection .selection_color-img {
    grid-template-columns: 1fr;
	}
	#selection .selection_color-item .img {
    grid-template-columns: 1fr;
		gap: 50px;
	}
	#selection .selection_color-item {
    margin: 50px 0;
	}
	#selection .selection_color-item.bg {
    padding: 50px 0;
	}
	#selection .selection_step-item {
		margin: 50px 0;
	}
	#selection .selection_step-item01 .box {
		padding: 20px 15px;
	}
	#selection .selection_step-item .img {
		grid-template-columns: 1fr;
		margin: 30px 0;
	}
	#selection .selection_step-item02 .base_color ul {
		justify-content: flex-start;
	}
	#selection .selection_step-item02 .base_color ul li {
		width: calc(100% / 2 - 15px);
	}
	#selection .selection_step-inner02 ul {
    margin: 30px 0;
	}
	#selection .selection_step-inner .inner .box {
		padding: 20px 15px;
	}
	#selection .selection_step-inner03 .box {
		padding: 20px 15px;
	}
}
@media screen and (max-width:430px) {
	#selection #top_shop .top_shop-content > p {
		text-align: left;
	}
}