.inner1100 { max-width: 1100px; }
.inner1200 { max-width: 1200px; }
.inner { max-width: 1400px; }
.inner1500 { max-width: 1500px; }

main :where(.inner1100, .inner1200, .inner, .inner1500) { width: 94%; box-sizing: border-box; margin: auto; }

.font1 { font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; }

.bg-img-cover {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.referral .txt { line-height: 220%; }
.referral p.txt span { display: inline-block; }

.referral h3 { font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; }

p.links { width: 94%; max-width: 900px; display: flex; flex-wrap: wrap; justify-content: space-between; margin: auto; }
p.links a { font-size: 18px; width: calc(50% - 10px); height: 70px; margin: 10px 0; line-height: 70px;  display: block; background-color: #D12F18; color: #fff; box-sizing: border-box; transition: 0.5s; position: relative; }
p.links a:hover { opacity: 0.8; }
p.links a::after { top: 0; bottom: 0; margin: auto; display: block; position: absolute; content: '';
    transform: rotate(45deg);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    right: 20px; 
    width: 10px; 
    height: 10px; 
}


.intro { padding: 30px 0 150px; position: relative; text-align: center; }
.intro .intro-wrap { padding: 30% 0 0; }
.intro .pic { width: 100%; height: auto; display: block; position: absolute; z-index: -1; left: 0; top: 0; }
.intro .wbox { padding: 60px 0 30px; background: #fff; width: 94%; margin: auto; max-width: 1100px; }
.intro h3 { font-size: 20px; font-weight: 500; padding: 0 0 10px; }
.intro h3 span { font-size: 60px; display: block; }
.intro .txt { padding: 0 0 50px; }

.about { padding: 20px 0; position: relative; }
.about::before,
.about::after { position: absolute; height: 150px; width: 88%; max-width: 1400px; z-index: -1; content: ''; display: block; margin: auto; left: 0; right: 0;
    background-image: url(https://shizensozainoie.co.jp/wp2020/wp-content/themes/harmony_re/img/referral/grad-0.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.about::before { top: 0; }
.about::after { bottom: 0; transform: rotate(180deg); }
.about-wrap { max-width: 1920px; margin: auto; width: 100%; padding: 130px 0; position: relative; z-index: 1;
    background-image: url(https://shizensozainoie.co.jp/wp2020/wp-content/themes/harmony_re/img/referral/bg-0.jpg);
}
.about .box { padding: 60px 4%; display: flex; align-items: center; flex-wrap: wrap; background-color: rgba(0, 0, 0, 0.7); color: #fff; }
.about .box .col { box-sizing: border-box; }
.about .box .left { width: 22%; box-sizing: border-box; }
.about .box .left img { max-width: 200px; width: 88%; height: auto; }
.about .box .right { width: 78%; padding: 0 0 0 4%; border-left: 1px solid #fff; }
.about .box .right h4 { font-size: 30px; font-weight: 100; }
.about .box .right .txt { padding: 30px 0 0; }
.about .box .link { padding: 50px 0 0; }
.about .box .link a { color: #fff; display: inline-block; border-bottom: 2px solid #fff; }

/* ----------------------------------- friends */

.friends { padding: 200px 0 100px; text-align: center; }
.friends .banner { position: relative; max-width: 1200px; margin: auto; width: 94%; }
.friends .banner h4 { position: absolute; left: 0; top: -40px; margin: auto; width: 100%; }
.friends .banner h4 span { padding: 0 60px; line-height: 80px; height: 80px; background-color: #fff; font-weight: 500; font-size: 36px; display: inline-block; }
.friends-wrap { position: relative; padding: 0 0 100px; }
.friends-wrap::before { z-index: -1; background-color: #F4F4F4; width: 100%; height: 90%; bottom: 0; left: 0; position: absolute; display: block; content: ''; }
.friends h5 { padding: 80px 0 90px; }
.friends h5 img { width: 94%; max-width: 920px; display: inline-block; }
.friends h5 span { letter-spacing: 4px; font-weight: 500; display: block; font-size: 30px; }
.friends ul { display: flex; flex-wrap: wrap; gap: 5px; max-width: 1200px; width: 94%; margin: auto; }
.friends ul li { width: calc((100% - 10px) / 3); }
.friends .txt { font-size: 30px; padding: 50px 0; }
.friends .btn a { font-size: 16px; border-radius: 10px; padding: 0 50px; display: inline-block; height: 60px; line-height: 60px; border: 1px solid #000; }
.friends .btn a:hover { background: #000; color: #fff; }

.click { text-align: center; padding: 120px 0 80px; background-image: url(https://shizensozainoie.co.jp/wp2020/wp-content/themes/harmony_re/img/referral/bg-1.jpg); }
.click-here { top: -60px; width: 70%; position: absolute; max-width: 350px; left: 0; right: 0; margin: auto; }
.click-wrap { max-width: 900px; width: 94%; margin: auto; }
.click .wb { padding: 50px 0; background-color: #fff; position: relative; }
.click h5 { font-weight: 500; font-size: 36px; padding: 30px 0 20px; position: relative; }
.click h5::after { width: 100px; height: 2px; bottom: 0; left: 0; right: 0; margin: auto; content: ''; background-color: #D12F18; display: block; position: absolute; }
.click .txt { padding: 30px 0 20px; }
.click .links { width: 100%; padding: 0 0 20px; } 
.click .box { padding: 20px 4% 30px; background-color: #f4f4f4; }
.click .box .txt { padding: 0; font-size: 20px; border-bottom: 1px solid #dfdfdf; font-weight: 600; padding: 0 0 10px; }
.click .box .flex { padding: 30px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.click .box .flex p { padding: 0 30px; }
.click .box .flex .tel a { font-weight: 600; padding: 0 0 0 40px; font-size: 52px; line-height: 100%; display: inline-block; letter-spacing: 5px;
    background: url(https://shizensozainoie.co.jp/wp2020/wp-content/themes/harmony_re/img/referral/icn-tel.svg) no-repeat left center;
    background-size: 30px auto;
}
.click .box .flex .open { padding: 10px 0; font-size: 16px }

@media screen and (max-width: 1000px) { 
    .intro .intro-wrap { padding: 26% 0 0; }

    .about .box .right h4 { font-size: 22px; }
    .about .box .right .txt { line-height: 200%; padding: 20px 0 0; font-size: 15px; }
}

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

    p.links { width: 100%; }
    p.links a { font-size: 11px; height: 50px; line-height: 50px; margin: 5px 0; width: calc(50% - 5px); }
    p.links a::after { width: 8px; height: 8px; right: 15px; border-top: 1px solid #fff; border-right: 1px solid #fff; }

    .fv { margin-bottom: 20px; }
    .intro { overflow: hidden; padding: 30px 0 50px; }
    .intro .pic { top: 0; width: 120%; max-width: none; left: 50%; transform: translateX(-50%); }
    .intro .wbox { padding: 30px 0; }
    .intro h3 { font-size: 16px; }
    .intro h3 span { font-size: 32px; }
    .intro .txt { font-size: 14px; padding: 0 2% 30px; line-height: 200%; text-align: left; }

    .about-wrap { padding: 50px 0; }
    .about .box { width: 88%; padding: 30px 6% 20px; justify-content: center; }
    .about .box .left { width: 50%; padding: 0 0 30px; }
    .about .box .right { text-align: center; padding: 30px 0 20px; width: 100%; border-left: none; border-top: 1px solid #fff; }
    .about .box .right h4 { font-size: 20px; line-height: 180%; }
    .about .box .right .txt { text-align: left; }

    .friends { padding: 100px 0 0; }
    .friends-wrap { padding: 0 0 60px; }
    .friends .inner1500 { width: 100%; }
    .friends .banner { width: 88%; }
    .friends .banner h4 { top: -30px; }
    .friends .banner h4 span { height: 50px; line-height: 50px; font-size: 20px; padding: 0 2%; box-sizing: border-box; width: 88%; }
    .friends h5 { padding: 50px 0 30px; }
    .friends h5 span { padding: 20px 0 0; font-size: 24px; letter-spacing: 1px; } 
    .friends ul { width: 100%; }
    .friends .txt { font-size: 22px; line-height: 180%; }
    .friends .btn a { height: 50px; line-height: 50px; font-size: 14px; padding: 0 30px; }

    .click { padding: 80px 0 50px; }
    .click-here { top: -7%; }
    .click-wrap { width: 88%; }
    .click .wb { width: 88%; padding: 50px 0 30px; }
    .click h5 { font-size: 20px; }
    .click p.links a { width: 100%; font-size: 14px; }
    .click .txt { line-height: 180%; }
    .click .box .txt { font-size: 18px; padding: 0 0 5px; }
    .click .box .flex { padding: 20px 0 0; }
    .click .box .flex .tel { border: none; padding: 0 0 10px; }
    .click .box .flex .tel a { font-size: 32px; padding: 0 0 0 25px; background-size: 20px auto; letter-spacing: 2px; }
    .click .box .flex p { width: 100%; box-sizing: border-box; font-size: 14px; }
    .click .box .flex .open { font-size: 14px; padding: 0; }    
}