@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

/* # root1 START # */
/* :root {
    --color00: #fff;
    --color01: #201a75;
    --color02: #004098;
    --color03: #b0c6e5;
    --color04: linear-gradient(to top, #000 8%, #400098 23%);
} */
/* # root1 END # */

/* # root2 START # */
:root {
    --color00: #fff;
    --color01: #00351b;
    --color02: #2f7a00;
    --color03: #bcd0ad;
    --color04: linear-gradient(to top, #000 8%, #00351b 23%);
}
/* # root2 END # */

/* # root3 START # */
/* :root {
    --color00: #fff;
    --color01: #865d00;
    --color02: #897341;
    --color03: #dcdcdc;
    --color04: linear-gradient(to top, #000 8%, #865d00 23%);
} */
/* # root3 END # */

* {
    font-family: "Noto Sans JP", sans-serif;
}

/*h1の設定/////////////////////////////////////////////////////////////////////////ƒ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.h1 {
    position: relative;
    z-index: 100;
}

h1 {
    width: 90%;
    margin: auto;
    font-size: 11px;
    line-height: 15px;
}

.sim__mainImg-wrap img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
}

.ovf-h {
    overflow: hidden;
}

.totop {
    width: 50px;
    height: 50px;
    font-size: 20px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background: var(--color01);
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 200;
}
.totop:before {
    content: "\f062";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    line-height: 2.5;
}
@media(max-width:1024px) {
    .totop {
        bottom: 90px;
    }
    .h1 {
        padding-right: 60px;
    }
}

@media(max-width:599px) {
    .totop {
        bottom: 115px;
    }
}

/*headerの設定////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

#header {
    width: 100%;
    background-color: white;
    z-index: 100;
}

#header.fixed {
    position: fixed;
    top: 0;
    left: 0;
}

.header-1 {
    padding: 15px 0;
}

.header-inner {
    width: 90%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
}

.header-logo {
    width: 20%;
    min-width: 200px;
        max-width: 230px;

    height: 60px;
}

.header-logo a{
  display: block;
}

.header-logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
}

.sec {
    margin-top: 100px;
}

@media(max-width:1024px) {
    #header.fixed {
        position: relative;
    }
    .header-logo {
        display: none;
    }
    .header-1 {
        margin: 0;
            padding-right: 60px;
    }
}

@media(max-width:1024px) {
    .sec {
        margin-top: 80px;
    }
}

@media(max-width:599px) {
    .sec {
        margin-top: 60px;
    }
      .header-1 {
       padding: 5px 60px 5px 0;
    }
}


/*ボタンの設定////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    position: relative;
    z-index: 10;
}

.btn-tel,
.btn-web {
    width: 220px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.btn-tel {
    font-weight: bolder;
    font-size: 25px;
    position: relative;
}

.tel {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.tel a {
    width: 100%;
    height: 100%;
}

.btn-tel .tel a::before {
    content: "\f095";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 30px;
    color: var(--color02);
    line-height: 1;
}

.btn-tel .sb-text{
    text-wrap: nowrap;
    font-size: 12px;
    margin-top: -15px;
    text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white;
}

.btn-web {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 16px;
    color: white;
}

.web {
    width: 100%;
    height: 100%;
    background-color: var(--color02);
}

.ab .web {
    background-color: #ac973e;
}

.btn-web .web::before {
    content: "";
    width: 20px;
    height: 70%;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    background-image: url('/import/tenant_1/162.43.32.223/html/images/mail-w.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.btn-web .web.new::before{
  content:none;
}
.sp-sb-text{
  display: none;
}
[data-element-id] .sp-sb-text{
    border: solid 1px #000;
    position: relative;
    display: block;
}

[data-element-id] .sp-sb-text:before {
    content: "モバイル用";
    display: block;
    font-size: 12px;
    color: #fff;
    background: #000;
    position: relative;
    z-index: 2;
}
@media (max-width: 1024px) {
  .btn-tel .sb-text{
    margin-top: -16px;
  }
}

@media (max-width: 599px) {
  .btns{
        flex-wrap: wrap;
  }
  .sp-sb-text{
        text-align: center;
    width: 100%;
    font-size: 14px;
    display: block;
        text-shadow: 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white, 0 0 2px white;
        font-weight: bold;
        letter-spacing: 3px;
  }
  .btn-tel .sb-text{
    display: none;
  }
}

/*ボタンの設定////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.more-btn,
.back-btn,
.more-btn-b,
.back-btn-b {
    width: 100%;
    max-width: 200px;
    height: 50px;
    overflow: hidden;
    position: relative;
}

.more-btn a,
.back-btn a {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: white;
    position: relative;
}

.more-btn-b a,
.more-btn-b .aa,
.back-btn-b a,
.back-btn-b .aa {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: white;
    background-color: var(--color02);
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
    position: relative;
}

.more-btn a span,
.back-btn a span {
    font-size: 13px;
    color: var(--color02);
    position: relative;
    z-index: 3;
}

.more-btn-b a span,
.more-btn-b .aa span,
.back-btn-b a span,
.back-btn-b .aa span {
    font-size: 13px;
    color: white;
    position: relative;
    z-index: 3;
}

.more-btn a span::after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 20px;
    color: var(--color02);
    line-height: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: -30px;
}

.more-btn-b a span::after,
.more-btn-b .aa span::after {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    line-height: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: -30px;
}

.back-btn a span::after {
    content: "\f104";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 20px;
    color: var(--color02);
    line-height: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: -30px;
}

.back-btn-b a span::after,
.back-btn-b .aa span::after {
    content: "\f104";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    line-height: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: -30px;
}

.more-btn:hover a span::after {
    color: #fff;
}

.back-btn:hover a span::after {
    color: #fff;
}

.more-btn-b:hover a span::after {
    color: var(--color02);
}

.more-btn-b:hover .aa span::after {
    color: var(--color02);
}

.back-btn-b:hover a span::after {
    color: var(--color02);
}

.back-btn-b:hover .aa span::after {
    color: var(--color02);
}

.more-btn:hover a,
.back-btn:hover a {
    background-color: var(--color02);
    opacity: 1;
}

.more-btn:hover a span,
.back-btn:hover a span {
    color: white;
}

.more-btn-b:hover a,
.more-btn-b:hover .aa,
.back-btn-b:hover a,
.back-btn-b:hover .aa {
    background-color: white;
    opacity: 1!important;
}

.more-btn-b:hover a span,
.more-btn-b:hover .aa span,
.back-btn-b:hover a span,
.back-btn-b:hover .aa span {
    color: var(--color02);
}

.more-btn a::after,
.back-btn a::after {
    content: "";
    width: 100%;
    height: 100%;

/*波紋の形状*/
    background: radial-gradient(circle, #fff 10%, transparent 10%) no-repeat 50%;

/*はじめは透過0に*/
    opacity: 0;

/*アニメーションの設定*/
    -webkit-transition: opacity 1s, -webkit-transform 0.3s;
    transition: opacity 1s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 1s;
    transition: transform 0.3s, opacity 1s, -webkit-transform 0.3s;
    -webkit-transform: scale(10, 10);
    transform: scale(10, 10);

/*絶対配置で波紋位置を決める*/
    position: absolute;
    top: 0;
    left: 0;
}

.more-btn-b a::after,
.more-btn-b .aa::after,
.back-btn-b a::after,
.back-btn-b .aa::after {
    content: "";
    width: 100%;
    height: 100%;

/*波紋の形状*/
    background: radial-gradient(circle, var(--color02) 10%, transparent 10%) no-repeat 50%;

/*はじめは透過0に*/
    opacity: 0;

/*アニメーションの設定*/
    -webkit-transition: opacity 1s, -webkit-transform 0.3s;
    transition: opacity 1s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 1s;
    transition: transform 0.3s, opacity 1s, -webkit-transform 0.3s;
    -webkit-transform: scale(10, 10);
    transform: scale(10, 10);

/*絶対配置で波紋位置を決める*/
    position: absolute;
    top: 0;
    left: 0;
}


/*クリックされたあとの形状の設定*/

.more-btn a:active::after,
.back-btn a:active::after,
.more-btn-b a:active::after,
.more-btn-b .aa:active::after,
.back-btn-b a:active::after,
.back-btn-b .aa:active::after {
    opacity: 0.3;
    -webkit-transition: 0s;
    transition: 0s;
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
}


/*吹き出し///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.pop-box {
    width: 145px;
    height: 40px;
    margin-right: 20px;
    padding: 5px;
    font-weight: bold;
    font-size: 12px;
    color: var(--color02);
    line-height: 15px;
    text-align: center;
    background: var(--color03);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pop-box:after {
    content: "";
    width: 0;
    height: 0;
    margin-top: -9px;
    border: solid transparent;
    border-color: rgba(0, 153, 255, 0);
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 12px;
    border-left-color: var(--color03);
    border-right-width: 12px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 100%;
}

.anim-box.poyopoyo {
    opacity: 1;
    -webkit-animation: poyopoyo 2s ease-out infinite;
    animation: poyopoyo 2s ease-out infinite;
}

@-webkit-keyframes poyopoyo {
    0%,
    40%,
    60%,
    80% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
    50%,
    70% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
}

@keyframes poyopoyo {
    0%,
    40%,
    60%,
    80% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
    50%,
    70% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
}

[data-element-id] .anim-box.poyopoyo {
    animation: none;
}

@media(max-width:1024px) {
    .btns {
        position: fixed;
        top: auto;
        bottom: 15px;
        right: 15px;
        z-index: 700;
    }
    .btn-tel {
        margin-right: 15px;
        font-size: 17px;
        border: 2px solid var(--color02);
        border-radius: 10px;
        background-color: white;
    }
    .web {
        border-radius: 10px;
    }
    .btn-tel,
    .btn-web {
        width: 210px;
        border-radius: 10px;
    }
    .btn-web .web::before {
        margin-bottom: 0px;
        margin-right: 5px;
    }
    .btn-tel .tel a::before {
        margin-bottom: 2px;
        font-size: 18px;
    }
    .pop-box {
        margin-right: 30px;
    }
}

@media(max-width:599px) {
    .btns {
        margin: 0 10px;
        position: fixed;
        top: auto;
        bottom: 15px;
        left: 0;
        right: 0;
    }
    .btn-tel {
        margin-right: 5px;
        font-size: 14px;
    }
    .btn-web {
        font-size: 14px;
    }
    .btn-tel,
    .btn-web {
          min-width: 175px;
    width: 46vw;
    }
    .pop-box {
        position: absolute;
        top: -100%;
    }
    .pop-box:after {
        content: "";
        width: 0;
        height: 0;
        margin-top: 0;
        margin-left: -12px;
        border: solid transparent;
        border-color: rgba(0, 153, 255, 0);
        border-top-width: 9px;
        border-top-color: var(--color03);
        border-bottom-width: 9px;
        border-left-width: 12px;
        border-right-width: 12px;
        pointer-events: none;
        position: absolute;
        top: 100%;
        left: 50%;
    }
     .web {
     font-size: 12px;
    }
}

.header-2 {
    width: 100%;
    background-color: var(--color01);
}

.nav {
    width: 92%;
    max-width: 1000px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.nav li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
}

.nav li .drop-lists {
    width: 300px;
    display: none;
    position: absolute;
    top: 100%;
}

.nav li .drop-lists li {
    height: 50px;
    margin: 1px;
}

.drop-switch:hover .drop-lists {
    display: block;
    z-index: 100;
}

.nav li {
    margin: 20px 0;
    -webkit-transition: 0.1s ease;
    transition: 0.1s ease;
}

.nav.p-area li {
    margin: 5px 0;
}


.nav-item1 {
    font-size: 18px;
    color: white;
}

.nav-item1:hover {
    color: yellow;
    opacity: 1;
}

.nav-item1::before {
    content: "/";
    display: inline-block;
    margin-left: 1em;
    margin-right: 1em;
}

.nav li:nth-child(1) .nav-item1::before {
    display: none;
}

.nav-item2 {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: var(--color01);
    border: 2px solid var(--color01);
    background-color: white;
}

.nav-item2:hover {
    color: white;
    border: 2px solid var(--color01);
    background-color: var(--color01);
    opacity: 1;
}

.pc-none {
    display: none!important;
}

@media(max-width:1024px) {
    .nav.p-area li {
        margin: 20px 0;
    }
    .header-inner2 {
        padding-top: 60px;
    }
    .pc-none {
        display: block!important;
    }
    .nav-logo {
        max-width: 250px;
        margin: 30px auto 20px auto;
    }
    .openbtn8 {
        width: 50px;
        height: 50px;

/*ボタン内側の基点となるためrelativeを指定*/
        cursor: pointer;
        position: relative;
    }
    /*ボタン内側*/
    .openbtn8 .openbtn-area {
        /*アニメーションの設定*/
        width: 50px;
        height: 50px;
        -webkit-transition: all 0.6s;
        transition: all 0.6s;
    }
    .openbtn8 span {
        width: 40px;
        height: 3px;
        display: inline-block;
        border-radius: 2px;
        background: var(--color01);
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        position: absolute;
        left: 5px;
    }
    .openbtn8 span:nth-of-type(1) {
        top: 10px;
    }
    .openbtn8 span:nth-of-type(2) {
        top: 25px;
    }
    .openbtn8 span:nth-of-type(3) {
        top: 40px;
    }
    /*activeクラスが付与されると .openbtn-areaが360度回転し、その中の線が回転して×に*/
    .openbtn8.active .openbtn-area {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    .openbtn8.active span:nth-of-type(1) {
        width: 40px;
        -webkit-transform: translateY(6px) rotate(-45deg);
        transform: translateY(6px) rotate(-45deg);
        top: 18px;
        left: 0px;
    }
    .openbtn8.active span:nth-of-type(2) {
        opacity: 0;
    }
    .openbtn8.active span:nth-of-type(3) {
        width: 40px;
        -webkit-transform: translateY(-6px) rotate(45deg);
        transform: translateY(-6px) rotate(45deg);
        top: 30px;
        left: 0px;
    }
    .header-2 {
        width: 50%;
        height: 100vh;

/*ナビの高さ*/
        background: white;

/*動き*/
        -webkit-transition: all 0.6s;
        transition: all 0.6s;

/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position: fixed;

/*ナビのスタート位置と形状*/
        top: 0;
        right: -50%;
        z-index: 900;
    }
    /*アクティブクラスがついたら位置を0に*/
    .header-2.panelactive {
        right: 0;
    }
    /*ナビゲーションの縦スクロール*/
    .header-2.panelactive .nav {
        width: 100%;
        height: 100vh;

/*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;

/*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 998;
    }
    .nav,
    .nav li,
    .nav li .drop-lists,
    .nav-item2,
    .fixed .header-2 .header-inner2 .nav li {
        display: block;
    }
    .nav li .drop-lists {
        width: 100%;
        position: static;
    }
    .nav-item1 {
        width: 100%;
        display: block;
        padding: 0;
        color: var(--color02);
    }
    .fixed .header-2 .header-inner2 .nav li .nav-item1 {
        width: 100%;
        display: block;
        padding: 0;
        color: var(--color02);
    }
    .nav li .drop-lists li {
        height: auto;
        margin: 5px 0;
    }
    .nav-item2 {
        width: 100%;
        padding-left: 0;
        font-size: 14px;
        color: var(--color02);
        border: none;
    }
    .nav-item2::before {
        content: "";
        width: 10px;
        height: 10px;
        display: inline-block;
        margin-bottom: 3px;
        margin-right: 5px;
        border-bottom: 1px solid var(--color01);
        border-left: 1px solid var(--color01);
    }
    .nav-item1::before {
        display: none;
    }
    .nav-item1:hover,
    .nav-item2:hover {
        border: none;
        background-color: var(--color03);
        opacity: 1;
    }
    .nav li {
        margin: 15px 0;
        padding-left: 30px;
    }
    .nav {
        padding-bottom: 300px;
        position: relative;
    }
    .btnarea {
        position: fixed;
            top: 5px;
    right: 5px;
        z-index: 950;
    }
    .overlay {
        width: 100%;
        height: 100%;
        display: none;
        background-color: rgba(77, 66, 62, 0.3);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 800;
    }
    .active.overlay {
        display: block;
    }
}

@media(max-width:599px) {
    .header-2 {
        width: 80%;
        right: -80%;
    }
    .nav-logo {
        max-width: 200px;
    }
    .openbtn8 span:nth-of-type(1) {
        top: 5px;
    }
    .openbtn8 span:nth-of-type(2) {
        top: 20px;
    }
    .openbtn8 span:nth-of-type(3) {
        top: 35px;
    }
    .btnarea{
      top: 0;
    }
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////メインビジュアル*/

.mv-area {
    height: 97vh;
    position: relative;
}

.mv-area .top-slide {
    height: 100% !important;
}

.mv-area .uk-slideshow {
    height: 100% !important;
}

.mv-area .uk-slidenav-position {
    height: 100%;
}

.mv-area .uk-slideshow>* {
    height: 100% !important;
}

.mv-area .uk-slideshow>*>* {
    height: 100% !important;
}

.mv-area .uk-slideshow .img {
    height: 100%;
}

.uk-flex img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

.mv-area .uk-dotnav {
    width: 90%;
    justify-content: flex-start;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(-50%);
    left: 50%;
}

.mv-area .uk-dotnav>*>* {
    width: 10px;
    height: 10px;
}

.mv-area .uk-dotnav-contrast>.uk-active>* {
    transform: scale(1.1);
}


/* 寺院墓地（詳細）のスライダー */

.uk-slider>*>* {
    padding-top: 70%;
    position: relative;
}

.uk-slider>*>* img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-width: 599px) {
    .uk-slider>* {
        width: 19% !important;
    }
}

.mv-texts {
    font-family: "Noto Serif JP", serif;
    color: #333;
    text-align: right;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 45%;
    right: 10%;
}

.mv-texts h2 {
    margin-bottom: 40px;
    font-weight: bold;
    font-size: 40px;
    line-height: 1.5;
    text-shadow: 0px 0px 24px #fff, 0px 0px 24px #fff, 0px 0px 24px #fff, 0px 0px 24px #fff, 0px 0px 24px #fff,0px 0px 24px #fff, 0px 0px 24px #fff,0px 0px 24px #fff, 0px 0px 24px #fff;
}

.mv-texts .sb-text {
    font-weight: bold;
    font-size: 30px;
    color: #333;
    line-height: 1.5;
    text-shadow: 0px 0px 24px #fff, 0px 0px 24px #fff, 0px 0px 24px #fff, 0px 0px 24px #fff, 0px 0px 24px #fff,0px 0px 24px #fff, 0px 0px 24px #fff,0px 0px 24px #fff, 0px 0px 24px #fff;
}

.mv1 {
    position: relative;
    z-index: 2;
}

.mini-news {
    width: 68%;
    max-width: 750px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.mini-title {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 20px 10px;
    font-weight: bold;
    color: white;
    text-align: center;
    background-color: var(--color03);
}

.mini-txt {
    width: calc(100% - 100px);
    display: flex;
    align-items: center;
    padding: 20px 30px;
    color: #333;
    background-color: rgba(255, 255, 255, 0.7);
}

.mini-txt a {
    display: flex;
}

.mini-date {
    display: inline-block;
    flex-shrink: 0;
    margin-right: 25px;
}

@media(max-width:1024px) {
    .mv1 {
        padding-top: 0;
    }
    .mv-texts h2 {
        margin-bottom: 20px;
        font-size: 27px;
    }
    .mv-texts .sb-text {
        font-size: 20px;
    }
    .mv-texts {
        width: 95%;
        right: 5%;
    }
    .mini-txt a {
        flex-wrap: wrap;
    }
    .mini-date {
        width: 100%;
    }
}

@media(max-width:599px) {
    .mini-news {
        width: 100%;
        position: static;
    }
    .mv-texts h2 {
        margin-bottom: 15px;
        font-size: 25px;
    }
    .mv-texts .sb-text{
      font-size: 16px;
    }
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////section１*/

.diamond .color {
    width: 282px;
    height: 282px;
}

.color-1 {
    background-color: var(--color02);
}

.color-2 {
    background-color: var(--color01);
}

.color-3 {
    background-color: #ccc;
}

.color-4 {
    background-color: var(--color03);
}

.color-5 {
    background-color: #987a00;
}

.color-6 {
    background-color: #400098;
}

.diamond {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin-left: 51px;
    margin-right: 51px;
    -webkit-box-shadow: 0 0 0 0 transparent;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
}

.diamond img,
.diamond .color {
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    scale: 1.5;
}

.grid1 {
    margin-bottom: -53px;
}

.grid2 {
    margin-bottom: -52px;
    margin-left: 151px;
}

.grid3 {
    margin-bottom: -52px;
}

.grid4 {
    margin-left: 151px;
}

.grid5 {
    margin-bottom: -52px;
    margin-left: 302px;
}

.grid6 {
    margin-bottom: -52px;
    margin-left: 151px;
}

.grid7 {
    margin-bottom: -52px;
}

.grid8 {
    margin-bottom: -52px;
    margin-left: 151px;
}

.grid9 {
    margin-left: 302px;
}

.sec-1 {
    position: relative;
}

.sec-1 .sec-inner {
    margin: auto;
    position: relative;
    z-index: 2;
}

.sec-1-title {
    margin-bottom: 85px;
    /* font-weight: bold; */
    font-size: 30px;
    color: #333;
    line-height: 1.5;
}

.sec-1-txt {
    margin-left: 7em;
    color: #333;
    line-height: 3;
}

.big-grids-1 {
    position: absolute;
    top: 80px;
    left: -250px;
    z-index: 1;
}

.big-grids-2 {
    position: absolute;
    top: -230px;
    right: -290px;
    z-index: 1;
}

.sec-1 .more-btn-b {
    margin: 100px 0 0 auto;
}

.tb-none {
    display: none;
}
@media(max-width:1550px) {
    .big-grids-1,
    .big-grids-2 {
        opacity: 0.2;
    }
}
@media(max-width:1024px) {
    .sec-1 .sec-inner {
        margin-left: auto;
    }

    .sec-1-title {
        margin-bottom: 60px;
        /* font-weight: bold; */
        font-size: 24px;
        color: #333;
    }
    .sec-1 .more-btn-b {
        margin-top: 75px;
    }
}

@media(max-width:599px) {
    .big-grids-1 {
        overflow: hidden;
        top: 350px;
    }
    .sec-1-txt {
        width: 100%;
        margin: 60px auto 60px auto;
        font-weight: bold;
        color: #333;
        line-height: 2.5em;
    }
    .sec-1-title {
        margin-bottom: 35px;
        font-size: 25px;
    }
    .sec-1 .more-btn-b {
        margin-top: 50px;
    }
    .tb-none {
        display: block;
    }
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////section２*/

.sec-2 {
    margin-top: 200px;
    position: relative;
    z-index: 1;
}

@media (max-width: 1024px) {
    .sec-2 {
        margin-top: 150px;
    }
}

@media (max-width: 599px) {
    .sec-2 {
        margin-top: 100px;
    }
}

.title-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 85px;
    position: relative;
    z-index: 1;
        flex-direction: column;
}

.title-1 h3 {
    font-size: 32px;
    color: #333;
    line-height: 1.5;
    text-align: center;
    text-shadow: 4px 4px 6px #fff, -4px 4px 6px #fff, 4px -4px 6px #fff, -4px -4px 6px #fff, 4px 0px 6px #fff, 0px 4px 6px #fff, -4px 0px 6px #fff, 0px -4px 6px #fff;
}

@media (max-width: 1024px) {
    .title-1 {
        margin-bottom: 60px;
    }
    .title-1 h3 {
        font-size: 24px;
    }
}

@media (max-width: 1024px) {
    .title-1 {
        margin-bottom: 35px;
    }
    .title-1 h3 {
        font-size: 25px;
    }
}

.icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.icon .icon-a {
    width: 10px;
    height: 15px;
    margin: 0 auto;
    background-color: var(--color02);
}

.icon .icon-b {
    width: 20px;
    height: 10px;
    margin: 0 auto;
    background-color: var(--color02);
}

.icon .icon-c {
    width: 30px;
    height: 5px;
    margin: 0 auto;
    background-color: var(--color02);
}

.card-a {
    background-image: url('/import/tenant_1/162.43.32.223/html/images/card-a-bg.webp');
    background-size: cover;
    background-position: center;
    position: relative;
}

.card-a-title {
    padding: 1em 10px;
    font-weight: bold;
    font-size: 18px;
    color: var(--color02);
    line-height: 1.5;
    text-align: center;
}

.card-a-txt {
    padding: 20px 15px;
    font-size: 16px;
    line-height: 1.6;
    text-align: justify;
    text-justify: inter-ideograph;
}

.cube-1 {
    width: 30px;
    height: 30px;
    position: absolute;
    top: -8px;
    left: -8px;
}

.cube-2 {
    width: 90px;
    height: 90px;
    position: absolute;
    bottom: -3px;
    right: -3px;
    z-index: -1;
}

.a {
    background-color: var(--color01);
}

.b {
    background-color: var(--color03);
}

.sec-2 .inner .more-btn-b {
    margin: 60px auto 0 auto;
}

@media(max-width:1024px) {
    .card-a-title {
        padding: 30px 10px 10px;
    }
    .sec-2 .inner .more-btn-b {
        margin: 45px auto 0 auto;
    }
}

@media(max-width:599px) {
    .card-a-pic {
        width: 80%;
        margin: 0 auto;
    }
    .card-a-title {
        padding: 10px;
    }
    .sec-2 .inner .more-btn-b {
        margin: 30px auto 0 auto;
    }
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////section3*/

.sec-3 {
    background-image: url('/import/tenant_1/162.43.32.223/html/images/card-a-bg.webp');
    background-size: cover;
    background-position: center;
    position: relative;
}

.bg-tri1 {
    width: 100%;
    height: 0px;
    border-width: 100px 50vw 0 50vw;
    border-style: solid;
    border-color: white transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.bg-tri2 {
    width: 100%;
    height: 0px;
    border-width: 0 50vw 100px 50vw;
    border-style: solid;
    border-color: transparent transparent white transparent;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.for-tri {
    padding: 200px 0;
}

@media (max-width: 1024px) {
    .for-tri {
        padding: 150px 0;
    }
}

@media (max-width: 599px) {
    .for-tri {
        padding: 100px 0;
    }
}

.card-b {
    position: relative;
}

.card-b-title {
    min-width: 50px;
    max-width: 270px;
    max-height: 250px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 10px;
    font-size: 18px;
    color: white;
    text-align: right;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    background-image: var(--color04);
    position: absolute!important;
    top: -10px;
    left: 10px;
    z-index: 1;
}

.card-b-title::after {
    content: "";
    width: 100%;
    height: 30px;
    display: block;
    background: #000;
    background-size: contain;
    transform: translate(-50%, 50%);
    position: absolute;
    bottom: -10px;
    left: 50%;
    z-index: -1;

    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 50% 65%, 0 100%);
}

.card-b-title::before {
    content: "";
    border: none;
    border-bottom: solid 10px var(--color02);
    border-right: solid 10px transparent;
    position: absolute;
    top: 0;
    right: -10px;
}

.card-b-title span {
    display: inline-block;
    line-height: 1;
    text-align: left;
    position: relative;
}


/* .card-b-title span::after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    width: 100%;
    border-left: 30px solid black;
    border-right: 30px solid black;
    border-bottom: 20px solid transparent;
} */

.corner {
    border-bottom: 60px solid var(--color02);
    border-left: 60px solid transparent;
    opacity: 0.5;

/*三角形右下*/
    position: absolute;
    bottom: 0;
    right: 0;
}

.corner-img {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    line-height: 1;
    position: absolute;
    bottom: 10px;
    right: 6px;
}

.corner-txt {
    display: flex;
    align-items: center;
}

.diamond2 {
    width: 60px;
    height: 60px;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
    -webkit-box-shadow: 0 0 0 0 transparent;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
}

.diamond2 .color {
    width: 85px;
    height: 85px;
    margin: -12.5px 0 0 -12.5px;
    opacity: 0.75;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media (max-width: 599px) {
    .card-b-title {
        max-height: 160px;
        padding: 10px;
        font-size: 15px;
    }
    .card-b-title::after {
        bottom: 0;
    }
}

.grid10 {
    margin-left: 45px;
}

.grid11 {
    margin-top: -15px;
}

.grid12 {
    margin-top: -15px;
    margin-left: 45px;
}

.diamond3 {
    width: 120px;
    height: 120px;
    overflow: hidden;
    margin-left: 30px;
    margin-right: 30px;
    -webkit-box-shadow: 0 0 0 0 transparent;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
}

.diamond3 .color {
    width: 170px;
    height: 170px;
    margin: -25px 0 0 -25px;
    opacity: 0.75;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.grid13 {
    margin-left: 180px;
}

.grid14,
.grid16 {
    margin-top: -30px;
    margin-left: 90px;
}

.grid15 {
    margin-top: -30px;
}

.grid17 {
    margin-top: -30px;
    margin-left: 180px;
}

.banner-1-bg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #e8eff8;
    position: relative;
}

.big-grids-3 {
    position: absolute;
    top: -35px;
    left: -65px;
}

.big-grids-4 {
    position: absolute;
    top: -90px;
    right: -120px;
}

.banner-1 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 50px 30px;
    position: relative;
}

.banner-1-title {
    display: inline-block;
    padding: 10px 20px;
    color: var(--color02);
    border: 1px solid;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.banner-1-price {
    margin-top: 25px;
    font-weight: bold;
    font-size: 40px;
    color: var(--color02);
    position: relative;
    z-index: 1;
}

.banner-1-price span {
    font-weight: bold;
    font-size: 20px;
}

.banner-1-txt {
    margin-top: 25px;
    font-weight: bold;
    color: #333;
    line-height: 2em;
    position: relative;
    z-index: 1;
}

.banner-1-base {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.banner-1 .more-btn-b {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.banner-1-pic {
    width: 190px;
    height: auto;
    position: absolute;
    bottom: 20px;
    right: 180px;
    z-index: 1;
}

@media(max-width:1024px) {
    .banner-1 {
        width: 100%;
        padding: 30px;
    }
    .banner-1-pic {
        width: 160px;
        bottom: 70px;
        right: 30px;
    }
    .big-grids-3,
    .big-grids-4 {
        opacity: 0.2;
    }
}

@media(max-width:599px) {
    .banner-1 {
        width: 100%;
        padding: 30px 30px 80px 30px;
    }
    .banner-1-pic {
        width: 100px;
        top: -60px;
        bottom: auto;
    }
    .banner-1-txt {
        font-size: 14px;
    }
}

.card-c-pic {
    position: relative;
}

.card-c-txt {
    margin: 10px 0;
}

.card-c-txt .place {
    color: #333;
}

.card-c-txt .category span {
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 3px 5px;
    font-size: 14px;
    color: white;
    background-color: var(--color02);
}

.card-c-txt .category .お庭造り・リニューアル {
    background-color: var(--color02);
}

.card-c-txt .category .庭木の剪定 {
    background-color: var(--color01);
}

.card-c-txt .category .芝張り・芝刈り  {
    background-color: var(--color03);
}

.card-c-txt .category .その他 {
    background-color: #333;
}

.sec-4 .inner .more-btn-b {
    margin: 100px auto 0 auto;
}

@media(max-width:1024px) {
    .sec-4 .inner .more-btn-b {
        margin: 75px auto 0 auto;
    }
}

@media(max-width:599px) {
    .sec-4 .inner .more-btn-b {
        margin: 50px auto 100px auto;
    }
}

.sec-5 .inner {
    padding: 50px 0;
    background-image: url('/import/tenant_1/162.43.32.223/html/images/card-a-bg.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

.sec-5 .inner::after {
    content: "";
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border: 10px solid white;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
}

.faq-list {
    width: calc(100% - 80px);
    margin-left: auto;
    margin-right: auto;
}

.faq-q,
.faq-a {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
}

.faq-a {
    margin-top: 20px;
}

.faq-q-txt {
    width: calc(100% - 60px);
    margin-left: 10px;
    font-size: 20px;
    color: #333;
}

.faq-a-txt {
    width: calc(100% - 110px);
    margin-left: 10px;
    font-size: 20px;
    color: #333;
    line-height: 1.3;
}

.balloon1 {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 30px;
    color: #fff;
    line-height: 1;
    text-align: center;
    border-radius: 50%;
    background: var(--color02);
    position: relative;
}

.balloon1:before {
    content: "";
    margin-left: -15px;
    border: 15px solid transparent;
    border-bottom: 15px solid var(--color02);
    position: absolute;
    bottom: 0;
    left: 80%;
    z-index: 0;
}

.balloon2 {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1em;
    margin-right: 0.5em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 30px;
    color: #fff;
    line-height: 1;
    text-align: center;
    border-radius: 50%;
    background: var(--color03);
    position: relative;
}

.balloon2:before {
    content: "";
    margin-left: -15px;
    border: 15px solid transparent;
    border-bottom: 15px solid var(--color03);
    position: absolute;
    bottom: 0;
    left: 80%;
    z-index: 0;
}

.faq-item+.faq-item {
    margin-top: 30px;
}

.sec-5 .more-btn-b {
    margin: 60px auto 0 auto;
}

@media(max-width:599px) {
    .faq-a-txt {
        width: calc(100% - 60px);
        margin-top: 0;
        font-size: 16px;
    }
    .faq-q-txt {
        font-size: 16px;
    }
    .balloon2 {
        margin-left: 0;
    }
    .balloon1,
    .balloon2 {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .balloon1:before,
    .balloon2:before {
        margin-left: -12px;
    }
}

.sec-6 .more-btn-b {
    margin: 60px auto 0 auto;
}

.sec-7 {
    border-top: 2px solid var(--color03);
    background-color: #eee;
    position: relative;
    z-index: 2;
}

.banner-2-bg {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    position: relative;
}

.big-grids-3 {
    position: absolute;
    top: -35px;
    left: -65px;
}

.banner-2 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 100px 20px;
    position: relative;
    z-index: 1;
}

.banner-2-title {
    display: inline-block;
    font-size: 22px;
    color: #333;
    line-height: 1.4;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white;
}

.banner-2-txt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 40px;
}

.banner-2-txt .btn-web {
    width: 160px;
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.4;
    z-index: 1;
}

.banner-2-txt .btn-web a {
    padding: 0.5em;
}

.banner-2-txt .btn-web .web {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background-color: #987a00;
}

.banner-2-tel {
    width: fit-content;
    vertical-align: middle;
    font-weight: bold;
    font-size: 40px;
    color: var(--color01);
    position: relative;
    z-index: 1;
}

.contact.banner-2-tel {
    margin-left: 2em;
    margin-right: 1em;
}

.banner-2-tel a {
    width: fit-content;
    height: 100%;
    display: inline-block;
    line-height: 1.2;
    border-bottom: 1px solid;
}


.banner-2-tel a::before {
    content: "";
    width: 38px;
    height: 38px;
    display: inline-block;
    vertical-align: bottom;
    margin-right: 20px;
    padding: 5px;
    background-image: url('/import/tenant_1/162.43.32.223/html/images/tel-w.webp');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--color01);
}

.banner-2-base {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.banner-2-pic {
    width: 400px;
    opacity: 0.5;
    position: absolute;
    top: 0;
    right: 0;
}

.banner-2-pic img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
}

@media(max-width:1024px) {
    .banner-2 {
        padding: 30px;
    }
    .banner-2-title {
        font-size: 20px;
    }
    .big-grids-3 {
        opacity: 0.2;
    }
}

@media(max-width:599px) {
    .banner-2 {
        padding: 20px;
    }
    .banner-2-txt {
        margin-top: 20px;
    }
    .banner-2-txt .btn-web {
        width: 100%;
        margin-top: 10px;
    }
    .banner-2-txt .btn-web .web {
        width: 100%;
        border-radius: 0px;
    }
    .banner-2-title {
        font-size: 14px;
    }
    .banner-2-tel {
        width: 100%;
        margin-left: 0;
        font-weight: bold;
        font-size: 24px;
        color: var(--color01);
        position: relative;
        z-index: 1;
    }
    .banner-2-tel a::before {
        content: "";
        width: 38px;
        height: 38px;
        display: inline-block;
        vertical-align: middle;
        padding: 5px;
        background-image: url('/import/tenant_1/162.43.32.223/html/images/tel-w.webp');
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: center;
        background-color: var(--color01);
    }
    .contact.banner-2-tel {
        margin-left: 0;
    }
}

.banner-2.inversion .banner-2-pic{
  left: 0;
  right: initial;
      transform: scale(-1, 1);
      position: relative;
}

.banner-2.inversion .banner-2-pic:after{
  content:"";
  width: 90px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
}

.banner-2.inversion .big-grids-3{
      right: -65px;
    left: initial;
    transform: scale(-1, 1);
}

.onmap-title {
    font-family: "Noto Serif JP", serif;
    font-weight: bold;
    font-size: 24px;
    color: var(--color02);
}

.onmap-flex {
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
}

.onmap-flex .shell {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
}
.onmap-flex .shell .img {
    background: #000;
}
.onmap-flex .shell .img img {
    opacity: 0.8;
}

.onmap-flex .shell-logo {
    max-width: 200px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}


.onmap-flex .shell dl {
    margin: 10px 0;
    font-weight: 500;
    color: #333;
}

.onmap-flex .shell dl dt {
    margin-left: 20px;
    position: relative;
}

.onmap-flex .shell dl dt:before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: #333;
    position: absolute;
    top: 3px;
    left: -20px;
}

.onmap-btns {
    margin-top: 40px;
}

.onmap-btns .more-btn {
    width: 100%;
    height: 80px;
}

iframe {
    width: 100%;
    height: 100%;
}

.map-index {
    width: 100%;
    height: 350px;
}

@media(max-width:599px) {
    .onmap-flex {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .onmap-flex .shell {
        width: 80%;
        margin: 10px 0;
    }
    .onmap-btns .more-btn {
        margin-left: auto;
        margin-right: auto;
    }
}

.ml-auto {
    margin-left: auto;
    margin-right: auto;
}

.b-3 {
    border: var(--color03) 1px solid;
    border-radius: 10px;
        overflow: hidden;
}

.f-nav {
    padding-top: 60px;
    color: #fff;
    background-color: var(--color02);
}

.footer-nav ul li {
    margin-top: 7px;
    margin-bottom: 7px;
}

.big-li {
    padding-left: 23px;
    position: relative;
}

.big-li:before {
    content: "";
    width: 1em;
    height: 1em;
    background-color: #fff;
    position: absolute;
    top: 5px;
    left: 0px;
}

.mini-li {
    margin-left: 20px;
}

.mini-li::before {
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-bottom: 3px;
    margin-right: 5px;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;
}

.copy {
    height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 60px;
    font-size: 13px;
    background-color: var(--color01);
}

@media(max-width:1024px) {
    .copy {
        height: auto;
    }
    .copy span {
        padding-top: 20px;
        padding-bottom: 80px;
    }
}

@media(max-width:599px) {
    .copy span {
        padding-top: 20px;
        padding-bottom: 180px;
    }
}

.first-view {
    position: relative;
    z-index: 2;
}

.first-view-cont {
    width: 40%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.first-view-cont-inner {
    height: 100%;
    position: relative;
}

.first-view-cont-inner::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: rgb(255, 255, 255);
    background: -webkit-gradient(linear, left top, right top, color-stop(-2%, rgba(255, 255, 255, 1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0)));
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) -2%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    z-index: 0;
}

.first-view-cont-box {
      position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 1;
    width: 100%;
}

.first-view-cont-box>* {
    color: white;
}

.first-view .ja {
    margin-bottom: 30px;
    font-family: "Noto Serif JP", serif;
    font-weight: bold !important;
    font-size: 32px;
    color: #333;
    letter-spacing: 10px;
    text-shadow: 4px 4px 6px #fff, -4px 4px 6px #fff, 4px -4px 6px #fff, -4px -4px 6px #fff, 4px 0px 6px #fff, 0px 4px 6px #fff, -4px 0px 6px #fff, 0px -4px 6px #fff;
}

.first-view .en {
    font-family: "Noto Serif JP", serif;
    font-weight: bold !important;
    font-size: 16px;
    color: #333;
    letter-spacing: 4px;
    text-shadow: 4px 4px 6px #fff, -4px 4px 6px #fff, 4px -4px 6px #fff, -4px -4px 6px #fff, 4px 0px 6px #fff, 0px 4px 6px #fff, -4px 0px 6px #fff, 0px -4px 6px #fff;
}

.first-view-cont-box .text {
    font-weight: bold;
    letter-spacing: 5px;
}

.first-view-cont-bgimg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    background-color: var(--color03);
    position: absolute;
    top: 0;
    left: 0;
}

.first-view-cont-bgimg img {
    width: 100%;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center right;
    object-position: center right;
    opacity: 0.5;
}

.first-view.lower .first-view-img {
    width: 60%;
    height: 100%;
    display: block;
    margin-left: auto;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
}
/* [data-element-id].first-view.lower .first-view-img {
    z-index: 10;
} */

.first-view.lower .first-view-img img {
    width: 100%;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.first-view.lower .first-view-img::after {
    content: "";
    display: block;
    padding-top: 50%;
}

.first-view.lower .first-view-cont-title {
    font-weight: 500;
    letter-spacing: 4px;
}

.first-view.lower .first-view-cont-title span {
    display: block;
}

.first-view.lower .first-view-cont-title .en {
    font-size: 50%;
}

@media (max-width: 1024px) {
    .first-view-cont-box {
        padding: 20px;
        width: 90%;
    }
    #main>section.first-view.lower>div.first-view-cont>div>div.first-view-cont-box>div>h2 .ja {
        margin-bottom: 15px !important;
        font-size: 24px;
        letter-spacing: 5px;
    }
    .first-view.lower .first-view-img::after {
        padding-top: 40%;
    }
    .lower {
        height: 300px;
        margin-top: 0;
    }
    .first-view-cont{
      width: 100%;
    }
    .first-view-cont-bgimg{
      width: 40%;
    }
}

@media (max-width: 599px) {
    .first-view-cont-box {
        padding: 20px 10px;
    }
    #main>section.first-view.lower>div.first-view-cont>div>div.first-view-cont-box>div>h2 .ja {
        margin-bottom: 12px;
        font-size: 22px;
        letter-spacing: 3px;
    }
    .first-view.lower .first-view-img::after {
        padding-top: 55%;
    }
    .first-view .ja{
      font-size: 22px;
    }
}

.gr-txt {
    color: #333;
    line-height: 3;
    text-shadow: 4px 4px 6px #fff, -4px 4px 6px #fff, 4px -4px 6px #fff, -4px -4px 6px #fff, 4px 0px 6px #fff, 0px 4px 6px #fff, -4px 0px 6px #fff, 0px -4px 6px #fff;
}

.feature-cont {
    padding: 40px 20px 40px 180px;
    border: 4px solid var(--color02);
    border-radius: 20px;
    position: relative;
}

.feature-label {
    width: 120px;
    height: 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: bold;
    font-size: 28px;
    line-height: 1.2;
    border-radius: 50%;
    background: #fad31b;
    position: absolute;
    top: -30px;
    left: 30px;
}

.feature-txt {
    line-height: 2;
}

@media (max-width: 599px) {
    .feature-label {
        width: 100px;
        height: 100px;
        font-size: 24px;
    }
    .feature-cont {
        padding: 40px 20px;
    }
}

.sub-title {
    color: #333;
    line-height: 3;
    text-shadow: 4px 4px 6px #fff, -4px 4px 6px #fff, 4px -4px 6px #fff, -4px -4px 6px #fff, 4px 0px 6px #fff, 0px 4px 6px #fff, -4px 0px 6px #fff, 0px -4px 6px #fff;
}

.sec-2-2 {
    position: relative;
    z-index: 2;
}

.card-d {
    background-image: url('/import/tenant_1/162.43.32.223/html/images/card-a-bg.webp');
    background-size: cover;
    background-position: center;
    position: relative;
}

.card-d-title {
    margin-left: 80px;
    padding: 30px 0;
    font-weight: bold;
    font-size: 22px;
    color: var(--color02);
    text-align: left;
}

.card-d-main {
    width: 90%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
}

.card-d-txt {
    width: 75%;
    margin-left: 20px;
    padding: 10px;
    font-size: 16px;
    line-height: 1.6;
}

.card-d-pic {
    width: 25%;
}

.cube-3 {
    width: 70px;
    height: 70px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: white;
    position: absolute!important;
    top: -10px;
    left: -10px;
}

.cube-3 .small {
    margin-bottom: -5px;
    font-size: 13px;
}

.cube-3 .number1 {
    height: 1em;
    font-weight: bold;
    font-size: 25px;
}

.title-1 h3.lil {
    font-size: 25px;
}

.sub-mv {
    height: 300px;
}

.sub-mv img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

.card-d-pic-2 {
    width: 25%;
}

.flow li::after {
    content: "";
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    border: 7px solid;
    border-color: transparent transparent var(--color02) var(--color02);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.flow li:last-child::after {
    display: none;
}

.card-b-title-2 {
    height: 150px;
}

.card-b-txt {
    margin-top: 20px;
    color: #333;
    line-height: 1.6;
}

@media(max-width:1024px) {
    .b-2 .card-b-pic {
        width: 30%;
        float: left;
    }
    .card-b-txt {
        width: 65%;
        float: right;
        margin-top: 0;
    }
}

@media(max-width:599px) {
    .b-2 .card-b-pic {
        width: 100%;
        float: none;
    }
    .card-b-txt {
        width: 100%;
        float: none;
        margin-top: 20px;
    }
    .card-d-main {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .card-d-pic {
        width: 70%;
    }
    .card-d-txt {
        width: 100%;
        margin-left: 0;
    }
    .card-d-title {
        font-size: 18px;
    }
}

.mat-title {
    font-weight: bold;
    font-size: 24px;
    color: var(--color02);
}

.mat-pic {
    width: 30%;
}

.mat-flex {
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
}

.mat-flex .shell {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.gt-txt {
    margin-top: 20px;
    color: #333;
    line-height: 1.6;
    text-shadow: 4px 4px 6px #fff, -4px 4px 6px #fff, 4px -4px 6px #fff, -4px -4px 6px #fff, 4px 0px 6px #fff, 0px 4px 6px #fff, -4px 0px 6px #fff, 0px -4px 6px #fff;
}

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

.title-2 h4 {
    font-weight: bold;
    font-size: 20px;
    color: var(--color02);
    text-align: center;
    text-shadow: 4px 4px 6px #fff, -4px 4px 6px #fff, 4px -4px 6px #fff, -4px -4px 6px #fff, 4px 0px 6px #fff, 0px 4px 6px #fff, -4px 0px 6px #fff, 0px -4px 6px #fff;
    position: relative;
}

.title-2 h4::before {
    content: "";
    width: 50%;
    height: 3px;
    display: inline-block;
    background-color: var(--color01);
    position: absolute;
    bottom: -3px;
    right: 50%;
}

.title-2 h4::after {
    content: "";
    width: 50%;
    height: 3px;
    display: inline-block;
    background-color: var(--color03);
    position: absolute;
    bottom: -3px;
    left: 50%;
}

.icon2 {
    display: none;
}

.breadcrumbs {
    margin-left: 20px;
    padding: 10px 0;
}

.breadcrumbs-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.breadcrumbs-list li {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    color: var(--color02);
}

.breadcrumbs-list li:last-child {
    color: #333;
}

.breadcrumbs-list li+li::before {
    content: "\f105";
    display: inline-block;
    margin: 0 10px;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    font-size: inherit;
    line-height: 100%;
}

@media(max-width:1024px) {
    .mat-flex {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-bottom: 30px;
    }
    .mat-flex .shell {
        width: 90%;
    }
    .mat-flex .shell:first-child {
        margin-bottom: 30px;
    }
}

.icon2 {
    width: 25px;
    height: 25px;
    margin-bottom: 5px;
    margin-right: 10px;
}

.icon2 .icon-a {
    width: 20px;
    height: 15px;
    margin: 0 auto;
    border-radius: 50% 50% 0 0;
    background-color: var(--color02);
}

.icon2 .icon-b {
    width: 20px;
    height: 10px;
    margin: 0 auto;
    background-color: var(--color02);
}

.icon2 .icon-c {
    width: 25px;
    height: 5px;
    margin: 0 auto;
    background-color: var(--color02);
}

.gaiyou {
    width: auto;
    width: calc(90% - 40px);
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    border-spacing: 0;
    position: relative;
    z-index: 2;
}

.gaiyou th {
    width: 30%;
    padding: 8px 15px;
    font-weight: bold;
    color: #fff;
    line-height: 120%;
    text-align: center;
    border-top: 1px solid var(--color03);
    border-bottom: 1px solid var(--color03);
    border-left: 1px solid var(--color02);
    background: var(--color02);
}

.gaiyou th:last-child {
    border-right: 1px solid var(--color02);
    border-radius: 0 5px 0 0;
    -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(255, 255, 255, 0.3) inset;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(255, 255, 255, 0.3) inset;
}

.gaiyou tr td {
    padding: 8px 15px;
    text-align: center;
    border-top: 1px solid var(--color03);
    border-bottom: 1px solid var(--color03);
    border-left: 1px solid var(--color03);
}

.gaiyou tr td:last-child {
    border-right: 1px solid var(--color03);
    -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
}

.gaiyou tr {
    background: #fff;
}

.gaiyou tr:nth-child(2n+1) {
    background: #f1f6fc;
}

.gaiyou tr:last-child td {
    -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
}

.gaiyou tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
}

.gaiyou tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
}

.gaiyou-link a {
    width: 100%;
    display: block;
    text-decoration: underline;

    text-decoration-color: var(--color02);
}
@media (max-width: 599px) {
    .gaiyou tr {
        display: flex;
        flex-wrap: wrap;
    }
    .gaiyou th {
        width: 100%;
    }
    .gaiyou tr td {
        width: 100%;
    }
}

.map-cont {
    width: calc(90% - 40px);
    margin-left: auto;
    margin-right: auto;
    ;
}

.area-list {
    width: 70%;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

.complete .area-list {
    width: 100%;
    line-height: 2;
    text-shadow: 4px 4px 6px #fff, -4px 4px 6px #fff, 4px -4px 6px #fff, -4px -4px 6px #fff, 4px 0px 6px #fff, 0px 4px 6px #fff, -4px 0px 6px #fff, 0px -4px 6px #fff;
}

.area-list li {
    padding: 20px 0;
    padding-left: 1.5em;
    font-weight: bold;
    font-size: 18px;
    color: #333;
    position: relative;
}

.area-list li::before {
    content: "\f058";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    color: var(--color03);
        position: absolute;
    left: 0;
}

@media (max-width: 599px) {
    .area-list.new {
        width: 100%;
    }
}

.area-list2 {
    width: 100%;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
}

.area-list2 li {
    margin: 20px 0;
    padding-left: 25px;
    font-weight: bold;
    font-size: 18px;
    color: #333;
    position: relative;
}

.area-list2 li::before {
    content: "\f058";
    margin-right: 5px;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    color: var(--color03);
    position: absolute;
    top: 0;
    left: 0;
}

.for-thin .title-2 {
    width: calc(90% - 40px);
    margin-left: auto;
    margin-right: auto;
}

.z-1 {
    position: relative;
    z-index: 1;
}

.t-name1 {
    margin-left: 10px;
    padding: 30px 15px;
    color: var(--color02);
}

.t-name2 {
    margin-left: 10px;
    padding-bottom: 10px;
    font-size: 13px;
}

.temple-cards .card-b {
    border: 1px solid var(--color03);
}

.gallery {
    margin: 0 0 5px 0;
}


/*矢印の設定*/


/*戻る、次へ矢印の位置*/

.slick-prev,
.slick-next {
    width: 25px;

/*矢印の色*/
    height: 25px;

/*マウスカーソルを指マークに*/
    outline: none;

/*クリックをしたら出てくる枠線を消す*/
    border-top: 5px solid var(--color02);

/*矢印の色*/
    border-right: 5px solid var(--color02);
    cursor: pointer;
    position: absolute;
    top: 42%;

/*絶対配置にする*/
    z-index: 3;
}

.slick-prev {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);

/*戻る矢印の位置と形状*/
    left: -2.5%;
}

.slick-next {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);

/*次へ矢印の位置と形状*/
    right: -2.5%;
}

@media(max-width:1024px) {
    .slick-prev {
        /*戻る矢印の位置と形状*/
        left: 20px;
    }
    .slick-next {
        /*次へ矢印の位置と形状*/
        right: 20px;
    }
}


/*選択するサムネイル画像の設定*/

.choice-btn li {
    outline: none;
    background: #333;
    cursor: pointer;
}

.choice-btn li img {
    height: 150px;
    object-fit: cover;
    opacity: 0.4;
    /*選択されていないものは透過40%*/
}

.choice-btn li.slick-current img {
    opacity: 1;
    /*選択されているものは透過しない*/
}

.category li {
    padding-left: 15px;
    position: relative;
}

.category li+li {
    border-left: 3px solid var(--color02);
}

.flexed-d {
    margin-top: 90px;
}

.flexed-d .card-c-pic {
    width: 30%;
}

.flexed-d .card-c-txt {
    width: 70%;
    padding-left: 30px;
}

.card-c.altlist.up-d-flex.flexed-d>div.card-c-txt>div.back-btn-b.up-mt-60 {
    margin-left: auto;
    margin-right: auto;
}

@media(max-width:599px) {
    .flexed-d {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 30px;
    }
    .flexed-d .card-c-pic {
        width: 70%;
        margin-bottom: 40px;
        margin-left: auto;
        margin-right: auto;
    }
    .flexed-d .card-c-txt {
        width: 100%;
        padding-left: 0;
    }
}

.cs-flex {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.cs-1 {
    width: 70%;
    margin-right: 30px;
}

.cs-2 {
    width: 27%;
}

.cs-list,
.side-lists {
    padding: 30px;
    background-color: #fff;
}

.cs-list li {
    padding: 30px 0 20px 0;
    border-bottom: 2px solid var(--color03);
}

.cs-date {
    font-size: 14px;
    color: #666;
}

.cs-category {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 3px 10px;
    font-size: 14px;
    color: white;
    background-color: var(--color02);
}

.cs-title {
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    color: #333;
}

.cat-list-title,
.arc-list-title {
    margin-bottom: 10px;
    padding: 3px 10px;
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    color: white;
    text-align: center;
    border-radius: 20px;
    background-color: var(--color01);
}

.cat-list {
    margin-bottom: 30px;
}

.cat-list ul li,
.arc-list ul li {
    margin-left: 20px;
    padding: 10px 0;
    color: #333;
    position: relative;
}

.cat-list ul li::before,
.arc-list ul li::before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: 20px;
    color: var(--color02);
    line-height: 1;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: -20px;
}

.cs-list-2 li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex !important;
    text-align: center;
}

.cs-pic {
    width: 25%;
}

.cs-box {
    width: 75%;
    margin-left: 15px;
}

.cs-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.cs-box .cs-title {
    margin-top: 20px;
    text-align: left;
}

.cs-main {
    margin-top: 30px;
    font-family: "Noto Serif JP", serif;
    color: #333;
}

#main>section.sec-3.sec.up-pt-60.up-pb-60>div>div>div.cs-1>div>div.back-btn-b {
    margin: 60px auto 0 auto;
}

@media(max-width:599px) {
    .cs-flex {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .cs-1 {
        width: 100%;
        margin-right: 0;
    }
    .cs-2 {
        width: 100%;
        margin-top: 60px;
    }
    .cs-pic,
    .cs-box {
        width: 100%;
    }
    .cs-box {
        margin-top: 10px;
        margin-left: 0;
    }
    .cs-list-2 li a {
        flex-wrap: wrap;
    }
    .cs-list {
        padding: 30px 0;
    }
}

.formarea {
    margin-top: 100px;
}

.formarea dl {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 5px dotted #ccc;
}

.formarea dl dt {
    /*各項目*/
    width: 20%;
}

.formarea dl dd {
    width: 75%;
}

.formarea dl input,
.formarea dl textarea {
    width: 100%;
    padding: 0.5em 0.5em;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    border: solid 1px #ccc;
    border-radius: 5px;
    background-color: #fff;
}

.formarea dl:not(.optional) dt::after {
    /*必須項目の箱に必須マーク*/
    content: "*";
    display: inline-block;
    padding: 2px 3px;
    font-size: 13px;
    color: red;
}

.formarea dl .op2 {
    padding-left: 25px;
    position: relative;
}

.formarea dl .op2 input {
    width: 50%;
}

.formarea dl .op2::before {
    content: "〒";
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    color: #001f3e;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 0px;
}

.formarea dl ul li {
    position: relative;
}

.formarea dl ul li::before {
    /*必須項目の箱に必須マーク*/
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;
    border: 1px solid #001f3e;
    background-color: white;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: -10px;
}

.formarea dd.radiobtn label {
    display: inline-block;
    margin: 0.5em 0;
    padding: 0 10px 0 30px;
    position: relative;
}

.formarea dd.radiobtn label::before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    border: 2px solid #dcdcdc;
    border-radius: 3px;
    background-color: white;
    position: absolute;
    top: 0.2em;
    left: 0;
}

.formarea dd.radiobtn label:hover {
    text-decoration: underline;
    cursor: pointer;
}

.formarea dd.radiobtn input {
    display: none;
}

.formarea dd.radiobtn input:checked+label {
    text-decoration: underline;
}

.formarea dd.radiobtn input:checked+label::after {
    content: "\f00c";
    width: 0;
    height: 0;
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 24px;
    line-height: 1;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 2px;
}

.formarea dd.radiobtn input+label {
    margin-right: 15px;
}

@media (max-width: 599px) {
    .formarea dd.radiobtn {
        padding: 0.5em 0;
    }
    .formarea dl dt {
        width: 100%;
        margin-bottom: 10px;
    }
    .formarea dl dd {
        width: 100%;
    }
}



@media(max-width:599px) {
    .formarea dl {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        align-items: flex-start;
        -ms-flex-align: start;
    }
}

.pager ul li {
    font-size: 18px;
    color: #001f3e;
}

.pager ul li .now {
    padding: 0 7px;
    color: white;
    background-color: var(--color02);
}

[data-element-id].js-contp .inner .cards-c.up-col-3>* {
    width: auto;
    display: flex;
}

[data-element-id].data-el .cards-a.up-col-3>* {
    width: auto;
    display: flex;
    flex-wrap: wrap;
}

[data-element-id].data-el .cards-c.up-col-3>* {
    width: auto;
    display: flex;
    flex-wrap: wrap;
}

[data-element-id].data-el .cards-a.up-col-3>* {
    width: auto;
    display: flex;
    flex-wrap: wrap;
}

[data-element-id].nav .pc-none {
    display: block!important;
}

[data-element-id].header-inner2 {
    width: 100%;
}

[data-element-id].nav {
    width: 100%;
    max-width: 95vw;
    flex-wrap: wrap;
    align-items: flex-start;
}

[data-element-id].sec-2-1 {
    position: relative;
}

[data-element-id].nav li .drop-lists {
    display: block;
    border: solid 2px #f48100;
    position: relative;
}

[data-element-id].nav li .drop-lists:after {
    content: "当社について";
    display: block;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 black;
    background: #f48100;
}

[data-element-id].nav li .drop-lists.num01:after {
    content: "事業内容・料金";
}

[data-element-id].h1 {
    position: relative;
}

[data-element-id]#header {
    position: relative;
}

[data-element-id].sim-detail-title {
    position: relative;
}

[data-element-id].sim {
    padding-bottom: 2700px;
}

[data-element-id].simmer.up-d-none {
    width: 98vw;
    max-width: 98vw;
    display: flex;
    border: 5px solid red;
    position: absolute;
    bottom: 40px;
    left: 0;
}

[data-element-id].simmer.up-d-none .sim-img-list ul li {
    margin: 40px;
    border: 5px solid red;
    position: relative;
}

[data-element-id].simmer.up-d-none .sim-img-list ul li::after {
    content: "シミュレーション結果";
    font-size: 18px;
    color: yellow;
    background-color: red;
    position: absolute;
    top: -1em;
    left: 0;
}
[data-element-id].nav-add {
    color: #fff;
}

.gallery.slick-initialized.slick-slider {
    height: 400px;
}

#main>section.sec-4.sec>div>ul.gallery.slick-initialized.slick-slider>div.slick-list.draggable>div>li img {
    width: 100%;
    height: 400px;
    object-fit: contain;
    object-position: center;
}

#main>section.sec-4.sec>div>ul.choice-btn.slick-initialized.slick-slider>div.slick-list.draggable>div>li.slick-slide>img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}

button:hover {
    opacity: 1;
}

button {
    border: none;
}

#splash {
    width: 100%;
    height: 100%;
    font-weight: bold;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background: var(--color01);
    position: fixed;
    z-index: 9999999;
    /* text-shadow: 4px 4px 6px #ffffff, -4px 4px 6px #ffffff, 4px -4px 6px #ffffff, -4px -4px 6px #ffffff, 4px 0px 6px #ffffff, 0px 4px 6px #ffffff, -4px 0px 6px #ffffff, 0px -4px 6px #ffffff; */
}

#splash-logo {
    font-family: "Noto Serif JP", serif!important;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
}

[data-element-id]#splash {
    height: auto;
    display: block;
    padding: 50px;
    position: relative;
}

[data-element-id] #splash-logo {
    border: solid 1px #000;
    transform: none;
    position: relative;
    top: initial;
    left: initial;
}

[data-element-id] #splash-logo:before {
    content: "ローディング画面";
    display: block;
    font-size: 12px;
    color: #fff;
    background: #000;
    position: relative;
    z-index: 2;
}

.appear #splash {
    visibility: hidden;
    opacity: 0;
}


/* ========= 画面遷移のためのCSS ===============

画面遷移アニメーション */

.splashbg {
    display: none;
}


/* bodyにappearクラスがついたら出現 */

body.appear .splashbg {
    content: "";
    width: 100%;
    height: 100vh;
    display: block;
    background-color: var(--color01);
    transform: scaleY(0);

/* 伸びる背景色の設定 */
    animation-name: PageAnime;
    animation-duration: 0.9s;
    animation-timing-function: ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    animation-fill-mode: forwards;
}

@keyframes PageAnime {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }
    50% {
        transform: scaleY(1);
        transform-origin: top;
    }
    50.001% {
        transform-origin: bottom;
    }
    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}


/* 画面遷移の後現れるコンテンツ設定 */

.wrapper {
    opacity: 0;
}


/* bodyにappearクラスがついたら出現 */

body.appear .wrapper {
    opacity: 0;
    animation-name: PageAnimeAppear;
    animation-duration: 1s;
    animation-delay: 0.8s;

    animation-fill-mode: forwards;
}

@keyframes PageAnimeAppear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media(max-width:599px) {
    .sml .card-b .title-2 h4 {
        font-size: 16px;
    }
    .card-d-pic-2 {
        width: 95%;
    }
}


.output1 {
    margin-bottom: 10px;
    font-size: 10px;
    color: #333;
}

@media(max-width:1024px) {
    .nav .nav-add {
        width: 100%;
        max-width: 225px;
        margin: 15px 30px;
        margin-left: 30px!important;
        padding: 10px 15px;
        color: var(--color02);
        border-radius: 12px;
        background: var(--color03);
    }
    .nav .nav-add span {
        padding-left: 15px;
        position: relative;
    }
    .nav .nav-add span:before {
        content: "";
        width: 0.5em;
        height: 0.5em;
        background-color: var(--color02);
        transform: translate(0%,-50%);
        position: absolute;
        top: 50%;
        left: 0;
    }
}
[data-element-id] .nav-add {
    border: solid 1px #000;
}

[data-element-id] .nav-add:before {
    content: "ハンバーガーメニュー内の住所";
    display: block;
    font-size: 12px;
    color: #fff;
    background: #000;
    position: relative;
    z-index: 2;
}

[data-element-id] .up-d-none {
    display: block;
    border: solid 1px #555;
    position: relative;
}

[data-element-id] .up-d-none:after {
    content: "モバイル用";
    width: 100%;
    display: block;
    padding: 5px;
    font-weight: bold;
    font-size: 12px;
    color: red;
    background: #555;
}

[data-element-id] [data-ab-test-conversion-button]::after {
    content: "CV";
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 24px;
    display: inline-block;
    font-size: 12px;
    color: #000;
    line-height: 1;
    text-align: center;
    background-color: #ff0;
}

[data-ab-test-block] [data-ab-test-contents]+[data-ab-test-contents] {
    display: none;
}

[data-element-id][data-ab-test-contents] {
    padding: 1.5em 0.2em 0.2em;
    outline: 2px solid #8b008b;
    position: relative;
}

[data-element-id][data-ab-test-contents]::before {
    content: "Aパターン";
    width: 100%;
    display: block;
    padding: 0.5em 0.2em;
    font-size: 10px;
    color: #fff;
    line-height: 1.2;
    text-align: center;
    background-color: #8b008b;
    position: absolute;
    top: 0;
    left: 0;
}

[data-ab-test-contents]+[data-ab-test-contents] {
    outline: 2px solid #556b2f;
}

[data-ab-test-contents]+[data-ab-test-contents]::before {
    content: "Bパターン";
    background-color: #556b2f;
}

[data-collection-list-content] {
    padding-top: 1em;
    position: relative;
}

[data-collection-list-content]::after {
    content: "カスタムコンテンツ（編集不可）　" attr(data-list_number) "件表示　" attr(data-sort_column) "の" attr(data-sort);
    width: 100%;
    display: block;
    clear: both;
    padding: 5px;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    text-align: left;
    background: navy;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

[data-collection-list-filtering] {
    padding-top: 1em;
    position: relative;
}

[data-collection-list-filtering]::before {
    content: "「" attr(data-value1) attr(data-condition1) "」のフィルタリングがされています";
    width: 100%;
    display: block;
    clear: both;
    padding: 5px;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    text-align: left;
    background: navy;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-element-id] a[data-href="#"] {
    outline: solid red 5px!important;
    opacity: 1;
}

[data-element-id] a[data-href="#"]:hover::before {
    content: "未設定リンク";
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 90px;
    padding: 5px;
    font-weight: 700;
    font-size: 12px;
    color: red;
    background: #9e9e9e;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute!important;
    bottom: 100%;
    left: 0;
}

[data-element-id] a[data-href*="."] {
    outline: solid #ff7c4d 5px!important;
    opacity: 1;
}

[data-element-id] a[data-href*="."]:hover::before {
    content: "外部リンク";
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 90px;
    padding: 5px;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    background: #ff7c4d;
    position: absolute!important;
    bottom: 100%;
    left: 0;
}

[data-element-id] .wrapper {
    opacity: 1;
}

[data-element-id] [data-uk-slideshow]:hover::before {
    content: "スライドショーです。ダブルクリックで画像変更ができます";
    width: 100%;
    min-width: 200px;
    max-width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 14px;
    color: #fff;
    line-height: 1.2;
    text-align: center;
    background-color: #00f;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-element-id] .uk-slideshow>li {
    opacity: 1;
}

[data-element-id] .imgalt {
    clear: both;
    outline: 5px solid #000;
    position: relative;
}

[data-element-id] .imgalt::before {
    content: "バリデーションjsコメントアウト";
    width: 100%;
    min-width: 200px;
    max-width: 100%;
    display: block;
    padding: 0.5em;
    font-size: 10px;
    color: red;
    line-height: 1.2;
    text-align: center;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

[data-hide-element] {
    padding-top: 1em;
    position: relative!important;
}

[data-hide-element]::before {
    content: "非表示"!important;
    font-size: 10px!important;
    line-height: inherit!important;
    -webkit-transform: unset!important;
    transform: unset!important;
}

[data-hide-element]>* {
    width: 100%!important;
}

[data-recommend-collection-list-content]::after {
    content: "「" attr(data-recommend-type) "」のレコメンドです。記事数は" attr(data-recommend-number) "件です。";
    width: 100%;
    display: block;
    clear: both;
    padding: 5px;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    text-align: left;
    background: indigo;
    z-index: 1;
}

mark.filtering-link-text {
    display: none;
    visibility: hidden;
    opacity: 0;
    z-index: -999;
}

[data-category-search-content]+mark.filtering-link-text {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: auto;
    display: block;
    visibility: visible;
    margin: 0.5em;
    padding: 0.5em 1em;
    font-size: 10px;
    color: #fff;
    line-height: 1;
    text-align: center;
    background-color: #db7093;
    opacity: 1;
    z-index: 1;
}

.text-01 {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: inherit;

    -webkit-line-clamp: 1;
}

.text-02 {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: inherit;

    -webkit-line-clamp: 2;
}

.detail-content-text h2 {
    margin-top: 50px;
    margin-bottom: 20px;
    padding: 0.5em;
    font-weight: bold;
    font-size: 22px;
    letter-spacing: 2px;
    border-bottom: 3px solid  var(--color02);
}

.detail-content-text h3 {
    margin-top: 50px;
    margin-bottom: 20px;
    padding: 0.5em 1em;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    letter-spacing: 2px;
    background: var(--color02);
}

.detail-content-text h4 {
    margin-top: 50px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
    color: var(--color02);
    letter-spacing: 2px;
}
.detail-content-text ol {
    counter-reset: count 0;
}
.detail-content-text ol li {
    margin: 10px 0;
    padding: 0;
    padding-left: 20px;
    font-size: 16px;
    color: #000;
    border-bottom: none;
    position: relative;
}
.detail-content-text ol li::before {
    content: counter(count) ". ";
    display: inline-block;
    counter-increment: count 1;
    color: var(--color02);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 0;
}
.detail-content-text ul li {
    margin: 10px 0;
    padding: 0;
    padding-left: 20px;
    font-size: 16px;
    color: #000;
    border-bottom: none;
    position: relative;
}

.detail-content-text ul li::before {
    content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 50%;
    background: var(--color02);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: 0;
}
.detail-content-text ol li marker {
    display: none;
}

.detail-content-text iframe[src*="youtube"] {
    height: auto;
    margin-top: 30px;

    aspect-ratio: 16 / 9;
}

.layout-enclosure01 .box {
    height: 100%;
    padding: 40px 50px;
    border: 5px solid var(--color01);
    background: #f9fffa;
}

.layout-enclosure01 .list li {
    padding-left: 0.85em;
    font-size: 16px;
    text-indent: -0.85em;
}

.layout-enclosure01 .list li+li {
    margin-top: 10px;
}

.layout-enclosure01 .txtbox {
    margin-top: 20px;
    text-align: center;
}

.layout-enclosure01 .txtbox .txt {
    display: inline-block;
    font-size: 18px;
    line-height: 2;
    text-align: center;
    border-bottom: 2px solid var(--color01);
}

.ttl-cmn06 .ttl-main {
    padding: 5px 10px 5px 20px;
    font-size: 22px;
    letter-spacing: 3px;
    border-bottom: 2px solid var(--color01);
}

@media (max-width: 599px) {
    .layout-enclosure01 .box {
        padding: 20px 10px;
    }

    .layout-enclosure01 .list li {
        font-size: 14px;
    }

    .layout-enclosure01 .txtbox .txt {
        font-size: 16px;
        text-align: left;
    }
    .ttl-cmn06 .ttl-main {
        padding-left: 10px;
        font-size: 18px;
    }
}

.layout-list01 .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    align-items: flex-start;
    -ms-flex-align: start;
    padding: 30px 20px;
    border-top: 2px solid var(--color01);
}
.layout-list01 .item.up-d-none {
    display: none;
}

.layout-list01.new .item:first-child {
    border-top: none;
}

.layout-list01 .item:last-of-type {
    border-bottom: 2px solid var(--color01);
}

.layout-list01 .box a {
    display: block;
    padding: 30px;
    border: 2px solid var(--color06);
}

.layout-list01 dt {
    width: 200px;
    font-weight: bold;
    color: var(--color02);
    line-height: 1.8;
}

.layout-list01.new dt {
    width: 120px;
}

.layout-list01 dd {
    width: calc(100% - 200px);
    padding-left: 20px;
    line-height: 1.8;
}

.layout-list01.new dd {
    width: calc(100% - 120px);
}

.layout-list01 dl dd dl {
    padding: 10px 0;
    border-bottom: 2px solid var(--color01);
}

.layout-list01 dl dd dl:last-child {
    border-bottom: none;
}

@media (max-width: 599px) {
    .layout-list01 .item {
        padding: 10px 10px;
    }

    .layout-list01 dt,
    .layout-list01 dd {
        width: 100%;
    }

    .layout-list01 dd {
        font-size: 13px;
    }
    
.bg-w-t50{
      background: #fff;
    padding: 50px 0 0;
}
}

.d-none-tb,
.d-none-sp{
  display: block;
}
.d-b-tb,
.d-b-sp{
  display: none;
}
@media (max-width: 1024px) {
  .d-b-tb{
    display: block;
  }
  .d-none-tb{
    display: none;
  }
}
@media (max-width: 599px) {
.d-none-sp{
  display: none;
}
.d-b-sp{
  display: block;
}
}

.c-li li {
    margin-bottom: 5px;
    padding-left: 1.5em;
    line-height: 2;
    position: relative;
}

.c-li li:before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--color02);
    position: absolute;
    top: 8px;
    left: 0;
}

.top-tim span {
  -webkit-animation: bounse_top 2.2s ease 0s alternate infinite;
  animation: bounse_top 2.2s ease 0s alternate infinite;
  display: inline-block;
}

.top-tim span:nth-of-type(2) {
  -webkit-animation-delay: .05s;
  animation-delay: .05s
}

.top-tim span:nth-of-type(3) {
  -webkit-animation-delay: .15s;
  animation-delay: .15s
}

.top-tim span:nth-of-type(4) {
  -webkit-animation-delay: .2s;
  animation-delay: .2s
}

.top-tim span:nth-of-type(5) {
  -webkit-animation-delay: .25s;
  animation-delay: .25s
}

.top-tim span:nth-of-type(6) {
  -webkit-animation-delay: .3s;
  animation-delay: .3s
}

.top-tim span:nth-of-type(7) {
  -webkit-animation-delay: .35s;
  animation-delay: .35s
}

.top-tim span:nth-of-type(8) {
  -webkit-animation-delay: .4s;
  animation-delay: .4s
}

.top-tim span:nth-of-type(9) {
  -webkit-animation-delay: .45s;
  animation-delay: .45s
}


.top-tim span:nth-of-type(10) {
  -webkit-animation-delay: .5s;
  animation-delay: .5s
}


.top-tim span:nth-of-type(11) {
  -webkit-animation-delay: .55s;
  animation-delay: .55s
}


.top-tim span:nth-of-type(12) {
  -webkit-animation-delay: .6s;
  animation-delay: .6s
}


.top-tim span:nth-of-type(13) {
  -webkit-animation-delay: .65s;
  animation-delay: .65s
}
@-webkit-keyframes bounse_top {
    0% {
        transform: translate(0, 0)
    }

    10% {
        transform: translate(0, -4px)
    }

    20% {
        transform: translate(0, 0)
    }

    100% {
        transform: translate(0, 0)
    }
}

@keyframes bounse_top {
    0% {
        transform: translate(0, 0)
    }

    10% {
        transform: translate(0, -4px)
    }

    20% {
        transform: translate(0, 0)
    }

    100% {
        transform: translate(0, 0)
    }
}


[data-element-id] .mini-txt a {
    flex-wrap: wrap;
}

.con-img img {
    display: none;
}

[data-element-id] .sim-kinds {
    justify-content: space-between;
}

[data-element-id] .sim-kinds li {
    width: 43%;
    margin: 30px 10px;
}

[data-element-id] .up-sp-text {
max-width: 375px;
    width: 100%;
    margin: auto;
}

[data-element-id] .mv-texts .up-sp-text h2 {
    margin-bottom: 15px;
    font-size: 25px;
}

[data-element-id] .mv-texts .up-sp-text .sb-text {
    font-size: 20px;
}

[data-element-id] .up-sp-text .sec-1-title {
    margin-bottom: 35px;
    font-size: 20px;
}

[data-element-id] .title-1 .up-sp-text h3 {
    font-size: 20px;
}

[data-element-id] .up-sp-text .card-d-title {
    font-size: 18px;
        margin-left: 0;
}

[data-element-id] .first-view .up-sp-text .ja{
      font-size: 22px;
}
    
[data-element-id].title-2{
          flex-direction: column;
    align-items: flex-start;
}

[data-element-id].title-2 .up-d-none\@sp{
  margin: 0 auto;
}

[data-element-id] .title-2 h4{
  margin-right: auto;
  margin-left: auto;
}

[data-element-id] .more-btn,
[data-element-id] .back-btn,
[data-element-id] .more-btn-b,
[data-element-id] .back-btn-b{
    overflow: initial;
}

[data-element-id] .more-btn-b a::after,
[data-element-id] .more-btn-b .aa::after,
[data-element-id] .back-btn-b a::after,
[data-element-id] .back-btn-b .aa::after,
[data-element-id] .more-btn a::after,
[data-element-id] .back-btn a::after{
    content: none;
}

[data-element-id] .header-1{
      padding: 20px 0;
}

[data-element-id] .btn-tel .sb-text{
      margin-top: 0px;
}