@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%);
}

@media screen and (max-width: 1200px) {
	section {
		padding: 180px 100px 150px;
	}

	.sado-business-list {
		.grid {
			grid-template-columns: repeat(auto-fit, minmax(190px, 3fr));

			.card-title {
				font-size: 1.8rem;

			}

			.card-item {
				width: 100%;
				height: 400px;

				.card-element {
					font-size: 1.4rem;
					padding: 2px 20px;
				}

				.card-btn {
					.jump-img {
						width: 40px;
						height: 40px;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 1180px) {
	.top-fv {
		.top-fv-center {
			h2 {
				font-size: 5rem;
			}
		}
	}
}

@media screen and (max-width: 1100px) {
	section {
		padding: 100px 100px;
	}

	.section-title {
		font-size: 4rem;
		line-height: 1.3;

		&::before {
			font-size: 1.2rem;
		}
	}

	.btn-wrapper {
		.btn-link {
			padding: 15px 60px;
			font-size: 1.6rem;
		}
	}

	// header
	.header {
		.sf-sado-logo {
			width: 150px;
		}

		.header-above {
			padding: 5px 50px;

			.header-above-right {
				.header-gr {
					font-size: 1.2rem;
				}

				.recruit-link {
					padding: 5px 10px;
					font-size: 1.4rem;
				}
			}
		}

		.header-below {
			padding: 5px 50px;

			a {
				font-size: 1.4rem;
			}
		}
	}

	// fv
	.top-fv {
		.top-fv-above {
			.top-fv-above-img {
				height: 130px;
			}
		}

		.top-fv-center {
			z-index: 10;

			h2 {
				border-left: 10px solid $blue;
				margin-left: 10vw;
				font-size: 4rem;

				&::after {
					font-size: 1.4rem;
				}
			}

		}

		.top-fv-below {
			.top-fv-below-img {
				height: 250px;
			}
		}
	}

	// top-about
	.top-about {
		.top-about-dl {
			.top-about-dt {
				font-size: 2.4rem;
				margin-bottom: 50px;
			}

			.top-about-dd {
				font-size: 1.4rem;
			}
		}

		figure {
			padding: 0 5px;
		}
	}

	// top-business-list
	.top-business-list {
		.inner-text {
			font-size: 1.4rem;
		}

		.card-item {
			width: 50% !important;

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

	// top-recruit
	.top-recruit {
		.flex-box {
			align-items: center;

			.recruit-dl {
				margin-right: 30px;
				font-size: 1.4rem;
			}

			.top-recruit-img {
				height: auto;
				width: 100%;
			}
		}

		.btn-wrapper {
			margin-top: 70px;
		}
	}

	.news {
		.inner-wrapper {
			padding: 50px 100px;
		}

		.link-wrapper {
			margin-top: 30px;

			.link-box {
				.link-box-title {
					font-size: 3rem;
					margin-top: 3rem;
				}

				.btn-wrapper {
					margin: 40px 0 20px;
				}
			}
		}
	}

	// contact
	.contact {
		.contact-wrapper {
			.contact-item {
				width: 49%;
				height: 250px;
			}

			.contact-title {
				font-size: 3rem;
				margin-bottom: 30px;

				&::after {
					font-size: 1rem;
					top: 50px;
				}
			}

			.flex-box {
				display: block;

				.flex-box {
					display: flex;
					justify-content: center;
				}
			}

			.contact-dd {
				.contact-logo {
					width: 100%;
				}

				.contact-page-jump {
					width: 30px;
				}
			}
		}
	}

	// inner-page fv 
	.fv {
		.article-title {
			font-size: 5rem;
			margin: 50px 0 50px 50px;

			span {
				font-size: 1.6rem;
				margin-left: 30px;
			}
		}

		.fv-img-wrap {
			img {
				height: 250px;
				margin-left: 50px;
				margin-top: 0;
			}
		}
	}

	.inner-intro {
		.section-title-p2 {
			font-size: 3.2rem;
		}

		.inner-text {
			padding: 0px 50px 100px;
			text-align: justify;
			font-size: 1.4rem;
		}

		.swiper-wrapper {
			img {
				height: 170px;
			}
		}
	}

	// business03
	.business03 {
		.business-items {
			display: block;
			margin: 0 0 150px;

			.business03-left {
				width: 100%;
				margin-top: 50px;

				.business03-title {
					font-size: 3rem;
				}

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

				.big-number {
					font-size: 120px;
					top: -70px;
				}

				.tag-wrapper {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
				}
			}

			.business03-right {
				img {
					width: 100%;
					object-fit: cover;
				}
			}
		}
	}

	//.history-of-sado
	.history-of-sado {
		.history-box {
			&:first-of-type {
				margin-top: 50px;
			}

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

			img {
				max-width: 40%;
			}

			figcaption {
				margin-left: 50px;

				.history-title {
					font-size: 2rem;
				}

				p {
					font-size: 1.4rem;
				}

				.history-number {
					width: 30px;
					height: 30px;
					margin-right: 10px;
				}
			}

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

	//.sado-life
	.sado-life {
		.sado-life-box {
			justify-content: space-between;

			&:first-of-type {
				margin-top: 50px;
			}

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

			.sado-life-box-left {
				font-size: 1.4rem;

				.life-title {
					font-size: 2rem;

					&::before {
						top: -10px;
						left: 140px;
					}
				}

				.sado-life-text {
					margin-right: 30px;
				}
			}

			.sado-life-text-right {
				width: 50%;

				img {
					width: 100%;
				}
			}
		}
	}

	.company-info {
		padding: 150px 0;

		section {
			padding: 100px;
		}

		.company-contents {
			margin-left: 100px;
		}
	}

	.philosophy {
		dd {
			font-size: 1.4rem;
		}

		.philo-box {
			dt {
				font-size: 2.4rem;
				margin-bottom: 30px;
			}

		}
	}

	.year {
		padding: 50px 100px;
		font-size: 1.4rem;
	}

	.privacy-nav {
		margin: 0 100px;
	}

	.policy-contents {
		padding: 50px 100px 100px;
	}

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

	.group {
		padding: 50px 100px;

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

	// footer
	.footer-wrapper {
		padding: 80px 100px;
	}

	.footer-below {
		padding: 0 100px 50px;

		.footer-business-wrapper {
			justify-content: space-between;

			a {
				margin: 10px 0;
			}
		}
	}
}

@media screen and (max-width: 700px) {
	.burger {
		display: block;
		z-index: 100;
		position: relative;
		color: #fdfdfd;
	}

	.sp-below-bar {
		background-color: $blue;
		height: 10px;
		width: 100%;
	}

	.Menu {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 20;
		width: 100%;
		max-width: 400px;
		height: 100vh;
		background-color: #fdfdfd;
		transform: translateX(200%);
		transition: all 0.3s;
		background-color: $blue;
		padding: 50px;

		.Menu-List {
			width: 100%;
			margin: 50px 0 20px;
			text-align: left;
			background-color: $blue;

			.burger-item {
				color: #fdfdfd;
				margin: 20px 0;
				font-size: 2rem;
				font-weight: bold;
				padding-bottom: 10px;
				border-bottom: 1px solid $gray;

				&:first-of-type {
					margin-top: 20px;
				}

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

				a {
					color: #fdfdfd;
					position: relative;
					transition-duration: 0.5s;
					&:hover {
						opacity: 0.5;
					}

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

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

					span {
						margin-left: 20px;
						font-size: 1.2rem;
						color: #fdfdfd;
					}
				}

				.saiyou {
					color: $accent;
					margin-bottom: 20px;
				}
			}
		}

		.burger-flex {
			margin-top: 50px;
			color: #fdfdfd;
			justify-content: space-between;
			align-items: center;
		}

		.burger-journey {
			width: 150px;
		}

		.burger-facebook {
			width: 30px;
		}

		.burger-title {
			text-align: center;
			font-size: 1.2rem;

			address {
				font-style: normal;
				font-weight: bold;
				margin-top: 10px;
			}

			img {
				width: 150px;
			}
		}

		.tel-number {
			font-weight: bold;
			color: #fdfdfd;
		}
	}

	.Button {
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 30;
		height: 50px;
		padding: 10px;
		background-color: $black;
		border: 0;
		border-radius: 10px;
		mix-blend-mode: hard-light;

		.Button-LineTop {
			position: absolute;
			top: 15px;
			width: 30px;
			height: 2px;
			background-color: #fdfdfd;
		}

		.Button-LineMedium {
			width: 30px;
			height: 2px;
			background-color: #fdfdfd;
		}

		.Button-LineBottom {
			position: absolute;
			bottom: 15px;
			width: 30px;
			height: 2px;
			background-color: #fdfdfd;
		}
	}

	.MenuIsOpen {
		transform: translateX(0);
		display: block;
	}

	.Button-LineTop {
		transition: all 0.3s;
	}

	.BottonIsOpen .Button-LineTop {
		transform: translateY(10.5px) rotate(45deg);
	}

	.Button-LineMedium {
		transition: all 0.3s;
	}

	.BottonIsOpen .Button-LineMedium {
		opacity: 0;
	}

	.Button-LineBottom {
		transition: all 0.3s;
	}

	.BottonIsOpen .Button-LineBottom {
		transform: translateY(-8.5px) rotate(-45deg);
	}

	.IsScrollAllowed {
		overflow: hidden
	}

	.header {
		border-bottom: $blue solid 10px;

		.header-above {
			padding: 5px 30px;

		}
	}

	.header-above-right,
	.header-below {
		display: none;
	}
	.top-about-items {
		display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
	}
}

@media screen and (max-width: 540px) {

	// body
	section {
		padding: 100px 30px;
	}

	.section-title {
		font-size: 3.4rem;
		margin-bottom: 50px;

		&::before {
			font-size: 1rem;
		}
	}

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

		.top-fv-above {
			.top-fv-above-img {
				width: 90vw;
				height: 90px;
				background-position-y: 90%;
			}
		}

		@media screen and (max-width: 420px) {
			.top-fv-center {
				margin: 30px 0;
			}
		}

		.top-fv-center {
			position: relative;
			overflow: visible;

			h2 {
				font-size: 3.5rem;
				line-height: 1.3;
				margin-right: 30px;
				margin-top: 30px;
				border-left: 10px solid $blue;
				position: absolute;
				top: 35px;
				mix-blend-mode: overlay;

				.h2-sub {
					font-size: 1rem;
					margin-top: 10px;
					mix-blend-mode: overlay;
				}

				.ctrl {
					display: block;
				}

				.sp-no-wrap {
					white-space: nowrap;
				}
			}

			@media screen and (max-width: 450px) {
				h2 {
					padding-left: 30px;
				}

			}

			@media screen and (max-width: 420px) {
				h2 {
					font-size: 3.8rem;
					padding-left: 20px;
					border-left: 7px solid #0350BF;
					top: 50px;
				}

			}

			@media screen and (max-width: 400px) {
				h2 {
					font-size: 3.4rem;
					@include position-center();
					top: 90px;
					left: 50%;
					transform: translateX(-50%);
					margin: 0;
				}

			}

			@media screen and (max-width: 340px) {
				h2 {
					font-size: 3.2rem;
					padding-left: 20px;
					border-left: 7px solid #0350BF;
					left: 50%;
					display: inline;
				}
			}

			.top-fv-center-img {
				display: block;
				margin: -60px 0 0px 0px;
				height: 120px;
				object-fit: cover;
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
				@media screen and (max-width: 400px) {
					margin-top: -50px;
				}
			}
		}

		.top-fv-below {
			height: auto;
			margin-top: 220px;

			.top-fv-below-img {
				width: 80vw;
				height: 200px;
			}

			.scroll-icon {
				width: 30px;
				height: 30px;
				top: -10px;
				right: -13px;
			}
		}
	}

	.scroll-container {
		top: -40px;
    right: -40px;
		.scroll-inner-wrap .scroll-ball {
			height: 55px;
			width: 55px;
		}
		.scroll-img {
			width: 80px;
		}
	}



	// top-about
	.top-about {
		.top-about-dl {

			.top-about-dt {
				font-size: 2rem;
			}

		}

		.top-about-items {
			display: block;
		}

		figure {
			margin-bottom: 70px;

			.top-about-img {
				width: 100%;
			}

		}
	}

	// top-business-list
	.top-business-list {
		.swiper {
			overflow: hidden;

			.swiper-scrollbar {
				position: absolute;
				bottom: 30px;
			}
		}

		.inner-text {
			text-align: justify;
		}

		.card-item {
			width: 100% !important;
			margin-right: 0;
		}
	}

	// top-recruit
	.top-recruit {
		.section-title {
			text-align: center;

			&::before {
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.flex-box {
			display: block;

			.recruit-dl {
				margin: 30px 0 0 0;
			}
		}

		.btn-wrapper {
			margin: 70px auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	// news
	.news {
		padding: 100px 0 0;

		.inner-wrapper {
			padding: 30px;

			.news-flex {
				display: block;
				text-align: left;

				dt {
					font-size: 1.1rem;
				}
				.news-detail {
					margin-top: 5px;
					margin-left: 0;
					line-height: 1.3; 
          letter-spacing: 0px;
				}
			}
		}

		.btn-wrapper {
			margin: 50px auto 40px;
		}

		.link-wrapper {
			margin-top: 0;
			display: block;
		}
	}

	// inner-page fv 
	.fv {
		.article-title {
			font-size: 4rem;
			margin: 30px 0 30px 30px;
			padding-left: 30px;
			border-left: 10px solid #0350BF;

			span {
				display: block;
				font-size: 1.6rem;
				margin-left: 0px;
			}
		}

		.fv-img-wrap {
			img {
				height: 150px;
				margin-left: 30px;
			}
		}
	}

	.inner-intro {
		.section-title-p2 {
			font-size: 2.4rem;
			margin-bottom: 30px;
		}

		.inner-text {
			padding: 0px 30px 50px;
			text-align: justify;
		}

		.swiper-wrapper {
			img {
				height: 120px;
				width: 200px !important;
			}
		}
	}

	// business03
	.business03 {
		.business-items {
			display: block;
			margin: 0 0 150px;

			.business03-left {
				width: 100%;
				margin-top: 50px;

				.inner-icon {
					width: 30px;
					height: 100%;
				}

				.business03-title {
					font-size: 2.8rem;
				}


				.big-number {
					font-size: 120px;
					top: -70px;
				}

				.tag-wrapper {
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;

					.sado-tags {
						margin: 20px 10px 0 0;
					}
				}
			}
		}
	}

	.sado-business-list {
		.grid {
			grid-template-columns: repeat(auto-fit, minmax(155px, 3fr));

			.card-item {
				.card-title {
					font-size: 1.6rem;
				}

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

	//.history-of-sado
	.history-of-sado {
		.history-box {
			display: block;

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

			img {
				max-width: 100%;
			}

			figcaption {
				width: 100%;
				margin: 30px 0 0 0;
			}
		}
	}

	.sado-life {
		.sado-life-box {
			display: block;

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

			.sado-life-text-right {
				width: 100%;

				img {
					width: 100%;
				}
			}

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

				.sado-life-text {
					margin-right: 0px;
				}

				.life-title {
					margin: 80px 0 20px 0;
					text-align: center;
					display: block;

					&::before {
						top: -70px;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}

	.company-info {
		padding: 50px 0 100px;
		margin-top: 50px;
		margin-bottom: 0px;

		section {
			padding: 50px 30px;

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

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

		dd {
			font-size: 1.4rem;
		}

		.company-contents {
			margin-left: 30px;

			.company-flex {
				display: block;
				padding: 20px 20px 10px;

				dt {
					font-size: 1.6rem;
					margin-bottom: 10px;
				}

				.boss-list {
					.flex-box {
						margin: 10px 0;

						.boss-position {
							margin-right: 0;
						}
					}
				}
			}

			.company-greeting {
				.greeting-message {
					font-size: 1.4rem;

					p {
						margin: 10px 0;
					}

					ol {
						margin: 20px 0 20px 10px;
					}
				}
			}
		}
	}

	.philosophy {
		.philo-wrapper {
			display: block;

			:nth-child(2) {
				margin-top: 10px;
			}
		}

		.philo-box {
			width: 100%;

		}
	}

	.year {
		padding: 50px 30px;
		font-size: 1.4rem;

		.news-flex {
			display: block;
		}
	}

	.privacy-nav {
		margin: 0 30px;

		.flex-box {
			li {
				padding: 0;
				margin: 0 0 20px 0;

				a {
					padding: 5px 20px;
					font-size: 1rem;
				}
			}
		}
	}

	.policy-contents {
		padding: 50px 30px;

		.policy-title {
			font-size: 1.6rem;
		}

		.policy-dl {
			dt {
				font-size: 1.6rem;
			}

			dd {
				font-size: 1.2rem;
			}

			.policy-h4 {
				margin-left: 0;
			}
		}

		.policy-ul {
			li {
				margin-left: 10px;
				font-size: 1.2rem;
			}
		}

		.policy-ul-none {
			text-align: justify;
		}

		section {
			margin: 15px;

			.policy-h4 {
				font-size: 1.4rem;
				margin: 0;
				margin-bottom: 10px;
			}
		}

		.policy-btn-wrapper {
			a {
				font-size: 1.2rem;
				padding: 5px 15px;
			}
		}
	}

	.group {
		padding: 50px 30px;

		.group-section-title {
			font-size: 2rem;
			margin-bottom: 20px;
			padding: 15px;
		}
	}


	// contact 
	.contact {
		.contact-wrapper {
			display: block;

			.flex-box {
				display: block;

				.flex-box {
					display: flex;
					align-items: center;
				}
			}

			.contact-dd {
				.contact-logo {
					width: 100%;
				}

				.contact-page-jump {
					margin-top: 0;
					width: 30px;
					height: 30px;
				}
			}

			.contact-item {
				width: 100%;
				height: 240px;
			}

			:nth-child(2) {
				margin-top: 10px;
			}
		}
	}

	.footer-wrapper {
		padding: 80px 30px 30px;
		display: block;

		.footer-right {
			text-align: left;
			margin-top: 50px;
		}
	}

	.footer-wrapper-policy {
		padding: 0 30px 30px;

		.footer-middle {
			display: block;

			a {
				display: block;
				margin-bottom: 20px;
			}
		}
	}

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

		.footer-business-wrapper {
			a {
				margin: 10px 10px;
				display: block;
				font-size: 1.4rem;
			}
		}
	}
}

@media screen and (max-width: 330px) {
	.btn-wrapper {
		margin-top: 50px;

		.btn-link {
			font-size: 1.4rem;
			padding: 10px 35px;
		}
	}

	.top-fv .top-fv-center h2 {
		font-size: 2.4rem;
	}

	.fv {
		.article-title {
			font-size: 3.2rem;
		}
	}

	.inner-intro {
		padding: 100px 0 50px;

		.section-title-p2 {
			font-size: 2rem;
		}
	}

	.top-business-list {
		.card-item {
			height: 370px;

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

	.card-item dl .card-title {
		font-size: 1.6rem;
	}

	.news {
		.inner-wrapper {
			padding: 20px;

			.news-flex {
				.news-detail {
					font-size: 1.2rem;
				}
			}
		}

		.link-wrapper {
			.link-box {
				padding: 30px 0;

				.btn-wrapper {
					.btn-link {
						font-size: 1.4rem;
						padding: 10px 35px;
					}
				}
			}
		}
	}

	.business03 {
		.business-items {
			.business03-left {
				.flex-box {
					position: relative;
				}

				.inner-icon {
					position: absolute;
					top: -50px;
					margin-top: 10px;
				}

				.business03-title {
					font-size: 2.4rem;
					text-align: right;

					&::before {
						top: -20px;
					}
				}
			}
		}
	}

	.contact {
		.contact-wrapper {
			.contact-title {
				span {
					font-size: 1rem
				}
			}

			.contact-item {
				padding: 20px;
				height: 200px;
			}

			.contact-dd {
				.contact-logo {
					max-width: 125px;
				}

				.saiyou-copy {
					font-size: 1.6rem
				}
			}
		}
	}

	.philosophy {
		.philo-box {
			padding: 20px;

			dt {
				font-size: 2rem;
			}
		}
	}
}