@charset "UTF-8";
.thm-feature-page .thm-body {
 width: 100%;
 margin: 0;
 padding: 0;
}
.thm-feature-page .thm-header .main-ad, .thm-feature-page .thm-aside {
 display: none;
}
.thm-feature-page .thm-main {
 width: 100%;
 float: none;
 padding-bottom: 0;
 background-color: #ffffdd;
}
.thm-feature-page .thm-main img {
 max-width: 100%;
 height: inherit;
}
.thm-feature-page .contents, .breadcrumb {
 margin: 0 auto;
 width: 90%;
 max-width: 1160px;
}
.thm-feature-page .thm-main a:hover {
 opacity: .8;
 text-decoration: none;
}
div[id*="browsi_adWrapper_"] {
 display: none !important;
}
/* **********************************************/
/*        コンテンツ
/* **********************************************/
.wrap {
 padding: 80px 0;
 width: 100%;
 overflow-x: hidden;
}
.wrap.wrap-top {
 padding-top: 40px;
}
.color-cream {
 background-color: #ffffdd;
}
.color-white {
 background-color: #fff;
}
.pagetitle {
 color: #f29600;
 font-weight: 700;
 font-size: clamp(24px, 3vw, 38px);
 letter-spacing: .1em;
 display: flex;
 flex-flow: column;
}
.pagetitle .light {}
.title-area {
 margin-bottom: 12px;
 position: relative;
}
.page-read {
 font-weight: 700;
 font-size: clamp(15px, 1.2vw, 18px);
 line-height: 1.8em;
 letter-spacing: .1em;
 font-feature-settings: "palt"1;
}
.ttl-reach {
 color: #1eaa39;
 font-weight: 700;
 font-size: clamp(18px, 1.8vw, 28px);
 letter-spacing: .1em;
 text-align: center;
 display: flex;
 justify-content: center;
 align-items: center;
}
.ttl-reach .inner {
 position: relative;
 padding: 10px;
}
.ttl-reach b {
 font-size: 1.4em;
}
.ttl-reach .inner::before, .ttl-reach .inner::after {
 width: 4px;
 height: 100%;
 background-color: #1eaa39;
 content: '';
 border-radius: 2px;
 position: absolute;
 bottom: 0;
}
.ttl-reach .inner::before {
 transform: rotate(-35deg);
 left: -40px;
}
.ttl-reach .inner::after {
 transform: rotate(35deg);
 right: -40px;
}
.reach-list {
 display: grid;
 gap: 18px;
 grid-template-columns: repeat(6, 1fr);
 margin: 20px auto 40px;
}
.reach-list .list-item {
 display: flex;
 flex-flow: column;
 text-align: center;
 font-weight: 700;
 white-space: nowrap;
 font-feature-settings: "palt"1;
}
.read {
 text-align: center;
 font-weight: 700;
 font-size: clamp(15px, 2vw, 20px);
 line-height: 1.8em;
 letter-spacing: .1em;
 font-feature-settings: "palt"1;
 white-space: nowrap;
}
.read.most {
 color: #f29600;
 font-size: clamp(16px, 2vw, 24px);
}
.chosen-list {
 display: grid;
 gap: 12px;
}
.chosen-list .crown {
 position: relative;
}
.chosen-list .crown .inner {
 display: flex;
 flex-flow: column;
 justify-content: center;
 align-items: center;
 background-color: #f29600;
 color: #fff;
 border-radius: 20px;
 padding: 26px 12px 20px;
 font-size: clamp(18px, 2vw, 24px);
 font-weight: 600;
 text-align: center;
}
.chosen-list .crown::before, .chosen-list .crown::after {
 content: "";
 display: block;
 width: 36%;
 aspect-ratio: 2 / 1;
 left: 0;
 right: 0;
 margin: auto;
}
.chosen-list .crown::before {
 position: relative;
 top: 0;
}
.chosen-list .crown::after {
 background: url("/feature/pages/images/ico-crown.png") center center no-repeat;
 background-size: 100% auto;
 position: absolute;
 top: 10px;
}
.scrolling-container {
 overflow: hidden;
 margin: 40px 0 0;
 min-width: 100%;
 display: flex;
 width: max-content;
 animation: scroll-left 40s linear infinite;
 transform: translate3d(0, 0, 0);
}
.logo-list {
 display: flex;
 gap: 50px;
 white-space: nowrap;
 margin-right: 50px;
}
.logo-list li {
 width: 200px;
 min-width: 140px;
 max-width: 300px;
 text-align: center;
}
.logo-list li img {
 width: 100%;
 aspect-ratio: 200 / 67;
 object-fit: cover;
}
@keyframes scroll-left {
 0% {
  transform: translateX(0);
 }
 100% {
  transform: translateX(-50%);
 }
}
.sp {
 display: none;
}
@media screen and (min-width: 813px) {
 .breadcrumb {
  padding-top: 12px;
 }
 .title-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
 }
 .title-area::before {
  content: "";
  display: block;
  flex-shrink: 0;
  flex-basis: 20%;
  max-width: 160px;
  background: url("/feature/pages/images/ico-resemom-chan.png") center center no-repeat;
  background-size: 100% auto;
  aspect-ratio: 6 / 4.5;
 }
 .page-read {
  text-align: center;
 }
 .chosen-list {
  gap: 30px;
  grid-template-columns: repeat(3, 1fr);
  margin: 20px auto 10px;
 }
}
@media screen and (max-width: 812px) {
 .breadcrumb {
  width: 100%;
  background-color: #fff;
 }
 .pagetitle {
  text-align: center;
 }
 .pagetitle .light {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: left;
  gap: 6px;
 }
 .pagetitle .light::before {
  content: "";
  display: block;
  flex-shrink: 0;
  flex-basis: 20%;
  max-width: 60px;
  background: url("/feature/pages/images/ico-resemom-chan.png") center bottom no-repeat;
  background-size: 100% auto;
  aspect-ratio: 6 / 4.5;
 }
 .wrap {
  padding: 40px 0;
 }
 .ttl-reach .inner::before {
  transform: rotate(-20deg);
  left: -20px;
 }
 .ttl-reach .inner::after {
  transform: rotate(20deg);
  right: -20px;
 }
 .reach-list {
  gap: 18px 10px;
  grid-template-columns: repeat(3, 1fr);
 }
 .reach-list .list-item img {
  max-width: 80%;
  margin: auto;
 }
 .reach-list .list-item {
  font-size: 12px;
 }
 .ttl-reach b {
  font-size: 1.2em;
 }
 .read {
  width: 94%;
  margin: auto;
 }
 .chosen-list {
  width: 80%;
  max-width: 300px;
  margin: auto;
 }
 .scrolling-container {
  margin-top: 30px;
  animation: scroll-left 36s linear infinite;
 }
 .logo-list li {
  width: 120px;
  min-width: 120px;
  max-width: 140px;
 }
 .logo-list {
  gap: 30px;
 }
 .aside-box-ad, .main-ad {
  margin: 0 auto;
 }
 .thm-footer {
  padding-top: 0;
 }
 .sp {
  display: block;
 }
 .pc {
  display: none;
 }
}
/* **********************************************/
/*        関連記事一覧用スタイル
/* **********************************************/
.relarticle-list {
 background-color: #ffffdd;
 padding-bottom: 20px;
}
.thm-feature-page .relarticle {
 padding-top: 60px;
}
.relarticle .cornertitle {
 text-align: center;
 font-weight: 700;
 font-size: clamp(20px, 2vw, 28px);
 letter-spacing: .1em;
 color: #1eaa39;
 margin-bottom: 20px;
 font-feature-settings: "palt"1;
}
.relarticle .cornertitle ruby > rt {
 font-size: .5em;
 padding-bottom: 2px;
}
.relarticle .news-list {
 display: grid;
 gap: 20px;
 grid-template-columns: repeat(4, 1fr);
 background-color: #ffffdd;
}
.relarticle .news-list .item {
 background-color: #fff;
 border-radius: 12px;
 padding: 12px;
 box-shadow: 0 0 3px rgba(0, 0, 0, .05);
}
.relarticle .news-list .item .link:hover {
 opacity: .6;
}
.relarticle .news-list .item .link .imgarea img {
 width: 100%;
 height: auto;
 object-fit: cover;
}
.relarticle .news-list .item .link .txtarea {
 margin-top: 12px;
 display: flex;
 flex-flow: column;
}
.relarticle .news-list .item .link .txtarea .PostTitle {
 font-size: clamp(14px, 1.5vw, 15px);
 line-height: 1.4;
 margin-bottom: 3px;
}
.date {
 letter-spacing: 1px;
}
.news-list .item:nth-child(n+5) {
 display: none;
}
.news-list.is-open .item:nth-child(n+5) {
 display: flex;
}
.readmore-btn-wrap {
 text-align: right;
 margin-top: 10px;
}
.readmore-btn {
 position: relative;
 padding: 0 35px;
 display: inline-flex;
 align-items: center;
 font-weight: bold;
 font-size: 16px;
 height: 30px;
 color: #f29600;
}
.readmore-btn .text::after {
 width: 24px;
 height: 24px;
 content: "";
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 right: 5px;
}
.readmore-btn .text::after {
 background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Eframe%3C/title%3E%3Cg%3E%3Cpath fill='%23f29600' d='m11.998 2c5.517 0 9.997 4.48 9.997 9.998 0 5.517-4.48 9.997-9.997 9.997-5.518 0-9.998-4.48-9.998-9.997 0-5.518 4.48-9.998 9.998-9.998zm4.843 8.211c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291z' /%3E%3C/g%3E%3C/svg%3E") center center no-repeat;
 background-size: 24px auto;
}
.readmore-btn.is-open .text::after {
 background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Eframe%3C/title%3E%3Cg%3E%3Cpath fill='%23f29600' d='m11.998 21.995c5.517 0 9.997-4.48 9.997-9.997 0-5.518-4.48-9.998-9.997-9.998-5.518 0-9.998 4.48-9.998 9.998 0 5.517 4.48 9.997 9.998 9.997zm4.843-8.211c.108.141.157.3.157.456 0 .389-.306.755-.749.755h-8.501c-.445 0-.75-.367-.75-.755 0-.157.05-.316.159-.457 1.203-1.554 3.252-4.199 4.258-5.498.142-.184.36-.29.592-.29.23 0 .449.107.591.291z' /%3E%3C/g%3E%3C/svg%3E") center center no-repeat;
 background-size: 24px auto;
}
@media screen and (max-width: 812px) {
 .relarticle-list {
  padding-bottom: 50px;
 }
 .relarticle .news-list {
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
 }
 .readmore-btn {
  font-size: 14px;
  background-color: #ffffdd;
 }
}
/* --------------------------------------
   お問い合わせ
   -------------------------------------- */
.contact-area {
 position: sticky;
 bottom: 0;
 left: 0;
 width: 100%;
 z-index: 99;
}
.contact {
 padding: 12px;
}
.btn-area {
 display: flex;
 flex-flow: column;
 justify-content: center;
 align-items: center;
 gap: 12px;
}
.ttl-reach.yellow {
 font-size: clamp(18px, 1.8vw, 22px);
 color: #ffffaa;
}
.ttl-reach.yellow .inner::before, .ttl-reach.yellow .inner::after {
 background-color: #ffffaa;
}
.ttl-reach.yellow .inner {
 padding: 0;
}
.contact-btn {
 text-align: center;
 font-weight: 700;
 font-size: clamp(20px, 2.6vw, 28px);
 background-color: #08a0c7;
 border-radius: 12px;
 color: #fff !important;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 80px;
 width: 100%;
 box-shadow: 0 0 3px rgba(0, 0, 0, .2);
}
.kiran {
 opacity: 1;
 overflow: hidden;
 position: relative;
 cursor: pointer;
}
.kiran::before {
 background-color: #fff;
 content: "";
 display: block;
 position: absolute;
 top: -100px;
 left: 0;
 width: 30px;
 height: 100%;
 opacity: 0;
 transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.kiran::before {
 animation: kiran 3s linear 1s infinite;
}
@keyframes kiran {
 0% {
  transform: scale(2) rotate(45deg);
  opacity: 0;
 }
 3% {
  transform: scale(20) rotate(45deg);
  opacity: 0.5;
 }
 6% {
  transform: scale(30) rotate(45deg);
  opacity: 0.4;
 }
 12% {
  transform: scale(45) rotate(45deg);
  opacity: 0.1;
 }
 20% {
  transform: scale(50) rotate(45deg);
  opacity: 0;
 }
}
@media screen and (min-width: 813px) {
 .contact-inner {
  margin: 0 auto;
  width: 90%;
  max-width: 1000px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 30px;
 }
 .contact {
  background-image: linear-gradient(to top, #a9d06b 120px, transparent 120px);
  background-repeat: no-repeat;
  padding: 20px 12px;
 }
 .btn-area {
  width: 60%;
 }
 .contact-inner::after {
  content: "";
  display: block;
  flex-shrink: 0;
  flex-basis: 40%;
  max-width: 320px;
  background: url("/feature/pages/images/sales_staff.png") center bottom no-repeat;
  background-size: 100% auto;
  aspect-ratio: 5 / 3;
 }
}
@media screen and (max-width: 812px) {
 .contact, .sales_staff {
  background-color: #a9d06b;
 }
 .contact-btn {
  max-width: 400px;
  margin: auto;
 }
 .sales_staff {
  padding: 10px 0 20px;
 }
 .sales_staff::after {
  content: "";
  display: block;
  width: 70%;
  max-width: 300px;
  background: url("/feature/pages/images/sales_staff.png") center center no-repeat;
  background-size: 100% auto;
  aspect-ratio: 5 / 3;
  margin: auto;
 }
}