main{ margin-top: 87px; @include PC{ margin-top: 164px; } .sec-c-ttl{ .inner{ @include SP() { padding: 0 30px; } } .c-ttl-jp{ span{ width: 515px; @include SP{ padding-bottom: 0px; width: 295px; letter-spacing: .2em; } } } .c-txt-en{ position: relative; z-index: 2; @include SP{ margin-top: -2px; } } img{ width: 100%; margin-top: 40px; @include SP() { margin-top: 9px; } } } .c-title01{ &__en{ @include font(15, 22, .06, 400); border-top: 0; @include PC() { @include ffSG; } } &__jp{ margin-top: 5px; @include PC() { @include font(36, 60, .1, 700); } @include SP() { @include font(20, 30 , .1, 700); margin-top: 4px; } } } .sec-purpose{ padding: 87px 0 172px 0; @include SP() { padding: 9px 0 0 0; overflow: hidden; } .c-title01{ @include SP() { // /width: calc(100% + 60px); } &__jp{ @include PC() { letter-spacing: .177em; } @include SP() { //padding-left: 5px; } } } .inner{ max-width: 770px; } .text{ margin-top: 10px; @include SP() { margin-top: 9px; } } } .sec-vision{ background-color: $color_bg; padding: 118px 0 142px 0; @include SP() { padding: 31px 0 0 0; background-color: transparent; } .c-title01{ &__jp{ margin-top: 14px; @include SP() { margin-top: 5px; } } } .inner{ padding: 0; max-width: 1440px; @include PC() { @include max-screen(1200px){ padding-right: 30px; } } } .img{ width: 687px; flex-shrink: 0; @include PC() { @include max-screen(1200px){ width: 50%; } } @include SP() { width: 100%; img{ width: 100%; } } } .desc{ width: 455px; margin-left: 65px; margin-top: -15px; @include PC() { @include max-screen(1200px){ width: 50%; margin-left: 30px; } } @include SP() { width: 100%; margin: 26px 0 0 0; padding: 0 30px; } } .text{ margin-top: 35px; @include PC() { @include max-screen(1200px){ margin-top: 5px; } } @include SP() { margin-top: 10px; } } &__content{ display: flex; align-items: flex-start; @include PC() { @include max-screen(1200px){ align-items: center; } } @include SP() { display: block; } } } .sec-value{ padding-top: 102px; padding-bottom: 110px; @include PC() { position: relative; &:after{ content: ''; width: 100%; height: calc(100% + 220px); left: 0; top: -220px; position: absolute; z-index: -1; transform: matrix(-1, 0, 0, -1, 0, 0); background: linear-gradient(#f8f7f7 0%, rgba(255, 255, 255, 0.53) 58.06%, rgba(255, 255, 255, 0) 100%); } } @include SP() { background-color: $color_bg; margin-top: 40px; padding: 23px 0 75px 0; } .c-title01{ &__jp{ margin-top: -3px; } } .inner{ max-width: 1080px; } &__list{ display: flex; flex-wrap: wrap; margin-left: -56px; margin-top: 30px; padding: 0 17px 0 2px; @include SP() { width: calc(100% + 30px); margin-left: -8px; display: block; } } .item{ width: calc(50% - 52px); margin: 0 0 0 52px; min-height: 119px; @include SP() { width: 100%; min-height: auto; margin: 22px 0 0 0; } &:nth-child(2){ @include PC() { white-space: nowrap; @include max-screen(1200px){ white-space: normal; } } } .title{ border-bottom: dotted 1px #707070; @include font(20, 27, .03, 400); padding: 0 10px 5px 10px; @include SP() { @include font(18, 30); padding: 0 10px; } } .text{ @include font(16, 28, .03, 400); padding: 7px 0 0 29px; @include SP() { @include font(13, 20, .02); padding: 8px 0 0 10px; } } } } .c-btns-bottom{ padding: 44px 0 55px; @include PC{ padding-top: 123px; .inner{ @include PC(){ display: block; max-width: 617px; li{ width: 100%; } } } } a{ @include max-screen(429px){ padding: 0; } } } } .c-footer{ margin-top: 12px; }