@charset "utf-8";

/* common
-------------------------------------------------------*/

*{
	box-sizing: border-box;
}

#wrapper {
	overflow: hidden;
	background: var(--main_color03);
}
.sp {
	display: none;
}
.en {
	font-family: "Oswald", sans-serif;
}
.area {
	padding: 150px 20px;
	box-sizing: border-box;
}
.inner {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
}
.txt_center {
	text-align: center;
}
.ttl01 {
	text-align: center;
	margin-bottom: 60px;
	font-size: 4rem;
	font-weight: 700;
}
.ttl01_en {
	font-size: 10rem;
	font-family: "Oswald", sans-serif;
	color: var(--main_color01);
}
@media screen and (max-width:1000px) {
	.ttl01_en {
	font-size: 8rem;
}
.ttl01 {
	font-size: 3.5rem;
}
}
.ttl02 {
	font-weight: 700;
	font-size: 6rem;
	margin-bottom: 50px;
}
.btn_contact {
	width: 100%;
}
.btn_contact a {
	background: var(--color_btn);
	color: #fff;
	font-size: 3rem;
	font-family: "Oswald", sans-serif;
	text-align: center;
	width: 250px;
	height: 54px;
	border-radius: 100px;
	line-height: 1;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 0px 13px -6px rgba(0,0,0,0.6);
	position: relative;
	font-weight: 400;
}
.btn_contact a::after {
	position: absolute;
	display: block;
	content: "";
	background: url(../img/common/btn_arrow.png)no-repeat right center/31px 31px;
	width: 31px;
	height: 31px;
	right: 10px;
	top: 50%;
	transform: translate(0,-50%);
}

.btn_contact a:hover {
	background: #fff;
	color: #fc3a3a;
	opacity: 1;
}

.btn01 {
	width: 100%;
}
.btn01 a {
	border: 3px solid var(--color_btn);
	border-radius: 100px;
	text-align: center;
	font-size: 2.6rem;
	font-weight: 700;
	max-width: 100%;
	box-sizing: border-box;
	width: 400px;
	height: 70px;
	line-height: 1;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	color: #fff;
	margin: 80px auto 0;
	box-shadow: 0px 0px 13px -6px rgba(0,0,0,0.6);
	background: var(--color_btn);
}
.btn01 a::after {
	position: absolute;
	display: block;
	content: "";
	background: url(../img/common/btn_arrow.png)no-repeat right center/31px 31px;
	width: 31px;
	height: 31px;
	right: 20px;
	top: 50%;
	transform: translate(0,-50%);
}
.btn01.bg_red a {
	background: var(--color_btn);
	color: #fff;
}
.btn01.bg_red a::after {
	background: url(../img/common/btn_arrow.png)no-repeat right center/31px 31px;
    width: 31px;
    height: 31px;
}
.btn01.top_txt a {
	margin: 20px auto 70px;
}
.btn_txt {
	text-align: center;
	font-size: 2.4rem;
	margin-bottom: 20px;
	color: #7a7878;
	font-weight: 700;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	
}
@media screen and (max-width:768px) {
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.area {
		padding: 50px 20px;
	}
	.inner {
		max-width: 100%;
	}
	.ttl01 {
		margin-bottom: 30px;
		font-size: 2rem;
	}
	.ttl02 {
		font-size: 2.8rem;
		margin-bottom: 30px;
	}
	.btn01 a {
		font-size: 1.6rem;
		height: 50px;
		margin: 40px auto 0;
		width: 80%;
	}
	.btn01 a::after {
		right: 15px;
	}
	.btn01.top_txt a {
		margin: 20px auto 50px;
	}
	.btn_txt {
		font-size: 1.8rem;
		margin-bottom: 10px;
	}

}


/* header
-------------------------------------------------------*/
#header {
	/*padding: 15px 20px;*/
	padding: 10px 20px;
	background: rgba(255,255,255,1); 
	position: relative;
  width: 100%;
  z-index: 1000;
  transition: background-color .35s ease, box-shadow .35s ease;
}
/* スクロール後に固定される状態 */
#header.is-fixed{
  position: fixed;
  left: 0;
  right: 0;
  top: -120px;
  animation: headerDrop .25s ease both; /* forwards じゃなく both 推奨 */
  background: rgba(255,255,255,.85); /* ← 少し透過の白 */
  backdrop-filter: blur(6px);        /* 使える環境はちょい綺麗（要らなければ消してOK） */
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  padding: 10px 20px;
}
/* 上からスッと降りる */
@keyframes headerDrop{
  to { top: 0; }
}

#header .inner {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	max-width: 100%;
	transition: padding .25s ease;
}

#header .logo img {
	/*max-width: 323px;*/
	max-width: 280px;
}
#header.is-fixed .logo img{
max-width: 280px;
}
#header .btn_contact {
	width: inherit;
}
@media screen and (max-width:1250px) {
	#header .logo img {
		max-width: 250px;
	}
}
@media screen and (max-width:920px) {
	#header .logo img {
		max-width: 200px;
	}
	#header.is-fixed .logo img{
max-width: 200px;
}
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	
}
@media screen and (max-width:768px) {
	#header {
		padding: 10px;
	}
	#header.is-fixed{
		padding: 10px;
	}
	
}

/* nav
-------------------------------------------------------*/

/* 親ナビだけに適用 */
#nav_pc > ul {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-end;
	font-size: 1.8rem;
	font-weight: 700;
}

#nav_pc > ul > li {
	position: relative;
	margin-left: 80px;
	padding-bottom: 15px; /* ← これ追加。下に見えない当たり判定を作る */
}

/* 親リンク */
#nav_pc > ul > li > a {
	display: block;
	position: relative;
	z-index: 2;
}

#nav_pc a:hover {
	color: #fc3a3a;
	opacity: 1;
}

/* inner nav */
#nav_pc .inner_nav {
	position: absolute;
	top: 100%; /* ← calc(100% + 15px) をやめる */
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	display: block;
	width: max-content;
	min-width: 220px;
	padding: 14px 18px;
	margin: 0;
	list-style: none;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	z-index: 100;
}

/* 開いた時 */
#nav_pc > ul > li.open > .inner_nav {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

#nav_pc .inner_nav li {
	margin: 0;
}

#nav_pc .inner_nav a {
	display: block;
	padding: 10px 0;
	line-height: 1.5;
	white-space: nowrap;
	font-size: 1.5rem;
	font-weight: 700;
	color: #333;
}



#nav_pc .inner_nav a:hover {
	color: #fc3a3a;
}

/*
#nav_pc > ul > li:has(.inner_nav) > a::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	vertical-align: middle;
}


#nav_pc > ul > li.open:has(.inner_nav) > a::after {
	transform: rotate(225deg) translateY(-1px);
}*/

/* レスポンシブ */
@media screen and (max-width:1550px) {
	#nav_pc > ul > li {
		margin-left: 50px;
	}
}

@media screen and (max-width:1350px) {
	#nav_pc > ul > li {
		margin-left: 40px;
	}
}

@media screen and (max-width:1250px) {
	#header .btn_contact a {
		width: 180px;
		font-size: 2.6rem;
	}

	#nav_pc > ul {
		font-size: 1.6rem;
	}

	#nav_pc > ul > li {
		margin-left: 20px;
	}

	#nav_pc .inner_nav a {
		font-size: 1.4rem;
	}
}

@media screen and (max-width:920px) {
	#header .btn_contact a {
		width: 140px;
		height: 40px;
		font-size: 2rem;
	}

	#header .btn_contact a::after {
		background: url(../img/common/btn_arrow.png) no-repeat right center / 20px 20px;
		width: 20px;
		height: 20px;
	}

	#nav_pc > ul {
		font-size: 1.4rem;
	}

	#nav_pc > ul > li {
		margin-left: 15px;
	}

	#nav_pc .inner_nav {
		min-width: 190px;
		padding: 12px 16px;
	}
}
@media screen and (max-width:768px) {
	#btn_nav {
		position: fixed;
		top: 18px;
		right: 15px;
		z-index: 999;
		cursor: pointer;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		height: 25px;
	}
	#btn_nav span {
		display: inline-block;
		background: var(--color_btn);
		width: 30px;
		height: 3px;
		transition: .5s;
		position: relative;
	}
	#btn_nav.active span {
		transform: translateY(11px) rotate(45deg);
	}
	#btn_nav.active span:nth-child(2) {
		transform: scaleX(0);
	}
	#btn_nav.active span:last-child {
		transform: translateY(-11px) rotate(-45deg);
	}
	#nav_sp .nav_cont,
	#nav_sp .nav_cont::after {
		position: fixed;
		top: 0;
		height: 100dvh;
		height: 100vh; /* フォールバック */
		width: 100%;
		overflow: hidden;
	}
	#nav_sp .nav_cont {
		overflow: auto;
		background: #fff;
		right: -100%;
		z-index: 998;
		transition: .5s;
		padding: 15px 20px;
		box-sizing: border-box;
	}
	#nav_sp .nav_cont.active {
		position: fixed;
		right: 0;
	}
	#nav_sp ul {
		margin: 20px 0;
		display: flex;
		flex-flow: row wrap;
		align-items: flex-start;
		justify-content: space-between;
	}
	#nav_sp ul li {
		width: 47%;
		font-size: 1.4rem;
	}
	#nav_sp ul li a {
		border-bottom: 1px solid #ff9900;
		padding: 0 0 20px;
		margin: 0 0 20px;
		display: block;
	}
	#nav_sp ul .en {
		display: block;
		font-size: 3rem;
		letter-spacing: 0.1em;
	}
	#nav_sp .btn_contact a {
		margin: 0 auto;
		width: 70%;
		font-size: 2.4rem;
		height: 50px;
	}

	#header.is-fixed .logo img{
max-width: 200px;
}
}



/* footer
-------------------------------------------------------*/
#footer {
	background: #fba90d;
}
#footer.area {
	padding: 50px 20px 70px;
}
#footer .inner {
	position: relative;
	z-index: 2;
}
#footer .footer_in {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	justify-content: center;
	margin-bottom: 80px;
}
#footer .logo {
	margin-right: 50px;
}
.nav_footer {
	font-size: 1.8rem;
	font-weight: 700;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	max-width: 640px;
}
.nav_footer li {
	width: 25%;
	margin-bottom: 10px;
}
.nav_footer a {
	position: relative;
	padding-left: 30px;
}
.nav_footer a::before {
	position: absolute;
	display: block;
	content: "";
	background: url(../img/common/nav_arrow.png)no-repeat left center/10px 14px;
	width: 10px;
	height: 14px;
	left: 0;
	top: 8px;
}
#footer .logo img {
	max-width: 219px;
}
.copy {
	font-size: 1.4rem;
	text-align: center;
}
@media screen and (max-width:900px) {
	.nav_footer a {
	padding-left: 20px;
}
	.nav_footer {
	font-size: 1.4rem;
	}
	.nav_footer a::before {
	top: 4px;
}
}
@media screen and (max-width:768px) {
	#footer.area {
		padding: 40px 20px;
	}
	#footer .footer_in {
		flex-flow: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 50px;
	}
	#footer .logo {
		margin-right: 0;
		margin-bottom: 50px;
	}
	.nav_footer {
		font-size: 1.4rem;
		font-weight: 700;
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: flex-start;
		max-width: 540px;
	}
	.nav_footer li {
		margin-right: 0;
		width: 50%;
		margin-bottom: 10px;
	}
	.nav_footer a {
		position: relative;
		padding-left: 20px;
	}
	.nav_footer a::before {
		top: 5px;
	}
	#footer .logo img {
		max-width: 180px;
	}
	.copy {
		font-size: 1rem;
	}

}


/* index
-------------------------------------------------------*/
/* visual */
#index #visual {
	background: var(--main_color01) url(../img/index/visual_bg_btm.png)no-repeat center bottom/100% auto;
	position: relative;
}
#index #visual .inner {
	max-width: 1400px;
}
#index #visual.area {
	padding: 50px 20px 0;
}
#index #visual .ttl {
	font-size: clamp(3rem, 4vw,  5.8rem);
	font-weight: 700;
	line-height: 1.4;
	position: relative;
	z-index: 3;
}
#index #visual .ttl span {
	font-size: 150%;
}
#index #visual .img {
	position: relative;
	z-index: 10;
	margin: -12% auto 0;
	margin-right: -15%;
	text-align: center;
}
#index #visual .img img {
	max-width: 95%;
}
#index #visual .illust {
	z-index: 1;
}
#index #visual .cloud01 {
	position: absolute;
	left: 25%;
	top: 25%;
	animation: fuwa01 3s ease-in-out infinite;
}
@keyframes fuwa01 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* 上に移動 */
  }
  100% {
    transform: translateY(0);
  }
}
#index #visual .cloud01 img {
	width: 15vw;
}
#index #visual .cloud02 {
	right: 7%;
	top: 8%;
	animation: fuwa02 3s ease-in-out infinite;
}
@keyframes fuwa02 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(13px); /* 上に移動 */
  }
  100% {
    transform: translateY(0);
  }
}
#index #visual .cloud02 img {
	width: 15vw;
}
@media screen and (max-width:768px) {
	#index #visual.area {
		padding: 20px 0 0;
	}
	#index #visual .ttl {
		font-size: 2.6rem;
		padding: 0 20px;
	}
	#index #visual .img {
		margin: 0 auto 0;
		margin-right: -20%;
	}
	#index #visual .img img {
		max-width: 95%;
	}
	#index #visual .cloud01 {
		left: 10%;
		top: 40%;
		animation: fuwa01 3s ease-in-out infinite;
	}
	@keyframes fuwa01 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px); /* 上に移動 */
	}
	100% {
		transform: translateY(0);
	}
	}
	#index #visual .cloud01 img {
		width: 20vw;
	}
	#index #visual .cloud02 {
		top: 15%;
	}
	@keyframes fuwa02 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(8px); /* 上に移動 */
	}
	100% {
		transform: translateY(0);
	}
	}
	#index #visual .cloud02 img {
		width: 20vw;
	}
}
/* index_about */
.index_about {
	position: relative;
}
.index_about.area {
	padding: 50px 20px 150px;
}
.index_about .ttl01_en {
	text-align: left;
	margin: 0 0 50px;
}

.index_about .txt {
	font-size: clamp(0px, 1.5vw, 5rem);
	line-height: 1.8;
}
.index_about .txt_box {
	max-width: 1040px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
	padding: 0 20px 0 80px;
}
.index_about .txt_box .btn01 a {
	margin: 80px 0 0;
}

.btn01 a:hover {
	background: #fff;
	color: #fc3a3a;
	opacity: 1;
}

.index_about .img_box {
	position: absolute;
	right: 0;
	top: -18%;
}


@media screen and (max-width:1050px) {
	.index_about .img_box {
	right: 2%;
}
}
@media screen and (max-width:950px) {
	.index_about .img_box {
	right: 5%;
	top: -10%;
}
.index_about .img_box .img01 {
	width: 110%;
}
}

.index_about .img02 {
	position: absolute;
	right: 6%;
	top: 43%;
	animation: pyonpyon 2s ease-in-out infinite;
}
@keyframes pyonpyon {
  0%, 30%, 100% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-10px); /* 1回目のジャンプ */
  }
  20% {
    transform: translateY(0); /* 着地 */
  }
  25% {
    transform: translateY(-3px); /* 2回目の軽いジャンプ */
  }
}
.index_about .img02 img {
	max-width: 5vw;
}
.index_about .img03 {
	position: absolute;
	top: 61%;
	right: 20%;
	animation: yurayura 2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes yurayura {
  from { transform: rotate(-8deg); }
  to   { transform: rotate(8deg); }
}
.index_about .img03 img {
	max-width: 5vw;
}
.index_about .road {
	position: absolute;
	left: 0;
	top: -18%;
	z-index: 1;
}
.index_about .road img {
	max-width: 80vw;
}

@media screen and (max-width:1300px) {
	.index_about .txt {
		font-size: 2.2rem;
	}
}

@media screen and (max-width:1100px) {
	.index_about.area {
		padding: 50px 20px 150px;
	}
}
@media screen and (max-width:768px) {
	.index_about.area {
		padding: 30px 20px 50px;
	}
	.index_about .ttl01_en {
		text-align: left;
		margin-bottom: 30px;
		font-size: 4rem;
	}
	.index_about .txt {
		font-size: 1.6rem;
		line-height: 1.6;
	}
	.index_about .txt_box {
		max-width: 100%;
		padding: 0 20px;
	}
	.index_about .txt_box .ttl01 {
		margin-left: 0;
	}
	.index_about .txt_box .txt {
		margin-left: 0;
	}
	.index_about .txt_box .btn01 a {
		margin: 50px auto 0;
	}
	.index_about .img_box {
		top: -11%;
		width: 90%;
	}
	@keyframes pyonpyon {
	0%, 30%, 100% {
		transform: translateY(0);
	}
	10% {
		transform: translateY(-5px); /* 1回目のジャンプ */
	}
	20% {
		transform: translateY(0); /* 着地 */
	}
	25% {
		transform: translateY(-3px); /* 2回目の軽いジャンプ */
	}
	}
}
/* index_link */
.index_link.area {
	padding: 0;
}
.index_link .box {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	max-width: 1300px;
	margin: 0 auto;
	padding: 100px 20px;
	position: relative;
}
.index_link .box.reverse {
	flex-flow: row-reverse;
}
.index_link .box .txt_box {
	width: 45%;
}
.index_link .box .img {
	width: 50%;
	text-align: right;
}
.index_link .box.reverse .img {
	text-align: left;
}
.index_link .box .img img {
	max-width: 90%;
}
.index_link .ttl01 {
	text-align: left;
	font-size: 6rem;
	font-size: clamp(3rem, 5vw, 6rem);
}
.index_link .ttl01 span {
	position: relative;
	padding-left: 80px;
}



.index_link .ttl01 span::before {
	position: absolute;
	display: block;
	content: "";
	width: 20%;
	height: auto;
	aspect-ratio: 1 / 1;
	left: 0;
	top: 50%;
	transform: translate(0,-50%);
}


.index_link .box01 .ttl01 span::before {
	background: url(../img/index/ttl_icon01.png)no-repeat left center/contain;
}
.index_link .box02 .ttl01 span::before {
	background: url(../img/index/ttl_icon02.png)no-repeat left center/contain;
}
.index_link .box03 .ttl01 span::before {
	background: url(../img/index/ttl_icon03.png)no-repeat left center/contain;
}
.index_link .box .txt {
	font-size: 2rem;
	line-height: 1.8;
}
.index_link .box .btn01 a {
	margin: 60px 0 0;
}
.index_link .box .illust {
	position: absolute;
}
.index_link .box .illust01 {
	transform-origin: bottom center;
	animation: tattatta 3s ease-in-out infinite;
	left: 15%;
	bottom: -22%;
}
@keyframes tattatta {
  0%, 10%, 100% {
    transform: translateY(0) rotate(0deg); /* 静止 */
  }
  /* 走っている部分 */
  15% {
    transform: translateY(-6px) rotate(-3deg);
  }
  20% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-6px) rotate(3deg);
  }
  30% {
    transform: translateY(0) rotate(0deg);
  }
  35% {
    transform: translateY(-6px) rotate(-3deg);
  }
  40% {
    transform: translateY(0) rotate(0deg); /* 走り終わり */
  }
}
.index_link .box .illust01 img {
	max-width: 9vw;
}
.index_link .box .illust02 {
	right: 45%;
	top: -31%;
	animation: fuwa01 3s ease-in-out infinite;
}
.index_link .box .illust02 img {
	max-width: 7vw;
}
.index_link .box .illust03 {
	left: 10%;
	bottom: 0;
	animation: fuwa02 3s ease-in-out infinite;
}
.index_link .box .illust03 img {
	max-width: 13vw;
}
.index_link .box .illust04 {
	right: 20%;
	bottom: -24%;
	animation: pyonpyon 2s ease-in-out infinite;
}
.index_link .box .illust04 img {
	max-width: 10vw;
}
.index_link .box .illust05 {
	left: -8%;
	bottom: 5%;
	animation: fuwa01 3s ease-in-out infinite;
}
.index_link .box .illust05 img {
	max-width: 6.5vw;
}
.index_link .work_info {
	margin-top: 50px;
	font-size: 2rem;
}
.index_link .work_info dl {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
}
.index_link .work_info dl:not(:last-child) {
	margin-bottom: 10px;
}
.index_link .work_info dl dt {
	color: #fff;
	min-width: 150px;
	background: #ff9900;
	text-align: center;
	border-radius: 7px;
	padding: 3px 0;
	margin-right: 10px;
	border: 1px solid #ff9900;
}
.index_link .work_info dl.col02 dt {
	background: #fbc04f;
	color: #fff;
	border: 1px solid #fbc04f;
}
.index_link .work_info dl dd {
	color: #ff9900;
	border: 1px solid #ff9900;
	border-radius: 7px;
	padding: 3px 25px;
	background: #fff;
	margin-right: 10px;
}
@media screen and (max-width:1100px) {
	.index_about.area {
		padding: 60px 0;
	}
	.index_link .work_info {
	font-size: 1.4rem;
}
.index_link .work_info dl dd {
	padding: 3px 10px;
}
}
@media screen and (max-width:768px) {
	.index_link.area {
		padding: 0;
	}
	.index_link .box {
		flex-flow: column;
		align-items: center;
		justify-content: center;
		padding: 50px 20px;
	}
	.index_link .box.reverse {
		flex-flow: column;
	}
	.index_link .box .txt_box {
		width: 100%;
	}
	.index_link .box .img {
		width: 90%;
		text-align: center;
		margin-top: 20px;
	}
	.index_link .box.reverse .img {
		text-align: center;
	}
	.index_link .box .img img {
		max-width: 90%;
	}
	.index_link .ttl01 span {
		padding-left: 70px;
	}
	.index_link .ttl01 span::before {
		width: 25%;
	}
	.index_link .box .txt {
		font-size: 1.6rem;
		line-height: 1.8;
	}
	.index_link .box .illust01 {
		left: 10%;
		bottom: -5%;
	}
	.index_link .box .illust01 img {
		max-width: 18vw;
	}
	.index_link .box .illust02 {
		right: 45%;
		top: -8%;
		animation: fuwa01 3s ease-in-out infinite;
	}
	.index_link .box .illust02 img {
		max-width: 10vw;
	}
	.index_link .box .illust03 {
		left: 10%;
		bottom: 0;
		animation: fuwa02 3s ease-in-out infinite;
	}
	.index_link .box .illust03 img {
		max-width: 18vw;
	}
	.index_link .box .illust04 {
		right: 15%;
		bottom: -5%;
	}
	.index_link .box .illust04 img {
		max-width: 16vw;
	}
	.index_link .box .illust05 {
		left: 20%;
		bottom: -10%;
	}
	.index_link .box .illust05 img {
		max-width: 10vw;
	}
	.index_link .box .btn01 a {
		margin: 40px auto 0;
	}
	.index_link .work_info {
		margin-top: 30px;
		font-size: 1.6rem;
	}
	.index_link .work_info dl dt {
		min-width: 100px;
	}
	.index_link .work_info dl dd {
		padding: 3px 15px;
	}

}
/* entry_area */
.entry_area.area {
	padding: 100px 20px;
}
.entry_area .inner {
	max-width: 640px;
	margin: 0 auto;
	position: relative;
}
.entry_area .txt_box {
	position: absolute;
	right: 50%;
	top: 8%;
	transform: translate(50%,0);
	width: 80%;
	text-align: center;
}
.entry_area .txt_box .ttl01 {
	margin-bottom: 15px;
	font-size: clamp(4rem,6vw,6rem);
}
.entry_area .txt_box .txt {
	font-size: clamp(1.4rem,2vw,1.8rem);
	margin-bottom: 15px;
}
.entry_area .txt_box .mid_ttl {
	color: var(--color_btn);
	font-size: clamp(2rem,2.5vw,2.4rem);
	font-weight: 700;
}
.entry_area .txt_box .btn01 a {
	margin: 20px auto 0;
}
.entry_area .illust {
	position: absolute;
}
.entry_area .illust06 {
	left: -20%;
	top: 55%;
	animation: pyonpyon 2s ease-in-out infinite;
}
.entry_area .illust06 img {
	width: 178px;
}
.entry_area .illust07 {
	right: -15%;
	top: 50%;
	animation: yurayura2 1s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes yurayura2 {
  from { transform: rotate(-2deg); }
  to   { transform: rotate(2deg); }
}
.entry_area .illust07 img {
	width: 76px;
}
@media screen and (max-width:768px) {
	.entry_area.area {
		padding: 50px 20px;
	}
	.entry_area .txt_box {
		top: 13%;
	}
	.entry_area .txt_box .ttl01 {
		margin-bottom: 10px;
		font-size: clamp(3rem,6vw,6rem);
	}
	.entry_area .txt_box .txt {
		margin-bottom: 10px;
		font-size: clamp(1.2rem,2.5vw,1.8rem);
	}
	.entry_area .txt_box .mid_ttl {
		font-size: clamp(1.6rem,3vw,2.4rem);
	}
	.entry_area .txt_box .btn01 a {
		margin: 15px auto 0;
		max-width: 80%;
	}
	.entry_area .illust06 {
		left: 0;
		top: 63%;
		animation: pyonpyon 2s ease-in-out infinite;
	}
	.entry_area .illust06 img {
		width: 23vw;
	}
	.entry_area .illust07 {
		right: 2%;
		top: 58%;
	}
	.entry_area .illust07 img {
		width: 11vw;
	}
}
@media screen and (max-width:560px) {
	.entry_area .txt_box {
		top: 6%;
	}
	.entry_area .btn01 a {
		height: 50px;
		font-size: 1.6rem;

	}
}


/* lower common
-------------------------------------------------------*/
.breadcrumb {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	letter-spacing: 0.1em;
}
.breadcrumb li:not(:last-child) {
	position: relative;
	margin-right: 30px;
}
.breadcrumb li:not(:last-child)::after {
	position: absolute;
	display: block;
	content: ">";
	right: -22px;
	top: -2px;
}
.breadcrumb.wo_bg {
	max-width: 1440px;
	padding: 0 20px;
	margin: 0 auto 70px;
}
.lower_ttl {
	margin-bottom: 10px;
}
.lower_ttl_jp {
	font-weight: 700;
	font-size: 4rem;
	margin-bottom: 40px;
}
.lower #visual.area {
	padding: 0 20px;
}
.lower #visual .inner {
	position: relative;
	height: 100%;
	height: 500px;
}
.lower #visual .lower_ttl_box {
	position: absolute;
	left: 0;
	bottom: -120px;
}
.lower #visual .lower_ttl_jp {
	margin-bottom: 0;
}
.lower #area01.area {
	padding: 250px 20px 150px;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	
}
@media screen and (max-width:768px) {
	.breadcrumb.wo_bg {
		margin: 0 auto 50px;
	}
	.lower #area01.area {
		padding: 130px 20px 50px;
	}
	.lower_ttl {
		margin-bottom: 10px;
	}
	.lower_ttl_jp {
		font-size: 2.4rem;
		margin-bottom: 30px;
	}
	.lower #visual .inner {
		height: 150px;
	}
	.lower #visual .lower_ttl_box {
		bottom: -80px;
	}
}


/* about
-------------------------------------------------------*/
#about #visual {
	background: url(../img/about/visual_bg.png)no-repeat center/cover;
}
#about #visual .lower_ttl img {
	max-width: 357px;
}
#about #area01 .txt_img_box {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: space-between;
}
#about #area01 .txt_img_box dl {
	width: 38%;
	font-size: 2rem;
}
#about #area01 .txt_img_box dl .ttl01 {
	text-align: left;
	font-size: 3.6rem;
	line-height: 1.4;
}
#about #area01 .txt_img_box dl .txt {
	line-height: 1.8;
}
#about #area01 .txt_img_box .img {
	width: 60%;
}
#about #area01 .txt_img_box .img img {
	max-width: 878px;
}
#about #area02 {
	background: url(../img/about/bg_l.png)no-repeat left top 10%/25% auto,url(../img/about/bg_r.png)no-repeat right bottom 10%/25% auto,#fad88f;
}
#about #area02 .inner {
	max-width: 980px;
}
#about #area02 .ttl01_en {
	text-align: center;
	margin-bottom: 50px;
	font-size: inherit;
}
#about #area02 .ttl01_en img {
	max-width: 338px;
}
#about #area02 .img {
	text-align: center;
}
#about #area02 .img img {
	max-width: 700px;
}
#about #area02 .pro_box {
	background: rgba(255,255,255,0.8);
	border-radius: 30px;
	text-align: center;
	padding: 160px 20px 100px;
	box-shadow: 0px 0px 20px 7px rgba(251,192,79,0.2);
	margin-top: -100px;
}
#about #area02 .pro_box .company {
	font-size: 2.6rem;
}
#about #area02 .pro_box .name {
	font-weight: 700;
	font-size: 3rem;
	margin-bottom: 40px;
}
#about #area02 .pro_box .size_s {
	font-size: 2rem;
	margin-right: 10px;
}
#about #area02 .pro_box .txt {
	font-size: 2rem;
}
#about #area03.area {
	padding: 150px 20px 0;
}
#about #area03 .row_box {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: space-between;
}
#about #area03 .row_box .wrap {
	width: 65%;
	margin-right: 30px;
}
#about #area03 .txt_box dl {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	line-height: 1;
}
#about #area03 .txt_box dl:not(:last-child) {
	margin-bottom: 10px;
}
#about #area03 .txt_box {
	margin-bottom: 70px;
}
#about #area03 .txt_box .en {
	color: var(--sub_color01);
	font-size: 8rem;
	margin-right: 40px;
}
#about #area03 .txt_box .en.col02 {
	color: var(--color_btn);
}
#about #area03 .txt_box dd {
	font-size: 3.4rem;
	font-weight: 700;
	padding-top: 30px;
}
#about #area03 .img {
	width: 35%;
}
#about #area03 .img img {
	max-width: 560px;
}
#about #area03 .temp01 {
	width: 100%;
	max-width: 800px;
	border: 1px solid #fbe5bd;
	border-radius: 20px;
}
#about #area03 .temp01 dl {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	justify-content: flex-start;
}
#about #area03 .temp01 dl:not(:last-child) {
	border-bottom: 1px solid #fbe5bd;
}
#about #area03 .temp01 dl dt {
	background: #fc8007;
	font-weight: 700;
	font-size: 2rem;
	min-width: 200px;
	padding: 20px;
	box-sizing: border-box;
	border-right: 1px solid #fbe5bd;
	color: #fff;
}
#about #area03 .temp01 dl:first-child dt {
	border-radius: 20px 0 0 0;
}
#about #area03 .temp01 dl:last-child dt {
	border-radius: 0 0 0 20px;
}
#about #area03 .temp01 dl dd {
	font-size: 2rem;
	padding: 20px;
	background: #fdf6ea;
	width: 100%;
}
#about #area03 .temp01 dl:first-child dd {
	border-radius: 0 20px 0 0;
}
#about #area03 .temp01 dl:last-child dd {
	border-radius: 0 0 20px 0;
}
.list_company {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: space-between;
}
.list_company li {
	width: 32%;
	background: #fafafa;
	border-radius: 10px;
	box-sizing: border-box;
	text-align: center;
	padding: 50px 20px;
	line-height: 1;
	margin-bottom: 2%;
}
.list_company li .ttl {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 30px;
}
.list_company li .icon img {
	max-width: 137px;
}
.list_company li .txt {
	font-weight: 700;
	font-size: 4rem;
	margin-top: 10px;
}
.list_company li .en {
	font-size: 10rem;
	font-weight: 400;
	margin-right: 5px;
}
.list_company li:first-child .en {
	color: var(--sub_color01);
}
.list_company li:nth-child(2) .en {
	color: var(--sub_color03);
}
.list_company li:nth-child(3) .en {
	color: var(--sub_color04);
}
.list_company li:nth-child(4) .en {
	color: var(--sub_color05);
}
.list_company li .en .size_s {
	font-size: 6.8rem;
}
.list_company li .graph img {
	max-width: 273px;
}
.list_company li .gender_box {
	display: flex;
}
.list_company li .gender_box dl {
	text-align: center;
	width: 50%;
}
.list_company li .gender_box dt {
	margin-bottom: 10px;
}
.list_company li .gender_box dt span {
	display: block;
	margin-top: 10px;
	font-size: 2rem;
}
.list_company li .gender_box img {
	max-width: 90px;
}
.list_company li .gender_box .en {
	margin: 0;
}
.list_company li .color01 {
	color: #0e9cca;
}
.list_company li .color02 {
	color: #f0788e;
}


@media screen and (max-width:1100px) {
	.list_company li .en {
		font-size: 5rem;
	}
	.list_company li .en .size_s {
  font-size: 3rem;
}
}

@media screen and (max-width:900px) {
	#about #area01 .txt_img_box {
		flex-flow: column;
		align-items: center;
		justify-content: center;
	}
	#about #area01 .txt_img_box dl {
		width: 100%;
		margin-bottom: 30px;
	}
	#about #area01 .txt_img_box .img {
		width: 100%;
	}
	
}
@media screen and (max-width:768px) {
	
	#about #visual .lower_ttl img {
		max-width: calc(357px * 0.6);
	}
	
	#about #area01 .txt_img_box dl {
		width: 100%;
		font-size: 1.6rem;
		margin-bottom: 30px;
	}
	#about #area01 .txt_img_box dl .ttl01 {
		font-size: 2.4rem;
	}
	
	#about #area02 .ttl01_en {
		margin-bottom: 20px;
	}
	#about #area02 .ttl01_en img {
		max-width: calc(338px * 0.6);
	}
	#about #area02 .pro_box {
		box-sizing: border-box;
		width: 100%;
		padding: 80px 10px 50px;
		margin: -50px auto 0;
	}
	#about #area02 .pro_box .company {
		font-size: 1.8rem;
	}
	#about #area02 .pro_box .name {
		font-size: 2.6rem;
		margin-bottom: 30px;
	}
	#about #area02 .pro_box .size_s {
		font-size: 1.8rem;
		margin-right: 10px;
	}
	#about #area02 .pro_box .txt {
		font-size: 1.4rem;
	}
	#about #area03.area {
		padding: 50px 20px 0;
	}
	#about #area03 .row_box {
		flex-flow: column;
	}
	#about #area03 .row_box .wrap {
		width: 100%;
	}
	#about #area03 .txt_box dl {
		flex-flow: column;
	}
	#about #area03 .txt_box dl:not(:last-child) {
		margin-bottom: 20px;
	}
	#about #area03 .txt_box {
		margin-bottom: 50px;
	}
	#about #area03 .txt_box .en {
		font-size: 4rem;
		margin-right: 0;
	}
	#about #area03 .txt_box dd {
		font-size: 1.8rem;
		padding-top: 10px;
	}
	#about #area03 .img {
		width: 100%;
		text-align: center;
		margin-top: 30px;
	}
	#about #area03 .img img {
		max-width: 80%;
	}
	#about #area03 .temp01 {
		border-radius: 15px;
	}
	#about #area03 .temp01 dl dt {
		font-size: 1.5rem;
		min-width: 90px;
		padding: 15px 10px;
	}
	#about #area03 .temp01 dl:first-child dt {
		border-radius: 15px 0 0 0;
	}
	#about #area03 .temp01 dl:last-child dt {
		border-radius: 0 0 0 15px;
	}
	#about #area03 .temp01 dl dd {
		font-size: 1.5rem;
		padding: 15px 10px;
	}
	#about #area03 .temp01 dl:first-child dd {
		border-radius: 0 20px 0 0;
	}
	#about #area03 .temp01 dl:last-child dd {
		border-radius: 0 0 20px 0;
	}

	.list_company li {
		width: 49%;
		padding: 20px 10px;
		line-height: 1;
	}
	.list_company li .ttl {
		font-size: 1.8rem;
		margin-bottom: 15px;
	}
	.list_company li .icon img {
		max-width: 60px;
	}
	.list_company li .txt {
		font-size: 1.6rem;
		margin-top: 10px;
	}
	.list_company li .en {
		font-size: 4rem;
	}
	.list_company li .en .size_s {
		font-size: 2.4rem;
	}
	.list_company li .gender_box dt span {
		font-size: 1.6rem;
	}
	.list_company li .gender_box img {
		max-width: 50px;
	}
	#about #area02 .img img {
	max-width: 90%;
}
}


/* staff
-------------------------------------------------------*/
#staff #visual {
	background: url(../img/staff/visual_bg.png)no-repeat center/cover;
}
#staff #visual .lower_ttl img {
	max-width: 301px;
}
#staff #area01.area {
	padding: 150px 20px 150px;
}
.list_staff {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: 150px;
}

.list_staff02 {
	margin-top: 0;
}

.list_staff>li {
	flex: 0 0 32%; 
	position: relative;
}
.list_staff>li:nth-child(-n+6) {
	margin-bottom: 170px;
}
.list_staff li .img {
	text-align: center;
	position: absolute;
	right: 50%;
	top: -100px;
	transform: translate(50%,0);
}
.list_staff li .img img {
	max-width: 200px;
}
.list_staff li a {
	display: block;
	background: #fff;
	border-radius: 20px;
	padding: 25% 20px 20px;
	box-shadow: 0px 0px 13px -6px rgba(0,0,0,0.6);
}
.list_staff li .title {
	text-align: center;
	color: #fff;
	aspect-ratio: 1 / 1;  
	width: 25%;
	height: auto;
	font-weight: 700;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	position: absolute;
	top: -100px;
	z-index: 5;
	left: 10%;
	font-size: 1.8rem;
	min-width: 80px;
}
.list_staff li .title .size_s {
	font-size: 1.4rem;
}
.list_staff li .title.c_pink {
	background: url(../img/staff/circle_pink.png)no-repeat center/100% auto;
}
.list_staff li .title.c_blue {
	background: url(../img/staff/circle_blue.png)no-repeat center/100% auto;
}
.list_staff li .ttl {
	text-align: center;
	font-size: 1.8rem;
	padding: 10px 0px;
	position: relative;
	margin-bottom: 10px;
	font-weight: 700;
	z-index: 102;
	line-height: 1.2;
	letter-spacing: -1px;
}
.list_staff li .ttl::before,
.list_staff li .ttl::after {
	position: absolute;
	display: block;
	content: "";
	width: 31px;
	height: 22px;
	
	
}
.list_staff li .ttl::before {
	background: url(../img/staff/icon_double01.png)no-repeat left top/31px 22px;
	left: 0;
	top: 0;
	z-index: -1;
	

}
.list_staff li .ttl::after {
	background: url(../img/staff/icon_double02.png)no-repeat right bottom/31px 22px;
	right: 0;
	bottom: 0;
	z-index: -1;
	
}
.list_staff .tag {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 10px;
}
.list_staff .tag li {
	background: #fdf3dc;
	font-weight: 700;
	padding: 3px 7px;
	border-radius: 5px;
}
.list_staff .tag li:not(:last-child) {
	margin-right: 5px;
}
.list_staff dl {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
}
.list_staff dl dt {
	margin-right: 10px;
}
.list_staff dl dt img {
	max-width: 27px;
}
.list_staff dl dd {
	font-weight: 700;
	background: #fdaf1a;
	color: #fff;
	padding: 3px 7px;
	border-radius: 5px;
}
.list_staff .zoom {
	position: absolute;
	right: 15px;
	bottom: 15px;
}
.list_staff .zoom img {
	max-width: 48px;
}
.modal_contents_box {
	display: none;
}
.modal_contents {
}
.modal_contents .top_box {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
}
.modal_contents .top_box .img {
	width: 49%;
}
.modal_contents .top_box .ttl_box {
	width: 49%;
	aspect-ratio: 1 / 1;
	background: url(../img/staff/bg_circle.png)no-repeat center/100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal_contents .top_box .ttl_box .ttl {
	font-weight: 900;
	font-size: 4rem;
	line-height: 1.4;
	margin-bottom: 30px;
}
.modal_contents .top_box .ttl_box dl  {
	font-weight: 900;
	margin-bottom: 20px;
}
.modal_contents .top_box .ttl_box dl dt {
	margin-right: 10px;
	margin-bottom: 5px;
}
.modal_contents .top_box .ttl_box dl dt span {
	background: #fdaf1a;
	padding: 5px 10px;
	color: #fff;
	border-radius: 5px;
}
.modal_contents .top_box .ttl_box dl dt span:not(:last-child) {
	margin-right: 5px;
}
.modal_contents .top_box .ttl_box dl dd {
	font-size: 2rem;
}
.modal_contents .modal_faq:not(:last-child) {
	margin-bottom: 20px;
}
.modal_contents .modal_faq dt {
	font-weight: 900;
	font-size: 2.2rem;
	margin-bottom: 10px;
}
.modal_contents .modal_faq dd {
	font-size: 1.8rem;
}
.modal_contents .modal_faq .color_lemon {
	margin-right: 10px;
	color: #efa007;
}
.modal_contents .modal_faq .size_l {
	font-size: 3rem;
	position: relative;
	padding-left: 50px;
}
.modal_contents .modal_faq .size_l::before {
	position: absolute;
	display: block;
	content: "";
	background: url(../img/staff/icon_com.png)no-repeat left top/40px 46px;
	width: 40px;
	height: 46px;
	left: 0;
	top: 0;
}
#staff #entry.area {
	padding: 50px 20px 70px;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	
}
@media screen and (max-width:1250px) {
	.list_staff li .title {
		font-size: 1.5rem;
	}
	.list_staff li .title .size_s {
		font-size: 1.2rem;
	}
}
@media screen and (max-width:768px) {
	#staff #visual .lower_ttl img {
		max-width: calc(301px * 0.6);
	}
	#staff #area01.area {
		padding: 130px 20px;
	}
	.list_staff {
		flex-flow: column;
		align-items: center;
		justify-content: center;
		margin-top: 100px;
	}
	.list_staff>li {
		flex: 0 0 100%; 
		width: 100%;
		margin-bottom: 90px;
	}
	.list_staff>li:nth-child(-n+6) {
		margin-bottom: 90px;
	}
	.list_staff>li:last-child {
		margin-bottom: 0;
	}
	.list_staff li .img {
		top: -70px;
	}
	.list_staff li .img img {
		max-width: 150px;
	}
	.list_staff li a {
		padding: 80px 20px 20px;
	}
	.list_staff li .title {
		width: 90px;
		top: -70px;
		left: 30%;
		font-size: 1.8rem;
	}
	.list_staff li .title .size_s {
		font-size: 1.4rem;
	}
	.list_staff li .ttl {
		font-size: 1.8rem;
		padding: 10px 20px;
	}
	.list_staff li .ttl::before,
	.list_staff li .ttl::after {
		width: 21px;
		height: 15px;
	}
	.list_staff li .ttl::before {
		background: url(../img/staff/icon_double01.png)no-repeat left top/21px 15px;
	}
	.list_staff li .ttl::after {
		background: url(../img/staff/icon_double02.png)no-repeat right bottom/21px 15px;
	}
	.list_staff .tag {
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		margin-bottom: 10px;
	}
	.modal_contents .top_box {
		flex-flow: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
	}
	.modal_contents .top_box .img {
		width: 100%;
	}
	.modal_contents .top_box .ttl_box {
		width: 80%;
		aspect-ratio: 1 / 1;
		background: url(../img/staff/bg_circle.png)no-repeat center/100% 100%;
	}
	.modal_contents .top_box .ttl_box .ttl {
		font-size: 2.6rem;
		margin-bottom: 20px;
	}
	.modal_contents .top_box .ttl_box dl  {
		font-size: 1.2rem;
	}
	.modal_contents .top_box .ttl_box dl dd {
		font-size: 1.6rem;
	}
	.modal_contents .modal_faq dt {
		font-size: 1.8rem;
	}
	.modal_contents .modal_faq dd {
		font-size: 1.4rem;
	}
	.modal_contents .modal_faq .size_l {
		font-size: 2rem;
		padding-left: 35px;
	}
	.modal_contents .modal_faq .size_l::before {
		background: url(../img/staff/icon_com.png)no-repeat left top/28px 32px;
		width: 28px;
		height: 32px;
	}
	#staff #entry.area {
		padding: 0 20px 50px;
	}
}
@media screen and (max-width:680px) {
	.list_staff li .title {
		left: 20%;
	}
}
@media screen and (max-width:460px) {
	.list_staff li .title {
		left: 12%;
		font-size: 1.4rem;
		width: 80px;
	}
	.list_staff li .title .size_s {
		font-size: 1rem;
	}
}


#p_staff01 {
	margin-top: -150px;
	padding-top: 150px;
}
#p_staff02 {
	margin-top: -200px;
	padding-top: 200px;
}


/* works
-------------------------------------------------------*/
#works #visual {
	background: url(../img/works/visual_bg.png)no-repeat center/cover;
}
#works #visual .lower_ttl img {
	max-width: 383px;
}
#works #area01.area {
	padding: 250px 20px 100px;
}
#works #area01 .top_txt {
	font-size: 3rem;
}
#works .list_works {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	margin-bottom: 80px;
}
#works .list_works li {
	margin: 0 10px;
	width: 25%;
}
#works .list_works a {
	max-width: 100%;
	width: 100%;
	background: #fff;
	color: var(--color_btn);
}
#works .list_works a:hover {
	background: #fc3a3a;
	color: #fff;
	opacity: 1;
}
#works .list_works a::after {
	background: url(../img/common/btn01_arrow02.png)no-repeat right center/31px 31px;
}
#works .box {
	border: 10px solid var(--color_yellow);
	border-radius: 30px;
	padding: 80px 40px 50px;
	background: #fff;
}
#works .box:not(:last-child) {
	margin-bottom: 80px;
}
#works .box .in {
	max-width: 1000px;
	margin: 0 auto;
}
#works .box .ttl {
	font-size: 5rem;
	font-weight: 700;
	text-align: center;
	line-height: 1;
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 5px solid var(--color_yellow);
}
#works .box .ttl .tag {
	font-size: 2.5rem;
	background: #ff9900;
	color: #fff;
	padding: 5px 30px;
	margin-right: 20px;
	border-radius: 7px;
}
#works .box .ttl .tag.col02 {
	background: #69e306;
}
#works .box .txt {
	font-size: 2rem;
	margin-bottom: 50px;
	line-height: 2;
}
#works .box ul {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: space-between;
}
#works .box ul li {
	width: 48%;
}
#works .box ul li:nth-child(-n+2) {
	margin-bottom: 4%;
}
#works .box ul .img_txt {
	position: relative;
	text-align: left;
}
#works .box ul .img_txt img {
	max-width: 294px;
	width: 60%;
}
#works .box ul .img_txt span {
	position: absolute;
	font-size: clamp(1.4rem, 1.1vw, 2rem);
	line-height: 1.8;
	letter-spacing: 0.1em;
	white-space: nowrap;
	bottom: 0;
	left: 62%;
}
#works .box .btn01 a {
	margin-top: 60px;
}
#works .box {
	position: relative;
}
#works .top_illust {
	position: absolute;
	left: 5%;
	top: 20px;
	width: 20%;
}
#works #works01 .top_illust img {
	max-width: 219px;
}
#works #works02 .top_illust {
	width: 15%;
	right: 5%;
	left: inherit;
}
#works #works02 .top_illust img {
	max-width: 166px;
}
#works #works03 .top_illust {
	width: 15%;
}
#works #works03 .top_illust img {
	max-width: 166px;
}
@media screen and (min-width:768px) and ( max-width:1230px) {
	#works .box ul .img_txt img {
		width: 50%;
	}
	#works .box ul .img_txt span {
		bottom: -50px;
		left: 43%;

	}
}

@media screen and (max-width:920px) {
	#works .box ul .img_txt span {
	width: 170px;
	left: 50%;
	white-space:inherit;
}

#works .list_works li {
	width: 32%;
}
	
}

@media screen and (max-width:768px) {
	#works #visual .lower_ttl img {
		max-width: calc(383px * 0.6);
	}
	#works #area01.area {
		padding: 130px 20px;
	}
	#works #area01 .top_txt {
		font-size: 1.8rem;
		margin-bottom: 10px;
	}
	#works .list_works {
		flex-flow: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 40px;
	}
	#works .list_works li {
		margin: 0;
		width: 100%;
	}
	#works .list_works a {
		margin: 20px auto 0;
		max-width: 300px;
	}
	#works .box {
		border: 5px solid var(--color_yellow);
		padding: 40px 20px 30px;
	}
	#works .box:not(:last-child) {
		margin-bottom: 40px;
	}
	#works .box .ttl {
		font-size: 3rem;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
	#works .box .ttl .tag {
		font-size: 1.5rem;
		display: block;
		padding: 5px 20px;
		margin-left: 0;
		margin: 0 auto 10px;
		max-width: 120px;
	}
	#works .box .txt {
		font-size: 1.6rem;
		margin-bottom: 30px;
	}
	#works .box ul {
		flex-flow: column;
		align-items: center;
		justify-content: center;
	}
	#works .box ul li {
		width: 100%;
	}
	#works .box ul li:not(:last-child) {
		margin-bottom: 20px;
	}
	#works .box ul .img_txt {
		position: relative;
		text-align: center;
	}
	#works .box ul .img_txt img {
		max-width: 60%;
	}
	#works .box ul .img_txt span {
		position: inherit;
		font-size: 1.4rem;
		line-height: 1.8;
		white-space: inherit;
		bottom: 0;
		left: inherit;
		display: block;
		margin-top: 10px;
		width: 100%;
	}
	#works .box .btn01 a {
		margin-top: 40px;
	}
	#works #entry.area {
		padding: 0 20px 50px;
	}
}


/* benefits
-------------------------------------------------------*/
#benefits #visual {
	background: url(../img/benefits/visual_bg.png)no-repeat center/cover;
}
#benefits #visual .lower_ttl img {
	max-width: 474px;
}
#benefits .ttl01 {
	margin-bottom: 30px;
}
#benefits .sub_ttl {
	text-align: center;
	font-size: 3.5rem;
	font-weight: 700;
	margin-bottom: 50px;
}
.list_benefits {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 50px 80px;
}
.list_benefits li {
	width: calc((100% - 160px) / 3);
	border-radius: 30px;
	text-align: center;
	padding: 30px 20px;
	box-sizing: border-box;
	background: #fff;
}
.list_benefits li .ttl {
	font-size: 3rem;
	margin-bottom: 10px;
	font-weight: 700;
}
.list_benefits li .img {
	margin-bottom: 10px;
}
.list_benefits li .img img {
	max-width: 125px;
}
.list_benefits li .txt {
	font-size: 2.6rem;
	font-weight: 400;
	line-height: 1.4;
}


.list_benefits li .txt {
	color: #333;
}

#benefits .btm_box .ttl01 {
	position: relative;
	margin-bottom: 120px;
}
#benefits .btm_box .ttl01::after {
	position: absolute;
	display: block;
	content: "";
	background: url(../img/benefits/line.png)no-repeat center bottom/541px 56px;
	width: 541px;
	height: 56px;
	right: 50%;
	bottom: -60px;
	transform: translate(50%,0);
}
#benefits .btm_box .txt {
	font-size: 3rem;
	line-height: 1.8;
}
#benefits #area01.area {
	padding: 150px 20px;
}
#benefits #area01 .list_benefits li {
	border: 4px solid #efa007;
	color: #efa007;
}
#benefits #area02 {
	background: #fad890;
}
#benefits #area02 .list_benefits li {
	border: 4px solid #19d5a9;
	color: #19d5a9;
}
#benefits #area03 .list_benefits li {
	border: 4px solid #fb5350;
	color: #fb5350;
}
#benefits #area04.area {
	padding: 0 20px 150px;
}

@media screen and (max-width:1400px) {
	.list_benefits {
	gap: 30px 40px;
}
.list_benefits li {
	width: calc((100% - 80px) / 3);
	border-radius: 30px;
	text-align: center;
	padding: 30px 20px;
	box-sizing: border-box;
	background: #fff;
}
.list_benefits li .ttl {
	font-size: 2.5rem;
}
.list_benefits li .txt {
	font-size: 2rem;
}
}
@media screen and (max-width:768px) {
	#benefits #visual .lower_ttl img {
		max-width: calc(474px * 0.6);
	}
	#benefits .ttl01 {
		margin-bottom: 15px;
	}
	#benefits .sub_ttl {
		font-size: 1.8rem;
		margin-bottom: 30px;
	}
	.list_benefits {
		gap: 10px;
	}
	.list_benefits li {
		width: calc((100% - 10px) / 2);
		border-radius: 20px;
		padding: 20px 10px;
	}
	.list_benefits li .ttl {
		font-size: 1.8rem;
		margin-bottom: 0px;
		line-height: 1.4;
		min-height: 55px;
	}
	.list_benefits li .img {
		margin-bottom: 20px;
	}
	.list_benefits li .img img {
		max-width: 60px;
	}
	.list_benefits li .txt {
		font-size: 1.2rem;
	}
	#benefits .btm_box .ttl01 {
		position: relative;
		margin-bottom: 60px;
	}
	#benefits .btm_box .ttl01::after {
		background: url(../img/benefits/line.png)no-repeat center bottom/270px 28px;
		width: 270px;
		height: 28px;
		bottom: -40px;
	}
	#benefits .btm_box .txt {
		font-size: 1.6rem;
		line-height: 1.8;
	}
	#benefits #area01 {
		margin-top: 100px;
	}
	#benefits #area01.area {
		padding: 50px 20px;
	}
	#benefits #area04.area {
		padding: 30px 20px 50px;
	}
	#benefits #area01 .list_benefits li {
	border: 2px solid #efa007;

}

#benefits #area02 .list_benefits li {
	border: 2px solid #19d5a9;
}
#benefits #area03 .list_benefits li {
	border: 2px solid #fb5350;
}
	
}

/* entry
-------------------------------------------------------*/
#entry {
	position: relative;
}
#entry.area {
	padding: 50px 20px 70px;
}
#entry .lower_ttl {
	text-align: center;
	margin-bottom: 20px;
}
#entry .lower_ttl img {
	max-width: 329px;
}
#entry .lower_ttl_jp {
	text-align: center;
}
#entry .txt {
	margin-bottom: 30px;
	font-size: 1.8rem;
	line-height: 2;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	
}
@media screen and (max-width:768px) {
	#entry.area {
		padding: 70px 20px 50px;
	}
	#entry .lower_ttl img {
		max-width:  calc(329px * 0.6);
	}
	#entry .txt {
		margin-bottom: 30px;
		font-size: 1.6rem;
	}
}

/* recruit
-------------------------------------------------------*/
#recruit #visual {
	background: url(../img/recruit/visual_bg.png)no-repeat center/cover;
}
#recruit #visual .lower_ttl img {
	max-width: 438px;
}
#recruit #area01 .btn01 a {
	margin: 20px auto 120px;
}
#recruit #area01 .ttl01.size_l {
	font-size: 6rem;
}
#recruit .recruit_box .box {
	border: 10px solid var(--main_color02);
	border-radius: 30px;
	padding: 50px;
	background: #fff;
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: flex-start;
}
#recruit .recruit_box .box:not(:last-child) {
	margin-bottom: 40px;
}
#recruit .recruit_box .img {
	width: 30%;
	margin-right: 50px;
  border-radius: 22px;
}
#recruit .recruit_box .txt_box {
	width: 70%;
}
#recruit .recruit_box .ttl {
	font-weight: 700;
	font-size: 4rem;
	margin-bottom: 20px;
}
#recruit .recruit_box .ttl .tag {
	width: 150px;
	background: var(--main_color01);
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	border-radius: 7px;
	padding: 3px 20px;
	margin-right: 20px;
}
#recruit .recruit_box .ttl .tag.col02 {
	background: #69e306;
}
#recruit .recruit_box .sub_ttl {
	font-size: 2.6rem;
	font-weight: 700;
	margin-bottom: 20px;
}
#recruit .recruit_box .txt {
	font-size: 2rem;
	line-height: 1.8;
}
#recruit .recruit_table {
	margin-top: 150px;
	font-size: 2rem;
}
#recruit .recruit_table tr {
	border-bottom: 1px solid var(--main_color01);
	text-align: left;
	line-height: 1.8;
}
#recruit .recruit_table th {
	min-width: 300px;
	padding: 30px;
	vertical-align: top;
	font-weight: 700;
	box-sizing: border-box;
}
#recruit .recruit_table td {
	padding: 30px 0;
	font-weight: 400;
}
#recruit .recruit_table td span {
	font-weight: 700;
}
.entry_form .box {
	background: #fff;
	max-width: 1000px;
	margin: 0 auto 70px;
	padding: 50px 20px 70px;
	border-radius: 20px;
	box-shadow: 0px 0px 10px -6px rgba(0,0,0,0.6);
}
.entry_form .box form {
	max-width: 800px;
	margin: 0 auto;
}
.entry_form .box .top_ttl {
	text-align: center;
	font-size: 6rem;
	color: var(--color_btn);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
}
.entry_form .box .top_ttl span {
	font-size: 2rem;
	margin-left: 40px;
	color: #000;
	font-weight: 700;
	font-family: "Zen Kaku Gothic Antique", sans-serif;
}
.entry_form .table_temp {
	width: 100%;
}
.entry_form .table_temp tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}
.entry_form .table_temp tr>* {
	display: table-cell;
	vertical-align: middle;
	padding: 20px 10px;
	box-sizing: border-box;
	line-height: 1;
}
.entry_form .table_temp th {
	text-align: left;
	font-size: 1.8rem;
	width: 250px;
	margin-right: 20px;
	width: 250px;
	text-align: left;
}
.entry_form .table_temp th b {
	display: block;
	position: relative;
	font-weight: normal;
}
.entry_form .table_temp td {
	width: 100%;
}
.entry_form .table_temp th span {
	display: block;
	font-size: 1.2rem;
	margin-top: 5px;
}
.entry_form .table_temp tr.hissu th b::after {
	color: #fff;
	width: 64px;
	height: 30px;
	font-size: 1.6rem;
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	content: "必須";
	background: var(--color_btn);
}
.entry_form.contact_after tr {
	border-bottom: 1px solid #a6a6a5;
}
.entry_form.contact_after:first-child {
	border-top: 1px solid #a6a6a5;
	margin: 30px 0 0;
}
.entry_form.contact_after th {
	font-weight: 700;
}
.txt_form .red,
.error_messe b {
	color: #f00;
	font-weight: normal;
}
.error_messe {
	margin: 20px 0 0;
	text-align: center;
	line-height: 1.3;
}
.error_messe>* {
	display: inline-block;
}
.entry_form input[type="text"],
.entry_form select,
.entry_form textarea,.wpcf7-validates-as-email,.wpcf7-validates-as-tel {
	width: 100%;
	border-radius: 3px;
	background: #fff;
}
.entry_form input[type="text"],
.entry_form select,.wpcf7-validates-as-email,.wpcf7-validates-as-tel {
	height: 47px;
}
.entry_form textarea {
	min-height: 150px;
	resize: vertical;
}
.entry_form .radio_area label,
.entry_form .check_area label {
	display: inline-block;
	margin: 5px 5px 5px 0;
	line-height: 1.3;
}
.entry_form .txt_form {
	text-align: center;
	line-height: 1.4;
}
.entry_form .txt_form span {
	display: block;
}
::placeholder {
	color: #ccc;
}
.entry_form .form_btn {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.form_btn_confirm p {
  width: 100%;
  margin: 0  auto;
  display: flex;
	align-items: center;
	justify-content:space-between;
  text-align: center;
}
.entry_form p .form_btn01{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 410px;
	height: 70px;
	border: none;
	border-radius: 100px;
	padding: 10px;
	margin: 30px auto 0;
	box-sizing: border-box;
	font-size: 2.6rem;
	font-weight: 500;
	color: #fff;
	line-height: 1;
  text-align: center;
	box-shadow: 0px 0px 13px -6px rgba(0,0,0,0.6);
}
.entry_form p .form_btn02 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 220px;
	height: 70px;
	border: none;
	border-radius: 100px;
	padding: 10px;
	margin: 30px auto 0;
	box-sizing: border-box;
	font-size: 2.6rem;
	font-weight: 500;
	color: #fff;
	line-height: 1;
  text-align: center;
	box-shadow: 0px 0px 13px -6px rgba(0,0,0,0.6);
}
.entry_form .form_btn01 {
	background: var(--color_btn);
}
.entry_form .form_btn02 {
	background: #333;
}
.entry_form .table_temp td.birthday {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-start;
}
.entry_form .table_temp td.birthday input {
	width: 25%;
}
.entry_form .table_temp td.birthday select {
	width: 15%;
}
.entry_form .table_temp td.birthday span {
	margin: 0 5px;
}
@media screen and (min-width:768px) and ( max-width:1080px) {
	
}
@media screen and (max-width:768px) {
	#recruit #visual .lower_ttl img {
		max-width: calc(438px * 0.6);
	}
	#recruit #area01 .btn01 a {
		margin: 20px auto 60px;
	}
	#recruit #area01 .ttl01.size_l {
		font-size: 3rem;
	}
	#recruit .recruit_box .box {
		border: 5px solid #fbc04f;
		padding: 20px;
		flex-flow: column;
	}
	#recruit .recruit_box .box:not(:last-child) {
		margin-bottom: 30px;
	}
	#recruit .recruit_box .ttl .tag {
		font-size: 1.6rem;
		padding: 3px 15px;
		margin-right: 10px;
	}
	#recruit .recruit_box .img {
		width: 100%;
		margin-bottom: 20px;
    border-radius: 20px;
	}
	#recruit .recruit_box .txt_box {
		width: 100%;
	}
	#recruit .recruit_box .ttl {
		font-size: 2rem;
		margin-bottom: 10px;
	}
	#recruit .recruit_box .sub_ttl {
		font-size: 1.6rem;
		margin-bottom: 15px;
	}
	#recruit .recruit_box .txt {
		font-size: 1.4rem;
		line-height: 1.6;
	}
	 #recruit .recruit_table {
		margin-top: 50px;
		font-size: 1.6rem;
	}
	#recruit .recruit_table tr {
		line-height: 1.6;
	}
	#recruit .recruit_table th {
		min-width: 110px;
		padding: 20px 10px;
	}
	#recruit .recruit_table td {
		padding: 20px 0;
	}
	.entry_form .box {
		margin: 0 auto 50px;
		padding: 30px 20px 50px;
	}
	.entry_form .box .top_ttl {
		font-size: 5rem;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 30px;
	}
	.entry_form .box .top_ttl span {
		font-size: 1.8rem;
		margin-left: 0;
	}
	.entry_form.contact_after tr:first-child {
		margin: 20px 0 0;
	}
	.entry_form .table_temp tr>* {
		display: block;
		padding: 15px 0;
		line-height: 1.3;
	}
	.entry_form .table_temp tr th {
		width: 100%;
		font-size: 100%;
	}
	.entry_form .table_temp tr td {
		padding-top: 0;
	}
	.entry_form .table_temp tr.hissu th b::after {
		top: 0!important;
		right: 0!important;
		bottom: 0!important;
		width: 50px;
		height: 25px;
		font-size: 1.4rem;
	}
	.entry_form .radio_area label,
	.entry_form .check_area label {
		display: flex;
		align-items: center;
	}
	.entry_form .form_btn {
		flex-flow: column;
	}
  .form_btn_confirm p {
    width: 100%;
    justify-content:space-between;
    flex-flow:nowrap;
  }
  
	.form_btn_confirm p .form_btn01,
	.form_btn_confirm p .form_btn02 {
		margin: 20px 0 0;
		font-size: 1.6rem;
		height: 50px;
	}
  .entry_form p .form_btn01 {
    width: 60%;
  }
  .entry_form p .form_btn02 {
    width: 35%;
  }
	.entry_form .table_temp th span {
		display: inline-block;
	}
}


/* animation
-------------------------------------------------------*/
.illust {
	position: absolute;
}



/* root
-------------------------------------------------------*/
:root {
	--main_color01: #ff9900;
	--main_color02: #fbc04f;
	--main_color03: #fcedcf;
	--color_btn: #fc3a3a;
	--sub_color01: #19d5a9;
	--sub_color02: #fb5350;
	--sub_color03: #1aa5fd;
	--sub_color04: #f273e2;
	--sub_color05: #fdaf1a;


  --color_yellow: #facd76;
  --color_lemon: #fdaf1a;
}

/*.tag {
  display: inline-block;
  padding: 4px 10px;
  margin-right: 8px;
  font-size: 12px;
  color: #fff;
  background: #f08ca0;
}*/

.tag--full {
  background: #4aa3df; /* 正社員 */
}

.recruit_table td {
  line-height: 1.8;
}

.thanks {
  padding: 50px 20px 0;
  box-sizing: border-box;
}

.thanks .lower_ttl_box {
  text-align: center;
}
.thanks .txt_form {
  line-height: 1.8;
}
.thanks + .thanks {
  padding: 0 20px 100px;
}
.entry_form.thanks  .txt_form span {
  display: block;
  font-size: 22px;
  margin-bottom: 10px;
  font-weight: 600;
}
.entry_form.thanks .form_btn {
  text-align: center;
  display: block;
  margin: 30px auto;
}
.entry_form.thanks .form_btn a {
	display: flex;
  margin: 0 auto;
	align-items: center;
	justify-content: center;
	width: 250px;
	height: 60px;
	border: none;
	border-radius: 100px;
	padding: 10px;
	box-sizing: border-box;
	font-size: 2.6rem;
	font-weight: 500;
	color: #fff;
	line-height: 1;
  text-align: center;
	box-shadow: 0px 0px 13px -6px rgba(0,0,0,0.6);
  background:#000;
}
@media screen and (max-width:768px) {
  .entry_form.thanks .form_btn a {
    width: 200px;
    height: 50px;
    font-size: 1.8rem;
    font-weight: 500;
  }
  .thanks + .thanks {
    padding: 0 20px 50px;
  }
}

.wpcf7-not-valid-tip {
  margin-top: 5px;
}

@media screen and (max-width: 768px) {
  .entry_form .box .top_ttl span {
      font-size: 1.6rem!important;
  }
}

.wpcf7-spinner,.wpcf7-spinner::before {
  display: none;
}