/* みんなのcss 大集合 */

/* templates/estimate-form.php */



@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap') ;

.top_select {
  width: 600px;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 20px;
  padding: 8px 12px;
  margin: 0 auto 20px;
  text-align: center;
}

#category-select {
    width : 600px;
    font-size : 18px;
    margin:  0  auto ;
    height : 30px ;
    font-weight: 600;
    text-align: center;
}

.rose-divider {
    text-align: center;
}

.one-category {
    border: none;
    background-image: url('https://mbanner.2828.jp/wp-content/uploads/2025/03/rose.png');
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: auto 20px;
    padding: 30px;
    margin-bottom: 20px;
    }

.rose_icon {
    width :15px;
    padding-right: 5px;
}


.main_form {
    max-width:1200px; 
    margin: 0 auto ; 
    padding: 10PX; 
    font-size: 13px;
    font-family: 'Noto Sans JP', sans-serif;
}

.main_form > h1 {
    text-align: center;
    font-size: 33px ;
}

.one-category h2 {
    text-align: left;
    font-size: 28px;
    max-width: 1000px; 
}

.products_title ,
.option_title  {
    text-align: left;
    font-size: 20px;
}

.main_form > p ,
p {
    text-align: center;
    font-size: 18px;
}

.comment {
    text-align: right;
    font-size: 15px;
    font-weight: 500;
}
.main_table {
    margin : 0 auto ;
    max-width: 1200px; 
}

.products_table {
    width : 380px !important ;
    margin: 0 auto ; 
    border: 1px solid #fdc200 ;
    border-radius: 20px ;
    border-collapse: separate;
    border-spacing: 0; /* ← 余白ゼロで見た目そのままキープ */
    }

.customer-info {
     width:900px; 
     margin: 0 auto ; 
     padding : 10px; 
    }

.customer-info_label {
     width:230px ; 
     margin: 10px ; 
     padding-right: 10px; 
     text-align: right; 
     font-size: 18px;
     font-weight: bold;
    }

.customer-info_input {
     margin: 10px ; 
     padding: 10px 10px 10px 10px; 
     text-align: left; 
    }

input[type="email"] {
    width: 100%; 
    height: 40px;  
    box-sizing: border-box;
    font-size: 16px;
    }

#billing_prefecture ,
#delivery_prefecture ,
#payment {
    width: 100%; 
    height: 40px;  
    box-sizing: border-box;
    font-size: 14px;
    }


input[type="text"] {
    width: 100%; 
    height: 40px;  
    box-sizing: border-box;
    font-size: 16px;
}

.customer-info_input > label {
  font-size: 16px;
  font-weight: 400;
}
.submit-button {
  background-color: #ffe0b2;  /* 薄いオレンジ */
  color: #444;
  border: none;
  padding: 12px 24px;
  font-size: 20px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width :60%;
}

.submit-button:hover {
  background-color: #ffa726 ;  /* オレンジ（ホバー時） */
  color: white ;
  width: 60%;
}


.option-table { 
    max-width:1200px ; 
    margin: 0 5%; 
}


.option-cell {
    width : 25%;
    border: 1px solid #ffdbe1; 
    font-size: 13px;
    padding: 3px;
}


.option-price {
    text-align: right;
    font-size: 13px;
    font-weight: 600;
}

.option-cell-img{
    text-align: center;
    padding: 0;
}
    

.input-must {
    font-size:13px;
    color:red; 
    padding-left: 5px;
    }

.product-cell-title { 
    padding: 10px 2px; 
    vertical-align: bottom;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    }

.product-cell { 
    padding: 10px 20px; 
    vertical-align: bottom;
    text-align: left;
    font-size: 15px;
    font-weight: 400;
    }

.product-cell-img { 
    padding: 13px; 
    vertical-align: bottom;
    text-align: center;
    margin: 0 auto;
    }

.product-cell-left { padding: 13px; 
    text-align: center;
    text-decoration: double #fdc200;
    vertical-align: bottom;
    width : 50%;
    font-size: 20px;
    font-weight: 600;
    padding: 0;
}

.product-cell-right { padding: 13px; 
    text-align: center;
    vertical-align: bottom;
    width : 50%;
    font-size: 20px;
    padding: 0;
    font-weight: 600;
}
    
.thumb-img {
     width: 100%; 
     display: block; 
     text-align: center;
     margin:0 auto;
}

.option-img {
     height: 130px; 
     display: block; 
     text-align: center;
     margin:0 auto;
     padding: 10px 0px;
}


.min-tax-label {
    font-size: 15px;
}

.option-name {
    vertical-align: bottom;
    font-size: 16px;
    padding-top: 10px;
    font-weight: 500;
    height: 35px;
}

.option-description {
    font-size: 12px;
    padding-top: 5px;
    font-weight: 400;
}

.option-price{
    vertical-align: bottom;
    padding-top: 5px;
}


/* 📱 レスポンシブ対応（スマホ表示） */
@media screen and (max-width: 768px) {


 .main_form > h1 {
    text-align: center;
    font-size: 15px ;
}
  .main_table tr {
    display: flex;
    flex-direction: column;
  }

  .main_table td {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }

  .products_table {
    width: 100%;
  }


  .option-table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  .option-table tr {
    display: flex;
    flex-wrap: wrap;
  }

  .option-table td.option-cell {
    flex: 1 1 48%;
    min-width: 48%;
    margin-bottom: 10px;
  }

  .customer-info {
    width: 100%;
    padding: 10px;
  }

  .customer-info tr {
    display: block;
    margin-bottom: 15px;
  }

  .customer-info td {
    display: block;
    width: 100%;
  }

  .customer-info_input > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .customer-info_input > div > div {
    width: 100% !important;
  }

  .submit-button {
    width: 100%;
    font-size: 18px;
  }

}

/* includes/estimate-template.php */

.header-info 
 {
    font-family: 'NotoSansJP'; 
    width:800px; 
    margin: 0 auto ; 
    padding: 10px; 
/*    border:1px solid; */
    font-size: 15px; 
}

/* 必要掲載部分*/
.header-title { 
    font-size: 25px; 
    font-weight: 600; 
    text-align: center; 
   /* border: 0px solid; */
    vertical-align: bottom; 
}

.header-info   { 
    width : 780px ; 
    margin: 13px ; 
    padding : 0 13px; 
}

.header_space {
    width : 100px;
}

.header-client{
    border-bottom: 1px solid;
 /*   width: 300px;*/
    font-size: 25px;
    font-weight: 500;
    text-align: left;
    padding-top: 10px;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 25px; /* 初期サイズ */
    line-height: 1.2;
    /* ↓文字がはみ出したら縮小（モダンブラウザ用） */
  /*  width: 100%;*/
    font-size: clamp(12px, 2vw, 22px); /* ←画面サイズによって自動調整 */
}

.header-line{
    border-bottom: 1px solid;
    width: 150px;
    vertical-align: bottom;
}

.header-nline{
    border-bottom: 1px solid;
    width: 150px;
    vertical-align: bottom;
    text-align: right;
    padding-right: 30px;
}

.header-address {
    padding-left: 100px;
}


.header-line1{
    border-bottom: 1px solid;
     width: 130px;
}
 

.cell-0 { 
    height : 13px;
    vertical-align: bottom; 
}

.cell-1 { width: 120px ; vertical-align: bottom; }
.cell-1-sentence { width: 120px ; vertical-align: bottom; }
.cell-2 { width: 160px ; vertical-align: bottom; }
.cell-3 { width: 160px ; vertical-align: bottom; }
.cell-4 { width: 70px  ; vertical-align: bottom; }
.cell-5 { width: 70px ; }
.cell-6 { width: 200px ; font-size: 14px;}
.cell-uline {border-bottom: 1px solid; }
.cell-6-name { width: 200px ; font-size: 15px; vertical-align: bottom; }
.custumer-info {font-size: 18px; border-bottom: 1px solid; vertical-align: bottom;}
.estimate_ntitle { text-align: right; font-size: 12px; border-bottom: 1px solid;}
.estimate_number { text-align: left; font-size: 12px; border-bottom: 1px solid;}
.total-tprice { font-size: 28px; font-weight: 500; text-align: center; border-bottom: 2px solid; vertical-align: bottom;}
.total-price { font-size: 30px; font-weight: 500; border-bottom: 2px solid; text-align: right; padding-right: 10px; }
.total-price_tax { width:200px; font-size: 18px;padding-left: 10px; vertical-align: bottom; }
/* 見積明細部分 */
.estimate-table { width:780px; font-size: 15px; margin: 0 auto; }
.estimate-table-cell { margin: 0 auto; background-color:  #f6d99c;}
.estimate-list-title1 { width: 120px ; vertical-align: bottom; text-align: center; font-weight: 300; }
.estimate-list-title2 { width: 320px ; vertical-align: bottom; text-align: center; font-weight: 300; } 
.estimate-list-title3 { width: 70px  ; vertical-align: bottom; text-align: center; font-weight: 300; }
.estimate-list-title4 { width: 90px  ; vertical-align: bottom; text-align: center; font-weight: 300; } 
.estimate-list-title5 { width: 180px ; vertical-align: bottom; text-align: center; font-weight: 300; }
.estimate-list1 { width: 120px ; vertical-align: bottom; text-align: left;   }
.estimate-list2 { width: 320px ; vertical-align: bottom; text-align: left;   } 
.estimate-list3 { width: 70px  ; vertical-align: bottom; text-align: center; }
.estimate-list4 { width: 90px  ; vertical-align: bottom; text-align: right;  } 
.estimate-list5 { width: 180px ; vertical-align: bottom; text-align: right;  }
.estimate-list1_bottom { width: 120px ; vertical-align: bottom; text-align: left; border-bottom: 1px solid black;}
.estimate-list2_bottom { width: 320px ; vertical-align: bottom; text-align: left; border-bottom: 1px solid black;} 
.estimate-list3_bottom { width: 70px  ; vertical-align: bottom; text-align: center; border-bottom: 1px solid black;}
.estimate-list4_bottom { width: 90px  ; vertical-align: bottom; text-align: right; border-bottom: 1px solid black;} 
.estimate-list5_bottom { width: 180px ; vertical-align: bottom; text-align: right; border-bottom: 1px solid black;}