/*
Title: おしゃれ・かっこいい・かわいいを仕事に！女子広告プランナーになろう。
Date created: 2025-07-01
Last Updated: 2025-07-01
Author: Ryu
*/

/*----------------------------------------
	共通
----------------------------------------*/

html{
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.text_anton{
	font-family: "Anton", sans-serif;
}
.text_arial{
	font-family: "Arial";
}
.text_500{
	font-size: 500;
}
.text_600{
	font-size: 600;
}
.text_700{
	font-size: 700;
}
.text_48{
	font-size: 4.8rem;
}
.ls_-3{
	letter-spacing: -3px;
}
.ls_-4{
	letter-spacing: -4px;
}
.ls_-5{
	letter-spacing: -5px;
}
.sr3 .text_16{
	font-size: clamp(1.5rem,1.52vw, 1.6rem) !important;
}
.sr3 .text_24{
	font-size: clamp(2rem, 2.28vw, 2.4rem) !important;
}
.of_h{
	overflow: hidden;
}
h2.text_anton{
	font-size: 10rem;
	font-weight: 500;
}
h2 span{
	opacity: 0;
}
@keyframes h2{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.sub_ttl{
	opacity: 0;
	margin-left: -100%;
}
.sub_ttl.start{
	animation: sub_ttl 0.4s ease-in-out forwards;
}
@keyframes sub_ttl{
	0%{
		opacity: 0;
		margin-left: -100%;
	}
	100%{
		opacity: 1;
		margin-left: 0;
	}
}


.ttl_550{
	margin-left: auto;
	margin-right: auto;
	width: 52.38%;
}
.sr3_inner_frame{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	max-width: 1090px;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}
.sr3_wide_frame{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	max-width: 1190px;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}

.sr3_btn{
	position: relative;
	display: block;
	width: 300px;
	border: 1px solid #000;
	box-sizing: border-box;
	padding: 20px 15px;
	color: #000;
	text-decoration: none;
	transition: all 0.4s;
	max-width: 100%;
}
.sr3_btn:hover{
	color: #000;
	text-decoration: none;
	background: rgba(255,255,255,0.3);
}
.sr3_btn span{
	display: inline-block;
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.4s;
}
.sr3_btn span:before,
.sr3_btn span:after{
	content: "";
	width: 11px;
	height: 2px;
	background: #000;
	position: absolute;
	resize: 0;
	top: 50%;
	display: inline-block;
}
.sr3_btn span:before{
	transform: rotate(45deg);
	margin-top: -4px;
}
.sr3_btn span:after{
	transform: rotate(-45deg);
	margin-top: 2px;
}
.sr3_btn:hover span{
	right: 25px;
}

@media print, screen and (min-width: 600px){

	.sr3_box_l{
		float: left;
		width: calc((500/1050)*100%)
	}
	.sr3_box_r{
		float: right;
		width: calc((500/1050)*100%)
	}
	.right{
		float: right;
	}
	.left{
		float: left;
	}
	.sp_br{
		display: none;
	}

}/*END*/

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

	.ttl_550{
		width: 80%;
	}
	.sr3_btn{
		width: 100%;
	}
	.pc_br{
		display: none;
	}
	.right,
	.left{
		float: none !important;
		width: 100% !important;
	}
	.katsuyaku_img{
		margin-bottom: 40px;
	}


}/*END*/

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

	.ttl_550{
		width: 90%;
	}

}/*END*/


/*----------------------------------------
	header
----------------------------------------*/

header{
	position: relative;
	padding-top: 50px;
}
header a{
	color: inherit;
	text-decoration: none;
}
.sr3_head_inner{
	width: 100%;
	max-width: 1350px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	padding-right: calc((40/1350)*100%);
	padding-left: calc((40/1350)*100%);
}
.sr3_head_logo{
	float: left;
	width: calc((214/1270)*100%);
	margin-top: 20px;
}
.sr3_head_logo:hover{
	transform: rotateY(360deg);
	transition: all 0.4s;
}
.sr3_drawer{
	float: right;
	width: 775px;
}
.sr3_drawer ul{
	float: left;
	width: 560px;
	background: #e5e5e8;
	border-radius: 50px;
	height: 50px;
	box-sizing: border-box;
	padding-right: 20px;
	padding-left: 20px;
}
.sr3_drawer li{
	position: relative;
	float: left;
	font-size: 1.6rem;
	font-weight: bold;
	margin-left: 13px;
	margin-right: 13px;
	padding-top: 18px;
}
.sr3_head_entry a{
	display: block;
	float: right;
	position: relative;
	width: 200px;
	height: 50px;
	box-sizing: border-box;
	padding-top: 16px;
	border-radius: 50px;
	background: #8083ec;
	font-size: 20px;
	padding-left: 54px;
	font-weight: 500;
}
.sr3_icon_entry{
	width: 30px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	right: 40px;
	transition: all 0.4s;
}
.sr3_head_entry a:hover{
	color: #000;
	text-decoration: none;
	opacity: 0.7;
}
/*
.sr3_head_entry a:hover img{
	margin-top: -40px;
	right: 20px;
}
*/
.sr3_drawer li a{
	transition: all 0.4s;
}
.sr3_drawer li a:hover{
	color: #000;
	text-decoration: none;
}

@media print, screen and (min-width: 1050px){


	.sr3_drawer li a:after{
		content: "";
		position: absolute;
		height: 3px;
		width: 0;
		left: 50%;
		transform: translateX(-50%);
		bottom: -5px;
		background: #8083ec;
		transition: all 0.4s;
		border-radius: 3px;
	}
	.sr3_drawer li a:hover:after{
		width: 100%;
	}


}/*END*/


@media print, screen and ( max-width: 1099px){

	.sr3_drawer li{
		font-size: 1.5rem;
	}
	.sr3_head_entry a{
		font-size: 1.8rem;
	}
	.sr3_drawer{
		width: 730px;
	}
	.sr3_drawer ul{
		width: 545px;
	}
	.sr3_head_entry a{
		width: 180px;
	}
	.sr3_icon_entry{
		right: 30px;
	}


}/*END*/

@media print, screen and ( max-width: 1049px){


}/*END*/

@media print, screen and (min-width: 1250px) and ( max-width: 1355px){



}/*END*/

@media print, screen and (min-width: 1150px) and ( max-width: 1249px){



}/*END*/

@media print, screen and (min-width: 1050px) and ( max-width: 1149px){


}/*END*/

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



}/*END*/

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



}/*END*/



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


	header{
		padding-top: 0;
	}
	.sr3_head_logo{
		width: 214px;
	}

	.sr3_menu_btn{
		position: fixed;
		top: 0;
		right: 0;
		height: 60px;
		width: 60px;
		cursor: pointer;
		background: #fff;
		transition: all 0.6s;
		z-index: 100;
	}
	.sr3_menu_btn span{
		display: inline-block;
		height: 1px;
		transition: all 0.6s;
		background: #000;
		position: absolute;
		right: 13px;
	}
	.open .sr3_menu_btn{
		background: #8083ec;
	}
	.sr3_menu_btn span:nth-child(1){
		width: 38px;
		top: 24px;
	}
	.sr3_menu_btn span:nth-child(2){
		width: 25px;
		top: 34px;
	}
	.open .sr3_menu_btn span:nth-child(1){
		transform: rotate(-45deg);
		width: 34px;
		top: 29px;
	}
	.open .sr3_menu_btn span:nth-child(2){
		transform: rotate(45deg);
		width: 34px;
		top: 29px;
	}
	.sr3_drawer{
		display: none;
		position: fixed;
		background: rgba(0, 0, 0, 0.8);
		background-size: cover;
		top: 0;
		right: 0;
		width: 100%;
		height: 100vh;
		color: #fff;
		display: flex;
		justify-content: center;
		visibility: hidden;
		transform: translateY(-100%);
		transition: 0.5s ease-in-out;
		z-index: 50;
		margin-top: 0;
	}
	.sr3_drawer nav{
		width: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		width: 300px;
	}
	.sr3_drawer ul{
		float: none;
		background: none;
		width: 100%;
		height: auto;
		border-radius: 0;
		padding: 0;
	}
	.sr3_drawer li{
		position: relative;
		transform: translateX(-150px);
		transition: transform 0.5s ease;
		float: none;
		margin-left: 0;
		margin-right: 0;
		padding-top: 0;
		margin-bottom: 15px;
		transform: translateX(0);
	}
	.sr3_drawer li a{
		padding-top: 15px;
		padding-bottom: 15px;
		display: block;
		font-size: 1.8rem;
	}
	.sr3_drawer li a:hover{
		color: #fff;
	}
	.sr3_drawer li a:before{
		content: "";
		background: #8083ec;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 0;
		width: 0;
		height: 2px;
		border-radius: 2px;
		transition: all 0.4s;
	}
	.open .sr3_drawer li a:before{
		animation: drawer_border 0.5s forwards;
		animation-delay: 0.4s;
	}
	@keyframes drawer_border{
		0%{ width: 0; }
		100%{ width: 100%; }
	}
	.open .sr3_drawer{
		visibility: visible;
		transform: translateX(0);
	}
	.open .sr3_drawer li{
	}
	.open .sr3_drawer li a{
		animation: sr3_drawer 0.5s forwards;
		animation-delay: 0.4s;
	}
	@keyframes sr3_drawer{
		0%{ opacity: 0; }
		100%{ opacity: 1; }
	}
	.sr3_head_entry {
		margin-top: 40px;
	}
	.sr3_head_entry a{
		float: none;
		width: 100%;
		color: #000;
		padding-left: 0;
		text-align: center;
	}


}/*END*/



/*----------------------------------------
	MV
----------------------------------------*/

.sr3_mv_ttl{
	font-size: 13rem;
	line-height: 1;
}
.sr3_mv_img ul{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 1px;
}

.sr3_mv_year{
	position: absolute;
	right: 60px;
	bottom: 40px;
	transition: all 0.8s;
}
.sr3_mv_deco{
	position: absolute;
	left: 20px;
	top: 0;
	transform: rotate(90deg);
	transition: all 0.8s;
}

/*animation*/
header{
	position: absolute;
	opacity: 0;
	transition: all 0.8s;
}
.sr3_mv_year,
.sr3_mv_deco,
.sr3_mv_copy01,
.sr3_mv_copy02,
.sr3_mv_copy03{
	opacity: 0;
}
#intro,
.sr3_mv_img{
	opacity: 0;
	transition: all 0.8s;
}
.sr3_mv_text{
	position: relative;
	width: 100%;
	height: 100vh;
	transition: all 0.8s;
}
.sr3_mv_inner{
	width: 100%;
	position: absolute;
	bottom: 50%;
	transform: translateY(50%);
	left: 0;
	right: 0;
	margin: auto;
	transition: all 0.8s;
}

.sr3_mv_ttl span{
	opacity: 0;
}
.sr3_mv_ttl.start span{
	animation: sr3_mv_ttl 0.1s forwards;
}
.sr3_mv_ttl.start span:nth-child(2){
	animation-delay: 0.1s;
}
.sr3_mv_ttl.start span:nth-child(3){
	animation-delay: 0.2s;
}
.sr3_mv_ttl.start span:nth-child(4){
	animation-delay: 0.3s;
}
.sr3_mv_ttl.start span:nth-child(5){
	animation-delay: 0.4s;
}
.sr3_mv_ttl.start span:nth-child(6){
	animation-delay: 0.5s;
}
.sr3_mv_ttl.start span:nth-child(7){
	animation-delay: 0.6s;
}
.sr3_mv_ttl.start span:nth-child(8){
	animation-delay: 0.7s;
}
.sr3_mv_ttl.start span:nth-child(9){
	animation-delay: 0.8s;
}
.sr3_mv_ttl.start span:nth-child(10){
	animation-delay: 0.9s;
}
.sr3_mv_ttl.start span:nth-child(11){
	animation-delay: 1s;
}
.sr3_mv_ttl.start span:nth-child(12){
	animation-delay: 1.1s;
}
.sr3_mv_ttl.start span:nth-child(13){
	animation-delay: 1.2s;
}
.sr3_mv_ttl.start span:nth-child(14){
	animation-delay: 1.3s;
}
.sr3_mv_ttl.start span:nth-child(15){
	animation-delay: 1.4s;
}
.sr3_mv_ttl.start span:nth-child(16){
	animation: sr3_mv_ttl 0.1s forwards, sr3_mv_ttl16 1s infinite;
	animation-delay: 1.5s;
}
@keyframes sr3_mv_ttl{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes sr3_mv_ttl16{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
.sr3_mv_copy01.start,
.sr3_mv_copy02.start,
.sr3_mv_copy03.start{
	animation: sr3_mv_ttl 0.8s forwards;
}
.sr3_mv_text.start{
	position: relative;
	height: auto;
}
.sr3_mv_text.start .sr3_mv_inner{
	position: relative;
	top: inherit;
	left: inherit;
	right: inherit;
	transform: translateY(0);
}
header.start{
	position: relative;
}
.sr3_mv_copy01.display,
.sr3_mv_copy02.display,
.sr3_mv_copy03.display,
#intro.display,
.sr3_mv_deco.display,
.sr3_mv_year.display,
header.display,
.sr3_mv_img.display{
	opacity: 1;
}
.sr3_mv_img ul li:hover{
	transform: rotateY(360deg);
	transition: all 0.4s;
}


.sr3_mv_copy02.infinite span{
	display: inline-block;
	animation: sr3_mv_copy02 4s ease-in-out forwards;
}
.sr3_mv_copy02.infinite span:nth-child(2){
	animation-delay: 0.2s;
}
.sr3_mv_copy02.infinite span:nth-child(3){
	animation-delay: 0.4s;
}
.sr3_mv_copy02.infinite span:nth-child(4){
	animation-delay: 0.6s;
}
.sr3_mv_copy02.infinite span:nth-child(5){
	animation-delay: 0.8s;
}
.sr3_mv_copy02.infinite span:nth-child(6){
	animation-delay: 1s;
}
.sr3_mv_copy02.infinite span:nth-child(7){
	animation-delay: 1.2s;
}
.sr3_mv_copy02.infinite span:nth-child(8){
	animation-delay: 1.4s;
}
.sr3_mv_copy02.infinite span:nth-child(9){
	animation-delay: 1.6s;
}
.sr3_mv_copy02.infinite span:nth-child(10){
	animation-delay: 1.8s;
}
.sr3_mv_copy02.infinite span:nth-child(11){
	animation-delay: 2s;
}
.sr3_mv_copy02.infinite span:nth-child(12){
	animation-delay: 2.2s;
}
.sr3_mv_copy02.infinite span:nth-child(13){
	animation-delay: 2.4s;
}
.sr3_mv_copy02.infinite span:nth-child(14){
	animation-delay: 2.6s;
}

@keyframes sr3_mv_copy02{
	0%{
		transform: scale(1.8);
	}
	5%{
		transform: scale(1);
	}
	10%{
		transform: scale(1);
	}
	20%{
		transform: scale(1);
		filter: blur(2px);
	}
	25%{
		transform: scale(1);
		filter: blur(0);
	}
	100%{
		transform: scale(1);
	}

}

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

	.sr3_mv_ttl{
		font-size: 8rem;
	}
	.sr3_mv_year{
		right: 15px;
	}
	.sr3_mv_deco{
		left: -10px;
	}
	.sr3 .text_24.sr3_mv_copy01{
		font-size: 1.8rem !important;
		letter-spacing: -1px;
	}
	.sr3_mv_year,
	.sr3_mv_deco{
		display: none;
	}
	.intro_copy .ls_-5{
		letter-spacing: -2px;
	}

}/*END*/


/*----------------------------------------
	intro
----------------------------------------*/

.intro_copy{
	line-height: 1.4;
	margin-left: -100%;
	opacity: 0;
}
.intro_copy.start{
	animation: intro_copy 0.4s ease-in-out forwards;
}
@keyframes intro_copy{
	0%{
		opacity: 0;
		margin-left: -100%;
	}
	100%{
		opacity: 1;
		margin-left: 0;
	}
}

.intro_copy .text_24{
	display: inline-block;
	color: #fff;
	background: #000;
	margin-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}
.intro_kaiwa01,
.intro_kaiwa02,
.intro_kaiwa03{
	opacity: 0;
}
.intro_kaiwa.start .intro_kaiwa01,
.intro_kaiwa.start .intro_kaiwa02,
.intro_kaiwa.start .intro_kaiwa03{
	animation: intro_kaiwa 0.3s forwards;
}
.intro_kaiwa.start .intro_kaiwa02{
	animation-delay: 0.3s;
}
.intro_kaiwa.start .intro_kaiwa03{
	animation-delay: 0.9s;
}
@keyframes intro_kaiwa{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}


@media print, screen and (min-width: 1100px) and ( max-width: 1249px){


}/*END*/

@media print, screen and ( max-width: 1099px){


}/*END*/

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



}/*END*/


/*----------------------------------------
	work
----------------------------------------*/

.works_box{
	position: relative;
	background: #e6e6f7;
	border-radius: 5px;
	padding-left: calc((50/1150)*100%);
	padding-right: calc((50/1150)*100%);
}
.works_deco{
	position: absolute;
	top: 100px;
	right: 0;
	transform: rotate(90deg);
}
.work_check{
	border: 2px solid #000;
	background: #fff;
	box-sizing: border-box;
}
.tokugi_ttl{
	text-align: center;
	line-height: 1;
	opacity: 0;
}
.tokugi_ttl.start{
	animation: tokugi_ttl 0.4s ease-in-out forwards;
}
@keyframes tokugi_ttl{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	50%{
		opacity: 1;
		transform: scale(1.5);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.tokugi_ttl span{
	display: inline-block;
	padding: 10px 25px 15px 25px;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
	border-left: 2px solid #000;
	border-radius: 0 0 5px 5px;
}
.work_check ul{
	padding-left: 50px;
	line-height: 1.8;
}
.work_check li:before{
	content: "●";
	color: #8083ec;
	display: inline-block;
	margin-right: 5px;
}
.work_point{
	width: 100%;
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 20px;
}
.work_point li{
	overflow: hidden;
}
.work_point li img,
.work_point li p{
	margin-left: -100%;
	width: 100%;
}
.work_point.start li img,
.work_point.start li p{
	animation: work_point 0.4s ease-in-out forwards;
}
.work_point.start li:nth-child(2) img,
.work_point.start li:nth-child(2) p{
	animation-delay: 0.2s;
}
.work_point.start li:nth-child(3) img,
.work_point.start li:nth-child(3) p{
	animation-delay: 0.4s;
}
.work_point.start li:nth-child(4) img,
.work_point.start li:nth-child(4) p{
	animation-delay: 0.6s;
}
@keyframes work_point{
	0%{
		margin-left: -100%;
	}
	100%{
		margin-left: 0;
	}
}

.work_fukidashi01{
	float: left;
	width: calc((469/1050)*100%);
	animation: work_fukidashi 5s ease-in-out infinite;
}
.work_fukidashi02{
	float: right;
	width: calc((439/1050)*100%);
	margin-right: 40px;
	animation: work_fukidashi 5s ease-in-out infinite;
	animation-delay: 2s;
}
@keyframes work_fukidashi{
	0%{
		transform: translateY(-20px);
	}
	10%{
		transform: translateY(0);
	}
	20%{
		transform: translateY(-20px);
	}
	30%{
		transform: translateY(0);
	}
	100%{
		transform: translateY(0);
	}
}


.works_img{
	position: relative;
}
.work_img01_fukidashi{
	position: absolute;
	width:0;
	height: 0;
	right: 50%;
	top: 26px;
}
.work_img02_fukidashi{
	position: absolute;
	width: 0;
	height: 0;
	right: 20px;
	bottom: 85%;
}
.work_img01_fukidashi.start{
	animation: work_img01_fukidashi 0.4s ease-in-out forwards;
}
@keyframes work_img01_fukidashi{
	0%{
		width: 0;
		height: 0;
	}
	100%{
		width: calc((230/500)*100%);
		height: auto;
	}
}
.work_img02_fukidashi.start{
	animation: work_img02_fukidashi 0.4s ease forwards;
	animation-delay: 0.5s;
}
@keyframes work_img02_fukidashi{
	0%{
		width: 0;
		height: 0;
	}
	100%{
		width: calc((225/500)*100%);
		height: auto;
	}
}

#sec01 h2.start span{
	animation: h2 1s ease-in-out forwards;
}
#sec01 h2.start span:nth-child(2){
	animation-delay: 0.1s;
}
#sec01 h2.start span:nth-child(3){
	animation-delay: 0.2s;
}
#sec01 h2.start span:nth-child(4){
	animation-delay: 0.3s;
}
#sec01 h2.start span:nth-child(5){
	animation-delay: 0.4s;
}
@media screen and (max-width: 1130px){



}/*END*/

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


}/*END*/

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

	.work_check ul{
		padding-left: 10px;
		padding-right: 10px;
	}


}/*END*/

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

	.works_text01{
		margin-bottom: 80px;
	}
	.work_point{
		grid-template-columns: repeat(2,1fr);
	}
	.work_fukidashi01{
		float: none;
		width: 100%;
		margin-bottom: 20px;
	}
	.work_fukidashi02{
		margin-right: 0;
		width: 100%;
	}


}/*END*/


/*----------------------------------------
	wanted
----------------------------------------*/

#sec02 h2.start span{
	animation: h2 0.4s ease-in-out forwards;
}
#sec02 h2 span:nth-child(2){
	animation-delay: 0.1s;
}
#sec02 h2 span:nth-child(3){
	animation-delay: 0.2s;
}
#sec02 h2 span:nth-child(4){
	animation-delay: 0.3s;
}
#sec02 h2 span:nth-child(5){
	animation-delay: 0.4s;
}
#sec02 h2 span:nth-child(6){
	animation-delay: 0.5s;
}

.wanted_deco{
	position: absolute;
	top: 150px;
	right: 0;
	transform: rotate(90deg);
}
.wanted_fukidashi{
	width: calc((211/500)*100%);
	opacity: 0;
}
.wanted_saikyo.start,
.wanted_fukidashi.start{
	animation: wanted_fukidashi 0.4s ease-in-out forwards;
}
@keyframes wanted_fukidashi{
	0%{
		transform: scale(1);
	}
	50%{
		opacity: 1;
		transform: scale(1.5);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.wanted_text02 h3,
.wanted_text01 h3{
	margin-left: -100%;
}
.wanted_text02 h3.start,
.wanted_text01 h3.start{
	animation: wanted_text01 0.4s ease-in-out forwards;
	animation-delay: 0.4s;
}
@keyframes wanted_text01{
	0%{
		margin-left: -100%;
	}
	100%{
		margin-left: 0;
	}
}
.wanted_point{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 30px;
}
.wanted_point li{
	opacity: 0;
}
.wanted_point.start li{
	animation: wanted_point 0.4s ease-in-out forwards;
}
.wanted_point.start li:nth-child(2){
	animation-delay: 0.3s;
}
.wanted_point.start li:nth-child(3){
	animation-delay: 0.6s;
}
@keyframes wanted_point{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}


.wan_serif{
	width: 100%;
	max-width: 598px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
.wan_serifu01{
	position: absolute;
	width: calc((260/598)*100%);
	left: 0;
	top: 40%;
}
.wan_serifu02{
	position: absolute;
	width: calc((219/598)*100%);
	right: 0;
	top: 13%;
}
.wan_serifu03{
	position: absolute;
	width: calc((178/598)*100%);
	right: calc((70/598)*100%);
	bottom: 0;
}
.wan_serifu04{
	position: absolute;
	width: calc((257/598)*100%);
	top: 0;
	left: calc((100/598)*100%);
}
.wan_serifu05{
	position: absolute;
	width: calc((215/598)*100%);
	left: calc((35/598)*100%);
	bottom: 9%;
}
.wan_serifu06{
	position: absolute;
	width: calc((227/598)*100%);
	top: 32%;
	left: calc((260/598)*100%);
}
.wan_serifu07{
	position: absolute;
	width: calc((428/598)*100%);
	left: calc((170/598)*100%);
	top: 43%;
}
.wan_serifu01,
.wan_serifu02,
.wan_serifu03,
.wan_serifu04,
.wan_serifu05,
.wan_serifu06,
.wan_serifu07{
	opacity: 0;
}
.wan_serif.start .wan_serifu01{
	animation: wan_serif 0.6s ease-in-out forwards;
}
.wan_serif.start .wan_serifu02{
	animation: wan_serif 0.6s ease-in-out forwards;
	animation-delay: 0.3s;
}
.wan_serif.start .wan_serifu03{
	animation: wan_serif 0.6s ease-in-out forwards;
	animation-delay: 0.6s;
}
.wan_serif.start .wan_serifu04{
	animation: wan_serif 0.6s ease-in-out forwards;
	animation-delay: 0.9s;
}
.wan_serif.start .wan_serifu05{
	animation: wan_serif 0.6s ease-in-out forwards;
	animation-delay: 1.2s;
}
.wan_serif.start .wan_serifu06{
	animation: wan_serif 0.6s ease-in-out forwards;
	animation-delay: 1.5s;
}
@keyframes wan_serif{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.wan_serif.start .wan_serifu07{
	animation: wan_serifu07 0.6s ease-in-out forwards;
	animation-delay: 2s;
}
@keyframes wan_serifu07{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	50%{
		opacity: 1;
		transform: scale(1.5);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.wanted_saikyo{
	width: calc((146/500)*100%);
	opacity: 0;
}
.pickup_frame{
	position: relative;
	background: #e6e6f7;
	border-radius: 5px;
	padding-left: calc((100/1150)*100%);
	padding-right: calc((100/1150)*100%);
}
.pickup_ttl{
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
}
.pickup_ttl.start{
	animation: pickup_ttl 0.8s ease-in-out forwards;
}
@keyframes pickup_ttl{
	0%{
		opacity: 0;
	}
	30%{
		opacity: 1;
		top: -20px;
	}
	60%{
		opacity: 1;
		top: -70px;
	}
	100%{
		opacity: 1;
		transform: -50px;
	}
}
.konnahito{
	opacity: 0;
}
.konnahito.start{
	animation: konnahito 0.4s ease-in-out forwards;
	animation-delay: 0.6s;
}
@keyframes konnahito{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.pickup_box{
	position: relative;
	background: #fff;
	border: 2px solid #000;
	border-radius: 10px;
	padding-left: 30px;
	padding-right: 30px;
}
.pickup_copy{
	position: absolute;
	left: 35px;
	top: 50%;
	transform: translateY(-50%);
	padding-right: 25px;
	border-right: 1px solid #000;
}
.pickup_copy.start{
	animation: pickup_copy 0.8s ease-in-out forwards;
}
@keyframes pickup_copy{
	0%{
		transform: rotate(-5deg) translateY(-50%);
	}
	25%{
		transform: rotate(5deg) translateY(-50%);
	}
	50%{
		transform: rotate(-5deg) translateY(-50%);
	}
	75%{
		transform: rotate(5deg) translateY(-50%);
	}
	100%{
		transform: rotate(0) translateY(-50%);
	}
}
.start_copy{
	opacity: 0;
}
.start_copy.start{
	animation: start_copy 0.6s ease-in-out forwards;
}
@keyframes start_copy{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	50%{
		opacity: 1;
		transform: scale(1.5);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.pickup_text{
	margin-left: 42%;
}
.pickup_serifu{
	position: relative;
	max-width: 573px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.pickup_serifu01{
	position: absolute;
	width: calc((173/573)*100%);
	bottom: 0;
	right: calc((52/573)*100%);
}
.pickup_serifu02{
	position: absolute;
	width: calc((197/573)*100%);
	left: 0;
	bottom: 8%;
}
.pickup_serifu03{
	position: absolute;
	width: calc((292/573)*100%);
	right: 0;
	top: 0;
}
.pickup_serifu04{
	position: absolute;
	width: calc((176/573)*100%);
	top: 0;
	left: calc((60/573)*100%);
}
.pickup_serifu05{
	position: absolute;
	width: calc((240/573)*100%);
	left: calc((180/573)*100%);
	top: 39%;
}
.pickup_serifu01,
.pickup_serifu02,
.pickup_serifu03,
.pickup_serifu04,
.pickup_serifu05{
	opacity: 0;
}

.pickup_serifu.start .pickup_serifu01{
	animation: pickup_serifu 0.6s ease-in-out forwards;
}
.pickup_serifu.start .pickup_serifu02{
	animation: pickup_serifu 0.6s ease-in-out forwards;
	animation-delay: 0.3s;
}
.pickup_serifu.start .pickup_serifu03{
	animation: pickup_serifu 0.6s ease-in-out forwards;
	animation-delay: 0.6s;
}
.pickup_serifu.start .pickup_serifu04{
	animation: pickup_serifu 0.6s ease-in-out forwards;
	animation-delay: 0.9s;
}
.pickup_serifu.start .pickup_serifu05{
	animation: pickup_serifu 0.6s ease-in-out forwards;
	animation-delay: 1.2s;
}

@keyframes pickup_serifu{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.pickup_hito01{
	display: block;
	float: left;
	margin-left: 28%;
	width: calc((123/950)*100%);
	animation: pickup_hito01 6s ease-in-out infinite;
}
.pickup_hito02{
	display: block;
	float: left;
	margin-left: 2%;
	width: calc((150/950)*100%);
	animation: pickup_hito02 6s ease-in-out infinite;
	animation-delay: 1.5s;
}
.pickup_hito03{
	display: block;
	float: left;
	margin-left: 1%;
	width: calc((147/950)*100%);
	animation: pickup_hito02 6s ease-in-out infinite;
	animation-delay: 3s;
}
@keyframes pickup_hito01{
	0%{
		transform: rotate(-8deg);
	}
	10%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(0);
	}
}
@keyframes pickup_hito02{
	0%{
		transform: rotate(8deg);
	}
	10%{
		transform: rotate(0);
	}
	100%{
		transform: rotate(0);
	}
}

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

	.pickup_copy{
		position: relative;
		padding-right: 0;
		border-bottom: 1px solid #000;
		padding-bottom: 25px;
		top: inherit;
		left: inherit;
		transform: none;
		border-right: 0;
		text-align: center;
		margin-bottom: 25px;
	}
	@keyframes pickup_copy{
		0%{
			transform: rotate(-5deg);
		}
		25%{
			transform: rotate(5deg);
		}
		50%{
			transform: rotate(-5deg);
		}
		75%{
			transform: rotate(5deg);
		}
		100%{
			transform: rotate(0);
		}
	}
	.pickup_text{
		margin-left: 0;
		text-align: center;
	}
	.pickup_text .pc_br{
		display: none;
	}

}/*END*/

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

	.wanted_point{
		display: block;
	}
	.wanted_point li{
		margin-bottom: 35px;
	}
	.pickup_frame{
		padding-left: 15px;
		padding-right: 15px;
	}
	.sr3 .text_24.start_copy{
		letter-spacing: -1px;
		font-size: 1.8rem !important;
	}
	.pickup_hito01{
		width: 30%;
		margin-left: 0;
	}
	.pickup_hito02{
		width: 30%;
	}
	.pickup_hito03{
		width: 37%;
	}



}/*END*/



/*----------------------------------------
	about
----------------------------------------*/

#sec03{
	background: #e6e6f7;
}
#sec03 h2.start span{
	animation: h2 0.4s ease-in-out forwards;
}
#sec03 h2 span:nth-child(2){
	animation-delay: 0.1s;
}
#sec03 h2 span:nth-child(3){
	animation-delay: 0.2s;
}
#sec03 h2 span:nth-child(4){
	animation-delay: 0.3s;
}
#sec03 h2 span:nth-child(5){
	animation-delay: 0.4s;
}

.about_deco{
	position: absolute;
	top: 150px;
	right: 0;
	transform: rotate(90deg);
}
.about_omona{
	background: #000;
	color: #fff;
	line-height: 1;
	padding: 5px 10px;
}
.about_omona01.start,
.about_omona02.start{
	animation: about_omona 0.4s ease-in-out forwards;
}
@keyframes about_omona{
	0%{
		transform: rotateY(360deg);
	}
	100%{
		transform: rotateY(0);
	}
}
.about_check_ttl{
	opacity: 0;
}
.about_check_ttl.start{
	animation: about_check_ttl 0.4s ease-in-out forwards;
}
@keyframes about_check_ttl{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	50%{
		opacity: 1;
		transform: scale(1.5);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.about_text{
	position: relative;
}
.about_fukidashi01{
	position: absolute;
	right: 0;
	top: -50px;
	width: calc((349/500)*100%);
	animation: about_fukidashi01 4s ease-in-out infinite;
}
@keyframes about_fukidashi01{
	0%{
		transform: translateY(-20px);
	}
	10%{
		transform: translateY(0);
	}
	20%{
		transform: translateY(-20px);
	}
	30%{
		transform: translateY(0);
	}
	100%{
		transform: translateY(0);
	}
}
.about_fukidashi02{
	position: absolute;
	right: -30px;
	bottom: -130px;
	width: calc((275/500)*100%);
	animation: about_fukidashi01 4s ease-in-out infinite;
}
.about_sample{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 40px;
}
.about_sample li{
	overflow: hidden;
}
.about_sample li img{
	margin-left: -100%;
}
.about_sample.start li img{
	animation: about_sample 0.4s ease-in-out forwards;
}
@keyframes about_sample{
	0%{
		margin-left: -100%;
	}
	100%{
		margin-left: 0;
	}
}
.about_btn{
	width: 100%;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}
.about_btn a{
	display: block;
	float: left;
	margin-left: 20px;
	margin-right: 20px;
}
.about_frame{
	background: #fff;
}
.katsuyaku_img,
.katsuyaku_text{
	position: relative;
	width: 50%;
}
.katsuyaku_text{
	box-sizing: border-box;
	padding-left: 25px;
	padding-right: 25px;
}
.katsuyaku_text h3 span{
	opacity: 0;
}
.katsuyaku_text.right h3.start span,
.katsuyaku_text.left h3.start span{
	animation: katsuyaku_text 0.4s ease-in-out forwards;
}
.katsuyaku_text.right h3.start span:nth-child(2),
.katsuyaku_text.left h3.start span:nth-child(2){
	animation-delay: 0.1s;
}
.katsuyaku_text.right h3.start span:nth-child(3),
.katsuyaku_text.left h3.start span:nth-child(3){
	animation-delay: 0.2s;
}
.katsuyaku_text.right h3.start span:nth-child(4),
.katsuyaku_text.left h3.start span:nth-child(4){
	animation-delay: 0.3s;
}
.katsuyaku_text.right h3.start span:nth-child(5),
.katsuyaku_text.left h3.start span:nth-child(5){
	animation-delay: 0.4s;
}
.katsuyaku_text.right h3.start span:nth-child(6),
.katsuyaku_text.left h3.start span:nth-child(6){
	animation-delay: 0.5s;
}
.katsuyaku_text.right h3.start span:nth-child(7),
.katsuyaku_text.left h3.start span:nth-child(7){
	animation-delay: 0.6s;
}
.katsuyaku_text.right h3.start span:nth-child(8),
.katsuyaku_text.left h3.start span:nth-child(8){
	animation-delay: 0.7s;
}
.katsuyaku_text.right h3.start span:nth-child(9),
.katsuyaku_text.left h3.start span:nth-child(9){
	animation-delay: 0.8s;
}
.katsuyaku_text.right h3.start span:nth-child(10),
.katsuyaku_text.left h3.start span:nth-child(10){
	animation-delay: 0.9s;
}
.katsuyaku_text.right h3.start span:nth-child(11),
.katsuyaku_text.left h3.start span:nth-child(11){
	animation-delay: 1s;
}
.katsuyaku_text.right h3.start span:nth-child(12),
.katsuyaku_text.left h3.start span:nth-child(12){
	animation-delay: 1.1s;
}
.katsuyaku_text.right h3.start span:nth-child(13),
.katsuyaku_text.left h3.start span:nth-child(13){
	animation-delay: 1.2s;
}
.katsuyaku_text.right h3.start span:nth-child(14),
.katsuyaku_text.left h3.start span:nth-child(14){
	animation-delay: 1.3s;
}
.katsuyaku_text.left h3.start span:nth-child(15){
	animation-delay: 1.4s;
}
.katsuyaku_text.left h3.start span:nth-child(16){
	animation-delay: 1.5s;
}
.katsuyaku_text.left h3.start span:nth-child(17){
	animation-delay: 1.6s;
}
.katsuyaku_text.left h3.start span:nth-child(18){
	animation-delay: 1.7s;
}
.katsuyaku_text.left h3.start span:nth-child(19){
	animation-delay: 1.8s;
}
.katsuyaku_text.left h3.start span:nth-child(20){
	animation-delay: 1.9s;
}
.katsuyaku_text.left h3.start span:nth-child(21){
	animation-delay: 2s;
}
.katsuyaku_text.left h3.start span:nth-child(22){
	animation-delay: 2.1s;
}
@keyframes katsuyaku_text{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.pickup_fukidashi img{
	position: absolute;
	top: -25px;
	left: 30px;
	width: calc((111/500)*100%);
	opacity: 0;
}
.pickup_fukidashi01.start img,
.pickup_fukidashi02.start img{
	animation: pickup_fukidashi 0.4s ease-in-out forwards;
}
@keyframes pickup_fukidashi{
	0%{
		opacity: 0;
		transform: scale(1);
	}
	50%{
		opacity: 1;
		transform: scale(1.5);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.about_fukidashi03{
	float: left;
	width: calc((420/1050)*100%);
	animation: about_fukidashi 5s ease-in-out infinite;
}
.about_fukidashi04{
	float: right;
	width: calc((420/1050)*100%);
	animation: about_fukidashi 5s ease-in-out infinite;
	animation-delay: 2s;
}
@keyframes about_fukidashi{
	0%{
		transform: translateY(-20px);
	}
	10%{
		transform: translateY(0);
	}
	20%{
		transform: translateY(-20px);
	}
	30%{
		transform: translateY(0);
	}
	100%{
		transform: translateY(0);
	}
}


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



}/*END*/

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

	.about_sample{
		grid-template-columns: repeat(2,1fr);
		gap: 20px;
	}
	.about_btn a{
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}


}/*END*/

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

	.about_deco{
		top: 50px;
	}
	.about_btn a{
		width: 100%;
	}
	.about_fukidashi03{
		float: none;
		width: 90%;
		margin-bottom: 20px;
	}
	.about_fukidashi04{
		float: none;
		width: 90%;
		margin-left: 10%;
	}

}/*END*/


/*----------------------------------------
	outline
----------------------------------------*/

#sec04 h2 span{
	animation: h2 0.4s ease-in-out forwards;
}
#sec04 h2 span:nth-child(2){
	animation-delay: 0.1s;
}
#sec04 h2 span:nth-child(3){
	animation-delay: 0.2s;
}
#sec04 h2 span:nth-child(4){
	animation-delay: 0.3s;
}
#sec04 h2 span:nth-child(5){
	animation-delay: 0.4s;
}
#sec04 h2 span:nth-child(6){
	animation-delay: 0.5s;
}
#sec04 h2 span:nth-child(7){
	animation-delay: 0.6s;
}


.outline_deco{
	position: absolute;
	top: 150px;
	right: 0;
	transform: rotate(90deg);
}
.sr3_outline{
	line-height: 1.8;
	max-width: 590px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.sr3_outline th{
	text-align: left;
	padding: 12px 15px;
	box-sizing: border-box;
	width: 200px;
	border-bottom: 1px solid #8083ec;
}
.sr3_outline td{
	padding: 12px 15px;
	box-sizing: border-box;
	border-bottom: 1px solid #dcdcdc;
}
.sr3_outline tr:first-child th{
	border-top: 1px solid #0b5287;
}
.sr3_outline tr:first-child td{
	border-top: 1px solid #dcdcdc;
}

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


	.sr3_outline{
		border-top: none;
		border-bottom: 1px solid #dcdcdc;
	}
	.sr3_outline th{
		display: block;
		padding: 8px 15px 8px 15px;
		width: auto;
		border-top: 1px solid #0b5287;
		border-bottom: none;
	}
	.sr3_outline td{
		display: block;
		padding: 12px 15px 15px 15px;
		border-top: 1px solid #dcdcdc;
		border-bottom: none;
	}
	.outline_deco{
		top: 80px;
	}

}/*END*/





/*----------------------------------------
	form
----------------------------------------*/

#entry h2 span{
	animation: h2 0.4s ease-in-out forwards;
}
#entry h2 span:nth-child(2){
	animation-delay: 0.1s;
}
#entry h2 span:nth-child(3){
	animation-delay: 0.2s;
}
#entry h2 span:nth-child(4){
	animation-delay: 0.3s;
}

.form_deco{
	position: absolute;
	top: 150px;
	right: 0;
	transform: rotate(90deg);
}
#entry{
	background: #eee;
}

.mw_wp_form_confirm .privacy_check{
	display: none;
}

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

	.form_deco{
		top: 80px;
	}

}/*END*/


/*----------------------------------------
	フォーム
----------------------------------------*/

#entry table{
	width: 100%;
	line-height: 1.8;
	border-top: 1px solid #ccc;
}
#entry table th{
	text-align: left;
	width: 260px;
	border-bottom: 1px solid #ccc;
	padding: 20px;
	box-sizing: border-box;
}
#entry table td{
	border-bottom: 1px solid #ccc;
	padding: 20px;
}
.btn_submit input{
	background: #000 !important;
	border: 1px solid #000 !important;
}
.btn_back button{
	background: #999 !important;
	border: 1px solid #999 !important;
	color: #fff !important;
}

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

	#entry table th{
		display: block;
		width: 100%;
		padding: 15px 5px 0 5px;
		border-bottom: none;
	}
	#entry table td{
		display: block;
		padding: 15px 5px 20px 5px;
	}

}/*END*/

select,
textarea,
input[type="text"],
input[type="tel"]{
	border: 1px solid #fff;
	padding: 10px 15px;
	box-sizing: border-box;
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	-webkit-appearance: none;
	transition: all 0.4s;
	font-size: 1.8rem;
}
input[type="button"]{
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	-webkit-appearance: none;
}
button,
input[type="submit"]{
	font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
	-webkit-appearance: none;
	transition: all 0.4s;
}
select{
	background: url("images/common/select_arrow.gif") right center no-repeat #fff;
	background-size: auto 100%;
	padding-right: 60px;
}
.form1{ width: 70px; }
.form2{ width: 120px; }
.form3{ width: 200px; }
.form4{ width: 400px; }
.form_all{ width: 100%; }

select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus{
	outline: none;
	border: 1px solid #0b5287 !important;
}

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

	select,
	textarea,
	input[type="text"]{
		font-size: 1.6rem;
	}
	.form3,
	.form4{
		width: 100%;
	}

}/*END*/

.radio input[type="radio"],
.check input[type="checkbox"]{
	display: none;
}
.radio label,
.check label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 10px;
	padding: 9px 0 9px 30px;
	line-height: 1.2;
}
.radio label:before,
.check label:before {
	position: absolute;
	content: "";
	top: 50%;
	left: -8px;
	width: 25px;
	height: 25px;
	margin-top: -13px;
	background: #fff;
	border: 1px solid #7d7d7d;
	border-radius: 50%;
}
.radio label:before{
	left: -3px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
}
.check label:before{ border-radius: 0; }
.radio label,
.check label{
	margin-left: 0\9;
	padding: 11px\9;
	line-height:2;
}
.radio label:not(:target),
.check label:not(:target){
	margin-left: 10px\9;
	padding: 11px 0 11px 25px\9;
	line-height:2;
	width: 100%;
	box-sizing: border-box;
}
.radio label:before,
.check label:before{
	display: none\9;
}
.radio label:not(:target):before,
.check label:not(:target):before{
	display: inline-block\9;
}
.radio input[type="radio"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: 0px;
	width: 16px;
	height: 16px;
	margin-top: -7px;
	border-radius: 50%;
	background: #e8334a !important;
}
.check input[type="checkbox"]:checked + label::after {
	content: "";
	position: absolute;
	top: 50%;
	box-sizing: border-box;
	display: block;
}
.check input[type="checkbox"]:checked + label::after {
	left: -3px;
	width: 18px;
	height: 12px;
	margin-top: -8px;
	border-left: 4px solid #e8334a !important;
	border-bottom: 4px solid #e8334a !important;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}