@font-face { font-family: Galano; src: url('/lib/fonts/GalanoClassicAlt-Medium.otf') format('truetype'); font-display: swap; }
@font-face { font-family: Galano; src: url('/lib/fonts/GalanoClassicAlt-Bold.otf') format('truetype'); font-display: swap; font-weight: bold; }

.cl_bleu { color: #0071bc; }
.cl_grif { color: #555555; }
.cl_gric { color: #f2f2f2; }
.cl_blan { color: #ffffff; }

.tac { text-align: center; }

html { scroll-behavior: smooth; }
body { margin: 0; background: #555; color: #fff; font-family: Galano, Helvetica, Arial, sans-serif; font-size: 16px; scroll-snap-type: y mandatory; }
body.blk menu:not(.opn) ~ * { color: #444; }
body.blk menu:not(.opn) ~ header>*, popup.opn ~ header>*, body.blk .cir { color: #fff; filter: brightness(.4); }
a, label { cursor: pointer; color: inherit; }
a:not(:hover) { text-decoration: none; }

flx { display: flex; flex: 1; }
flx[col] { flex-direction: column; }
flx[wrp] { flex-wrap: wrap; }
sep { display: block; padding: 20px; }

.car { align-self: flex-start; }
.car:after { content: ''; display: block; padding-top: 100%; }

menu, popup, popnl, body>section { position: fixed; display: flex; align-items: center; justify-content: center; width: 100%; right: 0; top: 0; bottom: 0; margin: 0; padding: 10%; box-sizing: border-box; }
menu, popup { z-index: 4; }
p.col_scr { flex: 1; overflow-y: auto; font-size: 0.8em; padding-right: 8px; margin: 20px 0 0; }

menu { justify-content: space-between; background: #555; color: #fff; right: -100%; }
menu.opn { right: 0; }
menu:not(.opn) div { transform: translateX(1000px); }
menu, menu div { transition: .7s cubic-bezier(.09,.9,.42,1); }
menu div { min-width: 30%; transition-delay: 0.2s; }
menu div a { display: block; padding: 10px; font-size: 1.5em; }

popup { background: #fff; color: #444; transition: .5s; }
popup * { transition: .9s cubic-bezier(.09,.9,.42,1) .3s; }
popup:not(.opn) { opacity: 0; pointer-events: none; }
popup>flx { max-height: 70%; transform: translateY(10%); }
popup>flx:not(.sel) { display: none; }
popup .pop_img>flx { height: 50%; }
popup .pop_img>flx+flx { align-self: flex-end; }
popup .img_ani { background: center/cover; }
popup big { font-size: 3em; line-height: 1; }
popup:not(.opn)>flx :first-child { opacity: 0; transform: translateY(-5%); }
popup:not(.opn)>flx :last-child { opacity: 0; transform: translateY(5%); }

popnl { background: rgba(85, 85, 85, 0.5); color: #444; text-align: center; font-size: 1.8em; z-index: 6; transition: .5s; }
popnl:not(.aff) { opacity: 0; transform: scale(1.05); pointer-events: none; }
popnl>flx { position: relative; flex: none; justify-content: space-between; width: 450px; height: 450px; background: #fff; border: 2px solid #555555; border-radius: 50%; }
popnl>flx:before { position: absolute; content: ''; top: -16px; right: -16px; bottom: -16px; left: -16px; border: 2px solid #555555; border-radius: 50%; z-index: -1; }
popnl>flx>a#nwl_clo { font-size: 2em; }
popnl>flx>a#nwl_clo:hover { background: radial-gradient(ellipse at bottom, rgba(0,0,0,0.1), transparent 50%); }
popnl>flx>a#nwl_val { padding: 24px 0 40px; }
popnl>flx>a#nwl_val:hover { background: radial-gradient(ellipse at top, rgba(0,0,0,0.1), transparent 50%); }
popnl>flx>form h3 { line-height: 1; }
popnl>flx>form input { border: 1px solid #555555; border-radius: 12px; outline: none; width: 60%; padding: 16px; text-align: center; font-size: 0.5em; }
popnl>flx>form.snt, popnl>flx>form.snt+a, popnl>flx>form~h3 { display: none; }
popnl>flx>form.snt~h3 { display: block; }

body>section { background: #fff; }
body>section>flx { max-width: 100%; max-height: calc(100% - 100px); transform: translateY(calc(7% + 30px)); }
.sub_mnu>a { display: block; margin-bottom: 16px; transition: .5s; }
.sub_mnu>a.sel { color: #0071bc; }
.sub_ctn { overflow: hidden; }
.sub_ctn>* { min-width: 100%; max-width: 100%; transition: .5s; }
.sub_ctn>*:not(.sel) { margin-left: -100%; opacity: 0; }
.sub_ctn>*.sel+* { margin-left: 0; }

header { position: fixed; width: 100%; top: 0; bottom: 0; z-index: 5; pointer-events: none; }
header>* { pointer-events: all; }
header .lgo { position: absolute; width: 150px; left: 50px; top: 30px; }
header .ans { position: absolute; left: 50%; top: 70px; transform: translate(-50%, -50%); text-align: center; }
header .ans b { font-size: 3em; line-height: 1em; }
header .mnu, header .clo { position: absolute; right: 50px; top: 50px; }
header .clo { display: none; }
header .nxp { position: absolute; left: 50px; bottom: 30px; }
header .soc { position: absolute; right: 50px; bottom: 30px; }
header .soc a { margin-left: 16px; }
header .soc a:hover { filter: brightness(0.5) sepia(1) hue-rotate(170deg) saturate(5); }
.opn ~ header .mnu, .opn ~ header .nxp { display: none; }
.opn ~ header .clo { display: block; }

cite { position: relative; max-width: 450px; color: #fff; align-self: center; }
cite:before { content: ''; position: absolute; border-top: 1px solid; width: 60%; }
cite p { font-size: 2em; line-height: 1.2; transition: .3s; }
cite p:not(.sel) { line-height: 0; margin: 0; opacity: 0; }

.cir { position: fixed; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.cir>div, .cir>pgr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; overflow: hidden; width: 30%; transition: .5s; backface-visibility: hidden; }
.cir>div:nth-of-type(1) { width: 300%; }
.cir>div:nth-of-type(2) { width: 99%; }
.cir>div:nth-of-type(3) { width: 75%; }
.cir>div:nth-of-type(4) { width: 65%; width: 54%; }
.cir>div:nth-of-type(5) { width: 55%; width: 46%; }
.cir>div:nth-of-type(6) { width: 45%; width: 38%; }
.cir>div>div { position: absolute; width: 100%; height: 100%; background: center; background-size: 1400px; z-index: 2; opacity: 0; transition: opacity .5s, background-size .5s, z-index .5s step-start; filter: grayscale(1) contrast(0.8) brightness(0.65); }
.cir>div>div.sel { z-index: 1; opacity: 1; background-size: 1920px; }
.cir>div:nth-of-type(1)>div.sel { transition-delay: .6s; }
.cir>div:nth-of-type(2)>div.sel { transition-delay: .5s; }
.cir>div:nth-of-type(3)>div.sel { transition-delay: .4s; }
.cir>div:nth-of-type(4)>div.sel { transition-delay: .3s; }
.cir>div:nth-of-type(5)>div.sel { transition-delay: .2s; }
.cir>div:nth-of-type(6)>div.sel { transition-delay: .1s; }
.cir>div:nth-of-type(4)>div:not(.sel) { background-size: 2400px; }
.cir>div:nth-of-type(6)>div:not(.sel) { background-size: 1400px; }
.cir>div:nth-of-type(4)>div.hov, .cir>div:nth-of-type(6)>div.hov { opacity: 1; background-size: 1920px; transition-timing-function: ease, ease, step-end; }
popup.opn ~ .cir { z-index: 6; }
popup.opn ~ .cir>div { border-color: rgba(0,0,0,0.05); }
popup.opn ~ .cir>div>div { display: none; }

.ctr { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(34% + 4px); }
popup:not(.opn) ~ .ctr:before { content: ''; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; }
.ctr>svg { position: absolute; width: 100%; height: 100%; transform: rotate(-90deg); }
.ctr>svg>#pgr { transition: .5s; }
.dot>a { position: absolute; width: 8px; height: 8px; transform: translate(-50%, -50%); background: #fff; border-radius: 50%; transition: .2s; }
.dot>a:before { content: ''; width: 100%; height: 100%; position: absolute; border: 1px rgba(255, 255, 255, 0.3) solid; opacity: 1; border-radius: 100%; left: 0; top: 0; box-sizing: border-box; transform: scale(1.6); pointer-events: none; }
.dot>a:after { content: ''; position: absolute; width: 80px; height: 80px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.dot>a:nth-of-type(1) { left: 50%; top: 0; }
.dot>a:nth-of-type(2) { left: 79%; top: 9.4%; }
.dot>a:nth-of-type(3) { left: 97.2%; top: 34%; }
.dot>a:nth-of-type(4) { left: 97.2%; top: 66%; }
.dot>a:nth-of-type(5) { left: 79%; top: 90.6%; }
.dot>a:nth-of-type(6) { left: 50%; top: 100%; }
.dot>a:nth-of-type(7) { left: 21%; top: 90.6%; }
.dot>a:nth-of-type(8) { left: 2.8%; top: 66%; }
.dot>a:nth-of-type(9) { left: 2.8%; top: 34%; }
.dot>a:nth-of-type(10) { left: 21%; top: 9.4%; }
.dot>a.sel, .dot>a:hover { width: 20px; height: 20px; }
.dot>a.sel:before, .dot>a:hover:before { animation: dot 2s infinite; }
.dot>a>span { position: absolute; left: 28px; top: -20px; opacity: 0; pointer-events: none; transition: .5s 0s; white-space: nowrap; }
.dot>a:hover>span { opacity: 1; transition: 1s .3s; }
.tit>div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; pointer-events: none; transition: .5s; }
.tit>div.sel { opacity: 1; pointer-events: all; transition: .5s .5s; }
.tit>div>h3 { font-size: 90px; margin: -10px 0; white-space: nowrap; letter-spacing: -4px; }
.tit>div>a { position: relative; display: block; width: 120px; height: 46px; line-height: 46px; margin: 40px 0 0; overflow: hidden; cursor: pointer; }
.tit>div>a:before { content: ''; position: absolute; transform: translateX(-50%); left: 50%; top: 0; width: 100%; height: 1px; background: #fff; transition: .6s; }
.tit>div>a>span { display: block; transition: .6s; }
.tit>div>a:hover:before { width: 0; }
.tit>div>a:hover>span { margin-top: -46px; }

.arw_prv, .arw_nxt { position: absolute; width: 80px; min-height: 48px; left: 70px; }
.arw_nxt { left: auto; right: 70px; }
.arw_prv:after, .arw_nxt:after { content: ''; position: absolute; width: 135px; height: 50px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url(/img/his_nxt.svg) no-repeat right; transition: .5s; }
.arw_prv:after { transform: translate(-50%, -50%) rotate(180deg); }
.arw_prv:not(:hover):after, .arw_nxt:not(:hover):after { width: 125px; opacity: .8; }
.his_prv, .his_nxt { top: 50vh; transform: translateY(-50%); font-size: 1.5em; line-height: 1; text-align: center; display: flex; align-items: center; justify-content: center; }
.med_prv, .med_nxt { bottom: 100px; filter: brightness(0.5); }

.pgr { overflow-y: scroll; }
.pgr>flx { margin: 0 0 16px; }
.pgr>flx>b { min-width: 110px; max-width: 110px; }
.pgr>flx>p { margin: 0 8px 0; }

@media only screen and (max-width: 980px){
    flx[rsp] { flex-direction: column; }
    sep { padding: 10px; }
    [hsm], popup .pop_img, popup .img_ani, header .ans, menu:not(.opn)~header .soc, .cir, .ctr>svg, .ctr:before, .ctr:after, .dot span, menu cite, .his_prv, .his_nxt { display: none; }
    header .lgo { width: 100px; top: 45px; }
    cite { font-size: .6em; }
    .sub_mnu>a { margin-bottom: 8px; }
    .ctr, .tit>div { position: static; width: 100%; left: 0; top: 0; transform: none; }
    .dot { position: fixed; width: 40px; right: 36px; top: 200px; bottom: 20px; z-index: 1; }
    .dot:after { content: ''; position: absolute; left: calc(50% - 1px); top: 0; bottom: 10%; border-left: 2px solid rgba(255,255,255,0.2); pointer-events: none; }
    .dot>a:not(.sel):hover { width: 8px; height: 8px; }
    .dot>a:nth-of-type(1) { left: 50%; top: 0; }
    .dot>a:nth-of-type(2) { left: 50%; top: 10%; }
    .dot>a:nth-of-type(3) { left: 50%; top: 20%; }
    .dot>a:nth-of-type(4) { left: 50%; top: 30%; }
    .dot>a:nth-of-type(5) { left: 50%; top: 40%; }
    .dot>a:nth-of-type(6) { left: 50%; top: 50%; }
    .dot>a:nth-of-type(7) { left: 50%; top: 60%; }
    .dot>a:nth-of-type(8) { left: 50%; top: 70%; }
    .dot>a:nth-of-type(9) { left: 50%; top: 80%; }
    .dot>a:nth-of-type(10) { left: 50%; top: 90%; }
    .dot>a:after { width: 40px; height: 40px; }
    .tit>div { position: relative; align-items: flex-start; justify-content: center; text-align: left; opacity: 1; height: 100vh; box-sizing: border-box; padding: 30% 25% 0 10%; pointer-events: all; scroll-snap-align: start; }
    .tit>div>i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: center/cover; filter: grayscale(1) contrast(0.8) brightness(0.65); }
    menu div a { font-size: 1em; }
    .med_prv, .med_nxt { bottom: 60px; }
}
@media only screen and (max-width: 600px){
    header .nxp { display: none; }
    .tit>div>h3 { font-size: 60px; }
}

@media only screen and (min-width: 1180px){
    menu { bottom: auto; height: 70px; padding: 10px; align-items: flex-start; justify-content: flex-end; background: linear-gradient(90deg, transparent 17%, #555 35%); right: 0; }
    menu:not(.opn) div { transform: translateX(0px); }
    menu div a { display: inline-block; font-size: 1em; letter-spacing: -1px; }
    menu div a:not(.sel) { color: #bbb; }
    header .mnu, popup:not(.opn) ~ header .clo { display: none; }
    .med_prv, .med_nxt { display: none; }
}

@keyframes dot {
    0% { opacity: 1; transform: scale(1); }
    60% { opacity: 1; transform: scale(2); }
    90% { opacity: 0; transform: scale(2); }
    100% { opacity: 0; transform: scale(1); }
}