@charset "UTF-8";

/*-------------------------
__want_to_buy_style
-------------------------*/

#main{ text-align: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px; box-sizing: border-box;}
#main img{ width: 100%; height: auto;}
#contents_title{background:url("images/title_back.jpg")no-repeat center center;background-size:cover; position: relative;}
#contents_title:after { content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; display: block;}

.introductory{ font-size: 2.2em; font-weight: 700; margin-bottom: 60px;}

/*=================================== 検索 ===================================*/

#salescost{}
#salescost h2{ font-size: 3.2em; color: #2A2C8B; font-weight: 700; margin-bottom: 80px;}
#salescost .cost_box{ text-align: left; display: flex; justify-content: space-between;}
#salescost .cost_box dl dd > p,
#salescost .cost_box dl dd ul li{ font-size: 1.7em; line-height: 1.3em; position: relative; padding-left: 15px; margin-bottom: 10px;}
#salescost .cost_box dl dd > p:before,
#salescost .cost_box dl dd ul li:before{ content: ''; display: block; background-color: #000; width: 10px; height: 10px; border-radius: 50vh; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#salescost .cost_box .cost_common{ width: calc(50% - 32px);}
#salescost .cost_box .cost_common dl{}
#salescost .cost_box .cost_common dl dt{ background-color: #2A2C8B; color: #fff; font-size: 2.2em; padding: 14px; box-sizing: border-box; margin-bottom: 20px; font-weight: 700;}
#salescost .cost_box .cost_common dl dd{ padding-left: 15px; box-sizing: border-box;}
#salescost .cost_box .cost_syubetsu{ width: calc(50% - 32px);}
#salescost .cost_box .cost_syubetsu dl{ margin-bottom: 50px;}
#salescost .cost_box .cost_syubetsu dl dt{ background-color: #2A2C8B; color: #fff; font-size: 2.2em; padding: 14px 14px 14px 65px; box-sizing: border-box; position: relative; margin-bottom: 20px; font-weight: 700;}
#salescost .cost_box .cost_syubetsu dl dt:before{ content: ''; display: block; position: absolute; width: 70px; height: 70px; background-color: #fff; border-radius: 50vh; position: absolute; left: -15px; top: 50%; transform: translateY(-50%); box-shadow: 4px 4px rgba(0,0,0,0.5);}
#salescost .cost_box .cost_syubetsu dl dt:after{ content: ''; display: block; width: 42px; height: 42px; background-size: 42px 42px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#salescost .cost_box .cost_syubetsu dl:nth-child(1) dt:after{ background-image: url(images/syu_icon01@2x.png);}
#salescost .cost_box .cost_syubetsu dl:nth-child(2) dt:after{ background-image: url(images/syu_icon02@2x.png);}
#salescost .cost_box .cost_syubetsu dl:nth-child(3) dt:after{ background-image: url(images/syu_icon03@2x.png);}
#salescost .cost_box .cost_syubetsu dl dd{ padding-left: 65px; box-sizing: border-box;}
#salescost .answer{ background-image: url(images/staff_back.jpg); background-position: right; background-size: contain; position: relative; margin-bottom: 50px; background-repeat: no-repeat; background-color: #fff;}
#salescost .answer .answer_list{ text-align: left;}
#salescost .answer .answer_list > p{ font-size: 3em; color: #2A2C8B; font-weight: 700; margin-bottom: 35px;}
#salescost .answer .answer_list ul{ }
#salescost .answer .answer_list ul li{ font-size: 1.9em; line-height: 1.3em; position: relative; padding-left: 35px; font-weight: 700; margin-top: 20px;}
#salescost .answer .answer_list ul li:before{ content: ''; display: block; width: 29px; height: 29px; background-image: url(images/point@2x.png); background-size: 29px 29px; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#salescost .answer .staff_photo{ width: 308px; height: 443px; position: absolute; bottom: 0; right: 50px;}
#salescost .answer .staff_photo img{ width: 100%; height: auto;}
#salescost .satei_contact{}
#salescost .satei_contact > p{ font-size: 2.7em; line-height: 1.7; color: #2A2C8B; font-weight: 700; margin-bottom: 50px;}
#salescost .satei_contact{ text-align: center;}
#salescost .satei_contact .satei_contact_btn{ max-width: 500px; margin: 0 auto 50px;}
#salescost .satei_contact .satei_contact_btn a{ display: block; width: 100%; height: 100%; background: linear-gradient(270deg, #FFE600 0%, #FFB900 25%, #FFB900 51%, #FF5F00 100%); background-position: 1% 50%; background-size: 200% auto; position: relative; border-radius: 15px; color: #fff!important; font-size: 2.8em; font-weight: 700; padding: 40px 0; box-sizing: border-box;}
#salescost .satei_contact .satei_contact_btn a span{ font-size: 0.7em; color: #FF6E00; background-color: #fff; display: inline-block; padding: 5px 10px; margin-right: 15px;}
#salescost .satei_contact .sell_back{ margin-bottom: 80px;}
#salescost .satei_contact .sell_back a{ display: inline-block; color: #2A2C8B; font-size: 1.9em; border: 3px solid #2A2C8B; padding: 20px 30px; box-sizing: border-box; font-weight: 700; border-radius: 10px;}
#salescost .satei_contact .sell_back a span{ position: relative; display: inline-block; padding: 0 0 0 30px; vertical-align: middle; text-decoration: none;}
#salescost .satei_contact .sell_back a span::before,
#salescost .satei_contact .sell_back a span::after{ content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle;}
#salescost .satei_contact .sell_back a span::before{ left: 3px; width: 17px; height: 2px; background: #2A2C8B;}
#salescost .satei_contact .sell_back a span::after{ left: 3px; width: 12px; height: 12px; border-bottom: 2px solid #2A2C8B; border-left: 2px solid #2A2C8B; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
#salescost .satei_contact .sell_back a span{}

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

#salescost .cost_box{ flex-direction: row-reverse;}
#salescost .answer{ width: 1100px; height: 400px;}
#salescost .satei_contact .satei_contact_btn a:hover{ background-position: 99% 50%;}
#salescost .answer .answer_list{ position: absolute; left: 60px; top: 50%; transform: translateY(-50%); width: calc(100% - 460px);}
.pc_none{ display: none;}

}


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

#salescost .satei_contact{ padding: 0; box-sizing: border-box;}
#salescost .satei_contact .satei_contact_btn{ margin:30px auto;}
#salescost .satei_contact .satei_contact_btn a{ font-size: 2em; padding: 25px 0; border-radius: 10px;}
#salescost .satei_contact .satei_contact_btn a span{ margin-right: 10px;}
#main{ padding: 0 20px;}
#salescost h2{ font-size: 2.4em; margin-bottom: 30px;}
#salescost .cost_box{ display: block; margin-bottom: 40px;}
#salescost .cost_box dl dd > p,
#salescost .cost_box dl dd ul li{ font-size: 1.4em; line-height: 1.2em; margin-bottom: 8px;}
#salescost .cost_box .cost_common,
#salescost .cost_box .cost_syubetsu{ width: 100%; margin-bottom: 30px;}
#salescost .cost_box .cost_common dl dt{ font-size: 1.8em; padding: 10px; margin-bottom: 10px;}
#salescost .cost_box .cost_common dl dd,
#salescost .cost_box .cost_syubetsu dl dd{ padding-left: 0;}
#salescost .cost_box .cost_syubetsu dl{ margin-bottom: 30px;}
#salescost .cost_box .cost_syubetsu dl dt{ font-size: 1.8em; padding: 10px 10px 10px 50px;}
#salescost .cost_box .cost_syubetsu dl dt:before{ width: 50px; height: 50px; left: -10px;}
#salescost .cost_box .cost_syubetsu dl dt:after{ width: 32px; height: 32px; background-size: 32px 32px;}
#salescost .answer{ background-image: url(images/staff_back_sp.jpg); width: 100%; padding: 20px 20px 240px 20px; box-sizing:border-box; background-position: bottom; background-size: contain; margin-bottom: 20px;}
#salescost .answer .answer_list > p{ text-align: center; font-size: 2.2em; line-height: 1.3; margin-bottom: 15px;}
#salescost .answer .answer_list ul li{ font-size: 1.6em; line-height: 1.3em; margin-top: 15px;}
#salescost .answer .staff_photo{ width: 150px; height: auto; position: absolute; bottom: 0; left: 50%; right: 50%; transform: translateX(-50%);}
#salescost .satei_contact > p{ font-size: 1.7em; line-height: 1.4; margin-bottom: 30px;}
#salescost .satei_contact .sell_back{ margin-bottom: 40px;}
#salescost .satei_contact .sell_back a{ font-size: 1.5em; border: 2px solid #2A2C8B; padding: 15px 20px;}

}