@charset "utf-8";
:root{
  /* Base Font Size 1.0rem = 10px */
  font-size: 10px;

  /* カラー */
  --color-wht: #fff;
  --color-pnk: #eaa0a7;
  --color-lightpnk: #f6dbe0;
  --color-lightpnk02: #f3e9e8;
  --color_tan: #996c33;
  --color_light_brn: #dccdba;
  --color_mid_brn: #cfba9e;

  --ff: "Noto Sans JP", sans-serif;
  --ff_serif: "Noto Serif JP", serif;
  --ff-en: "Inter", sans-serif;
  --ff-en_roboto: "Roboto Condensed", sans-serif;

}
/* 320対応（374以下は、ルートベースフォントサイズを9pxに） */
@media screen and (max-width: 374px){
    :root{
        font-size: 8px;
    }
}
*, *::before, *::after {
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}
body {
  position: relative;
  background: #fef9f3;
  font-family: "Noto Serif JP", "Roboto Condensed", "Meiryo", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Inter", serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color_tan);
  overflow-x: hidden;
}
img{
  width: 100%;
  height: auto;
}
p{
  position: relative;
  text-align: justify;
  font-size: 1.6rem;
}
strong,b{
  font-weight: 700;
}

a,
a:hover,
a:hover img {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}
a:hover img{opacity: 0.9;}

div, section, p, h1, h2, h3, ul, li {
  margin: 0;
  padding: 0;
}

.wrapper,
.wrap800{
  max-width: 1080px;
  width: 86%;
  /* width: 92.1875%; */
  margin-inline: auto;
}
.wrap800{
  max-width: 800px;
}
.sec{padding: 100px 0;}

.item_container,
.item_container_r{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.item_container_r{
  flex-direction: row-reverse;
}
.itembox02{width: 45%;}
/* .itembox02 img{
  display: block;
  width: 100%;
  height: auto;
} */

.pc_case{display: block;}
.sp_case{display: none;}

@media (min-width: 751px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

@media (max-width: 768px) {
  main{overflow: hidden;}
  .sec{padding: 60px 0;}
  p{font-size: 1.5rem;}
  .pc_case{display: none;}
  .sp_case{display: block;}
  .itembox02{
    width: 100%;
  }

}

/* ==============================
    共通設定
=============================== */
.font_s{font-size: 1.3rem;}
.text_c{text-align: center;}
.text_r{text-align: right;}
.txt18{font-size: 1.8rem;}
.mt100{margin-top: 100px;}
.mb30{margin-bottom: 30px;}
.mb60{margin-bottom: 60px;}
.mb100{margin-bottom: 100px;}

/* タイトル文字を飛ばす */
.visuall_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .txt18{font-size: 1.7rem;}
}

/* ==============================
    header
=============================== */
header{
  position: relative;
  background: #fef9f3;
  height: 100%;
  padding: 0;
  margin: 0;
}
header .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
}
.head_logo{
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-pnk);
  width: 200px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.head_logo img{
  display: block;
  width: 90%;
  height: auto;
}
.shop_icon a{
  background: var(--color-pnk);
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop_icon a:hover{
  background: var(--color_light_brn);
}
li.shop_icon img {
  display: block;
  width: 55px;
  height: 45px;
}

/* 下層ページ */
header.other_header .wrapper{
  position: absolute;
  inset: 0;
  width: 100%;
}
.other_bg{
  background-image: linear-gradient(140deg, rgba(255, 249, 243, 1), rgba(242, 225, 229, 1));
  min-height: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  header,
  header .wrapper{
    height: auto;
  }
  .head_logo{
    width: 90px;
    height: 80px;
  }
  .head_logo img{width: 100%;}

  .shop_icon{
    width: 100%;
    height: 100%;
  }
  li.shop_icon a{
    width: 100%;
    height: 100%;
    gap: 10px;
    color: var(--color-wht);
    padding: 10px 5px;
  }
  li.shop_icon .sp_case{display: inline-block;}
  li.shop_icon img{
    display: inline-block;
    width: 45px;
    height: 40px;
  }
  /* 下層ページ */
  .other_bg{
    min-height: 340px;
  }
}

/* ==============================
    footer
=============================== */
footer{
  position: relative;
  background: var(--color-pnk);
  color: var(--color-wht);
  padding: 80px 0;
  z-index: 0;
}
footer::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,rgba(153,108,51,0.3),rgba(0,0,0,0));
}
.fot_btn{
  width: 30%;
}
a.fot_btn,
a.fot_btn:visited{
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.2);
  border: 1px solid var(--color-wht);
  color: var(--color-wht);
  font-family: var(--ff-en_roboto);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.6;
  padding: 20px;
  transition: all .3s ease;
}
a.fot_btn span,
a.fot_btn:visited span{
  font-family: var(--ff);
  font-size: 1.3rem;
}
a.fot_btn:hover{
  background:var(--color_light_brn);
  border-radius: 10px;
}

.fot_logo{
  display: block;
  max-width: 220px;
  width: 60%;
  margin: 50px auto 30px;
}
footer ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
footer ul li a,
footer ul li a:visited {
  position: relative;
  color: #fff;
  font-family: var(--ff);
  font-size: 1.5rem;
  text-decoration: none;
  transition: all .3s ease;
}
footer ul li:first-child::after {
  content: "｜";
  margin-left: 20px;
  color: #fff;
}
footer ul li a:hover{
  color: var(--color_tan);
}
footer ul li a::after{
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color_tan);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
footer ul li a:hover::after{
  width: 100%;
}

.copy{
  text-align: center;
  font-family: var(--ff-en_roboto);
  font-size: 1.4rem;
  font-weight: 400;
  margin-top: 30px;
}

@media (max-width: 768px) {
  footer{
    padding: 80px 0 60px;
  }
  .fot_btn{
    width: 90%;
    margin: 0 auto 10px;
  }
  a.fot_btn,
  a.fot_btn:visited{
    padding: 15px;
  }
  footer ul{gap: 15px;}
  footer ul li a{font-size: 1.4rem;}
  footer ul li:first-child::after{
    margin-left: 15px;
  }
}

#page_top {
  position: fixed;
  right: 10px;
  bottom: -200px;
  display: block;
  width: 36px;
  height: auto;
  cursor: pointer;
  z-index: 999;
}
#page_top:hover{
  opacity: 0.9;
}

@media (max-width: 768px) {
  #page_top {
    display: none !important;
  }
}


/* ==============================
    title
=============================== */
.tit_main{
  color: var(--color_tan);
  text-align: center;
  font-family: var(--ff-en_roboto);
  font-size: 10.0rem;
  font-weight: 500;
  line-height: 1.0;
  padding-top: 60px;
}
.tit_main span{
  display: block;
  font-family: var(--ff);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.0;
  margin-top: 15px;
}
.tit_main_en,
.tit_main_en_left,
.tit_main_en_left02{
  position: relative;
  color: var(--color_tan);
  text-align: center;
  font-family: var(--ff-en_roboto);
  font-size: 7.0rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 80px;
  z-index: 5;
}
.tit_main_en_left,
.tit_main_en_left02{
  text-align: left;
  font-size: 8.0rem;
  margin-bottom: 50px;
}
.tit_main_en_left02{margin-bottom: 0;}

.tit_main_en span{
  display: block;
  font-size: 6.0rem;
}
.tit_pink,
.tit_pink_c,
.subtit_pink{
  color: var(--color-pnk);
  font-family: var(--ff-en_roboto);
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 30px;
}
.subtit_pink{
  font-family: var(--ff);
  font-size: 2.0rem;
  font-weight: 400;
}

.subtit_brn,
.subtit_brn_c,
.subtit_wht_c{
  color: var(--color_tan);
  font-family: var(--ff);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 50px;
}
.tit_pink_c,
.subtit_brn_c,
.subtit_wht_c{
  text-align: center;
}
.subtit_wht_c{color: var(--color-wht);}
.subtit_brn span{
  font-size: 1.8rem;
}

.tit_circle,
.tit_circle_s,
.tit_circle_pink{
  position: relative;
  font-family: var(--ff);
  font-size: 2.0rem;
  font-weight: 600;
  line-height: 1.2;
  padding-left: 24px;
  margin-bottom: 10px;
}
.tit_circle{
  font-size: 1.8rem;
}
.tit_circle_pink{
  color: var(--color-pnk);
  font-size: 1.8rem;
  font-weight: 600;
}

.tit_circle::before,
.tit_circle_s::before,
.tit_circle_pink::before{
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color_tan);
}
.tit_circle_s::before{
  width: 14px;
  height: 14px;
}
.tit_circle_pink::before{
  width: 14px;
  height: 14px;
  background: var(--color-pnk);
}

/* 下層ページ */
#product .tit_pink,
#product .tit_pink_c{
  line-height: 1.5;
  margin-bottom: 20px;
}
#product .subtit_brn,
#product .subtit_brn_c{
  margin-bottom: 100px;
}

@media (max-width: 768px) {
  .tit_main{font-size: 6.0rem;}
  .tit_main span{font-size: 1.5rem;}
  .tit_main_en,
  .tit_main_en_left{
    font-size: 4.0rem;
    margin-bottom: 60px;
  }
  .tit_main_en_left{margin-bottom: 40px;}
  .tit_main_en_left02{font-size: 5.5rem;}

  .tit_main_en span,
  .subtit_brn{
    font-size: 2.0rem;
  }
  .subtit_brn,
  .subtit_brn_c,
  .subtit_wht_c{
    font-size: 2.0rem;
    margin-bottom: 40px;
  }
  .tit_pink,
  .tit_pink_c{
    margin-bottom: 15px;
  }
  #product .subtit_brn,
  #product .subtit_brn_c{
    margin-bottom: 40px;
  }

}

/* ==============================
    背景
=============================== */
.bg_brn{background: var(--color_mid_brn);}
.bg_lightpink{background: #f3e9e8;}
.bg_beigepink{background: #d3b0a5;}
.bg_wht{background: var(--color-wht);}


/* ==============================
    ボタン
=============================== */
a.btn,
a.btn:visited,
a.btn_wht,
a.btn_wht:visited{
  border: 6px solid var(--color_light_brn);
  background: var(--color-wht);
  display: block;
  max-width: 200px;
  width: 80%;
  color: var(--color_tan);
  text-align: center;
  font-family: var(--ff-en);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 60px;
  margin-block: 30px;
  transition: all .3s ease;
}
a.btn_wht{
  position: relative;
  max-width: 100%;
  width: 100%;
  text-align: left;
  font-family: var(--ff);
  font-weight: 500;
  padding: 0 1em;
  margin-block: 10px;
}

a.btn:hover,
a.btn_wht:hover{
  background: var(--color_light_brn);
  color: var(--color-wht);
  border-color: var(--color_light_brn);
  border-radius: 60px;
}

a.btn_pb,
a.btn_pb:visited{
  position: relative;
  border: 6px solid var(--color-wht);
  background: #d3b0a5;
  display: block;
  width: 100%;
  color: var(--color-wht);
  text-align: left;
  font-family: var(--ff);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 60px;
  padding-left: 1em;
  margin-block: 10px;
  transition: all .3s ease;
}
a.btn_pb:hover{
  border-radius: 60px;
}

a.btn_wht::before,
a.btn_pb::before{
  content: "";
  position: absolute;
  right: 25px;
  top: 40%;
  display: inline-block;
  width: 15px;
  height: 15px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
a.btn_wht::before{
  border-top: 3px solid #d3b0a5;
  border-right: 3px solid #d3b0a5;
}

@media (max-width: 768px) {
  a.btn_pb,
  a.btn,
  a.btn_wht{
    font-size: 1.5rem;
  }
  a.btn_pb,
  a.btn{
    padding-left: 0.5em;
  }

  a.btn_wht::before,
  a.btn_pb::before{
    top: 45%;
    right: 15px;
    width: 10px;
    height: 10px;
  }

}

/* ==============================
    home msg
=============================== */
#home_msg .itembox02{
  width: 45%;
}
#home_msg .itembox02:first-child{
  margin-top: -115px;
}

#home_msg .img_position,
.img_position{
  position: relative;
}
#home_msg .itembox02 p{
  font-size: 1.6rem;
  line-height: 2.0;
  margin-bottom: 40px;
}
#home_msg .itembox02 .home_msgimg{
  display: block;
  width: 100%;
}
#home_msg .msg_leaf_lt,
.msg_leaf_lt{
  position: absolute;
  top: -5%;
  left: -7%;
  display: block;
  width: 38%;
  height: auto;
  opacity: .5;
}
#home_msg .msg_leaf_rb,
.msg_leaf_rb{
  position: absolute;
  right: -5%;
  bottom: -5%;
  display: block;
  width: 38%;
  height: auto;
  opacity: .5;
}
.leaf_cb{
  position: absolute;
  bottom: -5%;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 45%;
  height: auto;
}

@media (max-width: 768px) {
  #home_msg .itembox02{
    width: 100%;
  }
  #home_msg .itembox02:first-child{
    margin-top: 0;
  }
  #home_msg .itembox02 img{
    margin: 0 auto 60px;
  }
  #home_msg .itembox02 img.msg_leaf_lt,
  #home_msg .itembox02 img.msg_leaf_rb{
    margin: 0;
  }
  #home_msg .itembox02 p{font-size: 1.5rem;}
  #home_msg .btn{
    margin: 30px auto;
  }
}

/* ==============================
    home key point
=============================== */
#home_keypoint,
#bura_keypoint{
  position: relative;
  background: transparent;
}
#home_keypoint::before,
#bura_keypoint::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 55%;
  background: var(--color_mid_brn);
  z-index: 0;
}
.item_keypoint{
  position: relative;
  width: 28%;
}
.item_keypoint p{
  color: var(--color-wht);
  line-height: 2.0;
}
.key_txtArea{
  position: relative;
  z-index: 3;
}
p.subtit_keypink{
  color: var(--color-lightpnk02);
  font-family: var(--ff-en);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 50px 0 10px
}
.tit_keywht{
  color: var(--color-wht);
  font-family: var(--ff);
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 30px;
}
.key_num{
  position: absolute;
  top: 45%;
  right: 0;
  color: rgba(153,108,51,0.3);
  font-family: var(--ff-en_roboto);
  font-size: 20.0rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0;
  z-index: 0;
}

@media (max-width: 768px) {
  #bura_keypoint::before,
  #home_keypoint::before{
    height: 85%;
  }
  .item_keypoint{
    width: 100%;
    margin-top: 80px;
  }
  .item_keypoint:first-child{
    margin-top: 0;
  }
  .key_num{
    font-size: 19.0rem;
    line-height: 1.0;
    top: 45%;
  }
  .tit_keywht{font-size: 2.2rem;}
}

/* ==============================
    home product
=============================== */
.product_img{
  position: relative;
  z-index: 1;
}
.product_img::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -15%;
  width: 100%;
  height: 100%;
  background: var(--color-lightpnk02);
  z-index: 0;
}
.product_img img{
  position: relative;
  display: block;
  width: 80%;
  margin:0 auto;
  z-index: 5;
}
img.ribbon_rt{
  position: absolute;
  top: -5%;
  right: 2%;
  display: block;
  width: 25%;
  height: auto;
  opacity: 0.5;
  z-index: 5;
}
img.flower_lb{
  position: absolute;
  bottom: -10%;
  left: 5%;
  display: block;
  width: 32%;
  height: auto;
  opacity: 0.5;
  z-index: 5;
}
#homepro_bura a.btn{
  margin: 30px auto;
}
#homepro_bura p{
  font-family: var(--ff);
  font-weight: 400;
  margin-bottom: 30px;
}

a.btn_tryset{
  display: block;
  max-width: 700px;
  width: 100%;
  height: auto;
  margin: 60px auto;
  transition: transform 0.3s ease;
}
a.btn_tryset:hover{
  transform: translateY(-3px);
  opacity: 0.9;
}

@media (max-width: 768px) {
  #homepro_bura .itembox02{
    margin-bottom: 50px;
  }
  .product_img{
    margin-top: 40px;
  }
  #homepro_bura a.btn{
    margin: 0 auto 30px;
  }
}

/* ==============================
    2つのbox
=============================== */
.colors_bg{
  position: relative;
  width: 100%;
  padding: 80px 0;
  background: linear-gradient(
    90deg,
    #d3b0a5 50%,
    #f3e9e8 50%
  );
}

@media (max-width: 768px) {
  .colors_bg{
    background: #d3b0a5;
  }
}

#app_care,
#tryset,
#wash{
  padding: 0 30px;
}

/* APPEARANCE CARE */
.tit_wht_c,
.tit_brn_c{
  color: var(--color-wht);
  text-align: center;
  font-family: var(--ff);
  font-size: 2.0rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 10px;
}
.tit_wht_enc,
.tit_brn_enc{
  color: var(--color-wht);
  text-align: center;
  font-family: var(--ff-en_roboto);
  font-size: 4.5rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 30px;
}
.tit_brn_c,
.tit_brn_enc{
  color: var(--color_tan);
}
.wht_box{
  border: 1px solid var(--color-wht);
  /* display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px; */
  display: inline-block;
  color: var(--color-wht);
  font-family: var(--ff);
  font-size: 1.8rem;
  line-height: 1.0;
  padding: 20px 10px;
  margin-bottom: 50px;
}
img.logo_iaru{
  display: inline-block;
  width: auto;
  height: 22px;
}
#app_care p{
  color: var(--color-wht);
  line-height: 2.0;
}
.btn_search img{
  display: block;
  width: 90%;
  margin: 40px auto;
}
.bg_whtbox{
  background: var(--color-wht);
  color: var(--color_tan);
  padding: 20px;
}
#app_care .bg_whtbox p{
  color: var(--color_tan);
  font-size: 1.5rem;
  line-height: 1.8;
}
#app_care .bg_whtbox p.tit_circle_s{
  font-size: 1.8rem;
  line-height: 1.2;
}

.tryset_img{
  margin: 40px auto 0;
}

/* 試着セット */
#tryset p{
  line-height: 2.0;
}
#tryset p strong{
  font-size: 2.0rem;
  font-weight: 800;
}


@media (max-width: 768px) {
  .colors_bg{padding: 80px 0 0;}
  #app_care{padding: 0 30px 80px;}
  #tryset{
    background: #f3e9e8;
    padding: 80px 30px;
  }
  .tit_wht_c,
  .tit_brn_c{
    font-size: 1.7rem;
  }
  .tit_wht_enc,
  .tit_brn_enc{
    font-size: 3.4rem;
  }
  .wht_box{
    width: 100%;
    font-size: 2.0rem;
    line-height: 1.8;
    padding: 20px;
  }

  #app_care .bg_whtbox p.tit_circle_s{
    font-size: 1.5rem;
    font-weight: 700;
  }
  .btn_search img{width: 100%;}

  #tryset .subtit_brn_c strong{
    font-size: 2.4rem;
  }
  #tryset p strong{
    font-size: 1.8rem;
  }
  #tryset p.text_r{font-size: 1.3rem;}

}

/* ==============================
    下層ページ：私たちについて
=============================== */
#msg{
  position: relative;
  background: transparent;
}
#msg::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 72%;
  background: rgba(153,108,51,0.2);
  z-index: 0;
}
#msg .itembox02:first-child{
  width: 58%;
  padding-top: 80px;
}
#msg .itembox02:last-child{
  width: 40%;
  margin-top: -115px;
}
#msg p{
  font-size: 1.6rem;
  line-height: 2.0;
  margin-bottom: 2rem;
}
#msg p b{
  font-size: 1.8rem;
  font-weight: 700;
}
#msg .txt_msg{
  position: absolute;
  right: 0;
  bottom: -100px;
  color: rgba(153,108,51,0.3);
  text-align: right;
  font-family: var(--ff-en_roboto);
  font-size: 17.0rem;
  font-weight: 700;
  line-height: 1.0;
}

/* プロフィール */
#profile{padding: 180px 0 100px;}
.table01{
  width: 100%;
}
.table01 th,
.table01 td{
  text-align: left;
  font-family: var(--ff_serif);
  font-size: 1.6rem;
  font-weight: 400;
  padding: 20px 10px;
}
.table01 th{width: 30%;}
.table01 td{width: 70%;}
.table01 td a,
.table01 td a:visited{
  color: var(--color_tan);
}

@media (max-width: 768px) {
  #msg::before{
    height: 20%;
  }
  #msg .itembox02:first-child{
    width: 100%;
    padding-top: 0;
  }
  #msg .itembox02:last-child{
    width: 100%;
    margin-top: 0;
  }
  #msg p{font-size: 1.5rem;}
  #msg p b{font-size: 1.7rem;}
  #msg .txt_msg{
    display: inline-block;
    transform: rotate(90deg);
    font-size: 10.0rem;
    right: auto;
    left: -44%;
    bottom: 7%;
    z-index: 3;
  }
/* プロフィール */
  #profile{padding: 80px 0;}
  .table01 th,
  .table01 td{
    font-size: 1.5rem;
    padding: 10px 0;
  }
}

/* ==============================
    お試しセット
=============================== */
.tit_tryset{
  text-align: center;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 2.0;
  margin-bottom: 80px;
}
.try_flowbox{
  background: rgba(153,108,51,0.1);
  max-width: 800px;
  width: 100%;
  height: auto;
  padding: 100px 50px;
  margin:0 auto 80px;
}
#tryset_flow dl{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 60px;
}
#tryset_flow dl:last-of-type{
  margin-bottom: 0;
}
#tryset_flow dl dt{
  width: 25%;
  display: flex;
  align-items: center;
}
#tryset_flow dl dd{
  position: relative;
  width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.try_num{
  position: relative;
  display: inline-block;
  font-family: var(--ff-en_roboto);
  font-size: 12.0rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  z-index: 1;
}
.try_num::before{
  content: "";
  position: absolute;
  right: -25px;
  bottom: 0;
  display: inline-block;
  background: rgba(211, 176, 163, .3);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  z-index: -1;
}
.try_num_sp{display: none;}
#tryset_flow dl dd h3{
  font-family: var(--ff);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 10px;
}
#tryset_flow .bg_whtbox{
  padding: 30px;
}

@media (max-width: 768px) {
  .tit_tryset{
    text-align: left;
    font-size: 1.9rem;
  }
  .try_flowbox{
    padding: 60px 30px;
    margin:0 auto 50px;
  }
  #tryset_flow dl dt{display: none;}
  #tryset_flow dl dd{
    width: 100%;
  }
  .try_num_sp{
    display: inline-block;
    position: absolute;
    right: -10px;
    bottom: -20px;
    color: rgba(153,108,51,0.15);
    font-family: var(--ff-en_roboto);
    font-size: 14.0rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
  }
  #tryset_flow dl dd h3{font-size: 2.0rem;}
}

/* ==============================
    お客様の声
=============================== */
#voice .itembox02{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: var(--color-wht);
  padding: 40px;
  margin-bottom: 60px;
}
#voice .itembox02::after{
  content: "";
  position: absolute;
  right: -4%;
  bottom: -7%;
  width: 100%;
  height: 100%;
  background: var(--color-lightpnk02);
  z-index: -1;
}

.item_voice:first-child{
  width: 30%;
}
.item_voice:last-child{
  width: 67%;
}
.item_voice:first-child img{
  display: block;
  width: 90%;
  height: auto;
  margin: auto;
}
.voice_name{
  text-align: right;
  margin-top: 10px;
}

@media (max-width: 768px) {
  #voice .itembox02{
    padding: 40px 25px;
  }
  #voice .itembox02::after{
    bottom: -3%;
  }
  .item_voice:first-child,
  .item_voice:last-child{
    width: 100%;
  }
  .item_voice:first-child img{
    width: 55%;
    margin: 0 auto 30px;
  }

}


/* ==============================
    商品案内
=============================== */
.pro_navArea{
  position: relative;
  background: #d3b0a5;
  padding: 80px 0;
}
.pro_navArea::after{
  content: "i-ARU Collection";
  position: absolute;
  bottom: -10%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-en_roboto);
  font-weight: 600;
  color: rgba(255,255,255,0.1);
  white-space: nowrap;
  line-height: 1;
  z-index: 0;
  font-size: clamp(6rem, 15vw, 16rem);
}
.pro_nav{
  list-style: none;
  max-width: 800px;
  width: 92.1875%;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pro_nav a{
  position: relative;
  border: 6px solid #dccdba;
  width: 30%;
  z-index: 0;
  overflow: hidden;
  z-index: 1;
}
.pro_nav a:hover{
  background: rgba(153,108,51,0.8);
  border: 6px solid #c0a583;
  border-radius: 10px;
}
.pro_nav a img{
  position: relative;
  display: block;
  margin: 0;
  z-index: 0;
}
.pro_nav a::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  background: #c0a583;
  height: calc(tan(60deg) * 20px / 2);
  width: 20px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 2;
}
a .pronav_txt{
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: var(--color_tan);
  text-align: right;
  font-family: var(--ff-en_roboto);
  font-size: 1.5rem;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .pro_nav{width: 100%;}
  .pro_navArea{padding: 60px 0;}
  .pro_nav a{
    width: 31.333%;
    height: 100px;
    border: 3px solid #dccdba;
  }
  .pro_nav a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
  }
}

/* メインイメージ ブラ */
#bura_head{position: relative;}
#bura_head::after{
  content: "";
  position: absolute;
  bottom: -7%;
  background: url(../images/product/bura_fv.png) no-repeat bottom center / cover;
  width: 100%;
  height: 40vw;
  max-height: 300px;
  z-index: 10;
}

/* メッセージ */
#pro_msg{
  position: relative;
}
#pro_msg::before{
  content: "";
  position: absolute;
  left: 23%;
  bottom: 4%;
  background: url(../images/product/illust.png) no-repeat bottom center / contain;
  width: 38%;
  height: 310px;
}
#pro_msg .itembox02:last-child{
  padding-top: 180px;
}
#pro_msg p,
#bura_looks .itembox02 p{
  margin-bottom: 1.5em;
}
#pro_msg p strong,
#bura_looks .itembox02 p strong{
  font-size: 2.0rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  #pro_msg{
    padding: 60px 0 300px;
  }
  #pro_msg::before{
    bottom: 5%;
    left: 3%;
    width: 90%;
    height: 240px;
  }
  #pro_msg .itembox02:last-child{
    padding-top: 0;
  }
  #pro_msg p strong,
  #bura_looks .itembox02 p strong{
    font-size: 1.8rem;
  }
  #bura_looks .bg_hhalfpink > .wrapper > .item_container > .itembox02 {
    width: 48%;
  }
}

/* 着用例 */
#bura_looks .itembox02 .msg_leaf_lt{
  top: -15%;
}
#bura_looks .itembox02 .msg_leaf_rb{
  bottom: -15%;
}
.looks_img_l,
.looks_img_r{
  display: block;
  width: 80%;
  margin-bottom: 30px;
}
.looks_img_r{
  margin-left: auto;
}

#bura_looks .itembox02 p{
  margin-bottom: 1.5em;
}
#bura_looks .bg_wht{
  padding: 20px 30px;
}
#bura_looks .bg_wht p{
  font-size: 1.5rem;
  margin-bottom: 0;
}
.bg_hhalfpink{
  position: relative;
  background: transparent;
  padding-bottom: 20px;
}
.bg_hhalfpink::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80%;
  background: rgba(234, 160, 167, .2);
  z-index: 0;
}
.bg_hhalfpink .itembox02 img,
.bg_hhalfpink img{
  position: relative;
  z-index: 1;
}
.looks_txt{
  text-align: center;
  font-family: var(--ff);
  font-size: 1.4rem;
  line-height: 1.4;
}
.looks_txt::before{
  content: "●";
  display: inline-block;
  font-size: 1.2rem;
  margin-right: 5px;
}

@media (max-width: 768px) {
  #bura_looks .itembox02 p{
    line-height: 2.0;
  }
}

/* 特徴 */
#bura_tokucho .subtit_brn{
  margin-bottom: 50px;
}
#bura_tokucho .itembox02{
  position: relative;
}
.itemtokucho{
  position: relative;
  width: 47%;
  margin-bottom: 30px;
}
.itemtokucho img{
  position: relative;
  z-index: 1;
}
.itemtokucho::after{
  content: "";
  position: absolute;
  right: -5%;
  bottom: -2%;
  width: 100%;
  height: 100%;
  background: var(--color-lightpnk02);
  z-index: 0;
}

/* ポケットについて */
#bura_pocket .itembox02 p{
  margin-bottom: 1.5em;
}
.flower_pocket{
  position: absolute;
  left: 0;
  bottom: -5%;
  display: block;
  width: 30%;
  height: auto;
}
.bg_halfbeige{
  position: relative;
  background: transparent;
  padding-bottom: 20px;
}
.bg_halfbeige::before{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 80%;
  background: rgba(181, 130, 41, .1);
  z-index: 0;
}
.bg_halfbeige img{
  position: relative;
  z-index: 1;
}
#bura_wire .bg_hhalfpink{
  margin-bottom: 20px;
}
#bura_wire .bg_hhalfpink::before{
  right: -3%;
  bottom: 3%;
  left: auto;
  height: 100%;
}
#bura_wire .itembox02 p{
  margin-bottom: 1.5em;
}

.reels_wrap{
  display: flex;
  gap: 20px;
  width: 100%;
}
.reel_item{
  flex: 1;
  max-width: 50%;
  overflow: hidden;
}
.reel_iframe{
  width: 100%;
  aspect-ratio: 9 / 16;
  border: none;
  overflow: hidden;
}

/* Instagramが生成した本体 */
.reel_item .instagram-media-rendered{
  max-width: 100% !important;
  width: 100% !important;
}
/* 中の iframe も強制的に従わせる */
.reel_item .instagram-media-rendered iframe{
  max-width: 100% !important;
  width: 100% !important;
}


@media (max-width: 768px) {
  .reels_wrap{
    flex-direction: column;
  }
  .reel_item{
    max-width: 100%;
  }
  #bura_tokucho .itembox02:first-of-type{
    padding-bottom: 60px;
    margin-bottom: 60px;
  }
  #bura_tokucho .subtit_brn {
    margin-bottom: 30px;
  }
  .bg_halfbeige{
    margin-bottom: 60px;
  }
  .bg_halfbeige::before{
    width: 100vw;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  #bura_pocket .itembox02 .itembox02{
    width: 48%;
  }
  #bura_wire .item_container.wirebox .itembox02:first-of-type{
    margin-bottom: 50px;
  }
}

/* 商品紹介 */
.product_imgArea .sp_wrap{
  padding: 20px;
}
/* swiper */
.thumb-slider .swiper-slide {
  display: inline-block;
  width: calc(100% / 5)!important;   /* 3枚固定 */
  cursor: pointer;
  opacity: 0.5;
}
.thumb-slider .swiper-slide.active-thumb {
  opacity: 1;
}
.thumb-slider .swiper-slide-thumb-active img {
  opacity: 1;
}
.swiper-button-prev,
.swiper-button-next {
  color: #fff;
  top: 50%;
}

/* 詳細 */
.tit_item{
  font-size: 2.0rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 20px;
}
.item_detail div{
  display: flex;
  /* align-items: center; */
}
.item_detail div dt,
.item_detail div dd{
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.8;
  padding: 10px 0;
}
.item_detail div dt{
  width: 25%;
}
.item_detail div dd{
  width: 75%;
}
.item_detail div dd a:link,
.item_detail div dd a:visited{
  color: var(--color-blk);
  text-decoration: underline;
}
.item_detail div dd a:hover{
  color: var(--color-pnk);
}

#product_detail .btn{
  position: relative;
  margin:30px auto ;
}
#product_detail .btn::after{
  content: "";
  position: absolute;
  right: 7%;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  background: url(../images/icon_online_brn.svg) no-repeat center;
  background-size: contain;
  width: 25px;
  height: 25px;
}
#product_detail .btn:hover::after{
  background: url(../images/icon_online.svg) no-repeat;
}


@media (max-width: 768px) {
}

/* サイズ表 */
.subtit_size{
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 30px;
}
#size .bg_wht{
  padding: 0 10px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
}


/* 洗濯表示 */
.wash_txt{
  color: var(--color-wht);
  text-align: center;
  font-size: 1.7rem;
  line-height: 1.6;
}
.wash_icon{
  background: var(--color-wht);
  display: flex;
  justify-content: space-between;
  gap: 2px;
  list-style: none;
  padding: 20px 10px;
  margin: 50px 0;
}
.wash_icon li{
  flex: 1;
}
.wash_icon li img{
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto 5px;
}
#wash .wash_icon li p{
  color: #b58229;
  text-align: center;
  font-family: var(--ff);
  font-size: 1.4rem;
  line-height: 1.2;
}
.list_disc li{
  position: relative;
  list-style: none;
  color: var(--color-wht);
  line-height: 1.6;
  padding-left: 20px;
  margin-bottom: 10px;
}
.list_disc li::before{
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  background: var(--color-wht);
  border-radius: 50%;
  width: 12px;
  height: 12px;
}
@media (max-width: 768px) {
}

/* ==============================
    商品案内 ショーツ
=============================== */
.pro_come{
  margin-bottom: 40px;
}
/* サイズ表 */
.product_size{
  text-align: right;
  font-size: 1.3rem;
}
.table_size{
  background: var(--color-wht);
  border: 1px solid #ccc;
  width: 100%;
}
.table_size tr{
  border-bottom: 1px solid #ccc;
}
.table_size tr:last-of-type{
  border-bottom: none;
}
.table_size th,
.table_size td{
  font-family: var(--ff);
  font-size: 1.5rem;
  font-weight: 400;
  padding: 5px 10px;
}
.table_size th{
  width: 50%;
  text-align: left;
}
.table_size td{
  border-left: 1px solid #ccc;
  width: 16.66%;
  text-align: center;
}
.bg_title_msize{background: #ebbacd;}
.bg_title_lsize{background: #9cb0d9;}
.bg_title_llsize{background: #98c7c0;}
.bg_msize{background: rgba(235, 186, 205, 0.3);}
.bg_lsize{background: rgba(156, 176, 217, 0.3);}
.bg_llsize{background: rgba(159, 199, 192, 0.3);}


/* ==============================
    よくある質問
=============================== */
.faq_list{
  margin-bottom: 80px;
}
.faq_q,
.faq_a {
  display: flex;
  align-items: flex-start;
  padding: 20px 30px;
  /* gap: 20px; */
}
.faq_q {
  background: var(--color-wht);
  border-top: 1px solid var(--color_light_brn);
  border-bottom: 1px solid var(--color_light_brn);
  font-weight: bold;
  line-height: 2.4;
  margin-bottom: 10px;
}
.faq_q::before,
.faq_a::before {
  content: attr(data-icon);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}
.faq_q::before{
  color: var(--color_tan);
  background: rgba(153,108,51,0.2);
}
.faq_a::before{
  color: var(--color-pnk);
  background: var(--color-lightpnk02);
}

@media (max-width: 768px) {
  .faq_q,
  .faq_a{
    padding: 10px 5px;
  }
  .faq_q{
    line-height: 1.8;
  }
}


/* ==============================
    お問い合わせ
=============================== */
#contact_form{padding: 0 60px 60px;}
@media (max-width: 768px) {
  #contact_form{padding: 0 20px 60px;}
}

.form_group{
  margin-bottom: 20px;
}
#contact_form label{
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: var(--color_tan);
  font-size: 1.5rem;
  line-height: 1.8;
}

/* Added by MSD 2025.09.10 */
/* お問い合わせ内容のラジオボタン次第で表示・非表示する */
/* jsで制御  デフォルトでは非表示 */
.text_message {
  display: none;
}
.hp-field{
  display: none;
}
.mes{
  background: var(--color-wht);
  font-size: 1.4rem;
  padding: 1em;
}


/* ラジオボタン */
.radio_group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.radio_item {
  display: flex;
  align-items: center;
}
.radio_item input[type="radio"] {
  display: none;
}

/* カスタムラジオ */
.radio_label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;
}
.mes{display: none;}

/* 外側の円 */
.radio_label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #666;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

/* 内側のチェック（選択時のみ表示） */
.radio_item input[type="radio"]:checked + .radio_label::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: #e63946; /* 中の色 */
  border-radius: 50%;
}

.required {
  color: var(--color-pnk);
  font-size: 1.4rem;
  margin-left: 6px;
}
.chui{
  color: var(--color-pnk);
  font-size: 1.4rem;
}

.btn_submit {
  display: block;
  width: 200px;
  height: auto;
  background: var(--color-pnk);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 400;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  padding: 12px 30px;
  margin: 0 auto;
}

.btn-submit:hover {
  background: #c72533;
}
::placeholder{
  color: #aaa;
}

#thanks p{
  text-align: center;
  line-height: 2.0;
  margin-bottom: 10px;
}
#404 p{
  text-align: center;
  line-height: 2.0;
  margin-bottom: 10px;
}

/* プライバシーポリシー */
#privacy .wrap800{
  max-width: 700px;
}
.privacy_box{
  margin-bottom: 60px;
}
.title_privacy{
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}