@charset "UTF-8"; /************************************************ header ************************************************/ #headerArea{width:100%;min-width:1280px} #headerArea .headerPcNone{display:none} #headerArea.is-gnavOpen .hBgLayer{display:block;z-index:3} #headerArea.is-open .hBgLayer{display:block;z-index:5} /* headerTop */ #headerArea .headerTop{height:80px} #headerArea .headerTop > .inner{width:1280px;margin:0 auto;padding:0 80px} #headerArea .headerTop .headerTopLeft{padding-left:0} #headerArea.cardMember.typeJal .headerTop .headerTopLeft{align-items:flex-start;flex-direction:column} #headerArea .headerTop .headerTopLeft > a{width:inherit;padding:0;margin-right:13px} #jacard #headerArea .headerTop .headerTopLeft img{width:auto} #jacard #headerArea .headerTop .corpLogo > a > img{width:302px;margin-right:13px;padding:0;vertical-align:middle} #headerArea.amex .headerTop .headerTopLeft > a > img{width:auto} #headerArea .headerTop .headerTopLeft > img{width:120px} #headerArea.simple02 .headerTop .headerTopLeft > img{width: auto;padding: 0} #headerArea.cardMember.typeJal .headerTop > .inner{align-items:center} #headerArea.cardMember.typeJal .headerTop .headerTopLeft > .headerTopLeftInner > a{width:inherit;padding:0;margin-right:13px} #headerArea.cardMember.typeJal .headerTop .headerTopLeft > .headerTopLeftInner > a > img{width:302px} #headerArea.cardMember.typeJal .headerTop .headerTopLeft > .headerTopLeftInner > img.corpLogoImg{width:150px;margin-right:13px} #headerArea.cardMember.typeJal .headerTop .headerTopLeft > .headerTopLeftInner > img.jalcardLogoImg{width:174px} #headerArea.cardMember.typeJal .headerTop .headerTopLeft > .logoText{margin-top:5px;font-size:.714rem;color:#363636} #headerArea .headerTop .headerTopRight{padding-right:0} #headerArea .headerTop .headerTopRight .corpLogo{text-align:center} #headerArea .headerTop .headerTopRight .corpLogo > img{width:170px} #headerArea.amex .headerTop .headerTopRight .corpLogo > img{width:279px} #headerArea.cardMember.typeJal .headerTop .headerTopRight .corpLogo > img{width:127px} #headerArea .headerTop .headerTopRight .corpLogo > .logoText{margin-top:5px;font-size:10px;color:#363636} /* headerMid */ #headerArea .headerMid{width:100%;background-color:#EFEEEE;position:relative;z-index:3} #headerArea .headerMid > .inner{display:flex;width:1280px;margin:0 auto;justify-content:space-between;height:48px;padding:0 80px} #headerArea .headerMid .navLeft{display:flex;height:100%} #headerArea .headerMid .navLeft > .item{padding-top:8px} #headerArea .headerMid .navLeft > .item > .btn{display:flex;align-items:center;height:100%;padding:8px 0;font-size:13px;font-weight:bold;color:#333;line-height:1.5;border-top-left-radius:3px;border-top-right-radius:3px;white-space:nowrap} #headerArea .headerMid .navLeft > .item > .btn.is-current{color:#EB4741;background-color:#fff} #headerArea .headerMid .navLeft > .item > .btn > span{padding:0 19px;border-right:1px solid #cfcfcf;transition:color .3s ease-in} #headerArea .headerMid .navLeft > .item > .btn.loan span{padding:0 14px} #headerArea .headerMid .navLeft > .item:first-child > .btn > span{border-left:1px solid #cfcfcf} #headerArea .headerMid .navLeft > .item > .btn.is-current > span{border-right:none} #headerArea .headerMid .navLeft > .item:first-child > .btn.is-current > span{border-left:none} #headerArea .headerMid .navRight{display:flex;align-items:center;height:100%;padding-top:8px} #headerArea .headerMid .navRight > .item:not(:first-child){margin-left:16px} #headerArea .headerMid .navRight > .item > .btn{font-size:12px;color:#666;line-height:1.66} #headerArea .headerMid .navLeft > .item > .btn:hover > span,#headerArea .headerMid .navRight > .item > .btn:hover,#headerArea .headerMid .navRight > .item.search > .txt:hover{color:#e60000} #headerArea .headerMid .navRight > .item.search{padding-left:15px;border-left:1px solid #cfcfcf;font-size:0;} #headerArea .headerMid .navRight > .item.search > .btn{display:inline-block;width:19px;min-width:19px;vertical-align:middle;cursor:pointer} #headerArea .headerMid .navRight > .item.search > .btn > img{width:19px;min-width:19px;} #headerArea .headerMid .navRight > .item.search > .txt{display:inline-block;padding-left:5px;color:#666;font-size:12px;vertical-align:middle;cursor:pointer} /* headerMemberBlock */ #headerArea .headerMemberBlock:after{display:none} #headerArea .headerMemberBlock > .inner{width:1280px;padding:15px 80px} #headerArea .headerMemberBlock > .inner > .headerMenberInfo{width:80%} #headerArea.typeMufg .headerMemberBlock > .inner > .headerMenberInfo .cardLogo img{width:45px} #headerArea.typeNicos .headerMemberBlock > .inner > .headerMenberInfo .cardLogo img{width:54px} #headerArea.typeDc .headerMemberBlock > .inner > .headerMenberInfo .cardLogo img{width:39px} #headerArea.typeAmex .headerMemberBlock > .inner > .headerMenberInfo .cardLogo img{width:37px} #headerArea.typeJa .headerMemberBlock > .inner > .headerMenberInfo .cardLogo img{width:70px} #headerArea .headerMemberBlock > .inner > .headerMenberInfo .memberTitle{font-size:1.58rem} #headerArea .headerMemberBlock > .inner > .headerMenberInfo > .btn01{display:flex;align-items:center;justify-content:center;width:100%;max-width:225px;min-height:40px;margin-left:18px;padding:10px 23px 10px 30px;background-color:#fff;border-radius:6px;box-shadow:0 1px 2px 0 rgba(0,0,0,.4);position:relative} #headerArea .headerMemberBlock > .inner > .headerMenberInfo > .btn01 > .inner{display:inline-block;padding:2px 0} #headerArea .headerMemberBlock > .inner > .headerMenberInfo > .btn01.typeArrow:before{content:'';display:block;width:8px;height:8px;margin-top:-4px;border-top:1px solid #E60000;border-right:1px solid #E60000;position:absolute;top:50%;left:15px;transform:rotate(45deg)} #headerArea .headerMemberBlock > .inner > .headerMenberInfo > .btn01.typeArrow:hover{box-shadow:0 3px 9px 0 rgba(0,0,0,0.25)} #headerArea .headerMemberBlock > .inner > .headerMenberInfo > .btn01.typeArrow:hover:before{-webkit-animation:btnArrowToRight .3s linear;animation:btnArrowToRight .3s linear} #headerArea.cardMember.typeAmex .headerMemberBlock > .inner > .headerMenberInfo > .btn01.typeArrow:before{border-top:1px solid #002663;border-right:1px solid #002663} #headerArea.cardMember.typeJa .headerMemberBlock > .inner > .headerMenberInfo > .btn01.typeArrow:before{border-top:1px solid #006335;border-right:1px solid #006335} #headerArea.cardMember.typeJal .headerMemberBlock > .inner > .headerMenberInfo > .btn01.typeArrow:before{border-top:1px solid #C00;border-right:1px solid #C00} #headerArea .headerMemberBlock > .inner > .btn02{display:flex;align-items:center;justify-content:center;width:100%;max-width:185px;min-height:40px;padding:8px 23px 8px 30px;background-color:#E60000;border-radius:6px;box-shadow:0 1px 2px 0 rgba(0,0,0,.4);position:relative;transition:color .3s,background-color .3s;border:2px solid #E60000} #headerArea.cardMember.typeAmex .headerMemberBlock > .inner > .btn02{background-color:#002663;border-color:#002663} #headerArea.cardMember .headerMemberBlock > .inner > .btn02:hover,#headerArea.cardMember.typeAmex .headerMemberBlock > .inner > .btn02:hover,#headerArea.cardMember.typeJa .headerMemberBlock > .inner > .btn02:hover{background-color:#fff} #headerArea.cardMember.typeJa .headerMemberBlock > .inner > .btn02{background-color:#006335;border-color:#006335} #headerArea.cardMember.typeJal .headerMemberBlock > .inner > .btn02{background-color:#C00} #headerArea .headerMemberBlock > .inner > .btn02 > .inner{display:inline-block;padding:2px 0;font-size:1.14286rem;font-weight:bold;color:#fff} #headerArea.cardMember .headerMemberBlock > .inner > .btn02:hover > .inner{color:#E60000} #headerArea.cardMember.typeAmex .headerMemberBlock > .inner > .btn02:hover > .inner{color:#002663} #headerArea.cardMember.typeJa .headerMemberBlock > .inner > .btn02:hover > .inner{color:#006335} #headerArea .headerMemberBlock > .inner > .btn02.typeArrow:before{content:'';display:block;width:8px;height:8px;margin-top:-4px;border-top:1px solid #fff;border-right:1px solid #fff;position:absolute;top:50%;left:13px;transform:rotate(45deg)} #headerArea .headerMemberBlock > .inner > .btn02.typeArrow:hover:before{-webkit-animation:btnArrowToRight .3s linear;animation:btnArrowToRight .3s linear;border-color:#E60000} #headerArea.cardMember.typeAmex .headerMemberBlock > .inner > .btn02.typeArrow:hover:before{border-color:#002663} #headerArea.cardMember.typeJa .headerMemberBlock > .inner > .btn02.typeArrow:hover:before{border-color:#006335} /* headerBtm */ #headerArea .headerBtm{display:none;width:100%;background-color:#fff;border-bottom:1px solid #DBDBDB;position:relative;z-index:4} #headerArea .headerBtm.is-open{display:block} #headerArea .headerBtm.is-current{display:block} #headerArea .headerBtm.is-search{display:block;width:100%;position:absolute;top:0;z-index:3;opacity:0;visibility:hidden;transition:top .5s,opacity .8s} #headerArea .headerBtm.is-search.is-open{top:80px;opacity:1;visibility:visible} #headerArea.typeCmn .headerBtm.is-search.is-open,#headerArea.cardMember .headerBtm.is-search.is-open{z-index:5} #headerArea .headerBtm > .inner{width:1280px;margin:0 auto;padding:13px 80px} #headerArea .headerBtm.nav > .inner{padding:13px 80px} #headerArea.cardMember .headerBtm.nav > .inner{padding:20px 80px} #headerArea.cardMember .headerBtm.nav > .inner form[name=search_form] {display: none;} #headerArea .headerBtm .hCloseBtn{width:26px;height:26px;cursor:pointer} #headerArea .headerBtm .hCloseBtn > .inner{display:block;width:100%;height:100%;position:relative;font-size:0} #headerArea .headerBtm .hCloseBtn > .inner:before,#headerArea .headerBtm .hCloseBtn > .inner:after{content:'';display:block;width:36px;height:2px;margin-top:-1px;margin-right:-13px;background-color:#909090;position:absolute;top:50%;right:50%} #headerArea .headerBtm .hCloseBtn > .inner:before{transform:rotate(-45deg)} #headerArea .headerBtm .hCloseBtn > .inner:after{transform:rotate(45deg)} #headerArea .headerBtm.is-search > .inner{margin-top:80px;padding:24px 15%;position:relative;opacity:0;transition:margin 1s,opacity 1s} #headerArea .headerBtm.is-search.is-open > .inner{margin-top:0;opacity:1} #headerArea .headerBtm.is-search .hCloseBtn{position:absolute;margin-top:-13px;top:50%;right:6%} /* headerBtm for allTop*/ #headerArea.allTop .headerBtm [class*="Btn"].typeArrow:hover:before, #headerArea.allTop [class*="Block"] [class*="Box"] [class*="Box"] .item [class*="Btn"].typeArrow:hover:before{border-top:1px solid #fff;border-right:1px solid #fff} #headerArea.allTop .headerBtm [class*="Btn"].typeApply:hover .inner,#headerArea.allTop [class*="Block"] [class*="Box"] [class*="Box"] .item [class*="Btn"].typeApply:hover .inner{background:url(/cmn/type2021/img/bace/icon_smartphone_02.png) no-repeat left center} #headerArea.allTop .headerBtm .nomalBtn:hover{box-shadow:0 3px 9px 0 rgba(0,0,0,0.25)} #headerArea.allTop .headerBtm .colorBtn02:hover{background-color:#fff;color:#E60000;box-shadow:0 3px 9px 0 rgba(0,0,0,0.25)} #headerArea.allTop .headerBtm .colorBtn02.typeLogin:hover > .inner{background:url(/cmn/type2021/img/bace/icon_login_01.png) no-repeat left center;background-size:21px 20px} #headerArea.allTop .headerBtm .colorFlameBtn02, #headerArea.allTop [class*="Block"] [class*="Box"] [class*="Box"] .item .colorFlameBtn02.typeArrow{padding:13px 20px 13px 35px} #headerArea.allTop .headerBtm .colorFlameBtn02:hover,#headerArea.allTop [class*="Block"] [class*="Box"] [class*="Box"] .item .colorFlameBtn02:hover{background:#E00000;color:#fff;box-shadow:0 3px 9px 0 rgba(0,0,0,0.25)} /* headerKeyWordBlock */ #headerArea .searchFormBoxWrap{width:100%;max-width:640px;margin:0 auto} .searchFormBoxWrap .wrapKeyWord .searchKeyWordWrap .searchKey{padding:0 15px} /* headerGnavCnt */ #headerArea .headerGnavCnt > .inner{display:flex;justify-content:space-between} #headerArea .headerGnavCnt .gnavList{display:flex} #headerArea .headerGnavCnt .gnavList > .list,#headerArea .headerGnavCnt .gnavList > .list > .inner{height:100%} #headerArea .headerGnavCnt .gnavList > .list:not(:first-child){margin-left:35px;border-top:none} #headerArea .headerGnavCnt .gnavTitle{display:flex;align-items:center;width:auto;min-height:inherit;height:100%;padding:0;font-size:15px;cursor:pointer} #headerArea .headerGnavCnt .gnavTitle:before{display:none} #headerArea .headerGnavCnt .gnavTitle.is-menu{padding:0} #headerArea .headerGnavCnt .gnavTitle.is-member{padding:8px 17px 8px 54px;font-size:16px;color:#E60000;border:2px solid #E60000;border-radius:6px;background:#fff url(/cmn/type2021/img/bace/icon_card_01.png) no-repeat left 17px center;background-size:27px 20px} #headerArea .headerGnavCnt .gnavTitle.is-menu:before,#headerArea .headerGnavCnt .gnavTitle.is-menu:after,#headerArea .headerGnavCnt .gnavTitle.is-member:before,#headerArea .headerGnavCnt .gnavTitle.is-member:after{display:none;transition:unset} #headerArea .headerGnavCnt .gnavTitle.is-member:hover{color:#fff;background:#E60000 url(/cmn/type2021/img/bace/icon_card_02.png) no-repeat left 17px center} #headerArea .headerGnavCnt .gnavTitle > .inner{display:block;transition:color .3s} #headerArea .headerGnavCnt .is-current .gnavTitle > .inner{position:relative} #headerArea .headerGnavCnt .gnavTitle.is-member:hover > .inner:before{border-top:1px solid #fff;border-right:1px solid #fff} #headerArea .headerGnavCnt .gnavTitle.is-menu > .inner,#headerArea .headerGnavCnt .gnavTitle.is-member > .inner{position:relative;padding-right:17px;transition:color .3s} #headerArea .headerGnavCnt .gnavTitle.is-menu > .inner:before,#headerArea .headerGnavCnt .gnavTitle.is-member > .inner:before{content:'';display:block;width:8px;height:8px;margin-top:-6px;border-top:1px solid #E60000;border-right:1px solid #E60000;position:absolute;top:50%;right:2px;transform:rotate(135deg);transition:transform .3s ease} #headerArea.cardMember.typeAmex .headerGnavCnt .gnavTitle.is-menu > .inner:before,#headerArea.cardMember.typeAmex .headerGnavCnt .gnavTitle.is-member > .inner:before{border-top:1px solid #002663;border-right:1px solid #002663} #headerArea.cardMember.typeJa .headerGnavCnt .gnavTitle.is-menu > .inner:before,#headerArea.cardMember.typeJa .headerGnavCnt .gnavTitle.is-member > .inner:before{border-top:1px solid #006335;border-right:1px solid #006335} #headerArea.cardMember.typeJal .headerGnavCnt .gnavTitle.is-menu > .inner:before,#headerArea.cardMember.typeJal .headerGnavCnt .gnavTitle.is-member > .inner:before{border-top:1px solid #C00;border-right:1px solid #C00} #headerArea .headerGnavCnt .gnavTitle.is-menu:after,#headerArea .headerGnavCnt .gnavTitle.is-member:after,#headerArea .headerGnavCnt .gnavTitle.is-menu:before,#headerArea .headerGnavCnt .gnavTitle.is-member:before{content:'';display:block;width:0;height:0;border-style:solid;background-color:rgba(255,255,255,0);position:absolute;top:50px;right:inherit;left:50%;opacity:0;visibility:hidden;pointer-events:none} #headerArea .headerGnavCnt .gnavTitle.is-menu:hover > .inner{color:#E60000} #headerArea.cardMember.typeAmex .headerGnavCnt .gnavTitle.is-menu:hover > .inner{color:#002663} #headerArea.cardMember.typeJa .headerGnavCnt .gnavTitle.is-menu:hover > .inner{color:#006335} #headerArea.cardMember.typeJal .headerGnavCnt .gnavTitle.is-menu:hover > .inner{color:#C00} #headerArea .headerGnavCnt .gnavTitle.is-menu:hover > .inner:before,#headerArea .headerGnavCnt .gnavTitle.is-member:hover > .inner:before{margin-top:-3px;transform:rotate(-45deg)} #headerArea .headerGnavCnt .gnavTitle.is-open.is-menu:after,#headerArea .headerGnavCnt .gnavTitle.is-open.is-member:after,#headerArea .headerGnavCnt .gnavTitle.is-open.is-menu:before,#headerArea .headerGnavCnt .gnavTitle.is-open.is-member:before{top:100%;opacity:1;visibility:visible} #headerArea .headerGnavCnt .gnavTitle.is-menu:after{margin:4px -10px;border-width:0 5px 10px;border-color:transparent transparent #F8F8F8} #headerArea.cardMember .headerGnavCnt .gnavTitle.is-menu:after{margin:11px -10px} #headerArea .headerGnavCnt .gnavTitle.is-menu:before{margin:3px -11px;border-width:0 6px 11px;border-color:transparent transparent #DBDBDB} #headerArea.cardMember .headerGnavCnt .gnavTitle.is-menu:before{margin:10px -11px} #headerArea .headerGnavCnt .gnavTitle.is-member:after{margin:6px -10px;border-width:0 5px 10px;border-color:transparent transparent #F8F8F8} #headerArea .headerGnavCnt .gnavTitle.is-member:before{margin:5px -11px;border-width:0 6px 11px;border-color:transparent transparent #DBDBDB} #headerArea .headerGnavCnt .gnavTitle.is-open.is-menu > .inner{position:relative;color:#e60000} #headerArea.cardMember.typeAmex .headerGnavCnt .gnavTitle.is-open.is-menu > .inner{color:#002663} #headerArea.typeAmex .headerGnavCnt .gnavTitle:hover > .inner{color:#002663} #headerArea.cardMember.typeJa .headerGnavCnt .gnavTitle.is-open.is-menu > .inner{color:#006335} #headerArea.cardMember.typeJal .headerGnavCnt .gnavTitle.is-open.is-menu > .inner{color:#C00} #headerArea .headerGnavCnt .gnavTitle.is-open.is-menu:hover > .inner:before{margin-top:-6px;transform:rotate(135deg)} #headerArea .headerGnavCnt .gnavTitle.is-open.is-member{color:#fff;background:#E60000 url(/cmn/type2021/img/bace/icon_card_02.png) no-repeat left 17px center} #headerArea .headerGnavCnt .gnavTitle.is-open.is-member > .inner:before,#headerArea .headerGnavCnt .gnavTitle.is-open.is-member:hover > .inner:before{border-top:1px solid #fff;border-right:1px solid #fff;margin-top:-3px;transform:rotate(-45deg)} #headerArea .headerGnavCnt .gnavTitle.is-current.is-menu > .inner,#headerArea .headerGnavCnt .is-current .gnavTitle > .inner{color:#e60000} #headerArea.typeAmex .headerGnavCnt .gnavTitle.is-current.is-menu > .inner,#headerArea.typeAmex .headerGnavCnt .is-current .gnavTitle > .inner{color:#002663} #headerArea.typeJa .headerGnavCnt .gnavTitle.is-current.is-menu > .inner,#headerArea.typeJa .headerGnavCnt .is-current .gnavTitle > .inner{color:#006335} #headerArea .headerGnavCnt .gnavTitle.is-current.is-menu > .inner:after,#headerArea .headerGnavCnt .is-current .gnavTitle > .inner::after{content:"";position:absolute;bottom:-20px;left:0;display:block;width:100%;height:3px;background:#e60000} #headerArea:not(.cardMember) .headerGnavCnt .gnavTitle.is-current.is-menu > .inner:after,#headerArea:not(.cardMember) .headerGnavCnt .is-current .gnavTitle > .inner::after{bottom:-24px} #headerArea .headerGnavCnt .gnavTitle.is-current.is-open.is-menu > .inner:after{display:none} #headerArea.cardMember.typeAmex .headerGnavCnt .gnavTitle.is-open.is-menu > .inner:after,#headerArea.typeAmex .headerGnavCnt .gnavTitle.is-current.is-menu > .inner:after,#headerArea.typeAmex .headerGnavCnt .is-current .gnavTitle > .inner::after{background:#002663} #headerArea.cardMember.typeJa .headerGnavCnt .gnavTitle.is-open.is-menu > .inner:after,#headerArea.typeJa .headerGnavCnt .gnavTitle.is-current.is-menu > .inner:after,#headerArea.typeJa .headerGnavCnt .is-current .gnavTitle > .inner::after{background:#006335} #headerArea.cardMember.typeJal .headerGnavCnt .gnavTitle.is-open.is-menu > .inner:after{background:#C00} #headerArea .headerGnavCnt .gnavContent{width:100%;height:0;margin-top:1px;position:absolute;top:100%;left:0;transition:height .3s ease-in} #headerArea .headerGnavCnt .gnavContent.is-open{min-height:500px;height:35.71rem;visibility:visible;display:inline-table} #headerArea.cardMember.typeAmex .headerGnavCnt .gnavContent.is-open{height:550px} #headerArea.cardMember.typeJa .headerGnavCnt .gnavContent.is-open{height:550px} #headerArea .headerGnavCnt .is-member + .gnavContent.is-open{height:400px} #headerArea .headerGnavCnt .gnavContent > .inner{position:relative;display:none;width:1280px;margin:80px auto 0;padding:40px 136px} #headerArea .headerGnavCnt .gnavContent.is-open > .inner{display:block;margin-top:0;animation-name:menuin;animation-duration:.8s;animation-timing-function:ease-in} @keyframes menuin { 0%{opacity:0;margin-top:30px} 25%{opacity:0} 50%{opacity:0} 75%{opacity:.6} 100%{opacity:1;margin-top:0} } /* headerGnavCnt for allTop*/ #headerArea.allTop .headerGnavCnt .btnWrap{display:table} #headerArea.allTop .headerGnavCnt .btnWrap .gnavWrap{display:table-cell;padding-left:8px} #headerArea.allTop .headerGnavCnt .btnWrap .gnavWrap:first-child{padding-left:0} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle{display:flex;align-items:center;width:204px;min-height:inherit;height:100%;padding:0;text-align:center;font-size:15px;cursor:pointer} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle:before{content:'';display:block;width:0;height:0;margin:5px -11px;border-style:solid;border-width:0 6px 11px;border-color:transparent transparent #E00000;background-color:rgba(255,255,255,0);position:absolute;top:50px;right:inherit;left:50%;opacity:0;visibility:hidden;pointer-events:none;transform:rotate(0)} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle:after{content:'';display:block;width:0;height:0;margin:6px -10px;border-style:solid;border-width:0 5px 10px;border-color:transparent transparent #F8F8F8;background-color:rgba(255,255,255,0);position:absolute;top:50px;right:inherit;left:50%;opacity:0;visibility:hidden;pointer-events:none} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.is-open:before{top:100%;opacity:1;visibility:visible} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.is-open:after{transform:rotate(0)} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.is-open:after{margin:8px -10px;border-width:0 5px 10px;border-color:transparent transparent #F8F8F8;top:100%;opacity:1;visibility:visible;z-index:10} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle > .inner{position:relative;padding-right:17px} #headerArea.allTop .headerGnavCnt .pcOnly .gnavContent{margin-top:0} #headerArea.allTop .headerGnavCnt .pcOnly .gnavContent.is-open{border-top:2px solid #E00000} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorFlameBtn01{padding:8px 17px 8px 54px;font-size:16px;color:#E60000;border:2px solid #E60000;border-radius:6px} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorFlameBtn01:hover{color:#fff;border:2px solid #E60000} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorFlameBtn01.is-open{color:#fff} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorFlameBtn01.is-member{background:#fff url(/cmn/type2021/img/bace/icon_card_01.png) no-repeat left 17px center;background-size:27px 20px} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorFlameBtn01.is-member:hover{background:#E60000 url(/cmn/type2021/img/bace/icon_card_02.png) no-repeat left 17px center} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorFlameBtn01.is-member.is-open{background:#E60000 url(/cmn/type2021/img/bace/icon_card_02.png) no-repeat left 17px center} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorFlameBtn01 > .inner:before{content:'';display:block;width:8px;height:8px;margin-top:-6px;border-top:1px solid #E60000;border-right:1px solid #E60000;position:absolute;top:50%;right:2px;transform:rotate(135deg);transition:transform .3s ease} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorFlameBtn01:hover > .inner:before{border-top:1px solid #fff;border-right:1px solid #fff;margin-top:-3px;transform:rotate(-45deg)} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorFlameBtn01.is-open > .inner:before{border-top:1px solid #fff;border-right:1px solid #fff;margin-top:-3px;transform:rotate(-45deg)} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorBtn01{padding:8px 17px 8px 54px;font-size:16px;color:#fff;border:2px solid #E60000;border-radius:6px;background:#E60000} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorBtn01:hover{color:#E60000;border:2px solid #E60000;background:#fff} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorBtn01.is-open{color:#E60000;background:#fff} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorBtn01.is-login{background:#E60000 url(/cmn/type2021/img/bace/icon_login_02.png) no-repeat left 17px center;background-size:21px 20px} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorBtn01.is-login:hover{background:#fff url(/cmn/type2021/img/bace/icon_login_01.png) no-repeat left 17px center;background-size:21px 20px} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorBtn01.is-login.is-open{background:#fff url(/cmn/type2021/img/bace/icon_login_01.png) no-repeat left 17px center;background-size:21px 20px} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorBtn01 > .inner:before{content:'';display:block;width:8px;height:8px;margin-top:-6px;border-top:1px solid #fff;border-right:1px solid #fff;position:absolute;top:50%;right:2px;transform:rotate(135deg);transition:transform .3s ease} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorBtn01:hover > .inner:before{margin-top:-3px;border-top:1px solid #E60000;border-right:1px solid #E60000;transform:rotate(-45deg)} #headerArea.allTop .headerGnavCnt .pcOnly .gnavTitle.colorBtn01.is-open > .inner:before{margin-top:-3px;border-top:1px solid #E60000;border-right:1px solid #E60000;transform:rotate(-45deg)} /* memberBlock */ #headerArea .memberBlock > :not(:first-child){margin-top:0} #headerArea .memberBlock{display:flex;justify-content:space-between;width:91%;margin:0 auto} #headerArea .memberBlock .memberBox{width:65%;padding:24px 40px 29px} #headerArea .memberBlock .memberBox:nth-child(2){width:33%;margin-left:2%} #headerArea .memberBlock .memberBox > .btnBox{display:flex;justify-content:center} #headerArea .memberBlock .memberBox > .btnBox > .item{max-width:220px} #headerArea .memberBlock .memberBox > .btnBox > .item:not(:first-child){margin:0 0 0 30px} #headerArea .memberBlock .memberBox > .btnBox > .item > .btn{height:50px;min-height:inherit;padding:13px 35px} #headerArea .memberBlock .memberBox > .btnBox > .item > .btn:hover{box-shadow:0 3px 9px 0 rgba(0,0,0,0.25)} #headerArea .memberBlock .memberBox > .btnBox > .item > .btn.typeLogin:hover{background-color:#fff;color:#E60000} #headerArea .memberBlock .memberBox > .btnBox > .item > .btn.typeLogin:hover > .inner{background:url(/cmn/type2021/img/bace/icon_login_02_w.png) no-repeat left center;background-size:21px 20px} #headerArea .memberBlock .memberBox > .btnBox > .item > .btn.typeArrow:hover:before{-webkit-animation:btnArrowToRight .3s linear;animation:btnArrowToRight .3s linear} /* memberBlock for allTop */ #headerArea.allTop .memberBlock .memberBox{width:49%;padding:24px 40px 29px} #headerArea.allTop .memberBlock .memberBox:nth-child(2){width:49%;margin-left:2%} /* loginBlock for allTop */ #headerArea.allTop .loginBlock > :not(:first-child){margin-top:0} #headerArea.allTop .loginBlock{display:flex;justify-content:space-between;width:91%;margin:0 auto} #headerArea.allTop .loginBlock .loginBox{width:49%;padding:24px 40px 29px} #headerArea.allTop .loginBlock .loginBox:nth-child(2){width:49%;margin-left:2%} #headerArea.allTop .loginBlock .loginBox > .btnBox{display:flex;justify-content:center} #headerArea.allTop .loginBlock .loginBox > .btnBox > .item{max-width:220px} #headerArea.allTop .loginBlock .loginBox > .btnBox > .item:not(:first-child){margin:0 0 0 30px} /* gnavContent parts */ #headerArea .hArrowBtn01{font-weight:bold;text-align:left} #headerArea .gnavHeadingA01{margin-bottom:20px;padding:0 36px 10px 0;position:relative} #headerArea .gnavHeadingA01 > .hCloseBtn{position:absolute;top:0;right:0} #headerArea .gnavHeadingA01 > .title{font-size:1.714rem} #headerArea .gnavHeadingA01 > .title .hArrowBtn01:before{width:11px;height:11px} #headerArea .gnavHeadingB01{margin:36px 0 38px;padding-bottom:5px;font-size:1.214rem;border-bottom:1px solid #CFCFCF} #headerArea .headerGnavCnt .gnavColumn2Wrap01{display:flex;justify-content:space-between} #headerArea .headerGnavCnt .gnavColumn2Wrap01 .columnBlock{width:50%;padding-right:30px} #headerArea .headerGnavCnt .gnavColumn2Wrap01 .columnBlock:nth-child(2){border-left:1px solid #CECECE;padding-right:0;padding-left:30px} #headerArea .gnavCntBlock01 > .content{max-width:940px;margin:0 auto} #headerArea .gnavCardBlock01 > .title{margin-bottom:30px} #headerArea .gnavCardBlock01 > .title > .inner{padding:11px 0 2px 46px;background:url(/cmn/type2021/img/bace/icon_rmdcard_01.png) no-repeat left center;background-size:34px 25px} #headerArea .gnavLinkList01{justify-content:flex-start} #headerArea .gnavLinkList01.item2:before,#headerArea .gnavLinkList01.item6:before{content:"";display:block;width:100%;max-width:192px;margin-left:20px;order:1} #headerArea .gnavLinkList01.item2:after,#headerArea .gnavLinkList01.item6:after{content:"";display:block;width:100%;max-width:192px;margin-left:20px} #headerArea .gnavLinkList01.item3:after,#headerArea .gnavLinkList01.item7:after{content:"";display:block;width:100%;max-width:192px;margin-left:20px} #headerArea .gnavLinkList01 > .item{width:100%;max-width:237px;margin:0} #headerArea .headerGnavCnt .gnavColumn2Wrap01 .gnavLinkList01{justify-content:space-between} #headerArea .headerGnavCnt .gnavColumn2Wrap01 .gnavLinkList01 > .item{max-width:190px} #headerArea .gnavCardBlock01 > .title + .content > .gnavLinkList01{padding:0 30px;justify-content:space-between} #headerArea .gnavCardBlock01 > .title + .content > .gnavLinkList01 > .item{max-width:190px} #headerArea .gnavLinkList01 > .item,#headerArea .gnavLinkList01 > .item:nth-of-type(2n+1){margin-left:20px} #headerArea .gnavLinkList01 > .item:nth-child(4n+1){margin-left:0} #headerArea .gnavLinkList01 > .item:nth-child(n+5){margin-top:30px} #headerArea .gnavLinkList01 > .item > .link + .link{margin-top:10px} #headerArea .gnavLinkList01 > .item > .link > :not(:first-child){margin-top:13px} #headerArea .gnavLinkList01 > .item > .link > .txtBox > :not(:first-child){margin-top:5px} #headerArea .gnavLinkList01 > .item > .link > .img{max-width:inherit} #headerArea .gnavLinkList01 > .item > .link > .txtBox > .title{font-size:1.143rem} #headerArea .gnavLinkList01 > .item > .link > .txtBox > .txt{display:block} #headerArea .gnavLinkList02{display:flex;justify-content:space-between} #headerArea .gnavLinkList02 > .item{width:100%;max-width:227px} #headerArea .gnavLinkList02 > .item:not(:first-child){margin:0 0 0 20px} #headerArea .gnavLinkList02 > .item > .link{display:block} #headerArea .gnavLinkList02 > .item > .link > .img{display:inline-block} #headerArea .gnavLinkList02 > .item > .link > :not(:first-child){margin-top:15px} #headerArea .gnavLinkList02 > .item > .link > .txtBox > :not(:first-child){margin-top:5px} #headerArea .gnavLinkList02 > .item > .link > .txtBox > .title{font-size:1.143rem} #headerArea .gnavLinkList02 > .item > .link .hArrowBtn01:before{border-color:#E60000} #headerArea .gnavLinkList03{letter-spacing:-.5em;margin:-20px 0 0 -7.5%} #headerArea .gnavLinkList03 > .item{display:inline-block;margin:20px 0 0 7.5%;font-size:1.143rem;letter-spacing:normal;vertical-align:top} #headerArea .gnavLinkList03 > .item:not(:first-child){margin-top:20px} #headerArea .gnavLinkList03 > .item .hArrowBtn01:before{border-color:#E60000} /* hover */ #headerArea a,#headerArea .headerBtm .hCloseBtn > .inner,#headerArea .headerMid .navRight > .item.search,.searchFormBoxWrap .headerSearchBtn01{transition:opacity .25s ease-in,color .3s,box-shadow .3s} #headerArea a:hover,#headerArea .headerBtm .hCloseBtn > .inner:hover,#headerArea .headerMid .navRight > .item.search:hover{color:#e60000} #headerArea.typeAmex a:hover,#headerArea.typeAmex .headerBtm .hCloseBtn > .inner:hover,#headerArea.typeAmex .headerMid .navRight > .item.search:hover{color:#002663} #headerArea.typeJa a:hover,#headerArea.typeJa .headerBtm .hCloseBtn > .inner:hover,#headerArea.typeJa .headerMid .navRight > .item.search:hover{color:#006335} #headerArea.typeJal a:hover,#headerArea.typeJal .headerBtm .hCloseBtn > .inner:hover,#headerArea.typeJal .headerMid .navRight > .item.search:hover{color:#C00} /************************************************ footer ************************************************/ #pageTopArea,#pageTopArea.fixedNavPage{bottom:40px} #pageTopArea .pageTopBtn .btn::before{transition:transform .25s ease-in,margin .25s ease-in,border-color .3s} #pageTopArea .pageTopBtn .btn:hover::before{border-color:#e60000;-webkit-animation:pageopArrow .3s ease-in;animation:pageopArrow .3s ease-in} #amex #pageTopArea .pageTopBtn .btn:hover::before{border-color:#9f0100} @keyframes pageopArrow { 0%{-webkit-transform:translateY(0) rotate(-45deg) scale(1,1);transform:translateY(0) rotate(-45deg) scale(1,1);opacity:1} 33%{-webkit-transform:translateY(-10px) rotate(-45deg) scale(0.1,0.1);transform:translateY(-10px) rotate(-45deg) scale(0.1,0.1);opacity:0} 50%{-webkit-transform:translateY(10px) rotate(-45deg) scale(0.1,0.1);transform:translateY(10px) rotate(-45deg) scale(0.1,0.1);opacity:0} 100%{-webkit-transform:translateY(0) rotate(-45deg) scale(1,1);transform:translateY(0) rotate(-45deg) scale(1,1);opacity:1} } #footerArea .footerPcNone{display:none} #footerArea{margin-top:60px} #footerArea .footerTop > .inner{width:1280px;margin:0 auto;padding:40px 80px} /* footerAcdBlock */ #footerArea .footerAcdBlock > .item > .title{padding:12px 70px 12px 0;font-size:1.14286rem;cursor:pointer;transition:color .3s} #footerArea .footerAcdBlock > .item > .title:before{width:50px;transition:background-color .3s} #footerArea .footerAcdBlock > .item > .title > .inner:before,#footerArea .footerAcdBlock > .item > .title > .inner:after{right:17px} #footerArea .footerAcdBlock > .item > .content{padding:0;background-color:inherit} #footerArea .footerAcdBlock > .item > .content.is-open{padding:20px 0;margin:0} #footerArea .footerAcdBlock > .item > .content > .title{font-size:1.14286rem;margin-bottom:37px} #footerArea .fInnerAcd2Wrap,#footerArea .fInnerAcd4Wrap{margin:0 -10px} #footerArea .fInnerAcd2Wrap{display:flex;flex-wrap:wrap} #footerArea .fInnerAcd2Wrap .fInnerAcdBox,#footerArea .fInnerAcd4Wrap .fInnerAcdBox{letter-spacing:-.5em} #footerArea .fInnerAcd2Wrap .fInnerAcdBox{letter-spacing:-.5em;width:50%} #footerArea .fInnerAcd2Wrap .fInnerAcdBox > .item,#footerArea .fInnerAcd4Wrap .fInnerAcdBox > .item{display:inline-block;margin-bottom:40px;padding:0 10px;letter-spacing:normal;vertical-align:top} #footerArea .fInnerAcd2Wrap .fInnerAcdBox > .item{width:50%} #footerArea .fInnerAcd4Wrap .fInnerAcdBox > .item{width:25%} #footerArea .fInnerAcdBox > .item{margin-top:0} #footerArea .fInnerAcdBox > .item > .title{display:table;width:100%;min-height:54px;padding-bottom:6px;font-size:1.14286rem} #footerArea .fInnerAcdBox > .item > .title.spAcdTit{padding-right:0} #footerArea .fInnerAcdBox > .item > .title.spAcdTit:before{display:none} #footerArea .fInnerAcdBox > .item > .title > .inner{display:table-cell;width:100%;vertical-align:middle} #footerArea .fInnerAcdBox > .item > .title.spAcdTit > .inner:before,#footerArea .fInnerAcdBox > .item > .title.spAcdTit > .inner:after{display:none} #footerArea .fInnerAcdBox > .item > .title .link{display:inline-block;padding-left:1em;position:relative} #footerArea .fInnerAcdBox > .item > .title .link:before{content:'';display:block;width:8px;height:8px;border-top:1px solid #E60000;border-right:1px solid #E60000;position:absolute;top:.4em;left:0;transform:rotate(45deg)} #footerArea .fInnerAcdBox > .item.footerImgicon > .title .link:before{content:'';display:block;width:8px;height:8px;border-top:1px solid #E60000;border-right:1px solid #E60000;position:absolute;top:calc(50% - .4em);left:0;transform:rotate(45deg)} #footerArea .fInnerAcdBox > .item > .content{display:block;padding:20px 0 0} /* footerNavBox */ #footerArea .footerNavBox{display:flex;justify-content:space-between;align-items:center;margin-bottom:42px;text-align:left} #footerArea .footerNavBox .footerLogo{display:block;width:284px;max-width:inherit;margin-bottom:0} #footerArea .footerNavBox .footerSns > .title{font-size:1.14286rem;margin-right:30px} #footerArea .footerNavBox .footerSns > .title > .link{transition: color .3s} #footerArea .footerNavBox .footerSns > .title > .link:hover{color: #e60000} #footerArea .footerNavBox .footerSns .snsList > .item{width:40px} #footerArea .footerNavBox .footerSns .snsList > .item:not(:first-child){margin-left:20px} #footerArea .footerMid > .inner{width:1280px;margin:0 auto;padding:27px 80px 40px} #footerArea .footerInnerLinkNavi{max-width:830px;margin-right:92px} #footerArea .footerInnerLinkNavi > .fLinkList01{margin:-20px 0 12px -30px} #footerArea .footerInnerLinkNavi > .fLinkList01 > .item{margin:20px 0 0 30px;font-size:1.143rem} #footerArea .footerInnerLinkNavi > .fLinkList02{margin:-1rem 0 0 -1.428rem;letter-spacing:-.5em} #footerArea .footerInnerLinkNavi > .fLinkList02 > .item{display:inline-block;margin:1rem 0 0 1.428rem;padding-left:1.428rem;letter-spacing:normal;vertical-align:top;position:relative} #footerArea .footerInnerLinkNavi > .fLinkList02 > .item:before{content:'';display:block;width:1px;height:1em;margin-top:-.5em;background-color:#333;position:absolute;top:50%;left:0} #footerArea .footerInnerLinkNavi .pmarkWrap{bottom:0;right:-87px} #footerArea .footerBtm > .inner{width:1280px;margin:0 auto;padding:17px 80px} #footerArea #copyright{font-size:.929rem;text-align:left} /* hover */ #footerArea .footerAcdBlock > .item > .content > .title > .link,#footerArea .fInnerAcdBox > .item > .title .link{transition:color .3s} #footerArea .footerAcdBlock > .item > .content > .title > .link:hover,#footerArea .fInnerAcdBox > .item > .title .link:hover{color:#e60000} #footerArea .footerInnerLinkNavi > .fLinkList01 > .item a{position:relative} #footerArea .fInnerNavList > .item a .inner, #footerArea .footerInnerLinkNavi > .fLinkList01 > .item a span, #footerArea .footerInnerLinkNavi > .fLinkList02 > .item a span{ background:linear-gradient(#333,#333) 100% 90%/0% 1px no-repeat; background-position-x:left; transition: background-size .4s cubic-bezier(.23,1,.32,1) 0s; } #footerArea .fInnerNavList > .item a:hover .inner, #footerArea .footerInnerLinkNavi > .fLinkList01 > .item a:hover span, #footerArea .footerInnerLinkNavi > .fLinkList02 > .item a:hover span{background-size:100% 1px;background-position:0 100%} #footerArea .footerInnerLinkNavi > .fLinkList02 > .item a::after{width:calc(100% - 19px);left:19px} #footerArea .footerAcdBlock > .item > .title:hover{color:rgba(0,0,0,0.7)} #footerArea .footerAcdBlock > .item > .title:hover::before{background:#fff}