@charset "utf-8";
/*
Theme Name: kataun
Theme URI: http://kataun-maintenance.com/
Description: pcbrain
Version: 1.0
Author: pcbrain.co.jp
*/

/* YUI fonts.css - font size設定
----------------------------------------------------------- */
@import url("css/cssfonts-min.css");

/* default style - リセット及びbody基本設定
----------------------------------------------------------- */
@import url("css/default.css");

/* all style
----------------------------------------------------------- */
@import url("css/style.css");
@import url("setting.css");

:root {
    --header-height: 142px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
}

body {
    font-size: 18px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100% !important;
}

body *,
body *::before,
body *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 0;
}

@media screen and (max-width : 1100px) {
    .inner {
        max-width: calc(96vw);
    }

    .inner img {
        max-width: 100%;
        height: auto;
    }
}

article {
    padding: 0 0 20px;
}

a:link,
a:visited {
    text-decoration: none;
    transition: 0.3s;
}

/* -------------------------
button
------------------------- */

#main a.btn,
a.btn,
.btn{
    margin: clamp(30px, 4vw, 60px) auto 0;
    min-width: min(100%, 340px);
    padding: 20px 3em 23px 2em;
    width: fit-content;
    border-radius: 100vh;
    background:  var(--sub-color01);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    position: relative;
    box-shadow:
        0 5px 15px rgba(3, 3, 3, 0.15);
}

.btn::after{
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.4s ease;
    font-size: 20px;
}

#main a.btn:hover::after,
a.btn:hover::after{
    transform: translateY(-50%) translateX(10px);
}
.btn:has(a.mapLink) {
    margin-top: 1rem;
}
@media (max-width:767px){
    #main a.btn,
    a.btn{
        margin-top: 40px;
        width: 100%;
    }
}

a.mapLink {
    min-width: 0;
}

.radiusImg {
    border-radius: 20px;
}

.txtCenter {
    text-align: center;
}

.emStr {
    color: var(--black) !important;
    font-weight: 700 !important;
    text-decoration: underline;
    text-decoration-color: #f7c0a5;
    text-decoration-thickness: 7px;
    text-underline-offset: -3px;
}
.ltlSt{
    font-size: 0.8em;
}
.underline02 {
    text-decoration: underline;
    text-decoration-color: var(--red);
    text-decoration-thickness: 7px;
    text-underline-offset: -3px;
}

.mkr-y {
    position: relative;
    background-image: linear-gradient(transparent 80%, #fdff5d 80%, #fdff5d 100%);
}

.rndBoxList li,
.rndBox {
    background-color: var(--black);
    padding: 5px 10px;
    color: var(--white);
    border-radius: 20px;
    text-align: center;
    font-weight: 700;
}

.rndBox {
    width: fit-content;
    min-width: 80%;
    font-size: 36px !important;
    margin: 0 auto !important;
}

.rndBoxList {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    counter-reset: count-rndlist;
}

.rndBoxList li {
    counter-increment: count-rndlist;
    width: calc((100% - 20px) / 2);
    font-size: 24px;
}

.rndBoxList li::before {
    content: counter(count-rndlist);
    border-radius: 100vh;
    height: 24px;
    width: 24px;
    color: var(--black);
    background-color: var(--white);
    display: inline-block;
    margin-right: 5px;
    font-size: 20px;
    line-height: 24px;
}

.rndBoxList.clm03 li {
    width: calc((100% - 40px) / 3);
}

.fadeIn,
.fadeInUp,
.fadeInUpLeft,
.fadeInUpRight,
.fadeInBottomLeft,
.fadeInBottomRight {
    opacity: 0;
    transition: 0.7s;
}

.fadeIn.is-show,
.fadeInUp.is-show,
.fadeInUpLeft.is-show,
.fadeInUpRight.is-show,
.fadeInBottomLeft.is-show,
.fadeInBottomRight.is-show {
    transform: translate(0, 0);
    opacity: 1;
}

.fadeInUp {
    transform: translate(0, 15%);
}

.fadeInUpLeft {
    transform: translate(-20%, -20%);
}

.fadeInUpRight {
    transform: translate(20%, -20%);
}

.fadeInBottomLeft {
    transform: translate(-20%, 20%);
}

.fadeInBottomRight {
    transform: translate(20%, 20%);
}


.tel,
#main .tel {
    font-size: 30px;
}

.tel span.tel-link {
    font-family: var(--en-font-family);
    font-weight: 600;
    font-size: 40px;
    line-height: 1;
    color: var(--main-color01);
    display: flex;
    align-items: center;
    gap: 5px;
}

.tel span.tel-link a:link,
.tel span.tel-link a:visited {
    text-decoration: none;
    color: var(--main-color01);
}

.tel span.tel-open {
    font-size: 16px;
    font-weight: 400;
}

.tel img {
    vertical-align: baseline;
}

.en {
    font-family: var(--en-font-family);
    font-weight: 500 !important;
    text-transform: capitalize;
}

.tbblock,
.spblock {
    display: none !important;
}

img {
    image-rendering: -webkit-optimize-contrast;
}


.time {
    display: block;
    color: var(--black);
    width: fit-content;
    font-size: 14px;
    font-weight: 400;
}

.tagList{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.cats a,
.cats span,
.tagList li,
.tags{
    background:var(--sub-color02);
    font-size:13px;
    padding:4px 12px;
    border-radius:3px;
    color:var(--black);
}
.tagList li a,
.tags a{
    color:var(--black);
}

@media screen and (max-width: 1100px) {
    .tbblock {
        display: block !important;
    }
    .tbcut {
        display: none !important;
    }
}
@media screen and (max-width: 767px) {
    .spblock {
        display: block !important;
    }
    .spcut {
        display: none !important;
    }
}

/* -----------------------------------------------------------
    header
----------------------------------------------------------- */
header#header {
    width: 100%;
}

header .inner {
    width: 100%;
    max-width: none;
    display: flex;
    align-items: center;
    overflow: visible;
    padding:10px 85px 30px 30px;
    margin: 0;
    gap:40px
}
header .hdrLogo {
    flex-shrink:0;
    font-size: 10px;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

header#header .hdrLogo img {
    width: 392px;
}

header .hdrLogo img {
    display: block;
}
header .hdrNv{
    margin-left:auto;
}

header .inner .hdrTelContact {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    margin: 0;
    flex-shrink:0;
}

header .inner .hdrTel {
    display: flex;
    align-items: center;
    line-height: 1;
    padding: 0;
    color: var(--black);
}

header .inner .hdrTel .tel {
    color: var(--black);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

header .inner .hdrTel .tel svg {
    width: 19px;
    height: auto;
    display: inline-block;
}

header .inner .hdrTel .tel-link {
    font-size: 26px;
    font-weight: 600;
}

header .inner .hdrTel .tel-open {
    font-size: 14px;
}



/* -----------------------------------------------------------
    nav
----------------------------------------------------------- */

header nav #gNav {
    display: flex;
    font-size: clamp(15px, 1.1vw, 18px);
    gap: 2em;
}

header nav #gNav * {
    line-height: 1.0;
}

header nav #gNav>li {
    display: block;
    text-align: center;
    position: relative;
}


header nav #gNav>li>a:link,
header nav #gNav>li>a:visited {
    color: var(--black);
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    padding: 0;
}
header nav #gNav>li>a:hover {
    color: var(--main-color01);
}

#top header nav #gNav>li>a:link,
#top header nav #gNav>li>a:visited {
    transition: color 0.3s ease;
}


header nav #gNav>li ul {
    opacity: 0;
    pointer-events: none;
    background: var(--sub-color01);
    position: absolute;
    z-index: 100;
    width: 300px;
    margin-top: -5px;
    padding: 20px 10px 5px 30px;
    box-sizing: border-box;
    text-align: left;
}

header nav #gNav>li:hover ul {
    opacity: 1;
    transition: opacity 1.0s;
    pointer-events: auto;
}

header nav #gNav>li ul li {
    display: inline-block;
    margin: 0 1.5em 1.0em 0;
}

header nav #gNav>li ul li a:link,
header nav #gNav>li ul li a:visited {
    color: var(--white);
}

header nav #gNav>li ul li a:hover {
    opacity: 0.7;
    transition: 0.6s;
}

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

    header#header .hdrLogo img {
        width: 260px;
        max-width: 100%;
    }
    header nav #gNav {
        gap: 0.8em;
        align-items: center;
    }

}

@media screen and (max-width : 1500px) {
    header .inner {
        padding-left:1vw;
        gap:1vw;
    }
}
@media (max-width:1380px){

    header nav #gNav{
        display:none;
    }
}
@media screen and (max-width: 1100px) {
    header#header .hdrLogo {
        width: auto;
        padding: 5px;
    }

    header#header .hdrLogo img {
        height: 50px;
        width: auto;
    }

    header .inner {
        padding: 0;
    }
    header .hdrNv{
        align-self: flex-start;
    }

    header .inner .hdrTelContact {
        display: none;
    }
}
@media screen and (max-width: 767px) {
    header#header {
        padding-bottom:10px;
    }
    header#header .hdrLogo {
        width: min(60%, 400px);
    }
        header#header .hdrLogo img {
        height: auto;
    }
    header#header .headTxt
    {
        display:none;
    }
}

/* -----------------------------------------------------------
    タブレット用nav
----------------------------------------------------------- */
header .inner #spHdrBtn {
    display: flex;
    justify-content: end;
}

.spmenuBtn {
    position: fixed;
    top: 0;
    right: 0;
}

.telBtn {
    padding-right: 68px;
    display: none;
}

.telBtn a,
.spmenuBtn {
    text-align: center;
    font-weight: bold;
    display: inline-block;
    height: 70px;
    width: 70px;
    vertical-align: middle;
    line-height: 1;
    box-sizing: border-box;
}

.telBtn a {
    font-size: 26px;
    background: linear-gradient(180deg, var(--main-color01), #a5ce6f);
    padding-top: 18px;
    color: var(--white);
    text-decoration: none;
    border-radius: 0 0 0 10px;
}

.spmenuBtn {
    top: 0;
    right: 0;
    z-index: 99999;
    background: var(--black);
    cursor: pointer;
    position: fixed;
    border-radius: 0 0 0 10px;
}

.spmenuBtn span {
    display: inline-block;
    position: absolute;
    height: 1px;
    width: auto;
    background-color: var(--white);
    transition: all .4s;
    left: 12px;
    width: 40px;
}

.spmenuBtn span:nth-of-type(1) {
    top: 26px;
}

.spmenuBtn span:nth-of-type(2) {
    top: 40px;
}

.spmenuBtn.active span:nth-of-type(1) {
    top: 23px;
    left: 15px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}

.spmenuBtn.active span:nth-of-type(2) {
    top: 35px;
    left: 15px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}

#spGNav {
    position: fixed;
    right: -120%;
    display: block;
    z-index: 5555;
    background: rgba(255, 255, 255, 0.95);
    width: 1200px;
    max-width: 100%;
    top: 0;
    transition: all 0.6s;
    box-sizing: border-box;
    padding: 4% 8%;
    box-shadow: -6px 6px 12px rgba(0, 0, 0, 0.12);

    display: flex;
    gap: 80px;
}

#spGNav.navActive {
    right: 0;
}
#spGNav .navCol {
    flex: 1;
}

#spGNav .navCol > li + li {
    margin-top: 40px;
}

#spGNav .navCol > li > a {
    display: block;
    padding-bottom: 12px;
    border-bottom: 1px solid #ccc;

    font-size: 22px;
    color: var(--black);
    font-weight: 500;
}

#spGNav .navCol > li > a::before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;

    display: inline-block;
    margin-right: 0.6em;

    color: var(--main-color01);
    font-size: 0.8em;
}


#spGNav .childMenu {
    margin-top: 20px;
    margin-left: 2em;
}
#spGNav .childMenu li {
    margin-top: 12px;
}
#spGNav .childMenu li a{
    color: var(--black);
}

#spGNav li a:hover {
    text-decoration: none;
    color: var(--main-color01);

}

@media screen and (max-width : 1100px) {
    #spGNav {
        flex-direction: column;
        gap: 0;
    }
    #spGNav .navCol > li + li {
        margin-top: 0;
    }
    #spGNav .childMenu {
        margin-top: 0;
        margin-bottom: 5px;
    }
    #spGNav .childMenu li {
        margin-top: 5px;
    }
    .spmenuBtn {
        border-radius: 0;
    }
}
@media screen and (max-width : 767px) {

    header .inner .telBtn {
        display: block;
   }
}

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

footer {
    padding-top: clamp(270px, 30vw, 400px);
    padding-bottom: 50px;
    position: relative;
    
    background: linear-gradient(rgba(17, 168, 76, 0.8),rgba(17, 168, 76, 0.8)), url(./img/bg_footer.png) right bottom no-repeat;
    color: var(--white);
    margin-top: 300px;
}

/* -----------------------------------------------------------
footer::before {
    content: "";
    background-color: var(--sub-color02);
    height: 360px;
    width: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
}

footer:not(:has(.inner.ftrContact)) {
    padding-top: 15px;
}

footer:not(:has(.inner.ftrContact))::before {
    display: none;
}
----------------------------------------------------------- */

footer a,
footer a:link,
footer a:visited {
    text-decoration: none;
}

footer .ftrScroll {
    position: fixed;
    top: 100px;
    right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}

footer .ftrScroll li a {
    color: var(--white);
    background-color: var(--main-color01);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 180px;
    width: 70px;
    gap: 5px;
    transition: none;
    position: relative;
}
footer .ftrScroll li a.ftrScrollContact {
    background-color: var(--sub-color01);
}

footer .ftrScroll li a.ftrScrollRequest {
    background-color: var(--main-color01);
}
footer .ftrScroll li a.ftrScrollFaq {
    background-color: var(--sub-color04);
    color: var(--main-color01);
}
footer .ftrScroll li a span {
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    font-weight: 600;
    font-size: 16px;
}
footer .ftrScroll li a::before {
    content: "";
    margin: 5px 0;
    display: block;
    background-size: cover;
}
footer .ftrScroll li a.ftrScrollContact::before {

    content: "";
    display: block;
    width: 25px;
    height: 18px;

    background-color: var(--white);

    -webkit-mask: url(./img/ico_contact.svg) no-repeat center / contain;
    mask: url(./img/ico_contact.svg) no-repeat center / contain;
}

footer .ftrScroll li a.ftrScrollRequest::before {
    background-repeat: no-repeat;
    width: 22px;
    height: 24px;
    background-color: var(--white);

    -webkit-mask: url(./img/ico_request.svg) no-repeat center / contain;
    mask: url(./img/ico_request.svg) no-repeat center / contain;
}

footer .ftrScroll li a:hover {
    opacity: 0.7;
    transition: 0.6s;
}


footer .ftrContent {
    margin-top: 180px;
    margin-bottom: 100px;
    display: flex;
    justify-content: space-between;
    color: var(--white);
}
footer .ftrContent a,
footer .ftrContent a:link,
footer .ftrContent a:visited {
    color: var(--white);
}

footer .ftrHead {
    
}

.ftrLogo {
    width: clamp(220px, 30vw, 370px);
    display: block;
    padding: 20px 20px 15px;
    background: var(--white);
    border-radius: 100vh;
    margin-bottom: 1.5em;
}

.ftrLogo img {
    width: 100%;
}

.ftrLogo+h3 {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
}


.ftrNav {
    display: flex;
    flex-wrap: wrap;
    gap:clamp(20px,4vw,70px);
}

.ftrNav ul {
    font-size: 18px;
    width:max-content;
}

.ftrNav ul li a::before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    margin-right: 0.6em;
    font-size: 0.8em;
}
.ftrNav ul li a:hover {
    opacity: 0.8;
}
.ftrNav ul li + li {
    margin-top: 30px;
}

footer .copyRight {
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
}
footer .ftrFab {
    display: none;
}

.ftrContact{
    position: relative;
    margin-top: -550px;
    box-shadow:0 30px 40px rgba(72, 156, 0, 0.2)
}
footer .ftrContact a,
footer .ftrContact a:link,
footer .ftrContact a:visited {
    color: var(--black);
}

.ftrContactTtl{
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.ftrContactBox{
    background: var(--white);
    border-radius: 0 0 20px 20px;
    padding: 120px 10px 50px;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.ftrContactItem{
    flex: 1;
    text-align: center;
    color: var(--black);
    position: relative;
}

.ftrContactItem + .ftrContactItem{
    border-left: 1px solid #ccc;
}

.ftrContactItem .icon{
    width: 100px;
    height: 100px;

    margin: 0 auto 30px;

    border-radius: 50%;
    background: var(--main-color01);
    color: var(--white);


    display: flex;
    align-items: center;
    justify-content: center;
}

.ftrContactItem .icon img,
.ftrContactItem .icon svg{
    max-width: 40px;
    max-height: 40px;
}
.ftrContactItem .icon svg{
    width: 40px;
    height: 40px;
    display: block;
    overflow: visible;
}

.ftrContactItem .icon svg *{
    max-width: none;
    max-height: none;
}
.ftrContactItem p{
    font-size: 22px;
    font-weight: 500;
}

.ftrContacttelBox{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tel .ftrContacttelBox span.tel-link{
    font-size: clamp(22px, 3vw, 30px);
}

.ftrContactItem .time{
    margin-top: 15px;
    font-size: 16px;
    line-height: 2;
}

.ftrBnrGrid-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.ftrBnrGrid-links li {
    position: relative;
    border-radius: 11px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}
.ftrBnrGrid-links li::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 4px;
    background: linear-gradient(180deg, var(--sub-color03) 50%, var(--sub-color02) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.ftrBnrGrid-links .item {
  position: relative;
  border-radius: 7px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: clamp(120px, 18vw, 260px);
  padding: 20px;
  color: #fff;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  background-repeat: no-repeat;
  margin: 4px;
}
.ftrBnrGrid-links .item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  pointer-events: none;

  background: linear-gradient(
    to top,
    rgba(150, 255, 150, 0.35),
    rgba(255, 255, 150, 0.0)
  );

  z-index: 1;
}
.ftrBnrGrid-links .item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  transition: background 0.3s ease;
}

.ftrBnrGrid-links .item:hover::before {
  background: none;
}

.ftrBnrGrid-links .text-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.ftrBnrGrid-links h3 {
  margin: 0 0 5px;
  font-size: clamp(36px, 6vw, 80px);
}

.ftrBnrGrid-links p {
  margin: 0;
  font-size: clamp(16px, 2vw, 26px);
}

.ftrBnrGrid-links .reason {
  background-image: url("./img/bg_ftrBnr_reason.png");
  background-size: 80% auto;
  background-position: right center;
}
.ftrBnrGrid-links .column {
  background-image: url("./img/bg_ftrBnr_column.png");
  background-position: right center;
}

.ftrBnrGrid-links .service {
  background-image: url("./img/bg_ftrBnr_service.png");
  background-size: 80% auto;
  background-position: left center;
}

.ftrBnrGrid-links .works {
  background-image: url("./img/bg_ftrBnr_works.png");
}

.ftrBnrGrid-links .faq {
  background-image: url("./img/bg_ftrBnr_faq.png");
}

.pageTop {
    position: fixed;
    right: 0;
    bottom: 0;
    width: fit-content;
    height: fit-content;
    z-index: 100;
    opacity: 0;
    transition: all 0.5s ease;
}

.scrolled .pageTop {
    opacity: 1;
}

.pageTop a {
    display: block;
    background: var(--black);
    border-radius: 20px 20px 0 0;
    transition: all 0.3s ease;
}

.pageTop a:hover {
    background: var(--main-color01);
}
#snavi select {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    margin: 30px auto;
    display: block;
    padding: 10px;
    border: solid 3px var(--main-color01);
    border-radius: 8px;
    width: 95%;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    background: var(--white) !important;
    background-size: 18px !important;
    color: var(--black) !important;
}

@media screen and (max-width: 1100px) {
    footer .ftrContent {
        padding-bottom: 100px;
        flex-direction: column;
        gap: 50px;
    }
    footer .ftrScroll {
        display: none;
    }

    .pageTop {
        bottom: 72px;
    }

    footer .ftrFab {
        display: block;
        position: fixed;
        bottom: 70px;
        right: 0;
        z-index: 1000;

        bottom: 0;
        left: 0;
    }

    footer .ftrFab ul {
        display: flex;
        justify-content: space-between;
        gap: 0 1px;
    }

    footer .ftrFab li {
        flex: 1;
        display: block;
    }

    footer .ftrFab li img {
        display: block;
        margin: 0 auto;
    }

    footer .ftrFab li.spnone {
        display: none;
    }

    footer .ftrFab li a i {
        display: block;
        font-size: 2.0rem;
    }

    footer .ftrFab li a {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--main-color01);
        color: var(--white);
        text-decoration: none;
        font-weight: 400;
        font-size: 16px;
        padding: 10px 5px;
        line-height: 1.3;
        height: 100%;
    }

    footer .ftrFab li.ftrFabContact a {
        background-color: var(--sub-color01);
    }

    footer .ftrFab li a::before {
        content: "";
        margin: 5px auto;
        display: block;
    }

    footer .ftrFab li.ftrFabContact a::before {
        width: 25px;
        height: 18px;
        background: center url(./img/ico_contact.png) no-repeat;
    }

    footer .ftrFab li.ftrFabRequest a::before {
        width: 22px;
        height: 24px;
        background: center /cover url(./img/ico_request.png) no-repeat;
    }

    footer .ftrFab li.ftrFabFaq a {
        background-color: var(--sub-color04);
        color: var(--main-color01);
    }

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

    .ftrContactBox{
        padding: 100px 40px 60px;
    }

    .ftrContactItem p{
        font-size: 22px;
    }

}

@media (max-width:767px){
    footer {
        background:var(--sub-color01);
        padding-bottom: 120px;
    }
    .ftrLogo {
        width: min(100%, 392px);
    }
    footer .ftrContent {
        padding-bottom: 0;
        gap: 0;
        margin: 30px auto;
    }
    .ftrContactBox{
        flex-direction: column;
        padding: 40px 30px;
    }

    .ftrContactItem{
        width: 100%;
        padding: 30px 0;
    }

    .ftrContactItem + .ftrContactItem{
        border-left: none;
        border-top: 1px solid #ddd;
    }

    .ftrContactTtl{
        top: -40px;
    }
    .ftrBnrGrid-links {
    grid-template-columns: 1fr;
    }
    .tel .ftrContacttelBox span.tel-link {
        font-size: 30px;
    }

}
/* -----------------------------------------------------------
    共通部品
----------------------------------------------------------- */
.pageMainv {
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.pageMainv>img {
    display: block;
}

/*. contactTel */
.contactBoxTel {
}
#main .contactBoxTel .tel{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.2em 1em;
}
#main .contactBoxTel .tel svg{
    color: var(--white);
    height: 1em;
}
#main .contactBoxTel .tel .telNoBox{
    position: relative;
    font-size: clamp(24px, 2.5vw, 36px);;
    padding-left:1.5em;
}
#main .contactBoxTel .tel .telNoBox::before{
    content: "";
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    background: var(--main-color01);
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
#main .contactBoxTel .tel .telNoBox::after {
    position: absolute;
    left: 0.35em;
    top: 0;
    bottom: 0;
    margin: auto;

    content: "";
    display: block;
    width: 0.56em;
    height: 0.75em;
    background-color: var(--white);
    -webkit-mask: url(./img/tel.svg) no-repeat center / contain;
    mask: url(./img/tel.svg) no-repeat center / contain;
}

.contactBoxBtnList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  list-style: none;
  padding: 0;
  margin: 0;

}
.contactBoxBtnList li {
    flex: 1 1 200px;
    min-width: 200px;
    max-width: 300px;
}
.contactBoxBtnList .contactBtn {
    height: 4em;
    border-radius: 100vh;
    background: var(--sub-color01);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--white);
    text-decoration: none;
    font-weight: 700;
    position: relative;
}
.contactBtn.bContact svg {
  width: auto;
  height: 1em;
}
.contactBtn.bRequest {
  background: var(--main-color01);
}
.contactBtn.bRequest svg {
  width: auto;
  height: 1.3em;
}

.contactBtn.bFaq {
  background: var(--sub-color04);
  color: var(--main-color01);
}

#main .contactBoxTel.comContactTel  .tel {
    justify-content: left;
}
#main .contactBoxTel.comContactTel .tel .telNoBox {
    font-size: clamp(30px, 3.5vw, 50px);
}
#main .contactBoxTel.comContactTel .tel span.tel-open {
    font-size: 18px;
}

@media (max-width: 767px) {
  .contactBox {
    padding: 30px 15px;
  }
  .contactBoxBtn {
    width: 100%;
    max-width: 320px;
  }
}

/*----- .shopAccess -----*/
#main ul.shopAccess {
    margin-top: 10px;
}

#main ul.shopAccess>li {
    background: none !important;
    margin: 0 0 50px !important;
    padding: 0 !important;
}

#main ul.shopAccess li:before,
#main ul.shopAccess li:after {
    content: none;
}

.shopAccess iframe {
    width: 100%;
}

/*----- .msgArea -----*/
#main .messageBox {
    padding: 60px 0;
}

#main .msgArea {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin-top: 30px;
    align-items: center;
}

#main .msgPhoto {
    width: min(100%, 400px);
    text-align: right;
    margin-top: -15px;
    border-radius: 20px;
    overflow: hidden;
}

#main .msgPhoto img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
#main .msgSignature {
    align-self: flex-end;
}
#main .msgPhoto p.corp {
    display: inline-block;
    font-size: 18px;
    font-weight: 800;
    margin: 10px 0;
    padding: 1px 0 2px;
    line-height: 1.3;
}

#main .msgPhoto p.name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

/*-------------------.flowBox-----------------*/
#main section.flowBox{
    position:relative;
    overflow: visible;
    padding-top: clamp(180px, 15vw, 400px);
    margin-top: clamp(-250px, -10vw, -100px);
}
.flowBox::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width:140%;
    aspect-ratio:1 / 0.34;
    border-radius:50%;
    background:#f1f9eb;
    z-index:-1;
}
.flowBox::after{
    content:"";
    position:absolute;
    aspect-ratio:177 / 211;
    width:20%;

    left:-3vw;
    bottom:3vw;
    background: url(./img/deco_flow.png) center bottom / 100% 100% no-repeat;
    z-index:-1;
}

.flowHead{
    background:
        repeating-linear-gradient(
            0deg,
            #7ddba1,
            #7ddba1 8px,
            #57d085 8px,
            #57d085 12px
        );

    border-radius:12px;
    text-align:center;
    padding:
    clamp(40px, 7vw, 120px)
    20px
    clamp(100px, 8vw, 140px);
    position:relative;
    z-index:1;
}
.flowHead::before{
    content:"";

    position:absolute;

    right:-3vw;
    top:-23vw;

    width:30%;
    aspect-ratio:5/6;
    z-index:-1;

    background:
        linear-gradient(
            180deg,
            var(--sub-color02) 30%,
            var(--sub-color03) 45%,
            var(--sub-color02) 60%,
            var(--sub-color02) 90%,
            var(--sub-color03) 100%

        );

    -webkit-mask:
        url(./img/deco5star.svg)
        right 33% top / 76%
        no-repeat,

        url(./img/deco4star.svg)
        right top 60% / 20%
        no-repeat,

        url(./img/deco6star.svg)
        left 75% / 30%
        no-repeat,

        url(./img/deco7star.svg)
        right 40% bottom / 25%
        no-repeat;
    mask:
        url(./img/deco5star.svg)
        right 33% top / 76%
        no-repeat,

        url(./img/deco4star.svg)
        right top 60% / 20%
        no-repeat,

        url(./img/deco6star.svg)
        left 75% / 30%
        no-repeat,

        url(./img/deco7star.svg)
        right 40% bottom / 25%
        no-repeat;
}


.flowHead p{
    color:#fff;
    margin-bottom:10px;
}

.flowHead h3{
    font-size: clamp(50px, 8vw, 80px);
    line-height:1;

    font-weight: 700;
    white-space: nowrap;
    background: linear-gradient(180deg, var(--white) 50%, var(--sub-color02) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.flowWrap{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin-top:3vw;
}

.flowBox .flowWrap{
    margin-top:-80px;
}

.flowItem{
    text-align:center;
    display:flex;
    flex-direction:column;
    position:relative;
}
.flowItem::after{
    content:"";

    position:absolute;

    top:120px;
    right:-20px;

    width:16px;
    aspect-ratio:1/1;

    background:var(--main-color01);

    /* SVGマスクで横を少し縮めた、角丸の三角形にする */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M10 0 L80 50 L10 100 Q0 100 0 90 L0 10 Q0 0 10 0 Z' fill='white'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M10 0 L80 50 L10 100 Q0 100 0 90 L0 10 Q0 0 10 0 Z' fill='white'/></svg>") center/contain no-repeat;
}
.flowItem:last-child::after{
    display:none;
}

.flowCircle{
    width:clamp(220px, 16vw, 260px);
    aspect-ratio:1/1;

    border-radius:50%;

    background:#fff;
    border:4px solid #b9e6b5;

    margin:0 auto;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;

    position: relative;
    z-index: 1;
}
.flowCircle span.icon{
    width:clamp(30px, 6vw, 50px);
    height:clamp(25px, 6vw, 40px);
    color:var(--main-color01);

    display:block;
}
.flowCircle span.icon svg,
.flowCircle span.icon img{
    max-width:100%;
    max-height:100%;
    display:block;
}
.flowCircle span.step{
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight:700;
    color:#22b34d;
}

.flowCircle h4{
    font-size: clamp(18px, 3.2vw, 22px);
    color:#22b34d;
}

.flowTxt{
    margin-top:-30px;

    background:var(--sub-color02);
    border-radius:10px;

    padding:50px 30px 30px;

    text-align:left;
    flex:1;
}

#main .flowTxt p{
    margin-bottom: 0;
}

.flowBox .btn{
    margin-inline:auto;
}

@media (max-width:1100px){

    .flowWrap{
        grid-template-columns:repeat(2,1fr);
    }
    .flowItem:nth-child(even)::after{
        display:none;
    }
    .flowCircle h4{
        font-size:22px;
    }
    .flowBox::before{
        width:250%;
    }

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

    .flowWrap{
        grid-template-columns:1fr;
    }

    .flowItem::after{
        top:auto;
        right:0;
        left:0;
        bottom:-20px;
        margin:auto;
        transform: rotate(90deg);
    }
    .flowItem:nth-child(even)::after{
        display:block;
    }
    .flowItem:last-child::after{
        display:none;
    }
    .flowBox::after {
        bottom: -15vw;
        width: 40%;
    }
}

/* -----------------------------------------------------------
    基本の記事スタイル設定
----------------------------------------------------------- */
#main p {
    font-size: clamp(16px, 1.5vw, 18px);
    margin-bottom: 15px;
    line-height: 1.8;
}

#main p strong {
    color: var(--main-color01);
    font-weight: 700;
}

a {
    color: var(--main-color01);
}

#main p+h2,
#main p+h3,
#main p+h4,
#main p+h5,
#main p+h6,
#main ul+h2,
#main ul+h3,
#main ul+h4,
#main ul+h5,
#main ul+h6,
#main ol+h2,
#main ol+h3,
#main ol+h4,
#main ol+h5,
#main ol+h6 {
    margin-top: clamp(25px, 3vw, 50px);
}

#main .inner+p+h2,
#main .inner+p+h3,
#main .inner+p+h4,
#main .inner+p+h5,
#main .inner+p+h6 {
    margin-top: 0;
}

#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
    clear: both;
}
.headLineH2 {
    margin-bottom: clamp(25px, 3vw, 50px);

    font-size: clamp(50px, 10vw, 120px);
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    background: linear-gradient(
        180deg,
        var(--sub-color02) 50%,
        var(--sub-color03) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
#main .subTtl+.headLineH2 {
    margin-top: 0;
}
#main .subTtl {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}
#main .wysiwyg h1,
#main .wysiwyg h2,
.headLineH3{
    display:flex;
    align-items:center;
    gap:15px;
    font-size: clamp(24px, 4vw, 32px);
    font-weight:500;
    margin-bottom:clamp(25px, 3vw, 50px);
    border-color: var(--silver);
    border-width: 0 0 1px 0;
    border-style: solid;
    padding-bottom: 15px;
}
#main .wysiwyg h2{
    font-size: clamp(24px, 2.5vw, 36px);
}
#main .wysiwyg h1::before,
#main .wysiwyg h2::before,
.headLineH3::before{
    content:"";
    width:10px;
    height:40px;
    border-radius:100vh;

    background:
        linear-gradient(
            180deg,
            var(--sub-color02),
            var(--sub-color03)
        );
}
.headLineH3.noBorder {
    border: none;
    padding-bottom: 0;
}

#main .wysiwyg h3:not([class]),
.headLineH4 {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 500;
    border-top: solid 2px var(--sub-color01);
    border-bottom: solid 2px var(--sub-color01);
    margin: 0 0 1em 0;
    padding: 0.5em 1em;
    line-height: 1.3;
}


#main .wysiwyg h4:not([class]),
.headLineH5 {
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 500;
    border: solid 1px var(--sub-color01);
    border-radius: 10px;
    background: #f1f9eb;
    margin: 0 0 1em 0;
    padding: 0.2em 1em;
}

#main .wysiwyg h5:not([class]),
.headLineH6 {
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 500;
    margin-bottom: 1em;
    padding: 0.4em 1em;
    border-top: 1px solid var(--sub-color01);
    border-bottom: 1px solid var(--sub-color01);
}

#main .wysiwyg h6:not([class]) {
    font-weight: 500;
    margin-bottom: 1em;
    display:flex;
    align-items:center;
    font-size:18px;
    gap:15px;
}
#main .wysiwyg h6:not([class])::before{
    content:"";
    width:0.5em;
    height:1.5em;
    border-radius:100vh;

    background:var(--sub-color01);
}

.postTitle {
    position:relative;

    text-align:center;
    font-size: clamp(24px, 4vw, 40px);
    font-weight:500;
    color:var(--black);
    padding-bottom:1em;
    margin-bottom:2.5em;
}
.postTitle.categoryTitle {
    color:var(--main-color01);
    font-size: clamp(22px, 2vw, 30px);
    padding-top:1em;
}
.postTitle.categoryTitle::before,
.postTitle::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:3px;
    background:
    linear-gradient(
        90deg,
        var(--sub-color03) 50%,
        var(--sub-color02) 100%
    );
}
.postTitle.categoryTitle::after {
    height:2px;
}
.postTitle.categoryTitle::before {
    height:2px;
    bottom:auto;
    top:0;
}

body:not(#top) .mainv {
    margin-bottom: 100px;
}

.mainv .mainvTxt {
    font-size: 16px;
    font-weight: 400;
    margin-top: 50px;
    margin-bottom: -50px;
    text-align: center;
}


#main table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 1px;
    margin-bottom: clamp(25px, 3vw, 50px);
    margin-top: clamp(25px, 3vw, 50px);
}

#main h2+table {
    margin-top: 20px;
}

#main table th,
#main table td {
    padding: clamp(15px, 2vw, 40px) clamp(10px, 2vw, 20px);
    border-bottom: #94e0a7 solid 1px;
}

#main table td .btn {
    margin-top: 10px;
}

#main table th p,
#main table td p {
    margin-bottom: 0 !important;
}

#main table th {
    min-width: 30%;
    font-weight: 600;
    background: none;
    text-align: center;
    white-space: nowrap;
}


/*--フォーム部品--*/
#main .formBox table {
}

.formBox table th,
.formBox table td,
#main .formBox table th,
#main .formBox table td {
}

.formBox table th,
#main .formBox table th,
.formBox table td,
#main .formBox table td {
    border-bottom: 1px dotted #ccc;
}

.formBox table th p,
.formBox table td p {
    margin-bottom: 0 !important;
}

.formBox table th span.bl {
    font-size: 14px;
    background: #373737;
    color: var(--white);
    margin-left: 10px;
    padding: 0 10px;
    display: inline-block;
    border-radius: 3px;
}

.formBox table th span.req {
    font-size: 14px;
    background: #373737;
    color: var(--white);
    margin-left: 10px;
    padding: 0 10px;
    display: inline-block;
    border-radius: 3px;

    background: var(--sub-color01);
}

.formBox input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"]),
.formBox select,
.formBox textarea {
    font-size: 16px;
    padding: 5px;
    height: 50px;
    width: 85%;
    border: 1px solid var(--sub-color01);
    box-sizing: border-box;
    background: var(--white);
    border-radius: 6px;
}

.formBox .dateTbl input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"]) {
    margin-bottom: 5px;
}

.formBox input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"])::placeholder,
.formBox textarea::placeholder {
    color: #ddd;
    font-weight: 400;
}

.formBox select {
    width: 300px;
}

.formBox textarea {
    height: 200px;
    width: 98%;
}

.policyBox{
  background: #f2f2f2;
  border-radius: 10px;
  overflow: hidden;
  padding: clamp(25px, 3vw, 50px);
  margin-bottom: clamp(25px, 3vw, 50px);

}
.policyBox h3{
    text-align: center;
    margin-bottom: 1em;
}
.formBox .accept {
    border-radius: 6px;
    text-align: center;
    margin-top: 2em;
    display: flex;
    justify-content: center;
    font-weight: 700;
}

.bgColor01 .formBox .accept {
    background: var(--white);
}

.formBox .accept small {
    display: block;
}

.formBox input[type="checkbox"],
.formBox input[type="radio"] {
    transform: scale(1.5);
    margin: 0 6px 0 0;
}

.formBox input[type="submit"],
.searchBox input[type="submit"] {
    display: inline-block !important;
    text-decoration: none !important;
    color: var(--white) !important;
    font-weight: bold;
    cursor: pointer;

    min-width: min(100%, 340px);
    padding: 20px 2em 23px;
    width: fit-content;
    border-radius: 100vh;
    background:  var(--sub-color01);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    position: relative;
    box-shadow:
        0 5px 15px rgba(3, 3, 3, 0.15);

    border: none;

}

.formBox .submit {
    text-align: center;
}

.formBox input[type="submit"]:disabled {
    min-width: min(100%, 340px);
    padding: 20px 2em 23px;
    width: fit-content;
    border-radius: 100vh;
    background:  var(--silver);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    position: relative;
    box-shadow:
        0 5px 15px rgba(3, 3, 3, 0.15);


}
.wpcf7-list-item {
    display: block;
}
.wpcf7-list-item label{
    display:flex;
    align-items:center;
    gap:0.5em;
}
.formBox .wpcf7-spinner {
    display: none !important;
	margin:5px auto 0;
}
.submitting .formBox .wpcf7-spinner {
    display: block !important;
}

.formBox .wpcf7-list-item-label {
    vertical-align: text-bottom;
}

.formBox input[readonly="readonly"] {
    background: #f3f3f3 !important;
    color: #555;
    width: 100% !important;
}
@media (max-width:767px){
    .formBox table th,
    #main .formBox table th,
    .formBox table td,
    #main .formBox table td {
        display: block;
    }
    .formBox table th,
    #main .formBox table th{
        text-align: left;
    }
    .formBox input:not(input[type="checkbox"]):not(input[type="submit"]):not(input[type="radio"]), .formBox select, .formBox textarea {
        width: 100%;
    }
}


/*--下層ページメインビジュアル--*/
#cornerName {
    position: relative;
    min-height: clamp(140px, 22vw, 360px);
    width: 100%;
    z-index: 3;
    background-color: #a2bfc2;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(./img/bg_corporate_ttl.png);
    background-size: cover;
    margin: 0;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#cornerName h1,
#cornerName div {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    font-size: clamp(16px, 2vw, 26px);
    font-weight: 500;
    line-height: 1.2;
    z-index: 4;
    text-align: left;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

#cornerName h1 span.subTtl,
#cornerName div span.subTtl {
    font-size: clamp(36px, 5vw, 70px);
    font-weight: 700;
    display: block;
    color: var(--white);
    margin-bottom: 0.2em;
}
#cornerName span.subTtl .ltlCr{
    font-size: clamp(30px, 3.5vw, 50px);
}

.breadcrumbs {
    font-size: 14px;
    color: var(--black);
    padding-top: clamp(20px, 3vw, 40px);
    padding-bottom: clamp(30px, 4vw, 60px);
}


.breadcrumbs a {
    text-decoration: underline;
}

.breadcrumbs>span {
    margin-right: 10px;
}

.breadcrumbs>span:nth-of-type(n+2) {
    margin-left: 10px;
}

.headLineMain {
    font-size: clamp(26px, 4vw, 50px);
    text-align: center;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1.5em;
}
.headLineMain strong{
    color: var(--main-color01);
    font-weight: 500;
}

@media (max-width:767px){
    #cornerName {
        background-position: right;
    }
}

/*--メインカラム--*/
#contents {
    margin: 0 auto 0;
}

#contents section {
    position: relative;
    overflow: hidden;
}

.norSection {
    position: relative;
    padding-top: clamp(60px, 7vw, 150px);
    padding-right: clamp(70px, 5vw, 80px);
    padding-left: clamp(70px, 5vw, 80px);
    padding-bottom: clamp(15px, 3vw, 30px);
}
.norSectionH {
    padding-right: clamp(70px, 5vw, 80px);
    padding-left: clamp(70px, 5vw, 80px) ;
}
.norSectionV {
    padding-top: clamp(60px, 7vw, 180px);
    padding-bottom: 30px;
}
.norSectionVL {
    padding-top: clamp(60px, 7vw, 150px);
    padding-bottom:clamp(60px, 7vw, 150px);
}
.bgSection{
    padding-bottom: clamp(60px, 8vw, 150px);
}
.norArticle {
    position: relative;
    padding-top: clamp(50px, 5vw, 100px);
    padding-right: clamp(70px, 5vw, 80px);
    padding-left: clamp(70px, 5vw, 80px);
    padding-bottom: 0;
}
.norSection.inner,
.norSectionH.inner,
.norArticle.inner {
    box-sizing: content-box;
}
#contents #main .norArticle:first-of-type {
    padding-top: clamp(20px, 3vw, 50px);
}
#contents #main .inner .norArticle{
    padding-top: clamp(50px, 5vw, 100px);
    padding-right: 0;
    padding-left: 0;
}
#contents #main .inner .norArticle:first-of-type {
    padding-top: 0;
}

/*投稿画像の回り込み処理*/
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.alignright {
    padding: 0;
    margin: 0 0 2px 7px;
    display: inline;
}

img.alignleft {
    padding: 0;
    margin: 0 30px 10px 0;
    display: inline;
}

img.aligncenter {
    display: block;
    margin: 0 auto;
}

.alignright {
    float: right;
    margin-left: 10px;
    margin-bottom: 2px;
}

.alignleft {
    float: left;
    margin-right: 10px;
    margin-bottom: 2px;
}

img {
    border-style: none;
    max-width: 100%;
}

#main .nobr br {
    display: none;
}

#main p.wp-caption {
    font-size: 0.8em;
    line-height: 1.2em;
}

#main p.wp-caption img {
    margin-bottom: 5px;
}

#main p.wp-caption .caption-text {
    text-align: left;
}

.pt-100 {
    padding-top: 100px;
}

.pb-100 {
    padding-bottom: 100px;
}
@media (max-width:767px){

    #contents section.norSection,
    #contents .norSection,
    .norSection,
    .norSectionH,
    .norArticle {
        padding-right:20px;
        padding-left:20px;
    }

}



/*--gradationのボーダー修飾--*/
.gradationBorder {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.gradationBorder::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(180deg, var(--sub-color03) 50%, var(--sub-color02) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* =================================
PageNavi
================================= */

.wp-pagenavi{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:clamp(40px,5vw,80px);
}

.wp-pagenavi > *{
    width:clamp(40px,5vw,50px);
    height:clamp(40px,5vw,50px);

    display:flex;
    justify-content:center;
    align-items:center;

    border-top:1px solid var(--black);
    border-bottom:1px solid var(--black);
    border-left:1px solid var(--black);

    background:#fff;
    color:var(--black);

    text-decoration:none;
    font-size:18px;
    line-height:1;

    transition:.3s;
}
.wp-pagenavi a{
    color:var(--black);
}

.wp-pagenavi > *:last-child{
    border-right:1px solid var(--black);
    border-radius:0 4px 4px 0;
}
.wp-pagenavi > *:first-child{
    border-radius:4px 0 0 4px;
}
.wp-pagenavi .current{
    background:var(--sub-color01);
    color:var(--white);
}

.wp-pagenavi a:hover{
    background:var(--sub-color01);
    color:var(--white);
}

.wp-pagenavi .extend{
    color:var(--black);
}

.wp-pagenavi .first,
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .last{
    color:var(--sub-color01);
    font-weight:700;
}

#main .wysiwyg {
    overflow: hidden;
}
#main .freeCom,
#main .cstCom,
#main .cstStaff {
    margin: 20px 0 50px 0;
}

/* .wysiwyg */
#main .wysiwyg * {
    word-break: break-word;
}

#main .wysiwyg img {
    max-width: 100%;
    height: auto;
}

#main .wysiwyg p {
    margin: 0 0 20px 0;
}

#main .wysiwyg > *:last-child {
    margin-bottom: 0;
}

#main .wysiwyg iframe {
    width: 100%;
    height: 500px;
}


#main .wysiwyg blockquote {
    border: 1px dotted var(--black);
    background: #f0f0f0;
    margin-bottom: 20px;
    padding: 50px;
}

#main .wysiwyg blockquote p:last-of-type {
    margin-bottom: 0;
}

#main .wysiwyg ul+h3:not([class]) {
    margin-top: 40px;
}

#main ul.normalList,
#main .wysiwyg ul {
    margin: 0 0 20px 0;
}

#main ul.normalList li,
#main .wysiwyg ul li {
    list-style: none;
    line-height: 1.8;
    padding-left: 30px;
    position: relative;
}

#main ul.normalList li::before,
#main .wysiwyg ul li::before {
    content: '';
    display: block;
    left: 7px;
    top: 10px;
    width: 10px;
    height: 10px;
    background: var(--sub-color01);
    border-radius: 50%;
    position: absolute;
}
#main .wysiwyg ul.squareLi li::before {
    border-radius: 0;
    width: 0.8em;
    height: 0.8em;
}

#privacy #main .wysiwyg ul li::before {
    background: #ccc;
}

#main .wysiwyg ol {
    counter-reset: my-counter;
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

#main .wysiwyg ol li {
    list-style: none;
    line-height: 1.8;
    margin-bottom: 10px;
    padding-left: 36px;
    position: relative;
}

#main .wysiwyg ol li:before {
    font-family: Inter, sans-serif;
    font-size: 16px;
    content: counter(my-counter);
    counter-increment: my-counter;
    background-color: var(--sub-color01);
    color: var(--white);
    display: block;
    float: left;
    line-height: 28px;
    margin-left: -36px;
    text-align: center;
    height: 28px;
    width: 28px;
    border-radius: 50%;
}

#main .wysiwyg table,
#main table.normalTable{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
}
#main .wysiwyg th,
#main table.normalTable th{
    background: var(--sub-color01);
    color: var(--white);
    width: auto;
    text-align: left;
}
#main .wysiwyg th,
#main .wysiwyg td,
#main table.normalTable th,
#main table.normalTable td {
    padding: 1em;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
#main .wysiwyg table tr:first-child th:first-child,
#main .wysiwyg table tr:first-child td:first-child,
#main table.normalTable tr:first-child th:first-child,
#main table.normalTable tr:first-child td:first-child {
    border-top-left-radius: 10px;
}

#main .wysiwyg table tr:first-child th:last-child,
#main .wysiwyg table tr:first-child td:last-child,
#main table.normalTable tr:first-child th:last-child,
#main table.normalTable tr:first-child td:last-child {
    border-top-right-radius: 10px;
}

#main .wysiwyg table tr:last-child th:first-child,
#main .wysiwyg table tr:last-child td:first-child,
#main table.normalTable tr:last-child th:first-child,
#main table.normalTable tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

#main .wysiwyg table tr:last-child th:last-child,
#main .wysiwyg table tr:last-child td:last-child,
#main table.normalTable tr:last-child th:last-child,
#main table.normalTable tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}
#main .wysiwyg tr:last-child td,
#main .wysiwyg tr:last-child th,
#main table.normalTable tr:last-child td,
#main table.normalTable tr:last-child th {
    border-bottom: none;
}

#main .wysiwyg td:last-child,
#main .wysiwyg th:last-child,
#main table.normalTable td:last-child,
#main table.normalTable th:last-child {
    border-right: none;
}

/*--articleCard カード形式の記事表示--*/
.articleCardHead{
    text-align:right;
}

.articleCardHead .subTtl{
    font-size:16px;
    margin-bottom:20px;
}
.articleCardWrap{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap: clamp(20px, 3vw, 60px);
}
.articleCardWrap.ltlWidth{
    grid-template-columns:repeat(2,1fr);
}

.articleCard{
     position:relative;
    background:#fff;
    border-radius:12px;

    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.06);

    transition:0.4s;
    padding:3px;
}
#main a.articleCard, #main a.articleCard:link, #main a.articleCard:visited {
    color: var(--black);
    text-decoration: none;
}

.articleCard::before{
    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    padding:3px;

    background:
        linear-gradient(
            180deg,
            var(--sub-color03) 50%,
            var(--sub-color02) 100%
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;
}
.articleCard:hover{
    transform:translateY(5px);
}

.articleCardImg{
    position:relative;
    border-radius:10px 10px 0 0;

    aspect-ratio:60 / 35;
    overflow:hidden;
}
.articleCardImg img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;
    transition:0.5s;
}
.articleCardImg::after{
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 0 2px 23px;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(145deg, var(--main-color01) 30%, var(--sub-color02) 100%);
    border-radius: 100% 0 0 0;
    z-index: 2;
}

.articleCardBody{
    padding:30px;
}
.articleCardBody .companyName{
    background: var(--sub-color01);
    color: var(--white);
    width: fit-content;
    padding: 4px 12px;
    margin: 0 auto 20px;
    border-radius: 3px;
    font-size: 18px;
}
.articleCardBody h4{
    font-size: 18px;
    text-align: left;
    margin-bottom: 15px;
    color: var(--main-color01) !important;
    line-height:1.5;
}

#main .articleCardBody p{
    line-height:1.5;
}
#main .articleCardBody p:last-child{
    margin-bottom:0;
}
@media (max-width:767px){

    .articleCardWrap,
    .articleCardWrap.ltlWidth{
        grid-template-columns:1fr;
    }

}


/* -----------------------------------------------------------
    #top
----------------------------------------------------------- */
#top #contents section#main {
    padding: 0;
}

.txtBlack {
    color: var(--black) !important;
}

.txtRed {
    color: var(--red) !important;
}

/*-------------------#mainv-----------------*/
#mainv {
    position: relative;
    width: calc(100% - 110px);
    max-width: 1820px;
    height: 550px;
    z-index: 9;
    display: flex;
    align-items: center;
}

#top #mainv {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

#top #mainv .maianVFgr {
    padding: 0 10px;
    overflow: hidden;
    position: relative;
}

#mainv .maianVFgr picture,
#mainv .maianVFgr img {
    width: 100%;
    height: 100%;
}

#mainv .maianVFgr picture {
    display: block;
}

#mainv .maianVFgr img {
    display: block;
    object-fit: cover;
}

#top #mainv .maianVFgr .mainv-overlay {
    position: absolute;
    bottom: 50px;
    left: 50px;
    color: var(--white);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    z-index: 10;
}

#top #mainv .maianVFgr .mainv-overlay h2 {
    font-size: clamp(50px, 4.6vw, 60px);
    margin: 0 0 3px 0;
    font-weight: 700;
}

#top #mainv .maianVFgr .mainv-overlay p {
    font-size: 1em;
    font-weight: 500;
    margin: 0;
}


#top #mainv h2 {
    order: 2;
    white-space: nowrap;
}

#top #mainv h2 img {
    width: 133px;
    height: auto;
    display: inline-block;
    margin-right: -23px;
    position: relative;
}

#top #mainv h2 small {
    color: var(--white);
    position: relative;
    display: block;
    z-index: 2;
    width: fit-content;
    padding: 0 60px;
    font-weight: 500;
    margin: 0 0 -30px 176px;
    letter-spacing: 0.32em;
}

#top #mainv h2 small::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    background: var(--sub-color01);
    z-index: -1;
    transform: skew(-30deg);
}

#top #mainv h2 span {
    font-size: 100px;
    color: var(--white);
    background: var(--main-color02);
    line-height: 1;
    width: 1em;
    height: 1em;
    display: inline-block;
    margin: 1px;
    padding: 5px 10px 15px;
    z-index: 1;
}

/* :nth-of-type(n+数字)は数字以降対象 */
#top #mainv h2 span:nth-of-type(n+5) {
    background: var(--white);
    color: var(--main-color02);
}

#top #mainv h2+p {
    order: 1;
    color: var(--white);
    margin-left: 30px;
}

#top #mainv h2+p>span:first-of-type {
    display: block;
    font-size: 26px;
    margin-bottom: -20px;
    padding: 10px 30px 20px;
    background: var(--sub-color04);
    --s: 10px;
    clip-path: polygon(0 calc(100% - (var(--s) * 2)),
            0 var(--s),
            var(--s) 0%,
            calc(100% - var(--s)) 0%,
            100% var(--s),
            100% calc(100% - (var(--s) * 2)),
            calc(100% - var(--s)) calc(100% - (var(--s) * 1)),
            calc(40% + calc(var(--s) / 2)) calc(100% - var(--s)),
            40% 100%,
            calc(40% - calc(var(--s) / 2)) calc(100% - var(--s)),
            var(--s) calc(100% - var(--s)));
    position: relative;
    width: fit-content;
    line-height: 1;
    font-weight: 600;
}

#top #mainv h2+p>span:first-of-type::before {
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 12px;
    background: var(--sub-color04);
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform: translateY(100%);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

#top #mainv h2+p>span:last-of-type {
    font-size: 42px;
    font-weight: 600;
    line-height: normal;
}

#top #mainv h2+p span b {
    font-size: 80px;
    font-weight: bold;
}
@media (max-width:1100px){
    #top #mainv .maianVFgr .mainv-overlay {
        bottom: auto;
        top: 24%;
        left: 3vw;
        padding:0 12px;
    }
    #top #mainv .maianVFgr .mainv-overlay h2 {
        color: var(--main-color01);
        text-shadow: none;
        font-size: clamp(40px, 5.8vw, 50px);
        line-height: 1.3;
        margin-bottom: 0.3em;
        text-shadow:
            0 0 4px rgba(255,255,255,1),
            0 0 8px rgba(255,255,255,1),
            0 0 16px rgba(255,255,255,.9);
    }
    #top #mainv .maianVFgr .mainv-overlay p {
        font-size: 20px;
        line-height: 1.8;
    }
}

@media (max-width:767px){
    #top #mainv .maianVFgr .mainv-overlay {
        top: 40%;
    }
    #top #mainv .maianVFgr .mainv-overlay h2 {
        font-size: clamp(30px, 5vw, 38px);
        line-height: 1.3;
        margin-bottom: 20px;
    }
    #top #mainv .maianVFgr .mainv-overlay p {
        font-size: 14px;
        line-height: 1.8;
        text-shadow:
            0 0 4px rgba(10,66,32,1),
            0 0 8px rgba(10,66,32,.9)
    }
}

/*-------------------.aboutUs-----------------*/

#contents section.aboutUs{
    overflow: visible;
}

.aboutHead{
}

.aboutHead .subTtl{
    font-size: 16px;
    margin-bottom: 20px;
}

.aboutImg img{
    width: 100%;
    display: block;
    border-radius: 12px;
    height:auto;
}
.aboutImgLeft{
    align-self: center;
    justify-self:end;
    position:relative;
}
.aboutImgLeft img{
    width:100%;
    max-width:360px;
}

.aboutImgLeft::after{
    content:"";

    position:absolute;

    left:clamp(-80px, -15vw, -20px);
    bottom:-15vw;

    width:90%;
    aspect-ratio:1/1;
    z-index:-1;

    background:
        linear-gradient(
            180deg,
            var(--sub-color02) 50%,
            var(--sub-color03) 100%
        );

    -webkit-mask:
        url(./img/deco6star.svg)
        left top / 76%
        no-repeat,

        url(./img/deco7star.svg)
        right bottom / 25%
        no-repeat;

    mask:
        url(./img/deco6star.svg)
        left top / 76%
        no-repeat,

        url(./img/deco7star.svg)
        right bottom / 25%
        no-repeat;
}
.aboutImgRight{
    justify-self:start;

    display:flex;
    flex-direction:column;
    gap:30px;
}
.aboutImgRight img:first-child{
    width:100%;
    max-width:500px;
}
.aboutImgRight img:last-child{
    width:100%;
    max-width:300px;
}
.aboutInner{
    display:grid;

    grid-template-columns:
        minmax(200px,1fr)
        minmax(500px,600px)
        minmax(200px,1fr);
    column-gap:clamp(30px,4vw,80px);

    align-items:center;
}
.aboutInner > *{
    min-width:0;
}
.aboutContent{
    width:100%;
    min-width:0;
}
.aboutContent h3{
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.5;
    font-weight: 700;
    color: #16b34a;

    margin-bottom: 50px;
}

.aboutContent .txt p{
    font-size: 16px;
    line-height: 2.4;
}

.aboutContent .txt p + p{
    margin-top: 30px;
}


@media (max-width:1100px){

    .about{
        padding: 140px 0 100px;
    }

    .aboutInner{
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .aboutHead{
        position: static;
    }

    .aboutImgLeft{
        max-width: 400px;
        margin: 0 auto;
    }

    .aboutImgRight{
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 15px;
    }

    .aboutImgRight img:first-child,
    .aboutImgRight img:last-child{
        width: calc(50% - 15px);
        max-width:none;
    }

    .aboutImgLeft::after{
        bottom: 0;
        width: 25%;
        left: -2%;
        z-index: 1;

    }

}

@media (max-width:767px){
    .aboutContent h3{
        margin-bottom: 30px;
    }

    .aboutContent .txt p{
        line-height: 2;
    }

    .aboutBtn{
        margin-top: 40px;
        width: 100%;
    }

}

/*-------------------.serviceBox-----------------*/

.serviceBox{
}
.serviceBox .articleCardBody h4 {
    font-size: clamp(18px, 2vw, 22px);
    text-align: center;
    margin-bottom: 20px;
}
.serviceBox .inner{
}

.facilityBlock{
    margin-top:120px;
    position: relative;
    z-index: 2;
}

.facilityWrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.facilityWrap li{
}
#main a.facilityItem{
    width:100%;
    display:block;
    position:relative;
    padding: clamp(10px, 3vw, 30px) clamp(10px, 3vw, 25px);
    overflow:hidden;
    border-radius:10px;
    background-color:#fff;
    background-position: left 20px center;
    background-repeat: no-repeat;
    text-decoration:none;
    font-weight:700;
    box-shadow: 0 0px 14px rgba(0, 0, 0, 0.15);
    transition: 0.4s;
}
#main a.facilityItem.norItem{
    display: flex;
    align-items: center;
    gap: 10px;
}
#main a.facilityItem.norItem svg{
    color: var(--main-color01);
    max-height: 1.8em;
    max-width: 2.5em;

}

/*.facilityItem.office{
    background: url(./img/ico_office.png);
}
.facilityItem.apartment{
    background: url(./img/ico_apartment.png);
}
.facilityItem.shop{
    background:  url(./img/ico_shop.png);
}
.facilityItem.school{
    background: url(./img/ico_school.png);
}
.facilityItem.clinic{
    background: url(./img/ico_clinic.png);
}
.facilityItem.nursing{
    background: url(./img/ico_nursing.png);
}
.facilityItem.factory{
    background: url(./img/ico_factory.png);
}
.facilityItem.pachinko{
    background: url(./img/ico_pachinko.png);
}
.facilityItem.hotel{
    background: url(./img/ico_hotel.png);
}
.facilityItem.temple{
    background: url(./img/ico_temple.png);
}*/
#main a.facilityItem.serviceItem{
    padding-left: calc(30% + 10px);
    text-align: center;
}

#main a.facilityItem.serviceItem img{
    position: absolute;
    left: 3px;
    top: 0;
    bottom:0;
    margin: auto;
    width:30%;
    height:calc(100% - 6px);
    object-fit:cover;
    border-radius: 6px 0 0 6px;
}

#main a.facilityItem::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px;
    background: linear-gradient(180deg, var(--sub-color03) 50%, var(--sub-color02) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
#main a.facilityItem::after {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 25px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 0 0px 13px;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(145deg, var(--main-color01) 30%, var(--sub-color02) 100%);
    border-radius: 100% 0 0 0;
    z-index: 2;
}
#main a.facilityItem:hover{
    transform:translateY(5px);
}
@media (min-width: 1200px) {
    .facilityWrap {
        grid-template-columns: repeat(4, minmax(240px, 285px));
    }
}
@media (max-width:767px){

    .serviceHead{
        position:static;
        margin-bottom:60px;
        text-align:left;
    }

    .facilityWrap{
        grid-template-columns: 1fr;
        gap:12px;
    }
}


/*-------------------.reasonBox-----------------*/
#contents section.reasonBox{
    padding-right:0 !important;
    padding-left:0 !important;
}

.reasonHead{
  text-align:center;
  position:relative;
}
.reasonHead::after{
    content:"";

    display:block;
    width: 100%;
    aspect-ratio: 64 / 15;
    background: url("./img/reason_ttl.jpg") no-repeat center / contain;
    margin:20px auto 0;
}
.reasonGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 6vw, 80px);
  margin-top: -10vw;
}

.reasonCard{
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  position: relative;
  padding: 0;
}

.reasonImg{
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.reasonImg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reasonNum{
    z-index: 1;
    position: absolute;
    top: -10px;
    left: 10px;

    width: 2em;
    height: 2em;

    display: grid;
    place-items: center;

    font-size: clamp(40px, 6vw, 80px);
    font-weight: 500;
    font-family: var(--en-font-family);

    color: var(--sub-color02);
}
.reasonNum::after{
    z-index: -1;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--main-color01) 30%, var(--sub-color02) 100%);
}
.postTitle.reasonCntsHeadline{
    color: var(--main-color01);
    line-height: 1;
    padding-bottom: 1em;
    margin-bottom: 1em;
}
 .postTitle.reasonCntsHeadline::after {
    height: 1px;
}
.reasonBody{
  padding: clamp(20px, 2.5vw, 40px);
}
#main .reasonBody h3{
    font-size: clamp(24px, 4vw, 40px);
    color: var(--main-color01);
    margin-bottom: 0.5em;
    font-weight: 500;
}
#main .reasonBody p{
  line-height: 1.8;
  color: #555;
  margin-bottom: 0;
}

.reasonCnts{
    position: relative;
    background: linear-gradient(to bottom, #d6f0be 0%, #f1f9eb 100%);
}
.reasonCnts::before{
    content: "Why clients trust us";
    position: absolute;
    left: 0.6em;
    top: 1%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: left center;
    color: rgba(255,255,255,0.4);
    font-weight: 700;
    font-size: clamp(80px, 12vw, 200px);
    letter-spacing: 0.08em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
}
.reasonCnts::after {
    content: "";
    position: absolute;
    right: 2.5vw;
    top: 1vw;
    width: 20%;
    aspect-ratio: 1 / 1;
    z-index: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.7) 80%, rgba(255,255,255,0.3) 100%);
    -webkit-mask: url(./img/deco6star.svg) left top / 76% no-repeat, url(./img/deco7star.svg) right bottom / 25% no-repeat;
    mask: url(./img/deco6star.svg) left top / 76% no-repeat, url(./img/deco7star.svg) right bottom / 25% no-repeat;
}

.reasonCnts .reasonNum{
    top: -1em;
    left: 0;
    right: 0;
    margin: auto;
}
.reasonCnts .inner{
    display:flex;
    flex-direction:column;
    gap: clamp(60px, 8vw, 150px);
    position: relative;
    z-index: 1;
}
.reasonCnts .inner::after {
    content:"";
    position:absolute;
    aspect-ratio:17 / 33;
    width:20vw;

    left:-14vw;
    bottom:4vw;
    background: url(./img/deco_reason.png) center bottom / 100% 100% no-repeat;
    z-index:-1;
}

.reasonCnts .reasonCard{
    padding:
    clamp(60px, 6vw, 100px)
    clamp(20px, 4vw, 60px)
    clamp(30px, 4vw, 60px);
}
.reasonCntsBody{
    display: flex;
    gap:50px;
}
.reasonCntsText{
    flex: 1;
}

.reasonCntsImg{
    flex: 0 0 50%;

    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
}
.reasonCntsImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px){
  .reasonGrid{
    grid-template-columns: 1fr;
  }
  .reasonCntsBody {
    display: block;
  }
  .reasonCnts .inner::after {
    content: none;
  }
}

/*-------------------.worksBox-----------------*/

.worksBox{
    overflow:visible !important;
    padding-left: 0 !important;
}
.worksInner{
    max-width:1200px;
    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        400px;

    gap:clamp(40px,5vw,100px);

    align-items:center;

    position:relative;
}
.worksInner::before {
    content: "";
    position: absolute;
    left: -30vw;
    top: -8vw;
    width: min(78vw, 1400px);
    aspect-ratio: 3 / 2;
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            var(--sub-color02) 50%,
            var(--sub-color03) 100%
        );
    -webkit-mask: url(./img/deco_ribbon.svg) no-repeat center / contain;
    mask: url(./img/deco_ribbon.svg) no-repeat center / contain;
    transform: rotate(2deg);
}

.worksContent{
    grid-column:2;
    grid-row:1;

    position:relative;
    z-index:2;
}
.worksHead{
    text-align:right;
}
.worksSliderWrap{
    grid-column:1;
    grid-row:1;
    min-width:0;
    position:relative;
}
.worksSliderMask{
    overflow:hidden;

    padding-left:max(
        20px,
        calc((100vw - 1200px) / 2)
    );

    margin-left:calc(
        ((100vw - 1200px) / 2) * -1
    );
}
.worksSlider{
}

.worksSlider .swiper-wrapper{
    align-items:flex-start;
}

.worksCard{
    width:auto;
}

.worksCard a{
    display:block;
    color:inherit;
    text-decoration:none;
}
.worksCard a:hover{
    transform:translateY(5px);
    transition:0.4s;
}
.worksCard a:hover img{
    opacity:unset !important;
    transition: none !important;
}

.worksImg{
    position: relative;
    aspect-ratio:1/1;

    border-radius:50%;
    overflow:hidden;
    box-shadow: 0 0px 14px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.worksImg::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 6px;
    background: linear-gradient(180deg, var(--sub-color03) 50%, var(--sub-color02) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.worksImg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.worksBody{
    background:var(--white);
    color:var(--black);
    border-radius:12px;
    padding:30px;
    margin-top:-30px;
    position:relative;
    box-shadow:
        0 10px 20px rgba(0,0,0,.08);
    border-right: #eee solid 2px;
}

.worksBody h3{
    color:var(--main-color01);
    font-size:18px;
    margin-bottom:10px;
}

#main .worksBody p{
    line-height:1.5;
}

/*-------------------#voice お客様の声-----------------*/

#contents section.voiceBox{
    margin-top: clamp(80px, 8vw, 150px);
}
.voiceBox::before{
    content:"";

    position:absolute;

    right:0;
    top:0;

    width:calc((100% - clamp(20px, 5vw, 80px)));
    height:60%;

    background:
        linear-gradient(
            180deg,
            var(--sub-color03) 0%,
            var(--sub-color02) 100%
        );

    border-radius:12px 0 0 12px;

    z-index:-1;
}

.voiceInner{
    padding: 0 clamp(5px, 2vw, 50px);
    display:grid;
    grid-template-columns:
        minmax(280px,400px)
        auto;
    gap:clamp(40px,7vw,100px);
    align-items:start;
    justify-content:space-between;
}
.voiceHead .headLineH2{
    background: linear-gradient(180deg, var(--white) 50%, var(--sub-color02) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.voiceHead .subTtl{
    color:var(--white);
}
.voiceSliderWrap{
    position:relative;
    min-width:0;
    width: min(100%, 540px);
}

.voiceSlider{
    overflow:hidden;
    padding: clamp(10px,2vw,30px);
}
.voiceSlider .swiper-slide{
    height:auto;
}
#main .voiceSlider a{
    color:var(--black);
}
.voiceCard{
    width:min(100%,480px);

    max-width:none;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:
        0 10px 30px rgba(0,0,0,.08);
}
.voiceCard:hover{
    transform:translateY(5px);
    transition:0.4s;
}

.voiceImg{
    aspect-ratio:4/3;
}

.voiceImg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.voiceBody{
    padding:30px;
}

.voiceBody h3{
    background:  var(--sub-color01);
    color: var(--white);
    width: fit-content;
    padding: 4px 12px;
    margin:0 auto 20px;
    border-radius:3px;
    font-size:18px;
}
.voiceBody h4{
    font-size: clamp(16px, 2vw, 26px);;
    color:var(--main-color01);

    line-height:1.5;

    margin:20px 0;
}

.voiceBody p{
    line-height:2;
}

/* swiper button */

.swiperBtn{
    width:70px;
    aspect-ratio:1/1;
    border-radius:50%;
    background:#fff;
    border:1px solid #74d68f;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    cursor:pointer;
}

.swiperBtn::before{
    font-family:"Font Awesome 5 Free";
    font-weight:900;

    color:#22b34d;
}

.worksPrev{
    left: clamp(-90px, calc((100vw - 1100px) * -0.1), 0px);
}
.worksNext{
    right:clamp(-70px, -5vw, -20px);
}

.voicePrev{
    left:-4vw;
}
.voiceNext{
    right:-4vw;
}

.worksPrev::before,
.voicePrev::before{
    content:"\f053";
}

.worksNext::before,
.voiceNext::before{
    content:"\f054";
}

.orPagination{
    position:static !important;

    margin-top:40px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}

.orPagination .swiper-pagination-bullet{
    width:12px;
    height:12px;

    margin:0 !important;

    border-radius:50%;

    background:#d8d8d8;

    opacity:1;

    transition:
        background .3s,
        transform .3s;
}

.orPagination .swiper-pagination-bullet-active{
    background:#3ac771;

    transform:scale(1.15);
}
@media (max-width:1100px){
    .worksBox {
        padding-left: clamp(20px, 5vw, 80px) !important;
    }
    .worksInner,
    .voiceInner{
        grid-template-columns:1fr;
    }
    .worksInner{
        gap:60px;
    }

    .worksContent{
        grid-column:auto;
        grid-row:auto;
    }

    .worksSliderWrap{
        grid-column:auto;
        grid-row:auto;
    }
    .worksSliderMask {
        padding: 0 3vw;
        margin-left: 0;
    }
    .worksPrev{
        left:-10px;
    }
    .worksNext{
        right:-10px;
    }
    .worksContent,
    .voiceContent{
        order:-1;
    }
    .voiceSliderWrap {
        width: 100%;
    }
}
@media (max-width:767px){

    .voice{
        margin-top:100px;
    }
    .voiceHead{
        text-align: center;
    }
    .voiceBox::before{
        width:100%;
        border-radius: 0;
    }

    .voiceCard {
        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    }
    .swiperBtn{
        width:45px;
    }

    .worksPrev,
    .voicePrev{
        left:-13px;
    }

    .worksNext,
    .voiceNext{
        right:-13px;
    }

}
/*-------------------.column-----------------*/
.columnBox{
}

.columnInner{
  border-radius: clamp(16px, 3vw, 24px);
  padding:
    clamp(40px, 6vw, 80px)
    clamp(20px, 5vw, 80px);
  background:#fff;
  position:relative;
}
.columnInner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: clamp(10px, 2vw, 20px);
    background: linear-gradient(180deg, var(--sub-color03) 50%, var(--sub-color02) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.columnHead {
  text-align:center;
}

.columnHead .headLineH2{
    font-size: clamp(50px, 9vw, 80px);
}


.columnList{
  margin: 0 auto;
}

.columnItem{
  border-bottom:1px solid #ddd;
}

.columnItem a{
  display:grid;
  grid-template-columns:
    clamp(140px, 18vw, 220px)
    minmax(0,1fr)
    40px;

  gap: clamp(16px, 2vw, 30px);

  align-items:center;

  padding:
    clamp(20px, 3vw, 32px)
    0;

  text-decoration:none;
  color:inherit;

  transition:opacity .2s ease;
}

.columnItem a:hover{
  opacity:.75;
}
.columnItem a::after{
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transform: translateY(-50%);
    transition: transform 0.4s ease;
    font-size: 20px;
    color: var(--main-color01);
}

.columnThumb{
  aspect-ratio: 16 / 10;
  overflow:hidden;
  border-radius:8px;
}

.columnThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.columnContent{
  min-width:0;
}

.columnMeta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;

  margin-bottom:10px;

  font-size:13px;
  color:#777;
}


.columnItemTitle{
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight:700;
  line-height:1.5;
  color:var(--black);

  margin-bottom:10px;
}

.columnText{
  font-size:14px;
  line-height:1.9;
  color:#666;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}


@media (max-width: 767px){

  .columnItem a{
    grid-template-columns:1fr;
    gap:16px;
  }

  .columnThumb{
    width:100%;
    max-width:220px;
    margin:0 auto;
  }

  .columnItem a::after{
    display:none;
  }

}


/*-------------------.quickRequest-----------------*/
#main .quickRequest {
    padding-bottom: 75px !important;
}

#main .quickRequest h2 small img {
    left: -80px !important;
    transform: translateX(-100%);
}

#main .quickRequest h2+p {
    text-align: center;
}

#main .quickRequest .formBox table {
    margin-top: 0;
}

#contact #main .quickRequest {
    margin-bottom: 0;
    padding-bottom: 100px !important;
}

/*------------------- swiper -----------------*/
#main ul.swiper-wrapper {
    margin-bottom: 0;
    align-items: stretch;
}

#main .swiper-slide {
    height: auto;
}

/*------------------- .swiper01 -----------------*/
.swiper01 .swiper-container {
    max-width: 1100px;
}

.swiper01 .inner {
    overflow: visible;
    margin-bottom: 45px;
}

.swiper01 .swiper-button-next,
.swiper01 .swiper-button-prev {
    width: 33px;
    height: 55px;
}

.swiper01 .swiper-button-next:after,
.swiper01 .swiper-button-prev:after {
    content: none;
}

.swiper01 .swiper-button-next {
    right: -20px;
    background: url(./img/arrowR.png) no-repeat;
    transform: translateX(100%);
}

.swiper01 .swiper-button-prev {
    left: -20px;
    background: url(./img/arrowL.png) no-repeat;
    transform: translateX(-100%);
}

@media screen and (max-width: 1100px) {
    .swiper01 .inner {
        max-width: calc(100% - 90px);
    }

    .swiper01 .swiper-button-next {
        right: -5px;
    }

    .swiper01 .swiper-button-prev {
        left: -5px;
    }
}


.swiper01 .swiper-slide {
    background: var(--white);
    border-radius: 20px;
    margin-bottom: 1px;
    box-sizing: border-box;
    background-clip: border-box;
    text-align: center;
    padding: 1px 0;
    margin: 0;
}

.swiper01:not(.slide-inner-a-wrap) .swiper-slide {
    border: 1px solid var(--sub-color04);
    border-radius: 20px;
    padding: 30px;
}

.swiper01.slide-inner-a-wrap .swiper-slide a {
    border: 1px solid var(--sub-color04);
    margin: 0;
    padding: 30px;
    box-sizing: border-box;
    display: block;
    height: 100%;
    border-radius: 20px;
}

.swiper01.slide-inner-a-wrap .swiper-slide a:hover img {
    opacity: 1;
}

.swiper01 .swiper-slide a {
    text-decoration: none !important;
}

.swiper01:not(.slide-inner-a-wrap) .swiper-slide>a {
    display: block;
    margin: -30px;
    padding: 30px;
}

.swiper01 .swiper-slide a:hover {
    opacity: 0.7;
}

.swiper01 li img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 20px;
}

.swiper01 .title,
.swiper01 .title a {
    display: block;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    color: var(--black) !important;
    text-decoration: none !important;
}

.swiper01 .title {
    width: 100%;
    margin: 15px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.swiper01 .title+.subtitle {
    margin-top: -15px;
}

.swiper01 .subtitle {
    color: var(--main-color01);
    margin-bottom: 5px;
}

.swiper01 .cats,
#main .swiper01 p.cats {
    text-align: center;
}

.swiper01 .cats a,
.swiper01 .cats span {
    display: inline-block;
    text-decoration: none !important;
    color: var(--white) !important;
    background: var(--main-color01);
    padding: 0px 20px;
}

.swiper01 .time {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background: #eee;
    color: var(--black);
    width: fit-content;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 400;
}

#main .swiper01 p {
    margin-bottom: 0;
    text-align: left;
}



/*------------------- 投稿系共通 -----------------*/
.archiveBox{
    display:grid;
    grid-template-columns:
        minmax(0,1fr) 280px;
    gap:60px;
}
.archiveMain{
    padding-bottom: 5px;
}

.archiveSide{
    display:flex;
    flex-direction:column;
    gap:60px;
}
.sideTtl{
    display:flex;
    align-items:center;
    gap:12px;

    font-size: clamp(18px, 1.5vw, 22px);

    margin-bottom:5px;
    padding-bottom:15px;

    border-bottom:3px solid #ddd;
}

.sideTtl::before{
    content:"";
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--sub-color01);
}

.categoryList{
    list-style:none;
    margin:0;
    padding:0;
}

.categoryList li{
    border-bottom:1px dotted #ddd;
}
.categoryList ul {
}
.categoryList a{
    display:flex;
    justify-content:space-between;
    padding:15px 10px;
    text-decoration:none;
    color:inherit;
    font-size: 16px;
    font-weight: 500;
}
.categoryList ul li a {
    position: relative;
    padding-left: 18px;
}
.categoryList ul li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 12px;
    height: 2px;
    background-color: var(--main-color01);
}

time.timeTxt {
    display: block;
    color: #777;
    font-size: 14px;
}
.singleContent h1.postTitle {
    text-align: left;
    margin-bottom: 0.5em;
    line-height: 1.3;
}
.singleContent h1.postTitle:not(:has(+ .infoBox)) {
    margin-bottom: clamp(25px, 3vw, 50px);
}
.singleContent h1.postTitle.postTitleClm {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.3vw, 20px);;
}
.singleContent h1.postTitle.postTitleClm .companyName {
    background: var(--sub-color01);
    color: var(--white);
    width: fit-content;
    margin: 0 auto;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: clamp(16px, 1.8vw, 22px);
}
.singleContent .infoBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(25px, 3vw, 50px);
}
.singleContent .infoBox.infoBoxUpr {
    position: relative;
    padding-bottom: 1em;
    margin-bottom: clamp(20px, 2.5vw, 35px);
}
.singleContent .infoBox.infoBoxUpr::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--sub-color03) 50%, var(--sub-color02) 100%);
}
#contents .singleContent section,
#contents .singleContent article {
    margin-top: clamp(25px, 3vw, 50px);
}
#contents .singleContent section:first-of-type,
#contents .singleContent article:first-of-type {
    margin-top: 0;
}

.pagenavi {
    margin-top:5vw;
}
.pagenavi ul {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.pagenavi li {
    flex: 1;
    border: 1px solid var(--black);
    display: flex;
}
.pagenavi li a {
    font-size: 16px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 10px;
    position: relative;
    padding: 10px 20px;
    width: 100%;
}
.pagenavi li a .icon{
    color: var(--main-color01);
}
.pagenavi .thumb {
    width: 60px;
    aspect-ratio: 4/3;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.pagenavi .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-right: 10px;
}

.pagenavi .list {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: none;
    border-left: none;
}
.pagenavi .list a{
    height: 100%;
    justify-content: center;
}
.pagenavi .next {
    border-radius: 4px 0 0 4px;
}
.pagenavi .next a{
    justify-content: flex-start;
}
.pagenavi .next a .text{
    margin-left:auto;
}

.pagenavi .prev {
    border-radius: 0 4px 4px 0;
}
.pagenavi .prev a{
    justify-content: flex-end;
}
.pagenavi .prev a .text{
    margin-right:auto;
}
.pagenavi .next.empty {
    border-width:0 1px 0 0;
}
.pagenavi .prev.empty {
    border-width:0 0 0 1px;
}
.pagenavi .prev a::after,
.pagenavi .next a::before {
    color: var(--main-color01);
    font-family: "Font Awesome 5 Free";
    font-size: 20px;
    font-weight: 700;
}
.pagenavi .next a::before {
    content: "\f053";
}
.pagenavi .prev a::after{
    content: "\f054";
}


.contactBox {
  padding:
    clamp(20px, 4vw, 40px)
    clamp(20px, 4vw, 70px);
  box-shadow: 0 0 30px rgba(72, 156, 0, 0.2);
  border-radius: 10px;
}

.contactBoxInner {
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(15px, 2vw, 35px);
}
#main .contactBoxInner p {
    margin: 0;
}
.contactBoxLead {
  font-weight: 700;
  display: none;
}
#main p.contactBoxHead{
    color: var(--main-color01);
    font-size: 20px;
    font-weight: 700;
}
.archiveBox .contactBoxLead {
  display: block;
}
.archiveBox .contactBoxLeadNC {
  display: none;
}

@media (max-width:1100px){
    .archiveBox{
        grid-template-columns:1fr;
    }
}
@media (max-width:767px){
    .pagenavi li a {
        flex-direction: column;
        padding: 5px;
        line-height: 1.3;
        font-size: 14px;
    }
    .pagenavi .prev a::after, .pagenavi .next a::before {
        position: absolute;
        top: 0;
        bottom: 0;
        height: 1em;
        margin: auto;
    }
    .pagenavi .prev a {
        padding-right: 20px;
        flex-direction: column-reverse;
    }
    .pagenavi .next a {
        padding-left: 20px;
    }
    .pagenavi .prev a::after {
        right: 5px;
    }
    .pagenavi .next a::before {
        left: 5px;
    }
}

/*-------------------#Column コラム-----------------*/
#column #cornerName {
    background-image: url(./img/bg_column_ttl.png);
}
/* ---- コラム 一覧 -------- */
.columnMain{
    display:flex;
    flex-direction:column;
    gap:40px;
}

.columnCard{
    border-radius:16px;
    overflow:hidden;
    padding:0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.columnCard time.timeTxt {
    margin-bottom: 1em;
}

.columnCard .columnDetail{
    display:block;
    color:inherit;
    text-decoration:none;
}
#main .columnDetail p{
    line-height: 1.5;
}
.columnCardInner{
    display:grid;
    grid-template-columns:
        1fr
        180px;

    gap:30px;
    padding:clamp(20px, 4vw, 40px);
}

.columnCardTtl{
    font-size: clamp(16px, 1.3vw, 20px);
    margin-bottom:1em;
    padding:10px 0;
    border-top:1px solid var(--sub-color01);
    border-bottom:1px solid var(--sub-color01);
}

.columnCard p{
    line-height:2;
}
.columnCardImg{
    align-self: start;
}
.columnCardImg img{
    width:100%;
    height:auto;
    border-radius:12px;
}


.pickupList{
    list-style:none;
    padding:0;
    margin:0;
}

.pickupList li{
    padding:20px 0;
    border-bottom:1px dotted #ddd;
}

.pickupList a{
    display:grid;
    grid-template-columns:
        80px
        1fr;

    gap:15px;

    text-decoration:none;
    color:inherit;
}

.pickupImg img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:8px;
}
.pickupBody.recommendBody {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pickupCat{
    display:inline-block;
    font-size:12px;
    padding:2px 8px;
    background:#eee;
    border-radius:4px;
    width: fit-content;
}

.pickupBody h4{
    margin:0;
    line-height:1.6;
    font-weight:500;
    font-size: 16px;
}
.pickupList time{
    text-align:right;
}


.latestList a{
    display:block;
}
.latestList time.timeTxt {
    text-align:right;
}

.latestList .pickupBody{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}



@media (max-width:767px){

    .columnCardInner{
        grid-template-columns:1fr;
    }

    .columnCardImg{
        order:-1;
    }

}
/* ---- コラム シングル -------- */

.relatedColumnsBox{}

.relatedColumnsBox::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    aspect-ratio: 1 / 1;
    z-index: -1;
    background: linear-gradient(180deg, var(--sub-color02) 30%, var(--sub-color03) 45%, var(--sub-color02) 60%, var(--sub-color02) 90%, var(--sub-color03) 100%);
    -webkit-mask: url(./img/deco5star.svg) left top / 60% no-repeat,
    url(./img/deco6star.svg) right top 55% / 30% no-repeat,
    url(./img/deco4star.svg) left 40% bottom / 20% no-repeat;
    mask: url(./img/deco5star.svg) left top / 60% no-repeat,
    url(./img/deco6star.svg) right top 55% / 30% no-repeat,
    url(./img/deco4star.svg) left 40% bottom / 20% no-repeat;
}
.relatedColumnsBox::after {
    content: "";
    position: absolute;
    aspect-ratio: 239 / 244;
    width: 12%;
    right: 6.5vw;
    bottom: 20%;
    background: url(./img/deco_scraper.png) center bottom / 100% 100% no-repeat;
    z-index: -1;
}
@media (max-width:1100px){
    .relatedColumnsBox::after {
        content: none;
    }
}

/*-------------------#Works 事例-----------------*/
#works #cornerName {
    background-image: url(./img/bg_works_ttl.png);
}
/* ---- 事例 一覧 -------- */
.searchBox {
  padding: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: clamp(25px, 3vw, 50px);
  margin-bottom: clamp(25px, 3vw, 50px);
}

.searchRow {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.searchTitle {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--main-color01);
}
.searchBox .xMark {
  font-size: clamp(30px, 4vw, 40px);
  color: var(--sub-color01);
  font-weight: 700;
  text-align: center;
  line-height: 1;
}


.selectWrap {
  position: relative;
  flex: 1;
}

.selectWrap select {
  padding: 20px 50px 20px 20px;
  font-size: clamp(16px, 1.3vw, 20px);
  border: 1px solid var(--sub-color01);
  border-radius: 6px;
  min-width: 220px;
  width: 100%;
  appearance: none;
  background: #fff;
}

.selectWrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 13px solid var(--sub-color01);
  pointer-events: none;
}

.searchBtn {
  background: var(--sub-color01);
  color: #fff;
  border: none;
  padding: 15px 30px;
  border-radius: 50vh;
  font-size: clamp(16px, 1.3vw, 20px);
  cursor: pointer;
  white-space: nowrap;
}
.searchBox .note {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--sub-color04);
  color: var(--main-color01);
  border-radius: 5px;
  padding: 5px 20px;
    font-size: 14px !important;
    margin: 1em auto 0 !important;
    width: fit-content;
}

.searchBox i {
  color: var(--sub-color01);
}

@media (max-width: 767px) {
  .searchRow {
    flex-direction: column;
    align-items: stretch;
    gap:15px;
  }

  .searchBtn {
    width: 100%;
  }
  .searchBox .xMark {
    margin: -10px 0;
  }
  .selectWrap select {
    width: 100%;
  }
}
/* ---- 事例 シングル -------- */

.worksBA,
.worksBAList {
    margin: 60px 0;
    overflow: visible !important;
}

.worksBAItem + .worksBAItem {
    margin-top: 80px;
}

.baImages {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 40px;
}

.baItem {
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.baimgWrap {
    position: relative;
    overflow: visible;
}

.baimgWrap > a {
    display: block;
    position: relative;

    border-radius: 16px;
    overflow: hidden;

    box-shadow:
        0 0 10px rgba(0,0,0,.08);
}

.baimgWrap img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;

    transition: .4s;
}

.baimgWrap:hover img {
    transform: scale(1.03);
}

.baTag {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 2;
    min-width: 50%;
    width: fit-content;
    padding: 5px 30px;
    border-radius: 10px;
    font-weight: 700;
    text-align: center;
    border: 2px solid var(--sub-color01);
}

.baTag.before {
    background: #fff;
    color: var(--main-color01);
}

.baTag.after {
    background: var(--sub-color01);
    color: #fff;
}
.baComment{
    margin-top: 1em;
}


.zoomIcon {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 10px 0 0 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 18px;
}
.gradationBorder .zoomIcon {
    right: 3px;
    bottom: 3px;
}

.cleanPhotoList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 4vw, 40px);

    margin-top: 40px;
}

.photoItem {
    margin: 0;
}

.photoItem figcaption {
    margin-top: 20px;
    line-height: 1.5;
}


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

    .baImages,
    .photoList {
        grid-template-columns: 1fr;
    }
    .worksBAItem + .worksBAItem {
        margin-top: 60px;
    }
    .baTag {
        min-width: 100px;
        padding: 8px 16px;
        font-size: 14px;
    }
    .zoomIcon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        right: 15px;
        bottom: 15px;
    }
}
.relatedWorksBox{}

.relatedWorksBox::before {
    content: "";
    position: absolute;
    left: -10vw;
    top: 2vw;
    width: min(100vw, 1400px);
    aspect-ratio: 3 / 2;
    z-index: -1;
    background: linear-gradient(180deg, var(--sub-color02) 50%, var(--sub-color03) 100%);
    -webkit-mask: url(./img/deco_ribbon.svg) no-repeat center / contain;
    mask: url(./img/deco_ribbon.svg) no-repeat center / contain;
    transform: rotate(5deg);
}


/*-------------------#Voice お客様の声-----------------*/
#voice #cornerName {
    background-image: url(./img/bg_voice_ttl.png);
}
/* ---- お客様の声 一覧 -------- */

/* ---- お客様の声 シングル -------- */
.cstVoice {
  border: 2px solid  var(--sub-color01);
  border-radius: 8px;
  padding: clamp(25px, 3vw, 50px);
  background: #fff;
  position: relative;
  margin: clamp(40px, 5vw, 80px) 0 clamp(25px, 3vw, 50px) !important;
}

#main .wysiwyg .cstVoice > h2 {
  background: var(--sub-color01);
  color: #fff;
  font-weight: bold;
  font-size: clamp(18px, 3vw, 30px);
  padding: 0 1em;
  border-radius: 10px;
  position: absolute;
  top: calc(clamp(25px, 5vw, 50px) * -0.7);
  left:0;
  right: 0;
  margin: auto;
  width: fit-content;
}
#main .wysiwyg .cstVoice > h2::before {
    content: none;
}
#main .wysiwyg .cstVoice p {
    margin: 0;
}
.baItem.voiceImgItem {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
}
.relatedVoiceBox {
    margin-top: clamp(80px, 8vw, 150px);
}
.relatedVoiceBox::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: calc((100% - clamp(20px, 5vw, 80px)));
    height: 60%;
    background: linear-gradient(180deg, var(--sub-color03) 0%, var(--sub-color02) 100%);
    border-radius: 12px 0 0 12px;
    z-index: -1;
}
.relatedVoiceBox .articleCardHead {
    text-align: center;
}
#main .relatedVoiceBox .subTtl {
    color: var(--white);
}
#main .relatedVoiceBox .headLineH2 {
    background: linear-gradient(180deg, var(--white) 50%, var(--sub-color02) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media screen and (max-width: 767px) {
    .relatedVoiceBox::before {
        width: 100%;
        border-radius: 0;
    }
}


/*-------------------#request 資料請求-----------------*/
/* ---- 資料請求 一覧 -------- */
.articleCardWrapRequest .articleCardImg::after{
    content: none;
}
.articleCardWrapRequest .btn{
    margin-top: 0;
    width: fit-content;
    height: auto;
    padding: 10px 4em 10px 2em;
}
.articleCardWrapRequest{
    padding-bottom: 30px;
}
/* ---- 資料請求 シングル -------- */
.requestHead{
    margin-bottom: clamp(25px, 3vw, 50px);
}
.documentImg{
    max-width: 650px;
    width: 100%;;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
}
.documentImg img{
    width: 100%;;
    height: auto;
    object-fit: cover;
}
#main .btn.downloadBtn{
    padding-right: 5em;
}
#main .btn.downloadBtn::after {
    content: "";
    display: block;
    width: 25px;
    aspect-ratio: 431 / 376;
    background-color: var(--white);
    -webkit-mask: url(./img/download.svg) no-repeat center / contain;
    mask: url(./img/download.svg) no-repeat center / contain;
}
#main a.btn.downloadBtn:hover::after{
    transform: translateY(-50%);
}
#main .requestForm {
    background: #f1f9eb;
    margin-top: clamp(60px, 7vw, 150px);
}
#main p.requestFormHead{
    text-align: center;
}
#main .requestForm .requestFormSubTtl{
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight: 900;
    margin:0;
    text-align: center;
}
#main .requestForm .headLineH2{
    text-align: center;
    margin-top:0;
}
#main .highlight{
    color: var(--main-color01);
}
/*------------------- #corporate 会社案内 -----------------*/
.nav-menu ul {
  display: flex;
  justify-content: center;
  gap: clamp(40px, 6vw, 120px);
  padding: 20px 0;
  margin: 0;
  list-style: none;
}
.nav-menu ul li{
    min-width: calc((100% - clamp(40px, 6vw, 120px) * 2 - 10vw) / 3);
}
#main .nav-menu a {
  position: relative;
  text-decoration: none;
  font-size: 18px;
  color: #333;
  padding-bottom: 8px;
  padding-right: 1em;
  padding-left: 1em;
  width: 100%;
  display: block;
}

#main .nav-menu a::after {
  content: "\f078"; /* Font Awesome 5 Free の下向き矢印 */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: -0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #333;
}

#main .nav-menu a:hover {
}

#main .nav-menu a:hover::after {
  color: var(--main-color01);
}

/* 下線 */
.nav-menu a {
  border-bottom: 2px solid var(--black);
}

.nav-menu a:hover {
    border-color: var(--main-color01);
}
#main table.outlineTable {
    border-bottom: none !important;
    border-top: none !important;
}
#main table.outlineTable th,
 #main table.outlineTable td {
    padding: clamp(15px, 2vw, 40px) clamp(10px, 2vw, 20px);
    border-bottom: #94e0a7 solid 1px;
}
#main table.outlineTable th {
    min-width: 30%;
    font-weight: 600;
    background: none;
    text-align: center;
    white-space: nowrap;
}
#main table.outlineTable .corporateMap {
    margin-top: 20px;
}
#main table.outlineTable iframe {
    display: block;
        width: 100%;
}
#main .outlineList li{
    border-bottom: 1px solid var(--silver);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
#main .outlineList li:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#main table.historyT {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  border: none;
  margin-bottom: 0;
}

#main table.historyT tr {
  position: relative;
}

#main table.historyT th {
  background: none;
  border:none;

    padding: 40px 10px 40px 10em;
  text-align: left;
  font-weight: 600;
  vertical-align: top;
  position: relative;
  color: var(--main-color01);
  width: 17em;
  line-height: 1;
}

.historyT th::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50px;
  width: 12px;
  height: 12px;
  background: var(--sub-color01);
  border-radius: 50%;
  z-index: 3;
}
.historyT th::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 55px;
  width: 6em;
  height: 2px;
  border-bottom: 2px dotted var(--sub-color01);
  z-index: 2;
}
.historyT tr::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--sub-color01);
  z-index: 1;
}

#main table.historyT tr:last-child::after {
  height: 90%;
}

#main table.historyT td {
  padding: 40px 20px;
  border:none;
}

#main table.historyT th span {
  font-size: 1.5em;
}
@media (max-width: 1100px) {
    #main table.historyT td,
    #main table.historyT th {
        display: block;
        padding: 10px 10px 10px 3em;
    }
    #main table.historyT th {
    }
    .historyT th::after {
        width: 1em;
    }
    #main table.outlineTable .corporateMap {
        width: 100%;
        aspect-ratio: 4/3;
    }
}
@media (max-width: 767px) {
    .nav-menu ul {
        flex-direction: column;
        gap: 20px;
    }

    .nav-menu a::after {
        right: -15px;
    }
    #main table.outlineTable td,
    #main table.outlineTable th {
        display: block;
        width: 100%;
    }
    .historyT th::before {
        top: 45%;
    }
    .historyT th::after {
        top: calc(45% + 5px);
    }
    
}

/*------------------- 投稿系共通 -----------------*/
.worksSingle .infoBox .time,
.blogSingle .infoBox .time {
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 20px;
}

.worksSingle .infoBox>i[class^='fa'],
.blogSingle .infoBox>i[class^='fa'] {
    font-size: 21px;
}

.worksSingle .infoBox .cats,
.blogSingle .infoBox .cats {
    padding-left: 15px;
}

.worksSingle .outline .cats a,
.blogList .outline .cats a,
.blogSingle .infoBox .cats a {
    font-size: 14px;
    padding: 8px 15px;
}

.worksSingle .infoBox,
.blogSingle .infoBox {
    margin-bottom: 40px;
}

/*------------------- #contact お問い合わせ -----------------*/

#contact #main {
    padding-bottom: 0;
}


/*------------------- #faq よくあるご質問 -----------------*/
#faq #cornerName {
    background-image: url(./img/bg_faqttl.png);
}
.faqList{
    display:flex;
    flex-direction:column;
    gap:clamp(20px, 3vw, 40px);
    padding-bottom: 30px;
}

.faqItem{
    background:#fff;
    border-radius:20px;
    box-shadow:0 0 20px rgba(0,0,0,0.1);
    overflow:hidden;
}

.faqQuestion{
    width:100%;
    display:flex;
    align-items:center;
    gap:clamp(15px, 2vw, 25px);
    padding:clamp(25px, 3vw, 40px);
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
}

.faqQ,
.faqA{
    width:40px;
    height:40px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size: 26px;
    line-height:1;
}

.faqQ{
    background:var(--sub-color01);
    color:#fff;
}

.faqQuestionText{
    flex:1;

}

.faqIcon{
    width:40px;
    height:40px;
    position:relative;
    flex-shrink:0;
}

.faqIcon::before,
.faqIcon::after{
    content:"";

    position:absolute;

    top:50%;
    left:50%;

    background:var(--main-color01);

    transition:.3s;
}

.faqIcon::before{
    width:30px;
    height:2px;

    transform:translate(-50%, -50%);
}

.faqIcon::after{
    width:2px;
    height:30px;

    transform:translate(-50%, -50%);
}


.faqItem.is-open .faqIcon::after{
    opacity:0;
}


.faqAnswer{
    display:none;

    padding:
        0
        clamp(25px, 3vw, 40px)
        clamp(25px, 3vw, 40px);
}

.faqAnswerInner{
    display:flex;
    gap:clamp(15px, 2vw, 25px);

    padding:clamp(25px, 3vw, 40px);

    background:#f1f9eb;

    border-radius:15px;
}

.faqA{
    border:3px solid var(--sub-color01);
    color:var(--sub-color01);
    background: var(--white);
}

.faqAnswerText{
    flex:1;
    min-width:0;
}

.faqAnswerText p:last-child{
    margin-bottom:0;
}

@media (max-width:767px){

    .faqQuestion{
        align-items:flex-start;
    }

    .faqQuestionText{
        font-size:18px;
    }

    .faqAnswerInner{
        flex-direction:column;
    }

    .faqQ,
    .faqA{
        width:40px;
        height:40px;

        font-size:26px;
    }

    .faqIcon{
        width:30px;
        height:30px;
    }

}

/*------------------- #service サービス -----------------*/
#service #cornerName {
    background-image: url(./img/bg_service_ttl.png);
}
#service .facilityWrap{
}

.tabBtnWrap{
    display:flex;
    justify-content:center;
    gap:10px;

    position:relative;
    z-index:2;
}

.tabBtn{
    width:min(46%,560px);
    height:90px;

    border:none;
    border-radius:16px 16px 0 0;
    background:var(--sub-color04);
    color:var(--sub-color01);
    font-size: clamp(18px, 2vw, 24px);
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.tabBtn.is-active{
    background:var(--sub-color01);
    color:var(--white);
}

.tabContents{
}

.tabContent{
    display:none;
}

.tabContent.is-active{
    display:block;
}
.tabContentInner{
    padding-top:clamp(40px,5vw,80px);
    padding-bottom:clamp(40px,5vw,80px);
}
.tabContentInner::before{
    content:"";
    display:block;
    position:absolute;
    top:0;
    left: 50%;
    transform: translateX(-50%);

    width:100vw;
    height:100%;
    background:var(--sub-color01);
    z-index:-1;
}



.serviceSearch{
}
.serviceSearch .postTitle {
    color:var(--main-color01);
}

.serviceDetailHedding{

    font-size: clamp(24px, 4vw, 32px);
    font-weight: 500;
    margin-bottom: 50px;
    border-color: var(--silver);
    border-width: 0 0 1px 0;
    border-style: solid;
    padding-bottom: 15px;

    position:relative;
    padding-left:3em;
}
.serviceDetailHeddingIcon{
    position:absolute;
    left:0;
    top:calc(50% - 5px);
    transform:translateY(-50%);

    width:2em;
    height:2em;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        180deg,
        var(--sub-color02),
        var(--sub-color03)
    );
}
.serviceDetailHeddingIcon svg{
    width:1.2em;
    height:1.2em;
}

.serviceDetailHeddingIcon svg *{
    fill:#fff;
}
/*
.office{
    --icon-img: url(./img/ico_office.svg);
}
.clinic{
    --icon-img: url(./img/ico_clinic.svg);
}
.factory{
    --icon-img: url(./img/ico_factory.svg);
}
.apartment{
    --icon-img: url(./img/ico_apartment.svg);
}
.nursing{
    --icon-img: url(./img/ico_nursing.svg);
}
.pachinko{
    --icon-img: url(./img/ico_pachinko.svg);
}
.school{
    --icon-img: url(./img/ico_school.svg);
}
.shop{
    --icon-img: url(./img/ico_shop.svg);
}
.hotel{
    --icon-img: url(./img/ico_hotel.svg);
}
.temple{
    --icon-img: url(./img/ico_temple.svg);
}*/

.serviceDetailMain{
    display:grid;
    grid-template-columns:
        1fr
        minmax(400px,560px);

    gap:clamp(40px,5vw,80px);
}

.serviceDetailTxt{
    line-height:2.2;
}

.serviceDetailContent .btn{
    margin-top:50px;
}
.serviceDetailImg {
    aspect-ratio: 16/9;
    border-radius:12px;
    overflow: hidden;
}
.serviceDetailImg img{
    width:100%;
    height: 100%;
    display:block;
    object-fit: cover;

}

.serviceItemList{
    display:grid;
    grid-template-columns:
        repeat(6,1fr);

    gap:20px;

    list-style:none;
    padding:0;
    margin:60px 0 0;
}

.serviceItemCard{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:clamp(5px, 1vw, 15px);;

    background:#fff;
    border-radius:12px;
    text-align:center;
    text-decoration:none;
    color:var(--main-color);
    aspect-ratio:1/1;
    box-shadow:
    0 0 10px rgba(3, 3, 3, 0.1);

}


.serviceItemCard img{
    width:clamp(40px, 8vw, 70px);
    height:clamp(40px, 8vw, 70px);
    object-fit:contain;
}
.serviceItemCard span{
    font-size: clamp(14px, 1.5vw, 16px);
    line-height:1.3;
    font-weight:700;
    color:var(--main-color01);
    width:6em;
}
@media screen and (max-width:1100px){

    .serviceDetailMain{
        grid-template-columns:1fr;
    }

    .serviceDetailImg{
        order:-1;
    }

    .serviceItemList{
        grid-template-columns:repeat(4,1fr);
    }

}

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

    .serviceSearchTtl{
        margin-bottom:40px;
    }

    .serviceItemList{
        grid-template-columns:repeat(3,1fr);
        gap:10px;
    }

    .serviceItemList a{
        min-height:130px;
    }

}

/*------------------- #service serviceitem シングル -----------------*/
.serviceItemHead{
}
.serviceDetailIntro{
    display: grid;
    grid-template-columns: minmax(0, 560px) 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}
#main .wysiwyg.serviceDetailText h3{
    color: var(--main-color01);
    font-size: clamp(18px, 2vw, 26px);
    background: none;
    border:none;
    padding: 0;
}
.serviceDetailPhoto{
    aspect-ratio: 5 / 3;
    overflow: hidden;
    border-radius: 20px;
}

.serviceDetailPhoto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.serviceDetailText{
}

.serviceDetailMenuArea{
    background:#f1f9eb;
    padding:clamp(60px, 9vw, 100px) 0;
    position:relative;
    overflow:visible !important;
    margin-top:clamp(60px, 9vw, 100px);
}
.serviceDetailMenuArea::before {
    content: "";
    position: absolute;
    right: 0;
    top: -8vw;
    width: 30%;
    aspect-ratio: 5 / 3;
    background: linear-gradient(180deg, var(--sub-color02) 30%, var(--sub-color03) 100%);
    -webkit-mask:  url(./img/deco6star.svg) right top / 50% no-repeat, url(./img/deco4star.svg) left top 45% / 20% no-repeat, url(./img/deco7star.svg) right 70% bottom 20% / 20% no-repeat;
    mask: url(./img/deco6star.svg) right top / 50% no-repeat, url(./img/deco4star.svg) left top 45% / 20% no-repeat, url(./img/deco7star.svg) right 70% bottom 20% / 20% no-repeat;
}

.serviceDetailMenuArea .headLineH3{
    font-size: clamp(24px, 2.5vw, 36px);
    margin-bottom: clamp(30px, 5vw, 60px);
}

.serviceDetailMenuList{
    display:flex;
    flex-direction:column;

    gap:clamp(25px, 4vw, 40px);
}

.serviceDetailMenuCard{
    background:#fff;

    border-radius:10px;
    padding:
    clamp(10px, 2vw, 20px)
    clamp(15px, 2.5vw, 25px);
    box-shadow:
        0 8px 30px rgba(117, 170, 102, 0.2);
}
.serviceDetailMenuCard > :last-child {
    margin: 0;
}
.serviceDetailMenuCard{
}
.serviceDetailMenuCard h3{
    margin:0 0 0.8em;
    text-align:center;
    color:var(--main-color01);
    font-size: clamp(18px, 2vw, 26px);
}

#main .serviceDetailMenuCard p{
    margin:0 !important;
}
#main table.servicePriceTable{
    margin: 0;

}
#main table.servicePriceTable th,
#main table.servicePriceTable td{
    padding: 1.5em;
    max-width: 50%;
}
#main table.servicePriceTable th{
    text-align: center;
}
#main table.servicePriceTable td.priceCell{
    text-align: right;
    width: 30%;
}

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

    .serviceDetailIntro{
        grid-template-columns: 1fr;
    }

    .serviceDetailPhoto{
        max-width: 560px;
        margin: 0 auto;
    }
    #main table.servicePriceTable th,
    #main table.servicePriceTable td{
        padding: 0.5em;
    }
}
/*------------------- #service servicefacility シングル -----------------*/
.serviceFeatureList{
    display:flex;
    flex-direction:column;
}

.serviceFeatureItem{
    display:grid;
    grid-template-columns:
        clamp(50px, 6vw, 80px)
        1fr;
    gap:clamp(20px, 4vw, 60px);

    padding:clamp(25px, 4vw, 50px) 0;

    border-bottom:1px dotted #bbb;
}

.serviceFeatureIcon{
    display:flex;
    justify-content:center;
    align-items:center;
}

.serviceFeatureIcon img,
.serviceFeatureIcon svg{
    width:auto;
    max-width:80px;
    display:block;
    color:var(--main-color01);
}

.serviceFeatureBody h3{
    color:var(--main-color01);
    font-size: clamp(18px, 2vw, 26px);
    font-weight:500;
    line-height:1.4;
    margin-bottom:0.8em;
}

.serviceFeatureBody p{
    margin:0;
}

.serviceCardArea{
	padding:clamp(60px,8vw,100px) 0;
	background:var(--sub-color01);
}

.serviceCardList{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:clamp(30px,4vw,80px);
}

.serviceCardItem{
	background:#fff;
	border-radius:20px;
	overflow:hidden;
    box-shadow: 0 0 30px rgba(72, 156, 0, 0.2);
    padding: 0 !important;
}

.serviceCardPhoto img{
	width:100%;
	aspect-ratio:5 / 3;
	object-fit:cover;
	display:block;
}

.serviceCardBody{
	padding: clamp(25px,4vw,40px);
}

.serviceCardIcon{
	width:110px;
	aspect-ratio:1;
	margin:0 auto 30px;
	display:grid;
	place-items:center;
	background:#fff;
	border-radius:12px;
	box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.serviceCardIcon img{
	max-width:60%;
	height:auto;
	display:block;
}

.serviceCardTitle{
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 500;
	line-height:1.4;
	color:var(--main-color01);
	margin-bottom:25px;
	text-align:center;
}

#main .serviceCardBody p{
	text-align:left;
	margin-bottom:0;
}
#main .serviceCardBody a.btn{
	margin-top:clamp(20px, 2vw, 30px);
    min-width: min(100%, 280px);
    padding: 15px 3em 18px 2em;
}

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

    .serviceFeatureItem{
        grid-template-columns:1fr;
        gap:20px;
    }

    .serviceFeatureIcon{
        justify-content:center;
    }

    .serviceFeatureBody h3{
        font-size:24px;
        margin-bottom:10px;
        text-align:center;
    }

    .serviceCardList{
        grid-template-columns:1fr;
    }

}