@charset "utf-8";

/* ============================================================================
	BASE, COMMON
============================================================================ */

/* pageThemeHeaderWrap
---------------------------------------------------- */
	.pageThemeHeaderWrap {
		width: 94%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 50px 0;
	}
	.pageThemeHeader {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 94%;
		max-width: 1000px;
		background: url("../img/index/ico_brackets_01_lt.svg") left top / 71px auto no-repeat,
					url("../img/index/ico_brackets_01_rb.svg") right bottom / 71px auto no-repeat;
		margin: 0 auto;
		padding: 35px 4%;
	}
@media screen and (max-width: 736px) { /*{SP}*/
	.pageThemeHeader {
		background-size: 10% auto;
		padding: 20px 4%;
	}
}
@media screen and (max-width: 480px) { /*{SPs}*/
	.pageThemeHeaderWrap {
		padding: 25px 0;
	}
	.pageThemeHeader {
		background-size: 14% auto;
	}
}

/* requestBox
---------------------------------------------------- */
	.requestBox {
		width: 100%;
		text-align: center;
		margin: 0 auto;
	}
	.requestBtnBox a {
		display: block;
		position: relative;
		line-height: 1.3em;
		overflow: hidden;
		color: #fff;
		font-family: 'Noto Serif JP', '游明朝', 'Yu Mincho', serif;
		font-size: 2.2rem;
		text-align: center;
		background: linear-gradient(to bottom, #ad1a27 0%, #8c0012 100%);
		margin: 0 auto;
		padding: 1em 35px;
		border-radius: 8px;
		box-shadow: 0 2px 0 0 #4f0912;
	}
	.requestBtnBox a::before { /* ON背景 */
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, #ef2f40 0%, #b70018 100%);
		opacity: 0;
		transition: opacity 0.2s ease-out;
	}
	.requestBtnBox a:hover::before {
		opacity: 1;
	}
	.requestBtnBox a::after { /* 矢印 */
		content: "";
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 19px;
		left: auto;
		z-index: 1;
		width: 0;
		height: 0;
		margin: auto;
		border-style: solid;
		border-width: 9px 0 9px 8px;
		border-color: transparent transparent transparent #ffffff;
		transition: transform 0.2s ease-out;
	}
	.requestBtnBox a:hover::after {
		transform: translateX(35%);
	}
	.requestBtnBox a strong {
		position: relative;
		z-index: 1;
	}
	.requestBtnBox small {
		display: inline-block;
		line-height: 1.4;
		color: #be3a36;
		font-size: 0.8125em;
		text-align: justify;
		text-justify: inter-ideograph; /* for IE */
		text-indent: -1em;
		letter-spacing: 0.05em;
		margin: 20px 0 0;
		padding: 0 3% 0 calc(1em + 3%);
	}
@media screen and (max-width: 736px) { /*{SP}*/
	.requestBtnBox a {
		font-size: 2rem;
	}
	.requestBtnBox small {
		font-size: 1.95vw;
		letter-spacing: 0.03em;
	}
}
@media screen and (max-width: 600px) { /*{MinorBreakpoint}*/
	.requestBtnBox small {
		font-size: 0.815em;
		letter-spacing: 0;
	}
}
@media screen and (max-width: 480px) { /*{SPs}*/
	.requestBtnBox a {
		font-size: 1.8rem;
		padding: 1em 28px;
	}
	.requestBtnBox a::after {
		right: 15px;
		border-width: 8px 0 8px 7px;
	}
	.requestBtnBox small {
		margin: 15px 0 0;
	}
}
@media screen and (max-width: 400px) { /*{MinorBreakpoint}*/
	.requestBtnBox a {
		font-size: 4.85vw;
		padding: 1em 7.2vw 1em 5.7vw;
	}
	.requestBtnBox a::after {
		right: 3.5vw;
		border-width: 2.1vw 0 2.1vw 1.8vw;
	}
	.requestBtnBox small {
		font-size: 0.8125em;
	}
}





/* ============================================================================
	PAGE
============================================================================ */

/* firstContentsWrap
------------------------------------------------------------------------ */
/* mainVisualWrap
---------------------------------------------------- */
	.mainVisualWrap {
		background: url("../img/index/main_bg_01.jpg") center center / cover no-repeat;
	}
	.mainVisualWrap .mainVisualBox {
		width: 100%;
		margin: 0 auto;
	}
	.mainVisualWrap .mainVisualBox h1 {
		flex-wrap: nowrap;
		justify-content: center;
		position: relative;
	}
	.mainVisualWrap .mainVisualBox h1 > * {
		display: block;
	}
	.mainVisualWrap .mainVisualBox h1 > * img {
		width: 100%;
		max-width: none;
	}
@media screen and (max-width: 736px) { /*{SP}*/
	.mainVisualWrap .mainVisualBox h1 .ttl {
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* first_applicationWrap
---------------------------------------------------- */
/* allianceFPBox
--------------------------------- */
	.first_applicationWrap .allianceFPBox {
		color: #fff;
		line-height: 1.35;
		font-size: 1.1875em;
		text-align: center;
		background: linear-gradient(to right, #a7850a 0%, #c4a122 25%, #c4a122 75%, #a7850a 100%);
		padding: 0.6em;
	}
@media screen and (max-width: 736px) { /*{SP}*/
	.first_applicationWrap .allianceFPBox {
		font-size: 4.2vw;
		letter-spacing: 0.02em;
		padding: 0.5em;
	}
}
/* requestBox
--------------------------------- */
	.first_applicationWrap .requestBox {
		max-width: 1200px;
	}
	.first_applicationWrap .requestBtnBox {
		padding: 40px 0;
	}
	.first_applicationWrap .requestBtnBox a {
		width: 93.75%;
		max-width: 550px;
	}
@media screen and (max-width: 736px) { /*{SP}*/
	.first_applicationWrap .requestBtnBox a {
		max-width: none;
		font-size: 4.3vw;
	}
}
@media screen and (max-width: 480px) { /*{SPs}*/
	.first_applicationWrap .requestBtnBox {
		padding: 20px 0;
	}
	.first_applicationWrap .requestBtnBox a {
		font-size: 4.8vw;
	}
}
@media screen and (max-width: 400px) { /*{MinorBreakpoint}*/
	.first_applicationWrap .requestBtnBox {
		padding: 15px 0;
	}
}



/* pt-fpConsult
------------------------------------------------------------------------ */
	.pt-fpConsult {
		background: linear-gradient(to bottom, #fff 50px, #f7f7f7 50px, #f7f7f7 100%);
		padding-bottom: 50px;
	}
@media screen and (max-width: 480px) { /*{SPs}*/
	.pt-fpConsult {
		background: linear-gradient(to bottom, #fff 25px, #f7f7f7 25px, #f7f7f7 100%);
		padding-bottom: 25px;
	}
}
/* pageThemeHeaderWrap
---------------------------------------------------- */
	.pt-fpConsult .pageThemeHeaderWrap {
		background: #f7f7f7;
	}
	.pt-fpConsult .pageThemeHeader + .sizeSentensMaxWidth {
		font-size: 1.125em;
		text-align: center;
		margin-top: 20px;
	}
@media screen and (max-width: 480px) { /*{SPs}*/
	.pt-fpConsult .pageThemeHeader + .sizeSentensMaxWidth {
		font-size: 1.0625em;
		letter-spacing: 0.02em;
		margin-top: 15px;
	}
}
@media screen and (max-width: 340px) { /*{MinorBreakpoint}*/
	.pt-fpConsult .pageThemeHeader + .sizeSentensMaxWidth {
		font-size: 4.5vw;
	}
}
/* container, header, contbox
---------------------------------------------------- */
	.pt-fpConsult .container {
		background: #fff;
		box-shadow: 0 0 2px 1px rgba(11,4,6,0.002), 0 1px 4px 0 rgba(11,4,6,0.01);
	}
	
	.consultListWrap .txt{
		text-align: center;
		margin-bottom: 2em;
	}
	
/* contbox questionsList
--------------------------------- */
.contbox.questionsList{
	background-color: #F5F7F9;
	padding: 3rem;
	margin-top: 1rem; 
}

.contbox.questionsList:nth-of-type(2){
	background-color: #FDFBF5;
	padding: 3rem;
}

.contbox.questionsList h4{
	font-size: 2.3rem;
	border-bottom: solid 1px #333333;
	padding-bottom: .5em;
	margin-bottom: 1em;
}

.contbox.questionsList .grid-box{
	display: grid;
	grid-template-columns: 1fr .7fr;
	gap: 2em;
}

.contbox.questionsList .grid-box:nth-of-type(2){
	margin-top: 2em;
	border-top: 1px dotted #ABACAE;
	padding-top: 2em;
	grid-template-columns: .7fr 1fr ;
}

.contbox.questionsList .grid-box:nth-of-type(2) .l-wrapper{
	order: 2;
}

.contbox.questionsList .grid-box:nth-of-type(2) > figure{ 
	order: 1;
}

.contbox.questionsList .grid-box .questionsLis-word{
	display: grid;
	grid-template-columns: .1fr 1fr;
	gap: 1em;
}

.contbox.questionsList .grid-box .questionsLis-word:nth-of-type(2){
	margin-top: 1.5em;
}

@media screen and (max-width: 736px) { /*{SP}*/
	.contbox.questionsList .grid-box{
		grid-template-columns: 1fr;
	}
	
	.contbox.questionsList .grid-box:nth-of-type(2){
		grid-template-columns: 1fr ;
	}
	
	.contbox.questionsList .grid-box:nth-of-type(2) .l-wrapper{
		order: 1;
	}
	
	.contbox.questionsList .grid-box:nth-of-type(2) > figure{ 
		order: 2;
	}
}
	
/* customerVoiceWrap
--------------------------------- */
.customerVoiceWrap ul li{
	display: grid;
	grid-template-columns: 20px auto;
	gap: 1em;
}

.customerVoiceWrap ul li:not(:first-child){
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: dotted 1px #ABACAE;
}

.customerVoiceWrap .voice-more{
	text-align: right;
	margin-top: 2rem;
}


/* pt-howToApply
------------------------------------------------------------------------ */
	.pt-howToApply {
		background: linear-gradient(to bottom, #f7f7f7 50px, #fdfaef 50px, #fdfaef 100%);
		padding-bottom: 50px;
	}
@media screen and (max-width: 480px) { /*{SPs}*/
	.pt-howToApply {
		background: linear-gradient(to bottom, #f7f7f7 25px, #fdfaef 25px, #fdfaef 100%);
		padding-bottom: 25px;
	}
}
/* pageThemeHeaderWrap
---------------------------------------------------- */
	.pt-howToApply .pageThemeHeaderWrap {
		background: #fdfaef;
	}
	.pt-howToApply .pageThemeHeader + .sizeSentensMaxWidth {
		font-size: 1.125em;
		text-align: center;
		margin-top: 20px;
	}
@media screen and (max-width: 480px) { /*{SPs}*/
	.pt-howToApply .pageThemeHeader + .sizeSentensMaxWidth {
		font-size: 0.893em;
		letter-spacing: 0.02em;
		margin-top: 15px;
	}
}
/* container, header, contbox
---------------------------------------------------- */
	.pt-howToApply .container {
		max-width: 1000px;
	}


/* applicationWrap
--------------------------------- */
	.applicationWrap {
		position: relative;
		background: #fff;
		padding: 4px 0;
	}
	.applicationWrap::before,
	.applicationWrap::after {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 4px;
		background: linear-gradient(to right, #ca9828 7%, #f8ef94 50%, #ca9828 93%);
	}
	.applicationWrap::before {	top: 0;}
	.applicationWrap::after {	bottom: 0;}
	
	.applicationWrap > .contbox {
		width: 100%;
		padding-left: 3%;
		padding-right: 3%;
	}
/* applicationForm
----------------------- */
	.applicationForm .leadTxtBox {
		line-height: 2;
		font-size: 1.125em;
		text-align: center;
		padding: 45px 0 0;
	}
	.applicationForm .requestBox {
		max-width: 940px;
	}
	.applicationForm .requestBtnBox {
		padding: 45px 0;
	}
	.applicationForm .requestBtnBox a {
		width: 100%;
		max-width: 550px;
	}
@media screen and (max-width: 480px) { /*{SPs}*/
	.applicationForm .leadTxtBox {
		font-size: 1em;
		padding: 30px 0 0;
	}
	.applicationForm .requestBtnBox {
		padding: 30px 0;
	}
}
@media screen and (max-width: 320px) { /*{SPss}*/
	.applicationForm .requestBtnBox {
		padding: 20px 0;
	}
}
/* applicationTel
----------------------- */
	.applicationTel {
		padding-top: 25px;
		padding-bottom: 25px;
		border-top: 1px solid #eee8d3;
	}
	.applicationTel hr {
		display: none;
	}
	.applicationTel .contactTelBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-end;
		line-height: 1;
		font-size: 1.125em;
	}
	.applicationTel .contactTelBox .txt,
	.applicationTel .contactTelBox .telBox {
		margin: 3px 8px 7px;
	}
	.applicationTel .contactTelBox .telBox {
		color: #be3a36;
		font-size: 1.2em;
		white-space: nowrap;
		border-bottom: 1px solid transparent;
		transition: color 0.15s ease-out, border 0.15s ease-out;
	}
	.applicationTel .contactTelBox .telBox .value {
		font-size: 1.25em;
	}
	.applicationTel .contactTelBox .telBox:hover {
		color: #f25954;
		border-bottom: 1px solid #f25954;
	}
@media screen and (max-width: 736px) { /*{SP}*/
	.applicationTel .contactTelBox {
		font-size: 1.25em;
	}
}
@media screen and (max-width: 340px) { /*{MinorBreakpoint}*/
	.applicationTel .contactTelBox {
		font-size: 5vw;
	}
}


/* pointsToCheckWrap
--------------------------------- */
	.pointsToCheckWrap {
		border: 2px solid #00479d;
	}
	.pointsToCheckWrap > * {
		width: 92%;
		max-width: 920px;
	}
	.pointsToCheckWrap .ptHeading {
		color: #00479d;
		font-size: 1.6rem;
		font-family: inherit;
	}
	.pointsToCheckWrap .checkListBox {
		font-size: 1.3rem;
		letter-spacing: 0.02em;
	}
	.pointsToCheckWrap .checkListBox ol > li {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		margin-top: 0.5em;
	}
	.pointsToCheckWrap .checkListBox ol > li::before {
		content: "";
		display: block;
		width: 1.2em;
	}
	.pointsToCheckWrap .checkListBox ol > li:nth-of-type(1)::before {content: "①";}
	.pointsToCheckWrap .checkListBox ol > li:nth-of-type(2)::before {content: "②";}
	.pointsToCheckWrap .checkListBox ol > li:nth-of-type(3)::before {content: "③";}
	
	.pointsToCheckWrap .checkListBox ol > li > div {
		display: block;
		width: calc(100% - 1.2em - 0.2em);
	}
	.pointsToCheckWrap .checkListBox ol ul {
		display: flex;
		flex-wrap: wrap;
		margin-top: 0.25em;
	}
	.pointsToCheckWrap .checkListBox ol ul li {
		line-height: 1.5;
		letter-spacing: 0;
		margin-top: 0.25em;
	}
	.pointsToCheckWrap .checkListBox ol ul li:not(:last-child) {
		margin-right: 1.4em;
	}
	.pointsToCheckWrap .checkListBox ol ul li .name {
		margin-right: 0.4em;
	}
	.pointsToCheckWrap .checkListBox ol ul li a {
		display: inline-block;
		color:#00479d;
	}
	.pointsToCheckWrap .checkListBox ol ul li a:hover {
		text-decoration: underline;
	}
@media screen and (max-width: 550px) { /*{MinorBreakpoint}*/
	.pointsToCheckWrap .checkListBox ol ul li a {
		display: block;
	}
}
@media screen and (max-width: 480px) { /*{SPs}*/
	.pointsToCheckWrap .ptHeading {
		font-size: 1.44rem;
	}
	.pointsToCheckWrap .checkListBox {
		line-height: 1.5;
		font-size: 1.2rem;
	}
}
@media screen and (max-width: 340px) { /*{MinorBreakpoint}*/
	.pointsToCheckWrap .checkListBox {
		font-size: 3.775vw;
		letter-spacing: 0;
		text-align: justify;
	}
}





/* ============================================================================
// js_showTarget
// ----------------------------------------------------------------------------
// [Alteration]	2019.11.26
// ----------------------------------------------------------------------------
// *	人力inview
// *	JSと連動します。JSでクラスの付け外しをします。
============================================================================ */
@media screen {
	/* requestBox
	--------------------------------- */
	.requestBox .js_showTarget.targetInitial {
		opacity: 0.05;
		transform: translateX(-3%);
		transition: all 0s;
	}
	.requestBox .js_showTarget {
		opacity: 1;
		transform: translateX(0);
		transition: opacity 1s 0s ease-out, transform 0.5s 0s ease-out;
	}
	/* container
	--------------------------------- */
	.container.js_showTarget.targetInitial {
		opacity: 0.05;
		transform: translateY(40px);
		transition: all 0s;
	}
	.container.js_showTarget {
		opacity: 1;
		transform: translateY(0);
		transition: opacity 1s 0s ease-out, transform 0.7s 0.1s ease-out;
	}
}