@charset "UTF-8";
/* CSS 初期化 */
/* ============================== / f-shintaku-banner start / ============================== */
.f-shintaku-banner {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 1vw 0;
  background-color: rgba(117, 129, 143, 1.00);
}

.f-shintaku-banner__link,
.f-shintaku-banner__link picture,
.f-shintaku-banner__link img {
  display: block;
}

.f-shintaku-banner__link img {
  width: 100%;
  height: auto;
  transition: opacity 0.3s;
}

.f-shintaku-banner__link:hover img {
  opacity: 0.85;
}
/* ============================== / f-shintaku-banner end / ============================== */

/*//////////PCサイズ footer///////////*/
@media screen and (min-width: 481px) {
/* ==============================
トップムービー セミナーバナー start
============================== */
.seminar-bnr {
  position: absolute;
  left: 0;
  bottom: .8vw;
  width: 100vw;
  padding: 3vw 2vw;
  background-color: #18273d;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1vw;
  box-sizing: border-box;
  z-index: 5;
}

.seminar-bnr__item {
  position: relative;
  display: block;
  overflow: visible;
  background-color: #ffffff;
  transition: all 0.3s;
}

.seminar-bnr__item:hover {
  opacity: 0.85;
}

.seminar-bnr__item picture,
.seminar-bnr__item img {
  display: block;
  width: 100%;
  height: auto;
}
/* ==============================
トップムービー セミナーバナー end
============================== */

/* ==============================
トップムービー 地震お見舞い start
============================== */
.earthquake-message {
  position: absolute;
  left: 50%;
  bottom: 2.5%;
  width: 52vw;
  min-width: 80rem;
  max-width: 100rem;
  padding: 1.5rem 2.4rem;
  background-color: #ffffff;
  color: #333333;
  box-sizing: border-box;
  text-align: center;
  transform: translateX(-50%);
  z-index: 6;
}

.earthquake-message__title {
  margin: 0 0 0.8rem;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
}

.earthquake-message__text {
  margin: 0;
  font-size: 2rem;
  line-height: 1.8;
}
/* ==============================
トップムービー 地震お見舞い end
============================== */

/* ==============================
バナーコーナー start
============================== */
.top-bnr {
  position: relative;
  width: 100vw;
  margin-top: 0;
  padding: 1.5vw 0;
  background-color: #18273d;
  z-index: 6;
}

.top-bnr__inner {
  width: 96vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1vw;
}

.top-bnr__item {
  position: relative;
  display: block;
  overflow: visible;
  background-color: #ffffff;
  color: #333333;
  border: 1px solid rgba(255, 255, 255, 0.50);
  box-sizing: border-box;
  transition: all 0.3s;
}

.top-bnr__item:hover {
  opacity: 0.85;
}

.top-bnr__item picture,
.top-bnr__item img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.top-bnr__new {
  position: absolute;
  top: -1.3vw;
  left: 0vw;
  width: 3vw;
  height: 1.3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 0.3vw;
  background-color: #D72968;
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  z-index: 10;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
}
.top-bnr__new2 {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4vw 4vw 0 0;
  border-color: #D72968 transparent transparent transparent;
  z-index: 10;
  overflow: visible;
}
.top-bnr__new2 span {
  position: absolute;
  top: -1.8vw;
  left: 0.15vw;
  display: block;
  width: 4vw;
  transform: rotate(-45deg);
  transform-origin: left center;
  color: #ffffff;
  font-size: 0.75vw;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
}
/* ==============================
バナーコーナー end
============================== */
	
  #topmovie {
    position: relative; /*h1の中央寄せ配置の起点とするためのrelative*/
    height: 100vh; /* 変数をサポートしていないブラウザのフォールバック */
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    width: 100vw;
  }
  .topcopy {
    position: absolute;
    color: #FFF;
    font-size: calc(5.5rem);
    letter-spacing: calc(0.1em);
    line-height: calc(2em);
    text-align: left;
    text-orientation: upright;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-variant-east-asian: full-width;
    -moz-font-feature-settings: "fwid";
    -webkit-font-feature-settings: "fwid";
    font-feature-settings: "fwid";
    z-index: 10;
  }
  .copy1 {
    top: 15%;
    right: 5%;
  }
  .copy2 {
    top: 15%;
    right: 10%;
  }
  #video-area {
    position: fixed;
    z-index: -1; /*最背面に設定*/
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
  }
  #video {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
  }
  a.movply, a.mov50th, a.oyakudachi, a.propatymanage, a.akiya-management {
    position: absolute;
    width: calc(23vw);
    min-width: calc(15%);
    bottom: 2.5%;
    color: #FFF;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.50);
    border-radius: 3px;
  }
  a.movply {
    left: 74%;
  }
  a.mov50th {
   left: 21%;
  }
  a.oyakudachi {
    left: 2%;
  }
  a.propatymanage {
   left: 26%;
  }
  a.akiya-management{
     left: 50%;
  }
  .movply img, .mov50th img, .oyakudachi img, .propatymanage img, .akiya-management img {
    vertical-align: middle;
    width: calc(100%);
  }
  .movply:hover, .mov50th:hover, .oyakudachi:hover, .propatymanage:hover, .akiya-management:hover {
    background-color: rgba(0, 96, 85, 1.00);
    transition: all 0.5s;
  }
  .top_new_mark {
    position: absolute;
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    top: -1.3vw;
    left: calc(0% - 1px);
    width: 3vw;
    height: 1.3vw;
    font-size: calc(2rem);
    color: white;
    padding-right: calc(3%);
    background-color: #D72968;
    z-index: 10;
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
  }
  .hedtcglogo {
    position: absolute;
    width: calc(8vw);
    height: auto;
    bottom: 2%;
    right: 2%;
    z-index: 1;
  }
  .hedtcglogo img {
    width: calc(100%);
  }
  .andmore, .andmore2 {
    width: calc(100vw / 10 * 1.5);
    clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
    background-color: rgba(0, 82, 79, 1.00);
    display: flex;
    align-items: center;
    line-height: calc(4rem);
    font-size: calc(2rem);
    padding-top: calc(1em/2);
    padding-bottom: calc(1em/2);
    color: white;
    transition: all 0.0s;
  }
  .andmore svg {
    height: calc(4rem);
    display: inline;
    padding-right: calc(1em);
    fill: rgba(0, 82, 79, 1.00);
    transition: all 0.0s;
  }
  .andmore:hover path, .andmore:hover {
    background-color: rgba(0, 5, 079, 1.00);
    fill: rgba(0, 5, 079, 1.00);
    transition: all 0.3s;
  }
  .resident_container {
    position: relative;
    height: calc(40vw);
    background-color: #FCF3E5;
    background-image: url(../images/top_resident_img1.jpg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
  }
  .resident_box {
    position: absolute;
    top: calc(50% - (40vw/1.5)/2);
    right: calc(0%);
    width: calc(50vw);
    height: calc(40vw/1.5);
    background-color: #fff;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
    text-align: center;
  }
  .resident_image {
    width: calc(35vw);
    margin: auto;
    padding-top: calc(2vw);
    padding-bottom: calc(2vw);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: calc(4vw); /*縦の余白*/
    column-gap: calc(1vw); /*横の余白*/
  }
  .resident_image span {}
  .resident_image span p:nth-child(1) {}
  .resident_image span p:nth-child(1) img {
    width: calc(4vw);
    height: auto
  }
  .resident_image span p:nth-child(2) {
    font-size: calc(2em);
  }
  .resident_text {
    padding-top: calc(3.5vw);
    font-size: calc(3.6em);
    letter-spacing: calc(1em/10);
    color: #666;
  }
  .resident_link {
    width: calc(auto);
    clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
    background-color: rgba(0, 82, 79, 1.00);
    display: inline-block;
    text-align: center;
    line-height: calc(100%);
    margin-top: calc(1em);
    font-size: calc(2rem);
    padding-top: calc(1.5em);
    padding-left: calc(2em);
    padding-right: calc(3em);
    padding-bottom: calc(1.5em);
    color: white;
    transition: all 0.2s;
  }
  .resident_link:hover {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    padding-left: calc(8em);
    padding-right: calc(8em);
    background-color: rgba(0, 168, 195, 1.00);
  }
  .copy_message {
    position: relative;
    width: calc(100vw);
    height: calc(100vw/1.7778 / 10 *5);
    clip-path: polygon(50% 8%, 100% 0, 100% 100%, 0 100%, 0 0);
    overflow: hidden;
    /* [disabled]background-image: url(../images/top_copyback_img.jpg); 
    background-position: center center;
    background-size: cover;*/
  }
  .copy_message .txt {
    position: absolute;
    width: calc(100%);
    margin-top: calc(100%/10);
    color: #E0E0E0;
    font-size: calc(4rem);
    line-height: calc(100VW/10/2);
    letter-spacing: calc(0.4rem);
    text-align: center;
    font-weight: bold;
    z-index: 10;
  }
  .copy_message img {
    width: calc(100vw);
    height: auto;
  }
  .feature {
    width: calc(100vw);
    height: calc(100vw / 1.7778);
  }
  .feature .tit {
    width: calc(100%);
    padding-top: calc(100vw/10*1/2);
    padding-bottom: calc(100vw/10*1/1.5);
    display: block;
    text-align: center;
    font-size: calc(3.8rem);
    letter-spacing: calc(0.6rem);
    color: rgba(38, 38, 38, 1.00);
  }
  .feature .tit span {
    display: block;
    font-size: calc(1.8rem);
    font-weight: normal;
    letter-spacing: calc(0.3rem);
  }
  .feature .pickup {
    width: calc(100vw / 10 * 7);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
  }
  .feature .box {
    width: calc(100vw / 10 * 2);
    height: calc(100vw / 1.7778 / 10 * 3.5);
    border-radius: 50%;
    border: 2px solid #007FAE;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .feature .box div {
    text-align: center;
  }
  .feature .box span {
    font-size: calc(2.5rem);
    letter-spacing: calc(0.2rem);
    background: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 100%;
  }
  .feature .box p {
    font-size: calc(7.5rem);
    letter-spacing: calc(0.2rem);
    background: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 100%;
  }
  .feature .box p span {
    font-size: calc(6rem);
    letter-spacing: calc(0.2rem);
    background: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .feature .links {
    width: calc(100vw);
    padding-top: calc(100vw/10*1/2);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .servicebox {
    min-height: calc(100vh);
  }
  .service {
    position: relative;
    padding-top: calc(100vw /10*11.5);
    background-color: #cfe0e5;
  }
  .service .back {
    position: absolute;
    padding-top: calc(100vw /10*10.5);
    top: calc(100vw /10);
    width: calc(100vw/10*7.5);
    clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
    background-image: -webkit-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -moz-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -o-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: linear-gradient(180deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    z-index: 0;
  }
  .service .inner {
    position: absolute;
    top: calc(100vw/10);
    width: calc(100vw/10*7);
    left: calc(50% - (100vw/10*7/2));
    z-index: 5;
  }
  .service .title {
    width: calc(100%);
    padding-top: calc(100vw/10*1/2);
    padding-bottom: calc(100vw/10*1/3);
    display: block;
    text-align: center;
    font-size: calc(3.8rem);
    font-weight: bold;
    letter-spacing: calc(0.6rem);
    color: rgba(255, 255, 255, 1.00);
  }
  .service .title span {
    display: block;
    font-size: calc(1.8rem);
    font-weight: normal;
    letter-spacing: calc(0.3rem);
  }
  .service .group {
    width: calc(100%);
    justify-content: space-between;
    display: inline-flex;
  }
  .service .group a {
    margin-bottom: calc(5rem);
    color: #8C4F50；
  }
  .service .group a:hover {
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    color: #8C4F50；
  }
  .service1, .service2, .service3, .service4, .service5, .service6, .service7, .service8 {
    font-size: calc(1.8rem);
    font-weight: bold;
    line-height: calc(2em);
    letter-spacing: calc(0.2rem);
    background-color: aliceblue;
  }
  .sumb1 {
    height: calc(100vw/10*2.7);
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }
  .sumb2 {
    height: calc(100vw/10*1.7);
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }
  .sumb1 img, .sumb2 img {
    width: 100%;
    height: auto;
    object-fit: cover
  }
  .link_txt {
    height: calc(100vw/10*0.5);
    font-size: calc(2.1rem);
    display: flex;
    align-items: center;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
  }
  .link_txt img {
    height: calc(1.8rem);
    margin-left: calc(1em);
    margin-right: calc(1em);
    display: flex;
    align-items: center;
  }
  .service1 {
    width: calc(65%);
    height: calc(100vw/10*3.2);
    display: block;
    clip-path: polygon(94% 0, 100% 10%, 100% 100%, 0 100%, 0 0);
  }
  .service8 {
    width: calc(30%);
    height: calc(100vw/10*3.2);
    display: block;
    clip-path: polygon(85% 0, 100% 10%, 100% 100%, 0 100%, 0 0);
  }
  .service2, .service3, .service4, .service5, .service6, .service7 {
    width: calc(30%);
    height: calc(100vw/10*2.2);
    clip-path: polygon(90% 0, 100% 10%, 100% 100%, 0 100%, 0 0);
  }
  .message {
    width: calc(100vw);
    /*movie無し*/
    height: calc(100vw / 2.4);
    /*movie有り
    height: calc(100vw / 1.7778 *1.5);*/
    position: relative;
  }
  .message div {}
  .message .inner {
    position: relative;
    width: calc(100vw / 10 * 7);
    height: calc(100vw / 1.7778 / 10 * 6);
    top: calc(15%);
    left: calc(50% - 100vw / 10 * 7 /2);
  }
  .message .title {
    position: absolute;
    top: calc(26%);
    left: calc(10%);
    font-size: calc(4.3rem);
    color: #F2F1F1;
    letter-spacing: calc(0.1em);
  }
  .message .image {
    position: absolute;
    width: calc(100vw/10*4);
    height: calc(100vw / 1.7778 / 10 * 4);
    top: calc(0%);
    left: calc(48%);
    border: 10px solid #FFFFFF;
  }
  .message .image img {
    position: absolute;
    width: calc(100vw/10*4);
    height: calc(100vw / 1.7778 / 10 * 4);
    object-fit: cover;
  }
  .message .name {
    position: absolute;
    top: 40%;
    left: calc(10%);
    font-size: calc(3rem);
    color: #F2F1F1;
  }
  .message .name span {
    font-size: calc(2.5rem);
    color: #F2F1F1;
  }
  .message .big_copy {
    position: absolute;
    font-size: calc(100vw /12);
    line-height: calc(100%);
    color: #E3E1DC;
    left: 0%;
    /*movie無し*/
    top: 2%;
    /*movie有り
    top: 5%;;*/
  }
  .message .back {
    position: absolute;
    top: calc(10%);
    width: calc(100vw/10*6.5);
    height: calc(100vw / 1.7778 / 10 * 4);
    opacity: 0;
    background-image: -webkit-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -moz-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -o-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: linear-gradient(180deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    z-index: 0;
  }
  .back.scrollin {
    animation-name: backmov;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: forwards;
  }
  @keyframes backmov {
    0% {
      opacity: 0;
      clip-path: polygon(0 0, 0 7%, 0 100%, 0% 100%);
    }
    100% {
      opacity: 1;
      clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
    }
  }
  .message .inner2 {
    position: relative;
    width: calc(100vw / 10 * 7);
    height: calc(100vw / 1.7778 / 10 * 6);
    top: calc(13%);
    left: calc(50% - 100vw / 10 * 7 /2);
  }
  .message .subtit {
    position: absolute;
    top: calc(16%);
    left: calc(55%);
    font-size: calc(1.8rem);
    line-height: calc(100%);
    color: #E8D02F;
    letter-spacing: calc(0.1em);
  }
  .message .title2 {
    position: absolute;
    top: calc(21%);
    left: calc(55%);
    font-size: calc(3rem);
    line-height: calc(140%);
    color: #F2F1F1;
    letter-spacing: calc(0.1em);
  }
  .message .image2 {
    position: absolute;
    width: calc(100vw/10*4);
    height: calc(100vw / 1.7778 / 10 * 4);
    top: calc(0%);
    right: calc(48%);
    overflow: hidden;
    border: 10px solid #FFFFFF;
  }
  .message .image2 img {
    position: absolute;
    width: calc(100vw/10*4);
    height: calc(100vw / 1.7778 / 10 * 4);
    transition: transform 0.2s ease;
  }
  .message .image2 a img:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    transition: transform 0.3s ease-in;
  }
  .message .name2 {
    width: calc(100vw/10*2.9);
    position: absolute;
    top: 36%;
    left: calc(55%);
    font-size: calc(2rem);
    line-height: calc(210%);
    letter-spacing: calc(0.1em);
    color: #F2F1F1;
    text-align: justify;
  }
  .message .name2 span {
    font-size: calc(1.6rem);
    color: #F2F1F1;
  }
  .message .big_copy2 {
    position: absolute;
    font-size: calc(100vw /12);
    line-height: calc(100%);
    color: #E3E1DC;
    right: 0%;
    bottom: 5%;
  }
  .message .back2 {
    position: absolute;
    top: calc(10%);
    right: calc(0%);
    width: calc(100vw/10*6.5);
    height: calc(100vw / 1.7778 / 10 * 4);
    opacity: 0;
    background-image: -webkit-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -moz-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -o-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: linear-gradient(180deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    z-index: 0;
  }
  .back2.scrollin {
    animation-name: backmov2;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: forwards;
  }
  @keyframes backmov2 {
    0% {
      opacity: 0;
      clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%);
    }
    100% {
      opacity: 1;
      clip-path: polygon(0 0, 100% 0%, 100% 100%, 15% 100%);
    }
  }
  .message .andmore, .message .andmore2 {
    position: absolute;
    width: calc(100vw / 10 * 1.8);
    clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
    background-color: #fff;
    display: flex;
    align-items: center;
    line-height: calc(4rem);
    font-size: calc(1.9rem);
    color: #00776a;
    transition: all 0.0s;
  }
  .message .andmore {
    top: 55%;
    left: calc(10%);
  }
  .message .andmore2 {
    top: 58%;
    left: calc(55%);
  }
  .message .andmore svg, .message .andmore2 svg {
    height: calc(4rem);
    display: inline;
    padding-right: calc(1em);
    fill: #00776a;
    transition: all 0.0s;
  }
  .message .andmore:hover path, .message .andmore:hover, .message .andmore2:hover path, .message .andmore2:hover {
    color: #00776a;
    background-color: rgba(219, 231, 234, 1.00);
    fill: #00776a;
    transition: all 0.3s;
  }
  /* ==============================
   空き家管理サービスバナー start
============================== */
.akiya-banner {
	width: 100vw;
	margin: 0 calc(50% - 50vw); /* セクションの左右余白を打ち消して全幅表示 */
	padding: 1vw 0;
	background-color: rgba(117,129,143,1.00)
}

.akiya-banner__link img {
  width: 100%;
  height: auto;
  display: block;
}
.akiya-banner__link img:hover {
opacity: 0.85;
transition: all 0.3s;
}

/* ==============================
   空き家管理サービスバナー end
============================== */

  /*50th MOVIE */
  .mov50th_section {
    position: relative;
    width: calc(100vw);
    padding-top: calc(5vw);
    padding-bottom: calc(5vw);
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    background-image: -webkit-radial-gradient(rgba(255, 255, 255, 1), rgba(205, 224, 234, 1)); /* Safari 5.1 - 6.0 */
    background-image: -moz-radial-gradient(rgba(255, 255, 255, 1), rgba(205, 224, 234, 1)); /* Firefox 3.6 - 15 */
    background-image: -o-radial-gradient(rgba(255, 255, 255, 1), rgba(205, 224, 234, 1)); /* Opera 11.6 - 12.0 */
    background-image: radial-gradient(rgba(255, 255, 255, 1), rgba(205, 224, 234, 1)); /* 標準 */
  }
  .mov50th_container {
    font-size: calc(2.5em);
    line-height: calc(1.8em);
    text-align: center;
    color: #333333;
  }
  /* .mov50th_container p:nth-child(1) {
    font-size: calc(1.6em);
    letter-spacing: calc(0.1em);
    padding-top: calc(4vw);
    padding-bottom: calc(3vw);
    font-family: a-otf-ryumin-pr6n, serif;
  }*/
  .mov50th_container p {
    text-align: left;
    font-family: yu-gothic-pr6n, sans-serif;
    letter-spacing: calc(0.1em);
  }
  .nowmov_symbol {}
  .nowmov_symbol img {
    width: calc(10vw/1.6);
  }
  .nowmov_title {
    width: calc(35vw);
    margin: auto;
    padding-top: calc(1vw);
    padding-bottom: calc(3vw);
    text-align: center;
  }
  .nowmov_title p {
    padding-top: calc(1vw);
    text-align: center;
    font-size: calc(3rem);
  }
  .nowmov_title img {
    width: 100%
  }
  .mov50th_box {
    display: inline-block;
    padding-top: calc(3vw);
    padding-bottom: calc(3vw);
  }
  .mov50th_grid {
    width: auto;
    padding-left: calc(10vw);
    padding-right: calc(10vw);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px; /* 列の間隔を20pxに設定 */
    padding-top: calc(1vw);
    padding-bottom: calc(5vw);
  }
  .mov50th_grid img {
    width: 100%;
  }
  .mov50th_link a {
    width: auto;
    display: inline-block;
    padding-top: calc(1vw);
    padding-bottom: calc(1vw);
    padding-left: calc(4vw);
    padding-right: calc(4vw);
    background-color: rgba(171, 155, 80, 1.00);
    transition: ease-in-out 0.2s;
    clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
    color: white;
    text-align: left;
    pointer-events: auto;
  }
  .mov50th_link a:hover {
    background-color: rgba(171, 155, 80, 1.00);
    opacity: 1;
    transition: ease-in-out 0.2s;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
  }
  .archive_link a {
    width: auto;
    display: inline-block;
    padding-top: calc(1vw);
    padding-bottom: calc(1vw);
    padding-left: calc(4vw);
    padding-right: calc(4vw);
    background-color: #303856;
    transition: ease-in-out 0.2s;
    clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    color: white;
    text-align: left;
    pointer-events: auto;
    margin: 3vw 0 0 0;
  }
  .archive_link a:hover {
    background-color: rgba(35, 104, 146, 1.00);
    opacity: 1;
    transition: ease-in-out 0.2s;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0% 50%);
  }
  /*スライダー*/
  /* Style for the container of the slider */
  .slider-container {
    width: 100%; /* Adjust as needed */
    margin: auto;
    overflow: hidden; /* Hide overflowing content */
    position: relative;
  }
  /* Style for the slider */
  .slider {
    display: flex;
    transition: transform 0.5s ease; /* Smooth slide transition */
  }
  /* Style for each slide (thumbnail image) */
  .slide {
    flex: 0 0 25vw; /* 各写真の横幅を20vwに設定 */ /* Each slide takes full width */
  }
  /* Style for the thumbnail images */
  .slide img {
    width: 99.5%;
    height: auto;
  }
  /* Animation for infinite loop */
  @keyframes slideLoop {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-25vw * 8));
    } /* 8枚分を移動 */
  }
  /* Apply loop animation to the slider */
  .slider.looped {
    animation: slideLoop 50s linear infinite; /* Adjust animation duration as needed */
  }
  /* Optional: Add hover effect on slides */
  .slide:hover {
    transform: scale(1.0); /* Scale up on hover */
  }
  /*50th MOVIE  閉じ*/
  /*お役立ち設計部　*/
  .oyakudachi_section {
	position: relative;
	width: calc(100vw);
	padding-top: calc(5vw);
	padding-bottom: calc(5vw);
	display: flex;
	justify-content: center; /* 横方向の中央揃え */
	align-items: center; /* 縦方向の中央揃え */
	background-color: #EFEDE5;
	/* [disabled]background-image: -webkit-linear-gradient(270deg, rgba(247, 248, 248, 1.00) 0%, rgba(247, 248, 248, 1.00) 28.30%, rgba(155, 221, 205, 1.00) 100%); */
	/* [disabled]background-image: -moz-linear-gradient(270deg, rgba(247, 248, 248, 1.00) 0%, rgba(247, 248, 248, 1.00) 28.30%, rgba(155, 221, 205, 1.00) 100%); */
	/* [disabled]background-image: -o-linear-gradient(270deg, rgba(247, 248, 248, 1.00) 0%, rgba(247, 248, 248, 1.00) 28.30%, rgba(155, 221, 205, 1.00) 100%); */
	/* [disabled]background-image: linear-gradient(180deg, rgba(247, 248, 248, 1.00) 0%, rgba(247, 248, 248, 1.00) 28.30%, rgba(155, 221, 205, 1.00) 100%); */
  }
  .new_mark {
    position: absolute;
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    top: calc(0%);
    left: calc(5vw);
    width: 5vw;
    height: 2.5vw;
    padding-right: calc(1rem);
    font-size: calc(2rem);
    color: white;
    background-color: #E4007F;
    z-index: 10;
    clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
  }
  .oyakudachi_container {
    width: calc(90vw);
    font-size: calc(2.5em);
    line-height: calc(1.8em);
    text-align: center;
    color: rgba(69, 69, 69, 1.00);
  }
  .oyakudachi_titlebox {
    width: auto;
  }
  .oyakudachi_titlebox img {
    width: 38vw;
  }
  .oyakudachi_titlebox img:nth-child(1) {}
  .oyakudachi_titlebox img:nth-child(2) {
    width: calc(28%);
    left: calc(50% - (26vw / 2));
  }
  .oyakudachi_titlebox img:nth-child(3) {
    height: calc(17vw);
    top: calc(-2vw);
    right: calc(8vw);
  }
  .oyakudachi_box p:nth-child(1) {
    font-size: calc(1.3em);
    letter-spacing: calc(0.1em);
    padding-top: calc(2vw);
    padding-bottom: calc(1vw);
    line-height: calc(160%);
    font-family: yu-gothic-pr6n, sans-serif;
  }
  .oyakudachi_box p:nth-child(2) {
    font-size: calc(0.9em);
    font-family: yu-gothic-pr6n, sans-serif;
    letter-spacing: calc(0.1em);
    line-height: calc(200%);
  }
  .oyakudachi_bnr_bot {
    position: relative;
    width: calc(70vw);
    max-width: calc(1370px);
    height: calc(19vw);
    margin: auto;
    background-color: white;
    transition: transform 0.3s ease;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0); /* 水平方向のオフセット、垂直方向のオフセット、ぼかし半径、色 */
    display: flex;
    align-items: center; /* 上下中央揃え */
    justify-content: space-between; /* 横並びの左右余白 */
    padding: 2vw; /* 内側の余白（必要に応じて調整） */
    box-sizing: border-box;
    /* 角丸指定：左上, 右上, 右下, 左下 の順 */
    border-radius: 2vw 0 2vw 2vw;
  }
  .oyakudachi_bnr_bot:hover {
    transform: scale(1.02); /* 1.2%拡大 */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 水平方向のオフセット、垂直方向のオフセット、ぼかし半径、色 */
  }
  .article_arrow {
    position: absolute;
    top: 0%;
    right: 0%;
    z-index: 10;
  }
  .bnr_clr {
    position: absolute;
    width: calc(5vw);
    height: calc(19vw);
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    background-color: #72aca7;
    clip-path: polygon(80% 0, 100% 50%, 80% 100%, 0 100%, 0 0);
  }
  .bnr_clr img {
    width: calc(30%);
  }
  .bnr_title {
    position: absolute;
    left: calc(5vw);
    font-family: a-otf-ryumin-pr6n, serif;
    font-size: min(1.4vw, 28px);
    letter-spacing: calc(1rem/2);
    text-align: left;
    line-height: 1.75;
    font-weight: bold;
  }
  .volume {
    width: max-content; /* コンテンツに合わせて幅を調整 */
    height: max-content;
    padding-top: calc(0.5vw);
    padding-bottom: calc(0.5vw);
    padding-left: calc(1vw);
    padding-right: calc(1.5vw);
    margin-bottom: calc(0.6vw);
    background-color: #ea5532;
    font-size: calc(2rem);
    color: #fff;
    line-height: 100%;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
  }
  .bnr_txt {
    font-size: calc(1.1em);
  }
  .bnr_txt_name {
    padding: 1.5vw 0 0 0;
    font-size: 1.8rem;
    letter-spacing: 0.2rem;
    line-height: 150%;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
  }
  .interview_name {
    margin-top: calc(0.3vw);
    font-size: calc(1em);
  }
  .oyakudachi_bnr_img {
    position: absolute;
    top: calc(0);
    right: calc(1vw);
    height: calc(17vw);
    /*max-width: calc(360px);*/
    overflow: hidden;
  }
  .oyakudachi_bnr_img img {
    width: calc(30vw);
  }
  .oyakudachi_box {
    display: inline-block;
    padding-bottom: calc(2vw);
  }
  /*お役立ち設計部  閉じ*/
  .topics {
    padding-top: calc(100vw / 100);
    padding-bottom: calc(100vw /100);
    background-image: -webkit-linear-gradient(0deg, rgba(0, 128, 170, 1.00) 0%, rgba(0, 55, 96, 1.00) 100%);
    background-image: -moz-linear-gradient(0deg, rgba(0, 128, 170, 1.00) 0%, rgba(0, 55, 96, 1.00) 100%);
    background-image: -o-linear-gradient(0deg, rgba(0, 128, 170, 1.00) 0%, rgba(0, 55, 96, 1.00) 100%);
    background-image: linear-gradient(90deg, rgba(0, 128, 170, 1.00) 0%, rgba(0, 55, 96, 1.00) 100%);
  }
  .topicsbox {
    width: calc(100vw);
    margin-left: auto;
    margin-right: auto;
    padding-top: calc(100vw / 50);
    padding-bottom: calc(100vw /50);
    background-image: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
  }
  .topics .title {
    width: calc(100vw/10);
    padding-left: calc(100vw/10);
    font-size: calc(3.5rem);
    color: #fff;
    display: flex;
    float: left;
    line-height: calc(100%);
    /*height: calc(4rem * 4 + (0.2rem * 3));*/
    align-items: center;
    vertical-align: middle;
  }
  .topics .news_sps {
    width: calc(100vw/10*6);
    display: inline-block;
  }
  .topics .sps {
    font-size: calc(2rem);
    background-color: #fff;
    width: calc(100vw / 10 * 6.5 - 3rem);
    line-height: calc(5rem);
    clip-path: polygon(0 0, 100% 0%, 98% 100%, 0% 100%);
    margin-bottom: calc(0.2rem);
    padding-left: calc(3rem);
    letter-spacing: calc(0.1rem);
    display: block;
  }
  .topics .sps_non_atag {
    font-size: calc(2.4rem);
    background-color: #fff;
    width: calc(100vw / 10 * 6.5 - 6rem);
    line-height: calc(4rem);
    margin-bottom: calc(1rem);
    padding-left: calc(3rem);
    padding-right: calc(3rem);
    padding-top: calc(1.5rem);
    padding-bottom: calc(1.5rem);
    letter-spacing: calc(0.1rem);
    display: block;
    text-align: center;
    font-weight: bold;
  }
  .topics .sps_non_atag span {
    font-size: calc(2rem);
    display: inline-block;
    text-align: left;
  }
  .topics .sps span {
    display: inline-block;
    padding-right: calc(2rem);
  }
  .topics .news_sps a:last-child {
    margin-bottom: calc(0rem);
  }
  .topicsbnr {
    background-color: rgba(255, 255, 255, 0.42);
    width: calc(100vw / 10 * 6.5 - 6rem);
    margin-top: calc(1rem);
    padding-left: calc(3rem);
    padding-right: calc(3rem);
    padding-top: calc(1.5rem);
    padding-bottom: calc(1.5rem);
  }
  .topicsbnr img {
    width: 100%; /* 画像の幅を親要素に合わせる */
    height: auto; /* 高さを自動調整してアスペクト比を保つ */
  }
  .topicsbnr a:hover {
    opacity: 0.8;
    cursor: pointer;
  }
  /*.topicsbox .news_sps .sps span:nth-child(1) {
  width:calc(8rem);
}
.topicsbox .news_sps .sps span:nth-child(2) {
  width:calc(6rem);
}
.topicsbox .news_sps .sps span:nth-child(3) {
  width:calc(12em);
}*/
  .topics a:hover {
    opacity: 0.9;
    transition: ease-in-out 0.2s;
  }
  .room {
    width: calc(100vw);
    height: calc(100vw / 1.7778 / 10 * 6.5);
    background-image: url(../images/happycom.jpg);
    border-bottom: 20px solid #00524F;
    background-position: center center;
    background-size: cover;
  }
  .room .inner {
    width: calc(100vw / 10 * 6);
    margin-left: auto;
    margin-right: auto;
  }
  .room .title {
    width: calc(100%);
    padding-top: calc(100vw / 1.7778 / 10 * 1);
    padding-bottom: calc(100vw / 1.7778 / 10 /4);
    font-size: calc(3.8rem);
    text-align: center;
    color: #00776a;
    letter-spacing: calc(0.3rem);
    font-feature-settings: "palt"1;
  }
  .room .title span {
    margin-left: calc(0.5rem);
  }
  .room .box {
    width: calc(100%);
    height: calc(100vw / 1.7778 / 10 * 2);
    background-color: rgba(255, 255, 255, 0.90);
  }
  .room .kinkichubu {
    width: calc(50% - 1px);
    height: calc(100vw / 1.7778 / 10 * 2);
    float: left;
    border-right: 1px solid rgba(112, 112, 112, 1.00);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .room a {
    width: calc(100vw / 10 * 6 /2);
    height: calc(100vw / 1.7778 / 10 * 2);
    text-align: center;
    border: 10px solid rgba(63, 106, 51, 0.00);
    box-sizing: border-box;
  }
  .room .kinkichubu a:hover {
    border: 10px solid rgba(214, 22, 24, 0.46);
    box-sizing: border-box;
  }
  .room .shuto a:hover {
    border: 10px solid rgba(23, 130, 106, 0.47);
    box-sizing: border-box;
  }
  .room .shuto {
    width: calc(50%);
    height: calc(100vw / 1.7778 / 10 * 2);
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .room .tit {
    width: calc(100vw / 10 * 6 /2 - 10px);
    height: auto;
    font-size: calc(3rem);
    margin-top: calc(100vw / 1.7778 / 10 *1/5);
    color: #00524f;
  }
  .room .tit span {
    width: calc(100%);
    font-size: calc(2.5rem);
    line-height: calc(2em);
    display: block;
  }
  .room .logo {
    display: block;
    width: calc(100vw / 10 * 1.6);
    height: calc(100vw/1.7778/10*1.6/2);
    padding-bottom: calc(5em);
    margin-right: auto;
    margin-left: auto;
  }
  .room .logo img {
    width: calc(100vw/10*1.6);
    height: calc(100vw/1.7778/10*1.6/2);
    margin-left: calc(-10px);
    object-fit: contain;
  }
  .room .icon {
    width: calc(3em);
    margin-top: calc(1.5em);
    margin-right: auto;
    margin-left: auto;
  }
  .chukai {
    position: relative;
    width: calc(100vw);
    height: calc(100vw / 1.7778);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .chukai .inner {
    width: calc(100vw / 10 * 8);
    top: calc(100vw / 1.7778 / 10 * 1.5);
    left: calc(50% - 100vw / 10 * 8 /2);
    height: calc(100vw / 10 * 8 / 2.2);
    background-color: rgba(239, 139, 67, 1.00);
    margin-top: calc(-10em);
  }
  .chukai .inner .box {
    width: calc(100vw / 10 * 8 / 2);
    height: calc(100vw / 10 * 8 / 2.2);
  }
  .chukai .inner .kinkichubu {
    width: calc(100vw/10*3);
    height: calc(100vw / 1.7778 / 10 * 4.5);
    position: absolute;
    top: calc(100vw / 1.7778 / 10 * 1.2);
    left: calc(100vw/10/2.2);
    background-color: rgba(255, 255, 255, 1.00);
    background-image: url(../images/itandi2.jpg);
    background-size: cover;
    background-position: center center;
  }
  .chukai .inner .squarelink {
    width: calc(100vw / 10 * 8 / 2);
    position: absolute;
    color: white;
    font-size: calc(2rem);
    bottom: calc(2.9%);
    left: calc(0%);
    text-align: center;
    letter-spacing: calc(1px);
  }
  .chukai .right {
    position: relative;
    float: right;
    background-image: url(../images/top_itandi.svg);
    background-size: cover;
    background-position: right bottom;
  }
  .chukai .left {
    position: relative;
    float: left;
    background-color: rgba(101, 112, 136, 0.90);
    background-image: url(../images/top_sqare.svg);
    background-size: cover;
    background-position: right bottom;
  }
  .chukai .shuto {
    width: calc(100vw/10*3);
    height: calc(100vw / 1.7778 / 10 * 4.5);
    position: absolute;
    top: calc(100vw / 1.7778 / 10 * 1.2);
    left: calc(100vw/10/2.1);
    background-color: rgba(255, 255, 255, 1.00);
    background-image: url(../images/itandi.jpg);
    background-position: center center;
    background-size: cover;
  }
  .chukai .inner .title {
    position: absolute;
    width: calc(100vw / 10 * 8);
    font-size: calc(4rem);
    line-height: calc(100vw / 1.7778 / 10 * 1.1);
    letter-spacing: calc(0.1em);
    text-align: center;
    color: #fff;
  }
  .chukai p {
    position: absolute;
    width: calc(100vw/10*3);
    padding-top: calc(2rem);
    font-size: calc(4.2rem);
    text-align: center;
    color: #FDFDFD;
  }
  .chukai a:hover {
    opacity: 1.0;
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }
  .itandi_box {
    width: calc(100vw);
    height: calc(auto);
    justify-content: center;
    align-items: center;
    padding-bottom: calc(60px);
    background-color: #3B5DA9;
    background-image: -webkit-linear-gradient(320deg, rgba(63, 112, 182, 1.00) 0%, rgba(59, 93, 169, 1.00) 51.59%, rgba(22, 45, 75, 1.00) 100%);
    background-image: -moz-linear-gradient(320deg, rgba(63, 112, 182, 1.00) 0%, rgba(59, 93, 169, 1.00) 51.59%, rgba(22, 45, 75, 1.00) 100%);
    background-image: -o-linear-gradient(320deg, rgba(63, 112, 182, 1.00) 0%, rgba(59, 93, 169, 1.00) 51.59%, rgba(22, 45, 75, 1.00) 100%);
    background-image: linear-gradient(130deg, rgba(63, 112, 182, 1.00) 0%, rgba(59, 93, 169, 1.00) 51.59%, rgba(22, 45, 75, 1.00) 100%);
  }
  .itandi_box .title {
    width: calc(100%);
    padding-top: calc(3vw);
    padding-bottom: calc(3vw);
    display: block;
    text-align: center;
    font-size: calc(3.8rem);
    font-weight: bold;
    letter-spacing: calc(0.6rem);
    color: rgba(255, 255, 255, 1.00);
  }
  .itandi_box .inner {
    width: 80vw;
    height: calc(25vw);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    background-color: #FE9A46;
    clip-path: polygon(95% 0, 100% 15%, 100% 100%, 0 100%, 0 0);
    overflow: hidden;
  }
  .itandi_box .inner a {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2つの等間隔の列 */
    gap: 0%; /* 縦の間隔を設定 */
  }
  .itandi_box a:hover {
    opacity: 0.8;
  }
  .itandi_box_left {}
  .itandi_box_left img {
    width: 100%;
  }
  .itandi_box_right {
    position: relative;
  }
  .itandi_box_right p:nth-child(1) {
    font-size: calc(4rem);
    line-height: calc(160%);
    font-weight: bold;
    letter-spacing: 0.3rem;
    text-align: left;
    position: absolute;
    top: 18%;
    left: 16%;
  }
  .itandi_box_right p:nth-child(2) {
    font-size: calc(3rem);
    letter-spacing: 0.2rem;
    line-height: calc(200%);
    position: absolute;
    top: 46%;
    left: 16%;
  }
  .itandi_box_right p:nth-child(3) {
    width: calc(25vw);
    position: absolute;
    top: 63%;
    left: 16.5%;
  }
  .itandi_box_right img {
    width: 100%;
  }
  .old_data_box {
    width: calc(80vw);
    margin: auto;
    padding-top: calc(3em);
    padding-bottom: calc(3em);
    background-color: rgba(54, 122, 207, 1.00);
    display: flex;
    justify-content: center; /* 横方向に中央揃え */
    align-items: center; /* 縦方向に中央揃え */
    text-align: center
  }
  .old1, .old2, .old3 {
    width: 40%;
    text-align: center;
    padding: 10px 8px 10px 8px;
    margin: 5px 10px 5px 10px;
    font-size: calc(2.3rem);
    letter-spacing: calc(1px);
    border: 1px solid rgba(211, 203, 203, 1.00);
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.70);
  }
  .sdgs {
    width: calc(100vw);
    height: calc(100vw / 1.7778 / 10 * 6);
    background-image: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
  }
  .sdgs .left {
    width: calc(100vw / 10 * 5 / 2);
    height: calc(100vw / 1.7778 / 10 * 3);
    margin-top: calc(100vw / 1.7778 / 10 * 1.5);
    margin-left: calc(100vw / 10 * 1.5);
    display: block;
    float: left;
  }
  .sdgs .right {
    width: calc(100vw / 10 * 5);
    height: calc(100vw / 1.7778 / 10 * 3);
    margin-top: calc(100vw / 1.7778 / 10 * 1.5);
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
    background-color: #FFFFFF;
    display: block;
    float: right;
  }
  .sdgs .left img {
    width: 100%;
    object-fit: cover;
  }
  .sdgs .right .title {
    padding-top: calc(100vw / 1.7778 / 10 * 0.3);
    padding-left: calc(100vw / 10 * 1.5);
    font-size: calc(7.5rem);
    letter-spacing: calc(0.2rem);
    background: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .sdgs .right .bot {
    margin-left: calc(100vw / 10 * 1.4);
  }
  .sdgs .andmore {
    width: calc(100vw / 10 * 1.8);
    clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
    background-color: rgba(0, 82, 79, 1.00);
    display: flex;
    align-items: center;
    line-height: calc(4rem);
    font-size: calc(1.8rem);
    color: white;
    transition: all 0.0s;
  }
  .sdgs .andmore:hover path, .sdgs .andmore:hover {
    background-color: rgba(0, 5, 079, 1.00);
    fill: rgba(0, 5, 079, 1.00);
    transition: all 0.3s;
  }
  .recruit {
    width: calc(100vw);
    height: calc(100vw / 1.7778 / 10 * 6);
    background-image: url(../images/recruit_image.jpg);
    background-position: center center;
    background-size: 110%;
  }
  .recruit .left {
    width: calc(100vw / 10 * 5);
    height: calc(100vw / 1.7778 / 10 * 3);
    margin-top: calc(100vw / 1.7778 / 10 * 1.5);
    clip-path: polygon(0 0, 100% 0%, 80% 100%, 0 100%);
    background-color: #FFFFFF;
    display: block;
    float: left;
  }
  .recruit .right {
    position: relative;
    width: calc(100vw / 10 * 5);
    height: calc(100vw / 1.7778 / 10 * 6);
    display: block;
    float: right;
  }
  .recruit .right img {
    position: absolute;
    width: 100%;
    bottom: calc(-5px);
    right: calc(20px);
    object-fit: cover;
  }
  .recruit .left .title {
    padding-top: calc(100vw / 1.7778 / 10 * 0.3);
    padding-left: calc(100vw / 10 * 1.5);
    font-size: calc(7.5rem);
    letter-spacing: calc(0.2rem);
    background: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .recruit .left .bot {
    margin-left: calc(100vw / 10 * 1.5);
  }
  .recruit .andmore {
    width: calc(100vw / 10 * 1.8);
    clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
    background-color: rgba(0, 82, 79, 1.00);
    display: flex;
    align-items: center;
    line-height: calc(4rem);
    font-size: calc(1.8rem);
    color: white;
    transition: all 0.0s;
  }
  .recruit .andmore:hover path, .recruit .andmore:hover {
    background-color: rgba(0, 5, 079, 1.00);
    fill: rgba(0, 5, 079, 1.00);
    transition: all 0.3s;
  }
  .TCG {
    width: calc(100vw);
    height: calc(100vw / 1.7778 / 10 * 6.5);
    margin-top: calc(100vw / 1.7778 / 10 / 2);
    /*margin-bottom: calc(100vw / 1.7778 / 10 / 2);*/
    background-color: rgba(0, 82, 79, 1.00);
  }
  .TCG .left {
    position: relative;
    width: calc(100vw / 10 * 5);
    height: calc(100vw / 1.7778 / 10 * 6.5);
    float: left;
  }
  .TCG .left img {
    width: 100%;
    height: calc(100vw / 1.7778 / 10 * 6.5);
    object-fit: cover;
  }
  .TCG .right {
    position: relative;
    width: calc(100vw / 10 * 4);
    height: calc(100vw / 1.7778 / 10 * 5.5);
    color: #fff;
    float: right;
    margin-top: calc(100vw/100*4.5);
    margin-left: calc(100vw / 10 * 0.5);
    margin-right: calc(100vw / 10 * 0.5);
  }
  .TCG .right .tcglogo {
    width: calc(100vw / 10 * 4);
    margin-bottom: calc(3em);
  }
  .TCG .right .tcglogo img {
    width: calc(100vw / 10 * 3.5);
    padding-bottom: calc(0.2em);
    object-fit: cover;
  }
  .TCG .right .title {
    font-size: calc(3.3rem);
    line-height: calc(2em);
    padding-bottom: calc(0.6em);
    letter-spacing: calc(0.1em);
  }
  .TCG .right .copy {
    width: calc(100vw / 10 * 4);
    font-size: calc(2.2rem);
    line-height: calc(2em);
    letter-spacing: calc(0.2em);
    margin-left: calc(0.2rem);
    margin-right: calc(0.2rem);
    padding-bottom: calc(0.6em);
    text-align: justify;
  }
  .TCG .right .tcg_link {
    width: calc(100vw / 10 * 4);
    font-size: calc(2.2rem);
    line-height: calc(2em);
    border-bottom: 1px solid #fff;
    padding-bottom: calc(0.2em);
    color: #FFFFFF;
    display: block;
    text-align: right;
  }
  .TCG .right .tcg_link:hover {
    color: #DDFE6E;
    border-bottom: 1px solid #DDFE6E;
  }
  .inq {
    width: calc(100vw);
    height: calc(100vw / 1.7778 / 10 * 6.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .inqbox {
    width: calc(100vw / 10 *7);
    height: calc(100vw / 1.7778 / 10 * 5);
    background: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
  }
  .inqbox .left {
    width: calc(100vw /10 *7/2);
    height: calc(100vw / 1.7778 / 10 * 5);
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
  }
  .inqbox .right {
    width: calc(100vw /10 *7/2);
    height: calc(100vw / 1.7778 / 10 * 5);
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
  }
  .inqbox .box {
    width: calc(100vw /10 *2.3);
    height: calc(100vw /10 *2.3);
    background-color: #F5F5F5;
    /**/ border-radius: 50%;
  }
  .inqbox .box:hover {
    opacity: 1.0;
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-box-shadow: inset 0px 10px 16pt #869093;
    box-shadow: inset 0px 10px 16pt #869093;
  }
  .inqbox .img {
    margin-top: calc(100vw /10 * 0.2);
    width: calc(100vw /10 *1);
    height: calc(100vw /10 *1);
    /**/ border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }
  .inqbox .img img {
    width: calc(100vw /10 *1);
    height: calc(100vw /10 *1);
    object-fit: contain;
  }
  .inqbox .txt {
    width: calc(100vw /10 *2.3);
    font-size: calc(2.6rem);
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(1em);
    margin-bottom: calc(1em);
    text-align: center;
  }
  .inqbox .txt span {
    width: calc(100vw /10 *2.3);
    font-size: calc(1.6rem);
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .inqbox .svg {
    width: calc(2.6rem);
    height: calc(2.6rem);
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
  }
  .inqbox .svg img {
    width: calc(1.8em);
    height: calc(1.8em);
    object-fit: contain; /* */
  }
}
/*//////////スマホサイズ footer///////////*/
@media screen and (max-width:480px) {
/* ==============================
トップムービー セミナーバナー start
============================== */
.seminar-bnr {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100vw;
  padding: 4vw 0;
  background-color: #18273d;
  display: grid;
  grid-template-columns: 85vw;
  gap: 4vw;
  justify-content: center;
  box-sizing: border-box;
  z-index: 5;
}

.seminar-bnr__item {
  position: relative;
  display: block;
  overflow: visible;
  background-color: #ffffff;
  transition: all 0.3s;
}

.seminar-bnr__item picture,
.seminar-bnr__item img {
  display: block;
  width: 100%;
  height: auto;
}
/* ==============================
トップムービー セミナーバナー end
============================== */

/* ==============================
トップムービー 地震お見舞い start
============================== */
.earthquake-message {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: calc(100vw - 4rem);
  padding: 1.5rem;
  background-color: #ffffff;
  color: #333333;
  box-sizing: border-box;
  text-align: center;
  transform: translateX(-50%);
  z-index: 6;
}

.earthquake-message__title {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}

.earthquake-message__text {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.7;
  text-align: left;
}
/* ==============================
トップムービー 地震お見舞い end
============================== */


/* ==============================
バナーコーナー start
============================== */
.top-bnr {
  position: relative;
  width: 100vw;
  padding: 2vw 0;
  background-color: #18273d;
  box-sizing: border-box;
  z-index: 2;
}

.top-bnr__inner {
  width: 85vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 85vw;
  gap: 4vw;
}

.top-bnr__item {
  position: relative;
  display: block;
  overflow: visible;
  background-color: #ffffff;
  transition: all 0.3s;
}

.top-bnr__item picture,
.top-bnr__item img {
  display: block;
  width: 100%;
  height: auto;
}

.top-bnr__new {
  position: absolute;
  top: -1.8rem;
  left: 0;
  width: 4rem;
  height: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 0.4rem;
  background-color: #E4007F;
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 1;
  z-index: 3;
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
}
.top-bnr__new2 {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15vw 14vw 0 0;
  border-color: #D72968 transparent transparent transparent;
  z-index: 10;
  overflow: visible;
}
.top-bnr__new2 span {
  position: absolute;
  top: -7vw;
  left: 0.15vw;
  display: block;
  width: 15vw;
  transform: rotate(-45deg);
  transform-origin: left center;
  color: #ffffff;
  font-size: 3vw;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
}
/* ==============================
バナーコーナー end
============================== */
  #topmovie {
    position: relative; /*h1の中央寄せ配置の起点とするためのrelative*/
    width: 100vw;
    height: 100vh; /* 変数をサポートしていないブラウザのフォールバック 
  height: calc(var(--vh, 1vh) * 100);*/
    overflow: hidden;
  }
  #videoSP {
    /*天地中央配置*/
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*縦横幅指定*/
    width: 100vw; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    height: auto; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
  }
  .topcopy {
    position: absolute;
    top: 15%;
    left: 5%;
    color: #FFF;
    font-size: calc(3em);
    letter-spacing: calc(0.1em);
    line-height: calc(2em);
    text-align: left;
    text-orientation: upright;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-variant-east-asian: full-width;
    -moz-font-feature-settings: "fwid";
    -webkit-font-feature-settings: "fwid";
    font-feature-settings: "fwid";
    z-index: 10;
  }
  a.movply, a.mov50th, a.oyakudachi, a.propatymanage, a.akiya-management {
    position: absolute;
    width: calc(60vw);
    min-width: calc(15%);
    color: #FFF;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.50);
    border-radius: 3px;
  }
  a.movply {
    left: 2%;
    bottom: 2%;
  }
  a.mov50th {
    left: 30%;
  }
  a.oyakudachi {
    left: 2%;
    bottom: 18%;
  }
  a.propatymanage {
    left: 2%;
    bottom: 10%;
  }
    a.akiya-management{
    left: 2%;
    bottom: 26%;
  }
  .movply img, .mov50th img, .oyakudachi img, .propatymanage img, .akiya-management img {
    vertical-align: middle;
    width: calc(100%);
  }
  .movply:hover, .mov50th:hover .oyakudachi:hover, .propatymanage:hover, .akiya-management:hover {
    opacity: 0.8;
    background-color: rgba(0, 96, 85, 1.00);
    transition: all 0.5s;
  }
  .top_new_mark {
    position: absolute;
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    top: -1.8rem;
    left: calc(0% - 1px);
    width: 4rem;
    height: 1.8rem;
    font-size: calc(1.2rem);
    color: white;
    padding-right: calc(3%);
    background-color: #E4007F;
    z-index: 10;
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
  }
  .hedtcglogo {
    position: absolute;
    width: 25%;
    height: auto;
    bottom: 2%;
    right: 5%;
    z-index: 1;
  }
  .hedtcglogo img {
    width: 100%;
  }
  .andmore {
    width: calc(50%);
    clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
    background-color: rgba(0, 82, 79, 1.00);
    display: flex;
    align-items: center;
    line-height: calc(4rem);
    font-size: calc(1.8rem);
    color: white;
    transition: all 0.0s;
  }
  .andmore svg {
    height: calc(4rem);
    display: inline;
    padding-right: calc(1em);
    fill: rgba(0, 82, 79, 1.00);
    transition: all 0.0s;
  }
  .andmore:hover path, .andmore:hover {
    background-color: rgba(0, 5, 079, 1.00);
    fill: rgba(0, 5, 079, 1.00);
    transition: all 0.3s;
  }
  .resident_container {
    height: calc(50vh);
    padding-top: calc(23vh);
    background-color: #FCF3E5;
    background-image: url(../images/top_resident_img1_sp.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }
  .resident_box {
    width: calc(80vw);
    height: calc(85vw);
    margin: auto;
    background-color: #fff;
    text-align: center;
    border-radius: 10px;
  }
  .resident_image {
    width: calc(70vw);
    margin: auto;
    padding-top: calc(2em);
    display: grid;
    grid-template-columns: repeat(, 1fr);
    row-gap: calc(1vw); /*縦の余白*/
    /* column-gap: calc(1vw);横の余白*/
  }
  .resident_image span {
    display: block;
    width: 100%;
    height: auto;
    padding-top: calc(0);
    padding-bottom: calc(0);
  }
  .resident_image span p:nth-child(1) {
    display: inline-block;
    padding-right: calc(1em);
  }
  .resident_image span p:nth-child(1) img {
    width: calc(4em);
    height: auto;
    vertical-align: middle;
  }
  .resident_image span p:nth-child(2) {
    display: inline-block;
    font-size: calc(1.6em);
    line-height: calc(100%);
    vertical-align: -2px;
  }
  .resident_text {
    padding-top: calc(4vw);
    font-size: calc(2.4em);
    letter-spacing: calc(1em/10);
    color: #333;
    text-align: center;
    line-height: calc(160%);
  }
  .resident_link {
    width: 40vw;
    margin: auto;
    background-color: rgba(0, 82, 79, 1.00);
    display: block;
    text-align: center;
    line-height: calc(100%);
    margin-top: calc(2em);
    font-size: calc(1.6em);
    padding-top: calc(1em);
    padding-left: calc(1em);
    padding-right: calc(1em);
    padding-bottom: calc(1em);
    color: white;
    transition: all 0.2s;
    border-radius: 10px
  }
  .resident_link:hover {
    background-color: rgba(0, 168, 195, 1.00);
  }
  .copy_message {
    position: relative;
    width: calc(100vw);
    height: calc(40vh);
    clip-path: polygon(50% 8%, 100% 0, 100% 100%, 0 100%, 0 0);
    overflow: hidden;
  }
  .copy_message .txt {
    position: absolute;
    width: calc(100%);
    margin-top: calc(100%/3.5);
    color: #E0E0E0;
    font-size: calc(2rem);
    line-height: calc(4rem);
    letter-spacing: calc(0.2rem);
    text-align: center;
    font-weight: bold;
    z-index: 10;
  }
  .copy_message img {
    width: calc(100vw);
    height: calc(40vh);
  }
  .copy1 {
    top: 15%;
    right: 5%;
  }
  .copy2 {
    top: 15%;
    right: 18%;
  }
  .feature {
    width: calc(100%);
    padding-bottom: calc(50px);
  }
  .feature .tit {
    width: calc(100%);
    padding-top: calc(40px);
    padding-bottom: calc(40px);
    display: block;
    text-align: center;
    font-size: calc(2.5rem);
    letter-spacing: calc(0.1rem);
    color: rgba(38, 38, 38, 1.00);
  }
  .feature .tit span {
    display: block;
    font-size: calc(1.6rem);
    font-weight: normal;
    letter-spacing: calc(0.1rem);
  }
  .feature .pickup {
    width: calc(100vw / 10 * 6);
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
  }
  .feature .box {
    width: calc(100%);
    height: calc(100vw / 10 * 6);
    border-radius: 50%;
    border: 2px solid #007FAE;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: calc(30px);
  }
  .feature .box div {
    text-align: center;
  }
  .feature .box span {
    font-size: calc(2rem);
    letter-spacing: calc(0.2rem);
    background: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 100%;
  }
  .feature .box p {
    font-size: calc(5rem);
    letter-spacing: calc(0.2rem);
    background: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 100%;
  }
  .feature .box p span {
    font-size: calc(4rem);
    letter-spacing: calc(0.2rem);
    background: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .feature .links {
    width: calc(100vw);
    padding-top: calc(100vw/10*1/2);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .servicebox {
    min-height: calc(100vh);
  }
  .service {
    position: relative;
    padding-top: calc(150px * 8 + (20vh * 6.5));
    background-color: #cfe0e5;
  }
  .service .back {
    position: absolute;
    padding-top: calc(150px * 8 + (20vh * 6.5));
    top: calc(0%);
    width: calc(100vw);
    clip-path: polygon(0 0, 100% 0%, 60% 100%, 0% 100%);
    background-image: -webkit-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -moz-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -o-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: linear-gradient(180deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    z-index: 0;
  }
  .service .inner {
    position: absolute;
    top: calc(100vw/10);
    width: calc(100vw/10*8);
    left: calc(50% - (100vw/10*8/2));
    z-index: 5;
  }
  .service .title {
    width: calc(100%);
    padding-top: calc(100vw/10*1/2);
    padding-bottom: calc(100vw/10*1/3);
    display: block;
    text-align: center;
    font-size: calc(2.5rem);
    letter-spacing: calc(0.1rem);
    font-weight: bold;
    color: rgba(255, 255, 255, 1.00);
  }
  .service .title span {
    display: block;
    font-size: calc(1.6rem);
    font-weight: normal;
    letter-spacing: calc(0.2rem);
  }
  .service .group {
    width: calc(100%);
  }
  .service .group a {
    margin-bottom: calc(5rem);
    color: #4C4C4C;
    display: block;
  }
  .service .group a:hover {
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    color: #8C4F50；
  }
  .service1, .service2, .service3, .service4, .service5, .service6, .service7, .service8 {
    font-size: calc(1.8rem);
    font-weight: bold;
    line-height: calc(2em);
    letter-spacing: calc(0.2rem);
    background-color: aliceblue;
  }
  .sumb1 {
    height: calc(150px);
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }
  .sumb2 {
    height: calc(150px);
    display: flex;
    justify-content: space-between;
    overflow: hidden;
  }
  .sumb1 img, .sumb2 img {
    width: 100%;
    height: auto;
    object-fit: cover
  }
  .link_txt {
    height: calc(20px);
    font-size: calc(1.6rem);
    padding-top: 13px;
    display: flex;
    align-items: center;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
  }
  .link_txt img {
    height: calc(1.8rem);
    margin-left: calc(1em);
    margin-right: calc(1em);
    display: flex;
    align-items: center;
  }
  .service1 {
    width: calc(100%);
    height: calc(200px);
    display: block;
    clip-path: polygon(96% 0, 100% 10%, 100% 100%, 0 100%, 0 0);
  }
  .service2, .service3, .service4, .service5, .service6, .service7, .service8 {
    width: calc(100%);
    height: calc(200px);
    display: block;
    clip-path: polygon(96% 0, 100% 10%, 100% 100%, 0 100%, 0 0);
  }
  .message {
    width: calc(100vw);
    height: calc(auto);
  }
  .message div {}
  .message .inner {
    position: relative;
    width: calc(100vw);
    height: calc(100vh);
    top: calc(0%);
    left: calc(0%);
  }
  .message .title {
    position: absolute;
    width: 100%;
    top: calc(47%);
    left: calc(-50% + 3rem);
    font-size: calc(3rem);
    color: #F2F1F1;
    letter-spacing: calc(0.22em);
    line-height: calc(2em);
    text-align: left;
    text-orientation: upright;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-variant-east-asian: full-width;
    -moz-font-feature-settings: "fwid";
    -webkit-font-feature-settings: "fwid";
    font-feature-settings: "fwid";
  }
  .message .image {
    position: absolute;
    width: calc(100vw/10*9);
    height: auto;
    top: calc(10%);
    left: calc(50% - 100vw/10*9/2);
  }
  .message .image img {
    position: absolute;
    width: calc(100vw/10*9);
    height: auto;
    object-fit: cover;
  }
  .message .name {
    position: absolute;
    top: 65%;
    left: calc(0%);
    font-size: calc(2.6rem);
    color: #F2F1F1;
    width: 100%;
    text-align: center;
  }
  .message .name span {
    font-size: calc(2rem);
    color: #F2F1F1;
  }
  .message .big_copy {
    position: absolute;
    font-size: calc(100vw /20);
    color: #E3E1DC;
    right: 3.5%;
    bottom: 13%;
  }
  .message .back {
    position: absolute;
    top: calc(10%);
    right: 5%;
    width: calc(90%);
    height: calc(80vh);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    background-image: -webkit-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -moz-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -o-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: linear-gradient(180deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    z-index: 0;
  }
  .message .andmore {
    position: absolute;
    top: 78%;
    left: calc(50% - 100vw / 2 / 2);
    width: calc(50%);
    clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
    background-color: #fff;
    display: flex;
    align-items: center;
    line-height: calc(4rem);
    font-size: calc(1.7rem);
    color: #00776a;
    transition: all 0.0s;
  }
  .message .andmore svg {
    height: calc(4rem);
    display: inline;
    padding-right: calc(0.5em);
    fill: #00776a;
    transition: all 0.0s;
  }
  .message .andmore:hover path, .message .andmore:hover {
    color: #00776a;
    background-color: rgba(219, 231, 234, 1.00);
    fill: #00776a;
    transition: all 0.3s;
  }
  .message .inner2 {
    position: relative;
    width: calc(100vw);
    height: calc(90vh);
    top: calc(0%);
    left: calc(0%);
  }
  .message .subtit {
    position: absolute;
    top: calc(37%);
    left: calc(50% - 100vw/10*8/2);
    font-size: calc(1.6rem);
    line-height: calc(100%);
    color: #E8D02F;
    letter-spacing: calc(0.1em);
  }
  .message .title2 {
    position: absolute;
    width: calc(100vw/10*8);
    top: calc(40.5%);
    left: calc(50% - 100vw/10*8/2);
    font-size: calc(2.5rem);
    color: #F2F1F1;
    /*letter-spacing: calc(0.22em);*/
    line-height: calc(150%);
    text-align: left;
    text-align: justify;
    /*text-orientation: upright;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;*/
    font-variant-east-asian: full-width;
    -moz-font-feature-settings: "fwid";
    -webkit-font-feature-settings: "fwid";
    font-feature-settings: "fwid";
  }
  .message .image2 {
    position: absolute;
    width: calc(100vw/10*9);
    height: auto;
    left: calc(50% - 100vw/10*9/2);
  }
  .message .image2 img {
    position: absolute;
    width: calc(100vw/10*9);
    height: auto;
    object-fit: cover;
  }
  .message .name2 {
    position: absolute;
    width: calc(100vw/10*8);
    top: 53%;
    left: calc(50% - 100vw/10*8/2);
    font-size: calc(1.6rem);
    color: #F2F1F1;
    letter-spacing: calc(0.1em);
    line-height: calc(180%);
    text-align: justify;
  }
  .message .name2 span {}
  .message .back2 {
    position: absolute;
    right: 5%;
    width: calc(90%);
    height: calc(80vh);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    background-image: -webkit-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -moz-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -o-linear-gradient(270deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: linear-gradient(180deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    z-index: 0;
  }
  .message .andmore2 {
    position: absolute;
    top: 77%;
    left: calc(50% - 100vw / 2 / 2);
    width: calc(50%);
    clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
    background-color: #fff;
    display: flex;
    align-items: center;
    line-height: calc(4rem);
    font-size: calc(1.7rem);
    color: #00776a;
    transition: all 0.0s;
  }
  .message .andmore2 svg {
    height: calc(4rem);
    display: inline;
    padding-right: calc(0.5em);
    fill: #00776a;
    transition: all 0.0s;
  }
  .message .andmore2:hover path, .message .andmore2:hover {
    color: #00776a;
    background-color: rgba(219, 231, 234, 1.00);
    fill: #00776a;
    transition: all 0.3s;
  }
  /* ==============================
   空き家管理サービスバナー start
============================== */
.akiya-banner {
	width: 100vw;
	margin: 0 calc(50% - 50vw); /* セクションの左右余白を打ち消して全幅表示 */
	padding: 1vw 0;
	background-color: rgba(117,129,143,1.00)
}

.akiya-banner__link img {
  width: 100%;
  height: auto;
  display: block;
}
.akiya-banner__link img:hover {
opacity: 0.85;
transition: all 0.3s;
}

/* ==============================
   空き家管理サービスバナー end
============================== */
  /*50th MOVIE */
  .mov50th_section {
    position: relative;
    width: calc(100vw);
    padding-top: calc(8vw);
    padding-bottom: calc(10vw);
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    background-image: -webkit-radial-gradient(rgba(255, 255, 255, 1), rgba(205, 224, 234, 1)); /* Safari 5.1 - 6.0 */
    background-image: -moz-radial-gradient(rgba(255, 255, 255, 1), rgba(205, 224, 234, 1)); /* Firefox 3.6 - 15 */
    background-image: -o-radial-gradient(rgba(255, 255, 255, 1), rgba(205, 224, 234, 1)); /* Opera 11.6 - 12.0 */
    background-image: radial-gradient(rgba(255, 255, 255, 1), rgba(205, 224, 234, 1)); /* 標準 */
    pointer-events: none;
  }
  .mov50th_container {
    font-size: calc(1.6rem);
    line-height: calc(1.6em);
    text-align: center;
    color: #333333;
  }
  .mov50th_container img {
    width: 20%;
  }
  .mov50th_container p:nth-child(1) {
    font-size: calc(1.6rem);
    line-height: calc(1.8em);
    letter-spacing: calc(0.1em);
    padding-top: calc(4.5vw);
    padding-bottom: calc(5.5vw);
    font-family: a-otf-ryumin-pr6n, serif;
    text-align: left;
  }
  .mov50th_container p:nth-child(2) {
    text-align: left;
    font-family: yu-gothic-pr6n, sans-serif;
    letter-spacing: calc(0.1em);
  }
  .mov50th_box {
    width: calc(85vw);
    margin: auto;
    display: inline-block;
    padding-bottom: calc(4vw);
  }
  .mov50th_grid {
    width: auto;
    padding-left: calc(7.5vw);
    padding-right: calc(7.5vw);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px; /* 列の間隔を20pxに設定 */
    padding-top: calc(1vw);
    padding-bottom: calc(10vw);
  }
  .mov50th_grid img {
    width: 100%;
  }
  .mov50th_link a {
    width: auto;
    display: inline-block;
    padding-top: calc(2vw);
    padding-bottom: calc(2vw);
    padding-left: calc(6vw);
    padding-right: calc(6vw);
    background-color: rgba(171, 155, 80, 1.00);
    transition: ease-in-out 0.2s;
    clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
    color: white;
    text-align: left;
    pointer-events: auto;
  }
  .mov50th_link a:hover {
    background-color: rgba(171, 155, 80, 1.00);
    opacity: 1;
    transition: ease-in-out 0.2s;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
  }
  .mov50th_section:hover {}
  .nowmov_symbol {}
  .nowmov_symbol img {
    width: calc(18vw);
  }
  .nowmov_title {
    width: calc(70vw);
    margin: auto;
    padding-top: calc(3vw);
    padding-bottom: calc(8vw);
  }
  .nowmov_title img {
    width: 100%
  }
  .archive_link a {
    font-size: 1.6rem;
    width: auto;
    display: inline-block;
    padding-top: calc(1vw);
    padding-bottom: calc(1vw);
    padding-left: calc(2em);
    padding-right: calc(2em);
    background-color: #4D999A;
    transition: ease-in-out 0.2s;
    clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    color: white;
    text-align: left;
    pointer-events: auto;
    margin: 2em 0 0 0;
  }
  .archive_link a:hover {
    background-color: rgba(35, 104, 146, 1.00);
    opacity: 1;
    transition: ease-in-out 0.2s;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0% 50%);
  }
  /*スライダー*/
  /* Style for the container of the slider */
  .slider-container {
    width: 100%; /* Adjust as needed */
    margin: auto;
    overflow: hidden; /* Hide overflowing content */
    position: relative;
  }
  /* Style for the slider */
  .slider {
    display: flex;
    transition: transform 0.5s ease; /* Smooth slide transition */
  }
  /* Style for each slide (thumbnail image) */
  .slide {
    flex: 0 0 80vw; /* 各写真の横幅を20vwに設定 */ /* Each slide takes full width */
  }
  /* Style for the thumbnail images */
  .slide img {
    width: 99.5%;
    height: auto;
  }
  /* Animation for infinite loop */
  @keyframes slideLoop {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-80vw * 8));
    } /* 8枚分を移動 */
  }
  /* Apply loop animation to the slider */
  .slider.looped {
    animation: slideLoop 50s linear infinite; /* Adjust animation duration as needed */
  }
  /* Optional: Add hover effect on slides */
  .slide:hover {
    transform: scale(1.0); /* Scale up on hover */
  }
  /*50th MOVIE  閉じ*/
  /*お役立ち設計部　*/
  .oyakudachi_section {
    position: relative;
    width: calc(100vw);
    padding-top: calc(10vw);
    padding-bottom: calc(10vw);
    background-color: #EFEDE5;
  }
  .new_mark {
    position: absolute;
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    top: calc(0vw);
    left: calc(0vw);
    padding-right: calc(1em);
    width: 15vw;
    height: 8vw;
    font-size: calc(1.4rem);
    color: white;
    background-color: #E4007F;
    z-index: 10;
    clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
  }
  .oyakudachi_container {
    width: calc(100vw);
    font-size: calc(2.5em);
    line-height: calc(1.8em);
    text-align: center;
    color: rgba(69, 69, 69, 1.00);
  }
  .oyakudachi_titlebox {
    margin: auto;
    width: 70vw;
  }
  .oyakudachi_titlebox img {}
  .oyakudachi_titlebox img:nth-child(1) {
    width: 70vw;
    margin: auto
  }
  .oyakudachi_titlebox img:nth-child(2) {
    width: calc(50vw);
    left: calc(50% - (50vw / 2));
  }
  .oyakudachi_titlebox img:nth-child(3) {
    height: calc(30vw);
    top: calc(-2vw);
    right: calc(-15vw);
  }
  .oyakudachi_box {
    width: calc(85vw);
    display: inline-block;
    padding-bottom: calc(5vw);
    margin: auto;
  }
  .oyakudachi_box p:nth-child(1) {
    font-size: calc(2rem);
    letter-spacing: calc(0.1em);
    padding-top: calc(5vw);
    padding-bottom: calc(3vw);
    line-height: calc(180%);
    font-weight: bold;
    font-family: a-otf-ryumin-pr6n, serif;
    text-align: center;
  }
  .oyakudachi_box p:nth-child(2) {
    font-size: calc(1.6rem);
    font-family: yu-gothic-pr6n, sans-serif;
    letter-spacing: calc(0.1em);
    line-height: calc(170%);
    text-align: left;
  }
  .oyakudachi_bnr_bot {
    position: relative;
    width: calc(85vw);
    margin: auto;
    background-color: white;
    transition: transform 0.3s ease;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0); /* 水平方向のオフセット、垂直方向のオフセット、ぼかし半径、色 */
  }
  .article_arrow {
    position: absolute;
    top: 0%;
    right: 0%;
    z-index: 10;
  }
  .oyakudachi_bnr_bot:hover {
    transform: scale(1.02); /* 1.2%拡大 */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 水平方向のオフセット、垂直方向のオフセット、ぼかし半径、色 */
  }
  .bnr_clr {
    width: calc(10vw);
    height: calc(32px * 10);
    max-height: calc(360px);
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    background-color: #4D999A;
  }
  .bnr_clr img {
    width: calc(30%);
  }
  .bnr_title {
    font-size: calc(1.8rem);
    top: calc(30vw);
    left: calc(15vw);
    letter-spacing: calc(1rem/3);
    text-align: left;
    padding-top: calc(5vw);
  }
  .volume {
    width: max-content; /* コンテンツに合わせて幅を調整 */
    height: max-content;
    padding-top: calc(1vw);
    padding-bottom: calc(1vw);
    padding-left: calc(2vw);
    padding-right: calc(1.5em);
    margin-bottom: calc(0.6vw);
    background-color: #ea5532;
    font-size: calc(1.2rem);
    color: #fff;
    line-height: 100%;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
  }
  .bnr_txt {
    padding-left: 20px;
    font-size: calc(1.8rem);
    line-height: 160%;
    font-feature-settings: "palt";
    font-family: a-otf-ryumin-pr6n, serif;
    font-weight: bold;
  }
  .bnr_txt_name {
    padding: 10px 0;
    font-size: calc(1.5rem);
    letter-spacing: calc(0%);    line-height: 130%;
    padding-left: 20px;
    font-family: yu-gothic-pr6n, sans-serif;
  }
  .interview_name {
    font-size: calc(1.4rem);
  }
  .oyakudachi_bnr_img {
    top: calc(0%);
    right: calc(0vw);

    overflow: hidden;
    padding-bottom: calc(1vw);
  }
  .oyakudachi_bnr_img img {
    width: calc(75vw);
  }
  /*お役立ち設計部  閉じ*/
  .topics {
    padding-top: calc(100vw / 100);
    padding-bottom: calc(100vw /100);
    background-image: -webkit-linear-gradient(0deg, rgba(0, 128, 170, 1.00) 0%, rgba(0, 55, 96, 1.00) 100%);
    background-image: -moz-linear-gradient(0deg, rgba(0, 128, 170, 1.00) 0%, rgba(0, 55, 96, 1.00) 100%);
    background-image: -o-linear-gradient(0deg, rgba(0, 128, 170, 1.00) 0%, rgba(0, 55, 96, 1.00) 100%);
    background-image: linear-gradient(90deg, rgba(0, 128, 170, 1.00) 0%, rgba(0, 55, 96, 1.00) 100%);
  }
  .topicsbox {
    width: calc(100vw);
    margin-left: auto;
    margin-right: auto;
    padding-top: calc(40px);
    padding-bottom: calc(40px);
    background-image: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
  }
  .topics .title {
    width: calc(100%);
    text-align: center;
    font-size: calc(3.5rem);
    color: #fff;
    padding-bottom: calc(40px);
    line-height: calc(100%);
    /*height: calc(4rem * 4 + (0.2rem * 3));*/
    align-items: center;
    vertical-align: middle;
  }
  .topics .news_sps {
    width: calc(100vw);
    display: block;
  }
  .topics .sps {
    font-size: calc(1.6rem);
    background-color: #fff;
    width: calc(90vw - 4rem);
    padding: calc(2rem);
    line-height: calc(2.4rem);
    clip-path: polygon(94% 0, 100% 22%, 100% 100%, 0 100%, 0 0);
    margin-bottom: calc(0.2rem);
    margin-left: calc(2rem);
    letter-spacing: calc(0.1rem);
    display: block;
  }
  .topics .sps_non_atag {
    font-size: calc(1.6rem);
    background-color: #fff;
    width: calc(90vw - 4rem);
    padding: calc(2rem);
    line-height: calc(2.4rem);
    margin-bottom: calc(1rem);
    margin-left: calc(2rem);
    letter-spacing: calc(0.1rem);
    display: block;
    text-align: justify;
  }
  .topics .sps_non_atag span {}
  .topics .sps span {
    padding-right: calc(1rem);
  }
  .topics .news_sps a:last-child {
    margin-bottom: calc(0rem);
  }
  .topics .sps:hover {
    opacity: 0.9;
  }
  .topicsbnr {
    background-color: rgba(255, 255, 255, 0.42);
    width: calc(90vw - 4rem);
    padding: calc(2rem);
    margin-top: calc(1rem);
    margin-left: calc(2rem);
    letter-spacing: calc(0.1rem);
  }
  .topicsbnr img {
    width: 100%; /* 画像の幅を親要素に合わせる */
    height: auto; /* 高さを自動調整してアスペクト比を保つ */
  }
  .topicsbnr a:hover {
    opacity: 0.8;
    cursor: pointer;
  }
  .room {
    width: calc(100vw);
    height: calc(100vh);
    padding-top: calc(40px);
    padding-bottom: calc(40px);
    background-image: url(../images/happycom.jpg);
    border-bottom: 20px solid #00524F;
    background-position: center center;
    background-size: cover;
  }
  .room .inner {
    width: calc(90%);
    margin-left: auto;
    margin-right: auto;
  }
  .room .title {
    width: calc(100%);
    text-align: center;
    font-size: calc(2.8rem);
    color: #00776a;
    padding-top: calc(100vh/10/2);
    padding-bottom: calc(20px);
    line-height: calc(150%);
    /*height: calc(4rem * 4 + (0.2rem * 3));*/
    align-items: center;
    vertical-align: middle;
    letter-spacing: calc(0.5rem);
    font-feature-settings: "palt"1;
  }
  .room .title span {
    margin-left: calc(0.5rem);
  }
  .room .box {
    width: calc(100%);
    background-color: rgba(255, 255, 255, 0.90);
  }
  .room .kinkichubu {
    width: calc(100%);
    height: calc(28vh - 1px);
    display: block;
    justify-content: center;
    align-items: center;
    border-bottom: 1px dotted #818181;
  }
  .room a {
    width: calc(100%);
    height: calc(28vh);
    display: block;
    text-align: center;
    border: 10px solid rgba(63, 106, 51, 0.00);
    box-sizing: border-box;
  }
  .room .kinkichubu a:hover {
    border: 10px solid rgba(214, 22, 24, 0.46);
    box-sizing: border-box;
  }
  .room .shuto a:hover {
    border: 10px solid rgba(23, 130, 106, 0.47);
    box-sizing: border-box;
  }
  .room .shuto {
    width: calc(100%);
    height: calc(28vh);
    display: block;
    justify-content: center;
    align-items: center;
  }
  .room .tit {
    width: calc(100%);
    height: auto;
    font-size: calc(2.5rem);
    margin-top: calc(25px);
    margin-bottom: calc(30px);
    color: #00524f;
  }
  .room .tit span {
    width: calc(100%);
    font-size: calc(2rem);
    line-height: calc(1.5em);
    display: block;
  }
  .room .logo {
    display: block;
    width: calc(60vw);
    height: auto;
    padding-bottom: calc(1em);
    margin-right: auto;
    margin-left: auto;
    margin-top: calc(20px);
    margin-bottom: calc(20px);
  }
  .room .logo img {
    width: calc(60vw);
    height: auto;
    object-fit: contain;
  }
  .room .icon {
    width: calc(2em);
    margin-right: auto;
    margin-left: auto;
  }
  .chukai {
    width: calc(100vw);
    height: calc(auto);
    justify-content: center;
    align-items: center;
    padding-bottom: calc(60px);
  }
  .chukai .inner {
    width: calc(90vw);
    height: calc(auto);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .itandi_box {
    width: calc(100vw);
    height: calc(auto);
    justify-content: center;
    align-items: center;
    padding-bottom: calc(60px);
    background-color: #3B5DA9;
    background-image: -webkit-linear-gradient(318deg, rgba(59, 93, 169, 1.00) 0%, rgba(30, 61, 102, 1.00) 100%);
    background-image: -moz-linear-gradient(318deg, rgba(59, 93, 169, 1.00) 0%, rgba(30, 61, 102, 1.00) 100%);
    background-image: -o-linear-gradient(318deg, rgba(59, 93, 169, 1.00) 0%, rgba(30, 61, 102, 1.00) 100%);
    background-image: linear-gradient(132deg, rgba(59, 93, 169, 1.00) 0%, rgba(30, 61, 102, 1.00) 100%);
  }
  .itandi_box .title {
    width: calc(100%);
    padding-top: calc(40px);
    padding-bottom: calc(40px);
    font-size: calc(3rem);
    line-height: calc(100vw / 1.7778 / 10 * 1.3);
    letter-spacing: calc(0.0em);
    text-align: center;
    color: #fff;
  }
  .itandi_box .inner {
    width: calc(90vw);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #FE9A46;
  }
  .itandi_box a:hover {
    opacity: 0.8;
  }
  .itandi_box_left {}
  .itandi_box_left img {
    width: 100%;
  }
  .itandi_box_right {
    padding-top: calc(1em);
  }
  .itandi_box_right p:nth-child(1) {
    font-size: calc(2rem);
    line-height: calc(160%);
    font-weight: bold;
    letter-spacing: 0.3rem;
  }
  .itandi_box_right p:nth-child(2) {
    font-size: calc(1.6rem);
    letter-spacing: 0.2rem;
    line-height: calc(100%);
    padding-top: 3vw;
    padding-bottom: 3vw;
  }
  .itandi_box_right p:nth-child(3) {
    width: 60vw;
    margin: auto;
    padding-top: 3vw;
    padding-bottom: 5vw;
  }
  .itandi_box_right img {
    width: 100%;
  }
  .chukai .inner .box {
    width: calc(90vw);
    height: calc(41vh - 20px);
  }
  .chukai .inner .kinkichubu {
    width: calc(75vw);
    height: calc(60vw);
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255, 255, 255, 1.00);
    background-image: url("../images/itandi2.jpg");
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
  }
  .chukai .inner .squarelink {
    width: 100%;
    font-size: calc(1.5rem);
    margin-top: calc(0.5em);
    color: white;
    display: block;
  }
  .chukai .right {
    width: calc(100vw);
    background-image: url(../images/top_itandi.svg);
    background-size: cover;
    background-position: right bottom;
    padding-top: calc(35px);
  }
  .chukai .left {
    width: calc(100vw);
    background-color: rgba(101, 112, 136, 0.90);
    background-image: url(../images/itandi_bb_img.jpg);
    background-size: cover;
    background-position: right bottom;
    padding-top: calc(35px);
  }
  .chukai .shuto {
    width: calc(75vw);
    height: calc(60vw);
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(255, 255, 255, 1.00);
    background-image: url(../images/itandi.jpg);
    background-position: center center;
    background-size: cover;
  }
  .chukai .title {
    width: calc(100%);
    padding-top: calc(40px);
    padding-bottom: calc(40px);
    font-size: calc(3rem);
    line-height: calc(100vw / 1.7778 / 10 * 1.3);
    letter-spacing: calc(0.0em);
    text-align: center;
    color: #555;
  }
  .chukai p {
    width: calc(100%);
    padding-top: calc(1rem);
    font-size: calc(2.8rem);
    letter-spacing: 0.5rem;
    text-align: center;
    color: #FDFDFD;
  }
  .chukai a:hover {
    opacity: 1.0;
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }
  .old_data_box {
    display: grid;
    grid-template-columns: 1fr; /* 2つの等間隔の列 */
    gap: 1vw; /* 縦の間隔を設定 */
    width: calc(90vw);
    height: calc(auto);
    padding-top: calc(2em);
    padding-bottom: calc(1em);
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
    border-top: 1px solid rgba(244, 244, 244, 1.00);
    background-color: #2A6EB5;
    text-align: center;
  }
  .old1, .old2, .old3 {
    width: calc(90%);
    display: block;
    margin-bottom: calc(10px);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    padding-top: calc(0.5em);
    padding-bottom: calc(0.5em);
    padding-left: calc(1em);
    font-size: calc(1.4rem);
    letter-spacing: calc(1px);
    border: 1px solid rgba(211, 203, 203, 1.00);
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.70);
  }
  .sdgs {
    width: calc(100vw);
    height: calc(100vw / 1.7778 / 10 * 6);
    background-image: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background-image: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
  }
  .sdgs .left {
    width: calc(100vw / 10 * 5 / 2);
    height: calc(100vw / 1.7778 / 10 * 3);
    margin-top: calc(100vw / 1.7778 / 10 * 1.5);
    margin-left: calc(100vw / 10 * 1.5);
    display: block;
    float: left;
  }
  .sdgs .right {
    width: calc(100vw / 10 * 5);
    height: calc(100vw / 1.7778 / 10 * 3);
    margin-top: calc(100vw / 1.7778 / 10 * 1.5);
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
    background-color: #FFFFFF;
    display: block;
    float: right;
  }
  .sdgs .left img {
    width: 100%;
    object-fit: cover;
  }
  .sdgs .right .title {
    padding-top: calc(100vw / 1.7778 / 10 * 0.3);
    padding-left: calc(100vw / 10 * 1.5);
    font-size: calc(7.5rem);
    letter-spacing: calc(0.2rem);
    background: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .sdgs .right .bot {
    margin-left: calc(100vw / 10 * 1.4);
  }
  .sdgs .andmore {
    width: calc(100vw / 10 * 1.8);
    clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
    background-color: rgba(0, 82, 79, 1.00);
    display: flex;
    align-items: center;
    line-height: calc(4rem);
    font-size: calc(1.8rem);
    color: white;
    transition: all 0.0s;
  }
  .sdgs .andmore:hover path, .sdgs .andmore:hover {
    background-color: rgba(0, 5, 079, 1.00);
    fill: rgba(0, 5, 079, 1.00);
    transition: all 0.3s;
  }
  .recruit {
    position: relative;
    width: calc(100vw);
    height: calc(100vh);
    background-image: url(../images/recruit_image.jpg);
    background-position: 53% center;
    background-size: cover;
  }
  .recruit .left {
    position: absolute;
    width: calc(100vw /2);
    height: calc(80vh);
    top: calc(10%);
    left: calc(0%);
    clip-path: polygon(0 0, 100% 0%, 80% 100%, 0 100%);
    background-color: #FFFFFF;
    display: block;
    z-index: 1;
  }
  .recruit .right {
    position: absolute;
    width: calc(100vw);
    height: calc(100vh);
    display: block;
    float: right;
  }
  .recruit .right img {
    position: absolute;
    width: 100%;
    bottom: calc(-5px);
    right: calc(0px);
    object-fit: cover;
  }
  .recruit .title {
    position: absolute;
    top: 30%;
    left: -35%;
    width: auto;
    height: auto;
    font-size: calc(8rem);
    letter-spacing: calc(0.2rem);
    line-height: 100%;
    transform: rotate(90deg);
    background: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 5;
    text-align: left;
  }
  .recruit .bot {
    position: absolute;
    top: 65%;
    left: -12%;
    margin-left: calc(100vw / 10 * 1.5);
  }
  .recruit .andmore {
    width: calc(60vw);
    clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
    background-color: rgba(0, 82, 79, 1.00);
    display: flex;
    align-items: center;
    line-height: calc(4rem);
    font-size: calc(1.7rem);
    color: white;
    transition: all 0.0s;
    z-index: 4;
  }
  .recruit .andmore:hover path, .recruit .andmore:hover {
    background-color: rgba(0, 5, 079, 1.00);
    fill: rgba(0, 5, 079, 1.00);
    transition: all 0.3s;
  }
  .TCG {
    width: calc(100vw);
    height: auto;
    margin-top: calc(100vw / 1.7778 / 10 / 2);
    /*margin-bottom: calc(100vw / 1.7778 / 10 / 2);*/
    background-color: rgba(0, 82, 79, 1.00);
  }
  .TCG .left {
    padding-top: 20px;
    width: calc(100vw);
    height: calc(50vw);
    display: block;
  }
  .TCG .left img {
    width: 100%;
    height: calc(50vw);
    object-fit: cover;
    display: block;
  }
  .TCG .right {
    width: calc(90vw);
    padding-bottom: calc(50px);
    color: #fff;
    display: block;
    margin-top: calc(20px);
    margin-left: calc(100vw / 10 * 0.5);
    margin-right: calc(100vw / 10 * 0.5);
  }
  .TCG .right .tcglogo {
    width: calc(85vw);
    margin-bottom: calc(2em);
  }
  .TCG .right .tcglogo img {
    width: calc(83vw);
    padding-bottom: calc(0.2em);
    margin: auto;
  }
  .TCG .right .title {
    font-size: calc(1.8rem);
    line-height: calc(1.68em);
    padding-bottom: calc(1em);
    letter-spacing: calc(-0.05em);
  }
  .TCG .right .copy {
    width: calc(98%);
    font-size: calc(1.5rem);
    line-height: calc(2em);
    letter-spacing: calc(0.0em);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: calc(2em);
    text-align: justify;
  }
  .TCG .right .tcg_link {
    width: calc(100%);
    font-size: calc(1.6rem);
    line-height: calc(2em);
    border-bottom: 1px solid rgba(255, 255, 255, 0.50);
    padding-bottom: calc(0.2em);
    color: #FFFFFF;
    display: block;
    text-align: left;
  }
  .TCG .right .tcg_link:hover {
    color: #DDFE6E;
    border-bottom: 1px solid #DDFE6E;
  }
  .inq {
    width: calc(100vw);
    height: calc(100vh);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .inqbox {
    width: calc(90vw);
    height: calc(90vh);
    background: -webkit-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -moz-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: -o-linear-gradient(0deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
    background: linear-gradient(90deg, rgba(47, 160, 202, 1.00) 0%, rgba(0, 98, 146, 1.00) 100%);
  }
  .inqbox .left {
    width: calc(90vw);
    height: calc(45vh);
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
  }
  .inqbox .right {
    width: calc(90vw);
    height: calc(45vh);
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
  }
  .inqbox .box {
    width: calc(70vw);
    height: calc(70vw);
    background-color: #F5F5F5;
    /**/ border-radius: 50%;
  }
  .inqbox .box:hover {
    opacity: 1.0;
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    -webkit-box-shadow: inset 0px 10px 16pt #869093;
    box-shadow: inset 0px 10px 16pt #869093;
  }
  .inqbox .img {
    margin-top: calc(20px);
    width: calc(25vw);
    height: calc(25vw);
    /**/ border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }
  .inqbox .img img {
    width: calc(25vw);
    height: calc(25vw);
    object-fit: contain;
  }
  .inqbox .txt {
    width: auto;
    font-size: calc(2.4rem);
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(0.5em);
    margin-bottom: calc(1em);
    text-align: center;
  }
  .inqbox .txt span {
    width: calc(100vw /10 *2.3);
    font-size: calc(1.6rem);
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .inqbox .svg {
    width: calc(2.6rem);
    height: calc(2.6rem);
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
  }
  .inqbox .svg img {
    width: calc(1.8em);
    height: calc(1.8em);
    object-fit: contain; /* */
  }
}

/* ============================== / movply--brandmovie start / ============================== */
/* 対象：ファーストビュー内の2026年ムービーカード。PCは18vw、コピーと重ならない左下へ配置。 */
a.movply--brandmovie { left: 2vw; right: auto; width: 18vw; min-width: 0; padding: .765vw; border: 0; border-radius: .585vw; box-sizing: border-box; background: #fff; color: #005c4b; font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; line-height: 1.4; text-align: center; box-shadow: 0 .25vw 1vw #0000001a; transition: translate .25s ease, box-shadow .25s ease; }
a.movply--brandmovie:hover { background: #fff; }
a.movply--brandmovie:focus-visible { outline: .2vw solid #d6c26f; outline-offset: .3vw; }
.movply__thumbnail { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.movply--brandmovie .movply__thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.movply__play { display: block; position: absolute; left: 43%; top: 72%; width: 14%; aspect-ratio: 1; border: .12vw solid #fff; border-radius: 50%; box-sizing: border-box; background: #d6c26f; transition: transform .25s ease, background-color .25s ease; }
.movply__play::before { content: ""; position: absolute; left: 38%; top: 27%; width: 36%; height: 46%; background: #005c4b; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.movply__label { display: block; margin-top: .54vw; font-size: .9vw; font-weight: 700; line-height: 1.5; letter-spacing: -.025em; white-space: nowrap; }
.movply__title { display: block; margin-top: .315vw; font-size: 1.215vw; font-weight: 700; line-height: 1.5; letter-spacing: -.025em; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  a.movply--brandmovie:hover { translate: 0 -.35vw; box-shadow: 0 .55vw 1.5vw #00000040; transition: translate .25s ease, box-shadow .25s ease; }
  a.movply--brandmovie:hover .movply__play { transform: scale(1.12); background: #ead588; }
}
@media (prefers-reduced-motion: reduce) {
  a.movply--brandmovie, a.movply--brandmovie:hover, .movply__play { transition: none; }
  a.movply--brandmovie:hover { translate: none; }
  a.movply--brandmovie:hover .movply__play { transform: none; }
}
/* ============================== / movply--brandmovie end / ============================== */

/* ============================== / top-bnr start / ============================== */
/* 対象：index.htmlのバナー列。画像比率の差で枠だけが伸び、下に白い余白が出るのを防ぐ。 */
.top-bnr__inner { align-items: start; }
/* ============================== / top-bnr end / ============================== */

/* ============================== / f-shintaku-banner start / ============================== */
/* 家族信託側の下余白を外し、次の空き家管理側の上余白1vwだけを共通の区切り帯とする。 */
.f-shintaku-banner { padding-bottom: 0; }
/* ============================== / f-shintaku-banner end / ============================== */

/* ============================== / brand-film start / ============================== */
.brand-film, .brand-film * { box-sizing: border-box; }
.brand-film {
  position: relative;
  display: grid;
  line-height: 1.2;
  grid-template-columns: 55% 45%;
  width: 100%;
  min-height: 56.25vw;
  color: #fff;
  background: #004637;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}
/* 家族信託と共通のNEW。セクション内のbox-sizing・書体だけ元の共通仕様へ戻す。 */
.brand-film > .new_mark { box-sizing: content-box; font-family: "Hiragino Kaku Gothic ProN", sans-serif; font-weight: 400; line-height: 2; }
.brand-film__copy { align-self: center; padding: 6.3vw 3.8vw 7vw 6.5vw; }
.brand-film__label { display: flex; align-items: center; gap: 1vw; margin: 0 0 2.8vw; color: #cfb65a; font-size: 1.42vw; font-weight: 500; letter-spacing: .035em; }
.brand-film__label::before { content: ""; width: 2.4vw; height: .12vw; background: currentColor; }
.brand-film__title { margin: 0; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 4.65vw; line-height: 1.4; font-weight: 400; letter-spacing: -.035em; }
.brand-film__intro { margin-top: 2.6vw; font-family: yu-gothic-pr6n, sans-serif; font-weight: 400; font-size: 1.33vw; line-height: 1.78; letter-spacing: -.02em; }
.brand-film__intro p { margin: 0; }
.brand-film__phrase { white-space: nowrap; }
.brand-film__actions { display: flex; gap: 2.2vw; align-items: center; margin-top: 4.3vw; }
.brand-film__wordmark { display: block; width: 16.2vw; height: auto; }
.brand-film__watch { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: space-between; gap: 1vw; padding: 1.35vw 1.8vw; border: .12vw solid #cfb65a; color: #cfb65a; font-family: "Hiragino Kaku Gothic ProN", sans-serif; font-size: 2rem; font-weight: 400; line-height: 1.5; text-decoration: none; transition: color .2s, background-color .2s; }
.brand-film__watch:hover { color: #004637; background: #cfb65a; }
/* 文字の矢印を使わず、枠・テキストと同じ上下中心に線と矢尻を描く。 */
.brand-film__watch span { display: block; position: relative; flex: 0 0 1.8em; width: 1.8em; height: .75em; }
.brand-film__watch span::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .08em; background: currentColor; transform: translateY(-50%); }
.brand-film__watch span::after { content: ""; position: absolute; right: 0; top: 50%; width: .45em; height: .45em; border-top: .08em solid currentColor; border-right: .08em solid currentColor; transform: translateY(-50%) rotate(45deg); }
.brand-film__watch:focus-visible { outline: .2vw solid #fff; outline-offset: .35vw; }
.brand-film__visual { position: relative; min-width: 0; min-height: 56.25vw; overflow: hidden; }
.brand-film__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: .25vw; position: absolute; inset: 0; overflow: hidden; }
.brand-film__scene { position: absolute; inset: 0; display: grid; grid-template-columns: inherit; grid-template-rows: inherit; gap: inherit; opacity: 1; filter: blur(0); transition: opacity .9s ease, filter .9s ease; }
.brand-film__scene--incoming { opacity: 0; filter: blur(.6vw); }
.brand-film__scene--outgoing { opacity: 0; filter: blur(.6vw); pointer-events: none; }
.brand-film__tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #123f35; isolation: isolate; }
.brand-film__tile[hidden] { display: none; }
.brand-film__photo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.brand-film__tile--wide .brand-film__photo { object-position: 50% var(--wide-y, 30%); }
.brand-film__tile--tall .brand-film__photo { object-position: 50% 36%; }
.brand-film__noscript { padding: 2vw; font-size: 1vw; }
@media (prefers-reduced-motion: reduce) {
  .brand-film__scene, .brand-film__photo, .brand-film__watch { transition: none; }
}
/* ============================== / brand-film end / ============================== */

@media screen and (max-width: 767px) {
/* ============================== / movply--brandmovie start / ============================== */
a.movply--brandmovie { left: 2%; right: auto; bottom: 2%; width: 45vw; padding: 1.9125vw; border-radius: 1.4625vw; }
.movply__play { border-width: .3vw; }
.movply__label { margin-top: 1.35vw; font-size: 2.25vw; }
.movply__title { margin-top: .7875vw; font-size: 3.0375vw; }
/* ============================== / movply--brandmovie end / ============================== */

/* ============================== / brand-film start / ============================== */
.brand-film { display: block; min-height: 0; }
.brand-film__copy { padding: 12.309vw 6.1545vw 10.6678vw; }
.brand-film__label { margin-bottom: 6.1545vw; gap: 2.66695vw; font-size: 3.20034vw; letter-spacing: 0; }
.brand-film__label::before { width: 5.7442vw; height: 0.32824vw; }
.brand-film__title { font-size: 8.73939vw; line-height: 1.5; letter-spacing: -.05em; }
/* 既存SPの通常本文1.6rem・共通リンクボタン1.8remに揃える。 */
.brand-film__intro { margin-top: 6.35965vw; font-size: 1.6rem; line-height: 1.95; letter-spacing: 0; }
.brand-film__intro br { display: none; }
.brand-film__actions { gap: 4.103vw; margin-top: 8.206vw; }
.brand-film__wordmark { width: 34.0549vw; }
.brand-film__watch { gap: 2.0515vw; padding: 3.48755vw 2.66695vw; font-size: 1.8rem; border-width: 0.32824vw; }
.brand-film__visual { min-height: 0; height: 118.987vw; }
.brand-film__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 0.61545vw; }
.brand-film__scene--incoming, .brand-film__scene--outgoing { filter: blur(1.8vw); }
/* ============================== / brand-film end / ============================== */

}

/* ============================== / news-scroll start / ============================== */
/* index.htmlのNEWS専用。10件の実際の高さはnews-scroll.jsで再計算する。 */
.topics .news_sps.news-scroll {
  position: relative;
  width: 65vw;
  max-height: 51.8rem;
  padding-right: 1rem;
  box-sizing: content-box;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #72aca7 rgba(255, 255, 255, .25);
  -webkit-overflow-scrolling: touch;
}
.topics .news-scroll > .sps { width: 100%; box-sizing: border-box; }
/* 内部スクロールで未表示記事が透明なまま残らないよう、記事の登場移動だけ解除。 */
.topics .news-scroll > .sps.mov-left { opacity: 1; transform: none; }
.topics .news-scroll:focus-visible { outline: .2rem solid #fff; outline-offset: .3rem; }
.topics .news-scroll::-webkit-scrollbar { width: .8rem; }
.topics .news-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, .25); }
.topics .news-scroll::-webkit-scrollbar-thumb { background: #72aca7; border-radius: 1rem; }
/* ============================== / news-scroll end / ============================== */

@media screen and (max-width: 480px) {
/* ============================== / news-scroll start / ============================== */
/* 既存NEWSのSP境界480pxに合わせ、カードの左右余白を保つ。 */
.topics .news_sps.news-scroll { width: 100%; max-height: 100rem; padding-right: 0; box-sizing: border-box; }
.topics .news-scroll > .sps { width: 90vw; }
/* ============================== / news-scroll end / ============================== */

}

/* ============================== / group-tvcm start / ============================== */
/* index.htmlのNEWS上部のみ。記事スクロール枠の外に置き、記事列と左端・幅を揃える。 */
.topics .group-tvcm {
  width: 65vw;
  margin: 0 0 3rem 20vw;
  box-sizing: border-box;
}
.topics .group-tvcm__link {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 2.4rem;
  border: .15rem solid rgba(255, 255, 255, .65);
  box-sizing: border-box;
  background: #fff;
  color: #006d62;
  transition: background-color .25s, box-shadow .25s;
}
.topics .group-tvcm__image {
  display: block;
  width: 31.5vw;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}
.topics .group-tvcm__copy { display: block; flex: 1; min-width: 0; }
.topics .group-tvcm__title { display: block; font-size: 2.8rem; font-weight: 500; line-height: 1.6; }
.topics .group-tvcm__label { display: block; margin-top: .4rem; font-size: 1.8rem; line-height: 1.7; }
.topics .group-tvcm__action { display: inline-flex; align-items: center; gap: 1.5rem; margin-top: .8rem; font-size: 1.8rem; line-height: 1.7; }
.topics .group-tvcm__arrow { position: relative; display: block; width: 3rem; height: .15rem; background: currentColor; transition: transform .25s; }
.topics .group-tvcm__arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: .85rem; height: .85rem; border-top: .15rem solid currentColor; border-right: .15rem solid currentColor; transform: translateY(-50%) rotate(45deg); }
.topics .group-tvcm__link:hover { opacity: 1; background: #eff8f6; box-shadow: 0 .5rem 1.8rem rgba(0, 35, 58, .2); }
.topics .group-tvcm__link:hover .group-tvcm__arrow { transform: translateX(.5rem); }
.topics .group-tvcm__link:focus-visible { outline: .3rem solid #dec56f; outline-offset: .4rem; }
@media (prefers-reduced-motion: reduce) {
  .topics .group-tvcm__link, .topics .group-tvcm__arrow { transition: none; }
}
/* ============================== / group-tvcm end / ============================== */

@media screen and (max-width: 480px) {
/* ============================== / group-tvcm start / ============================== */
/* NEWSの既存SP境界に合わせる。画像の可読性を保つため、SPだけ縦積みにする。 */
.topics .group-tvcm { width: 90vw; margin: 0 0 3rem 2rem; }
.topics .group-tvcm__link { flex-direction: column; align-items: stretch; gap: 1.5rem; padding: 1.6rem; }
.topics .group-tvcm__image { width: 100%; }
.topics .group-tvcm__title { font-size: 2rem; }
.topics .group-tvcm__label { font-size: 1.4rem; margin-top: .3rem; }
.topics .group-tvcm__action { font-size: 1.6rem; margin-top: .6rem; }
/* ============================== / group-tvcm end / ============================== */

}

@media screen and (max-width: 480px) {
/* ============================== / home-layout start / ============================== */
/* index.html専用。480px以下に適用し、PC・他ページのレイアウトは変更しない。 */

/* ============================== / topmovie start / ============================== */
/* 動画だけは表示可能な画面高に追従。旧ブラウザは既存JSの--vhを利用する。 */
.home-layout #topmovie {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100dvh;
}
.home-layout #video-areaSP { position: absolute; inset: 0; overflow: hidden; }
.home-layout #videoSP { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.home-layout .topcopy {
  top: max(15%, calc(80px + 1.5rem));
  font-size: min(3em, calc(var(--vh, 1vh) * 3.8));
  font-size: min(3em, 3.8dvh);
}
.home-layout a.movply--brandmovie { bottom: calc(2% + env(safe-area-inset-bottom, 0px)); }
/* ============================== / topmovie end / ============================== */

/* ============================== / resident_container start / ============================== */
.home-layout .resident_container { height: auto; padding: 48vw 0 6rem; }
.home-layout .resident_box { height: auto; padding-bottom: 3rem; }
.home-layout .resident_image { grid-template-columns: 1fr; row-gap: 1rem; }
/* ============================== / resident_container end / ============================== */

/* ============================== / room start / ============================== */
.home-layout .room { height: auto; padding: 4rem 0; }
.home-layout .room .title { padding-top: 0; }
.home-layout .room .kinkichubu,
.home-layout .room .shuto { height: auto; }
.home-layout .room a { height: auto; padding: 2.5rem 1rem; }
.home-layout .room .tit { margin-top: 0; margin-bottom: 2rem; }
/* ============================== / room end / ============================== */

/* ============================== / copy_message start / ============================== */
.home-layout .copy_message {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 60vw;
  padding: 8vw 5vw;
  box-sizing: border-box;
}
.home-layout .copy_message .txt { position: relative; margin-top: 0; }
.home-layout .copy_message .simpleParallax { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-layout .copy_message img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ============================== / copy_message end / ============================== */

/* ============================== / service start / ============================== */
/* カード8枚の高さ＋間隔から全体高が決まる通常フローへ戻す。 */
.home-layout .servicebox { min-height: 0; }
.home-layout .service { padding: 6rem 0; }
.home-layout .service .inner { position: relative; top: auto; left: auto; margin: 0 auto; }
.home-layout .service .back { inset: 0; width: 100%; height: 100%; padding: 0; }
.home-layout .service .group:last-child a:last-child { margin-bottom: 0; }
/* ============================== / service end / ============================== */

/* ============================== / message start / ============================== */
/* 写真の下に縦見出し・氏名・ボタンを組み、画面高による重なりを防ぐ。 */
/* 青い背景内にボタン下3remを確保し、その外側の白い下余白6remも維持する。 */
.home-layout .message .inner {
  display: grid;
  grid-template-columns: 16vw 64vw;
  height: auto;
  padding: 6rem 10vw 9rem;
  box-sizing: border-box;
}
.home-layout .message .back { top: 6rem; right: 5vw; bottom: 6rem; width: 90vw; height: auto; }
.home-layout .message .image { position: relative; top: auto; left: auto; grid-column: 1 / -1; width: 90vw; margin-left: -5vw; line-height: 0; }
.home-layout .message .image img { position: relative; width: 100%; height: auto; }
.home-layout .message .title {
  position: relative;
  top: auto;
  left: auto;
  grid-column: 1;
  grid-row: 2 / 4;
  align-self: center;
  justify-self: center;
  width: auto;
  margin-top: 2.5rem;
}
.home-layout .message .name { position: relative; top: auto; left: auto; grid-column: 2; width: 100%; margin-top: 2.5rem; white-space: nowrap; }
.home-layout .message .name span { display: block; }
.home-layout .message .andmore { position: relative; top: auto; left: auto; grid-column: 2; width: 100%; margin-top: 2rem; }
/* ============================== / message end / ============================== */

/* ============================== / topicsbox start / ============================== */
/* DOMを複製せず、SPのみ NEWS見出し→TVCM→記事一覧の順にする。 */
.home-layout .topicsbox { display: flex; flex-direction: column; }
.home-layout .topicsbox > .title { order: 0; float: none; }
.home-layout .topicsbox > .group-tvcm { order: 1; }
.home-layout .topicsbox > .news-scroll { order: 2; }
/* ============================== / topicsbox end / ============================== */

/* ============================== / recruit start / ============================== */
/* 写真と回転見出しの比率を幅基準で保ち、端末の縦長さに依存させない。 */
.home-layout .recruit { height: 180vw; }
.home-layout .recruit .right { height: 100%; }
/* ============================== / recruit end / ============================== */

/* ============================== / inq start / ============================== */
.home-layout .inq { height: auto; padding: 4rem 0; }
.home-layout .inqbox { display: flex; flex-direction: column; align-items: center; gap: 3rem; height: auto; padding: 3rem 0; }
.home-layout .inqbox .left,
.home-layout .inqbox .right { width: 100%; height: auto; float: none; }
/* ============================== / inq end / ============================== */


/* ============================== / home-layout end / ============================== */

}