/*==================================================
Fonts
==================================================*/
@import url('https://fonts.googleapis.com/css2?family=Dosis&family=Lato&family=Spartan:wght@300&display=swap');

/*==================================================
cmn
==================================================*/
body {
	margin: 0px;
	padding: 0px;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 1.6rem;
    position: relative;
}
header, nav, div, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd, img, table, tr, td, th, input, textarea, select, a, figure {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	list-style: none;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	line-height: 1.8em;
	font-weight: 500;
}
p {
	margin-bottom: 1em;
	line-height: 2.3333;
}
p:last-child {
	margin: 0;
}
a, input[type="submit"] {
	text-decoration: none;
	color: inherit;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	outline: none;
    cursor: pointer;
}
a:hover, input[type="submit"]:hover {
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
.wrap {
	padding: 0 20px;
	margin: 0 auto;
	box-shadow: none;
	max-width: 1100px;
	width: 100%;
    box-sizing: border-box;
}
.wrap-s {
	padding: 0 20px;
	margin: 0 auto;
	box-shadow: none;
	max-width: 900px;
	width: 100%;
    box-sizing: border-box;
}
.wrap-m {
	padding: 0 20px;
	margin: 0 auto;
	box-shadow: none;
	max-width: 1000px;
	width: 100%;
    box-sizing: border-box;
}
.btn-wrap .btn a {
    border: 2px solid #000;
    padding: 3rem;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    font-weight: bold;
}
.btn-wrap .btn a:hover {
    color: #fff;
    background: #000;
    opacity: 1;
}
.btn-wrap .btn a::after {
    content: '';
    background: url("../../2021aw_men/img/btn-arrow.svg") no-repeat center center;
    background-size: 100%;
    width: 3rem;
    height: 3rem;
    display: block;
    position: absolute;
    top: 50%;
    right: 3rem;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
}
.lato {
    font-family: 'Lato', sans-serif;
    letter-spacing: .1rem;
}
.dosis {
    font-family: 'Dosis', sans-serif;
    letter-spacing: .1rem;
}
.spartan {
    font-family: 'Spartan', sans-serif;
}

/*==================================================
mv
==================================================*/
.main-bg {
    width: 100%;
    position: relative;
}
.main-bg .logo {
    width: 8.855783%;
    position: absolute;
    left: 2.342606%;
    top: 3.2rem;
}
.main-bg .main-bg-img {
    width: 100%;
}
.main-bg .main-tit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 34.846266%;
}

/*==================================================
intro-sec
==================================================*/
.intro-sec {
    padding: 11rem 0 16rem;
}
.intro-sec .wrap {
    max-width: 770px;
}
.intro-sec .intro-sec-tit {
    position: relative;
}
.intro-sec .intro-sec-tit .theme {
    position: absolute;
    left: 0;
    top: -1.4rem;
    line-height: 1;
}
.intro-sec .sec-theme {
    border: 6px solid #000;
    border-radius: 0 15px 0 0;
    padding: 3rem 0;
    text-align: center;
    font-size: 3.8rem;
    font-weight: bold;
    line-height: 1;
}
.intro-sec .catch-box {
    width: 10%;
    border-right: 1px solid #000;
}
.intro-sec .catch {
    transform: rotate(90deg);
    transform-origin: -1rem 4.5rem;
    font-size: 1.2rem;
    line-height: 1;
    width: 280%;
}
.intro-sec .intro-txt {
    width: 90%;
    padding: 5rem 7% 0 5%;
}

/*==================================================
tab-sec
==================================================*/
.tab-sec {
    position: relative;
}
.top-tab-sec {
    border-top: 4px solid #000;
}
.bottom-tab-sec {
    border-bottom: 4px solid #000;
}
.tab-sec .tab-sec-tit {
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
    width: 43.923865%;
    padding: 3.5rem 0;
    line-height: 1;
    margin: 0 auto;
    border: 4px solid #000;
    background: #fff;
    z-index: 2;
}
.tab-sec .tab-sec-tit .svg-tit {
    width: 21.3333333%;
    margin: 0 auto;
}
.tab-sec .tab-sec-tit .svg-tit img {
    vertical-align: text-top;
}
.tab-sec .tab-btn {
    width: 24.75%;
    text-align: center;
}
.tab-sec .tab-btn a {
    width: 100%;
    height: 100%;
    padding: 8rem 0;
    display: block;
}
.men .tab-sec .tab-btn a {
    background: #F5F5F4;
}
.men .tab-sec .tab-btn.current a {
    background: #C4C5BD;
}
.men .tab-sec .tab-btn a:hover {
    background: #C4C5BD;
    opacity: 1;
}
.women .tab-sec .tab-btn a {
    background: #EEF0DF;
}
.women .tab-sec .tab-btn.current a {
    background: #DBE3A2;
}
.women .tab-sec .tab-btn a:hover {
    background: #DBE3A2;
    opacity: 1;
}
.tab-sec .tab-btn.current a:hover {
    opacity: 0.6;
}
.tab-sec .tab-btn figure {
    width: 44.509517%;
    margin: 0 auto 3rem;
}

/*==================================================
ranking-sec
==================================================*/
.ranking-sec {
    padding: 15rem 0 12rem 0;
}
.ranking-sec .ranking-sec-tit {
    width: 45.622%;
    margin-bottom: 14rem;
}
.ranking-sec .ranking-slider-wrap {
    position: relative;
}
.ranking-sec .ranking-slider-wrap .ranking_list_area {
    padding: 4px;
    background: url("../../2021aw_men/img/slide-bg.gif") no-repeat top center;
    background-size: 100% auto;
}
/*.ranking-sec .ranking01 .ranking-slider-wrap::after {
    padding-top: 142.574086%;
}
.ranking-sec .ranking-slider-wrap::after {
    content: '';
    position: absolute;
    border: 4px solid #000;
    top: 0;
    right: 0;
    left: 0;
    padding-top: 141.674086%;
    z-index: -1;
}*/
.ranking-sec .ranking-number {
    position: absolute;
    top: 0;
    transform: translateY(-40%);
    -webkit- transform: translateY(-40%);
    left: 1rem;
}
.ranking-sec .ranking-number p {
    font-size: 6.0rem;
    line-height: 1;
}
.ranking-sec .ranking-mark {
    position: absolute;
    top: 0;
    transform: translateY(-34%);
    -webkit- transform: translateY(-34%);
    right: 1rem;
    width: 22%;
    z-index: 1;
}
.ranking-sec .ranking_txt p {
    padding: 2.4rem 0 0 0;
    line-height: 1;
    font-size: 1.4rem;
}
.ranking-sec .ranking_txt {
    animation-name: fadeOutText;
    animation-duration: 0.5s;
}
.ranking-sec .slick-current .ranking_txt {
    animation-name: fadeInText;
    animation-duration: 2.5s;
}
@keyframes fadeInText {
    0% {
        opacity: 0;         
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOutText {
    0% {
        opacity: 1;         
    }
    100% {
        opacity: 0;
    }
}
.ranking-sec .slick-dots li button:before {
    content: '○';
    font-size: 10px;
    color: #000;
    opacity: 1;
}
.ranking-sec .slick-dots li.slick-active button:before {
    content: '●';
    font-size: 10px;
}
.ranking-sec .ranking-txt-wrap .gray-tit {
    color: #6A6A6A;
    font-weight: bold;
    margin-bottom: 1.6rem;
}
.ranking-sec .ranking-txt-wrap .tit-block {
    margin-bottom: 4rem;
}
.ranking-sec .ranking-txt-wrap .item-tit {
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 3rem;
}
.ranking-sec .ranking-txt-wrap .price-flex {
    justify-content: flex-start;
}
.ranking-sec .ranking-txt-wrap .item-price {
    font-size: 2.6rem;
    vertical-align: bottom;
    line-height: 1;
    margin-bottom: 0;
    vertical-align: middle;
}
.ranking-sec .ranking-txt-wrap .item-price span {
    font-size: 1.4rem;
}
.ranking-sec .ranking-txt-wrap .buy-btn {
    vertical-align: middle;
}
.ranking-sec .ranking-txt-wrap .buy-btn a {
    background: #000;
    color: #fff;
    font-size: 1.3rem;
    padding: 0.3rem 1.7rem;
    line-height: 1;
    vertical-align: sub;
    border: 2px solid #000;
    box-sizing: border-box;
}
.ranking-sec .ranking-txt-wrap .buy-btn a:hover {
    background: #fff;
    color: #000;
    border: 2px solid #000;
    opacity: 1;
}
.ranking-sec .ranking-txt-wrap .item-img {
    width: 18%;
}
.ranking-sec .ranking-txt-wrap .stylist-block {
    margin-bottom: 6rem;
}
.ranking-sec .ranking-txt-wrap .stylist-block .img-box {
    width: 20%;
}
.ranking-sec .ranking-txt-wrap .stylist-block .txt-box {
    width: 76%;
}
.ranking-sec .ranking-txt-wrap .stylist-block .txt-box .stylist-name {
    font-weight: bold;
    margin-bottom: 1rem;
}
.ranking-sec .ranking-txt-wrap .stylist-block .txt-box .stylist-name span {
    letter-spacing: -.05rem;
}
.ranking-sec .ranking-txt-wrap .stylist-block .txt-box p {
    font-size: 1.3rem;
}
.ranking-sec .ranking-txt-wrap .chart-block {
    margin-bottom: 6rem;
}
.ranking-sec .ranking-txt-wrap .chart-block .flex_box {
    align-items: center;
    margin: 0 5%;
    width: 90%;
}
.ranking-sec .ranking-txt-wrap .chart-block .point-box {
}
.ranking-sec .ranking-txt-wrap .chart-block .chart-box {
    width: 67.92%;
    position: relative;
}
.ranking-sec .ranking01 .ranking-txt-wrap .chart-block .chart-box {
    width: 69.4%;
    position: relative;
}
.ranking-sec .ranking-txt-wrap .chart-block .chart-box .chart-svg {
    width: 100%;
    position: relative;
    z-index: 2;
}
.ranking-sec .ranking-txt-wrap .chart-block .chart-box .score-svg {
    position: absolute;
  /*
    transform: translate(-50%,-50%);
    -webkit- transform: translate(-50%,-50%);
  */
}
.men #outer .ranking-txt-wrap .chart-block .chart-box .score-svg.outer01 {
    width: 70.013559%;
    top: 50.6%;
    left: 49.7%;
}
.men #outer .ranking-txt-wrap .chart-block .chart-box .score-svg.outer02 {
    width: 73.162712%;
    top: 54%;
    left: 47.5%;
}
.men #outer .ranking-txt-wrap .chart-block .chart-box .score-svg.outer03 {
    width: 65.569492%;
    top: 53%;
    left: 50%;
}
.men #outer .ranking-txt-wrap .chart-block .chart-box .score-svg.outer04 {
    width: 62.857627%;
    top: 52%;
    left: 50.5%;
}
.men #outer .ranking-txt-wrap .chart-block .chart-box .score-svg.outer05 {
    width: 56.020339%;
    top: 53%;
    left: 47.5%;
}
.men #tops .ranking-txt-wrap .chart-block .chart-box .score-svg.tops01 {
    width: 63.552542%;
    top: 51%;
    left: 51%;
}
.men #tops .ranking-txt-wrap .chart-block .chart-box .score-svg.tops02 {
    width: 62.654237%;
    top: 54.5%;
    left: 48.5%;
}
.men #tops .ranking-txt-wrap .chart-block .chart-box .score-svg.tops03 {
    width: 66.518644%;
    top: 54%;
    left: 54.5%;
}
.men #tops .ranking-txt-wrap .chart-block .chart-box .score-svg.tops04 {
    width: 59.40339%;
    top: 48%;
    left: 51%;
}
.men #tops .ranking-txt-wrap .chart-block .chart-box .score-svg.tops05 {
    width: 61.450847%;
    top: 51%;
    left: 51.5%;
}
.men #bottoms .ranking-txt-wrap .chart-block .chart-box .score-svg.bottoms01 {
    width: 65%;
    top: 49.3%;
    left: 49%;
}
.men #bottoms .ranking-txt-wrap .chart-block .chart-box .score-svg.bottoms02 {
    width: 69.461017%;
    top: 54.9%;
    left: 55.5%;
}
.men #bottoms .ranking-txt-wrap .chart-block .chart-box .score-svg.bottoms03 {
    width: 62.681356%;
    top: 51%;
    left: 52.7%;
}
.men #bottoms .ranking-txt-wrap .chart-block .chart-box .score-svg.bottoms04 {
    width: 63.922034%;
    top: 53.8%;
    left: 51.1%;
}
.men #bottoms .ranking-txt-wrap .chart-block .chart-box .score-svg.bottoms05 {
    width: 65.298305%;
    top: 55.5%;
    left: 49.5%;
}
.men #acce .ranking-txt-wrap .chart-block .chart-box .score-svg.acce01 {
    width: 78.518644%;
    top: 53.6%;
    left: 50%;
}
.men #acce .ranking-txt-wrap .chart-block .chart-box .score-svg.acce02 {
    width:64.030508%;
    top: 49%;
    left: 48.75%;
}
.men #acce .ranking-txt-wrap .chart-block .chart-box .score-svg.acce03 {
    width: 64.328814%;
    top: 53%;
    left: 49.5%;
}
.men #acce .ranking-txt-wrap .chart-block .chart-box .score-svg.acce04 {
    width: 63.922034%;
    top: 54%;
    left: 51%;
}
.men #acce .ranking-txt-wrap .chart-block .chart-box .score-svg.acce05 {
    width: 62.457627%;
    top: 54%;
    left: 50%;
}
.women #outer .ranking-txt-wrap .chart-block .chart-box .score-svg.outer01 {
    width: 70.013559%;
    top: 50.6%;
    left: 49.7%;
}
.women #outer .ranking-txt-wrap .chart-block .chart-box .score-svg.outer02 {
    width: 73.162712%;
    top: 54%;
    left: 47.5%;
}
.women #outer .ranking-txt-wrap .chart-block .chart-box .score-svg.outer03 {
    width: 65.569492%;
    top: 53%;
    left: 50%;
}
.women #outer .ranking-txt-wrap .chart-block .chart-box .score-svg.outer04 {
    width: 62.857627%;
    top: 52%;
    left: 50.5%;
}
.women #outer .ranking-txt-wrap .chart-block .chart-box .score-svg.outer05 {
    width: 56.020339%;
    top: 53%;
    left: 47.5%;
}
.women #tops .ranking-txt-wrap .chart-block .chart-box .score-svg.tops01 {
    width: 69.152542%;
    top: 47%;
    left: 50.9%;
}
.women #tops .ranking-txt-wrap .chart-block .chart-box .score-svg.tops02 {
    width: 71.5254237288136%;
    top: 50.5%;
    left: 48.0%;
}
.women #tops .ranking-txt-wrap .chart-block .chart-box .score-svg.tops03 {
    width: 66.4406779661017%;
    top: 47.5%;
    left: 51%;
}
.women #tops .ranking-txt-wrap .chart-block .chart-box .score-svg.tops04 {
    width: 76.271186440678%;
    top: 55.5%;
    left: 50%;
}
.women #tops .ranking-txt-wrap .chart-block .chart-box .score-svg.tops05 {
    width: 71.864406779661%;
    top: 55.5%;
    left: 53.5%;
}
.women #bottoms .ranking-txt-wrap .chart-block .chart-box .score-svg.bottoms01 {
    width: 75.25423728813559%;
    top: 50.3%;
    left: 50.7%;
}
.women #bottoms .ranking-txt-wrap .chart-block .chart-box .score-svg.bottoms02 {
    width: 72.54237288135593%;
    top: 54.0%;
    left: 53.7%;
}
.women #bottoms .ranking-txt-wrap .chart-block .chart-box .score-svg.bottoms03 {
    width: 73.89830508474576%;
    top: 55%;
    left: 53%;
}
.women #bottoms .ranking-txt-wrap .chart-block .chart-box .score-svg.bottoms04 {
    width: 64.06779661016949%;
    top: 47.8%;
    left: 51.9%;
}
.women #bottoms .ranking-txt-wrap .chart-block .chart-box .score-svg.bottoms05 {
    width: 64.06779661016949%;
    top: 49.5%;
    left: 49.5%;
}
.women #acce .ranking-txt-wrap .chart-block .chart-box .score-svg.acce01 {
    width: 74.57627118644068%;
    top: 49.3%;
    left: 48.7%;
}
.women #acce .ranking-txt-wrap .chart-block .chart-box .score-svg.acce02 {
    width: 79.66101694915254%;
    top: 56.5%;
    left: 52.4%;
}
.women #acce .ranking-txt-wrap .chart-block .chart-box .score-svg.acce03 {
    width: 73.22033898305085%;
    top: 52%;
    left: 53.5%;
}
.women #acce .ranking-txt-wrap .chart-block .chart-box .score-svg.acce04 {
    width: 72.20338983050847%;
    top: 50%;
    left: 52.5%;
}
.women #acce .ranking-txt-wrap .chart-block .chart-box .score-svg.acce05 {
    width: 66.10169491525424%;
    top: 49.7%;
    left: 49.7%;
}
.ranking-sec .ranking-txt-wrap .chart-block .point-txt {
    font-size: 4.8rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.ranking-sec .ranking-txt-wrap .chart-block .point-txt > span {
    font-size: 2.6rem;
    margin-left: 1rem;
}
.ranking-sec .ranking-txt-wrap .chart-block .total-score {
    font-size: 1.2rem;
    color: #898989;
}
.ranking-sec .ranking-txt-wrap .stylist-block-s .img-box {
    width: 12.8%;
}
.ranking-sec .ranking-txt-wrap .stylist-block-s .txt-box {
    width: 83.2%;
}
.ranking-sec .ranking-txt-wrap .stylist-block-s .txt-box .stylist-name {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.ranking-sec .ranking-txt-wrap .stylist-block-s .txt-box p {
    font-size: 1.3rem;
    line-height: 1.5;
}
.ranking-sec .ranking-txt-wrap .stylist-block-s .flex_box:first-child {
    margin-bottom: 3rem;
}
.ranking-sec .ranking01 {
    margin-bottom: 15rem;
}
.ranking-sec .ranking01 .ranking-slider-wrap {
    width: 46.339678%;
}
.ranking-sec .ranking01 .ranking-number {
    left: 7rem;
}
.ranking-sec .ranking01 .ranking-number p {
    font-size: 19.4rem;
}
.ranking-sec .ranking01 .ranking-mark {
    right: 3rem;
    width: 17.377567%;
}
.ranking-sec .ranking01 .ranking-txt-wrap .gray-tit {
    margin-bottom: 2rem;
}
.ranking-sec .ranking01 .slick-dots li button:before {
    font-size: 12px;
}
.ranking-sec .ranking01 .ranking-txt-wrap {
    width: 46.339678%;
    padding-right: 9.736457%;
}
.ranking-sec .ranking01 .slick-dots li.slick-active button:before {
    font-size: 12px;
}
.ranking-sec .ranking01 .ranking-txt-wrap .tit-block {
    margin-bottom: 6rem;
}
.ranking-sec .ranking01 .ranking-txt-wrap .item-tit {
    margin-bottom: 4rem;
}
.ranking-sec .ranking01 .ranking-txt-wrap .chart-block .flex_box {
    align-items: center;
    margin: 0 7%;
    width: 86%;
}
.ranking-sec .ranking01 .ranking-txt-wrap .chart-block .point-txt {
    font-size: 5.5rem;
}
.ranking-sec .ranking01 .ranking_txt p {
    padding: 2.4rem 0 0 3rem;
}
.ranking-sec .ranking-box {
    width: 45.45454545%;
}
.ranking-sec .ranking-box.up-line {
    margin-bottom: 11rem;
}
.ranking-sec .btn-wrap {
    padding: 12rem 0 0 0;
    max-width: 460px;
    margin: 0 auto;
    width: 78.6666667%
}

/*==================================================
img-sec
==================================================*/
.img-sec .img-box {
    width : 33.33333% ;
    width : -webkit-calc(100% / 3) ;
    width : calc(100% / 3) ;
}

/*==================================================
sage-intro-sec
==================================================*/
.sage-intro-sec {
    padding: 10rem 0 18rem;
}
.sage-intro-sec .sage-intro-sec-tit {
    text-align: right;
    padding-right: 1rem;
    margin-bottom: 15.5rem;
}
.sage-intro-sec .txt-box {
    width: 43.41142%;
    padding-left: 9.736457%;
}
.sage-intro-sec .txt-box p {
    line-height: 1.65;
}
.sage-intro-sec .sage-intro-sec-subtit {
    font-size: 1.4rem;
    color: #A3A3A3;
    margin-bottom: 5rem;
}
.sage-intro-sec .svg-tit {
    width: 93.552174%;
    margin-bottom: 3rem;
}
.sage-intro-sec .txt {
    color: #2F2F2F;
    padding-left: 5rem;
}
.sage-intro-sec .img-box {
    width: 50.439239%;
    height: 50.3rem;
    position: relative;
    background: #EFF0E9;
}
.sage-intro-sec .img-box figure {
    width: 31.930334%;
    position: absolute;
}
.sage-intro-sec .img-box .sage-img-left {
    top: -4.2rem;
    left: 6.966618%;
}
.sage-intro-sec .img-box .sage-img-center {
    top: 0.4rem;
    right: 30.665747%;
    z-index: 2;
}
.sage-intro-sec .img-box .sage-img-right {
    top: -9.2rem;
    right: 0;
}
.sage-intro-sec .btn-wrap {
    padding: 6rem 0 0 5rem;
}

/*==================================================
switch-menu
==================================================*/
.switch-menu {
    position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	outline: none;
    cursor: pointer;
}
.switch-menu:hover {
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}
.switch-menu a:hover {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
.switch-menu .switch-menu-bg {
    width: 100%;
}
.switch-menu .switch-menu-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
    width: 21.00366%;
}
.switch-menu .switch-menu-txt figure {
    width: 100%;
}
.switch-txt {
    color: #fff;
}
/*==================================================
footer
==================================================*/
footer {
    background: #414141;
    padding: 9.1rem 0 9.3rem;
    text-align: center;
}
footer address {
    color: #fff;
    font-size: 1.2rem;
    font-weight: normal;
}
/*==================================================
floating-menu
==================================================*/
.floating-menu.fixed {
    position: fixed;
    right: 1.5%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
    width: 60px;
    display: block;
    opacity: 1;
}
.floating-menu {
  position: fixed;
  top: 50%;
  right: -50%;
  transform: translateY(-65%);
  -webkit- transform: translateY(-65%);
  transition : all 500ms;
  opacity : 0;
}
.floating-menu .tab-btn{
    transition: .3s;
}
.floating-menu .tab-btn:hover{
    opacity : 0.6;
}
.floating-menu .tab-btn:not(:last-child) {
    margin-bottom: 24px;
}

/*==================================================
introduction
==================================================*/
.page-introduction .sage-intro-sec {
    padding: 9.2rem 0 10rem;
}
.page-introduction .sage-intro-sec .txt-box {
    padding-top: 18rem;
}

.introduction-sec {
    padding-bottom: 17.5rem;
}
.introduction-sec .introduction-text {
    text-align: center;
    font-weight: bold;
    margin-bottom: 16rem;
}
.introduction-sec .box {
    width: 44.727273%;
    margin-bottom: 8rem;
}
.introduction-sec .box:last-child,
.introduction-sec .box:nth-last-child(2) {
    margin-bottom: 0;
}
.introduction-sec .box .name-box {
    margin-bottom: 5rem;
}
.introduction-sec .box .name-box.mh {
    min-height: 12.8rem;
}
.introduction-sec .box .name-box .img-box {
    width: 20.325203%;
}
.introduction-sec .box .name-box .txt-box {
    width: 70.528455%;
    padding-top: 1rem;
}
.introduction-sec .box .name-box .txt-box .position {
    color: #989898;
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 1rem;
}
.introduction-sec .box .name-box .txt-box .name {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 2rem;
}
.introduction-sec .box .name-box .txt-box .insta::before {
    content: '';
    background: url("../../2021aw_men/img/introduction/icon-insta.svg") no-repeat center center;
    background-size: 100%;
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: middle;
}
.introduction-sec .box .name-box .txt-box .insta a {
    text-decoration: underline;
    line-height: 1.75;
}
.introduction-sec .box .name-box .txt-box .youtube::before {
    content: '';
    background: url("../../2021aw_men/img/introduction/icon-youtube.svg") no-repeat center center;
    background-size: 100%;
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: middle;
}
.introduction-sec .box .name-box .txt-box .youtube a {
    text-decoration: underline;
    line-height: 1.75;
}
.introduction-sec .box .name-box .txt-box .site::before {
    content: '';
    background: url("../../2021aw_men/img/introduction/icon-site.svg") no-repeat center center;
    background-size: 100%;
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: middle;
}
.introduction-sec .box .name-box .txt-box .site a {
    text-decoration: underline;
    line-height: 1.75;
}
.introduction-sec .box .intro-item-box .item-no1 {
    background: #EBEBEB;
    font-size: 1.3rem;
    padding: 0.75rem 1.5rem  0.75rem 1rem;
    border-radius: 0 13px 0 0;
    margin-bottom: 1.5rem;
    display: inline-block;
}
.introduction-sec .box .intro-item-box .item-no1 p {
    line-height: 1;
    margin: 0;
}
.introduction-sec .box .intro-item-box .item-tit-box  {
    justify-content: flex-start;
}
.introduction-sec .box .intro-item-box .item-tit-box .item-tit  {
    line-height: 1.9;
    margin-bottom: 0.5em;
}
.introduction-sec .box .intro-item-box .item-tit-box .item-intro-price  {
    margin-bottom: 2rem;
}
.introduction-sec .box .intro-item-box .item-tit-box .item-intro-price span  {
    font-size: 1.2rem;
}
.introduction-sec .box .intro-item-box .item-tit-box .buy-btn {
    vertical-align: middle;
    margin-left: 2rem;
}
.introduction-sec .box .intro-item-box .buy-btn a {
    background: #000;
    color: #fff;
    font-size: 1.3rem;
    padding: 0.3rem 1.3rem;
    line-height: 1;
    vertical-align: sub;
    border: 2px solid #000;
    box-sizing: border-box;
}
.introduction-sec .box .intro-item-box .buy-btn a:hover {
    background: #fff;
    color: #000;
    border: 2px solid #000;
    opacity: 1;
}
.introduction-sec .box .intro-item-box .txt {
    color: #363636;
    font-size: 1.4rem;
    line-height: 1.75;
}
.introduction-sec .box .intro-item-box .txt-box {
    width: 75.406504%;
}
.introduction-sec .box .intro-item-box .img-box {
    width: 20.325203%;
}
.introduction-sec .btn-wrap {
    padding: 12rem 0 0 0;
    max-width: 460px;
    margin: 0 auto;
    width: 78.6666667%
}


@media screen and (min-width: 1366px) {
/*==================================================
ranking-sec
==================================================*/
.ranking-sec .ranking-txt-wrap .stylist-block .txt-box p.pc-height {
    min-height: 12rem;
}
.ranking-sec .ranking-txt-wrap .tit-block .tit-box {
    width: 80.720616%;
}
.ranking-sec .ranking-txt-wrap .tit-block .tit-box.c-height {
    min-height: 15.6rem;
}
.ranking-sec .slick-dots {
    bottom: 0;
    text-align: right;
    right: 0;
    width: 38%;
    background: #fff;
    z-index: 2;    
}
}
@media screen and (min-width: 941px) and (max-width: 1366px) {
/*==================================================
ranking-sec
==================================================*/
.ranking-sec .slick-dots {
    bottom: 0;
    text-align: right;
    right: 0;
    width: 45%;
    background: #fff;
    z-index: 2;    
}
}
@media screen and (min-width: 768px) and (max-width: 940px) {
/*==================================================
ranking-sec
==================================================*/
.ranking-sec .slick-dots {
    bottom: 0;
    text-align: right;
    right: 0;
    width: 38%;
    background: #fff;
    z-index: 2;    
}
.slick-dots li {
    margin: 0 !important;
}
}
@media screen and (min-width: 768px) and (max-width: 1366px) {
/*==================================================
ranking-sec
==================================================*/
.ranking-sec .ranking-txt-wrap .stylist-block .txt-box p.pc-height {
    min-height: 15rem;
}
.ranking-sec .ranking-txt-wrap .tit-block .tit-box {
    width: 80.720616%;
}
.ranking-sec .ranking-txt-wrap .tit-block .tit-box {
    min-height: 15.6rem;
}
}
@media screen and (min-width: 768px) {
/*==================================================
tab-sec
==================================================*/
.tab-sec .tab-sec-tit {
    max-width: 600px;
}
}
@media screen and (max-width: 767px) {
/*==================================================
cmn
==================================================*/
body {
	font-size: 2.1rem;
    position: relative;
}
.pc {
	display: none;
}
.wrap, .wrap-l, .wrap-m {
	padding: 0 5%;
}
a:hover, input[type="submit"]:hover {
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
}
.btn-wrap .btn a {
    line-height: 1.5;
    padding: 1.5rem 2rem;
}
.btn-wrap .btn a span {
    color: #898989;
    font-size: 1.5625rem;
}
/*==================================================
mv
==================================================*/
.main-bg .logo {
    width: 22.373333%;
    position: absolute;
    left: 2.666667%;
    top: 3.6875rem;
}
.main-bg .main-tit {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 83.2%;
}
.intro-sec .sec-theme {
    text-align: left;
    padding: 3rem;
    font-size: 4.6875rem;
}
.intro-sec .intro-sec-tit .theme {
    top: -3.125rem;
    font-size: 3.125rem;
}
.intro-sec .catch {
    transform-origin: -2rem 3.5rem;
    font-size: 1.2rem;
    width: 360%;
}
.intro-sec .catch-box {
    border-right: none;
}
.tab-sec .tab-btn {
    width: 49%;
}
.tab-sec .tab-btn:first-child,
.tab-sec .tab-btn:nth-child(2) {
    margin-bottom: 1rem;
}
.tab-sec .tab-btn a {
    padding: 4rem 0;
}
.tab-sec .tab-sec-tit {
    width: 90%;
    padding: 2.5rem 0;
}
.tab-sec .tab-sec-tit .svg-tit {
    width: 50%;
    margin: 0 auto;
}
.tab-sec .flex_box {
    padding-top: 7rem;
}
.ranking-sec {
    padding: 10rem 0 12rem 0;
}
.ranking-sec .ranking01 {
    margin-bottom: 10rem;
}
.ranking-sec .ranking01 .ranking-slider-wrap {
    width: 100%;
}
.ranking-sec .ranking01 .ranking-txt-wrap {
    width: 100%;
    padding: 6.5% 5% 0;
}
.ranking-sec .ranking-sec-tit {
    width: 77.28%;
    margin-bottom: 7rem;
}
.ranking-sec .ranking01 .ranking-number p {
    font-size: 9.375rem;
}
.ranking-sec .ranking01 .ranking-mark {
    width: 22.4%;
}
.ranking-sec .ranking01 .ranking_txt p,
.ranking-sec .ranking_txt p {
    font-size: 2.1875rem;
    text-align: center;
    padding: 2rem 0 0;
}
.ranking-sec .ranking-txt-wrap .item-tit {
    font-size: 3.4375rem;
}
.ranking-sec .ranking-txt-wrap .price-flex {
    display: block;
}
.ranking-sec .ranking-txt-wrap .item-price {
    font-size: 4.0625rem;
    margin-bottom: 3rem;
}
.ranking-sec .ranking-txt-wrap .buy-btn a {
    font-size: 2.03125rem;
}
.ranking-sec .ranking-txt-wrap .item-img {
    width: 26.6666667%;
    margin-top: -4rem;
}
.ranking-sec .ranking-txt-wrap .stylist-block .txt-box p {
    font-size: 2.03125rem;
}
.ranking-sec .ranking01 .ranking-txt-wrap .chart-block .flex_box {
    align-items: center;
    margin: 0 5%;
    width: 90%;
}
.ranking-sec .ranking-txt-wrap .chart-block .point-box {
    position: absolute;
    left: 10%;
}
.ranking-sec .ranking-txt-wrap .chart-block .chart-box {
    width: 85%;
    position: relative;
    text-align: right;
}
.ranking-sec .ranking-txt-wrap .chart-block .flex_box,
.ranking-sec .ranking01 .ranking-txt-wrap .chart-block .flex_box {
    align-items: center;
    margin: 0 5%;
    width: 90%;
    justify-content: flex-end;
}
.ranking-sec .ranking-txt-wrap .stylist-block-s .txt-box .stylist-name {
    font-size: 2.1875rem;
}
.ranking-sec .ranking-txt-wrap .stylist-block-s .txt-box p {
    font-size: 2.03125rem;
}
.ranking-sec .ranking-box {
    width: 100%;
}
.ranking-sec .ranking-box.up-line_sp {
    margin-bottom: 11rem;
}
.img-sec .img-box {
    width: 100%;
}
 .sage-intro-sec .sage-intro-sec-tit {
    margin-bottom: 12.5rem;
}
.sage-intro-sec .txt-box {
    width: 90%;
    padding-left: 0;
    order: 2;
    margin: 3rem 5% 0;
}
.sage-intro-sec .sp-sage-tit.txt-box {
    margin: 0 5% 5rem;
}
.sage-intro-sec .img-box {
    width: 95%;
    height: 28.3rem;
    position: relative;
    background: #EFF0E9;
    order: 1;
    margin-left: 5%;
}
.sage-intro-sec .sage-intro-sec-subtit {
    margin-bottom: 5rem;
}
.sage-intro-sec .svg-tit {
    /*width: 61.3333333%;*/
    width: 85.86666662%;
    margin-bottom: 6rem;
}
.sage-intro-sec .txt {
    color: #2F2F2F;
    padding: 0 5%;
}
.sage-intro-sec .btn-wrap {
    padding: 6rem 5% 0;
}
.switch-menu .switch-menu-txt {
    position: absolute;
    top: 53%;
    left: 0;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
    width: 76%;
    right: 0;
    margin: 0 auto;
}
footer {
    background: #414141;
    padding: 11.25rem 0;
    text-align: center;
}
footer address {
    color: #fff;
    font-size: 1.875rem;
    font-weight: normal;
}
.ranking-sec .wrap.flex_box {
    padding: 0;
}
.ranking-sec .ranking-txt-wrap {
    padding: 6.5% 5% 0;
}
.ranking-sec .ranking01 .ranking-number {
    left: 1rem;
}
.ranking-sec .ranking01 .ranking-number p {
    font-size: 6rem;
}
.sage-intro-sec .sage-intro-sec-tit {
    font-size: 1.09375rem;
}
    
.slick-dots {
    bottom: -30px !important;
}    
.floating-menu.fixed{
    display: none;
}
/*==================================================
introduction
==================================================*/
.page-introduction .sage-intro-sec {
    padding: 10rem 0 10rem;
}
.page-introduction .sage-intro-sec .txt-box {
    order: 1;
    padding-top: 0rem;
    margin: 0 5% 18rem;
}
.page-introduction .sage-intro-sec .img-box {
    order: 2;
}

.introduction-sec {
    padding-bottom: 10rem;
}
.introduction-sec .introduction-text {
    font-size: 2.5rem;
    text-align: left;
    font-weight: bold;
    margin-bottom: 10rem;
}
.introduction-sec .box {
    width: 100%;
    margin-bottom: 8rem;
}
.introduction-sec .box:nth-last-child(2) {
    margin-bottom: 8rem;
}
.introduction-sec .box .name-box {
    margin-bottom: 5rem;
}
.introduction-sec .box .name-box .img-box {
    width: 29.886432%;
}
.introduction-sec .box .name-box .txt-box {
    width: 63.956964%;
    padding-top: 1.65rem;
}
.introduction-sec .box .name-box .txt-box .position {
    font-size: 2.1875rem;
    margin-bottom: 1.5rem;
}
.introduction-sec .box .name-box .txt-box .name {
    font-size: 2.8125rem;
    margin-bottom: 2rem;
}
.introduction-sec .box .name-box .txt-box .insta a span {
    font-size: 2.1875rem;
}
.introduction-sec .box .intro-item-box .tit-box  {
    width: 100%;
    margin-bottom: 2rem;
    align-items: center;
}
.introduction-sec .box .intro-item-box .item-no1 {
    width: 80.376569%;
    font-size: 2.03125rem;
    margin: 0;
}
.introduction-sec .box .intro-item-box .buy-btn {
    margin-left: auto;
}
.introduction-sec .box .intro-item-box .buy-btn a {
    background: #000;
    color: #fff;
    font-size: 2.03125rem;
    padding: 0.5rem 1.5rem;
    line-height: 1;
    vertical-align: sub;
}
.introduction-sec .box .intro-item-box .item-tit-box .item-tit  {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.introduction-sec .box .intro-item-box .item-tit-box .item-intro-price  {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}
.introduction-sec .box .intro-item-box .txt {
    font-size: 2.03125rem;
}
.introduction-sec .box .intro-item-box .txt-box {
    width: 63.956964%;
    order: 2;
}
.introduction-sec .box .intro-item-box .img-box {
    width: 29.886432%;
    order: 1;
}
.introduction-sec .btn-wrap {
    padding: 6rem 5% 0;
    max-width: 100%;
    width: 100%;
}

.floating-menu .tab-btn a img {
    width: 60px;
}

.btn-wrap .btn a:hover {
    color: #000;
    background: #fff;
    opacity: 1;
}
.tab-sec .tab-btn a:hover {
    background: #F5F5F4;
    opacity: 1;
}
.tab-sec .tab-btn.current a:hover {
    opacity: 1;
}
.ranking-sec .ranking01 .ranking-slider-wrap::after {
    padding-top: 142.674086%;
}
.ranking-sec .slick-current .ranking_txt,
.ranking-sec .ranking_txt {
    animation-name: none;
    padding-bottom: 0.5rem;
}
.sage-intro-sec {
    padding: 10rem 0 12rem;
}
.ranking-sec .ranking-txt-wrap .tit-block .tit-box,
.ranking-sec .ranking-txt-wrap .tit-block .tit-box.c-height {
    min-height: auto;
}
.ranking-sec .ranking-txt-wrap .buy-btn a:hover,
.introduction-sec .box .intro-item-box .item-tit-box .buy-btn a:hover {
    background: #000;
    color: #fff;
    border: 2px solid #000;
    opacity: 1;
}
.introduction-sec .box .name-box.mh {
    min-height: auto;
}
.ranking-sec .ranking01 .ranking-slider-wrap,
.ranking-sec .ranking-slider-wrap {
    width: 90%;
    margin: 0 auto;
}
.slick-prev {
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 50% !important;
    transform: translate(0, 0) !important;
    z-index: 1;
}
.slick-next {
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 50% !important;
    transform: translate(0, 0) !important;
    z-index: 1;
}
.slick-prev:before, .slick-next:before {
    content: '' !important;
}
}