@charset "utf-8";

/*===================
トップページ共通パーツ
===================*/

.sp {
  display: none;
}
@media screen and (max-width: 750px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}

.sec {
  /* position: relative; */
  padding: 66px 0 0 0;
}
.sec__heading {
  position: absolute;
  top: 7px;
  left: 0px;
  font-family: calibri, sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.45em;
  writing-mode: vertical-rl;
}
.sec__heading--comma {
  transform: rotate(90deg);
  display: inline-block;
  letter-spacing: 0;
}

.concept .sec__heading {
  top: 49px;
}
/* .product .sec__heading {
  top: -136px;
} */
.news .sec__heading {
  top: -24px;
}

@media screen and (max-width: 1030px) {
  .sec__heading {
    position: static;
    max-width: 850px;
    writing-mode: horizontal-tb;
    margin: 0 auto 20px;
  }
  .concept .sec__heading {
    padding-top: 66px;
  }

  .sec__heading--comma {
    transform: rotate(0deg);
    letter-spacing: 0.45em;
  }
}

@media screen and (max-width: 750px) {
  .sec__heading {
    font-size: 24px;
  }
}

/*===================
fv
===================*/
.fv {
  padding: 0 4% 0;
}
.fv img {
  object-fit: cover;
}

/* スワイパー↓ */
.mv__swiper .swiper-slide {
  max-height: 100vh;
}
.mv__swiper .swiper-pagination {
  bottom: 36px;
}
.mv__swiper .swiper-pagination-bullet {
  background-color: none;
  border: 1px solid #fff;
}
.mv__swiper .swiper-pagination-bullet-active {
  background-color: #fff;
}
.mv__swiper .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
}
.mv__swiper-slide img {
  /* min-height: 550px; */
  object-fit: cover;
}
/* スワイパー↑ */

.owabi {
  max-width: 750px;
  padding: 0 15px;
  margin: 100px auto 50px;
}

.banner {
  max-width: 750px;
  padding: 0 15px;
  margin: 50px auto 100px;
}

@media screen and (max-width: 750px) {
  .fv {
    padding: 0 15px 0;
  }

  .owabi {
    max-width: 750px;
    padding: 0 15px;
    margin: 50px auto 25px;
  }
  .banner {
    margin: 25px auto 50px;
  }
}

/*===================
message
===================*/
.message .inner-1115 {
  position: relative;
}
.message__container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 70px;
  position: relative;
  margin-bottom: 90px;
}
.message__deco {
  display: block;
  width: 30%;
  padding-top: 28%;
  background: url(../imgs_hair-oil/index/message_deco.png) center center / cover no-repeat;
  position: absolute;
  /* bottom: -46%; */
  bottom: -20%;
  /* right: -4vw; */
  right: -5vw;
}
.message__leftBox {
  width: 50%;
}
.message__pic {
  max-width: 415px;
  margin-bottom: 34px;
}
.message__rightBox {
  margin-left: 36px;
}
.message__belong {
  margin-bottom: 7px;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.3em;
  line-height: 2.41;
}
.message__name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 17px;
}
.message__nameTxt {
  font-weight: 300;
  font-size: 23px;
  letter-spacing: 0.4em;
}
.message__nameEn {
  font-size: 7px;
  font-weight: 300;
  letter-spacing: 0.5em;
}
.message__txt {
  width: 43%;
  font-size: 12px;
  letter-spacing: 0.36em;
  line-height: 2;
  padding-top: 27px;
}
.message__txt--mgb {
  display: block;
  margin-bottom: 20px;
}
@media screen and (max-width: 1280px) {
  .message__deco {
    position: static;
    width: 30%;
    padding-top: 27%;
    margin-left: auto;
  }
}
@media screen and (max-width: 750px) {
  .message__container {
    display: block;
    margin-bottom: 82px;
  }
  .message__container::before {
    width: 100px;
    height: 100px;
    right: 0;
    bottom: -91px;
  }
  .message__leftBox {
    width: 100%;
    margin: 0 auto;
  }
  .message__pic {
    width: 100%;
    margin: 0 auto 20px;
  }
  .message__rightBox {
    margin-left: 0;
    text-align: center;
  }
  .message__name {
    flex-direction: column-reverse;
    justify-content: center;
    gap: 7px;
  }
  .message__txt {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }
}

/*===================
movie
===================*/
.movie__wrap {
  /* display: flex;
  justify-content: space-between;
  gap: 2%; */
}
.youtube {
  position: relative;
  width: 48%;
  /* max-width: 580px; */
  padding-top: 26.9%;
  margin: 0 auto 69px;
}
.youtube.pc {
  padding-top: 0;
}
.youtube.sp {
  display: none;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.youtube__thumbnail {
  cursor: pointer;
  position: relative;
}
.youtube__thumbnail::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  background: url(../imgs_hair-oil/index/start_icon.png) center center / cover no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.youtube__thumbnail img {
  width: 100%;
}
@media screen and (max-width: 750px) {
  .movie__wrap {
    display: block;
  }
  .youtube {
    width: 100%;
    /* padding-top: 48.25%; */
    padding-top: 56.25%;
  }
  .youtube.pc {
    display: none;
  }
  .youtube.sp {
    display: block;
  }
}

/*===================
concept
===================*/
.concept {
  padding-top: 3.6%;
  padding-bottom: 55px;
}
.concept__bgWrap {
  background: url(../imgs_hair-oil/index/concept_bg.jpg?v=1) center right / 62% auto no-repeat;
}
.concept__intro {
  padding: 160px 0 134px;
  margin-bottom: 62px;
}
.concept__ttl {
  margin-bottom: 30px;
  font-size: 23px;
  font-weight: 300;
  letter-spacing: 0.34em;
}
.concept__txt {
  font-size: 13px;
  letter-spacing: 0.48em;
  line-height: 3.06;
  padding-left: 33px;
}
.concept__container {
  /* max-width: 815px; */
  /* margin: 0 auto; */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 34px;
  margin-bottom: 67px;
}
.concept__container:nth-child(even) {
  flex-direction: row-reverse;
}
.concept__container:last-child {
  margin-bottom: 82px;
}
.concept__pic {
  width: 44%;
  max-width: 372px;
}
.concept__box {
  padding-top: 55px;
  width: 43%;
  position: relative;
}
.concept__box::before {
  display: block;
  content: "";
  width: 132px;
  height: 70px;
  background: url(../imgs_hair-oil/index/logo_mih.svg) center center / cover no-repeat;
  position: absolute;
  top: -8px;
  left: 135px;
}
.concept__container:nth-child(even) .concept__box::before {
  display: block;
  content: "";
  width: 132px;
  height: 70px;
  background: url(../imgs_hair-oil/index/logo_mih.svg) center center / cover no-repeat;
  position: absolute;
  top: -20px;
  left: -53px;
  rotate: -28deg;
}
.concept__conceptTtl {
  margin-bottom: 22px;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.3em;
  line-height: 1.7;
}
.concept__conceptTxt {
  font-size: 13px;
  letter-spacing: 0.18em;
  line-height: 2.06;
}
.concept__notes {
  display: block;
  font-size: 9px;
  line-height: 1.75;
}

@media screen and (max-width: 1280px) {
  .concept__bgWrap {
    background: url(../imgs_hair-oil/index/concept_bg.jpg?v=1) center right / 710px auto no-repeat;
  }
}

@media screen and (max-width: 1030px) {
  .concept {
    padding-top: 66px;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 0px 1px 0 #fff, 0-1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff;
  }
  .concept__bgWrap {
    background: url(../imgs_hair-oil/index/concept_bg.jpg?v=1) center center / cover no-repeat;
  }
  .concept__intro {
    padding-top: 34px;
  }
  .concept__ttl,
  .concept__txt {
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 0px 1px 0 #fff, 0-1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff;
  }
}

@media screen and (max-width: 750px) {
  .concept__ttl {
    font-size: 20px;
  }
  .concept__container,
  .concept__container:nth-child(even) {
    flex-direction: column;
    gap: 2px;
  }
  .concept__pic {
    max-width: 500px;
    width: 100%;
  }
  .concept__box {
    width: 100%;
    padding-top: 75px;
    max-width: 500px;
    margin: 0 auto;
  }
  .concept__box::before,
  .concept__container:nth-child(even) .concept__box::before {
    width: 101px;
    height: 54px;
    top: 14px;
    left: 0px;
    rotate: -13deg;
  }
}

/*===================
logo-slide
===================*/
.logo-slide {
  padding-top: 60px;
  padding-bottom: 130px;
  position: relative;
}
.logo-slide__swiper-slide {
  width: 1287px;
}
.logo-slide__swiper .swiper-wrapper {
  transition-timing-function: linear;
}
.logo-slide__img-wrap {
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.logo-slide__img {
  width: 129px;
}

@media screen and (max-width: 1030px) {
  .logo-slide__img-wrap {
    top: -160px;
  }
  .logo-slide__img {
    width: 109px;
  }
}

/*===================
its-mih
===================*/
.its-mih {
  padding-bottom: 43px;
}

@media screen and (max-width: 750px) {
  .its-mih .linkArea {
    padding-top: 0;
  }
}

/*===================
background-image
===================*/

.background-image img {
  min-height: 207px;
  object-fit: cover;
}

/*===================
PRODUCTS
===================*/
.product {
  padding-top: 110px;
}

.product__container {
  padding-bottom: 90px;
}

.product__list-main {
  display: flex;
}

.product__list-mainPh {
  width: 240px;
  max-width: 100%;
  margin-right: 10%;
}

.product__list-titleEn {
  max-width: 180px;
  margin: 0 auto 30px;
}

.product__list-item:not(:last-child) {
  margin-bottom: 68px;
}

.product__list-titleJa {
  font-size: 12px;
  letter-spacing: 0.12em;
  margin-bottom: 44px;
}

.product__list-intro {
  font-size: 12px;
  letter-spacing: 0.24em;
  font-feature-settings: "palt";
  line-height: 2;
  margin-bottom: 25px;
  text-align: center;
}

.product__slider {
  width: 392px;
  max-width: 100%;
  margin-right: 9%;
  margin-left: 0;
}

.product__slider-ph {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #fff;
}

.product__list-mainBox {
  flex: 1;
}

/* モーダル */
.online-btn__product {
  position: static;
  margin: 0 auto 60px;
}

.product__component {
  border-top: #231815 solid 0.5px;
  border-bottom: #231815 solid 0.5px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.product__component-toggle {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 90%;
  margin-right: 14px;
}

.product__component-toggle:before,
.product__component-toggle:after {
  position: absolute;
  content: "";
  display: block;
  transition: all 0.4s;
  background: #231815;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.product__component-label.active .product__component-toggle:before {
  transform: translate(-50%, -50%) rotate(90deg);
}

.product__component-toggle:before {
  width: 1px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(0deg);
}

.product__component-toggle::after {
  width: 10px;
  height: 1px;
}

.product__component-title {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.24em;
}

.product__component-label {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}

.product__component-field {
  font-size: 11px;
  letter-spacing: 0.28em;
  font-feature-settings: "palt";
  line-height: 1.9;
  padding-top: 20px;
  text-align: justify;
  display: none;
}

.product__component-inner {
  width: 93%;
  margin-left: auto;
  margin-right: auto;
}

.slider-thumbnail .swiper-wrapper {
  flex-direction: column;
  justify-content: space-between;
}

.product__slides {
  display: flex;
}

.slider-thumbnail {
  width: 58px;
  max-width: 100%;
  overflow: inherit;
  margin-left: 0;
  margin-right: 0;
}

.slider-thumbnail .swiper-slide {
  height: auto;
  width: 100% !important;
  position: relative;
  cursor: pointer;
}

.slider-thumbnail .swiper-slide::after {
  width: 100%;
  height: 100%;
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  border-radius: 90%;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.swiper-slide.swiper-slide-thumb-active::after {
  opacity: 0;
}

.back {
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
}

.back__link {
  font-family: calibri, sans-serif;
  letter-spacing: 0.4em;
  font-size: 20px;
}

.product__caption {
  margin-top: 10px;
  font-size: 10px;
}

@media screen and (max-width: 980px) {
  .product__list-main {
    margin-bottom: 30px;
  }

  .product__list-mainPh {
    max-width: 210px;
    margin-right: 0;
  }
}

@media screen and (max-width: 750px) {
  .product__list-main {
    flex-direction: column;
  }

  .product__list-mainBox {
    margin-bottom: 30px;
  }

  .product__list-mainPh {
    margin-left: auto;
    margin-right: auto;
  }

  .product__slides {
    display: block;
    margin-bottom: 30px;
  }

  .product__slider {
    width: 392px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .slider-thumbnail {
    width: 100%;
    max-width: 400px; /* お好み */
    margin: 20px auto 0;
  }

  .slider-thumbnail .swiper-wrapper {
    max-width: 330px;
    margin: 10px auto 0;
    flex-direction: row;
    justify-content: space-between;
  }

  .slider-thumbnail .swiper-slide {
    width: 64px !important;
    flex-shrink: 0;
  }
}

/*===================
HOW TO USE
===================*/
.howToUse {
  padding-top: 110px;
}
.howToUse__wrap {
  margin-bottom: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.howToUse__wrap--2 {
  margin-bottom: 0;
  align-items: start;
}

.howToUse__wrapLeft {
  width: 60%;
  display: flex;
  justify-content: start;
  align-items: center;
}

.howToUse__wrap--2 .howToUse__wrapLeft {
  align-items: start;
}

.howToUse__icon {
  margin-right: 50px;
  padding-bottom: 5px;
  width: 120px;
}
.howToUse__wrap--2 .howToUse__icon {
  margin-right: 30px;
}
.howToUse__box {
  padding-right: 20px;
  /* width: ; */
}
.howToUse__wrap--2 .howToUse__box {
  margin-right: auto;
  padding-right: 0;
  /* width: 40%; */
  max-width: 294px;
}
.howToUse__img {
  width: 40%;
}
.howToUse__wrap--2 .howToUse__img {
  top: 20px;
}

.howToUse__item {
  margin-bottom: 20px;
  display: flex;
  justify-content: start;
  align-items: center;
}
.howToUse__item dt,
.howToUse__item dd {
  font-size: 12px;
  letter-spacing: 0.24em;
  font-weight: 400;
}
.howToUse__item dt {
  width: 98px;
}
.howToUse__boxTtl {
  margin-bottom: 15px;
  position: relative;
  width: 294px;
  height: 36px;
  background: #fff;
  border: 1px solid #777;
  font-size: 12px;
}
.howToUse__boxTtl::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-left: 1px solid #777;
  transform: rotate(-45deg);
}
.howToUse__boxTtl span {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.howToUse__boxTxt {
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.81;
  letter-spacing: 0.08em;
}
.howToUse__box .point {
  margin-bottom: 35px;
  position: relative;
  background: repeating-linear-gradient(90deg, #b8b8b8 0 8px, transparent 8px 12px) top / 100% 1px no-repeat, repeating-linear-gradient(90deg, #b8b8b8 0 8px, transparent 8px 12px) bottom / 100% 1px no-repeat, repeating-linear-gradient(0deg, #b8b8b8 0 8px, transparent 8px 12px) left / 1px 100% no-repeat, repeating-linear-gradient(0deg, #b8b8b8 0 8px, transparent 8px 12px) right / 1px 100% no-repeat;
  padding: 15px 5px 12px 12px;
}
.howToUse__box .point p {
  font-size: 12px;
  line-height: 1.81;
  letter-spacing: 0.08em;
}
.howToUse__box .point__ttl {
  position: absolute;
  top: -10px;
  left: 8px;
  font-size: 13px;
  letter-spacing: 0.15em;
  background-color: #fff;
}
@media screen and (max-width: 980px) {
  .howToUse__container {
    padding-top: 30px;
  }
  .howToUse__wrap {
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto 30px;
  }
  .howToUse__wrapLeft {
    width: 100%;
    justify-content: space-between;
  }
  .howToUse__icon {
    margin-right: 0;
    margin-bottom: 20px;
  }
  .howToUse__wrap--2 .howToUse__icon {
    padding-top: 0;
    margin-right: 0;
  }
  .howToUse__box {
    width: calc(100% - 120px);
    padding-left: 20px;
    padding-right: 0;
  }
  .howToUse__wrap--2 .howToUse__box {
    padding-left: 0;
    margin-left: auto;
    margin-right: 0;
  }
  .howToUse__item {
    justify-content: end;
  }
  .howToUse__img {
    width: 100%;
  }
}
@media screen and (max-width: 750px) {
  .howToUse {
    padding-top: 66px;
  }
}
@media screen and (max-width: 480px) {
  .howToUse__wrapLeft {
    display: block;
  }
  .howToUse__icon {
    margin: 0 auto 30px;
  }
  .howToUse__wrap--2 .howToUse__icon {
    margin: 0 auto 30px;
    padding-bottom: 0;
  }
  .howToUse__box {
    width: 100%;
    padding: 0;
  }
  .howToUse__item {
    justify-content: center;
  }
  .howToUse__wrap--2 .howToUse__box {
    margin: 0 auto;
  }
}

/*===================
INGREDIENT
===================*/
.ingredient {
  padding-top: 110px;
  padding-bottom: 55px;
}
.ingredient__wrap {
  padding-bottom: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
@media screen and (max-width: 750px) {
  .ingredient {
    padding-top: 66px;
  }
  .ingredient__wrap {
    padding-top: 30px;
    padding-bottom: 0;
    flex-wrap: wrap;
    gap: 20px 2%;
  }
  .ingredient__img {
    order: 1;
    width: 100%;
    text-align: center;
  }
  .ingredient__img img {
    width: 100%;
    max-width: 70px;
    margin: 0 auto;
  }

  .ingredient__txtBox1 {
    order: 2;
    width: 49%;
  }

  .ingredient__txtBox2 {
    order: 3;
    width: 49%;
  }
}
@media screen and (max-width: 375px) {
  .ingredient__txtBox1 {
    order: 2;
    width: 90%;
  }

  .ingredient__txtBox2 {
    order: 3;
    width: 90%;
  }
}

/*===================
PACKAGE
===================*/
.package__head {
  overflow: hidden;
}
.package__head img {
  min-height: 220px; /* 好きな高さ */
  object-fit: cover;
  object-position: center;
}
.package {
  padding-top: 125px;
  padding-bottom: 55px;
}
.package__nameLogo {
  width: 90%;
  max-width: 478px;
  margin: 0 auto 90px;
}

.package__box {
  margin-bottom: 110px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.package__boxItem {
  width: 30%;
  position: relative;
}
.package__boxLink {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.package__boxLink::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  transition: all 0.4s;
  opacity: 0;
}
.package__boxLink:hover::after {
  opacity: 1;
}
.package__boxLink img {
  transition: all 0.4s;
}
.package__boxLink:hover img {
  opacity: 0;
}
.package__boxItem--1 .package__boxLink::after {
  background-image: url(../imgs_hair-oil/index/package_item01_h.png);
}
.package__boxItem--2 .package__boxLink::after {
  background-image: url(../imgs_hair-oil/index/package_item02_h.png);
}
.package__boxItem--3 .package__boxLink::after {
  background-image: url(../imgs_hair-oil/index/package_item03_h.png);
}

@media screen and (max-width: 1030px) {
  .package__nameLogo {
    padding-top: 50px;
  }
}
@media screen and (max-width: 750px) {
  .package {
    padding-top: 66px;
  }
  .package .sec__heading {
    font-size: 22px;
  }
  .package__container {
    margin-bottom: 50px;
  }
  .package__nameLogo {
    margin-bottom: 50px;
    max-width: 407px;
  }
  .package__box {
    margin-bottom: 0;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .package__boxItem {
    width: 70%;
    max-width: 320px;
  }
}
@media screen and (max-width: 400px) {
  .package__head img {
    min-height: 190px;
  }
}

/*===================
news
===================*/
.news {
  background: #ebe6e6;
  padding-top: 93px;
  padding-bottom: 95px;
}
.news__list {
  min-height: 140px;
  border-top: 1px solid #231815;
  margin-bottom: 41px;
}
.news__listItem {
  /* display: none; */
  /* padding: 13px 15px; */
  border-bottom: 1px solid #231815;

  position: relative;
}

.news__listItem::before {
  display: block;
  content: "";
  color: #231815;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: translateY(-25%) rotate(135deg);
  position: absolute;
  top: 22px;
  right: 28px;
  transition: 0.3s;
}
.news__listItem.active::before {
  transform: translateY(-25%) rotate(315deg);
}
.news__listItemWrap {
  /* max-width: 95%; */
}
.news__ttlWrap {
  padding: 13px 15px;
  cursor: pointer;
}
.news__date {
  max-width: 95%;
  font-size: 11px;
  letter-spacing: 0.24em;
  line-height: 1.75;
}
.news__listTtl {
  max-width: 95%;
  /* margin-bottom: 15px; */
  font-size: 14px;
  letter-spacing: 0.2em;
  line-height: 1.75;
}
.news__contents.editor {
  display: none;
  max-width: 95%;
  padding: 0px 15px 13px 15px;
}
.news__more {
  width: 74px;
  height: 74px;
  margin: 0 auto;
  border-radius: 999px;
  background: #727171;
  position: relative;
}
.news__moreLink {
  display: block;
  cursor: pointer;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background: #727171;
  padding-top: 22px;
  margin: 0 auto;
  font-family: calibri, sans-serif;
  font-size: 12px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: #fff;
  text-align: center;
  position: relative;
}
.news__moreLink::before {
  display: block;
  content: "";
  color: #fff;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: translateY(-25%) rotate(135deg);
  position: absolute;
  top: 55%;
  left: 42%;
}
.news__noPost {
  padding-top: 20px;
  font-size: 14px;
  font-weight: 400;
}
.news__listItem.no-content::before {
  display: none;
}
.news__ttlWrap.disabled {
  pointer-events: none;
}
@media screen and (max-width: 750px) {
  .news__listItem::before {
    width: 0.5em;
    height: 0.5em;
    top: 33px;
    right: 15px;
  }
}

/*===================
about
===================*/
.about {
  padding-bottom: 64px;
}
.about__container {
  margin-bottom: 147px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
}
.about__left {
  width: 45%;
}
.about__logo {
  width: 72%;
  margin: 0px 0 37px 39px;
}
.about__txt {
  max-width: 90%;
  margin: 0 auto;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 2.36;
}
.about__pic {
  width: 59%;
}
.about__btnLink {
  display: block;
  width: fit-content;
  padding: 10px;
  margin: 0 auto;
  transform: translate(-37px, 0px);
  font-family: calibri, sans-serif;
  font-size: 17px;
  letter-spacing: 0.18em;
  text-align: center;
  position: relative;
}
.about__btnLink::before {
  display: block;
  content: "";
  width: 37px;
  height: 8px;
  background: url(../imgs_hair-oil/index/arrow.svg) center center / cover no-repeat;
  position: absolute;
  top: 57%;
  right: -40%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transition: 0.3s;
}
.about__btnLink:hover::before {
  transform: translate(-10%, -50%);
}

@media screen and (max-width: 750px) {
  .about__container {
    margin-bottom: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .about__left {
    width: 100%;
  }
  .about__logo {
    max-width: 280px;
    margin: 0 auto 20px;
  }
  .about__txt {
    max-width: none;
  }
  .about__pic {
    width: 100%;
    max-width: 410px;
  }
}