@charset "UTF-8";
/* =======================setting================================================================ */
* {
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  font-weight: nomal;
  box-sizing: border-box;
  font-size:16px;
  line-height: 2;
  list-style: none;
  text-decoration: none;
  color:#212121;
}
h2{
    font-size:30px;
}
.sp-only{display:none;}
.m-w1100{max-width:1100px;}
.wid100{width:100%;}
.fw-b{font-weight:1000;}
.fw-n{font-weight: normal;}
.em8 {font-size:0.8em;}
.em13 {font-size:1.3em;}
.m0auto{margin: 0 auto;}
.tx-c{text-align: center;}
.tx-l{text-align: left;}
.tx-r{text-align: right;}
.disp-ib{display: inline-block;}
.disp-b{display: block;}
.tx-under{text-decoration: underline;}
.sp-only{display:none;}
.mt10{margin-top:10px!important;}
.mt15{margin-top:15px!important;}
.mt20{margin-top:20px!important;}
.mt30{margin-top:30px!important;}
.mt40{margin-top:40px!important;}
.mt50{margin-top:50px!important;}
.mt60{margin-top:60px!important;}
.mt70{margin-top:70px!important;}
.mt80{margin-top:80px!important;}
.mt90{margin-top:90px!important;}
.mt100{margin-top:100px!important;}
.mt120{margin-top:120px!important;}
.mt150{margin-top:150px!important;}
.mt200{margin-top:200px!important;}
.mt250{margin-top:250px!important;}
.mb10{margin-bottom:10px!important;}
.mb15{margin-bottom:15px!important;}
.mb20{margin-bottom:20px!important;}
.mb30{margin-bottom:30px!important;}
.mb40{margin-bottom:40px!important;}
.mb50{margin-bottom:50px!important;}
.mb60{margin-bottom:60px!important;}
.mb70{margin-bottom:70px!important;}
.mb80{margin-bottom:80px!important;}
.mb100{margin-bottom:100px!important;}
.mb120{margin-bottom:120px!important;}
.mb150{margin-bottom:150px!important;}

a:hover{
    opacity:0.8;
    transition:opacity 0.3s ;
}
#link1,#link2,#link3,#link4,#link5{
    transform:translate(0,-150px);
}
/* header============================================================== */

header{
    z-index: 15;
    background-color: #fff;
    width:100%;
    transition: all 0.3s;
}
.header-inner{
    display:flex;
    height:85px;
    align-items: center;
    max-width:1500px;
    margin:0 auto;
    padding:0 3%;
    width:100%;
    justify-content: space-between;
    
}
header a{
    display:inline-block;
}
.ign-and-inner{
    display:flex;
}
.ign-and-inner a{
    margin-right:40px;
}

.ign-link img{
    height:40px;
}
.inner-link{
    font-size:14px;
    font-weight: bold;
    display:flex;
    align-items: center;
}
.sns-link {
    display: none;
}
.sns-link img{
    height:32px;
}
.menu-btn{
    display:none;
}
.pr-text-pc {
    padding: 5px 15px 3px;
    line-height: 1;
    color: #fff;
    background-color: gray;
    border-radius: 5px;
}
.pr-text-sp {
    display: none;
}
/* sidebar============================================================= */


.side-bar{
    z-index:20;
    width:80%;
    max-width: 400px;
    height:100vh;
    background-color:rgb(255, 255, 255);
    position:fixed;
    top:0;
    right:-80%;
    transition: right 0.4s;
    visibility:hidden;
  }
  .side-bar-menu{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:0 5%;
  }
  .side-bar-menu a{
    display:block;
    width: 100%;
    padding:15px 25px;
    font-weight: bold;
    border-bottom:1px solid #e0e0e0;
  }
  .close-btn{
    position:absolute;
    top:15px;
    right:20px;
    font-size:20px;
  }
  .side-bar-bg{
    z-index:-1;
    position:fixed;
    top:0;
    height:100vh;
    width:100%;
    background-color:black;
    opacity:0;
    transition: opacity 0.8s;
  }

/* ================================================================ */

.inner {
    max-width: calc(1100px + 3% * 2);
    margin: 0 auto;
    padding: 70px 3%;
}

.infinitynikki * {
    line-height: calc(28/16);
    letter-spacing: 0.01em;
}
.infinitynikki img {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: top;
}
.infinitynikki button,
button {
    border: none;
    cursor: pointer;
}
.link-image {
    overflow: hidden;
}
.link-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.modal-center {
    text-align: center;
}
.js-modal-btn {
    position: relative;
    max-width: 618px;
    aspect-ratio: 618/422;
    overflow: hidden;
}
.js-modal-btn.w347 {
    position: relative;
    max-width: 618px;
    aspect-ratio: 618/347;
    overflow: hidden;
}
.modal-text {
    max-width: 618px;
    margin-top: 10px;
    margin-inline: auto;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    color: #82b8bd;
}
.modal-text.fc-thickgreen{
    color:#519ba1;
}
.modal-thumbnail {
    display: block !important;
    height: 100% !important;
    object-fit: cover;
}
.modal-start-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 114px !important;
    aspect-ratio: 1/1;
}
@media (any-hover: hover) {
    a:hover .link-image img {
        transform: scale(1.1);
    }
}
.modal-btn {
    position: relative;
    cursor: pointer;
}
.modal-btn::before {
    content: "";
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 33px;
    height: 33px;
    background: url(../img/modal-btn.png) no-repeat center / contain;
}
.all-img {
    visibility: hidden;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.85);
    opacity: 0;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    padding: 3vh 0;
    z-index: -1;
    text-align: center;
    transition:opacity 0.3s;
}
.all-img.modal {
    visibility: visible;
    opacity: 1;
    z-index: 35;
}
.all-img img {
    height: 90vh;
    width: 90%;
    object-fit: contain;
    font-family: 'object-fit: contain;';
}
.all-img p {
    color: #fff;
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 20px;
    cursor: pointer;
    text-shadow: #000 0px 0px 15px;
}
.splide__arrow {
    width: 60px;
    height: 60px;
    background-color: transparent;
    background: url(../img/arrow-btn.png) no-repeat center / contain;
    opacity: 1;
}
.splide__arrow--prev {
    left: 0;
    transform: translateY(-50%) scale(-1,1);
}
.splide__arrow--next {
    right: 0;
}

/* mv================================================================ */

.mv {
    position: relative;
    overflow: hidden;
}
.mv-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.mv-logo {
    width: 717px;
    margin-inline: auto;
}
.mv-title {
    margin-top: 80px;
    font-size: 28px;
    font-weight: 500;
    line-height: calc(40/28);
    letter-spacing: -0.03em;
    text-align: center;
    color: #aeeaef;
}
.mv-text {
    margin-top: 40px;
    font-size: 18px;
    line-height: calc(34/18);
    letter-spacing: -0.01em;
    text-align: center;
    color: #fff;
}
.mv-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 340px;
    margin-top: 70px;
    margin-inline: auto;
}

/* top================================================================ */

.top {
    background: url(../img/top-bg.jpg) no-repeat top center / cover;
}
.top-title {
    margin-bottom: 60px;
    margin-inline: auto;
    text-align: center;
}
.top-banner {
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-banner .link-image {
    width: 100%;
    aspect-ratio: 1100/237;
    border-radius: 10px;
}
.top-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.top-list.single {
    display: flex;
    align-items: center;
    justify-content: center;
}
.top-list-item {
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.15);
}
.top-list.single .top-list-item {
    max-width: 50%;
}
.top-list-item a {
    display: grid;
    grid-template-columns: calc(220/500*100%) auto;
    align-items: center;
    gap: 0 20px;
}
.top-list-image {
    aspect-ratio: 220/160;
}
.top-list-title {
    font-size: 18px;
    font-weight: 700;
    line-height: calc(28/18);
    color: #82b8bd;
}
.top-list-text {
    margin-top: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* sns================================================================ */
.sns-title {
    width: fit-content;
    margin-top: 50px;
    margin-inline: auto;
    padding: 10px 70px;
    background-color: #fff;
    border-radius: 100vmax;
    font-size: 18px;
    font-weight: 700;
}
.sns-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 30px;
    max-width: 360px;
    margin-top: 30px;
    margin-inline: auto;
}  

/* about================================================================ */

.about {
    background: url(../img/about-bg.jpg) no-repeat center / cover;
}
.about-title {
    max-width: 944px;
}
.about-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-box .js-modal-btn {
    flex-shrink: 0;
}
.about-box-text {
    padding: 40px 30px;
    background-color: #fff;
}

/* special================================================================ */

.special-title {
    max-width: 841px;
}
.special-top-article {
    display: block;
    position: relative;
    max-width: 618px;
    aspect-ratio: 618/422;
    overflow: hidden;
    margin:50px auto 0;
}
.special-top-article-title{
    max-width: 618px;
    margin-top: 10px;
    margin-inline: auto;
    font-size: 20px;
    font-weight: 700;
    text-align: left;
    color: #519ba1;
    text-shadow: #fff 0 0 5px;
}
@media (max-width: 760px) {
    .special-top-article{
        max-width: calc(618/760*100vw);
    }
    .special-top-article-title{
        font-size: 16px;
    }
}

/* gallery================================================================ */

.gallery {
    background: url(../img/gallery-bg.jpg) no-repeat center / cover;
}
.gallery .inner {
    padding-bottom: 140px;
}
.gallery-title {
    max-width: 707px;
}
.gallery-slide {
    padding-inline: 80px;
}

/* movie================================================================ */

.movie-title {
    max-width: 782px;
}
.movie-slide {
    max-width: 870px;
    margin-inline: auto;
}
.movie-slide-image {
    max-width: 618px !important;
    aspect-ratio: 618 / 422;
}

/* article================================================================ */

.article-title {
    max-width: 699px;
}
.article-btn {
    max-width: 358px;
    margin-top: 60px;
    margin-inline: auto;
}

/* product================================================================ */

.product {
    background: url(../img/product-bg.jpg) no-repeat center / cover;
}
.product-title {
    max-width: 707px;
}
.product-text {
    margin-top: 50px;
    font-size: 18px;
    text-align: center;
    color: #fff;
}
.product-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    margin-top: 60px;
}
.product-image {
    max-width: 386px;
}
.product-link {
    max-width: 580px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 10px;
}
.product-link .long {
    grid-column: span 2 / span 2;
}
.product-copy,
.product-copy small {
    font-size: 18px;
    text-align: center;
    color: #fff;
}
.product-copy {
    margin-top: 80px;
}

/* footer ======================================================*/

footer {
    border-top: 3px solid #000; 
    background-color:#000;
    
} 
footer small{
    color:#fff;
}
.footer-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #FFF;
    width: 1000px;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 10px;
    font-size: 13px;
    font-size: 0.8125rem; }
.footer-container a {
    color: #FFF; }
.footer-left li {
    margin-bottom: 5px;
    list-style: none;
     }
.footer-right {
    width: 650px;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.4; }
.copyright {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
.copyright small {
    padding-right: 30px; }
    
/* responsive ====================================================== */
@media(max-width:1300px){
    header{
        justify-content: space-between;
    }
    .inner-link{
        display:none;
    }
    .sns-link {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pr-text-pc {
        display: none;
    }
    .pr-text-sp {
        display: block;
        padding: 5px 15px 3px;
        line-height: 1;
        color: #fff;
        background-color: gray;
        border-radius: 5px;
    }
    .menu-btn{
        display:inline-block;
        margin-left:30px;
    }
}

@media (max-width: 1170px) {
    .about-box {
        flex-direction: column;
        gap: 40px 0;
    }
}

@media(max-width:900px){
    .footer-container {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right:30px;
        padding: 40px 20px; }
    .footer-left {
        width: 100%; }
    .footer-right {
        width: 100%; }
    .copyright {
        margin: 20px 0;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center; }
    .copyright small {
        padding-right: 10px; }
}

@media (min-width: 761px) {
    .mv {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .infinitynikki .mv-bg {
        min-width: 1600px;
        min-height: 803px;
    }
    .mv-sp-wrap {
        display: none;
    }
}

@media(max-width:760px){
    *{font-size:14px;}
    h2,h3{
        font-size: 22px !important;
        text-align: left !important;
        line-height: 1.5 !important;
    }
    .pc-only{display:none;}
    .sp-only{display: block;}
    br.sp-only{display:inline;}
    .mt10s{margin-top:10px}
    .mt15s{margin-top:15px}
    .mt20s{margin-top:20px}
    .mt30s{margin-top:30px}
    .mt40s{margin-top:40px}
    .mt50s{margin-top:50px}
    .mt60s{margin-top:60px}
    .mt70s{margin-top:70px}
    .mt80s{margin-top:80px}
    .mt100s{margin-top:100px}
    .mt120s{margin-top:120px}
    .mt150s{margin-top:150px}
    .mb10s{margin-bottom:10px}
    .mb15s{margin-bottom:15px}
    .mb20s{margin-bottom:20px}
    .mb30s{margin-bottom:30px}
    .mb40s{margin-bottom:40px}
    .mb50s{margin-bottom:50px}
    .mb60s{margin-bottom:60px}
    .mb70s{margin-bottom:70px}
    .mb80s{margin-bottom:80px}
    .mb90s{margin-bottom:90px}
    .mb100s{margin-bottom:100px}
    .mb120s{margin-bottom:120px}
    .mb150s{margin-bottom:150px}
    .tx-l-s{text-align: left;}

    .inner {
        padding: calc(60/760*100vw) 2%;
    }
    .js-modal-btn {
        max-width: calc(618/760*100vw);
    }
    .modal-start-btn {
        width: calc(114/760*100vw) !important;
    }
    .splide__arrow {
        width: calc(51/760*100vw);
        height: calc(51/760*100vw);
    }
    .modal-btn::before {
        bottom: calc(20/760*100vw);
        right: calc(20/760*100vw);
        width: calc(33/760*100vw);
        height: calc(33/760*100vw);
    }
    .mv-title,
    .mv-text,
    .mv-btn {
        display: none;
    }
    .mv-inner {
        top: calc(285/760*100vw);
        transform: translate(-50%,0);
    }
    .mv-logo {
        width: calc(680/760*100vw);
    }
    .mv-sp-wrap {
        padding-block: calc(50/760*100vw);
        text-align: center;
    }
    .mv-sp-title {
        font-size: max(calc(34/760*100vw),16px);
        font-weight: 500;
        line-height: calc(40/34);
        letter-spacing: -0.03em;
        color: #82b8bd;
    }
    .mv-sp-text {
        margin-top: calc(40/760*100vw);
        font-size: max(calc(24/760*100vw),14px);
        line-height: calc(44/24);
        letter-spacing: -0.01em;
    }
    .mv-sp-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: calc(450/760*100vw);
        min-width: 220px;
        margin-top: calc(60/760*100vw);
        margin-inline: auto;
    }
    .top-title {
        margin-bottom: calc(50/760*100vw);
    }
    .top-banner .link-image {
        aspect-ratio: 720/392;
    }
    .top-list {
        grid-template-columns: repeat(1, 1fr);
        gap: calc(30/760*100vw) 0;
        margin-top: calc(40/760*100vw);
    }
    .top-list-item {
        padding: calc(30/760*100vw);
    }
    .top-list.single .top-list-item {
        max-width: 100%;
    }
    .top-list-item a {
        grid-template-columns: calc(220/500*100%) auto;
        gap: 0 calc(20/760*100vw);
    }
    .top-list-title {
        font-size: max(calc(24/760*100vw),16px);
    }
    .top-list-text {
        margin-top: calc(20/760*100vw);
        font-size: max(calc(22/760*100vw),14px);
    }
    .sns-links {
        max-width: 300px;
        gap: 0 20px;
    }
    .about {
        background: url(../img/sp/about-bg.jpg) no-repeat top center / cover;
    }
    .about-title {
        max-width: calc(944/760*100vw);
    }
    .about-box {
        gap: calc(40/760*100vw) 0;
    }
    .about-box-text {
        padding: calc(40/760*100vw) calc(30/760*100vw);
    }
    .special-title {
        max-width: calc(640/760*100vw);
    }
    .gallery {
        background: url(../img/sp/gallery-bg.jpg) no-repeat top center / cover;
    }
    .gallery .inner {
        padding-bottom: calc(140/760*100vw);
    }
    .gallery-title {
        max-width: calc(410/760*100vw);
    }
    .gallery-slide {
        padding-inline: calc(65/760*100vw);
    }
    .movie-title {
        max-width: calc(580/760*100vw);
    }
    .movie-slide .splide__arrow {
        top: 40%;
    }
    .movie-slide-image {
        max-width: calc(618/760*100vw) !important;
    }
    .article-title {
        max-width: calc(375/760*100vw);
    }
    .article-btn {
        max-width: calc(450/760*100vw);
        min-width: 220px;
        margin-top: calc(60/760*100vw);
    }
    .product {
        background: url(../img/sp/product-bg.jpg) no-repeat top center / cover;
    }
    .product-title {
        max-width: calc(375/760*100vw);
    }
    .product-text {
        margin-top: calc(40/760*100vw);
        font-size: max(calc(24/760*100vw),14px);
    }
    .product-wrap {
        align-items: center;
        flex-direction: column;
        gap: calc(40/760*100vw);
        margin-top: calc(50/760*100vw);
    }
    .product-image {
        max-width: calc(386/760*100vw);
    }
    .product-link {
        max-width: calc(710/760*100vw);
        gap: calc(15/760*100vw);
    }
    .product-copy,
    .product-copy small {
        font-size: max(calc(18/760*100vw),12px);
    }
    .product-copy {
        margin-top: calc(60/760*100vw);
    }
}