@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');

/* ====== Reset(ress.css MIT License) ====== */
html{-webkit-text-size-adjust:100%;box-sizing:border-box;-moz-tab-size:4;tab-size:4;word-break:normal}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}hr{color:inherit;height:0;overflow:visible}details,main{display:block}summary{display:list-item}small{font-size:80%}[hidden]{display:none}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}a{background-color:transparent}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}pre{font-size:1em}b,strong{font-weight:bolder}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}iframe{border-style:none}input{border-radius:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}button,select{text-transform:none}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,input,select,textarea{background-color:transparent;border-style:none}a:focus,button:focus,input:focus,select:focus,textarea:focus{outline-width:0}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;color:inherit;font:inherit}[disabled]{cursor:default}img{border-style:none}progress{vertical-align:baseline}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true]{cursor:default}

* {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    scroll-behavior:smooth;
}
header, footer, nav, section, article, aside, figure, picture {
    display: block;
}
ul, ol {
    padding: 0;
    list-style: none;
}
em {
    font-weight: bold;
    font-style: normal;
}
.karla {
    font-family: "Karla", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* BASE */
#meganelp *, #meganelp *::before, #meganelp *::after {
    box-sizing: border-box;
}
#meganelp {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Zen Kaku Gothic New', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN','Hiragino Sans', Meiryo, sans-serif;
	-webkit-font-smoothing: antialiased;
    font-weight: 400;
    letter-spacing: 1px;
    color: #000;
}
#meganelp img {
    border: 0;
    vertical-align: bottom;
}
#meganelp .pc {
    display: block;
}
#meganelp .sp {
    display: none;
}
#meganelp h1,
#meganelp h2,
#meganelp h3,
#meganelp h4 {
    margin: 0;
    padding: 0;
}
@media (max-width: 767px) {
    #meganelp .pc {
        display: none;
    }
    #meganelp .sp {
        display: block;
    }
}

#meganelp .mv h1 {
    text-align: center;
}
#meganelp .mv h1 img {
    width: 100%;
    margin: 0 auto;
}

/* DESCRIPTION */
#meganelp .wrapper {
    width: 94%;
    max-width: 1280px;
    margin: 0 auto;
}
#meganelp .desc {
    background: #F5F5F5;
    background-size: 100%;
    text-align: center;
    margin: 0;
    padding: 100px 0 60px;
}
.blue {
    color: #7D9AA6;
}
.green {
    color: #788D2A;
}
.brown {
    color: #997A4D;
}
.red {
    color: #AD5231;
}
#meganelp .desc h2 {
    font-size: 40px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    letter-spacing: 2px;
    align-self: center;
    align-items: center;
    align-content: center;
}
#meganelp .desc h2 img {
    max-width: 220px;
    margin-right: 15px;
}
#meganelp .desc p {
    font-size: 18px;
    line-height: 220%;
    font-weight: 400;
    margin-top: 30px;
}
#meganelp .tab-outer {
    background: #F5F5F5;
    background-size: 100%;
    text-align: center;
    margin: 0;
    padding: 0 0 120px;
}
#meganelp .tabs {
    display:flex;
    gap:40px;
    justify-content:center;
}
#meganelp .tab-btn {
    position:relative;
    width:48%;
    aspect-ratio: 1092 / 552;
    border-radius: 20px;
    border:none;
    cursor:pointer;
    overflow:hidden;
    background:none;
    padding:0;
}
#meganelp .tab-btn img {
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(100%);
    transition:
        transform .4s ease,
        filter .4s ease;
}
#meganelp .tab-btn.active img{
    filter:grayscale(0%);
}
#meganelp .tab-btn:hover img{
    transform:scale(1.15);
}
#meganelp .tab-text{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:white;
    font-size:24px;
    font-weight:bold;
    text-shadow:0 0 10px rgba(0,0,0,.8);
    pointer-events:none;
    z-index:2;
}
#meganelp .content{
    margin-top:40px;
    text-align:center;
    font-size:22px;
}
#meganelp .tab-panel{
    display:none;
}
#meganelp .tab-panel.active{
    display:block;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
    #meganelp .desc {
        padding: 60px 0 40px;
    }
    #meganelp .desc h2 {
        font-size: calc(32 / 960 * 100vw);
    }
    #meganelp .desc h2 img {
        max-width: 200px;
        margin-right: 15px;
    }
    #meganelp .desc p {
        font-size: calc(17 / 960 * 100vw);
        line-height: 220%;
        font-weight: 400;
        margin-top: 30px;
    }
    #meganelp .tab-outer {
        padding: 0 0 80px;
    }
    #meganelp .tab-text{
        font-size: calc(20 / 960 * 100vw);
    }
}
@media (max-width: 767px) {
    #meganelp .wrapper {
        width: 90%;
        max-width: 90vw;
    }
    #meganelp .desc {
        padding: calc(40 / 375 * 100vw) 0;
    }
    #meganelp .desc_cat {
        padding: calc(40 / 375 * 100vw) 0;
    }
    #meganelp .desc h2 img {
        max-width: 180px;
    }
    #meganelp .desc h2 {
        font-size: calc(21 / 480 * 100vw);
        line-height: 190%;
    }
    #meganelp .desc p {
        font-size: calc(13 / 480 * 100vw);
        line-height: 210%;
        margin-top: calc(10 / 375 * 100vw);
    }
    #meganelp .tab-outer {
        padding: 0 0 calc(40 / 375 * 100vw);
    }
    #meganelp .tabs {
        gap:20px;
    }
    #meganelp .tab-btn {
        aspect-ratio: 356 / 368;
        border-radius: 20px;
    }
    #meganelp .tab-text{
        font-size: calc(16 / 480 * 100vw);
    }
}

/* MENU */
#meganelp .menu {
    text-align: center;
    margin: 0;
    padding: 80px 0 60px;
}
#meganelp .menu img.index {
    width: 40%;
    max-width: 240px;
}
#meganelp .menu ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: flex-start;
    flex-wrap: wrap;
    margin: 20px auto 0;
    padding: 0;
}
#meganelp .menu ul li {
    border-radius: 30px;
    overflow: hidden;
    width: 23%;
    gap: 30px;
}
#meganelp .menu ul li:nth-child(1) {
    border: 2px solid #87A1B2;
}
#meganelp .menu ul li:nth-child(2) {
    border: 2px solid #8FB6BA;
}
#meganelp .menu ul li:nth-child(3) {
    border: 2px solid #C6B59C;
}
#meganelp .menu ul li:nth-child(4) {
    border: 2px solid #9EB988;
}
#meganelp .menu ul li .model {
    width: 100%;
    aspect-ratio: 533 / 660;
}
#meganelp .menu a {
    transition: opacity .8s ease-in-out;
    text-decoration: none;
}
#meganelp .menu a:hover {
    opacity: .5;
}
#meganelp .menu ul li .info {
    padding: 30px 0;
    text-align: center;
}
#meganelp .menu ul li .info h6 {
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 18px;
    font-weight: 600;
}
#meganelp .menu ul li .info h6::before {
    content: '';
    width: 40px;
    height: 3px;
    border-radius: 10px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}
#meganelp .menu ul li:nth-child(1) .info h6::before {
    background: #87A1B2;
}
#meganelp .menu ul li:nth-child(2) .info h6::before {
    background: #8FB6BA;
}
#meganelp .menu ul li:nth-child(3) .info h6::before {
    background: #C6B59C;
}
#meganelp .menu ul li:nth-child(4) .info h6::before {
    background: #9EB988;
}
#meganelp .menu ul li .info img {
    width: 70%;
    margin-top: 30px;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
    #meganelp .menu {
        padding: 10px 0 40px;
    }
    #meganelp .menu ul li .info h6 {
        font-size: calc(17 / 960 * 100vw);
    }
}
@media (max-width: 767px) {
    #meganelp .menu {
        padding: 0;
    }
    #meganelp .menu img.index {
        width: 50%;
        max-width: calc(120 / 375 * 100vw);
    }
    #meganelp .menu ul {
        margin: calc(20 / 375 * 100vw) auto 0;
    }
    #meganelp .menu ul li {
        width: 48.5%;
        margin: calc(6 / 375 * 100vw) 0;
    }
    #meganelp .menu_banner ul li {
        width: 100%;
    }
    #meganelp .menu ul li .info h6 {
        font-size: calc(13 / 480 * 100vw);
    }
    #meganelp .menu ul li .info img {
        width: 60%;
        margin-top: 30px;
    }
}

/* CHILD TABS */
#meganelp .child-tabs {
    display:flex;
    gap:30px;
    width: 94%;
    max-width: 1280px;
    margin: 40px auto;
    justify-content: center;
}
#meganelp .child-btn {
    flex:1;
    height:48px;
    border:none;
    cursor:pointer;
    width: 48%;
    max-width: 300px;
    background: #D8D8D8;
    color: #9A9A9A;
    border-radius: 50px;
    font-size: 20px;
    font-family: "Karla", sans-serif;
    font-weight: 500;
}
#meganelp .child-btn.active {
    background:#464646;
    color:#fff;
}
#meganelp .child-panel {
    display:none;
}
#meganelp .child-panel.active{
    display:block;
}
/*#meganelp .child-content {
    width: 94%;
    max-width: 1280px;
    margin: 0 auto;
}*/
@media screen and (min-width: 768px) and (max-width: 1080px) {
    #meganelp .child-tabs {
        gap:15px;
        margin: 35px auto;
    }
    #meganelp .child-btn {
        height:42px;
        font-size: calc(20 / 960 * 100vw);
    }
}
@media (max-width: 767px) {
    #meganelp .child-tabs {
        gap:15px;
        margin: calc(30 / 375 * 100vw) auto calc(15 / 375 * 100vw);
    }
    #meganelp .child-btn {
        height:42px;
        font-size: 16px;
    }
}

/* TITLE */
#meganelp .title {
    text-align: center;
}
#meganelp .title .number {
    font-size: 18px;
    position: relative;
    font-family: "Karla", sans-serif;
    font-weight: 500;
}
#meganelp .pickup {
    width: 90%;
    font-size: calc(24 / 960 * 100vw);
    position: relative;
    font-family: "Karla", sans-serif;
    font-weight: 500;
    margin: 0 auto 40px;
    padding: 0;
    text-transform: uppercase;
    line-height: 1.2;
}
#meganelp .pickup-image {
    width: 100%;
}
#meganelp .mds {
    width: 90%;
    font-size: 36px;
    position: relative;
    font-family: "Karla", sans-serif;
    font-weight: 500;
    margin: 0 auto 40px;
    padding: 0;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
}
#meganelp .choose {
    width: 100%;
    font-size: 17px;
    position: relative;
    font-weight: 500;
    margin: 0 auto 10px;
    padding: 0;
}
#meganelp .choose span {
    position: relative;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
    #meganelp .title .number {
        font-size: calc(16 / 960 * 100vw);
    }
    #meganelp .pickup {
        font-size: calc(24 / 960 * 100vw);
        margin-bottom: calc(20 / 960 * 100vw);
    }
    #meganelp .mds {
        font-size: calc(24 / 960 * 100vw);
    }
    #meganelp .choose {
        font-size: calc(16 / 960 * 100vw);
    }
}
@media (max-width: 767px) {
    #meganelp .title .number {
        font-size: 14px;
    }
    #meganelp .pickup {
        width: 96%;
        font-size: 26px;
        margin: 0 auto calc(20 / 375 * 100vw);
        line-height: 1.4;
    }
    #meganelp .mds {
        width: 96%;
        font-size: calc(28 / 480 * 100vw);
        margin: 0 auto calc(20 / 375 * 100vw);
        line-height: 1.4;
    }
    #meganelp .choose {
        font-size: calc(18 / 480 * 100vw);
        line-height: 1.8;
    }
    #meganelp .choose span {
        position: relative;
        font-size: calc(13 / 480 * 100vw);
    }
}
#meganelp .title .number::before,
#meganelp .office .pickup::before,
#meganelp .workout .pickup::before,
#meganelp .date .pickup::before,
#meganelp .outdoor .pickup::before,
#meganelp .mds::before {
    content: '';
    width: 40px;
    height: 3px;
    border-radius: 10px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}
#meganelp .choose span::before {
    content: '';
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 50%;
    opacity: .3;
    transform: translateX(-50%);
}
#meganelp .office .title .number::before,
#meganelp .office .pickup::before,
#meganelp .office .choose span::before {
    background: #87A1B2;
}
#meganelp .workout .title .number::before,
#meganelp .workout .pickup::before,
#meganelp .workout span::before {
    background:#8FB6BA;
}
#meganelp .date .title .number::before,
#meganelp .date .pickup::before,
#meganelp .date span::before {
    background:#C6B59C;
}
#meganelp .outdoor .title .number::before,
#meganelp .outdoor .pickup::before,
#meganelp .outdoor span::before {
    background:#9EB988;
}
#meganelp .mds::before {
    background:#D8D8D8;
}
#meganelp .title h3 {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.6;
    margin: 20px 0 0;
    padding: 0;
}
#meganelp .title .jp {
    font-size: 18px;
    font-weight: 600;
    margin-top: -3px;
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
    #meganelp .title h3 {
        font-size: 40px;
        margin: calc(20 / 960 * 100vw) 0 0;
    }
    #meganelp .title .jp {
        font-size: calc(16 / 960 * 100vw);
    }
}
@media (max-width: 767px) {
    #meganelp .title h3 {
        font-size: calc(30 / 480 * 100vw);
        margin: calc(16 / 375 * 100vw) 0 0;
        padding: 0;
    }
    #meganelp .title .jp {
        font-size: calc(12 / 480 * 100vw);
        font-weight: 600;
        margin-top: -5px;
    }
}

#meganelp .layout01 dl,
#meganelp .layout02 dl,
#meganelp .layout03 dl,
#meganelp .layout03b dl {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    align-self: stretch;
    align-content: center;
    margin: 0;
    padding: 10px 10px 0;
    flex-wrap: wrap;
    gap: 5px;
}
#meganelp .layout01 dl dt {
    margin: 0;
    padding: 0;
    width: 65%;
    aspect-ratio: 1212 / 1080;
}
#meganelp .layout01 dl dd {
    margin: 0;
    padding: 0;
    width: calc(35% - 9px);
    aspect-ratio: 672 / 1080;
}
#meganelp .layout02 dl dt {
    margin: 0;
    padding: 0;
    width: 54%;
    aspect-ratio: 972 / 912;
}
#meganelp .layout02 dl dd {
    margin: 0;
    padding: 0;
    width: calc(46% - 9px);
    aspect-ratio: 912 / 912;
}
#meganelp .layout02 dl dd .img {
    width: 60%;
    max-width: 360px;
    margin: -20px auto 0;
}
#meganelp dl dd a {
    transition: .5s opacity ease-in-out;
}
#meganelp dl dd a:hover {
    text-decoration: none;
    opacity: .7;
}
#meganelp dl dd .reason {
    width: 80%;
    max-width: 540px;
    margin: 0 auto;
}
#meganelp dl dd .reason {
    margin: 0 auto 20px auto;
    padding: 0;
}
#meganelp dl dd .reason-list-inner {
    width: 100%;
}
#meganelp dl dd .reason li {
    margin: 10px 0;
    padding: 0 0 0 25px;
    text-align: left;
    font-size: 15px;
    position: relative;
    line-height: 2;
}
#meganelp dl dd .reason li::before {
    position: absolute;
    display: block;
    content: '';
    width: 15px;
    height: 15px;
    left: 0;
    top: 7px;
}
#meganelp .layout03 dl dt {
    margin: 0;
    padding: 0;
    width: 65%;
    aspect-ratio: 1212 / 830;
}
#meganelp .layout03 dl dd {
    margin: 0;
    padding: 0;
    width: calc(35% - 9px);
    aspect-ratio: 672 / 830;
}
#meganelp .layout03b dl dt {
    margin: 0;
    padding: 0;
    width: 55%;
    aspect-ratio: 1040 / 640;
}
#meganelp .layout03b dl dd {
    margin: 0;
    padding: 0;
    width: calc(45% - 9px);
    aspect-ratio: 844 / 640;
}
#meganelp .office dl dd .reason li::before {
    background: url(/cms/contents/feature/sun_mens_fashion/img/arr01.png) center center no-repeat;
    background-size: contain;
}
#meganelp .workout dl dd .reason li::before {
    background: url(/cms/contents/feature/sun_mens_fashion/img/arr02.png) center center no-repeat;
    background-size: contain;
}
#meganelp .date dl dd .reason li::before {
    background: url(/cms/contents/feature/sun_mens_fashion/img/arr03.png) center center no-repeat;
    background-size: contain;
}
#meganelp .outdoor dl dd .reason li::before {
    background: url(/cms/contents/feature/sun_mens_fashion/img/arr04.png) center center no-repeat;
    background-size: contain;
}
#meganelp dd {
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
#meganelp .office dd {
    background: #DBE3E8;
}
#meganelp .workout dd {
    background: #E0EBE2;
}
#meganelp .date dd {
    background: #EEE9E1;
}
#meganelp .outdoor dd {
    background: #E2EADB;
}
#meganelp .text {
    width: 100%;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 16px;
}
#meganelp .text2 {
    width: 100%;
    margin: 20px auto 0;
    line-height: 2;
    font-size: 11px;
}
#meganelp .point {
    width: 86%;
    max-width: 560px;
    margin: 60px auto 0;
    background: #fff;
    padding: 30px 10px;
    position: relative;
    z-index: 1;
    border-radius: 20px;
}
#meganelp .point img.overlay {
    width: 100%;
    max-width: 170px;
    position: absolute;
    z-index: 2;
    top: -45px;
    left: -20px;
}
#meganelp .spacer {
    margin-top: 100px;
}
#meganelp .spacer2 {
    margin-top: 20px!important;
    width: 74%!important;
    max-width: 400px!important;
}
.tb {
    display: none;
}
@media screen and (min-width: 1995px) {

    #meganelp .layout02 dl dd .img {
        width: 100%;
        max-width: 100%;
        padding: 0 20%;
    }
    #meganelp dl dd .reason {
        width: 90%;
        max-width: 500px;
        margin: -10px auto 25px;
    }
    #meganelp dl dd a {
        display: block;
        width: 100%;
    }
}
@media screen and (min-width: 1061px) and (max-width: 1280px) {
    #meganelp .spacer2 {
        width: 90%!important;
        max-width: 400px!important;
    }
    #meganelp dl dd .reason li {
        margin: 5px 0;
        margin-bottom: 0;
    }
    #meganelp .text {
        font-size: calc(13 / 960 * 100vw);
        line-height: 1.8;
    }
    #meganelp .text2 {
        margin: calc(25 / 960 * 100vw) auto 0;
        font-size: calc(9 / 960 * 100vw);
        line-height: 1.6;
    }
    #meganelp dl dd .reason li {
        font-size: calc(13 / 960 * 100vw);
    }
    .tb {
        display: block;
    }
}
@media screen and (min-width: 768px) and (max-width: 1080px) {
    .tb {
        display: block;
    }
    #meganelp .layout02 dl dd .img {
        width: 100%;
        max-width: 100%;
        padding: 0 20%;
        margin: -15px auto -15px;
    }
    #meganelp dl dd .reason {
        width: 90%;
        max-width: 500px;
        margin: -10px auto 0;
    }
    #meganelp dl dd .reason {
        margin: 0 0 15px;
        padding: 0;
    }
    #meganelp dl dd .reason li {
        line-height: 1.7;
        margin: 8px 0;
        margin-bottom: 0;
        font-size:  calc(14 / 960 * 100vw);
    }
    #meganelp dl dd .reason li::before {
        top: 5px;
    }
    #meganelp .text {
        font-size: calc(15 / 960 * 100vw);
        line-height: 1.9;
    }
    #meganelp .text2 {
        margin: calc(15 / 960 * 100vw) auto 0;
        font-size: calc(10 / 960 * 100vw);
        line-height: 1.9;
    }
    #meganelp .point {
        width: 90%;
        max-width: 480px;
        margin:  calc(30 / 960 * 100vw) auto 0;
        padding:  calc(25 / 960 * 100vw) 4%;
    }
    #meganelp .point img.overlay {
        max-width: 110px;
        top: -30px;
        left: -20px;
    }
    #meganelp .spacer {
        margin-top:  calc(60 / 960 * 100vw);
    }
    #meganelp .spacer2 {
        margin-top: 5px!important;
        width: 70%!important;
        max-width: 360px!important;
    }
    #meganelp .layout03 dl dt {
        margin: 0;
        padding: 0;
        width: 55%;
        aspect-ratio: auto;
    }
    #meganelp .layout03 dl dd {
        margin: 0;
        padding: 0;
        width: calc(45% - 9px);
        aspect-ratio: auto;
    }
    #meganelp .spacer2 {
        width: 90%!important;
        max-width: 400px!important;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #meganelp .text {
        font-size: calc(16 / 960 * 100vw);
    }
    #meganelp .text2 {
        margin: calc(16 / 960 * 100vw) auto 0;
    }
    #meganelp dl dd .reason li {
        font-size:  calc(15 / 960 * 100vw);
    }
}
@media (max-width: 1024px) {
    #meganelp .layout01 dl dt {
        width: 100%;
        aspect-ratio: auto;
    }
    #meganelp .layout01 dl dd {
        width: 100%;
        aspect-ratio: auto;
        padding: calc(40 / 960 * 100vw) 4%;
    }
    #meganelp .layout02 dl dt {
        margin: 0;
        padding: 0;
        width: 100%;
        aspect-ratio: auto;
    }
    #meganelp .layout02 dl {
        margin-top: -5px;
        flex-direction: column-reverse;
    }
    #meganelp .layout02 dl dd {
        width: 100%;
        aspect-ratio: auto;
        padding: calc(40 / 960 * 100vw) 4%;
    }
    #meganelp .layout03 dl dt {
        width: 100%;
        aspect-ratio: auto;
    }
    #meganelp .layout03 dl dd {
        width: 100%;
        padding: calc(40 / 960 * 100vw) 4%;
    }
    #meganelp .spacer2 {
        margin-top: 15px!important;
        width: 65%!important;
        max-width: 370px!important;
    }
}
@media (max-width: 767px) {
    .tb {
        display: none;
    }
    #meganelp .layout01 dl dt {
        width: 100%;
        aspect-ratio: auto;
    }
    #meganelp .layout01 dl dd {
        margin: 0;
        padding: calc(30 / 375 * 100vw) 0 calc(40 / 375 * 100vw);
        width: 100%;
        aspect-ratio: auto;
    }
    #meganelp .layout02 dl dt {
        margin: 0;
        padding: 0;
        width: 100%;
        aspect-ratio: auto;
    }
    #meganelp .layout02 dl {
        margin-top: -5px;
        flex-direction: column-reverse;
    }
    #meganelp .layout02 dl dd {
        margin: 0;
        padding: calc(30 / 375 * 100vw) 0 calc(40 / 375 * 100vw);
        width: 100%;
        aspect-ratio: auto;
    }
    #meganelp .layout02 dl dd .img {
        width: 75%;
        margin: -10px auto 0;
    }
    #meganelp dl dd .reason {
        width: 90%;
        max-width: 0 auto;
    }
    #meganelp dl dd .reason {
        margin: 0 auto 10px;
        padding: 0;
    }
    #meganelp dl dd .reason li {
        font-size: calc(12 / 480 * 100vw);
    }
    #meganelp dl dd .reason li::before {
        top: 7px;
    }
    #meganelp .layout03 dl dt {
        width: 100%;
        aspect-ratio: auto;
    }
    #meganelp .layout03 dl dd {
        margin: 0;
        padding: calc(30 / 375 * 100vw) 0 calc(40 / 375 * 100vw);
        width: 100%;
        aspect-ratio: auto;
    }
    #meganelp .layout03b dl dt {
        width: 100%;
        aspect-ratio: auto;
    }
    #meganelp .layout03b dl dd {
        margin: 0;
        padding: calc(30 / 375 * 100vw) 0 calc(40 / 375 * 100vw);
        width: 100%;
        aspect-ratio: auto;
    }
    #meganelp .office dd,
    #meganelp .workout dd,
    #meganelp .date dd,
    #meganelp .outdoor dd {
        border-radius: 16px;
    }
    #meganelp .text {
        font-size: calc(13 / 480 * 100vw);
    }
    #meganelp .point {
        width: 90%;
        margin: calc(35 / 375 * 100vw) auto 0;
        padding: calc(20 / 375 * 100vw) 3%;
        border-radius: 16px;
    }
    #meganelp .point img.overlay {
        max-width: 140px;
        top: -30px;
        left: -20px;
    }
    #meganelp .spacer {
        margin-top: calc(40 / 375 * 100vw);
    }
    #meganelp .spacer2 {
        margin-top: calc(15 / 375 * 100vw)!important;
        width: 76%!important;
        max-width: 380px!important;
    }
}
@media (max-width: 420px) {
    #meganelp .spacer2 {
        width: 85% !important;
        max-width: 380px !important;
    }
}
@media (max-width: 420px) {
    #meganelp .desc h2 {
        font-size: calc(21 / 375 * 100vw);
    }
    #meganelp .desc p {
        font-size: calc(13 / 375 * 100vw);
    }
    #meganelp .tab-text{
        font-size: calc(16 / 375 * 100vw);
    }
    #meganelp .menu ul li .info h6 {
        font-size: calc(13 / 375 * 100vw);
    }
    #meganelp .pickup {
        font-size: 23px;
    }
    #meganelp .mds {
        font-size: calc(28 / 375 * 100vw);
    }
    #meganelp .choose {
        font-size: calc(18 / 375 * 100vw);
    }
    #meganelp .choose span {
        position: relative;
        font-size: calc(13 / 375 * 100vw);
    }
    #meganelp .title h3 {
        font-size: calc(30 / 375 * 100vw);
    }
    #meganelp .title .jp {
        font-size: calc(12 / 375 * 100vw);
    }
    #meganelp .text {
        font-size: calc(13 / 375 * 100vw);
    }
    #meganelp dl dd .reason li {
        font-size: calc(13 / 375 * 100vw);
    }
}
/* SWIPER */
#meganelp #brand {
    padding: 80px 0;
}
#meganelp #styling {
    background: #F5F5F5;
    padding: 80px 0;
}
#meganelp #recommend {
    padding: 100px 0 100px;
}
#meganelp #banner {
    padding: 80px 0 100px;
}
#meganelp .text-title {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    text-align: center;
    padding: 0;
    margin-bottom: 30px;
    letter-spacing: 1px;
}
#meganelp .swipe_area {
    margin: 0;
    padding: 0;
}
#meganelp #recommend .swipe_wrapper {
    width: 94%;
    max-width: 94%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
#meganelp .swipe_wrapper {
    width: 94%;
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;
}
#meganelp .item {
    background: #FFF;
    border-radius: 10px;
    width: 80%;
    max-width: 540px;
    margin: 0 auto;
    padding: 30px 20px 20px;
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    align-content: stretch;
}
#meganelp .rk {
    background: #FFF;
    padding: 0 0 20px;
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
    letter-spacing: 0.5px;
    position: relative;
}
#meganelp .item .image {
   width: 50%;
   margin-right: 30px;
}
#meganelp .item .image img {
    width: 100%;
}
#meganelp .rk .image {
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}
#meganelp .item > div {
    width: calc(50% - 20px);
    text-align: left;
}
#meganelp .item > div a:hover {
    opacity: .8;
    text-decoration: none;
}
#meganelp .item .brand-name,
#meganelp .rk .brand-name {
    font-weight: 600;
    font-size: 14px;
}
#meganelp .item .goods-name,
#meganelp .rk .goods-name {
    font-size: 12px;
    margin-bottom: 0;
}
#meganelp .item .price,
#meganelp .rk .price {
    font-size: 16px;
    display: inline;
    color: #000;
}
#meganelp .item .memo {
    font-size: 10px;
    margin-top: 5px;
}
#meganelp .item .price::after,
#meganelp .rk .price::after {
    font-size: 10px;
    content: " (税込)";
}
#meganelp .center {
    justify-content: center;
    text-align: center;
}
#meganelp .brd {
    width: 30%;
    max-width: 210px;
    margin: 0 15px;
}
#meganelp .block-top-title--en {
    font-size: 15px;
    line-height: 1.3;
    color: #095540;
    letter-spacing: 1px;
    margin-bottom: 2px;
}
#meganelp .block-top-title {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 30px;
}
#meganelp .rank {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 0;
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    line-height: 24px;
    text-align: center;
    background: #999999;
}
#meganelp .block-top-more-btn {
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", sans-serif;
    display: block;
    width: 230px;
    margin: 30px auto 0;
    padding: 9px 28px 10px;
    border: 1px solid #000;
    border-radius: 20px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.33334;
    text-align: center;
    color: #000;
    background: #FFF url(https://www.meganeichiba.jp/img/usr/common/ico_arrow_more_sp.png) center right 23px / 5.5px auto no-repeat;
    transition: 0.3s;
    text-decoration: none;
}
#meganelp .block-top-more-btn:hover {
  border: 1px solid #1b5540;
  color: #ffffff;
  background: #1b5540 url(https://www.meganeichiba.jp/img/usr/common/ico_arrow_more_white.png) center right 23px / 5.5px auto no-repeat;
}
#meganelp .banner {
    width: 30%;
}
@media screen and (min-width: 1061px) and (max-width: 1280px) {
    #meganelp .item {
        padding: calc(15 / 960 * 100vw) 4%;
    }
}
@media screen and (min-width: 1023px) and (max-width: 1080px) {
    #meganelp .item {
        width: 90%;
        margin-top: 20px;
        max-width: 480px;
        padding: 25px 4%;
    }
    #meganelp .block-top-title {
        font-size: calc(28 / 960 * 100vw);
    }
}
@media (max-width: 767px) {
    #meganelp #brand,
    #meganelp #styling, {
        padding: calc(60 / 375 * 100vw) 0;
    }
    #meganelp #banner {
        padding: calc(60 / 375 * 100vw) 0 calc(60 / 375 * 100vw);
    }
    #meganelp .text-title {
        font-size: 20px;
        margin-bottom: calc(15 / 375 * 100vw);
    }
    #meganelp .swipe_area {
        padding: 0;
    }
    #meganelp #recommend .swipe_wrapper,
    #meganelp #banner .swipe_wrapper {
        width: 94%;
        max-width: 94vw;
        margin: 0 0 0 6%;
        overflow: hidden;
    }
    #meganelp #brand .swipe_wrapper {
        width: 100%;
        max-width: 100vw;
        margin: 0 auto;
        overflow: hidden;
        padding: 0 4%;
    }
    #meganelp .swipe_wrapper .brd {
        width: 31%;
        margin: 0 calc(5 / 375 * 100vw);
    }
    #meganelp .block-top-title--en {
        font-size: 14px;
    }
    #meganelp .block-top-title {
        font-size: calc(24 / 375 * 100vw);
    }
    #meganelp .item {
        width: 90%;
        margin: calc(10 / 375 * 100vw) auto 0;
        padding: calc(20 / 375 * 100vw) 3%;
    }
    #meganelp .rk {
        padding: 0 0 calc(20 / 375 * 100vw);
    }
    #meganelp .block-top-more-btn {
        margin: calc(20 / 375 * 100vw) auto 0;
    }
    #meganelp .spacer {
        margin-bottom: calc(20 / 375 * 100vw);
    }
}

/* fade-in animation */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .fade-in.show {
    opacity: 1;
    transform: translateY(0);
  }


/* PICK UP FRAME */
@media screen and (min-width: 1061px) {
    #meganelp #recommend .itemswiper .swiper-slide {
    width: 325px !important;
}
}