@charset "UTF-8";
/*
======== CONTENTS =======================================
   Site Name: 商品-LPページ全般
   2025.7.24
=========================================================
*/

/*-----------------------------------------------------
 root
-----------------------------------------------------*/
:root {
    --base-color: #cc0022;
    --bg-color: #f2f2f2;
}

/* --------------------------------
  supportNavi
-------------------------------- */
/*
#SupportNavi a:nth-child(2),
#SpSupportNavi li:nth-child(2){
	display:none;
}
*/
/* --------------------------------
 外部サーバー時 は上記を削除しサポートナビを非表示にする
*/

#SupportNavi,
#SpSupportNavi,
.lp1 #HeaderArea1 > .Container #SpMenuBtn{
	display:none;
}

/* --------------------------------
  GlobalNavi
-------------------------------- */
/*商品サイトリンクへのカラーを戻す*/

html #GlobalNaviMenu > li:last-child a,
html #SpGlobalNavi > li:last-child a{
    color: initial;
    background-color: initial;
}
html #GlobalNaviMenu > li:last-child a:hover{
    color:#fff;
    background-color:#666
}
html #SpGlobalNavi > li:last-child a:hover{
    color:#fff;
    background-color: #b1000e;
}
html #SpGlobalNavi > li:last-child a[href]::after{
    border-top: 2px solid #666;
    border-right: 2px solid #666;
}
@media screen and (min-width: 768px) {
    #GlobalNaviMenu li a[href^="#"]{
        position:relative;
    }
    /*商品サイトリンクスタイルの解除*/
    html #GlobalNaviMenu > li:last-child a[href^="#"]::after{
        border-top: 0px;
        border-right: 2px solid #333;
    }    
    #GlobalNaviMenu li a[href^="#"]::after{
        content: "";
        position: absolute;
        bottom:.5em;
        left: calc(50% - .7em / 2);
        width: .7em;
        height: .7em;
        border: transparent;
        border-top:none;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    
    #GlobalNaviMenu li a[href^="#"]:hover::after{
        border-right-color:#fff;
        border-bottom-color:#fff;
    }
    /*商品サイトリンクスタイルの上書き*/
    html #GlobalNaviMenu > li:last-child a[href^="#"]:hover::after{
        border-right-color: #fff;
    }
}
/* --------------------------------
  サイト名
*/
#SiteID{
    font-weight:700;
}

/* --------------------------------
  CTA
*/
#GlobalNaviMenu > li.btn_contact{
    padding:.5em;
    display: flex;
}
html #GlobalNaviMenu > li.btn_contact:last-child a,
html #SpGlobalNavi > li.btn_contact:last-child a{
    flex:1;
    padding:1.1em 1em .9em 1em;
    height: auto;
    max-height: calc(60px - 1em);
    background:var(--base-color);    
    color:#fff;
    line-height:1.2;
    border-radius:.3em;
}
html #GlobalNaviMenu > li.btn_contact:last-child a::after{
    display:none;
}
html #GlobalNaviMenu > li.btn_contact:last-child a:hover{
    opacity: 0.7;
    -webkit-transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);   
}
/*Sp*/
html #SpGlobalNavi > li.btn_contact:last-child{
    padding: 1em;    
}
html #SpGlobalNavi > li.btn_contact:last-child a{
    max-height: fit-content;
}
html #SpGlobalNavi > li.btn_contact:last-child a::after{
   border: none;
   background-image: url(/r23res/image/common/icon_blank_white.svg);
   width: 6vw;
   height: 5.3vw;
    inset: -0.5vw 4vw 0 auto;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}