@charset "UTF-8";
.bg-through {
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 1;
    color: #fff; 
    border-radius: 200px;
 }
 .bg-through::before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    left: -100%;
    top: 0;
    transition: .8s;
    z-index: 2;
 }
 .bg-through span {
    position: relative;
    z-index: 3;
    mix-blend-mode: difference;
 }
 .bg-through:hover::before {
    left: 100%;
 }
    
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px), print {
#strength main {
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
}
.util-btn {
    width: min(95%, 340px);
    margin-inline: auto;
    background: #1a1a1a;
    border-radius: 200px;
    position: relative;
    z-index: 5;
}
.util-btn a {
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 2.142857;
    color: #fff;
    padding: 15px 29px;
    position: relative;
    display: block;
}
.util-btn a::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: url(../images/index/btn-arrow-w.svg)no-repeat;
    background-size: contain;
    width: 12px;
    height: 10px;
}
.util-btn a:hover::after {
    right: 15px;
    transition: all 0.3s ease;
}

/* mv
-------------------------------------*/
.mv {
    max-width: 1920px;
    width: 100%;
    margin-inline: auto;
}
.mv .inner {
    width: 96.875%;
    margin-left: auto;
    background: #D75B43;
    padding: 67px 0 50px;
    display: grid;
    grid-template-columns: 46.3% 1fr;
    position: relative;
}
.mv .inner::after {
    position: absolute;
    content: "";
    background: url(../images/strength/mv-arrow.svg)no-repeat;
    background-size: contain;
    width: 80px;
    height: 40px;
    bottom: -39px;
    left: 48.4%;
    transform: translateX(-50%);
}
.mv .txt-box {padding: 0 0 0 100px;}

.mv h2 {
    margin-bottom: 17px;
    position: relative;
    z-index: 2;
    margin-top: 16px;
}
.mv .txt {
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 1.75;
    text-align: left;
    color: #fff;
}
.mv .txt02 {
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 1.8;
    text-align: left;
    color: #fff;
    margin-top: 39px;
}
.mv .photo {position: relative;top: -203px;margin-bottom: -203px;}

/* sec
-------------------------------------*/
.sec {
    position: relative;
    margin-bottom: 82px;
}
.sec::before {
    content: "";
    position: absolute;
    top: 0;
    width: 91.6666%;
    height: 100%;
    background: #FFFFFF;
    pointer-events: none;
    z-index: -1;
}
.sec .inner {
    width: min(95%, 1100px);
    margin-inline: auto;
    padding-bottom: 58px;
}
.sec .enttl {
    text-align: center;
    margin-bottom: -45px;
}
.sec .icon {
    text-align: center;
    margin-bottom: 6px;
}
.sec h2 {
    font-weight: 900;
    font-size: 56px;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 16px;
}
.sec .subt {
    text-align: center;
    margin-bottom: 56px;
}
.sec .inBox {
    display: grid;
    grid-template-columns: 46.3636% 1fr;
    gap: 50px;
    margin-bottom: 40px;
}
.sec .inBox .photo {
    padding: 5px 0 0;
}
.sec .inBox .txt {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 2;
    margin-bottom: 22px;
}
.sec .inBox .txt.bold {
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 1.8;
}
.sec .inBox02 {
    display: grid;
    grid-template-columns: 1fr 46.3636%;
    gap: 50px;
}

/* history
-------------------------------------*/
.history {
    padding: 292px 0 0;
    margin-top: -164px;
}
.history::before {
    left: 0;
}
/* service
-------------------------------------*/
.service::before {
    right: 0;
}
.sec.service .inner {
    padding: 81px 0 57px;
}
.sec.service .enttl {
    margin-bottom: -45px;
}
.sec.service h2 {
    margin-bottom: -6px;
}
.service .inBox {
    gap: 40px;
}
.service .inBox .list{
  display: grid;
  gap: 21px;
  margin: 0 20px 0 0;
  padding: 5px 0 0;
}
.service .inBox .list li{
    background: #fff;
    border: 1px solid #7e7e7e;
}
.service .inBox .list li a {
    display: grid;
    grid-template-columns: 1fr 26.73%;
}
.service .inBox .list li .left{
    display: flex;
    gap: 20px;
    padding: 6px 0 8px 19px;
    align-items: center;
}
.service .inBox .list li:nth-child(3) .left{
    gap: 16px;
    padding: 6px 0 9px 13px;
}
.service .inBox .list li .icon{
    padding: 5px 0 0;
}
.service .inBox .list li .subt{
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.8571428;
    margin: 0;
    text-align: left;
}
.service .inBox .list li .subt span{
    color: #D75B43;
    font-feature-settings: "palt";
}
.service .inBox .list li h3{
    font-weight: bold;
    text-decoration: underline;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 1.625;
    color: #d75b43;
    margin: 0;
    text-align: left;
}
.service .inBox .list .right {
    background: #d75b43;
    display: flex;
    gap: 11px;
    padding: 8px 0 8px 20px;
    align-items: center;
}
.service .inBox .list .right .txt{
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.7142857;
    color: #fff;
    margin: 0;
}
.service .inBox .list .arrow img {
    vertical-align: middle;
}
.service .inBox02 {
    margin-bottom: 66px;
    gap: 50px;
}

/* action
-------------------------------------*/
.action {
    margin-bottom: 160px;
}
.action::before {
    left: 0;
}
.action .inner {
    padding: 100px 0 36px;
}
.action .inBox {
    margin-bottom: 39px;
}
.action .inBox02 .list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 21px;
    width: min(95%,463px);
    margin-bottom: 16px;
}
.action .inBox02 .txt-box {padding: 5px 0 0;}
.action .inBox02 .list li {
    background: #fff;
    border: 1px solid #d75b43;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.1em;
    line-height: 1;
    text-align: center;
    color: #d75b43;
    display: grid;
    place-items: center;
    border-radius: 50%;
    padding: 39px 0;
}


}

/* ========================================
@media screen and (min-width:768px) and (max-width:1890px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1890px) {
/* mv
-------------------------------------*/
.mv .inner {
    padding: 3.545vw 0 2.646vw;
}
.mv .inner::after {
    width: 4.233vw;
    height: 2.116vw;
    bottom: -2.063vw;
}
.mv .txt-box {padding: 0 0 0 5.291vw;}

.mv h2 {
    margin-bottom: 0.899vw;
    margin-top: 0.847vw;
}
.mv h2 img {
    width: 42.169vw ;
}
.mv .txt {
    font-size: clamp(0.875rem, 0.447rem + 0.89vw, 1.5rem);
}
.mv .txt02 {
    font-size: clamp(0.75rem, 0.408rem + 0.71vw, 1.25rem);
    margin-top: 2.063vw;
}
.mv .photo {position: relative;top: -10.741vw;margin-bottom: -10.741vw;}
.mv .photo img {
    width: 100%;
    height: auto;
}
}

/* ========================================
@media screen and (min-width:768px) and (max-width:1440px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1440px) {
/* sec
-------------------------------------*/
.sec {
    margin-bottom: 5.694vw;
}
.sec .inner {
    width: 76.389vw;
    padding-bottom: 4.028vw;
}
.sec .enttl {
    margin-bottom: -3.125vw;
}
.sec .icon {
    margin-bottom: 0.417vw;
}
.sec h2 {
    font-size: 3.889vw;
    margin-bottom: 1.111vw;
}
.sec .subt {
    margin-bottom: 3.889vw;
}
.sec .inBox {
    gap: 3.472vw;
    margin-bottom: 2.778vw;
}
.sec .inBox .photo {
    padding: 0.347vw 0 0;
}
.sec .inBox .photo img {
    width: 100%;
    height: auto;
}
.sec .inBox .txt {
    font-size: clamp(0.75rem, 0.464rem + 0.6vw, 1rem);
    margin-bottom: 1.528vw;
}
.sec .inBox .txt.bold {
    font-size: clamp(0.875rem, 0.446rem + 0.89vw, 1.25rem);
}
.sec .inBox02 {
    gap: 3.472vw;
}

/* history
-------------------------------------*/
.history {
    padding: 20.278vw 0 0;
    margin-top: -11.389vw;
}
.history .enttl img {
    width: 62.361vw;
}
.history .subt img {
    width: 44.583vw;
}
/* service
-------------------------------------*/
.sec.service .enttl {
    margin-bottom: -3.125vw;
}
.sec.service .enttl img {
    width: 60.764vw;
}
.sec.service .subt img {
    width: 54.097vw;
}
.sec.service h2 {
    margin-bottom: -0.417vw;
}
.service .inBox {
    gap: 2.778vw;
}
.service .inBox .list{
  gap: 1.458vw;
  margin: 0 0.389vw 0 0;
  padding: 0.347vw 0 0;
}
.service .inBox .list li .left{
    gap: 1.389vw;
    padding: 0.417vw 0 0.556vw 1.319vw;
}
.service .inBox .list li:nth-child(3) .left{
    gap: 1.111vw;
    padding: 0.417vw 0 0.625vw 0.903vw;
}
.service .inBox .list li .icon{
    padding: 0.347vw 0 0;
}
.service .inBox .list li .subt{
    font-size: clamp(0.625rem, 0.339rem + 0.6vw, 0.875rem);
}
.service .inBox .list li h3{
    font-size: clamp(0.813rem, 0.598rem + 0.45vw, 1rem);
}
.service .inBox .list .right {
    gap: 0.764vw;
    padding: 0.556vw 0 0.556vw 1.389vw;
    align-items: center;
}
.service .inBox .list .right .txt{
    font-size: clamp(0.625rem, 0.339rem + 0.6vw, 0.875rem);
}
.service .inBox .list .arrow {
    padding: 0.347vw 0 0;
}
.service .inBox02 {
    margin-bottom: 4.583vw;
    gap: 3.472vw;
}

/* action
-------------------------------------*/
.action {
    margin-bottom: 6.944vw;
}
.action .enttl img { 
    width: 54.653vw;
}
.action .subt img {
    width: 32.431vw;
}
.action .inner {
    padding: 6.944vw 0 2.5vw;
}
.action .inBox {
    margin-bottom: 2.708vw;
}
.action .inBox02 .list {
    gap: 1.458vw;
    width: 32.153vw;
    margin-bottom: 1.111vw;
}
.action .inBox02 .txt-box {padding: 0.347vw 0 0;}
.action .inBox02 .list li {
    font-size: 1.389vw;
    padding: 2.708vw 0;
}
    
}


/* ========================================
@media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
.util-btn {
    width: 82.2vw;
    margin-inline: auto;
    background: #1a1a1a;
    border-radius: 8vw;
}
.util-btn a {
    font-weight: bold;
    font-size:3.382vw;
    letter-spacing: 0.1em;
    line-height: 2.142857;
    color: #fff;
    padding: 3.7vw 7vw;
    position: relative;
    display: block;
}
    .util-btn a::after {
    content: "";
    position: absolute;
    right: 4.8vw;
    top: 50%;
    transform: translateY(-50%);
    background: url(../images/index/btn-arrow-w.svg)no-repeat;
    background-size: contain;
    width: 2.9vw;
    height: 2.419vw;
}
    .util-btn a:hover::after {
        right: 1.21vw;
    transition: all 0.3s ease;
    
}
/* mv
-------------------------------------*/
.mv .inner {
    display: grid;
}
.mv .txt-box {
    background: #D75B43;
    order: 2;
    padding: 7vw 8.94vw 6.5vw;
    position: relative;
    z-index: 2;
}
.mv .txt-box::after {
    position: absolute;
    content: "";
    background: url(../images/strength/mv-arrow.svg)no-repeat;
    background-size: contain;
    width: 14.5vw;
    height: 7.3vw;
    bottom: -7vw;
    left: 50%;
    transform: translateX(-50%);
}
.mv h2 {
    font-weight: bold;
    font-size:5.797vw;
    letter-spacing: 0.1em;
    line-height: 1;
    color: #d75b43;
    margin-bottom: 3.4vw;
    margin-top: 2.5vw;
}
.mv .txt {
    font-weight: bold;
    font-size:4.348vw;
    letter-spacing: 0.1em;
    line-height: 1.7777;
    text-align: left;
    color: #fff;
}
.mv .txt02 {
    font-weight: bold;
    font-size: 3.865vw;
    letter-spacing: 0.1em;
    line-height: 1.875;
    text-align: left;
    color: #fff;
    margin-top: 2vw;
}
.mv .photo {
    order: 1;
}

/* sec
-------------------------------------*/
.sec {
    position: relative;
    margin-bottom: 14.5vw;
    background: #FFFFFF;
    padding-bottom: 5vw;
}
.sec .inner {
    margin-inline: auto;
    padding: 19vw 0 0;
}
.sec .enttl {
    text-align: center;
    margin-bottom: -4vw;
}
.sec .icon {
    text-align: center;
    margin-bottom: 4.2vw;
}
.sec .icon img {
    width: 14.5vw;
}
.sec h2 {
    font-weight: 900;
    font-size:7.246vw;
    line-height: 1.5333;
    letter-spacing: 0.1em;
    text-align: center;
    margin-bottom: 3vw;
}
.sec .subt {
    text-align: center;
    margin-bottom: 7vw;
}
.sec .inBox {
    display: grid;
    width: 89.375vw;
    margin-inline: auto;
    gap: 5vw;
    margin-bottom: 6.4vw;
}
.sec .inBox .txt {
    font-weight: 400;
    font-size:3.382vw;
    letter-spacing: 0.1em;
    line-height: 1.71428;
    margin-bottom: 3.8vw;
}
.sec .inBox .txt:nth-last-of-type(1) {
    margin-bottom: 0;
}
.sec .inBox .txt.bold {
    font-weight: bold;
    font-size:3.865vw;
    letter-spacing: 0.1em;
    line-height: 1.625;
}
.sec .inBox02 {
    display: grid;
}
.sec .inBox02 .txt-box {
    order: 2;
}
.sec .inBox02 .photo {
    order: 1;
}


/* service
-------------------------------------*/
.sec.service .enttl {
    margin-bottom: -3.7vw;
}
.sec.service .inner {
    padding: 12vw 0 0;
}
.service .inBox {
    gap: 9.8vw;
}
.service .inBox .list{
    display: grid;
    gap: 5vw;
    margin: 6vw 0 0;
}
.service .inBox .list li{
    background: #fff;
    border: 0.2vw solid #7e7e7e;
}
.service .inBox .list li a {
    display: grid;
}
.service .inBox .list li .left{
    display: flex;
    gap: 5vw;
    align-items: center;
    padding: 2.2vw 0vw 2.2vw 4.5vw;
}
.service .inBox .list li:nth-child(3) .left {
    padding: 1.5vw 0vw 2.2vw 3.2vw;
    gap: 4vw;
}
.service .inBox .list li .icon{
    margin: 0;
}
.service .inBox .list li .icon img{
    width: 9.3vw;
    vertical-align: middle;
}
.service .inBox .list li:nth-child(3) .icon img{
    width: 11.6vw;
}
.service .inBox .list li .subt{
    font-weight: bold;
    font-size:3.382vw;
    letter-spacing: 0.1em;
    line-height: 1.8571428;
    margin: 0;
    text-align: left;
}
.service .inBox .list li .subt span{
    color: #D75B43;
    font-feature-settings: "palt";
}
.service .inBox .list li h3{
    font-weight: bold;
    text-decoration: underline;
    font-size:3.865vw;
    letter-spacing: 0.1em;
    line-height: 1.625;
    color: #d75b43;
    margin: 0;
    text-align: left;
}
.service .inBox .list .right {
    background: #d75b43;
    display: flex;
    gap: 20vw;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5vw 4.5vw;
}
.service .inBox .list .right .txt{
    font-weight: bold;
    font-size:3.382vw;
    letter-spacing: 0.1em;
    line-height: 1.7142857;
    color: #fff;
    margin: 0;
}
.service .inBox .list .arrow img {
    vertical-align: middle;
}
.service .inBox02 {
    margin-bottom: 10vw;
    gap: 5vw;
}


/* action
-------------------------------------*/ 
.action {
    margin-bottom: 7vw;
}
.action .inner{
    padding: 12.5vw 0 0;
}
.action .inBox02 .list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2vw;
    margin-bottom: 4.7vw;
}
.action .inBox02 .list li {
    background: #fff;
    border: 0.2vw solid #d75b43;
    font-weight: bold;
    font-size:4.106vw;
    letter-spacing: 0.1em;
    line-height: 1;
    text-align: center;
    color: #d75b43;
    display: grid;
    place-items: center;
    border-radius: 50%;
    padding: 8vw 0;
}


}