@charset 'UTF-8';
#teatree
{
    line-height: 1;
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: justify;
}
#teatree ol,
#teatree li
{
    margin: 0;
    padding: 0;

    list-style: none;
}
.teatree_container img
{
    width: 100%;
    height: auto;
}
.teatree_container *
{
    font: inherit;
    font-family: 'Noto Sans JP', 'Gill Sans', 'Gill Sans MT', Calibri, 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W6', 'Hiragino Kaku Gothic Pro', Osaka, sans-serif;
    font-weight: 500;
    line-height: inherit;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    background-repeat: no-repeat;
}
#teatree *:before,
#teatree *:after
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
@media screen and (min-width: 375px)
{
    #teatree .util_max374
    {
        display: none !important;
    }
}
@media screen and (max-width: 374px)
{
    #teatree .util_min375
    {
        display: none !important;
    }
}
#teatree .inviewEl
{
    opacity: 0;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
        filter: alpha(opacity=0);
}
#teatree .inviewEl.inviewed
{
    -webkit-transition-delay: .25s;
       -moz-transition-delay: .25s;
        -ms-transition-delay: .25s;
         -o-transition-delay: .25s;
            transition-delay: .25s;
    -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
        -ms-transition-duration: 1s;
         -o-transition-duration: 1s;
            transition-duration: 1s;
    -webkit-transition-property: opacity;
       -moz-transition-property: opacity;
        -ms-transition-property: opacity;
         -o-transition-property: opacity;
            transition-property: opacity;

    opacity: 1;

    -ms-filter: none;
        filter: none;
}
#teatree .detaillink_btn
{
    font-size: 13px;
    font-weight: bold;
    line-height: 14px;

    display: block;

    width: 200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 12px 0 14px;

    text-align: center;
    text-indent: .1em;
    letter-spacing: .1em;

    color: #fff;
    border-radius: 40px;
    background-color: #004236;
}
#teatree .section_inner
{
    max-width: 375px;
    margin-right: auto;
    margin-left: auto;
}
#teatree_go_top
{
    position: fixed;
    right: 8px;
    bottom: 70px;
    z-index: 10;

    visibility: hidden;

    width: 47px;

    -webkit-transition-duration: .5s;
       -moz-transition-duration: .5s;
        -ms-transition-duration: .5s;
         -o-transition-duration: .5s;
            transition-duration: .5s;
    -webkit-transition-property: opacity, visibility;
       -moz-transition-property: opacity, visibility;
        -ms-transition-property: opacity, visibility;
         -o-transition-property: opacity, visibility;
            transition-property: opacity, visibility;

    opacity: 0;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
        filter: alpha(opacity=0);
}
#teatree_go_top.show
{
    visibility: visible;

    opacity: 1;

    -ms-filter: none;
        filter: none;
}


#contents_nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #F8F3E8;
}
#contents_nav_list {
    border: 1px solid #004236;
    display: flex;
    justify-content: space-between;
    height: 51px;
}
#contents_nav li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 51px;
    background-color: #F8F3E8;
    box-sizing: border-box;
}
#contents_nav li + li {
    border-left: 1px solid #004236;
}
#contents_nav li a {
    padding-top: 15px;
    display: block;
    width: 100%;
    height: 50px;
    text-align: center;
    box-sizing: border-box;
    font-size: 0;
}
#contents_nav li img {
    vertical-align: top;
    width: auto;
    height: 24px;
}
.teatree_container {
    color: #004236;
    background-color: #F8F3E8;
}
sup {
    font-size: 50% !important;
    vertical-align: super !important;
}


.teatree_kv {
    font-size: 0;
}
.teatree_lead {
    padding: calc(47/375*100vw) calc(34/375*100vw) calc(53/375*100vw);
    height: calc(456/375*100vw);
    background: url(../img/usr/products/sp/i/eTT_sp/teatree_bgimage_sp.png) 0 0 / cover no-repeat;
    text-align: center;
}
.teatree_lead_title {
    margin: 0 auto calc(24/375*100vw);
    width: calc(105/375*100vw);
}
.teatree_lead_tagline {
    line-height: 1.5555555555555556;
    font-size: calc(18/375*100vw);
    font-weight: bold;
}
.teatree_lead p {
    margin: calc(29/375*100vw) 0 30px;
    line-height: 1.8461538461538463;
    font-size: calc(13/375*100vw);
    letter-spacing: -0.02em;
    text-align: center;
}
.teatree_lead_btn {
}
.teatree_lead_btn a {
    padding: calc(7/375*100vw) 0 0;
    position: relative;
    display: inline-block;
    width: calc(296/375*100vw);
    height: calc(60/375*100vw);
    line-height: 1.5;
    background-color: #004236;
    color: #fff;
    font-size: calc(12/375*100vw);
    text-align: center;
}
.teatree_lead_btn a:before {content: '';
    display: block;
    position: absolute;
    bottom: calc(8/375*100vw);
    left: calc(146/375*100vw);
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    width: calc(10/375*100vw);
    height: calc(10/375*100vw);
    transform: rotate(135deg);
}



.teatree_item {
}
.teatree_item_label {
    line-height: 1.2;
    font-size: calc(10/375*100vw);
    letter-spacing: -.02em;
    text-align: center;
}
.teatree_item_name {
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #1C3A24;
    line-height: 1.4285714285714286;
    font-size: calc(14/375*100vw);
    font-weight: bold;
    letter-spacing: -0.04em;
    text-align: center;
}
.teatree_item_price {
    font-size: calc(12/375*100vw);
    text-align: center;
}
.teatree_item_price .tax {
    margin-left: 0.5em;
    font-size: calc(10/375*100vw);
}
.teatree_item_link {
    margin-top: 28px;
    text-align: center;
}
.teatree_item_link a {
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(162/375*100vw);
    height: calc(32/375*100vw);
    color: #fff;
    background: #004236;
    font-size: calc(13/375*100vw);
    font-weight: bold;
    letter-spacing: .14em;
}



.teatree_pickup {
    padding: 48px 0;
}
.teatree_pickup_title {
    margin: 0 auto 44px;
    width: calc(139/375*100vw);
}
.teatree_pickup_box {
}
.teatree_pickup_box_img {
}
.teatree_pickup_box_body {
    margin: 0 auto;
    width: calc(286/375*100vw);
}
.teatree_pickup_box_title {
    margin-bottom: 10px;
    line-height: 1.625;
    font-size: calc(16/375*100vw);
    font-weight: bold;
}
.teatree_pickup p {
    line-height: 1.6363636363636365;
    font-size: calc(11/375*100vw);
}
.teatree_pickup p.notice {
    padding-top: 5px;
    font-size: calc(10/375*100vw);
}
.teatree_pickup_box .teatree_item {
    margin-top: 22px;
}
.teatree_pickup_box.-pickup01 {
}
.teatree_pickup_box.-pickup01 .teatree_pickup_box_img {
    width: calc(337/375*100vw);
}
.teatree_pickup_box.-pickup02 {
    margin-top: 14px;
}
.teatree_pickup_box.-pickup02 .teatree_item_link {
    margin-top: 7px;
}
.teatree_pickup_box.-pickup02 .teatree_item_price {
    margin-top: 16px;
}





.teatree_ranking {
    margin: 0 auto;
    padding: calc(48/375*100vw) calc(17.5/375*100vw) calc(18/375*100vw);
    background-color: #35917A;
    position: relative;
    >* { position: relative; z-index: 1; }
    &:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: fit-content;
        aspect-ratio: 750/611;
        background-image: url(../img/usr/products/sp/i/eTT_sp/ranking_bg_sp.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: top center;
        mix-blend-mode: multiply;
    }
}
.teatree_ranking_title {
    margin: 0 auto;
    width: calc(158/375*100vw);
}
.teatree_ranking_lead {
    margin: calc(33/375*100vw) 0 calc(34/375*100vw);
    line-height: 1.6875;
    color: #F8F3E8;
    font-size: calc(16/375*100vw);
    font-weight: bold;
    text-align: center;
}
.teatree_ranking_notice {
    margin: 0 0 calc(12/375*100vw);
    line-height: 1.5;
    color: #F8F3E8;
    text-align: right;
    font-size: calc(10/375*100vw);
    letter-spacing: -0.02em;
    text-align: center;
}
.teatree_ranking_list_tagline {
    position: absolute;
    top: 148px;
    left: 50%;
    line-height: 1.5;
    transform: translateX(-50%);
    font-size: 22px;
    font-weight: bold;
}
.teatree_ranking_list {
    padding: calc(21/375*100vw) 0  calc(36/375*100vw);
}
.teatree_ranking_list.-mens {
    background-color: #D1EBE6;
}
.teatree_ranking_list.-ladies {
    background-color: #F8F3E8;
}
.teatree_ranking_list_label {
    margin: 0 auto calc(30/375*100vw);
    text-align: center;
}
.teatree_ranking_list_label img {
    width: auto;
    height: calc(42/375*100vw) !important;
}
.teatree_ranking_rank {
    position: relative;
}
.teatree_ranking_rank + .teatree_ranking_rank {
    margin-top: calc(24/375*100vw);
}
.teatree_ranking_rank_label {
    margin-bottom: calc(30/375*100vw);
}
.teatree_ranking_rank_img {
    margin: 0 auto calc(10/375*100vw);
    width: calc(163/375*100vw);
}
.teatree_ranking_rank .teatree_item_name {
    margin-bottom: calc(8/375*100vw);
    border: none;
    text-align: center;
}
.teatree_ranking_rank .teatree_item_link {
    margin: 0;
    text-align: center;
}
.teatree_ranking_rank_comments {
    margin: calc(16/375*100vw) auto 0;
    width: calc(296/375*100vw);
}
.teatree_ranking_list.-ladies .teatree_ranking_rank_label {
    margin-bottom: calc(20/375*100vw);
}



.teatree_lineup {
    padding: calc(64/375*100vw) 0 0;
}
.teatree_lineup_title {
    margin: 0 auto calc(39/375*100vw);
    width: calc(104/375*100vw);
}
.teatree_lineup_section {
    position: relative;
    z-index: 1;
}
.teatree_lineup_section_treat {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}
.teatree_item_text p {
    margin-top: calc(22/375*100vw);
    line-height: 1.6363636363636365;
    font-size: calc(11/375*100vw);
    letter-spacing: 0.011em;
}
.teatree_item_text p.notice {
    margin: calc(10/375*100vw) 0 0;
    font-size: calc(10/375*100vw);
    letter-spacing: -0.02em;
}
.teatree_lineup_box .teatree_lineup_box_img {
    margin-bottom: calc(20/375*100vw);
}
.teatree_lineup_box .teatree_item {
    margin-left: auto;
    margin-right: auto;
    width: calc(286/375*100vw);
}
.teatree_lineup_box .teatree_item_link {
    margin-top: calc(10/375*100vw);
}

.teatree_lineup_section.-sec01 {
    margin: 0 0 calc(40/375*100vw);
}
.teatree_lineup_box.-lineup01 {
    margin-bottom: calc(87/375*100vw);
}
.teatree_lineup_box.-lineup01 .teatree_lineup_box_img {
    width: calc(330/375*100vw);
}
.teatree_lineup_box.-lineup01 .teatree_item_text p {
    letter-spacing: -0.02em;
}
.teatree_lineup_box.-lineup01 .teatree_item_name,
.teatree_lineup_box.-lineup02 .teatree_item_name {
    letter-spacing: -0.06em;
}
.teatree_lineup_box.-lineup02 {
    margin-bottom: calc(46/375*100vw);
}
.teatree_lineup_box.-lineup02 .teatree_lineup_box_img {
    margin-left: auto;
    margin-right: auto;
    width: calc(286/375*100vw);
}
.teatree_lineup_box.-lineup02 .teatree_item_text p {
    letter-spacing: -0.02em;
}
.teatree_lineup_box.-lineup03 {
    margin-left: calc(45/375*100vw);
    width: calc(330/375*100vw);
}
.teatree_lineup_box.-lineup03 .teatree_lineup_box_img {
    margin-bottom: 41px;
}
.teatree_lineup_box.-lineup03 .teatree_item {
    margin: 0;
}
.teatree_lineup_section.-sec01 .-treat01 {
    top: calc(472/375*100vw);
    left: 0;
    width: calc(163/375*100vw);
}






.teatree_lineup_section.-sec02 {
    padding: calc(74/375*100vw) 0 0;
    height: calc(2582/750*100vw);
    color: #F9F6EE;
    background: url(../img/usr/products/sp/i/eTT_sp/lineup_bgline1_sp.png) top center / 100% auto no-repeat;
}
.teatree_lineup_section.-sec02  .teatree_item {
}
.teatree_lineup_section.-sec02  .teatree_item_name {
    border-bottom-color: #F9F6EE;
}
.teatree_lineup_section.-sec02  .teatree_item_link a {
    color: #35917A;
    background-color: #F9F6EE;
}
.teatree_lineup_section.-sec02  .teatree_lineup_box {
}
.teatree_lineup_box.-lineup04 .teatree_lineup_box_img {
    margin-left: calc(24/375*100vw);
    width: calc(328/375*100vw);
}
.teatree_lineup_box.-lineup05 {
    margin-top: calc(60/375*100vw);
}
.teatree_lineup_box.-lineup05 .teatree_lineup_box_img {
    margin-left: calc(24/375*100vw);
    width: calc(304/375*100vw);
}
.teatree_lineup_section.-sec02 .-treat02 {
    top: calc(-40/375*100vw);
    left: calc(5/375*100vw);
    width: calc(123/375*100vw);
    mix-blend-mode: multiply;
}
.teatree_lineup_section.-sec02 .-treat03 {
    top: calc(600/375*100vw);
    right: 0;
    width: calc(126/375*100vw);
    mix-blend-mode: multiply;
}
.teatree_lineup_section.-sec03 {
    padding: calc(37/375*100vw) 0 0;
    overflow: hidden;
}
.teatree_lineup_section.-sec03  .teatree_lineup_box {
}
.teatree_lineup_box.-lineup06 {
    margin-bottom: calc(87/375*100vw);
}
.teatree_lineup_box.-lineup06 .teatree_lineup_box_img {
    margin-left: calc(62/375*100vw);
    width: calc(251/375*100vw);
}
.teatree_lineup_box.-lineup06 .teatree_item_text p {
    letter-spacing: -0.02em;
}
.teatree_lineup_box.-lineup06 .teatree_item {
}
.teatree_lineup_box.-lineup07 {
}
.teatree_lineup_box.-lineup07 .teatree_item {
}
.teatree_lineup_box.-lineup07 .teatree_lineup_box_img {
    margin-left: calc(20/375*100vw);
    width: calc(293/375*100vw);
}
.teatree_lineup_section.-sec03 .-treat04 {
    top: calc(525/375*100vw);
    right: calc(-12/375*100vw);
    width: calc(163/375*100vw);
}


.teatree_lineup_section.-sec04 {
    padding: calc(73/375*100vw) 0 0;
    height: calc(2450/750*100vw);
    color: #F9F6EE;
    background: url(../img/usr/products/sp/i/eTT_sp/lineup_bgline2_sp.png) top center / 100% auto no-repeat;
}
.teatree_lineup_section.-sec04  .teatree_lineup_section_label {
    margin: 0 auto calc(85/375*100vw);
    width: calc(202/375*100vw);
}
.teatree_lineup_section.-sec04  .teatree_lineup_box_img {
    margin: 0 auto;
    width: calc(224/375*100vw);
}
.teatree_lineup_section.-sec04  .teatree_lineup_box {
}
.teatree_lineup_section.-sec04  .teatree_item_name {
    border-bottom-color: #F9F6EE;
}
.teatree_lineup_section.-sec04  .teatree_item_link a {
    color: #35917A;
    background-color: #F9F6EE;
}
.teatree_lineup_box.-lineup07 {
    margin-bottom: calc(40/375*100vw);
}
.teatree_lineup_box.-lineup08 {
    margin-bottom: calc(40/375*100vw);
    position: relative;
}
.teatree_lineup_box.-lineup08 .teatree_item_text p {
    letter-spacing: -0.02em;
}
.teatree_lineup_box.-lineup08 .teatree_item dl {
    margin-top: calc(30/375*100vw);
}
.teatree_lineup_box.-lineup09 .teatree_item_text p.notice {
    margin-top: calc(10/375*100vw);
}
.teatree_lineup_section.-sec04 .-treat05 {
    top: calc(-10/375*100vw);
    right: calc(-24/375*100vw);
    right: 0;
    width: calc(173/375*100vw);
    mix-blend-mode: multiply;
    overflow: hidden;
}
.teatree_lineup_section.-sec04 .-treat05 img {
    width: calc(197/375*100vw);
    max-width: inherit;
}



.teatree_special {
    padding: calc(63/375*100vw) 0 calc(68/375*100vw);
    position: relative;
    z-index: 1;
}
.teatree_special_title {
    margin: 0 auto calc(104/375*100vw);
    width: calc(120/375*100vw);
}
.teatree_special_box {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: calc(286/375*100vw);
    text-align: center;
}
.teatree_special_box:before {
    content: '';
    display: block;
    position: absolute;
    top: calc(-78/375*100vw);
    left: calc(0/375*100vw);
    width: calc(76/375*100vw);
    height: calc(76/375*100vw);
    background: url(../img/usr/products/sp/i/eTT_sp/new_icon_sp.png) top center / 100% auto no-repeat;
}
.teatree_special_box .teatree_special_box_img {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(20/375*100vw);
    width: calc(278/375*100vw);
}
.teatree_special_box ul {
    margin: calc(16/375*100vw) 0 calc(20/375*100vw);
}
.teatree_special_box ul li {
    line-height: 1.5;
    font-size: calc(10/375*100vw);
    letter-spacing: -0.009em;
}
.teatree_special_treat {
    position: absolute;
    width: 228px;
    pointer-events: none;
}
.teatree_special_box.-special01 {
    margin-bottom: calc(140/375*100vw);
}
.teatree_special_treat.-treat01 {
    bottom: calc(-86/375*100vw);
    left: 0;
    width: calc(131/375*100vw);
    mix-blend-mode: multiply;
}
.teatree_special_treat.-treat02 {
    bottom: calc(527/375*100vw);
    right: 0;
    width: calc(106/375*100vw);
}



.teatree_hairbodyitem {
    margin-bottom: calc(-54/375*100vw);
    padding: calc(76/375*100vw) 0 0;
    position: relative;
    z-index: 2;
    height: calc(4806/750*100vw);
    background: url(../img/usr/products/sp/i/eTT_sp/lineup_bgline3_sp.png) bottom center / 100% auto no-repeat;
}
.teatree_hairbodyitem_title {
    margin: 0 auto calc(47/375*100vw);
    width: calc(175/375*100vw);
}
.teatree_hairbodyitem_box_wrap {
}
.teatree_hairbodyitem_box {
    margin: 0 auto;
    position: relative;
    width: calc(286/375*100vw);
    color: #F9F6EE;
    text-align: center;
}
.teatree_hairbodyitem_box .teatree_hairbodyitem_box_img {
    margin: 0 auto calc(20/375*100vw);
    width: calc(254/375*100vw);
}
.teatree_hairbodyitem_box .teatree_item_name {
    border-bottom-color: #F9F6EE;
}
.teatree_hairbodyitem_box .teatree_item_text {
}
.teatree_hairbodyitem_box .teatree_item_text p {
    letter-spacing: 0;
    text-align: left;
}
.teatree_hairbodyitem_box .teatree_item_link {
    margin-top: calc(16/375*100vw);
}
.teatree_hairbodyitem_box .teatree_item_link a {
    color: #35917A;
    background-color: #F9F6EE;
}
.teatree_hairbodyitem_box.-hbitem04:before {
    /* content: ''; */
    display: block;
    position: absolute;
    top: calc(-28/375*100vw);
    left: calc(0/375*100vw);
    width: calc(76/375*100vw);
    height: calc(76/375*100vw);
    background: url(../img/usr/products/sp/i/eTT_sp/new_icon_sp.png) top center / 100% auto no-repeat;
}
.teatree_hairbodyitem_box.-hbitem01 {
    margin-bottom: calc(70/375*100vw);
}
.teatree_hairbodyitem_box.-hbitem02 {
    margin-bottom: calc(90/375*100vw);
}
.teatree_hairbodyitem_box.-hbitem03 {
    margin-bottom: calc(85/375*100vw);
}



.teatree_cftstory_mv {
    position: relative;
    z-index: 1;
    font-size: 0;
}
.teatree_cftstory {
    margin-bottom: 140px;
    padding: calc(60/375*100vw) 0 calc(85/375*100vw);
    background-color: #004236;
}
.teatree_cftstory_title {
    margin: 0 auto;
    width: calc(300/375*100vw);
}
.teatree_cftstory_lead {
    margin: calc(35/375*100vw) auto calc(38/375*100vw);
    width: calc(316/375*100vw);
}
.teatree_cftstory_lead p {
    line-height: 1.5714285714285714;
    color: #fff;
    font-size: calc(14/375*100vw);
    letter-spacing: -0.009em;
}
.teatree_cftstory_list {
    margin: 0 auto;
    position: relative;
    width: calc(316/375*100vw);
}
.teatree_cftstory_box {
}
.teatree_cftstory_box.-box01 {
}
.teatree_cftstory_box.-box02 {
    margin: calc(36/375*100vw) 0 calc(32/375*100vw) !important;
}
.teatree_cftstory_box.-box03 {
}
.teatree_cftstory_box.-box04 {
    margin: calc(40/375*100vw) 0 !important;
}
.teatree_cftstory_box.-box05 {
}
.teatree_cftstory_box.-box06 {
    margin: calc(45/375*100vw) 0 0 !important;
}



.anm_rotate {
    animation: rotate-anime 8s linear infinite;
}
@keyframes rotate-anime {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }