
#ds-lt-header-main.scroll-to-fixed-fixed #ds-fixed-nav {display:none;}

.ds-fixed-nav-off #ds-lt-header-main {position:relative;}
.ds-fixed-nav-off #ds-fixed-nav {position:absolute; top:0; right:0;}

.ds-fixed-nav-on #ds-lt-header-main {z-index:110!important;}

#ds-fixed-nav>button {background:#f48641; font-size:4.5rem; height:0; width:3em; padding-bottom:3em; border-bottom-left-radius:100%; box-sizing:border-box; text-align:right; border-width:0; color:#fff; line-height:1; cursor:pointer; box-shadow:0 0 10px -5px #000; display:block; transition:all 0.5s, transform 0.3s;}
.ds-fixed-nav-off #ds-fixed-nav>button:hover {transform:translate(5px,0);}
#ds-fixed-nav>button>i {display:block; position:absolute; top:0.5em; right:0.5em;}

.ds-fixed-nav-on #ds-fixed-nav>button {position:fixed; top:0; right:0; opacity:0; width:100vw; height:100vw; z-index:112;}

.ds-fixed-nav-on #ds-fixed-nav-main {width:100vw; height:100vh; opacity:1;}

.ds-fixed-nav-off [data-fix-aos="fade-up"] {transform:translate(0,30px);}
.ds-fixed-nav-off [data-fix-aos="fade-down"] {transform:translate(0,-30px);}
.ds-fixed-nav-off [data-fix-aos="fade-left"] {transform:translate(30px, 0);}
.ds-fixed-nav-off [data-fix-aos="fade-right"] {transform:translate(-30px,0);}
.ds-fixed-nav-off [data-fix-aos] {opacity:0;}
.ds-fixed-nav-on [data-fix-aos] {opacity:1; transform:translate(0,0); transition:transform ease 1s 0s, opacity ease 1s 0s;}

#ds-fixed-nav-main>button {position:absolute; top:2%; right:2%; border:none; background:none; color:#000; font-size:2em; cursor:pointer;}
#ds-fixed-nav-main>button:hover {transform:scale(1.1,1.1);}

#ds-fixed-nav-main {position:fixed; width:0; height:0; top:0; right:0; background:#ebf6f5; z-index:112; opacity:0; transition:opacity ease 0.7s 0s; overflow:hidden; display:flex; align-items:stretch;}

#ds-fixed-nav-main>div {height:100%; position:relative;}

#ds-fixed-nav-title {flex:0 0 30%; background-color:#406392; display:flex; flex-direction:column; justify-content:space-between; align-items:stretch; color:#fff; font-size:1em; box-sizing:border-box; padding:2% 4% 0 0;}

#ds-fixed-nav-title>div:before,
#ds-fixed-nav-title>div:after,
#ds-fixed-nav-title:after {content:""; display:block; background-repeat:no-repeat;background-size:contain; transition-property:opacity, transform; transition-timing-function:ease; transition-duration:10s; opacity:0; }

.ds-fixed-nav-on #ds-fixed-nav-title>div:after,
.ds-fixed-nav-on #ds-fixed-nav-title>div:before,
.ds-fixed-nav-on #ds-fixed-nav-title:after{opacity:1; transform:translate(0,0);}

#ds-fixed-nav-title>div,
#ds-fixed-nav-title:after {width:100%; margin-left:auto; max-width:20em; }
#ds-fixed-nav-title>div:after {position:absolute; right:-5%; background-image:url('../../layout/p01/img/p01-contents-s02.png'); background-position:bottom left; width:30%; height:5em; transform:translate(100px, 0); transition-delay:0s;}
#ds-fixed-nav-title>div:before {background-image:url('../../layout/p01/img/p01-contents-s01.png'); background-position:bottom left; width:50%; height:12em; margin-bottom:0.3em; transform:translate(0, -50px); transition-delay:0.5s;}

#ds-fixed-nav-title>div {padding:0 0 10% 10%; box-sizing:border-box; margin-bottom:10%; z-index:1;}
#ds-fixed-nav-title>div a {display:block;}
#ds-fixed-nav-title>div img {display:block; width:100%; transition-duration:1s;}
#ds-fixed-nav-title>div a:hover img {transform:scale(1.01,1.01);}
#ds-fixed-nav-title p {display:block; transition-delay:1s!important; transition-duration:3s;}
#ds-fixed-nav-title div {margin:0.5em 0; transition-delay:1.5s!important; transition-duration:3s;}
#ds-fixed-nav-title div strong{margin-right:1em;}

#ds-fixed-nav-title:after {flex:auto; background-position:bottom left; background-image:url('../../layout/p01/img/p01-contents-s03.png'); background-size:contain; transform:translate(0, 50px); transition-delay:2s;}


#ds-fixed-nav-list {flex:auto; padding:5%;box-sizing:border-box;overflow-y:auto; display:flex; justify-content:center; align-items:center;}

#ds-fixed-nav-list>ul {display:flex; justify-content:space-between; align-items:stretch; flex:1 0 100%; word-break:keep-all;}
#ds-fixed-nav-list>ul>li {flex:0 0 24%;}
#ds-fixed-nav-list>ul>li:hover>div {transform:translate(0,-10px);}
#ds-fixed-nav-list>ul>li>div>div:nth-of-type(1) {position:relative; height:0; width:100%; padding-bottom:60%;}
#ds-fixed-nav-list>ul>li>div>div:nth-of-type(1)>div {position:absolute; width:100%; height:100%; top:0; left:0; border-radius:40px; border-bottom-left-radius:0; overflow:hidden;}
#ds-fixed-nav-list>ul>li>div>div:nth-of-type(1)>div img {object-fit:cover; width:100%; height:100%; display:block;}
#ds-fixed-nav-list>ul>li>div>div:nth-of-type(2) {line-height:1.7; padding:5% 0 0 0;}
#ds-fixed-nav-list>ul>li>div>div:nth-of-type(2) * {display:block;}
#ds-fixed-nav-list>ul>li>div>div:nth-of-type(2) strong {color:#406392; margin-bottom:0.7em;}
#ds-fixed-nav-list>ul>li>div>div:nth-of-type(2) a {color:inherit;}
#ds-fixed-nav-list>ul>li>div>div:nth-of-type(2) a~a {margin-top:0.2em;}

#ds-fixed-nav-list>ul>li:nth-of-type(1) {transition-delay:.3s}
#ds-fixed-nav-list>ul>li:nth-of-type(2) {transition-delay:.6s}
#ds-fixed-nav-list>ul>li:nth-of-type(3) {transition-delay:.9s}
#ds-fixed-nav-list>ul>li:nth-of-type(4) {transition-delay:1.2s}
#ds-fixed-nav-list>ul>li:nth-of-type(5) {transition-delay:1.5s}
#ds-fixed-nav-list>ul>li:nth-of-type(6) {transition-delay:1.8s}


@media all and (max-width:1401px) and (min-width:1025px){ /* SMALL */
	
	#ds-fixed-nav>button {font-size:4rem; width:2.5em; padding-bottom:2.5em;}
	#ds-fixed-nav>button>i {top:0.3em; right:0.3em;}

	#ds-fixed-nav-main>button {top:1%; font-size:3.5rem;}
	#ds-fixed-nav-title {padding:2% 3% 0 0;}
	#ds-fixed-nav-title>div:before {height:8em;}
	
	#ds-fixed-nav-list {padding:5%;}
	
}

@media all and (max-width:1025px) and (min-width:769px){ /* SMALL */
	
	#ds-fixed-nav>button {font-size:3.3rem; width:2.3em; padding-bottom:2.3em;}
	#ds-fixed-nav>button>i {top:0.25em; right:0.25em;}

	#ds-fixed-nav-main>button {top:1%; font-size:3.4rem;}
	#ds-fixed-nav-title {padding:2% 3% 0 0;}
	#ds-fixed-nav-title>div:before {height:7em;}
	
	#ds-fixed-nav-list {padding:3%;}
	#ds-fixed-nav-list>ul {flex-wrap:wrap; gap:2em 0;}
	#ds-fixed-nav-list>ul>li {flex:0 0 48%;}
}

@media all and (max-width:768px){ /* Mobile */
	#ds-fixed-nav>button {font-size:3.5rem; width:2em; padding-bottom:2em;}
	#ds-fixed-nav>button>i {top:0.2em; right:0.2em;}
	
	#ds-fixed-nav-main>button {top:0.5%; right:0.5%!important; font-size:3.2rem;}
	
	#ds-fixed-nav-main {display:block; overflow-y:auto!important;}
	#ds-fixed-nav-main>div {height:initial!important;}
	
	#ds-fixed-nav-title {flex:1 0 100%; padding:5%; position:relative;}
	#ds-fixed-nav-title>div {position:relative;}
	#ds-fixed-nav-title>div:after {display:none;}
	#ds-fixed-nav-title>div:before,
	#ds-fixed-nav-title:after {position:absolute; height:100%; top:0; background-position:center center; transition-duration:5s; transform:none;}
	
	#ds-fixed-nav-title>div:before {left:0; width:50px; transition-delay:0s;}
	#ds-fixed-nav-title:after {right:0; width:70px; transition-delay:0.5s;}
	#ds-fixed-nav-title>div {padding:0; margin:0; max-width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;}
	#ds-fixed-nav-title>div a {max-width:15em; transform:none; transition-duration:2s;}
	#ds-fixed-nav-title>div p {text-align:center; transform:none; transition-duration:4s; margin-bottom:0;}
	#ds-fixed-nav-title>div p br {display:none;}
	
	#ds-fixed-nav-title div {text-align:center; transform:none!important;}
	#ds-fixed-nav-title div strong{display:block; margin:0;}
	
	#ds-fixed-nav-list {padding:5% 3% 10% 3%;flex:1 0 100%;}
	#ds-fixed-nav-list>ul {flex-wrap:wrap; gap:2em 0;}
	#ds-fixed-nav-list>ul>li {flex:0 0 48%;}
}