@charset "utf-8";

header.under_page{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(255,255,255,.9);
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 8rem;
	z-index: 2;
}

header.under_page .head_logo{
	width: 30rem;
	margin-left: 5rem;
}

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

	header.under_page .head_logo{
		width: 30rem;
		margin-left: 3rem;
	}

}

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

	header.under_page{
		height: 6rem;
	}

	header.under_page .head_logo{
		width: 24rem;
		margin-left: 3rem;
	}

}

/*---*/

.global-nav__list{
	font-size: 2.5rem;
	font-weight: 600;
	height: 8rem;
	align-items: center;
}

.global-nav__list li{
	height: 8rem;
	margin-right: 6vw;
}

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

	.global-nav__list li{
		margin-right: 4vw;
	}

}

.global-nav__list li:last-child{
	margin-right: 0rem;
}

.global-nav__list li a{
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.global-nav__list li:last-child a{
	width: 30rem;
	background: #FA777C;
}

/*---*/

article#other{
	overflow: hidden;
}

/*---*/

.main_image{
	background: url(../img/offjt/offjt-top-pc.jpg);
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100svh;
	min-height: 74rem;
	
	display: flex;
	justify-content: left;
	align-items: center;
}

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

	.main_image{
		background: url(../img/offjt/offjt-top-sp.jpg) no-repeat #eff2f3;
		background-size: 100%;
		/* height: 100svh; */
		height: 110svh;
		padding-bottom: 10rem;
	}

}

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

	.main_image{
		height: 120svh;
	}

}

.main_image .catch_area{
	position: absolute;
/*
	top: 20rem;
	left: 20rem;
*/
    margin-top: 8rem;
	margin-left: 10vw;
	max-width: 82rem;
}

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

	.main_image .catch_area{
		margin-left: 0;
		left: 10rem;
	}

}

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

	.main_image .catch_area{
	    margin-top: 0;
		/*top: 10rem;*/
		left: 5rem;
	}

}

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

	.main_image .catch_area{
		/*top: 30rem;*/
		left: 5rem;
		max-width: 85%;
	}

}

.main_image .catch_area .inside{

}

.main_image .catch_area .sub_title{
	font-size: 4.5rem;
	font-weight: 600;
	margin-bottom: 3rem;
}

.main_image .catch_area .sub_title span{
	position: relative;
	z-index: 1;
}

.main_image .catch_area .sub_title span::after{
	content: '';
	position: absolute;
	background: #FF7E7E;
	bottom: 0.3rem;
	left: 0;
	width: 100%;
	height: 1.5rem;
	z-index: -1;
}

.main_image .catch_area .main_title{
	font-size: 8.0rem;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 4rem;
}

.main_image .catch_area .main_title::first-letter{
	color: #5DBD6E;
}

.main_image .catch_area p{
	font-size: 2.0rem;
	line-height: 2.0;
}

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

	.main_image .catch_area .sub_title {
		font-size: 2.5rem;
	}

	.main_image .catch_area .main_title{
		font-size: 6.0rem;
	}

	.main_image .catch_area p{
		font-size: 1.5rem;
	}


/*
	.main_image .catch_area .sub_title {
		font-size: 3.5rem;
	}

	.main_image .catch_area .main_title{
		font-size: 7.0rem;
	}

	.main_image .catch_area p{
		font-size: 1.7rem;
	}
*/
}
/*
@media screen and ( max-width: 820px ){

	.main_image .catch_area .sub_title {
		font-size: 3.5rem;
	}

	.main_image .catch_area .main_title{
		font-size: 7.0rem;
	}

	.main_image .catch_area p{
		font-size: 1.7rem;
	}

}
*/
@media screen and ( max-width: 559px ){

	.main_image .catch_area {
		top: 18rem;
		left: 3rem;
		max-width: 85%;
    }

	.main_image .catch_area .sub_title {
		font-size: 2.3rem;
		margin-bottom: 2rem;
	}

	.main_image .catch_area .sub_title span::after {
		bottom: 0.0rem;
		height: 1.0rem
	}

	.main_image .catch_area .main_title{
		font-size: 4.5rem;
		margin-bottom: 2rem;
	}

	.main_image .catch_area p{
		font-size: 1.5rem;
		line-height: 1.8;
	}

}

/*---*/

.claim_bt{
	position: fixed;
	max-width: 24rem;
	right: 12rem;
	bottom: 12rem;
	z-index: 1;
}

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

	.claim_bt{
		display: none;
	}

}

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

	.claim_bt.sp{
		max-width: 100%;
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

}

.claim_bt a{
	display: flex;
	background: #fff;
	border-radius: 2.0rem;
}

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

	.claim_bt.sp {
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 1;
		/* opacity: 0; */
		/* visibility: hidden; */
		/* transform: translateY(20px); */
		/* transition: opacity 0.4s ease, transform 0.4s ease; */
	}

	.claim_bt a{
		display: flex;
		justify-content: center;
		background: #f27b7e;
		border-radius: 0rem;
	}

	.claim_bt a img{
		height: 7rem;
	}

}

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

	.claim_bt a img{
		height: 10rem;
	}

}

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

	.claim_bt a img{
		height: auto;
	}

}


.claim_bt a:hover{
	opacity: 1;
}

.claim_bt a:hover img{
	transition: .5s;
	opacity: 0.6;
}

/*---*/

article .contents{
	padding-top: 15rem;
	padding-bottom: 15rem;
}

article .contents .icon{
	max-width: 5rem;
	margin-bottom: 2rem;
}

article .contents .icon.center {
	margin-left: auto;
	margin-right: auto;
}

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

	article .contents .icon.left{
		margin-left: auto;
		margin-right: auto;
	}

}

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

	article .contents{
		padding-top: 10rem;
		padding-bottom: 10rem;
	}

	article .contents#program{
		margin-top: -10rem;
		padding-top: 10rem;
	}

	article .contents .icon{
		max-width: 4.5rem;
		margin-bottom: 1.5rem;
	}

}

/*---*/

.contents_program{
	display: flex;
	padding-right: 5rem;
	margin-bottom: 9rem;
}

.contents_program .image_area{
	max-width: 90rem;
	min-width: 45rem;
	margin-right: 9rem;
}

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

	.contents_program .image_area{
		max-width: 45rem;
		min-width: 45rem;
	}

}

.contents_program .text_area{
	max-width: 54rem;
}

.contents_program .text_area h2{
	font-size: 6.5rem;
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	margin-bottom: 2rem;
}

.contents_program .text_area h2.word_break{
	word-break: break-all;
}

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

	.contents_program .text_area h2{
		font-size: 4.5rem;
		line-height: 1.2;
		margin-bottom: 1.5rem;
	}

}

.contents_program .text_area h2::first-letter{
	color: #5DBD6E;
}

.contents_program .text_area h3{
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 4rem;
}

.contents_program .text_area p{
	font-size: 2.0rem;
	line-height: 2;
}

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

	.contents_program .text_area p{
		font-size: 1.8rem;
	}

}

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

	.contents_program {
		padding-right: 0;
		flex-wrap: wrap;
	}

	.contents_program .image_area {
		margin-right: 0;
		z-index: -1;
		margin-bottom: 4rem;
		max-width: max-content;
		min-width: unset;
	}

	.contents_program .text_area {
		max-width: unset;
		text-align: center;
		margin-left: 3rem;
		margin-right: 3rem;
	}

	.contents_program .text_area p{
		text-align: left;
	}

}

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

	.contents_program {
		margin-bottom: 4rem;
	}

	.contents_program .text_area h3{
		font-size: 2.0rem;
		margin-bottom: 2rem;
		line-height: 1.6;
	}

	.contents_program .text_area p{
		font-size: 1.6rem;
	}

}

/*---*/

.table_area.program{
	display: flex;
	justify-content: center;
}

.table_area.program ul{
	border: 1rem solid #EEF8F0;
	border-radius: 1rem;
	padding: 3rem;
	max-width: 114rem;
    width: 100%;
	margin-left: 3rem;
	margin-right: 3rem;
	font-size: 2rem;
}

.table_area.program ul li{
	display: flex;
	align-items: center;
	margin-bottom: 2rem;
}

.table_area.program ul li:last-child{
	margin-bottom: 0;
}

.table_area.program ul li .th{
	width: 25%;
	height: auto;
	text-align: center;
	color: #5DBD6E;
	background: #EEF8F0;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 1rem;
	padding: 1.5rem;
	margin-right: 2rem;
	font-weight: bold;
}

.table_area.program ul li:last-child .th {
	height: 20rem;
}

.table_area.program ul li .td{
	width: 72%;
}

.table_area.program ul li .td div{
	display: flex;
}

.table_area.program ul li .td div:first-child{
	display: flex;
	margin-bottom: 1.5rem;
}

.table_area.program ul li .td div span{
	color: #5DBD6E;
}

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

	.table_area.program ul li .th{
		height: auto;
	}

	.table_area.program ul li:last-child .th {
		height: 20rem;
	}

}

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

	.table_area.program ul{
		font-size: 1.6rem;
	}

	.table_area.program ul li {
		flex-wrap: wrap;
	}

	.table_area.program ul li .th {
		width: 100%;
		border-radius: 4rem;
		padding: 0.2rem 1.5rem;
		margin-right: 0;
		margin-bottom: 1rem;
	}

	.table_area.program ul li:last-child .th {
		height: auto;
	}

	.table_area.program ul li .td {
		width: 100%;
	}

}

/*-------------*/

.contents.grants{
	background: #FFF8F8;	
}

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

	.contents.grants {
		z-index: -3;
		position: relative;
	}

}

/*---*/

.contents_program.title{
	max-width: unset;
	justify-content: center;
    padding-right: 0;
}

.contents_program.title .text_area{
	max-width: unset;
	text-align: center;
}

.contents_program.title .text_area h2{
	text-align: center;
}

.contents_program.title .text_area h2::first-letter{
	color: #5DBD6E;
}

.contents_program.title .text_area h3{
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 0;
}

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

	footer#top_page_footer .footer_area .footer_data .logo {
		max-width: 24rem;
	}

	footer#top_page_footer .footer {
		padding-bottom: 6rem;
	}

	.contents_program.title .text_area h3{
		font-size: 2.0rem;
	}

}

/*---*/

.contents_grants{
	display: flex;
	justify-content: end;
	padding-left: 5rem;
	margin-bottom: 9rem;
}

.contents_grants .image_area{
	max-width: 90rem;
	min-width: 45rem;
	margin-left: 9rem;
}

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

	.contents_grants .image_area{
		max-width: 45rem;
		min-width: 45rem;
	}

}

.contents_grants .text_area{
	max-width: 54rem;
}

.contents_grants .text_area .grant{
	font-size: 4rem;
	text-align: center;
	font-weight: bold;
	color: #FA777C;
	padding-bottom: 1rem;
	border-bottom: 1.5rem  solid #FA777C;
}

.contents_grants .text_area hr.line{
	width: 0.2rem;
	height: 5rem;
	background: #FA777C;
	margin: 0 auto;
}

.contents_grants .text_area .cors{
	font-size: 4rem;
	font-weight: bold;
	color: #FA777C;
	border: 0.2rem solid #FA777C;
	text-align: center;
	border-radius: 1.2rem;
	padding: 1rem;
	background: #fff;
	margin-bottom: 4rem;
}

.contents_grants .text_area p{
	font-size: 2.0rem;
	line-height: 2;
}


.contents_grants .text_area p{
	font-size: 2.0rem;
	line-height: 2;
}

.contents.grants .image_area.tablet{
	display: none;
}

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

	.contents_grants .text_area .grant{
		font-size: 3.5rem;
	}

	.contents_grants .text_area .cors {
		font-size: 3.5rem;
	}

	.contents_grants .text_area p{
		font-size: 1.8rem;
		line-height: 2;
	}

}

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

	.contents.grants .image_area.tablet{
		display: block;
		z-index: -1;
		position: relative;
		margin-bottom: 4rem;
		mix-blend-mode: multiply;
	}

	.contents_grants{
		flex-wrap: wrap;
		padding-left: 3rem;
		padding-right: 3rem;
	}

	.contents_grants .text_area {
		max-width: unset;
	}

	.contents_grants .image_area{
		display: none;
	}

}

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

	.contents_grants {
		margin-bottom: 4rem;
	}

	.contents_grants .text_area .grant {
		font-size: 2.5rem;
		border-bottom: 1.0rem solid #FA777C;
	}

	.contents_grants .text_area .cors {
		font-size: 2.5rem;
		margin-bottom: 2rem;
	}

	.contents_grants .text_area p {
		font-size: 1.6rem;
	}

}

/*---*/

.example.grants{
	
}

.example.grants .title{
	display: block;
	width: max-content;
	font-size: 2.5rem;
	text-align: center;
	font-weight: bold;
	margin-bottom: 4rem;
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.example.grants .title::before{
	content: '';
	width: 25rem;
	height: 0.1rem;
	background: #222;
	position: absolute;
	top: 2.3rem;
	left: -28rem;
}

.example.grants .title::after{
	content: '';
	width: 25rem;
	height: 0.1rem;
	background: #222;
	position: absolute;
	top: 2.3rem;
	right: -28rem;
}

.example.grants ul{
	display: flex;
	justify-content: center;
	margin-bottom: 5rem;
}

.example.grants ul li{
	max-width: 34rem;
	margin-left: 2.5rem;
	margin-right: 2.5rem;
}

.example_bottom_text{
	font-size: 2.0rem;
	text-align: center;	
}

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

	.example.grants .title {
		font-size: 1.8rem;
	}

	.example.grants .title::before {
		width: 7rem;
		top: 1.8rem;
		left: -8rem;
	}

	.example.grants .title::after {
		width: 7rem;
		top: 1.8rem;
		right: -8rem;
	}

	.example.grants ul{
		flex-wrap: wrap;
		justify-content: center;
	}

	.example.grants ul li {
		max-width: unset;
		width: 65%;
		margin-bottom: 2rem;
	}

	.example.grants ul li:last-child {
		margin-bottom: 0;
	}

	.example_bottom_text{
		font-size: 1.6rem;
	}

}

/*-------------*/

.contents_form{
	
}

.contents_form .text_area{
	text-align: center;
	margin-bottom: 4rem;
}

.contents_form .text_area a{
	color: #5DBD6E;
	text-decoration: underline;
}

.contents_form .text_area a:hover{
	text-decoration: none;
}

.contact_list{
	max-width: 114rem;
    width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 6rem;
}

.contact_list li{
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.contact_list li:last-child{
	margin-bottom: 0;
}

.contact_list li .th{
	width: 27%;
	background: #F7F7F7;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2.5rem 3rem;
}

.contact_list li .th h4{
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 0;
}

.contact_list li .th small{
	align-items: center;
	color: #FA777C;
	border: 0.1rem solid #FA777C;
	width: 8rem;
	border-radius: 3rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.contact_list li .td{
	width: 72%;
	/* background: #F7F7F7; */
}

.tt_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}

.tt_box input{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50rem;
	height: 13rem;
	border: unset;
	border-radius: 2rem;
	font-size: 4rem;
	font-weight: bold;
	color: #fff;
	background: #FA777C;
	transition: 0.5s;
}

.tt_box input.send-button{
	width: 60%;
	height: 8rem;
	font-size: 2rem;
	margin-bottom: 2rem;
}

.tt_box input.back-button{
	width: 60%;
	height: 8rem;
	font-size: 2rem;
	background: #b0b0b0;
}

.tt_box input:hover{
	opacity: 0.6;
}

.contact_list li{
	display: flex;
}

.contact_list li .th{
	
}

.contact_list li .td{
	border-radius: 1rem;
}

.contact_list li .td input{
	font-size: 2rem;
	background: #f7f7f7;
	padding: 1rem 3rem;
	height: 7.5rem;
	border-radius: 1rem;
	border: none;
}

.contact_list li .td input::placeholder{
	font-weight: normal;
	color: #CBCBCB;
}

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

	.contact_list{
		margin-left: 3rem;
		margin-right: 3rem;
	}

}

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

	.contact_list{
		width: auto;
	}

}

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

	.contact_list{
		width: auto;
	}

	.contact_list li .th h4{
		margin-right: 2rem;
	}

}

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

	.tt_box input {
		width: 100%;
		margin-left: 3rem;
		margin-right: 3rem;
		height: 8rem;
		font-size: 2.5rem;
	}

	.contact_list li .th h4 {
		font-size: 1.6rem;
	}

	.contact_list li .td input {
		font-size: 1.6rem;
		padding: 1rem 2rem;
		height: 5.0rem;
	}

}

/*-------------*/

.contents.overview{
	background: #EEF8F0;
	font-size: 2rem;
}

.table_area.overview{
	max-width: 114rem;
    width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.table_area.overview ul{

}

.table_area.overview ul li{
	display: flex;
	/* justify-content: space-between; */
	/* margin-bottom: 2rem; */
}

.table_area.overview ul li:last-child{
	margin-bottom: 0;
}

.table_area.overview ul li div.th{
	width: 30%;
	text-align: center;
	padding: 1.5rem;
	position: relative;
	color: #5DBD6E;
	font-weight: bold;
}

.table_area.overview ul li div.th::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: -0.10rem;
	width: 100%;
	height: 0.3rem;
	background: #5DBD6E;
}

.table_area.overview ul li div.td{
	width: 70%;
	border-bottom: 0.1rem solid #2B2B2B;
	padding: 1.5rem 4rem;
	position: relative;
}

.contact_list li .th{
	width: 27%;
	background: #F7F7F7;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2.5rem 3rem;
}

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

	.table_area.overview{
		margin-left: 3rem;
		margin-right: 3rem;
		max-width: -webkit-fill-available;
	}

}

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

	.contact_list li .th{
		width: 30%;
	}

	.contact_list li .td{
		width: 69%;
	}

}

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

	.contact_list li{
		flex-wrap: wrap;
		margin-bottom: 4rem;
	}

	.contact_list li .th{
		width: unset;
		background: unset;
		padding: 0;
		margin-bottom: 1rem;
	}

	.contact_list li .td{
		width: 100%;
	}

}

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

	.contents.overview{
		font-size: 1.6rem;
	}

	.table_area.overview ul li div.td {
		padding: 1.5rem 2rem;
	}

}

/*-------------*/

.page_top{
	position: absolute;
	right: 3rem;
	bottom: 3rem;
}

.page_top a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 7rem;
	height: 7rem;
	background: #fff;
	border: 0.1rem solid #5DBD6E;
	border-radius: 50%;
	color: #5DBD6E;
	font-size: 2.6rem;
}

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

	.page_top {
		bottom: 14rem;
	}

}

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

	.page_top {
		bottom: 17rem;
	}

}

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


}

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

	.page_top {
		bottom: 27rem;
	}

}
	
/*-------------*/



/* --- 基本的なスタイル --- */

.menu-container {
	display: flex;
	justify-content: flex-end; /* PCではメニューを右寄せ */
	align-items: center;
	padding: 0;
	position: relative;
	/* background-color: #f8f9fa; */
}

.hamburger-button {
	display: none; /* 通常時は非表示 */
	flex-direction: column;
	justify-content: space-around;
	width: 30px;
	height: 21px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 10; /* メニューより手前に表示 */
}

.hamburger-button:focus {
	outline: none;
}

.bar {
	display: block;
	width: 100%;
	height: 3px;
	background-color: #5DBD6E;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.main-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	font-size: 2.5rem;
	font-weight: bold;
	align-items: center;
}

.main-navigation li {
	margin-right: 10rem;
	color: #2B2B2B;
}

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

	.main-navigation li {
		margin-right: 5rem;
	}

}

.main-navigation li::first-letter {
	margin-left: 0;
	color: #5DBD6E;
}

.main-navigation li:last-child {
	margin-right: 0;
}

.main-navigation li:last-child a {
	color: #fff;
	background: #FA777C;
	width: 30rem;
	height: 8rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main-navigation li:last-child::first-letter {
	color: #fff;
}

.main-navigation a {
	text-decoration: none;
	
}

.main-navigation a::first-letter {
	/* color: #5DBD6E; */
}

/* --- スマートフォン表示 (1400px以下) --- */
@media (max-width: 1400px) {
    .menu-container {
		justify-content: space-between; /* ボタンとメニュー（見えない）を両端に */
		right: 3rem;
	}

	.hamburger-button {
		display: flex; /* スマホ表示で表示 */
	}

	/* ▼▼▼ アニメーションの核となる部分 ▼▼▼ */
	.main-navigation {
		/* 画面外に隠すための設定 */
		position: fixed; /* 画面基準で位置を固定 */
		top: 0;
		right: 0;
		width: 70%; /* 画面幅の70% */
		max-width: 30rem; /* ただし最大幅は280px */
		height: 100vh; /* 画面全体の高さ */
		background-color: rgba(255, 255, 255, .8);
		box-shadow: 2px 0 5px rgba(0,0,0,0.2); /* 影を付けて立体感を出す */

		/* アニメーションの設定 */
		transform: translateX(100%); /* ★初期状態：画面の左外に隠す */
		transition: transform 0.4s ease-in-out; /* ★transformの変化をアニメーションさせる */

		/* メニュー項目のレイアウト */
		display: flex;
		justify-content: center;
		/*align-items: center;*/
		align-items: baseline;
	}

	/* ★メニューが開いた時のスタイル */
	.main-navigation.open {
		transform: translateX(0); /* 画面内にスライドイン */
	}
	/* ▲▲▲ アニメーションの核となる部分 ▲▲▲ */

	.main-navigation ul {
		margin-top: 10rem;
		flex-direction: column;
		width: 100%;
	}

	.main-navigation li {
		margin: 15px 0;
		text-align: center;
	}

	/* --- ↓↓↓ ここからが「×」印のスタイル --- */
	/* メニューが開いている時（.openクラスが付与された時）のスタイル */
	.hamburger-button.open .bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.hamburger-button.open .bar:nth-child(2) {
		opacity: 0;
	}

	.hamburger-button.open .bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

}

@media (max-width: 559px) {

	.main-navigation {
		width: 80%;
		overflow: hidden;
	}

	.main-navigation ul {
		font-size: 2.0rem;
	}

}

/*-------------*/

.contents.bg_pink {
	background-image: url(../img/offjt/dot-pink.png);
	background-repeat: no-repeat;
	background-position: top left 20%;
}

.contents.bg_green {
	background-image: url(../img/offjt/dot-green.png);
	background-repeat: no-repeat;
	background-position: top right 20%;
}

.contents.bg_white {
	background-image: url(../img/offjt/dot-white.png);
	background-repeat: no-repeat;
	background-position: top left 20%;
}

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

	.contents.bg_pink {
		background-position: top 30% left 20%;
	}

	.contents.bg_green {
		background-position: top 30% right 20%;
	}

	.contents.bg_green#request {
		background-position: top 0% right 20%;
	}

	.contents.bg_white {
		background-position: top 30% left 20%;
	}

}

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

	.contents.bg_pink {
		background-position: top 15% left 20%;
		background-size: 120%;
	}

	.contents.bg_green {
		background-position: top 20% right 20%;
		background-size: 120%;
	}

	.contents.bg_green#request {
		background-position: top 0% right 20%;
		background-size: 120%;
	}

	.contents.bg_white {
		background-position: top 30% left 20%;
		background-size: 120%;
	}

}

/*-------------*/

footer#top_page_footer {
	height: 15rem;
}

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

	footer#top_page_footer {
		margin-bottom: 7rem;
	}

}

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

	footer#top_page_footer {
		height: auto;
	}

	footer#top_page_footer {
		margin-bottom: 10rem;
	}

}

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

	footer#top_page_footer {
		margin-bottom: 1rem;
	}

}

/*-------------*/

/* スマートフォン表示のメディアクエリ内に追加してください */
@media (max-width: 1400px) {

	.claim_bt.sp {
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 1;

		/* ▼ 初期状態：透明で少し下に配置 ▼ */
		/* opacity: 0; */
		opacity: 1;
		/* visibility: hidden; */
		/* transform: translateY(20px); */
		/* transform: translateY(0px); */

		/* ▼ アニメーションの設定 ▼ */
		/* transition: opacity 0.4s ease, transform 0.4s ease; */
	}

	/* ▼ 表示状態のスタイル ▼ */
	.claim_bt.sp.is-visible {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

}

/*-------------*/

.thanks_text{
	width: 90%;
	margin: 0 5% 5rem;
	text-align: center;
	font-size: 1.8rem;
	line-height: 2;
}

.page_top_bt{
	display: flex;
	justify-content: center;
	margin-bottom: 10rem;
}

.page_top_bt a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80%;
	max-width: 50rem;
	height: 8rem;
	border: unset;
	border-radius: 2rem;
	font-size: 2rem;
	font-weight: bold;
	color: #fff;
	background: #FA777C;
	transition: 0.5s;
}

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

	.thanks_text{
		width: 90%;
		margin: 0 5% 5rem;
		text-align: left;
		font-size: 1.6rem;
		line-height: 30px;
	}

}

/*-------------*/

.privacy_policy{
	max-width: 114rem;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.privacy_policy .box{
	margin-bottom: 12rem;
}

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

	.privacy_policy{
		width: auto;
		margin-left: 3rem;
		margin-right: 3rem;
	}

}

.privacy_policy .box h4{
	font-size: 2.2rem;
	font-weight: 600;
	margin-bottom: 4rem;
}

.privacy_policy .box .text{
	
}

.privacy_policy .box .list{
	margin-bottom: 10rem;
}

.privacy_policy .box .list > li{
	border-bottom: 0.1rem dotted #ddd;
	padding-bottom: 3rem;
	margin-bottom: 3rem;
}

.privacy_policy .box .list > li h5{
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
}

.privacy_policy .box .list > li p{
	margin-top: 2rem;
	margin-bottom: 0;
}

.privacy_policy .box .list > li ul{
	margin-top: 2rem;
	margin-left: 2rem;
	margin-right: 2rem;
	margin-bottom: 0;
	font-size: 1.5rem;
	line-height: 2;
}

.privacy_policy .box .list > li ul li{
	display: flex;
	margin-bottom: 0.5rem;
}

.privacy_policy .box .list > li ul li:last-child{
	margin-bottom: 0rem;
}

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

	.privacy_policy .box h4{
		margin-bottom: 2rem;
	}


	.privacy_policy .box .text{
		font-size: 1.5rem;
	}

	.privacy_policy .box .list > li p{
		font-size: 1.5rem;
	}

	.privacy_policy .box .list > li ul{
		font-size: 1.4rem;
		line-height: 1.8;
	}

}

/*---*/

.policy_data{
	max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
	padding: 3rem 3rem;
	background: #F7F7F7;
	border-radius: 1rem;
}

.policy_data .inside{
	
}

.policy_data .inside p{
	
}

.policy_data .inside div{
	
}

.policy_data .inside a{
	
}

.policy_data .inside a{
	/* text-decoration: underline; */
}

.policy_data .inside a:hover{
	text-decoration: none;
}

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

	.policy_data{
		font-size: 1.5rem;
	}

}