@import"https://fonts.googleapis.com/css?family=Roboto:400,700";
@import"https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese";
@charset "UTF-8";
@font-face {
    font-family: aderans_mens-fonts;
    src: url('/mens/common/rn-font//aderans_mens-fonts.eot');
    src: url('/mens/common/rn-font//aderans_mens-fonts.eot?#iefix') format("eot"), url('/mens/common/rn-font//aderans_mens-fonts.woff') format("woff"), url('/mens/common/rn-font//aderans_mens-fonts.ttf') format("truetype"), url('/mens/common/rn-font//aderans_mens-fonts.svg#aderans_mens-fonts') format("svg")
}
@media print {
	body { display: none; }
}

/* common */

main {
    background: #fff;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
}
img,.mainimg h1 {
	transition:all 0.3s ease;
}
section img {
  opacity: 0;
}
section img.lazyloaded {
  opacity: 1;
}
.pc {
	display: block;
}
.sp {
	display: none;
}
p {
 visibility: hidden;
}
.wf-active p {
 visibility: visible;
}
.inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
p.lead {
    font-size: clamp(16px, calc(0.6166vw + 13.5766px), 22px);
    font-weight: 600;
    line-height: 1.8;
}
p.lead span {
    font-size: 80%;
}
p.note {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.65;
}
figure img,
picture img {
    max-width: 100%;
}

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

.movie {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    max-width: initial;
    margin: 0 auto;
}
.movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
} 

/* ====================================== */
/* fv */

.fv {
    max-width: 1920px;
    background: url(../images/fv_bg.webp) center / cover no-repeat;
    margin: 0 auto;
}
.fv picture {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 1200px;
}
.fv picture img {
    max-width: 1252px;
}

/* ====================================== */
/* cvbtn */

.cvbtn {
    transition: .3s;
}
.cvbtn:hover {
  transform: scale(1.1);
}
.cvbtn.fvtop {
    padding: 0 0 2em 0;
    position: relative;
    z-index: 2;
    left: 7%;
}
.cvbtn.middle {
    display: table;
    margin: 4em auto 0 auto;
}

/* ====================================== */
/* section common */

/* common */
section {
    padding: 8em 0;
}

/* about */
section.about {
    background: url(../images/about_bg.jpg) center top / 1200px auto no-repeat;
    padding: 3em 0 8em 0;
}
section.about ul {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
section.about li {
    position: relative;
}
section.about li:nth-child(2) {
    position: absolute;
    bottom: 0;
    z-index: 1;
}
section.about h2 {
    margin-bottom: 2em;
}

/* tvcm */
section.tvcm {
    background: #2D2D2D url(../images/tvcm_bg.png) right top / contain no-repeat;
    color: white;
    text-align: center;
}
section.tvcm h2 {
    padding-bottom: 8px;
    display: table;
    margin: 0 auto 0.5em auto;
    line-height: 1;
    border-bottom: 1px solid;
    font-weight: 400;
    font-size: clamp(34px, calc(1.3631vw + 28.6431px), 45px);
}
section.tvcm p {
    font-size: clamp(16px, calc(0.7435vw + 13.0781px), 22px);
    line-height: 1.5;
    margin-bottom: 1.5em;
    font-weight: 600;
}

/* taiken */
section.taiken {
    background: url(../images/taiken_bg.jpg) center top / 100% auto no-repeat;
    padding: 4em 0 8em 0;
} 
section.taiken h2,
section.taiken p {
    display: table;
    text-align: center;
}
section.taiken p.lead {
    margin: 0 auto 1em auto;
}
section.taiken p.note {
    margin: 1em auto 1em auto;
}
section.taiken h2 {
    line-height: 1;
    margin: 0 auto 0.25em auto;
}
section.taiken.btm p.lead {
    background: rgba(256, 256, 256, 0.85);
    padding: 1em;
    border: 1px solid #ccc;
}

/* best */
section.best {
    background: #000;
    position: relative;
}
section.best .inner {
    z-index: 1;
}
section.best:before,
section.best:after {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
section.best:before {
    background-image: url(../images/best_bg_right.png);
}
section.best:before {
    background-image: url(../images/best_bg_left.png);
}
section.best ul li {
    margin-bottom: 2em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
section.best ul li:last-child {
    margin-bottom: 0;
}
section.best ul li:nth-child(2) {
    justify-content: flex-end;
}
section.best ul li:first-child figure {
    position: relative;
    overflow: hidden;
}
section.best ul li:first-child picture {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    width: 62%;
}
section.best img.bg {
    position: absolute;
}
section.best img.bg.right {
    top: 0;
    right: 0;
}
section.best img.bg.left {
    bottom: 0;
    left: 0;
}

/* mainte */
section.mainte {
    background: #E24957 url(../images/mainte_bg.webp) center / cover no-repeat;
}
section.mainte figure h2 {
    margin: 0 auto 1em auto;
}
section.mainte .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* course */
section.course {
    background: #F1F1F1 url(../images/course_bg.png) center top / 1200px auto no-repeat;
}
section.course p.lead {
    margin: 0 0 1.5em 0;
}

/* firstpack */
section.firstpack {
    background: #F1F1F1;
    padding: 4em 0 8em 0;
}
section.firstpack .inner {
    max-width: 1000px;
}
section.firstpack h2 {
    margin: 0 auto 1em auto;
    display: table;
    text-align: center;
}
section.firstpack p.lead {
    text-align: center;
    margin: 0 auto 2em auto;
}
section.firstpack ul {
    margin-bottom: 4em;
}
section.firstpack figure p.note {
    text-align: right;
    margin: 0.5em 0 0 0;
    font-size: clamp(15px, calc(0.1028vw + 14.5961px), 16px);
    font-weight: 600;
}
section.firstpack ul li {
    margin-bottom: 2em;
}

/* zomo */
section.zomo {
    background: #D40012 url(../images/zomo_bg.png) repeat;
}
section.zomo ul li {
    padding: 3em;
    background: white;
}
section.zomo p.note {
    margin: 2em 0 0 auto;
    text-align: right;
}
section.zomo figure {
    display: table;
    margin: 0 auto;
}
section.zomo h2,
section.best h2 {
    display: table;
}
section.zomo h2 {
    margin: -7em auto 1em auto;
}
section.best h2 {
    margin: -7em auto 0 auto;
}

/* style */
section.style {
    background: url(../images/style_bg.png) center top / 1200px auto no-repeat;
}
section.style figure.volume {
    margin: 0 auto 2em auto;
}
section.style ul li {
    display: table;
    margin: 0 0 2em 0;
}
section.style ul li:nth-child(even) {
    margin: 0 0 2em auto;
}
section.style ul li:last-child {
    margin: 0 0 0 0;
}
section.style p.note {
    margin: 0.5em 0 0 0;
}

/* flow */
section.flow {
    background: #F1F1F1 url(../images/flow_bg.png) repeat;
}
section.flow h2,
section.qa h2 {
    display: table;
    margin: 0 auto 2em auto;
}
section.flow ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 6em auto;
}
section.flow ul:last-of-type {
    margin: 0 auto 5em auto;
}
section.flow ul li:nth-child(2) {
    background: white;
    padding: 0 2em 2em 2em;
    width: 75%;
}
section.flow h3 {
    background: #D40012;
    padding: 0.5em 1.25em;
    border-radius: 1em;
    line-height: 1;
    position: relative;
    color: white;
    top: -1em;
    font-size: clamp(18px, calc(1.1305vw + 13.5570px), 29px);
}
section.flow h3 span {
    font-size: 65%;
}
section.flow dl dt {
    font-size: clamp(19px, calc(0.7194vw + 16.1727px), 26px);
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 1em 0;
}
section.flow dl dd {
    font-size: clamp(15px, calc(0.1028vw + 14.5961px), 16px);
    font-weight: 500;
    line-height: 1.8;
}
section.flow li:first-child {
    position: relative;
    padding-right: 3em;
    width: 25%;
}
section.flow ul:nth-of-type(2) li:first-child picture {
    width: 100%;
    aspect-ratio: 237 / 133;
}
section.flow li:first-child:after {
    content: "";
    height: 1px;
    width: 3em;
    background: black;
    bottom: 50%;
    right: 0;
    display: table;
    position: absolute;
}
section.flow picture {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: table;
}
section.flow figure {
    position: absolute;
    top: -3em;
    left: -3em;
    z-index: 2;
    width: 86px;
    aspect-ratio: 1 / 1;
}
section.flow .sarani {
    display: table;
    margin: 0 auto;
}

/* qa */
section.qa {
    background: #5B5B5B;
}
section.qa li {
    background: white;
    padding: 2.5em;
    margin-bottom: 5em;
}
section.qa dt,
section.qa dd {
    position: relative;
    display: flex;
    align-items: center;
}
section.qa dt {
    font-size: clamp(19px, calc(0.3883vw + 17.5437px), 25px);
    font-weight: 600;
    padding-bottom: 0.5em;
    border-bottom: 2px solid black;
    margin-bottom: 2em;
}
section.qa dd {
    font-size: clamp(14px, calc(0.2589vw + 13.0291px), 18px);
    font-weight: 500;
}
section.qa dt:before,
section.qa dd:before {
    content: "";
    background-repeat;
    background-size: contain;
    width: 36px;
    aspect-ratio: 1 / 1;
    margin-right: 20px;
    flex-shrink: 0;
}
section.qa dt:before {
    background-image: url(../images/qa_q.jpg);
}
section.qa dd:before {
    background-image: url(../images/qa_a.jpg);
}

/* banner-ladies */
.banner-ladies {
    background: #161A35;
    padding: 5em 0 0 0;
}
.banner-ladies a {
    display: table;
    margin: 0 auto;
}
.banner-ladies a:hover {
    opacity: 0.8;
}


/* ====================================== */
/* media query */

@media screen and (max-width: 1177px) {
    .fv picture img {
        max-width: 100%;
    }
}

/* タブレット・スマートフォン向け */
@media screen and (max-width: 767px) {
    /* fv */
    .fv picture img {
        max-width: 100%;
    }
    /* cvbtn */
    .cvbtn.fvtop {
        max-width: 40vw;
    }
    .cvbtn.middle {
        max-width: 45vw;
        margin: 2em auto 0 auto;
    }
    /* section common */
    /* common */
    section .inner,
    section.about ul,
    section.firstpack .inner {
        max-width: 93%;
    }
    section {
        padding: 3em 0;
    }
    /* about */
    section.about {
        background: url(../images/about_bg.jpg) center top / contain no-repeat;
        padding: 3em 0;
    }
    /* taiken */
    section.taiken,
    section.firstpack {
        padding: 4em 0 4em 0;
    }
    section.taiken h2 {
        max-width: 40vw;
    }
    /* best */
    section.best {
        padding: 5em 0 4em 0;
    }
    section.best ul li:nth-child(2) {
        margin: 0 0 1em auto;
    }
    section.best ul li {
        width: 90%;
        margin-bottom: 1em;
    }
    section.best h2 {
        margin: -4em auto 0 auto;
    }
    /* mainte */
    section.mainte picture {
        padding-left: 2em;
    }
    /* course */
    section.course {
        background: url(../images/course_bg.png) center top / contain no-repeat;
    }
    section.course h2 {
        width: 50vw;
        margin: 0 0 0.25em 0;
    }
    /* firstpack */
    section.firstpack h2 {
        width: 75vw;
    }
    section.firstpack ul {
        margin-bottom: 3em;
    }
    /* zomo */
    section.zomo ul li {
        padding: 2em;
    }
    section.zomo figure {
    }
    section.zomo h2 {
        width: 70vw;
        margin: -3em auto 1em auto;
    }
    /* style */
    section.style {
        background: url(../images/style_bg.png) center top / contain no-repeat;
    }
    section.style ul li {
        width: 85%;
    }
    section.style h2 {
        width: 35vw;
    }
    /* flow */
    section.flow h2,
    section.qa h2 {
        width: 25vw;
        margin: 0 auto 2.5em auto;
    }
    section.flow figure {
        top: -1em;
        left: -1em;
        width: 30%;
    }
    section.flow picture {
        width: 20vw;
    }
    section.flow .sarani {
        width: 70vw;
    }
    /* qa */
    section.qa h2 {
        width: 25vw;
        margin: 0 auto 2em auto;
    }
    section.qa li {
        padding: 1.5em;
        margin-bottom: 2em;
    }
    section.qa dt:before,
    section.qa dd:before {
        width: 32px;
    }
    section.qa dt {
        margin-bottom: 1em;
    }
    /* banner-ladies */
    .banner-ladies {
        padding: 4em 0 0 0;
    }
    .banner-ladies a {
        max-width: 70%;
    }
}

/* タブレット向け */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    /* fv */
    .fv picture img {
        max-width: 100%;
    }
    /* cvbtn */  
    .cvbtn.fvtop {
        max-width: 40vw;
    }
    .cvbtn.middle {
        max-width: 45vw;
        margin: 2em auto 0 auto;
    }
    /* section common */
    /* common */
    section .inner,
    section.about ul,
    section.firstpack .inner {
        max-width: 93%;
    }
    section {
        padding: 4em 0;
    }
    /* about */
    section.about {
        background: url(../images/about_bg.jpg) center top / contain no-repeat;
        padding: 3em 0;
    }
    /* taiken */
    section.taiken h2 {
        max-width: 40vw;
    }    
    section.taiken,
    section.firstpack {
        padding: 4em 0 6em 0;
    }
    /* best */
    section.best ul li:nth-child(2) {
        margin: 0 0 1em auto;
    }
    section.best ul li {
        width: 90%;
        margin-bottom: 1em;
    }
    section.best h2 {
        margin: -4em auto 0 auto;
    }
    /* mainte */
    section.mainte picture {
        padding-left: 2em;
    }
    /* course */
    section.course {
        background: url(../images/course_bg.png) center top / contain no-repeat;
    }
    section.course h2 {
        width: 50vw;
        margin: 0 0 0.5em 0;
    }
    /* firstpack */
    section.firstpack h2 {
        width: 75vw;
    }
    section.firstpack ul {
        margin-bottom: 3em;
    }
    /* zomo */
    section.zomo ul li {
        padding: 2em;
    }
    section.zomo figure {
    }
    section.zomo h2 {
        width: 70vw;
        margin: -4em auto 1em auto;
    }
    /* style */
    section.style {
        background: url(../images/style_bg.png) center top / contain no-repeat;
    }
    section.style ul li {
        width: 85%;
    }
    section.style h2 {
        width: 35vw;
    }
    /* flow */
    section.flow h2 {
        width: 25vw;
        margin: 0 auto 2.8em auto;
    }
    section.flow figure {
        top: -2em;
        left: -2em;
        width: 30%;
    }
    section.flow li:first-child {
        width: 30%;
    }
    section.flow .sarani {
        width: 70vw;
    }
    /* qa */
    section.qa h2 {
        width: 25vw;
        margin: 0 auto 2em auto;
    }
    section.qa li {
        padding: 1.5em;
        margin-bottom: 2em;
    }
    section.qa dt {
        margin-bottom: 1em;
    }
    /* banner-ladies */
    .banner-ladies {
        padding: 4em 0 0 0;
    }
    .banner-ladies a {
        max-width: 70%;
    }
}

/* スマートフォン向け（より小さめの画面） */
@media screen and (max-width: 600px) {
    /* common */    
    .pc {
		display: none;
	}	
	.sp {
		display: block;
	}
    p.lead {
        line-height: 1.5;
    }
    p.lead span {
        font-size: inherit;
    }
    /* section common */
    section {
        padding: 3em 0;
    }
    /* fv */
    .fv {
        padding-bottom: 4em;
    }
    .fv h1 {
        position: relative;
        z-index: 2;
        max-width: 90%;
        margin: 0 auto;
    }
    .fv.btm picture:last-of-type {
        position: relative;
    }
    /* fv */
    .fv picture img {
        max-width: 100%;
    }
    .fv.btm {
        padding-bottom: 0;
    }
    /* cvbtn */
    .cvbtn.fvtop {
        max-width: 93%;
        margin: 0 auto;
        position: relative;
        left: 2px;
    }
    .cvbtn {
        position: relative;
        left: 2px;
    }
    .cvbtn.middle {
        max-width: 100%;
    }
    .cvbtn:hover {
        transform: inherit;
        opacity: 0.8;
    }
    /* section common */
    /* common */
    section {
        padding: 2em 0;
    }
    section .inner,
    section.firstpack .inner {
        max-width: 93%;
    }
    /* about */
    section.about {
        background: url(../images/about_bg_sp.jpg) center top / contain no-repeat;
        padding: 3em 0 3em 0;
    }
    section.about ul {
        max-width: 100%;
    }
    /* tvcm */
    section.tvcm {
        background: #2D2D2D url(../images/tvcm_bg_sp.png) right top / contain no-repeat;
    }
    /* taiken */
    section.taiken h2 {
        max-width: 100%;
        margin: 0 auto 0.5em auto;
    }
    section.taiken p.note {
        text-align: left;
    }
    section.taiken.btm {
        background: url(../images/taiken_course_btm_bg_sp.jpg) center top / 100% auto no-repeat;
    }
    /* best */
    section.best:before {
    background-image: url(../images/best_bg_right_sp.png);
    }
    section.best:before {
        background-image: url(../images/best_bg_left_sp.png);
    }
    section.best h2 {
        width: 100%;
    }
    section.best ul li {
        width: 100%;
    }
    /* mainte */
    section.mainte {
        background: #E24957 url(../images/mainte_bg_sp.webp) center / cover no-repeat;
    }
    section.mainte .inner {
        display: block;
    }
    section.mainte figure {
        display: table;
    }
    section.mainte figure h2 {
        margin: 0 auto 0.5em auto;
    }
    section.mainte figure img.subtitle {
        margin: 0 auto 1.5em auto;
    }
    section.mainte picture {
        padding-left: 0;
    }
    section.mainte .cvbtn {
        max-width: 93%;
    }
    /* course */
    section.course {
        background: url(../images/course_bg_sp.png) center top / contain no-repeat;
    }
    section.course p.lead {
        margin: 0 0 1em 0;
    }
    section.course h2 {
        width: 100%;
        margin: 0 0 0.5em 0;
    }
    /* firstpack */
    section.firstpack h2 {
        width: 100%;
        margin: 0 auto 0.5em auto;
    }
    section.firstpack ul {
        margin-bottom: 2em;
    }
    /* zomo */
    section.zomo {
        background: #D40012 url(../images/zomo_bg_sp.png) repeat;
    }
    section.zomo h2 {
        margin: -2em auto 0.5em auto;
    }
    section.zomo ul li {
        padding: 1.5em;
    }
    section.zomo figure,
    section.zomo h2 {
        width: 100%;
    }
    section.zomo p.note {
        margin: 1em auto 0 auto;
        text-align: center;
    }
    /* style */
    section.style {
        background: url(../images/style_bg_sp.png) center top / contain no-repeat;
    }
    /* style */
    section.style ul li {
        width: 100%;
        padding: 0 1em 1em 1em;
    }
    section.style h2 {
        width: 100%;
    }
    section.style p.note {
        margin: 0.25em 0 1em 0;
    }
    section.flow h2,
    section.qa h2 {
        width: 100%;
        margin: 0 auto 2em auto;
    }
    section.flow ul li:nth-child(2) {
        width: 100%;
    }
    section.flow ul {
        flex-flow: column;
        margin: 0 auto 4em auto;
    }
    section.flow ul:nth-of-type(2) li:first-child picture {
        aspect-ratio: initial;
    }
    section.flow dl dt {
        margin: 0 0 0.8em 0;
        line-height: 1.5;
    }
    section.flow li:first-child:after {
        content: none;
    }
    section.flow li:first-child {
        width: 70%;
        padding-right: 0;
        margin: 0 auto 3em auto;
    }
    section.flow picture {
        width: 100%;
    }
    section.flow ul:last-of-type {
        margin: 0 auto 3em auto;
    }
    section.flow figure {
        width: 28%;
        top: -2em;
        left: -2em;
    }
    section.flow li:first-child picture img {
        width: 100%;
    }
    section.flow .sarani {
        width: 100%;
    }
    /* qa */
    section.qa li {
        padding: 1em;
    }
    section.qa dt {
        margin-bottom: 0.5em;
    }
    section.qa dl dt,
    section.qa dl dd {
        line-height: 1.5;
    }
    section.qa dt:before,
    section.qa dd:before {
        width: 8vw;
    }
    /* banner-ladies */
    .banner-ladies {
        padding: 3em 0 0 0;
    }
    .banner-ladies a {
        max-width: 90%;
    }
}