﻿html {font-size: 100%;}        
body {font-family: 'Assistant', sans-serif;background: #f2f2f2;direction: rtl;color: #3b4450; font-size: 100%;}
.container {background: #fff; -moz-box-shadow: 0px 0px 5px #dddddd; text-align: center; -webkit-box-shadow: 0px 0px 5px #dddddd; box-shadow: 0px 0px 5px #dddddd; width: 1200px; margin: 0 auto; padding:  0 40px 40px; box-sizing: border-box;}
.guide {margin: 0 0 30px; padding: 0; box-sizing: border-box; text-align: center; display: flex}
.guide > li {box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 20px 0px; transition: all 0.2s ease-out 0s; border-top: 4px solid #f5c532; border-radius: 3px; list-style-type: none; padding: 25px;box-sizing: border-box; text-align: center; font-size: 2.125rem;}
.guide > li > h2 {margin: 0; font-size: 1.6rem; padding-bottom: 20px;}
.guide > li > .course-text {text-align: center; margin: 0 0 30px; font-size: 1.2rem; color: #8a8a8a}
.guide > li > h3 {margin: 0; padding: 10px 0}
.guide > li > p {font-size: 1.875rem;padding-bottom: 20px;}
.guide > li > p > span {font-weight: 800;}

.wrap-header-image {width: 1200px; margin: 0 auto; box-sizing: border-box;}
.header-image {vertical-align: bottom;}
.header-image-mobile {vertical-align: bottom; display: none;}
.header {text-align: center; margin: 0 0 20px;}
.header > h1 {font-weight: 800; font-size: 3.125rem; margin: 0;}
.header > h2 {font-weight: 300; font-size: 1.875rem; margin: 5px;}
.header > h3{margin: 0;padding: 20px 20px; font-size: 1.563rem; font-weight: 800;}
.header > h3 > span {margin: 0;padding: 20px 20px; font-size: 2.125rem; font-weight: 800;}
.header > p {font-size:1.375rem; margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid #eee;}

.price {text-align: center; margin: 20px 0; font-weight: 800; font-size: 2.25rem;}
.price-btn {background: #f5c532; margin: 10px 0; border-radius: 50px; padding: 5px 20px; display: inline-block; font-size: 2.25rem; color: #000;}
.price-comment {text-align: center; font-size: 1.125rem;}

.clearfix {clear: both;}
.line-header {width: 100%; text-align: center; border-bottom: 1px solid #f5c532; line-height: 0.1em; margin: 40px 0 20px;}
.line-header span {background: #fff; padding: 0 15px; font-size: 2rem; font-weight: 800; position: relative; top: 5px;}
.sub-header-line {font-size: 1.5rem;}
.time-guide {font-size: 1.25rem; font-weight: 800; color: #565656 }
.img-resposive {max-width: 100%}

.contact-part {text-align: center; border: 1px solid #f5c532; border-radius: 70px; padding: 10px 0;}
.contact-part .contact-header {font-size: 1.5rem; font-weight: 800;}
.contact-part .contact-content a {color: #565656; text-decoration: none;}
.contact-part .contact-content a:hover {text-decoration: underline;}
.contact-part .contact-content {margin: 0; padding: 0;}
.contact-part .contact-content li {display: inline-block;  margin-left: 10px; font-size: 1.3rem;}
.contact-part .lawyer-name {font-size: 1.3rem;}

.price-box {background: #1c1d1c; color: #fff; border-radius: 30px; display: inline-block; padding: 20px 40px; font-size: 2.25rem; font-weight: 800; }

.price-box > .price-box-desc {font-weight: 800; font-size: 2.125rem; color: #e1bc5a}
.payment-method {font-size: 1.875rem; padding: 20px;}
.payment-method > p {font-size: 1.5rem;padding: 10px 0; margin: 10px 0;}
.payment-method > div {text-decoration: underline; font-weight: 800;}
.offer-limited {border-top: 1px solid #eee; margin: 10px 0 10px; padding: 20px 0 20px; text-align: right; border-bottom: 1px solid #eee;}
.call-to-aciton p {font-size: 1.5rem;font-weight: 900;}
section {padding: 10px 0;}
.btn-gradient {background: linear-gradient(90deg, #ffd901 0%, #ffc203 100%);color: #000; font-size: 1.8rem; font-weight: 900; border-radius: 50px; padding: 15px 30px;text-decoration: none; display: inline-block;margin: 10px;}
.btn-gradient:hover {background: linear-gradient(90deg,#ffc203 0%,#ffd901 100%);}
.guide-list-colmun {margin: 30px 0; padding: 0; border: 1px solid #eee;border-radius: 10px;}
.guide-list-colmun li {font-size: 1.3rem; text-align: right; list-style-type: none; padding: 15px; margin: 0; }
.guide-list-colmun li.text-center {text-align: center;}
 h4 {text-align: right; margin: 0; padding: 0; color: #b78c00;font-size: 1.6rem;text-align: center;}
.sub-title-header {font-weight: 700; font-size: 2rem; color: #c9990d; margin-bottom: 20px;}
.guide li {margin: 30px 10px;flex: 1;}
.guide-list {margin: 0 0;padding: 0;}
.guide-list li {font-size: 1.125rem;text-align: right; list-style-type: none; margin: 15px 0; padding: 0; border-bottom: 1px solid #eee; padding-bottom: 15px;}
.guide-list li:last-child {border-bottom: 0; padding-bottom: 0; margin-bottom: 5px;}

 .guide-list-colmun {margin: 30px 0; padding: 0; border: 1px solid #eee; border-radius: 10px;}
.guide-list-colmun li {font-size: 1.3rem; text-align: right; list-style-type: none; padding: 15px;margin: 0;}

.guide-list-single {font-size: 1.2rem; text-align: right;}

.youtube-box {display: flex; align-items: center; padding: 20px;}
.youtube-box > div {margin: 10px; flex: 1;}
.question-list {border-bottom: 1px solid #eee; margin: 0; padding: 0;}
.question-list li {padding: 0; margin: 0; font-size: 1.2rem; text-align: right; list-style-type: none; padding: 20px 0;}
.question-list li a {font-weight: 700; color: #f5c532}

.quote-list {margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap;}
.quote-list li {flex: 45% 0; list-style-type: none; border: 1px solid #eee; border-radius: 10px; padding: 10px; margin: 10px;}

.bonus-item {font-weight: 900; font-size: 1.875rem; border: 2px dashed #eee; padding: 20px; border-radius: 20px;}
.bonus-item > span {color: #f5c532;}
.bonus-item > p {font-weight: 500; font-size: 1.375rem;}

.footer {text-align: center;}



@media screen and (max-width: 992px)
{
    .container {width:100%; padding: 20px}
    .wrap-header-image {width: 100%;}
    .header > h1 {font-size: 1.5rem;}
    .header > h2 {font-weight: 500; font-size: 1.3rem; margin: 5px;}
    .header > h3 {font-size: 1.3rem; font-weight: 800;}
    .header > h3 > span {font-size: 2.5rem; font-weight: 800; display: block;}
    .price-box > .price-box-desc {font-size:1.3rem;}
    .price-box {font-size: 1.3rem;}
    .payment-method {font-size: 1.3rem; padding: 10px 0;}
    .payment-method > p  {font-size: 1.3rem; margin: 10px 0;}
    .guide > li > p {font-size: 1.6rem; font-weight: 600;}
    .header-image {vertical-align: bottom;display: none;}
    .header-image-mobile {vertical-align: bottom;display: block;width: 100%;}
    .offer-limited {text-align: center;}
    .guide {flex-direction: column}
    .btn-gradient {font-size: 1.2rem; padding: 20px 30px;}
    .sub-header-line {font-size: 1.25rem;}
    .youtube-box {flex-direction: column}
    .youtube-box > div {width: 100%; margin-bottom: 20px;}
     .contact-part {margin: 20px 0;}
     .contact-part .contact-content { display: flex; flex-direction: column}
     .contact-part .lawyer-name {font-size: 1rem;}
    
    .contact-part .contact-content li {font-size: 1rem;}
    .guide {margin-bottom: 30px;}
     .guide-list li:first-child {margin-top: 20px;}
    .guide li {padding: 10px; font-size: 1rem; margin: 0 0 20px 0;}
    .guide-list-single  {list-style-type: none; margin: 0; padding: 0;}
    .header {margin: 0;}
    section {padding: 0 0 10px 0;}
    .line-header {margin: 10px 0;}
    .line-header span {font-size: 1rem; top: 2px;}
    .sub-header-line {font-size: 1rem; margin-bottom: 25px;}
    .sub-title-header {font-size: 1.4rem;}
    .guide > li > h2 {font-size: 1.125rem; padding-bottom: 10px}
    .guide > li > .course-text {margin: 0; padding: 0; font-size: 1rem;}
    .guide-list li {margin-bottom: 5px;}
    .call-to-aciton p {font-size: 1.125rem;}
    h4 {font-size: 1.2rem; margin: 20px 0;}
    .guide-list-colmun {margin: 25px 0 25px 0}
    .guide-list-colmun li {font-size: 1rem;}
    .question-list li {font-size: 1rem}
    .guide-list-single li {margin-bottom: 0;}
    .quote-list {flex-direction: column}
    .quote-list {flex: 1;}
    .bonus-item {padding: 10px; font-size: 1.125rem;}
    .bonus-item > p {font-weight: 500; font-size: 1rem;}

  }