@charset "UTF-8";

ol {
    margin: 0;
    padding: 0;
    list-style: auto!important;
}

html {
    font-size: 62.5%;
}

body {
    color: #333333;
    /* font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; */
    font-family: "ryo-gothic-plusn", sans-serif;
    font-size: 1.6em;
    line-height: 1.5;
    overflow-x: hidden;
}

img {
    width: 100%;
}

a {
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

/* a:hover {
    opacity: 0.8;
} */

.sp-only {
    display: none;
}

@media screen and (max-width: 767px) {
    .sp-only {
        display: block;
    }
}

.sp-only-flex {
    display: none;
}

@media screen and (max-width: 767px) {
    .sp-only-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

.pc-only {
    display: block;
}

@media screen and (max-width: 767px) {
    .pc-only {
        display: none;
    }
}

.pc-only-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media screen and (max-width: 767px) {
    .pc-only-flex {
        display: none;
    }
}

.pc-only-inline {
    display: inline-block;
}

@media screen and (max-width: 767px) {
    .pc-only-inline {
        display: none;
    }
}

.u-visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;
    border: 0;
    white-space: nowrap;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
}

/**************** ここまで、メニューのスタイリング ****************/

.btn {
    padding: 1rem 2rem;
    border-radius: 50px;
    background-color: #2B7FAD;
    color: #fff;
    display: inline-block;
    border: 1px solid #2B7FAD;
}

.btn:hover {
    color: #2B7FAD;
    background-color: #fff;
}

.btn[target="_blank"] {
    padding: 1rem 3rem;
}

.btn[target="_blank"]::after {
    content: url(..//img/common/tabs.svg);
    margin-left: 1rem;
}

.btn--color2 {
    background-color: #2EA7E0;
    border: 1px solid #2EA7E0;
}

.btn--color3 {
    background-color: #E68A00;
    border: 1px solid #E68A00;
}

.btn--color3:hover {
    color: #E68A00;
}

.top__mv {
    padding: 15px 0;
    background: -webkit-gradient(linear, left top, left bottom, from(#2B7FAD), color-stop(85%, #2EA7E0), color-stop(85%, #fff));
    background: linear-gradient(#2B7FAD, #2EA7E0 85%, #fff 85%);
}

.top__mv.is-fixed {
    margin-top: 116px;
}

.top__mv a:hover{
    opacity: 1;
}

@media screen and (max-width: 767px) {
    .top__mv {
        margin-top: 46px;
        padding: 0;
    }
}

.top__mv__header {
    margin-bottom: 30px;
}

.top__mv__slick {
    margin: auto;
}

@media screen and (max-width: 1080px) {
    .top__mv__slick {
        margin: auto;
        margin-top: 60px;
    }
}

@media screen and (max-width: 768px){
    .top__mv__slick {
        margin: auto;
        margin-top: 0px;
    }
}


.top__mv__slick .slick-slide {
    margin: 0 5vw;
}

@media screen and (max-width: 767px) {
    .top__mv__slick .slick-slide {
        margin: 0;
    }
}

.top__mv__slick img {
    border-radius: 4rem;
}

@media screen and (max-width: 767px) {
    .top__mv__slick img {
        margin: 0;
        border-radius: 0;
    }
}

@media screen and (max-width: 767px) {
    .top__mv .slick-dots {
        bottom: 0;
    }
}

.top__mv .slick-next {
    color: white;
    display: block;
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    padding: 2%;
    font-size: 3rem;
    height: 60%;
    vertical-align: middle;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    cursor: pointer;
    right: 0px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    font-size: 0;
}

@media screen and (max-width: 767px) {
    .top__mv .slick-next {
        padding: 4%;
        background: rgba(32, 32, 32, 0.1);
        /* display: none; */
        height: 15%;
    }
}

.top__mv .slick-next:before {
    content: "\276D" !important;
    font-size: 3vw;
}

@media screen and (max-width: 767px) {
    .top__mv .slick-next:before {
        font-size: 5vw;
    }
}

.top__mv .slick-dots li button:before {
    content: '\2022';
}

.top__mv .slick-prev {
    color: white;
    display: block;
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    padding: 2%;
    font-size: 3rem;
    height: 60%;
    vertical-align: middle;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    cursor: pointer;
    left: 0px;
    font-size: 0;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    z-index: 300;
}

@media screen and (max-width: 767px) {
    .top__mv .slick-prev {
        padding: 4%;
        height: 15%;
        background: rgba(32, 32, 32, 0.1);
        /* display: none; */
    }
}

.top__mv .slick-prev::before {
    content: "\276C";
    font-size: 3vw;
    position: relative;
    left: -1.2rem;
}

@media screen and (max-width: 767px) {
    .top__mv .slick-prev::before {
        font-size: 5vw;
        left: -3px;
    }
}

.top__mv .slick-slide {
    -webkit-transition: 1s ease;
    transition: 1s ease;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    border-radius: 28px;
}

@media screen and (max-width: 767px) {
    .top__mv .slick-slide {
        border-radius: 0;
    }
}

.top__mv .slick-current,
.top__mv .is-active-next {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.sec {
    max-width: 949px;
    margin: auto;
    padding: 110px 0 70px;
}

.sec.solution{
    max-width: 949px;
    margin: auto;
    padding: 0px 0 70px;
}


@media screen and (max-width: 1080px) {
    .sec {
        max-width: 90%;
        margin: auto;
    }
}

@media screen and (max-width: 767px) {
    .sec {
        padding: 40px 0 40px;
    }

    .sec.solution{
        width: 90%;
    }

}

.secBg2 {
    background-color: #fff;
}



.sec__cards {
    margin-bottom: 89px;
}

.sec__cards img {
    border-radius: 12px;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
        height: 100%;
        object-fit: cover;
        position: absolute;
}

.sec__cards .card__img {
    overflow: hidden;
    box-shadow: 0 0 8px 1px rgb(0 0 0 / .1);
    border-radius: 10px;
        /* width: 100%; */
        height: 0;
        padding-bottom: 49%;
        position:relative;
}

.sec__cards .card__img:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

@media screen and (max-width: 767px) {
    .sec__cards img {
        border-radius: 8px;
    }
}

.sec--lg {
    padding: 71px 0 80px;
    margin: auto;
    max-width: 1280px;
}

@media screen and (max-width: 1280px) {
    .sec--lg {
        padding: 35px 0 40px;
        max-width: 90%;
    }
}

@media screen and (max-width: 767px) {
    .sec--lg {
        padding: 35px 0 40px;
        max-width: 90%;
    }
}


.secBg__bigCards {
    margin-bottom: 85px;
}

@media screen and (max-width: 767px) {
    .secBg__more {
        margin: 0 3%;
    }
}

@media screen and (max-width: 767px) {
    .sec__more {
        margin: 0 3%;
    }
}

.titleBox {
    text-align: center;
    padding-bottom: 42px;
}

@media screen and (max-width: 767px) {
    .titleBox {
        padding-bottom: 24px;
    }
}

.titleBox--secBg {
    margin-bottom: 70px;
}

/* @media screen and (max-width: 767px) {
    .titleBox--secBg {
        margin-bottom: 100px;
    }
} */

.titleBox__title {
    margin-bottom: 16px;
    font-size: 3.6rem;
    font-weight: bold;
    font-family: "ShipporiGothicB2", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;;


}

@media screen and (max-width: 767px) {
    .titleBox__title {
        margin-bottom: 10px;
        font-size: 2.4rem;
    }
}

.titleBox__title--secBg {
    color: #fff;
    font-size: 3.6rem;
    margin-bottom: 35px;
}

@media screen and (max-width: 767px) {
    .titleBox__title--secBg {
        font-size: 2rem;
        margin-bottom: 11px;
    }
}

.titleBox__smallTitle {
    color: #2B7FAD;
    font-family: "ShipporiGothicB2", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;;

}

@media screen and (max-width: 767px) {
    .titleBox__smallTitle {
        /* font-size: 1rem; */
    }
}

.titleBox__desc {
    color: #333;
    text-align: center;
    max-width: 60%;
    margin: 0 auto;
    margin-top: 20px;
}

@media screen and (max-width: 767px) {
    .titleBox__desc {
        font-size: 1rem;
        max-width: 100%;
    }
}

.titleBox__smallTitle--secBg {
    color: #fff;
}

@media screen and (max-width: 767px) {
    .titleBox__smallTitle--secBg {
        font-size: 1.2rem;
    }
}

.cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.cards__item:not(:nth-child(3n)) {
    margin-right: calc(41 /949 *100%);
}

@media screen and (max-width: 767px) {
    .cards__item:not(:nth-child(3n)) {
        margin-right: 0;
    }
}

.card {
    width: calc(289 / 949 *100%);
    display: block;
}

.card__img {
    margin-bottom: 16px;
}

.card__date {
    color: #949494;
    /* margin-bottom: 15px; */
}

@media screen and (max-width: 767px) {
    .card__date {
        font-size: 1.2rem;
    }
}

.card__content {
    font-size: 1.6rem;
    font-weight: bold;
    color: #00557D;
}

@media screen and (max-width: 767px) {
    .card__content {
        font-size: 1.4rem;
    }
}

.morebtn {
    text-align: right;
    font-size: 1.4rem;
}

.morebtn .morebtn_circle{
    display: inline-block;
    height: 30px;
    margin-left: 50px;
    position: relative;
    width: 30px;
}

.morebtn .morebtn_circle::before {
    -webkit-transform: translateY(-50%);
    background: #bbb;
    content: "";
    height: 1px;
    position: absolute;
    right: 50%;
    top: 80%;
    transform: translateY(-50%);
    width: 40px;
}

.morebtn .morebtn_circle::after {
    -webkit-transform: translate(0,-50%);
    -webkit-transition: all .3s ease;
    border: 1px solid #bbb;
    border-radius: 50%;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 80%;
    transform: translate(0,-50%);
    transition: all .3s ease;
    width: 100%;
}


.morebtn a:hover  .morebtn_circle::after {
    -webkit-transform: translate(0,-50%) scale(1.3);
    transform: translate(0,-50%) scale(1.3);
}

.morebtn.morebtn--white .morebtn_circle::before {
    -webkit-transform: translateY(-50%);
    background: #fff;
    content: "";
    height: 1px;
    position: absolute;
    right: 50%;
    top: 80%;
    transform: translateY(-50%);
    width: 40px;
}

.morebtn.morebtn--white .morebtn_circle::after {
    -webkit-transform: translate(0,-50%);
    -webkit-transition: all .3s ease;
    border: 1px solid #fff;
    border-radius: 50%;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 80%;
    transform: translate(0,-50%);
    transition: all .3s ease;
    width: 100%;
}

.morebtn.morebtn--white a:hover  .morebtn_circle::after {
    -webkit-transform: translate(0,-50%) scale(1.3);
    transform: translate(0,-50%) scale(1.3);
}

.morebtn--white {
    color: #fff;
}

/* .morebtn--white::after {
    content: url(../img/common/right-arrow--white.svg);
} */

.external {
    text-align: right;
}

/* .external a::after {
    content: url(../img/common/tabs-black.svg);
    margin-left: 1rem;
} */

.bigCards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media screen and (max-width: 1080px) {
    .bigCards {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 767px) {
    .bigCards {
        display: block;
        margin: 0%;
    }
}

.bigCards__item:not(:nth-child(3n)) {
    margin-right: 41px;
}

@media screen and (max-width: 767px) {
    .bigCards__item:not(:nth-child(3n)) {
        margin: 0 0 45px;
    }
}

.bigCard {
    width: calc(100% / 3);
    background-color: #fff;
    padding: 4px;
    border-radius: 10px;
}

@media screen and (max-width: 1080px) {
    .bigCard {
        width: 45%;
        margin-bottom: 60px;
    }
}

@media screen and (max-width: 767px) {
    .bigCard {
        width: 100%;
    }
}

.bigCard__img {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.bigCard__title {
    font-weight: bold;
    font-size: 2.2rem;
    margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
    .bigCard__title {
        font-size: 1.6rem;
        margin-bottom: 6px;
    }
}

.bigCard__content {
    padding: 32px 40px 25px 40px;
}

@media screen and (max-width:1280px) {
    .bigCard__content {
        padding: 32px 16px 25px 16px;
    }
    .bigCards__item:not(:nth-child(3n)) {
        margin-right: 14px;
    }
}

@media screen and (max-width: 767px) {
    .bigCard__content {
        padding: 18px 22px;
    }
}

.bigCard__text {
    font-size: 1.4rem;
    margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
    .bigCard__text {
        font-size: 1.2rem;
        margin-bottom: 30px;
    }
}

.bigCard__btn {
    text-align: center;
}

.sec__descTopLay {
    max-width: 1083px;
    margin: auto;
}

.descTop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .descTop {
        display: block;
        margin: 0 5%;
    }
}

.descTop img {
    border-radius: 8px;
}

@media screen and (max-width: 767px) {
    .descTop img {
        border-radius: 4px;
    }
}

.descTop video {
    width: 100%;
    border-radius: 8px;
}

@media screen and (max-width: 767px) {
    .descTop video {
        border-radius: 4px;
    }
}

.descTop__texts {
    width: 50%;
}

@media screen and (max-width: 767px) {
    .descTop__texts {
        width: 100%;
        margin-bottom: 27px;
    }
}

.descTop__title {
    font-size: 3.6rem;
    margin-bottom: 50px;
}

@media screen and (max-width: 767px) {
    .descTop__title {
        font-size: 2rem;
        margin-bottom: 11px;
    }
}


@media screen and (max-width: 767px) {
    .slider-info {
        padding-bottom: 20px;
        margin-bottom: 50px !important;
    }
    .slider-info a {
        padding: 0 15px;
    }
}


/* ローディング画面 */

#loading {
    /* display: none; */
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* -webkit-transition: all 1s;
    transition: all 1s; */
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 110000;
}

#loading.loaded {
    opacity: 0;
    visibility: hidden;
}

.loading__container {
    width: 50%;
    max-width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-55%) translateX(-50%);
    transform: translateY(-55%) translateX(-50%);
    text-align: center;
}

#logo-illust-body-1 {
    fill: #5ABAE0;
}

#logo-illust-phone-5 {
    fill: #2E89BC;
    /*   animation-name: anime-logo-parts;      
  animation-duration: 2s;  
  animation-timing-function:step-end ;  */
}

#logo-illust-nose-2 {
    -webkit-animation-name: anime-logo-parts;
    animation-name: anime-logo-parts;
    /*keyframe名*/
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    /*所要時間*/
    -webkit-animation-timing-function: step-end;
    animation-timing-function: step-end;
    /*進行割合*/
}

#logo-illust-eye-3 {
    -webkit-animation-name: anime-logo-parts;
    animation-name: anime-logo-parts;
    /*keyframe名*/
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    /*所要時間*/
    -webkit-animation-timing-function: step-end;
    animation-timing-function: step-end;
    /*進行割合*/
}


/*#logo-illust-hand-4{
  fill: #fff;
    animation-name: anime-logo-parts; 
  animation-duration: 2s;  
  animation-timing-function:step-end ; 
} */

.logo-item {
    stroke-width: 2;
    /*線の太さ*/
    stroke-dasharray: 4500;
    /*線の間隔*/
    -webkit-animation-name: anime-logo;
    animation-name: anime-logo;
    /*keyframe名*/
    -webkit-animation-duration: 2.8s;
    animation-duration: 2.8s;
    /*所要時間*/
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    /*進行割合*/
}


/* アニメーション設定 */

@-webkit-keyframes anime-logo {
    0% {
        fill: #fff;
        /*塗りつぶし色*/
        stroke-dashoffset: 4500;
        /*線の始まりの開始位置*/
        stroke: #808080;
        /*パスの色*/
    }
    85% {
        fill: #fff;
        /*塗りつぶし色*/
    }
    100% {
        stroke-dashoffset: 0;
        /*線の始まりの開始位置*/
        stroke: white;
        /*パスの色*/
    }
}

@keyframes anime-logo {
    0% {
        fill: #fff;
        /*塗りつぶし色*/
        stroke-dashoffset: 4500;
        /*線の始まりの開始位置*/
        stroke: #808080;
        /*パスの色*/
    }
    85% {
        fill: #fff;
        /*塗りつぶし色*/
    }
    100% {
        stroke-dashoffset: 0;
        /*線の始まりの開始位置*/
        stroke: white;
        /*パスの色*/
    }
}

@-webkit-keyframes anime-logo-parts {
    0% {
        fill: #fff;
    }
    100% {
        fill: #000;
    }
}

@keyframes anime-logo-parts {
    0% {
        fill: #fff;
    }
    100% {
        fill: #000;
    }
}


/* ローディングテキスト */

.loading {
    margin: auto;
    width: 30%;
}

.loading span {
    font-size: 24px;
    text-align: center;
    color: #adadad;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    display: inline-block;
    margin: 0 -.075em;
    -webkit-animation: loading 1s infinite alternate;
    animation: loading 1s infinite alternate;
}

.loading span:nth-child(2) {
    -webkit-animation-delay: .1s;
    animation-delay: .1s;
}

.loading span:nth-child(3) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.loading span:nth-child(4) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}

.loading span:nth-child(5) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}

.loading span:nth-child(6) {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

.loading span:nth-child(7) {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.loading span:nth-child(8) {
    -webkit-animation-delay: .7s;
    animation-delay: .7s;
}

.loading span:nth-child(9) {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}

.loading span:nth-child(10) {
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
}

@-webkit-keyframes loading {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}

@keyframes loading {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
}


/* プログレスバー */

#container {
    margin: auto;
    width: 60%;
    height: 8px;
    position: relative;
}

.progressbar-text {
    right: 50% !important;
    -webkit-transform: translate(50%);
    transform: translate(50%);
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

@media screen and (max-width: 767px) {
    .pc {
        display: none;
    }
}

.sp {
    display: none;
}

@media screen and (max-width: 767px) {
    .sp {
        display: block;
    }
}

#loading #container svg {
    border-radius: 4px;
}

/* フッター波 */

.wave {
    position: relative;
    background: #43c0e4;
}

.wave canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}


/*# sourceMappingURL=style.css.map */


/******************

TOP_メッセージ_マウスポインタ 

*********************/

.all_stalker_target {
    position: relative;
    display: block;
    cursor: none;
    margin-top: 0px;
    margin-bottom: 180px;
}

@media screen and (max-width: 1080px){
    .all_stalker_target {
        margin: 60px auto 60px;
    }
}

.all_stalker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: none;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition:opacity .4s;
    z-index: 1;
    border: solid 1px #2B7FAD;
}

.mouse__txt{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0px;
    font-family: 'Inter', sans-serif;
    color: #2B7FAD;
    transform: translate(-50%, -50%);
    text-align: center;
    /* -webkit-text-stroke: 1px #2B7FAD; */
}

.all_stalker.show{
    opacity: 1;
}


/* トップ-ブログ箇所 */
.blogInner{
    /* max-width: 1080px; */
    background-color: #fff;
    margin: 0px auto 0;
    /* border-radius: 50px; */
    width: 100%;
    /* border: solid 3px rgb(204, 204, 204); */
}

.blogInner>.sec {
    max-width: 949px;
    margin: auto;
    padding: 80px 0 80px;
}

.top-blogInner{
    /* max-width: 1080px; */
    background-color: #fff;
    margin: 0px auto 0;
    /* border-radius: 50px; */
    width: 100%;
    /* border: solid 3px rgb(204, 204, 204); */
}

.top-blogInner>.sec {
    max-width: 949px;
    margin: auto;
    padding: 80px 0 80px;
}

.top-blogInner .titleBox__smallTitle{
    color: #333;
}

.morebtn_square {
    display: inline-block;
    height: 30px;
    margin-left: 20px;
    position: relative;
    width: 30px;
}

.morebtn_square::before {
    -webkit-transform: translate(0,-50%);
    -webkit-transition: all .3s ease;
    border: 1px solid #fff;
    content: "";
    height: 50%;
    content: "";
    position: absolute;
    left: 0%;
    top: 40%;
    transform: translateY(-50%);
    transition: all .3s ease;
    width: 50%;
}

.morebtn_square::after {
    -webkit-transform: translate(0,-50%);
    -webkit-transition: all .3s ease;
    border: 1px solid #fff;
    content: "";
    height: 50%;
    position: absolute;
    left: -20%;
    top: 60%;
    transform: translate(0,-50%);
    transition: all .3s ease;
    width: 50%;   
    background: #2B7FAD; 
}

.outline .morebtn_square::before {
    border: 1px solid #333;
}

.outline .morebtn_square::after {
    border: 1px solid #333;
    background: #fff; 
}

.external a {
    background-color: #2B7FAD;
    color: #fff;
    padding: 10px 20px;
    display: block;
    max-width: 260px;
    margin: 60px auto 0 0;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.external.other a {
    background-color: #2B7FAD;
    color: #fff;
    padding: 14px 20px;
    display: block;
    max-width: 300px;
    margin: 60px auto 0;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.external.outline a {
    background-color: #fff;
    color: #333;
    padding: 0;
    display: inline;
    max-width: 100%;
    margin: 0 auto 0 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.external a:hover {
    opacity: 1;
}

.external a:hover .morebtn_square::before {
    -webkit-transform: translate(0,-50%) scale(1.3);
    transform: translate(0,-50%) scale(1.3);
}

.external a:hover .morebtn_square::after {
    -webkit-transform: translate(0,-50%) scale(1.3);
    transform: translate(0,-50%) scale(1.3);
}

.card__subtitle{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
}

.card__category{
    background: #E68A00;
    border-radius: 18px;
    padding: 6px 12px;
    color: #fff;
    font-size: 12px;
}


.blogInner .titleBox {
    text-align: left;
    display: flex;
    align-items: center;
    padding: 0;
}

.blogInner .titleBox__desc {
    text-align: left;
}

.blogInner .titleBox__desc {
    color: #333;
    text-align: left;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 20px;
}

.blogInner .text-box{
    width: 50%;
}

.blogInner .img-box{
    width: 50%;
    height: auto;
    text-align: center;
}

.blogInner .img-box img{ 
    max-width: 200px;
}

@media screen and (max-width: 767px) {
    .blogInner {
        max-width: 1400px;
        background-color: #fff;
        margin: 120px auto 0;
        border-radius: 10px;
        width: 90%;
    }

    .blogInner .titleBox {
        display: block;
    }

    .blogInner .img-box {
        width: 100%;
        height: auto;
        text-align: center;
    }

    .blogInner .img-box img {
        max-width: 50%;
        margin-bottom: 40px;
    }

    .blogInner .text-box {
        width: 90%;
        text-align: center;
        margin: 0 auto;
    }

    .blogInner .titleBox__desc {    
        text-align: center;
        margin-bottom: 40px;
        font-size: 1.4rem;
    }

    .external {
        text-align: right;
        margin-top: 40px;
    }

    .external a {
        margin: 0 auto;
    }
}

.article__sec .article__content p {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #444;
}

.article__sec .article__content p:not(:last-of-type){
    margin-bottom: 2.4rem;
  }

.article__sec .article__content h2 {
    position: relative;
    /* width: 100%; */
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
    /* margin-top: 28px; */
  }
  .cat_site-management .article__sec .article__content h2{
    margin-top: 64px;
  }

  .article__sec .article__content h3 {
    position: relative;
    /* width: 100%; */
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 16px;
    /* margin-top: 28px; */
  }

  .article__sec .article__content h4 {
    position: relative;
    /* width: 100%; */
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
    margin-top: 52px;
  }

  .article__sec .article__content h4:first-of-type{
      margin-top: 0;
  }
  
  .article__sec .article__content .line {
    display: flex;
    /* width: 100%; */
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
    /* margin-top: 28px; */
    align-items: center;
  }

  .article__sec .article__content .line::before{
	content: '';
	width: 40px;
	height: 2px;
	background-color: #2B7FAD;
    margin-right: 20px;
}

#blog .article__sec .article__content p {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #383838;
}
#blog .article__sec .article__content p:not(:last-of-type){
    margin-bottom: 2.4rem;
  }

 #blog .article__sec .article__content h3 {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.4;
    margin: 30px 0 20px;
    padding-left: 20px;
    position: relative;
  }
 #blog .article__sec .article__content h3:before {
    background: #2B7FAD;
    border-radius: 2px;
    content: '';
    height: 80%;
    left: 4px;
    position: absolute;
    width: 4px;
}
 #blog .article__sec .article__content h4 {
    position: relative;
    /* width: 100%; */
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px;
    margin-top: 52px;
  }

 #blog .article__sec .article__content h4:first-of-type{
      margin-top: 0;
  }
  
 #blog .article__sec .article__content .line {
    display: flex;
    /* width: 100%; */
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 16px;
    /* margin-top: 28px; */
    align-items: center;
  }

 #blog .article__sec .article__content .line::before{
	content: '';
	width: 40px;
	height: 2px;
	background-color: #2B7FAD;
    margin-right: 20px;
}
#blog .article__sec .article__content ul {
    margin-top: 16px;
    padding-left: 2em;
    margin-bottom: 2.4rem;
    background-color: #f9f6f2;
    padding: 2.4rem 2rem 2.4rem 3rem;
  }

 #blog .article__sec .article__content li {
        font-weight: bold;
        /* line-height: 2; */
        color: #383838;
        padding-left: 20px;
        position: relative;
  }
 #blog .article__sec .article__content li:not(:last-child){
    margin-bottom: 12px;

  }
 #blog .article__sec .article__content li::before {
    content: '';
    display: inline-block;
    /* width: 50px; */
    /* height: 50px; */
    background-image: url(https://vanilla-bear.jp/wp-content/uploads/2022/02/check.png);
    background-size: contain;
    vertical-align: middle;
    padding: 8px;
    position: absolute;
    left: 0;
    top: 5px;
    transform: translateX(-50%);
}
#blog  .article__sec .article__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.95em;
    table-layout: fixed;
  }
  
  #blog .article__sec .article__content th,#blog  .article__sec .article__content  td {
    padding: 0.75em;
    border: 1px solid #ccc;
    text-align: left;
  }
  
  #blog .article__sec .article__content  th {
    background-color: #fffdfb;
    font-weight: bold;
    width: initial;
  }
  #blog  .article__sec .article__content td:first-child {
    font-weight: bold;
    color: #2B7FAD;
    background: #f9f6f2;
  }
  #blog  .article__sec .article__content blockquote {
    margin: 1.5em 0;
    padding-left: 1em;
    border-left: 3px solid #ccc;
    color: #333;
    font-style: italic;
  }
  
  @media screen and (max-width: 768px) {
    #blog  .article__sec .article__content table,
    #blog  .article__sec .article__content thead,
    #blog  .article__sec .article__content tbody,
    #blog  .article__sec .article__content th,
    #blog  .article__sec .article__content td,
    #blog  .article__sec .article__content tr {
      display: block;
    }
    #blog  .article__sec .article__content tr {
        margin-top: 20px;
    }
    #blog  .article__sec .article__content  th {
      display: none;
    }
  
    #blog  .article__sec .article__content  td {
      position: relative;
      padding-left: 50%;
      border: 1px solid #ccc;
      margin-bottom: 0;
      border-bottom: 0;
      width: 100%;
    }
    #blog  .article__sec .article__content td:first-child {
        background-color: #f9f6f2;
      }
    #blog  .article__sec .article__content td:last-child {
        border-bottom: 1px solid #ccc;
      }
    #blog  .article__sec .article__content td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 0;
        width: 45%;
        height: 100%;
        /* background-color: #f9f6f2; */
        padding: 0.75em 0.5em;
        font-weight: bold;
        color: #333;
        box-sizing: border-box;
    }
  }
  
  .blog-flexWrap{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

  .blog-flexWrap.row{
      display: flex;
      align-items: center;
      flex-direction: row;
  }

  .blog-sec .blog_textBox{
      width: 50%;
  }

  .blog-sec .blog_imgBox{
    width: 50%;
  }

  .blog-sec .blog_imgBox img{
    max-width: 50%;
    display: block;
    margin: 0 auto;
  }

  .article__sec .article__content p.mb0{
    margin-bottom: 0;
  }
  

  .blog_borderBox{
    align-items: center;
    padding: 40px 40px 40px 40px;
    margin: 24px 0 0;
    /* border: 1px solid #DEDEDE; */
    background-color: #fff;
  }

  .blog_borderBox>h3{
    border-bottom: solid 1px #DEDEDE;
    padding-bottom: 12px;
  }

  .blog_borderBox>h4{
    border-bottom: solid 1px #DEDEDE;
    padding-bottom: 12px;
  }

  .blog_borderBox .blog_listBox li{
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
  }

  .blog_borderBox .blog_listBox li::before{
    content: '';
    display: inline-block;
    /* width: 50px; */
    /* height: 50px; */
    background-image: url(https://vanilla-bear.jp/wp-content/uploads/2022/02/check.png);
    background-size: contain;
    vertical-align: middle;
    padding: 8px;
    position: absolute;
    left: 0;
    top: 8px;
    transform: translateX(-50%);
  }

  .blog_listBox{
      display: flex;
      flex-wrap: wrap;
  }

  .blog_listBox ul{
    width: 50%;
}

  .blog_listBox.-wide ul{
    width: 100%;
  }

.article__sec .article__content .recomend{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 2.4rem;
}

@media screen and (max-width: 1080px) {
    .blog_listBox{
        display: block;
    }

    .blog-flexWrap.row{
        display: block;
    }
  
    .blog_listBox ul{
        width: 100%;
  }

  .blog_borderBox .blog_listBox li::before{
    margin-left: 8px;
  }
  
  .article__sec .article__content .recomend{
    font-size: 18px;
    margin-bottom: 2.4rem;
  }

  .blog_borderBox {
    padding: 24px 12px;
    margin: 24px 0 0;
}

.article__sec .article__content h3 {
    font-size: 18px;
}

.article__sec .article__content h4 {
    font-size: 18px;
}

.article__sec .article__content .line {
    font-size: 16px;
  }

  .article__sec .article__content .line::before{
	width: 30px;
    margin-right: 12px;
}

.blog-flexWrap {
    display: block;
}
.blog-sec .blog_imgBox {
    width: 100%;
}

.blog-sec .blog_textBox {
    width: 100%;
}

.article__sec .article__content h2 {
    font-size: 22px;
}
.article__sec {
    padding: 20px 0 40px!important;
}
}


/* アンダーライン */
.Underline {
    position: relative;
    z-index: 1;
  }
  .Underline:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0%;
    height: 4px;
    background: #5ABAE0;
    z-index: -1;
    transition: all 0.8s;
  }
  .Underline.isActive:after {
    width: 100%;
  }


  /* お知らせ */
  
  .top{
    position: relative;
}

  .top-info{
    background: linear-gradient(#2B7FAD, #2EA7E0);
    padding: 20px;
    position: absolute;
    right: 0;
    border-radius: 35px 0 0 35px;
    color: #fff;
    padding-left: 40px;
    /* transform: translate(0, -110%); */
    /* min-width: 35%; */
    max-width: 100%;
    width: 768px;
    transition: transform 0.4s ease;
    overflow: hidden;
  }

  .info-inner .date{
      font-size: 13px;
      margin-right: 10px;
  }

  .info-inner .text{
    position: relative;
    font-size: 18px;
}

.top-info .slick-prev:hover {
    color: transparent;
    outline: none;
    background: transparent;
    position: absolute;
    transform: rotate(90deg) translate(0, 100%);
    top: -8px;
    left: 100%;
}

.top-info .slick-prev {
    color: transparent;
    outline: none;
    background: transparent;
    position: absolute;
    transform: rotate(90deg) translate(0, 100%);
    top: -8px;
    left: 100%;
}

.top-info .slick-next:hover {
    color: transparent;
    outline: none;
    background: transparent;
    position: absolute;
    transform: rotate(90deg);
    top: 70%;
    right: 0%;
}

.top-info .slick-next {
    color: transparent;
    outline: none;
    background: transparent;
    position: absolute;
    transform: rotate(90deg);
    top: 70%;
    right: 0%;
}

.top-info .slick-prev:before, .slick-next:before {
	font-family: "Font Awesome 5 Free";
}

.top-info .slick-prev::before {
    content: "\f053";
    font-weight: 900;
    opacity: 1;
}

.top-info .slick-next::before {
    content: "\f054";
    font-weight: 900;
    opacity: 1;
}

.top-info._hide {
    transform: translateX(100%);
}

.info-wrap{
    position: relative;
    display: block;
    height: 70px;
    margin-top: 40px;
}

br.pc-none{
    display: none;
}


@media screen and (max-width: 767px){
    .info-inner .date {
        font-size: 12px;
    }

    .info-inner .text{
        font-size: 13px;
    }

    .top-info{
        padding: 10px;
        padding-left: 24px;
        width: 90%;
      }

      .top-info .slick-prev {
        top: 0px;
        z-index: 99;
    }

      .top-info .slick-prev:hover {
        top: 0px;
        z-index: 99;
    }

    br.pc-none{
        display: block;
    }

    .all_stalker_target {
        margin-top: 0px;
    }
}

/* ポップアップウィンドウ */
.inlineBox{
    height: 80vh;
}

.inlineBox>div{
    max-width: 767px;
    width: 80%;
    margin: 0 auto;
    margin-top: 40px;
    padding-bottom: 40px;
}

.inlineBox>div>.inlineTitle{
    font-size: 24px;
    margin-top: 20px;
    font-weight: bold;
}

.inlineBox>div>.inlineText{
    font-size: 16px;
    margin-top: 20px;
    line-height: 1.8;
}

.inlineBox>div .inlineText .Underline{
    border-bottom: solid 3px #5ABAE0;
}

.inlineBox>div>.outLink{
    background-color: #2B7FAD;
    color: #fff;
    padding: 10px 20px;
    /* display: block; */
    max-width: 100%;
    width: 260px;
    /* margin: 60px auto 0 0; */
    border-radius: 30px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: center;
    margin-top: 40px;
}
/* 
::-webkit-scrollbar{
    width: 12px;
    margin-right: 4px;
}
::-webkit-scrollbar-track{
    background: #fff;
    border-left: solid 1px #ececec;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 4px #aaa inset;
}
::-webkit-scrollbar-thumb{
    background: #2B7FAD;
    border-radius: 10px 10px 10px 10px;
} */


.black .titleBox__title--secBg {
    color: #333;
    font-size: 3.6rem;
    margin-bottom: 24px;
}
@media screen and (max-width: 767px){
    .black .titleBox__title--secBg {
        font-size: 2rem;
    }
}

.black .titleBox__smallTitle--secBg {
    color: #333;
}

/* お悩み */
.wave-bg{
    display: flex;
}

#onayami{
    display: flex;
    margin: 0 auto;
    background-color: #f3f6fc;
}

#onayami>.imgBox{
    width: 100%;
    position: sticky;
    top: 13rem;
    height: calc(100vh - 111px);
    padding: 0;
    margin: 0 20px;
}

#onayami>.imgBox>.imgList{
    position: relative;
    padding: 10% 10%;
    border-radius: 100%;
    transform: translate(0px, 0%);
    background: linear-gradient(-45deg, #2B7FAD, #2ea7e0);
    top: 50%;
}

#onayami>.imgBox>.imgList>.img-left{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -20%);
    width: 60%;
}

.onayamiList-wrap{
    background-color: #fff;
    padding-top: 80px;
    padding-bottom: 80px;
    border-radius: 50px;
}

.onayamiList{
    margin-bottom: 80px;
    text-align: center;
}

#onayami .sec--lg {
    padding: 71px 0 80px;
    margin: auto;
    min-width: 780px;
}
@media screen and (max-width: 1490px){
    #onayami>.imgBox>.imgList {
        display: none;
    }
}

@media screen and (max-width: 1240px){
    #onayami>.imgBox>.imgList {
        display: none;
    }

    #onayami .sec--lg {
        padding: 0px 0 80px;
        margin: auto;
        min-width: 90%;
    }

    #onayami>.imgBox {
        margin: 0;
    }

    .onayamiList-wrap {
        background-color: #fff;
        padding-top: 60px;
        padding-bottom: 60px;
        border-radius: 20px;
    }
}

 /* テキスト基本コード */
 .c-txt {
    cursor: pointer;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  }

.c-txt {
  color: #2B7FAD;
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.06em;
}

.c-txt.marker {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  font-weight: 600;
}
.c-txt.marker::before {
  /* background: linear-gradient(#2B7FAD, #2EA7E0); */
  background: #0050c9;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
  z-index: -1;
}
.c-txt.marker:hover {
  color: #fff;
}
.c-txt.marker:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
 

@media screen and (max-width: 768px){
    .c-txt {
        font-size: 18px;
        text-align: left;
        width: 84%;
    }

    .onayamiList {
        margin-bottom: 50px;
        text-align: center;
    }

}

.circle-bg{
    width: 100%;
    left: 0;
    height: 10.5vw;
    background: #f3f6fc;
    -webkit-clip-path: ellipse(50% 100% at 50% 100%);
    clip-path: ellipse(50% 100% at 50% 100%);
}

.Thinly-bg{
    background: #f3f6fc;
}



.voice-sec{
    max-width: 1080px;
    margin: auto;
    padding: 0px 0 130px;
    position: relative;
}

.voice-sec .titleBox__smallTitle {
    color: #333;
}

.voice-sec .voice-wrap{
background-color: #fff;
border-radius: 20px;
padding: 40px;
position: relative;
/* border: solid 3px rgb(204, 204, 204); */
border-radius: 50px;
/* box-shadow: 0 0 8px 1px rgb(0 0 0 / 10%); */
}

@media screen and (max-width: 1080px){
    .voice-sec .voice-wrap {
        max-width: 90%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px){
    .voice-sec .voice-wrap {
        max-width: 100%;
        margin: 0 auto;
    }
}


.voice-sec .voice-list-1{
    margin-bottom: 80px;
}

.voice-sec .voice-list-2{
    margin-bottom: 80px;
}

.voice-sec .voice-list-3{
    margin-bottom: 80px;
}

.voice-sec .left .voice-title{
    font-size: 18px;
    /* font-weight: bold; */
    display: flex;
    align-items: center;
}

.voice-sec .right .voice-title{
    font-size: 18px;
    /* font-weight: bold; */
    display: flex;
    align-items: center;
    justify-content: end;
    text-align: right;
}

.voice-title .work-content{
    font-size: 24px;
    display: block;
    margin-bottom: 20px;
}

.voice-title .site-type{
    display: block;
}

.voice-title .work-customer{
    display: block;
}

.voice-text {
    margin: 19px 0 15px;
    position: relative;
    padding-bottom: 30px;
    font-weight: bold;
}

.voice-sec .voice-list-1 .voice-title::before{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    padding: 7%;
    background-image: url(https://vanilla-bear.jp/wp-content/uploads/2022/03/voice1.png);
    background-size: contain;
    background-position-x: center;
    background-position-y: 12px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-color: #fff2ac;
    border-radius: 50%;
    margin-right: 24px;
}

.voice-list-1 .voice-text p {
    color: #333;
    background: #fff2ac;
    border-radius: 30px 30px 30px 0;
    overflow: hidden;
    padding: 14px 24px;
    font-size: 22px;
    line-height: 1.75;
    letter-spacing: 0.1em;
    text-align: justify;
    max-width: 90%;
    margin: 0 0 0 auto;
}

.voice-list-1 .voice-text:after {
    position: absolute;
    left: 10%;
    bottom: 0;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 31px 31px 0 0;
    border-color: #fff2ac transparent transparent transparent;
}

.voice-list-2 .voice-text p {
    color: #333;
    background: #b7e5ff;
    border-radius: 30px 30px 0px 30px;
    overflow: hidden;
    padding: 14px 24px;
    font-size: 22px;
    line-height: 1.75;
    letter-spacing: 0.1em;
    text-align: justify;
    max-width: 90%;
    margin: 0 auto 0 0;
}

.voice-list-2 .voice-text:after {
    position: absolute;
    right: 10%;
    bottom: 0;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 31px 0px 0px 31px;
    border-color: #b7e5ff transparent transparent transparent ;
}

.voice-sec .voice-list-2 .voice-title::after{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    padding: 7%;
    background-image: url(https://vanilla-bear.jp/wp-content/uploads/2022/03/voice2.png);
    background-size: contain;
    background-position-x: center;
    background-position-y: 12px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-color: #b7e5ff;
    border-radius: 50%;
    margin-left: 24px;
}

.voice-list-3 .voice-text p {
    color: #333;
    background: #ffd6ac;
    border-radius: 30px 30px 30px 0;
    overflow: hidden;
    padding: 14px 24px;
    font-size: 22px;
    line-height: 1.75;
    letter-spacing: 0.1em;
    text-align: justify;
    max-width: 90%;
    margin: 0 0 0 auto;
}

.voice-list-3 .voice-text:after {
    position: absolute;
    left: 10%;
    bottom: 0;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 31px 31px 0 0;
    border-color: #ffd6ac transparent transparent transparent;
}

.voice-sec .voice-list-3 .voice-title::before{
    content: '';/*何も入れない*/
    display: inline-block;/*忘れずに！*/
    padding: 7%;
    background-image: url(https://vanilla-bear.jp/wp-content/uploads/2022/03/voice3.png);
    background-size: contain;
    background-position-x: center;
    background-position-y: 12px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-color: #ffd6ac;
    border-radius: 50%;
    margin-right: 24px;
}


@media screen and (max-width: 767px){
    .voice-sec {
        margin: 0 5%;
        padding: 0px 0 40px;
    }

    .titleBox__title {
        margin-bottom: 10px;
        font-size: 2.2rem;
    }

    .voice-sec .voice-wrap {
        background-color: #fff;
        border-radius: 20px;
        padding: 16px;
        position: relative;
        /* border: solid 3px rgb(204, 204, 204); */
        border-radius: 10px;
        /* box-shadow: 0 0 8px 1px rgb(0 0 0 / 10%); */
    }

    .voice-list-1 .voice-text p {
        font-size: 14px;
    }

    .voice-list-2 .voice-text p {
        font-size: 14px;
    }

    .voice-list-3 .voice-text p {
        font-size: 14px;
    }
    
    .voice-title .work-content {
        font-size: 14px;
        display: block;
        margin-bottom: 12px;
    }

    .voice-sec .left .voice-title {
        font-size: 12px;
        /* font-weight: bold; */
        display: flex;
        align-items: center;
    }

    .voice-sec .right .voice-title {
        font-size: 12px;
        /* font-weight: bold; */
        display: flex;
        align-items: center;
        justify-content: end;
    }

    .voice-sec .voice-list-1 .voice-title::before {
        padding: 12%;
        margin-right: 12px;
    }

    .voice-sec .voice-list-2 .voice-title::after {
        padding: 12%;
        margin-left: 12px;
    }

    .voice-sec .voice-list-3 .voice-title::before {
        padding: 12%;
        margin-right: 12px;
    }

    .voice-list-1 .voice-text p {
        border-radius: 20px 20px 20px 0px;
    }

    .voice-list-2 .voice-text p {
        border-radius: 20px 20px 0px 20px;
    }

    .voice-list-3 .voice-text p {
        border-radius: 20px 20px 20px 0px;
    }
    
    .voice-sec .voice-list-1 {
        margin-bottom: 40px;
    }

    .voice-sec .voice-list-2 {
        margin-bottom: 40px;
    }

    .voice-sec .voice-list-3 {
        margin-bottom: 40px;
    }

    .sec__cards .card__img {
        overflow: hidden;
        box-shadow: 0 0 5px 1px rgb(0 0 0 / 24%);
        border-radius: 10px;
    }
}


/* 強み */

.top-reason-wrap{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 160px;
}

.top-reason-wrap:nth-of-type(2n){
    flex-direction: row;
}

.top-reason-wrap .reson-textBox{
    max-width: 50%;
}

.top-reason-wrap .reason-title{
    font-size: 32px;
    margin-bottom: 32px;
}

.top-reason-wrap .reason-title .sub{
    font-size: 20px;
    display: block;
    margin-bottom: 12px;
    color: #707070;
}

.top-reason-wrap .svg__anime{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.top-reason-wrap .svg_1{
    position: relative;
    padding: 6% 17%;
    border-radius: 100%;
    transform: translate(0px, 60%);
    background: linear-gradient(-45deg, #2B7FAD, #2ea7e0);
}

.top-reason-wrap .svg_2{
    position: relative;
    padding: 6% 17%;
    border-radius: 100%;
    transform: translate(0px, 60%);
    background: linear-gradient(-45deg, #2B7FAD, #2ea7e0);
}

.top-reason-wrap .svg_3{
    position: relative;
    padding: 6% 17%;
    border-radius: 100%;
    transform: translate(0px, 60%);
    background: linear-gradient(-45deg, #2B7FAD, #2ea7e0);
}

.top-reason-wrap .svg_4{
    position: relative;
    padding: 6% 17%;
    border-radius: 100%;
    transform: translate(0px, 60%);
    background: linear-gradient(-45deg, #2B7FAD, #2ea7e0);
}

.top-reason-wrap .svg_5{
    position: relative;
    padding: 6% 17%;
    border-radius: 100%;
    transform: translate(0px, 60%);
    background: linear-gradient(-45deg, #2B7FAD, #2ea7e0);
}

@media screen and (max-width: 767px){
    .top-reason-wrap .reson-textBox {
        max-width: 100%;
        margin: 0 auto;
        /* margin-bottom: 180px; */
    }

    .top-reason-wrap {
        /* display: flex; */
        display: block;
        margin-bottom: 120px;
        padding-top: calc(180 / 768 * 100vw);
    }

    .top-reason-wrap:last-of-type {
        margin-bottom: 40px;
    }

    .top-reason-wrap .reason-title .sub {
        font-size: 16px;
    }
    
    .top-reason-wrap .reason-title {
        font-size: 22px;
        margin-bottom: 22px;
    }

    .top-reason-wrap .svg_1 {
        transform: translate(0px, -30%);
    }

    .top-reason-wrap .svg_2 {
        transform: translate(0px, -30%);
    }

    .top-reason-wrap .svg_3 {
        transform: translate(0px, -30%);
    }

    .top-reason-wrap .svg_4 {
        transform: translate(0px, -30%);
    }

    .top-reason-wrap .svg_5 {
        transform: translate(0px, -30%);
    }

    .top-reason-wrap .svg__anime {
        transform: translate(-50%, -70%);
        width: 80%;
    }

    .top-reason-wrap .svg__anime svg{
        max-width: 100%;
        height: auto;
    }
}



 /* --- ドット（水玉）背景のBOX定義 ---------------------------- */
 .c-dot {
    background-image: url(../img/common/bg-texture-paper.png);
    background-size:120px;
  }

  .c-singleTop{
    opacity: 1;
    height: calc(12.2449vw + 54.08163px);
    background-color: #2B7FAD ;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  #load.single__img{
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    /* -webkit-transition: opacity .5s,-webkit-transform 2s cubic-bezier(.215,.61,.355,1);
    transition: opacity .5s,-webkit-transform 2s cubic-bezier(.215,.61,.355,1);
    transition: opacity .5s,transform 2s cubic-bezier(.215,.61,.355,1);
    transition: opacity .5s,transform 2s cubic-bezier(.215,.61,.355,1),-webkit-transform 2s cubic-bezier(.215,.61,.355,1); */
    -webkit-transition: opacity 2s,-webkit-transform 2s cubic-bezier(.215,.61,.355,1);
    transition: opacity 2s,transform 2s cubic-bezier(.215,.61,.355,1);
  }

  #load.single__img.loaded{
    opacity: .15;
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  .single__img{
    position: absolute;
    top: 0;
    z-index: 1;
    opacity: 0.15;
    display: block;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
  }

  .single__head{
    max-width: 949px;
    margin: 0 auto;
    position: relative;
    z-index: 100;
    width: 100%;
  }

  .single__heading-wrap{
      display: block;
  }

  .single__heading{
        font-size: calc(1.63265vw + 1.38776rem);
        font-weight: bold;
        color: #fff;
        display: inline-block;
        font-family: "ShipporiGothicB2", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;;
  }

  .single__sub{
    font-size: calc(.4898vw + .81633rem);
    color: #fff;
    display: inline-block;
    margin-top: 12px;
    font-family: "ShipporiGothicB2", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;;

  }


  @media screen and (max-width: 1080px){

    .single__head{
        max-width: 90%;
      }
  }


  /* 記事用スタイル */
  .border-bottom{
    border-bottom: solid 1px #DEDEDE;
    padding-bottom: 12px;
  }

  .blog-sec{
    margin-bottom: 72px;
  }

  .blog-h2{
    margin-top: 56px;
  }

  .article__sec .article__content .blog-h2.blogTitle-top{
    margin-top: 0;
    margin-bottom: 32px;
    font-size: 32px;
  }

  .img_wrap_80{
    margin: 80px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .img_wrap_80 img{
    max-width: 80%;
  }

  .img_wrap_60{
    margin: 80px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .img_wrap_60 img{
      max-width: 60%;
  }

.item_box{
    display: flex;
    margin: 48px 0 0;
}

.item_img{
    margin: 0 7.192% 0 0;
    width: 80px;
}

.item_text{
    flex:1;
}

.article__sec .article__content .item_title{
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: bold;
}

.article__sec .article__content .item_desc{
    font-size: 16px;
    margin-bottom: 24px;
}

.Three_rows{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.Three_rows_item{
    background-color: #F7F7F7;
    width: calc(100% / 3 - 16px);
    margin: 12px 0 32px;
}

.Three_rows_item .Three_rows_img{
    padding: 40px 60px;
    text-align: center;
}

.Three_rows_item .Three_rows_img img{
    max-width: 64px;
    height: auto;
}

.Three_rows_item .Three_rows_text{
    margin: 0 20px;
}

.Three_rows_item .Three_rows_text .ttl{
    font-size: 18px;
    font-weight: bold;
}

.Three_rows_item.-center .Three_rows_text .ttl{
    text-align: center;
}

  @media screen and (max-width: 768px){
  .article__sec .article__content .blog-h2.blogTitle-top{
    margin-top: 0;
    margin-bottom: 32px;
    font-size: 22px;
  }

  .img_wrap_80{
    margin: 56px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .img_wrap_80 img{
    max-width: 100%;
  }

  .img_wrap_60{
    margin: 56px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .img_wrap_60 img{
      max-width: 100%;
  }

  .item_img {
    width: 8.99%;
    }

    .article__sec .article__content .item_title{
        font-size: 18px;
        margin-bottom: 16px;
    }

    .article__sec .article__content .item_desc{
        font-size: 13px;
    }

    .Three_rows_item .Three_rows_text .ttl{
        font-size: 18px;
        font-weight: bold;
    }

    .Three_rows {
        display: block;
    }
    .Three_rows_item {
        width: 100%;
        padding-bottom: 16px;
        margin-bottom: 24px;
    }

    .Three_rows_item .Three_rows_img img {
        max-width: 84px;
        height: auto;
    }

  }

  .article__sec .article__content .blogText-top{
      font-weight: bold;
      color: #333;
  }



  .circle-inner{
    margin: 0 auto;
    max-width: 80%;
    position: relative;
  }

  .circle {
    display: block;
    height: 100%;
    /* position: absolute; */
    top: 0;
    left: 0;
    overflow: visible;
  }
  .circle-common {
  fill:rgba(0,0,0,0);
    stroke-width:31.8309886184;
    stroke-dasharray: 0,0,0,100;
    stroke-dashoffset: 25;
    -webkit-animation: pie1 3s ease both;
    animation: pie1 6s ease both;
  }
  .pie1 {
    stroke:#2B7FAD;
  }
  .pie2 {
    stroke:#4390c7;
    -webkit-animation-name: pie2;
    animation-name: pie2;
  }
  .pie3 {
    stroke:#5ABAE0;
    -webkit-animation-name: pie3;
    animation-name: pie3;
  }
  .pie4 {
    stroke:#a4daf0;
    -webkit-animation-name: pie4;
    animation-name: pie4;
  }
  .pie5 {
    stroke:#b8b8b8;
    -webkit-animation-name: pie5;
    animation-name: pie5;
  }
  
  /* 1st pie is 40% */
  @-webkit-keyframes pie1 {
    50%,100% {stroke-dasharray: 25,75,0,0;}
  }
  @keyframes pie1 {
    50%,100% {stroke-dasharray: 25,75,0,0;}
  }
  /* 2nd pie is 30% */
  @-webkit-keyframes pie2 {
    50%,100% {stroke-dasharray: 0,25,15,60;}
  }
  @keyframes pie2 {
    50%,100% {stroke-dasharray: 0,25,15,60;}
  }
  /* 3rd pie is 30% */
  @-webkit-keyframes pie3 {
    50%,100% {stroke-dasharray: 0,40,35,25;}
  }
  @keyframes pie3 {
    50%,100% {stroke-dasharray: 0,40,35,25;}
  }
  /* 4th pie is 10% */
  @-webkit-keyframes pie4 {
    50%,100% {stroke-dasharray: 0,75,20,5;}
  }
  @keyframes pie4 {
    50%,100% {stroke-dasharray: 0,75,20,5;}
  }
  /* 5th pie is 10% */
  @-webkit-keyframes pie5 {
    50%,100% {stroke-dasharray: 0,95,5,0;}
  }
  @keyframes pie5 {
    50%,100% {stroke-dasharray: 0,95,5,0;}
  }
  
  .price{
    font-size: 14px;
  }

  .price-desc{
    font-size: 12px;
  }

  .pie1-text{
    position: absolute;
    top: 20%;
    right: -20px;
    background-color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 0 5px;
    border-radius: 5px;
    line-height: 1.2;
  }

  .pie2-text{
    position: absolute;
    top: 56%;
    right: 3%;
    background-color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 0 5px;
    border-radius: 5px;
  }

  .pie3-text {
    position: absolute;
    top: 66%;
    left: 14%;
    background-color: #fff;
    font-size: 24px;
    font-weight: bold;
    padding: 0 5px;
    border-radius: 5px;
    color: #E68A00;
}

  .pie4-text{
    position: absolute;
    top: 28%;
    left: 4%;
    background-color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 0 5px;
    border-radius: 5px;
  }

  .pie5-text {
    position: absolute;
    top: 8%;
    right: 45%;
    background-color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 0 5px;
    border-radius: 5px;
}

@media screen and (max-width: 599px ){
    .price{
        font-size: 14px;
      }

      .price-desc {
        font-size: 10px;
    }

    .pie1-text{
        position: absolute;
        top: 20%;
        right: -20%;
        background-color: #fff;
        font-size: 16px;
        font-weight: bold;
        padding: 0 5px;
        border-radius: 5px;
        line-height: 1.2;
      }
    
      .pie2-text{
        position: absolute;
        top: 56%;
        right: -5%;
        background-color: #fff;
        font-size: 16px;
        font-weight: bold;
        padding: 0 5px;
        border-radius: 5px;
      }
    
      .pie3-text {
        position: absolute;
        top: 66%;
        left: 14%;
        background-color: #fff;
        font-size: 16px;
        font-weight: bold;
        padding: 0 5px;
        border-radius: 5px;
        color: #E68A00;
    }
    
      .pie4-text{
        position: absolute;
        top: 28%;
        left: -5%;
        background-color: #fff;
        font-size: 16px;
        font-weight: bold;
        padding: 0 5px;
        border-radius: 5px;
      }
    
      .pie5-text {
        position: absolute;
        top: 8%;
        right: 45%;
        background-color: #fff;
        font-size: 12px;
        font-weight: bold;
        padding: 0 5px;
        border-radius: 5px;
    }
}

@media screen and (max-width: 767px){
    .blog-serviceImg{
        width: 100%;
        margin-bottom: 32px;
    }
}



/* お客様の声 */
.customer_img{
    width: 60%;
    margin: 0 auto;
    display: block;
    /* background: linear-gradient(#2B7FAD, #2EA7E0 85%); */
    /* padding: 20px 0px 0px 0px; */
    border-radius: 30%;
}

.article__sec .article__content .customer_details{
    font-size: 3.2rem;
    background: linear-gradient(#2B7FAD, #2EA7E0 85%);
    color: #fff;
    padding: 0 22px;
    border-radius: 10px;
}

.article__sec .article__content .voice-contentTop_text{
    margin-bottom: 0;
    /* line-height: 1.5; */
}


.voice-contentTop_inner{
    margin-bottom: 40px;
    position: relative;
    padding: 20px;
}

.voice-contentTop_inner:before,.voice-contentTop_inner:after{ 
    content:'';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}
.voice-contentTop_inner:before{
    border-left: solid 1px #2B7FAD;
    border-top: solid 1px #2B7FAD;
    top:0;
    left: 0;
}
.voice-contentTop_inner:after{
    border-right: solid 1px #2B7FAD;
    border-bottom: solid 1px #2B7FAD;
    bottom:0;
    right: 0;
}

.voice-content{
    margin-top: 60px;
}

.blog_borderBox .detail-box{
    margin-bottom: 16px;
}

.blog-flexWrap.voice-detail{
    justify-content: space-between;
    align-items: flex-start;
}

.blog-flexWrap.voice-detail .blog_textBox{
    width: 48%;
}
@media screen and (max-width: 1080px ){
    .customer_img{
        width: 30%;
    }

    .blog-flexWrap.voice-detail .blog_textBox {
        width: 100%;
    }
}

@media screen and (max-width: 599px ){
    .customer_img{
        width: 50%;
    }

    .article__sec .article__content .customer_details{
        font-size: 2rem;
        border-radius: 5px;
    }

    .voice-contentTop_inner {
        margin-bottom: 20px;
        padding: 12px;
    }
}

/*==================================================
背景色が伸びて出現
===================================*/

/*全共通*/

.bgextend{
    animation-name:bgextendAnimeBase;
    animation-duration:1s;
    animation-fill-mode:forwards;
    position: relative;
    overflow: hidden;/*　はみ出た色要素を隠す　*/
    opacity:0;
    }
    
    @keyframes bgextendAnimeBase{
      from {
        opacity:0;
      }
    
      to {
        opacity:1;  
    }
    }
    
    /*中の要素*/
    .bgappear{
    animation-name:bgextendAnimeSecond;
    animation-duration:1s;
    animation-delay: 0.6s;
    animation-fill-mode:forwards;
    opacity: 0;
    }
    
    @keyframes bgextendAnimeSecond{
    0% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    }
    }
    
    /*左から右*/
    .bgLRextend::before{
    animation-name:bgLRextendAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(#2B7FAD, #2EA7E0 85%);/*伸びる背景色の設定*/
    }
    @keyframes bgLRextendAnime{
    0% {
    transform-origin:left;
    transform:scaleX(0);
    }
    50% {
    transform-origin:left;
    transform:scaleX(1);
    }
    50.001% {
    transform-origin:right;
    }
    100% {
    transform-origin:right;
    transform:scaleX(0);
    }
    }
    
    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    /* .bgappearTrigger,
    .bgLRextendTrigger{
        opacity: 0;
        background: linear-gradient(#2B7FAD, #2EA7E0 85%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: calc(16px + 16 * (100vw - 350px)/1570);
        display: inline-block;
    } */


    /* お客様の声アーカイブ */ 
    .voice-archiveList{
        display: flex;
        align-items: center;
        /* background: #f3f6fc; */
        margin-bottom: 80px;
        padding: 40px 20px;
        border-radius: 20px;
        border: solid 1px #c6c6c6;
        /* border-top: solid 1px #2B7FAD; */
    }

    .voice-archiveList .voice-archiveList-left{
        width: 20%;
    }

    .voice-archiveList .customer_img{
        max-width: 100%;
        height: auto;
        /* margin-left: 0; */
        width: 70%;
    }

    .voice-archiveList .voice-archiveList-right .bottom-desc{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .voice-archiveList .voice-archiveList-right .bottom-desc a{
        background: #2B7FAD;
        color: #fff;
        padding: 10px 40px;
    }

    .voice-archiveList .voice-archiveList-right .bgappearTrigger, .bgLRextendTrigger {
        font-size: clamp(
            2rem,
            calc(2rem + (2.4 - 2) * ((100vw - 1200px) / (1920 - 1200))),
            2rem
          );
          font-family: "ShipporiGothicB2", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;;
          color: #444;

        /* font-weight: 600; */
    }



    @media screen and (max-width: 768px ){
        .voice-archiveList {
            display: block;
            margin-bottom: 50px;
        }

        .voice-archiveList .voice-archiveList-left {
            width: 100%;
        }

        .voice-archiveList .customer_img {
            width: 40%;
            margin-bottom: 20px;
        }

        .voice-archiveList .voice-archiveList-right .bottom-desc {
            display: block;
        }

        .voice-archiveList .voice-archiveList-right .bottom-desc .voice-title-inner{
            margin-bottom: 20px;
        }

        .voice-archiveList .voice-archiveList-right .bottom-desc a {
            padding: 8px 16px;
            font-size: 14px;
            display: block;
            text-align: center;
        }
        .voice-archiveList .voice-archiveList-right .bgappearTrigger, .bgLRextendTrigger {
            font-size: 1.5rem;
            line-height: 1.75;
        }
    }


    /* サービス紹介 */
    .serviceWrap{
        border-bottom: solid 1px #33333326;
        margin: 60px 0;
        padding: 60px 0;
    }

    .serviceWrap:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
        padding-top: 0;
    }

    .serviceInner{
        box-sizing: border-box;
        max-width: 1360px;
        margin: 0 auto;
        padding: 0 40px;
        display: flex;
        justify-content: space-around;
    }

    .service-leftContent {
        box-sizing: border-box;
        width: 50%;
        min-height: 400px;
        padding: 0 20px 0 0;
    }

    .service-rightContent {
        box-sizing: border-box;
        width: 50%;
        min-height: 400px;
    }

    .service-leftContent .title{
        font-size: 40px;
        padding-bottom: 10px;
    }

    .service-leftContent .title::after{
        content: "";
        display: block;
        border-bottom: 2px solid #333;
        margin-top: 15px;
    }

    .service-leftContent .yellow.title::after{
        border-bottom: 2px solid #ffc72c;
    }

    .service-leftContent .gray.title::after{
        border-bottom: 2px solid #E5E5E5;
    }
    .service-leftContent .brown.title::after{
        border-bottom: 2px solid #A08E7B;
    }
    
    .service-leftContent .title span{
        font-size: 16px;
        margin-bottom: 10px;
        display: block;
    }

    .service-leftContent .subtitle{
        margin-bottom: 20px;
        font-size: 1.8rem;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .service-leftContent .service-point{
        display: flex;
        justify-content: flex-start;
    }

    .service-leftContent .service-pointList{
        width: calc(100%/3 - 40px);
        text-align: center;
        padding: 40px 14px;
        display: flex;
        align-items: center;
        /* text-align: center; */
        justify-content: center;
        box-sizing: border-box;
        border-radius: 12px;
        font-weight: bold;
        margin-right: 20px;
    }

    .service-leftContent .service-pointList:last-of-type{
        margin-right: 0px;
    }

    .service-leftContent .yellow .service-pointList{
        background-color: #ffc72c;
    }

    .service-leftContent .gray .service-pointList{
        background-color: #E5E5E5;
    }

    .service-leftContent .brown .service-pointList{
        background-color: #A08E7B;
    }

    .service-rightContent .serviceBanner {
        position: relative;
        overflow: hidden;
        max-height: 240px;
        height: auto;
        border-radius: 5px;
        max-width: 400px;
        margin: 0 auto;
        margin-bottom: 40px;     
    }

    .service-rightContent .serviceBanner img{
        transition: all 0.6s ease;    
    }

    .service-rightContent .serviceCaver{
        text-align: center;
        padding-top: 24%;
        border-radius: 5px;
        width: 92%;
        color: #fff;
        font-weight: bold;
        height: 91%;
        position: absolute;
        top: 5%;
        left: 4%;
        opacity: 0;
        background-color:rgba(95, 180, 214, .7);
        -webkit-transition: all 0.1s ease;
        transition: all 0.1s ease;
        font-size: 24px;
    }

    .service-rightContent .serviceAnchor:hover .serviceCaver{
        opacity: 1;
    }

    .service-rightContent .serviceAnchor:hover .serviceBanner img {
        opacity: 0.5;
        border-radius: 5px;
        transform: scale(1.2, 1.2);
    }

    .service-rightContent .service-btnWrap{
        max-width: 400px;
        margin: 0 auto;
        /* text-align: center; */
        border-radius: 4px;
        font-size: 1.3rem;
        font-weight: bold;
        color: #2B7FAD;
        background-color: #fff;
        width: 100%;
        height: 40px;
        border: 1px solid #2B7FAD;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .service-rightContent .serviceAnchor:hover .service-btnWrap {
        background: #2B7FAD;
        color: #fff;
    }



    @media screen and (max-width: 1080px){
        .serviceInner {
            display: block;
        }

        .service-leftContent {
            width: 100%;
        }

        .service-rightContent {
            width: 100%;
        }
        
        .service-leftContent .service-pointList {
            width: calc(100%/3);
        }
    }
    
    @media screen and (max-width: 768px){
        .service-leftContent .service-point {
            display: block;
        }

        .service-leftContent .service-pointList {
            width: 100%;
            margin-bottom: 24px;
        }

        .serviceInner {
            max-width: 90%;
            padding: 0;
        }

        .service-leftContent {
            padding: 0;
        }

        .service-leftContent .title {
            font-size: 32px;
        }

        .serviceWrap {
            margin: 0;
        }

        .service-rightContent {
            min-height: 320px;
        }
    }

    /* 蛍光ペン */

    .highlighter{
        background:linear-gradient(transparent 60%, #ff6 60%);
    }


        /* お悩み解決 一覧 */

        .solution-archive{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 56px;
        }
    
        .solution-archive .solution-list{
            width: 32%;
            border: solid 2px #2B7FAD;
            border-radius: 15px;
            margin-bottom: 20px;
            padding: 18px;
        }

        .solution-archive .solution-list .customer_img{
            width: 50%;
            margin: 0 20px 0 auto;
        }
        
        .solution-title{
            color: #2B7FAD;            
            font-size: 20px;
            line-height: 1.6;
        }

        .solution-archive .solution-list .card__content {
            margin-bottom: 40px;
        }

        .article__sec .article__content .solution-title{
            color: #2B7FAD;            
            font-size: 20px;
            margin-bottom: 0;
            line-height: 1.6;
        }

        .solution-list:hover{
            background-color: #2B7FAD;
            transition: all .3s;
        }

        .solution-list:hover .solution-title{
            color: #fff;
            transition: all .3s;
        }

        @media screen and (max-width: 768px){
            
            .article__sec .solution-list:hover .solution-title{
            color: #fff;
            transition: all .3s;
        }

            .solution-archive{
                display: block;
                margin-top: 24px;
            }

            .article__sec .article__content .solution-title {
                color: #2B7FAD;
                font-size: 16px;
            }

            .solution-title {
                font-size: 16px;
                line-height: 1.6;
            }

            .solution-archive .solution-list {
                width: 100%;
            }

            .solution-archive .solution-listLink{
                display: flex;

                flex-direction: row-reverse;
                justify-content: space-between;
                align-items: center;
            }

            .solution-archive .solution-list .card__content {
                margin-bottom: 0px;
                width: 70%;
            }

            .solution-archive .solution-listLink .solution-archiveList-left{
                width: 24%;
            }

            .solution-archive .solution-list .customer_img {
                width: 100%;
                margin: 0 auto;
            }
        }

        /* プライバシーポリシー */
        .privacy-box{
            margin-bottom: 20px;
            margin-left: 20px;
        }

        .privacy-box li{
            margin-bottom: 12px;
        }

        .privacy-box.under{
            margin-top: 20px;
        }

        /* サイトマップ */
        .sitemap-wrap{
            margin-bottom: 40px;
        }

        .sitemap-topLink{
            font-size: 24px;
            margin-bottom: 12px;
            display: block;
        }

        .sitemap-linkList {
            margin-bottom: 12px;
            display: flex;
        }

        .sitemap-linkList:before {
            color: #333;
            content: "ー";
            margin-right: 1em;
        }

        .sitemap-links{
            font-size: 14px;
            margin-bottom: 0px;
        }

        .sitemap-wrap.last{
            margin-bottom: 80px;
        }

        .sitemap_square {
            display: inline-block;
            height: 30px;
            margin-left: 20px;
            position: relative;
            width: 30px;
        }

        .sitemap_square::after {
            -webkit-transform: translate(0,-50%);
            -webkit-transition: all .3s ease;
            border: 1px solid #333;
            content: "";
            height: 50%;
            position: absolute;
            left: -20%;
            top: 70%;
            transform: translate(0,-50%);
            transition: all .3s ease;
            width: 50%;
            background: #fff;
        }

        .sitemap_square::before {
            -webkit-transform: translate(0,-50%);
            -webkit-transition: all .3s ease;
            border: 1px solid #333;
            content: "";
            height: 50%;
            content: "";
            position: absolute;
            left: 0%;
            top: 50%;
            transform: translateY(-50%);
            transition: all .3s ease;
            width: 50%;
        }

                /* サービス詳細 */

                .serviceDetail{
                    padding: 80px;
                }

                .serviceDetail-top{                    
                    max-width: 949px;
                    margin: 0 auto;
                    background-color: #fff;
                    padding: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-direction: row-reverse;
                }

                .serviceDetail-top h2{
                    font-size: 26px;
                    font-weight: bold;
                    color: #333;
                    margin-left: 6px;
                    margin-top: 20px;
                    line-height: 1.8;
                }

                .serviceDetail-topImg{
                    max-width: 40%;
                    height: auto; 
                }

                .serviceDetail-titleBox{
                    width: 54%;
                    display: block; 
                }

                .serviceLink{
                    font-size: 14px;
                    transition: all .3s;
                    margin-top: 12px;
                    display: block;
                }

                .serviceLink::after{
                    content: "";
                    padding: 8px;
                    background-image: url(https://vanilla-bear.jp/wp-content/themes/vanillabear/assets/img/service/tab.png);
                    background-size: cover;
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: 8px;
                }

                .serviceLink:hover{
                    color: #2B7FAD;
                }

                .serviceDetail-title{
                    font-size: 32px;
                    font-weight: bold;
                    border-bottom: solid 2px #3333331f;
                    padding-bottom: 20px;
                }

                .serviceDetail-title span{
                    font-size: 16px;
                    font-weight: 100;
                    /* margin-left: 14px; */
                }

                .serviceDetail-desc{
                    font-size: 14px;
                    margin-top: 12px;
                    line-height: 1.8;
                }

                .serviceDetail-content{
                    max-width: 949px;
                    margin: 0 auto;
                    background-color: #fff;
                    width: 100%;
                    padding: 40px;
                }

                .serviceDetail-table{
                    width: 100%;
                }

                .serviceDetail-table th{
                    border-top: solid 2px #2B7FAD;
                    border-bottom: solid 2px #2B7FAD;
                    padding: 24px 12px;
                }

                .serviceDetail-table td{
                    border-top: solid 2px #dfdfdf;
                    border-bottom: solid 2px #dfdfdf;
                    padding: 24px;
                }

                .serviceDetail-table_List li{
                    display: flex;
                    align-items: center;
                }

                .serviceDetail-table_List li::before{
                    content: "・";
                    color: #2B7FAD;
                    font-size: 24px;
                    font-weight: bold;
                }

                .serviceSite-link{
                    display: flex;
                    justify-content: center;
                    /* text-align: center; */
                    background-color: #2B7FAD;
                    color: #fff;
                    max-width: 400px;
                    margin: 0 auto;
                    padding: 20px;
                    align-items: center;
                }

                .serviceSite-link::after{
                    content: "";
                    padding: 8px;
                    background-image: url(https://vanilla-bear.jp/wp-content/themes/vanillabear/assets/img/service/tab-white.png);
                    background-size: cover;
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: 8px;
                }


                @media screen and (max-width: 768px){
                    .serviceDetail {
                        padding: 40px 20px;
                    }

                    .serviceDetail-top {
                        padding: 20px;
                        display: block;
                    }

                    .serviceDetail-topImg {
                        max-width: 100%;
                        height: auto;
                    }

                    .serviceDetail-titleBox {
                        width: 100%;
                        display: block;
                        margin-top: 12px;
                    }

                    .serviceDetail-title {
                        font-size: 24px;
                    }

                    .serviceDetail-top h2 {
                        font-size: 18px;
                    }

                    .serviceDetail-content {
                        padding: 20px;
                    }

                    .serviceDetail-table th {
                        font-size: 14px;
                        width: 36%;
                        padding: 24px 0 24px 8px;
                    }

                    .serviceDetail-table td {
                        padding: 24px 0 24px 12px;
                        font-size: 14px;
                    }

                    .serviceDetail-table_List li {
                        margin-bottom: 10px;
                    }
                }



/* 初めての方へ-詳細 */

.article__sec .article__content .beginners-detailTitle{
    font-size: 32px;
    color: #2B7FAD;
    /* font-weight: bold; */
    margin-bottom: 8px;
    display: inline-block;
    position: relative;
}

.article__sec .article__content .beginners-detailTitle span {
    position: absolute;
    left: 20px;
    top: -44px;
    font-size: 48px;
    opacity: 0.2;
    white-space: nowrap;
}

.faq{
    font-size: 44px;
    background-color: #2B7FAD;
    padding: 0px 16px 8px 16px;
    color: #fff;
    margin-right: 8px;
    border-radius: 6px;
}

.recomend .q_a{
    display: flex;
    align-items: center;
}

.recomend .q_a:before{
    content: "A";
    font-size: 32px;
    background-color: #c9c9c9;
    padding: 0px 16px 0px 16px;
    color: #333;
    margin-right: 8px;
    border-radius: 6px;
    height: 60px;
    width: 60px;
    text-align: center;
}

.blog_borderBox .blog_listBox.-faq li{
    margin-bottom: 20px;
}

.blog_borderBox .blog_listBox.-faq li::before{
    content: 'Q';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: #2B7FAD;
    border-radius: 2px;
  }

  .blog_borderBox .blog_listBox.-faq li a{
    margin-left: 8px;
}

.article__sec .article__content .beginners-link{
    font-size: 14px;
    position: relative;
    padding-left: 40px;
}

.article__sec .article__content .beginners-link::before{
    content: '';
    display: inline-block;
    position: relative;
    top: -0.125em;
    width: 18px;
    height: 18px;
    margin-right: 0.5em;
    vertical-align: middle;
    border-radius: 50%;
    /* background-color: #64bdd4; */
    background-image: url(https://vanilla-bear.jp/wp-content/themes/vanillabear/assets/img/common/right-arrow_link.svg);
    background-size: 100%;
}

.article__sec .article__content .beginners-link a{
    color: #2B7FAD;
}


.nav-ac{
    position: relative;
}

.nav-child{
    width: 1000px;
    position: absolute;
    background: linear-gradient(-45deg, #2B7FAD,#2ea7e0);
    color: #fff;
    right: 0;
    top: 56px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 40px 0 30px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transform-origin: center top;
    transition: visibility 0s 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    z-index: 9999;
}

.nav-ac:hover .nav-child {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: visibility 0s ease, opacity 0.3s ease, transform 0.3s ease;
}

.header__menu .nav-child a:not(.btn)::after {
    background-color: #fff;
}

.header__menu .nav-child-list__item{
    display: flex;
    align-items: center;
    max-width: 144px;
    text-align: center;
}

.header__menu .nav-child-list__item:not(:first-of-type){
    margin-left: 80px;
}

.header__menu .nav-child-list__item img{
    margin-bottom: 10px;
}

.mb0{
    margin-bottom: 0!important;
}

.mt32{
    margin-top: 32px!important;   
  }

.bg-gray{
    background: #f7f7f7;;
    padding: 40px 32px;
    margin-bottom: 2.4rem;
}

@media screen and (max-width: 768px){
    .bg-gray{
        padding: 32px 24px;
    }
}


/* 白熊の日記帳 */
.diary-item{
    display: flex;
    /* margin-bottom: 40px; */
    border-bottom: solid 1px #DEDEDE;
    padding: 60px 0;
    align-items: center;
    flex-flow: row-reverse;
}

.diary-item:first-of-type{
    padding-top: 0;
}

.diary-inner{
    width: 55%;
    margin-right: 40px;
}

.diary__img{
    width: 45%;
}

.diary__title{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
}

.sub-inner{
    display: flex;
    margin-bottom: 18px;
    align-items: end;
}

.diary__date{
    font-size: 16px;
    font-weight: 600;
    opacity: 0.6;
    margin-right: 20px;
    line-height: 1;
}

.diary__cat {
    max-width: 100%;
    background: #E68A00;
    color: #fff;
    text-align: center;
    border: 50%;
    border-radius: 19px;
    padding: 6px 12px 4px;
}

@media screen and (max-width: 768px){
    .diary-item{
        display: block;
        padding: 40px 0;
    }

    .diary__img {
        width: 100%;
        margin-bottom: 24px;
    }

    .diary-inner {
        width: 100%;
        margin-right: 0px;
    }

    .sub-inner {
        justify-content: flex-end;
    }

    .diary__title {
        font-size: 22px;
        margin-bottom: 8px;
    }
}

/* 制作実績 */
.works-archive{
    margin-top: 56px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;
}

.works-archive .works-list {
    width: calc((100% - 70px) / 3);
    margin-right: 35px;
    margin-bottom: 50px;
}


@media screen and (min-width: 768px){
    .works-archive .works-list:nth-child(3n) {
        margin-right: 0;
    }
}

.works-listImg-wrap{
    margin-bottom: 20px;
    /* border: 2px solid #2B7FAD; */
    /* border: 1px solid #f0f0f0; */
    /* border-radius: 20px; */
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.26));
    transform: translateZ(0);
    overflow: hidden;
    transition:  0.2s cubic-bezier(0.37, 0, 0.63, 1);
}

@media screen and (min-width: 768px){
.works-listLink:hover .works-listImg-wrap{
    /* transform: translate(-5px,-5px); */
    /* box-shadow: 5px 5px #f0f0f0; */
    
    transform: translate(-5px , -5px);
    transition:all 0.3s cubic-bezier(0.37, 0, 0.63, 1);
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.46));
}
}

.sec.works {
    max-width: 1100px;
    margin: auto;
    padding: 0px 0 70px;
}

.works-listTitle{
    font-weight: 600;
    margin-bottom: 12px;
}

.works-listCat-Inner{
    display: flex;
    flex-wrap: wrap;
}

.works-listCat{
    margin: 10px 10px 0 0 ;
    border: 1px solid #333;
    border-radius: 100px;
    padding: 9px 9px 7px;    
    font-feature-settings: "palt";
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1;
    background-color: #fff;
}


@media screen and (max-width: 767px){
    .works-archive {
        margin-top: 28px;
        display: block;
    }

    .works-archive .works-list {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 50px;
    }
}

.works-detailTitle {
    font-size: 32px;
    color: #2B7FAD;
    /* font-weight: bold; */
    margin-bottom: 8px;
    display: inline-block;
    position: relative;
    font-weight: bold;
}

.works-detailTitle span {
    position: absolute;
    left: 20px;
    top: -44px;
    font-size: 48px;
    font-weight: bold;
    opacity: 0.2;
    white-space: nowrap;
}

.works-detail-inner{
    margin-bottom: 120px;
}


.works-detail{
    padding: 80px;
    /* padding-bottom: 0; */
}

.works-detail.works-table{
    padding: 80px;
    /* padding-bottom: 0; */
    padding-top: 0;
}

.works_mv-wrap{
    max-width: 1100px;
    margin: auto;
    margin-bottom: 60px;
    position: relative;
    margin-bottom: 80px;
}

.works__heading{
    position: absolute;
    bottom: 24px;
    font-size: 12px;
    color: #fff;
    left: 24px;
}

.article__sec.works-sec{
    width: 90%;
    padding: 0px;
}

.works-sec h2{
    position: relative;
    font-size: 32px;
    font-weight: bold;
}

.works-txt-block{
    margin-top: 60px;
}

.works-txt {
    font-size: 1.6rem;
    line-height: 1.8;
    /* color: #666; */
    margin-top: 18px;
}

.works-subtitle{
    line-height: 1.8;
    color: #333;
    margin-top: 18px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 1.2rem;
}

.serviceLink.worksLink {
    font-size: 14px;
    transition: all .3s;
    margin-top: 12px;
    display: block;
    position: absolute;
    left: 24px;
}

.txt-block-title{
    position: relative;
    padding-left: 40px;
}

.txt-block-title.works_background::before{
    content: '';
    display: inline-block;
    /* width: 50px; */
    /* height: 50px; */
    background-image: url(https://vanilla-bear.jp/wp-content/uploads/2022/06/chat.png);
    background-size: contain;
    vertical-align: middle;
    padding: 18px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0%, -50%);
}

.txt-block-title.works_design::before{
    content: '';
    display: inline-block;
    /* width: 50px; */
    /* height: 50px; */
    background-image: url(https://vanilla-bear.jp/wp-content/uploads/2022/06/web-design-2.png);
    background-size: contain;
    vertical-align: middle;
    padding: 18px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0%, -50%);
}

.txt-block-title.works_blueprint::before{
    content: '';
    display: inline-block;
    /* width: 50px; */
    /* height: 50px; */
    background-image: url(https://vanilla-bear.jp/wp-content/uploads/2022/06/coder.png);
    background-size: contain;
    vertical-align: middle;
    padding: 18px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0%, -50%);
}

.txt-block-title.works_voice::before{
    content: '';
    display: inline-block;
    /* width: 50px; */
    /* height: 50px; */
    background-image: url(https://vanilla-bear.jp/wp-content/uploads/2022/05/idea-1.png);
    background-size: contain;
    vertical-align: middle;
    padding: 18px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0%, -50%);
}

@media screen and (max-width: 767px){
    .works-detail {
        padding: 10px;
    }

    .works-txt-block {
        margin-top: 40px;
    }

    .works_mv-wrap {
        margin-bottom: 0px;
    }

    .works__heading {
        position: static;
        font-size: 12px;
        margin-top: 12px;
        color: #333;
        margin-left: 14px;
        margin-right: 14px;
    }

    .serviceLink.worksLink {
        font-size: 14px;
        transition: all .3s;
        margin-top: 6px;
        display: block;
        position: static;
        /* left: 20px; */
        margin-left: 14px;
        margin-right: 14px;
    }

    .works-sec h2 {
        font-size: 24px;
    }

    .txt-block-title {
        padding-left: 32px;
    }

    .txt-block-title.works_background::before {
        padding: 12px;
    }

    .txt-block-title.works_design::before{
        padding: 12px;
    }
    
    .txt-block-title.works_blueprint::before{
        padding: 12px;
    }
    
    .txt-block-title.works_voice::before{
        padding: 18px;
    }

    .works-subtitle {
        font-size: 16px;
    }

    .sec.article__sec.works-sec{
        max-width: 100%;
        width: 96%;
        padding: 0px 0 40px!important;
    }

    .works-detail.works-table {
        padding: 10px;
        padding-bottom: 0;
        padding-top: 0;
        /* width: 96%; */
        /* margin: 0 auto; */
    }

    .works-detail-inner .serviceDetail-content {
        padding: 20px;
        max-width: 96%;
    }

}


  .target.is-hidden {
    display: none;
    opacity: 0;
  }
  .target.is-show {
    animation: fadeIn 1s ease; /* フェードイン用のスタイル */
  }
  
  .btn-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 50px;
    margin: 20px auto;
    border-radius: 25px;
    background: #2B7FAD;
    color: #fff;
    border: 1px solid #2B7FAD;
    transition-duration: 0.4s;
  }

  .btn-more:hover {
    color: #2B7FAD;
    background-color: #fff;
  }

  
  @keyframes fadeIn {
    0% {
      transform: translateY(20px);
      opacity: 0;
    }
    100% {
       transform: translateY(0);
      opacity: 1;
    }
  }

  #pricelist .price-box{
    margin: 0 auto;
    background-color: #fff;
    padding-bottom: 40px;
  }

  #pricelist .price-title{
    font-size: 32px;
    font-weight: 700;
    border-bottom: solid 2px #3333331f;
    padding-bottom: 20px;
  }

  #pricelist .price-desc{
    margin-left: 6px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.8;
  }

  #news-content h2{
    background: initial;
    color: #383838;
    border-bottom: 2px solid #2B7FAD;
    border-top: 2px solid #2B7FAD;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.4;
    margin: 120px 0 24px;
    padding: 20px;
  }

  #news-content h3{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    margin-top:48px;
  }

  #news-content h4{
    display: flex;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    align-items: center;
    margin-top: 0;
  }

  #news-content h4:before {
    content: '';
    width: 40px;
    height: 2px;
    background-color: #2B7FAD;
    margin-right: 20px;
}


.voice-archiveList-right{
    width: 80%;
}

@media screen and (max-width: 767px){

    .voice-archiveList-right{
        width: 100%;
    }

    #news-content h2{
        font-size: 20px;
        padding-left: 20px;
      }

      #news-content h3{
        font-size: 18px;
        word-break: break-all;
        margin-top: 24px;
      }
    
      #news-content h4{
        font-size: 16px;
        word-break: break-all;
      }
      
}




#news-content table , td, th {
	border-collapse: collapse;
}
#news-content th {
    border: 1px solid #595959;
	padding: 10px;
	width: 30%;
}
#news-content td {
    border: 1px solid #595959;
	padding: 10px;
	width: 70%;
}
#news-content th {
	background: #f0e6cc;
}
#news-content .even {
	background: #fbf8f0;
}
#news-content .odd {
	background: #fefcf9;
}



.activity-nav.col-120{
    margin-top: 20px;
}

.page-numbers{
    background-color: #2B7FAD;
    padding: 10px 14px;
    color: #fff;
}

a.page-numbers:hover{
    background-color: #5ABAE0;
    transition: .3s;
}

.page-numbers.current{
    background-color: #fff;
    color: #333;
}

#news-sec.sec{
    display: flex;
    max-width: 1600px;
}

#news-sec.sec .diary-wrap{
    flex: 1;
    padding: 6%;
}

#news-sec.sec #news-sidebar{
    padding: 48px;
    width: 32%;
    min-width: 360px;
}

@media screen and (max-width: 768px){
    #news-sec.sec #news-sidebar{
        padding: 6%;
        width: 100%;
        min-width: initial;
    }
}


#news-sidebar h2{
    background: #2B7FAD;
    color: #fff;
    padding: 10px;
    font-size: 22px;
    padding-left: 20px;
}


.iceberg{
    position: relative;
    display: flex;
}


.iceberg .bear{
    position: absolute;
    width:clamp(15.625rem, -1.042rem + 34.72vw, 25rem);
    right: 12%;
    z-index: 100;
    
}


.iceberg .iceberg-1{
    position: absolute;
    z-index: 99;
}

.iceberg .iceberg-2{
    position: absolute;
    z-index: 9;
}


.message .message-first_text{
    text-align: left;
    font-size: 16px;
    line-height: 32px;
    margin-bottom: 32px;
}

.message .messageContent{
    text-align: left;
}

.message .messageContent .messageContent__text{
    text-align: left;
}


.message .titleBox{
    text-align: left;
}

.message .titleBox__title {
    margin-bottom: .1em;
    font-size: 2.4rem;
    /* text-decoration: underline;
    text-underline-offset: calc(11rem / 16);
    text-decoration-thickness: 1px; */
}

.message .titleBox__smallTitle{
    font-size: 12px;
}




@media screen and (max-width: 767px){
      .iceberg .bear {
        width: 28%;
    }

    #news-sec.sec{
        display: block;
    }
}

.newscat-linklist{
    padding-left: 20px;
    margin-top: 20px;
}

.newscat-linklist li{
    margin-bottom: 12px;
}

.newscat-linklist li a:hover{
    color: #006db7;
}


.news-accesslist {
    margin-top: 40px;
    padding-left: 20px;
}

.news-accesslist li{
    display: flex;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: solid 1px #dedede;
    position: relative;
}

.news-accesslist li:first-child::after{
    position: absolute;
    content: "1";
    width: 44px;
    padding: 11px 16px 3px;
    background: url(//vanilla-bear.jp/wp-content/themes/vanillabear/assets/css/../img/news/crown_1.svg);
    z-index: 1;
    top: -16px;
    height: 44px;
    left: -20px;
    background-size: cover;
    vertical-align: middle;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #fff;
}

.news-accesslist li:nth-child(2)::after{
    position: absolute;
    content: "2";
    width: 44px;
    padding: 11px 16px 3px;
    background: url(//vanilla-bear.jp/wp-content/themes/vanillabear/assets/css/../img/news/crown_2.svg);
    z-index: 1;
    top: -16px;
    height: 44px;
    left: -20px;
    background-size: cover;
    vertical-align: middle;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #fff;
}

.news-accesslist li:nth-child(3)::after{
    position: absolute;
    content: "3";
    width: 44px;
    padding: 11px 16px 3px;
    background: url(//vanilla-bear.jp/wp-content/themes/vanillabear/assets/css/../img/news/crown_3.svg);
    z-index: 1;
    top: -16px;
    height: 44px;
    left: -20px;
    background-size: cover;
    vertical-align: middle;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #fff;
}

.news-accesslist li:nth-child(4)::after{
    position: absolute;
    content: "4";
    width: 44px;
    padding: 11px 16px 3px;
    background: url(//vanilla-bear.jp/wp-content/themes/vanillabear/assets/css/../img/news/crown_4.svg);
    z-index: 1;
    top: -16px;
    height: 44px;
    left: -20px;
    background-size: cover;
    vertical-align: middle;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #fff;
}

.news-accesslist li:nth-child(5)::after{
    position: absolute;
    content: "5";
    width: 44px;
    padding: 11px 16px 3px;
    background: url(//vanilla-bear.jp/wp-content/themes/vanillabear/assets/css/../img/news/crown_5.svg);
    z-index: 1;
    top: -16px;
    height: 44px;
    left: -20px;
    background-size: cover;
    vertical-align: middle;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #fff;
}


.news-accesslist li a{
    width: 50%;
}

.news-accesslist .news-accesslist-title {
    font-size: 14px;
    font-weight: bold;
    padding-left: 14px;
    padding-right: 14px;
}

.news-sidebar-block{
    margin-bottom: 40px;
}


.span-stk-maker-yellow{
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #ff6 50%);
    display: inline;
    background-position: left -100% center;
    background-repeat: repeat-x;
    background-size: 200% .6em;
    padding-bottom: .6em;
}


pre:not(.prettyprint) {
    background: #555;
    background: rgba(0, 0, 0, .7);
    color: #f8f9fa;
    font-size: 85%;
    line-height: 1.3;
    padding: 1.2em 1.7em;
    margin: .2em 0 2.2em;
    border-radius: 5px;
}