/***** COMMON *****/
:root {
	--color-beige: #EFEDDE;
    --color-light-green: #EFF7ED;
    --color-green: #21AF80;
    --color-brown: #6A6161;
    --color-gray: #C9C3C3;
    --margin: 5em;
}
.wrapper {
    padding: 0 2%;
}
.wrapper * {
    box-sizing: border-box;
}
.wrapper a:hover {
    opacity: .8;
}
.taishin-header{
    text-align: center;
    margin-top: 80px;
}
section {
    max-width: 1000px;
    margin: 6em auto;
    padding: 0;
    position: relative;
}
section.about {
    margin-top: 2em;
}
#footer_upper {
    margin-top: 100px !important;
}
section.strong-housing h2::before{
    content: "";
    display: inline-block;
}
section.strong-housing h2::after{
    content: "STRONG HOUSING";
    display: block;
    font-size: .6em;
}
section.seimic-analysis h2::after{
    content: "SEIMIC ANALYSIS";
    display: block;
    font-size: .6em;
}
.wrapper h3 {
    color: inherit;
    line-height: 1.8em;
    margin: 3em 0;
    font-family: inherit;
}
h3 span{
    border-bottom: 2px solid #ccc;
    padding: 0 .5em;
}
.taishin-header h3::after,
section.about h3::after {
    content: none;
}
p + p {
    margin-top: 1em;
}
span span {
    padding-left: 0 !important;
}
.font-small {
    font-size: 0.85em;
}
.font-x-small {
    font-size: 0.75em;
}
.font-color-green {
    color: var(--color-green);
    font-weight: bold;
}
.textbox {
    max-width: 750px;
    margin: auto;
}
.box-gray {
    border: 5px solid var(--color-gray);
    padding: 2em;
    background: #fff;
}
.colored-bg {
    background: var(--color-beige);
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}
.rounded-100 {
    border-radius: 100px;
}
.rounded-10 {
    border-radius: 10px;
}
.float {
    position: absolute;
}
.underline {
    border-bottom: 1px solid var(--color-gray);
    padding: 0 .2em;
    letter-spacing: .1em;
    line-height: 2em;
}
.sp-br {
    border: none;
    padding: 0;
}


/***** section.about *****/
section.about .float {
    width: 45%;
    right: 0;
    z-index: 1;
}
section.about .float br {
    content: "";
    display: block;
    height: 1em;
}
section.about ul.flow{
    text-align: center;
    padding: 6em 2em;
    margin-bottom: var(--margin);
    width: 100%;
    position: relative;
    background: linear-gradient(to top right, var(--color-light-green) 50%, #fff 0);
}
section.about ul.flow::after {
    content: "";
    background-image: url("https://design.sakabe.co.jp/images/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    width: 30%;
    min-height: 80px;
    margin: 2em;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    display: inline-block;
}
section.about ul.flow li {
    margin-bottom: 1em;
    width: calc(100%/4);
}
section.about ul.flow li:first-child {
}
section.about ul.flow li:nth-child(2) {
    margin-left: calc(100%/6.2);
}
section.about ul.flow li:nth-child(3) {
    margin-left: calc(100%/6.2*2);
}
section.about ul.flow li:nth-child(4) {
    margin-left: calc(100%/6.2*3);
}
section.about ul.flow li:nth-child(5) {
    margin-left: calc(100%/6.2*4);
    padding-top: 0.75em;
    width: calc(100%/8);
}
section.about ul.flow li:nth-child(6) {
    margin-left: calc((100%/6.2*5) - (100%/16));
    margin-bottom: 0;
}
section.about ul.flow li span{
    display: block;
    font-weight: 400;
}
section.about ul.flow li strong{
    font-size: 1.5em;
    font-weight: normal;
    background: var(--color-green);
    border-radius: 10px;
    display: inline-block;
    width: 100%;
    color: #fff;
}
section.about ul.flow li:nth-child(5) strong{
    background: var(--color-brown);
    border-radius: 100px;
}
section.about .colored-bg {
    background: linear-gradient(0deg, var(--color-beige) 60%, #fff 0);
    padding-bottom: var(--margin);
}
section.about .colored-bg .flexbox {
    max-width: 1000px;
    margin: auto;
    gap: 5%;
    width: 100%;
    padding: 0 2%;
}
section.about .colored-bg .flexbox .text,
section.about .colored-bg .flexbox .img{
    width: 50%;
}
section.about .colored-bg .flexbox .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3em;
}
section.about .colored-bg .flexbox .img{
    display: flex;
    align-items: center;
}
section.about .colored-bg .flexbox .text h3 {
    margin: 0 0 2em 0;
}
section.about .colored-bg .flexbox .text .lower {
    padding: 0 2em;
}
section.about .colored-bg .flexbox .text .lower a div{
    width: auto;
    margin-top: 1.5em;
    font-weight: 400;
}
section.about .box-gray h3{
    text-align: center;
}
section.about .box-gray h3 .sp-br{
    display: block;
}

/***** section.strong-housing *****/

section.strong-housing .box-gray {
    max-width: 500px;
    margin: 0 auto var(--margin);
    font-weight: 400;
}
section.strong-housing .box-gray + .flexbox {
    width: 100%;
    gap: 7em;
    margin-bottom: .7em;
}
section.strong-housing .box-gray + .flexbox .font-x-small {
    font-weight: 400;
}
section.strong-housing .box-gray + .flexbox p.rounded-100{
    background: var(--color-beige);
    min-width: 50%;
    padding: 1em 3em;
}
section.strong-housing .box-gray + .flexbox p.rounded-100 span:last-of-type strong{
    color: #1487D4;
}
section.strong-housing .colored-bg {
    background: linear-gradient(to top left, transparent 50%, #fff 0);
    position: relative;
    width: 100%;
    margin: auto;
}
section.strong-housing .colored-bg::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--color-beige), var(--color-green));
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
section.strong-housing div.levels {
    margin-bottom: var(--margin);
    gap: 4em;
    max-width: 1000px;
    margin: auto;
    padding: 1.5em 2em 2.5em;
}
section.strong-housing div.levels .flexbox{
    flex-direction: column;
    width: calc(100%/3);
    justify-content:flex-start;
    align-items: center;
    padding: 1.5em;
}
section.strong-housing div.levels .level01 {
    background: var(--color-beige);
    position: relative;
}
section.strong-housing div.levels .level01::before {
    content: "";
    position: absolute;
    left: 0;
    background-image: url("https://design.sakabe.co.jp/wp/wp-content/themes/sakabe_design/img/taishin/taishin-deco-arrow2.svg");
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    display: inline-block;
    top: -35px;
    right: 0;
    left: 0;
    margin: auto;
}
section.strong-housing div.levels .flexbox p:first-child {
    position: relative;
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
section.strong-housing div.levels .flexbox p:first-child strong {
    position: relative;
    z-index:1;
}
section.strong-housing div.levels .flexbox p:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    background-image: url("https://design.sakabe.co.jp/wp/wp-content/themes/sakabe_design/img/taishin/taishin-deco-house.svg");
    background-repeat: no-repeat;
    background-position: center 20%;
    background-size: contain;
    width: 100%;
    height: 100%;
    display: inline-block;
}
section.strong-housing div.levels .flexbox p:first-child{
    text-align: center;
    font-size: 1.3em;
}
section.strong-housing div.levels .flexbox p:first-child span{
    display: block;
    font-size: 2em;
    line-height: 1.1em;
}
section.strong-housing div.levels .flexbox p:nth-child(2){
    margin-bottom: auto;
}
section.strong-housing div.levels .flexbox p.font-x-small {
    height: auto;
    margin-bottom: 1em;
    font-weight: 400;
}
section.strong-housing div.levels .flexbox p.font-x-small br {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
}
section.strong-housing div.levels .rounded-100 {
    padding: .5em 1em;
}
section.strong-housing div.levels .underline {
    border-bottom: 1px solid #4C4F51;
}
section.strong-housing div.levels .rounded-100{
    margin-top: auto;
}
section.strong-housing div.levels .level01 .rounded-100{
    background: rgb(255 255 255 / 50%);
    color: #1487D4;
}
section.strong-housing div.levels .level02 {
    background: #A4D6BC;
}
section.strong-housing div.levels .level02 .rounded-100,
section.strong-housing div.levels .level03 .rounded-100{
    background: #F6DC1D;
}
section.strong-housing div.levels .level03 {
    background: var(--color-green);
}
section.strong-housing div.levels .level03 p.font-x-small{
    color: #fff;
}
section.strong-housing div.levels .level03 p.font-x-small .underline{
    border-color: #fff;
}
section.strong-housing .level-mark {
    justify-content:space-between;
    align-items: center;
    padding: 2em 1em var(--margin);
    font-weight: bold;
    font-size: 1.3em;
}
section.strong-housing .level-mark p {
    margin: 0;
}
section.strong-housing .level-mark p:nth-child(2) {
    position: relative;
}
section.strong-housing .level-mark p:nth-child(2)::before,
section.strong-housing .level-mark p:nth-child(2)::after{
    content: "";
    position: absolute;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 130%;
    height: 38px;
}
section.strong-housing .level-mark p:nth-child(2)::before {
    right: 150%;
    background-image: url("https://design.sakabe.co.jp/wp/wp-content/themes/sakabe_design/img/taishin/taishin-deco-level-mark-arrow-gray.svg");
}
section.strong-housing .level-mark p:nth-child(2)::after {
    left: 150%;
    background-image: url("https://design.sakabe.co.jp/wp/wp-content/themes/sakabe_design/img/taishin/taishin-deco-level-mark-arrow-green.svg");
}
section.strong-housing .light-green-box {
    font-weight: 400;
    display: inline-block;
    margin-top: 3em;
}

/***** section.seimic-analysis *****/

section.seimic-analysis {
    margin-bottom: 200px;
}
section.seimic-analysis p.font-x-small.textbox {
    margin-top: 3em;
    font-weight: 400;
    line-height: 2em;
}
section.seimic-analysis p.font-x-small.textbox span.underline {
    margin-bottom: 1em !important;
}
section.seimic-analysis .partner{
    right: 2em;
    top: var(--margin);
    font-size: .9em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 1em;
}
section.seimic-analysis .partner img {
    height: 4em;
    width: auto !important;
}

section.seimic-analysis .colored-bg {
    margin-top: var(--margin);
    margin-bottom: var(--margin);
    position: relative;
    padding:  var(--margin) 0;
}
section.seimic-analysis h4 {
    background: var(--color-brown);
    display: inline-block;
    width: 30%;
    font-weight: 400;
    padding: 0 2em;
    color: #fff;
    margin-bottom: var(--margin);
    text-align: right;
    position: relative;
    height: 2em;
    font-size: 1.3em;
}
section.seimic-analysis h4::after {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: var(--color-brown) var(--color-beige) var(--color-brown) transparent;
    border-width: 0 2em 2em 0;
    margin-left: 1.5em;
}
section.seimic-analysis .plans{
    flex-direction: column;
    padding: 2em;
    text-align: center;
    max-width: 750px;
    margin: auto;
}
section.seimic-analysis .plans .flexbox {
    height: 200px;
    padding: 1em;
    align-items: center;
    gap: 4em;
}
section.seimic-analysis .plans .upper {
    border-bottom: 1px solid var(--color-brown);
}
section.seimic-analysis .plans .img01{
    width: 250px;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 0;
    color: #fff;
    font-weight: 500;
    font-size: 1.1em;
}
section.seimic-analysis .plans .img01::before{
    content: "";
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    mask-image: url("https://design.sakabe.co.jp/wp/wp-content/themes/sakabe_design/img/taishin/taishin-deco-house.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("https://design.sakabe.co.jp/wp/wp-content/themes/sakabe_design/img/taishin/taishin-deco-house.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    z-index: -1;
}
section.seimic-analysis .plans .upper .img01::before {
    background-color: #EF9946;
}
section.seimic-analysis .plans .lower .img01::before {
    background-color: #37895D;
}
section.seimic-analysis .plans .img01 span {
    font-size: 2em;
    line-height: 1em;
}
section.seimic-analysis .plans .img02 {
    position: relative;
    width: 20px;
}
section.seimic-analysis .plans .img02 span{
    visibility: hidden;
}
section.seimic-analysis .plans .img02::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("https://design.sakabe.co.jp/wp/wp-content/themes/sakabe_design/img/taishin/taishin-deco-equall.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 100%;
    display: inline-block;
}
section.seimic-analysis .plans .text{
    width: 50%;
    font-weight: 400;
    font-size: 1.2em;
}
section.seimic-analysis .plans .lower .text span.rounded-100{
    display: block;
    background: #fff;
    margin-bottom: 1em;
    position: relative;
    padding: .3em 1em;
    font-size: .9em;
}
section.seimic-analysis .plans .lower .text span.rounded-100::after {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    border-width: .6em .6em 0 .6em;
    bottom: -.6em;
    margin: auto;
    left: 0;
    right: 0;
    width: 0;
    height: 0;
}
section.seimic-analysis .plans .text span.underline{
    display: inline-block;
    padding: 0 .3em;
    font-weight: 600;
}
section.seimic-analysis h5 {
    margin-top: var(--margin) !important;
    margin-bottom: 1em !important;
    font-size: 1.2em;
}
section.seimic-analysis h5 span {
    background: var(--color-brown);
    color: #fff;
    padding: .2em .5em;
    font-size: .8em;
    font-weight: 400;
    margin-right: 1em;
}
section.seimic-analysis h5 + p {
    font-weight: 400;
}
section.seimic-analysis figure.movie {
    margin-top: 2em !important;
}
section.seimic-analysis figure.movie video{
    width: 100%;
}
section.seimic-analysis h5,
section.seimic-analysis h5 + p,
section.seimic-analysis figure.movie {
    max-width: 750px;
    margin: auto;
}


/***** MEDIA QUERY *****/

@media screen and (max-width: 1000px) {
    :root {
        --margin: 2em;
    }
    .sp-replace {
        color: #fff;
        position: relative;
    }
    .sp-replace::after {
        content: "下";
        color: #000 !important;
        position: absolute;
        left: 0;
    }
    .float {
        position: relative;
        width: 100%;
    }
    section.about p.float {
        width: 100%;
        margin-bottom: 3em;
    }
    section.about ul.flow li strong{
        font-size: 1.2em;
    }
    section.about ul.flow li {
        width: calc(100%/3);
    }
    section.about ul.flow li:nth-child(2) {
        margin-left: calc(100%/7);
    }
    section.about ul.flow li:nth-child(3) {
        margin-left: calc(100%/7*2);
    }
    section.about ul.flow li:nth-child(4) {
        margin-left: calc(100%/7*3);
    }
    section.about ul.flow li:nth-child(5) {
        margin-left: calc(100%/7*4.7);
        padding-top: 0.75em;
        width: calc(100%/8);
    }
    section.about ul.flow li:nth-child(6) {
        margin-left: calc((100%/7*5.3) - (100%/16));
        margin-bottom: 0;
    }
    section.about .colored-bg .flexbox {
        display: block;
        position: relative;
    }
    section.about .colored-bg .flexbox .text{
        width: 100%;
        position: relative;
        gap: 1em;
    }
    section.about .colored-bg .flexbox .img {
        position: absolute;
        bottom: 0;
        right: 2%;
    }
    section.about .colored-bg .flexbox .img img{
        display: none;
    }
    section.about .colored-bg .flexbox .text .lower {
        padding: 0 2em;
        width: 100%;
        text-align: center;
    }
    section.about .colored-bg .flexbox .text .lower p:first-child {
        margin-top: 1em;
    }
    section.about .colored-bg .flexbox .text .lower::before{
        content: "";
        background-image: url("https://design.sakabe.co.jp/wp/wp-content/uploads/2023/05/taishin-doc-01-696x1024.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 600px;
        display: inline-block;
    }
    section.strong-housing .colored-bg {
        background: none;
    }
    section.strong-housing .colored-bg::after {
        background: none;
    }
    section.strong-housing .box-gray + .flexbox {
        width: 100%;
        gap: 2em;
        margin-bottom: .7em;
    }
    section.strong-housing .box-gray + .flexbox p.rounded-100{
        min-width: 65%;
        padding: 1em 3em;
        position: relative;
    }
    section.strong-housing div.levels .level01::before {
        display: none;
    }
    section.strong-housing .box-gray + .flexbox p.rounded-100::before {
        content: "";
        position: absolute;
        left: 0;
        background-image: url("https://design.sakabe.co.jp/wp/wp-content/themes/sakabe_design/img/taishin/taishin-deco-arrow2.svg");
        background-repeat: no-repeat;
        width: 50px;
        height: 50px;
        display: inline-block;
        bottom: -40px;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 1;
    }
    section.strong-housing div.levels {
        display: block;
    }
    section.strong-housing div.levels .flexbox{
        width: 100%;
        padding: 1.5em;
        margin-bottom: 1.5em;
        flex-direction: row;
        flex-wrap: wrap;
    }
    section.strong-housing div.levels .flexbox p {
        width: 50%;
    }
    section.strong-housing div.levels .flexbox p:first-child {
        width: 50%;
    }
    section.strong-housing div.levels .flexbox p.rounded-100{
        width: 40%;
        text-align: center;
        margin: 2em auto 0;
    }
    section.strong-housing .level-mark {
        display: none;
    }
    section.strong-housing .level-mark p:nth-child(2)::before {
        max-width: 150px; 
    }
    section.strong-housing .level-mark p:nth-child(2)::after {
        max-width: 150px;
    }
    section.strong-housing .light-green-box {
        display: block;
        width: 45%;
        margin: 3em auto 0;
    }
    section.seimic-analysis .colored-bg p,
    section.seimic-analysis .colored-bg h5{
        padding: 0 2% 0;
    }
    section.seimic-analysis h4 {
        width: auto;
        font-size: 1.1em;
        text-align: left;
    }
    section.seimic-analysis .partner{
        top: .5em;
        right: 2%;
        gap: .5em;
        position: absolute;
        width: auto;
        padding: 0 !important;
    }
}

@media screen and (max-width: 750px) {
    .wrapper {
        padding: 0 .8em;
    }
    span.sp-br {
        display: block;
    }
    span span {
        padding-left: .5em !important;
    }
    .box-gray {
        padding: 2em 1.2em;
    }
    .wrapper h3 {
        line-height: 1.8em;
    }
    section.about ul.flow {
        padding: 1em !important;
    }
    section.about ul.flow li strong{
        font-size: 1.1em;
    }
    section.about ul.flow li {
        width: 100%;
        margin-left: 0 !important;
    }
    section.about ul.flow li:nth-child(5) {
        padding-top: 0.75em;
        width: 50%;
        min-width: 150px;
        margin-right: auto !important;
        margin-left: auto !important;
    }
    section.about ul.flow li:nth-child(6) {
        margin-left: calc((100%/9.5*5.3) - (100%/16));
        margin-bottom: 0;
    }
    section.about ul.flow::after {
        margin: 1em;
        display: none;
    }
    section.about .colored-bg .flexbox .text .lower::before{
        height: 400px;
    }
    section.about .colored-bg .flexbox .text .lower a div{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2em;
        width: 75%;
        margin: 2em auto 0;
    }
    section.about .colored-bg .flexbox .text .lower a div::after {
        width: 1.5em;
        height: 1.5em;
        margin-left: 0;
        display: inline-block;
    }
    section.strong-housing .box-gray {
        margin-bottom: 0;
    }
    section.strong-housing .box-gray + .flexbox {
        background: var(--color-gray);
        padding: 1em .5em;
        position: relative;
        max-width: 500px;
        margin: auto;
        display: block;
    }
    section.strong-housing .box-gray + .flexbox::before {
        content: "";
        position: absolute;
        left: 0;
        background-image: url("https://design.sakabe.co.jp/wp/wp-content/themes/sakabe_design/img/taishin/taishin-deco-arrow2.svg");
        background-repeat: no-repeat;
        width: 50px;
        height: 50px;
        display: inline-block;
        bottom: -40px;
        right: 0;
        left: 0;
        margin: auto;
        z-index: 1;
    }
    section.strong-housing .box-gray + .flexbox p.rounded-100{
        padding: 1em 2em;
        text-align: center;
    }
    section.strong-housing .box-gray + .flexbox p.rounded-100::before{
        display: none;
    }
    section.strong-housing .box-gray + .flexbox .font-x-small {
        padding: 1em 2em;
    }
    section.strong-housing .box-gray + .flexbox .font-x-small .underline {
        border-color: #fff;
    }
    section.strong-housing div.levels {
        padding: 1.5em 0;
    }
    section.strong-housing div.levels .flexbox p,
    section.strong-housing div.levels .flexbox p:first-child,
    section.strong-housing div.levels .flexbox p.rounded-100{
        width: 100%;
    }
    section.strong-housing .light-green-box {
        width: 100%;
        margin: 3em auto 2em;
    }
    section.seimic-analysis .colored-bg p,
    section.seimic-analysis .colored-bg h5{
        padding: 0 .8em 0;
    }
    section.seimic-analysis .partner{
        position: relative;
        top: 0;
        right: 0;
        font-size: .7em;
        justify-content: right;
        margin: 0 1.5em 3em 0;
    }
    section.seimic-analysis h4 {
        margin-bottom: 1em;
    }
    section.seimic-analysis .plans {
        padding: .8em;
    }
    section.seimic-analysis .plans .flexbox{
        display: flex;
        gap: 1em;
        padding: 1em 0 1em;
        height: 170px;
    }
    section.seimic-analysis .plans .img01{
        width: 30%;
        font-size: .9em !important;
    }
    section.seimic-analysis .plans .img01 span{
        font-size: 1em;
    }
    section.seimic-analysis .plans .img02 {
        display: none;
    }
    section.seimic-analysis .plans .text {
        width: 60%;
    }
    section.seimic-analysis .plans .text span {
        display: block;
    }
    section.seimic-analysis .plans .text span.rounded-100 {
        font-size: .7em !important;
    }
}