@charset "utf-8";
:root {
    --text-color: #333333;
    --A-text-color: #42b2da;
    --B-text-color: #e5697d;
    --bg-color: #FFF;
    --A-bg-color: #daedfc;
    --A-bg-color02: #ecf6fd;
    --B-bg-color: #fee2e2;
    --B-bg-color02: #fef0f0;
    --height: 100vh;
}
html {
	scroll-behavior: smooth;
}
#wrapper {
	width: 100%;
    margin: 0 auto;
    text-align: center;
    color: var(--text-color);
    font-size: 85%;
    letter-spacing: 0.055rem;
    line-height: 1.6;
    background: linear-gradient(to right, var(--A-bg-color) 0%, var(--A-bg-color) 50%, var(--B-bg-color) 50%, var(--B-bg-color) 100%);
    @media (width >= 768px){
        width: 980px;
        padding-bottom: 0;
    }
    & img{
        width: 100%;
        height: auto;
    }
    & a {
	  text-decoration: none;
	  color: var(--text-color);
	  display: block;
    }
    .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;
      & a {
          background-color: #333;
          border-radius: 50px;
          color: #ffffff;
          padding: 1em 2.5em 1em 2em;
          position: relative;
          font-size: 90%;
          box-shadow: 4px 5px 20px 0px #3333334a;
          @media (width >= 768px){
			  font-size: 14px;
		  }
        }
        & a::after {
            position: absolute;
            right: 1.5em;
            top: calc(50% - 0.35rem);
            display: block;
            content: '';
            width: 0.6em;
            height: 0.6em;
            border-top: solid 1px #ffffff;
            border-right: solid 1px #ffffff;
            transform: rotate(135deg);
            transition: all 0.2s;
        }
    }
    .fontMedium {
        font-family: noto-sans-cjk-jp, sans-serif;
        font-weight: 500;
        font-style: normal;
    }
    .fontBold {
        font-family: noto-sans-cjk-jp, sans-serif;
        font-weight: 700;
        font-style: normal;
    }
    .flexArea {
        @media (width >= 768px){
            display: flex;
        }
        .flexBox {
            @media (width >= 768px){
                width: 50%;
                margin: 0 auto;
            }
        }
    }
}
#main-visual {
    @media (width >= 768px){
        width: 780px;
        margin: 0 auto;
    }
    .main-comment {
        margin-bottom: 11.25%;
        & p {
            margin: 5%;
            @media (width >= 768px){
                font-size: 24px;
            }
        }
        .marker {
            background: linear-gradient(#ffffff00 0%, #ffffff00 20%, #fff 20%, #fff 80%, #ffffff00 80%, #ffffff00 100%);
            line-height: 1;
        }
        & p:nth-of-type(2) {
            font-size: 150%;
            @media (width >= 768px){
                font-size: 38px;
            }
        }
    }
}
#menu {
    & h2 {
        width: 61.76%;
        max-width: 482px;
        margin: 0 auto 5.5%;
        @media (width >= 768px) {
			width: 426px;
		}
    }
    & ul {
        display: flex;
        justify-content: center;
        margin-bottom: 12.82%;
        & li {
            width: 43.08%;
            margin: 0 auto;
        }
        .moreBtn {
            margin: -5rem auto 0 ;
        }
    }
}
#section01 {
    .item {
        margin-top: -4.74%;
        @media (width >= 768px){
            margin-top: 0;
        }
        .comment {
            margin: 7.05% 0;
            font-size: 120%;
            @media (width >= 768px){
                font-size: 20px;
            }
        }
        & span.bold {
            font-weight: 700;
        }
    }
    .aAreaBox {
        position: relative;
        .aArea {
            position: absolute;
            aspect-ratio: 510 / 766.49;
            width: 65.38%;
            border-radius: 30px;
            & a {
                width: 100%;
                height: 100%;
            }
        }
    }
    .item01 {
        background-color: var(--A-bg-color);
        @media (width >= 768px){
            background-color: unset;
        }
        & span.bold {
            color: var(--A-text-color);
        }
        .aArea {
            bottom: 5.25%;
            left: 22.05%;
        }
    }
    .item02 {
        background-color: var(--B-bg-color);
        @media (width >= 768px){
            background-color: unset;
        }
        & span.bold {
            color: var(--B-text-color);
        }
        .aArea {
            bottom: 5%;
            left: 15.64%;
        }
    }
    #section01_item02 {
        margin-top: -12%;
        @media (width >= 768px){
            margin-top: 0;
        }
    }
    
}
#wrapper .item-container {
    padding-bottom: 18%;
    & ul.img {
        display: flex;
        justify-content: center;
        padding: 0 8.72%;
        margin-bottom: 6.92%;
        & li:first-child {
            margin-right: 1.92%;
        }
    }
    .attention {
        font-size: 80%;
        background: var(--bg-color);
        width: fit-content;
        margin: 0 auto 3.85%;
        padding: 0.25rem 0.7rem;
        border: 1px solid var(--text-color);
    }
    .name {
        @media (width >= 768px){
            font-size: 16px;
        }
    }
    .moreBtn_box {
        display: flex;
        justify-content: center;
        margin-top: 7.69%;
        & li {
            width: 41.83%;
            margin-right: 3%;
            .moreBtn {
                width: unset;
            }
            & a {
                padding: 1.25em 2.25em 1.25em 2em;
            }
            & a::after {
                top: calc(50% - 0.25rem);
                transform: rotate(45deg);
                @media (width >= 768px){
                    top: calc(50% - 0.45rem);
                }
            }
        }
        & li:last-child {
            margin-right: 0;
        }
    }
}
#wrapper .item01 .item-container {
    & ul.img01 {
		margin-bottom: 0;
	}
	& ul.img02 img {
	width: 90%;
	}
    .moreBtn_box a {
        background-color: var(--A-text-color);
    }
} 
#wrapper .item02 .item-container {
    & ul.img {
        @media (width >= 768px){
            padding: 0 5%;
        } 
    }
    .name {
        @media (width >= 768px){
            margin-top: 77px;
        }
    }
    .moreBtn_box a {
        background-color: var(--B-text-color);
    }
}
#menu02 {
    background: url(https://shop.aimerfeel.jp/img_visu/page/2025/bra/fgh/01/menu02_bg.jpg) no-repeat center center / contain;
    aspect-ratio: 780 / 474;
    @media (width >= 768px){
		margin-bottom: -110px;
	}
    & h2 {
        padding-top: 10.90%;
        line-height: 2rem;
        font-weight: 700;
        font-size: 120%;
        @media (width >= 768px){
            font-size: 30px;
            line-height: 1.8em;
            padding-top: 10%
        }
        .color {
            color: var(--B-text-color);
        }
        .fontSize {
            font-size: 180%;
        }
    }
    & ul {
        display: flex;
        justify-content: center;
        margin-top: 3%;
        & li {
            width: 25.64%;
            margin-right: 4.36%;
            @media (width >= 768px){
                width: 170px;
                margin-right: 50px;
            }
            & a {
                background-color: var(--B-text-color);
                aspect-ratio: 1 / 1;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                outline : 1px solid #FFFFFF;
                outline-offset : -3px;
                box-shadow: 3px 5px 12px 0px #a56c7566;
                & p {
                    color: #FFF;
                    font-size: 120%;
                    padding-bottom: 8%;
                    line-height: 1.5rem;
                    @media (width >= 768px){
                        font-size: 24px;
                        line-height: 3.25rem;
                    }
                }
            }
            & a::after {
                position: absolute;
                left: 50%;
                bottom: 18%;
                transform: translate(-50%,0) rotate(135deg);
                display: block;
                content: '';
                width: 0.65em;
                height: 0.65em;
                border-top: solid 1.5px #ffffff;
                border-right: solid 1.5px #ffffff;
                @media (width >= 768px){
                    width: 18px;
					height: 18px;
					bottom: 20%;
                }
            }
        }
        & li:last-child {
            margin-right: 0;
        }
    }
}
#section02 {
    background: var(--bg-color);
    & h2 {
        width: 68.46%;
        margin: 0 auto 10.26%;
        padding-top: 13.97%;
        @media (width >= 768px){
            width: 464px;
            padding-top: 100px;
            margin-bottom: 80px;
        }
    }
    .imgBox {
        padding: 0 6.92% 7.95% 6.92%;
        margin-bottom: 10%;
        @media (width >= 768px){
            padding: 0 30px 60px;
        }
    }
    .item01 {
        background: linear-gradient(to bottom, var(--bg-color) 0%, var(--bg-color) 15%, var(--A-bg-color) 15%, var(--A-bg-color) 100%);
    }
    .item02 {
        background: linear-gradient(to bottom, var(--bg-color) 0%, var(--bg-color) 15%, var(--B-bg-color) 15%, var(--B-bg-color) 100%);
        margin-bottom: 0;
    }
}
#section03 {
    background: var(--bg-color);
    & h2 {
        width: 82.3%;
        margin: 0 auto 13.33%;
        padding-top: 14.87%;
        @media (width >= 768px){
            width: 564px;
            margin-bottom: 100px;
        }
    }
    & h3 {
        color: #FFF;
        font-size: 145%;
         padding: 0.35rem 0;
    }
    .forBox {
        padding-top: 9.87%;
        .tit {
            width: 49.23%;
            margin: 0 auto;
        }
        & ul {
            width: 86.03%;
            margin: -8% auto;
            background-color: var(--bg-color);
            padding: 12.3% 0 8%;
            margin-bottom: 8.97%;
            box-shadow: 0px 2px 19px 0px #5fbfe14d;
            & li {
                text-align: left;
                padding-left: 2rem;
                margin: 0 5.5% 3%;
                font-size: 110%;
                position: relative;
                @media (width >= 768px){
                    padding-left: 35px;
                    margin: 0 35px 5%;
                    font-size: 18px;
                }
            }
            & li:last-child {
                margin-bottom: 0;
            }
            & li::before {
                width: 1.35em;
                height: 1.35em;
                background: var(--A-bg-color02);
                left: 0;
                top: 3px;
                content:"";
                display:block;
                position:absolute;
                @media (width >= 768px){
                    top: 2px;
                }
            }
            & li::after {
                border-left: 3.5px solid var(--A-text-color);
                border-bottom: 3.5px solid var(--A-text-color);
                width: 1em;
                height: 0.6em;
                -webkit-transform: rotate(-45deg);
                transform: rotate(310deg);
                left: 1.25%;
                top: 5px;
                content:"";
                display:block;
                position:absolute;
                @media (width >= 768px){
                    top: 7px;
                    left: 5px;
                }
            }
        }
    }
    .model {
        width: 85.64%;
        margin: 0 auto 4.35%;
        @media (width >= 768px){
            width: 400px;
        }
    }
    .item01 {
        & h3 {
            background-color: var(--A-text-color);
        }
        .forArea {
            background-color: var(--A-bg-color02);
        }
    }
    .item02 {
        & h3 {
            background-color: var(--B-text-color);
        }
        .forArea {
            background-color: var(--B-bg-color02);
            .forBox {
                & ul {
                    box-shadow: 0px 2px 19px 0px #e5697d4d;
                    & li::before {
                        background: var(--B-bg-color02);
                    }
                    & li::after {
                        border-left: 3px solid var(--B-text-color);
                        border-bottom: 3px solid var(--B-text-color); 
                    }
                }
            }
        }
    }
}
#section04 {
    background: var(--bg-color);
    & h2 {
        width: 82.3%;
        margin: 0 auto 13.33%;
        padding-top: 12%;
        @media (width >= 768px){
            width: 570px;
            margin-bottom: 100px;
        }
    }
    .imgBox {
        position: relative;
        & li {
            position: absolute;
        }
        & p {
            font-size: 70%;
            margin-top: 0.75rem;
        }
    }
    .item01 {
        background: linear-gradient(to bottom, var(--bg-color) 0%, var(--bg-color) 50%, var(--A-bg-color02) 50%, var(--A-bg-color02) 100%);
        & li:nth-child(1) {
          width: 37.9%; 
          top: 11%;
          right: 1.5%; 
        }
        & li:nth-child(2) {
          width: 37.4%;  
          top: 25%;
          left: 3%;
        }
        & li:nth-child(3) {
          width: 57.3%; 
          top: 55%;
          right: 5%;
        }
        .star {
            width: 46.41%;
            margin: 0 auto;
            padding-bottom: 10%;
        }
    }
    .item02 {
        margin-top: 11.92%;
        background: linear-gradient(to bottom, var(--bg-color) 0%, var(--bg-color) 50%, var(--B-bg-color02) 50%, var(--B-bg-color02) 100%);
        @media (width >= 768px){
            margin-top: 0;
        }
        & li:nth-child(1) {
          width: 39.61%; 
          top: 12%;
          left: 3.5%; 
        }
        & li:nth-child(2) {
          width: 38.46%;  
          top: 21%;
          right: 2%;
        }
        & li:nth-child(3) {
          width: 32.94%; 
          top: 47%;
          right: 4.75%;
        }
        & li:nth-child(4) {
          width: 51.79%; 
          top: 55%;
          left: 5.25%;
        }
        .star {
            width: 46.28%;
            margin: 0 auto;
            padding-bottom: 10%;
        }
    }
}
#other {
    background-color: var(--bg-color);
    padding: 8% 0;
    & h3 {
        font-size: 150%;
        margin-bottom: 3.5%;
        @media (width >= 768px){
            font-size: 24px;
        }
    }
    & a {
        width: 89.74%;
        margin: 0 auto;
        @media (width >= 768px){
            width: 580px;
        }
    }
}