/*===============================================
 *	詳細見出し
===============================================*/
.full_wide_ttl + .inner {padding: 50px 0;}
.full_wide_ttl .txt_white {padding-left: 11%;}
.full_wide_ttl .txt_white > span {position: relative;}
.full_wide_ttl .txt_white > span::before {content: '';background: url(../img/case/items.png) no-repeat;background-size: contain;width: 140px;height: 120px;position: absolute;top: -50px;left: -170px;}
.bg-gray{background: #f5f5f5;}
@media screen and (max-width: 960px) {
.full_wide_ttl .txt_white {padding-left: 8vw;}
.full_wide_ttl .txt_white > span::before {width: calc(177px * 0.7);height: calc(77px * 0.7);top: -10px;left: -135px;}
}
@media screen and (max-width: 568px) {
.full_wide_ttl + .inner {padding: 40px 0;}
.full_wide_ttl {padding: 14px 0 16px;}
.full_wide_ttl .txt_white {line-height: 1.4;}
.full_wide_ttl .txt_white > span::before {content: none;}
}


/*===============================================
 *	一覧ページ
===============================================*/
#intro .intro_box .half_box .ttl {font-size: 32px;}
.ttl_left_border{font-weight: bold;}
.case_list {margin-bottom: 40px;}
@media screen and (max-width: 1024px) {
  #intro .intro_box .half_box .ttl {font-size: 28px;}
}
@media screen and (max-width: 960px) {
  #intro .intro_box .half_box .ttl {font-size: 23px;}
}
@media screen and (max-width: 568px) {
  #intro .intro_box .half_box .photo {margin-bottom: 20px;}
  #intro .intro_box .half_box .ttl {font-size: 21px;margin-bottom: 10px;}
  .case_list {margin-bottom: 20px;}
}
/*===============================================
 *	詳細ページ
===============================================*/
.case_content {position: relative;}
.case_content .date_time{font-size:16px;color:var(--site-primary);margin-bottom: 0;position: absolute;right: 60px;top: 60px;}
.case_content .date_time time{padding-left: 25px;background: url(../img/common/icon-clock.png) no-repeat left center;background-size: 18px;}

.case_content_box {margin-bottom: 10px;}
.case_content_box .case_content {border-right: #88c7ff 4px solid;border-bottom: #88c7ff 4px solid;border-left: #88c7ff 4px solid;padding: 45px 50px 50px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}
.case_content_box .ttl {font-size: 32px;padding: 13px 50px 15px;background: var(--site-primary);}
.case_content_box .customer_box {display: -ms-grid;display: grid;-ms-grid-columns: auto 177px;grid-template-columns: auto 177px;-ms-grid-rows: auto 1fr;grid-template-rows: auto 1fr;-webkit-column-gap: 4.3%;column-gap: 4.3%;}
.customer-infobox .txt-address{font-size: 24px;font-weight: bold;margin-bottom: 10px;position: relative;display: flex;align-items: center;}
.customer-infobox .txt-address::before{content: '';background-size: contain;display: inline-block;position: relative;margin-right: 8px;width: 42px;height: 42px;}




.case_content_box .customer_box img {-ms-grid-column: 2;grid-column: 2;grid-row: 1 / -1;border: 2px solid #dfdfdf;aspect-ratio: 177 / 260;-o-object-fit: cover; object-fit: cover;}
.case_content_box .customer_box .ttl_left_border {-ms-grid-column: 1;grid-column: 1;-ms-grid-row: 1;grid-row: 1;margin: -12px 0 22px;}
.case_content_box .customer_box p {-ms-grid-column: 1;grid-column: 1;-ms-grid-row: 2;grid-row: 2;}
.case_content_box .photo_box {background: url(../img/example/example_bg.png) no-repeat bottom  #f5f5f5;background-size: contain;padding: 50px 40px 40px;margin: 30px 0;}
.case_content_box .photo_box ul {gap: 0 50px;position: relative;margin-bottom: 20px;}
.case_content_box .photo_box ul li .photo {width: 370px;height: auto;aspect-ratio: 1.618 / 1;position: relative;overflow: hidden;}
.case_content_box .photo_box ul li .photo img {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.case_content_box .photo_box ul li .photo_ttl {text-align: center;padding: 9px 0 14px;}
.case_content_box .photo_box ul li .photo_ttl img {vertical-align: middle;}
.case_content_box .photo_box ul li:first-child .photo_ttl {background: #999;}
.case_content_box .photo_box ul li:first-child .photo_ttl img {width: 92px;}
.case_content_box .photo_box ul li:last-child {position: relative;}
.case_content_box .photo_box ul li:last-child .photo_ttl {background: #ff8811;}
.case_content_box .photo_box ul li:last-child .photo_ttl img {width: 79px;}
.case_content_box .photo_box ul li:last-child::after {content: '';display: block;width: calc(100% - 8px);height: calc(100% - 8px);border: 4px solid #ff8811;position: absolute;left: 0;top: 0;z-index: 10;}
.case_content_box .photo_box ul::after {content: '';border-left: #fbb46c 20px solid;border-top: 20px solid transparent;border-bottom: 20px solid transparent;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-size: contain;}
.case-dl {font-size: 18px;width: 100%;}
.case-dl dt {background: var(--site-keycolor);color: #fff;padding: 13px 0 7px;text-align: center;width: 12%;}
.case-dl dd {background: #fff;border: var(--site-keycolor) 2px solid;font-size: 17px;padding: 10px 0;text-align: center;font-weight: bold;width: 13%;}
.car {max-width: 790px;margin: 0 auto;font-size: 20px;}
.car dt{background: url(../img/case/icon-car.png) 30% no-repeat var(--site-primary);color: #fff;padding: 10px;font-weight: bold;text-align: center;width: 50%;}
.car dd{background: #fff;border: var(--site-primary) 2px solid;font-weight: bold;padding: 10px;text-align: center;width: 50%;}
.case-staffbox{background: #f5f5f5;border-top-left-radius: 20px;border-top-right-radius: 20px;}
.ttl_stripe_color04 {font-size: 27px;color: #fff;background-image: repeating-linear-gradient(135deg, transparent, transparent 7px, #2D89F8 7px, #2D89F8 15px );background-color: #348DF8;;border-radius: 20px;padding: 0.4em 1.25em 0.6em;}
.ttl_stripe_color04.top_radius {border-radius: 10px 10px 0 0;}
.case-staffbox div{padding: 30px;}
.case-staffbox img{border-radius: 10px;float: right;max-width: 302px;height: 187px;object-fit:cover;}
.case-staffbox .staff-txt{width: 64%;}
@media screen and (max-width: 1024px) {
.case_content_box .photo_box ul li .photo {width: 310px;}
.case-dl {font-size: 16px;}
.ttl_stripe_color04 {font-size: 28px;}
.case-staffbox .staff-txt {width: 58%;}
}
@media screen and (max-width: 960px) {
.case_content .date_time {right: 6vw;top: 5vw;}
.case_content_box .ttl {font-size: 25px;}
.case_content_box .case_content {padding: 5vw 6vw;}
.customer-infobox .txt-address {font-size: 20px;margin-bottom: 5px;}
.case_content_box .photo_box {padding: 5vw 0;}
.case_content_box .photo_box ul li .photo_ttl {padding: 7px 0 11px;}
.case_content_box .photo_box ul li .photo {width: 250px;}
.car {max-width: 550px;}
.car dt {background: url(../img/case/icon-car.png) 22% no-repeat #0071be;}
.case-dl {font-size: 13px;width: 100%;}
.case-dl dt {width: 23%;padding: 8px 0 5px;margin-bottom: 5px;}
.case-dl dd {width: 27%;padding: 5px 0;margin-bottom: 5px;}
.ttl_stripe_color04 {font-size: 24px;padding: 0.5em 1.25em 0.6em;}
.case-staffbox {border-top-left-radius: 0;border-top-right-radius: 0;}
.case-staffbox div {padding: 20px;}
.case-staffbox img {max-height: 110px;width: 25%;order: 2;}
.case-staffbox .staff-txt {width: 74%;order: 1;}
}
@media screen and (max-width: 768px) {
.customer-infobox .txt-address::before {width: 32px;height: 32px;}
}
@media screen and (max-width: 568px) {
.case_content .date_time{font-size: 14px;margin-bottom: 5px;margin-top: -8px;position: static;right:auto;top: auto;}
.case_content .date_time time {padding-left: 22px;background-size: 16px;}
.case_content_box {margin-top: -40px;border-radius: 0;}
.customer-infobox .txt-address {font-size: 15px;line-height: 1.4;margin-bottom: 10px;}
.customer-infobox .txt-address::before {width: 40px;height: 40px;}
.case_content_box .ttl {font-size: 21px;padding: 15px 20px;}
.case_content_box .case_content {padding: 20px 20px 28px;border-right: none;border-left: none;border-radius: 0;}
.case_content_box .customer_box {display: block;}
.case_content_box .customer_box .ttl_left_border {margin: -5px 0 20px;}
.case_content_box .customer_box img {float: left;width: 48.2%;margin: 0 4.5% 0 0;}
.case_content_box .customer_box p {line-height: 1.85;margin-top: -5px;}
.case_content_box .photo_box {background: #f5f5f5;padding: 25px 27px;margin-top: 20px;}
.case_content_box .photo_box ul {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;gap: 40px 0;}
.case_content_box .photo_box ul li .photo {width: 100%;}
.case_content_box .photo_box ul li .photo_ttl {padding: 6px 0 8px;}
.case_content_box .photo_box ul li:first-child .photo_ttl img {width: 78px;}
.case_content_box .photo_box ul li:last-child .photo_ttl img {width: 67px;}
.case_content_box .photo_box ul::after {border-left: 20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid #fbb46c;left: 50%;top: 52%;width: 0;height: 0;transform: translate(-50%,-50%);}
.case-dl {font-size: 14px;width: 100%;}
.case-dl dt {font-size: 13px;margin-bottom: 5px;}
.case-dl dd {font-size: 13px;border: none;border: #50b7e8 2px solid;margin-bottom: 5px;}
.car {font-size: 16px;}	
.car dt {background: url(../img/case/icon-car.png) 12% no-repeat #50b7e8;text-align: right;padding: 10px;background-size: 20px;width: 40%;}
.car dd {width: 60%;}
.ttl_stripe_color04 {border-radius: 0;font-size: 18px;padding: 0.4em 1em 0.5em;}
.ttl_stripe_color04.top_radius {border-radius: 0;}
.case-staffbox {margin: 0 -20px 0;}
.case-staffbox img {margin: 0 0 10px 10px;max-width: initial;height: auto;width: 47%;float: right;}
.case-staffbox .staff-txt {width: 100%;}
}

/***********************
* 買取金額有り
************************/
.txt-on_price{line-height: 1;margin-bottom: 30px;}
.txt-on_price li {width: 294px;position: relative;}
.txt-on_price dl dt{background: #888;color: #fff;padding: 15px 0;font-size: 20px;font-weight: bold;text-align: center;letter-spacing: .10em;}
.txt-on_price dl dd{color: #888;font-size: 27px;font-weight: bold;text-align: center;padding: 15px 0;border-bottom: #afafaf 2px solid;border-left: #afafaf 2px solid;border-right: #afafaf 2px solid;}
.txt-on_price dl dd .yen {font-size: 22px;}
.txt-on_price dl dd .tax{font-size: 17px;}
.txt-on_price li:first-child::after {content: '';background: url("../img/case/icon-minus.png") no-repeat;background-size: contain;height: 100%;position: absolute;bottom: -50px;right: -46px;width: 25px;}
.txt-on_price li:nth-child(2) dt{background: #2d89f8;}
.txt-on_price li:nth-child(2) dd{color: #2d89f8;border-bottom: #7fa0dc 2px solid;border-left: #7fa0dc 2px solid;border-right: #7fa0dc 2px solid;font-size: 27px;padding: 15px 0;}
.txt-on_price li:nth-child(2) dl dd .yen{font-size: 22px;}
.txt-on_price li:nth-child(2) dl dd .tax{font-size: 17px;}
.txt-on_price li:nth-child(3) {margin-bottom: 0;}
.txt-on_price li:nth-child(3) dl{width: 100%;}
.txt-on_price li:nth-child(3) dl dt{background: #cf1126;font-size: 22px;padding: 14px 0;}
.txt-on_price li:nth-child(3) dl dd{color: #cf1126;border-left: #e2707d 2px solid;border-bottom: #e2707d 2px solid;border-right: #e2707d 2px solid;font-size: 32px;padding: 12px 0 13px;}
.txt-on_price li:nth-child(3) dl dd .yen{font-size: 24px;}
.txt-on_price li:nth-child(3) dl dd .tax{font-size: 19px;}
.txt-on_price li:nth-child(3)::before {content: '';background: url("../img/case/icon-equal.png") no-repeat;background-size: contain;height: 100%;position: absolute;bottom: -45px;left: -45px;width: 25px;}
.collect-dl {margin-bottom: 20px;}
.purchase-dl{margin-bottom: 40px;}
.collect-dl dt,.purchase-dl dt{margin-bottom: 20px;}
.collect-dl dd{background: #f5f5f5;padding: 15px 20px;font-size: 17px;font-weight: bold;}
.purchase-dl dd{background: #def3ff;padding: 15px 20px;font-size: 17px;font-weight: bold;}
@media only screen and (max-width: 1024px) {
.txt-on_price li {width: 250px;}
.txt-on_price li:first-child::after {right: -48px;}
.txt-on_price li:nth-child(3)::before {left: -48px;}
}
@media only screen and (max-width: 960px) {
.txt-on_price li {width: 210px;}
}
@media only screen and (max-width: 768px) {
.txt-on_price li {width: 190px;letter-spacing: 0;}
.txt-on_price li:first-child::after {right: -22px;width: 18px;}
.txt-on_price li:nth-child(3)::before {left: -23px;width: 20px;}
.txt-on_price dl dt{font-size: 18px;}
.txt-on_price dl dd{font-size: 25px;}
.txt-on_price dl dd .yen {font-size: 20px;}
.txt-on_price dl dd .tax{font-size: 15px;}
.txt-on_price li:nth-child(2) dd{font-size: 25px;}
.txt-on_price li:nth-child(2) dl dd .yen{font-size: 20px;}
.txt-on_price li:nth-child(2) dl dd .tax{font-size: 15px;}
.txt-on_price li:nth-child(3) dl dt{font-size: 20px;}
.txt-on_price li:nth-child(3) dl dd{font-size: 28px;}
.txt-on_price li:nth-child(3) dl dd .yen{font-size: 20px;}
.txt-on_price li:nth-child(3) dl dd .tax{font-size: 15px;}
}
@media only screen and (max-width: 568px) {
.txt-on_price li {width: 42%;}
.txt-on_price li dd {font-size: 22px;padding: 10px 0;}
.txt-on_price li dd .tax {display: block;padding: 5px 0 0 0;}
.txt-on_price li:first-child::after {height: 5px;top: 50%;right: -40%;transform: translateY(-50%);width: 40px;}
.txt-on_price li dt {padding: 10px 0;font-size: 16px;}
.txt-on_price li:nth-child(2) dd{font-size: 22px;padding: 10px 0px;}
.txt-on_price li:nth-child(2) dl dd .yen{font-size: 20px;}
.txt-on_price li:nth-child(2) dl dd .tax{font-size: 15px;}
.txt-on_price li:nth-child(3) dl dt{font-size: 20px;}
.txt-on_price li:nth-child(3) dl dd{font-size: 35px;}
.txt-on_price li:nth-child(3) dl dd .yen{font-size: 25px;}
.txt-on_price li:nth-child(3) dl dd .tax{display: inline;font-size: 17px;}
.txt-on_price li:nth-child(3) {width: 100%;margin: 50px 0 0;}
.txt-on_price li:nth-child(3)::before {background: none;width: 0;height: 0;left: 50%;border-left: 25px solid transparent;border-right: 25px solid transparent;border-top: 25px solid #f1b7bd;transform: translateX(-50%);top: -40px;}
}
/***********************
* 買取金額無し
************************/
.txt-off_price li {position: relative;margin-bottom: 15px;}
.txt-off_price dl dt{padding: 8px 0;font-weight: bold;text-align: center;letter-spacing: .10em;}
.txt-off_price dl dd{font-weight: bold;padding: 10px 0;}
.txt-off_price dl dd .yen {font-size: 24px;}
.txt-off_price dl dd .tax{font-size: 19px;}
.txt-off_price li:first-child {width: 45%;margin-bottom: 0;}
.txt-off_price li:first-child dl {width: 100%;display: flex;justify-content: space-evenly;align-items: flex-start;}
.txt-off_price li:first-child dl dt {color: #fff;padding: 13px 0;background: #cf1126;font-size: 22px;width: 40%;}
.txt-off_price li:first-child dl dd {box-sizing: border-box;border-bottom: #e2707d 2px solid;border-top: #e2707d 2px solid;border-right: #e2707d 2px solid;color: #cf1126;font-size: 32px;width: 60%;padding: 3px 5px;text-align: right;}
.txt-off_price li:nth-child(2) {margin-bottom: 20px;width: 52%;}
.txt-off_price li:nth-child(2) dl{background: var(--site-keycolor);display: flex;align-items: center;border: none;}
.txt-off_price li:nth-child(2) dt{background: var(--site-keycolor);color: #fff;font-size: 20px;font-weight: bold;padding: 5px 0;width: 28%;}
.txt-off_price li:nth-child(2) dd{background: #fff;border-bottom: var(--site-keycolor) 2px solid;border-top: var(--site-keycolor) 2px solid;border-right: var(--site-keycolor) 2px solid;font-size: 17px;font-weight: bold;width: 75%;text-align: left;padding: 15px 20px;}
@media only screen and (max-width: 768px) {
.txt-off_price li:first-child dl {display: block;}
.txt-off_price li:first-child dl dt {padding: 8px 0;width: 100%;}
.txt-off_price li:first-child dl dd {border-top: none;border-left: #e2707d 2px solid;width: 100%;text-align: center;}
.txt-off_price li:nth-child(2) dl {display: block;}
.txt-off_price li:nth-child(2) dt {padding: 10px 0;width: 100%;}
.txt-off_price li:nth-child(2) dd {border-top: none;border-left: #66b2d0 2px solid;width: 100%;padding: 4%;}
}
@media only screen and (max-width: 568px) {
.txt-off_price li {width: 100%;}
.txt-off_price li:first-child {margin-bottom: 20px;width: 100%;}
.txt-off_price li:first-child dl dt {font-size: 20px;}
.txt-off_price li:first-child dl dd {font-size: 35px;}
.txt-off_price dl dd .yen {font-size: 25px;}
.txt-off_price dl dd .tax{font-size: 17px;}
.txt-off_price li:nth-child(2) {width: 100%;}
.txt-off_price li:nth-child(2) dt {padding: 5px 0;font-size: 18px;}
}

/* その他の作業事例 */
.other_case .case_list li {background: #f2f2f2;}

/*# sourceMappingURL=case.css.map */