@charset "utf-8";

:root{
	--gradient: linear-gradient(90deg,rgba(242, 105, 99, 1) 0%, rgba(255, 177, 119, 1) 100%);
	--gradient-re: linear-gradient(139deg,rgba(255, 127, 88, 1) 0%, rgba(255, 116, 116, 1) 100%);
	--gradient-blue: linear-gradient(90deg,rgba(99, 165, 242, 1) 0%, rgba(74, 214, 232, 1) 100%);
	--bg-color: #FEF2C4;
}

body{min-width: 1300px; background: #F8F8ED;}
.sp-only{ display: none; }

/* ------------------------------------------------------------ header ------------------------------------------------------------ */
header{ display: flex; align-items: center; justify-content: space-between; min-width: 1300px; padding: 14px 4%; position: fixed;z-index: 1000; width: 100%; transition: 0.5s;}
header h1{ width: 163px; height: auto; transition: 0.5s; }
header h1 a { display: flex; }
header h1 a span { color:#fff !important; font-size: 14px; display: block; padding: 55px 0 0 20px; }
header.change-color{background: #1B2C43; transition: 0.5s; padding: 14px 21px;}
header.change-color h1{ height: auto;transition: 0.5s;}
header.change-color h1 img{width: 100px; height: auto;}
header.change-color h1 a span { padding: 20px 15px 15px; }

.header-btn{ position: relative; width: 273px; margin-right: 2%; }
.header-btn a{ display: flex; align-items: center; justify-content: center; gap: 22px; width: 100%; height: 56px; font-size: 20px; color: #fff; font-family: 'Noto-Sans-JP-Bold'; letter-spacing: 0.05em; background: var(--gradient); border-radius: 100px; }
header.change-color .header-btn{ width: 230px; }
header.change-color .header-btn a{ height: 50px; font-size: 17px; }

.header__right{ display: flex; align-items: center; justify-content: flex-end; gap: 50px; width: 580px; }
.header__tel a{ display: flex; align-items: center; gap: 5px; text-align: center; }
.header__tel p{ font-size: 31px; color: #fff; font-family: "Helvetica Neue" , Helvetica, sans-serif; font-weight: 700; }
.header__tel small{ display: block; padding: 5px 0 0; font-size: 12px; color: #fff; }


/* ------------------------------------------------------------ footer ------------------------------------------------------------ */
footer{text-align: center; background: #1B2C43; padding: 39px 0 17px;}
footer h2{display: inline-block;}
footer p{ font-size: 12px; line-height: 150%; padding: 45px 0 0; color: #fff;}
footer a { display: block; color: #fff !important; padding: 0 0 10px; }

/* ------------------------------------------------------------ .contact ------------------------------------------------------------ */

.contact .white_box .btns{margin: 50px auto 0; display: flex; justify-content: center;}
.contact .white_box .btns .submit_btn .btn{font-family: 'Noto-Sans-JP-Medium',sans-serif; font-size: 20px;line-height: 160%;text-align: center; color: #fff; background: #1C2C43; display: block; padding: 27px 0;width: 100%; border: 1px solid #1C2C43; transition: 0.5s;}
.contact .white_box .btns .submit_btn.thumb-hover .btn{color: #1C2C43; background: #fff; transition: 0.5s;}
.contact .white_box .btns .submit_btn,
.contact .white_box .btns .back_btn{width: 387px; height: auto; }
.contact .white_box .btns .back_btn a{font-family: 'Noto-Sans-JP-Medium',sans-serif; font-size: 20px;line-height: 160%;text-align: center; color: #fff; background: #D0D0D0; display: block; padding: 27px 0;width: 100%; transition: 0.5s;border: 1px solid #D0D0D0; transition: 0.5s;}
.contact .white_box .btns .back_btn.thumb-hover a{color: #D0D0D0; background: #fff;transition: 0.5s;}

.contact .contact_2{padding: 50px 31px 0; align-items: flex-start;}
.contact .contact_2 .box{border-radius: 25px; background: #fff; width: 530px; height: auto; text-align: center;}
.contact .contact_2 .box:last-child{margin: 0 0 0 78px;}
.contact .contact_2 .box p.tt_2{text-align: center;padding: 7px 0 0;font-size: 12px;font-family: 'Noto-Sans-JP-Medium',sans-serif; }

.contact .contact_2 .box.tel{padding: 34px 0 32px;}
.contact .contact_2 .box.tel .tt_1{font-family: 'Noto-Sans-JP-Medium',sans-serif; font-size: 15px;line-height: 160%;text-align: center; }
.contact .contact_2 .box.tel a{font-family: "Helvetica Neue" , Helvetica, sans-serif; font-weight: 700; font-size: 49px; line-height: 100%; display: inline-block;padding: 0 0 0 34px; position: relative; margin: 5px 0 0;}
.contact .contact_2 .box.tel a:before{background: url(../images/index/contact_icn_1.svg) no-repeat center center; background-size: 100%; width: 28px; height: 33px; content: ""; display: block; position: absolute; left: 0px; top: 50%; transform: translateY(-50%);}

.contact .contact_2 .box.meli{padding: 39px 0 46px;}
.contact .contact_2 .box.meli a{width: 422px; height: auto; display: block; margin: 0 auto; border-radius: 15px; background: #FAC47B; position: relative; font-family: 'Noto-Sans-JP-Bold'; color: #fff; padding: 15px 0 15px 40px; line-height: 157%; font-size: 17px; transition: 0.5s; border: 1px solid #FAC47B;}
.contact .contact_2 .box.meli a:before,
.contact .contact_2 .box.meli a:after{ width: 35px; height: 35px; content: ""; display: block; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); transition: 0.5s;}
.contact .contact_2 .box.meli a:before{background: url(../images/index/contact_icn_2.svg) no-repeat center center; background-size: 100%; opacity: 1;}
.contact .contact_2 .box.meli a:after{background: url(../images/index/contact_icn_3.svg) no-repeat center center; background-size: 100%; opacity: 0;}

.contact .contact_2 .box.meli{padding: 39px 0 46px;}
.contact .contact_2 .box.meli a.thumb-hover{background: #fff; color: #FAC47B;transition: 0.5s;}
.contact .contact_2 .box.meli a.thumb-hover:before{background: url(../images/index/contact_icn_2.svg) no-repeat center center; background-size: 100%; opacity: 0; transition: 0.5s;}
.contact .contact_2 .box.meli a.thumb-hover:after{background: url(../images/index/contact_icn_3.svg) no-repeat center center; background-size: 100%; opacity: 1; transition: 0.5s;}

.contact .contact_3{ gap: 30px; align-items: center; justify-content: center; }
.contact .contact_3 .img{ width: 300px; height: auto; }
.contact .contact_3 .img img{ margin: 0 10px; }
.contact .contact_3 .text{ width: 500; }
.contact .contact_3 h3{ padding: 0 0 20px; font-size: 25px; font-family: 'Noto-Sans-JP-Bold'; }
.contact .contact_3 p{ font-size: 17px; }
.contact.veltex{ margin: 50px 0 0; padding: 50px 0; background: #fff; }


/*---共通---*/

.contact{padding: 60px 0 100px;}
.contact .white_box{background: #fff; padding: 68px 0 94px; margin: 50px 0 0;}
.contact .white_box p{text-align: center; font-size: 15px; line-height: 160%;}
.contact .white_box form{width: 916px; height: auto; margin: 50px auto 0; display: block;}
.contact .white_box form table tr th{font-family: 'Noto-Sans-JP-Medium',sans-serif; font-size: 16px; width: 249px; text-align: left;line-height: 160%;}
.contact .white_box form table tr th span{font-family: 'Noto-Sans-JP-Medium',sans-serif; font-size: 16px; color: #FF0000;line-height: 160%;}
.contact .white_box form table tr td .flex input{width: 327px; height: auto;}
.contact .white_box form table tr td .flex input:first-child{margin: 0 13px 0 0;}
.contact .white_box form table tr td textarea,
.contact .white_box form table tr td input{width: 100%; height: auto; background: #F4F4F4; border: none; padding: 12px 16px 16px;line-height: 160%;}
.contact .white_box form table tr:not(:last-child) td,
.contact .white_box form table tr:not(:last-child) th{padding-bottom: 28px;}
.contact .white_box form table tr:last-child th,
.contact .white_box form table tr:last-child td{vertical-align: top; padding: 7px 0 0;}
.contact .white_box form table tr td textarea{height: 314px;resize: none; border: 1px solid #E5E5E5;}
.contact .white_box form table tr .radio_box .flex .box_label{ position: relative; text-align: right;}
.contact .white_box form table tr .radio_box .flex label{padding: 0 15px 0 0;}
.contact .white_box form table tr .radio_box .flex label span { font-size: 14px; position: relative; padding: 0 0 0 23px; display: block;}
.contact .white_box form table tr .radio_box .flex input{ display: none; }
.contact .white_box form table tr .radio_box .flex input:checked + span:before{ background:#919191;}
.contact .white_box form table tr .radio_box .flex label span:before { display: block; content: ""; width: 15px; height: 15px; background: #ffffff; border: 1px solid #707070; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: 0px;}


/*---#error---*/
#error{padding: 150px 0 100px;}
#error h3{text-align: center; font-size: 40px; font-family: 'Noto-Sans-JP-Bold';line-height: 179%;}
#error .white_box .alert{padding: 50px 0 0;}
#error .white_box .alert span{font-size: 16px; display: block; text-align: center; line-height: 160%; }
#error .white_box .alert span:not(:last-child){padding: 0 0 20px}

/*---#confirm---*/
#confirm{padding: 150px 0 100px;}
#confirm h3{text-align: center; font-size: 40px; font-family: 'Noto-Sans-JP-Bold';line-height: 179%;}
#confirm .white_box .alert span{font-size: 16px; display: block; text-align: center; line-height: 160%; padding: 20px 0 0;}
#confirm .white_box table{width: 90%; height: auto; margin: 0 auto;}
#confirm .white_box table tr th{width: 30%; font-family: 'Noto-Sans-JP-Medium',sans-serif; font-size: 16px;text-align: left;line-height: 160%;border-bottom: 1px solid #000; padding: 20px 0;}
#confirm .white_box table tr td{font-family: 'Noto-Sans-JP-Medium',sans-serif; font-size: 16px;text-align: left;line-height: 160%; border-bottom: 1px solid #000; width: 70%; padding: 20px 0;}
#confirm .white_box .back_btn{margin: 0 30px 0 0;}

/*---#thanks---*/
#thanks{padding: 150px 0 100px;}
#thanks .caution{text-align: center; line-height: 160%; font-family: 'Noto-Sans-JP-Bold',sans-serif; font-size: 26px;}
#thanks small{text-align: center; line-height: 200%; font-size: 16px; text-align: center; padding: 30px 0 0; display: block;}

#thanks .white_box .top_btn{width: 387px; height: auto; margin: 50px auto 0;}
#thanks .white_box .top_btn a{font-family: 'Noto-Sans-JP-Medium',sans-serif; font-size: 20px;line-height: 160%;text-align: center; color: #fff; background: #D0D0D0; display: block; padding: 27px 0;width: 100%; border: 1px solid #D0D0D0; transition: 0.5s;}
#thanks .white_box .top_btn.thumb-hover a{color: #D0D0D0; background: #fff; transition: 0.5s;}

@media only screen and (max-width: 768px) {
	body{min-width: 100%;background: #F8F8ED; }
	img{width: 100%; height: auto;}
	.pc-only{ display: none; }
	.sp-only{ display: block; }
	
	/* ------------------------------------------------------------ header ------------------------------------------------------------ */
	header{min-width: 100%; padding: 11px; }
	header h1{ height: auto; }
	header h1 img {width: 100px; }
	header h1 a span { font-size: 12px; padding: 25px 15px 15px; }
	header.change-color{padding: 11px;}
	header.change-color h1{}
	header.change-color h1 a span { font-size: 12px; padding: 25px 15px 15px; }
	
	.header-btn,
	header.change-color .header-btn{ width: 130px; }
	.header-btn a,
	header.change-color .header-btn a{ gap: 11px; height: 40px; font-size: 12px; }
	.header-btn{ margin-right: 0; }
	.header-btn img{ width: 15px; height: auto; }
	
	.header__right{ gap: 12px; }
	.header__tel img{ width: 25px; height: auto; }
	.header__tel p{ font-size: 14px; }
	.header__tel small{ padding: 3px 0 0; font-size: 10px; line-height: 1.4; }
		
	/* ------------------------------------------------------------ footer ------------------------------------------------------------ */
	footer{ padding: 42px 0 17px;}
	footer h2{width: 125px; height: auto; margin: 0 auto;}
	footer p{ font-size: 11px; padding: 23px 0 0; }
	/* ------------------------------------------------------------ .contact ------------------------------------------------------------ */
	.contact .white_box .btns{margin: 25px auto 0;}
	.contact .white_box .btns .submit_btn,
	.contact .white_box .btns .back_btn{width: 80%; height: auto; }
	.contact .white_box .btns .submit_btn .btn{ font-size: 15px;padding: 13px 0; margin: 0 auto; width: 100%; margin: 0 auto;}
	.contact .white_box .btns .back_btn a{font-size: 15px;line-height: 160%; padding: 13px 0;width: 100%; margin: 0 auto;}
	.contact .contact_2{padding: 29px 0px 0; align-items: flex-start;}
	.contact .contact_2 .box{border-radius: 20px; }
	.contact .contact_2 .box:last-child{margin: 0 0 ;}
	.contact .contact_2 .box p.tt_2{padding: 7px 0 0;font-size: 11px;}
	
	.contact .contact_2 .box.tel{padding: 17px 0 12px; width: 100%;}
	.contact .contact_2 .box.tel .tt_1{font-size: 14px;}
	.contact .contact_2 .box.tel a{ font-size: 29px; padding: 0 0 0 26px; margin: 2px 0 0;}
	.contact .contact_2 .box.tel a:before{ width: 26px; height: 26px; top: 60%;}
	
	.contact .contact_2 .box.meli{padding: 17px 0 18px; width: 100%; margin: 20px auto 0;}
	.contact .contact_2 .box.meli a{width: 80%; padding: 8px 0 8px 14px; font-size: 14px; margin: 0 auto 10px; border-radius: 10px;}
	.contact .contact_2 .box.meli a:before,
	.contact .contact_2 .box.meli a:after{width: 23px; height: 23px; left: 11px; }
	
	.contact .contact_3{ gap: 20px; flex-direction: column; }
	.contact .contact_3 .img{ width: 90%; margin: 0 auto; text-align: center; }
	.contact .contact_3 .img img{ width: auto; height: 70px; }
	.contact .contact_3 .text{ width: 100%; }
	.contact .contact_3 h3{ padding: 0 0 10px; font-size: 20px; line-height: 1.5; text-align: center; }
	.contact .contact_3 p{ font-size: 14px; text-align: center; }
	
	
	/*---共通---*/
	#contact .white_box form table tr th{ display: block;}
	#contact .white_box form table tr td{display: block; }
	#contact .white_box p{font-size: 12px;}
	
	.contact{padding: 38px 0 49px;}
	.contact .white_box{padding: 50px 20px; margin: 20px 0 0;}
	.contact .white_box p{text-align: left;}
	.contact .white_box form{width: 100%; margin: 17px auto 0;}
	.contact .white_box form table{width: 100%; height: auto;}
	.contact .white_box form table tr th{font-size: 14px; width: 100%; text-align: left;line-height: 160%; }
	.contact .white_box form table tr td{ width: 100%;}
	.contact .white_box form table tr th span{font-size: 14px;}
	.contact .white_box form table tr td .flex{flex-direction: row;}
	.contact .white_box form table tr td .flex input{width: 48%; height: auto; font-size: 13px;}
	.contact .white_box form table tr td .flex input:first-child{margin: 0 4% 0 0;}
	.contact .white_box form table tr td textarea,
	.contact .white_box form table tr td input{width: 100%; padding: 8px 10px 10px;}
	.contact .white_box form table tr:not(:last-child) td{padding-bottom: 14px;}
	.contact .white_box form table tr:not(:last-child) th{padding-bottom: 10px;}
	.contact .white_box form table tr:last-child th{padding-bottom: 10px;}
	.contact .white_box form table tr td textarea{height: 314px;padding: 8px 10px 10px;}
	.contact .white_box form table tr .radio_box .flex{ flex-wrap: wrap; flex-direction: row; max-width: 330px;}
	.contact .white_box form table tr .radio_box .flex .box_label{width: auto; }
	.contact .white_box form table tr .radio_box .flex .box_label:nth-child(1),
	.contact .white_box form table tr .radio_box .flex .box_label:nth-child(2){margin: 0 0 15px;}
	.contact .white_box form table tr .radio_box .flex label{padding: 0 10px 0 0;}
	.contact .white_box form table tr .radio_box .flex label span { padding: 0 0 0 15px; font-size: 13px;}
	.contact .white_box form table tr .radio_box .flex label span:before{width: 13px; height: 13px;}
	
	
	/*---#error---*/
	#error{padding: 120px 0 49px;}
	#error .white_box p{font-size: 13px;}
	#error .white_box .alert {padding: 25px 0 0;}
	#error .white_box p{text-align: center;}
	#error .white_box .alert span:not(:last-child) {padding: 0 0 2px;}
	#error h3{text-align: center; font-size: 20px; }
	#error .white_box .alert span{font-size: 13px; }
	
	/*---#confirm---*/
	#confirm{padding: 120px 0 49px;}
	#confirm h3{ font-size: 20px; }
	#confirm .white_box p{text-align: center;font-size: 13px;}
	#confirm .white_box .alert span{font-size: 16px; padding: 20px 0 0;}
	#confirm .white_box table{width: 100%; height: auto; margin: 0 auto;}
	#confirm .white_box table tr th{width: 120px; font-size: 13px; padding: 15px 0; vertical-align: top;}
	#confirm .white_box table tr td{ font-size: 13px;width: calc(100% - 120px); padding: 15px 0; vertical-align: top; }
	#confirm .white_box .back_btn{margin: 0 15px 0 0;}
	
	/*---#thanks---*/
	#thanks{padding: 120px 0 49px;}
	#thanks .title_box .big_tt {font-size: 60px;}
	#thanks .caution{ font-size: 18px;}
	#thanks small{font-size: 13px; padding: 20px 0 0; }
	
	#thanks .white_box .top_btn{width: 80%; height: auto; margin: 25px auto 0;}
	#thanks .white_box .top_btn a{ font-size: 15px; padding: 13px 0;width: 100%; }

}