:root{
    
    /* ヘッダー背景色   */
    --headerBackgroundColor: rgba(251,119,1,1);
    /* ヘッダー会社ロゴ パス    */
    --headerLogo: url('../img/iwt-logo.svg');
    /* ヘッダー会社ロゴ 幅  */
    --headerLogoWidth: 48px;
    /* ヘッダー会社ロゴ 高さ    */
    --headerLogoHeight: 48px;
    
    /* ヘッダー会社名 文字色    */
    --headerNameColor: #000;
    
    /* ヘッダメニューにマウスを乗せた時の下線色 */
    --headerHoverUnderLineColor: #023f7d;

    /* フッター会社ロゴ パス    */
    --footerLogo: var(--headerLogo);
    /* フッター会社ロゴ 幅  */
    --footerLogoWidth: 36px;
    /* フッター会社ロゴ 高さ    */
    --footerLogoHeight: 36px;
    
 
    
    /* 全体イメージカラー   */
    --imageColor: #8B9B6F;
}

/*
 *  Delighters.js 関連
 */

.delighter{
    transition: all .7s ease-out;
    transform: translateY(36px);
    opacity: 0;
}
.started{
    opacity: 1;
    transform: translateY(0px);
}
.ended{
}


*{
    font-family: "メイリオ","Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    box-sizing: border-box;
    border-collapse: collapse;
    /*transition-duration: 300ms;*/
}

body{
    font-family: "メイリオ","Hiragino Kaku Gothic Pro W3","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    opacity: 1;
    margin: 0;
    padding: 0;
    transition-duration: 300ms;
}
body.appear{
    opacity: 1;
}

p,h1,h2,h3,h4,h5,h6{
    font-weight: normal;
    font-size: 1em;
    line-height: 1.4em;
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
    color: #023f7d;
}

li{
    list-style: none;
}

.sep8{
    height: 8px;
}
.sep16{
    height: 16px;
}
.sep32{
    height: 32px;
}
.sep64{
    height: 64px;
}

.table{
    display: table;
}
.tr{
    display: table-row;
}
.td,.td1,.td2,.td3,.td4,.td5,.td6,.td7,.td8,.td9,.td10,.td11,.td12,.td13,.td14,.td15,.td16,
.th,.th1,.th2,.th3,.ht4,.th5,.th6,.th7,.th8,.th9,.th10,.th11,.th12,.th13,.th14,.th15,.th16{
    display: table-cell;
}

/*優先順位高*/
.pcno{
    display: none !important;
}
.breadCrumbs{
    display: inline-block !important;
}
.relative{
    position: relative !important;
}
.absolute{
    position: absolute !important;
}
.fixed{
    position: fixed !important;
}

.mincho{
    font-family: 'ＭＳ 明朝', 'ＭＳ 明朝', 'ヒラギノ明朝', 'HG明朝E',  serif;
}

.hidden{
    display: none;
}

.mainSection{
    padding-bottom: 32px;
    min-height: calc(100vh) !important;
}

.fontSize16{
    font-size: 16px !important;
}
.fontSize14{
    font-size: 14px !important;
}
.fontSize12{
    font-size: 12px !important;
}

.inner{
    position: relative;
}

/*------------------------------------------------------------------------------
    ヘッダー
------------------------------------------------------------------------------*/
.header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
    background-color: var(--headerBackgroundColor);
    transition-duration: 300ms;
    z-index: 999;
}

.headerLogo{
    width: var(--headerLogoWidth);
    height: var(--headerLogoHeight);
    max-height: var(--headerLogoHeight);
    background-image: var(--headerLogo);
    background-size: cover;
    transition-duration: 300ms;
}
.headerCompanyName{
    position: relative;
    height: var(--headerLogoHeight);
    max-height: var(--headerLogoHeight);
    font-size: calc(var(--headerLogoHeight) - 10px);
    line-height: 1;
    overflow: visible;
    color: var(--headerNameColor);
    transition-duration: 300ms;
}

.headerCompanyClass{
    font-size: calc(var(--headerLogoHeight) - 10px - 10px);
    padding: 0 4px;
    transition-duration: 300ms;
}
.headerRightMenuItem::after{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    max-width: 0;
    height: 1px;
    background-color: var(--headerHoverUnderLineColor);
}

.headerMargin{
    height: calc(var(--headerLogoHeight) + 24px);
}

.headerFlex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.headerLeft{
    display: flex;
    align-items: center;
}
.headerRight{
    display: flex;
    padding-right: 12px;
}

.headerCompanyName > .inner{
    position: absolute;
    bottom: 0;
    left: 8px;
    white-space: nowrap;
}

.headerRightMenu{
    height: 48px;
    max-height: 48px;
    display: flex;
    align-items: center;
}

.headerRightMenuItem{
    display: table-cell;
    vertical-align: bottom;
    padding: 0 16px;
    position: relative;
}
.headerRightMenuItem:hover::after{
    max-width: 100%;
    left: 0;
    right: 0;
    transition-duration: 100ms;
}


/*------------------------------------------
    左メニュー
-------------------------------------------*/
.leftMenu{
    position: fixed;
    top: calc(var(--headerLogoHeight) + 24px);;
    bottom: 0;
    left: 0;
    overflow: scroll;
    scrollbar-width: thin;
    scrollbar-color: #d7d7d7 #f7f7f7;
}
.leftMenu > .inner{
    padding: 16px;
}

.leftMenu .lCategory{
    margin-bottom: 20.25px;
    border: 1px solid #c7c7c7;
    background-color: #d7d7d7;
}

.leftMenu .lCategoryName{
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    padding: 8px;
}
.leftMenu .mCategories{
    background-color: #fff;
    padding: 8px 0;
}

.leftMenu .mCategory{
    margin-bottom: 10.25px;
    padding: 0 16px;
}
.leftMenu .mCategory:last-child{
    margin-bottom: 0;
}
.leftMenu .mCategoryName{
    color: #878797;
    font-weight: 800;
    cursor: pointer;
}
.leftMenu .productCount{
    font-weight: normal;
    font-style: italic;
}

.leftMenu .productName{
    display: block;
    padding-left: 32px;
    cursor: pointer;
}
.leftMenu .productName:hover{
    color: #000;
    background-color: gold;
}

/*-------------------------------------------
    Panz
-------------------------------------------*/
.panz ol{
    display: flex;
    gap: 16px;
}
.panz ol li:after{
    content: '>';
    display: inline-block;
    margin-left: 8px;
}
.panz ol li:last-child:after{
    content: '';
    display: inline;
}
.panz ol li a:hover{
    background-color: #f0ead8;
}


/*--------------------------------------------
    MainSection
---------------------------------------------*/
.mainSection > .inner{
    padding-left: 
}

.mainSection > .inner > .tplArea{
    padding: 32px;
}

.itemBox{
    grid-column: auto / auto;
    border-radius: 4px;
    border: #d7d7d7 1px solid;
    width: 298px;
    padding: 16px;
}

/*----------------------------------------------
    DEFAULT
-----------------------------------------------*/
#DEFAULT .lCategoryGrid{
    display: grid;
    place-content: center;
}
#DEFAULT .lCategoryFlex{
    max-width: 960px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
}

/*-----------------------------------------------
    LCATEGORY
-----------------------------------------------*/
#LCATEGORY .mCategoryGrid{
    display: grid;
    place-content: center;
}
#LCATEGORY .mCategoryFlex{
    max-width: 960px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
}

/*-----------------------------------------------
    MCATEGORY
-----------------------------------------------*/
#MCATEGORY .productGrid{
    display: grid;
    place-content: center;
}
#MCATEGORY .productFlex{
    max-width: 960px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
}

/*------------------------------------------------
    PRODUCT
------------------------------------------------*/
#PRODUCT .productFlex{
    display: flex;
}
#PRODUCT .productImage{
    width: 400px;
}
#PRODUCT .productImage > object{
    width: 100%;
    min-height: 400px;
}
#PRODUCT .productImage > img{
    width: 100%;
    height: auto;
}

#PRODUCT .productInfoBlock{
    padding: 32px;
} 
#PRODUCT .productSummary{
    margin-bottom: 16px;
}
#PRODUCT .productPrice{
    margin-bottom: 16px;
}
#PRODUCT .productCountArea{
    margin-bottom: 16px;
}
#PRODUCT .productCount{
    width: 60px;
}
#PRODUCT .lblIntoCart{
    display: block;
    padding: 8px 16px;
    background-color: var(--headerBackgroundColor);
    border: #fff 3px double;
    border-radius: 32px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}
#PRODUCT .lblIntoCart:hover{
    opacity: 0.7;
}

/*----------------------------------
    Email Input
-------------------------------------*/
#EMAIL .emailInputArea{
    display: grid;
    place-content: center;
    position: fixed;
    top: 72px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 1000;
}

#EMAIL .emailForm{
    width: 400px;
    padding: 32px;
    border-radius: 8px;
    border: #ff9933 2px solid;
    margin-bottom: 16px;
}

#EMAIL .emailForm input{
    width: 100%;
    padding: 6px;
    font-size: 18px;
    font-weight: bold;
}

#EMAIL .submitArea{
    margin-top: 16px;
}
#EMAIL .submitArea button{
    width: 100%;
    border-style: none;
    background-color: #ff9933;
    padding: 6px;
    color: #fff;
}
#EMAIL .emailAttention{
    width: 400px;
    font-size: 14px;
    color:#666;
    font-style: italic;
}
/*------------------------------------------------------------------------------
    フッター
------------------------------------------------------------------------------*/
footer{
    padding: 64px;
    color: #fff;
}

footer > .inner{
    width: 960px;
    margin: 0 auto;
}

footer .footerFlex{
    display: flex;
    justify-content: space-between;
}

footer .companyNameArea{
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px;
}


footer{
    background-color: var(--imageColor);
}

footer .companyLogo{
    border: 0;
    height: var(--footerLogoHeight);
    width: var(--footerLogoWidth);
    background-image: var(--footerLogo);
    background-size: cover;
    vertical-align: bottom;
    margin-right: 16px;
}

footer .companyName{
    font-size: 24px;
    font-weight: 400;
}

.cornerArea:nth-child(odd){
    background-color: var(--imageColor);
    background-blend-mode:screen;
}



/*----------------------------------
    KIYAKU
----------------------------------^*/
#KIYAKU{
    display: none;
    z-index: 1000;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.9);
    padding: 64px;
    overflow: hidden;
}
#KIYAKU > .inner{
    width: 100%;
    height: 100%;
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
}
#KIYAKU .kiyakuBox{
    padding: 32px;
    height: calc(100% - 128px);
    border: #fff 1px solid;
    color: #fff;
    overflow: auto;
}
#KIYAKU .kiyakuBox > .inner{
    
}
#KIYAKU .kiyakuBox .kiyakuBlock{
    margin-bottom: 16px;
}
#KIYAKU .kiyakuBox .jou{
    font-weight: bold;
}
#KIYAKU .kiyakuBox .hon{
    padding-left: 32px;
}
#KIYAKU .kiyakuBox .hon ul li{
    list-style-type: none;
    counter-increment: cnt;
    position: relative;
    padding-left: 32px;
}
#KIYAKU .kiyakuBox .hon ul li::before {
    content: "(" counter(cnt) ") ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
#KIYAKU .kiyakuAnnounce{
    color: #fff;
}

#KIYAKU .submitArea{
    max-width: 960px;
    margin: 0 auto;
    margin-top: 16px;
}
#KIYAKU .submitArea button{
    width: 100%;
    padding: 6px;
    cursor: pointer;
}

/*---------------------
*/
.invisible{
    display: none;
}