@charset "UTF-8";
/* CSS Document */

//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

$color-dark: #289C4C;
.color-dark {
	color: $color-dark;
}

#wrapper{
	overflow: hidden;
}

header{
}

//TOPイメージ ---------------------------------------------
header.top-img{
	background: url("../img/title-back-l.png"),url("../img/title-back-r.png"),url("../img/title-back.jpg");
	background-repeat: no-repeat;
	background-position: left bottom,right bottom,bottom center;
	background-size: 30%, 30%, cover;
	height: 800px;
	text-align: center;
	position: relative;
	padding-top: 7rem;
	z-index: -2;
	@include xl{
		background-size: 25%, 25%, cover;
	}
	@include lg{
		height: 640px;
		background-position: left bottom,right bottom,bottom center;
		background-size: 25%, 25%, cover;
	}
	@include md{
		height: 515px;
	}
	@include sm{
		height: 380px;
		padding-top: 5rem;
	}
	@include xs{
		background: url("../img/title-back-l.png"),url("../img/title-back-r.png"),url("../img/title-xs-back.jpg");
		background-repeat: no-repeat;
		background-position: left 90%,right 90%,bottom center;
		background-size: 45%, 45%, cover;
		height: 460px;
		padding-top: 3rem;
	}
	.d-flex{
		align-items: center;
		justify-content: center;
		.left-img{
			width: 19%;
			margin-right: 1%;
			position: relative;
			animation: bounce-illust 7s 5s steps(1) infinite;
			@include lg{
				width: 16%;
				margin-right: 0.5%;
			}
			@include xs{
				display: none;
			}
			&::before{
				content: "";
				display: block;
				background-image: url("../img/title-l-f.svg");
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				width: 140px;
				height: 140px;
				position: absolute;
				left: -40%;
				top: -20%;
				z-index: -1;
				@include xl{
					width: 110px;
					height: 110px;
					left: -19%;
				}
				@include lg{
					width: 90px;
					height: 90px;
					left: -15%;
					top: -15%;
				}
				@include md{
					top: -50%;
				}
				@include sm{
					top: -80%;
					left: 10%;
				}
				@include xs{
					display: none;
				}
			}
		}
		h1{
			width: 60%;
			@include xs{
				width: 100%;
			}
			img{
				width: 560px;
				margin-bottom: 1.5rem;
				@include lg{
					width: 460px;
				}
				@include sm{
					width: 280px;
					margin-bottom: 1rem;
				}
				& + img{
					width: 645px;
					filter: drop-shadow(0px 4px 7px rgba(0,0,0,0.2));
				}
			}
		}
		.right-img{
			width: 19%;
			margin-left: 1%;
			animation: bounce-illust 7s 5s steps(1) infinite;
			@include lg{
				width: 16%;
				margin-right: 0.5%;
			}
			@include xs{
				display: none;
			}
		}
	}
	.d-sm-none.d-flex{
		align-items: center;
		justify-content: center;
		.left-img{
			display: block!important;
			width: 20%;
			margin-right: 0.5%;
			position: relative;
		}
		.center-img{
			width: 60%;
		}
		.right-img{
			display: block!important;
			width: 20%;
			margin-right: 0.5%;
		}
	}
	.img-01{
		position: relative;
		top: 60%;
		max-width: 1500px;
		margin: auto;
		.img-01-1{
			position: absolute;
			width: 200px;
			bottom: 5px;
			left: 245px;
			animation: floating-illust 4s infinite 1s ease alternate;
			@include xl{
				width: 190px;
				left: 200px;
			}
			@include lg{
				width: 150px;
				left: 180px;
				bottom: 15px;
			}
			@include md{
				width: 110px;
				left: 145px;
			}
			@include sm{
				width: 82px;
				left: 110px;
			}
			@include xs{
				width: 82px;
				left: 15px;
				bottom: 90px;
			}
		}
		.img-01-2{
			position: absolute;
			width: 230px;
			bottom: 62px;
			left: 465px;
			animation: floating-illust2 5s infinite 1s ease alternate;
			@include xl{
				width: 220px;
				left: 410px;
			}
			@include lg{
				width: 180px;
				left: 350px;
			}
			@include md{
				width: 135px;
				left: 270px;
				bottom: 55px;
			}
			@include sm{
				width: 100px;
				left: 210px;
				bottom: 40px;
			}
			@include xs{
				width: 100px;
				left: 95px;
				bottom: 90px;
			}
		}
		.img-01-3{
			position: absolute;
			width: 270px;
			bottom: 63px;
			right: 497px;
			animation: floating-illust 5s infinite 1s ease alternate;
			@include xl{
				width: 260px;
				right: 370px;
			}
			@include lg{
				width: 215px;
				right: 300px;
			}
			@include md{
				width: 160px;
				right: 240px;
				bottom: 55px;
			}
			@include sm{
				width: 110px;
				right: 185px;
				bottom: 45px;
			}
			@include xs{
				width: 110px;
				right: 93px;
				bottom: 90px;
			}
		}
		.img-01-4{
			position: absolute;
			width: 270px;
			bottom: 5px;
			right: 245px;
			animation: floating-illust2 4s infinite 1s ease alternate;
			@include xl{
				width: 260px;
				right: 120px;
			}
			@include lg{
				width: 215px;
		        right: 85px;
				bottom: 15px;
			}
			@include md{
				width: 160px;
			}
			@include sm{
				width: 113px;
				right: 75px;
			}
			@include xs{
				width: 113px;
				right: 0px;
				bottom: 90px;
			}
		}
	}
	.img-02{
		position: absolute;
		bottom: -10%;
		display: block;
		width: 100%;
		@include lg{
			bottom: -12%;
		}
		@include xs{
			bottom: -9%;
		}
		img{
			width: 100%;
		}
	}
	.img-03{
		position: absolute;
		bottom: -17%;
		left: 0;
		right: 0;
		margin: auto;
		animation: floating-illust 5s infinite 1s ease alternate;
		@include lg{
			bottom: -25%;
			width: 70%;
		}
		@include xs{
			width: 100%;
		}
	}
}

@keyframes bounce-illust {
  0%{
	  transform: translateY(0);
  }
  30%{
	  transform: translateY(0);
  }
  33%{
	  transform: translateY(-5px);
  }
  36%{
	  transform: translateY(0);
  }
  39%{
	  transform: translateY(-5px);
  }
  42%{
	  transform: translateY(0);
  }
  100%{
	  transform: translateY(0);
  }
}
@keyframes floating-illust {
  0%{
    transform: translate(0, 0) rotate(-1deg);
  }
  50%{
    transform: translate(0, -7px) rotate(0deg);
  }
  100%{
    transform: translate(0, 0) rotate(1deg);
  }
}
@keyframes floating-illust2 {
  0%{
    transform: translate(0, 0) rotate(1deg);
  }
  40%{
    transform: translate(0, -10px) rotate(0deg);
  }
  100%{
    transform: translate(0, 0) rotate(-1deg);
  }
}

.anim-box-popup {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

.is-animated-popup{
    opacity: 1;
	transform: translateY(0) scale(1.0);
}
.anim-box-popup2 {
	opacity: 0;
	animation: popup2 1s 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes popup2 {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

.is-animated-popup2{
    opacity: 1;
	transform: translateY(0) scale(1.0);
}


//ページ内リンク -------------------------------------------
div.page-nav-link{
	margin: 3rem 0 7rem;
	@include lg{
		margin: 7rem 0 7rem;
	}
	@include md{
		margin: 7rem 0 0;
	}
	@include sm{
		margin: 7rem 0 5rem;
	}
	@include xs{
		margin: 7rem 0 0;
	}
	ul{
		justify-content: space-between;
		@include xs{
			flex-wrap: wrap;
		}
		li{
			width: 32%;
			@include xs{
				width: 100%;
			}
			a{
				background-color: $color-dark;
				color: #fff;
				display: block;
				border-radius: 1rem;
				padding: 2rem;
				text-align: center;
				font-size: 26px;
				font-size: 2.6rem;
				font-weight: bold;
				filter: drop-shadow(0px 5px 0px rgba(18,107,69,1));
				transition: 0.3s;
				@include md{
					font-size: 20px;
					font-size: 2rem;
				}
				@include sm{
					padding: 2rem 1rem;
					line-height: 1.2;
					font-size: 16px;
					font-size: 1.6rem;
				}
				@include xs{
					padding: 1.5rem 1rem;
					line-height: 1.2;
					font-size: 18px;
					font-size: 1.8rem;
					margin-bottom: 2rem;
				}
				span{
					display: block;
					width: 200px;
					margin: auto;
					@include md{
						width: 150px;
					}
					@include sm{
						width: 120px;
					}
					img{
						width: 100%;
					}
				}
				&:hover{
					filter: none;
					transform: translateY(5px);
				}
			}
		}
	}
}
//共通設定 ------------------------------------------------
section{
	position: relative;
	@include sm{
		padding-top: 4rem;
	}
	h2 {
		position: relative;
		display: block;
		position: relative;
		text-align: center;
		font-size: 34px;
		font-size: 3.4rem;
		font-weight: bold;
		letter-spacing: 1px;
		padding: 5rem 0 4rem 0;
		@include sm{
			font-size: 30px;
			font-size: 3rem;
			padding: 0 0 3rem 0;
		}
		&::before{
			content: "";
			display: block;
			width: 86px;
			height: 32px;
			background-image: url("../img/mini-title.svg");
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			margin: 0 auto 2rem;
			@include sm{
				margin: 0 auto 1rem;
			}
		}
		span {
			width: 200px;
			display: block;
			margin: auto;
			@include sm{
				width: 180px;
			}
		}
	}
}
//総社市の企業を知る ----------------------------------------
section#company-in-soja-city{
	div.d-flex{
		justify-content:center;
		position: relative;
		.left-img{
			position: absolute;
			bottom: -25%;
			left: 0;
			display: flex;
			justify-content: left;
			@include xs{
				display: none;
			}
			&::before{
				content: "";
				background-image: url("../img/company-l.svg");
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				width: 170px;
				height: 110px;
				display: block;
				position: absolute;
				right: -95%;
				z-index: -1;
				@include md{
					width: 100px;
					height: 70px;
					right: -20%;
				}
				@include sm{
					right: 0%;
					top: -25%;
				}
			}
			img{
				@include md{
					width: 65%;
				}
			}
		}
		.right-img{
			position: absolute;
			bottom: -25%;
			right: 0;
			display: flex;
			justify-content: right;
			@include xs{
				display: none;
			}
			&::before{
				content: "";
				background-image: url("../img/company-r.svg");
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				width: 170px;
				height: 110px;
				display: block;
				position: absolute;
				left: -100%;
				z-index: -1;
				@include md{
					width: 100px;
					height: 70px;
					left: -20%;
				}
				@include sm{
					left: -10%;
					top: -25%;
				}
			}
			img{
				@include md{
					width: 65%;
				}
			}
		}
	}
	ul{
		margin-bottom: 0;
		li{
			margin-bottom:  7rem;
			@include md{
				margin-bottom:  4rem;
			}
			.banner {
				position: relative;
				overflow: hidden;
				max-width: 450px;
				height: 200px;
				background: $color-dark;
				border: 1px solid #333333;
				&::after {
					position: absolute;
					content: "";
					display: block;
					width: 100%;
					height: 100%;
					top: 0;
					background: url("../img/company-01.jpg") no-repeat center center;
					-webkit-background-size: cover;
					-moz-background-size: cover;
					-ms-background-size: cover;
					background-size: cover;
					-webkit-transition: all .3s ease-out;
					-moz-transition: all .3s ease-out;
					-ms-transition: all .3s ease-out;
					transition: all .3s ease-out;
				}
				&:hover::after {
					opacity: 0.8;
					-moz-transform: scale(1.1);
					-webkit-transform: scale(1.1);
					-ms-transform: scale(1.1);
					transform: scale(1.1);
				}
				a {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 1;
					height: 100%;
					text-decoration: none;
					color: #fff
				}
			}
			dd{
				padding-top: 1rem;
				font-weight: bold;
				color: #4D4D4D;
				line-height: 1.2;
				span{
					font-weight: normal;
					font-size: 10px;
					font-size: 1rem;
					color: #808080;
					overflow-wrap: anywhere;
					word-break: normal;
					line-break: strict;
				}
			}
			&:nth-child(2){
				.banner{
					&::after {
						position: absolute;
						content: "";
						display: block;
						width: 100%;
						height: 100%;
						top: 0;
						background: url("../img/company-02.jpg") no-repeat center center;
						-webkit-background-size: cover;
						-moz-background-size: cover;
						-ms-background-size: cover;
						background-size: cover;
						-webkit-transition: all .3s ease-out;
						-moz-transition: all .3s ease-out;
						-ms-transition: all .3s ease-out;
						transition: all .3s ease-out;
					}
				}
			}
			&:nth-child(3){
				.banner{
					&::after {
						position: absolute;
						content: "";
						display: block;
						width: 100%;
						height: 100%;
						top: 0;
						background: url("../img/company-03.jpg") no-repeat center center;
						-webkit-background-size: cover;
						-moz-background-size: cover;
						-ms-background-size: cover;
						background-size: cover;
						-webkit-transition: all .3s ease-out;
						-moz-transition: all .3s ease-out;
						-ms-transition: all .3s ease-out;
						transition: all .3s ease-out;
					}
				}
			}
		}
	}
	div.d-flex.d-sm-none{
		justify-content:center;
		position: relative;
		padding-top: 15rem;
		.left-img{
			position: absolute;
			bottom: -25%;
			left: 0;
			display: flex;
			justify-content: left;
			&::before{
				content: "";
				background-image: url("../img/company-l.svg");
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				width: 100px;
				height: 70px;
				display: block;
				position: absolute;
				right: 0%;
				top: -25%;
				z-index: -1;
			}
			img{
				width: 65%;
			}
		}
		.right-img{
			position: absolute;
			bottom: -25%;
			right: 0;
			display: flex;
			justify-content: right;
			&::before{
				content: "";
				background-image: url("../img/company-r.svg");
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				width: 100px;
				height: 70px;
				display: block;
				position: absolute;
				left: -10%;
				top: -25%;
				z-index: -1;
			}
			img{
				width: 65%;
			}
		}
	}
}

//企業探検ツアーを見る ---------------------------------------
section#company-tour{
	background-image: url("../img/tour-back.svg");
	h2{
		@include xs{
			padding: 0 0 10rem 0;
		}
	}
	div.d-flex{
		justify-content:center;
		position: relative;
		.right-img{
			animation: floating-illust 4s infinite 1s ease alternate;
			position: absolute;
			bottom: -48%;
			right: 0;
			margin-right: -2rem;
			display: flex;
			justify-content: right;
			@include md{
				bottom: -40%;
			}
			@include sm{
				right: 2%;
				bottom: -60%;
			}
			@include xs{
				right: 5%;
				bottom: -40%;
			}
			&::before{
				content: "";
				background-image: url("../img/tour-r.svg");
				background-repeat: no-repeat;
				background-position: center;
				background-size: contain;
				width: 150px;
				height: 80px;
				display: block;
				position: absolute;
				left: -70%;
				z-index: -1;
				@include md{
					width: 120px;
					height: 60px;
					left: -15%;
					top: -10%;
				}
				@include sm{
					background-image: url("../img/tour-sm-r.svg");
					width: 120px;
					height: 60px;
					left: 35%;
					top: -30%;
				}
				@include xs{
					left: -15%;
					top: 3%;
				}
			}
			img{
				@include md{
					width: 65%;
				}
			}
		}
	}
	h3{
		font-size: 19px;
		font-size: 1.9rem;
		font-weight: bold;
		margin-bottom: 1.5rem;
	}
	ul li{
		margin-bottom:  7rem;
		@include sm{
			margin-bottom:  5rem;
		}
	}
}

//登場キャラ紹介 --------------------------------------------
section#character{
	div.d-flex{
		justify-content:center;
		position: relative;
	}
	ul{
		justify-content: space-between;
		flex-wrap: wrap;
		li{
			width: 49%;
			display: flex;
			flex-wrap: wrap;
			border-radius: 2rem;
			padding: 1rem;
			margin-bottom: 2rem;
			@include sm{
				margin-bottom: 1.5rem;
			}
			@include xs{
				width: 100%;
			}
			div.character-l{
				img{
					filter: drop-shadow(8px 8px 1px rgba(0,0,0,0.15));
					@include md{
						width: 50%;
					}
				}
			}
			div.character-r{
				.h3-mini{
					font-size: 16px;
					font-size: 1.6rem;
					font-weight: bold;
					line-height: 1.3;
					margin-bottom: 1rem;
					@include sm{
						font-size: 14px;
						font-size: 1.4rem;
					}
				}
				h3{
					font-size: 36px;
					font-size: 3.6rem;
					font-weight: bold;
					margin-bottom: 2rem;
					line-height: 0.8;
					@include sm{
						font-size: 30px;
						font-size: 3rem;
					}
					span{
						font-size: 16px;
						font-size: 1.6rem;
						font-weight: normal;
						@include sm{
							font-size: 14px;
							font-size: 1.4rem;
						}
					}
				}
				p{
					line-height: 1.5;
				}
			}
			&:nth-child(1){
				background-color: #FCE7E4;
				div.character-l{
					width: 40%;
					margin: auto;
					@include md{
						width: 100%;
						text-align: center;
					}
				}
				div.character-r{
					width: 60%;
					padding: 2rem 2rem 2rem 0rem;
					@include lg{
						padding: 1.5rem 1.5rem 1.5rem 0rem;
					}
					@include md{
						width: 100%;
						padding: 3rem 1.5rem 1.5rem 1.5rem;
					}
					h3{
						color: #BA5D4F;
						span{
							color: #333333;
						}
					}
				}
			}
			&:nth-child(2){
				background-color: #EDE8FA;
				div.character-l{
					width: 40%;
					margin: auto;
					@include md{
						width: 100%;
						text-align: center;
					}
				}
				div.character-r{
					width: 60%;
					padding: 2rem 2rem 2rem 0rem;
					@include lg{
						padding: 1.5rem 1.5rem 1.5rem 0rem;
					}
					@include md{
						width: 100%;
						padding: 3rem 1.5rem 1.5rem 1.5rem;
					}
					h3{
						color: #A379B4;
						span{
							color: #333333;
						}
					}
				}
			}
			&:nth-child(3){
				background-color: #F4FBEF;
				div.character-l{
					width: 40%;
					margin: auto;
					@include md{
						width: 100%;
						text-align: center;
					}
				}
				div.character-r{
					width: 60%;
					padding: 2rem 2rem 2rem 0rem;
					@include lg{
						padding: 1.5rem 1.5rem 1.5rem 0rem;
					}
					@include md{
						width: 100%;
						padding: 3rem 1.5rem 1.5rem 1.5rem;
					}
					h3{
						color: #28884C;
					}
					.h3-mini{
						color: #28884C;
					}
				}
			}
			&:nth-child(4){
				background-color: #FFF4C6;
				div.character-l{
					width: 40%;
					margin: auto;
					@include md{
						width: 100%;
						text-align: center;
					}
				}
				div.character-r{
					width: 60%;
					padding: 2rem 2rem 2rem 0rem;
					@include lg{
						padding: 1.5rem 1.5rem 1.5rem 0rem;
					}
					@include md{
						width: 100%;
						padding: 3rem 1.5rem 1.5rem 1.5rem;
					}
					h3{
						color: #A87146;
					}
					.h3-mini{
						color: #A87146;
					}
				}
			}
			&:nth-child(5){
				background-color: #FCEBEB;
				width: 32%;
				@include sm{
					width: 49%;
				}
				@include xs{
					width: 100%;
				}
				div.character-l{
					width: 100%;
					text-align: center;
				}
				div.character-r{
					width: 100%;
					padding: 2rem;
					@include lg{
						padding: 1.5rem;
					}
					h3{
						color: #785060;
						span{
							color: #333333;
						}
					}
				}
			}
			&:nth-child(6){
				background-color: #FCEFDA;
				width: 32%;
				@include sm{
					width: 49%;
				}
				@include xs{
					width: 100%;
				}
				div.character-l{
					width: 100%;
					text-align: center;
				}
				div.character-r{
					width: 100%;
					padding: 2rem;
					@include lg{
						padding: 1.5rem;
					}
					h3{
						color: #9F6323;
						span{
							color: #333333;
						}
					}
				}
			}
			&:nth-child(7){
				background-color: #E8F5FD;
				width: 32%;
				@include sm{
					width: 49%;
				}
				@include xs{
					width: 100%;
				}
				div.character-l{
					width: 100%;
					text-align: center;
				}
				div.character-r{
					width: 100%;
					padding: 2rem;
					@include lg{
						padding: 1.5rem;
					}
					h3{
						color: #61659E;
						span{
							color: #333333;
						}
					}
				}
			}
		}
		& + p{
			text-align: center;
			font-size: 20px;
			font-size: 2rem;
			font-weight: bold;
			color: #808080;
			margin-bottom: 12rem;
			@include md{
				margin-bottom: 7rem;
			}
		}
	}
}

footer{
	background-image: url("../img/tour-back.svg");
	background-size: cover;
	padding: 4rem;
	p{
		line-height: 1.3;
		text-align: center;
		.green-font{
			font-size: 16px;
			font-size: 1.6rem;
			font-weight: bold;
			color: #289C4C;
		}
		.black-font{
			font-size: 24px;
			font-size: 2.4rem;
			font-weight: bold;
			color: #231815;
			display: block;
			margin-bottom: 1rem;
		}
	}
}