@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

/* # root1 START # */
:root {
    --color01: #a68b62;
    --color02: #f5f2ec;
    --color03: #eee9db;
    --color04: #333;
    --color05: #a3a3a3;
    --color07: #797979;
    --color08: #ccbd9e;
    --color09: #fa0909;
    --color10: #999;
    --color11: #f4efe7;
    --color12: #7f7c75;
    --color13: #97948d;
    --color14: #c7c4bd;
    --color15: #707070;
    --color16: #aeaca8;
    --color17: #bfbfbf;
    --color18: #eae2cd;
}
/* # root1 END # */

/* # root2 START # */
/* :root {
    --color01: #e1989d;
    --color02: #eaeaea;
    --color03: #f1d3d3;
    --color04: #333;
    --color05: #a3a3a3;
    --color06: #e7abaf;
    --color07: #797979;
    --color08: #ccbd9e;
    --color09: #fa0909;
    --color10: #999;
    --color11: #eaeaea;
    --color12: #7f7c75;
    --color13: #e9c4c6;
    --color14: #c7c4bd;
    --color15: #707070;
    --color16: #aeaca8;
    --color17: #bfbfbf;
    --color18: #f1d3d3;
} */
/* # root2 END # */

/* # root3 START # */
/* :root {
    --color01: #3f885b;
    --color02: #ecf8f6;
    --color03: #cde3d6;
    --color04: #333;
    --color05: #a3a3a3;
    --color06: #518e68;
    --color07: #797979;
    --color08: #ccbd9e;
    --color09: #fa0909;
    --color10: #999;
    --color11: #ecf8f6;
    --color12: #7f7c75;
    --color13: #a3c7b1;
    --color14: #c7c4bd;
    --color15: #707070;
    --color16: #aeaca8;
    --color17: #bfbfbf;
    --color18: #cde3d6;
} */
/* # root3 END # */

/* ------------------------------
 wrapper
------------------------------ */

#wrapper {
    min-width: 320px;
    overflow: hidden;
    margin: 0 auto;
}

/* ------------------------------
 header
------------------------------ */

header {
    padding: 0 2%;
}

header .page-title {
    font-size: 10px;
    position: relative;
    z-index: 2;
}

.header {
    padding-left: 18.6vw;
    position: relative;
}

.header.fix {
    width: 100%;
    padding: 0 2%;
    background: rgba(255, 255, 255, 0.95);
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
}

.fix .header-left {
    position: static;
}

.header-left {
    position: absolute;
    top: 0;
    left: 0;
}

.header-right {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.hlogo a {
    max-width: 250px;
    width: 100%;
        padding: 1.4em 1.5em 1.4em 0;
    background-color: #fff;
    position: relative;
    z-index: 1;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.hlogo a .sblogo{
 font-family: 'Courgette', cursive;
    font-size: 20px;
    color: transparent;
    background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    -webkit-background-clip: text;
    line-height: 1.4;
}

.hlogo a:before {
    content: "";
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.hfix {
    padding: 0.5em 0;
    background-color: rgba(255, 255, 255, 0.95);
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10;
}

.hfixlist {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.hfixitem {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0 0.5em;
    text-align: center;
}

.hfixitem div {
    height: 100%;
}

.hfixitem .tel{
  height: auto;
}
.hfixitem .tel a{
  padding: 0;
}
.hfixitem a {
    width: 100%;
    height: 100%;
    display: block;
  
    font-size: 16px;
}

.h-webbtn a {
    color: #fff !important;
    background-color: var(--color01);
        display: flex;
    align-items: center;
    justify-content: center;
}

.abtest .abb .h-webbtn a {
    background-color: var(--color04);
}

@media (max-width: 1024px) {
    header .page-title {
        padding: 0.5em 50px 0.5em 0;
    }

    .hlogo a {
        max-width: 25vw;
        padding: 1.5em 1em 1.5em 0;
    }

    .hfix {
        width: 100%;
    }
}

@media (max-width: 599px) {
  .hfixitem .tel a{
        font-size: 14px;
  }
    .hlogo a {
        max-width: 35vw;
        padding: 1.5em 0.5em 1.5em 0;
    }
}

/* ------------------------------
 gnav
------------------------------ */

#gnav {
    width: 100%;
    z-index: 200;
}

#gnav.fix {
    background: rgba(255, 255, 255, 0.95);
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
}

#gnav .gtoggle {
    width: 50px;
    height: 50px;
    display: none;
    border-radius: 5px;
    background-color: var(--color03);
    -webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    position: fixed;
    top: 0.5em;
    right: 0.5em;
    z-index: 251;
}

#gnav.action .gtoggle:after {
    content: "CLOSE";
}

#gnav .gtoggle:after {
    content: "MENU";
    width: 100%;
    font-size: 10px;
    text-align: center;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    position: absolute;
    bottom: 10%;
    left: 50%;
}

#gnav .gtoggle span.n {
    width: 20px;
    height: 2px;
    display: block;
    margin-top: -1px;
    padding: 0;
    text-indent: 9999px;
    background: currentColor;
    position: absolute;
    top: 40%;
    left: 15px;
}

#gnav .gtoggle span.n:before {
    content: "";
    width: 20px;
    height: 2px;
    display: block;
    border-radius: 10px;
    background: currentColor;
    position: absolute;
    top: -6px;
    left: 0;
}

#gnav .gtoggle span.n:after {
    content: "";
    width: 20px;
    height: 2px;
    display: block;
    border-radius: 10px;
    background: currentColor;
    position: absolute;
    top: 6px;
    left: 0;
}

#gnav.action .gtoggle span.n {
    -webkit-transition: ease 0.10s;
    transition: ease 0.10s;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#gnav.action .gtoggle span.n:after,
#gnav.action .gtoggle span.n:before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 0;
    left: 0;
}

.glist .gitem {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}

[data-element-id] #gnav li.pcnone {
    display: block;
}

[data-element-id] #gnav li.pcnone:before {
    content: "SP用";
    width: 100%;
    display: block;
    padding: 5px;
    font-weight: bold;
    font-size: 12px;
    color: red;
    background: #555;
    bottom: 100%;
}

#gnav li.pcnone {
    display: none;
}

.glist .gitem a,
.glist .gitem .a {
    display: block;
    padding: 2em 0.5em;
}

.glist .gitem .icon {
    height: 25px;
    display: block;
    margin-bottom: 0.5em;
}

.glist .gitem .icon img {
    vertical-align: middle;
}

.glist .gitem .jp {
    display: block;
}

.glist .pullbox .pullhead {
    padding-right: 1em;
    cursor: pointer;
    position: relative;
}

.glist .pullbox .pullhead:after {
    content: "\f13a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--color03);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    right: 0;
}

.glist .pullbox .pull {
    position: relative;
}

.glist .pullbox .pullhead {
    display: inline-block;
    font-weight: inherit;
    font-size: inherit;
    text-align: inherit;
}

.glist .pullbox:hover .pulllist {
    visibility: visible;
    opacity: 1;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

[data-element-id] .glist .pullbox .pulllist {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    position: relative;
}

.glist .pullbox .pulllist {
    width: 180px;
    visibility: hidden;
    background-color: rgba(255, 255, 255, 0.95);
    opacity: 0;
    -webkit-transform: translate(-50%, -2em);
    transform: translate(-50%, -2em);
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 10;
}

.glist .pullbox .pulllist li {
    width: 100%;
}

[data-element-id] .glist .pullbox .pulllist li {
    width: 100%;
}

.glist .pullbox .pulllist li a {
    margin-bottom: 1px;
    padding: 0.5em 0.5em;
    text-align: center;
    background-color: var(--color03);
}
.glist .pullbox .pulllist li a:hover{
  background-color:#fff;
}
.glist .pullbox .pulllist li:last-of-type a {
    margin-bottom: 0;
}

.overlay {
    height: 100%;
    overflow: hidden;
}

.overlay:after {
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0.3;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

@media (min-width: 1025px) {
    .glist li {
        position: relative;
        z-index: 1;
    }

    .glist li:after {
        content: "";
        height: 4px;
        background-color: var(--color13);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: right;
        transition-property: right;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 100%;
        z-index: -1;
    }

    .glist li:hover:after {
        right: 0;
    }

    .glist .gitem a,
    .glist .gitem .a {
        opacity: 1;
    }
}

.glist .gitem.glogo a{
     line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 280px;
}

.glogo a .sblogo{
      font-family: 'Courgette', cursive;
    font-size: 20px;
    color: transparent;
    background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    -webkit-background-clip: text;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    #gnav.action .gnavinn {
        height: 100vh;
        visibility: visible;
        opacity: 1;
        z-index: 250;
    }

    #gnav .gnavinn {
        width: 100%;
        height: 0;
        visibility: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0;
        padding-bottom: 0;
        border: none;
        background: var(--color18);
        opacity: 0;
        -webkit-transition: height ease 0.1s, opacity ease 0.4s;
        transition: height ease 0.1s, opacity ease 0.4s;
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -10;
    }

    #gnav .gtoggle {
        display: block !important;
    }

    #gnav .glist {
        width: 100%;
        padding: 60px 0 80px;
    }

    #gnav .gitem.glogo {
        margin-bottom: 1.5em;
        text-align: center;
    }

    #gnav .gitem {
        width: 100%;
        display: block !important;
        text-align: left;
        position: static;
    }

    #gnav .gitem a,
    #gnav .gitem .a {
        padding: 0.5em 3em;
    }

    #gnav .gitem .a {
        display: inline-block;
        text-align: center;
    }

    .glist .pullbox .pullhead {
        padding-right: 0;
    }

    .glist .pullbox .pullhead:after {
        color: #fff;
        right: 1em;
    }

    #gnav .pullbox .pulllist {
        width: 100%;
        visibility: visible;
        padding: 0.5em 1em;
        opacity: 1;
        -webkit-transform: none !important;
        transform: none !important;
        position: static;
    }

    #gnav .pullbox .pulllist:before {
        content: none;
    }

    #gnav .glist .pullbox .pulllist li {
        color: #666;
        -webkit-transform: none !important;
        transform: none !important;
    }

    #gnav .glist .pullbox .pulllist li a {
        margin-bottom: 0;
        font-size: inherit;
        text-align: left;
        background: none;
    }
}

@media (max-width:599px) {
    #gnav .glist {
        padding: 60px 0 33%;
    }
}

/* ------------------------------
 footer
------------------------------ */

footer {
    margin-top: 80px;
    padding: 70px 0 0;
    background-color: var(--color18);
}

.footer-right {
    width: 560px;
    max-width: 100%;
}

.flogo a {
    width: 218px;
    max-width: 50vw;
       line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.flogo a .sblogo{
      font-family: 'Courgette', cursive;
    font-size: 20px;
    color: transparent;
    background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    -webkit-background-clip: text;
    line-height: 1.4;
}

.fnav {
    padding-bottom: 80px;
}

.fnavlist {
    width: calc(100% / 3);
}

.fnavlist.order {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

.fnavitem>a,
.fnavitem .a {
    display: block;
    padding: 0.5em;
}

.fnavitem .item {
    padding-left: 1em;
}

.fnavitem .item a {
    display: block;
    color: var(--color01);
}

.copy {
    padding: 1em 0.5em;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 1024px) {
    footer {
        padding-bottom: 80px;
    }

    .footer-left {
        width: 100%;
    }

    .footer-right {
        width: 100%;
    }

    .flogo {
        text-align: center;
    }

    .fnav {
        padding-bottom: 60px;
    }

    .fnavlist {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    .fnavitem>a,
    .fnavitem .a {
        padding: 0.25em;
    }
}

@media (max-width: 599px) {
    .fnav {
        padding-bottom: 40px;
    }

    .fnavlist {
        width: 100%;
    }
}

/* ##### パンくずリスト breadcrumbs ##### */
.breadcrumbs {
    padding: 2em 0;
}

.breadcrumbs-box {
    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;
}

.breadcrumbs-list {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.breadcrumbs-list li {
    display: inline;
}

.breadcrumbs-list li.breadcrumbs-home,
.breadcrumbs-list li.breadcrumbs-prevpage,
.breadcrumbs-list li.breadcrumbs-thispage {
    font-size: initial;
}

.breadcrumbs-list li.breadcrumbs-home,
.breadcrumbs-list li.breadcrumbs-prevpage {
    font-weight: bold;
}

.breadcrumbs-list li+li::before {
    content: "";
    width: 0.8em;
    height: 0.8em;
    display: inline-block;
    margin: 0 0.5em;
    border-top: 2px solid var(--color01);
    border-right: 2px solid var(--color01);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ------------------------------
 MV
------------------------------ */

.homeSlide {
    max-width: 80%;
    overflow: hidden;
    margin-left: auto;
    padding-right: 4%;
    position: relative;
}

.homeSlide .pic .ofiImg {
    min-height: 30vh;
}

.homeSlide .uk-slidenav-position {
    min-width: 500px;
    overflow: hidden;
    text-align: center;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    position: relative;
    left: 50%;
}

.homeSlide .uk-slidenav-position:after {
    content: "";
    min-height: 30vh;
    display: block;
    padding-top: 55%;
}

.homeSlide .uk-slideshow {
    width: 100%;
    height: 100% !important;
    position: absolute;
    top: 0;
}

.homeSlide .uk-slideshow * {
    height: 100% !important;
}

.home-slide {
    padding-bottom: 10%;
    position: relative;
}

.home-slide:before {
    content: "";
    width: 100vw;
    height: 200vh;
    background-color: var(--color03);
    position: absolute;
    bottom: 0;
    right: 60%;
    z-index: -1;
}

.home-slide .tbox {
    width: 50%;
    padding: 0 2%;
    line-height: 1.6;
    letter-spacing: 0.1em;
    position: absolute;
    bottom: 5%;
    left: 0;
}

.home-slide .tbox .tboxin {
    display: inline-block;
}

.home-slide .tbox h3 {
    font-size: calc(20px + ((1vw - 10px) * 1.6));
}

.mainImg {
    max-width: 80%;
    overflow: hidden;
    margin-left: auto;
    padding-right: 4%;
    position: relative;
}

.mainImg .pic .ofiImg {
    min-height: 25vh;
    overflow: hidden;
}

.second-mv {
    padding-bottom: 10%;
    position: relative;
}

.second-mv .tbox {
    width: 50%;
    padding: 0 2%;
    line-height: 1.6;
    letter-spacing: 0.1em;
    position: absolute;
    bottom: 10%;
    left: 0;
}

.second-mv .tbox:before {
    content: "";
    width: 100vw;
    height: 200%;
    min-height: 300px;
    background-color: var(--color03);
    position: absolute;
    bottom: -50%;
    right: 0;
    z-index: -1;
}

.second-mv .tbox .tboxin {
    display: inline-block;
    text-align: center;
}

.second-mv .tbox h3 {
    font-size: calc(20px + ((1vw - 10px) * 1.6));
}

@media (max-width:1024px) {
    .homeSlide {
        max-width: 800px;
    }

    .home-slide .tbox {
        bottom: 4%;
    }
     .second-mv .tbox{
            bottom: 5%;
  }
  .second-mv .tbox h3 {
    font-size: calc(20px + ((1vw - 3px) * 1.6));
}
}

@media (max-width:599px) {
  .second-mv .tbox{
            bottom: 0%;
            width: 80%;
    line-height: 1.4;
  }
    .home-slide .tbox {
        bottom: .5%;
    }
}

/* ------------------------------
 archives
------------------------------ */

.postcont {
    width: 70%;
}

.caarea {
    width: 26%;
}

.caitem {
    min-height: 18em;
    padding: 2em 1.5em 3em;
    background-color: #fff;
}

.caitem .catit {
    margin-bottom: 0.5em;
    line-height: 1.4;
}

.caitem li {
    margin-bottom: 0.25em;
    padding-left: 1em;
    position: relative;
}

.caitem li:before {
    content: "・";
    width: 1em;
    height: 1em;
    position: absolute;
    top: 0;
    left: 0;
}

.caitem a {
    display: block;
}

.post-recommend {
    margin-top: 40px;
}

.post-recommend .pbox .picture {
    width: 150%;
    margin-left: -50%;
}

.post-recommend .pbox .picture .ofiImg {
    overflow: hidden;
}

.post-recommend .pbox .picture .ofiImg:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.post-recommend .tbox .cmntit01.mv:after {
    width: 125%;
}

.post-recommend .tbox .recommendbox {
    padding: 3em 3em 4em 0;
    position: relative;
}

.post-recommend .tbox .recommendbox:after {
    content: "";
    width: 105vw;
    height: 100%;
    background-color: #f5f2ec;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

@media (max-width: 1024px) {
    .postcont {
        width: 100%;
    }

    .caarea {
        width: 100%;
    }

    .caitem .catit {
        font-size: 22px;
    }
}

@media (max-width: 599px) {
    .caitem .catit {
        font-size: 20px;
    }

    .post-recommend .pbox .picture {
        width: 100%;
        margin-left: 0;
    }

    .post-recommend .tbox .recommendbox {
        padding: 1.5em 1.5em 3em 0;
    }
}

/* ------------------------------
 pagenav
------------------------------ */

.pagenav li {
    margin: 0 2px;
}

.pagenav li a,
.pagenav li .now {
    width: 3.5em;
    height: 3.5em;
    display: block;
    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;
    padding: 0.5em 0.25em;
    line-height: 1.2;
    background-color: #fff;
}

@media (max-width: 1024px) {
    .pagenav .flex {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media (max-width: 599px) {
    .pagenav li {
        font-size: 10px;
    }
}

/* ------------------------------
 form
------------------------------ */

.max270 input{
  max-width: 270px;
}

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

.formlist {
    max-width: 900px;
}

.formitem {
    padding: 1.5em;
    border-bottom: 1px solid #ccc;
}

.formitem dt {
    width: 30%;
    font-weight: 700;
}

.formitem .reqw {
    margin-left: 1em;
    padding: 0.1em 0.5em;
    font-size: 12px;
    text-align: center;
    border: 1px solid var(--color04);
}

.formitem dd {
    width: 66%;
}

.formitem dd .inputlist li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    margin-bottom: 1em;
}

.formitem dd input[type="radio"] {
    display: none;
}

.formitem dd input[type="radio"]+label {
    display: inline-block;
    margin-right: 2em;
    padding-left: 1.5em;
    border-bottom: 1px solid transparent;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    position: relative;
}

.formitem dd input[type="radio"]+label::before {
    content: "";
    width: 1em;
    height: 1em;
    display: block;
    border: 1px solid #c0baba;
    border-radius: 50%;
    background: #fff;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    left: 0;
}

.formitem dd input[type="radio"]:checked+label::after {
    content: "";
    width: 0.5em;
    height: 0.5em;
    display: block;
    border-radius: 50%;
    background: var(--color04);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    left: 3.5px;
}

.formitem dd input[type="checkbox"] {
    display: none;
}

.formitem dd input[type="checkbox"]+label {
    display: inline-block;
    vertical-align: top;
    padding-left: 1.5em;
    border-bottom: 1px solid transparent;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    position: relative;
}

.formitem dd input[type="checkbox"]+label::before {
    content: "";
    width: 1em;
    height: 1em;
    display: block;
    border: 1px solid #c0baba;
    background: #fff;
    position: absolute;
    top: 0.5em;
    left: 0;
}

.formitem .checkbox-wrapper-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.checkbox-wrapper{
  display: inline-block;
  width: 49%;
  margin-bottom: 0.5em;
}

.checkbox-wrapper .sb-text{
  font-size: 70%;
      font-weight: bold;
}

.formitem dd input[type="checkbox"]:checked+label::after {
   content: "";
    width: 0.6em;
    height: 0.6em;
    display: block;
    background: var(--color04);
    position: absolute;
    top: calc(0.5em + 3px);
    left: 3px;
}

.formitem dd input[type="file"] {
    background: none;
}

.formitem dd textarea {
    height: 250px;
}

.formbtn li {
    text-align: center;
}

.formbtn li button,
.formbtn li input {
    width: 200px;
    max-width: 100%;
    display: inline-block;
    border: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.formbtn li button {
    max-width: 100%;
    display: inline-block;
    padding: 0.75em 2em;
    border: 1px solid var(--color15);
    background-color: #fff;
    position: relative;
}

/* .formbtn li button:before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    display: block;
    border-top: 1px solid;
    border-bottom: 1px solid transparent;
    -webkit-transform: translateY(-50%) rotate(40deg);
    transform: translateY(-50%) rotate(40deg);
    position: absolute;
    top: 50%;
    right: 1.1em;
}

.formbtn li button:after {
    content: "";
    width: 1em;
    height: 2px;
    border-bottom: 1px solid;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    right: 1em;
} */

.formbtn li input {
    background-color: #ccc;
}

.formbtn li button:hover,
.formbtn li input:hover {
    opacity: 0.6;
    cursor: pointer;
}

.formbtn li {
    width: 100%;
    max-width: 320px;
    margin: auto;
}

.formbtn2 li {
    max-width: 250px;
}

@media (max-width: 1024px) {
    .formitem dt {
        width: 100%;
        margin-bottom: 0.5em;
    }

    .formitem dt label {
        display: block;
    }

    .formitem dd {
        width: 100%;
    }

    .formbtn2 li {
        max-width: 200px;
    }
}

@media (max-width: 599px) {
  .checkbox-wrapper{
    width: 100%;
  }
    .formitem {
        padding: 1em;
    }

    .formbtn li button,
    .formbtn li input {
        width: 230px;
    }

    .formbtn2 li {
        max-width: 120px;
    }
}

/*base rewrite*/
html {
    color: var(--color04);
}

.harea+.harea {
    padding-top: 40px;
}

.harea[class*="bg"]+.harea,
.harea[class*="relative"]+.harea {
    padding-top: 80px;
}

.harea+.harea[class*="bg"],
.harea+.harea[class*="relative"] {
    padding: 80px 0;
}

.area+.area {
    padding-top: 40px;
}

.area[class*="bg"]+.area,
.area[class*="relative"]+.area {
    padding-top: 80px;
}

.area+.area[class*="bg"],
.area+.area[class*="relative"] {
    padding: 80px 0;
}

@media (max-width: 1024px) {
    .harea+.harea {
        padding-top: 30px;
    }

    .harea[class*="bg"]+.harea,
    .harea[class*="relative"]+.harea {
        padding-top: 60px;
    }

    .harea+.harea[class*="bg"],
    .harea+.harea[class*="relative"] {
        padding: 60px 0;
    }

    .area+.area {
        padding-top: 30px;
    }

    .area[class*="bg"]+.area,
    .area[class*="relative"]+.area {
        padding-top: 60px;
    }

    .area+.area[class*="bg"],
    .area+.area[class*="relative"] {
        padding: 60px 0;
    }
}

@media (max-width: 599px) {
    .harea+.harea {
        padding-top: 20px;
    }

    .harea[class*="bg"]+.harea,
    .harea[class*="relative"]+.harea {
        padding-top: 40px;
    }

    .harea+.harea[class*="bg"],
    .harea+.harea[class*="relative"] {
        padding: 40px 0;
    }

    .area+.area {
        padding-top: 20px;
    }

    .area[class*="bg"]+.area,
    .area[class*="relative"]+.area {
        padding-top: 40px;
    }

    .area+.area[class*="bg"],
    .area+.area[class*="relative"] {
        padding: 40px 0;
    }
}

/* ------------------------------
 common
------------------------------ */

.fc00 {
    color: var(--color04);
}

.fc01 {
    color: var(--color05);
}

.fc02 {
    color: var(--color01);
}

.fc03 {
    color: var(--color06);
}

.fc04 {
    color: var(--color07);
}

.fc05 {
    color: var(--color08);
}

.fc06 {
    color: var(--color09);
}

.fc07 {
    color: var(--color10);
}

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

.popper01 {
    display: inline-block;
    padding: 0 1.5em;
    position: relative;
}

.popper01:before {
    content: "";
    width: 1px;
    height: 100%;
    border-left: 1px solid;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
    position: absolute;
    bottom: 0;
    left: 0;
}

.popper01:after {
    content: "";
    width: 1px;
    height: 100%;
    border-right: 1px solid;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    position: absolute;
    bottom: 0;
    right: 0;
}

.btn01 a {
    max-width: 100%;
    display: inline-block;
}

.btn01 .btn {
    width: 293px;
    max-width: 100%;
    display: inline-block;
    padding: 0.5em 3em 0.5em 1.5em;
    border: 2px solid var(--color12);
    position: relative;
}

.btn01 .btn:before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    display: block;
    border-top: 1px solid;
    border-bottom: 1px solid transparent;
    -webkit-transform: translateY(-50%) rotate(40deg);
    transform: translateY(-50%) rotate(40deg);
    position: absolute;
    top: 50%;
    right: 1.1em;
}

.btn01 .btn:after {
    content: "";
    width: 1.5em;
    height: 2px;
    border-bottom: 1px solid;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    right: 1em;
}

@media (max-width:1024px) {}

@media (max-width:599px) {}

/* ------------------------------
 common layout
------------------------------ */

.cmntit01 {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    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;
    padding-bottom: 0.25em;
    line-height: 1.4;
    position: relative;

    -o-flex-wrap: wrap;
    -ms-align-items: center;
}

.cmntit01.fead-mv {
    opacity: 1;
}

.cmntit01.mv:after {
    width: 100%;
}

.cmntit01:after {
    content: "";
    width: 0;
    height: 2px;
    border-bottom: 2px solid;
    -webkit-transition: 0.8s;
    transition: 0.8s;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
    position: absolute;
    bottom: 0;
    left: 0;
}

.cmntit01 .en {
    display: inline-block;
    letter-spacing: 0.1em;
}

.cmntit01 .jp {
    margin-left: 2em;
    padding-left: 2em;
    line-height: inherit;
    border-left: 2px solid var(--color01);
    position: relative;
}

.cmntit02 {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    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;
    padding-bottom: 0.25em;
    line-height: 1.4;

    -o-flex-wrap: wrap;
    -ms-align-items: center;
}

.cmntit02 .en {
    display: inline-block;
    line-height: 1;
    letter-spacing: 0.1em;
}

.cmntit02 .jp {
    display: inline-block;
    margin-left: 2em;
    padding-left: 2em;
    line-height: inherit;
    border-left: 2px solid var(--color01);
    position: relative;
}

.cmntit03 {
    line-height: 1;
}

.cmntit03 .en {
    display: block;
    letter-spacing: 0.1em;
}

.cmntit03 .jp {
    display: inline-block;
    padding: 0 2.5em;
    position: relative;
}

.cmntit03 .jp:before {
    content: "";
    width: 1.5em;
    height: 2px;
    background-color: var(--color13);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    left: 0;
}

.cmntit03 .jp:after {
    content: "";
    width: 1.5em;
    height: 2px;
    background-color: var(--color13);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    right: 0;
}

.cmntit04 {
    padding-bottom: 0.25em;
    line-height: 1.2;
    letter-spacing: 0.1em;
    position: relative;
}

.cmntit04 .jp {
    display: block;
}

.cmntit04 .en {
    display: block;
    line-height: inherit;
}

.cmntit04.fead-mv {
    opacity: 1;
}

.cmntit04.mv:after {
    width: 100%;
}

.cmntit04:after {
    content: "";
    width: 0;
    height: 2px;
    border-bottom: 2px solid;
    -webkit-transition: 0.8s;
    transition: 0.8s;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
    position: absolute;
    bottom: 0;
    left: 0;
}

.cmntitbox01 {
    min-width: 500px;
    display: inline-block;
    padding: 2.5em 1.5em 2.5em 0;
    position: relative;
}

.cmntitbox01:before {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.more01 a {
    max-width: 100%;
    display: inline-block;
    letter-spacing: 0.1em;
    text-align: center;
}

.more01 .btn {
    width: 200px;
    max-width: 100%;
    display: inline-block;
    padding: 0.5em 2em;
    border: 1px solid var(--color15);
    background-color: white;
    position: relative;
}

.more01.ori .btn{
  width: 260px;
}

.more01 .btn:before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    display: block;
    border-top: 1px solid;
    border-bottom: 1px solid transparent;
    -webkit-transform: translateY(-50%) rotate(40deg);
    transform: translateY(-50%) rotate(40deg);
    position: absolute;
    top: 50%;
    right: 1.1em;
}

.more01 .btn:after {
    content: "";
    width: 1em;
    height: 2px;
    border-bottom: 1px solid;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    right: 1em;
}

.more02 a {
    max-width: 100%;
    display: inline-block;
    letter-spacing: 0.1em;
    text-align: center;
}

.more02 .btn {
    width: 180px;
    max-width: 100%;
    display: inline-block;
    padding: 0.5em 2em;
    background-color: white;
    position: relative;
}

.more02 .btn:before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    display: block;
    border-top: 1px solid;
    border-bottom: 1px solid transparent;
    -webkit-transform: translateY(-50%) rotate(40deg);
    transform: translateY(-50%) rotate(40deg);
    position: absolute;
    top: 50%;
    right: 1.1em;
}

.more02 .btn:after {
    content: "";
    width: 1em;
    height: 2px;
    border-bottom: 1px solid;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    right: 1em;
}

.more03 a {
    max-width: 100%;
    display: inline-block;
    letter-spacing: 0.1em;
    text-align: center;
}

.more03 .btn {
    width: 180px;
    max-width: 100%;
    display: inline-block;
    padding: 0.5em 2em;
    border: 1px solid;
    position: relative;
}

.more03 .btn:before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    display: block;
    border-top: 1px solid;
    border-bottom: 1px solid transparent;
    -webkit-transform: translateY(-50%) rotate(40deg);
    transform: translateY(-50%) rotate(40deg);
    position: absolute;
    top: 50%;
    right: 1.1em;
}

.more03 .btn:after {
    content: "";
    width: 1em;
    height: 2px;
    border-bottom: 1px solid;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    right: 1em;
}

.back01 a {
    width: 140px;
    max-width: 100%;
    display: inline-block;
    padding: 0.75em 0.5em;
    text-align: center;
    background-color: white;
}

.back02 a {
    width: 200px;
    max-width: 100%;
    display: inline-block;
    padding: 0.75em 0.5em;
    text-align: center;
    border: 1px solid;
    background-color: white;
}

.mobile-case {
    display: inline-block;
    position: relative;
}

.mobile-case .a-app {
    width: 80%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    position: absolute;
    bottom: 20%;
    left: 50%;
}

.mobile-case .g-app {
    width: 80%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    position: absolute;
    bottom: 7%;
    left: 50%;
}

.animate .animate01 {
    padding-bottom: 1em;
    position: relative;
}

.animate .animate01:before {
    content: "";
    width: 0;
    height: 2px;
    border-bottom: 2px solid var(--color01);
    -webkit-transition: 0.8s;
    transition: 0.8s;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
    position: absolute;
    bottom: 0;
}

.animate .animate01.typeL:before {
    left: 0;
}

.animate .animate01.typeR:before {
    right: 0;
}

.mv.animate .animate01:before {
    width: 50vw;
}


@media (max-width:1024px) {}

@media (max-width:599px) {
    .cmntitbox01 {
        min-width: inherit;
    }

    .mv.animate .animate01:before {
        width: 100%;
    }
}

/* ------------------------------
 home
------------------------------ */

.home01 .relative {
    padding-left: 2em;
}

.home01 .title {
    display: inline-block;
    padding-left: 3em;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 25% 100%;
    transform-origin: 25% 100%;
    position: absolute;
    top: 45%;
    left: 0;
    z-index: 3;
}

.home01 .title:before {
    content: "";
    width: 2em;
    height: 2px;
    border-bottom: 0.1em solid;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
}

.home01 .ofiImg.tr {
    max-width: 50%;
    margin-left: auto;
}

.home01 .ofiImg.tr:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
}

.home02 .relative {
    padding-right: 2em;
}

.home02 .title {
    display: inline-block;
    padding-left: 3em;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 100% 25%;
    transform-origin: 100% 25%;
    position: absolute;
    top: 45%;
    right: 0;
    z-index: 3;
}

.home02 .title:before {
    content: "";
    width: 2em;
    height: 2px;
    border-bottom: 0.1em solid;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
}

.home02 .ofiImg.tl {
    max-width: 50%;
}

.home02 .ofiImg.tl:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
}

.home03 .relative {
    padding-right: 2em;
}

.home03 .title {
    display: inline-block;
    padding-left: 3em;
    color: white;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 100% 25%;
    transform-origin: 100% 25%;
    position: absolute;
    top: 75%;
    right: 0;
    z-index: 3;
}

.home03 .title:before {
    content: "";
    width: 2em;
    height: 2px;
    border-bottom: 0.1em solid;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
}

.home03 .titbox {
    padding: 3em 0 0;
    position: relative;
}

.home03 .titbox:before {
    content: "";
    width: 100vw;
    height: 200%;
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: 60%;
    z-index: -1;
}

.home03box {
    padding: 3em 3em;
    position: relative;
    z-index: 1;
}

.home03box:before {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color03);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.home03listbox .list .item:last-of-type {
    border-bottom: none;
}

.home03listbox .item {
    border-bottom: 1px solid var(--color14);
}

.home03listbox .item a {
    display: block;
    padding: 1em 0;
}

.home03listbox .item dt {
    width: 8em;
}

.home03listbox .item dt+dd {
    width: calc(100% - 8.5em);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home04 .relative {
    padding-left: 2em;
}

.home04 .title {
    display: inline-block;
    padding-left: 3em;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 25% 100%;
    transform-origin: 25% 100%;
    position: absolute;
    top: 45%;
    left: 0;
    z-index: 3;
}

.home04 .title:before {
    content: "";
    width: 2em;
    height: 2px;
    border-bottom: 0.1em solid;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
}

.home04 .cmntit01 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

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

.home04item .pbox {
    width: 50%;
}

.home04item .tbox {
    width: 50%;
    padding: 3em 3em 1.5em;
}

.home05item {
    width: calc(100% / 4);
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.home05item .ofiImg.tc:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

.home05item .tbox {
   /*  padding: 1em; */
    color: white;
}

.home05item .tboxin {
    padding: 4vw 1em;
    border: 1px solid white;
}

.home06 .relative {
    padding-left: 2em;
}

.home06 .title {
    display: inline-block;
    padding-left: 3em;
    color: white;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 25% 100%;
    transform-origin: 25% 100%;
    position: absolute;
    top: 45%;
    left: 0;
    z-index: 3;
}

.home06 .title:before {
    content: "";
    width: 2em;
    height: 2px;
    border-bottom: 0.1em solid;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
}

.home06box .item a {
    height: 100%;
    display: block;
    padding: 1em 1em 3em;
    background-color: white;
}

.home06box .item .pbox {
    border: 1px solid var(--color15);
}

.home07item {
    width: calc(100% / 3);
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.home07item .ofiImg.tc:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

.home07item .tbox {
/*     padding: 1em; */
    color: white;
}

.home07item .tboxin {
    padding: 3em 1em;
    border: 1px solid white;
}

.home08 .relative {
    padding-right: 2em;
}

.home08 .title {
    display: inline-block;
    padding-left: 3em;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: 100% 25%;
    transform-origin: 100% 25%;
    position: absolute;
    top: 75%;
    right: 0;
    z-index: 3;
}

.home08 .title:before {
    content: "";
    width: 2em;
    height: 2px;
    border-bottom: 0.1em solid;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
}

.home08box .item a {
    display: block;
}

.home09 .relative {
    padding-left: 2em;
}

.home09 .title {
    display: inline-block;
    padding-left: 3em;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 25% 100%;
    transform-origin: 25% 100%;
    position: absolute;
    top: 30%;
    left: 0;
    z-index: 3;
}

.home09 .title:before {
    content: "";
    width: 2em;
    height: 2px;
    border-bottom: 0.1em solid;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
}

.home09item .subtit {
    width: 7em;
}

.home09item .subtit+.text {
    width: calc(100% - 8em);
}

.home09item .list01 {
    padding: 1.5em;
    background-color: var(--color11);
}

.home09item .subttl {
    width: 5em;
}

.home09item .subttl+.tex {
    width: calc(100% - 6em);
    padding-left: 1em;
    border-left: 1px solid var(--color16);
}

.home09box .mapbox {
    padding-bottom: 2em;
    border-bottom: 2px solid var(--color01);
}

@media (max-width:1024px) {
    .home03 .titbox:before {
        right: 40%;
    }

    .home03box {
        padding: 3em 2em;
    }

    .home03box .home03listbox:last-of-type {
        margin-bottom: 0;
    }

    .home03listbox {
        width: 100%;
        margin-bottom: 3em;
    }

    .home05item {
        width: calc(100% / 2);
    }

    .home06box .item {
        width: 48%;
    }

    .home07item {
        width: calc(100% / 2);
    }

    .home09box .pbox {
        width: 90%;
        margin-bottom: 1.5em;
        margin-left: auto;
        margin-right: auto;
    }

    .home09box .tbox {
        width: 100%;
    }
}

@media (max-width:599px) {
    .home01 .relative {
        padding-left: 0;
    }

    .home01 .title {
        display: inline-block;
        -webkit-transform: none;
        transform: none;
        position: relative;
    }

    .home01 .ofiImg.tr {
        max-width: 100%;
        margin-bottom: 1em;
        position: relative;
    }

    .home02 .relative {
        padding-right: 0;
    }

    .home02 .title {
        display: inline-block;
        -webkit-transform: none;
        transform: none;
        position: relative;
    }

    .home02 .ofiImg.tl {
        max-width: 100%;
        margin-bottom: 1em;
        position: relative;
    }

    .home03 .relative {
        padding-right: 0;
    }

    .home03 .title {
        display: inline-block;
        color: var(--color06);
        -webkit-transform: none;
        transform: none;
        position: relative;
    }

    .home03 .titbox:before {
        right: 25%;
    }

    .home03box {
        padding: 3em 1.5em;
    }

    .home03listbox .item dt {
        width: 100%;
    }

    .home03listbox .item dt+dd {
        width: 100%;
    }

    .home04 .relative {
        padding-left: 0;
    }

    .home04 .title {
        display: inline-block;
        -webkit-transform: none;
        transform: none;
        position: relative;
    }

    .home04item .pbox {
        width: 100%;
    }

    .home04item .tbox {
        width: 100%;
        padding: 3em 1.5em 3em;
    }

    .home05item {
        width: calc(100% / 1);
    }

    .home06 .relative {
        padding-left: 0;
    }

    .home06 .title {
        display: inline-block;
        -webkit-transform: none;
        transform: none;
        position: relative;
    }

    .home06box .item {
        width: 100%;
    }

    .home07item {
        width: calc(100% / 1);
    }

    .home09 .relative {
        padding-left: 0;
    }

    .home09 .title {
        display: inline-block;
        -webkit-transform: none;
        transform: none;
        position: relative;
    }
}

/* ------------------------------
 shop
------------------------------ */

.shop01box .pbox .vw {
    width: 200%;
    margin-left: -90%;
    position: relative;
}

.shop01box .tbox .list {
    padding: 6em 3em 3em 0;
    position: relative;
}

.shop01box .tbox .list:before {
    content: "";
    width: 125%;
    height: 100%;
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.shop01box .tbox .item dt {
    width: 8em;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    padding-right: 1em;
    border-right: 2px solid;
}

.shop01box .tbox .item dt+dd {
    width: calc(100% - 9em);
}

.shop02 .titlebox {
    min-width: 500px;
    display: inline-block;
    padding: 3em 1.5em 1.5em 0;
    position: relative;
}

.shop02 .titlebox:before {
    content: "";
    width: 100vw;
    height: calc(100% + 3em);
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

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

.shop03 .relative .ofiImg.tl {
    max-width: 300px;
}

.shop03 .relative .ofiImg.tl img {
    -o-object-position: right center;
    object-position: right center;
    background-position: right center !important;
}

.shop03box {
    padding: 3em 3em 3em 25%;
}

.shop03box .tbox {
    width: 74%;
}

.shop03box .pbox {
    width: 20%;
}

.shop04box .item {
    width: 50%;
    padding: 3em 3em;
}

.shop04box .list .item:nth-of-type(4n+1),
.shop04box .list .item:nth-of-type(4n+4) {
    background-color: var(--color02);
}

.shop04box .list .item:nth-of-type(4n+2),
.shop04box .list .item:nth-of-type(4n+3) {
    background-color: var(--color03);
}

.shop05box .list {
    width: 104%;
    margin-left: -2%;
}

.shop05box .item {
    width: 21%;
    margin: 2% 2%;
}

.shop05box .itemin {
    height: 100%;
    padding: 3em 1em;
    background-color: white;
}

.shop05box .box {
    padding: 2em 1.5em;
    border: 1px solid var(--color01);
}

@media (max-width: 1024px) {
    .shop05box .item {
        width: 29.333%;
    }
}

@media (max-width: 599px) {
    .shop01box .pbox .vw {
        width: 100%;
        margin-left: 0;
    }

    .shop01box .tbox .list {
        padding: 3em 1.5em 3em;
    }

    .shop01box .tbox .item dt {
        width: 100%;
        padding-right: 0;
        border-bottom: 2px solid;
        border-right: none;
    }

    .shop01box .tbox .item dt+dd {
        width: 100%;
    }

    .shop02 .titlebox {
        min-width: inherit;
        display: block;
    }

    .shop03 .relative .ofiImg.tl {
        max-width: 100%;
        height: auto;
        position: static;
    }

    .shop03box {
        padding: 3em 1.5em 3em;
    }

    .shop03box .tbox {
        width: 100%;
        margin-bottom: 1.5em;
    }

    .shop03box .pbox {
        width: 100%;
    }

    .shop04box .item {
        width: 100%;
    }

    .shop04box .list .item:nth-of-type(4n+1),
    .shop04box .list .item:nth-of-type(4n+3) {
        background-color: var(--color02);
    }

    .shop04box .list .item:nth-of-type(4n+2),
    .shop04box .list .item:nth-of-type(4n+4) {
        background-color: var(--color03);
    }

    .shop05box .item {
        width: 46%;
    }
}

/* ------------------------------
 concept
------------------------------ */

.concept01box .pbox .vw {
    width: 200%;
    margin-left: -90%;
    position: relative;
}

.concept02list .concept02item:nth-of-type(odd) .pbox .vw {
    margin-left: calc((100vw - 1000px) / -2);
    padding-left: 10%;
}

.concept02list .concept02item:nth-of-type(even) .pbox .vw {
    margin-right: calc((100vw - 1000px) / -2);
    padding-right: 10%;
}

.concept02item .pbox .ofiImg img {
    -o-object-position: center center;
    object-position: center center;
    background-position: center center;
}

.concept02item .tbox .subtit {
    padding-bottom: 1em;
    position: relative;
}

.concept02item .tbox .subtit:before {
    content: "";
    width: 0;
    height: 2px;
    border-bottom: 2px solid var(--color01);
    -webkit-transition: 0.8s;
    transition: 0.8s;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
    position: absolute;
    bottom: 0;
}

.concept02item.mv .tbox .subtit:before {
    width: 50vw;
}

.concept02list .concept02item:nth-of-type(odd) .tbox .subtit:before {
    right: 0;
}

.concept02list .concept02item:nth-of-type(even) .tbox .subtit:before {
    left: 0;
}

@media (max-width: 1024px) {
    .concept02list .concept02item:nth-of-type(odd) .pbox .vw {
        margin-left: calc((100vw - 95vw) / -2);
    }

    .concept02list .concept02item:nth-of-type(even) .pbox .vw {
        margin-right: calc((100vw - 95vw) / -2);
    }
}

@media (max-width: 599px) {
    .concept01box .pbox .vw {
        width: 100%;
        margin-left: 0;
    }

    .concept02list .concept02item .pbox .vw {
        width: 102vw;
        max-width: inherit;
        margin-left: -5.5% !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    .concept02item.mv .tbox .subtit:before {
        width: 100%;
    }
}

/* ------------------------------
 menu
------------------------------ */

.menuitem {
    width: 25%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 2px;
}

.menuitem a {
    height: 100%;
    display: block;
    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;
    padding: 0.75em 2.25em;
    line-height: 1.4;
    text-align: center;
    border: 1px solid;
    position: relative;
}

.menuitem a:before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    display: block;
    border-top: 1px solid;
    border-bottom: 1px solid transparent;
    -webkit-transform: translateY(-50%) rotate(40deg);
    transform: translateY(-50%) rotate(40deg);
    position: absolute;
    top: 50%;
    right: 1.1em;
}

.menuitem a:after {
    content: "";
    width: 1em;
    height: 2px;
    border-bottom: 1px solid;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    right: 1em;
}

.menu01box .pbox .vw {
    width: 200%;
    margin-left: -90%;
    position: relative;
}

.menu02box .list .item:nth-of-type(odd) {
    background-color: var(--color02);
}

.menu02box .list .item:nth-of-type(even) {
    background-color: var(--color03);
}

.menu02box .item {
    width: calc(100% / 3);
    padding: 3em 1.5em;
}

.cmnmenulist.flexsb .cmnmenuitem {
    width: 48%;
}

.cmnmenulist.flexsb .cmnmenuitem:nth-of-type(4n+1),
.cmnmenulist.flexsb .cmnmenuitem:nth-of-type(4n+2) {
    background-color: var(--color03);
}

.cmnmenulist.flexsb .cmnmenuitem:nth-of-type(4n+3),
.cmnmenulist.flexsb .cmnmenuitem:nth-of-type(4n+4) {
    background-color: var(--color02);
}

.cmnmenulist .cmnmenuitem:nth-of-type(odd) {
    background-color: var(--color03);
}

.cmnmenulist .cmnmenuitem:nth-of-type(even) {
    background-color: var(--color02);
}

.cmnmenuitem {
    min-height: 8.5em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -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;
    padding: 2em 1.5em;
}

.cmnmenuitem .tit {
    width: 14em;
}

.cmnmenuitem .textbox {
    width: calc(100% - 23em);
}

.cmnmenuitem .price {
    width: 7em;
    padding-left: 2em;
    border-left: 2px solid;
}

.menu04item .ofiImg.tl {
    width: 40%;
}

.menu04item .ofiImg.tr {
    width: 40%;
}

.menu04item .tbox {
    width: 60%;
    min-height: 25em;
    padding: 2em 2em;
    background-color: var(--color03);
    position: relative;
}

.menu04item .tbox:before {
    content: "";
    width: 2em;
    height: 100%;
    background-color: var(--color03);
    -webkit-box-shadow: 0 0 10px 5px var(--color03);
    box-shadow: 0 0 10px 5px var(--color03);
    position: absolute;
    top: 0;
}

.menu04list .menu04item:nth-of-type(odd) .tbox:before {
    right: calc(100% - 1em);
}

.menu04list .menu04item:nth-of-type(even) .tbox:before {
    left: calc(100% - 1em);
}

@media (max-width: 1024px) {
    .menuitem {
        width: 50%;
    }

    .menu02box .item {
        width: calc(100% / 2);
    }

    .cmnmenuitem .tit {
        width: 100%;
        margin-bottom: 0.5em;
        font-weight: 700;
    }

    .cmnmenuitem .textbox {
        width: calc(100% - 8em);
    }

    .menu04item .ofiImg.tl {
        width: 100%;
    }

    .menu04item .ofiImg.tr {
        width: 100%;
    }

    .menu04item .tbox {
        width: 100%;
        padding: 3em 1.5em;
        background-color: rgba(238, 233, 219, 0.75);
    }

    .menu04item .tbox:before {
        content: none;
    }
}

@media (max-width: 599px) {
    .menu01box .pbox .vw {
        width: 100%;
        margin-left: 0;
    }

    .menu02box .item {
        width: calc(100% / 1);
    }

    .cmnmenuitem .textbox {
        width: 100%;
        margin: 0.5em 0;
    }

    .cmnmenuitem .price {
        width: 100%;
        padding-top: 0.5em;
        padding-left: 0;
        text-align: right;
        border-top: 2px solid;
        border-left: none;
    }
}

/* ------------------------------
 cut
------------------------------ */

.cut01box .pbox .vw {
    width: 200%;
    margin-left: -90%;
    position: relative;
}

.cut02box {
    position: relative;
}

.cut02box:before {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color03);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
}

.cut02box .pbox {
    margin: 0;
}

.cut02box .tbox {
    margin: 0;
    padding: 3em 0;
}

.cut03box .picture {
    width: 125%;
    margin-left: -25%;
}

.cut03box .textbox {
    padding: 3em 6em 3em 0;
    position: relative;
}

.cut03box .textbox:before {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color03);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.cut04box {
    position: relative;
}

.cut04box:before {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color03);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
}

.cut04box .pbox {
    margin: 0;
}

.cut04box .tbox {
    margin: 0;
    padding: 3em 0;
}

@media (max-width: 1024px) {}

@media (max-width: 599px) {
    .cut01box .pbox .vw {
        width: 100%;
        margin-left: 0;
    }

    .cut03box .picture {
        width: 100%;
        margin-left: 0;
    }

    .cut03box .textbox {
        padding: 3em 1.5em;
    }
}

/* ------------------------------
 ladies_shaving
------------------------------ */

.ladies_shaving02box .ofiImg.tl {
    width: 40%;
}

.ladies_shaving02box .tbox {
    width: 60%;
    padding: 5em 3em;
    background-color: var(--color03);
    position: relative;
}

.ladies_shaving02box .tbox:before {
    content: "";
    width: 2em;
    height: 100%;
    background-color: var(--color03);
    -webkit-box-shadow: 0 0 10px 5px var(--color03);
    box-shadow: 0 0 10px 5px var(--color03);
    position: absolute;
    top: 0;
    right: 100%;
}

.ladies_shaving03box .introbox {
    max-width: 642px;
    margin-left: auto;
    margin-right: auto;
}

.ladies_shaving03box .introbox .ofiImg.tc:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

.ladies_shaving03box .introbox .ofiImg.tc:after {
    content: "";
    width: calc(100% - 3em);
    height: calc(100% - 3em);
    border: 2px solid white;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

.ladies_shaving03box .introbox .tbox {
    min-height: 27em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -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;
    padding: 3em 1.5em;
}

.ladies_shaving04box .flexbox .picture {
    width: 125%;
    margin-left: -25%;
}

.ladies_shaving04box .flexbox .tbox {
    margin-top: 15%;
    padding: 3em 7.5em 3em 0;
    position: relative;
}

.ladies_shaving04box .flexbox .tbox:before {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color02);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}

.ladies_shaving05box {
    position: relative;
}

.ladies_shaving05box:before {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color03);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
}

.ladies_shaving05box .pbox {
    margin: 0;
}

.ladies_shaving05box .tbox {
    margin: 0;
    padding: 3em 0;
}

@media (max-width: 1024px) {
    .ladies_shaving02box .ofiImg.tl {
        width: 100%;
    }

    .ladies_shaving02box .tbox {
        width: 100%;
        padding: 4em 3em;
        background-color: rgba(238, 233, 219, 0.75);
    }

    .ladies_shaving02box .tbox:before {
        content: none;
    }

    .ladies_shaving04box .flexbox .tbox {
        padding: 3em 6em 3em 0;
    }
}

@media (max-width: 599px) {
    .ladies_shaving02box .tbox {
        padding: 3em 1.5em;
    }

    .ladies_shaving03box .introbox .ofiImg.tc:after {
        width: calc(100% - 1.5em);
        height: calc(100% - 1.5em);
    }

    .ladies_shaving03box .introbox .tbox {
        min-height: 17em;
    }

    .ladies_shaving04box .flexbox .picture {
        width: 100%;
        margin-left: 0;
    }

    .ladies_shaving04box .flexbox .tbox {
        margin-top: 2%;
        padding: 3em 1.5em;
    }
}

/* ------------------------------
 care
------------------------------ */

.care01box .tbox .cmntit04.mv:after {
    width: 125%;
}

.care02item .subtit {
    padding-left: 1.5em;
    position: relative;
}

.care02item .subtit .num {
    position: absolute;
    top: 0;
    left: 0;
}

.care03item {
    margin-top: 20px;
}

.care03list .care03item:first-of-type .pbox {
    -webkit-transform: none;
    transform: none;
}

.care03item .pbox {
    -webkit-transform: translate(0, -25%);
    transform: translate(0, -25%);
}

.care03item .tbox .cmntit01.mv:after {
    width: 125%;
}

.care03item .tbox .textbox {
    min-height: 20em;
    padding: 3em 0 3em;
    position: relative;
}

.care03item .tbox .textbox:after {
    content: "";
    width: 105vw;
    height: 100%;
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: -50%;
    z-index: -1;
}

.care03item .subtit {
    padding-left: 1.5em;
    position: relative;
}

.care03item.new .subtit {
    padding-left: 0;
    position: relative;
}

.care03item .subtit .num {
    position: absolute;
    top: 0;
    left: 0;
}

.care04box {
    padding: 3em;
    background-color: var(--color02);
}

.care05box {
    position: relative;
}

.care05box:before {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color03);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
}

.care05box .pbox {
    margin: 0;
}

.care05box .tbox {
    margin: 0;
    padding: 3em 0;
}

.care06box .pbox .vw-right {
    padding-right: 10%;
}

.care06box .tbox .cmntit01.mv:after {
    width: 125%;
}

.care06box .tbox .textbox {
    min-height: 20em;
    padding: 3em 0 4em;
    position: relative;
}

.care06box .tbox .textbox:after {
    content: "";
    width: 105vw;
    height: 100%;
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: -50%;
    z-index: -1;
}

@media (max-width: 1024px) {}

@media (max-width: 599px) {
    .care01box .tbox .cmntit04.mv:after {
        width: 100%;
    }

    .care03item {
        margin-top: 0;
    }

    .care03item .tbox .cmntit01.mv:after {
        width: 100%;
    }

    .care03item .pbox {
        -webkit-transform: none;
        transform: none;
    }

    .care03item .tbox .textbox:after {
        right: -5%;
    }

    .care06box .pbox .vw-right {
        padding-right: 0;
    }

    .care06box .tbox .textbox:after {
        right: -5%;
    }
}

/* ------------------------------
 staff
------------------------------ */

.staff01 .titlebox {
    min-width: 500px;
    display: inline-block;
    padding: 3em 1.5em 1.5em 0;
    position: relative;
}

.staff01 .titlebox:before {
    content: "";
    width: 100vw;
    height: calc(100% + 3em);
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.staff01box {
    padding: 1.5em 1.5em 4.5em 3em;
    background-color: var(--color03);
    position: relative;
}

.staff01box:before {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color03);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.staff01box .tbox {
    margin-top: 6em;
}

.staff02box .pbox .vw-right {
    padding-right: 10%;
}

.staff02box .tbox .cmntit01.mv:after {
    width: 125%;
}

.staff02box .tbox .textbox {
    min-height: 20em;
    padding: 3em 0 4em;
    position: relative;
}

.staff02box .tbox .textbox:after {
    content: "";
    width: 105vw;
    height: 100%;
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: -50%;
    z-index: -1;
}

@media (max-width: 1024px) {
    .staff01box .tbox {
        margin-top: 3em;
    }
}

@media (max-width: 599px) {
    .staff01 .titlebox {
        min-width: inherit;
        display: block;
    }

    .staff01box {
        padding: 3em 1.5em 4.5em;
    }

    .staff01box .tbox {
        margin-top: 1em;
    }

    .staff02box .pbox .vw-right {
        padding-right: 0;
    }

    .staff02box .tbox .textbox:after {
        right: -5%;
    }
}

/* ------------------------------
 blog
------------------------------ */

.blog_cont .titlebox {
    min-width: 500px;
    display: inline-block;
    padding: 3em 1.5em 1.5em 0;
    position: relative;
}

.blog_cont .titlebox:before {
    content: "";
    width: 100vw;
    height: calc(100% + 3em);
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.blog_cont .postarea {
    padding: 3em 0 4.5em 3em;
    background-color: var(--color03);
    position: relative;
}

.blog_cont .postarea:after {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color03);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.bloglist {
    margin-top: -1%;
}

.blogitem a {
    height: 100%;
    display: block;
    padding: 1em 1em 3em;
    background-color: white;
}

.blogitem .pbox {
    border: 1px solid var(--color15);
}

.blogsingle {
    padding: 1.5em;
    background-color: white;
}

.blogsingle .flexbox {
    padding-bottom: 2em;
    border-bottom: 2px solid var(--color17);
}

.blogsingle .flexbox .pbox {
    width: 185px;
}

.blogsingle .flexbox .pbox+.tbox {
    width: calc(100% - 220px);
}

.blogsingle .flexbox .pbox .ofiImg {
    border: 1px solid var(--color15);
}

.blogsingle .single {
    padding: 2em 0 6em;
}

.post-recommend .tbox .recommendbox .blogitem {
    padding: 1%;
}

@media (max-width: 1024px) {
    .blog_cont .postarea {
        padding: 3em 0 4.5em 1.5em;
    }

    .bloglist {
        margin-top: 0;
    }

    .post-recommend .tbox .recommendbox .blogitem {
        width: 48%;
    }
}

@media (max-width: 599px) {
    .blog_cont .titlebox {
        min-width: inherit;
        display: block;
    }

    .blogsingle .flexbox .pbox {
        width: 90%;
        max-width: 350px;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
    }

    .blogsingle .flexbox .pbox+.tbox {
        width: 100%;
    }

    .post-recommend .tbox .recommendbox .blogitem {
        padding: 0;
    }
}

/* ------------------------------
 news
------------------------------ */

.news_cont .titlebox {
    min-width: 500px;
    display: inline-block;
    padding: 3em 1.5em 1.5em 0;
    position: relative;
}

.news_cont .titlebox:before {
    content: "";
    width: 100vw;
    height: calc(100% + 3em);
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.news_cont .postarea {
    padding: 3em 0 4.5em 3em;
    background-color: var(--color03);
    position: relative;
}

.news_cont .postarea:after {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color03);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.newslist {
    padding: 3em;
    background-color: white;
}

.newsitem a {
    display: block;
    margin-bottom: 0.5em;
    padding: 1.25em 0;
    border-bottom: 1px dashed;
}

.newssingle {
    margin-bottom: 3em;
    padding: 3em 3em;
    background-color: white;
}

.newssingle .ttlbox {
    padding-bottom: 1.25em;
    border-bottom: 1px dashed;
}

.newssingle .single {
    padding: 2em 0 6em;
}

@media (max-width: 1024px) {
    .news_cont .postarea {
        padding: 3em 0 4.5em 1.5em;
    }
}

@media (max-width: 599px) {
    .news_cont .titlebox {
        min-width: inherit;
        display: block;
    }

    .newslist {
        padding: 3em 1.5em;
    }

    .newssingle {
        padding: 3em 1.5em;
    }
}

/* ------------------------------
 gallery
------------------------------ */

.gallery_cont .titlebox {
    min-width: 500px;
    display: inline-block;
    padding: 3em 1.5em 1.5em 0;
    position: relative;
}

.gallery_cont .titlebox:before {
    content: "";
    width: 100vw;
    height: calc(100% + 3em);
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.gallery-post {
    padding: 3em 0 4.5em 3em;
    background-color: var(--color03);
    position: relative;
}

.gallery-post:after {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color03);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.galleryitem a {
    display: block;
}

.gallerysingle {
    padding: 3em;
    background-color: white;
}

.gallerysingle .subPicItem {
    width: 30%;
    margin: 4% 0;
    cursor: pointer;
}

.gallerysingle .tbox {
    margin-top: 3em;
}

.gallerysingle .tbox .tit {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    position: relative;
}

.gallerysingle .tbox .tit.fead-mv {
    opacity: 1;
}

.gallerysingle .tbox .tit.mv:after {
    width: 150%;
}

.gallerysingle .tbox .tit:after {
    content: "";
    width: 0;
    height: 2px;
    border-bottom: 2px solid var(--color01);
    -webkit-transition: 0.8s;
    transition: 0.8s;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
    position: absolute;
    bottom: 0;
    right: 0;
}

.gallerysingle .tbox .comment dt {
    display: inline-block;
    margin-bottom: 1.5em;
    padding-right: 1.5em;
    border-right: 2px solid;
}

@media (max-width: 1024px) {
    .gallery-post {
        padding: 3em 0 4.5em 1.5em;
    }
}

@media (max-width: 599px) {
    .gallery_cont .titlebox {
        min-width: inherit;
        display: block;
    }

    .gallerysingle {
        padding: 3em 1.5em;
    }

    .gallerysingle .tbox {
        margin-top: 1.5em;
    }

    .gallerysingle .tbox .tit.mv:after {
        width: 100%;
    }
}

/* ------------------------------
 voice
------------------------------ */

.voice_cont .titlebox {
    min-width: 500px;
    display: inline-block;
    padding: 3em 1.5em 1.5em 0;
    position: relative;
}

.voice_cont .titlebox:before {
    content: "";
    width: 100vw;
    height: calc(100% + 3em);
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.voice-post {
    padding: 3em 0 4.5em 3em;
    background-color: var(--color03);
    position: relative;
}

.voice-post:after {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color03);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.voicelist {
    padding: 3em;
    background-color: white;
}

.voiceitem {
    display: block;
    padding: 1.5em 1.5em 3em;
    border: 1px solid var(--color15);
}

.voicesingle {
    padding: 3em;
    background-color: white;
}

.voicesingle .pbox .ofiImg:before {
    content: "\f002";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    bottom: 0.5em;
    right: 0.75em;
    z-index: 1;
}

.voicesingle .tbox .ttlbox {
    margin-bottom: 2em;
    padding-bottom: 2em;
    border-bottom: 1px dashed;
}

@media (max-width: 1024px) {
    .voice-post {
        padding: 3em 0 4.5em 1.5em;
    }
}

@media (max-width: 599px) {
    .voice_cont .titlebox {
        min-width: inherit;
        display: block;
    }

    .voicelist {
        padding: 3em 1.5em;
    }

    .voicesingle {
        padding: 3em 1.5em;
    }
}

/* ------------------------------
 contact
------------------------------ */

.contact01box .tbox .cmntit01.mv:after {
    width: 125%;
}

.contact01box .pbox .vw {
    width: 125%;
    margin-left: -25%;
}

.contact01box .tbox .tel a {
    display: inline-block;
    padding-left: 1em;
    position: relative;
}

.contact01box .tbox .tel a:before {
    content: "";
    width: 0;
    height: 0;
    border-width: 0.4em 0 0.4em 0.4em;
    border-style: solid;
    border-color: transparent transparent transparent currentColor;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    left: 0;
}

.contact01box .tbox .more a {
    text-decoration: underline;

    text-underline-position: under;
}

.contact02 .relative {
    overflow: visible;
    background-color: var(--color03);
}

.contact02 .relative .ofiImg.tl {
    max-width: 300px;
}

.contact02 .relative .ofiImg.tl img {
    -o-object-position: right center;
    object-position: right center;
    background-position: right center !important;
}

.contact02box {
    padding: 3em 3em 3em 25%;
}

.contact02box .tbox {
    width: 74%;
}

.contact02box .pbox {
    width: 20%;
    -webkit-transform: translate(0, -75%);
    transform: translate(0, -75%);
}

.contact04box {
    padding: 3em;
    border: 1px solid;
}

.contact04box .list {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.contact04box .item {
    padding-left: 1.5em;
    position: relative;
}

.contact04box .item:before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    background-color: var(--color01);
    position: absolute;
    top: 1em;
    left: 0;
}

.contact05item a {
    display: block;
    padding: 1.5em;
    background-color: white;
}

.contact05item [class*="heightLine"] {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    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;

    -ms-align-items: center;
}

@media (max-width: 1024px) {}

@media (max-width: 599px) {
    .contact01box .tbox .cmntit01.mv:after {
        width: 100%;
    }

    .contact01box .pbox .vw {
        width: 100%;
        margin-left: 0;
    }

    .contact02 .relative .ofiImg.tl {
        max-width: 100%;
        height: auto;
        position: static;
    }

    .contact02box {
        padding: 3em 1.5em 3em;
    }

    .contact02box .tbox {
        width: 100%;
        margin-bottom: 1.5em;
    }

    .contact02box .pbox {
        width: 100%;
        -webkit-transform: none;
        transform: none;
    }

    .contact04box {
        padding: 3em 1.5em;
    }
}

/* ------------------------------
 kids_cut
------------------------------ */

.kids_cut01box .tbox .cmntit01.mv:after {
    width: 125%;
}

.kids_cut01box .pbox .vw {
    width: 125%;
    margin-left: -25%;
}

.kids_cut02box .introbox {
    max-width: 642px;
    margin-left: auto;
    margin-right: auto;
}

.kids_cut02box .introbox .ofiImg.tc:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

.kids_cut02box .introbox .ofiImg.tc:after {
    content: "";
    width: calc(100% - 3em);
    height: calc(100% - 3em);
    border: 2px solid white;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

.kids_cut02box .introbox .tbox {
    min-height: 27em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -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;
    padding: 3em 1.5em;
}

.kids_cut03box .pbox .vw-right {
    padding-right: 10%;
}

.kids_cut03box .tbox .cmntit01 {
    width: 140%;
}

.kids_cut03box .tbox .textbox {
    min-height: 20em;
    padding: 3em 0 4em;
    position: relative;
}

.kids_cut03box .tbox .textbox:after {
    content: "";
    width: 105vw;
    height: 100%;
    background-color: var(--color02);
    position: absolute;
    top: 0;
    right: -50%;
    z-index: -1;
}

.kids_cut04box {
    position: relative;
}

.kids_cut04box:before {
    content: "";
    width: 100vw;
    height: 100%;
    background-color: var(--color03);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
}

.kids_cut04box .pbox {
    margin: 0;
}

.kids_cut04box .tbox {
    margin: 0;
    padding: 3em 0;
}

@media (max-width: 1024px) {}

@media (max-width: 599px) {
    .kids_cut01box .tbox .cmntit01.mv:after {
        width: 100%;
    }

    .kids_cut01box .pbox .vw {
        width: 100%;
        margin-left: 0;
    }

    .kids_cut02box .introbox .ofiImg.tc:after {
        width: calc(100% - 1.5em);
        height: calc(100% - 1.5em);
    }

    .kids_cut02box .introbox .tbox {
        min-height: 17em;
    }

    .kids_cut03box .tbox .cmntit01 {
        width: 100%;
    }

    .kids_cut03box .pbox .vw-right {
        padding-right: 0;
    }

    .kids_cut03box .tbox .textbox:after {
        right: -5%;
    }
}

/* 詳細ページの本文 */
.detail-content h2 {
    margin: 1.5em 0 1em;
    padding: 0.2em 0.5em;
    font-weight: bold;
    font-size: clamp(1.375rem, 1.15rem + 0.97vw, 1.875rem);
    border-bottom: 2px solid var(--color01);
}

.detail-content h3 {
    margin: 1.5em 0 1em;
    padding-left: 0.5em;
    font-size: clamp(1.25rem, 1.02rem + 0.97vw, 1.75rem);
    border-left: 10px solid var(--color01);
}

.detail-content h4 {
    margin: 1.5em 0 1em;
    padding: 0.2em;
    font-weight: bold;
    font-size: clamp(1.125rem, 0.9rem + 0.97vw, 1.625rem);
    border-bottom: 2px dotted var(--color01);
}

.detail-content ol {
    list-style: auto;
    list-style-position: outside;
    margin: 1em 0;
    padding-left: 2em;
}

.detail-content ul {
    list-style: inherit;
    list-style-position: outside;
    margin: 1em 0;
    padding-left: 2em;
}

.detail-content iframe[src*="youtube"] {
    max-width: 100%;
    margin: 1em 0;

    aspect-ratio: 16 / 9;
}

/* 求人情報 */
.list-recruit {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.list-recruit li {
    width: calc(94% / 3);
    margin: 1%;
}

.list-recruit li a {
    height: 100%;
    display: block;
    overflow: hidden;
    padding: 2em 1em;
    border-radius: 1em;
    background-color: var(--color11);
}

.list-recruit li a .img {
    width: 100%;
    display: block;
    overflow: hidden;
    border-radius: 1em;
    position: relative;
}

.list-recruit li a .img::after {
    content: "";
    display: block;
    padding-top: 70%;
}

.list-recruit li a .img img {
    width: 100%;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    font-family: "object-fit: cover; object-position: 50% 50%;";
    position: absolute;
    top: 0;
    left: 0;
}

.list-recruit li a .recruit-job {
    display: inline-block;
    margin: 1px;
    padding: 0.25em 1em;
    font-size: 0.75em;
    color: white;
    line-height: 1.1;
    border-radius: 0.5em;
    background-color: var(--color01);
}

.list-recruit li a .recruit-title {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--color01);
}

.recruit-detail {
    padding: 3em 2em;
    border-radius: 2em;
    background-color: var(--color02);
}

.recruit-detail-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.recruit-detail-list+.recruit-detail-list {
    border-top: 1px solid var(--color01);
}

.recruit-detail-list>dt,
.recruit-detail-list>dd {
    padding: 1em;
}

.recruit-detail-list>dt {
    width: 20%;
    font-weight: bold;
    color: var(--color01);
}

.recruit-detail-list>dd {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.list-skill+.list-skill {
    margin-top: 0.5em;
}

.list-skill {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.list-skill dt {
    width: 20%;
    font-weight: bold;
}

.list-skill dd {
    width: 10%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

@media (max-width: 1024px) {
    .list-skill dt {
        width: 30%;
    }
}

@media (max-width: 599px) {

    .recruit-detail-list>dt,
    .recruit-detail-list>dd {
        width: 100%;
        padding: 0.5em;
    }

    .recruit-detail-list>dd {
        padding-top: 0;
        padding-left: 1.5em;
    }

    .list-skill dt,
    .list-skill dd {
        width: 100%;
    }

    .list-skill dd {
        padding-left: 1em;
    }
}

/* 見たまま編集 */
[data-element-id] .uk-slideshow>li {
    opacity: 1;
}

[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;
    border: 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: white;
    line-height: 1.2;
    text-align: center;
    background-color: #8b008b;
    position: absolute;
    top: 0;
    left: 0;
}

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

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

[data-element-id] .hfix {
    max-width: 410px;
    margin-left: auto;
    position: static;
}

[data-element-id] .kids_cut02box .introbox .tbox,
[data-element-id] .ladies_shaving03box .introbox .tbox,
[data-element-id] .home07item .tbox,
[data-element-id] .home05item .tbox {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: auto;
    margin: auto;
}

[data-element-id] .home07item .tboxin,
[data-element-id] .home05item .tboxin {
    margin: 4vw;
    padding: 1em;
}

[data-element-id] .tabBox {
    border: 5px solid lightgreen;
}

[data-element-id] #gnav li.pcnone {
    display: block;
}

[data-element-id] #gnav li.pcnone:before {
    content: "SP用";
    width: 100%;
    display: block;
    padding: 5px;
    font-weight: bold;
    font-size: 12px;
    color: red;
    background: #555;
    bottom: 100%;
}

[data-element-id] .glist .pullbox .pulllist {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    position: relative;
}

[data-element-id] .glist .pullbox .pulllist li {
    width: 100%;
}


.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;
}
}

 [data-element-id] .fead-up {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  
   [data-element-id] .list-recruit > div{
     display: contents;
   }
  
.calendar iframe[src*="calendar"]{
  height: 450px;
}

.text-ss{
      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, 0 0 2px white, 0 0 2px white;
}

.no-out .no1,
.no-out .no2,
.no-out2 .no2{
  display: none;
}
.ofiImg.t55 img,
.ofiImg.t60 img{
      object-position: center;
}

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

[data-element-id] .up-d-none:before {
    content: "モバイル用";
    display: block;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #000;
}

[data-element-id] .no-out .no1,
[data-element-id] .no-out .no2,
[data-element-id] .no-out2 .no2{
   display: block;
    border: solid 3px #000;
    position: relative;
}
[data-common-area]{
      position: relative;
}
[data-common-area]:hover:before {
    position: absolute!important;
    bottom: 100%;
    left: 50%;
    box-sizing: border-box;
    padding: 5px;
    min-width: 200px;
    width: 100%;
    background: #555;
    color: #fdc44f;
    content: "共通要素です。";
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.uk-text-danger{
  width: 100%;
}
[data-hide-element]{
  padding-top: 28px;
}
[data-hide-element]:before{
  top: 28px!important;
}

.gnavinn [data-hide-element]{
  padding-top: 0px;
}
.gnavinn [data-hide-element]:before{
  top: 0px!important;
      position: relative;
}

.footer-right [data-hide-element]{
  padding-top: 0px;
}
.footer-right [data-hide-element]:before{
  top: 0px!important;
  position: relative;
  transform: none;
  width: 100%;
  display: block;
}

/* 2023/11/09 */
.caarea.w-100 {
    width: 100%;
}
.postcont.w-100 {
    width: 100%;
}

/* 2023/12/13 */

.datecheckarea{
  display: none;
}


/* 2024/02/29 */
.hfixitem .line-icon {
    width: 40px;
    margin: 5px auto 0;
}

.hfixitem .line-icon a {
    padding: 0;
    height: auto;
}

.btn-03{
  width: 550px;
}

.btn-03 li{
  width: 33%;
}

.hfix02{
  border-radius: 10px 10px 0 0;
}

.form-item img{
  width: 25px;
    margin-right: 7px;
}

.form-item a{
  color: #085908e8;
}

.tel img{
  width: 60px;
}

.line-icon img{
  width: 49px;
}

.line-icon p{
  text-align: center;
  padding-top: 5px;
  font-size: 15px;
}

.hfixitem a {
    font-size: 15px;
}

.h-webbtn img{
  width: 60px;
}

.h-webbtn a{
  display: block;
  border-radius: 0 10px 0 0;
}

.tel-box{
  background: #c3dcfb;
  padding: 14px 0;
  border-radius: 10px 0 0 0;
}

.line-icon{
  background: #f3e8c9;
  padding: 16px 0px 15px;
    margin-top: 0px;
}

.line-icon a{
  padding: 0px 67px;
}



@media (max-width: 599px) {
.btn-03 {
    width: 100%;
}

.tel img {
    width: 40px;
}

.h-webbtn img {
    width: 42px;
}

.line-icon p {
    font-size: 13px;
}

.hfixitem a {
    font-size: 12px;
}

.line-icon a{
  display: inline;
  padding: 0px 46px;
}

.line-icon img {
    width: 42px;
}

.line-icon{
    background: #f3e8c9;
    padding: 8px 0px;
}

}


a[href*="tel"],
button[href*="tel"] {
  pointer-events: none;
}
@media (max-width: 1024px) {
  a[href*="tel"],
  button[href*="tel"] {
    pointer-events: initial !important;
  }
}

.tel-box img{
  width: 55px;
}

.h-webbtn img {
    width: 60px;
    margin-top: 10px;
}

@media (max-width:599px) {
.tel-box img {
    width: 43px;
}

.h-webbtn img {
    margin-top: 10px;
    width: 45px;
}

.h-webbtn p{
  margin-top: 8px;
}

.line-icon {
    background: #f3e8c9;
    padding: 10px 0px;
}

.hfixitem a {
    font-size: 12px;
}

.tel-box {
    background: #c3dcfb;
    padding: 8px 0 0;
    border-radius: 10px 0 0 0;
}

.tel-box img {
    width: 41px !important;
}

.line-icon {
    background: #f3e8c9;
    padding: 4px 0px!important;
}

.line-icon img {
    width: 35px;
    margin-top: 6px!important;
}

.line-icon p {
    font-size: 12px!important;
}

.h-webbtn img {
    margin-top: 5px!important;
    width: 41px!important;
}

.h-webbtn p {
    margin-top: 0px!important;
    font-size: 12px!important;
    margin-bottom: 8px!important;
}
}

/* 2026/02/10 */
.information-box {
  padding: 2%;
  border: 1px solid #a68b62;
}
.information-box a { 
  color: #127e31;
  font-weight: bold;
}
.information-box a:hover { 
  opacity: 0.6;
}

@media (max-width: 1024px){
  .information-box {
    padding: 3%;
  }
}