@charset "utf-8";
:root {
    --textColor: #797070;
    --textColor02: #6398d9;
    --bgColor: #c8e1ff;
    --height: 100vh;
}
html {
	scroll-behavior: smooth;
}
#wrapperContainer {
    background: #c8e1ff59;
    @media (width >= 768px) {
        padding-bottom: 0;
    }
}
#wrapper {
	width: 100%;
    margin: 0 auto;
    text-align: center;
    color: var(--textColor);
    font-size: 95%;
    letter-spacing: 0.055rem;
    line-height: 1.6;
    background: var(--bgColor);
    padding-bottom: 12%;
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    overflow: hidden;
    @media (width >= 768px) {
        max-width: 720px;
        padding-bottom: 0;
    }
    & img{
        width: 100%;
        height: auto;
    }
    & a {
	  text-decoration: none;
	  color: var(--textColor);
	  display: block;
      outline: none;
    }
    .pc {
	  display: none;
        @media (width >= 768px) {
            display: unset;
        }
    }
    & span.br {
        display: block;
    }
    & span.br_sp {
        display: block;
        @media (width >= 768px){
            display: unset;
        }
    }
    @media (width >= 768px){
      .sp {
          display:none;
        }
    }
/*もっと見るボタン*/
  .moreBtn {
      width: fit-content;
      width: 87%;
      margin: 0 auto 0;
      @media (width >= 768px){
        width: 372px;
      }
      & a {
          background-color: #ffffff;
          border-radius: 50px;
          border: 1px solid var(--textColor);
          color: var(--textColor);
          padding: 1.25em 2.5em 1.25em 2em;
          position: relative;
          font-size: 90%;
          font-weight: 700;
          /*box-shadow: 0 0 16px rgba(46, 28, 26, 0.06);*/
          @media (width >= 768px){
			  font-size: 24px;
		  }
        }
        & a::after {
            position: absolute;
            right: 1.5em;
            top: calc(50% - 0.25rem);
            display: block;
            content: '';
            width: 0.6em;
            height: 0.6em;
            border-top: solid 1px var(--textColor);
            border-right: solid 1px var(--textColor);
            transform: rotate(45deg);
            transition: all 0.2s;
        }
    }
/*WEBフォント*/
    .fontNotoThin {
        font-weight: 100;
    }
    .fontNotoDemiLight {
        font-weight: 300;
    }
    .fontNotoRegular {
        font-weight: 400;
    }
    .fontNotoMedium {
        font-weight: 500;
    }
    .fontNotoBold {
        font-weight: 700;
    }
    .fontYuMincho {
        font-family: yu-mincho-pr6n, sans-serif;
        font-style: normal;
    }
    #mainVisual {
        background-image: url(https://shop.aimerfeel.jp/img_visu/page/2026/other/22_contents12/bg_main-menu.jpg);
        background-size: contain ;
        background-repeat: no-repeat;
        aspect-ratio: 780 / 2694;
        padding: 12.8% 0 0;
        .mainTittle {
            width: 80%;
            max-width: 628px;
            margin: 0 auto;
        }
        .mainImage {
            position: relative;
            aspect-ratio: 780 / 420;
            .mainImageL {
                animation: yura02 5s ease-in-out infinite alternate;
                transition: 1s ease-in-out;
                width: 27.4%;
                max-width: 214px;
                position: absolute;
                top: 6.5%;
                left: 10%;
                transform-style: preserve-3d;
                transform-origin: top left 5px;
            }
            .mainImageC {
                animation: yura 5s ease-in-out infinite alternate;
                transition: 1s ease-in-out;
                width: 26.5%;
                max-width: 207px;
                position: absolute;
                top: 21.5%;
                left: 35%;
                transform-style: preserve-3d;
                transform-origin: top left 10px;
            }
            .mainImageR {
                animation: yura02 5s ease-in-out infinite alternate;
                transition: 1s ease-in-out;
                width: 19.8%;
                max-width: 155px;
                position: absolute;
                top: 13%;
                right: 12.5%;
                transform-style: preserve-3d;
                transform-origin: top right 10px;
            }
        }
        .main {
            .main-p {
                color: var(--textColor02);
                margin-top: 5%;
                font-size: 110%;
                @media (width >= 768px){
                    font-size: 28px;
                }
            }
            & h2 {
              width: 68.33%;
              max-width: 533px;
              margin: 0 auto;
              @media (width >= 768px){
                width: 533px;
              }
            }
            .scroll-container {
                position: relative;
                padding-bottom: 40%;
                @media (width >= 768px){
                    padding-bottom: 250px;
                }
                .scroll {
                    position: absolute;
                    top: 0%;
                    left: 50%;
                    transform: translateX(-50%) ;
                    width: 100%;
                    
                }
                .scroll::after {
                    content : '';
                    display : inline-block;
                    position : absolute;
                    background-color: var(--textColor);
                    right : 50%;
                    bottom : -550%;
                    transform : translateX(-50%);
                    width : 1px;
                    height: 380%;
                    @media (width >= 768px){
                        height: 154px;
                        bottom : -190px;
                    }
                }
            }
        }
        .lead {
            margin-bottom: 12.8%;
            & p {
                font-weight: 400;
                font-size: 90%;
                @media (width >= 768px){
                    font-size: 24px;
                }
            }
            .leadBox {
                display: block;
                background: #ffffff;
                width: fit-content;
                margin: 1.75rem auto;
                padding: 0.9rem 1.25rem 0.9rem 1.5rem;
                font-size: 120%;
                font-weight: 700;
                border: 1px solid var(--textColor);
                @media (width >= 768px){
                    font-size: 26px;
                    padding: 1.75rem 2rem 1.75rem 3.5rem;
                }
            }
            .leadBox:first-of-type {
                margin-bottom: 0;
                @media (width >= 768px){
                    margin-bottom: 5px;
                    margin-top: 25px;
                }
            }
            .leadBox:last-of-type {
                margin-top: 0;
                margin-bottom: 2.5rem;
                @media (width >= 768px){
                    margin-top: 5px;
                    margin-bottom:55px;
                }
            }
            .and {
                font-weight: 100;
                font-size: 160%;
                @media (width >= 768px){
                    font-size: 34px;
                }
            }
        }
        menu {
            margin: 7% auto 6%;
            background: #ffffff40;
            padding: 9% 3.124% 6%;
            @media (width >= 768px){
                margin-top: 65px;
                padding: 65px 0;
            }
        
            & ul {
                margin-top: 5.1%;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: stretch;
                @media (width >= 768px){
                    width: 100%;
                    margin: 40px auto 0;
                }
                & li {
                    width: calc(94% / 3);
                    margin-left: 3%;
                    margin-bottom: 4%;
                    @media (width >= 768px){
                        width: 217px;
                        margin-left: 15px;
                    }
                }
                & li:first-of-type {
                    margin-left: 0;
                }
                & li:nth-child(3n+1) {
                    margin-left: 0;
                }
                & a {
                    background: #fff;
                    border-radius: 10px;
                    overflow: hidden;
                    box-shadow: 10px 10px 20px -8px #6398d914;
                    @media (width >= 768px){
                        border-radius: 20px;
                    }
                    & dl {
                        position: relative;
                        padding-bottom: 12%;
                        & dt {
                            font-size: 80%;
                            letter-spacing: normal;
                            margin: 3% 0 0;
                            @media (width >= 768px){
                                font-size: 20px;
                            }
                        }
                        & dd {
                            padding: 0;
                        }
                    }
                    & dl:after {
                        position: absolute;
                        bottom: 7%;
                        left: calc(50% - 0.25rem);
                        display: block;
                        content: '';
                        width: 0.45rem;
                        height: 0.45rem;
                        border-top: solid 1px var(--textColor);
                        border-right: solid 1px  var(--textColor);
                        transform: rotate(135deg);
                        transition: all 0.2s;
                        @media (width >= 768px){
                            width: 12px;
                            height: 12px;
                        }
                    }
                }
            }
        }
    }
    & h3 {
        font-size: 160%;
        font-family: yu-mincho-pr6n, sans-serif;
        font-weight: 600;
        @media (width >= 768px){
                    font-size: 42px;
                }
    }
    .allBtn {
        margin: 10% auto ;
        width: 50%;
        min-width: 50%;
        @media (width >= 768px){
            width: 372px;
            min-width: unset;
            margin: 65px auto 130px;
        }
    }
    .en-word {
        font-family: yu-mincho-pr6n, sans-serif;
        color: var(--textColor02);
        letter-spacing: 0.35rem;
        @media (width >= 768px){
            font-size: 24px;
            letter-spacing: 0.75rem;
        }
    }
    .item-container {
        margin-top: 12.8%;
        background-size: contain;
        background-repeat: no-repeat;
        & h3.section-h3 {
            width: 50%;
            max-width: 372px;
            margin: 3% auto 4%;
            #room & {
                max-width: 411px;
            }
        }
        & h4 {
            .fontYuMincho {
                font-size: 160%;
                line-height: 1.6;
                font-weight: 600;
                @media (width >= 768px){
                    font-size: 42px;
                }
            }
            & span.br {
                @media (width >= 768px){
                    line-height: 1.5;
                }
            }
            .itemName {
                display: inline-block;
                padding-top: 0.3rem;
                font-size: 90%;
                font-weight: 300;
                @media (width >= 768px){
                    font-size: 24px;
                    padding-top: 1rem;
                }
                #item10 & {
                    padding-top: 0;
                }
            }
        }
        .model {
            width: 84.1%;
            max-width: 656px;
            margin: 3% auto 7%;
            position: relative;
            .model-comment {
                position: absolute;
                width: 55%;
                top: 48%;
                left: -12%;
                & img {
                    opacity: 0.8;
                }
                & img[src="/img_visu/page/2025/other/22_contents12/comment-long.png"] {
                    max-width: 352px;
                }
                & img[src="/img_visu/page/2025/other/22_contents12/comment-short.png"] {
                    width: 85%;
                    max-width: 339px;
                }
                & p {
                    position: absolute;
                    width: fit-content;
                    font-size: 76%;
                    text-align: left;
                    left: 15%;
                    top: 50%;
                    line-height: 1.6;
                    @media (width >= 768px){
                        font-size: 20px;
                    }
                }
                #item01 & {
                    top: 57%;
                }
                #item02 & {
                    top: 65%;
                    & p {
                        left: 17%;
                    }
                }
                #item03 & {
                    top: 52%;
                    & p {
                        left: 14%;
                        top: 55%;
                    }
                }
                #item04 & {
                    top: 50%;
                    left: unset;
                    right: -7.5%;
                    & p {
                        left: 13%;
                    }
                }
                #item05 & {
                    top: 60%;
                    left: unset;
                    right: -16%;
                }
                #item06 & {
                    top: 58%;
                    left: -7.5%;
                    & p {
                        left: 22%;
                    }
                }
            }
            .newColor-icon {
                position: absolute;
                width: 17%;
                max-width: 113px;
                top: 3%;
                right: 4%;

            }
        }
        .moreBtn {
            width: 55%;
            @media (width >= 768px){
                width: 372px;
            }
        }
        .point {
            margin: 8% 0 9.87%;
            .en-word {
                font-size: 80%;
                @media (width >= 768px){
					font-size: 18px;
				}
            }
            & h5 {
                margin: 1% 0 5%;
                color: #FFF;
                font-weight:900;
                -webkit-text-stroke: 3px var(--textColor02);
                text-stroke: 3px #FFF;
                paint-order: stroke;
                @media (width >= 768px){
                    font-size: 28px;
                }
            }
            .point-icon {
                & ul {
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: center;
                    align-items: stretch;
                    width: 75%;
                    margin: 0 auto;
                }
                & li {
                   width: calc(80% / 4);
                   max-width: 97%;
                   margin-left: 3%;
                }
                & li:first-child {
                    margin-left: 0;
                }
            }
            .point-image {
                margin: 0 auto;
                #item02 & {
                    width: 97.9%;
                    max-width: 764px;
                    margin-right: unset;
                }
                #item03 & {
                    width: 90.9%;
                    max-width: 709px;
                    margin-top: 1rem;
                }
                #item04 & {
                    width: 90%;
                    max-width: 702px;
                    margin-top: 1rem;
                }
                #item05 & {
                    width: 89.1%;
                    max-width: 695px;
                    margin-top: 1rem;
                }
                #item06 & {
                    width: 93.46%;
                    max-width: 729px;
                    margin-top: 1rem;
                }
                #item07 & {
                    width: 93.72%;
                    max-width: 731px;
                    margin-right: unset;
                    margin-top: 2rem;
                }
                #item08 & {
                    width: 92.95%;
                    max-width: 725px;
                    margin-right: unset;
                    margin-top: 2.5rem;
                }
            }
        }
        .color {
            .en-word {
                font-size: 80%;
                @media (width >= 768px){
					font-size: 18px;
				}
            }
        }
        .scroll_container {
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            padding-bottom: 2%;
            margin-left: 2%;
            margin-top: 5%;
            @media (width >= 768px){
                overflow-x: unset;
                overflow-y: auto;
                white-space: unset;
                display: flex;
                justify-content: center;
                align-items: stretch;
                flex-wrap: wrap;
                margin-left: auto;
                width: 90%;
                margin: 0 auto;
            }
            .item_box {
               display: inline-block;
               width: 52.56%;
               max-width: 410px;
               margin: 1%;
               vertical-align: top;
               background-color: #ffffff40;
               padding: 6% 2% 8%;
               @media (width >= 768px){
                margin: 4% 3.5% 0 0;
                max-width: unset;
                width: calc(96% / 2);
                padding: 34px 15px;
               }
               #item01 & img {
                max-width: 362px;
               }
               #item02 & img {
                max-width: 370px;
               }
               #item03 & img {
                max-width: 309px;
                @media (width >= 768px){
					   width: 200px
				   }
               }
               #item04 & img {
                max-width: 331px;
                @media (width >= 768px){
					   width: 200px
				   }
               }
               #item05 & img {
                max-width: 336px;
               }
               #item06 & img {
                max-width: 336px;
               }
               #item07 & img {
                max-width: 328px;
               }
               #item08 & img {
                max-width: 344px;
               }
               .moreBtn {
                @media (width >= 768px){
                    width: fit-content;
                    min-width: unset;
                    margin: 10% auto 0%;
                }
                & a {
                    border-radius: 30px;
                    padding: 1em 2.5em 1em 2em;
                    @media (width >= 768px){
                        width: 250px;
                        margin: 0 auto;
                        font-size: 18px;
                        border-radius: 30px;
                        padding: 16px 35px 16px 20px;
                        min-width: unset;
                }
                }
               } 
            }
            .item_box:nth-of-type(even) {
                @media (width >= 768px){
                    margin-right: 0;
                }
            }
            .item_box:last-of-type {
                margin-right: 3%;
                @media (width >= 768px){
                    margin-right: 0;
                }
            }
            .moreBtn {
                width: 90%;
                min-width: unset;
                margin: 7.5% auto 0%;
            }
        }
    }
    #item01 {
        background-image: url(https://shop.aimerfeel.jp/img_visu/page/2026/other/22_contents12/bg01.jpg);
        aspect-ratio: 780 / 3068;
        @media (width >= 768px){
            
        }
    }
    #item02 {
        background-image: url(https://shop.aimerfeel.jp/img_visu/page/2026/other/22_contents12/bg02.jpg);
        aspect-ratio: 780 / 3068;
    }
    #item03 {
        background-image: url(https://shop.aimerfeel.jp/img_visu/page/2026/other/22_contents12/bg03.jpg);
        aspect-ratio: 780 / 3184;
    }
    #item04 {
        background-image: url(https://shop.aimerfeel.jp/img_visu/page/2026/other/22_contents12/bg04.jpg);
        aspect-ratio: 780 / 3288;
    }
    #item05 {
        background-image: url(https://shop.aimerfeel.jp/img_visu/page/2026/other/22_contents12/bg05.jpg);
        aspect-ratio: 780 / 2845;
        @media (width >= 768px){
            margin-bottom: -140px;
        }
    }
    #item06 {
        background-image: url(https://shop.aimerfeel.jp/img_visu/page/2026/other/22_contents12/bg06.jpg);
        aspect-ratio: 780 / 2944;
        @media (width >= 768px){
            margin-bottom: -80px;
        }
    }
    #item07 {
        background-image: url(https://shop.aimerfeel.jp/img_visu/page/2026/other/22_contents12/bg07.jpg);
        aspect-ratio: 780 / 2800;
    }
    #item08 {
        background-image: url(https://shop.aimerfeel.jp/img_visu/page/2026/other/22_contents12/bg08.jpg);
        aspect-ratio: 780 / 2825;
    }
    #shorts {
        background-image: url(https://shop.aimerfeel.jp/img_visu/page/2026/other/22_contents12/bg09.jpg);
        aspect-ratio: 780 / 2928;
        background-size: contain;
        background-repeat: no-repeat;
        margin-bottom: -30%;
        @media (width >= 768px){
			margin-bottom: -280px;
		}
        & h4 {
            @media (width >= 768px){
                font-size: 24px;
            }
        }
        .point-icon {
            position: absolute;
            width: 15%;
            max-width: 97%;
            top: 4%;
            right: 4%;
            #item10 & {
                right: unset;
                left: 4%;
            }
        }
        .modelContainer {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
            @media (width >= 768px){
				width: 90%;
				margin: 0 auto;
			}
            .modelBox {
                width: calc(100% / 2);
                @media (width >= 768px){
					margin: 0 3.5% 0 0;
                    max-width: unset;
                    width: calc(96% / 2);
                    padding: 0 15px;
				}
                & img {
                    max-width: 347px;
                }
                .moreBtn {
                    width: 80%;
                    min-width: unset;
                    margin: 7.5% auto 0%;
                    @media (width >= 768px){
                        width: fit-content;
                        min-width: unset;
                        margin: 10% auto 0%;
                    }
                    & a {
                        border-radius: 30px;
                        padding: 1em 2.5em 1em 2em;
                        @media (width >= 768px){
                            width: 250px;
                            margin: 0 auto;
                            font-size: 18px;
                            border-radius: 30px;
                            padding: 16px 35px 16px 20px;
                            min-width: unset;
                        }
                    }
                }
            }
            .modelBox:last-of-type {
                @media (width >= 768px){
                    margin-right: 0;
                }
            }
        }
    }
    #other {
        & h3 {
            @media (width >= 768px){
                font-size: 36px;
            }
        }
        & ul {
            margin: 5% 2.69% 0;
            display: flex;
            justify-content: center;
            @media (width >= 768px){
				margin: 20px 30px 100px;
			}
            & li {
				max-width: 70%;
                @media (width >= 768px){
					max-width: 450px;
				}
			}
            & li:nth-child(even) {
                margin-left: 2.69%;
                @media (width >= 768px){
					margin-left: 20px;
				}
            }
        }
    }
}
@keyframes yura {
    0% {
        transform: perspective(4000px) translateZ(0px) rotateX(0deg) rotateZ(0deg);
    } 
    50% {
        transform: perspective(4000px) translateZ(5px) translateY(-2px) rotateX(16deg) rotateZ(0deg);
    }
    100% {
        transform: perspective(4000px) translateZ(-5px) translateY(3px) rotateX(-8deg) rotateZ(0deg);
    }
}
@keyframes yura02 {
    0% {
        transform: perspective(4000px) translateZ(0px) rotateX(0deg) rotateZ(0deg);
    } 
    50% {
        transform: perspective(4000px) translateZ(5px) rotateX(15deg) rotateZ(0deg);
    }
    100% {
        transform: perspective(4000px) translateZ(-5px) rotateX(-5deg) rotateZ(0deg);
    }
}