@charset "utf-8";

.top-page-deco.deco1 {
    top: -20%;
    right: 0;
}
.top-page-deco.deco2 {
    top: -30%;
    right: -10%;
}

section {
    position: relative;
    overflow: visible;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#siteContent06 .heading,
#siteContent07 .heading {
    text-align: left;
}

@media screen and (max-width: 1024px) {
    .top-page-deco {
        display: none;
    }
}
@media screen and (max-width: 480px) {
    .heading .en {
        font-size: 2.9375rem;
    }
    .heading .jp {
        font-size: 0.875rem;
        font-weight: bold;
    }
}

/* main-image */
#MainImage {
    position: relative;
}

#MainImage .inner {
    display: flex;
    align-items: center;
    gap: calc(50vw / 19.2);
    max-width: clamp(1714px, calc(1714 * (100vw / 1920)), 3840px);
    padding-left: var(--paddings);
    margin-left: auto;
}
#MainImage .inner .text-box {
    width: 51%;
    letter-spacing: -0.075em;
    position: relative;
    z-index: 10;
}
#MainImage .inner .text-box .text01 {
    font-size: clamp(2.5rem, 1.786rem + 1.12vw, 3.125rem);
    font-weight: bold;
    letter-spacing: -0.05em;
    margin-bottom: 20px;
}
#MainImage .inner .text-box .text02 {
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 20px;
}
#MainImage .inner .text-box {
    font-size: 15px;
    line-height: 2;
}
#MainImage .inner .img {
    width: 49%;
}
#MainImage .inner img {
    width: 100%;
    object-fit: cover;
    object-position: top;
}

@media screen and (max-width: 1024px) {
    #MainImage .inner {
        flex-direction: column;
        align-items: center;
        padding: 110px var(--paddings) 0;
    }
    #MainImage .inner .text-box,
    #MainImage .inner .img {
        width: 100%;
    }
    #MainImage .inner .img {
        max-width: 564px;
    }
    #MainImage .inner .text-box .text01 {
        line-height: 1.6;
    }
}
@media screen and (max-width: 640px) {
    #MainImage .inner {
        padding-top: 70px;
    }
    #MainImage .inner .text-box .text01 {
        font-size: 30px;
    }
    #MainImage .inner .text-box .text02 {
        font-size: 19px;
    }
}
@media screen and (max-width: 480px) {
    #MainImage .inner .text-box .text01 {
        font-size: 20px;
    }
    #MainImage .inner .text-box .text02 {
        font-size: 17px;
    }
}

/* site-content 共通仕様 */

/*
.bg-container {
    position: relative;
}
.bg-container::before,
.bg-container::after {
    content: "";
    display: block;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}
*/

section .bg {
    display: block;
    position: absolute;
    z-index: -3;
}

.container01,.container02,.container03,.container04,
.container05,.container06,.container07 {
    position: relative;
    z-index: 10;
}

#siteContent02 .list li .img img,
#siteContent03 .list li .img img,
#siteContent05 .list li .img img {
    width: 100%;
    object-fit: cover;
    transition: .3s ease;
}

/* site-conten01 */
#siteContent01 {
    padding-bottom: 40px;
}

#siteContent01::before,
#siteContent01 .bg-container::after {
    content: "";
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#siteContent01::before {
    width: 100%;
    height: 160px;
    background-image: url(../../images/top/content01/bg-section-01-top.svg);
    position: absolute;
    top: -142px;
    left: 0;
    z-index: 1;
}
#siteContent01 .bg-container::after {
    width: 100%;
    height: 120px;
    background-image: url(../../images/top/content01/bg-section-01-bottom.svg);
    position: relative;
    z-index: -1;
    object-fit: cover;
    transform: translateY(-10px);
}
#siteContent01 .container01 {background-color: #F3F1EF;}

#siteContent01 .deco {
    z-index: 9;
}
#siteContent01 .deco1 {
   width: 90px;
   top: 5%;
   left: 3%;
}
#siteContent01 .deco2 {
   width: 43px;
   top: 0%;
   left: 12%;
}
#siteContent01 .deco3 {
   width: 378px;
   top: -25%;
   left: 20%;
}
#siteContent01 .deco4 {
   width: 166px;
   top: 2%;
   right: calc(166px / -2);
}
#siteContent01 .deco5 {
   width: 63px;
   bottom: clamp(-30%, calc(10% - (1920px - 100vw) * 0.03), 10%);
   left: 8%;
}
#siteContent01 .deco6 {
   width: 154px;
   bottom: clamp(-40%, calc(0% - (1920px - 100vw) * 0.04), 0%);
   left: 15%;
}
#siteContent01 .deco7 {
    top: -65%;
    left: -2.5%;
}
#siteContent01 .deco8 {
    bottom: 0;
    right: -2%;
}
#siteContent01 .deco9 {
   top: -42.5%;
    left: 0;
}

#siteContent01 .container01 {
    z-index: 1;
}

#siteContent01  .inContainer01 {
    max-width: clamp(1804px, calc(1804 * (100vw / 1920)), 3840px);
    display: grid;
    grid-template-areas: 'img title'
                         'img info';
    align-items: center;
    gap: 0 calc(240vw / 19.2);
    padding-right: var(--paddings);
}
#siteContent01  .inContainer01 > * {
    position: relative;
    z-index: 10;
}
#siteContent01 .title {
    display: flex;
    align-items: center;
    gap: calc(80vw / 19.2);
    margin-bottom: 50px;
    grid-area: title;
}
#siteContent01 .title .heading {
    display: flex;
    gap: calc(40vw / 19.2);
    align-items: center;
    margin: 0;
}
#siteContent01 .title .label {
    max-width: 500px;
    width: 100%;
    background-color: #333;
    border-radius: 18px;
}
#siteContent01 .title .label p {
    font-size: 23px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 1rem 0;
}

#siteContent01 .img {
    grid-area: img;
}

#siteContent01 .info {
    grid-area: info;
}
#siteContent01 .info .desc {
    margin-bottom: 30px;
}
#siteContent01 .info .desc .text01 {
    font-size: 27px;
    font-weight: bold;
    margin-bottom: 30px;
}
#siteContent01 .info .desc .text02 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 60px;
}
#siteContent01 .info .desc .text03 {
    font-size: 13px;
    font-weight: 500;
}
#siteContent01 .info .logo-group ul {
    display: flex;
    align-items: center;
    gap: calc(80vw / 19.2);
}

#siteContent01 .sp-content {
    display: none;
}

@media screen and (max-width: 1750px) {
    #siteContent01 .title {
        flex-direction: column;
    }
}
@media screen and (max-width: 1024px) {
    #siteContent01 {
        padding-bottom: 120px;
    }
    #siteContent01 .deco1 {
        width: clamp(31px, calc(62px + (100vw - 768px) * 0.1), 62px);
        top:clamp(17%, calc(17% + (17% * (100vw - 378px) / 390px)), 30%);
        left: clamp(10%, calc(20% - (100vw - 768px) * 0.01), 20%);
    }
    #siteContent01 .deco2 {
        width: clamp(45px, calc(90px + (100vw - 768px) * 0.1), 90px);
        top: clamp(-14%, calc(-7% - (100vw - 768px) * 0.01), -7%);
        left: 0;
    }
    #siteContent01 .deco3 {
        width: clamp(139px, calc(378px + (100vw - 768px) * 0.3), 378px);
        top: clamp(-30%, calc(-15% - (100vw - 768px) * 0.01), -15%);
        left: inherit;
        right: clamp(-50%, calc(-25% - (100vw - 768px) * 0.01), -25%);
    }
    #siteContent01 .deco4 {
        width: clamp(83px, calc(166px + (100vw - 768px) * 0.1), 166px);
        top: clamp(35%, calc(35% + (35% * (100vw - 378px) / 390px)), 47%);
        bottom: inherit;
        left: clamp(-25%, calc(-15% - ((768px - 100vw) * 0.2)), -15%);
    }
    #siteContent01 .deco5 {
        display: none;
    }
    #siteContent01 .deco6 {
        width: clamp(77px, calc(154px + (100vw - 768px) * 0.1), 154px);
        top: 0;
        bottom: inherit;
        left: inherit;
        right: clamp(-10%, calc(-5% - ((768px - 100vw) * 0.1)), -5%);
    }
    #siteContent01 .deco7 {
        top: -50%;
        left: clamp(-40%, calc(-20% - ((768px - 100vw) * 0.2)), -20%);
    }
    #siteContent01 .deco8 {
        right: clamp(-40%, calc(-20% - ((768px - 100vw) * 0.2)), -20%);
    }
    
    #siteContent01 .inContainer01 {
        grid-template-areas: 'img'
                             'title'
                             'info';
        padding-left: var(--paddings);
    }
    #siteContent01 .container01 .info {
        display: none;
    }
    #siteContent01 .title {
        display: block;
        margin: 0;
    }
    #siteContent01 .title .heading {
        margin-bottom: 30px;
    }
    #siteContent01 .title .label {
        margin: 0 auto;
    }
    #siteContent01 .img {
        margin: 0 auto 30px 0;
    }
    
    #siteContent01 .sp-content {
        display: block;
        position: relative;
        z-index:10;
        margin-top: 15px;
    }
    #siteContent01 .sp-content .info {
        padding-inline: var(--paddings);
    }
}
@media screen and (max-width: 992px) {
    #siteContent01 .info .desc .text01 {
        font-size: 23px;
    }
    #siteContent01 .info .desc .text02 {
        font-size: 16px;
    }
    #siteContent01 .title .label p {
        font-size: 19px;
    }
}

/* site-coten02 & site-content03, custom-post */
#siteContent02 .container02,
#siteContent03 .container03 {
    max-width: clamp(1494px, calc(1494 * (100vw / 1920)), 3840px);
    padding-inline: var(--paddings);
    margin: 0 auto;
}
#siteContent02 .button,
#siteContent03 .button {
    max-width: 524px;
    margin: 0 auto;
}
#siteContent02 .button a,
#siteContent03 .button a {
    display: block;
    font-size: 27px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    border: 3px solid;
    border-radius: 1rem;
    padding: 2rem 0;
    transition: .3s;
}
#siteContent02 .button a {
    border-color: #8BC145;
    background-color: #8BC145;
}
#siteContent03 .button a {
    border-color: #1C9A77;
    background-color: #1C9A77;
}
#siteContent02 .button a:hover {
    color: #8BC145;
    background-color: #fff;
}
#siteContent03 .button a:hover {
    color: #1C9A77;
    background-color: #fff;
}

@media screen and (max-width: 640px) {
    #siteContent02 .button,
    #siteContent03 .button {
        max-width: 500px;
    }
}
@media screen and (max-width: 480px) {
    #siteContent02 .button a,
    #siteContent03 .button a {
        font-size: 23px;
        padding-block: 1.5rem;
    }
}

.works-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 60px 30px;
    margin-bottom: 40px;
}

.works-list .works-item .thumbnail {
    aspect-ratio: 350 / 220;
    border: 1px solid #eee;
    overflow: hidden;
    margin-bottom: 16px;
}
.works-list .works-item .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s ease;
}
.works-list .works-item .no--thumbnail {
    background-color: #fff;
    display: grid;
    justify-items: center;
    align-items: center;
    padding: 20px;
}
.works-list .works-item .no--thumbnail img {
    width: 50%;
    height: auto;
    object-fit: contain;
}

.works-list .works-item .title {
    font-size: 14px;
    font-weight: bold;
    margin-block: 10px 5px;
}
.works-list .works-item .url {
    font-size: 12px;
    margin-bottom: 10px;
}
.works-list .works-item a:hover .thumbnail img {
    transform: scale(1.1);
}
.work_type-tag {
    color: #000;
    font-size: 13px;
}

.works-viewport {
    --left-gap: 32px;
    --peek: 32px;
    
    over-flow: clip;
    overflow: hidden;
    padding-right: var(--peek);
    position: relative;
}
.works-slider {
    display: none;
    overflow: visible;
    gap: 0;
    margin-right: calc(var(--peek) * -1)
}
.works-slider .works-list {
    display: flex;
    gap: 0;
}

.works-slider .works-list .swiper-slide {
    flex-shrink: 0;
}
.works-slider .works-list .works-item {
    max-width: 100%;
    width: 100%;
}
.works-slider .button {
    padding-inline: var(--paddings);
}
@media screen and (max-width:1024px) {
    .works-content {
        display: none;
    }
    .works-slider {
        display: block;
    }
    
    .works-list .works-item .title {
        font-size: 19px;
    }
}
@media screen and (max-width:640px) {
    .works-viewport {
        --left-gap: 20px;
        --peek: 20px;
    }
    .works-list .works-item .title {
        font-size: 16px;
    }
    .works-list .work_type-tag {
        font-size: 10px;
    }
}
/* site-content03 */
#siteContent03 {
    padding-block: calc(200px + (100 - 50) * ((100vw - 768px) / (1920 - 768))) calc(100px + (200 - 100) * ((100vw - 768px) / (1920 - 768)));
    position: relative;
}
#siteContent03::before {
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-image: url(../../images/top/bg-section-01.svg);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    z-index: -3;
    animation: 
      bg-breath-scale 8s ease-in-out infinite,
      bg-breath-opacity 8s ease-in-out infinite;
}
.bg {
    max-width: 1896px;
    width: 100vw;
    height: auto;
    top: -25%;
    left: 0;
}
#siteContent03 .bg img {
    width: 100%;
    height: auto;
}

#siteContent03 .deco1 {
    top: 7.5%;
    left: -10%;
}
#siteContent03 .deco2 {
    top: -20%;
    left: -12.5%;
}
#siteContent03 .deco3 {
    width: 63px;
    top: 0;
    right: 10%;
}
#siteContent03 .deco4 {
    width: 154px;
    bottom: -25%;
    left: 10%;
}

#siteContent03 .works-list {
    margin-bottom: 160px;
}

@media screen and (max-width: 1024px) {
    #siteContent03 .deco1 {
        top: 30%;
        left: clamp(-80%, calc(-40% - ((768px - 100vw) * 0.4)), -40%);
    }
    #siteContent03 .deco2 {
        top: -25%;
        left: clamp(-120%, calc(-60% - ((768px - 100vw) * 0.6)), -60%); 
    }
    #siteContent03 .deco3 {
        top: 10%;
    }
    #siteContent03 .deco4 {
        display: none;
    }
    
    #siteContent03 .works-list {
        margin-bottom: 40px;
    }
}
@media screen and (max-width: 640px) {
    #siteContent03 {
        padding-block: 200px;
    }
    #siteContent03::before {
        top: 10%;
    }
}
.bg-anime {
    /* 呼吸（微小なスケール＆不透明度） */
  --bg-breath-scale: 1.03; 
  --bg-breath-opacity: 0.96;
  --bg-breath-duration: 8s; 

  --bg-shift-px: 6px;           
  --bg-shift-percent: 4%;
  --bg-shift-duration: 9s;
}
.bg-breath {
  animation:
    bg-breath-scale var(--bg-breath-duration) ease-in-out infinite,
    bg-breath-opacity var(--bg-breath-duration) ease-in-out infinite;
    transform-origin: center;
}

/* スケール呼吸（要素全体。<img> でも背景ボックスでも効く） */
@keyframes bg-breath-scale {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(var(--bg-breath-scale)); }
}

/* 不透明度呼吸（要素全体。<img> でも背景ボックスでも効く） */
@keyframes bg-breath-opacity {
  0%, 100% { opacity: 1; }
  50%      { opacity: var(--bg-breath-opacity); }
}

/* 上下揺れ（<img> 用：transform で要素を上下に。レイアウトには影響しません） */
@keyframes bg-shift-y-img {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(var(--bg-shift-px)) scale(var(--bg-breath-scale)); }
}


/* 上下揺れ（background-image 用：背景画像の位置だけ上下に） */
@keyframes bg-shift-y-bg {
  0%, 100% { background-position: left 50% center; }
  50%      { background-position: left 52% center var(--bg-shift-percent); }
}


/* 低モーション環境に配慮：すべてのアニメを停止 */
@media (prefers-reduced-motion: reduce) {
  .bg-breath { animation: none !important; }
}

/* site-content04 */
#siteContent04 {
    padding-bottom: 160px;
}

#siteContent04 .container04 .contentItem01 {
    padding-block: calc(50px + (200 - 50) * ((100vw - 768px) / (1920 - 768))) calc(100px + (400 - 100) * ((100vw - 768px) / (1920 - 768)));
    margin-bottom: var(--paddings);
    position: relative;
    aspect-ratio: 67 / 75;
}
#siteContent04 .container04 .contentItem01::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../../images/top/content04/bg-section.svg);
    background-repeat: no-repeat;
    background-position: left 50% center;
    background-size: cover;
    position: absolute;
    top: -5%;
    left: 0;
    z-index: -1;
    animation: 
      bg-breath-scale 8s ease-in-out infinite,
      bg-breath-opacity 8s ease-in-out infinite;
}
#siteContent04 .deco {
    z-index: 1;
}
#siteContent04 .deco1 {
    top: -5%;
    right: -5%;
}
#siteContent04 .deco2 {
    width: 43px;
    top: 50%;
    left: 10%;
    transform: translateY(-10%);
}
#siteContent04 .deco3 {
    width: 90px;
    top: 60%;
    left: calc(90px / -2);
}
#siteContent04 .deco4 {
    max-width: clamp(90%, calc(100% - (1920px - 100vw) * 0.04), 100%);
    bottom: 10%;
    right: clamp(-10%, calc(-2% - (1920px - 100vw) * 0.05), -2%);
    opacity: 0.18;
}
#siteContent04 .contentItem01 .list {
    display: flex;
    flex-direction: column;
    gap: 140px;
    position: relative;
    z-index: 2;
}
#siteContent04 .contentItem01 .list .item {
    max-width: clamp(1504px, calc(1504 * (100vw / 1920)), 3840px);
    padding-inline: var(--paddings);
    margin-inline-start: calc((100vw - clamp(1504px, calc(1480 * (100vw / 1920)), 3840px)) * 0.18443);
    margin-inline-end: calc((100vw - clamp(1504px, calc(1480 * (100vw / 1920)), 3840px)) * 0.81557);
    position: relative;
}
#siteContent04 .contentItem01 .list .item.reverse {
    margin-inline-start: calc((100vw - 1504px) * 0.81557);
    margin-inline-end: calc((100vw - 1504px) * 0.18443);
}

#siteContent04 .contentItem01 .list .item .inner {
    display: grid;
    grid-template-areas: 'num info img';
}
#siteContent04 .contentItem01 .list .item.reverse .inner {
    grid-template-areas: 'img info num';
}

#siteContent04 .contentItem01 .list .item .num {
    grid-area: num;
    margin-inline: 0 60px;
    font-size: 250px;
    color: #EEEEEE;
    font-family: 'Century Gothic', sans-serif;
    line-height: 1.2;
}
#siteContent04 .contentItem01 .list .item02 .num {
    opacity: 0.2;
}
#siteContent04 .contentItem01 .list .item.reverse .num {
    margin-inline: 60px 0;
}
#siteContent04 .contentItem01 .list .item .img {
    border-radius: 20px;
    aspect-ratio: 555 / 345;
    overflow: hidden;
    grid-area: img;
    margin-inline: 50px 0;
}
#siteContent04 .contentItem01 .list .item.reverse .img {
    margin-inline: 0 50px;
    position: relative;
    z-index: 2;
}
#siteContent04 .contentItem01 .list .item .img img {
    width: 100%;
    object-fit: cover;
}
#siteContent04 .contentItem01 .item .info {
    grid-area: info;
    position: relative;
}
#siteContent04 .contentItem01 .item .info .title {
    display: flex;
    align-items: center;
    column-gap: 20px;
    position: relative;
    z-index: 2;
}
#siteContent04 .contentItem01 .item .info .title .num {
    position: absolute;
    right: 0;
    z-index: -1;
    display: none;
    margin: 0;
}
#siteContent04 .contentItem01 .item.reverse .info .title .num {
    right: unset;
    left: 0;
}
#siteContent04 .contentItem01 .item .info .title {
    display: flex;
    align-items: center;
}
#siteContent04 .contentItem01 .item .info .title .text-group {
    line-height: 1.2;
}
#siteContent04 .contentItem01 .item .info .title .text-group > * {
    color: #fff;
    font-weight: bold;
}
#siteContent04 .contentItem01 .item .info .title .text-group .text01 {
    font-size: 27px;
}
#siteContent04 .contentItem01 .item .info .title .text-group .text02 {
    font-size: 19px;
}
#siteContent04 .contentItem01 .item01 .info .title .text-group .text01 {
    color: #000;
}
#siteContent04 .contentItem01 .list .item .info .desc {
    font-size: 15px;
    margin-block: 40px;
    position: relative;
    z-index: 2;
}
#siteContent04 .contentItem01 .list .item02 .info .desc,
#siteContent04 .contentItem01 .list .item03 .info .desc {
    color: #fff;
}
#siteContent04 .contentItem01 .list .item .info .button {
    display: block;
    max-width: 227px;
    font-size: 17px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border: 2px solid #000;
    padding-block: 1rem;
    border-radius: 11px;
    transition: .25s;
}
#siteContent04 .contentItem01 .list .item.reverse .info .button {
    margin-left: auto;
}
#siteContent04 .contentItem01 .list .item .info .button:hover {
    color: #000;
    background-color: #fff;
}

#siteContent04 .container04 .contentItem02 {
    max-width: clamp(1684px, calc(1684 * (100vw / 1920)), 3840px);
    padding-inline: var(--paddings);
    margin: 0 auto;
}
#siteContent04 .contentItem02 .comment {
    text-align: center;
    margin-bottom: 50px;
}
#siteContent04 .contentItem02 .comment .text01 {
    font-size: 31px;
    font-weight: bold;
}
#siteContent04 .contentItem02 .comment .text02 {
    font-size: 15px;
}
#siteContent04 .contentItem02 .companies {
    display: grid;
    justify-items: center;
    grid-auto-rows: 1fr;
    gap: 1rem;
}
#siteContent04 .contentItem02 .companies .flex-block {
    display: flex;
    justify-content: center;
    gap: 3rem;
}
#siteContent04 .contentItem02 .companies .company-banner  {
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
#siteContent04 .contentItem02 .companies .company-banner img {
    width: 100%;
    object-fit: contain;
}
@media screen and (max-width:1480px) {
    #siteContent04 .contentItem01 .list .item,
    #siteContent04 .contentItem01 .list .item.reverse {
        margin: 0;
    }
}
@media screen and (max-width: 1024px) {
    #siteContent04 .container04 .contentItem01 {
        padding-block: 50px 200px;
    }
    #siteContent04 .deco1,
    #siteContent04 .deco2,
    #siteContent04 .deco3 {
        display: none;
    }
    #siteContent04 .deco4 {
        max-width: 384px;
        bottom: 62%;
    }
    #siteContent04 .contentItem02 .companies .flex-block {
        width: 100%;
        justify-content: flex-start;
    }
    #siteContent04 .contentItem02 .companies .company-banner {
        width: calc(100% / 3);
    }
}
@media screen and (max-width: 992px) {
    #siteContent04 .contentItem02 .comment .text01 {
        font-size: 27px;
    }
    #siteContent04 .container04 .contentItem01::before {
        top: unset;
        background-position: right 45% center;
        transform: translateY(5%);
    }
    #siteContent04 .contentItem01 .list {
        align-items: center;
        gap: 100px;
        padding-inline: var(--paddings);
    }
    #siteContent04 .contentItem01 .list .item,
    #siteContent04 .contentItem01 .list .item.reverse {
        max-width: 750px;
        padding: 0;
    }
    #siteContent04 .contentItem01 .list .item .inner,
    #siteContent04 .contentItem01 .list .item.reverse .inner {
        grid-template-areas: 'info'
                             'img';
    }
    #siteContent04 .contentItem01 .list .item .num,
    #siteContent04 .contentItem01 .list .item.reverse .num {
        display: none;
    }
    #siteContent04 .contentItem01 .list .item03 .num {
        opacity: 0.2;
    }
    #siteContent04 .contentItem01 .list .item.reverse .title {
        justify-content: flex-end;
    }
    #siteContent04 .contentItem01 .item .info .title .num {
        display: block;
    }
    #siteContent04 .contentItem01 .list .item .info .button {
        margin: 0 auto 30px;
    }
    #siteContent04 .contentItem01 .list .item .img,
    #siteContent04 .contentItem01 .list .item.reverse .img {
        max-width: 555px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 640px) {
    /*
    #siteContent04 .contentItem01 .item .info .title .num,
    #siteContent04 .contentItem01 .item.reverse .info .title .num {
        right: 50%;
        font-size: 200px;
        transform: translateX(50%);
    }*/
    #siteContent04 .contentItem01 .item .info .title .num,
    #siteContent04 .contentItem01 .item.reverse .info .title .num {
        font-size: 150px;
    }
    #siteContent04 .contentItem01 .item .info .title .text-group .text01 {
        font-size: 23px;
    }
    #siteContent04 .contentItem01 .item .info .title .text-group .text02 {
        font-size: 17px;
    }
    
    #siteContent04 .contentItem02 .comment .text01 {
        font-size: 23px;
    }
    #siteContent04 .contentItem02 .companies .flex-block {
        gap: 1.5rem;
    }
    #siteContent04 .contentItem02 .companies .company-banner {
        width: calc(100% / 3);
    }
}
@media screen and (max-width: 480px) {
    #siteContent04 .contentItem02 .companies .company-banner {
        padding: 0.5rem;
    }
}

/* site-content05 */
#siteContent05 {
    padding-bottom: 160px;
}
#siteContent05 .deco1 {
    width: 113px;
    right: 5%;
    bottom: 0;
}
#siteContent05 .deco2 {
    left: -22.5%;
    bottom: 0;
}
#siteContent05 .container05 {
    max-width: clamp(1464px, calc(1464px * (100vw / 1920px)), 3840px);
    padding-inline: var(--paddings);
    margin: 0 auto;
}
#siteContent05 .list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
    gap: 56px 72px;
}
#siteContent05 .list li .img {
    border: 1px solid #ddd;
    border-radius: 17px;
    overflow: hidden;
    aspect-ratio: 290 / 160;
}
#siteContent05 .list li:first-child .img,
#siteContent05 .list li:nth-child(3) .img {
    display: grid;
    justify-items: center;
    align-items: center;
    padding: 20px;
}
#siteContent05 .list li:first-child .img img,
#siteContent05 .list li:nth-child(3) .img img {
    display: block;
    width: auto;
    object-fit: contain;
    margin: auto;
}
#siteContent05 .list li .title {
    font-size: 14px;
    font-weight: bold;
    margin-block: 10px 4px;
}
#siteContent05 .list li .desc {
    font-size: 13px;
}

#siteContent05 .list li a:hover img {
    transform: scale(1.1);
}

@media screen and (max-width: 1024px) {
    #siteContent05 .deco {
        display: none;
    }
}
@media screen and (max-width: 768px) {
    #siteContent05 .list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 640px) {
    #siteContent05 .list {
        gap: 28px 36px;
    }
    #siteContent05 .list li:first-child .img img,
    #siteContent05 .list li:nth-child(3) .img img {
        max-width: 75%;
    }
}
@media screen and (max-width: 480px) {
    #siteContent05 .list {
        gap: 14px 18px;
    }
}

/* site-content06 */
#siteContent06 {
    padding-block: 40px 200px;
    margin-bottom: 20px;
}
#siteContent06 .container06 {
    max-width: 1440px;
    padding-inline: 20px;
    margin: 0 auto;
}
#siteContent06 .deco1 {
    width: 166px;
    bottom: 10%;
    left: calc(166px / -2);
}
#siteContent06 .deco2 {
    width: 90px;
    right: 15%;
    bottom: 0;
}
#siteContent06 .deco3 {
    right: -20%;
    bottom: clamp(-15%, calc(-15% + (1920px - 100vw) * 0.15), 0%);
}

@media screen and (max-width: 1024px) {
    #siteContent06 .deco {
        display: none;
    }
}
@media screen and (max-width: 640px) {
    #siteContent06 {
        padding-block: 40px 100px;
        margin: 0;
    }
}


/*site-cotent07*/
#siteContent07 {
    padding-block: 80px;
    margin-bottom: 300px;
}
#siteContent07 .container07 {
    max-width: clamp(1684px, calc(1684 * (100vw / 1920)), 3840px);
    padding-left: var(--paddings);
    margin-left: auto;
}
#siteContent07 .inContainer07 {
    display: grid;
    grid-template-areas: 'head content'
                         'menu content';
    grid-template-rows: max-content 1fr;
    grid-template-columns: 1fr 5fr /*87.62376%*/;
    gap: 60px 80px;
}
#siteContent07 .heading {
    margin-bottom: 60px;
}

#siteContent07 .grid01 {
    grid-area: head;
}
#siteContent07 .grid02 {
    grid-area: menu;
}

#siteContent07 .button {
    display: inline-block;
    max-width: 123px;
    width: 100%;
    font-size: 17px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    background-color: #1D9A78;
    padding: 0.5rem 0;
    border: 2px solid #1D9A78;
    border-radius: 50px;
    transition: .25s;
}
#siteContent07 .button:hover {
    color: #1D9A78;
    background-color: #fff;
}

#siteContent07 .tab-menu {
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: right;
}
#siteContent07 .tab-menu li {
    pointer-events: none;
}
#siteContent07 .tab-menu li::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: #8BC145;
    border-radius: 100%;
    margin-left: 20px;
    opacity: 0;
    transform: translateX(10px);
    transition: .25s;
}
#siteContent07 .tab-menu li.selected::after,
#siteContent07 .tab-menu li:hover::after {
    opacity: 1;
    transform: translateX(0);
}

#siteContent07 .tab-menu li button {
    font-size: 17px;
    display: inline-block;
    pointer-events: auto;
}

#siteContent07 .grid03 {
    margin-left: 24.5px;
    grid-area: content;
}

#siteContent07 .tab-content {
    display: none;;
    background-color: #F2F2F2;
    border-radius: 24px 0 0 24px;
    padding: 30px 0 30px 60px;
}
#siteContent07 .tab-content.show {
    display: block;
}

#siteContent07 .tab-content .inner {
    max-width: 996px;
    margin-right: auto;
}
#siteContent07 .tab-content .news-list .news-item:first-child {
    border-top: none;
}
#siteContent07 .tab-content .news-item .data {
    margin-bottom: 10px;
}
#siteContent07 .tab-content .news-item .data time span {
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
}
#siteContent07 .tab-content .news-item a:hover .title {
    font-weight: bold;
    font-style: italic;
}

@media screen and (max-width:1024px) {
    #siteContent07 {
        margin-bottom: 300px;
    }
    #siteContent07.news {
        --type-size: 36px;
        --type-size2: 22px;
    }
    #siteContent07 .button {
        font-size: 22px;
    }
    #siteContent07 .inContainer07 {
        grid-template-areas: 'head'
                             'menu'
                             'content';
        grid-template-columns: auto;
        grid-template-rows: auto;
    }
    #siteContent07 .grid01 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: var(--paddings);
    }
    #siteContent07 .heading {
        margin: 0;
    }
    #siteContent07 .tab-menu {
        flex-direction: row;
        justify-content: center;
        padding-right: var(--paddings);
    }
    #siteContent07 .tab-menu li::after {
        display: block;
        margin: 0 auto;
        transform: translateX(0) translateY(10px);
    }
    #siteContent07 .grid03 {
        margin: 0;
    }
    #siteContent07 .tab-content {
        padding: 15px 0 15px 20px;
    }
}
@media screen and (max-width: 640px) {
    #siteContent07 {
        margin-bottom: 200px;
    }
    #siteContent07 .button {
        font-size: 18px;
    }
    #siteContent07 .tab-menu li button {
        font-size: 12px;
    }
}

/* 共通SP */
@media screen and (max-width: 1280px) {
    #MainImage .inner,
    #siteContent01 .inContainer01,
    #siteContent04 .container04 .contentItem02 {
        max-width: 100%;
    }
}