/***********************************************
全セクション共通
***********************************************/
.pc_only {
 display: block;
}

.sp_only {
 display: none;
}

@media only screen and (max-width: 768px) {
 .pc_only {
  display: none;
 }

 .sp_only {
  display: block;
 }
}

/***********************************************
まずはこのアイテムから
PICK UP THE FIRST ITEM
***********************************************/
.sec_pickup {
 width: 100%;
 padding: 80px 0;
 background-color: #fff2ed;
}

.sec_pickup .elm_sec_heading_10th {
 color: #4e3227;
 margin-bottom: 40px;
}

.sec_pickup .elm_sec_heading_10th h2 {
 font-size: 3rem;
 font-weight: normal;
 line-height: 1.4;
 letter-spacing: .05em;
 text-indent: .05em;
}

.sec_pickup .elm_sec_heading_10th .txt_heading {
 color: #b5b5b5;
 font-size: 1.4rem;
 letter-spacing: .05em;
 text-indent: .05em;
 margin-top: 5px;
}

.sec_pickup .block_01 .box_01 a {
 padding-right: 15px;
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 color: #4e3227;
 text-align: center;
 font-size: 1.8rem;
 width: 100%;
 padding: 20px 40px 20px 20px;
 background-color: #ffffff;
 border-radius: 5px;
}

.sec_pickup .block_01 .box_01 a .txt {
 padding-left: 40px;
 position: relative;
}

.sec_pickup .block_01 .box_01 a .txt::before {
 position: absolute;
 top: 50%;
 right: auto;
 bottom: auto;
 left: auto;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 content: " ";
 display: block;
 width: 30px;
 aspect-ratio: 1 / 1;
 background: url(https://d2w53g1q050m78.cloudfront.net/wwwharushopjp/uploads/assets/images/top/icn_beginner.png?1748433243559) no-repeat 0 0;
 background-size: cover;
 position: absolute;
 left: 0;
}

.sec_pickup .block_01 .box_01 a .txt span:nth-child(2) {
 font-size: 1.6rem;
 background-color: #fff0b3;
 padding: 5px 10px;
 margin-left: 20px;
}

.sec_pickup .block_01 .box_01 a::after {
 content: " ";
 display: block;
 width: 10px;
 height: 10px;
 border: 0px;
 border-top: 2px solid #4e3227;
 border-right: 2px solid #4e3227;
 position: absolute;
 top: 50%;
 right: 18px;
 -webkit-transform: translateY(-50%) rotate(45deg);
 transform: translateY(-50%) rotate(45deg);
}

a::before,
a::after {
 transition: .3s;
}

.sec_pickup .block_02 .mdl_box_item_13th a {
 display: block;
 width: 100%;
 height: 100%;
 background-color: #fff;
 border: 1px solid #e6e6e6;
 border-radius: 10px;
 box-shadow: 0 0 6px #e6e6e6;
 overflow: hidden;
}

.sec_pickup .block_02 .box .part .txt_heading {
 text-align: center;
 color: #4e3227;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1.8rem;
 line-height: 1.4;
 width: 100%;
 min-height: 2.8em;
 margin-bottom: 10px;
}

.sec_pickup .block_02 .mdl_col_4 {
 display: flex;
 flex-wrap: nowrap;
 width: 100%;
 margin: 20px 0 0 0;
}

.sec_pickup .block_02 .mdl_box_item_13th {
 width: calc(100%/4);
 margin: 20px 2% 0 0;
}

.sec_pickup .block_02 .mdl_box_item_13th:last-child {
 margin: 20px 0 0 0;
}

.sec_pickup .mdl_box_item_13th>a .part {
 padding: 20px;
}

@media only screen and (max-width:768px) {
 .sec_pickup .inner_92 {
  width: 100%;
  padding: 0;
 }

 .sec_pickup .elm_sec_heading_10th h2 {
  font-size: 1.25em;
 }

 .sec_pickup .elm_sec_heading_10th .txt_heading {
  font-size: 1em;
 }

 .sec_pickup .block_01 .box_01 a {
  font-size: 2em;
  padding-right: 15px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #4e3227;
  text-align: center;
  width: 100%;
  padding: 2.6666666667vw 6.6666666667vw 2.6666666667vw 2.6666666667vw;
  background-color: #ffffff;
  border-radius: 5px;
 }

 .sec_pickup .block_01 .box_01 a .txt span {
  display: block;
  font-size: 16px;
 }

 .sec_pickup .block_02 .mdl_col_4 {
  flex-wrap: wrap;
 }

 .sec_pickup .block_02 .mdl_box_item_13th {
  width: calc(96% / 2);
  margin: 20px 2% 0 0;
 }

 .sec_pickup .block_01 .box_01 a .txt span:nth-child(2) {
  margin-left: 0;
 }
}


/***********************************************
PRODUCT
haruアイテム一覧
***********************************************/
.product-tabs {
 position: relative;
 max-width: 1200px;
 margin: 80px auto;
 padding: 0 60px;
 box-sizing: border-box;
}

.product-tabs .heading {
 margin-bottom: 40px;
}

.product-tabs h2 {
 font-size: 3.2rem;
 font-weight: normal;
 line-height: 1.4;
 letter-spacing: .15em;
 text-indent: .15em;
 color: #4e3227;
 text-align: center;
}

.product-tabs .title_sub {
 color: #444;
 font-size: 2rem;
 letter-spacing: .05em;
 text-indent: .05em;
 text-align: center;
}

.product-tabs ul {
 list-style: none;
 padding: 0;
}

.product-tabs h2 {
 font-size: 24px;
 margin-bottom: 4px;
}

.product-tabs .tabs {
 display: flex;
 flex-wrap: wrap;
 width: 100%;
}

.product-tabs .tab {
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 10px 20px;
 cursor: pointer;
 background: #eee;
 border-radius: 5px;
 transition: background 0.3s;
 width: calc(96% / 3) !important;
 box-sizing: border-box;
 border-radius: 8px;
 color: #4e3227;
 font-size: 1.8rem;
 text-align: center;
 line-height: 1.4;
 min-height: 60px;
 margin: 20px 2% 0 0;
}

.product-tabs .tab:last-child {
 margin: 20px 0 0 0;
}

.product-tabs .tab.hair.active {
 background-color: #fff0b3;
}

.product-tabs .tab.skin.active {
 background-color: #f0d7f4;
}

.product-tabs .tab.life.active {
 background-color: #c4e0f9;
}

.product-tabs .tab.active {
 position: relative;
 background-color: #e6e6e6;
 border-radius: 5px;
}

.product-tabs .tab.active:after {
 position: absolute;
 top: auto;
 right: auto;
 bottom: auto;
 left: 50%;
 transform: translateX(-50%);
 content: " ";
 display: block;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 20px 15px 0 15px;
 top: 100%;
 border-color: #000;
 color: #4e3227;
 font-size: 1.8rem;
 text-align: center;
 line-height: 1.4;
}

.product-tabs .tab.hair.active:after {
 border-color: #fff0b3 transparent transparent transparent;
}

.product-tabs .tab.skin.active:after {
 border-color: #f0d7f4 transparent transparent transparent;
}

.product-tabs .tab.life.active:after {
 border-color: #c4e0f9 transparent transparent transparent;
}

.product-tabs .tab-content {
 margin-top: 40px;
 display: none;
}

.product-tabs .tab-content.active {
 display: block;
}

.product-tabs .swiper {
 width: 100%;
 margin: auto;
 margin-bottom: 40px;
}

.product-tabs .swiper-slide {
 border-radius: 8px;
 display: flex;
 align-items: flex-start;
 justify-content: flex-start;
 font-size: 1.1rem;
 align-items: stretch;
 height: 450px;
 object-fit: contain;
}

.product-tabs .swiper-button-next,
.product-tabs .swiper-button-prev {
 top: 60%;
 color: #333;
 width: 60px;
 height: 60px;
 background-color: #e6e6e6;
 border-radius: 10px;
}

.product-tabs .swiper-button-next {
 right: 20px;
}

.product-tabs .swiper-button-prev {
 left: 20px;
}
.product-tabs .swiper-button-next:after, .product-tabs .swiper-button-prev:after{
 font-size: inherit;
}




.product-tabs .tab-content .mdl_box_item_13th {
 width: calc(100%/4);
 margin: 0 2% 0 0;
}

.product-tabs .tab-content .mdl_box_item_13th:nth-child(4n) {
 margin: 0 0 0 0;
}

.product-tabs .tab-content .mdl_box_item_13th:nth-child(8n) {
 margin: 0 0 0 0;
}

.product-tabs .tab-content .mdl_box_item_13th a {
 display: block;
 width: 100%;
 height: 100%;
 background-color: #fff;
 border: 1px solid #e6e6e6;
 border-radius: 10px;
 box-shadow: 0 0 6px #e6e6e6;
 overflow: hidden;
 transition: .3s;
 text-decoration: none;
}

.product-tabs .tab-content .mdl_box_item_13th a img {
 width: 100%;
}

.product-tabs .tab-content .mdl_box_item_13th .img {
 margin: 0;
}

.product-tabs .tab-content .mdl_box_item_13th .part {
 padding: 20px;
}

.product-tabs .tab-content .mdl_box_item_13th .part .txt_type {
 color: #a6a6a6;
 font-size: 1.4rem;
 text-align: center;
 margin: 0;
}

.product-tabs .tab-content .mdl_box_item_13th .part .txt_heading {
 color: #4e3227;
 display: flex;
 justify-content: center;
 align-items: top;
 font-size: 1.8rem;
 text-align: left;
 line-height: 1.4;
 width: 100%;
 min-height: 2.8em;
 margin-bottom: 10px;
}

.product-tabs .tab-content .mdl_box_item_13th .part .txt {
 word-break: break-all;
 color: #444;
 font-size: 1.6rem;
}

.category_link {
 max-width: 400px;
 margin: 0 auto;
}

.category_link a {
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1.8rem;
 text-align: left;
 line-height: 1.2;
 width: 100%;
 min-height: 80px;
 border-radius: 40px;
 position: relative;
 background: #63564a;
 color: #FFF;
 transition: 0.3s;
}

.category_link a:hover {
 opacity: .6;
}

.category_link a:before {
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 right: auto;
 bottom: auto;
 left: auto;
 transform: translateY(-50%);
 width: 30px;
 aspect-ratio: 1 / 1;
 background-color: #fff;
 border-radius: 50%;
 right: 20px;
}

.category_link a:after {
 content: "";
 display: block;
 position: absolute;
 width: 10px;
 height: 10px;
 border-top: 2px solid #4e3227;
 border-right: 2px solid #4e3227;
 position: absolute;
 top: 50%;
 right: 31px;
 transform: translateY(-50%) rotate(45deg);
}

@media only screen and (max-width:768px) {
 .product-tabs .swiper-slide {
  flex-wrap: wrap;
  height: auto;
 }

 .product-tabs .swiper-button-next,
 .product-tabs .swiper-button-prev {
  top: 56%;
 }

 .product-tabs .swiper-button-prev {
  left: -5px;
 }

 .product-tabs .swiper-button-next {
  right: -5px;
 }

 .product-tabs {
  padding: 0 20px;
 }

 .product-tabs .tab-content .mdl_box_item_13th {
  width: calc(96%/2);
 }

 .product-tabs .tab-content .mdl_box_item_13th {
  margin: 0 2% 20px 0;
 }

 .product-tabs .tab-content .mdl_box_item_13th:nth-child(4n) {
  margin: 0 0 20px 0;
 }

 .product-tabs .tab-content .mdl_box_item_13th:nth-child(2n) {
  margin: 0 0 20px 0;
 }

 .product-tabs .category_link a {
  font-size: min(4.2666666667vw, 3.2rem);
  padding-right: 15px;
  position: relative;
  min-height: 64px;
  padding: 0 12vw;
  border-radius: 9999px;
 }
}



/***********************************************
CONTENTS
読みもの
***********************************************/

.sec_contents {
 width: 100%;
 padding: 80px 0;
 background-color: #fff2ed;
}

.sec_contents .sec_heading {
 color: #4e3227;
 text-align: center;
}

.sec_contents .sec_heading h2 {
 font-size: 3.2rem;
 font-weight: normal;
 line-height: 1.4;
 letter-spacing: .15em;
 text-indent: .15em;
}

.sec_contents .sec_heading .txt_heading {
 color: #444;
 font-size: 2rem;
 letter-spacing: .05em;
 text-indent: .05em;
}

.sec_contents .block_01 .box_01 .txt {
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
}

.sec_contents .block_01 .box_01 .txt dt {
 width: 240px;
 margin-right: 30px;
}

.sec_contents .block_01 .box_01 .txt dd {
 font-size: 1.8rem;
 width: calc(100% - 270px);
 margin-top: 20px;
}

.sec_contents .block_02 {
 margin-top: 60px;
 margin-bottom: 40px;
}

.sec_contents .block_02 .box .img {
 border-radius: 10px;
 overflow: hidden;
}

@media only screen and (max-width: 768px) {
 .sec_contents {
  width: 100%;
  padding: 10.6666666667vw 0;
  background-color: #fff2ed;
 }

 .sec_contents .sec_heading {
  margin-bottom: 8vw;
 }

 .sec_contents .sec_heading h2 {
  font-size: min(5.3333333333vw, 4rem);
 }

 .sec_contents .sec_heading .txt_heading {
  font-size: min(4.2666666667vw, 3.2rem);
 }
}

.sec_contents .block_02 .box .img {
 border-radius: 10px;
 overflow: hidden;
}

.sec_contents .block_01 .box_01 .txt dd {
 margin-top: 0;
 font-size: 100%;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(3, 1fr);
 grid-column-gap: 30px;
 grid-row-gap: 30px;
 width: 100%;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box {
 margin: 0;
 background-color: #ffffff;
 border-radius: 10px;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box .part {
 line-height: 1.4;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box .part .list {
 margin-bottom: 20px;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box .part .list li {
 display: inline-block;
 font-size: 1.4rem;
 text-align: center;
 line-height: 2;
 white-space: nowrap;
 padding: 0 20px;
 background-color: #ecf4fa;
 border-radius: 1em;
}

/* box位置とレイアウト */
.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(1) {
 width: 500px;
 grid-area: 1 / 1 / 4 / 2;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(1)>a {
 display: block;
 padding: 20px;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(1)>a .img {
 margin-bottom: 20px;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(1)>a .part {
 padding-right: 40px;
 position: relative;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(1)>a .part::after {
 content: " ";
 display: block;
 width: 10px;
 height: 10px;
 border: 0px;
 border-top: 2px solid #4e3227;
 border-right: 2px solid #4e3227;
 position: absolute;
 top: 50%;
 right: 10px;
 transform: translateY(-50%) rotate(45deg);
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(n+2) {
 width: 550px;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(n+2)>a {
 display: flex;
 justify-content: space-between;
 width: 100%;
 padding: 20px 40px 20px 20px;
 position: relative;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(n+2)>a::after {
 content: " ";
 display: block;
 width: 10px;
 height: 10px;
 border: 0px;
 border-top: 2px solid #4e3227;
 border-right: 2px solid #4e3227;
 position: absolute;
 top: 50%;
 right: 15px;
 transform: translateY(-50%) rotate(45deg);
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(n+2)>a .img {
 width: 150px;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(n+2)>a .part {
 width: calc(100% - (150px + 20px));
 margin-top: 10px;
 position: relative;
}

/* grid配置 */
.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(2) {
 grid-area: 1 / 2 / 2 / 3;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(3) {
 grid-area: 2 / 2 / 3 / 3;
}

.sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(4) {
 grid-area: 3 / 2 / 4 / 3;
}

/* ボタン */


.sec_contents .huusite_link {
 max-width: 400px;
 margin: 0 auto;
}

.sec_contents .huusite_link a {
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1.8rem;
 text-align: left;
 line-height: 1.2;
 width: 100%;
 min-height: 80px;
 border-radius: 40px;
 position: relative;
 background: #63564a;
 color: #FFF;
 transition: 0.3s;
}

.sec_contents .huusite_link a:hover {
 opacity: .6;
}

.sec_contents .huusite_link a:before {
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 right: auto;
 bottom: auto;
 left: auto;
 transform: translateY(-50%);
 width: 30px;
 aspect-ratio: 1 / 1;
 background-color: #fff;
 border-radius: 50%;
 right: 20px;
}

.sec_contents .huusite_link a:after {
 content: "";
 display: block;
 position: absolute;
 width: 10px;
 height: 10px;
 border-top: 2px solid #4e3227;
 border-right: 2px solid #4e3227;
 position: absolute;
 top: 50%;
 right: 31px;
 transform: translateY(-50%) rotate(45deg);
}



@media only screen and (max-width:768px) {
 .sec_contents .outer_1200.inner_1080 {
  width: 100% !important;
  padding: 4%;
 }

 .sec_contents .sec_heading.elm_sec_heading_9th {
  text-align: center;
 }

 .sec_contents .block_01 .box_01 .txt {
  flex-direction: column;
 }

 .sec_contents .block_01 .box_01 .txt dt {
 width: 100%;
  margin-bottom: 2.6666666667vw;
 }
 .sec_contents .block_01 .box_01 .txt dd {
  width: 100%;
 }

 .sec_contents .mdl_block_layout_column_2nd {
  width: 100%;
 }

 .sec_contents .block_02 {
  margin-top: 8vw;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
 }

 /* 1つ目のbox：大きなカード型 */
 .mdl_block_layout_column_2nd .block_inner .box {
  margin: 0;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner .box {
  border-top: 1px solid #e6e6e6;
 }

 .mdl_block_layout_column_2nd .block_inner .box:last-child {
  border-radius: 0 0 10px 10px !important;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(1) {
  width: 100%;
  background-color: #ffffff;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(1)>a {
  display: block;
  padding: 0;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(1)>a .img {
  margin-bottom: 20px;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(1)>a .part {
  padding: 5.3333333333vw 6.6666666667vw 5.3333333333vw 2.6666666667vw;
 }

 /* その他box：画像左、テキスト右 */
 .sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(n+2) {
  width: 100%;
  background-color: #ffffff;
  border-radius: 0;
  overflow: hidden;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(n+2)>a {
  display: flex;
  align-items: start;
  padding: 16px;
  gap: 16px;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(n+2)>a .img {
  width: 26.6666666667vw;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(n+2) .img img {
  width: 100%;
  height: auto;
  display: block;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(n+2) .part {
  flex: 1;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner .box:nth-child(n+2)>a .part {
  margin-top: 0;
 }


 .sec_contents .mdl_block_layout_column_2nd .block_inner .box .part .list {
  margin-bottom: 8px;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner .box .part .list li {
  font-size: min(3.7333333333vw, 2.8rem);
  line-height: 2;
  white-space: nowrap;
 }

 .sec_contents .mdl_block_layout_column_2nd .block_inner .box .part .txt {
  font-size: 100%;
  line-height: 1.5;
 }

 .sec_contents .huusite_link a {
  font-size: min(4.2666666667vw, 3.2rem);
  padding-right: 15px;
  position: relative;
  min-height: 64px;
  padding: 0 12vw;
  border-radius: 9999px;
 }
}