@charset "euc-jp";
@import url("claim.css");
#claim > .m-b60 { max-width: 605px; margin: 0 auto 60px;}

/**============================================================================================**/
#accordion { font-size: 16px; line-height: 1.8em;}
#accordion .m-b60 { max-width: 605px; margin: 0 auto 60px; font-size: 14px; line-height: 1.5em;}

#accordion ul { list-style: disc; margin: 10px 0 0; padding: 0 0 0 30px;}

#accordion .posi-rlt::after {
    content: '';
    display: block; position: absolute; top: 50%; left: 0; z-index: -1;
    width: 100%; height: 2px; margin: -2px 0 0;
    border: solid #333; border-width: 2px 0;}

#accordion h3 {
    width: 200px; margin: 0 auto 30px; padding: 10px;
    border: double 6px #333; background: #fff;
    text-align: center;}
    
    
#accordion label {
    cursor: pointer;
    transition: all 0.4s;}

/* アコーディオン 開閉ボタン */
#accordion > label {
    display: block; position: relative; 
    margin: 15px 0 0; padding: 8px 8px 8px 40px;
    background: #c6e5f9;
    color: #004885; font-weight: bold; line-height: 1.2em;}

#accordion > label:hover { background: #004885; color: #fff;}

#accordion > label::before {
    content: '';
    display: inline-block; position: absolute; top: 50%; left: 10px;
    width: 10px; height: 10px; margin: -10px 0 0;
    border: solid #004885; border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: border-color 0.4s;}

#accordion > label:hover::before { border-color: #fff;}

/* アコーディオン 表示・非表示エリア */
#accordion > label + div {
  overflow-y: hidden;
  max-height: 0; margin: 0; padding:0; border:none; opacity: 0;
  -webkit-transition: max-height 0.5s;
  -moz-transition: max-height 0.5s;
  -ms-transition: max-height 0.5s;
  -o-transition: max-height 0.5s;
  transition: max-height 0.5s;}

/* アコーディオン 閉じるボタン */
#accordion > label + div label {
    display: block;
    width: 100px; padding: 5px 0; margin: 30px 0;
    border: solid 1px #004885; border-radius: 4px;
    background: #004885; color: #fff;
    text-align: center;}

#accordion > label + div label:hover { opacity: 0.7;}

/* アコーディオンをクリックした場合（下矢印） */
#trouble01:checked ~ label[for="trouble01"]::before,
#trouble02:checked ~ label[for="trouble02"]::before,
#trouble03:checked ~ label[for="trouble03"]::before,
#trouble04:checked ~ label[for="trouble04"]::before { margin: -4px 0 0; border-width: 3px 0 0 3px;}

/* アコーディオンをクリックした場合（表示エリア） */
#trouble01:checked ~ .area1,
#trouble02:checked ~ .area2,
#trouble03:checked ~ .area3,
#trouble04:checked ~ .area4 {margin: 10px 0 0; opacity: 1;}

#trouble01:checked ~ .area1 { max-height: 600px;}
#trouble02:checked ~ .area2 { max-height: 350px;}
#trouble03:checked ~ .area3 { max-height: 310px;}
#trouble04:checked ~ .area4 { max-height: 560px;}

/**============================================================================================**/
/* 入力欄（名前・品番・購入日）
#name_kanji_family,
#name_kana_family,
#itemNumber,
*/
#date { max-width: 200px;}

 
/* 使用回数 */
#situation04 { max-width: 40px;}

/* 入力欄（市区町村/番地・マンション名など）
#town,
#building { max-width: 600px;}
 */

/* 入力欄（電話番号）
#mailformpro input[type="tel"] { max-width: 200px;} 
 */

/* 入力欄（メールアドレス・商品名・詳細）
#mailformpro input[type="email"],
#itemName,
#mailformpro textarea { max-width: 550px;}
 */

@media screen and (max-width:767px){
    #mailformpro input[type="text"],
    #mailformpro input[type="tel"],
    #mailformpro input[type="email"] { max-width: none;}
    #mailformpro textarea { max-width: 100%;}
    
    /* 使用回数 */
    #mailformpro #situation04 { width: 40px;}
} 
/**========================================**/
#reason01,
#reason04 { position: absolute; top: 3px; left: 5px;}

form#mailformpro label[for="reason01"],
form#mailformpro label[for="reason04"] { margin: 0 0 0 30px;} 


/* アコーディオン 表示・非表示エリア */
.area1,
.area2 {
  position: relative; overflow-y: hidden;
  max-height: 0; margin: 0; padding: 0 0 0 35px; 
  border:none; 
  opacity: 0;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;}
  
.area3 {
  overflow-y: hidden;
  max-height: 200px; margin: 10px 0; padding: 0 0 0 40px; opacity: 1;
  border:none; 
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;}


/* アコーディオンをクリックした場合 */
#reason01:checked ~ .area1 { max-height: 650px; margin: 10px 0; opacity: 1;}
#reason04:checked ~ .area2 { max-height: 400px; margin: 10px 0; opacity: 1;}
#reason04_23:checked ~ .area3 { max-height: 0; margin: 0; opacity: 0;}


@media screen and (max-width:699px){
    .grecaptcha-badge{ margin: 0 0 45px;}
}
/* LastUp2024.09.06_kimata */