li {
    list-style: none
}

html {
    text-size-adjust: none
}

body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

@media screen and (min-width:800px),
print {
    .link_line {
        display: flex;

    }

    .link_line>a {
        margin-right: 20px;
    }

    .normbox {
        padding: 20px;
        font-size: 18px;
        line-height: 24px;
        color: #333;
    }

    span.err {
        font-size: 20px;
        font-weight: 700;
        color: red
    }

    #contact .iserr input {
        background-color: #ffd0d0
    }

    .birth .err {
        display: block
    }

    body {
        color: #323886;
        font-family: 'Noto Sans JP', sans-serif;
        padding-top: 83px;
    }

    a {
        text-decoration: none;
        color: #323886;
        transition: opacity .2s
    }

    a:hover {
        opacity: .8
    }

    .wrp {
        margin-left: auto;
        margin-right: auto;
        width: 1280px
    }

    #headerLine {
        height: 83px;
        position: fixed;
        z-index: 10000;
        background: #fff;
        width: 100%;
        top: 0;
    }

    #headerLine .wrp {
        position: relative;
        padding-top: 26.33px
    }

    #headerLine .logo {
        display: block;
        width: 236.57px;
        height: 33.45px;
        background: url(../img/common/logo.svg) no-repeat;
        text-indent: -9999px;
        margin-left: 40px
    }

    #gmenu {
        height: 83px;
        width: 640px;
        line-height: 83px;
        display: flex;
        flex-wrap: nowrap;
        position: absolute;
        top: 0;
        right: 0
    }

    #gmenu li {
        position: relative;
        text-align: center;
        font-size: 14px;
        width: 150px
    }

    #gmenu li:nth-child(n-2):hover {
        background-color: rgb(18 155 205 / 50%);

    }

    #gmenu li:nth-last-child(1)>a {
        height: 83px;
        display: block;
        background-color: #323886;
        color: #fff
    }

    #gmenu li:nth-last-child(2)>a {
        height: 83px;
        display: block;
        background-color: #feef56
    }


    #gmenu .sub {
        position: absolute;
        max-height: 0;
        overflow: hidden;
        transition: all .3s;
        z-index: 1000;
    }

    #gmenu li:hover .sub {
        max-height: 200px;
    }

    #gmenu .sub>a {
        display: block;
        width: 200px;
        height: 50px;
        line-height: 50px;
        background-color: #EDEDED;
    }

    #gmenu .sub>a:hover {

        opacity: 1;
        background-color: rgb(18 155 205 / 50%);
    }

    #kv_line {
        height: 997px
    }

    #kv_line>.wrp {
        position: relative;
        height: 997px
    }

    #kv_line>.wrp>div {
        height: 997px;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: opacity 1s;

        color: #000;
    }

    #kv_line>.wrp>div::before {
        position: absolute;
        top: 164px;
        left: 0;
        background-color: rgba(255, 255, 255, .7);
        z-index: 0;
        width: 490px;
        height: 488px;
        content: "";
        display: block;
    }


    #kv_line.show_1>.wrp>div:nth-child(1) {
        opacity: 1;
        visibility: visible
    }

    #kv_line.show_2>.wrp>div:nth-child(2) {
        opacity: 1;
        visibility: visible
    }

    #kv_line.show_3>.wrp>div:nth-child(3) {
        opacity: 1;
        visibility: visible
    }

    #kv_line.show_4>.wrp>div:nth-child(4) {
        opacity: 1;
        visibility: visible
    }

    #kv_line.show_5>.wrp>div:nth-child(5) {
        opacity: 1;
        visibility: visible
    }







    #kv_line>.wrp>div:nth-child(1) {
        background-image: url(../img/top/pc/kv1.jpg)
    }

    #kv_line>.wrp>div:nth-child(2) {
        background-image: url(../img/top/pc/kv2.jpg)
    }

    #kv_line>.wrp>div:nth-child(3) {
        background-image: url(../img/top/pc/kv3.jpg)
    }

    #kv_line>.wrp>div:nth-child(4) {
        background-image: url(../img/top/pc/kv4.jpg)
    }

    #kv_line>.wrp>div>p:nth-child(1) {
        text-indent: -9999px;
        display: block;
        position: absolute;
        width: 674px;
        height: 350px;
        background-image: url(../img/top/pc/over_the_top.png);
        background-repeat: no-repeat;
        left: 40px;
        top: 48px
    }

    #kv_line>.wrp>div>p:nth-child(2) {
        font-weight: 400;
        font-size: 29px;
        letter-spacing: .1em;
        text-align: center;
        position: absolute;
        left: 55px;
        top: 411px
    }

    #kv_line>.wrp>div>p:nth-child(3) {
        font-family: "A P-OTF A1Gothic StdN";
        font-weight: 400;
        font-size: 50px;
        letter-spacing: .2em;
        line-height: 70px;
        text-align: left;
        text-align: center;
        position: absolute;
        left: 55px;
        top: 485px
    }


    #kv_line>.wrp>div>a {
        display: block;
        width: 460px;
        height: 110px;
        border-radius: calc(110px / 2);
        background: linear-gradient(rgb(18 156 205 / 50%) 0, rgb(50 56 134 / 50%) 100%);
        position: absolute;
        z-index: 10;
        left: 40px;
        bottom: 63px
    }

    #kv_line>.wrp>div>a>span {
        opacity: 1;
        position: relative;
        left: 10px;
        top: 10px;
        width: 440px;
        height: 90px;
        border-radius: calc(90px / 2);
        display: block;
        padding: 0 30px;
        font-size: 28px;
        line-height: 90px;
        text-align: left;
        color: #323886;
        background-color: #fff;
        transition: all .3s
    }

    #kv_line>.wrp>div>a::after {
        content: url(../img/common/alonly.svg);
        line-height: 0;
        height: 46px;
        width: 46px;
        border-radius: 23px;
        background-color: #323886;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .3s;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 4px
    }

    #kv_line>.wrp>div>a:hover::after {
        height: 56px;
        width: 56px;
        border-radius: 28px;
        right: 25px;
        top: calc(50% -5px)
    }

    #kv_line>.wrp>div>a:hover {
        opacity: 1;
        background: rgb(18 155 205 / 50%)
    }

    #kv_line>.wrp>div>a:hover>span {
        background-color: #feef56
    }

    #kv_line>.wrp>p {
        text-align: center;
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 100%;
        z-index: 100
    }

    #kv_line>.wrp>p>button {
        cursor: pointer;
        outline: 0;
        padding: 0;
        appearance: none;
        width: 12px;
        height: 12px;
        background: #ededed;
        border: 1px solid #323886;
        border-radius: 50%
    }

    #kv_line>.wrp>p>button:nth-child(n+2) {
        margin-left: 40px
    }

    #kv_line>.wrp>p>button:hover,
    #kv_line.show_1>.wrp>p>button:nth-child(1),
    #kv_line.show_2>.wrp>p>button:nth-child(2),
    #kv_line.show_3>.wrp>p>button:nth-child(3) {
        background: #323886
    }

    #news_line {
        padding-top: 70px
    }

    #news_line .wrp {
        padding-left: 90px;
        padding-right: 90px
    }

    #news_line .wrp::after {
        display: block;
        content: "";
        clear: both
    }

    #news_line .wrp>div {
        float: left
    }

    div.title>h2 {
        height: 64px;
        text-indent: -9999px;
        background-repeat: no-repeat;
        background-position: center center
    }

    div.title>small {
        display: block;
        text-align: center;
        font-size: 28px;
        letter-spacing: .1em;
        line-height: 40px;
        color: #000
    }

    #news_line h2 {
        width: 219px;
        background-image: url(../img/top/news.svg)
    }

    #news_line h2+small {
        width: 219px
    }

    #news_line ul {
        float: right;
        width: 758px
    }

    #news_line li {
        padding: 15px 0;
        position: relative;
        width: 100%;
        border-bottom: 1px solid #000
    }

    #news_line li::after {
        content: url(../img/common/al.svg);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        opacity: .8
    }

    #news_line li:hover::after {
        opacity: 1
    }

    #news_line li span:nth-of-type(1) {
        font-weight: 700;
        font-size: 18px;
        line-height: 22px;
        text-align: left;
        color: #129ccd
    }

    #news_line li span:nth-of-type(2) {
        display: inline-block;
        padding: 0 10px;
        border: 1px solid #000;
        color: #000;
        border-radius: 13px;
        margin-left: 10px
    }

    #news_line li p {
        font-size: 16px;
        line-height: 22px;
        text-align: left;
        color: #000
    }

    #about_line {
        margin-top: 100px
    }

    #about_line h2 {
        width: 100%;
        background-image: url(../img/common/about.svg)
    }

    #about_line .flex_line {
        margin-top: 40px;
        display: flex;
        justify-content: space-between
    }

    #about_line .flex_line>a {
        display: block;
        text-align: center;
        width: 380px
    }

    #about_line .flex_line>a>div {
        width: 380px;
        height: 380px;
        background: linear-gradient(#129ccd 0, #094e67 100%);
        border-radius: 190px;
        position: relative
    }

    #about_line .flex_line>a:hover>div {
        background: linear-gradient(#feef56 0, #094e67 100%)
    }

    #about_line .flex_line>a>div>div {
        width: 350px;
        height: 350px;
        border-radius: 175px;
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    #about_line .flex_line>a>div>div>picture {
        position: absolute;
        transition: all .3s
    }

    #about_line .flex_line>a:nth-child(1)>div>div>picture {
        top: -86px;
        left: -185px;
    }

    #about_line .flex_line>a:nth-child(2)>div>div>picture {
        left: -88px;
        top: 0
    }

    #about_line .flex_line>a:nth-child(3)>div>div>picture {
        top: -85px;
        left: 0
    }

    #about_line .flex_line>a:nth-child(1)>div>div>picture>img {
        width: 720px;
        height: 480px;
        transition: all .3s
    }

    #about_line .flex_line>a:nth-child(1):hover>div>div>picture>img {
        width: 740px;
        height: calc(480px * (740 / 720));
    }

    #about_line .flex_line>a:nth-child(1):hover>div>div>picture {
        left: -195px;
        top: calc(-86px - ((480px * (740 / 720) - 480px) / 2));
    }

    #about_line .flex_line>a:nth-child(2)>div>div>picture>img {
        height: 350px;
        width: 525px;
        transition: all .3s
    }

    #about_line .flex_line>a:nth-child(2):hover>div>div>picture>img {
        height: 370px;
        width: calc(525px *(370 / 350))
    }

    #about_line .flex_line>a:nth-child(2):hover>div>div>picture {
        top: -10px;
        left: -103px
    }

    #about_line .flex_line>a:nth-child(3)>div>div>picture>img {
        width: 350px;
        height: 525px;
        transition: all .3s
    }

    #about_line .flex_line>a:nth-child(3):hover>div>div>picture>img {
        width: 370px;
        height: calc(525px *(370 / 350))
    }

    #about_line .flex_line>a:nth-child(3):hover>div>div>picture {
        left: -10px;
        top: -100px
    }

    #about_line .flex_line>a>h3 {
        margin-top: 15px;
        font-size: 30px;
        color: #323886;
        position: relative
    }

    #about_line .flex_line>a>h3::after {
        content: url(../img/common/alonly.svg);
        height: 46px;
        width: 46px;
        border-radius: 23px;
        background-color: #323886;
        line-height: 0;
        position: absolute;
        right: 10px;
        top: 0;
        transition: all .3s;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 4px
    }

    #about_line .flex_line>a:hover>h3::after {
        height: 56px;
        width: 56px;
        border-radius: 28px;
        background-color: #129ccd;
        right: 5px;
        top: -5px
    }

    #about_line .flex_line>a:nth-child(n+2)>h3::after {
        right: 47px
    }

    #about_line .flex_line>a:nth-child(n+2):hover>h3::after {
        right: 42px
    }

    #about_line .flex_line>a>p {
        margin-top: 22px;
        font-size: 16px;
        line-height: 24px;
        color: #323d43
    }

    #rec_line div.wrp {
        margin-top: 100px;
        background-color: #129ccd;
        background-image: url(../img/top/pc/req.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
        height: 500px;
        padding-left: 784px;
        padding-top: 50px
    }

    #rec_line h3 {
        font-weight: 500;
        font-size: 90px;
        line-height: 70px;
        color: #fff;
        margin-bottom: 30px
    }

    #rec_line h3+p {
        font-size: 16px;
        line-height: 26px;
        color: #fff
    }

    #rec_line h3+p+a {
        position: relative;
        margin-top: 50px;
        display: block;
        width: 460px;
        height: 110px;
        border-radius: calc(110px / 2);
        background-color: rgb(255 255 255 / 55%)
    }

    #rec_line h3+p+a>span {
        opacity: 1;
        position: relative;
        left: 10px;
        top: 10px;
        width: 440px;
        height: 90px;
        border-radius: calc(90px / 2);
        display: block;
        padding: 0 30px;
        font-size: 28px;
        line-height: 90px;
        text-align: left;
        color: #323886;
        background-color: #fff;
        transition: all .3s
    }

    #rec_line h3+p+a::after {
        content: url(../img/common/alonly.svg);
        line-height: 0;
        height: 46px;
        width: 46px;
        border-radius: 23px;
        background-color: #323886;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .3s;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 4px
    }

    #rec_line h3+p+a:hover {
        opacity: 1;
        background: rgb(50 56 134 / 55%)
    }

    #rec_line h3+p+a:hover>span {
        background-color: #feef56
    }

    #rec_line h3+p+a:hover::after {
        height: 56px;
        width: 56px;
        border-radius: 28px;
        right: 25px;
        top: calc(50% -5px)
    }

    #service_line {
        margin-top: 100px
    }

    #service_line h2 {
        background-image: url(../img/common/service.svg)
    }

    #service_line .flex_line {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin-top: 40px
    }

    #service_line .flex_line>a {
        display: block;
        position: relative;
        width: 393px;
        height: 519px;
        color: #fff;
        overflow: hidden;
        background-size: 100%;
        background-position: 50%;
        transition: all .2s
    }

    #service_line .flex_line>a::before {
        display: block;
        content: "";
        width: 46px;
        height: 46px;
        position: absolute;
        right: -23px;
        top: -23px;
        background-color: #fff;
        z-index: 10;
        transform: rotate(45deg)
    }

    #service_line .flex_line>a:hover {
        background-size: 120%
    }

    #service_line .flex_line>a:nth-child(1) {
        background-image: url(../img/top/service1.jpg?20231002)
    }

    /*    #service_line .flex_line>a:nth-child(1) >p{
        top:210px;
    }*/
    #service_line .flex_line>a:nth-child(2) {
        background-image: url(../img/top/service2.jpg)
    }

    #service_line .flex_line>a:nth-child(3) {
        background-image: url(../img/top/service3.jpg)
    }

    #service_line .flex_line>a>span:nth-child(1) {
        display: block;
        position: absolute;
        font-weight: 700;
        font-size: 80px;
        letter-spacing: .05em;
        text-align: center;
        top: 20px;
        width: 100%
    }

    #service_line .flex_line>a>h3 {
        position: absolute;
        top: 143px;
        width: 100%;
        font-size: 35px;
        line-height: 40px;
        text-align: center
    }

    #service_line .flex_line>a:nth-child(2)>h3 {
        top: 120px
    }

    #service_line .flex_line>a>p {
        position: absolute;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
        text-shadow: 0 3px 6px rgba(0, 0, 0, .16);
        width: 100%;
        top: 244px
    }

    #service_line .flex_line>a:nth-child(2)>p {
        top: 244px
    }

    .more_btn {
        display: block;
        cursor: pointer;
        outline: 0;
        padding: 0;
        appearance: none;
        border: 0;
        width: 200px;
        height: 60px;
        border-radius: 30px;
        background-color: rgba(255, 255, 255, .75);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px
    }

    .more_btn>span {
        display: block;
        width: 190px;
        height: 50px;
        line-height: 50px;
        border-radius: 25px;
        position: absolute;
        left: 5px;
        top: 5px;
        padding-left: 25px;
        background-color: #129ccd;
        color: #fff;
        text-align: left;
        font-weight: 700;
        font-size: 24px;
        letter-spacing: .05em;
        transition: all .3s
    }

    .more_btn>span::after {
        content: "";
        display: block;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 24px;
        background-color: #323886;
        background-image: url(../img/common/alonly.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px auto;
        transition: all .3s
    }

    #service_line .flex_line>a:hover .more_btn,
    .more_btn :hover {
        color: #323886
    }

    #service_line .flex_line>a:hover .more_btn>span,
    .more_btn:hover>span {
        background-color: #feef56
    }

    #service_line .flex_line>a:hover .more_btn>span::after,
    .more_btn:hover>span::after {
        width: 42px;
        height: 42px;
        border-radius: 21px;
        right: 19px
    }

    #voice_line {
        margin-top: 100px
    }

    #voice_line .wrp {
        position: relative
    }

    #voice_line h2 {
        height: 84px;
        background-image: url(../img/common/work_colleague.svg)
    }

    #voice_line .flex_line {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin-top: 50px
    }

    #voice_line .flex_line a {
        border: 10px solid #129ccd;
        display: block;
        width: 264px;
        height: 420px;
        border-radius: calc(262px / 2);
        position: relative
    }

    #voice_line .flex_line a:hover {
        border-color: #feef56
    }

    #voice_line .flex_line a:nth-child(1) {
        width: 353px;
        height: 562px;
        border-radius: calc(351px / 2);
        background: url(../img/top/pc/voice01.jpg) -113px -118px
    }

    #voice_line .flex_line a:nth-child(2) {
        background: url(../img/top/pc/voice02.jpg) -137px -81px
    }

    #voice_line .flex_line a:nth-child(3) {
        background: url(../img/top/pc/voice03.jpg) -146px -35px
    }

    #voice_line .flex_line a:nth-child(4) {
        background-color: #323886;
        color: #fff;
    }

    #voice_line .flex_line a:nth-child(4)>div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150px;
    }

    #voice_line .flex_line a:nth-child(4)>div::after {

        content: url(../img/common/alonly_blue.svg);
        line-height: 0;
        height: 46px;
        width: 46px;
        border-radius: 23px;
        background-color: #ffffff;
        position: absolute;
        right: 0px;
        top: 0;
        transition: all .3s;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 4px;
    }


    #voice_line .flex_line a>span {
        position: absolute;
        font-size: 20px;
        line-height: 30px;
        color: #fff;
        left: 13%;
        bottom: 15%
    }

    #voice_line .mess {
        position: absolute;
        width: 820px;
        height: 30px;
        right: 0;
        bottom: 70px;
        font-size: 16px;
        line-height: 26px;
        color: #000
    }

    #voice_line .mess>a {
        position: relative;
        display: inline-block;
        width: 316px;
        height: 46px;
        line-height: 46px;
        font-size: 20px;
        color: #142b74;
        margin-top: 10px
    }

    #voice_line .mess>a::after {
        content: url(../img/common/alonly.svg);
        line-height: 0;
        height: 46px;
        width: 46px;
        border-radius: 23px;
        background-color: #323886;
        position: absolute;
        right: 10px;
        top: 0;
        transition: all .3s;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 4px
    }

    #voice_line .mess>a:hover::after {
        height: 56px;
        width: 56px;
        border-radius: 28px;
        background-color: #129ccd;
        right: 5px;
        top: -5px
    }

    #contact_line {
        background-color: #323886;
        height: 370px;
        margin-top: 100px
    }

    #contact_line .wrp {
        padding: 80px 120px;
        color: #fff;
        position: relative
    }

    #contact_line .wrp>div>h2 {
        text-indent: -9999px;
        width: 447px;
        height: 63px;
        background: url(../img/top/pc/contactus.png) no-repeat
    }

    #contact_line .wrp>div>p {
        margin-top: 70px;
        font-size: 16px;
        line-height: 26px
    }

    a.linkbtn {
        cursor: pointer;
        display: block;
        width: 460px;
        height: 110px;
        border-radius: calc(110px / 2);
        background: rgb(18 156 205 / 50%);
        position: absolute;
        z-index: 10;
        left: 766px;
        top: 163px
    }

    a.linkbtn:hover {
        opacity: 1;
        background: rgb(18 155 205 / 50%)
    }

    a.linkbtn>span {
        opacity: 1;
        position: relative;
        left: 10px;
        top: 10px;
        width: 440px;
        height: 90px;
        border-radius: calc(90px / 2);
        display: block;
        padding: 0 30px;
        font-size: 28px;
        line-height: 90px;
        text-align: left;
        color: #323886;
        background-color: #fff;
        transition: all .3s
    }

    a.linkbtn:hover>span {
        background-color: #feef56
    }

    a.linkbtn::after {
        content: url(../img/common/alonly.svg);
        line-height: 0;
        height: 46px;
        width: 46px;
        border-radius: 23px;
        background-color: #323886;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .3s;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 4px
    }

    a.linkbtn:hover::after {
        height: 56px;
        width: 56px;
        border-radius: 28px;
        right: 25px;
        top: calc(50% -5px)
    }

    #footline .wrp {
        position: relative;
        height: 380px;
        padding-top: 100px
    }

    #footline a {
        color: #000
    }

    #footline .logo {
        width: 365.46px;
        height: 55.51px;
        text-indent: -9999px;
        background: url(../img/common/logo.svg) no-repeat;
        background-size: contain;
        margin-left: auto;
        margin-right: auto;
        position: relative
    }

    #footline .logo::after {
        content: "";
        display: block;
        width: 237px;
        height: 142px;
        background: url(../img/common/pc/mark.png);
        position: absolute;
        right: -240px;
        bottom: 0
    }

    #footline nav {
        margin-top: 25px;
        font-size: 14px;
        line-height: 20px;
        color: #000;
        width: 544px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap
    }

    #footline nav+p {
        margin: 90px auto auto auto;
        font-size: 14px;
        line-height: 20px;
        color: #000;
        width: 222px;
        display: flex;
        justify-content: space-between
    }

    #footline small {
        position: absolute;
        bottom: 0;
        font-weight: 400;
        font-size: 13px;
        line-height: 20px;
        text-align: center;
        color: #000;
        width: 100%
    }

    #footline .wrp {
        position: relative
    }

    #footline a#gotop {
        display: block;
        font-weight: 700;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        color: #000;
        height: 94px;
        width: 73px;
        position: absolute;
        top: -50px;
        left: 50%;
        padding-top: 73px
    }

    #footline a#gotop::before {
        content: "";
        display: block;
        width: 100%;
        height: 73px;
        background: url(../img/common/gotop.svg) center no-repeat;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        transition: all .3s
    }

    #footline a#gotop:hover::before {
        top: -25px
    }

    header {
        margin-bottom: 85px
    }

    header .wrp {
        background-position: right 0 top 0;
        background-repeat: no-repeat;
        padding: 119px 40px 0 40px;
        height: 364px
    }

    header.about .wrp {
        background-image: url(../img/about/pc/about_header.jpg)
    }

    header h2 {
        text-indent: -9999px;
        background-repeat: no-repeat;
        background-size: contain
    }

    header.about h2 {
        width: 338.46px;
        height: 63.63px;
        background-image: url(../img/common/about.svg)
    }

    header h2+span {
        display: block;
        margin-top: 20px;
        font-size: 32px;
        letter-spacing: .1em;
        line-height: 40px;
        color: #000
    }

    main>.wrp {
        font-size: 16px;
        line-height: 32px
    }

    main>.wrp>div {
        padding-left: 100px;
        padding-right: 100px;
        padding-bottom: 30px
    }

    nav.aboutnav {
        display: flex;
        justify-content: space-between;
        width: 780px;
        margin: auto;
        font-size: 22px;
        line-height: 24px;
        margin-bottom: 100px
    }

    nav.aboutnav>a {
        padding-right: 45px;
        position: relative
    }

    nav.aboutnav>a::after {
        content: url(../img/common/alonly.svg);
        line-height: 0;
        height: 34px;
        width: 34px;
        border-radius: 17px;
        background-color: #323886;
        position: absolute;
        right: 0;
        top: -3px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 4px
    }

    div.page_title {
        text-align: center
    }

    div.page_title>h1 {
        position: relative;
        display: inline-block;
        text-align: center
    }

    div.page_title>h1::before {
        content: "";
        display: block;
        position: absolute;
        top: -17px;
        right: -150px;
        width: 153px;
        height: 92px;
        background: url(../img/common/pc/mark.png) no-repeat;
        background-size: contain
    }

    div.page_title>h1::after {
        content: "";
        display: block;
        position: absolute;
        height: 6px;
        width: 460px;
        bottom: -25px;
        left: 50%;
        transform: translateX(-50%);
        background: url(../img/common/h2_bottom.svg)
    }

    div.page_title>h1>span {
        font-weight: 700;
        font-size: 30px;
        letter-spacing: .05em;
        line-height: 36px
    }

    div.page_title>h1>div {
        margin-top: 10px;
        font-size: 50px;
        line-height: 55px
    }

    #gas_1 {
        padding-top: 20px;
        padding-bottom: 100px;
        border-bottom: 1px solid #000
    }

    #gas_1::after {
        content: "";
        display: block;
        clear: both
    }

    #gas_1>div {
        float: left;
        width: 650px
    }

    #gas_1>picture {
        float: right
    }

    #gas_1>p {
        color: #323d43
    }

    main h2 {
        font-size: 32px;
        padding-left: 42px;
        position: relative;
        margin-bottom: 65px;
        color: #323886
    }

    main h2::before {
        content: "";
        height: 42px;
        width: 8px;
        background: url(../img/common/h2.svg) no-repeat;
        position: absolute;
        left: 0;
        top: 0
    }

    #gas_2 {
        padding-top: 65px
    }

    #gas_2 .flex_line {
        margin-top: 45px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    #gas_2 .flex_line>div {
        width: 500px
    }

    #gas_2 .flex_line>div:nth-child(n+3) {
        margin-top: 70px
    }

    #gas_2 .flex_line>div>div {
        display: flex;
        justify-content: space-between
    }

    .flex_line>div>h3 {
        margin-top: 15px;
        margin-bottom: 30px;
        font-size: 26px;
        line-height: 32px;
        color: #1a6c9e;
        font-weight: 400
    }

    #gas_2 .flex_line>div>h3::before {
        content: "■";
        display: inline;
        margin-right: 20px
    }

    .bmess {
        margin-top: 50px;
        font-size: 26px;
        line-height: 38px;
        text-align: center;
        color: #323886
    }

    #about_kyowa header.about .wrp {
        background-image: url(../img/about/pc/about_kyowa_header.jpg)
    }

    #top_message>.wrp {
        position: relative;
        height: 915px;
        overflow: hidden;
        background: url(../img/about/pc/bg.png) no-repeat;
        background-position: bottom 20px left 0;
        padding-left: 100px;
        padding-right: 100px;
        padding-bottom: 20px;
        border-bottom: 1px solid #000
    }

    #top_message>.wrp h2 {
        position: absolute;
        top: 40px;
        left: 100px;
        text-indent: -9999px;
        display: block;
        width: 415px;
        height: 195px;
        background: url(../img/about/pc/over_the_top.svg) no-repeat;
        background-size: contain
    }

    #top_message>.wrp h2::before {
        display: none
    }

    #top_message>.wrp h2+p {
        position: absolute;
        top: 237px;
        left: 118px;
        font-size: 26px;
        letter-spacing: .1em;
        line-height: 32px;
        color: #000
    }

    #top_message .photobox {
        width: 645px;
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        text-align: center;
        color: #323D43
    }

    #top_message .photobox>div:nth-child(2)>span {
        position: relative;
        left: -23px
    }

    #top_message>.wrp>p {
        padding-top: 360px;
        margin-bottom: 40px;
        font-size: 32px;
        line-height: 50px;
        color: #323886
    }

    #top_message .messbox {
        font-size: 16px;
        line-height: 32px;
        color: #323d43
    }

    #top_message .messbox>p:nth-child(n+2) {
        text-indent: 1em
    }

    div.artbox>.wrp {
        padding: 66px 100px
    }

    #our_works .wrp {
        border-bottom: 1px solid #000
    }

    #our_works .flex_line {
        display: flex;
        height: 632px;
        justify-content: space-between
    }

    #our_works .flex_line>div {
        width: 341px;
        height: 632px;
        position: relative
    }

    #our_works .flex_line>div>h3 {
        margin-top: 16px;
        font-size: 26px;
        line-height: 32px;
        color: #1a6c9e
    }

    #our_works .flex_line>div>p {
        position: absolute;
        top: 420px;
        font-size: 16px;
        line-height: 32px;
        color: #323d43
    }

    #our_works .flex_line>div>.more_btn {
        position: absolute;
        bottom: 0;
        background-color: #129ccd
    }

    #our_works .flex_line>div>.more_btn>span {
        background-color: #fff;
        color: #323886
    }

    #our_works .flex_line>div>.more_btn>span:hover {
        background-color: #feef56
    }

    #company_info main {
        padding-left: 100px;
        padding-right: 100px
    }

    div.table_block table {
        border-collapse: collapse;
        width: 100%
    }

    div.table_block th,
    div.table_block td {
        padding: 20px;
        font-size: 18px;
        line-height: 24px
    }

    div.table_block tr {
        border-bottom: 1px solid #fff
    }

    div.table_block td {
        color: #333;
        background-color: #f2f2f2
    }

    div.table_block th {
        background-color: #129ccd;
        color: #fff;
        width: 240px;
        text-align: left
    }

    div.table_block th>span.letter_4 {
        width: 4em;
        display: inline-block;
        text-align: justify;
        text-align-last: justify
    }

    #cinfobox .url {
        margin-right: 4em
    }

    #cinfobox .zip {
        margin-right: 1em
    }

    #cinfobox .wrp,
    #organization .wrp {
        border-bottom: 1px solid #000
    }

    #organization h2 {
        float: left
    }

    #organization picture {
        float: right;
        margin-right: 210px
    }

    #organization .wrp::after {
        clear: both;
        content: "";
        display: block
    }

    #mainbuild {
        display: flex;
        justify-content: space-between
    }

    #mainbuild>div {
        width: calc(1080px - 566px - 20px);
        position: relative
    }

    #place .wrp {
        border-bottom: 1px solid #000
    }

    #place h3 {
        font-size: 26px;
        line-height: 32px;
        color: #1a6c9e;
        margin-bottom: 20px
    }

    #place h3+p {
        font-size: 16px;
        line-height: 24px;
        color: #323d43
    }

    #place .more_btn {
        margin-top: 20px;
        position: relative;
        transform: none;
        left: 0;
        top: 0;
        background-color: #129ccd
    }

    #place .more_btn>span {
        background-color: #fff;
        color: #323886
    }

    #place .more_btn>span:hover {
        background-color: #feef56
    }

    #place .flex_line {
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap
    }

    #place .flex_line>div {
        width: 530px
    }

    #place .flex_line>div:nth-child(n+3) {
        margin-top: 40px
    }

    #place .flex_line picture {
        margin-bottom: 20px
    }

    #enkaku {
        font-size: 18px;
        line-height: 24px
    }

    #services .service_title .wrp {
        background-image: url(../img/about/pc/about_kyowa_header.jpg)
    }

    header.service_title h2 {
        width: 365.22px;
        height: 62.64px;
        background-image: url(../img/service/service.svg)
    }

    #services .page_title+p {
        margin-top: 100px;
        font-size: 32px;
        line-height: 50px;
        color: #323886
    }

    #services .page_title+p+p {
        margin-top: 50px;
        font-size: 24px;
        line-height: 32px;
        color: #000
    }

    #services .page_title+p+p+p {
        margin-top: 65px;
        font-size: 16px;
        line-height: 32px;
        color: #323d43
    }

    #services .flex_line {
        margin-top: 50px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    #services .flex_line>div {
        width: 518px
    }

    #services main .wrp>p {
        padding-left: 100px;
        padding-right: 100px
    }

    #services .flex_line>div:nth-child(n+3) {
        margin-top: 70px
    }

    #services main>.wrp#equipment,
    #services main>.wrp#network {
        padding-top: 0;
        margin-top: 100px
    }

    #services main>.wrp#equipment>div.page_title,
    #services main>.wrp#network>div.page_title {
        margin-top: 0
    }

    #equipment div.page_title>h1::after {
        width: 680px;
        background-size: cover
    }

    header.recruit_title h2 {
        width: 365.22px;
        height: 62.64px;
        background-image: url(../img/recruit/recruit.svg)
    }

    .recruit_title .wrp {
        background-image: url(../img/recruit/pc/recruit_header.jpg)
    }

    #daisotsu a.linkbtn {
        position: relative;
        top: 0;
        left: 0;
        margin-top: 50px;
        transform: none
    }

    #fukuri .flex_line {
        display: flex;
        justify-content: space-between
    }

    #rec_message .wrp>div::after {
        content: "";
        display: block;
        clear: both
    }

    #rec_message .wrp>div>picture {
        float: left
    }

    #rec_message .wrp>div>div {
        float: right;
        width: 590px
    }

    #rec_message h3 {
        margin-bottom: 30px;
        font-size: 26px;
        line-height: 32px;
        color: #1a6c9e
    }

    #rec_message h3+div {
        font-size: 16px;
        line-height: 32px;
        color: #323d43
    }

    header.work_colleague_title h2 {
        width: 625.616px;
        height: 81px;
        background-image: url(../img/work_colleague/wc_title.svg)
    }

    header.work_colleague_title .wrp {
        background-image: url(../img/work_colleague/pc/work_colleague.jpg)
    }

    #work_colleague .artbox>.wrp {
        border-bottom: 1px solid #000
    }

    #work_colleague .artbox:nth-last-child(1)>.wrp {
        border-bottom: 0
    }

    #work_colleague .artbox>.wrp::after {
        clear: both;
        content: "";
        display: block
    }

    #work_colleague .artbox>.wrp>picture {
        float: left
    }

    #work_colleague .artbox>.wrp>div {
        width: 600px;
        float: right
    }

    #work_colleague .artbox h2>span:nth-child(1) {
        border: 1px solid #0071b7;
        padding: 0 10px
    }

    #work_colleague .artbox h2 {
        font-weight: 400;
        padding-left: 0;
        font-size: 22px;
        line-height: 30px;
        color: #323886;
        margin-bottom: 0
    }

    #work_colleague .artbox h2::before {
        display: none
    }

    #work_colleague .artbox h2+p {
        font-size: 26px;
        line-height: 36px;
        color: #323886;
        margin-top: 40px
    }

    #work_colleague .artbox h2+p+p {
        font-size: 25px;
        line-height: 50px;
        color: #222;
        margin-top: 35px
    }

    #work_colleague .artbox h2+p+p+p {
        font-size: 18px;
        line-height: 32px;
        color: #222;
        margin-top: 40px
    }

    header.contact_title .wrp {
        background: 0;
        padding: 0;
        padding-top: 120px;
        height: auto
    }

    header.contact_title h2 {
        width: 100%;
        height: 62.64px;
        background-image: url(../img/contact/contact_title.svg);
        background-position: center
    }

    header.contact_title h2+span {
        text-align: center
    }

    #contact div.page_title>h1::after {
        width: 850px;
        background-repeat: no-repeat;
        background-size: cover
    }

    #contact .flow {
        text-align: center;
        margin-top: 50px;
        margin-bottom: 75px
    }

    #contact .flow img {
        margin: auto
    }

    #contact .required::before {
        content: "必須";
        background-color: #feef56;
        height: 38px;
        padding: 0 10px;
        line-height: 38px;
        color: #323886;
        font-size: 18px;
        font-weight: 700;
        margin-right: 5px;
        display: inline-block
    }

    #contact .form_block dt {
        font-size: 22px;
        line-height: 32px;
        color: #000
    }

    #contact .form_block {
        margin-top: 50px
    }

    #contact .form_block dd {
        font-size: 22px
    }

    .form_block dd input[type=text],
    .form_block dd input[type=email],
    .form_block dd input[type=number] {
        height: 92px;
        line-height: 92px;
        outline-color: #034f9670;
        border: 0;
        outline-style: solid;
        outline-width: 1px;
        width: 100%;
        padding: 0 20px
    }

    .form_block dd input:focus,
    .form_block dd textarea:focus {
        background-color: #0071b72f;
        outline-color: #034e96
    }

    .form_block dd {
        margin-top: 10px;
        margin-bottom: 30px
    }

    .form_block dd.birth input[type=number] {
        width: 100px;
        margin-left: 30px;
        margin-right: 10px;
        text-align: center
    }

    .form_block dd.birth input[type=number].year {
        width: 140px;
        margin-left: 0
    }

    .form_block dd input[type=number][name=zip1] {
        width: 100px;
        margin-right: 10px;
        text-align: center
    }

    .form_block dd input[type=number][name=zip2] {
        width: 140px;
        margin-right: 10px;
        text-align: center;
        margin-left: 10px
    }

    .form_block textarea {
        width: 100%;
        height: 300px
    }

    #contact .form_block .btn_line {
        text-align: center
    }

    #contact .form_block .btn_line>a.linkbtn:nth-child(n+2) {
        margin-left: 50px
    }

    #contact .form_block .btn_line>a.linkbtn {
        position: relative;
        top: 0;
        left: 0;
        display: inline-block
    }

    #contact .form_block .btn_line>a.linkbtn[name=reset]>span,
    #contact .form_block .btn_line>a.linkbtn[name=back]>span {
        text-align: right
    }

    #contact .form_block .btn_line>a.linkbtn[name=reset]::after,
    #contact .form_block .btn_line>a.linkbtn[name=back]::after {
        content: url(../img/common/alonly_left.svg);
        right: auto;
        left: 30px
    }

    #privacy_info {
        margin-top: 100px
    }

    #privacy_info>p:nth-child(1) {
        font-size: 26px;
        line-height: 36px;
        text-align: center;
        color: #323886
    }

    #privacy_info>p:nth-child(2) {
        margin-top: 15px;
        font-size: 18px;
        line-height: 32px;
        color: #222
    }

    .forsmt {
        display: none
    }

    #info pre {
        white-space: pre-wrap;
        padding: 100px;
        font-size: 18px;
        text-align: left;
        color: #00203c;
        font-family: 'Noto Sans JP', sans-serif;
    }

    #info #hogo {
        margin-top: 100px;
    }

    #info nav.aboutnav {
        width: 500px;
    }


    header.info_title h2 {
        width: 100%;
        height: 62.64px;
        background-image: url(../img/information.svg);
        background-position: center;
    }

    header.info_title h2+span {
        text-align: center;
    }


    
    .blue_line {
        border-bottom: 1px solid #1a6c9e;
        padding-bottom: 10px;
    }
}

@media screen and (max-width:800px) {
    .forpc {
        display: none
    }

    body {
        width: 750px;
    }

    a {
        text-decoration: none
    }

    .wrp {
        width: 750px;
        margin: auto;
        padding-left: calc(20px * 2);
        padding-right: calc(20px * 2)
    }

    #headerLine {
        height: calc(62.38px*2)
    }

    #headerLine .wrp {
        padding-top: calc(16px * 2);
        position: relative;
    }

    #headerLine .logo {
        display: block;
        float: left;
        width: calc(197.5px * 2);
        height: calc(30px *2);
        background: url(../img/common/logo.svg) no-repeat;
        text-indent: -9999px;
        background-size: contain
    }

    #gmenu {
        display: none
    }

    #sp_menu {
        float: right;
        width: 60px;
        height: 52px
    }

    #kv_line>.wrp {
        width: 750px;
        padding: 0;
        position: relative;
        height: 1500px
    }

    #kv_line>.wrp>div {
        visibility: hidden;
        opacity: 0;
        transition: opacity 1s;
        height: 1500px;
        position: absolute;
        top: 0;
        width: 100%;
        background-size: cover;
        color: #000;
    }

    #kv_line>.wrp>div>p:nth-child(1) {
        margin-top: 50px;
        text-indent: -9999px;
        height: calc(177px * 2);
        background-image: url(../img/top/smt/over_the_top.png);
        background-position: 40px 0;
        background-repeat: no-repeat;

        z-index: 1;
        position: relative;
    }

    #kv_line>.wrp>div>p:nth-child(2) {
        padding: 0 40px;
        font-size: calc(21px * 2);
        letter-spacing: .2em;
        line-height: 38px;
        margin-top: 25px;

        z-index: 1;
        position: relative;
    }

    #kv_line>.wrp>div>p:nth-child(3) {
        padding: 0 40px;
        font-size: 70px;
        letter-spacing: .1em;
        line-height: 90px;
        margin-top: 30px;
        z-index: 1;
        position: relative;
    }



    #kv_line>.wrp>div:nth-child(1) {
        background-image: url(../img/top/smt/kv1.jpg);
        background-position-x: 50%
    }

    #kv_line>.wrp>div:nth-child(2) {
        background-image: url(../img/top/smt/kv2.jpg);
        background-position-x: 50%
    }

    #kv_line>.wrp>div:nth-child(3) {
        background-image: url(../img/top/smt/kv3.jpg);
        background-position-x: 50%
    }

    #kv_line>.wrp>div:nth-child(4) {
        background-image: url(../img/top/smt/kv4.jpg);
        background-position-x: 50%
    }

    #kv_line.show_1>.wrp>div:nth-child(1) {
        opacity: 1;
        visibility: visible
    }

    #kv_line.show_2>.wrp>div:nth-child(2) {
        opacity: 1;
        visibility: visible
    }

    #kv_line.show_3>.wrp>div:nth-child(3) {
        opacity: 1;
        visibility: visible
    }

    #kv_line.show_4>.wrp>div:nth-child(4) {
        opacity: 1;
        visibility: visible
    }

    #kv_line>.wrp>div>a {
        display: block;
        width: calc(312.42px * 2);
        height: calc(75px * 2);
        border-radius: 75px;
        position: absolute;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
        background: rgb(18 155 205 / 50%)
    }

    #kv_line>.wrp>div>a>span {
        position: relative;
        left: calc(312.42px - 297.39px);
        top: calc(75px - 59.97px);
        width: calc(297.39px * 2);
        height: calc(59.97px * 2);
        line-height: calc(59.97px * 2);
        border-radius: 59.97px;
        display: block;
        padding: 0 42px;
        color: #323886;
        background-color: #fff;
        transition: all .3s;
        font-size: calc(20px * 2)
    }

    #kv_line>.wrp>div>a::after {
        content: "";
        line-height: 0;
        height: calc(34.33px * 2);
        width: calc(34.33px * 2);
        border-radius: 34.33px;
        background-color: #323886;
        background-image: url(../img/common/alonly.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 42px 17px;
        position: absolute;
        right: 46px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .3s;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 4px
    }

    #kv_line>.wrp>div>a:active {
        opacity: 1;
        background: rgb(18 155 205 / 50%)
    }

    #kv_line>.wrp>div>a:active>span {
        background-color: #feef56
    }

    #kv_line>.wrp>p {
        position: absolute;
        bottom: 30px;
        width: 100%;
        text-align: center;
        z-index: 100
    }

    #kv_line>.wrp>p>button {
        cursor: pointer;
        outline: 0;
        padding: 0;
        appearance: none;
        width: calc(12px * 2);
        height: calc(12px * 2);
        background: #ededed;
        border: 1px solid #323886;
        border-radius: 50%
    }

    #kv_line>.wrp>p>button:nth-child(n+2) {
        margin-left: calc(35px * 2)
    }

    #kv_line>.wrp>p>button:hover,
    #kv_line.show_1>.wrp>p>button:nth-child(1),
    #kv_line.show_2>.wrp>p>button:nth-child(2),
    #kv_line.show_3>.wrp>p>button:nth-child(3) {
        background: #323886
    }

    #news_line {
        padding-top: calc(37px * 2)
    }

    #news_line .title>h2 {
        display: block;
        width: calc(153.6px * 2);
        height: calc(43.96px * 2);
        background-image: url(../img/top/news.svg);
        background-size: contain;
        text-indent: -9999px;
        margin-left: auto;
        margin-right: auto
    }

    .title>small {
        display: block;
        font-size: calc(20px * 2);
        letter-spacing: .1em;
        text-align: center;
        color: #000;
        width: 100%;
        margin-top: 20px
    }

    #news_line li {
        padding: 60px 25px;
        border-bottom: 1px solid #000;
        position: relative
    }

    #news_line li span:nth-of-type(1) {
        font-weight: 700;
        font-size: calc(18px* 2);
        line-height: calc(22px * 2);
        color: #129ccd;
        margin-right: 20px
    }

    #news_line li span:nth-of-type(2) {
        display: inline-block;
        height: calc(23.5px * 2);
        line-height: calc(23.5px * 2);
        font-size: calc(16px * 2);
        padding: 0 20px;
        border-radius: 23.5px;
        color: #000;
        border: 1px solid #000
    }

    #news_line li p {
        font-size: calc(16px * 2);
        line-height: calc(22px * 2);
        margin-top: 20px;
        color: #000;
        padding-right: 30px
    }

    #news_line li::after {
        content: "";
        display: block;
        width: calc(27px * 2);
        height: calc(11px * 2);
        background: url(../img/common/al.svg) no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        opacity: .8
    }

    #about_line {
        padding-top: calc(37px * 2)
    }

    #about_line .title>h2 {
        display: block;
        width: calc(234.58px * 2);
        height: calc(44.1px * 2);
        background-image: url(../img/common/about.svg);
        background-size: contain;
        text-indent: -9999px;
        margin-left: auto;
        margin-right: auto
    }

    #about_line .flex_line>a {
        display: block;
        margin-top: 50px
    }

    #about_line .flex_line>a>h3 {
        text-align: center;
        font-size: 50px;
        color: #323886;
        margin-top: 30px;
        position: relative
    }

    #about_line .flex_line>a>h3::after {
        display: block;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        content: "";
        background-color: #323886;
        position: absolute;
        right: 0;
        top: 30px;
        transform: translateY(-50%);
        background-image: url(../img/common/alonly.svg);
        background-repeat: no-repeat;
        background-size: 48px 20px;
        background-position: center 27px
    }

    #about_line .flex_line>a>p {
        font-size: calc(16px * 2);
        line-height: calc(24px * 2);
        text-align: center;
        color: #323d43
    }

    #rec_line {
        margin-top: calc(37px * 2);
        padding-top: calc(260.42px * 2);
        padding-bottom: 40px;
        background-image: url(../img/top/smt/rec.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #129CCD;
        color: #fff
    }

    #rec_line .title>h2 {
        display: block;
        width: calc(153.6px * 2);
        height: calc(43.96px * 2);
        background-image: url(../img/top/news.svg);
        background-size: contain;
        text-indent: -9999px;
        margin-left: auto;
        margin-right: auto
    }

    #rec_line h3 {
        margin-top: 30px;
        font-size: calc(60px * 2);
        text-align: center
    }

    #rec_line h3+P {
        font-size: calc(16px * 2);
        line-height: calc(24px * 2)
    }

    #rec_line a {
        margin: 50px auto;
        display: block;
        width: calc(312.42px * 2);
        height: calc(75px * 2);
        border-radius: 75px;
        background-color: rgb(255 255 255 / 55%)
    }

    #rec_line a>span {
        position: relative;
        left: calc(312.42px - 297.39px);
        top: calc(75px - 59.97px);
        width: calc(297.39px * 2);
        height: calc(59.97px * 2);
        line-height: calc(59.97px * 2);
        border-radius: 59.97px;
        display: block;
        padding: 0 42px;
        color: #323886;
        background-color: #fff;
        transition: all .3s;
        font-size: calc(20px * 2)
    }

    #rec_line a>::after {
        content: "";
        line-height: 0;
        height: calc(34.33px * 2);
        width: calc(34.33px * 2);
        border-radius: 34.33px;
        background-color: #323886;
        background-image: url(../img/common/alonly.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 42px 17px;
        position: absolute;
        right: 46px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .3s;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 4px
    }

    #rec_line a:active {
        opacity: 1;
        background: rgb(50 56 134 / 55%)
    }

    #rec_line a:active>span {
        background-color: #feef56
    }

    #service_line {
        padding-top: 90px;
        padding-bottom: 90px
    }

    #service_line h2 {
        width: calc(255.92px*2);
        height: calc(43.89px * 2);
        background-image: url(../img/common/service.svg);
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: auto;
        margin-right: auto;
        text-indent: -9999px
    }

    #service_line .flex_line>a {
        display: block;
        width: calc(335px * 2);
        height: calc(519px * 2);
        margin: 20px auto;
        color: #fff;
        position: relative
    }

    #service_line .flex_line>a:nth-child(1) {
        background-image: url(../img/top/smt/s1.jpg)
    }

    #service_line .flex_line>a:nth-child(2) {
        background-image: url(../img/top/smt/s2.jpg)
    }

    #service_line .flex_line>a:nth-child(3) {
        background-image: url(../img/top/smt/s3.jpg)
    }

    #service_line .flex_line>a>span:nth-child(1) {
        display: block;
        position: absolute;
        top: 40px;
        width: 100%;
        font-size: calc(80px*2);
        line-height: calc(85px * 2);
        text-align: center
    }

    #service_line .flex_line>a>h3 {
        position: absolute;
        top: calc(143px * 2);
        width: 100%;
        font-size: calc(35px * 2);
        line-height: calc(40px * 2);
        text-align: center
    }

    #service_line .flex_line>a>p {
        position: absolute;
        font-size: calc(16px * 2);
        line-height: calc(24px * 2);
        text-align: center;
        text-shadow: 0 6px 12px rgba(0, 0, 0, .16);
        width: 100%;
        top: calc(244px * 2)
    }

    .more_btn {
        display: block;
        cursor: pointer;
        outline: 0;
        padding: 0;
        appearance: none;
        border: 0;
        width: calc(200px * 2);
        height: calc(60px * 2);
        border-radius: calc(30px * 2);
        background-color: rgba(255, 255, 255, .75);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(20px * 2)
    }

    .more_btn>span {
        display: block;
        width: calc(190px * 2);
        height: calc(50px * 2);
        line-height: calc(50px * 2);
        border-radius: calc(25px * 2);
        position: absolute;
        left: 10px;
        top: 10px;
        padding-left: 50px;
        background-color: #129ccd;
        color: #fff;
        text-align: left;
        font-weight: 700;
        font-size: calc(24px * 2);
        letter-spacing: .05em;
        transition: all .3s
    }

    .more_btn>span::after {
        content: "";
        display: block;
        width: 64px;
        height: 64px;
        border-radius: 32px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 48px;
        background-color: #323886;
        background-image: url(../img/common/alonly.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 36px auto;
        transition: all .3s
    }

    #service_line .flex_line>a:hover .more_btn,
    .more_btn :hover {
        color: #323886
    }

    #service_line .flex_line>a:hover .more_btn>span,
    .more_btn:hover>span {
        background-color: #feef56
    }

    #service_line .flex_line>a:hover .more_btn>span::after,
    .more_btn:hover>span::after {
        width: calc(42px * 2);
        height: calc(42px * 2);
        border-radius: 42px;
        right: 38px
    }

    #voice_line {
        padding-top: 90px;
        padding-bottom: 90px
    }

    #voice_line h2 {
        width: calc(335px * 2);
        height: calc(48.87px * 2);
        margin: auto;
        background: url(../img/common/work_colleague.svg) no-repeat;
        background-size: contain;
        text-indent: -9999px
    }

    #voice_line .flex_line {
        height: calc(536px * 2)
    }

    #voice_line .flex_line a {
        display: block;
        width: calc(335px * 2);
        height: calc(536px * 2);
        border-radius: 335px;
        border: 20px solid #129ccd;
        background-repeat: no-repeat;
        position: relative
    }

    #voice_line .flex_line a>span {
        font-size: 40px;
        line-height: 60px;
        position: absolute;
        color: #fff;
        font-weight: 700;
        left: 13%;
        bottom: 15%
    }

    #voice_line .flex_line a.man1 {
        background-image: url(../img/top/smt/voice01.jpg);
        background-size: 209%;
        background-position: 26% 67%
    }

    #voice_line .flex_line a.man2 {
        background-image: url(../img/top/smt/voice02.jpg);
        background-size: 201%;
        background-position: 67% 74%
    }

    #voice_line .flex_line a.man3 {
        background-image: url(../img/top/smt/voice03.jpg);
        background-size: 201%;
        background-position: 43% 33%
    }

    #voice_line .flex_line a.man4 {
        background-color: #323886;
    }


    #voice_line .flex_line a.man4>div {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 375px;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 40px;

        font-weight: 700;
    }




    #voice_line .flex_line a.man4>div::after {

        content: "";
        background-image: url(../img/common/alonly_blue.svg);
        background-repeat: no-repeat;
        background-position: center 35px;
        background-size: 60px 21px;
        height: calc(46px * 2);
        width: calc(46px * 2);
        border-radius: 46px;
        background-color: #ffffff;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .3s;

    }






    #voice_line .mess {
        font-size: calc(16px * 2);
        line-height: calc(26px * 2);
        color: #000;
        margin-top: 70px
    }

    #voice_line .mess>a {
        display: block;
        margin-top: 30px;
        font-size: 40px;
        line-height: 40px;
        color: #142b74;
        position: relative
    }

    #voice_line .mess>a::after {
        content: "";
        background-image: url(../img/common/alonly.svg);
        background-repeat: no-repeat;
        background-position: center 35px;
        background-size: 51px 17px;
        height: calc(46px * 2);
        width: calc(46px * 2);
        border-radius: 46px;
        background-color: #323886;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .3s
    }

    #contact_line {
        width: 100%;
        padding-top: 90px;
        padding-bottom: 90px;
        background-color: #323886;
        color: #fff
    }

    #contact_line h2 {
        height: 100px;
        background-image: url(../img/top/pc/contactus.png);
        background-repeat: no-repeat;
        background-size: contain;
        text-indent: -9999px
    }

    #contact_line h2+p {
        font-size: calc(16px * 2);
        line-height: calc(26px * 2);
        color: #fff;
        margin-top: 30px
    }

    #contact_line a {
        display: block;
        width: calc(312.42px * 2);
        height: calc(75px * 2);
        border-radius: 75px;
        margin: 50px auto 0 auto;
        background: rgb(18 155 205 / 50%);
        position: relative
    }

    #contact_line a>span {
        position: relative;
        left: calc(312.42px - 297.39px);
        top: calc(75px - 59.97px);
        width: calc(297.39px * 2);
        height: calc(59.97px * 2);
        line-height: calc(59.97px * 2);
        border-radius: 59.97px;
        display: block;
        padding: 0 42px;
        color: #323886;
        background-color: #fff;
        transition: all .3s;
        font-size: calc(20px * 2)
    }

    #contact_line a::after {
        content: "";
        line-height: 0;
        height: calc(34.33px * 2);
        width: calc(34.33px * 2);
        border-radius: 34.33px;
        background-color: #323886;
        background-image: url(../img/common/alonly.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 42px 17px;
        position: absolute;
        right: 46px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .3s;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 4px
    }

    #footline {
        height: calc(250px * 2);
        position: relative
    }

    #footline div.logo {
        height: 100px;
        background: url(../img/common/logo.svg) no-repeat;
        text-indent: -9999px;
        width: 100%;
        background-size: contain;
        margin-top: 200px;
        position: relative
    }

    #footline .logo::after {
        content: "";
        display: block;
        width: calc(213px * 2);
        height: calc(127.54px * 2);
        background: url(../img/common/smt/mark.png);
        background-size: contain;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -270px
    }

    #footline nav+p {
        margin: 120px auto auto auto;
        font-size: 28px;
        line-height: 40px;
        text-align: left;
        width: calc(222px * 2);
        display: flex;
        justify-content: space-between
    }

    #footline nav+p>a {
        color: #000;
    }

    #footline small {
        position: absolute;
        width: 670px;
        bottom: 10px;
        font-size: calc(13px * 2);
        text-align: center;
        color: #000
    }

    .my-button-prev,
    .my-button-next {
        width: calc(72px * 2);
        height: calc(72px * 2);
        border-radius: 72px;
        background: linear-gradient(rgb(18 156 205 / 50%) 0, rgb(50 56 134 / 50%) 100%);
        position: absolute;
        bottom: 0;
        z-index: 100
    }

    .my-button-prev {
        left: 15%
    }

    .my-button-next {
        right: 15%
    }

    .my-button-prev::before,
    .my-button-next::before {
        position: absolute;
        content: "";
        width: calc(55px * 2);
        height: calc(55px * 2);
        background-color: #fff;
        border-radius: 55px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .my-button-prev::after {
        position: absolute;
        content: "";
        width: 40px;
        height: 40px;
        border-right: 12px solid #129CCD;
        border-bottom: 12px solid #129CCD;
        transform: rotate(135deg);
        top: 55px;
        left: 55px
    }

    .my-button-next::after {
        position: absolute;
        content: "";
        width: 40px;
        height: 40px;
        border-right: 12px solid #129CCD;
        border-bottom: 12px solid #129CCD;
        transform: rotate(-45deg);
        top: 55px;
        left: 45px
    }

    #voice_line .swiper {
        padding-bottom: 25px
    }

    header {
        position: relative;
        height: calc(447px * 2);
        padding-top: calc(250px * 2);
        overflow: hidden
    }

    header::before {
        content: "";
        display: block;
        width: calc(290px * 2);
        height: calc(447px * 2);
        position: absolute;
        right: 0;
        top: 0;
        background-size: auto 894px;
        background-position: -385px 0;
        background-image: url(../img/about/smt/about_head.jpg);
        z-index: -1
    }

    header h2 {
        text-indent: -9999px;
        background-repeat: no-repeat;
        background-size: contain
    }

    header h2+span {
        margin-top: 30px;
        font-size: calc(25px * 2);
        letter-spacing: .1em;
        color: #000
    }

    header.about h2 {
        height: calc(51.06px * 2);
        background-image: url(../img/common/about.svg)
    }

    main {
        padding: 40px 0
    }

    nav.aboutnav {
        margin-bottom: 50px
    }

    nav.aboutnav a {
        display: block;
        position: relative;
        font-size: calc(19px * 2);
        color: #323886;
        padding-left: 85px;
        margin-bottom: 20px
    }

    nav.aboutnav a::before {
        content: "";
        background-image: url(../img/common/alonly.svg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        line-height: 0;
        height: 60px;
        width: 60px;
        border-radius: 30px;
        background-color: #323886;
        position: absolute;
        left: 0;
        top: 0;
        display: block
    }

    div.page_title {
        text-align: center;
        position: relative;
        padding-bottom: 20px
    }

    div.page_title>h1 {
        display: inline-block;
        text-align: center;
        color: #323886
    }

    div.page_title>h1>span {
        display: block;
        font-weight: 700;
        font-size: 38px;
        letter-spacing: .05em;
        line-height: 46px;
        margin-bottom: 10px
    }

    div.page_title>h1>div {
        font-size: 64px;
        line-height: 70px
    }

    div.page_title>h1::before {
        content: "";
        display: block;
        margin: 0 auto 30px auto;
        width: calc(103.97px * 2);
        height: calc(62.26px * 2);
        background: url(../img/common/pc/mark.png) no-repeat;
        background-size: contain
    }

    div.page_title>h1::after {
        content: "";
        display: block;
        position: absolute;
        height: 8px;
        width: calc(335px * 2);
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background: url(../img/common/h2_bottom.svg);
        background-size: cover
    }

    .artbox {
        margin-top: 90px
    }

    .artbox h2 {
        position: relative;
        font-size: calc(28px * 2);
        line-height: calc(38px * 2);
        color: #323886;
        padding-left: 40px;
        margin-bottom: 70px
    }

    .artbox h2::before {
        content: "";
        height: calc(42px * 2);
        width: calc(8px * 2);
        background: url(../img/common/h2.svg) no-repeat;
        position: absolute;
        background-size: cover;
        left: 0;
        top: -10px
    }

    #about_gas .artbox p {
        font-size: calc(16px * 2);
        line-height: calc(32px * 2);
        color: #323d43
    }

    #about_gas .artbox picture {
        margin-top: 30px
    }

    #about_gas .artbox picture:nth-child(n+2) {
        margin-top: 60px
    }

    #about_gas h3 {
        margin-top: 120px;
        font-size: calc(26px * 2);
        line-height: calc(32px * 2);
        color: #1a6c9e
    }

    #about_gas h3::before {
        content: "■";
        display: inline;
        margin-right: calc(10px * 2)
    }

    .bmess {
        font-size: calc(26px*2);
        line-height: calc(38px*2);
        text-align: center;
        color: #323886;
        margin-top: 200px
    }

    #gotop {
        display: none
    }

    #our_works .more_btn {
        position: relative
    }

    #top_message h2 {
        text-indent: -9999px;
        display: block;
        width: calc(258.45px * 2);
        height: calc(121.14px * 2);
        background: url(../img/about/pc/over_the_top.svg) no-repeat;
        background-size: contain;
        margin: 100px auto auto auto
    }

    #top_message h2+p {
        font-size: calc(15px * 2);
        letter-spacing: .1em;
        color: #000;
        padding-left: 100px;
        margin-top: 25px
    }

    #top_message .wrp>p {
        position: absolute;
        top: 920px;
        left: 40px;
        font-size: calc(27px*2);
        line-height: calc(40px*2);
        color: #323886
    }

    #top_message {
        position: relative;
        background-image: url(../img/about/smt/bg.jpg);
        background-repeat: no-repeat;
        background-position: -100px 30px
    }

    #top_message .photobox {
        display: flex;
        height: 600px;
        font-size: calc(16px*2);
        line-height: calc(20px * 2);
        text-align: center;
        color: #323d43
    }

    #top_message .photobox span {
        margin-top: 15px;
        display: block
    }

    #top_message .messbox {
        padding-top: 260px;
        font-size: calc(16px * 2);
        line-height: calc(32px * 2);
        color: #323d43
    }

    #our_works .flex_line>div>h3 {
        margin-top: 16px;
        font-size: calc(26px*2);
        line-height: calc(32px*2);
        color: #1a6c9e;
        margin-bottom: 35px
    }

    #our_works .flex_line>div>h3+p {
        font-size: calc(16px*2);
        line-height: 32px;
        color: #323d43
    }

    #our_works .flex_line>div {
        margin-bottom: 100px
    }

    #our_works a.more_btn,
    #place a.more_btn {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        background-color: #129CCD;
        margin-top: 40px
    }

    #our_works a.more_btn>span,
    #place a.more_btn>span {
        background-color: #fff;
        font-weight: 700;
        font-size: calc(24px*2);
        letter-spacing: .05em;
        color: #323886
    }

    #place .flex_line>div,
    #place #mainbuild {
        position: relative
    }

    #about_kyowa header::before,
    #services header::before {
        background-image: url(../img/about/smt/bg2.jpg);
        background-position: -324px 0
    }

    div.table_block table {
        border-collapse: collapse;
        width: 100%
    }

    div.table_block th,
    div.table_block td {
        padding: 25px;
        font-size: calc(14px * 2);
        line-height: calc(18px * 2);
        color: #333
    }

    div.table_block tr {
        border-bottom: 1px solid #fff
    }

    div.table_block td {
        color: #333;
        background-color: #f2f2f2
    }

    div.table_block th {
        background-color: #129ccd;
        color: #fff;
        text-align: left
    }

    #cinfobox .zip {
        display: block
    }

    #place h3 {
        margin-top: 80px;
        margin-bottom: 40px;
        font-weight: 400;
        font-size: calc(26px * 2);
        line-height: calc(32px * 2);
        color: #1a6c9e
    }

    #place h3+p {
        font-size: calc(16px * 2);
        line-height: calc(24px * 2);
        color: #323d43
    }

    #place .more_btn {
        top: 0;
        left: 0;
        position: relative;
        transform: none;
        margin: 40px 0
    }

    #work_colleague header::before {
        background-image: url(../img/work_colleague/smt/bg.jpg);
        background-position: -386px 0
    }

    header.work_colleague_title h2 {
        height: calc(130px * 2);
        background-image: url(../img/work_colleague/smt/work_title_smt.svg)
    }

    #work_colleague .artbox h2>span {
        border: 1px solid #0071b7;
        padding: 0 20px;
        font-size: calc(12px * 2);
        line-height: calc(16px * 2);
        color: #323886;
        letter-spacing: 0em;
        vertical-align: middle
    }

    #work_colleague .artbox h2 {
        padding-left: 0;
        font-size: calc(22px * 2);
        line-height: calc(30px * 2);
        color: #323886;
        letter-spacing: -.1em;
        font-weight: 400;
        margin-bottom: 0
    }

    #work_colleague .artbox h2::before {
        display: none
    }

    #work_colleague .artbox h2+p {
        font-size: calc(14px * 2);
        line-height: calc(19px * 2);
        color: #323886
    }

    #work_colleague .artbox h2+p+p {
        margin: 65px 0;
        font-size: calc(28px * 2);
        line-height: calc(42px * 2);
        color: #222
    }

    #work_colleague .artbox h2+p+p+p {
        font-size: calc(18px * 2);
        line-height: calc(32px * 2);
        color: #222
    }

    header.service_title h2 {
        height: calc(51.64px * 2);
        background-image: url(../img/service/service.svg)
    }

    #services .page_title+p {
        margin-top: 100px;
        font-size: calc(32px * 2);
        line-height: calc(50px * 2);
        color: #323886;
        margin-bottom: 75px
    }

    #services .page_title+p+p {
        font-size: calc(24px * 2);
        line-height: calc(32px * 2);
        color: #000;
        margin-bottom: 100px
    }

    #services .page_title+p+p+p {
        font-size: calc(16px * 2);
        line-height: calc(32px * 2);
        color: #323d43
    }

    .flex_line>div>h3 {
        font-weight: 400;
        font-size: calc(28px * 2);
        line-height: calc(20px * 2);
        text-align: left;
        color: #1a6c9e;
        margin-top: 50px;
        margin-bottom: 40px
    }

    #services .flex_line>div>h3+p {
        font-size: calc(16px * 2);
        line-height: calc(32px * 2);
        color: #323d43
    }

    #services .flex_line>div {
        margin-top: 100px
    }

    header.recruit_title h2 {
        background-image: url(../img/recruit/recruit.svg);
        height: 100px
    }

    #recruit header::before {
        background-image: url(../img/recruit/smt/bg.jpg);
        background-position: -386px 0
    }

    #recruit th {
        width: calc(130px * 2)
    }

    #rec_message h3 {
        margin-top: 80px;
        margin-bottom: 40px;
        font-weight: 400;
        font-size: calc(26px * 2);
        line-height: calc(32px * 2);
        color: #1a6c9e
    }

    #rec_message h3+div {
        font-size: calc(16px * 2);
        line-height: calc(32px * 2);
        color: #323d43
    }

    #recruit .more_btn {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin-top: 40px;
        width: calc(286px * 2);
        background-color: #129CCD
    }

    #recruit .more_btn>span {
        background-color: #fff;
        font-weight: 700;
        letter-spacing: .05em;
        color: #323886;
        width: calc(276px * 2)
    }

    #contact header::before {
        display: none
    }

    #contact header {
        height: auto;
        padding: 0
    }

    #contact header.contact_title h2 {
        height: 100px;
        background-image: url(../img/common/about.svg);
        background-position: center
    }

    #contact header.contact_title {
        text-align: center
    }

    #contact nav.aboutnav a {
        font-size: calc(16px * 2);
        vertical-align: middle
    }

    #contact nav.aboutnav a::before {
        height: 50px;
        width: 50px;
        top: -4px
    }

    #formbox {
        margin-top: 100px
    }

    .form_block {
        margin-top: 100px
    }

    #formbox p.notice {
        color: #00203c;
        font-size: calc(16px * 2);
        line-height: calc(24px * 2)
    }

    #formbox .required::before {
        content: "必須";
        background-color: rgb(254, 239, 86);
        height: calc(26px * 2);
        padding: 0 10px;
        line-height: calc(26px * 2);
        color: rgb(50, 56, 134);
        font-size: calc(16px * 2);
        margin-right: 5px;
        display: inline-block
    }

    #formbox dd input[type=email],
    #formbox dd input[type=text],
    #formbox dd input[type=number] {
        height: 92px;
        line-height: 92px;
        border: 1px solid #034E96;
        width: 100%;
        padding: 0 20px
    }

    .form_block dt,
    .form_block dd {
        font-size: calc(16px * 2);
        line-height: calc(22px * 2);
        text-align: left;
        color: #000
    }

    #formbox dd.birth input[type=number].year {
        width: 140px;
        margin-left: 0
    }

    #formbox dd input[type=number] {
        width: 100px;
        margin-left: 3px;
        margin-right: 14px;
        text-align: center
    }

    #formbox dd input[type=number][name=zip2] {
        width: 140px
    }

    #formbox dd {
        margin-top: 10px;
        margin-bottom: 30px
    }

    #formbox dd textarea {
        width: 100%;
        height: 300px
    }

    #formbox .btn_line {
        text-align: center
    }

    #formbox .btn_line>a.linkbtn {
        position: relative;
        display: inline-block;
        background-color: #129CCD;
        margin-top: 40px;
        width: calc(155px * 2);
        height: calc(40px * 2);
        border-radius: 40px
    }

    #formbox .btn_line>a.linkbtn:nth-child(n+2) {
        margin-left: 10px
    }

    #formbox .btn_line>a.linkbtn>span {
        background-color: #fff;
        font-weight: 700;
        font-size: calc(16px*2);
        color: #323886;
        display: block;
        width: calc(147px * 2);
        height: calc(32px * 2);
        line-height: calc(32px * 2);
        border-radius: 32px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    #privacy_info {
        font-size: 30px;
        margin-top: 50px
    }

    span.err {
        font-size: 30px;
        font-weight: 700;
        color: red;
        display: block;
        width: 100%
    }

    #contact .iserr input {
        background-color: #ffd0d0
    }

    .smt_menu {
        width: 60px;
        height: 52px;
        background: url(../img/common/smt/sp_menu.svg) no-repeat;
        background-size: cover;
        position: absolute;
        right: 40px;
    }

    #smt_menu_box {
        position: fixed;
        display: none;
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.9);
        z-index: 2222;
    }

    body.onmenu #smt_menu_box {
        display: block;
        overflow: scroll;
    }

    body.onmenu {
        position: fixed;
    }

    #smt_menu_box nav a {
        display: block;
        position: relative;
        font-size: calc(19px * 2);
        color: #323886;
        padding-left: 85px;
        margin-bottom: 20px;
        line-height: 1.7em;
    }

    #smt_menu_box nav a::before {
        content: "";
        background-image: url(../img/common/alonly.svg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        line-height: 0;
        height: 60px;
        width: 60px;
        border-radius: 30px;
        background-color: #323886;
        position: absolute;
        left: 0;
        top: 0;
        display: block;
    }

    #smt_menu_box nav {
        padding: 40px;
    }

    #smt_menu_box nav ul {
        width: 100%;
        border-top: 2px solid #323886;
        padding: 60px 40px;
    }

    #info pre {
        white-space: pre-wrap;
        padding: 100px 0;
        font-size: 30px;
        text-align: left;
        color: #00203c;
        font-family: 'Noto Sans JP', sans-serif;
    }

    #info header.info_title h2 {
        height: 100px;
        background-image: url(../img/information.svg);
        background-position: center;
    }


    #info header {
        height: auto;
        padding: 0;
        text-align: center;
    }

    #info header::before {
        display: none;
    }


    #kv_line>.wrp>div::before {
        position: absolute;
        top: 167px;
        left: 0;
        background-color: rgba(255, 255, 255, .7);
        z-index: 0;
        width: 595px;
        height: 517px;
        content: "";
        display: block;
    }
    .blue_line {
        border-bottom: 3px solid #1a6c9e;
        padding-bottom: 30px;
    }
}