@charset "UTF-8";

* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    color: #2E3630;
    font-family: 'Roboto','Noto Sans JP', sans-serif;
    font-weight: 400;
}
main {
    margin-bottom: 0;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

li {
    list-style: none;
}

a {
    color: #214ca3;
    text-decoration: none;
}
.pc {
    display: none;
}
.wrapper {
    display: block;
    max-width: 940px;
    padding: 40px;
    margin: 30px auto;
}
.contents-innter {
    /* display: block; */
    max-width: 900px;
    padding: 20px;
    margin: 0 auto;
}

/* ロゴ */
#header {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10000;
}
#header .logo {
    width: 100%;
    max-width: 326px;
}
#header .logo a {
    display: block;
}
#header .navi .menu {
    display: flex;
    align-items: center;
}
#header .navi .menu li {
    font-size: clamp(14px, calc(100vw / 48), 16px);
    font-weight: 500;
    margin-left: 40px;
}
#header .navi .menu li a {
    display: block;
}
#header .navi .menu li a:hover {
    text-decoration: underline;
}

/*---- メインビジュアル ----*/
.mainvisual  {
    height: 500px;
    background: url(../img/keyvisual.svg) center bottom no-repeat;
    background-size: cover;
    display: grid;
    place-content: center center;
}
.mainvisual .text {
    padding: 2.5rem;
    margin: 20px auto;
    background-color: rgba(255, 255, 255, .4);
}
.mainvisual .text h1 {
    color: #003894;
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 2rem;
}
.mainvisual .text .catchphrase {
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    font-weight: 700;
    margin-bottom: 20px;
}
.mainvisual .text .catchphrase span {
    color: #3366c3;
    font-weight: 700;
    /* display: inline-block; */
    margin-bottom: 10px;
}
.mainvisual .text .description {
    color: #000;
    font-weight: 500;
    line-height: 1.6;
    padding-bottom: 40px;
}

/*---- 3項目共通 ----*/
#relation,
#retrieval,
#reason {
    background-color: #eaf6fd;
    border-radius: 5px;
    width: fit-content;
    margin-top: 40px;
}
.section-title {
    color: #3366c3;
    font-size: clamp(1.3rem, 2.4vw, 1.5rem);
    font-weight: 700;
    margin-bottom: 80px;
    text-align: center;
    position: relative;
}
.section-title .mark {
    background-image: linear-gradient(transparent 50%, #ffeb27 50%);
}
.section-title::after {
    content: "";
    width: 80px;
    height: 2px;
    background-color: #3366c3;
    margin: 0 auto;
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
}

/*-- お問い合わせボタン --*/
.inquiry {
    padding: 10px
}
.inquiry .inner {
    text-align: center;
}
.inquiry a {
    display: block;
}
.inquiry a:hover {
    background-color: #effffc;
}
.inquiry .text {
    line-height: 1.6;
    margin-bottom: 20px;
}
.inquiry .text a {
    display: block;
}
.inquiry .btn {
    background-color: #fff;
    border: 2px solid #01a684;
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0 , 0, 0, .15);
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 700;
    color: #01a684;
    padding: 20px 60px;
}
.inquiry .btn:hover {
    background-color: #effffc;
}

/*---- パンチアウト連携のしくみ ----*/
#relation {
    margin-top: 30px;
}
#relation .text {
    padding-left: 20px;
    margin-bottom: 30px;
    line-height: 1.8;
}
#relation .content-title {
    font-size: 1.375rem;
    font-weight: 500;
    padding-left: 20px;
    margin-bottom: 15px;
}
#relation .img {
    border-radius: 5px;
    padding: 20px;
    margin: 0 20px ;
    background-color: #fff;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, .25);
}

/*---- 多様な検索性 ----*/
#retrieval .text {
    padding-left: 20px;
    margin-bottom: 30px;
    line-height: 1.8;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
}
#retrieval .content-title {
    font-size: 1.375rem;
    font-weight: 500;
    padding-left: 20px;
    margin-bottom: 30px;
}

/* KWロゴと説明文を横に並べる */
#retrieval .kw-logo img {
    width: 300px;
}
#retrieval .flex-imgs {
    display: flex;
    gap: 20px;
    padding: 20px;
}
/* 画像にドロップシャドウ */
#retrieval img {
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, .25);
}

/*---- 選ばれる理由 ----*/
#reason .section-contents {
    padding: 0 20px;
}
.reason-item {
    display: flex;
    margin-top: 40px;
    margin-bottom:  30px;
}
.reason-item .reason {
    width: 120px;
    height: 120px;
    background-color: #fff;
    border-radius: 50%;
    font-weight: 700;
    flex-shrink: 0;
    padding-top: 20px;
    margin-right: 5%;
    text-align: center;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, .25);
}
.reason-item .reason .title {
    display: block;
    color: #2c489f;
    font-size: 18px;
}
.reason-item .reason .no {
    display: block;
    color: #2c489f;
    font-size: 56px;
}
.reason-item .text {
    width: 100%;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px 35px;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, .25);
}
.reason-item .text dt {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 15px;
}
.reason-item .text dd {
    line-height: 1.8;
}
.reason-item .client img {
    height: 45px;
    margin-top: 20px;
    /* border: 1px solid #909090; */
    /* padding: 3px; */
}
.reason-item .client a:hover {
    opacity: 0.6;
}
.reason-item p.jisseki {
    margin-bottom: 5px;
}

footer {
    background: #214ca3;
    padding: 45px 0 45px 0;
    width: 100%;
    height: 100px;
}
footer h3#h3-copyright {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
}
footer a {
    display: block;
    text-align: center;
    color: #fff;
}


/*----------------------------
タブレット・スマホ
----------------------------*/
@media screen and (max-width: 1024px) {
    html {
        scroll-padding-top: 60px;
    }
    .wrapper {
        padding: 20px;
    }

    /*-- ハンバーガーメニュー --*/
    #header .hamburger {
        width: 50px;
        height: 50px;
        cursor: pointer;
        position: fixed;
        top: 5px;
        right: 10px;
        z-index: 30;
    }
    #header .hamburger span {
        width: 30px;
        height: 3px;
        background-color: #2c489f;
        display: inline-block;
        position: absolute;
        left: 10px;
        transition: all 0.4s;
    }
    #header .hamburger.active span {
        background-color: #003894;
    }
    #header .hamburger span:nth-of-type(1) {
        top: 16px;
    }
    #header .hamburger span:nth-of-type(2) {
        top: 25px;
    }
    #header .hamburger span:nth-of-type(3) {
        top: 34px;
    }
    #header .hamburger.active span:nth-of-type(1) {
        top: 24px;
        transform: rotate(-45deg);
    }
    #header .hamburger.active span:nth-of-type(2) {
        opacity: 0;
    }
    #header .hamburger.active span:nth-of-type(3) {
        top: 24px;
        transform: rotate(45deg);
    }
    #header .mask.active {
        width: 100%;
        height: 100%;
        background-color: #003894;
        display: block;
        opacity: 0.8;
        position: fixed;
        top: 0;
        left: 0;
    }

    /*-- ナビ内部 --*/
    #header .navi {
        width: 60%;
        height: 100vh;
        background-color: #fff;
        position: fixed;
        top: 0;
        left: -120%;
        z-index: 20;
        transition: all 0.6s;
    }
    #header .navi .menu {
        width: 100%;
        height: 100vh;
        flex-direction: column;
        padding: 60px 0;
        overflow: auto;
    }
    #header .navi .menu li {
        padding: 10px 0;
        margin-left: 0;
    }
    #header .navi.active {
        left: 0;
    }


    .mainvisual {
        margin-top: 0;
        height: max-content;
    }
    .mainvisual .text {
        padding: 2.5rem;
        margin: 20px auto;
        top: 60px;
    }
    .mainvisual .text .catchphrase {
        text-align: center;
    }
    .mainvisual .text .catchphrase span {
        color: #3366c3;
        display: inline-block;
        margin-bottom: 10px;
    }
    .mainvisual .text .description {
        color: #3366c3;
        font-weight: 500;
        line-height: 1.6;
    }

    #relation {
        margin-top: 40px;
    }
}


/*----------------------------
スマートフォン
----------------------------*/
@media screen and (max-width: 767px) {
    main {
        margin-top: 60px;
    }
    #header {
        height: 60px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }
    #header .logo {
        max-width: 200px;
    }
    .sp {
        display: none;
    }
    .pc {
        display: initial;
    }
    .wrapper {
        margin: 20px auto;
    }

    /*---- メインビジュアル ----*/
    .mainvisual {
        margin-bottom: 20px;
        display: grid;
        place-content: center bottom;
    }
    .mainvisual .text {
        margin: 0 auto;
        padding: 20px;
        height: fit-content;
        background: none;
    }
    .mainvisual .text .main-title {
        text-align: center;
    }
    .mainvisual .text .catchphrase span {
        margin-bottom: 5px;
    }
    .mainvisual .text p.description {
        font-size: 14px;
        font-weight: 400;
        margin: 10px;
        padding: 10px;
        background-color: rgba(255, 255, 255, .4);
    }

    /*---- お問い合わせ ----*/
    .inquiry {
        margin-top: 20px;
        padding-top: 20px;
    }
    .inquiry .inner {
        text-align: center;
    }
    .inquiry .section-title,
    .inquiry .text {
        color: #2c489f;
    }
    .inquiry .section-title::after {
        background-color: #2c489f;
    }

    /*---- 購買連携のしくみ ----*/
    #relation {
        margin-top: 20px;
    }

    /*---- 多様な検索性 ----*/
    #retrieval .text {
        padding-left: 20px;
        margin-bottom: 30px;
        line-height: 1.8;
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }
    /* KWロゴと説明文を横に並べる */
    #retrieval .kw-logo img {
        width: 250px;
    }
    #retrieval .flex-imgs {
        display: flex;
        gap: 20px;
        padding: 20px;
    }
    

    /*---- 選ばれる理由 ----*/
    .reason-item {
        margin-bottom: 30px;
    }
    .reason-item .reason {
        width: 80px;
        height: 80px;
        margin-right: 20px;
    }
    .reason-item .reason .title {
        font-size: 14px;
    }
    .reason-item .reason .no {
        font-size: 32px;
    }
    .reason-item .text dt {
        font-size: 1.125rem;
    }
    .reason-item .text dd {
        font-size: 0.875rem;
    }
}