html {
	font-size: 62.5%;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-family: 'Shippori Mincho', serif;
}
body {
    overflow-x: hidden;
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--black);
	background: var(--background);
}
p {
	line-height: 1.5;
}
img {
	width: 100%;
	height: auto;
}
:root {
	--black: #1D1D1D;
	--background: #F7F7F8;
	--blue: #0F2C59;
	--next-blue: #496DA6;
	--white: #fff;
	--red: #BB0E58;
	--brown: #DAC0A3;
}
.container {
	max-width: 1000px;
	margin: 50px auto 100px;
	padding: 0 4.5%;
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.pc_display {
	display: none;
	}
.indent{
	text-indent: -1em;
	padding-left: 1em;
}

/* アニメーション */
.fadeUp {
  animation-name:fadeUpAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
  }
@keyframes fadeUpAnime{
  from {
  opacity: 0;
  transform: translateY(300px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    }
  }
.delay-time01 {  
  animation-delay: 0.5s;
}
.delay-time02 {  
  animation-delay: 1s;
}
.fadeUpTrigger {
    opacity: 0;
}
#top div {
	text-align: center;
}
.top_next-persona {
	background: var(--white);
	padding: 15px 4.5%;
}
.top_next-persona img {
	max-width: 570px;
	margin: 0 auto;
}
.top_campain {
	background-image: url("../img/background.png");
	background-repeat: repeat;
	background-size: cover;
	padding: 0;
}
.top_campain img {
	max-width: 1000px;
	margin: 0 auto;	
}
.top_period {
	padding: 15px 5px;
	background: #696969;
}
.top_period p {
	font-size: 4.8vw;
	color: var(--white);
}
h1 {
	font-size: 2.1rem;
	background: var(--white);
	border: 1px solid var(--blue);
	padding: 10px;
	text-align: center;
	position: relative;
	margin-bottom: 13px;
}
h1::before {
	content:"";
	height: 15px;
	width: 25px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: var(--black);
	position: absolute;
	bottom: -13px;
	left: 50%;
	transform: translateX(-50%);
	z-index:-1;
}
h1::after {
	content:"";
	height: 14px;
	width: 23px;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: var(--white);
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
}
h2 {
	font-size: 2.4rem;
	text-align: center;
}


/*----- btn -----*/
.btn {
	text-align: center;
	display: grid;
	place-items: center;
}
.btn .end__btn,
.btn a {
	font-size: 1.4rem;
	font-weight: 600;
	font-size: 1.5rem;
	padding: 15px;
	border-radius: 40px;
	position: relative;
	border: 1px solid #7d7d7d;
	transition: .3s;
	width: min(77vw, 470px);
}

.btn a {
	color: #7d7d7d;
}
.btn span {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	font-size: 2.1rem;
}
.next-info_btn .end__btn {
	color: var(--next-blue);
	background: var(--white);
}
.next-info_btn a:hover {
	color: var(--white);
	background: var(--next-blue);
}
.btn .end__btn {
	color: var(--white);
	background: #7d7d7d;
}
.next-apply_btn p {
	font-size: min(3.5vw, 1.4rem);
	font-weight: 600;
	color: var(--next-blue);
	margin-bottom: 10px;
}
.textlink a {
	color: var(--black);
	border-bottom: 1px solid var(--black);
	transition:.3s;
}
.textlink a:hover {
	opacity: .5;
}
.textline_talmail a {
	border-bottom: none;
}
@keyframes shine {
	0% {
		left: 0%;
	}
  100% {
    left: 125%;
  }
}
.next-info_btn p {
	font-weight: 600;
}

/*--- next-login ---*/
.next-login p {
	font-size: min(3vw, 15px);
}
.next-login p a {
	color: #333;
	border-bottom: 1px solid #333;
	transition: .3s;
}
.next-login p a:hover {
	opacity: .5;
}
/*----- ページ下部のボタン start -----*/
/*リンクを右下に固定*/
#btn_bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 2;
	opacity: 0;
	width: 100vw;
	background: #fff;
	margin-bottom: 0;
	line-height: 1.4;
	padding: 1rem 0;
	box-shadow: 2px 4px 20px 0px #c5c5c5;
	-webkit-box-shadow:2px 4px 20px 0px #c5c5c5;
}
#btn_bottom a {
	margin: 0 auto;
	width: 75%;
	max-width: 350px;
}
/*　上に上がる動き　*/

#btn_bottom.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(200px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#btn_bottom.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(200px);
  }
}
/*----- ページ下部のボタン end -----*/

/*----- next-info START -----*/
.next-info_box span {
	background-image: repeating-linear-gradient(-45deg,
        #DAC0A3 0, #DAC0A3 3px,
        transparent 3px, transparent 6px);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% 30%;
}
.next-info_box ul {
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 130px;
	margin-top: 120px;
}
.next-info_item {
	position: relative;
	text-align:center;
	display: flex;
	flex-direction: column;
	gap: 15px;
	max-width: 400px;
	margin: 0 auto;
}
.next-info_item img {
	border-radius: 30px;
}
.next-info_item::before {
	font-size: 1.6rem;
	font-family: 'Dancing Script', cursive;
	color: var(--next-blue);
	position:absolute;
	top: -75px;
	left: 50%;
	transform: translateX(-50%);
	border: 1px dashed var(--black);
	border-radius: 50px;
	width: 60px;
	height: 60px;
	align-items: center;
	display: grid;
}
.point01::before {
	content:"point 1";
}
.point02::before {
	content:"point 2";
}
.point03::before {
	content:"point 3";
}
.next-info_title {
	font-size: 1.9rem;
	color: var(--next-blue);
	font-weight: 900;
}
.next-info_text {
	text-align: left;
}
/*----- next-info END -----*/



/*----- campain START -----*/
.campain_box h2 {
	line-height: 1.8;
	font-size: 2.0rem;
}
.campain_blue {
	color: var(--next-blue);
	font-weight: 900;
	margin: 0 1rem;
}
.campain_red {
	color: var(--red);
	font-weight: 900;
	background:linear-gradient(transparent 80%, rgba(187, 14, 88, .3) 80%);
	margin: 0 1rem;
}
.campain_detail {
	padding: 0 1rem;
	margin-top: 50px;
}
.campain_detail h3 {
	font-size: 1.8rem;
	padding: 10px 5px;
	text-align: center;
	background: var(--white);
	border-top: 5px dotted var(--brown);
	border-bottom: 5px dotted var(--brown);
}
.campain_detail h3 span {
	font-size: 3.0rem;
    color: var(--red);
    padding-right: 0.5rem;
}

.campain_table {
	max-width: 570px;
	display: block;
	margin: 30px auto 0;
}

.campain_for {
	position: relative;
	padding: 40px 10px;
	border: 1px solid var(--red);
	text-align:center;
	max-width: 730px;
	margin: 69px auto 0;
	
}
.campain_for dt {
	position: absolute;
	top: -19px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 2.2rem;
	padding: 0 20px;
	background: var(--background);
}
/*----- campain END -----*/



/*----- flow START -----*/
.flow_box {
	margin-top: 35px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 65px;
}
.flow_inner {
	border: 1px solid var(--black);
	position: relative;
	max-width: 640px;
	width: 100%;
	margin: 0 auto;
}
.flow_inner::before {
	color: var(--black);
	font-size: 2.0rem;
	position: absolute;
	top: -40px;
	left: 0;
}
.flow01::before {
	content:"Step 1";
}
.flow02::before {
	content:"Step 2";
}
.flow03::before {
	content:"Step 3";
}
.flow04::before {
	content:"Step 4";
}
.flow05::before {
	content:"5";
}
.flow_box_text {
	font-size: 1.7rem;
	padding: 10px;
	text-align: left;
	background: var(--white);
	border-bottom: 1px solid var(--black);
}
.flow_inner_item {
	padding: 30px 10px;
	display: grid;
	place-items: center;
	gap: 30px;
}
.persona-card_img {
	margin: 0 auto;
	max-width: 500px;
	width: 85%;
}
.step_illust {
	width: 76%;
	margin: 0 auto;
}
/*----- flow END -----*/



/*----- attention START -----*/
.attention div:not(.attention_contact div) {
	padding: 0 .5rem;
	margin-bottom: 60px;
}
.attention div dt {
	font-size: 2.4rem;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--blue);
	padding-bottom: 1rem;
}
.attention_bold {
	font-size: 1.7rem;
	font-weight: 700;
	margin-bottom: 20px;
}
.attention_small p {
	font-size: 1.5rem;
}
.attention_small p:not(.attention_small p:last-child) {
	margin-bottom: 5px;
}

.attention_kobenext {
	margin-bottom: 50px;
}
.attention_contact h4 {
	font-size: 1.6rem;
	margin-bottom: 10px;
}
.contact_title {
	position: relative;
	padding: 0 2rem;
    display: inline-block;
	margin-bottom: 15px;
}
.contact_title::before,
.contact_title::after {
	position: absolute;
	font-size: 1.7rem;
	color: var(--black);
	top: 50%;
	transform: translateY(-50%);
	
}
.contact_title::before {
	content: "<";
	left: 0;
}
.contact_title::after  {
	content: ">";
	right: 0;
}
.contact_detail p {
	padding-left: 2rem;
}

.attention_persona div {
	margin-bottom: 15px;
}
/*----- flow END -----*/



/*===================
min-width 768px START 
===================*/
@media(min-width: 768px) {
	.sp_display {
		display: none;
	}
	.pc_display {
		display: block;
	}
	a[href^="tel:"]{
    pointer-events: none;
	}	
	.container {
		margin: 150px auto;
		gap: 60px;
	}	
	h1 {
		font-size: 3.2rem;
		padding: 20px;
	}
	h2 {
		font-size: 3.1rem;
	}
	
	/*----- btn -----*/
	.btn a,
	.btn .end__btn {
		font-size: 1.8rem;
		width: 470px;
		border-radius: 60px;
	}	
	.btn span {
	right: 30px;
	font-size: 2.8rem;
	}
	.next-apply_btn p {
		font-weight: 900;
		font-size: 2.1rem;
	}
	.next-login p {
    font-size: 16.5px;
	}
	
	/*----- top -----*/
	.top_next-persona {
    padding: 20px 4.5%;
	}
	.top_period p {
	font-size: 2.5rem;
	}
	.top_campain {
		padding: 0 4.5%;
	}

	/*----- campain -----*/
	.campain_box h2 {
		font-size: 3.1rem;
	}
	.campain_detail {
	margin-top: 60px;
	}
	.campain_detail h3 {
		font-size: 3.1rem;
	}
	.campain_detail h3 span {
		font-size: 3.8rem;
	}
	.campain_table {
	margin: 50px auto 0;
	}
	.campain_for {
		margin: 73.5px auto 0;
	}
	.campain_for dt {
		top: -27px;
		font-size: 3.2rem;
	}
	.campain_for dd {
		font-size: 1.8rem;
	}
	
	/*----- flow -----*/
	.flow_box {
		margin-top: 55px;
		gap: 120px;
	}
	.flow_inner_item {
		padding: 50px 10px;
		gap: 40px;
	}
	.flow_inner::before {
		font-size: 3.0rem;
		top: -55px;
	}
	.flow_box_text {
		font-size: 2.5rem;
		padding: 20px;
}
	.persona-card_img {
		margin: 0 auto;
	}
	.persona-apply_text {
	font-size: 2rem;
	}
	.persona-apply_announce {
		font-size: 1.8rem;
	}
	.step_illust {
		max-width: 350px;
	}

	/*----- attention -----*/
	.attention div:not(.attention_contact div)  {
		margin-bottom: 100px;
	}
	.attention div dt {
		font-size: 3.0rem;
		margin-bottom: 30px;
	}
	.attention_bold {
		font-size: 2.1rem;
	}
	.attention_small p {
	font-size: 1.6rem;
	}
	.attention_small p:not(.attention_small p:last-child) {
	margin-bottom: 10px;
	}
	.contact_title {
		margin-bottom: 20px;
	}
	.attention_contact h4 {
	    font-size: 1.9rem;
		margin-bottom: 15px;
	}
	.contact_detail p {
		font-size: 1.8rem;
	}	
}
/*===================
min-width 768px END 
===================*/



/*===================
min-width 1000px START 
===================*/
@media(min-width: 1000px) {
	
	/*----- top -----*/
	.top_period p {
		font-size: 2.7rem;
	}	
	
	/*-- next-info --*/
	.next-info_box ul {
		margin-top: 130px;
		padding: 0;
		max-width: 1000px;
		flex-direction: row;
		justify-content: space-between;
		gap: initial;
	}
	.next-info_item {
		width: 292px;
	}
	.next-info_btn p {
		font-size: 2.4rem;
	}
}
/*===================
min-width 1000px END
===================*/
	
	
	
	
	