@charset "UTF-8";

/* 
------------------------------------*/
.strongLayout .h2_wrap {
    background-image: url("../img/strong/h2_sp.png");
}
.strongLayout .h2_wrap::after {
    background-image: url("../img/strong/about_h2.png");
    width: 150px;
  height: 197px;
}

.strongLayout {
    background: linear-gradient(to right, #f3f3f3, #e4e4e4);
}
.strongLayout h3 {
    color: #000;
}
.strongLayout .h3_wrap {
    position: relative;
    z-index: 1;
    padding-bottom: 100px;
    margin-bottom: 40px;
}
.strongLayout .h3_wrap p {
    position: absolute;
    z-index: -1;
    background: linear-gradient(to right, #c5c5c5 ,#4d91ab);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.5;
    left: 0;
    bottom: 0;
    font-weight: bold;
    font-size: 6.5rem;
    line-height: 0.8;
  height: 190px;
}
.strongLayout .icon_h4 {
    border-bottom: none;
    text-align: center;
    padding-left: 0;
    color: #0164ab;
}
.strongLayout .icon_h4::before {
    content: none;
}
.strongLayout .icon_h4 span {
    padding-bottom: 0;
    position: relative;
    padding-left: 30px;
}
.strongLayout .icon_h4 span::after {
    content: "";
    position: absolute;
    background: url("../common/img/icon03a.png")no-repeat center center/cover;
    width: 23px;
    height: 23px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}
.strongLayout .marker_ttl {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: 1.1rem;
}

            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                .strongLayout .h2_wrap {
                    background-image: url("../img/strong/h2.png");
                }
                .strongLayout .h2_wrap::after {
                    width: 260px;
                    height: 297px;
                }
                .strongLayout .h3_wrap {
                    padding-bottom: 150px;
                }
                .strongLayout .h3_wrap p {
                    font-size: 9.5rem;
                    height: 280px;
                }
                .strongLayout .icon_h4 {
                    font-size: 2.4rem;
                }
                .strongLayout .marker_ttl {
                    font-size: 1.2rem;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 1200px) {
                .strongLayout .h3_wrap {
                    padding-bottom: 60px;
                    margin-bottom: 80px;
                }
                .strongLayout .h3_wrap p {
                    font-size: 9.5rem;
                    height: auto;
                    line-height: 1.2;
                }
                .strongLayout .marker_ttl {
                    font-size: 2rem;
                }
            }
            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 1600px) {
                .strongLayout .h3_wrap p {
                    font-size: 12.5rem;
                }
            }



/* c01
------------------------------------*/
.strongLayout #c01 .img {
    position: relative;
    padding-bottom: 60px;
}
.strongLayout #c01 .img::after {
    position: absolute;
    content: "";
    background: url("../img/strong/about_c01_img02.png")no-repeat center center/cover;
    width: 113px;
    height: 120px;
    bottom: 0;
    right: 20px;
    z-index: 1;
}



            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                .strongLayout #c01 .img {
                    padding-bottom: 80px;
                }
                .strongLayout #c01 .img::after {
                    right: 60px;
                    width: 248px;
                    height: 261px;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 1200px) {
                .strongLayout #c01 .img {
                    padding-bottom: 150px;
                }
                .strongLayout #c01 .img::after {
                    width: 348px;
                    height: 370px;
                }
            }



/* c02
------------------------------------*/
.strongLayout #c02 {
    position: relative;
    overflow: hidden;
    padding-bottom: 250px;
}
.strongLayout #c02::after {
    position: absolute;
    content: "";
    z-index: 0;
    background: url("../img/index/index_c01_bg02.png")no-repeat top right/cover;
  width: 395px;
  height: 312px;
  bottom: -130px;
  left: -50px;
}
.strongLayout #c02 p {
    line-height: 2;
}
.strongLayout #c02 .strong_ttl {
    position: relative;
    padding-top: 60px;
    z-index: 1;
    text-align: center;
    font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: 30px;
    line-height: 1.5;
}
.strongLayout #c02 .strong_ttl::before, .strongLayout #c02 .strong_ttl::after {
    position: absolute;
    background: linear-gradient(to right, #c5c5c5 ,#4d91ab);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.5;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
}
.strongLayout #c02 .flex  {
    counter-reset: num;
    position: relative;
    z-index: 1;
}
.strongLayout #c02 .flex .flex_box01 {
    counter-increment: num;
}
.strongLayout #c02 .flex .flex_box01 .strong_ttl::before {
    content: counter(num, decimal-leading-zero) ".";
    top: 0;
    font-size: 1.6rem;
    font-style: italic;
}
.strongLayout #c02 .flex .flex_box01 .strong_ttl::after {
    font-size: 2.2rem;
    top: 20px;
}
.strongLayout #c02 .flex .flex_box01:nth-of-type(1) .strong_ttl::after {
    content: "Quality";
}
.strongLayout #c02 .flex .flex_box01:nth-of-type(2) .strong_ttl::after {
    content: "Cost";
}
.strongLayout #c02 .flex .flex_box01:nth-of-type(3) .strong_ttl::after {
    content: "Speed";
}
.strongLayout #c02 .flex .flex_box01:nth-of-type(4) .strong_ttl::after {
    content: "Flexible";
}

.strongLayout #c02 .flex .flex_box01 .img {
    margin-top: 30px;
}
.strongLayout #c02 .flex .flex_box01:not(:last-child) {
    margin-bottom: 80px;
}



            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                .strongLayout #c02 .strong_ttl {
                    padding-top: 80px;
                    font-size: 1.6rem;
                }
                .strongLayout #c02 .flex {
                    gap: 40px 4%;
                }
                .strongLayout #c02 .flex .flex_box01 .strong_ttl::before {
                    font-size: 1.6rem;
                }
                .strongLayout #c02 .flex .flex_box01 .strong_ttl::after {
                    font-size: 4rem;
                }
                .strongLayout #c02::after {
                    width: 805px;
                    height: 492px;
                    bottom: -290px;
                }
                .strongLayout #c02 .flex .flex_box01:nth-of-type(even) {
                    margin-top: 100px;
                }
                .strongLayout #c02 .flex .flex_box01:not(:last-child) {
                    margin-bottom: 0;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 1200px) {
                .strongLayout #c02 .strong_ttl {
                    padding-top: 100px;
                    font-size: 2rem;
                }
                .strongLayout #c02 .flex .flex_box01 .strong_ttl::before {
                    font-size: 2rem;
                }
                .strongLayout #c02 .flex .flex_box01 .strong_ttl::after {
                    font-size: 5rem;
                }
                .strongLayout #c02::after {
                    width: 885px;
                    height: 592px;
                    bottom: -350px;
                    left: -60px;
                }
            }



/* c03
------------------------------------*/
.strongLayout #c03 {
    background-color: #fff;
    padding-bottom: 0;
}
.strongLayout #c03 .h3_wrap {
    padding-top: 60px;
  margin-bottom: 50px;
}
.strongLayout #c03 .icon_h4 span {
    padding-left: 0;
    padding-top: 25px;
}
.strongLayout #c03 .icon_h4 span::after {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}
.strongLayout #c03 .flow_box > div {
    padding: 80px 0;
    position: relative;
    line-height: 2;
}
.strongLayout #c03 .flow_box > .f_text::after  {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    border: 30px solid transparent;
    bottom: -55px;
    z-index: 1;
}
.strongLayout #c03 .f_01 .f_text {
    background-color: #f1eed9;
}
.strongLayout #c03 .f_01 .f_text::after {
    border-top: 30px solid #f1eed9;
}
.strongLayout #c03 .f_02 .f_text {
    background-color: #0163ab;
    color: #fff;
}
.strongLayout #c03 .f_02 .f_text::after {
    border-top: 30px solid #0163ab;
}
.strongLayout #c03 .f_02 .f_img {
    background-color: #e9e8e8;
}
.strongLayout #c03 .f_02 .icon_h4 {
    color: #fff;
}
.strongLayout #c03 .f_02 .icon_h4 span::after {
    background-image: url("../common/img/icon03.png");
}
.strongLayout #c03 .f_img {
    color: #0164ab;
    text-align: center;
    font-weight: bold;
}
.strongLayout #c03 .f_img .ttl {
    font-size: 1.1rem;
    margin-bottom: 5px;
}
.strongLayout #c03 .f_img .img {
    margin-top: 30px;
}




            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
                .strongLayout #c03 .flow_box {
                    display: flex;
                    justify-content: space-between;
                }
                .strongLayout #c03 .flow_box > div {
                    width: 50%;
                    padding: 80px 0;
                }
                .strongLayout #c03 .flow_box > .f_text::after  {
                    top: 50%;
                    transform: translateY(-50%);
                    left: auto;
                    border: 30px solid transparent;
                    bottom: auto;
                    right: -60px;
                }
                .strongLayout #c03 .f_01 .f_text::after {
                    border-left: 30px solid #f1eed9;
                }
                .strongLayout #c03 .f_02 .f_text::after {
                    border-left: 30px solid #0163ab;
                }
                .strongLayout #c03 .flow_box .inner {
                    width: 80%;
                }
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 1200px) {
                .strongLayout #c03 .h3_wrap p {
                    font-size: 11.5rem;
                }
                .strongLayout #c03 .flow_box > div {
                    padding: 150px 0;
                }
                .strongLayout #c03 .flow_box .inner {
                    width: 65%;
                }
            }



/* 
------------------------------------*/


            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 1200px) {
            }



/* 
------------------------------------*/


            /* 【スマートフォン用のスタイル記述】 */
            @media screen and (min-width: 760px) {
            }

            /* 【タブレット用のスタイル記述】 */
            @media screen and (min-width: 1200px) {
            }