@charset "UTF-8";
/*
Theme Name: wiz-hairinfo
Author: Airily
Version: 1.0
*/
.btn-more {
  width: 120px;
  height: 30px;
  display: flex;
  align-items: center;
  background: #A6A6A6;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.1rem;
  /*
     width: 120px;
     height: 30px;
     display: flex;
     align-items: center;
     background: #A6A6A6;//#BFBFBF;
     text-decoration: none;
     text-align: center;
     color: #fff;
     font-size: 13px;
     letter-spacing: .1rem;
     //くの字
  &::before {
  	content: "";
  	display: block;
  	mask-image: url(../img/common/angle-right-solid.svg);
  	mask-repeat: no-repeat;
         mask-size: 5px 10px;
         background-color: #fff;
         width: 5px;
         height: 10px;
         margin-right: 8px;
         margin-left: 8px;
         //top: calc(50% - 5px);
     }
     */
}
.btn-more::before {
  content: "";
  display: block;
  -webkit-mask-image: url(../img/common/angle-right-solid.svg);
          mask-image: url(../img/common/angle-right-solid.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 5px 10px;
          mask-size: 5px 10px;
  background-color: #fff;
  width: 5px;
  height: 10px;
  margin-right: 8px;
  margin-left: 8px;
}

.h4_wrapp {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  /*
  &.h4_special {
      margin-bottom: 3rem;
  }
  */
  /*
  &.v2 {
      h3.h4-01 {
          width: calc(100% - 30rem);
      }
      //
      .btn_box {
          width: 30rem;
      }
  }
  */
  /*
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  //@include mq(sp) {
      //flex-wrap: wrap;
      //gap: 1rem;
  //}
  */
  /*
  h3.h4-01 {
      width: calc(100% - 130px);
      //display: flex;
      //align-items: center;
      font-size: 2.7rem;
      font-family: v.$f-mincho;
      font-weight: 400;
      position: relative;
      @include mq(sp) {
          width: 100%;
          font-size: 2.3rem;
      }
      &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 10px;
          z-index: -1;
          width: calc(100% - 10px);
          height: 1px;
          background: #BFBFBF;
      }
      .h4_txt {
          display: inline-block;
          padding-right: 20px;
          background: #fff;
      }
      .h4_icon {
          display: inline-block;
          padding-right: 8px;
          background: #fff;
      }
      //
      &.full {
          width: 100%;
          display: flex;
          align-items: center;
      }
  }
  //
  .btn_box {
      width: 130px;
      padding-left: 10px;
      background: #fff;
      @include mq(sp) {
          padding-left: 0;
          margin-right: 0;
          margin-left: auto;
      }
  }
  */
  /*
  &.v2 {
      h3.h4-01 {
          width: calc(100% - 30rem);
      }
      //
      .btn_box {
          width: 30rem;
      }
  }
  */
}
.h4_wrapp h3.h4-01 {
  width: calc(100% - 130px);
  font-size: 2.7rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  position: relative;
}
@media (max-width: 767px) {
  .h4_wrapp h3.h4-01 {
    width: 100%;
    font-size: 2.3rem;
  }
}
.h4_wrapp h3.h4-01::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  z-index: -1;
  width: calc(100% - 10px);
  height: 1px;
  background: #BFBFBF;
}
.h4_wrapp h3.h4-01 .h4_txt {
  display: inline-block;
  padding-right: 20px;
  background: #fff;
}
.h4_wrapp h3.h4-01 .h4_icon {
  display: inline-block;
  padding-right: 8px;
  background: #fff;
}
.h4_wrapp h3.h4-01.full {
  width: 100%;
  display: flex;
  align-items: center;
}
.h4_wrapp .btn_box {
  width: 130px;
  padding-left: 10px;
  background: #fff;
}
@media (max-width: 767px) {
  .h4_wrapp .btn_box {
    padding-left: 0;
    margin-right: 0;
    margin-left: auto;
  }
}
.h4_wrapp.h4_special {
  margin-bottom: 3rem;
}

/*
.h4_wrapp {
    &.v2 {
        .btn_box {
            .btn-more {
                width: 100%;
                height: 4rem;
                font-size: 1.9rem;
                //くの字
                &::before {
                    mask-size: 8px 13px;
                    width: 8px;
                    height: 13px;
                    margin-top: .2rem;
                    margin-right: .8rem;
                }
            }
        }
    }
}
*/
.col4 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (min-width: 769px) {
  .col4 {
    gap: 2.1em 2.439%;
  }
}
.col4 > a {
  width: calc((100% - 10px) / 2);
  text-align: center;
}
@media (min-width: 769px) {
  .col4 > a {
    width: 23.17075%;
  }
}

.home_hair-info_inner {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  overflow: hidden;
  padding: 3em 20px 13rem;
}
@media (min-width: 769px) {
  .home_hair-info_inner {
    padding-top: 4.5em;
  }
}
@media (max-width: 767px) {
  .home_hair-info_inner {
    padding-bottom: 11rem;
  }
}
.home_hair-info_inner > img {
  display: block;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 82/39;
}
@media (min-width: 769px) {
  .home_hair-info_inner > img {
    display: none;
  }
}
.home_hair-info_inner .box_h3 {
  width: 100%;
  position: absolute;
  top: 50px;
  left: 0;
}
.home_hair-info_inner .box_txt {
  width: 100%;
  position: unset;
  padding-right: 10px;
  padding-left: 10px;
}
@media (min-width: 769px) {
  .home_hair-info_inner .box_txt {
    max-width: 1680px;
    padding-top: 3%;
    padding-right: 20px;
    padding-left: 20px;
    margin: auto;
  }
}

p.h4_txt-explanation {
  margin-bottom: 1.875em;
  color: #7F7F7F;
  font-size: 1.6rem;
}

.home_gstyle_box {
  width: 100%;
}
.home_gstyle_box a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.home_gstyle_box a:hover {
  text-decoration: underline;
}
.home_gstyle_box figure {
  width: 100%;
  margin-bottom: 20px;
}
.home_gstyle_box .txt_box {
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
  font-weight: 700;
}

.hair-info_col {
  display: flex;
  gap: 0 6.09756%;
  margin-bottom: 12rem;
}
@media (max-width: 1199px) {
  .hair-info_col {
    flex-wrap: wrap;
    gap: 4rem;
    margin-bottom: 6rem;
  }
}
.hair-info_col .col-box-01 {
  width: 34.14634%;
}
@media (max-width: 1199px) {
  .hair-info_col .col-box-01 {
    width: 100%;
  }
}
.hair-info_col .col-box-01 .col-box-inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1.053em 0;
}
.hair-info_col .col-box-01 .col-box-inner .col2_hair-info {
  width: 100%;
  display: flex;
}
.hair-info_col .col-box-01 .col-box-inner .col2_hair-info figure {
  width: 20.17857%;
}
.hair-info_col .col-box-01 .col-box-inner .col2_hair-info .txt_box {
  width: 79.82143%;
  padding-top: 1rem;
  padding-left: 15px;
}
@media (max-width: 1199px) {
  .hair-info_col .col-box-01 .col-box-inner .col2_hair-info .txt_box {
    padding-top: 0;
  }
}
.hair-info_col .col-box-01 .col-box-inner .col2_hair-info .txt_box .title {
  display: block;
  margin-bottom: 0.8em;
  font-weight: 700;
}
@media (max-width: 1199px) {
  .hair-info_col .col-box-01 .col-box-inner .col2_hair-info .txt_box .title {
    margin-bottom: 0;
  }
}
.hair-info_col .col-box-01 .col-box-inner .col2_hair-info .txt_box .title a {
  text-decoration: none;
}
.hair-info_col .col-box-01 .col-box-inner .col2_hair-info .txt_box .title a:hover {
  text-decoration: underline;
}
.hair-info_col .col-box-01 .col-box-inner .col2_hair-info .txt_box p {
  margin-bottom: 0;
}
.hair-info_col .col-box-01 .col-box-inner .col2_hair-info .txt_box a {
  text-decoration: none;
}
.hair-info_col .col-box-01 .col-box-inner .col2_hair-info .txt_box a:hover {
  text-decoration: underline;
}
.hair-info_col .col-box-02 {
  width: 19.512195%;
}
@media (max-width: 1199px) {
  .hair-info_col .col-box-02 {
    width: 100%;
  }
}
.hair-info_col .col-box-02 .col-box-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.hair-info_col .col-box-02 .col-box-inner .qa_box .col2_hair-info, .hair-info_col .col-box-02 .col-box-inner .model_box .col2_hair-info {
  display: flex;
}
.hair-info_col .col-box-02 .col-box-inner .qa_box .col2_hair-info figure, .hair-info_col .col-box-02 .col-box-inner .model_box .col2_hair-info figure {
  width: 35.3125%;
}
@media (max-width: 1199px) {
  .hair-info_col .col-box-02 .col-box-inner .qa_box .col2_hair-info figure, .hair-info_col .col-box-02 .col-box-inner .model_box .col2_hair-info figure {
    width: 20.17857%;
  }
}
.hair-info_col .col-box-02 .col-box-inner .qa_box .col2_hair-info .txt_box, .hair-info_col .col-box-02 .col-box-inner .model_box .col2_hair-info .txt_box {
  width: 64.6875%;
  padding-top: 1rem;
  padding-left: 15px;
}
@media (max-width: 1199px) {
  .hair-info_col .col-box-02 .col-box-inner .qa_box .col2_hair-info .txt_box, .hair-info_col .col-box-02 .col-box-inner .model_box .col2_hair-info .txt_box {
    width: 79.82143%;
  }
}
.hair-info_col .col-box-02 .col-box-inner .model_box {
  margin-top: auto;
  margin-bottom: 0;
}
@media (max-width: 1199px) {
  .hair-info_col .col-box-02 .col-box-inner .model_box {
    display: none;
  }
}

.btn-more_wt {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12rem;
  height: 12rem;
  background: rgba(255, 255, 255, 0.7);
  border: solid 1px #002060;
  border-radius: 50%;
  color: #002060;
  cursor: pointer;
  position: relative;
}
@media (max-width: 767px) {
  .btn-more_wt {
    width: 80px;
    height: 80px;
  }
}
.btn-more_wt::after {
  content: "";
  display: block;
  width: 22px;
  height: 11px;
  background-image: url(../img/arrow-down_blu.webp);
  background-size: contain;
  position: absolute;
  top: 70%;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.btn-more_wt:hover {
  opacity: 0.6;
}

.more.grad {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26rem;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6), white);
  margin-top: -26rem;
  position: relative;
}
@media (max-width: 767px) {
  .more.grad {
    height: 16rem;
    margin-top: -16rem;
  }
}
.more.grad p {
  cursor: pointer;
}

.contents_open {
  transition: transform 0.4s ease;
}
.contents_open .col4 {
  padding-top: 2.1em;
}
@media (max-width: 767px) {
  .contents_open .col4 {
    padding-top: 10px;
  }
}

/*
//----------------------------------------------------------------メニューガイド
//メニューガイド詳細
@mixin wid-menu-detail {
    //width: 58.5366%;
    width: 100%;
    max-width: 1000px;//960px;
    padding-right: 20px;
    padding-left: 20px;
	margin: 0 auto;
    //@include mq(pc2) {
    //@media screen and (min-width: 1000px) {
        //width: 100%;
    //}
    //@include mq(sp) {
        //width: 100%;
    //}
}

//メニューガイド
.section_gallery_menu {
    margin-bottom: 16rem;
    //メニューガイドTOP
    &.v1 {
        margin-bottom: 8rem;
    }
    //メニューガイド詳細下メニュー
    .section_gallery_menu_group {
        @include wid-menu-detail;
        //メニューガイドTOP
        &.v1 {
            max-width: 1680px;
        }
    }
    //メニューガイド共通
    .sec_inner {
        //width: 86.5854%;
        //max-width: 1420px;
        //padding-bottom: 2rem;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 0;
        //@include mq(pc2) {
        //    width: 100%;
        //}
        //@include mq(sp) {
        //    width: 100%;
        //    padding-right: 5px;
        //    padding-left: 5px;
        //}
        //
        //.menu-name {
        //    width: 50%;
        //    @include mq(sp) {
        //        width: 100%;
        //    }
        //}
        //メニューガイドTOP
        &.v1 {
            width: 86.5854%;
            max-width: 1420px;
            padding-bottom: 5rem;
            //gap: 1rem 0;
            @include mq(pc2) {
                width: 100%;
            }
            @include mq(sp) {
                width: 100%;
                padding-bottom: 2rem;
                padding-right: 5px;
                padding-left: 5px;
            }
            .menu-name {
                width: 50%;
                @include mq(sp) {
                    width: 100%;
                }
            }
        }
        //メニューガイド詳細下メニュー
        &.v2 {
            padding-bottom: 3rem;
            border-bottom: v.$line-bf;
            margin-bottom: 4rem;
            @include mq(pc) {
                padding-right: 4.5rem;
                padding-left: 4.5rem;
            }
            @include mq(sp) {
                padding-right: 5px;
                padding-left: 5px;
            }
            .menu-name {
                width: 100%;
            }
        }
    }

}

.bg-out-wrapp {
    @include wid-menu-detail;
}

//メニューガイド詳細
.section_detail_banner {
    width: 100%;
    //@include wid-menu-detail;
    //width: 58.5366%;
    //max-width: 960px;
	//margin: 0 auto;
    //background-color: #eceaeb;
    //margin: 6rem auto 4rem;
    //display: flex;
    //gap: 0 2rem;
    //@include mq(pc2) {
    //    width: 100%;
    //}
    @include mq(sp) {
        //flex-wrap: wrap;
        //padding: 10px;
    }
    //上
    &.n1 {
        display: flex;
        gap: 0 2rem;
        background-color: #eceaeb;
        margin: 6rem auto 4rem;
        @include mq(sp) {
            flex-wrap: wrap;
            padding: 10px;
        }
    }
    //下
    &.n2 {
        @include mq(sp) {
            @include pad-rl;
        }
    }
    //
    .main_key {
        width: calc((100% - 2rem) /2);
        display: flex;
        justify-content: center;
        position: relative;
        //background: pink;
        @include mq(sp) {
            width: 100%;
            //flex-wrap: wrap;
        }
    }
    //スライド-ステップ
    @include mq(sp) {
        .desc {
            padding-top: 10px;
        }
    }
}

//メニューガイド詳細
.section_detail_main {
    @include wid-menu-detail;
    .sec_header {
        //@include wid-menu-detail;
        border-top: v.$line-bf;
        text-align: center;
        //
        .ttl {
            display: block;
            padding: 1rem 0;
            //margin-bottom: 15px;
            font-size: 2.7rem;
            //line-height: 1.5em;
            @include mq(sp) {
                font-size: 2rem;
            }
        }
        //
        .lbl {
	        display: block;
            padding: 5px;
            background: #BFBFBF;
            color: #FFF;
            font-size: 2.1rem;
            line-height: 1em;
            @include mq(sp) {
                font-size: 1.6rem;
            }
        }
    }
    //
    .sec_desc {
        //@include wid-menu-detail;
        //padding: 4rem 20px 5rem;
        line-height: 1.6;
        @include mq(pc) {
            padding: 4rem 0 5rem;
        }
        @include mq(sp) {
            padding: 2rem 0;
        }
    }
    //
    //.sec_inner {
        //@include wid-menu-detail;
        //padding: 0;
    //}
    //
    .ls_step {
        width: 100%;
        @include flex(wrap);
        gap: 6rem 9.8%;
        margin-bottom: 9rem;
        li {
            width: calc((100% - 19.6%) /3);
            position: relative;
            .image {
                position: relative;
                &::before {
                    content: "";
                    display: block;
                    width: 36.54%;//20px;
                    height: 100%;//20px;
                    //padding-top: 6%;
                    background: url(../img/contents/eyelash/icon_img04.png) 50% 50% no-repeat;
                    background-size: 1.2rem 2rem;
                    position: absolute;
                    top: 0;//15rem;
                    left: -36.54%;
                    //border: solid 1px #f00;
                }
            }
            .desc {
                padding-top: 1rem;
                font-size: 1.6rem;
                line-height: 1.6;
            }
            &:nth-child(3n+1) .image:before {
                display: none;
            }
        }
    }
}

//----------------------------------------------------------------プロダクト
.section_content_l {
    @include wid-max-pc;
    padding-top: 2rem;
    @include pad-rl;
    //
    .inner-row {
        padding-right: 1rem;
        padding-left: 1rem;
    }
    //
    .inner-details {
        width: 48.7805%;
        max-width: 800px;
        margin: 0 auto;
        @include mq(pc2) {
            width: 100%;
        }
        @include mq(sp) {
            width: 100%;
        }
    }
}

//検索タイトル
.title-search {
    padding: 1rem;
    border-top: v.$line-bf;
    border-bottom: v.$line-bf;
    text-align: center;
    @include fs-20;
    font-weight: normal;
    margin-bottom: 6rem;
    @include mq(sp) {
        font-size: 2rem;
    }
    //
    &.v2 {
        margin-bottom: 3.5rem;
    }
    //
    &.v3 {
        margin-bottom: 7rem;
        @include mq(sp) {
            margin-bottom: 2rem;
        }
    }
    //
    &.v4 {
        margin-bottom: 8rem;
        @include mq(sp) {
            margin-bottom: 2rem;
        }
    }
}

//step
.search-step {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
    @include mq(sp) {
        flex-direction: column;
    }
    .icon-step {
        width: 9rem;
        height: 3rem;
        padding-bottom: .2rem;
        border: solid 1px #7F7F7F;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: v.$f-mincho;
        @include mq(sp) {
            width: 90px;
        }
    }
    .txt-step {
        //flex: 1;
        @include mq(sp) {
            width: 100%;//calc(100% - 100px);
        }
        &.w-specify {
            width: 32rem;
            @include mq(sp) {
                width: 100%;
            }
        }
    }
    .key-step {
        @include mq(sp) {
            width: 100%;
        }
    }
    .max-step {
        width: 100%;
        @include mq(pc) {
            padding-left: 16rem;
        }
    }
    //BA一覧（ゲストスタイル一覧）step3ブロック
    &.v2 {
        padding-top: 1rem;
        margin-bottom: 6rem;
    }
}

//チェックボックス
.block_tag {
    padding-left: 17rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 0;
    margin-bottom: 4rem;
    &.faq {
        .checkbox_parts {
            @include mq(pc) {
                width: 29rem;
            }
        }
    }
    @include mq(sp) {
        padding-left: 0;
    }
}

//検索ボタン
button[type="submit"].button_submit-new {
    -webkit-appearance: none;//iphone初期値リセット
    overflow: hidden;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	//width: 260px;
    padding: 1rem 7rem;
	height: 5rem;
	background-color: #002060;
	border: solid 1px #002060;
	text-align: center;
	color: #fff;// !important
	font-size: 1.9rem;
    transition: 0.2s ease-in-out;
    position: relative;
    z-index: 0;
    cursor: pointer;
    @include mq(pc) {
        width: 36rem;
    }
	@include mq(sp) {
        width: 100%;
        max-width: 360px;
        padding: 1rem 3rem;
		font-size: 1.4rem;
	}
    //くの字
	&::after {
		content: "";
		display: block;
        background-color: #fff;
		mask-image: url(../img/common/angle-right-solid.svg);
		mask-repeat: no-repeat;
        mask-size: 8px 13px;
        width: 8px;
        height: 13px;
        position: absolute;
        top: calc(50% - 6px);
		left: 2rem;
		transition: 0.2s ease-in-out;
	}
    //ホバー背景
	&::before {
		content: "";
        background-color: #fff;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: .2s;
		transform: translateX(-102%);
		z-index: -1;
	}
	//ホバー共通
	&:hover {
        color: #002060;
        &::after {
            background-color: #002060;
        }
		&::before {
			left: 0;
			transform: translateX(0);
		}
	}
}

.ls_pd {
    display: flex;
    flex-direction: column;
    gap: 7rem 0;
    @include mq(pc) {
        padding: 0 1rem;
    }
    @include mq(sp) {
        gap: 6rem 0;
    }
    //
    .content {
        display: flex;
        flex-wrap: wrap;
        p {
            color: #404040;
            margin-bottom: 0;
            @include mq(pc) {
                line-height: 1.7;
            }
        }
    }
    time {
        color: #7F7F7F;
        font-size: 1.4rem;
        font-weight: 500;
        letter-spacing: .05rem;
        @include mq(sp) {
            display: none;
        }
    }
    .ttl {
        margin: 1.5rem 0;
        font-size: 2.7rem;
        font-weight: normal;
        @include mq(sp) {
            font-size: 2rem;
        }
    }
    .image {
        @include mq(pc) {
            width: 24.0741%;
            max-width: 390px;
        }
        @include mq(sp) {
            width: 100%;
        }
    }
    .text {
        @include mq(pc) {
            flex: 1;
            padding-left: 4rem;
        }
        @include mq(sp) {
            width: 100%;
        }
    }
}

//
.post_content {
    time {
        display: block;
        text-align: right;
        color: #7F7F7F;
        font-size: 1.4rem;
        font-weight: 500;
        letter-spacing: .05rem;
        @include mq(sp) {
            display: none;
        }
    }
    //
    &.-ba {
        time {
            color: #BFBFBF;
            margin-bottom: 3rem;
            @include mq(sp) {
                display: block;
            }
        }
    }
}

.blog_post {
    .font-title-h3 {
        padding-left: .8rem;
        border-left: .7rem solid #786958;
        font-size: 2.4rem;
        font-weight: bold;
        line-height: 1.25;
        margin-top: 7rem;//1.5em;
        margin-bottom: 1em;
        @include mq(sp) {
            font-size: 20px;
        }
    }

    .font-title-h5 {
        font-size: 2.1rem;
        font-weight: bold;
        padding-bottom: .8rem;
        border-bottom: 3px solid #444;
        margin-top: 1.5em;
        margin-bottom: 1em;
        @include mq(sp) {
            font-size: 16px;
        }
    }

    img {
        margin: 3.5rem 0;
    }
}

//Q&A
.ls_faq {
    width: 82.9269%;
    max-width: 1360px;
    margin: 0 auto;
    @include mq(pc2) {
        width: 100%;
    }
    @include mq(sp) {
        width: 100%;
    }
    //
    .ttl {
        position: relative;
        display: flex;//block;
        gap: 0 1rem;
        cursor: pointer;
        padding-right: 3rem;
        font-size: 2.4rem;
        @include mq(sp) {
            font-size: 16px;
        }
    }
    //アコーディオン
    .content {
        @include mq(sp) {
            padding: 2rem 1rem;
        }
        &:nth-last-of-type(1) {
            border-bottom: v.$line-bf;
            margin-bottom: 8rem;
        }
    }
    .answer {
        padding: 2rem 0;
    }
}

//BA
.tag_sex {
    display: flex;
    gap: 2rem;
    @include mq(sp) {
        gap: 1rem;
    }
    .form_item {
        font-size: 1.9rem;
        //margin: 0 15px;
        @include mq(sp) {
            font-size: 14px;
        }
    }
    .checkbox_parts {
        width: 24rem;
        height: 3rem;
        padding-left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        @include mq(sp) {
            width: 100%;
        }
        span {
            position: relative;
            z-index: 1;
        }
        &::before {
            content: '';
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            border: v.$line-d9;
            //border-radius: 4px;
            //background-color: #bcb8b4;
        }
    }
    .checkbox:checked + .checkbox_parts::before {
        //display: inline-block;
        background-color: #D9D9D9;
    }
}

//formスタイル選択
.style-wrapp {
    width: 100%;
    padding: 1rem;
    border-bottom: v.$line-d9;
    display: flex;
    @include mq(sp) {
        flex-wrap: wrap;
    }
    .style-category {
        width: 26rem;
        @include mq(sp) {
            width: 100%;
            padding-bottom: 1rem;
            font-weight: bold;
        }
    }
    .tag_other {
        @include mq(pc) {
            gap: 1rem 0;
            flex: 1;
            label {
                width: calc(100% /4);
            }
        }
        @include mq(sp) {
            label {
                width: calc(100% /2);
            }
        }
    }
    //
    &:first-child {
        border-top: v.$line-d9;
    }
}

.tag_other {
    display: flex;
    flex-wrap: wrap;
}

//↓「＋もっと見る」block-basearch.php内にjsもあるよ
.view-more {
    width: 100%;
    //margin-top: 1rem;
}

.btn-view-more {
    width: 13rem;
    height: 2.5rem;
    padding-bottom: .2rem;
    background-color: #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    cursor: pointer;
}

.contents_view {
    width: 100%;
    transition: transform 0.4s ease;
    &.style-tag {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 0;
        label {
            width: calc(100% /4);
        }
    }
}
//↓ここまで

//BA下　ゲストスタイル一覧
.gstyle_wrapp {
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 6rem;
    //background-color: peru;
    @include mq(sp) {
        padding-right: 0;
        padding-left: 0;
    }
    //
    .col4_gstyle {
        width: 100%;
        @include flex(wrap);
        gap: 6rem 3.7037037%;
        margin-bottom: 6rem;
        //background-color: peachpuff;
        @include mq(sp) {
            gap: 4rem;
        }
        //
        a.gstyle_box {
            width: calc((100% - 11.11111%) /4);
            //max-width: 360px;
            @include flex;//(wrap);
            flex-direction: column;
            align-items: flex-start;
            text-decoration: none;
            //background-color: pink;
            @include mq(sp) {
                width: 100%;
            }
            //
            .gstyle_inner {
                display: flex;
            }
            //
            figure {
                width: 50%;
                background: #F2F2F2;
                text-align: center;
                //width: calc((100% - 1px) /2);
                &.fig_01 {
                    //display: flex;
                    position: relative;
                    &::after {
                        content: "";
                        display: block;
                        width: 1px;
                        height: 100%;
                        background: #fff;
                        position: absolute;
                        top: 0;
                        right: 0;
                    }

                }
                //BA
                &.ba-type {
                    position: relative;
                    //
                    .ba-title {
                        width: 100%;
                        padding: 3px 5px;
                        display: block;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        background: rgba($color: #000000, $alpha: .4);
                        text-align: center;
                        color: #fff;
                        font-size: 1.6rem;
                        font-weight: 400;
                        letter-spacing: .2rem;
                    }
                }
                //
                img {
                    //width: auto;
                    //max-height: 24rem;
                    aspect-ratio: 18 / 24;
                    object-fit: contain;
                }
            }
            .record_box {
                width: 100%;
                padding: 10px;
                display: flex;
                flex-direction: column;
                flex: 1;
                .record-day {
                    //width: 100%;
                    display: block;
                    color: #BFBFBF;
                    font-size: 1.3rem;
                    margin-bottom: 1rem;
                }
                p {
                    margin-bottom: 0;
                }
            }
            //
            img {
                &:hover {
                    opacity: 1;
                }
            }
            //
            &:hover {
                opacity: .6;
            }
        }
    }
}

//before,afterグレータイトル
.ttl_gray {
	font-size: 2.4rem;
	line-height: 1;
	padding: 1rem;
	text-align: center;
	background-color: #F2F2F2;
	color: #7F7F7F;
	margin-bottom: 2rem;
    @include mq(sp) {
        font-size: 2rem;
    }
    &.after {
        margin-top: 8rem;
        @include mq(sp) {
            margin-top: 4rem;
        }
    }
}

.post_content {
    &.-ba {
        width: 70.7317%;
        max-width: 1160px;
        margin: 0 auto;
        @include mq(pc2) {
            width: 100%;
        }
        @include mq(sp) {
            width: 100%;
        }
        //
        .image {
            width: 100%;
            display: flex;
            gap: 1.5rem 4rem;
            //margin-bottom: 2rem;
            @include mq(sp) {
                flex-direction: column;
            }
            .img-box {
                width: 100%;
                @include mq(pc) {
                    width: calc((100% - 8rem) /3);
                }
            }
        }
    }
}

.row {
    &.-ba {
        display: flex;
        //margin-top: 8rem;
        @include mq(sp) {
            //margin-top: 40px;
        }
        //before,afterの紺の矢印のブロック
        .col6 {
            width: 50%;
            //
            .ttl_gray {
                height: 6rem;
                padding: 0;
                background-color: #002060;
                border-right: solid 1px #002060;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                margin-bottom: 1rem;
                @include mq(sp) {
                    height: 40px;
                    font-size: 16px;
                }
                &::before, &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    //right: 0;
                    //left: 0;
                    width: 0;
                    height: 0;
                    border-top: 3rem solid transparent;
                    border-bottom: 3rem solid transparent;
                    @include mq(sp) {
                        border-top-width: 20px;
                        border-bottom-width: 20px;
                    }
                }
                &::before {
                    left: 0;
                    //border-top: 3rem solid transparent;
                    //border-bottom: 3rem solid transparent;
                    border-left: 3rem solid #fff;
                    @include mq(sp) {
                        border-left-width: 20px;
                    }
                }
                &::after {
                    right: 0;
                    border-left: 3rem solid #002060;
                    transform: translateX(3rem);
                    @include mq(sp) {
                        border-left-width: 20px;
                        transform: translateX(20px);
                    }
                }
            }
            //
            &.col-l {
                .ttl_gray {
                    z-index: 2;
                    //&::after {
                        //right: 2px;
                    //}
                }
                .img-box {
                    padding-right: 2rem;
                    @include mq(sp) {
                        padding-right: .5rem;
                    }
                }
            }
            &.col-r {
                .ttl_gray {
                    width: calc(100% - 3rem);
                    border-left: solid 3px #fff;
                    z-index: 1;
                    @include mq(sp) {
                        width: calc(100% - 20px);
                    }
                    //&::before {
                        //left: 2px;
                    //}
                }
                .img-box {
                    padding-left: 2rem;
                    @include mq(sp) {
                        padding-left: .5rem;
                    }
                }
            }
            //
            //&.v2 {}
        }
        //
        &.v2 {
            //.col2-ba {
                gap: 4rem;
                @include mq(sp) {
                    gap: 1rem;
                }
                .col {
                    .img-box {
                        position: relative;
                        //
                        .ba-title {
                            width: 100%;
                            padding: 3px 5px;
                            display: block;
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            background: rgba($color: #000000, $alpha: .4);
                            text-align: center;
                            color: #fff;
                            //font-size: 1.6rem;
                            //font-weight: 400;
                            letter-spacing: .2rem;
                        }
                    }
                }
            //}
        }     
    }
}

//
p + .row.-ba {
    margin-top: 8rem;
    @include mq(sp) {
        margin-top: 40px;
    }
}

//（新）2 写真下コメント
p.ba-new2-comment {
    padding-top: 1rem;
    margin-top: 0 !important;
    margin-bottom: 7rem !important;
}

//
.ba-shop-link {
    display: flex;
    justify-content: flex-end;
    gap: 1rem 4rem;
    @include mq(sp) {
        flex-direction: column;
        align-items: flex-end;
    }
    a {
        padding-left: 2rem;
        text-decoration: none;
        position: relative;
        //くの字
        &::after {
            content: "";
            display: block;
			width: 8px;
			height: 13px;
            mask-image: url(../img/common/angle-right-solid.svg);
            mask-repeat: no-repeat;
            mask-size: 8px 13px;
            background-color: #000;
            position: absolute;
            top: calc(50% - 6px);
            left: 0;
            transition: 0.2s ease-in-out;
        }
        &:hover {
            text-decoration: underline;
        }
    }
    //
    &.left {
        justify-content: unset;
    }
}

//
//スタッフデータ
.staff-post-data {
    width: 100%;//
    display: flex;
    margin-bottom: 10rem;
    @include mq(sp) {
        flex-wrap: wrap;
        justify-content: center;
        gap: 3rem;
        margin-bottom: 60px;
    }
    > figure {
        width: 17.0732%;//280px
        padding-top: 10px;
        padding-left: 10px;
        position: relative;
        @include mq(sp) {
            width: 100%;
            max-width: 270px;
            padding-right: 10px;
        }
        //
        .staff-icon {
            position: absolute;
            top: 0;
            left: 0;
            img {
                width: 12.8rem;//13.4rem;
                height: 6.8rem;//7.1rem;
            }
        }
    }
    .txt_box {
        flex: 1;
        display: flex;
        flex-direction: column;
        //width: calc(100% - 25.90362%);
        padding-top: 6rem;
        padding-right: 10px;
        //padding-bottom: 15px;
        padding-left: 6rem;
        @include mq(sp) {
            flex: auto;
            width: 100%;
            padding-top: 0;
            padding-left: 10px;
        }
        > span {
            display: block;
            //店長とか
            //&.official-position {
            //    min-height: 3rem;
            //    font-size: 1.7rem;
                //margin-bottom: 1rem;
                //background: aqua;
            //    @include mq(sp) {
            //        font-size: 1.4rem;
            //    }
                //非表示
            //    &.none {
            //        display: none;
            //    }
            //}
            //職種（スタイリストとか）
            &.job-position {
                color: #404040;
                font-size: 2.1rem;
                //font-weight: bold;
                margin-bottom: .5rem;
                //background: pink;
                @include mq(sp) {
                    text-align: center;
                    font-size: 1.7rem;//1.6rem;
                    margin-bottom: 0;
                }
                //
                //.dec_job-poition {
                //    padding-bottom: 10px;
                //    padding-right: 10px;
                //}
                //指名料
                //.nomination-fee {
                    //background: gold;
                //    @include mq(sp) {
                //        display: block;
                //    }
                //}
            }
            //スタッフ名前
            &.staff-name {
                font-size: 3.7rem;
                //font-weight: 400;
                font-family: v.$f-mincho;
                letter-spacing: 1rem;
                margin-bottom: 2rem;
                @include mq(sp) {
                    //min-height: 4rem;
                    text-align: center;
                    font-size: 3rem;
                }
            }

        }
        p.staff-comment {
            //font-size: 2.1rem;
            color: #404040;
            line-height: 1.7;
            margin-bottom: 3rem;
            @include mq(sp) {
                font-size: 1.6rem;
            }
        }
    }
    //
    &.v2 {
        align-items: center;
        .txt_box {
            padding-top: 0;
            padding-right: 12rem;
            padding-left: 4rem;
            @include mq(sp) {
                padding: 0;
                .btn_01 {
                    margin-right: auto;
                    margin-left: auto;
                }
            }
        }
        .link_box {
            width: 43rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            @include mq(sp) {
                width: 100%;
            }
            .link-banner {
                width: 100%;
                min-height: 9rem;
                padding: 1rem .5rem 1rem 5.5rem;
                border: v.$line-bf;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-decoration: none;
                position: relative;
                @include mq(sp) {
                    max-width: 430px;
                    margin-right: auto;
                    margin-left: auto;
                }
                //くの字
                &::after {
                    content: "";
                    display: block;
                    width: 8px;
                    height: 13px;
                    mask-image: url(../img/common/angle-right-solid.svg);
                    mask-repeat: no-repeat;
                    mask-size: 8px 13px;
                    background-color: #000;
                    position: absolute;
                    top: calc(50% - 6px);
                    left: 2rem;
                    transition: 0.2s ease-in-out;
                }
            }

        }
    }
}

//ボタンのスペース
.btn_wrapp {
    padding-top: 4rem;
}
*//*# sourceMappingURL=hairinfo.css.map */