@charset "utf-8";
/* ====================================================================
-------------------------------header
==================================================================== */
header li a {
    font-size: clamp(1.4rem, 1.254rem + 0.388vw, 2rem);
    letter-spacing: 0.05em;
    margin-right: 6rem;
}
header p a {
    padding: 0 5rem;
}
header p {
    display: flex;
    align-items: center;
}
header div.flex {
    height: 10rem;
    justify-content: space-between;
}
header ul {
    align-items: center;
}
header .logo {
    margin-left: 6rem;
    display: flex;
    align-items: center;
}
/* ====================================================================
-------------------------------footer
==================================================================== */
.access .flex {
    justify-content: flex-end;
}
.access .flex div:first-child {
    margin-right: 15rem;
}
.access .flex div:first-child .ttl-02 {
    margin-bottom: 10rem;
}
.access iframe {
    height: 100%;
}
footer ul li:not(:last-child) {
    margin-right: 5.5rem;
}
footer div.flex {
    height: 15rem;
    justify-content: flex-end;
}
footer .bg-r {
    padding: 0 13rem;
    display: flex;
    align-items: center;
}
footer div.flex p {
    display: flex;
    align-items: center;
    margin-right: 17rem;
}
/* ====================================================================
-------------------------------TOP
==================================================================== */
/*mv*/
.mv {
    position: relative;
}
.mv-txt {
    position: absolute;
    left: 7rem;
    bottom: 18rem;
}
.mv-txt img {
    margin-bottom: 4rem;
}
.mv-txt img + p {
    margin-bottom: 3.5rem;
    letter-spacing: 0.3em;
    text-shadow: 0 0 4rem rgba(0, 0, 0, 0.4);
    font-size: clamp(1.4rem, 0.866rem + 1.424vw, 3.6rem);
}
.mv-txt img + p + p {
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-shadow: 0 0 4rem rgba(0, 0, 0, 0.4);
    font-size: clamp(1.2rem, 0.909rem + 0.777vw, 2.4rem);
}
/**/
.mv .top-area {
    /* padding-bottom: 87.1rem; */
    position: relative;
    width: 100%;
    /* height: 0; */
    color: #fff;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1922 / 877;
    padding: 0;
}
@keyframes anime {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
.mv .slider-image .bgImg {
    position: absolute;
    /*  z-index: -10;*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    -webkit-animation: anime 30s infinite;
    animation: anime 30s infinite;
}
.mv .slider-image .bgImg.src1 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    background: url("../img/mv01.webp");
    background-repeat: no-repeat;
    background-size: cover;
}
.mv .slider-image .bgImg.src2 {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    background: url("../img/mv02.webp");
    background-repeat: no-repeat;
    background-size: cover;
}
.mv .slider-image .bgImg.src3 {
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
    background: url("../img/mv03.webp");
    background-repeat: no-repeat;
    background-size: cover;
}
.mv .slider-image .bgImg.src4 {
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
    background: url("../img/mv04.webp");
    background-repeat: no-repeat;
    background-size: cover;
}
.mv .slider-image .bgImg.src5 {
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
    background: url("../img/mv05.webp");
    background-repeat: no-repeat;
    background-size: cover;
}
/*sec01*/
.sec01 {
    position: relative;
    z-index: 10;
}
.sec01::before {
    content: "";
    background: #fff;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 92.8vw;
    z-index: -1;
}
.sec01 .img-ab {
    position: relative;
    left: -10.9vw;
    left: -17%;
}
.sec01 .img-ab img {
    height: 53vw;
    object-fit: cover;
}
.sec01 .txt {
    font-size: clamp(1.6rem, 1.382rem + 0.583vw, 2.5rem);
    line-height: 2;
}
/*sec02*/
.sec02 {
    width: 92.8vw;
}
.sec02 .img-ab {
    position: relative;
    right: -20vw;
}
.sec02 h3 {
    letter-spacing: 0.1em;
    font-size: clamp(2.2rem, 2.006rem + 0.518vw, 3rem);
    line-height: 2;
}
.sec02 h3 + p {
    letter-spacing: 0.1em;
    font-size: clamp(1.6rem, 1.382rem + 0.583vw, 2.5rem);
    line-height: 2;
}
.sec02 h3:nth-of-type(2) {
    margin-top: 10rem;
}
.sec02 .linkBT {
    margin-top: 12rem;
}
.sec02 .linkBT a {
    letter-spacing: 0.1em;
    text-decoration: underline;
    font-size: clamp(1.8rem, 1.63rem + 0.453vw, 2.5rem);
}
/*sec03*/
.sec03 {
    padding: 12rem 0 0;
    padding: clamp(4.5rem, 2.68rem + 4.854vw, 12rem) 0 0;
}
.sec03 .ttl-02 {
    margin-bottom: 12rem;
}
.sec03 h3 {
    letter-spacing: 0.1em;
    margin-bottom: 5rem;
    font-size: clamp(2rem, 1.757rem + 0.647vw, 3rem);
}
.sec03 h3 + p {
    font-size: 1.8rem;
    font-size: clamp(1.4rem, 1.303rem + 0.259vw, 1.8rem);
}
.sec03 .over2 .flexL {
    position: relative;
    margin-right: 26rem;
}
/* .sec03 .over2 .flexL::before {
   content: "";
   background: url("../img/sec04-2.webp") no-repeat center center/contain;
   position: absolute;
   width: 100rem;
   height: 56rem;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
} */
.machine__flex {
    position: relative;
}
.machine__flex::after {
    content: "";
    width: 10.8rem;
    height: 11.1rem;
    position: absolute;
    top: 0;
    right: 9vw;
}
.machine__flex--01::after {
    background: url("../img/one.webp") no-repeat center center/contain;
}
.machine__flex--03::after {
    background: url("../img/three.webp") no-repeat center center/contain;
}
.machine__flex--05::after {
    background: url("../img/five.webp") no-repeat center center/contain;
}
.machine::before {
    content: "";
    width: 100rem;
    height: 56rem;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    position: absolute;
}
.machine--01::before {
    background: url("../img/sec04-2.webp") no-repeat center center/contain;
}
.machine--03::before {
    background: url("../img/machine__03.webp") no-repeat center center/contain;
}
.machine--05::before {
    background: url("../img/machine__05.webp") no-repeat center center/contain;
}
.sec03 .over2 .flex {
    align-items: center;
}
.sec03 .over2 .flexR {
    position: relative;
}
.machine {
    position: relative;
}
/* .machine--01::after {
    content: "";
    background: url("../img/one.webp") no-repeat center center/contain;
    width: 10.8rem;
    height: 11.1rem;
    position: absolute;
    top: -16rem;
    right: 0;
} */
/* .sec03 .over2 .flexR::after {
   content: "";
   background: url("../img/one.webp")no-repeat center center/contain;
   width: 10.8rem;
   height: 11.1rem;
   position: absolute;
   top: -16rem;
   right: 0;
} */
.sec03 .over .flex {
    justify-content: flex-end;
    align-items: center;
}
.sec03 .over .flex .flexR {
    position: relative;
}
.sec03 .over .flex .flexR::after {
    content: "";
    background: url("../img/sec04-4.webp") no-repeat center center/contain;
    position: absolute;
    width: 57.9rem;
    height: 50.6rem;
    top: 50%;
    transform: translateY(-50%);
    left: -10rem;
}
.sec03 .over .flex .flexL {
    margin-right: 19rem;
    position: relative;
    width: 40%;
}
.sec03 .over .flex .flexL::after {
    content: "";
    position: absolute;
    background: url("../img/two.webp") no-repeat center center/contain;
    width: 13rem;
    height: 11.1rem;
    top: -16rem;
    left: 0;
}
/* add */
.machine__wrap {
    width: 92.8vw;
}
.machine__wrap--left {
    margin-right: auto;
}
.machine__wrap--right {
    margin-left: auto;
}
.machine__bg--right {
    text-align: right;
}
.machine__inner {
    position: relative;
}
.machine__cont {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    gap: 8.5rem;
    align-items: center;
    width: 100%;
}
.machine__cont--right {
    flex-direction: row-reverse;
}
.machine__cont::after {
    content: "";
    width: 30rem;
    height: 30rem;
    position: absolute;
    top: 0;
    right: 0;
}
.machine__cont--01::after {
    background: url("../img/one.webp") no-repeat center center/contain;
}
.machine__cont--02::after {
    background: url("../img/two.webp") no-repeat center center/contain;
}
.machine__cont--03::after {
    background: url("../img/three.webp") no-repeat center center/contain;
}
.machine__cont--04::after {
    background: url("../img/four.webp") no-repeat center center/contain;
}
.machine__cont--05::after {
    background: url("../img/five.webp") no-repeat center center/contain;
}
.machine__cont--06::after {
    background: url("../img/six.webp") no-repeat center center/contain;
}
.machine__cont--right::after {
    right: inherit;
    left: -6rem;
}
.machine__ttl {
    letter-spacing: 0.1em;
    margin-bottom: 5rem;
    font-size: clamp(2rem, 1.757rem + 0.647vw, 3rem);
}
.machine__text {
    font-size: 1.8rem;
    font-size: clamp(1.4rem, 1.303rem + 0.259vw, 1.8rem);
}
.machine__img {
    width: 100rem;
    height: 56rem;
    text-align: left;
}
.machine__img img {
    height: 100%;
    object-fit: cover;
}
.machine__summary {
    width: calc(100% - 100rem);
}

/*sec04*/
.sec04 .bg-w {
    padding: 5.5rem 7rem;
}
.sec04 .ttl-02 {
    margin-bottom: 6rem;
}
.sec04 ul {
    flex-wrap: wrap;
    gap: 4.5rem 4rem;
}
.sec04 ul li {
    width: calc((100% - 9rem) / 3);
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.sec04 ul li div {
    padding: 1rem 2rem 3rem 1rem;
}
.sec04 h3 {
    margin-bottom: 1.5rem;
    font-size: clamp(1.6rem, 1.406rem + 0.518vw, 2.4rem);
}
.sec04 h4 {
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #e6e6e6;
    font-weight: bold;
    position: relative;
    font-size: clamp(1.2rem, 1.151rem + 0.129vw, 1.4rem);
}
.sec04 h4::after {
    position: absolute;
    content: "";
    width: 5rem;
    height: 0.2rem;
    bottom: -0.1rem;
    left: 0;
    background-color: #e60012;
}
.sec04 h4 + p {
    line-height: 1;
    font-size: 1.6rem;
    font-size: clamp(1.2rem, 1.103rem + 0.259vw, 1.6rem);
}
/*sec05*/
.sec05 .bg-r {
    padding-top: clamp(4.5rem, 1.223rem + 8.738vw, 18rem);
}
.sec05 .flex-e {
    align-items: flex-end;
    margin-top: -12.3rem;
}
.sec05 .flex-e div:first-child {
    width: 39%;
}
.profile {
    padding: clamp(3rem, 0.816rem + 5.825vw, 12rem);
    width: 61%;
}
.profile dl {
    width: 78%;
}
.profile dl dd,
.profile dl dt {
    padding: 0 0 clamp(1rem, 0.393rem + 1.618vw, 3.5rem);
    margin-bottom: clamp(1rem, 0.393rem + 1.618vw, 3.5rem);
}
.profile dl dd {
    width: 44%;
    border-bottom: 2px solid #e60012;
}
.profile dl dt {
    width: 56%;
    border-bottom: 1px solid #e6e6e6;
    padding-left: 2rem;
}
.greeting {
    position: relative;
    z-index: 10;
    padding: 12rem 0 8rem;
}
/*.greeting::before {
   content: "";
   background: #e60012;
   height: 100%;
   position: absolute;
   left: -28%;
   top: 0;
   width: 88%;
   z-index: -1;
}*/
.greeting.left-fade::before {
    left: -28%;
    z-index: -1;
}
.greeting .flex {
    gap: 8rem;
    padding: clamp(3rem, 1.786rem + 3.236vw, 8rem);
}
.blue-fade,
.left-fade,
.red-fade {
    position: relative;
}
span {
    position: relative;
}
.blue-fade {
    background: blue;
}
.left-fade::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #e60012;
    transition: 0.5s;
}
.red-fade::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background: red;
    transition: 0.5s;
}
.fade::before {
    width: 100%;
}
.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}
.scroll_up.on {
    transform: translateY(0);
    opacity: 1;
}
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    transform: translateX(0);
}
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1;
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    transform: translateX(0);
}
/* ====================================================================
-------------------------------輝響
==================================================================== */
.kikyou .under-mv {
    height: 47.4rem;
}
.kikyou .under-sec01 {
    width: 92.8vw;
}
.kikyou .under-sec01 .img-ab {
    position: relative;
    right: -20vw;
}
.kikyou .under-sec01 h3 {
    font-size: 2.6rem;
    letter-spacing: 0.1em;
    line-height: 2;
    margin: 7.5rem 0 2rem;
}
.kikyou .under-sec01 h3 + p {
    font-size: 1.8rem;
    letter-spacing: 0.1em;
}
.kikyou .under-sec01 h3:nth-of-type(2) {
    margin-top: 10rem;
}
.kikyou .under-sec01 .left-fade::before {
    background: url("../img/bg-gray.webp") no-repeat center center/cover;
}
.kikyou .under-sec02 {
    position: relative;
    z-index: 10;
}
.kikyou .under-sec02::before {
    content: "";
    background: #fff;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 92.8vw;
    z-index: -1;
}
.kikyou .under-sec02 .img-ab {
    position: relative;
    left: -10.9vw;
}
.kikyou .under-sec02 .img-ab img {
    height: 1014px;
}
.kikyou .sec03 .over2 .flexR::after {
    content: "";
    background: url("../img/one.webp") no-repeat center center/contain;
    width: 10.8rem;
    height: 11.1rem;
    position: absolute;
    top: -16rem;
    right: 0;
}
.kikyou .sec03 .over2 .flexR::after {
    background: url("../img/one-g.webp") no-repeat center center/contain;
}
.kikyou .sec03 .over .flex .flexL::after {
    background: url("../img/two-g.webp") no-repeat center center/contain;
}
.kikyou .sec03 .over2.over3 .flexR::after {
    background: url("../img/three-g.webp") no-repeat center center/contain;
}
.kikyou-product .bg-g {
    background: url("../img/bg-gray.webp") no-repeat center center/cover;
    padding: 8rem;
}
.kikyou-product .bg-g:first-child {
    margin-bottom: 8rem;
}
.kikyou-product .bg-g:first-child h3 {
    font-size: 3.4rem;
    margin-bottom: 2.5rem;
}
.kikyou-product ul {
    gap: 0 4rem;
}
.kikyou-product div.flex {
    gap: 0 8rem;
}
.kikyou-product ul li {
    width: calc((100% - 8rem) / 3);
    background-color: #fff;
}
.kikyou-product ul li h3 {
    font-size: 2.4rem;
    padding: 2rem 2rem 1.5rem 2rem;
}
.kikyou .under-sec04 .ttl-02 {
    margin-bottom: 6rem;
}
.kikyou .under-sec05 {
    background: url("../img/bg-gray.webp") no-repeat center center/cover;
    padding: 11.5rem 0;
}
.kikyou .under-sec05 .bg-w {
    margin-top: 12rem;
    padding: 8rem;
}
.kikyou .under-sec05 .btn {
    background-color: #4d4d4d;
    margin-top: 6rem;
    width: 30rem;
    height: 6rem;
    display: flex;
}
.kikyou .under-sec05 .btn a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kikyou .sec03 .over2 .flexL::before {
    content: "";
    background: url("../img/sec04-2.webp") no-repeat center center/contain;
    position: absolute;
    width: 100rem;
    height: 56rem;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.kikyou .sec03 .over2 .flexL::before {
    background: url("../img/kikyou-sec03-02.webp") no-repeat center center/contain;
}
.kikyou .sec03 .over .flex .flexR::after {
    background: url("../img/kikyou-sec03-04.webp") no-repeat center center/contain;
}
.kikyou .sec03 .over3 .flexL::before {
    background: url("../img/kikyou-sec03-06.webp") no-repeat center center/contain;
}
.kikyou .ttl-01 + div p:nth-of-type(1) {
    font-size: clamp(1.6rem, 1.454rem + 0.388vw, 2.2rem);
}
.kikyou .under-sec02 .txt {
    font-size: clamp(1.6rem, 1.454rem + 0.388vw, 2.2rem);
    letter-spacing: 0.1em;
}
/* ====================================================================
-------------------------------
==================================================================== */
.contact-wrapper {
    width: 80rem;
    margin: 0 auto;
}
.contact .under-sec01 {
    position: relative;
    z-index: 10;
}
/*.contact .under-sec01::before {
   content: "";
   background: #fff;
   height: 100%;
   position: absolute;
   left: -21%;
   top: 0;
   width: 79vw;
   z-index: -1;
}*/
.contact .under-mv + .wrapper {
    background: #fff;
}
.contact input[type="text"],
.contact input[type="tel"],
.contact input[type="email"],
.contact select,
.contact textarea {
    width: 100%;
    border: none;
    background: #f1f2f2;
    height: 6rem;
    margin-bottom: 4rem;
    padding: 1rem 2rem;
}
.contact input[type="text"].short,
.contact input[type="tel"].short {
    width: 50rem;
}
.contact textarea {
    height: 25rem;
}
.contact dd {
    margin-bottom: 2rem;
    font-size: 1.8rem;
}
.contact dd span {
    margin-left: 1rem;
    padding: 0.5rem 1rem;
    font-size: 1.6rem;
}
.contact input,
.contact textarea,
.contact select {
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #4d4d4d;
    font-size: 1.6rem;
    letter-spacing: 0.05em;
}
.contact input[type="submit"],
.contact input[type="button"] {
    width: 30rem;
    height: 6rem;
    border: none;
    background: #e60012;
    color: #fff;
    letter-spacing: 0.05em;
    font-size: 1.8rem;
    margin-top: 8rem;
    cursor: pointer;
}
.contact input[type="button"] {
    font-style: inherit;
    font-weight: 500;
}
select {
    -webkit-appearance: none;
    appearance: none; /* デフォルトの矢印を非表示 */
}
select::-ms-expand {
    display: none; /* デフォルトの矢印を非表示(IE用) */
}
/* セレクトボックスの矢印デザイン変更 */
.cont {
    position: relative;
}
.cont::after {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10.5px solid #4d4d4d;
    content: "";
    position: absolute;
    right: 17px;
    top: 28px;
    width: 0;
    pointer-events: none;
}
/*リセット */
input[type="checkbox"] {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* チェックボックスデザイン */
input[type="checkbox"] {
    cursor: pointer;
    padding-left: 30px; /*label手前にチェックボックス用の余白を開ける*/
    vertical-align: middle;
    position: relative;
}
input[type="checkbox"]::before,
input[type="checkbox"]::after {
    content: "";
    display: block;
    position: absolute;
}
input[type="checkbox"]::before {
    background-color: #fff;
    border-radius: 0%;
    border: 1px solid #4d4d4d;
    width: 20px; /*チェックボックスの横幅*/
    height: 20px; /*チェックボックスの縦幅*/
    transform: translateY(-50%);
    top: 50%;
    left: 5px;
}
input[type="checkbox"]::after {
    border-bottom: 3px solid #e60012; /*チェックの太さ*/
    border-left: 3px solid #e60012; /*チェックの太さ*/
    opacity: 0; /*チェック前は非表示*/
    height: 6px; /*チェックの高さ*/
    width: 11px; /*チェックの横幅*/
    transform: rotate(-45deg);
    top: -7px; /*チェック時の位置調整*/
    left: 10px; /*チェック時の位置調整*/
}
input[type="checkbox"]:checked::after {
    opacity: 1; /*チェック後表示*/
}
#formWrap h4 {
    font-size: 2rem;
    margin-bottom: 5rem;
    line-height: 2;
    letter-spacing: 0.1em;
}
p.error_messe {
    text-align: left;
    margin-bottom: 1rem;
}
.formTable tr {
    text-align: left;
}
.formTable tr td {
    margin-left: 2rem;
    display: inline-block;
}
div#formWrap > p {
    margin-bottom: 5rem;
    font-size: 2rem;
}
p.submitG {
    display: flex;
    justify-content: space-around;
}
.thanksMessage h3 {
    text-align: center;
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 3rem;
}
.contact .under-mv + .wrapper {
    background: #fff;
}
.thanksMessage p {
    text-align: center;
}
p.toTopBT {
    width: 30rem;
    height: 6rem;
    border: none;
    background: #e60012;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5rem auto 0;
    letter-spacing: 0.1em;
}
.contact .center a {
    text-decoration: underline;
}
.under-mv {
    height: 38.4rem;
    position: relative;
}
.under-mv .img-ab {
    position: absolute;
    top: 0;
    right: 0;
}
.under-mv .wrapper {
    height: 100%;
    display: flex;
    align-items: center;
}
/*20231222 add*/
.banner {
    margin: 10rem auto;
    text-align: center;
}
/* ====================================================================
-------------------------------insta埋め込み
==================================================================== */

#gallery {
    display: flex;
    flex-wrap: wrap;
}
#gallery li {
    width: calc(100% / 8);
    overflow: hidden;
    aspect-ratio: 1/1;
}
#gallery li:hover {
    opacity: 0.8;
}
#gallery li img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 559px) {
    #gallery li {
        width: calc(100% / 4);
    }
}