@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

@charset "UTF-8";
html {
	font-size: clamp(16px, 1vw + 0.5rem, 18px);
	overflow: scroll;
	overflow: -moz-scrollbars-vertical;
	overflow-x: scroll;
}
body {
	font-family: YakuHanJP, 'Noto Sans JP', sans-serif;
	-webkit-text-size-adjust: 100%;
	position: relative;
	text-align: center;
	line-height: 1.8;
	font-feature-settings: "palt";
}

html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address, ul, ol, li, dl, dt, dd,
table, th, td, form,
section, nav, article, aside,
header, footer, figure, figcaption {
	margin: 0;
	padding: 0;
	color: #000;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img { border: 0;}
ul { list-style: none}


/*lp*/
.container-fluid {
	position: relative;
	margin: 0 auto;
	padding: 0;
}
.container {
	position: relative;
	margin: 0 auto;
  width: 1100px;
}
@media screen and (max-width: 1024px) {
.container {
	width: 100%;
	padding: 0 15px;
}
}

/*pc-sp*/
.sp {display: none;}
@media screen and (max-width: 544px) {
.pc {display: none;}
.sp {display: inherit;}
}


/*main_section*/
main section {
	padding-bottom: 90px;
}
@media screen and (max-width: 767px) {
	main section {
		padding-bottom: 50px;
	}
}

/*element*/
h1 {
	line-height: 0;
}
h1 img {
	width: 100%;
}
h2.ttl {
	background-image: repeating-linear-gradient(318deg, #38b0aa, #38b0aa 3px, #47b5ac 3px, #47b5ac 6px);
	padding: 50px;
	font-size: clamp(1.8rem, 3.3vw, 2.5rem);
	color: #FFF;
	text-shadow: -1px 2px 0px rgba(0, 0, 0, 0.4);
	margin-bottom: 70px;
}
@media screen and (max-width: 767px) {
	h2.ttl {
		padding: 25px;
		margin-bottom: 40px;
		line-height: 1.4;
	}
}

/*custom*/
#summary p {
	font-size: clamp(1.05rem, 1vw + 0.5rem, 1.3rem);
	line-height: 1.9;
	font-weight: 400;
	text-align: left;
}
#summary p strong {
	font-weight: 800;
}

#flow {
	background: #F6EBDE;
}
#flow h3 {
	background: #FFF;
	border: solid 4px #38AFA9;
	border-radius: 10px;
	padding: 18px 20px;
	font-size: clamp(1.05rem, 1vw + 0.5rem, 1.3rem);
	line-height: 1.5;
	text-align: left;
	text-indent: -4.0em;
	padding-left: calc(4.0em + 20px);
	margin-bottom: 30px;
}
#flow h3 span {
	color: #2B938C;
	padding-right: 10px;
}
#flow .arrow {
	margin-bottom: 30px;
}
#flow ul {
	display: flex;
	flex-wrap: wrap;
	margin-right: -25px;
}
#flow ul li {
	width: calc((100% - 50px) / 3);
	margin-right: 25px;
}
#flow ul li:nth-child(3) {
	margin-right: 0;
}
#flow dl dt {
	text-align: center;
	z-index: 1;
}
#flow dl dt img {
	margin-right: 25px;
}
#flow dl dd.flow_fig {
	background-color: #ffffff;
	border-radius: 10px;
	padding: 5px;
	margin-top: -40px;
	margin-bottom: 15px;
	text-align: center;
}
#flow dl dd.flow_fig img {
	width: 100%;
}
#flow dl dd.caption {
	font-size: 1.0rem;
	padding-right: 20px;
	margin-bottom: 30px;
}
#flow dl dd.caption strong {
	display: inline-block;
	margin: 0 3px;
	background-color: #FF0000;
	padding: 0 3px;
	color: #FFF;
}
@media screen and (max-width: 767px) {
	#flow h3 {
		text-indent: 0;
		padding: 10px;
	}
	#flow h3 span {
		display: block;
	}
	#flow .arrow2 img {
		width: 18%;
	}
	#flow ul {
		margin-right: 0;
	}
	#flow ul li {
		width: 100%;
		margin-right: 0;
	}
	#flow dl::after {
		display: block;
		content: url('../images/flow_arrow01.svg');
		margin: 0 auto 10px auto;
		text-align: center;
	}
	#flow ul li:nth-child(3) dl::after,
	#flow ul li.step4 dl::after {
		display: none;
	}
	#flow dl dt img {
		margin-right: 0;
	}
	/*#flow dl dd.flow_fig {
		margin-bottom: 35px;
	}*/
	#flow dl dd.flow_fig img {
		width: 60%;
	}
	#flow dl dd.caption {
		padding-right: 0;
	}
}

#flow ul li.step4 {
	width: 100%;
}
#flow ul li.step4 dl dd.flow_fig {
	padding: 50px 50px 30px 50px;
	margin-right: 0;
	display: flex;
	flex-wrap: wrap;
}
#flow ul li.step4 dl dd .txt {
	width: 60%;
	text-align: left;
}
#flow ul li.step4 dl dd figure {
	width: 40%;
	text-align: center;
}
#flow ul li.step4 dl dd.flow_fig img {
	width: 60%;
}
#flow ul li.step4 dl dd p {
	font-size: 1.1rem;
}
#flow ul li.step4 dl dd p strong {
	font-size: 1.5rem;
	background-image: linear-gradient(0deg, #F6FC86 0.5em, transparent 0.5em);
}
#flow ul li.step4 dl dd p.memo {
	font-size: 0.9rem;
	margin-top: 20px;
	text-indent: -2.5em;
	margin-left: 2.5em;
}
@media screen and (max-width: 767px) {
	#flow ul li.step4 dl dd.flow_fig {
		padding: 50px 20px 20px 20px;
	}
	#flow ul li.step4 dl dd .txt {
		width: 100%;
	}
	#flow ul li.step4 dl dd figure {
		width: 100%;
	}
}

.bubble {
	position: relative;
  margin-right: 25px;
}
.bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 22.5px 0 22.5px 25px;
  border-color: transparent transparent transparent #ffffff;
  translate: 100% -50%;
}
@media screen and (max-width: 767px) {
	.bubble {
		margin-right: 0;
	}
	.bubble::after {
	  display: none;
	}
}


#apply {
	background: #D4F6F4;
}
#apply h3 {
	font-size: clamp(1.3rem, 1vw + 0.5rem, 1.6rem);
	margin-bottom: 30px;
}
#apply .apply_list {
	background-color: #FFF;
	border-radius: 10px;
	padding: 30px 40px;
	text-align: left;
}
#apply .apply_list ul li {
	font-size: clamp(1.0rem, 1vw + 0.5rem, 1.3rem);
	text-indent: -24px;
	margin-left: 24px;
	margin-bottom: 20px;
}
#apply .apply_list ul li:before {
	display: inline-block;
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background-color: #56AF6B;
	margin-right: 8px;
}
#apply .apply_list p {
	font-size: 1rem;
}
@media screen and (max-width: 767px) {
	#apply .apply_list {
		padding: 20px;
	}
}



#introduce {
	padding: 60px 0;
}
#introduce p {
	font-size: clamp(1.8rem, 1vw + 0.5rem, 2.0rem);
	font-weight: 600;
	text-shadow: -1px 2px 0px rgba(0, 0, 0, 0.4);
}
#introduce p a {
	display: inline-block;
	padding: 20px 5em;
	border-radius: 80px;
	color: #FFF;
	border: solid 7px #FFF;
	box-shadow: 0px 8px 0px 0px rgba(119, 24, 24, 0.4);

	background-color: #F63838;
  transition: all  0.2s ease-out;
}
#introduce p a:hover {
	box-shadow: 0px 0px 0px 0px rgba(119, 24, 24, 0.4);
	transform: translateY(8px);
}
@media screen and (max-width: 767px) {
	#introduce p a {
		width: 100%;
		padding: 20px;
		border-radius: 50px;
		border: solid 3px #FFF;
	}
}


#notice {
	background-color: #FFF7F2;
	padding-top: 60px;
}
#notice h2 {
	background-image: repeating-linear-gradient(318deg, #ad9173, #ad9173 3px, #b2977f 3px, #b2977f 6px);
	padding: 20px;
	font-size: 1.6rem;
	color: #FFF;
	text-shadow: -1px 2px 0px rgba(0, 0, 0, 0.4);
	border-radius: 15px 15px 0 0;
}
#notice ul {
	background-color: #FFF;
	border-radius: 0 0 15px 15px;
	padding: 50px;
}
#notice ul > li {
	margin-bottom: 30px;
	text-indent: -20px;
	margin-left: 20px;
	font-size: clamp(0.8rem, 1vw + 0.5rem, 1.0rem);
	font-weight: 300;
}
#notice ul > li:before {
	display: inline-block;
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 8px;
	background-color: #666666;
	margin-right: 5px;
}
#notice ol {
	margin-top: 15px;
	margin-left: 20px;
	list-style: decimal;
}
#notice ol li {
	text-indent: 0;
	margin-left: 0;
}
@media screen and (max-width: 767px) {
	#notice ul {
		padding: 20px;
	}
	#notice ul > li {
		margin-bottom: 20px;
	}
	#notice ul > li:before {
		width: 12px;
		height: 12px;
		border-radius: 6px;
	}
}

#banner {
	position: fixed;
	bottom: 0;
	z-index: 1;
	width: 100%;
	padding: 15px 10px 20px 10px;
	background-color: #fff;
	box-sizing: border-box;
}
#banner p {
	font-size: clamp(1.3rem, 1vw + 0.5rem, 2.0rem);
	font-weight: 600;
	text-shadow: -1px 2px 0px rgba(0, 0, 0, 0.4);
}
#banner p a {
	display: inline-block;
	padding: 10px 8em;
	border-radius: 80px;
	color: #FFF;
	border: solid 5px #FFF;
	box-shadow: 0px 8px 0px 0px rgba(119, 24, 24, 0.4);

	background-color: #F63838;
	transition: all  0.2s ease-out;
}
#banner p a:hover {
	box-shadow: 0px 0px 0px 0px rgba(119, 24, 24, 0.4);
	transform: translateY(8px);
}
@media screen and (max-width: 767px) {
	#banner p a {
		width: 100%;
		padding: 0.3em;
		border-radius: 50px;
		border: solid 3px #FFF;
	}
}

.core-site-footer {
    margin-top: 0;
    border: none;
    margin-bottom: 150px;
}
@media screen and (max-width: 767px) {
	.core-site-footer {
	    margin-bottom: 100px;
	}
}