@charset "UTF-8";

/* ==========================================================================
   goods
** ========================================================================== */
  .good_top_img{
    background-image: url(../img/goods/goods_top.jpg);
    height: 50vh;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 65%  50%;
    position: relative;
  }

  .page_title{
  color: #fff;
   font-size: clamp(40px, calc((100vw - 900px) / 400 * 10 + 40px), 50px);
   position: absolute;
   top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    font-weight: 400;
    white-space: nowrap;
    line-height: 1.2;
    text-shadow: 1px 1px 2px #333;
}





.page_btn{
  margin-top: 50px;
}


/* p_link：ボタンの並び */
.p_link {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center; /* ← スマホ時の中央揃えの基礎 */
}

.p_link li {
  list-style: none;
  flex: 1; /* PCでは均等幅 */
}

/* ボタン本体 */
.p_link li a {
  display: block;
  text-align: center; /* ← テキスト中央 */
  position: relative;
  color: #000;
  text-decoration: none;
  font-family: 'Zen Old Mincho', serif;
  font-weight: 600;
  font-size: 18px;
  padding: 20px 0px;
  transition: all 0.4s ease;
}

/* 上下ライン */
.p_link li a::before,
.p_link li a::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #000;
  position: absolute;
  left: 0;
  transition: all 0.4s ease;
}

.p_link li a::before {
  top: 6px;
}

.p_link li a::after {
  bottom: 6px;
}

/* 左右ライン */
.p_link li a .border::before,
.p_link li a .border::after {
  content: "";
  height: 100%;
  width: 1px;
  background-color: #000;
  position: absolute;
  top: 0;
  transition: all 0.4s ease;
}

.p_link li a .border::before {
  left: 6px;
}

.p_link li a .border::after {
  right: 6px;
}

/* hover */
.p_link li a:hover {
  background: #000;
  color: #fff;
  letter-spacing: 0.2em;
}

.p_link li a:hover::before {
  top: 0;
}

.p_link li a:hover::after {
  bottom: 0;
}

.p_link li a:hover .border::before {
  left: 0;
}

.p_link li a:hover .border::after {
  right: 0;
}



/* --------------------------
   スマホ 2段時
   幅そろえつつ画面内に収める
---------------------------*/
@media (max-width: 500px) {

  .p_link {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← 画面幅に収まる可変幅 */
    gap: 20px 20px;
    width: 100%;
    max-width: 100%;  /* ← 横スクロール防止 */
    padding: 0 10px;  /* ← 少し余白を入れるとより安全 */
    box-sizing: border-box;
  }

  /* 1段目の幅 → 自動的に揃う（1fr + 1fr） */

  /* 下段の1つ（3番目） */
  .p_link li:nth-child(3) {
    grid-column: 1 / 3;   /* ← 2列ぶち抜き */
    justify-self: center; /* ← 中央に配置 */
    width: 80%;           /* ← 上段とのバランスを確保しつつ画面内に収める */
    max-width: 250px;     /* ← 大きすぎ防止 */
  }

  .p_link li {
    flex: unset;
  }

  /* ボタン内部を幅いっぱいに */
  .p_link li a {
    width: 100%;
  }
}
 /* ====================   取り扱い商品  ===================== */

.good_flex{
  margin-top: 50px;
}

.good_box{
  margin-bottom: 30px;
}

 @media (min-width: 800px) {
.good_flex{
display: flex;
 flex-wrap: wrap;     /* ← 2段以上に折り返す */
    gap: 30px;           /* ← ボックス間の余白（調整可能） */
  }

  .good_box {
    width: calc(50% - 15px);  /* ← 2列化（2カラム） */
  }
}

.good_box img{
  margin-bottom: 15px;

}

.good_name{
  text-align: center;
  font-size: clamp(20px, calc((100vw - 378px) / 622 * 2 + 20px), 22px);
}

.good_text{
  padding: 10px;
}


 /* ====================   着物のお手入れ･加工  ===================== */

  .service_top_img{
    background-image: url(../img/service/service_top.jpg);
    height: 50vh;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 65%  50%;
    position: relative;
    
  }


  .service_inner{
    margin-top: 50px;
  }


  .service_box{
    margin-bottom: 40px;
  }

   @media (min-width: 768px) {
     .service_inner{
    margin-top: 70px;
  }


 .service_box{
    display: flex;
    margin-bottom: 125px;
    align-items: flex-start;
  }

  .service_box img{
    width: 30%;
    margin-right: 5%;
     object-fit: cover;
  }
   }



  .service_name{
     text-align: center;
      font-size: clamp(25px, calc((100vw - 378px) / 622 * 4 + 25px), 29px);
      margin-bottom: 10px;
  }


    @media (min-width: 768px) {
  .service_name{
     text-align: left;
      margin-bottom: 15px;
        line-height: 1;
  }
   }

  .service_info > p {
    border-bottom: 1px solid;
    padding: 15px;
  }

   @media (min-width: 768px) {
    .service_info > p {
      padding: 0 0 10px 10px;
   }
}

  .s_plice{
    margin-top: 5px;
  }


  .cotant_go{
    background-image: url(../img/top/nishida_shop03.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 15px 10px;
    font-size: clamp(22px, calc((100vw - 378px) / 622 * 4 + 22px), 25px);
    font-weight: 100;
  }


   /* ====================   着付け  ===================== */

    .dressimg_top_img{
    background-image: url(../img/dressimg/dressimg_top.jpg);
    height: 50vh;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 65%  50%;
    position: relative;
  }

.dressimg_inner{
    margin-top: 50px;
    margin-bottom: clamp(100px, calc((100vw - 378px) / 522 * 50 + 100px), 150px);
  }


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


 @media (min-width: 768px) {
  .dressing_box {
    display: flex;
    align-items: stretch;   /* ← 高さを揃えるポイント */
  }

  .de_ing,
  .de_info {
    width: 50%;
  }

   .de_ing {
   margin-bottom: 50px;
  }

  .de_ing img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* ← 高さがそろっても画像が崩れない */
  }


}

/* PC／SP共通 */
.dressing_box img{
  display: block;
}

.de_info {
  background-color: #fff;
  padding: clamp(20px, calc((100vw - 378px) / 522 * 30 + 20px), 50px);
}

 @media (min-width: 768px) {
.de_info {
  margin-top: 50px;
}
 }


 
.de_plice h3{
  font-size: clamp(22px, calc((100vw - 378px) / 622 * 4 + 22px), 25px);
  font-weight: normal;
}

.de_plice li{
  margin-bottom: 15px;
}





@media (min-width: 768px) {
  .dressing_box2 {
    display: flex;
    align-items: stretch;   /* ← 高さを揃えるポイント */
    flex-direction: row-reverse;
  }

}

  /* ====================   アロハシャツ  ===================== */
    
  .shirt_top_img{
    background-image: url(../img/shirt/shirt_top1.jpg);
    height: 50vh;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 65%  50%;
    position: relative;
  }

  .how_to_order li{
    margin-bottom: 100px;
  }

  @media (min-width: 768px) {
  .how_to_order li{
   display: flex;
   gap: 50px;
  }

  .how_to_order li > * {
    width: 50%;
}

  }




@media (min-width: 768px) {
  .shirt_top_img{
    background-image: url(../img/shirt/shirt_top2.jpg);
  }
}

.aloha_01 img{
  display: block;   
width: 80%;
  height: 400px;
  object-fit: cover;
  margin: 30px auto;
}

@media screen and (min-width: 900px) {
    .aloha_01 img {
        height: 500px;
    }

    .text_c_pc{
      text-align: center;
    }
}

.how_to_order img{
  margin-bottom: 15px;
}

.order_title{
  font-size: 110%;
  border-bottom: 1px solid;
  padding: 0 5px 5px;
}

.how_to_order p{
  margin-top: 15px;
}


.shirt_pro_li {
  margin-top: 50px;
}


.shirt_pro_li li{
  width: 80%;
  margin-left: 10%;
  margin-bottom: 50px;
}

@media screen and (min-width: 600px) {
.shirt_pro_li {
  display: flex;
 flex-wrap: wrap; 
  gap: 50px; 
}

.shirt_pro_li li{
  width: calc(50% - 25px);
  margin-left: 0;
}
}


@media screen and (min-width: 900px) {

  .shirt_pro_li li{
  width: calc(25% - 39px);
}
}



.size-table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #000;
  text-align: center;
  margin-top: 30px;
}

@media screen and (min-width: 600px) {
  .size-table {
  width: 80%;
    margin-left: 10%;
}
}




.size-table th,
.size-table td {
  border: 1px solid #000;
  padding: 8px 12px;
}

.size-table th {
  font-weight: bold;
}


.notice_size{
  margin-top: 15px;
  font-size: 80%;
  margin-bottom: 100px;
}

@media screen and (min-width: 600px) {
  .notice_size{
   width: 80%;
    margin-left: 10%;
    
}
}




.notice_size li{
  text-indent: -1em;
  padding-left: 1em;
}

  /* ====================   西田呉服店について  ===================== */

   .about_top_img{
    background-image: url(../img/about/about_top.jpg);
    height: 50vh;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 65%  50%;
    position: relative;
  }

  .about_right{
    width: 70%;
    margin-left: 30%;
  }

    .about_right img {
    width: 100%;
    height: 300px;
    object-fit: cover;      /* ← 高さがそろっても画像が崩れない */
  }

  .about_left{
  writing-mode: vertical-rl;
  padding: 50px 0;
  font-size: clamp(20px, calc((100vw - 500px) / 400 * 7 + 20px), 30px);
  line-height: 1.4;
  letter-spacing: 0.12em;
  font-weight: normal;
padding-left: clamp(50px, calc((100vw - 378px) / 922 * 400), 400px);
  }

  @media screen and (min-width: 600px) {
    .about_1_box{
      position: relative;
    height: 600px;
    }

    .about_right{
      position: absolute;
    width: 50%;
    right: 0;
  }

  .about_right img {
    width: 100%;
    height: 500px;
    object-fit: cover;      /* ← 高さがそろっても画像が崩れない */
  }

  }


  .greeting_box{
    margin-top: 50px;
  }

  .owner_na{
    margin-top: 30px;
     margin-bottom: 15px;
     font-size: clamp(22px, calc((100vw - 378px) / 622 * 4 + 22px), 25px);
  }

  @media screen and (min-width: 600px) {
  .greeting_box{
    display: flex;
    gap: 50px;
    flex-wrap: wrap; 
  }

  .greeting_left{
    width: 40%;
  }

  .greeting_right{
    width: 50%;
  }
}


.po_ra_only{
  position: relative;
  width: 100%;        /* max-width は使わない */
  margin: 0 0 60px;   /* 下に余白（お好みで） */
  padding-top: 40px;  /* グレー帯と画像の重なり調整用 */
}

/* グレーの帯 */
.gray_box{
  background-color: #EFEFEF;
  width: 70%;         /* 右側30%余白（今のデザインをそのまま尊重） */
  position: absolute;
  top: 0;
  left: 0;            /* 左は余白なしで画面いっぱいの左に合わせたいなら 0 のままでOK */
  height: 25vh;
  z-index: 0;
}

@media screen and (min-width: 600px) {
  .gray_box{
  height: 40vh;
}
}


@media screen and (min-width: 1000px) {
  .gray_box{
  height: 50vh;
}
}


/* 画像：絶対配置にしない＆ブロック要素として下に流す */
.po_ra_only img{
  width: 80%;
  max-width: 800px;
  display: block;
  margin: 0 auto;     /* 中央寄せ */
  position: relative; /* or 何も指定しなくてもOK */
  z-index: 1;         /* グレー帯の上に表示 */
}


.company_info_a{
  padding: 0 20px;
  margin-top: 40px;
}

/* dt/dd をfloatではなくgridで2列にする */
.company_info_a dl {
  display: grid;
  grid-template-columns: 110px 1fr; /* 左：項目名／右：内容 */
  column-gap: 24px;
  row-gap: 6px;
  margin: 0 auto;  
  max-width: 500px;  ;
}

.company_info_a dt {
  margin: 0;
  font-weight: 400;
}

.company_info_a dd {
  margin: 0;
}


/* ====================  olineについて ===================== */
   .online_top_img{
    background-image: url(../img/other/online_top.jpg);
    height: 50vh;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 65%  50%;
    position: relative;
  }


  .sp_g_s{
  font-size: 110%;
  line-height: 1.6;
  margin: 10px 0 8px;
}

@media only screen and (min-width: 767px) {
.sp_g_s{
  font-size: 120%;
  font-weight: 700;
  
}
}

.a-section p{
  margin-bottom: 25px;
}

.tm30{
  margin-top: 40px;
  margin-bottom: 40px;
}


.d-table{
  margin: 16px 0 20px;
}

table{
  border-collapse: collapse;
    border-spacing: 0;
    vertical-align: top;
    width: 100%;
}



  .d-table table tr th, .d-table table tr td {
      padding: 6px 10px 5px;
      text-align: left;
      border: solid 1px #ddd;
      box-sizing: border-box;
      line-height: 1.4;
      letter-spacing: 0;
      font-size: 1.4rem;
      vertical-align: top;
}

@media only screen and (min-width: 767px) {
  .d-table table tr th, .d-table table tr td {
      font-size: 1.6rem;
      padding: 18px 16px;

}
}


.d-table table tr th {
    width: 80%;
    background: #f7f7f5;

}
@media only screen and (min-width: 767px) {

.d-table tr th {
  width: 60%;
  }
 }


  .notice_size2 li{
  text-indent: -1em;
  padding-left: 1em;
  font-size: 90%;
}

/* ====================  特定商取引法に基づく表記 ===================== */

   .term_top_img{
    background-image: url(../img/other/term_top.jpg);
    height: 50vh;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 65%  50%;
    position: relative;
  }

  .text_11{
    text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 10px;
  }


  /* ====================  個人情報保護について ===================== */

     .privacy_top_img{
    background-image: url(../img/other/privacy_top.jpg);
    height: 50vh;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 65%  50%;
    position: relative;
  }

  .tm30 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.ma-left{
  margin-left: 1.2em;
}

.p_l{
  margin-top: 10px;
}

.p_l li{
  padding-left:1em;
text-indent:-1em;
}


  /* ====================  お問い合わせ ===================== */

       .contact_top_img{
    background-image: url(../img/other/privacy_top.jpg);
    height: 50vh;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 65%  50%;
    position: relative;
  }



  /* mail_form */
/* ============================================ */
.back_g_c {
  background-color: #f1f1f1;
}

.palr15 {
  padding-left: 15px;
  padding-right: 15px;
}

.pa100b {
  padding: 50px 0;
}


.upt_wa {
  text-align: center;
  line-height: 1.1;
  font-weight: 600;
  font-size: 25px;
  font-size: 2.5rem;
}


.mw_wp_form {
  padding: 20px 0px 70px;
}


.mw_wp_form form dl {
  margin-bottom: 0px;
  padding-bottom: 0px;
  display: table;
  border-bottom: 1px solid rgb(203, 203, 203);
  width: 100%;
}

.mw_wp_form form dl dt {
  width: 100%;
  display: block;
  padding: 20px 0 20px;
  font-size: 16px;
  font-weight: normal;
  padding-bottom: 0;
  font-weight: 600;
}

@media only screen and (min-width: 767px) {
  .mw_wp_form form dl dt {
    width: 30%;
    padding: 30px 0px 30px 20px;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    word-break: keep-all;
  }
}



.mw_wp_form form dl dd {
  width: 100%;
  font-size: 14px;
  line-height: 24px;
  padding: 20px 0 20px;
  display: block;
  border-bottom: 1px solid rgb(203, 203, 203);

}

@media only screen and (min-width: 767px) {
  .mw_wp_form form dl dd {
    padding: 30px 0px 30px 20px;
    vertical-align: middle;
    text-align: left;

  }
}


.mw_wp_form form dd:last-child{
  border-bottom: none;
}

.must {
  background: rgb(243, 39, 77);
  color: #fff;
  padding: 3px 10px;
  margin-left: 15px;
  font-size: 14px;

}


.privacy .privacy-inner {
  width: 100%;
  padding: 0 25px;
  height: 200px;
  overflow: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  border: 1px solid rgb(203, 203, 203);
  text-align: left;
}

@media only screen and (min-width: 767px) {
  .privacy .privacy-inner {
    width: 70%;
   margin-left: auto;
   margin-right: auto;
  }
}



.mw_wp_form form dl dd input {
  padding: 0 15px;
  box-sizing: border-box !important;
  width: 95%;
  height: 35px;
  border: 1px solid rgb(203, 203, 203);
  border-radius: 4px;
  margin-top: 0;
  background-color: #fff;
}

@media only screen and (min-width: 767px) {
  .mw_wp_form form dl dd input {
    width: auto;
  }
}


.mw_wp_form form dl dd textarea {
  padding: 15px;
  border: 1px solid rgb(203, 203, 203);
  width: 95%;
  box-sizing: border-box !important;
  background-color: #fff;
}


@media only screen and (min-width: 767px) {
  .mw_wp_form form dl dd textarea {
    width: auto;
  }
}
.privacy .doui {
  margin-bottom: 50px;
  text-align: center;
}


.form-button input {
  width: 330px;
  text-align: center;
  position: relative;
  display: inline-block;
  padding: 15px 0;
  color: #fff;
  background-color: #773c1c;
  border: 1px solid #773c1c;
}

p.form-button {
  text-align: center;
}


.mw_wp_form form .radio_b dd input {
  padding: 0 15px;
  box-sizing: border-box !important;
  width: auto;
  height: 35px;
  border: 1px solid rgb(203, 203, 203);
  border-radius: 4px;
  margin-top: 0;
  background-color: #fff;
}


.nichiji input{
width: auto;
}


.mw_wp_form form dl dd select {
  padding: 0 15px;
  width: 365px;
  height: 35px;
  border: 1px solid rgb(203, 203, 203);
  border-radius: 4px;
  margin-top: 10px;
  background: #ffffff;
}

 .jikan {
  width: auto;
}

input[type="submit"] {
  background-color: #145d97;
  color: #ffff;
  font-size: 20px;
  padding: 0 20px;
}


input.check_f {
  width: 20px!important;
}