@charset "utf-8";
.nav { display: flex; padding: 32.5% 0 0; margin: 2px 0 0; }
.nav li { width: calc( 100% / 3 ); }
.nav li a { display: table-cell; justify-content: center; align-items: center; min-height: 53px; margin: 0 0 0 2px; color: #000; border: 1px solid #aaa; text-decoration: none; vertical-align: middle; text-align: center; }
.nav li:first-child a { margin: 0; }

.nav li a:hover { border: 2px solid #69a1fe; }
.nav li a span { text-align: center; }
.page-nav { margin: 0 0 20px; font-size: 0; }
.page-nav img { height: auto; max-width: 100%; }
.page-nav li { display: inline-block; }
.page-nav li:first-child { margin-right: 14px; }

@media all and (max-width: 767px) {
.page-nav { text-align: center; }
.page-nav li { display: block; margin: 0 0 20px; }
.page-nav li:first-child { margin-right: 0; }
}
.proposal-flow { counter-reset: number; margin: 37px 0 0; }
.proposal-flow > li { position: relative; margin: 25px 0 0; border: 10px solid #ffd98a; border-radius: 12px; }
.flow2 > li { border: 10px solid #a4e2fb; }
.proposal-flow > li::before { counter-increment: number; content: counter(number); position: absolute; top: -25px; left: 0; width: 144px; color: #c2c2c2; font-family: 'Century Gothic'; text-align: center; font-size: 100px; }
.proposal-flow > li::after { content: ""; position: absolute; bottom: -45px; left: 50%; z-index: 99; height: 46px; width: 123px; margin: 0 0 0 -61px; background: url(../images/arrow01.png); }
.flow2 > li::after { background: url(../images/arrow02.png); }
.proposal-flow > li:last-child::after { content: ""; background: none; }
.proposal-flow > li > div { min-height: 125px; padding: 15px 27px 20px 144px; border: 1px solid #ffab00; }
.flow2 > li > div { border: 1px solid #32b3e5; }
.proposal-flow > li > div h4 { padding: 0 0 8px; font-size: 18px; border-bottom: 1px solid #ffab00; }
.flow2 > li > div h4 { border-bottom: 1px solid #32b3e5; }
.proposal-flow > li > div p { margin: 12px 0; }
.proposal-flow > li > div .notes { margin-left: 1.3em; font-size: 12px; text-indent: -1.3em; }
.proposal-flow > li > div .en-notes { margin-left: .5em; font-size: 12px; text-indent: -.5em; }
.proposal-flow > li > div > ul { display: flex; justify-content: space-between; max-width: 465px; }
.proposal-flow > li > div > ul > li { width: 100%; }
.proposal-flow > li > div > ul > li:nth-child(2) { margin: 0 0 0 25px; }
.proposal-flow > li > div > ul > li > a { display: block; width: 100%; }

@media all and (max-width: 767px) {
.proposal-flow > li::before { top: 0; width: 77px; font-size: 50px; }
.proposal-flow > li > div { padding: 15px 27px 20px 77px; }
.proposal-flow > li > div > ul { display: block; }
.proposal-flow > li > div > ul > li { margin: 0 0 10px; }
.proposal-flow > li > div > ul > li:nth-child(2) { margin: 0; }
}
.slider { position: relative; max-width: 700px; }
.slider li img { height: auto; max-width: 100%; border: 1px solid #aaa; }
.slider li p img { width: 68%; border:none; }
.slider ul li { position: absolute; top: 0; left: 0; height: auto; width: 100%; animation-iteration-count: infinite; animation-duration: 24s; }
.slider ul li p { position: absolute; bottom: 15%; text-align: center; animation-iteration-count: infinite; animation-duration: 24s; }
.slider ul li:nth-child(1) { animation-name: slider; animation-delay: -3s; }
.slider ul li:nth-child(2) { animation-name: slider; animation-delay: 5s; opacity: 0; }
.slider ul li:nth-child(3) { animation-name: slider; animation-delay: 13s; opacity: 0; }
.slider ul li:nth-child(1) p { animation-name: text; animation-delay: -1s; }
.slider ul li:nth-child(2) p { animation-name: text; animation-delay: 7s; opacity: 0; }
.slider ul li:nth-child(3) p { animation-name: text; animation-delay: 15s; opacity: 0; }
 @keyframes slider {
 0% {
 opacity:0;
}
 20.83% {
 opacity:1;
}
 33.33% {
 opacity:1;
}
 45.83% {
 opacity:0;
}
 100% {
 opacity:0;
}
}
 @keyframes text {
 0% {
 opacity:0;
}
 20.83% {
 opacity:1;
}
 33.33% {
 opacity:1;
}
 45.83% {
 opacity:0;
}
 100% {
 opacity:0;
}
}