@charset "euc-jp";
@import url("claim.css");


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

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

#sup .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;}

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

/* アコーディオン 開閉ボタン */
#sup > 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;}

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

#sup > 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;}

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

/* アコーディオン 表示・非表示エリア */
#sup > 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;}

/* アコーディオン 閉じるボタン */
#sup > 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;}

#sup > 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;}

/**========================================**/

#sup p.asterisk {position: relative; margin: 0 0 10px; padding: 0 0 0 18px; color:#FF0004;}
#sup p.asterisk:before {content:'※'; position: absolute; top: 0; left: 0;}

#sup img { max-width: 100%; height: auto;}
@media screen and (max-width:599px){
    #sup .youtube {
        position: relative;
        width: 100%; padding: 56.25% 0 0;}
  
    #sup .youtube iframe {
        position: absolute; top: 0; right: 0;
        width: 100%; height: 100%;}
}
/**============================================================================================**/

/**============================================================================================**/
/* 入力欄（名前・品番・購入日）
#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;}
 */
 
/* 状態がわかる写真・動画 */
#mailformpro .dis-tbl_tab > :nth-of-type(1) .fs_09 {
    display: block; 
    margin: 5px 0;
    color:#FF0004; font-weight: lighter;}

@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;}
    
    
    #mailformpro .dis-tbl_tab > :nth-of-type(1) .fs_09 br { display: none;}
} 

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

/* LastUp2024.09.06_kimata */