/* メニュー */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: scroll;
  z-index: 201;
  transition: all .3s ease-in;
  visibility: hidden;
  opacity: 0;
}
.open nav {
  visibility: visible;
  opacity: 1;
}
.nav-wrap {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0 min(6.25%, 88px) 0;
display: flex;
align-items: center;
position: relative;
z-index: -1;
}
.nav-inner {
background: #f5f5f5;
width: 100%;
max-width: 1280px;
margin: 0 auto;
border-radius: 8px;
padding: 48px 80px 40px;
position: relative;
z-index: 10;
}
 
.menu-box{
display: flex;
justify-content: space-between;
} 
.menu-box.upper-box{
margin: 0 0 2%;
} 
.menu-box.middle-box{
margin: 0 0 2%;
} 
.menu-box.lower-box{
margin: 0 0;
} 
.menu-once{
width: 22.4%;
}
.menu-once-wide{
width: 48.2666%;
}
.lower-box .menu-once-wide{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.menu-once a,
.menu-once-wide a{
color: #001F6B;
}
.pr-box{
padding: 0 0 4px;
border-bottom: 1px solid rgba(0, 31, 107, 0.2);
}
.pr-box.add-cs-ajust{
position: relative;
}
.pr-box.add-ajust-lv{
margin: 0 0 34px;
padding: 0 0 31px;
}
.pr-box .cs-t3{
position: relative;
color: #B2B2B2;
height: 63px;
}
.pr-box .cs-t3::after{
position: absolute;
top: 30px;
left: 0;
content: 'Coming Soon';
font-size: 14px;
font-weight: 500;
}
.pr-box.add-lh{
padding: 16px 0 4px;
}
.lower-box .pr-box{
width: 100%;
height: 56px;
margin: 0 0 16px;
}
.pr-box.add-ajust{
margin: 0 0 34px;
}
.pr-box a,
.pr-box p,
.pr-box .cs-t2{
font-size: 18px;
font-weight: 700;
position: relative;
display: block;
color: #001F6B;
}
.pr-box .cs-t2{
color: #B2B2B2;
}
.pr-box .cs-t2::after{
position: absolute;
top: 0;
right: 0;
line-height: 36px;
content: 'Coming Soon';
font-size: 14px;
font-weight: 500;
}

.menu-once ul{
padding: 8px 0 0;
}
.menu-once ul li a{
font-weight: 500;
position: relative;
display: block;
}
.menu-once ul li .cs{
font-weight: 500;
height: 40px;
position: relative;
display: block;
color: #B2B2B2;
}
.menu-once ul li .cs::after{
position: absolute;
left: 0;
top: 21px;
font-size: 10px;
font-weight: 500;
content: 'Coming Soon';
}
.type-btn{
width: 48.2%;
height: 56px;
margin: 0 0 16px;
}
.type-btn a{
width: 100%;
height: 100%;
color: #fff;
padding: 0 0 0 16px;
display: flex;
align-items: center;
line-height: 1.2;
font-size: 16px;
font-weight: 500;
border-radius: 8px;
position: relative;
}
.type-btn a:hover{
color: #fff!important;
}
.type-btn a.btn-t1{
background: #df1443;
}
.type-btn a.btn-t2{
background: #DE7224;
font-size: 14px;
}
.type-btn a.btn-t3{
background: #368ED2;
font-size: 14px;
}
.type-btn a.btn-t4{
background: #001F6B;
}



.pr-box a .arrow,
.menu-once ul li a .arrow{
  overflow: hidden;
  position: absolute;
  right: 0;
  top:2px;
  width: 14px;
  height: 28px;
  margin: 0 auto;
  line-height: 1;
}
.pr-box a .arrow{
  top:8px;
}
.type-btn a .arrow{
  overflow: hidden;
  position: absolute;
  right: 16px;
  top:0;
  bottom: 0;
  width: 14px;
  height: 28px;
  margin: auto;
  line-height: 1;
}

.type-btn a .arrow:before,
.type-btn a .arrow:after,
.pr-box a .arrow:before,
.pr-box a .arrow:after,
.menu-once ul li a .arrow:before,
.menu-once ul li a .arrow:after{
  content: "→";
  position: absolute;
  top: 4px;
  right: 0;
  font-size: 14px;
font-weight: 500;
  animation-fill-mode: forwards;
  animation-duration: 0.6s;
}
.type-btn a .arrow:after,
.pr-box a .arrow:after,
.menu-once ul li a .arrow:after{
  transform: translateX(-100%);
  
}
.type-btn a:hover .arrow:before,
.pr-box a:hover .arrow:before,
.menu-once ul li a:hover .arrow:before{
  animation-name: transformRightLeft; /* 修正: hover時のアニメーションを指定 */
  animation-delay: 0s;
  opacity: 1;
  color: #E40046;
}
.type-btn a:hover .arrow:after,
.pr-box a:hover .arrow:after,
.menu-once ul li a:hover .arrow:after{
  animation-name: transformLeftRight; /* 修正: hover時のアニメーションを指定 */
  animation-delay: 0.2s;
  opacity: 1;
  color: #E40046;
}
.type-btn a:hover,
.pr-box a:hover,
.menu-once ul li a:hover{
color: #E40046;
transition: background-color 0.4s, color 0.4s;
}
.type-btn a:hover .arrow:after,
.type-btn a:hover .arrow:before{
  color: #fff;
}
.type-btn a:hover{
color: #fff;
}



@media only screen and (max-width : 1200px) {
.nav-wrap {
    padding: 0 3% 0;
}
.nav-inner {
    padding: 3.5% 3% 2.5%;
}
}
@media only screen and (max-width : 1100px) {
.pr-box .add-ajust-t2 {
    font-size: 15px;
}
}



@media only screen and (max-width : 900px) {
nav .sp{
display: block;
}
nav .pc{
display: none;
}
.pr-box.for-pc{
display: none;
}
.nav-wrap {
    margin: 0 auto;
    padding: 104px 10% 0;
    display: block;
}
.nav-inner {
    background: #fff;
    border-radius: 0;
    padding: 0 0 80px;
}
.menu-box {
    display: block;
}
.menu-once {
    width: 100%;
}
.menu-once ul{
display: none;
}

.head-box{
font-size: 18px;
font-weight: 700;
border-bottom: 1px solid #ccd2e2;
line-height: 44px;
margin: 24px 0 0;
padding: 0 0 4px;
color: #001F6B;
position: relative;
}
.pr-box,
.pr-box.add-ajust,
.lower-box .pr-box,
.pr-box.add-ajust-lv{
margin: 24px 0 0;
padding: 0;
border-bottom: 1px solid #ccd2e2;
}

.lower-box .pr-box {
    width: 100%;
    height: auto;
}
.pr-box a,
.pr-box.add-ajust a {
margin: 24px 0 0;
line-height: 44px;
padding: 0 0 4px;
}
.menu-once-wide {
    width: 100%;
}
.lower-box .menu-once-wide {
    display: block;
}
.type-btn {
    width: 100%;
    height: 72px;
    margin: 0 0 16px;
}
.type-btn.ajust {
    margin: 24px 0 16px;
}
.type-btn a {
    padding: 0 0 0 16px;
    line-height: 1.5;
    font-size: 16px;
}
.type-btn a.btn-t2,
.type-btn a.btn-t3{
    font-size: 16px;
}
 
 
 
 
 
.head-box .icon{
position: absolute;
top: 50%;
right: 0;
width: 32px;
height: 32px;
background: #001F6B;
content: '';
border-radius: 100px;
transform: translateY(-50%);
}

.head-box .icon::before,
.head-box .icon::after{
    content: '';
    display: inline-block;
    width: 12px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.5s;
}

.head-box .icon::after{
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.5s;
}

.head-box.active .icon::before{
    opacity: 0;
}

.head-box.active .icon::after{
    transform: translateY(-50%) rotate(180deg);
}
 
 .pr-box a .arrow {
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 10px;
    width: 14px;
    height: 28px;
    margin: auto;
    line-height: 1;
}
 .type-btn a .arrow:before, .type-btn a .arrow:after, .pr-box a .arrow:before, .pr-box a .arrow:after, .menu-once ul li a .arrow:before, .menu-once ul li a .arrow:after {
    content: "→";
    position: absolute;
    top: 6px;
    right: 0;
    font-size: 14px;
    font-weight: 500;
    animation-fill-mode: forwards;
    animation-duration: 0.6s;
}

 .menu-box.upper-box,
 .menu-box.middle-box {
    margin: 0;
}
 
 
.pr-box .cs-t3,
.head-box .cs-t3{
        margin: 24px 0 0;
        line-height: 44px;
        padding: 0 0 4px;
        height: auto;
        position: relative;
    color: #B2B2B2;
    }
.pr-box .cs-t3.for-fis{
        margin: 24px 0 6px;
        line-height: 1.5;
        padding: 0 0 4px;
        height: auto;
        position: relative;
    color: #B2B2B2;
    }
 .pr-box .cs-t3::after,
.head-box .cs-t3::after{
    position: absolute;
    top: auto;
    bottom: 2px;
    left: auto;
    right: 0;
    content: 'Coming Soon';
    font-size: 14px;
    font-weight: 500;
}
.pr-box .cs-t3.for-fis::after{
bottom: 6px;
    }

.menu-once ul li .cs {
    height: auto;
    position: relative;
    color: #B2B2B2;
}
.menu-once ul li .cs::after {
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    font-size: 14px;
    content: 'Coming Soon';
}
 
 
 }
 
 
 @media only screen and (max-width : 360px) {
  .pr-box .cs-t3::after,
.head-box .cs-t3::after,
.menu-once ul li .cs::after{
    position: absolute;
    top: auto;
    bottom: 2px;
    left: auto;
    right: 0;
    content: 'Coming Soon';
    font-size: 10px;
    font-weight: 500;
}
}