@charset "UTF-8";
/* CSS 初期化 */
/*//////////PCサイズ footer///////////*/
@media screen and (min-width: 481px) {
  #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: 26%;
  }
  a.propatymanage {
    left: 50%;
  }
  a.akiya-management{
    left: 2%;
  }
  .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) {
  #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; /* */
  }
}