@charset "utf-8";


// リセットCSS
$blue: #0350BF;
$black: #222222;
$gray: #EBEBEB;
$accent: #FF7669;

@mixin position-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	scroll-behavior: smooth;

	body {
		font-size: 1.6rem;
		font-family: 'Noto Sans JP', sans-serif;
		-webkit-font-smoothing: antialiased;
		color: $black;
		background-color: #fdfdfd;
	}
}

li {
	list-style-type: none;
}

a {
	text-decoration: none;
	color: $black;
}

img {
	max-width: 100%;
}

main {
	position: relative;
}

p,
dd {
	line-height: 1.5;
	letter-spacing: 2px;
	text-align: justify;
}

::selection {
	color: #fdfdfd;
	background-color: $blue;
}

section {
	padding: 180px 200px 150px;
	text-align: center;

}

.inner-wrapper {
	text-align: justify;
	max-width: 1300px;
	margin: 0 auto;
}


.flex-box {
	display: flex;
}

.flex-reverse {
	flex-direction: row-reverse;
}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.sado-texts {
	color: $blue;
	font-weight: 700;
}
.span-typeBold {
	font-weight: bold;
}
.span-typeSmall {
	font-size: 1.2rem;
	letter-spacing: 0.1rem;
}

.block {
	display: block;
}

.section-title {
	display: inline-block;
	font-size: 6.4rem;
	text-align: center;
	font-family: 'Poppins', sans-serif;
	margin: 0 auto 70px;
	position: relative;
	font-weight: 600;
	text-align: center;
	visibility: hidden;
	transition: all 0.5s;
	transform: translateY(30px);
	opacity: 0;
	// background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)50%, $blue 50%, $blue);
	background-size: 200% 100%;

	&:before {
		content: "aaaa";
		position: absolute;
		top: -20px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 1.4rem;
		font-weight: bold;
		letter-spacing: 1.5px;
	}

	.sado-texts {
		mix-blend-mode: normal;
	}
}

.section-title-is-active {
	visibility: visible;
	transform: translateY(0);
	opacity: 1;
}

.section-title-p2 {
	font-size: 5rem;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 70px;
	position: relative;
	font-weight: 600;
	display: inline-block;
}




.top-page {
	overflow-y: hidden;
}

.heading {
	transition: all 0.5s;
	background-size: 200% 100%;
	display: inline-block;
}

.btn-wrapper {
	margin: 100px auto 0;
	text-align: center;

	.btn-link {
		background-color: $blue;
		color: #fdfdfd;
		border: 2px solid $blue;
		padding: 20px 80px;
		border-radius: 40px;
		font-size: 2rem;
		font-family: 'Poppins', sans-serif;
		position: relative;
		transition-duration: 0.2s;

		&:hover {
			color: $blue;
			background-color: #fdfdfd;
		}
	}
}

.burger {
	display: none;
}

// header
.header {
	width: 100%;
	position: sticky;
	top: 0;
	background-color: #fdfdfd;
	z-index: 99;
	transition-duration: 0.3s;

	.header-above {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 200px;


		.header-above-right {
			align-items: center;

			a {
				margin-left: 30px;
				position: relative;
				font-size: 1.6rem;
			}

			.tel-number {
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: -5px;
					left: 10%;
					width: 80%;
					height: 2px;
					background: $black;
					transition: all .3s;
					transform: scale(0, 1);
					transform-origin: center top;
				}

				&:hover::after {
					transform: scale(1, 1);
				}
			}

			.header-gr {
				text-decoration: underline;
				transition-duration: 0.1s;
				font-size: 1.4rem;

				&:hover {
					opacity: 0.5;
				}
			}

			.recruit-link {
				padding: 10px 20px;
				background: $black;
				color: #fdfdfd;
				border-radius: 25px;
				font-size: 1.6rem;
				transition-duration: 0.3s;
				border: 2px solid $black;
				position: relative;
				text-decoration: none;
				transform-origin: 50% 50%;

				&:hover {
					color: $black;
					border-radius: 25px;
					transform-origin: 0% 50%;
					background-color: #fdfdfd;
				}
			}
		}
	}

	.sf-sado-logo {
		padding: 8px 0 0 4px;
		margin: 0;
		width: auto;
		width: 200px;
		transition: all 0.1s;

		&:hover {
			opacity: 0.5;
		}
	}

	.header-below {
		background-color: $blue;
		padding: 10px 200px;

		.flex-box {
			justify-content: space-between;
		}

		a {
			color: #fdfdfd;
			position: relative;
			transition-duration: 0.3s;

			&:hover {
				opacity: 0.5;
				transition-duration: 0.3s;
			}
		}
	}
}

// fv
.top-fv {
	position: relative;
	overflow: hidden;

	.top-fv-above {
		.top-fv-above-img {
			display: inline-block;
			background-image: url(../img/top-fv1.jpg), url(../img/top-fv1B.jpg);
			width: 50vw;
			height: 200px;
			background-size: cover;
			object-fit: cover;
			background-position: top;
			animation: image_anime1 16s ease infinite;
			animation-fill-mode: forwards;
		}

		@keyframes image_anime1 {
			0% {
				background-image: url(../img/top-fv1.jpg);
			}

			20% {
				background-image: url(../img/top-fv1.jpg);
			}

			35% {
				background-image: url(../img/top-fv1C.jpg);
			}

			53% {
				background-image: url(../img/top-fv1C.jpg);
			}

			68% {
				background-image: url(../img/top-fv1B.jpg);
			}

			85% {
				background-image: url(../img/top-fv1B.jpg);
			}

			100% {
				background-image: url(../img/top-fv1.jpg);
			}
		}
	}

	.top-fv-center {
		justify-content: flex-end;
		margin: 30px 0 70px 0;
		overflow: hidden;
		position: relative;

		h2 {
			margin-left: calc(100vw / 4);
			font-size: 6rem;
			font-family: 'Poppins', sans-serif;
			padding-left: 50px;
			border-left: 15px solid $blue;
			position: relative;
			z-index: 5;
			display: inline-block;
			background-size: 200% 100%;
			max-height: 330px;

			.h2-sub {
				display: block;
				font-size: 1.6rem;
				font-family: 'Noto Sans JP', sans-serif;
				-webkit-font-smoothing: antialiased;
			}

			.sado-texts {
				display: block;
				mix-blend-mode: difference;
			}
		}

		.top-fv-center-img {
			width: 50vw;
			margin-left: 30px;
			background-image: url(../img/top-fv2.jpg), url(../img/top-fv2B.jpg);
			background-size: cover;
			background-position: center;
			animation: image_anime2 16s ease infinite;
			animation-fill-mode: forwards;
			animation-delay: 2s;
		}

		@keyframes image_anime2 {
			0% {
				background-image: url(../img/top-fv2.jpg);
			}

			20% {
				background-image: url(../img/top-fv2.jpg);
			}

			35% {
				background-image: url(../img/top-fv2C.jpg);
			}

			53% {
				background-image: url(../img/top-fv2C.jpg);
			}

			68% {
				background-image: url(../img/top-fv2B.jpg);
			}

			85% {
				background-image: url(../img/top-fv2B.jpg);
			}

			100% {
				background-image: url(../img/top-fv2.jpg);
			}
		}
	}
}

.top-fv-below {
	position: relative;
	height: 450px;
	width: 80vw;
	display: flex;
	justify-content: flex-start;

	.top-fv-below-img {
		object-fit: cover;
		height: 450px;
		width: 80vw;
		background-image: url(../img/top-fv3.jpg);
		background-size: cover;
		background-position: center;
		animation: image_anime3 16s ease infinite;
		animation-fill-mode: forwards;
		animation-delay: 4s;
	}

	@keyframes image_anime3 {
		0% {
			background-image: url(../img/top-fv3.jpg);
		}

		20% {
			background-image: url(../img/top-fv3.jpg);
		}

		35% {
			background-image: url(../img/top-fv3C.jpg);
		}

		53% {
			background-image: url(../img/top-fv3C.jpg);
		}

		68% {
			background-image: url(../img/top-fv3B.jpg);
		}

		85% {
			background-image: url(../img/top-fv3B.jpg);
		}

		100% {
			background-image: url(../img/top-fv3.jpg);
		}
	}
}



.scroll-container {
	position: absolute;
	top: -60px;
	right: -50px;
	margin-left: -30px;
	animation: scrollanime 5s infinite linear;
	animation-fill-mode: forwards;
	transition-duration: 0.3s;
	&:hover {
		animation: scrollanime 0.4s infinite linear;
	}
	@keyframes scrollanime {
		0% {
			transform: rotate(0deg)
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.scroll-inner-wrap {
		position: relative;
		.scroll-ball {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%)translateY(-50%);
			height: 80px;
			width: 80px;
			border-radius: 50%;
			background-color: $blue;
			background-image: url(../img/sado-shadow.svg);
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			transition: unset;
		}
	}

	.scroll-img {
		width: 120px;
		transition-duration: 0.3s;
		position: relative;
		mix-blend-mode: difference;
		display: block;

	}

}

.sado-shadow {
	position: absolute;
}


// top-about
.top-about {
	.section-title {
		&:before {
			content: "サンフロンティアの地域創生 しま夢プロジェクト";
			width: 100%;
		}
	}

	.top-about-dl {
		.top-about-dt {
			font-size: 3rem;
			text-align: center;
			font-weight: bold;
			margin-bottom: 100px;
		}

		.top-about-dd {
			text-align: justify;
			margin-bottom: 50px;
		}
	}

	figure {
		padding: 0 10px;

		&:nth-of-type(1) {
			padding-left: 0;
		}

		&:nth-of-type(3) {
			padding-right: 0;
		}

		a {
			display: block;
		}

		.top-about-img {
			width: calc(100vw / 3.3);
			height: 200px;
			object-fit: cover;
			transition-duration: 0.3s;

			&:hover {
				opacity: 0.5;
			}
		}

		figcaption {
			text-align: center;
			font-weight: bold;
			margin-top: 5px;
			justify-content: center;
			align-items: center;

			.about-logos {
				display: block;
				width: 30px;
				margin-right: 10px;
			}
		}
	}
}


// top-business 
.top-business-list {
	background: $gray;
	background-image:
		radial-gradient(#a1a1a1 5%, transparent 5%);
	background-size: 30px 30px;
	background-position: 0 0, 50px 30px;
	overflow: hidden;

	.section-title {
		&:before {
			content: "運営事業紹介";
		}
	}

	.swiper {
		margin-top: 70px;
		overflow: visible;

		.swiper-wrapper {
			width: auto;
		}

		.swiper-scrollbar {
			width: 100%;
			position: static;
			margin: 50px 0;
			height: 10px;
		}
	}

	.swiper-button-wrapper {
		margin-top: 50px;
		display: flex;
		justify-content: flex-end;

		.swiper-button {
			position: static;
			border: #222222 solid 1px;
			width: 60px;
			height: 60px;
			border-radius: 50%;

			&:nth-of-type(2) {
				margin-left: 15px;
			}
		}
	}
}
.card-link-cover {
	transition-duration: 0.3s;
	display: block;
}
.card-item {
	background-color: #fdfdfd;
	border-radius: 10px;
	width: calc(100% / 3);
	height: 470px;
	position: relative;
	text-align: left;
	transition-duration: 0.3s;
	&:hover {
		transform: rotate(-5deg);
		opacity: 0.8;
	}
	// &:hover .card-shadow {
	// 	transform:		scale(1);
	// }
	.card-img {
		border-radius: 10px 10px 0 0;
		position: relative;
	}

	.card-shadow {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.8);
		transition: all 0.4s ease;
		transform: scale(0);
		color: #fdfdfd;
		border-radius: 10px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 20px;

		h3 {
			text-align: center;
			font-size: 2rem;
			margin: 5px 0 20px;

			span {
				display: block;
				font-size: 1.4rem;
			}
		}

		.shadow-links {
			text-align: center;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fdfdfd;
			border-radius: 5px;
			padding: 5px 10px;
		}

		a {
			color: $black;
		}

		.jump_icon_white {
			width: 20px;
			display: block;
		}

		.shadow-text {
			text-align: left;
			margin-top: 20px;
		}

		.cross_btn {
			background-color: #fdfdfd;
			border-radius: 50%;
			width: 30px;
			height: 30px;
			position: absolute;
			top: 20px;
			right: 20px;
			transition-duration: 0.3s;

			&:hover .crosslines1 {
				transform: translate(-50%, -50%) rotate(90deg);
			}

			.crosslines {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 2px;
				height: 20px;
				background-color: $black;
				transition-duration: 0.3s;
			}

			.crosslines1 {
				transform: translate(-50%, -50%) rotate(45deg);
			}

			.crosslines2 {
				transform: translate(-50%, -50%) rotate(-45deg);
			}
		}
	}

	figcaption {
		padding: 0 15px;
	}

	.card-element {
		background-color: $blue;
		display: inline-block;
		padding: 5px 25px;
		color: #fdfdfd;
		font-weight: bold;
		border-radius: 20px;
		margin-top: 15px;
	}

	dl {
		.card-title {
			font-size: 2rem;
			font-weight: bold;
			margin: 15px 0;

			span {
				display: block;
				font-size: 1.4rem;
			}
		}

		.card-text {
			text-align: justify;
			font-size: 1.4rem;
		}
	}

	.card-btn {
		text-align: right;

		.jump-img {
			width: 50px;
			position: absolute;
			bottom: 20px;
			right: 20px;
			padding: 20px 0 0 20px;

			&:hover {
				opacity: 0.5;
			}
		}
	}
}

// Top-recruit
.top-recruit {
	background-color: $black;
	background-image:
		radial-gradient(#555555 5%, transparent 5%);
	background-size: 30px 30px;
	background-position: 0 0, 50px 30px;
	color: #fdfdfd;
	position: relative;
	padding-bottom: 50px;
	text-align: left;

	.section-title {
		margin-bottom: 30px;

		&:before {
			content: "採用情報";
			left: 0;
			transform: translateX(0);
		}
	}

	.flex-reverse {
		flex-direction: row-reverse;
	}

	.flex-box {
		margin-bottom: 150px;
		align-items: flex-end;

		.recruit-dl {
			margin-right: 100px;

			dd {
				text-align: justify;
			}
		}
	}
}

.news {
	color: $black;
	background-color: #fdfdfd;
	padding: 120px 0 0;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	padding-bottom: 0;
	max-width: 1300px;

	.section-title {
		margin-bottom: 30px;
		text-align: center;

		&::before {
			content: "お知らせ";
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.inner-wrapper {
		padding: 50px 200px;
		margin: 0 auto;
	}

	.news-flex {
		justify-content: space-between;
		border-bottom: 1px solid #555555;
		padding-bottom: 15px;
		margin: 0 auto 30px;
		font-size: 1.4rem;
		max-width: 780px;
		text-align: center;

		.news-detail {
			margin-left: 30px;
			transition-duration: 0.3s;

			&:hover {
				opacity: 0.5;
			}
		}
	}

	.link-wrapper {
		width: 100%;
		margin-top: 100px;
		margin-bottom: 50px;

		.link-box {
			width: 100%;
			color: #fdfdfd;
			background-size: cover;
			background-position: center;
			padding: 50px 0;
			position: relative;


			&::before {
				content: '';
				background-color: rgba(0, 0, 0, 0.3);
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: block;
			}

			.link-box-title {
				font-size: 4rem;
				text-align: center;
				margin-top: 60px;
				font-family: 'Poppins', sans-serif;
				position: relative;
				font-weight: 600;
				display: inline-block;

				&::before {
					content: "会社概要";
					position: absolute;
					top: -10px;
					left: 50%;
					transform: translateX(-50%);
					font-size: 1.2rem;
					width: 100%;
				}
			}

			.btn-wrapper {
				margin: 40px 0 50px;

				.btn-link {
					padding: 10px 50px;
					font-size: 1.6rem;
				}
			}
		}

		.company-link-box {
			background-image: url(../img/link-box-company.jfif);

			.link-box-title {
				&::before {
					content: "会社概要";
				}
			}
		}

		.group-link-box {
			background-image: url(../img/link-box-group.jpg);

			.link-box-title {
				&::before {
					content: "グループ情報";
				}
			}
		}
	}


}

.blue-cover {
	width: 100%;
	height: 50%;
	background-color: $blue;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	// border-radius: 100px 100px 0 0;
}

.contact {
	background-color: $blue;
	color: #fdfdfd;

	::selection {
		background-color: $accent;
		color: #fdfdfd;
	}

	.section-title {
		background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)50%, $accent 50%, $accent);

		&::before {
			content: "繋がり";
		}

	}

	.contact-wrapper {
		text-align: center;
		justify-content: space-between;
		align-items: center;

		.contect-item-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.contact-item {
			background-color: #fdfdfd;
			color: $blue;
			width: 47%;
			padding: 50px;
			border-radius: 20px;
			max-height: 270px;
		}

		.contact-title {
			font-size: 4rem;
			font-weight: 600;
			font-family: 'Poppins', sans-serif;
			margin-bottom: 40px;
			position: relative;

			span {
				display: block;
				font-size: 1.2rem;

				&:last-of-type {
					color: $accent;
				}
			}
		}

		.contact-dd {
			display: flex;
			justify-content: center;
			align-items: center;
			transition-duration: 0.3s;
			padding: 10px 0;

			&:hover {
				-webkit-transform: translateY(-30px);
				transform: translateY(-30px);
				transition-duration: 0.3s;
			}

			.saiyou-copy {
				font-size: 2.4rem;
				font-weight: bold;
				color: $blue;
			}

			.contact-logo {
				max-width: 200px;
			}

			.contact-page-jump {
				width: 30px;
				height: 30px;
				margin-left: 10px;
			}

			.wantedly-logo {
				width: 180px;
			}
		}
	}
}

// business.html---------------------------------------------------
.fv {
	overflow: hidden;

	.article-title {
		font-size: 9rem;
		font-family: 'Poppins', sans-serif;
		border-left: 15px solid $blue;
		padding-left: 50px;
		padding-right: 10px;
		margin: 70px 0 70px 200px;
		display: inline-block;

		span {
			font-size: 2.4rem;
			font-family: 'Noto Sans JP', sans-serif;
			-webkit-font-smoothing: antialiased;
			margin-left: 30px;
		}
	}

	.fv-img-wrap {
		text-align: right;

		img {
			height: 350px;
			width: 100%;
			object-fit: cover;
			margin-left: 200px;
		}
	}
}

// inner-intro
.inner-intro {
	padding: 100px 0 150px;
	position: relative;

	.inner-text {
		padding: 0px 200px 100px;
	}

	.swiper-slide {
		height: 250px;
		width: 100%;
		object-fit: cover;
	}

	.title-icon-wrapper {
		position: absolute;
		top: 100px;
		left: 50%;
		transform: translateX(-50%);

		.title-icon {
			width: 40px;
			margin: 0 20px;
		}
	}

	.inner-swiper {
		transition-timing-function: linear;
	}
}

// business03
.business03 {
	.section-title {
		&:before {
			content: "運営事業一覧";
		}
	}

	.business-items {
		justify-content: space-between;
		align-items: center;
		margin: 100px 0;

		.business03-left {
			position: relative;
			width: 45%;

			.big-number {
				font-family: 'Poppins', sans-serif;
				position: absolute;
				top: -150px;
				right: 0;
				color: #0351bf46;
				font-size: 200px;
				font-weight: 600;
				pointer-events: none
			}

			.inner-icon {
				width: 50px;
				height: auto;
				display: block;
				margin-right: 20px;
			}

			.business03-title {
				font-size: 4rem;
				position: relative;

				&:before {
					content: "Hotel running and management";
					font-size: 1.2rem;
					color: $blue;
					font-family: 'Poppins', sans-serif;
					position: absolute;
					top: -10px;
					left: 0;
				}
			}

			.business03-title02 {
				&:before {
					content: "Tourist resource management";
				}
			}

			.business03-title03 {
				&:before {
					content: "Local revitalization";
				}
			}

			.business03-text {
				font-size: 1.6rem;
				margin: 30px 0;
				text-align: justify;

			}

			.tag-wrapper {
				::selection {
					background-color: $accent;
					color: #fdfdfd;
				}

				.sado-tags {
					background-color: $blue;
					color: #fdfdfd;
					display: inline-block;
					padding: 5px 15px;
					margin: 20px 20px 0 0;
					border-radius: 25px;
					font-size: 1.4rem;

				}
			}
		}
	}

	.business03-right {
		img {
			width: 420px;

		}
	}
}

// sado-business-list
.sado-business-list {
	background: #EBEBEB;
	background-image: radial-gradient(#a1a1a1 5%, transparent 5%);
	background-size: 30px 30px;
	background-position: 0 0, 50px 30px;

	.section-title {
		&::before {
			content: "運営事業一覧";
		}
	}

	.grid {
		// grid-template-columns: repeat(auto-fit, 20em);
		// grid-template-columns: repeat(3em, [col-start] max-content [col-end]);
		// grid-template-columns: repeat(4, 1fr);
		// grid-template-columns: repeat(auto-fill, 400px);
		// grid-template-columns: repeat(auto-fit, 20em);
		justify-content: space-between;
		gap: 20px;
		.card-link-cover {
			display: inline;
		}
		.card-item {
			width: 100%;

			.card-text {
				font-size: 1.4rem;
			}
		}
	}
}

// discover-sado.html---------------------------------------------------
.history-of-sado {
	.section-title {
		&::before {
			content: "佐渡の歴史";
		}
	}

	.history-box {
		justify-content: space-between;
		align-items: center;
		margin: 100px 0;

		figcaption {
			width: 50%;
			margin-left: 30px;

			p {
				text-align: justify;
			}
		}

		.history-middle {
			margin-left: 0;
			margin-right: 30px;
		}

		.history-title {
			font-size: 2.4rem;
			font-weight: bold;
			margin-bottom: 20px;
		}

		.history-number {
			background-color: $blue;
			color: #fdfdfd;
			width: 50px;
			height: 50px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			position: relative;
			margin-right: 20px;
			font-family: 'Poppins', sans-serif;
		}
	}
}

.sado-life {
	.section-title {
		&::before {
			content: "佐渡での暮らし";
		}
	}

	.sado-life-box {
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		align-items: center;
		margin: 100px 0;
	}

	.sado-life-box-left {
		width: 50%;

		.life-title {
			background-color: $blue;
			color: #fdfdfd;
			display: inline-block;
			padding: 5px 20px;
			border-radius: 25px;
			margin-bottom: 30px;
			font-size: 2.4rem;
			position: relative;

			&::selection {
				background-color: $accent;
			}
		}

		.life-title-weather {
			&::before {
				content: url(../img/icon-sado-life-sunny.png);
				position: absolute;
				top: -70px;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.life-title-land {
			&::before {
				content: url(../img/icon-sado-life-land.png);
				position: absolute;
				top: -70px;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.life-title-food {
			&::before {
				content: url(../img/icon-sado-life-rice.png);
				position: absolute;
				top: -70px;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.life-title-shop {
			&::before {
				content: url(../img/icon-sado-life-shop.png);
				position: absolute;
				top: -70px;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
}

// company.html---------------------------------------------------
.company-info {
	background-color: $gray;
	background-image: radial-gradient(#a1a1a1 5%, transparent 5%);
	background-size: 30px 30px;
	padding: 200px 0;
	margin: 150px 0;

	section {
		text-align: left;
		padding: 100px 150px;

		&:first-of-type {
			padding-top: 150px;
		}

		&:last-of-type {
			padding-bottom: 150px;
		}
	}

	.company-big-flex {
		display: flex;
		justify-content: flex-end;
		height: 100%;
		position: relative;
	}

	.company-nav {
		width: 20vw;
		position: fixed;
	}

	.company-contents {
		background-color: #fdfdfd;
		width: 100%;
		margin-left: 200px;

		.section-title {
			font-size: 3rem;
			text-align: left;
			display: block;
			padding-left: 20px;
			border-left: 3px solid $blue;
			display: inline-block;

			&::before {
				content: "aaa";
				color: $blue;
				width: 100%;
				text-align: right;
			}
		}

		.company-detail {
			.section-title {
				&::before {
					content: "About Us";
				}
			}
		}

		.company-history {
			.section-title {
				&::before {
					content: "History";
				}
			}
		}

		.company-greeting {
			.section-title {
				&::before {
					content: "Greeting";
				}
			}

			.greeting-message {
				text-align: justify;

				p {
					margin: 20px 0;
				}

				ol {
					margin: 20px 0 20px 50px;

					li {
						list-style-type: number;
						margin: 20px 0;
						font-size: 1.4rem;
					}
				}
			}

			.president-name-img-wrapper {
				display: flex;
				justify-content: flex-end;
				margin-top: 50px;
			}
		}

		.year-title {
			background-color: #0350BF;
			color: #fdfdfd;
			font-size: 2.4rem;
			text-align: left;
			padding: 10px 0 10px 30px;
			border-radius: 10px;
			font-family: "Poppins", sans-serif;
			font-weight: 600;
			margin-top: 70px;

			&:first-of-type {
				margin-top: 0;
			}
		}

		.company-flex {
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #757575;
			padding: 30px 30px 10px;


			dt {
				font-size: 2rem;
				font-weight: bold;
				color: $blue;
			}

			.history-date {
				color: $blue;
				font-weight: 600;
				font-family: "Poppins", sans-serif;
				margin-right: 30px;
			}


			.boss-list .flex-box {
				justify-content: space-between;
				margin: 20px 0;

				.boss-position {
					margin-right: 80px;
					text-align: center;
				}
			}
		}
	}
}

.philosophy {
	.section-title {
		&::before {
			content: "社是";
		}
	}

	.rita-wrapper {
		text-align: center;

		dt {
			color: $blue;
			font-size: 5rem;
			font-weight: bold;
			text-align: center;
			margin-bottom: 50px;
			display: inline-block;
		}

		dd {
			text-align: justify;
		}
	}

	.philo-wrapper {
		justify-content: space-between;
		margin-top: 70px;
	}

	.philo-box {
		background-color: $blue;
		color: #fdfdfd;
		width: 47%;
		padding: 50px;
		border-radius: 20px;
		max-height: 270px;
		position: relative;

		dt {
			font-size: 3rem;
			font-weight: bold;
			text-align: center;
			margin-bottom: 50px;
		}

		.philo-ul {
			color: $accent;

			text-align: center;

			li {
				list-style-type: disc;
				width: fit-content;
				margin: 0 auto;
			}

			span {
				color: #fdfdfd;
			}
		}

		dt,
		dd,
		li,
		span {
			&::selection {
				background-color: $accent;
			}
		}
	}
}

// latest.html---------------------------------------------------
.year {
	padding: 50px 200px;

	&:last-of-type {
		margin-bottom: 200px;
	}

	.news-section-title {
		background-color: $blue;
		color: #fdfdfd;
		font-size: 3rem;
		text-align: left;
		padding: 15px 0 15px 30px;
		border-radius: 10px;
		font-family: 'Poppins', sans-serif;
		font-weight: 600;
		margin-bottom: 50px;
	}

	a {
		&:hover {
			opacity: 0.5;
			transition-duration: 0.3s;
		}
	}

	.news-flex {
		border-bottom: 1px solid #555555;
		padding-bottom: 15px;
		margin: 0 30px 30px;
		justify-content: space-between;
		.news-date {
			margin-right: 30px;
		}
	}
}

//  privacy.html---------------------------------------------------
.privacy-nav {
	margin: 0px 200px 0px;

	.flex-box {
		flex-wrap: wrap;

		li {
			margin-right: 30px;
			margin-bottom: 40px;

			a {
				border: 2px solid $blue;
				padding: 10px 40px;
				color: $blue;
				background-color: #fdfdfd;
				border-radius: 50px;
				font-weight: 600;
				transition-duration: 0.3s;

				&:hover {
					background-color: $blue;
					color: #fdfdfd;
					transition-duration: 0.3s;
				}
			}
		}
	}

	.TabMenu {
		.Tabs {
			.TabIsActive {
				color: #fdfdfd;
				background-color: $blue;
				border: 3px solid $blue;
			}
		}
	}
}

.policy-contents {
	padding: 50px 200px 200px;
	// max-width: 960px;

	.policy-title {
		text-align: justify;
		margin-bottom: 100px;
	}


	.policy-dl {
		margin-bottom: 50px;
		text-align: justify;

		dt {
			font-weight: bold;
			font-size: 2rem;
			margin-bottom: 10px;
			text-align: left;
		}

		.dt-type2 {
			margin: 10px 0;
			font-size: 1.6rem;

			span {
				font-size: 1.2rem;
				display: block;
			}
		}

		dd {
			text-align: justify;
			font-size: 1.4rem;
		}

		.policy-h4 {
			margin: 10px 0 10px 20px;
			font-size: 1.6rem;
		}

		h5 {
			font-size: 1.6rem;
		}

		.policy-head-wrapper {
			margin: 30px 0;
		}
	}

	.policy-ul {
		margin-top: 10px;

		li {
			list-style-type: disc;
			margin-left: 30px;
			text-align: justify;
			font-size: 1.4rem;
		}
	}

	.policy-ul-abc {
		margin-top: 10px;
		margin-left: 30px;

		li {
			list-style-type: upper-alpha;
			font-size: 1.4rem;
		}
	}

	.policy-ul-number {
		margin-top: 10px;
		margin-left: 30px;

		li {
			list-style-type: decimal;
			font-size: 1.4rem;
		}
	}

	.policy-ul-none {
		text-align: right;

		li {
			list-style-type: none;
			font-size: 1.4rem;
		}
	}

	.policy-btn-wrapper {
		text-align: center;
		margin: 30px auto;

		a {
			text-align: center;
			padding: 5px 30px;
			font-size: 1.4rem;
			border: 1px solid $black;
		}
	}

	.inner-policy-dl {
		border: 1px solid $gray;
		margin-top: 50px;
	}

	section {
		margin: 30px;
		text-align: justify;
		border-top: 1px solid $black;
		padding: 30px 0 0;

		&:first-of-type {
			padding-top: 0;
			border-top: 0;
		}

		.policy-h4 {
			margin: 10px 0 10px 20px;
			font-size: 2rem;
		}

		h5 {
			font-size: 1.6rem;
			margin-top: 20px;
		}

		.reference,
		.policy-caption {
			font-size: 1.4rem;
		}

		.policy-dl {
			margin-bottom: 20px;

			dt {
				font-size: 1.6rem;
				margin-top: 15px;
			}
		}
	}
}

.to-the-top-btn {
	text-align: center;
	margin: 100px auto 30px;

	a {
		text-align: center;
		padding: 5px 30px;
		font-size: 1.4rem;
		border: 1px solid $black;
	}
}


.group {
	padding: 50px 200px;

	&:last-of-type {
		margin-bottom: 200px;
	}

	.group-section-title {
		background-color: #0350BF;
		color: #fdfdfd;
		font-size: 2.4rem;
		text-align: left;
		padding: 15px 0 15px 30px;
		border-radius: 10px;
		font-weight: 600;
		margin-bottom: 30px;

		a {
			color: #fdfdfd;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				bottom: -5px;
				left: 0%;
				width: 100%;
				height: 2px;
				background: #fdfdfd;
				transition: all 0.3s;
				transform: scale(0, 1);
				transform-origin: center top;
			}

			&:hover {
				&::after {
					transform: scale(1, 1);
				}
			}

			&:hover {
				color: #fdfdfd;
			}
		}
	}

	.group-dl {
		padding: 30px;
		border: 2px solid $gray;
		border-radius: 10px;

		dt {
			font-size: 2rem;
			font-weight: bold;
			margin-bottom: 10px;
		}

		address {
			font-style: normal;
		}

		dd {
			margin: 5px 0;
		}
	}
}

.e-public {
	.section-title {
		&:before {
			content: '電子公告';
		}
	}

	.e-public-list {
		margin: 50px 0;

		h4 {
			border-radius: 25px;
			padding: 5px 20px;
			color: #fdfdfd;
			display: inline-block;
			background-color: $blue;
			font-size: 2.4rem;
			margin-bottom: 10px;
		}

		li {
			margin: 20px 0;
			border-bottom: 3px solid $gray;
			padding: 5px;

			a {
				display: block;
				margin-left: 10px;
				color: $black;
				text-decoration: underline;

				&:hover {
					opacity: 0.5;
				}
			}
		}
	}
}

.latest {
	.news-section-title {
		font-size: 3rem;
		margin-bottom: 100px;
	}

	.lead-message {
		border-bottom: 1px solid $gray;
		padding-bottom: 50px;
	}

	.latest-div {
		margin: 50px 0;
		text-align: left;

		h3 {
			text-align: left;
			font-size: 2rem;
			padding: 10px 20px;
			background-color: $blue;
			color: #fdfdfd;
			display: inline-block;
			border-radius: 25px;
		}

		ul {
			margin-left: 30px;

			li {
				margin: 20px 0;
				list-style-type: disc;
			}

			span {
				display: block;
				color: 1.2rem;
				margin-top: 20px;
			}

			a {
				text-decoration: underline;
			}
		}
	}

	.end-message {
		margin-top: 100px;
		text-align: right;

		h3 {
			margin-bottom: 10px;

		}

		address {
			font-style: normal;
		}
	}
}


.footer {
	background-color: $black;
	color: #fdfdfd;
}

.footer-wrapper {
	padding: 80px 200px 50px;
	justify-content: space-between;

	.footer-left {
		h4 {
			&:hover {
				opacity: 0.5;
			}
		}

		address {
			font-style: normal;
			position: relative;
			margin: 50px 0 20px;

			&::before {
				content: "Sun Frontier SADO 本店";
				position: absolute;
				top: -20px;
				left: 0;
				font-size: 1rem;
			}
		}

		.tel-number {
			margin-bottom: 20px;
		}
	}

	.footer-right {
		text-align: right;

		.footer-right-items {
			margin-bottom: 20px;
		}

		.footer-link {
			color: #fdfdfd;
			margin-bottom: 20px;
			text-align: right;
			position: relative;
			transition-duration: 0.5s;
			font-weight: normal;

			&:hover {
				opacity: 0.5;
			}
		}
	}

	.footer-middle {
		justify-content: space-between;

		.footer-link {
			color: #fdfdfd;
			position: relative;
			display: inline-block;
			position: relative;
			transition-duration: 0.5s;
			font-weight: normal;

			&:hover {
				opacity: 0.5;
			}
		}
	}

	.footer-journey-logo {
		width: 200px;
		margin-top: 40px;
		display: block;
		position: relative;

		&:hover {
			opacity: 0.5;
			transition-duration: 0.2s;
		}

		&::before {
			content: "「人の想い」「人の物語」をつづるブログサイト";
			position: absolute;
			top: -20px;
			left: 50%;
			transform: translateX(-50%);
			color: #fdfdfd;
			font-size: 1rem;
			display: block;
		}
	}
}

.footer-wrapper-policy {
	padding: 0px 200px 80px;
}


.footer-below {
	padding: 0px 200px 80px;

	.footer-nav-title {
		font-size: 2rem;
		text-align: center;
		margin-bottom: 30px;
	}

	.footer-business-wrapper {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		text-align: center;

		a {
			color: #fdfdfd;
			margin: 0 60px 10px 0px;
			display: block;
			position: relative;
			transition-duration: 0.5s;
			font-weight: normal;

			&:hover {
				opacity: 0.5;
			}
		}
	}
}


.small-wrapper {
	text-align: center;
	font-size: 1rem;

	small {
		text-align: center;
		display: block;
	}
}