.referral_page .inner900 { width: 88%; max-width: 900px; margin: auto; }
.referral_page .inner { width: 94%; max-width: 1200px; margin: auto; }
.font1 { font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; }
.flex { display: flex; flex-wrap: wrap; }
.referral_page .txt { font-size: 16px; line-height: 200%; }

.h3_common { text-align: center; font-size: 20px; font-weight: 500; line-height: 100%;
    font-family: "Adobe Arabic", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
}
.h3_common span { display: block; font-size: 120px; line-height: 80%; font-weight: 100; letter-spacing: 5px; }

.firstview .info .cat,
.firstview .info h2,
.present .figure h4,
.flow ul li .txt,
.present .col .txt,
.overview h3,
.overview ul li h4,
.overview .notes h5 { font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; }

.firstview { align-items: center; display: flex; flex-wrap: wrap; padding: 100px 0; }
.firstview .col { width: 50%; box-sizing: border-box; }
.firstview .info { justify-content: flex-end; padding: 0 50px 0 30px; }
.firstview .info .box { width: 100%; max-width: 640px; }
.firstview .info .cat { height: 50px; line-height: 50px; font-size: 24px; padding: 0 20px; color: #fff; background-color: #D12F18; text-align: center; display: inline-block; }
.firstview .info h2 { padding: 10px 0; font-size: 44px; font-weight: 400; }

.present { text-align: center; position: relative; padding: 30px 0 0; border-bottom: 1px solid #CCCCCC; }
.present::before { height: 540px; width: 100%;  content: ''; display: block; position: absolute; z-index: -1; 
    left: 0;
    top: 0;
    background: url(https://shizensozainoie.co.jp/wp2020/wp-content/themes/harmony_re/img/referral/pages/bg-0.jpg) no-repeat center center;
    background-size:  cover;
}
.present h3 { padding: 200px 0 0;
    background: url(https://shizensozainoie.co.jp/wp2020/wp-content/themes/harmony_re/img/referral/pages/txt-present.png) no-repeat center top;
    background-size: auto 100%;
}
.present h3 span { letter-spacing: 3px; font-size: 18px; color: #fff; font-weight: 400; }
.present .wb { margin-top: 20px; padding: 90px 60px; box-sizing: border-box; background-color: #fff; }
.present .wb .flex { justify-content: space-between; }
.present .x { width: 70px; padding: 50px 0 0; }
.present .col { width: 43%; }
.present .figure { position: relative; }
.present .figure h4 { font-size: 24px; height: 50px; line-height: 50px; top: -25px; font-weight: 500; position: absolute; width: 88%; max-width: 300px;  background-color: #000; color: #fff; margin: auto; left: 0; right: 0; }
.present .col .txt { padding: 10px 0 20px; font-size: 20px; }
.present .col .red { font-family: "Noto Serif JP", serif; font-weight: 600; font-size: 40px; line-height: 140%; }
.present .col .red span { font-weight: 100; font-size: 80px; letter-spacing: 0; }
.present .right .figure h4 { background-color: #666666; }
.present .payment { margin: 50px 0 0; padding: 20px; border: 1px solid #D2D2D2; }
.present .payment .money {  font-size: 20px; }
.present .payment .money img { width: 40px; display: inline-block; vertical-align: middle; margin-right: 10px; }
.present .payment .figure { padding: 10px 0 0; }
.present .payment .figure img { max-width: 520px; width: 100%; display: inline-block; }
.present .multi { display: flex; }
.present .multi .red_bg { height: 35px; line-height: 35px; font-size: 24px; background-color: #e72f18; color: #fff; }
.present .multi .col { width: 100%; box-sizing: border-box; padding: 0 20px; }
.present .multi .col:first-child { border-right: 1px solid #e72f18; }
.present .multi .red { font-size: 24px; padding: 10px 0 0; }
.present .multi .red span { font-size: 60px; line-height: 100%; }

.flow { padding: 100px 0; }
.flow ul { padding: 70px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.flow ul li.circle { width: 320px; height: 320px; z-index: 0; display: flex; justify-content: center; align-items: center; position: relative; text-align: center; padding: 40px 30px; border-radius: 50%; border: 1px solid #000; box-sizing: border-box; }
.flow ul li.arw { position: relative; width: 10px; height: 20px; }
.flow ul li.arw p { height: 10px; border-bottom: 1px solid #000; background-color: #fff; width: 16vw; max-width: 220px; position: relative; left: 50%; transform: translateX(-50%); z-index: 1; content: ''; display: block; }
.flow ul li.arw p::after { transform: rotate(20deg); right: 0; width: 25px; bottom: 4px; height: 1px; background-color: #000; content: ''; display: block; position: absolute; }
.flow ul li .step {  font-size: 30px; top: 50px; left: 0; width: 100%; text-align: center; position: absolute; color: #D12F18; letter-spacing: 2px; }
.flow ul li .txt { padding: 40px 0 0; font-size: 18px; }

.overview { padding: 100px 0 150px; background-color: #F4F4F4; } 
.overview h3 { padding: 0 0 30px; font-size: 28px; text-align: center; font-weight: 500; }
.overview ul { justify-content: space-between; }
.overview ul li { width: calc((100% - 45px) / 3); padding: 30px 40px 50px; background-color: #fff; max-width: 370px; box-sizing: border-box; }
.overview ul li h4 { border-bottom: 1px solid #CCCCCC; font-size: 24px; font-weight: 500; text-align: center; padding: 0 0 10px; }
.overview ul li div { padding: 15px 0 0; }
.overview ul li p { line-height: 180%; }
.overview ul li .big { font-weight: 600; padding: 5px 0; }
.overview .notes { padding: 50px 0 0; }
.overview .notes h5 { font-size: 20px; font-weight: 500; border-bottom: 1px solid #CCCCCC; padding: 0 0 5px; }
.overview .notes .txt { padding: 20px 0 0; }

.faq { padding: 120px 0; }
.faq ul { width: 94%; font-size: 20px; padding: 50px 0 0; max-width: 900px; margin: auto; }
.faq ul li { margin: 0 0 30px; padding: 20px 30px; box-shadow: 0px 5px 20px -10px #888; }
.faq ul li p { display: flex; padding: 10px 0; }
.faq ul li p .red { padding: 0 10px 0 0; }
.faq ul li p span { display: block; }
.faq ul li .q  { cursor: pointer; }
.faq ul li .a { font-size: 16px; display: none; }
.faq ul li .a .red { font-size: 20px; line-height: 100%; } 
.faq ul li .q .red { display: inline-block; font-size: 24px; line-height: 100%; }

@media screen and (max-width: 1200px) {  
    
    .flow ul li.circle { width: 280px; height: 280px; padding: 20px; }
    .flow ul li .txt { font-size: 16px; }
    .flow ul li .step { font-size: 28px; }

    .present .multi .col { padding: 0 0 0 15px; }
    .present .multi .col:first-child { padding: 0 15px 0 0; }
    .present .multi .red_bg { font-size: 20px; }
    .present .multi .red span { font-size: 38px !important; }
    .present .multi .red { font-size: 20px !important; }
}

@media screen and (max-width: 1000px) { 
    .firstview .info { padding: 0 30px; }
    .firstview .info .cat { font-size: 20px; line-height: 40px; height: 40px; }
    .firstview .info h2 { font-size: 34px; }
    .firstview .info .txt { font-size: 14px; }

    .present h3 { padding: 150px 0 0; }
    .present .wb { padding: 50px 30px; }
    .present .figure h4 { font-size: 20px; }
    .present .x { width: 40px; }
    .present .col { width: 45%; }
    .present .col .txt { font-size: 16px; }
    .present .col .red { font-size: 28px; }
    .present .col .red span { font-size: 54px; }

    .flow ul { display: block; }
    .flow ul li { margin: auto; }
    .flow ul li.arw { height: 30px; width: 100%; text-align: center; }
    .flow ul li.arw p { width: 100px; left: 0; display: inline-block; transform: rotate(90deg); }

    .overview ul li { padding: 30px 20px; }
    .overview ul li h4 { font-size: 20px; }
    .overview ul li p { font-size: 14px; }
}

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

    .h3_common { font-size: 16px; }
    .h3_common span { font-size: 80px; }
    
   .referral_page .txt { font-size: 14px; }
    
    .firstview { padding: 50px 0 0; }
    .firstview .col { width: 100%; }
    .firstview .pic { margin: auto; max-width: 520px; padding: 30px 0; text-align: right; }
    .firstview .pic img { width: 94%; display: inline-block; }
    .firstview .info { padding: 0 6%; justify-content: center; }
    .firstview .info .box { max-width: 480px; }
    .firstview .info h2 { font-size: 28px; }
    .firstview .info .cat { font-size: 16px; height: 35px; line-height: 35px; }

    .present { padding: 30px 0 50px; }
    .present::before { height: 25%; }
    .present h3 { padding: 100px 0 0; }
    .present .wb { padding: 50px 4% 30px; }
    .present .wb .flex { justify-content: center; max-width: 480px; margin: auto; }
    .present .col { width: 100%; }
    .present .figure h4 { width: 80%; top: -20px; font-size: 18px; height: 40px; line-height: 40px; }
    .present .col .red { font-size: 32px; }
    .present .col .red span { font-size: 60px; }
    .present .x { width: 60px; padding: 10% 0 50px; }
    .present .payment { padding: 20px 4%; }
    .present .payment .money { font-size: 16px; }
    .present .payment .money img { width: 30px; }

    .flow { padding: 50px 0; }
    .flow ul li.circle { width: 240px; height: 240px; }
    .flow ul li .txt { font-size: 14px; }
    .flow ul li .step { font-size: 24px; }
    .flow ul li.arw p { width: 90px; }
    
    .overview { padding: 50px 0; }
    .overview  .inner { width: 88%; }
    .overview h3 { font-size: 26px; }
    .overview ul li { width: 100%; max-width: none; margin: 0 0 20px; }
 
    .overview .notes h5 { font-size: 18px; text-align: center; }

    .faq { padding: 60px 0; }
    .faq ul li { padding: 15px 20px; margin: 0 0 20px; }
    .faq ul li p { font-size: 16px; padding: 5px 0; }
    .faq ul li .q .red { font-size: 20px; }
    .faq ul li .a { font-size: 14px; }
    .faq ul li .a span { font-size: 14px; }
}