.zen-kaku-gothic-new-light {
  font-family: "Zen Kaku Gothic New", system-ui;
  font-weight: 300;
  font-style: normal;
}
.zen-kaku-gothic-new-regular {
  font-family: "Zen Kaku Gothic New", system-ui;
  font-weight: 400;
  font-style: normal;
}
.zen-kaku-gothic-new-medium {
  font-family: "Zen Kaku Gothic New", system-ui;
  font-weight: 500;
  font-style: normal;
}
.zen-kaku-gothic-new-bold {
  font-family: "Zen Kaku Gothic New", system-ui;
  font-weight: 700;
  font-style: normal;
}
.zen-kaku-gothic-new-black {
  font-family: "Zen Kaku Gothic New", system-ui;
  font-weight: 900;
  font-style: normal;
}

.noto-sans-jp-regular {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.noto-sans-jp-medium {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.noto-sans-jp-bold {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.noto-sans-jp-black {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}

.courgette-regular {
  font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
}

html {
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
}

p ,li, h4 {
  color: #333;
}

/* WebアイコンSVG */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.material-symbols-outlined.md-18 { font-size: 18px; }
.material-symbols-outlined.md-24 { font-size: 24px; }
.material-symbols-outlined.md-36 { font-size: 36px; }
.material-symbols-outlined.md-48 { font-size: 48px; }

/* ボタン共通設定 */
.btn {
  /*影の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
  text-align: center;
  background: transparent;
    /*アニメーションの指定*/
    transition: all 0.2s ease;
}

.btn03{
  border: solid 2px #333;
  outline: none;
  font-weight: 500;
   /*追加 背景色 余白の設定*/
   padding: 10px;
   margin: 20px;
   background:#fff;
 
   color:#333;
   box-shadow: 2px 2px rgba(0, 0, 0, 0.7);
}

/* ボタンのテキストの位置調整*/
.btn-text{
  vertical-align: middle;
  line-height:15px;
}
.md-posi{
  display: inline-flex;
  vertical-align: middle;
  line-height:15px;
}

/*hoverをした後のボタンの形状*/
.btn03:hover{
  /* 影       X軸  Y軸  影の色*/
   box-shadow: 0 0 rgba(0, 0, 0, 0.4);
   /* Y軸に5px移動 */
   transform: translateY(5px);
}




/* header ヘッダー */
/* header & navigation ヘッダーとナビゲーションメニュー*/

nav {
  z-index: 10;
}


/* フッター共通 */
footer {
  background-image: url(..//images/photos/footer.jpg);
  background-size: cover;
  z-index: -50;
  background-color:rgba(255,255,255,0.3);
  background-blend-mode:lighten;
}

/* トップへ戻るボタン */
#go-to-top > a {
  width: 35px;
  height: 35px;
  background-color: #91634B;
  border: double 5px #fff;
  color: #fff;
  padding: 2px 5px 7px 5px;
  text-align: center;
  line-height: 18px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

#go-to-top > a:hover {
  text-decoration: none;
}

#go-to-top > a:link {
  text-decoration: none;
}

#go-to-top > a > span {
  font-weight: 700;
}

#go-to-top {
  position: fixed;
  width: fit-content;
}


/* サイドバー */
.sidebar {
  /* height: fit-content; */
  background-color: white;
  padding: 20px 10px;
  height: fit-content;
}

.sidebar > div {
  margin-top: 30px;
}

.search-area {
  width: 100%;
}

.sidebar ul {
  list-style: none;
  padding-left: 20px;
}

.sidebar ul > li {
  /* line-height: 30px; */
  margin-bottom: 15px;
}

/* トップページ共通 */
.sec-headding {
  display: flex;
  width: 70%;
  justify-content: space-between;
  border-bottom: solid 2px #333;
  align-items:end;
  background-repeat: no-repeat;
  background-position: right bottom;
  position: relative;
}

.sec-headding > h3 {
  margin: 0;
}

.sec-headding > span {
  font-family:"Courgette", cursive;
  position: absolute;
  font-size: 5rem;
  bottom: 0.5rem;
  left: -1rem;
  color: #D5D5D5;
  z-index: -1;
}

.house1 {
  background-image: url(..//images/icons/building-icon-13.png);
}

.house2 {
  background-image: url(..//images/icons/building-icon-11.png);
}

.house3 {
  background-image: url(..//images/icons/building-icon-08.png);
}

.case-pic {
  display: flex;
  justify-content: center;
  background-repeat: no-repeat;
  position: relative;
  background-size: cover;
  aspect-ratio: 1.62;
}

.case-pic > span {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px 20px;
  bottom: 10%;
  right: 3%;
  font-size: 1.3rem;
}

#case01-pic {
  background-image: url(..//images/photos/case01.jpg);
}

#case02-pic {
  background-image: url(..//images/photos/case02.jpg);
}

#case03-pic {
  background-image: url(..//images/photos/case03.jpg);
}

#case04-pic {
  background-image: url(..//images/photos/case04.jpg);
}

.home-contact-jump {
  height: 300px;
  background-image: url(..//images/photos/contact.jpg);
  background-color:rgba(255,255,255,0.6);
  background-blend-mode:lighten;
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

#home-blog .archives > div {
  background-color: #E5F0C6;
}

#home-blog .archives > div:hover {
  transform: scale(1.1);
}

#home-blog .archive-date {
  margin: 0 0.5rem;
}

#home-blog .archive-title {
  margin: 0 0.5rem;
}

#home-info .archives {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  background-color: #F0DCC6;
  border-radius: 2rem;
}
#home-info .archives > div {
  display: flex;
}

#home-info .archives > div > img {
  width: 40px;
}


/* 参考事例ページ共通 */
#case01-img-1 {
  background-image: url(..//images/photos/1-scaled.jpg);
}

#case01-img-2 {
  background-image: url(..//images/photos/1-2.jpg);
}

#case02-img-1 {
  background-image: url(..//images/photos/2-1.jpg);
}

#case02-img-2 {
  background-image: url(..//images/photos/2.jpg);
}

#case03-img-1 {
  background-image: url(..//images/photos/3-1.jpg);
}

#case03-img-2 {
  background-image: url(..//images/photos/3.jpg);
}

#case04-img-1 {
  background-image: url(..//images/photos/4-1.jpg);
}

#case04-img-2 {
  background-image: url(..//images/photos/4.jpg);
}



#case-content .background-color.brown {
  background-color: #F0DCC6;
}

#case-content .background-color.green {
  background-color: #E5F0C6;
}

.case-tag {
  position: absolute;
  background-color: #D69A58;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.case-tag > span {
  transform: rotate(-45deg);
  color: #fff;
  font-weight: 700;
}

.case-imgs > div {
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* お問合せページ */

#contact-head .background-img {
  position: absolute;
  width: 45%;
  aspect-ratio: 1.62;
  top: 0;
  right: 0;
  background-image: url(..//images/photos/contact.jpg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color:rgba(255,255,255,0.5);
  background-blend-mode:lighten;
  z-index: -10;
}


/* ブログ一覧ページ共通 */

.post-archive > a:link {
  text-decoration: none;
  color: #332e2f;
}

.post-archive > a:visited {
  text-decoration: none;
  color: #2E69CB;
}

.post-archive > a:hover {
  text-decoration: underline;
}

.post-contents > span > i {
  margin-right: 0.5em;
}

/* ブログ・イベント記事ページ共通 */
.turn-page {
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
}

/* for PC */
/* PC用ここから */
@media screen and (min-width: 768px) {
  /* PC用のスタイルを指定する */

body {
  /* max-width: 1080px; */
  min-width: 768px;
  margin: 0 auto 0 auto;
}

p ,li {
  font-size: 1.1rem;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 3rem;
}

h3 {
  font-size: 2.0rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.2rem;
}

section {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

/* PC用ヘッダー */
#nav-pc {
  display: flex;
  justify-content: space-between;
  height: 70px;
  align-items: center;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

#nav-pc > div {
  display: flex;
  width: 60%;
  justify-content: space-between;
}

#nav-pc a {
  font-weight: 700;
}

#nav-pc a:link {
  color: #333;
  text-decoration: none;
}

#nav-pc a:hover {
  color: #333;
  text-decoration: underline;
}

#nav-pc a:visited {
  color: #333;
  text-decoration: none;
}

#menu-sp, #nav-sp {
  display: none;
}


/* PC用フッター */
footer {
  margin-top: 200px;
  padding: 50px 10%;
  justify-content: space-around;
  align-items: center;
}

#footer-cont {
  width: 90%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#footer-cont > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 400px;
}

#footer-cont > div > a {
  margin: 20px;
}

#footer-cont > div > a {
  font-weight: 500;
}

#footer-cont > div > a:link {
  color: #333;
  text-decoration: none;
}

#footer-cont > div > a:hover {
  color: #333;
  text-decoration: underline;
}

#footer-cont > div > a:visited {
  color: #333;
}


/* PC用Top page トップページ*/

.hero-img {
  width: 100vw;
  margin: -70px 0 0 0;
  /* margin: -110px calc(50% - 50vw); */
  padding: 0;
  background-image: url(..//images/photos/hero.jpg);
  background-size: cover;
  /* position: absolute; */
  z-index: 1;;
  background-position: center;
  height: 900px;
}

.hero-img > div {
  background-color: rgba(255, 255, 255, 0.7);
  display: inline-block;
  position: absolute;
  bottom: 50px;
  right: 0;
  padding: 10px 50px;
}

#case-head {
  margin-top: 100px;
  margin-bottom: 100px;
}

.logo-sp {
  display: none;
}


#home-service {
  margin-top: 200px;
  margin-bottom: 100px;
}

#home-service > p {
  margin-bottom: 80px;
  font-size: 1.2em;
  text-align: center;
  margin-top: 70px;
  color: #91634B;
  font-weight: 500;
}

.sec-headding {
  margin: 50px 0 ;
  background-size: 10%;
  height: 75px;
}


.case-pic {
  margin: 30px auto;
  width: 80%;
}

#home-blog .archives {
  display: flex;
  justify-content: space-between;
  margin: 60px 0 30px 0;
}

#home-blog .archives > div {
  width: 23%;
}

#home-blog .archives > div img {
  width: 100%;
  height: fit-content;
  aspect-ratio: 1.3;
  object-fit: cover;
}

#home-blog .archives > div h5 {
  margin-bottom: 0.3em;
}

#home-blog .archives > div span {
  font-size: 14px;
}

#home-info .archives {
  padding: 20px 50px;
  width: max-content;
  margin-bottom: 30px;
}

#home-info .archive-link {
  display: flex;
  align-items: center;
}

#home-info .archive-date {
  margin: 0 1rem;
}


/* PC用ブログ・お知らせ投稿ページ */
.bread-arrow {
  margin: 0 5px;
}

#blog-head {
  margin-top: 100px;
  margin-bottom: 50px;
}

.post-detail > img {
  width: 100%;
}

.service-box {
  display: flex;
}

.service-box > div {
  display: flex;
  width: 50%;
  justify-content: center;
}

.service-box > div > p {
  margin: auto;
  border-bottom: solid 2px #F0DCC6;
  padding: 0;
  width: 90%;
  text-align: center;
}

.service-box > img {
  display: inline-block;
  width: 50%;
}

.jump-bottom {
  display: flex;
  justify-content: flex-end;
}

#home-service .jump-bottom {
  margin-top: -70px;
}

#cases-boxes {
  display: flex;
  flex-flow: row wrap;
}

.case-pic {
  width: 40%;
}

.home-contact-cont {
  display: flex;
  justify-content: space-around;
}

.home-contact-cont > div {
  width: 45%;
}

.home-contact-p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.home-contact-p > p {
  width: 371px;
}

.home-contact-jump {
  height: 300px;
  background-image: url(..//images/photos/contact.jpg);
  background-color:rgba(255,255,255,0.6);
  background-blend-mode:lighten;
  background-size: 100%;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

#home-contact {
  margin-bottom: 100px;
}

/* PC用サービス紹介ページ */
.page-background {
  position: absolute;
  padding: 80px 0;
  margin: 0 calc(50% - 50vw);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  top: 0;
  width: 100vw;
  z-index: -100;
  display: flex;
  align-items: center;
}

#service-head .page-background {
  background-image: url(..//images/photos/service.jpg);
  height: 350px;
}

.page-background > span {
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
}

.page-head-content {
  padding-top: 100px;
  margin-left: 10px;
  margin-right: 10px;
}

#service-head {
  position: relative;
  margin-bottom: 350px;
}

.page-headding {
  margin-bottom: 2em;
  display: inline-block;
  border-bottom: solid 1px #333;
  width: 50%;
}

.page-headding > h3 {
  margin: 0;
}


.service-box2 {
  display: flex;
  padding: 20px 10px;
  border: solid 1px #333;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.4);
  justify-content: space-evenly;
  margin: 100px auto;
  min-height: 350px;
  position: relative;
}

.service-box2 > div {
  width: 48%;
}

.service-img {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

#service-img-1 {
  background-image: url(..//images/photos/case08.jpg);
}

#service-img-2 {
  background-image: url(..//images/downloads/forest.jpg);
}

#service-img-3 {
  background-image: url(..//images/downloads/life-stage.jpg);
}

#service-img-4 {
  background-image: url(..//images/downloads/aftercare.jpg);
}

#service-content .background-color {
  background-color: #F0DCC6;
  margin: 0 calc(50% - 50vw);
  height: 110%;
  position: absolute;
  width: 100vw;
  z-index: -1;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

.service-explain > h4 {
  margin-top: 0;
  margin-bottom: 3em;
}

#service-end-message {
  width: 90%;
  margin: 150px auto 100px auto;
}

/* PC用参考事例ページ */
.case-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 150px;
  margin-bottom: 50px;
}

.case-box > h4 {
  display: inline-block;
  font-size: 1.3em;
}

.case-box > p {
  width: fit-content;
}

.case-imgs {
  display: flex;
  justify-content: space-around;
  margin: 30px 0;
  width: 100%;
}

.case-imgs > div {
  width: 48%;
  min-height: 250px;
  aspect-ratio: 1.62;
}

#case-content .background-color {
  margin: 0 calc(50% - 50vw);
  height: 110%;
  position: absolute;
  width: 100vw;
  z-index: -2;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

.case-tag {
  left: 10%;
  top: -13%;
}

#cases-bottom > p {
  display: flex;
  width: fit-content;
  margin: 100px auto 30px auto;
  border-bottom: solid;
}

/* PC用サービス紹介ページ */

.page-headding > h3 {
  position: relative;
  z-index: 100;
  margin-left: 0.5em;
}

.page-headding {
  z-index: 50;
}


/* PC用会社概要ページ */

#about-head {
  position: relative;
}

#about-head .page-headding > h3 {
  background-color: rgba(255, 255, 255, 0.8);
  width: fit-content;
  padding: 0 0.5em;
}

#about-head .page-background {
  background-image: url(..//images/photos/company.jpg);
  height: 300px;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
}

#about-head {
  margin-bottom: 500px;
}

#table-about {
  margin: 0 auto;
  border-top: solid 1px #333;
  border-bottom: solid 1px #333;
  padding-right: 50px;
}


#table-about th  {
  height: 80px;
  padding: 0 50px;
  /* text-align: start; */
  background-color: #F0DCC6;
}

#table-about td {
  padding-left: 50px;
}

#about-contact .home-contact-jump {
  background-position: center;
  width: 50%;
  margin: 100px auto 0 auto;
}

/* PC用お問合せページ */

#contact-head .page-head-content{
  position: relative;
}

#contact-p {
  margin-bottom: 100px;
}

/* PC用ブログ一覧ページ */
.blog-main {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.content-and-archive {
  width: 67%;
}

.post-archive {
  width:100%;
  display: flex;
  flex-direction: column;
}


.blog-post-small {
  display: flex;
  padding: 20px;
  background-color: white;
  margin-bottom: 20px;
  width: 100%;
  justify-content: space-between;
}

/* .blog-post-small > a {
  width: 100%;
  height: 100%;
} */

.post-img {
  height: 100%;
  width: 35%;
  aspect-ratio: 1.5;
}

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

.post-contents {
  margin-left: 10px;
  position: relative;
  width: 62%;
}

.post-contents > h4 { 
  margin-top: 0;
  margin-bottom: 0;
}

.post-contents > p {
  font-size: 1rem;
}

/* .post-contents > span {
  position: absolute;
  bottom: 0;
  right: 0;
} */


/* PC用ブログ投稿ページイベント投稿ページ */
.post-detail {
  width: 100%;
  background-color: white;
}

.recent-posts {
  margin-top: 100px;
}

/* PC用サイドバー */
.sidebar {
  width: 25%;
  margin: 0;
}


}
 /* PC用ここまで */


 /* 画面幅が767px以下のとき SP用 スマホ　スマートフォン用*/
@media screen and (max-width: 767px) {
  /* スマートフォン用のスタイルを指定する */
body {
  width: 100vw;
  min-width: 375px;
  margin: 0 0 0 0;
}

.pc-br {
  display: none;
}

/* header {
  position: relative;
} */

#nav-pc {
  display: none;
}


p ,li {
  font-size: 1.0rem;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2.0rem;
}

h3 {
  font-size: 1.8rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.2rem;
}

section:not(#service-head, #service-content, #about-head) {
  padding-left: 10px;
  padding-right: 10px;
}


/* SP用 スマホ　スマートフォン用ナビゲーション */

#menu-sp {
  position: fixed;
  top: 10px;
  right: 10px;
  font-size: 30px;
  color: #9E7460;
  z-index: 200;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 3px 5px;
}

#nav-sp {
  background-color: #F0DCC6;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  display: none;
  z-index: 500;
}

#nav-sp > a > img {
  width: 210px;
  height: 50px;
  margin: 10px;
}

#nav-sp > div {
  margin-top: 50px;
}

#nav-sp > div > a {
  display: block;
  background-image: url(..//images/icons/chevron-right-solid.svg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 14px;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  margin: 10px 20px;
  height: 44px;
  font-size: 18px;
}

#nav-sp > div > a:link {
  color: #91634B;
}
#nav-sp > div > a:visited {
  color: #91634B;
}
#nav-sp > div > a:hover {
  color: #91634B;
  text-decoration: underline;
}
#nav-sp > div > a:active {
  color: #91634B;
}


#close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: #91634B;
}

/* SP用フッター */
footer {
  margin: 100px calc(50% - 50vw) 0 calc(50% - 50vw);
  background-image: url(..//images/photos/footer.jpg);
  background-size: cover;
  z-index: -50;
  padding: 50px 10%;
}

#footer-cont {
  display: flex;
  flex-direction: column;
}

#footer-cont > div > a {
  margin: 10px 0;
  display: block;
  margin: 20px 0;
}


#footer-cont a {
  font-weight: 500;
}

#footer-cont a:link {
  color: #333;
  text-decoration: none;
}

#footer-cont a:hover {
  color: #333;
  text-decoration: underline;
}

#footer-cont a:visited {
  color: #333;
}



/* SP用トップページ */
#home-service , #home-cases, #home-info, #home-blog, #home-contact {
  margin-top: 100px;
}

.hero-img {
  width: 100vw;
  height: 700px;
  padding: 0;
  background-image: url(..//images/photos/hero.jpg);
  background-size: cover;
  z-index: -10;;
  background-position: center;
  position: relative;
}

.hero-img > div {
  position: absolute;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 0 20px;
}

.logo-sp {
  position: absolute;
  top: 10px;
  left: 10px;
}

.sec-headding {
  background-size: 20%;
  height: 55px;
}

.service-box.left {
  display: flex;
  flex-direction: column;
}

.service-box.right {
  display: flex;
  flex-direction: column-reverse;
}


.service-box > div > p {
  margin: 60px auto;
  border-bottom: solid 2px #F0DCC6;
  padding: 0;
  width: 90%;
  text-align: center;
}

#home-service > p {
  margin: 50px 0 ;
}

.jump-bottom {
  display: flex;
  justify-content: center;
}


.case-pic {
  margin: 50px auto;
  width: 80%;
}


#home-blog .archives {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-top: 50px;
  margin-bottom: 30px;
}

#home-blog .archives > div {
  width: 45%;
  margin: 0 3px 10px 3px;
}

#home-blog .archives > div img {
  width: 100%;
  height: fit-content;
  aspect-ratio: 1.3;
  object-fit: cover;
}

#home-blog .archive-title {
  margin: 0;
  font-size: 1.0rem;
}

#home-blog .archive-date {
  font-size: 0.8em;
}

/* SP用サービス紹介ページ */

#service-head {
  position: relative;
  margin-bottom: 200px;
}

.page-background {
  position: absolute;
  padding: 80px 0;
  margin: 0 calc(50% - 50vw);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  top: 0;
  width: 100vw;
  z-index: -100;
  display: flex;
  align-items: center;
}

#service-head .page-background {
  background-image: url(..//images/photos/service.jpg);
  height: 400px;
}

.page-background > span {
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
}

.page-head-content {
  padding-top: 100px;
  margin-top: 50px;
  padding-left: 20px;
  padding-right: 20px;
}

.page-headding {
  margin-bottom: 2em;
  display: inline-block;
  border-bottom: solid 1px #333;
  width: 70%;
}

.page-headding > h3 {
  margin: 0;
}


.service-box2 {
  width: 90%;
  display: flex;
  padding: 20px 10px;
  border: solid 1px #333;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.4);
  margin: 100px auto;
  position: relative;
}

.service-left {
  flex-direction: column;
}

.service-right {
  flex-direction: column-reverse;
}

.service-img {
  height: 300px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

#service-img-1 {
  background-image: url(..//images/photos/case08.jpg);
}

#service-img-2 {
  background-image: url(..//images/downloads/forest.jpg);
}

#service-img-3 {
  background-image: url(..//images/downloads/life-stage.jpg);
}

#service-img-4 {
  background-image: url(..//images/downloads/aftercare.jpg);
}

#service-content .background-color {
  background-color: #F0DCC6;
  /* margin: 0 calc(50% - 50vw); */
  height: 110%;
  position: absolute;
  width: 95vw;
  z-index: -1;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

.service-explain > h4 {
  margin-top: 0;
  margin-bottom: 3em;
}

#service-end-message {
  width: 90%;
  margin: 150px auto 100px auto;
}

/* SP用参考事例ページ */
#case-head {
  padding-top: 100px;
}

.case-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 120px;
  margin-bottom: 50px;
}

.case-box > h4 {
  display: inline-block;
  margin: 0;
}


.case-imgs {
  display: flex;
  flex-direction: column;
  margin: 30px 0;
}

.case-imgs > div {
  width: 95vw;
  aspect-ratio: 1.62;
  margin: 5px 0;
}

#case-content .background-color {
  margin: 0 calc(50% - 50vw);
  height: 110%;
  position: absolute;
  width: 100vw;
  z-index: -2;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

.case-tag {
  left: 10%;
  top: -10%;
}

#cases-bottom > p {
  text-align: center;
  margin-top: 80px;
}

/* SP用会社概要ページ */

#about-head {
  position: relative;
}

#about-head .page-headding > h3 {
  background-color: rgba(255, 255, 255, 0.8);
  width: fit-content;
  padding: 0 0.5em;
}

#about-head .page-background {
  background-image: url(..//images/photos/company.jpg);
  height: 300px;
  background-color: rgba(255, 255, 255, 0.5);
  background-blend-mode: lighten;
}

#about-head {
  margin-bottom: 400px;
}

#table-about {
  margin: 0 auto;
  border-top: solid 1px #333;
  border-bottom: solid 1px #333;
  padding-right: 20px;
}


#table-about th  {
  height: 80px;
  padding: 0 20px;
  background-color: #F0DCC6;
  font-size: 0.8em;
}

#table-about td {
  padding-left: 20px;
}

/* SP用ブログ一覧イベント一覧ページ */
#blog-head {
  margin-top: 100px;
}

.post-archive {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.post-archive > a {
  display: flex;
  width: 45%;
  margin-bottom: 20px;
}

.blog-post-small {
  position: relative;
}

.post-img {
  width: 175px;
  aspect-ratio: 1.62;
  margin: 0 auto 10px auto;
}

.post-img > img {
  display: flex;
  width: 100%;
  height: 100%;
  height: fit-content;
  margin: 0 auto;
  object-fit: cover;
}

.post-contents > h4 {
  margin: 0;
  font-size: 1em;
}

.post-contents > p {
  display: none;
}

.post-contents > span {
  font-size: 0.8em;
  /* position: absolute; */
  /* left: 0; */
  /* bottom: 0; */
}


#blog-bottom {
  margin-bottom: 50px;
}


/* SP用ブログ投稿イベント投稿ページ */
.post-detail {
  /* width: 100%; */
  padding: 10px;
  background-color: white;
}

.post-detail > img {
  width: 100%;
}

.recent-posts {
  padding-left: 20px;
  margin: 30px 0;
}

/* SP用お問合せページ */
#about-contact .home-contact-jump {
  margin-top: 50px;
}

#contact-head background-img {
  margin-top: 100px;
}


}
/* SP用ここまで */