@charset "utf-8";
header a:hover,
footer a:hover{
    text-decoration: none;
}
header{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 200;
}
header ul,ul li{
    margin: 0;
    padding:0;
}
#navi {
    width: 100%;
    background: #FFF;
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
    transition: all .3s;
}
#navi.bg_none{
    background: none;
}
#navi.bg_none.bg_white{
    background: #FFF;
}
#navi.navi_opacity,
#navi.navi_opacity .menu_child{
    background: #FFF;
}
#navi.bg_white{
    background: #FFF;
    box-shadow: 0px 2px 2px #EEE;
}
#navi>div{
    display: -webkit-box;
    display: flex;
    align-items: center;
}
#navi input {
  display: none;
}
header .logo {
    width: 215px;
    height: auto;
}
header .logo h1{
    margin: 0;
}
header .logo h1 a{
    display: block;
    padding: 10px;
}
/* 上部メニュー */
.menu {
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: flex;
    align-items: center;
}
.menu_parent > .title{
    letter-spacing: 0.2em;
    font-family: "FP-ヒラギノ角ゴ ProN W6";
}
.menu_parent {
    font-size: 1.4rem;
}
#menu-navibtn {
  display: none;
  cursor: pointer;
}
header #sub-menu{
    display: -webkit-box;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 100;
    height: 100%;
}
header #sub-menu li{
    margin-right: 5px;
}
header #sub-menu li a{
    display: block;
    width: 20px;
    height: 20px;
    padding: 10px;
}
header #sub-menu li a img{
    width: 100%;
    height: 100%;
}
header #sub-menu .cart_btn{
    position: relative;
}
header #sub-menu .cart_btn.active::after{
    position: absolute;
    top: 5px;
    right: 3px;
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #FFF;
    background: #0278C1;
    box-sizing: border-box;
}
header #sub-menu li.public_top{
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
    margin: 0 25px;
}
header #sub-menu li.public_top a{
    color: #FFF;
    width: auto;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    display: inline;
    vertical-align: middle;
}
header #sub-menu.bg_white li.public_top{
    border-color: #000;
}
header #sub-menu.bg_white li.public_top a{
    color: #000;
}
header #login-menu{
    width: 120px;
    background: #FFF;
    position: absolute;
    top: -230px;
    right: 65px;
    transition: 0.3s;
    border-top: 1px solid #BFBFBF;
    border-bottom: 1px solid #BFBFBF;
    padding: 10px 0;
}
header #login-menu li a{
    display: block;
    padding: 16.5px 0;
    font-size: 13px;
    letter-spacing: 1.3px;
    text-align: center;
    transition: 0.3s;
}
header #login-menu.open{
    top: 89px;
}

/*検索フォーム*/
.search_modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 300;
}
.search_modal .modal_bg{
    background: rgba(0,0,0,0.7);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.search_modal .modal_content{
    background: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    box-sizing: border-box;
}
/*削除ボタン*/
.search_modal .search_clear {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
}
.search_modal .search_clear_btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  outline: 0;
}
.search_modal .search_clear_btn span::before,
.search_modal .search_clear_btn span::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #BFBFBF;
}
.search_modal .search_clear_btn span::before {
  transform: rotate(-45deg);
}
.search_modal .search_clear_btn span::after {
  transform: rotate(45deg);
}
.search_modal .form_wrap{
    width: 80%;
    height: 100%;
    max-width: 1094px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.search_modal .form_wrap img{
    margin-right: 22px;
}
.search_modal .form_wrap .form_group_search{
    position: relative;
    width: 100%;
}
.search_modal .form_wrap .form_group_search > input{
    display: block;
    width: 100%;
    height: 20px;
    color: #000;
    background: #FFF;
    border: none;
    border-left: 1px solid #BFBFBF;
    font-size: 1.4rem;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0 8px;
    box-sizing: border-box;
}
.search_modal .form_wrap .form_group_search > input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.search_modal .form_wrap .form_group_search > input:focus{
    outline: none;
}
.search_modal .form_group_search .error{
    color: #FF0000;
    background: #FFF5F5;
    padding: 3px;
    position: absolute;
    font-size: 12px;
    top: 25px;
}
.search_modal .form_group_search .error p{
    margin: 0;
}
@media (min-width: 941px){
    header .logo {
        margin: 0 80px 0 20px;
    }
}
@media (max-width: 1205px) {
    #navi>div{
        position: relative;
        height: 63px;
    }
    header .logo{
        max-width: 160px;
        margin: 0 auto;
    }
    header .logo h1 a{
        align-items: center;
    }
    header #sub-menu li{
        margin: 0;
    }
    .menu,.login_btn,.public_top{
        display: none;
    }
    /*SPドロワーメニュー*/
    #nav-drawer {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 15px;
        left: 22px;
        z-index: 100;
    }
    .nav-unshown {
        display:none;
    }
    #nav-drawer #nav-open {
        display: block;
        height: 100%;
        cursor: pointer;
    }
    #nav-open span,#nav-open span::before{
        position: absolute;
        height: 1px;
        width: 21px;
        border-radius: 3px;
        background: #555;
        display: block;
        content: '';
    }
    #nav-open span{
        top: 10px;
        left: 5px;
    }
    #nav-open span::before{
        bottom: -10px;
    }
    #nav-open.white span, #nav-open.white span::before{
        background: #FFF;
    }
    /*閉じる用の薄白カバー*/
    #nav-close {
        display: none;
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #FFF;
        opacity: 0;
        transition: .3s ease-in-out;
    }
    #nav-input:checked ~ #nav-close {
        display: block;
        opacity: .9;
    }

    /*中身*/
    #nav-content {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 80%;
        max-width: 330px;
        height: 100%;
        background: #FFF;
        transition: .3s ease-in-out;
        -webkit-transform: translateX(-120%);
        transform: translateX(-120%);
    }
    #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        box-shadow: 10px 0 5px rgba(0,0,0,.16);
    }
    #nav-content .inner{
        overflow: auto;
        height: 100%;
    }
    #nav-content .logo_sp {
        height: 40px;
        max-width: 140px;
        margin: 19px 18px;
    }
    #nav-content .logo_sp img{
        width: 100%;
    }
    #nav-content .main_menu{
        font-size: 12px;
    }
    #nav-content .main_menu > li{
        width: 100%;
        border-bottom: 1px solid #BFBFBF;
    }
    #nav-content .main_menu > li:first-child{
        border-top: 1px solid #BFBFBF;
    }
    #nav-content .main_menu > li > a,
    #nav-content .main_menu > li > label{
        display: block;
        padding: 2.5em 2em;
        box-sizing: border-box;
        cursor: pointer;
    }
    #nav-content .account_menu{
        padding: 2em;
    }
    #nav-content .account_menu a{
        display: inline-block;
        margin-right: 2em;
        margin-bottom: 1em;
    }
    #nav-content .connect_list{
        padding: 30px 10px;
        text-align: center;
    }
    #nav-content .connect_list p{
        font-size: 10pt;
        letter-spacing: 0.09pt;
        margin: 2em 0;
    }
    #nav-content .connect_list li{
        display: inline-block;
		margin: 0 8px;
    }
    #nav-content .connect_list li img{
		object-fit: contain;
    }

    /*アコーディオン*/
    #nav-content input{
        display: none;
    }
    #nav-content input:checked + .toggle{
        height: auto;
        padding: 20px 0;
        border-top: 1px solid #BFBFBF;
    }
    #nav-content input:checked + .toggle_child{
        height: auto;
        padding: 5px 0;
    }
    #nav-content .toggle,
    #nav-content .toggle_child{
        height: 0;
        padding: 0;
        transition: .3s;
        overflow: hidden;
    }
    #nav-content .toggle > li,
    #nav-content .toggle_child > li{
        padding-left: 30px;
    }
    #nav-content .toggle.sp_layout > li { padding-left: 10px; }
    #nav-content .toggle.sp_layout .toggle_child > li { padding-left: 70px; }
    #nav-content .toggle li > label,
    #nav-content .toggle li > a,
    #nav-content .toggle_child > li > a{
        display: block;
        padding: 1em 0;
        cursor: pointer;

    }

    #nav-content .toggle li img {
        vertical-align: middle;
        width: 100%;
        max-width: 60px;
        display: inline-block;
        margin-right: 10px;
    }
    /*矢印*/
    #nav-content .main_menu .arrow{
        position: relative;
    }
    #nav-content .main_menu .arrow::after{
        content: "";
        position: absolute;
        right: 20px;
        top: 0;
        bottom: 0;
        margin: auto;
        transition: all 0.2s ease-in-out;
        display: block;
        width: 8px;
        height: 8px;
        border-top: solid 2px #505659;
        border-right: solid 2px #505659;
        -webkit-transform: rotate(135deg) translate(-50%);
        transform: rotate(135deg) translate(-50%);
    }
   #nav-content .main_menu .arrow.open::after {
        right: 15px;
        -webkit-transform: rotate(-45deg) translate(-50%);
        transform: rotate(-45deg) translate(-50%);
    }
    /*閉じるボタン*/

    #nav-content .close_wrap {
        display: block;
        width: 23px;
        height: 23px;
        position: absolute;
        top: 20px;
        right: -40px;
        cursor: pointer;
    }
    #nav-content .close_btn {
        display: block;
        width: 23px;
        height: 23px;
        position: relative;
    }
    #nav-content .close_btn::before,
    #nav-content .close_btn::after {
      display: block;
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      background: #707070;
    }
    #nav-content .close_btn::before {
      transform: rotate(-45deg);
    }
    #nav-content .close_btn::after {
      transform: rotate(45deg);
    }
	#nav-content .connect_icon{}

}

/* PC用 */
@media screen and (min-width: 1206px) {
    #nav-drawer{
        display: none;
    }
    /* ドロップダウンメニュー */
    header .menu_child{
        padding: 0;
        background: #FFF;
        visibility: hidden;
        opacity: 0;
        transition: all .4s;
    }
    header .menu_child.bg_white{
        background: #FFF;
    }
    header .menu_child{
        letter-spacing: 0.1em;
    }
    header .menu_child p{
        font-family: "UniversNextPro-Cond";
        font-size: 1.8rem;
        margin: 0;
        height: 35px;
        letter-spacing: 0;
    }

    .menu_parent>label,
    .menu_parent>a{
        cursor:pointer;
        position: relative;
        display: -webkit-inline-box;
        display: inline-flex;
        width: 100%;
        height: 87px;
        font-size: 1.3rem;
        align-items: center;
        outline: none;
    }
    .menu_parent>label:hover,
    .menu_parent>a:hover,
    .menu_child a:hover{
        opacity: 1;
    }
    .menu_parent>a::after,
    .menu_parent>label::after,
    .menu_child a::after{
      position: absolute;
      bottom: 25px;
      left: 0;
      content: '';
      width: 100%;
      height: 1px;
      background: #000;
      opacity: 0;
      visibility: hidden;
      transition: .3s;
    }
    .menu_parent>a:hover::after,
    .menu_parent>label:hover::after,
    .menu_child a:hover::after{
        bottom: 30px;
        opacity: 1;
        visibility: visible;
    }
    .menu_child a{
        cursor:pointer;
        position: relative;
        display: -webkit-inline-box;
        display: inline-flex;
        font-size: 1.3rem;
        align-items: center;
        line-height: initial;
        height: auto;
    }
    .menu_child a::after{
        bottom: -6px;
    }
    .menu_child a:hover::after{
        bottom: -4px;
    }

    #navi>div{
        position: relative;
        height: 87px;
    }
    header .menu_parent {
        padding: 0 20px;
        text-align: center;
    }
    header .menu_child{
        position: absolute;
        top: 100%;
        left: 0;
        z-index: -10;
    }
    /*hoverした時に表示する要素*/
    #menu-product{
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        text-align: center;
        padding: 20px 20px 30px;
        width: 100%;
        line-height: 1.2;
        box-sizing: border-box;
    }
    #menu-corp{
        display: -webkit-box;
        display: flex;
        text-align: center;
        justify-content: center;
        padding: 20px 0 30px;
        width: 100%;
        line-height: 1.2;
        box-sizing: border-box;
    }
    #menu-support{
        display: -webkit-box;
        display: flex;
        text-align: center;
        justify-content: center;
        padding: 20px 0 30px;
        width: 100%;
        line-height: 1.2;
        box-sizing: border-box;
    }
    #menu-product>li{
        width: calc(100% / 7);
        max-width: 240px;
    }
	#menu-product .style-border {
		border-left: 1px solid #000;
		border-right: 1px solid #000;
	}
    #menu-corp>li{
        width: calc(100% / 5);
        max-width: 330px;
        min-width: 175px;
    }
    #menu-support>li{
        width: calc(100% / 3);
        max-width: 320px;
    }

    .menu_parent .menu_child{
        position: absolute;
        top: 0;
    }
    /*hoverした時に表示*/
    .menu_parent:hover .menu_child{
        visibility: visible;
        opacity: 1;
        box-shadow: 0px 1px 1px #DDD;
        top: 87px;
    }
    /*clickした時に表示*/
    .menu_parent input:checked + .menu_child{
        position: absolute;
        visibility: visible;
        opacity: 1;
        box-shadow: 0px 1px 1px #DDD;
        height: auto;
        padding: 5px 0;
        top: 87px;
    }
    .middle_cat li{
        padding: 10px 0;
    }

    .middle_cat .padding-item{
        padding-bottom: 30px;
    }

    #menu-corp .corp_img_box{
        width: 85%;
        height: auto;
        margin: 20px auto 10px;
    }
    #menu-corp .corp_img_box a:hover::after{
        display: none;
    }
    #menu-corp .corp_img_box img{
        width: 100%;
        height: auto;
    }
    #menu-corp{
        max-height: 80vh;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    #menu-corp::-webkit-scrollbar {
        display:none;
    }
}





/* footer ================================= */
footer{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: #404040;
    font-size: 1.2rem;
    letter-spacing: 0.6px;
    color: #FFF;
    margin-top: 50px;
    padding: 55px 60px 0;
    box-sizing: border-box;
}
footer a{
    color: #FFF;
}
footer .logo{
    width: 165px;
}
footer .product a,footer .business a,
footer .support a,footer .contact a,
footer .company a,footer .siteInfo a{
    position: relative;
    display: inline-block;
}
footer .product a::after,footer .business a::after,
footer .support a::after,footer .contact a::after,
footer .company a::after,footer .siteInfo a::after{
    position: absolute;
    bottom: 0px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background: #FFF;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    text-decoration: underline;
}
footer .product a:hover::after,footer .business a:hover::after,
footer .support a:hover::after,footer .contact a:hover::after,
footer .company a:hover::after,footer .siteInfo a:hover::after{
    bottom: 3px;
    opacity: 1;
    visibility: visible;
}
footer .inner{
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding-left: 90px;
    box-sizing: border-box;
    width: calc(100% - 165px);
}
footer dl dd,
footer ul{
    margin: 0;
    padding: 0;
    line-height: 2;
}
footer dl dt{
    margin-bottom: 20px;
}
footer .product, footer .business,
footer .support, footer .contact,
footer .company{
    margin-right: 50px;
    margin-bottom: 50px;
}
footer .product{
    width: 125px;
}
footer .business{
    width: 140px;
}
footer .support{
    width: 130px;
}
footer .contact{
    width: 140px;
}
footer .company{
    width: 193px;
}
footer .siteInfo{
    flex: 1;
    min-width: 190px;
}
footer .sns{
    margin-left: auto;
}
footer .inner .sns ul{
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
}
footer .inner .sns ul li{
    margin-right: 12px;
}
footer .inner .sns ul li:last-child{
    margin-right: 0;
}
footer .inner .sns ul li a{
    display: -webkit-box;
    display: flex;
    width: 30px;
    height: 30px;
    -webkit-box-pack: center;
    justify-content: center;
    align-items: center;
}
footer .inner .sns ul li .fab{
    font-size: 20px;
}
footer #copyright{
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0;
}
footer #copyright small{
    font-size: 1.4rem;
    letter-spacing: 0.13px;
    padding: 15px;
}
footer input{
    display: none;
}
footer .inner div label{
    margin-bottom: 2em;
    display: block;
}
footer .inner .logo img{
    width: 100%;
}
footer .sns_white .sns_line{
	height: 30px;
}
.sns_white{
	display: flex;
	align-items: center;
}
.sns_white div {
    width: 30px;
    height: 30px;
	margin: 0 8px;
}
.sns_white .sns_line {
    display: inline-flex;
	align-items: center;
	width: auto;
}
.sns_white_icon {
    height: 25px;
}
.sns_white_icon img{
	object-fit: contain;
}
/* sp ================================= */
@media (max-width: 1024px) {
    footer{
        padding: 20px 0 0;
    }
    footer .inner{
        padding: 0;
        width: 100%;
        position: relative;
    }
    footer .logo{
        width: 144px;
        margin: 10px 20px 20px;
    }
    footer .inner label{
        cursor: pointer;
    }
    footer .inner .product, footer .inner .business,
    footer .inner .support, footer .inner .contact,
    footer .inner .company{
        min-width: 100%;
        padding: 0;
        margin: 0;
    }
    footer .siteInfo {
        margin: 10px;
    }
    footer .inner .sns{
		display: flex;
		justify-content: center;
		width: 100%;
		margin: 20px 0;
    }
    footer .inner .sns ul li {
        margin-right: 5px;
    }
    footer .inner .sns ul li .fab{
        font-size: 18px;
    }
    /* footer accordion */
	footer input:checked + .toggle{
		height: auto;
		padding: 5px 0;
	}
    footer .title{
        padding: 20px 10px;
        border-top: 1px solid #505050;
	}
    footer .inner div:nth-child(5) label{
        border-bottom: 1px solid #505050;
    }
	footer .toggle{
		height: 0;
		padding: 0;
		transition: .3s;
		overflow: hidden;
        background: #EEE;
	}
    footer .toggle li{
        padding: 10px;
        border-bottom: 1px solid #505050;
    }
    footer .toggle li:last-child{
        border-bottom:none;
    }
    footer .toggle li a{
        color: #404040;
    }
    footer .inner div label{
        margin-bottom: 0;
    }
    footer #copyright small{
        font-size: 10px;
        letter-spacing: 0.15px;
    }
}