@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&family=Shippori+Mincho:wght@400;600;800&family=Zen+Old+Mincho&display=swap');

:root {
  --color-brand: #ffbb71;
  --color-brand-deep: #8F4F18;
  --color-brand-pale: #D79756;
  --color-brand-soft: #FFF0DD;
  --color-accent: #D1385F;
  --color-btn: #ff7f3d;
  --color-bg-highlight: #FFF7EF;
  --color-white: #FFF;
  --color-black: #000;
  --color-text: #222;
  --color-text-muted: #444;
  --color-text-subtle: #333;
  --color-border: #CCC;
  --color-bg-soft: #FFFBF7;
  --color-bg-softer: #FFF3E7;
  --color-bg-lightgray: #f3f3f3;
  --color-surface-overlay: rgb(255 255 255 / .75);
  --color-surface-overlay-soft: rgba(255, 255, 255, 0.5);
  --color-content-strong: #111;

  /* タイポグラフィ */
	--font-family-base: "M PLUS Rounded 1c", sans-serif;
	--font-family-sp: sans-serif;
	--font-family-icon: "Font Awesome 5 Free";
	--font-size-base: 16px;
	--font-size-sp: 14px;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 10px;
  --space-md: 15px;
  --space-lg: 20px;
  --space-xl: 30px;
  --space-2xl: 40px;
  --space-3xl: 60px;
  --space-4xl: 80px;

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-l: 50px;
  --radius-round: 50%;
  --radius-pill: 100vh;

  --font-size-heading-2xlg: 2em;
  --font-size-heading-lg: 1.6em;
  --font-size-heading-md: 1.5em;
  --font-size-heading-sm: 1.2em;
  --font-size-tel: 1.8em;
}

/*-------------------------------------------
余白ユーティリティ
-------------------------------------------*/
.mt-2xs { margin-top: var(--space-2xs) !important; }
.mt-xs  { margin-top: var(--space-xs) !important; }
.mt-sm  { margin-top: var(--space-sm) !important; }
.mt-md  { margin-top: var(--space-md) !important; }
.mt-lg  { margin-top: var(--space-lg) !important; }
.mt-xl  { margin-top: var(--space-xl) !important; }
.mt-2xl { margin-top: var(--space-2xl) !important; }
.mt-3xl { margin-top: var(--space-3xl) !important; }
.mt-4xl { margin-top: var(--space-4xl) !important; }

.mb-2xs { margin-bottom: var(--space-2xs) !important; }
.mb-xs  { margin-bottom: var(--space-xs) !important; }
.mb-sm  { margin-bottom: var(--space-sm) !important; }
.mb-md  { margin-bottom: var(--space-md) !important; }
.mb-lg  { margin-bottom: var(--space-lg) !important; }
.mb-xl  { margin-bottom: var(--space-xl) !important; }
.mb-2xl { margin-bottom: var(--space-2xl) !important; }
.mb-3xl { margin-bottom: var(--space-3xl) !important; }
.mb-4xl { margin-bottom: var(--space-4xl) !important; }

.ml-2xs { margin-left: var(--space-2xs) !important; }
.ml-xs  { margin-left: var(--space-xs) !important; }
.ml-sm  { margin-left: var(--space-sm) !important; }
.ml-md  { margin-left: var(--space-md) !important; }
.ml-lg  { margin-left: var(--space-lg) !important; }
.ml-xl  { margin-left: var(--space-xl) !important; }
.ml-2xl { margin-left: var(--space-2xl) !important; }
.ml-3xl { margin-left: var(--space-3xl) !important; }
.ml-4xl { margin-left: var(--space-4xl) !important; }

.mr-2xs { margin-right: var(--space-2xs) !important; }
.mr-xs  { margin-right: var(--space-xs) !important; }
.mr-sm  { margin-right: var(--space-sm) !important; }
.mr-md  { margin-right: var(--space-md) !important; }
.mr-lg  { margin-right: var(--space-lg) !important; }
.mr-xl  { margin-right: var(--space-xl) !important; }
.mr-2xl { margin-right: var(--space-2xl) !important; }
.mr-3xl { margin-right: var(--space-3xl) !important; }
.mr-4xl { margin-right: var(--space-4xl) !important; }

.mx-2xs { margin-left: var(--space-2xs) !important; margin-right: var(--space-2xs) !important; }
.mx-xs  { margin-left: var(--space-xs) !important; margin-right: var(--space-xs) !important; }
.mx-sm  { margin-left: var(--space-sm) !important; margin-right: var(--space-sm) !important; }
.mx-md  { margin-left: var(--space-md) !important; margin-right: var(--space-md) !important; }
.mx-lg  { margin-left: var(--space-lg) !important; margin-right: var(--space-lg) !important; }
.mx-xl  { margin-left: var(--space-xl) !important; margin-right: var(--space-xl) !important; }
.mx-2xl { margin-left: var(--space-2xl) !important; margin-right: var(--space-2xl) !important; }
.mx-3xl { margin-left: var(--space-3xl) !important; margin-right: var(--space-3xl) !important; }
.mx-4xl { margin-left: var(--space-4xl) !important; margin-right: var(--space-4xl) !important; }

.my-2xs { margin-top: var(--space-2xs) !important; margin-bottom: var(--space-2xs) !important; }
.my-xs  { margin-top: var(--space-xs) !important; margin-bottom: var(--space-xs) !important; }
.my-sm  { margin-top: var(--space-sm) !important; margin-bottom: var(--space-sm) !important; }
.my-md  { margin-top: var(--space-md) !important; margin-bottom: var(--space-md) !important; }
.my-lg  { margin-top: var(--space-lg) !important; margin-bottom: var(--space-lg) !important; }
.my-xl  { margin-top: var(--space-xl) !important; margin-bottom: var(--space-xl) !important; }
.my-2xl { margin-top: var(--space-2xl) !important; margin-bottom: var(--space-2xl) !important; }
.my-3xl { margin-top: var(--space-3xl) !important; margin-bottom: var(--space-3xl) !important; }
.my-4xl { margin-top: var(--space-4xl) !important; margin-bottom: var(--space-4xl) !important; }

.m-2xs { margin: var(--space-2xs) !important; }
.m-xs  { margin: var(--space-xs) !important; }
.m-sm  { margin: var(--space-sm) !important; }
.m-md  { margin: var(--space-md) !important; }
.m-lg  { margin: var(--space-lg) !important; }
.m-xl  { margin: var(--space-xl) !important; }
.m-2xl { margin: var(--space-2xl) !important; }
.m-3xl { margin: var(--space-3xl) !important; }
.m-4xl { margin: var(--space-4xl) !important; }

.pt-2xs { padding-top: var(--space-2xs) !important; }
.pt-xs  { padding-top: var(--space-xs) !important; }
.pt-sm  { padding-top: var(--space-sm) !important; }
.pt-md  { padding-top: var(--space-md) !important; }
.pt-lg  { padding-top: var(--space-lg) !important; }
.pt-xl  { padding-top: var(--space-xl) !important; }
.pt-2xl { padding-top: var(--space-2xl) !important; }
.pt-3xl { padding-top: var(--space-3xl) !important; }
.pt-4xl { padding-top: var(--space-4xl) !important; }

.pb-2xs { padding-bottom: var(--space-2xs) !important; }
.pb-xs  { padding-bottom: var(--space-xs) !important; }
.pb-sm  { padding-bottom: var(--space-sm) !important; }
.pb-md  { padding-bottom: var(--space-md) !important; }
.pb-lg  { padding-bottom: var(--space-lg) !important; }
.pb-xl  { padding-bottom: var(--space-xl) !important; }
.pb-2xl { padding-bottom: var(--space-2xl) !important; }
.pb-3xl { padding-bottom: var(--space-3xl) !important; }
.pb-4xl { padding-bottom: var(--space-4xl) !important; }

.pl-2xs { padding-left: var(--space-2xs) !important; }
.pl-xs  { padding-left: var(--space-xs) !important; }
.pl-sm  { padding-left: var(--space-sm) !important; }
.pl-md  { padding-left: var(--space-md) !important; }
.pl-lg  { padding-left: var(--space-lg) !important; }
.pl-xl  { padding-left: var(--space-xl) !important; }
.pl-2xl { padding-left: var(--space-2xl) !important; }
.pl-3xl { padding-left: var(--space-3xl) !important; }
.pl-4xl { padding-left: var(--space-4xl) !important; }

.pr-2xs { padding-right: var(--space-2xs) !important; }
.pr-xs  { padding-right: var(--space-xs) !important; }
.pr-sm  { padding-right: var(--space-sm) !important; }
.pr-md  { padding-right: var(--space-md) !important; }
.pr-lg  { padding-right: var(--space-lg) !important; }
.pr-xl  { padding-right: var(--space-xl) !important; }
.pr-2xl { padding-right: var(--space-2xl) !important; }
.pr-3xl { padding-right: var(--space-3xl) !important; }
.pr-4xl { padding-right: var(--space-4xl) !important; }

.px-2xs { padding-left: var(--space-2xs) !important; padding-right: var(--space-2xs) !important; }
.px-xs  { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
.px-sm  { padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; }
.px-md  { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; }
.px-lg  { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }
.px-xl  { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }
.px-2xl { padding-left: var(--space-2xl) !important; padding-right: var(--space-2xl) !important; }
.px-3xl { padding-left: var(--space-3xl) !important; padding-right: var(--space-3xl) !important; }
.px-4xl { padding-left: var(--space-4xl) !important; padding-right: var(--space-4xl) !important; }

.py-2xs { padding-top: var(--space-2xs) !important; padding-bottom: var(--space-2xs) !important; }
.py-xs  { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; }
.py-sm  { padding-top: var(--space-sm) !important; padding-bottom: var(--space-sm) !important; }
.py-md  { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
.py-lg  { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
.py-xl  { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.py-2xl { padding-top: var(--space-2xl) !important; padding-bottom: var(--space-2xl) !important; }
.py-3xl { padding-top: var(--space-3xl) !important; padding-bottom: var(--space-3xl) !important; }
.py-4xl { padding-top: var(--space-4xl) !important; padding-bottom: var(--space-4xl) !important; }

.p-2xs { padding: var(--space-2xs) !important; }
.p-xs  { padding: var(--space-xs) !important; }
.p-sm  { padding: var(--space-sm) !important; }
.p-md  { padding: var(--space-md) !important; }
.p-lg  { padding: var(--space-lg) !important; }
.p-xl  { padding: var(--space-xl) !important; }
.p-2xl { padding: var(--space-2xl) !important; }
.p-3xl { padding: var(--space-3xl) !important; }
.p-4xl { padding: var(--space-4xl) !important; }
/*-------------------------------------------
テンプレート：シンプル01 ブルー 左メイン
-------------------------------------------*/

/*-------------------------------------------
common
-------------------------------------------*/
body {
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-weight: normal;
  line-height: 1.8;
}
#wrap{
  width: 100%;
}
#mainImage, #topMenu, #footer{
  width: 100%;
}
/* #topMenu_outer, */
#title_outer, #mainImage_outer, #topMenu_outer, #contents_outer, #footer_outer{
    /* width: 1200px; */
    margin: auto;
}
#wrap_body #contents{
  /* background: #f5fafa; */
  background: var(--color-white);
  margin-top: 0px;
  padding-top: 50px;
}
.article, .gallery, #mainTopics, #listTopics, #mainServices {
  background: none;
  border-top: none;
  padding: 0;
}
ul.topics li p.date, .blog_date  {
  display: none;
}
/*-------------------------------------------
記事
-------------------------------------------*/
.article, .gallery {
  margin-top: var(--space-xl);
  margin-bottom: 0;
}
.article:first-of-type{
  margin-top: 0;
}
.article .mt-30{
  margin-top: var(--space-xl);
}
.mainArticles {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: space-between;
  gap: var(--space-xl);
}
.mainArticles .article.flex_center .article_body {
    overflow: hidden;
    display: flex;
    align-items: center;
}
.mainArticles .article.flex_center .article_body .image{
    width: 100%;
}

.article.width100,
.gallery.width100{
  margin: 0 calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 8px);
  padding-right: calc(50vw - 50% + 8px);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  width: 100vw;
}

/*-------------------------------------------
テンプレート：シンプル01 ブルー 左メイン
-------------------------------------------*/

.article.bg,
.gallery.bg{
  background: var(--color-brand-deep);
}
.article.bg-light,
.gallery.bg-light{
  background: var(--color-bg-highlight);
}
.article.bg-moziku,
.gallery.bg-moziku{
  background: var(--color-brand-soft);
}

.article.full.bg_contact {
  padding: 48px 24px;
  background: url("/materials/172541721034001.jpg") center no-repeat;
  margin-bottom: 0;
}


.article.hero{
  height: 350px;
  margin: 0 calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 8px);
  padding-right: calc(50vw - 50% + 8px);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  width: 100vw;
}
.article.hero-family{
  background: url("") no-repeat;
  background-size: cover;
  background-position: center;
}

#mainContents {
  /* width: 900px; */
  padding-bottom: 0;
}
#sideContents {
  /* width: 260px; */
}

/*-------------------------------------------
flow 流れ
-------------------------------------------*/
.article table#flowTbl td {
  border: solid 5px var(--color-brand-soft);
  background: var(--color-bg-highlight);
}
.article table#flowTbl td:after {
  color: var(--color-brand-soft);
}

.mainArticles .article.articleFlow {
  border: 3px solid var(--color-brand);
  display: block;
  padding: 0;
  position: relative;
  margin-bottom: 35px;
	box-sizing: border-box;
  /* max-width: 1200px; */
  border-radius: var(--radius-sm);
}

.mainArticles .article.articleFlow .article_body{
  width: 100%;
  padding: var(--space-xl) var(--space-xl);
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.mainArticles .article.articleFlow.first{
	margin-top:0px;
}

.mainArticles .article.articleFlow::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top: 20px solid var(--color-brand);
  /* border-top: 20px solid color-mix(in srgb, #204d74, white 78%); */
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  border-radius: var(--radius-sm);
}
.mainArticles .article.articleFlow.last::after {
  display: none;
}

.mainContents .article.articleFlow h3{
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: var(--space-xl);
  padding: 0px 0 6px 0px;
  color: var(--color-brand-pale);
  border: none;
  border-bottom: solid 1px var(--color-brand-pale);
  text-align: left;
  font-size: var(--font-size-heading-sm);
  display: flex;
  align-items: center;
  font-weight: bold;
  box-shadow: unset;
  background: none;
}

.mainArticles .article.articleFlow h6 {
  margin: 0px 0 0px;
  padding: 0px 0;
  color: var(--color-text-muted);
  font-size: 102%;
  letter-spacing: 0.1em;
}

.mainArticles .article.articleFlow h4{
  margin-top: 0;
  margin-bottom: 14px;
  padding: 6px 0 6px 0px;
  color: var(--color-brand-deep);
  border: none;
  border-bottom: solid 1px var(--color-brand-deep);
  text-align: left;
  font-size: var(--font-size-heading-sm);
  display: flex;
  align-items: center;
  font-weight: bold;
}

.mainArticles .article.articleFlow h4:after{
  content: "";
  display: none;
}


.mainArticles .article.margin0{
  margin:0;
  padding:0;
}
.mainArticles .article.mt0{
  margin-top: -20px;
}

.number{
  background: var(--color-brand-deep);
  color: var(--color-white);
  display: inline-block;
  text-align: center;
  border-radius: var(--radius-round);
  margin-right: var(--space-xs);
  font-size: 0.6em;
  padding: 0;
  width: 2em;
  height: 2em;
  line-height: 2;
}
#wrap .alignItemCenter{
  display: flex;
  align-items: center;
}
/*-------------------------------------------
文字装飾
-------------------------------------------*/
.leadText {
  font-size:115%;
  color: var(--color-brand-pale);
  font-weight:bold;
  line-height:1.6;
}



.dashed-note {
  background-color: var(--color-white);
  background-image: 
      linear-gradient(90deg, transparent 0%, transparent 50%, var(--color-white) 50%, var(--color-white) 100%),
      linear-gradient(180deg, var(--color-border) 1px, transparent 1px);
  background-size: 8px 100%,
                   100% 2.5em;
  line-height: 2.5em;
  padding-bottom: 1px;
}

#mainArticles .envelope {
  border-radius: var(--radius-sm);
  height: 100%;
  padding: var(--space-xl);
  border: solid 1px var(--color-brand-pale);
  text-align: left;
  background: var(--color-surface-overlay-soft);
  margin: auto;
  overflow: hidden;
}
#mainArticles .inlineBlock{
  display: inline-block;
}


#mainArticles .concept{
  position: relative;
  background: var(--color-bg-highlight);
  /* box-shadow: 0px 0px 0px 5px #fff0cd; */
  /* border: dashed 2px white; */
  padding: var(--space-xl);
  /* color: #454545; */
  color: var(--color-brand-deep);
  box-sizing: border-box;
}
#mainArticles .concept:after{
  position: absolute;
  content: '';
  right: 0px;
  top: 0px;
  border-width: 0 24px 24px 0;
  border-style: solid;
  border-color: var(--color-brand-soft) var(--color-white) var(--color-brand-soft);
  box-shadow: -1px 1px 1px var(--color-border);
}
#mainArticles .concept p {
  margin: 0; 
  padding: 0;
}

.step{
  background: var(--color-brand-deep);
  color: var(--color-white);
  display: inline-block;
  text-align: center;
  border-radius: var(--radius-sm);
  margin-right: var(--space-xs);
  font-size: 0.6em;
  padding: 3px 12px;
  /* essence */
}


.essenceTitle{
  font-size: 24px;
  font-weight: bold;
  padding-left: 0px;
  position: relative;
}
.essenceTitleText{
  position: relative;
  left: 86px;
  top: 12px;
  color: var(--color-brand-deep);
}
.essence {
  background: var(--color-brand-deep);
  color: var(--color-white);
  display: inline-block;
  text-align: center;
  border-radius: var(--radius-round);
  font-size: 26px;
  padding: 0;
  width: 70px;
  height: 70px;
  line-height: 70px;
  font-weight: normal;
  position: absolute;
  top: 0;
  left: 0;
}
.essenceBody{
  background: var(--color-brand-soft);
  border-radius: var(--radius-md);
  padding: var(--space-2xl) var(--space-xl) var(--space-xl) var(--space-xl);
}
/*-------------------------------------------
リンクボタン
-------------------------------------------*/

a.btn, .mainServices .service .more a, 
#mainTopics .listview a, ul.topics li p.more a,
#mainArticles table.contactTable input.button {
  position: relative;
  color: var(--color-white);
  /* border-bottom: solid 2px var(--color-accent); */
  background: var(--color-btn);
  border-radius: var(--radius-l);
}

a.btn {
  color: var(--color-white);
  padding: var(--space-2xs) 14px;
  display: inline-block;
}
a.btn:hover, .mainServices .service .more a:hover,
#mainTopics .listview a:hover,
ul.topics li p.more a:hover {
  background: var(--color-brand);  
  opacity: 0.9;
}
#mainTopics .listview a:hover, a.btn:hover, p.more a:hover, #mainServices h3 a:hover{
  top: 2px;
  /* border-bottom: none; */
}
.linkBtnWrap {
  display:flex;
  flex-wrap:wrap;
}
a.linkBtn {
    font-size: 1em;
  padding: var(--space-xs) var(--space-md);
  color: var(--color-white);
    font-weight: bold;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    width: 60%;
    height: auto;
    /* background: #47afee url(/materials/165608537993801.png) no-repeat left 16px center; */
    background: var(--color-accent);
    background-size: 36px;
    border-radius: var(--radius-pill);
    text-decoration: none;
}
a.linkBtn:hover {
  background: var(--color-accent);
  background-size:36px;
  opacity: 0.9;
}

/*-------------------------------------------
画像
-------------------------------------------*/
.mainArticles .article.nomargin .article_body.article_center .image, .mainArticles .article.nomargin .article_body.article_center img {
  padding: 0;
  margin:0 auto;
}
.article .image img {
  max-width: 100%;
  border-radius: var(--radius-md);
}
/*-------------------------------------------
背景色
-------------------------------------------*/
.article.gray, .gallery.gray {
  background: var(--color-bg-soft);
}
.article.lightblue, .gallery.lightblue {
  background: var(--color-bg-softer);
}
.article.gray, .gallery.lightgreen {
  background: var(--color-bg-highlight);
}

/*-------------------------------------------
title
-------------------------------------------*/
#wrap_body {
  & #title,
  & #title_outer {
    padding: 10px 0;
    /* background: #f5fafa; */
    /* background: var(--color-white); */
  }
}

#title {
  /* background: url("/materials/177625114211001.jpg") no-repeat center;
  background-size: 280px; */

  & #title_outer {
    background: none;
    margin: auto;
    padding: 0;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: url("/materials/178591300486602.png") no-repeat center right;
    background-size: 350px;
  }

  & h1 {
    background: url("/materials/177616774989801.png") no-repeat center left;
    background-size: contain;
    height: 88px;
    width: 450px;
    padding: 0;

    &:hover {
      opacity: 0.7;
    }

    & a {
      display: inline-block;
      overflow: hidden;
      text-indent: 110%;
      white-space: nowrap;
      height: 100%;
      width: 100%;
    }
  }
}

/*-------------------------------------------
トップメニュー
-------------------------------------------*/

#wrap_body {
  & #topMenu {
    border-top: 1px solid var(--color-brand-pale);
    border-bottom: 1px solid var(--color-brand-pale);
    /* background: var(--color-brand-pale); */
    background: none;
  }
}

#topMenu_outer {
  & .topMenu {
    & li {
      letter-spacing: normal;
      background: none;
      box-sizing: border-box;
      width: auto;
      text-align: center;
      flex: 1 0 auto;
      position: relative;

      &:before {
        content: "";
        width: 1px;
        height: 50%;
        border-radius: var(--radius-sm);
        background: var(--color-border);
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
      }

      &:last-of-type:after {
        content: "";
        width: 1px;
        height: 50%;
        border-radius: var(--radius-sm);
        background: var(--color-brand-pale);
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
      }
    }
  }
}

#topMenu {
  & .topMenu {
    & li {
      &:hover {
        background: none;
      }

      & a {
        color: var(--color-black);
        font-weight: bold;

        &:hover {
          background: var(--color-brand-soft);
          color: var(--color-text);
          border: none;
        }
      }
    }
  }
}
/*-------------------------------------------
メインバナー背景色
-------------------------------------------*/
#mainImage {
  background-color: var(--color-bg-softer);
}

.mainImage {
  & img {
    object-fit: cover;
    object-position: top center;
    min-height: 160px;
  }
}
/*-------------------------------------------
footer
-------------------------------------------*/
#footer {
  background: var(--color-brand);
}

.footer {
  & * {
    color: var(--color-white);
  }

  & li a {
    color: var(--color-brand);

    &:hover {
      color: var(--color-brand-soft);
    }
  }
}

#footer_body {
  display: block;

  & .topMenu,
  & .services {
    margin: 0;
    clear: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    gap: 10px;

    & li a {
      color: var(--color-white);
      background: none;
      padding: var(--space-2xs) var(--space-sm);

      &:before {
        color: var(--color-white);
      }

      &:hover {
        /* background-color: #aaa; */
        color: var(--color-white);
        opacity: 0.8;
        font-weight: normal;
      }
    }
  }

  & .copyright {
    background-size: cover;
    color: var(--color-white);
    font-weight: normal;
    background: none;
    text-align: center;

    & a {
      color: var(--color-white);
    }
  }
}
/*-------------------------------------------
table
-------------------------------------------*/
.article table:not(.contactTable) {
  width: -webkit-fill-available;
}
.article table:not(.contactTable) th{
  font-weight: bold;
}
.article table:not(.contactTable) td {
  background: var(--color-white);
}


/*-------------------------------------------
ノーマルテーブル
-------------------------------------------*/
.article table.normalTbl tr:nth-child(even){
  background: none;
}
#contents {
  & .box-content{
    & table.normalTbl th{
      background: none;
      border-bottom-color: var(--color-brand);
    }
    & table.normalTbl td{
        background: none;
        border-bottom-color: var(--color-brand);
    }
  }

  & table.normalTbl {
    border-top: none;

    & th,
    & td {
      padding: 16px;
      border-bottom: solid 1px var(--color-border);
    }

    & th {
      border-bottom: 1px solid var(--color-border);
      color: var(--color-text);
      background: var(--color-bg-lightgray);
      width: 25%;
      text-align: left;
    }
  }

  & table.priceTbl {
    & th,
    & td {
      width: 50%;
    }

    & td {
      text-align: right;
    }
  }
}



#mainArticles {
  & table.contactTable {
    background: var(--color-bg-soft);

    & tr {
      & th {
        background: var(--color-bg-softer);
        color: var(--color-text-subtle);
      }

      & td {
        border: none;
        border-bottom: solid 1px var(--color-border);
      }
    }
  }

  & form {
    /* background: #fef4f4; */
    background: var(--color-white);
  }
}

#mainBlogCommentForm_outer {
  & table.contactTable {
    background: var(--color-bg-soft);
  }
}
/*-------------------------------------------
ボーダーなしテーブル
-------------------------------------------*/
.borderlessTbl, .borderlessTbl th, .borderlessTbl td {
  border:none !important;
}
.borderlessTbl th {
  background: var(--color-white) !important;
}

/*-------------------------------------------
リスト
-------------------------------------------*/
ul.check{
  padding-left: 0;
}
ul.check li{
  font-size: 100%;
  color: var(--color-text-subtle);
  display: flex;
  gap: var(--space-xs);
  margin-bottom: 10px;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px dashed var(--color-brand);
  padding-left: var(--space-2xl);
}
ul.check li:before {
  display: block;
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0em;
  width: 30px;
  height: 30px;
  background: url("/materials/177622050943401.png") no-repeat center;
  background-size: contain;
  border: none;
  transform: unset;
}

/*-------------------------------------------
理由リスト
-------------------------------------------*/

.reasons{
  padding-left: 0;
  counter-reset: reasonCounter; /* カウンターをリセット */
}
.reasons > *{
  position: relative;
  font-size: 100%;
  color: var(--color-text-subtle);
  display: flex;
  gap: var(--space-xs);
  margin-bottom: 10px;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px dashed var(--color-brand);
  padding-left: var(--space-2xl);
  counter-increment: reasonCounter; /* カウンターをインクリメント */
}
.reasons > *:before{
  display: block;
  content: counter(reasonCounter); /* カウンターの値を表示 */
  position: absolute;
  top: 0.2em;
  left: 0em;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: var(--color-brand-deep);
  color: var(--color-white);
  border-radius: var(--radius-round);
  font-weight: bold;
}
/*-------------------------------------------
特徴リスト
-------------------------------------------*/
.features{
  padding-left: 0;
}
.features>*{
  font-size: 100%;
  color: var(--color-text-subtle);
  display: flex;
  gap: var(--space-xs);
  margin-bottom: 10px;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: none;
  padding-left: 34px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  position: relative;
  border: solid 1px var(--color-brand-pale);
}
.features>*:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 100%;
  background: var(--color-brand-deep);
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
/*-------------------------------------------
悩みリスト
-------------------------------------------*/

.worries{
  padding-left: 0;
}
.worries>*{
  font-size: 100%;
  color: var(--color-text-subtle);
  display: flex;
  gap: var(--space-xs);
  margin-bottom: 10px;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px dashed var(--color-brand);
  padding-left: var(--space-2xl);
  position: relative;
}
.worries>*:before {
  display: block;
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0em;
  width: 30px;
  height: 30px;
  background: url("/materials/174684815076201.png") no-repeat center;
  background-size: contain;
  border: none;
  transform: unset;
}
/*-------------------------------------------
スタイルチェックリスト
-------------------------------------------*/
ul.StyleCheckList {
    list-style: outside none;
    line-height: 2;
    padding-left: 3em;
    overflow: hidden;
    display: inline-block;
    text-align: left;
}
ul.StyleCheckList li {
  position: relative;
  color: var(--color-brand-deep);
  font-weight: bold;
  margin-bottom: 10px;
}
ul.StyleCheckList li::before {
    display: block;
    content: '';
    position: absolute;
    top: 0.4em;
    left: -2em;
    width: 0.9em;
    height: 0.5em;
    border-left: 4px solid var(--color-accent);
    border-bottom: 4px solid var(--color-accent);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


ul.StyleCheckList.strong li{
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: dashed 2px var(--color-brand-deep);
}
/*-------------------------------------------
リストスタイルなし
-------------------------------------------*/
ul.simple-ul li::before {
display:none;
}
/*-------------------------------------------
シンプルリスト
-------------------------------------------*/
.ul>*{
  margin-left: 1.5em;
  list-style-type: disc;
}
.ol>*{
  margin-left: 1.5em;
  list-style-type: decimal;
}


.checkMark{
  position: relative;
}
.checkMark:before{
  display: block;
  content: '';
  position: absolute;
  top: 0.4em;
  left: -2em;
  width: 0.9em;
  height: 0.5em;
  border-left: 4px solid var(--color-accent);
  border-bottom: 4px solid var(--color-accent);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


/* .siteGuide ul.galleryGrids {
  display: flex;
}
.siteGuide .gallery_grid li.galleryGrid {
  float: unset;
  position: static !important;
}
.siteGuide .gallery_grid li.galleryGrid .galleryGrid_outer {
  height: 100%;
}*/
.siteGuide .galleryGrid_body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.siteGuide .gallery_grid li.galleryGrid .image {
  margin-bottom: 0;
  max-width: 100%;
  text-align: center;
}
.siteGuide .gallery_grid li.galleryGrid .image img{
  border-radius: 10px 10px 0 0;
}
.gallery.siteGuide ul.galleryGrids  .comment {
  font-size: 90%;
  color: var(--color-white);
  font-weight: bold;
  padding: var(--space-xs) var(--space-sm);
  box-sizing: border-box;
  /* background: #ef7b85; */
  background: var(--color-brand-deep);
  border-radius: 0 0 10px 10px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 3em;
  height: auto;
  line-height: 1.4;
}


.gallery.propertyLink .galleryGrids{
  /* display: flex;
  gap: var(--space-xl); */
  justify-content: center;
}
.gallery.propertyLink .galleryGrids .galleryGrid{
  position: static !important;
}
.propertyLink .gallery_grid2 li.galleryGrid{
  width: auto;
}
.gallery.propertyLink ul.galleryGrids .comment {
    color: var(--color-brand-deep);
    font-size: 0.8em;
    background: var(--color-brand);
    border-radius: 50px;
    padding: 4px 10px;
}
#wrap .gallery.propertyLink .image img{
  /* max-width: 200px; */
  max-width: 100%;
}

/*-------------------------------------------
ひし形リスト
-------------------------------------------*/
ul.rhombus{
    counter-reset:list;
    list-style-type:none;
    font: 14px/1.6 'arial narrow', sans-serif;
    padding: 0px;
    overflow: hidden;
}
ul.rhombus li {
    position: relative;
    margin: 7px 0 7px 6px;
    padding: 8px 4px 8px 28px;
    font-weight: normal;
    font-size: 18px;
    border-bottom: dashed 1px var(--color-accent);
    
}
ul.rhombus li:after {
    content: "";
    position: absolute;
    top: 14px;
    left: 0px;
    width: 14px;
    height: 14px;
    background: var(--color-accent);
    color: var(--color-white);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/*-------------------------------------------
よくある質問
-------------------------------------------*/
ul.faq li.qus {
  font-weight: bold;
  border-bottom: dashed 1px;
  padding-bottom: var(--space-xs);
}
ul.faq li.qus::before {
  background-color: var(--color-brand-deep);
  content: "Q";
}
ul.faq li.ans::before {
  background-color: var(--color-accent);
  content: "A";
}
/*-------------------------------------------
見出し
-------------------------------------------*/
#mainArticles .article h2, #mainTopics h2, #listTopics h2, #mainServices h2 {
  margin: 0 0 var(--space-xl) 0;
  font-size: var(--font-size-heading-lg);
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1.25;
  text-align: left;
  padding: var(--space-lg) var(--space-2xl);
  border: none;
  width: auto;
  
}
#mainArticles h2, #listTopics h2{
  color: var(--color-text);
  margin: 0 0 0px 0;
  padding: var(--space-xl) 0;
  background: var(--color-brand-soft);
  border-radius: var(--radius-sm);
}
#mainArticles h2:before,
#listTopics h2:before,
#mainArticles div[id^="blog"] h2:before{
  display: none;
}
#mainArticles .article h2:after,
#listTopics h2:after,
#mainArticles div[id^="blog"] h2:after {
  display: none;
}
.mainContents .article h3,
.mainContents div.gallery h3,
#mainTopics h2,
#listTopics h2,
#mainArticles .article h2
{
  font-size: var(--font-size-heading-2xlg);
  border: none;
  background: none;
  margin: 0px 0px var(--space-3xl) 0px;
  padding: 60px 0 0 0px;
  text-align: center;
  color: var(--color-text);
  background: url(/materials/177621647163801.png) no-repeat;
  background-size: 100px;
  background-position: center top;
}
.article h3 a, .article h3 a:hover{
  color: var(--color-text);
}
.article h3:after, .gallery h3:after{
  content: "";
  display: none;
  max-width: 100%;
  margin: 0px auto 20px auto;
  width: 100%;
  height: 40px;
  background-size: contain;
}

.article h4{
  border: none;
  /* border-left: solid 5px var(--color-brand); */
  color: var(--color-text);
  padding: 4px 0px 4px 15px;
  background-color: unset;
  margin: 0 0 var(--space-xl) 0;
  border-radius: 0;
  font-size: var(--font-size-heading-sm);
  font-weight: bold;
  overflow: hidden;
  position: relative;
}
.article h4:before,
.article h4:after {
  display: none;
}
.article h4:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  border-radius: var(--radius-l);
  background: var(--color-brand);
}
.article h5 {
  border: none;
  border-bottom: dashed 2px var(--color-accent);
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 0;
  padding-right: 0;
  color: var(--color-accent);
  font-weight: bold;
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
  background: none;
  overflow: hidden;
}
.article h5:before,
.article h5:after{
  display: none;
}

.article h6 {
  color: var(--color-text-subtle);
  background: var(--color-bg-highlight);
  margin: var(--space-md) 0 var(--space-sm) 0;
}


.article.col2, .article.col3, .article.col4, .article.col5 {
  margin: 0 auto 0px;
}
.article.col3 {
  flex-basis: 31.5%;
}
.article.col4 {
  flex-basis: calc(25% - 15px);
}
.col2 .article_outer,
.col3 .article_outer,
.col4 .article_outer {
  height: 100%;
}



.article.card .article_body{
  /* display: flex;
  flex-direction: column; */
  height: 100%;
  padding: var(--space-xl);
  border: solid 1px var(--color-brand-soft);
  background: var(--color-surface-overlay-soft);
}
.article.card h4{
  border: none;
  border-bottom: solid 2px var(--color-brand);
  padding-left: 0;
  padding-right: 0;
}
.article.card h5{
  margin: 0 0 var(--space-xl) 0;
  font-size: 18px;
}
.card_bottom{
  margin-top: auto;
  text-align: center;
}

span.num {
  display: inline-flex;
  position: relative;
  color: var(--color-white);
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  margin-left: 0px;
  margin-right: 16px;
  z-index: 1;
}

/*-------------------------------------------
数値背景
-------------------------------------------*/
span.num::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-brand-deep);
  /* transform: rotate(45deg); */
  z-index: -1;
}
.article.featureTitle h4{
  border: none;
  border-bottom: solid 2px var(--color-brand-deep);
  padding-left: 0;
  padding-right: 0;
}
.article.featureContent .article_body{
  padding: var(--space-xl);
  background: var(--color-bg-softer);
  overflow: hidden;
}
.badgeBlock{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.badge{
  background: var(--color-accent);
  color: var(--color-white);
  display: inline-block;
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 3px 12px;
  font-size: 0.9em;
}

.sideContents .freeHtml {
  width: 100%;
  margin-bottom: var(--space-2xl);
}
/*-------------------------------------------
バッジ非表示
-------------------------------------------*/
.recaptcha_policy {
  padding: 0;
  margin: 0;
  text-align: center;
  font-size: 11px !important;
  color: var(--color-text-muted) !important;
  }
  .recaptcha_policy a {
  font-size: 11px !important;
  color: var(--color-content-strong) !important;
  }
  .grecaptcha-badge { visibility: hidden; }


.event{
  font-size: 0.9em;
}
.event h5{
  margin: 0 0 10px 0;
}
.mainContents .article.event h3{
  border: none;
  border-bottom: dashed 2px var(--color-brand-deep);
  padding: var(--space-2xs) var(--space-xl);
  color: var(--color-brand-deep);
  font-weight: bold;
  margin: 0 0 10px 0;
  background: var(--color-brand-soft);
  font-size: 20px;
  text-align: left;
  line-height: 1.5;
}
.mainContents .article.event h3:after{
  display: none;
}
/*-------------------------------------------
サイド
-------------------------------------------*/
#sideContents .freeHtml, #sideContents #sideServices, #sideContents #sideBlogCategories, #sideContents #sideBlogDates, #sideContents #sideMobile {
    border-top: solid 4px var(--color-brand);
    background: #fff;
}

.sideContents {
  & #sideServices h2,
  & #sideBlogCategories h2,
  & #sideBlogDates h2,
  & #sideMobile h2 {
    &:before {
      background: var(--color-brand-deep);
    }
  }
}

#sideContents {
  margin-top: 0px;

  & .side {
    background: var(--color-white);
    display: block;
    color: var(--color-text-muted);
  }

  & #sideServices,
  & #sideBlogCategories,
  & #sideBlogDates {
    & ul a,
    & dl a {
      padding: 16px 0;
      display: block;
      font-size: 0.875em;
      font-weight: normal;
      line-height: 1.5em;
      text-indent: -1em;
      padding-left: 1em;
    }
  }

  & h2,
  & .freeHtml_body {
    padding: var(--space-xl) var(--space-sm);
  }
}
.side table{
    margin-bottom: var(--space-xl);
    border-collapse: collapse;
}
.side table th,
.side table td{
  border: none;
  border-bottom: solid 1px var(--color-border);
  padding: var(--space-2xs) var(--space-sm);
}
.side table th{
  background: var(--color-bg-soft);
}
.side .btn{
  width: 100%;
  margin: var(--space-xs) auto;
}
.sideBlock{
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  justify-content: center;
  margin-bottom: 20px;
}
.sideBlock .sideCol{
  width: 48%;
}
.sideLogo{
  text-align: center;
  margin-bottom: 20px;
}
.sideLogo img{
  max-width: 300px;
}
/*-------------------------------------------
フッターホバー色
-------------------------------------------*/
.footer a:hover, .footer p a:hover {
  color: var(--color-accent);
}


/*-------------------------------------------
マーカー
-------------------------------------------*/
span[style*="Lime"] {
  background-color: transparent !important;
  background: linear-gradient(transparent 70%, var(--color-brand-soft) 0) repeat scroll 0 0;
}
span[style*="Yellow"] {
  background-color: transparent !important;
  background: linear-gradient(transparent 70%, var(--color-bg-highlight) 0) repeat scroll 0 0;
}

.flexBtn{
  display: flex;
  gap: var(--space-xl);
  justify-content: center;
  flex-wrap: wrap;
}
.flexBtn>*{
  width: calc((100% / 3) - 15px);
}
.flexBtn a.btn{
  width: 100%;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*-------------------------------------------
お問い合わせ
-------------------------------------------*/
div#contact_us {
    /* width: 100vw;
    margin: 0 calc(512px - 50vw) 16px; */
    padding: 3vw 0;
    line-height: 1.5;
    text-align: center;
    background: url(/materials/177254996311101.jpg) no-repeat;
    /* background: #f3f3f3; */
    background-size: cover;
    background-position: center 40%;
    color: var(--color-black);
    margin-bottom: var(--space-2xl);
}
.contact_logo{
  text-align: center;
}
#wrap .contact_logo img{
  max-width: 250px;
}
div#contact_box {
    width: 100%;
    /*max-width: 1024px;*/
    max-width: 824px;
    display: block;
    margin: auto;
    padding: 32px;
    background: var(--color-surface-overlay);
    backdrop-filter: blur(3px);
    border-radius: .5em;
}

span.tel {
    font-size: var(--font-size-tel);
}

#contact_btn a.btn {
    margin: var(--space-lg) auto;
}



.box26 {
	position: relative;
	margin: 2em 0;
	padding: var(--space-xl);
	border: solid 3px var(--color-brand);
	border-radius: var(--radius-none);
	display: flow-root;

	& .box-title {
		position: absolute;
		display: inline-block;
		top: -13px;
		left: 10px;
		padding: 0 9px;
		line-height: 1;
		font-size: 19px;
		background: var(--color-white);
    color: var(--color-brand-deep);
		font-weight: bold;
	}

	& p {
		margin: 0;
		padding: 0;
	}
}

.box29 {
  margin: 2em 0;
}
.box29 .box-title {
  font-size: 1.2em;
  background: var(--color-brand);
  padding: 4px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
  border-radius: var(--space-sm) var(--space-sm) 0 0;
}
.box29 .box-content {
  padding: var(--space-md) var(--space-md);
  margin: 0;
  background: var(--color-brand-soft);
  border-radius: 0 0 var(--space-sm) var(--space-sm);
}


#sideContents #sideServices ul, #sideContents #sideServices dl, #sideContents #sideBlogCategories ul, #sideContents #sideBlogCategories dl, #sideContents #sideBlogDates ul, #sideContents #sideBlogDates dl{
  background: var(--color-brand-soft);
}
#sideContents #sideServices ul li, #sideContents #sideServices dl dt, #sideContents #sideBlogCategories ul li, #sideContents #sideBlogCategories dl dt, #sideContents #sideBlogDates ul li, #sideContents #sideBlogDates dl dt{
    border-bottom: dashed 1px var(--color-brand-pale);
}


/*-------------------------------------------
webフォント、エッジがジャギる
-------------------------------------------*/
.article {
    p, table, ul, ol {
        transform: rotate(0.04deg);
    }
}