@charset "utf-8";
main { max-width: 1200px; margin: 80px auto; padding: 0 15px;}

main h2 { margin: 0 0 20px;}
main img { width: auto; height: auto; max-width: 100%; max-height: 100%;}

@media screen and (max-width:699px){
    main { margin: 50px auto;}
    main h2 { font-size: 25px;}
}

/**============================================================================================**/
input[type="text"],
input[type="tel"] { width: 50%; height: 34px;}
input[type="email"] { width: 80%; height: 34px;}
textarea {width: 100%;}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
	box-sizing: border-box; padding: 6px 12px;
	border: solid 1px #ccc; border-radius: 4px;
	color: #555; font-size: 16px; line-height: 1.428571429; vertical-align: middle;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	-webkit-transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;
	transition: border-color ease-in-out 0.15s,box-shadow ease-in-out 0.15s;}

/* チェックボックス */
#contact .p_5 {background: #547d73; color: #fff;}

input[type="checkbox"],
input[type="radio"] { 
	position: absolute; top: 3px; left: 0; 
	width: 16px; height: 16px; margin: 0;}

#contact .checkbox-contact label,
#contact .hant-category label,
form#mailformpro label.mfp_checked,
form#mailformpro label.mfp_not_checked { 
	display: inline-block; position: relative;
	box-sizing: border-box; width: auto; margin: 0; padding: 0 0 0 21px;
	font-size: 16px; line-height: 1.5em; vertical-align: top;}

/* 送信ボタン */
.mfp_element_submit:hover { 
    background: light-dark(rgba(239, 239, 239, 0.3), rgba(19, 1, 1, 0.3));
    cursor: default;}

#mail_submit_button[disabled] { border-color: rgba(133,133,133,0.30); opacity: 1;}
#mail_submit_button[disabled]:hover { opacity: 1;}
#mail_submit_button { 
	padding: 10px 40px;
	border: solid 1px; border-radius: 4px;
    border-color: rgba(133,133,133,1.0);
    font-size: 14px;}
    
#mail_submit_button:hover { opacity: 0.7; cursor: pointer;}


@media screen and (max-width:699px){
input[type="text"] {font-size: 16px;}
input[type="email"] { width: 100%; font-size: 16px;}
textarea {font-size: 16px;}
}


/* 入力ステータス */
*[required],
input[type="text"].required,
input[type="email"].required,
.required{
  background: rgba(255, 221, 221, 0.7);
}

*[required].dealed,
.required.dealed{
  background: rgba(223, 240, 216, 1);
}

.caution{
  background: rgba(252, 248, 227, 1);
}

.alert{
  background: rgba(255, 221, 221, 0.7);
  margin-bottom: 0px;
}

.alphabet{
  ime-mode: disabled;
}


/*必須マーク*/
.reqmk{
	display:inline-block; 
	margin: 4px 0 0 10px; padding: 2px 3px; 
	border: solid 1px #C74A4C; background:#fff; 
	color:#C74A4C; font-size: 10px; font-weight: lighter; line-height: 1.0em;
    vertical-align: top;}

/*　必須項目用　*/
div.hissu .alrt {color:#f00; line-height:1.3em;}



/* ご購入頂いた製品にトラブルがあった場合・・・ */
div.posi-rlt {
    max-width: 470px; margin: 30px auto;  padding: 0px 0px 0px 85px;
    font-size: 14px; font-weight: 600; line-height: 1.6em;}

div.posi-rlt::before {
    content: url("images/icon_handshake.png");
    position: absolute; top: 50%; left: 10px;
    margin: -25px 0 0;}
    

/**============================================================================================**/
/* お問い合わせ */
#contact > p { margin: 0 0 30px; font-size: 16px;}

#contact .dis-tbl_tab {width: 100%; max-width: 800px; margin: 30px auto 0;}
#contact .dis-tbl_tab > * { display: table-cell; vertical-align: top;}
#contact .dis-tbl_tab > p {width: 240px; font-weight: 600;}
#contact .dis-tbl_tab > p:has(.reqmk) { padding-top: 6px;}

/* メールアドレス */
#contact input[type="email"] ~ p  { font-size: 13px;}

/* cssのリセット（label） */
form#mailformpro .checkbox label.mfp_checked,
form#mailformpro .checkbox label.mfp_not_checked,
form#mailformpro .radio label.mfp_checked,
form#mailformpro .radio label.mfp_not_checked { width: 220px; margin: 10px 0 0;}

@media screen and (max-width:699px){
    #contact > p { margin: 0 0 30px; font-size: 14px;}
    
    #contact .dis-tbl_tab,
    #contact .dis-tbl_tab > * {display: block; width: 100%;}
    #contact .dis-tbl_tab > p:has(.reqmk) { padding-top: 0;}
    
    #contact input[type="text"],
    #contact input[type="email"],
    #contact textarea  { margin-top: 10px;}
}

/* お問い合わせ内容を選択 */
#contact .dis-tblcl02 div { font-size: 0;}
#contact .dis-tblcl02 div label {font-size: 16px; line-height: 1.5em;}
span.wpcf7-list-item { margin: 0;}


/**============================================================================================**/
/* HANT アウトドアバッグ テスター募集 */
#outdoorBag { max-width: 800px; margin: 0 auto;}

#outdoorBag .bg { margin: 0 0 50px; background: #333;}

#outdoorBag .bg a { 
    display: block; position: relative;
    width: 200px; margin: 0 auto 10px; padding: 10px 20px 10px 10px; 
    border-radius: 6px;
    background: #567a6d;
    color: #fff; font-size: 18px; font-weight: bold; text-align: center;}

#outdoorBag .bg a::before {
    content: '';
    display: inline-block; position: absolute; top: 50%; right: 15px;
    width: 10px; height: 10px; margin: -5px 0 0;
    border: solid #fff; border-width: 0 3px 3px 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);}
    

#outdoorBag h2 ~ ul { max-width: 610px; margin: 0 auto; padding: 10px;}
#outdoorBag h2 ~ ul li { 
    margin: 10px 0 10px 1em; 
    color: #fff; font-weight: 600; text-indent: -1em;}

#outdoorBag h3 { 
    margin: 50PX 0 30px; padding: 0 0 5px; 
    border-bottom: solid 1px #000; 
    font-size: 20px; line-height: 1.0em;}

#outdoorBag .dis-tbl_tab {width: 100%; margin: 0 auto 30px;}
#outdoorBag .dis-tbl_tab > * { display: table-cell; vertical-align: top;}
#outdoorBag .dis-tbl_tab > p {width: 250px; font-weight: 600;}

/* メールアドレス・InstagramアカウントID */
#outdoorBag input[type="email"],
#outdoorBag input[name="InstagramアカウントID"] { width: 100%;}

#outdoorBag input[type="email"] ~ p  { font-size: 13px;}


/* 年齢（任意） */
#outdoorBag input[name="年齢"] { width: 80px;}

/* 同意確認 */
#outdoorBag .check { margin: 0 0 30px;}
#outdoorBag .check li { margin: 0 0 20px; font-weight: bold;}

#outdoorBag form#mailformpro label { white-space: normal;}

/* cssのリセット（label） */
form#mailformpro .genre label.mfp_checked,
form#mailformpro .genre label.mfp_not_checked,
form#mailformpro .frequency label.mfp_checked,
form#mailformpro .frequency label.mfp_not_checked { width: 120px; margin: 0 10px 15px 0;}


@media screen and (max-width:699px){
    #outdoorBag .dis-tbl_tab,
    #outdoorBag .dis-tbl_tab > * {display: block;}

    #outdoorBag .dis-tbl_tab > p { width: auto; margin: 0 0 10px;}
    #outdoorBag .dis-tbl_tab > p br { display: none;}
}


/**============================================================================================**/
/* DOCK BUMPER(ドックバンパー)無料見積り */

#d-fender h2 + p {display: flex; justify-content: center; margin: 0 0 30px;}


#d-fender .dis-tbl_tab ul li {margin: 0 0 5px;}
#d-fender p.m-tb5 {padding: 0 0 0  calc(1em + 5px); color: #555; font-size: 14px; text-indent: calc(-1em - 5px);}
#d-fender p.m-tb5::before {content: '※'; display: inline; margin: 0 5px 0 0;}

#detail_area img {display: block; width: 100%; max-width: 350px; height: auto; margin: 0 0 10px;}
#detail_area input {text-align: right;}


/* LastUp2026.10.20_kimata */