@charset "utf-8";

/* CSS Document */
@media all{
	
	#firstview{
		width: 100%;
		padding: 200px 0 0;
		text-align: center;
	}
	#firstview h1{
		font-size: 2.93rem;
	}
	#firstview .subtitle{
		font-size: 1.2rem;
		padding-bottom: 130px;
	}
	
	#contents{
		padding: 100px 20px 160px;
	}
	#contents .attention{
		color: #515151;
		line-height: 1.7;
		text-align: center;
		margin-bottom: 140px;
	}
	#contents .text{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto 1.5em;
	}
	#contents .text .hissu{
		display: inline-block;
		font-size: 0.8rem;
		padding: 0.5em 1em;
		background: #852020;
		color: #fff;
		border-radius: 2em;
		margin-right: 1em;
	}
	#mfbox{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
	}
	#mfbox dl{
		display: flex;
		flex-wrap: wrap;
	}
	#mfbox dl dt{
		width: 346px;
		padding: 15px 2em;
		color: #050807;
		border-bottom: solid 1px #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#mfbox dl dt .hissu{
		display: inline-block;
		padding: 0.5em 1em;
		background: #852020;
		color: #fff;
		border-radius: 2em;
	}
	#mfbox dl dd{
		width: calc(100% - 346px);
		padding: 15px 5em 15px 3em;
		color: #050807;
		border-bottom: solid 1px #B5B5B5;
	}
	#mfbox dl dd ol li span{
		display: block;
	}
	#mfbox dl dd.reply{
		display: flex;
		padding: 30px 3em;
	}
	#mfbox dl dd.reply label{
		display: flex;
		align-items: center;
		margin-right: 80px;
	}
	#mfbox .consent{
		width: 30em;
		margin: 60px auto 100px;
		color: #050807;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	#mfbox .consent .hissu{
		display: inline-block;
		padding: 0.5em 1em;
		background: #852020;
		color: #fff;
		border-radius: 2em;
		margin-right: 2em;
	}
	#mfbox .consent .underline{
		border-bottom: solid 1px rgba(5,8,7,1);
		transform: translateY(1px);
	}
	#mfbox .consent .underline:hover{
		border-bottom: solid 1px rgba(5,8,7,0);
	}
	/* 元のチェックボックスを隠す */
	#mfbox input[type="checkbox"] {
		display: none;
	}
	/* 新しいチェックボックスの土台 */
	#mfbox .checkbox-mark {
		width: 23px;
		height: 23px;
		border: 1px solid #333;
		background-color: #fff;
		display: inline-block;
		position: relative;
		margin-right: 8px;
		vertical-align: middle;
	}
	/* チェックされた時の背景色 */
	#mfbox input[type="checkbox"]:checked ~ .checkbox-mark {
		background-color: #050807;
	}
	/* チェックマーク（疑似要素） */
	#mfbox .checkbox-mark::after {
		content: '';
		position: absolute;
		display: none;
		/* チェックの形を作成 */
		left: 6px;
		top: 2px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
	}
	/* チェックされた時にマークを表示 */
	#mfbox input[type="checkbox"]:checked ~ .checkbox-mark::after {
		display: block;
	}
	#mfbox button.internal_links{
		background-color: transparent;
		border-width: 0 0 1px 0;
		cursor: pointer;
		outline: none;
		padding: 0;
		appearance: none;
		width: 183px;
		font-size: 1rem;
	}
	#mfbox button.internal_links img{
		width: 50px;
	}

	#contact div#mfp_phase_confirm h4{
		font-size: 2rem;
		margin-bottom: 1.5em;
	}
	#contact table#mfp_confirm_table{
		max-width: 1200px;
		margin: 0 auto 80px;
	}
	#contact table#mfp_confirm_table th,
	#contact table#mfp_confirm_table td{
		padding: 30px;
	}
	#contact table#mfp_confirm_table th{
		width: 346px;
		border-bottom: solid 1px #333;
	}
	#contact table#mfp_confirm_table td{
		width: calc(100% - 346px);
		border-bottom: solid 1px #b5b5b5;
	}
	#contact div.mfp_buttons button#mfp_button_send,
	#contact div.mfp_buttons button#mfp_button_cancel{
		background-color: transparent;
		cursor: pointer;
		outline: none;
		appearance: none;
		width: 183px;
		text-align: left;
		display: block;
		width: 183px;
		margin: 0 auto 1em;
		height: 37px;
		padding: 0 0 0.8em 0;
		color: #050807;
		position: relative;
		border: solid #B5B5B5;
		border-width: 0 0 1px 0;
		letter-spacing: .1em;
	}
	#contact div.mfp_buttons button#mfp_button_send::before,
	#contact div.mfp_buttons button#mfp_button_cancel::before{
		position: absolute;
		content: "";
		top: 0;
		right: 0;
		width: 40px;
		height: 21px;
		background: url("/common/images/icon_arrow_wht_double.webp") no-repeat rgba(5,8,7,1);
		background-size: 80px 7px;
		background-position: -40px center;
		border-radius: 10px;
		overflow: hidden;
		transition: .5s;
	}
	#contact div.mfp_buttons button#mfp_button_send:hover::before,
	#contact div.mfp_buttons button#mfp_button_cancel:hover::before{
		background-position: 0 center;
	}
	#contact div.mfp_buttons button#mfp_button_send::after,
	#contact div.mfp_buttons button#mfp_button_cancel::after{
		position: absolute;
		content: "";
		bottom: 0;
		left: 0;
		width: 0;
		height: 1px;
		border-bottom: solid 1px #050807;
		transition: .7s;
	}
	#contact div.mfp_buttons button#mfp_button_send:hover::after,
	#contact div.mfp_buttons button#mfp_button_cancel:hover::after{
		width: 100%;
	}
	
	#thanksarea{
		padding: 120px 20px;
		text-align: center;
	}
	#thanksarea .title{
		font-size: 1.86rem;
		margin-bottom: 40px;
	}
	#thanksarea .thanks{
		font-size: 1.46rem;
		margin-bottom: 40px;
	}
	#thanksarea .text{
		line-height: 1.7;
		margin-bottom: 80px;
	}
	#thanksarea .internal_links img{
		width: 100px;
	}
	
}

@media (max-width: 1024px){

	#contents{
		padding: 60px 20px 100px;
	}
	#contents .attention{
		margin-bottom: 80px;
	}
	
}

@media (max-width: 767px){

	#mfbox dl dt{
		width: 100%;
	}
	#mfbox dl dd{
		width: 100%;
		padding: 15px 1em 15px 1em;
		margin-bottom: 25px;
	}
	#contact table#mfp_confirm_table tr{
		display: flex;
		flex-direction: column;
	}
	#contact table#mfp_confirm_table th{
		width: 100%;
		padding: 15px 30px;
	}
	#contact table#mfp_confirm_table td{
		width: 100%;
		padding: 15px 30px;
		margin-bottom: 25px;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1024px){
	
	#mfbox dl dt{
		width: 250px;
	}
	#mfbox dl dd{
		width: calc(100% - 250px);
		padding: 15px 3em 15px 3em;
	}
	#contact table#mfp_confirm_table th{
		width: 250px;
	}
	#contact table#mfp_confirm_table td{
		width: calc(100% - 250px);
	}
	
}

@media screen and (min-width: 1025px){
	
	#thanksarea .text a{
		pointer-events: none;
		cursor: default;
	}
	
}