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

main { margin: 0 auto; padding: 86px 15px 0;}
section { margin: 0 30px 30px;}

@media screen and (max-width:1199px){
    section { margin: 0 0 30px;}
}

@media screen and (max-width:699px){
    main { padding: 60px 15px 0;}
}

main h2 {
    margin: 0 0 40px; padding: 10px 0 7px;
    background: #c90000;
    color: #fff; font-size: 21px; font-weight: 600;
    text-align: center;}

main hr {border: dotted #666; border-width: 1px 0 0;}

/**========================================**/
/* パンクズリスト */
#pankuzu { font-size: 12px;}


/* パンクズリスト */
#pankuzu {
    box-sizing: border-box; margin: 5px 0 20px; padding: 3px 0;}


@media screen and (max-width:1024px) {
    #pankuzu {
	    overflow-x: scroll; white-space: nowrap;
	    margin:20px 0;padding:5px;}
	
    #pankuzu ul {display: inline-block; padding: 5px 5px 0;}

/* スクロールバーの装飾 */
    #pankuzu::-webkit-scrollbar {height: 8px;}
    #pankuzu::-webkit-scrollbar-track {background-color: rgba(216, 216, 216, 0.5);}
    #pankuzu::-webkit-scrollbar-thumb {background-color: rgba( 150, 150, 150, 0.8);}
}

/* ページトップへ */
#top-button { bottom: 85px;}
/**============================================================================================**/

/**============================================================================================**/
/* フォームの設定 */
/**========================================**/
#mailformpro .dis-tbl_tab,
#mailformpro .dis-tbl_tab > * { display: block;}

#mailformpro .dis-tbl_tab { width: 100%; font-size: 14px;}

/* 項目名 */
#mailformpro .dis-tbl_tab > :nth-of-type(1) {
    width: 210px; padding: 0 0 5px;
    font-weight: 600;}

/* 必須 */
#mailformpro .reqmk {
    display: inline-block;
    margin: 0 0 0 10px; padding: 2px;
    border: solid 1px #C74A4C;
    color: #C74A4C; font-weight: bold;}

/* 入力欄 */
#mailformpro input[type="text"],
#mailformpro input[type="tel"],
#mailformpro input[type="email"],
#mailformpro select,
#mailformpro textarea { 
    box-sizing: border-box; width: 100%;padding: 3px 8px; 
    border: solid 1px #CCC; border-radius: 3px;
    color: #000; font-size: 16px;} 

#mailformpro input[type="text"],
#mailformpro input[type="tel"],
#mailformpro input[type="email"] { height: 34px;} 
#mailformpro select { max-width: 200px; height: 34px;} 

#mailformpro input[type="file"] { max-width: 280px; height: auto; padding: 10px; font-size: 14px;} 
#mailformpro input[type="checkbox"],
#mailformpro input[type="radio"] { 
    width: 16px; height: 16px; margin: 0 5px; padding: 0;
    line-height: 1.0em; vertical-align: middle; } 
#mailformpro input[type="submit"] { max-width: 60px; height: auto; padding:10px; font-weight:bold;} 

*[required], 
.required { background: rgba(255, 221, 221, 0.7);}

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

/* アラート表示 */
div.mfp_err {
    padding: 3px 0 5px;
    background-image:none;}
    
/* 入力欄（名前・品番）
#name_kanji_family,
#name_kana_family,
#itemNumber,
#date { max-width: 200px;}
 */
 
/* 入力欄（電話番号）
#mailformpro input[type="tel"] { max-width: 200px;} 
 */
 
/* 入力欄（市区町村/番地・マンション名など） */
#town,
#building { max-width: 600px;}

/* 入力欄（メールアドレス・商品名・お問合わせ内容） */
#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 p.asterisk {position: relative; padding: 0 0 0 18px;}
#mailformpro p.asterisk:before {content:'※'; position: absolute; top: 0; left: 0;}

    
/* アラート表示 */
#mailformpro .dis-tbl_tab > :nth-of-type(2) span { display: block; margin: 5px 0 0;}
#mailformpro .alrt { color: #f00;}

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

/**============================================================================================**/
/* お客様事由による返品・交換に関するお問合せ */
#exchange .w720 { max-width:720px; margin: 0 auto;}
#exchange .w720 + div {
    margin: 50px 0; padding: 50px 0;
    border-top: dotted 1px #666;  
    border-bottom: solid 1px #aaa;
    font-weight: bold;}
    
#exchange .modalContents li:not(:last-child) { margin: 0 0 10px;}
#exchange .modalContents li p { margin-left: 1em; text-indent: -1em; font-size: 15px; line-height: 1.8em;}
#exchange .modalContents li p:not(:last-child) { margin-bottom: 5px;}
/**============================================================================================**/

/**============================================================================================**/
/*モーダル用css*/
/**========================================**/
.lock {overflow:hidden;}
.modal-content {
    display:none; position:relative;
    width:700px; padding:10px 20px;
    border: solid 2px #aaa;
    background:#fff;}

.modal-overlay {
    display:none; position:fixed; top:0; left:0; z-index:1;
    width:100%; height:120%;
    background-color:rgba(0,0,0,0.75);
    }
.modal-wrap {
    display:none; position:fixed; top:0; left:0; z-index:2;
    overflow:auto;
    width:100%; height:100%;}

.modal-open:hover {cursor:pointer;}

/*モーダル閉じるボタン*/
.modal-close {
    display: block; position: absolute; top: -7.5px; right: -7.5px; z-index: 105;
    overflow: hidden;
    width: 30px; height: 30px; padding: 0;
    border-radius: 100%; background: #fff;
    text-indent: 200%; white-space: nowrap;
    cursor: pointer;}
    
.modal-close:before {
    content: "\00d7";
    display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    color: #333; font-size: 22px; font-weight: 700; text-align: center; line-height: 30px; text-indent: 0;
    -webkit-transition: color 0.15s linear;
    transition: color 0.15s linear;}
    
.modal-close {text-indent: -999px;}

@media screen and (max-width: 768px){
/*モーダル*/
    .modal-content { box-sizing: border-box; width:80%;}
    .modal-wrap {z-index:100;}

/*モーダル閉じるボタン*/
    .modal-close {
        position: fixed; top: 0; right: 0;
        width: 40px; height: 40px;
        border-radius: 0; background: #111;
        text-indent: -999px;}

    .modal-close:before,
    .modal-close:hover:before { color: #ccc; font-size: 28px; font-weight: 700; line-height: 40px;}
}

@media screen and (max-width: 599px){
.modal-content { width:95%; padding: 10px 5px;}

}

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

/* LastUp2024.09.06_kimata */