@charset "euc-jp";
@import url("../../common/css/header_2024.css");
@import url("mailformpro.css");

/* mailformpro.cssリセット */
form#mailformpro label.mfp_not_checked { padding: 0;}

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


/* 子ページフォーム共通 */
/**============================================================================================**/
.asterisk { position: relative; padding: 0 0 0 18px;}
.asterisk::before {content:'※'; position: absolute; top: 0; left: 0;}

/* Google reCAPTCHA（表示位置調整） */
@media screen and (max-width:699px){
    .grecaptcha-badge{ margin: 0 0 45px;}
}
/**========================================**/
/* 注意事項 */
.warning strong {
    display: block;
    margin: 30px 0 0; padding: 5px 10px;
    background: #c90000;
    color: #fff; font-size: 18px;}
    
.warning ul { 
    padding: 0 10px 10px; 
    border: solid 2px #c90000;
    font-size: 14px; line-height: 1.8em;}

.warning li { margin: 10px 0 0;}

.warning li,
.warning li p { padding: 0 0 0 1em; text-indent: -1em;}


/**========================================**/
/* よくあるトラブル */
.troubles {
    margin: 50px 0; padding: 0 0 30px; 
    border-bottom: solid 1px #aaa;}
    
.troubles a { 
    display: inline-block; position: relative; 
    padding: 0 0 0 23px;
    font-weight: bold;}
    
.troubles a::before {
    content: '';
    position: absolute; top: 5px; left: 5px;
    width: 0; height: 0;
    border-style: solid; border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent #c00;}
    
 .troubles li {
     margin: 5px 0 0 1em; padding: 0 0 0 18px;
     font-size: 15px; line-height: 1.6em; text-indent: -1em; }   
/**========================================**/
/* 確認しました（アコーディオン開閉） */
label[for="checked"] {
    display: block; position: relative; 
    max-width: 245px; margin: 50px auto; padding: 5px 0 5px 35px;
    font-size: 22px; font-weight: bold; line-height: 1.0em;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}

label[for="checked"]:hover { color: #0066cc;}

label[for="checked"]::before {
    content: '';
    display: block; position: absolute; top: 4px; left: 0;
    width: 20px; height: 20px;
    border: solid 1px #777; border-radius: 2px;
    cursor: pointer;}

#checked:checked ~ label[for="checked"]::before { background: #0c4292;}
#checked:checked ~ label[for="checked"]::after {
    content: "";
    position: absolute; top: 9px; left: 3px;
    width: 12px; height: 6px;
    border: solid #fff; border-width: 0 0 2px 2px;
    transform: rotate(-45deg);}

/* アコーディオン 表示・非表示エリア */
.formArea {
  overflow-y: hidden;
  max-height: 0; margin: 0; padding:0; 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;}

/* アコーディオンをクリックした場合 */
#checked:checked ~ .formArea {
    max-height: 3000px; margin: 50px 0 0; padding: 50px 0 0;
    border-top: solid 1px #aaa;
    opacity: 1;}


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

/**============================================================================================**/
/* お客様都合による返品・交換について（mail_Exchange_.html） */

/* 希望対応（サイズ・カラー変更） */
#exchange label[for="menu_bar01"] { 
    display: inline-block;
    margin: 0 20px 10px 0; 
    font-size: 14px;}

/* アコーディオン 表示・非表示エリア */
.area1 {
  overflow-y: hidden;
  max-height: 0; margin: 0; padding:0; 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;}

/* アコーディオンをクリックした場合 */
#menu_bar01:checked ~ .area1 {height:auto; max-height: 500px; opacity: 1;}

/* サイズ・カラー変更詳細 */
#mailformpro .area1 p {
	margin: 0 0 5px;
    font-size: 14px; font-weight: bold;}

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

/**============================================================================================**/
/* SUP・カヤックの商品不具合に関するお問合せ（claim_01.html） */

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

div:has(#situation04) { 
    display: inline-block; 
    font-size: 14px; vertical-align: top;}

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

/**============================================================================================**/
/* 2馬力船外機の商品不具合に関するお問合せ（claim_06.html） */

/* アコーディオン 表示・非表示エリア */
#area1,
#area2,
#area3 {
  overflow-y: hidden;
  margin: 0; 
  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;}

#area1,
#area2 {
  max-height: 0; padding: 0 0 0 35px; 
  opacity: 0;}

#area3 {
    max-height: 200px; margin: 10px 0; padding: 0 0 0 40px; 
    opacity: 1;}

#area1 p,
#area2 p,
#area3 p {
	margin: 0 0 5px;
    font-size: 14px; font-weight: bold;}

/* アコーディオンをクリックした場合 */
#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;}

form#mailformpro label[for^="reason"] { 
    display: inline-block;
    margin: 0 20px 10px 0; padding: 0;
    font-size: 14px; vertical-align: top;}

/*--LastUp2025.09.23_kimata--*/