@charset "utf-8";


/* ーーーーーーーーーーーーーーーーーーーー
  エントランス
ーーーーーーーーーーーーーーーーーーーー */

body.entrance {
	& article {
		& main {
			display: flex;
			flex-direction: column;
			gap: calc( 2 * var(--BaseSize) );
			padding: calc( 2 * var(--BaseSize) );
			height: 100vh;
			& > section {
				display: flex;
				flex-direction: column;
				gap: calc( 2 * var(--BaseSize) );
				padding: var(--BaseSize);
				width: 100%;
				border-radius: var(--Border-radius_S);
				overflow: hidden;
			}
		}
	}
}




/* ーーーーーーーーーーーーーーーーーーーー
  エントランスA
ーーーーーーーーーーーーーーーーーーーー */

body.entrance {
	& article {
		& main {
			& section#entranceA {
				flex: 1;
				padding: 0;
				& #oroEntrance {
					height: 100%;
					& > div {
						height: 100%;
						& .slick-slider {
							height: 100%;

							& .slick-list {
								height: 100%;
								& .slick-track {
									height: 100%;
								}
							}
						}
					}
				}
			}
		}
	}
}
.entranceA {
	padding: calc( 2 * var(--BaseSize) );
	height: 100%;
	background: url("https://rokuten.jp/wp-content/themes/Rokuten/svg/higaki_006.svg"), var(--Color_O040);
	background-size: 6%;
	border-radius: var(--BaseSize);
	& .title {
		display: flex;
		align-items: center;
		gap: calc( 2 * var(--BaseSize) );
		padding: calc( 2 * var(--BaseSize) );
		color: var(--Color_FF100);
		background: var(--Color_1D100);
		border-radius: var(--BaseSize);
		& em {
			padding: .2vw var(--BaseSize);
			font-size: 2vw;
			background: var(--Color_O100);
			border-radius: var(--BaseSize);
		}
		& strong {
			flex: 1;
			font-size: 3vw;
			font-weight: 600;
		}
		& span {
			font-size: 2vw;
			font-weight: 400;
		}
	}
	& .data {
		display: flex;
		gap: calc( 2 * var(--BaseSize) );
		padding: calc( 2 * var(--BaseSize) ) calc( 1 * var(--BaseSize) ) calc( 1 * var(--BaseSize) );
		& .wrap {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: calc( 4 * var(--BaseSize) );
			& .inner {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: var(--BaseSize);
				width: 100%;
				color: var(--Color_FF100);
				& em {
					padding: .2vw var(--BaseSize);
					font-size: 2vw;
					background: var(--Color_O100);
					border-radius: var(--BaseSize);
				}
				& .tag {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					gap: calc( 2 * var(--BaseSize) );
					width: 100%;
					& strong {
						font-size: 3vw;
					}
				}
				& span {
					padding: calc( 2 * var(--BaseSize) ) 0 0;
					font-size: 2.4vw;
				}
			}
			& .fee {
				& .tag {
					flex-direction: column;
					& strong {
					}
				}
			}
		}
		& figure {
			flex-basis: 40%;
			& img {
				border-radius: var(--BaseSize);
			}
		}
	}
}






/* ーーーーーーーーーーーーーーーーーーーー
  エントランスB
ーーーーーーーーーーーーーーーーーーーー */
body.entrance {
	& article {
		& main {
			& section#entranceB {
				padding: calc( 2 * var(--BaseSize) );
				background: var(--Color_1D100);
				& .slick-list {
					& .slick-track {
						& .slick-slide {
							width: 100%;
							overflow: hidden;
							& .title {
								display: flex;
								justify-content: center;
								align-items: center;
								padding: 0 0 calc( 2 * var(--BaseSize) );
								color: var(--Color_FF100);
								font-size: 2vw;
								font-weight: 600;
							}
							& .inner {
								display: flex;
								gap: calc( 2 * var(--BaseSize) );
								& .steps {
									position: relative;
									flex-basis: calc( calc( 100vw - calc( calc( 2 * var(--BaseSize) ) * 2 ) ) / 3 );
									display: flex;
									justify-content: center;
									align-items: center;
									padding: calc( 2 * var(--BaseSize) );
									background: var(--Color_O100);
									border-radius: var(--Border-radius_S);
									& .no {
										position: absolute;
										top: 0;
										left: 0;
										display: flex;
										justify-content: flex-start;
										padding: padding: calc( 1 * var(--BaseSize) );
										width: 5vw;
										height: 5vw;
										color: var(--Color_FF100);
										background: var(--Color_A100);
										clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
										border-radius: var(--Border-radius_S) 0 0 0;
										& em {
											position: absolute;
											top: 0.3rem;
											left: 0.8rem;
											font-size: 3vw;
											color: var(--Color_FF100);
											font-weight: 600;
											line-height: 1;
										}
									}
									& .text {
										padding: calc( 2 * var(--BaseSize) ) calc( 2 * var(--BaseSize) ) calc( 2 * var(--BaseSize) ) calc( 6 * var(--BaseSize) );
										font-size: 2vw;
										color: var(--Color_FF100);
										font-weight: 400;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}











/* ーーーーーーーーーーーーーーーーーーーー
  エントランスC
ーーーーーーーーーーーーーーーーーーーー */

section#entranceC {
	flex: 0 46vh;
	flex-direction: row;
}




/* ーーーーーーーーーーーーーーーーーーーー
  エントランスC
  案内
ーーーーーーーーーーーーーーーーーーーー */

section#entranceC {
	& .EntranceC_Left {
		flex-basis: 24%;
		width: 24%;
		background: var(--Color_1D100);
		border-radius: var(--BaseSize);
		& .slick-list {
			& .slick-track {
				& .slick-slide {
					display: flex;
					flex-direction: column;
					padding: calc( 2 * var(--BaseSize) );
					width: 100%;
					& img {
						width: 100%;
					}
				}
			}
		}
	}
}




/* ーーーーーーーーーーーーーーーーーーーー
  エントランスC
  注意事項
ーーーーーーーーーーーーーーーーーーーー */

section#entranceC {
	padding: 0;
	background: var(--Color_1D000);
	& .EntranceC_Right {
		flex-basis: calc( 76% - calc( 2 * var(--BaseSize) ) );
		width: calc( 764% - calc( 2 * var(--BaseSize) ) );
		background: var(--Color_1D100);
		border-radius: var(--BaseSize);
		overflow: hidden;
		& .slick-list {
			& .slick-track {
				& .slick-slide {
					display: flex;
					flex-direction: column;
					gap: calc( 2 * var(--BaseSize) );
					padding: calc( 2 * var(--BaseSize) );
					width: 100%;
					& .title {
						display: flex;
						justify-content: center;
						align-items: center;
						gap: calc( 2 * var(--BaseSize) );
						color: var(--Color_FF100);
						font-size: 2.4vw;
						font-weight: 600;
						& i {
							color: var(--Color_A100);
						}
					}
					& ul {
						display: flex;
						flex-direction: column;
						gap: calc( 2 * var(--BaseSize) );
						& li {
							position: relative;
							padding: 0 0 0 calc( 4 * var(--BaseSize) );
							font-size: 1.6vw;
							color: var(--Color_FF100);
						}
						& li:before {
							content: '';
							position: absolute;
							top: .5vw;
							left: 0;
							width: 1.6vw;
							height: 1.6vw;
							background: url('https://rokuten.jp/wp-content/themes/Rokuten/svg/mon_ff.svg');
							background-repeat: no-repeat;
							background-size: cover;
						}
					}
				}
			}
		}
	}
}