@charset 'utf-8';
/*
 * name:package.css
 * author:Sovanda
*/

/* package
------------------------------------------------ */

.package__block { display: flex; flex-wrap: wrap; }
.package__lists { font-size: inherit; width: 32.3%; margin-right: 1.55%; display: block; }
.package__lists:nth-child(3n) { margin-right: 0; }
.package__lists:nth-child(n+4) { margin-top: 1.55%; }
.package__lists__box { text-align: center; padding: 5em 1.538em 5.76em; background: #fff; border-radius: .77em; border: 1px solid #e3e3e3; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); }
.package__lists__box--tlt { font-size: 1.846em; margin-bottom: 1.5em; }
.package__lists__box--img { width: 75.8%; display: block; margin: 0 auto; }
.package__lists__box--price { font-size: 2.769em; font-weight: bold; line-height: 1.2; color: var(--color-main); margin-top: .5em; }
.package__lists--btn { font-size: 1.69em; line-height: 3.3; display: block; position: relative; margin: -1.65em auto 0; width: 66.5%; z-index: 2; }
.package__lists--btn a { display: block; color: #fff; border: 1px solid var(--color-main); background: var(--color-main); border-radius: 10em; text-align: center; }
.package__lists--btn a:hover { background: #fff; color: var(--color-main); }

    @media screen and (max-width: 768px) {
        .package__lists { position: relative; width: 100%; margin-right: 0; }
        .package__lists:nth-child(n+2) { margin-top: 4%; }
        .package__lists__box { position: relative; text-align: left; padding: 1.15em 1.15em; border-radius: .385em; display: flex; flex-wrap: wrap; align-items: center; }
        .package__lists__box--tlt { font-size: 1.538em; width: calc( 50% - .75em ); position: absolute; right: .75em; top: .75em; margin: 0; text-align: center; }
        .package__lists__box--img { width: 50%; }
        .package__lists__box--price { font-size: 2.3em; width: 50%; margin: 0; text-align: center; }
        .package__lists--btn { margin: 0; line-height: 3; width: calc( 50% - 0.9375em ); font-size: 1.15em; text-align: center; position: absolute; right: 0.9375em; bottom: 0.9375em; }
        .package__lists--btn a { display: inline-block; width: 65%; }
    }

    @media screen and (max-width: 480px) {
        .package__lists { font-size: 2.7vw; }
    }