.pc-navi{background-color: #FFF;width: 100%;height: 140px;border-bottom: solid 1px #C00;box-sizing: border-box;position: relative;z-index: 1000;transition:all 1.0s;}
.pc-navi ul.hsj_navi{width: 94%;/*max-width: 1220px;*/height: 60px;margin: 0;padding: 0;display: flex;flex-flow: row wrap;gap: 2%;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);transition:all 1.0s;}
.pc-navi ul.hsj_navi li{width: 100%;position: relative;opacity: 1.0;transition:all .5s;}
.pc-navi ul.hsj_navi li:nth-child(1){width: 30%;}
.pc-navi ul.hsj_navi li:nth-child(2){width: 54%;}
.pc-navi ul.hsj_navi li:nth-child(3){width: 12%;background-color: #C00;position: relative;}
.pc-navi ul.hsj_navi li h1{width: 100%;max-width: 516px;margin: 0;padding: 0;text-align: left;position: absolute;top: 50%;left: 0%;transform: translateY(-50%) translateX(0%);-webkit- transform: translateY(-50%) translateX(0%);}
.pc-navi ul.hsj_navi li p{font-size: 16px;line-height: 1.8;margin: 0;padding: 0;color: #222;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0.05em;width: 100%;text-align: right;position: absolute;top: 50%;left: 0%;transform: translateY(-50%) translateX(0%);-webkit- transform: translateY(-50%) translateX(0%);transition:all 1.0s;}
.pc-navi ul.hsj_navi li p a{color: #C00;margin-left: 30px;display: inline-block;text-decoration: none;position: relative;}
/* 下線のスタイル */
.pc-navi ul.hsj_navi li p a::after {background-color: #C00;bottom: -6px;content: "";height: 2px;left: 0;position: absolute;transform: scale(0, 1);transform-origin: left top;transition:all 0.5s;width: 100%;}
/* リンクにホバーした際の下線の表示 */
.pc-navi ul.hsj_navi li p a:hover::after {transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */}
.pc-navi ul.hsj_navi li p a.navi-btn01.active::after,
.pc-navi ul.hsj_navi li p a.navi-btn02.active::after,
.pc-navi ul.hsj_navi li p a.navi-btn03.active::after,
.pc-navi ul.hsj_navi li p a.navi-btn04.active::after,
.pc-navi ul.hsj_navi li p a.navi-btn05.active::after,
.pc-navi ul.hsj_navi li p a.navi-btn06.active::after {transform: scale(1, 1);}

.pc-navi ul.hsj_navi li:nth-child(3) p{font-size: 17px;line-height: 1.8;margin: 0;padding: 0 13%;color: #FFF;text-align: left;box-sizing: border-box;transition:all 1.0s;}
.pc-navi ul.hsj_navi li:nth-child(3)::after{content: "";display: inline-block;width: 10px;height: 16px;background-image: url("../images/arrowLink.png");background-size: contain;background-repeat: no-repeat;position: absolute;top: 50%;right: 13%;transform: translateY(-50%) translateX(0%);}
.pc-navi ul.hsj_navi li:nth-child(3) a{position:absolute;top:0;left:0;width:100%; height:100%;}
.pc-navi ul.hsj_navi li:nth-child(3):hover {opacity: 0.7;transition:all .5s;}

.pc-navi.floating {height: 100px;transition:all 1.0s;}
.pc-navi.floating ul.hsj_navi {height: 46px;transition:all 1.0s;}
.pc-navi.floating ul.hsj_navi li:nth-child(1){width: 430px;margin-right: auto;}
/*.pc-navi.floating ul.hsj_navi li:nth-child(2){width: 64%;}*/
.pc-navi.floating ul.hsj_navi li p{font-size: 14px;transition:all 1.0s;}
.pc-navi.floating ul.hsj_navi li:nth-child(3) p{font-size: 14px;transition:all 1.0s;}




.sp-navi{background-color: #FFF;width: 100%;height: 100px;border-bottom: solid 1px #C00;box-sizing: border-box;position: relative;z-index: 1000;transition:all 1.0s;}
.sp-navi h1 {width: 360px;margin: 0;padding: 0;position: absolute;top: 50%;left: 5%;transform: translateY(-50%) translateX(0%);-webkit- transform: translateY(-50%) translateX(0%);}
.sp-navi .fat-nav{top: 99px;right:-300px;height: calc(100vh - 99px);position:fixed;display:none;width:300px;background:rgba(0,0,0,1.0);transition: all .6s;}
.sp-navi .fat-nav.active{right:0px;transition: all .6s;}
.sp-navi .fat-nav li{width: 100%;margin: 0;padding: 15px 25px;box-sizing: border-box;border-bottom: solid 1px #666;position: relative;}
.sp-navi .fat-nav li::after {content: "";display: inline-block;width: 12px;height: 20px;background-image: url("../images/arrowLink.png");background-size: contain;background-repeat: no-repeat;position: absolute;top: 49%;right: 25px;transform: translateY(-50%) translateX(0%);}
/*.sp-navi .fat-nav li:nth-child(6){border: none;}*/
.sp-navi .fat-nav li:nth-child(7){background-color: #a30000;border: none;margin: 25px 6%;box-sizing: border-box;width: 88%;border-radius: 8px;}
.sp-navi .fat-nav li p{font-size: 16px;line-height: 1.8;margin: 0;padding: 0 0;color: #FFF;font-family: 'HondaGlobalFontJP-SBold', sans-serif !important;font-feature-settings: "palt";letter-spacing: 0.05em;}
.sp-navi .fat-nav li a{background-color: #FFF;opacity: 0.0;transition:all .5s;position:absolute;top:0;left:0;width:100%; height:100%;}
.sp-navi .fat-nav li a:hover{opacity: 0.2;}
.sp-navi .fat-nav li a.active{background-color: #C00;opacity: 1.0;z-index: -1;}

.hamburger{display:none;width:40px;height:32px;position:fixed;top:34px;right:5%;z-index:9980;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-ms-touch-action:manipulation;touch-action:manipulation;}
.hamburger__icon{position:relative;margin-top:14px;margin-bottom:14px;}
.hamburger__icon,.hamburger__icon:after,.hamburger__icon:before{display:block;width:40px;height:3px;background-color:#222;-moz-transition-property:background-color,-moz-transform;-o-transition-property:background-color,-o-transform;-webkit-transition-property:background-color,-webkit-transform;transition-property:background-color,transform;transition-duration:.4s;}
.hamburger__icon:after,.hamburger__icon:before{position:absolute;content:""}
.hamburger__icon:before{top:-14px}
.hamburger__icon:after{top:14px}
.hamburger.active .hamburger__icon{background-color:transparent}
.hamburger.active .hamburger__icon:after,.hamburger.active .hamburger__icon:before{background-color:#222}
.hamburger.active .hamburger__icon:before{-moz-transform:translateY(14px)rotate(45deg);-ms-transform:translateY(14px)rotate(45deg);-webkit-transform:translateY(14px)rotate(45deg);transform:translateY(14px)rotate(45deg)}
.hamburger.active .hamburger__icon:after{-moz-transform:translateY(-14px)rotate(-45deg);-ms-transform:translateY(-14px)rotate(-45deg);-webkit-transform:translateY(-14px)rotate(-45deg);transform:translateY(-14px)rotate(-45deg)}


.pc-navi{display: block;}
.sp-navi{display: none;}
.pc-view{display: block;}
.sp-view{display: none;}
.break{display: none;}

@media screen and (max-width: 1600px) {
.pc-navi ul.hsj_navi li:nth-child(1){width: 30%;}
.pc-navi ul.hsj_navi li:nth-child(2){width: 56%;}
.pc-navi ul.hsj_navi li:nth-child(3){width: 10%;}
.pc-navi ul.hsj_navi li:nth-child(3)::after{width: 8px;height: 12px;}
.pc-navi ul.hsj_navi li p {font-size: 14px;font-size: 1vw;}
.pc-navi ul.hsj_navi li:nth-child(3) p {font-size: 1vw;}
.pc-navi ul.hsj_navi li p a {margin-left: 1.8vw;}
	
.pc-navi.floating ul.hsj_navi li:nth-child(1){width: 28%;}
.pc-navi.floating ul.hsj_navi li:nth-child(2){width: 57%;}
.pc-navi.floating ul.hsj_navi li:nth-child(3){width: 10%;}
}

@media screen and (max-width: 1400px) {
.pc-navi ul.hsj_navi li:nth-child(1){width: 32%;margin-right: auto;}
.pc-navi ul.hsj_navi li:nth-child(2){width: 51%;}
.pc-navi ul.hsj_navi li:nth-child(3){width: 11%;}
.pc-navi ul.hsj_navi li p {font-size: 1.0vw;line-height: 1.6;display: flex;flex-flow: row wrap;justify-content: space-between;}
.pc-navi ul.hsj_navi li:nth-child(3) p {font-size: 1.0vw;}
.pc-navi ul.hsj_navi li p a {margin-left: 0vw;}
	
.pc-navi.floating ul.hsj_navi li p {font-size: 1vw;}
.pc-navi.floating ul.hsj_navi li:nth-child(3) p {font-size: 1vw;}
.pc-navi.floating ul.hsj_navi li p a {margin-left: 2vw;}
	
.break{display: block;}
}

@media screen and (max-width: 1280px) {
.pc-navi{display: none;}
.sp-navi{display: block;}
/*.pc-navi.floating ul.hsj_navi li:nth-child(1){width: 344px;}
.pc-navi.floating ul.hsj_navi li:nth-child(2){width: calc(84% - 344px);}
.pc-navi.floating ul.hsj_navi li:nth-child(3){width: 12%;}*/
.hamburger {display: block;}

	
	
}

@media screen and (max-width: 1080px) {

}

@media screen and (max-width: 834px) {
.sp-navi{height: 74px;}
.sp-navi h1 {width: 280px;}
.sp-navi .fat-nav{top: 73px;right:-100vw;height: calc(100vh - 73px);width:100vw;background:rgba(0,0,0,1.0);}
.sp-navi .fat-nav li{padding: 15px 25px;}
.sp-navi .fat-nav li p{font-size: 16px;}
.sp-navi .fat-nav li a:hover{opacity: 0;}
.hamburger{top:21px;}
.pc-view{display: none;}
.sp-view{display: block;}
}
@media screen and (max-width: 512px) {
 .sp-navi h1 {
    width: 70vw;
  }
}