@charset "utf-8";

/*===============================================
 *	common
===============================================*/
@media only screen and (max-width: 568px) {
.band-ttl, .band-fl_ttl {font-size: 21px;letter-spacing: 1px;}
.ttl-dimensional {font-size: 24px;height: 80px;line-height: 80px;padding: 10px 5px 0 15px;}
}
@media only screen and (max-width: 375px) {
.ttl-dimensional {font-size: 21px;}
}
@media only screen and (max-width: 320px) {
.ttl-dimensional {font-size: 18px;}
}
/*===============================================
 *	cv-field
===============================================*/
.cv-field{border: #009db3 2px solid;border-radius: 6px;}
.cv-field-ttl{background: #009db3;color: #fff;font-size: 28px;padding: 5px 0 5px 1em;letter-spacing: 1px;}
.cv-fieldbox{background: #daf3f7;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;padding: 30px;position: relative;}
.cv-txt{max-width: 560px;display: flex;justify-content: space-between;flex-wrap: wrap;}
.cv-field .cheapest-price_txt {font-size: 32px;}
.cv-field .cheapest-price_txt b {font-size: 38px;}
.cv-field .phonebox{max-width: 335px;}
.cv-field .contactbox{max-width: 210px;}
img.cv-field_woman{max-width: 292px;position: absolute;right: 10px;bottom: 0;}
@media only screen and (max-width: 768px) {
.cv-field-ttl {font-size: 26px;}
.cv-fieldbox {padding: 20px;}
.cv-txt {max-width: 450px;}
.cv-field .cheapest-price_txt {font-size: 24px;padding: 0 45px 0 45px;}
.cv-field .cheapest-price_txt b {font-size: 32px;}
.cv-field .phonebox {max-width: 255px;}
.cv-field .contactbox {max-width: 180px;}
img.cv-field_woman {max-width: 220px;}
}
@media only screen and (max-width: 568px) {
.cv-field-ttl {font-size: 16px;padding: 5px 0 5px 5px;letter-spacing: 1px;}
.cv-fieldbox {padding: 10px;}
.cv-field .cheapest-price_txt {font-size: 18px;padding: 0 30px 0 35px;}
.cv-field .cheapest-price_txt b {font-size: 25px;}
.cv-field .cheapest-txt::before, .cv-field .cheapest-txt::after {width: 22px;height: 24px;}
.cv-field .cheapest-txt::after {right: 0;}
.cv-field .cheapest-txt::before {left: 0;}
.cv-field .phonebox {margin-bottom: 10px;}
.cv-field .phonebox,.cv-field .contactbox {max-width: 230px;}
.cv-field .cheapest-price_txt {padding: 0 25px 0 25px;}
img.cv-field_woman {max-width: 115px;right: 0;}
}
@media only screen and (max-width: 375px) {
.cv-field-ttl {font-size: 15px;letter-spacing: 0;}
.cv-subhd_ttl {font-size: 15px;}
.cv-field .cheapest-price_txt {font-size: 15px;}
.cv-field .cheapest-price_txt b {font-size: 21px;}
.cv-field .phonebox,.cv-field .contactbox {max-width: 210px;}
img.cv-field_woman {max-width: 105px;}
}
@media only screen and (max-width: 320px) {
.cv-field {margin-bottom: 10px;}
.cv-fieldbox {padding: 10px;}
.cv-subhd_ttl {font-size: 13px;}
.cv-field .cheapest-txt {font-size: 14px;padding: 0 20px 0 25px;}
.cv-field .cheapest-price_txt b {font-size: 17px;}
.cv-field .phonebox,.cv-field .contactbox {max-width: 170px;}
img.cv-field_woman {max-width: 90px;}
}
/*===============================================
 *	#contract-wrap
===============================================*/
.ttl-main_flow{max-width: 884px;margin: 0 auto;}
#contract-wrap{background: url(../img/flow/bg-contract.png) left top no-repeat;padding: 40px 0 5px;margin-bottom: 40px;}
#flow-wrap{background: url(../img/flow/bg-flow.png) left top no-repeat;padding: 40px 0 5px;margin-bottom: 40px;}
img.icon-contract{width: 66px;}
img.icon-contract{width: 66px;}
.mag10{margin-bottom: 2%;}
@media only screen and (max-width: 768px) {
.ttl-main_flow{margin: 0 2%;}
#contract-wrap{padding: 30px 0 5px;margin-bottom: 30px;}
#flow-wrap{padding: 30px 0 5px;margin-bottom: 30px;}
}
@media only screen and (max-width: 568px) {
#contract-wrap{padding: 20px 0 5px;margin-bottom: 0;}
img.icon-contract {width: 40px;}
#flow-wrap{padding: 20px 0 5px;margin-bottom: 20px;}
}
@media only screen and (max-width: 320px) {
#contract-wrap {padding: 10px 0 5px;}
#flow-wrap {padding: 10px 0 5px;}
}
/*-----------------------------------------------
 *	youtube-wrap
-----------------------------------------------*/
.youtube-wrap {background: #fff;margin-bottom: 5%;}
/*-----------------------------------------------
 *	sorting
-----------------------------------------------*/
.ttl-definition {width: 58%;}
.definition-box {display: flex;justify-content: space-between;flex-wrap: wrap;align-items: flex-start;position: relative;}
.definition-box p{width: 58%}
.item1 { order: 1; }
.item2 { order: 3; }
.item3 { order: 2; }
.bg-sorting_photo{padding: 2%;}
.bg-sorting_photo img{max-width: 369px;margin-top: -60px;}
.photo_l {flex-direction:row-reverse;}
@media only screen and (max-width: 768px) {
.ttl-definition {width: 52%;}
.definition-box p {width: 53%;}
.bg-sorting_photo img {max-width: 320px;margin-top: -60px;}
}
@media only screen and (max-width: 568px) {
.ttl-definition {margin-top: 4%;width: 62%;}
.bg-sorting_photo {margin-top: 1em;padding: 0 3% 3%;}
.definition-box p {padding-top: 1em;width: 100%;}
.bg-sorting_photo img{max-width: 100px;margin-top: 0;position: absolute;}
.photo_l img{left: 0;top: 0;}
.photo_r img{right:0;top: 0;}
}
@media only screen and (max-width: 320px) {
.bg-sorting_photo img {max-width: 90px;}
.definition-box p {padding-top: 1em;}
}
/*===============================================
 * Request-wrap
===============================================*/
img.photo-staff{max-width: 319px;}
img.photo-important{max-width: 403px;}
@media only screen and (max-width: 768px) {
img.photo-staff,img.photo-important {max-width: 290px;}
}
@media only screen and (max-width: 568px) {
.picture-inset_ttl {font-size: 18px;line-height: 1.2;}
img.photo-staff, img.photo-important {max-width: 140px;}
}
@media only screen and (max-width: 375px) {
img.photo-staff, img.photo-important {max-width: 135px;}
}
/*===============================================
 * Memorial_service
===============================================*/
.blueborder-contents {background: url(../img/bg-note.png) bottom left repeat #fff;border: #346bb6 5px solid;position: relative;z-index: 5;margin-bottom: 4%;}
img.photo-memorial_service {max-width: 345px;}
img.photo-left{float: left;margin-right: 20px;}
.bereaved-contents p{margin-bottom: 20px;}
@media only screen and (max-width: 768px) {
img.photo-left {margin-right: 10px;}
img.photo-memorial_service {max-width: 240px;}
}
@media only screen and (max-width: 568px) {
img.photo-memorial_service {max-width: 150px;}
img.photo-left{margin-right: 10px;}
.bereaved-contents p{margin-bottom: 10px;}
}