@charset "utf-8";
/* CSS Document */
/* ========== 共通 ========== */
html{
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: 62.5%;
    color: #393939;
}

body{
    font-size: 1.6rem;
    line-height: 1.5;
}

#wrapper{
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
}

#red_border{
    width: 100%;
    height: 3px;
    background-color: #E90000;
}

.pc{
    display: block!important;
}

.sp{
    display: none!important;
}

/* ========== 共通 ========== */
/* パンくず */
span.pankuzu{
    display: inline-block;
    font-size: 1.4rem;
    margin-bottom: 25px;
}

span.pankuzu a{
    color: #0037AA;
}

.link a{
    color: #0037AA;
    transition: all 0.2s;
    font-weight: bold;
}

.link a:hover{
    opacity: 0.65;
}

/* フォントサイズ */
h1{
    font-size: 3.2rem;
    font-weight: bold;
}

h2{
    font-size: 2.8rem;
    font-weight: bold;
}

h3{
    font-size: 2.4rem;
    font-weight: bold;
}

h5{
    font-size: 1.8rem;
    font-weight: bold;
}

dl.title{
    margin-bottom: 45px;
}

dl.title dt{
    margin-bottom: 15px;
    padding-bottom: 10px;
    color: #707070;
    border-bottom: 1px solid #D5D5D5;
}

/* フォントカラー*/
.red{
    color: #E60000;
}

/*リンク*/
a.link{
    color: #0037AA;
    transition: all 0.2s;
}

a.link:hover{
    opacity: 0.5;
}

/* タブ */
ul#tab{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
} 

ul#tab li{
    width: 24.5%;
    height: 60px;
    background-color: #E6E6E6;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

ul#tab li:nth-of-type(n+5){
    margin-top: 10px;
}

ul#tab li.select,
ul#tab li:hover {
    color: #ffffff;
	background-color: #e50000;
}

/* === デザイン === */
main{
    width: 95%;
    max-width: 1366px;
    margin:0 auto 120px!important;
    padding: 45px 0 0;
}

section{
    margin-bottom: 75px;
}

section:last-of-type{
    margin-bottom: 120px;
}

/* ===== 注意書き ===== */
.caption{
    position: relative;
    margin-left: 35px;
}

.caption li::before{
    position: absolute;
    margin-left: -35px;
    content: '※：';
}

/* 複数 */
ul.captions{
    position: relative;
    margin-left: 42px;
}

ul.captions li::before{
    position: absolute;
    margin-left: -42px;
}

li.captions::before{
    content: '※：';
}

li.captions-1::before{
    content: '※1：';
}

li.captions-2::before{
    content: '※2：';
}

li.captions-3::before{
    content: '※3：';
}

/* ========== ヘッダー ==========*/
.header-wrapper{
    position: relative!important; 
    border-bottom: 4px solid #eee;
    height: 135px;
    display: flex!important;
    justify-content: center;
    align-items: center;
}

#header-pc{
    width: 95%;
    max-width: 1366px;
    margin:0 auto!important;
}

#dia_search{
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.logo{
    width: 250px;
    height: auto;
}

/*検索*/
#searchform input{
    width: 200px;
    height: 30px;
    border: 1px solid #393939;
}

.gnavi_btn{
    width: 30px;
    height: 30px;
    background-color: #393939;
    cursor: pointer;
}

.gnavi_btn i{
    color: #fff;
}

/* ハンバーガーメニュー */
.header__hamburger {
    display: none;
}

/*ナビ*/
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropmenu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 15px;
}

li.dropmenu-list{
    margin-right: 30px;
    display: inline-flex;
    align-items: center;
    font-size: 1.4rem;
}

li.dropmenu-list::before{
    content: '\f078';
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    margin-right: 5px;
    color: #E90000;
    font-size: 1rem;
}

li.dropmenu-list:last-of-type{
    margin-right: 0;
}

li.dropmenu-list a{
    display: inline-flex;
    align-items: center;
}

li.dropmenu-list span{
    cursor: pointer;
}

li.dropmenu-list span:hover,
li.dropmenu-list:last-of-type a:hover{
    color: #E90000;
}

li.dropmenu-list a{
    display: inline-flex!important;
}

li.dropmenu-list:hover a,
li.dropmenu-list:hover::before{
    transition: all 0.2s;
}

/* 子要素 */
.nav-child{
    display: none;
    position: absolute;
    width: 100%;
    top: 139px;
    left: 50%;
    transform: translate(-50%,0);
    background-color:rgba(245,245,245,1.00);
    white-space: nowrap;
    z-index: 1;
    box-shadow:inset 0 2px 10px 4px rgba(0,0,0,0.16);
}

.nav-category{
    width: 90%;
    max-width: 1366px;
    margin: 0 auto;
    padding:30px 0 20px;
}

.nav-category h5{
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 1px solid #393939;
    transition: all 0.2s;
}

#dia_search
.nav-category h5:hover{
    border-bottom: 1px solid #E90000;
}

ul.nav-group{
    margin-top: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

ul.nav-group li{
    margin: 0 45px 10px 0;
    font-size: 1.4rem;
    transition: all 0.2s;
}

.nav-category h5:hover a,
ul.nav-group li:hover a{
    color: #E90000!important;
}

/* ボタン */
ul.header_btn{
    display: flex;
    justify-content: space-between;
}

ul.header_btn li{
    width: 140px;
    height: 30px;
    border-radius: 15px;
    transition: all 0.4s;
}

ul.header_btn li:first-of-type{
    margin-right: 15px;
}

ul.header_btn li a{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #e90000;
    border-radius: 15px;
    transition: all 0.2s;
    border:1px solid #e90000;
}

ul.header_btn li a:hover{
    background-color: #FFFFFF;
    color: #e90000;
}

/*====== ページTOP =======*/
#page-top {
    position: fixed;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    bottom: 15px;
    right: 15px;
    font-size: 12px;
    line-height: 15px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #686868;
    padding: 20px;
    cursor: pointer;
    background: #fceae6;
    border: 1px solid #F9C8C9;
}

#page-top:hover {
    background: #fce1e0;
}

#page-link {
    position: fixed;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    bottom: 0px;
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #FFFFFF;
    padding-bottom: 10px;
    margin: 0 ;
    cursor: pointer;
    background: linear-gradient(45deg, #8FB2DE 0%,#6888C4 25%,#907FB8 50%, #9189C0 75%);
    opacity: 0.9;
    width: 100%;
}

#page-link span.large:hover {
    background: #0071BC;
}

#page-link span.large {
    font-size: 20px;
    display: block;
    font-weight: bold;
    line-height: 30px;
    margin: 0;
    margin-bottom: 15px;
    padding: 0 70px;
    border-bottom: #0071BC dotted 4px;
}

/* ========== フッター========== */
footer{
    bottom: 0;
    width: 100%;
    padding: 35px 0;
    margin: 120px 0 0!important;
    background-color: #393939;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    position: sticky;
    top: 100vh;
}

#footer{
    width: 95%;
    max-width: 1366px;
    margin: auto!important;
    display: flex;
    justify-content: space-between;
}
        
footer .logo{
    width: 350px;
    height: auto;
}
        
.footer_nav{
    text-align: right;
}

.footer_nav ul{
    display: flex;
    justify-content: flex-end;
}

.footer_nav ul li:last-of-type,
#sns li:last-of-type{
    margin-right: 0;
}

.footer_nav ul li:hover a,
#sns li:hover a{
    color: #F00000;
}

.footer_nav ul#nav li{
    margin: 10px 0 0 0;
}

.footer_nav div ul li::after{
    content: '|';
    margin: 0 8px;
}

.footer_nav div ul li:last-of-type::after{
    content: none;
    margin: 0;
}

#sns{
    width: auto;
    margin: 15px 0 7px;
    display: flex;
    justify-content:flex-end;
    align-items: center;
}

#sns li{
    margin-right: 20px;
    width: 30px!important;
    display: flex;
    justify-content:center;
    align-items: center;
    height: auto;
}

#sns li i{
    font-size: 2.1rem!important;
}

#sns li a{
    width: 100%;
    height: 100%;
}

#sns li a img{
    width: 100%;
    height: 100%;
}

#footer a {
    color: #fff;
}
        
#footer a:hover {
    color: #E50000;
}

/* ========== サイトの詳細 ========== */
@media screen and (max-width:1024px){
    .pc,
    .pc-br{
        display: none!important;
    }
    
    .sp,
    .sp-br{
        display: block!important;
    }
    
    html{
        font-size: 62.5%;
        margin: 0;
        padding: 0;
    }
    
    body{
        font-size: 1.6rem!important;
        position: relative;
    }
    
    #logo_sp{
        width: 55%;
        max-width: 280px;
        height: auto;
    }

    main{
        margin: 0 0 200px;
    }
    
    section{
        margin-bottom: 100px!important;
    }
    
    /*========= ナビゲーションのためのCSS ===============*/
    #header_sp{
        width: 95%;
        margin: 25px auto;
        display:flex;
        justify-content: space-between;
        align-items: center;
        font-size: 2.1rem;
    }
    
    #g-nav{
        position:fixed;
        z-index: 999;
        top:0;
        right: -100%;
        width:100%;
        height: 100vh;
        transition: all 0.6s;
    }

    #g-nav.panelactive{
        right: 0;
    }
    
    #g-nav.panelactive #g-nav-list{
        position: fixed;
        z-index: 999; 
        width: 96%!important;
        height: 100vh;
        padding: 25px 2%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    #g-nav-list{
        background-color:#fff;
    }

    /*検索*/
    #searchform2{
        margin-top: 75px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    #searchform2 input{
        width: calc(97% - 45px)!important;
        height: 45px;
        border: 1px solid #393939;
    }

    .gnavi_btn{
        width: 45px;
        height: 45px;
        cursor: pointer;
    }

    .gnavi_btn i{
        color: #fff;
    }


    .product_form{
        height: 7rem!important;
        margin-top: 50px!important;
    }

    .product_form input{
        width: 90%!important;
        font-size: 2rem!important;
    }
    
    /* ボタンのためのCSS */
    .openbtn{
        position:fixed;
        z-index: 9999;/*ボタンを最前面に*/
        cursor: pointer;
        width: 36px;
        height:30px;
        top: 30px;
        right: 3%;
    }
		
    .openbtn span{
        display: inline-block;
        transition: all .4s;
        position: absolute;
        height: 3px;
        border-radius: 2px;
        background-color: #666;
        width: 95%;
    }

    .openbtn span:nth-of-type(1) {
        top: 3px
    }

    .openbtn span:nth-of-type(2) {
        top:13px;
    }

    .openbtn span:nth-of-type(3) {
        top:23px;
    }

    .openbtn.active span:nth-of-type(1) {
        top: 4px;
        left: 0;
        transform: translateY(6px) rotate(-45deg);
        width: 90%;
    }

    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }

    .openbtn.active span:nth-of-type(3){
        top: 16px;
        left: 0;
        transform: translateY(-6px) rotate(45deg);
        width: 90%;
    }
    
    /*form*/
    form.product_form{
        border: 1px solid #B7B7B7;
        width: 100%;
        height: 75px;
        margin-top: 8rem;
    }
    
    .accordion{
        margin-top: 75px;
    }
    
    .accordion > li{
        display: inline-block;
        width: 100%;
        height: 70px;
        border-top: 1px solid #B7B7B7;
    }
    
    .accordion > li:last-of-type{
        border-bottom: 1px solid #B7B7B7;
    }
    
    .accordion li dl{
        height: 100%;
    }
    
    .accordion li dl dt{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .accordion li span{
        position: relative;
        display: inline-flex;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    
    .accordion li span::before,
    .accordion li span::after{
        position: absolute;
        content:'';
        width: 15px;
        height: 2px;
        background-color: #E90000;
    }
    
    .accordion li span::before{
        top:50%;
        right: 15px;
        transform: translate(-50%,-50%);
        transform: rotate(0deg);
    }

    .accordion li span::after{    
        top:50%;
        right: 15px;
        transform: rotate(90deg);
    }
    
    .accordion li:last-of-type span::before,
    .accordion li:last-of-type span::after{
        display: none;
    }

    /*　closeというクラスがついたら形状変化　*/
    .accordion li span.close::before{
        transform: rotate(45deg);
    }

    .accordion li span.close::after{
        transform: rotate(-45deg);
    }
    
    .accordion li dl dd{
        display: none;
    }
    
    .accordion li dl dd ul{
        padding: 1rem 0 0;
    }
    
    .accordion li dl dd ul li{
        padding: 1.5rem 0 0;
        font-size: 1.8rem;
    }
    
    .accordion li a{
        width: 100%;
        height: 100%;
        display: inline-flex;
        align-items: center;
    }

    /* ========== タブ ========== */
    ul.tab{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    ul.tab > li{
        width: calc(23.5% - 2px)!important;
        margin-right: 2%!important;
    }

    ul.tab > li:nth-of-type(4){
        margin-right: 0!important;
    }

    ul.tab > li:nth-of-type(n+5){
        margin-top: 10px;
    }

    #footer{
        width: 90%;
        margin: auto!important;
        display: block;
        justify-content: space-between;
    }
        
    footer .logo{
        width: 80%;
        margin: 0 auto 20px;
    }
        
    .footer_nav{
        text-align: center;
    }

    .footer_nav ul{
        display: flex;
        justify-content: center;
    }

    .footer_nav ul li a{
        font-size: 1.2rem!important;
    }
}

@media screen and (max-width:768px){
    /* ボタン */
    ul.header_btn{
        margin-top: 45px;
    }
    
    ul.header_btn li{
        width: 49%;
        height: 65px;
        border-radius: 50px;
    }
    
    ul.header_btn li a{
        border-radius: 50px;
    }
}

@media screen and (max-width:425px){
    /* ボタン */
    ul.header_btn{
        margin-top: 45px;
        display: block;
    }
    
    ul.header_btn li{
        width: 100%;
    }
    
    ul.header_btn li:nth-of-type(n+2){
        margin-top: 20px;
    }
}

span{
    display: inline-flex;
}