@charset "utf-8";
/* CSS Document */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

header

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
 #btnGlobal{display: none;}
 
 #header {padding:min(1.66vw,20px) min(3vw,50px) 0; position: sticky; z-index: 100; left: 0; top: 0; width: 100%; transition: 0.3s all ease-in-out;
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: repeat(2, max-content);
  grid-column-gap: min(2.5vw,30px);
  grid-row-gap: 0px;
 }

#hd-logo { grid-area: 1 / 1 / 3 / 2; display: grid; place-items: center;}
#btnCV { grid-area: 1 / 2 / 2 / 3; display: flex; justify-content: flex-end; column-gap: var(--w-10);}
#grandMenu { grid-area: 2 / 2 / 3 / 3; display: grid; justify-content:end;}

#hd-logo a {display: flex; align-items: flex-end; column-gap: var(--w-30);}
#hd-logo a img {width: min(21.6vw,260px); transition: 0.3s all ease-in-out;}
#hd-logo a p {font-size: var(--fs-12); color: #8f8f8f; font-weight: 500; line-height: 1.5;}

#btnCV li a {display: block; min-width: 220px; padding: 13px 30px; border-radius: 50vw; text-align: center; font-size: var(--fs-16); color: #fff; font-weight: 500; transition: 0.3s all ease-in-out;}
#btnCV li a.btnCV__contact {background: var(--bg-grad-orange);}
#btnCV li a.btnCV__download {background: var(--bg-grad-blue);}
#btnCV li a span {padding-left: 1.3em;}
#btnCV li a span::before {font-size: 1.5em; translate: -50% -45%;}
#btnCV li a.btnCV__contact span::before {content: "\e6c7";}
#btnCV li a.btnCV__download span::before {content: "\f17f";}

#grandMenu #navGlobal {display: flex;  }
#grandMenu #navGlobal li a {color: #444; font-weight: 600; padding: min(1.66vw,20px); display: block; letter-spacing: 0.08rem;}
#grandMenu #navGlobal li a:hover, #grandMenu #navGlobal li a.current{ color: var(--tx-blue-02);}

/* fixed */
#header.fixed { padding:min(0.83vw,10px) min(3vw,50px) 0; background: #fff;}
#header.fixed #hd-logo a img {width: min(16.6vw,200px);}
#header.fixed #btnCV li a {padding: 10px 30px; }
#header.fixed #grandMenu #navGlobal li a {padding: min(1.25vw,15px) min(1.66vw,20px);}

@media (max-width: 1504px) and (min-width: 1063px) {
 #hd-logo a {display:block;}
 #hd-logo a p {margin-top: 5px; font-size: 11px; letter-spacing: 0.08rem;}
 #hd-logo a p br {display: none;}

 @media (max-width: 1293px) {
   #hd-logo a img {width: min(20vw,260px);}
   #hd-logo a p {font-size: 10px;}
   #grandMenu #navGlobal li a {padding: min(1.66vw,20px) min(1.25vw,15px); font-size: var(--fs-16);}
  /* fixed */
   #header.fixed #grandMenu #navGlobal li a {padding: min(1.66vw,20px) min(1.25vw,15px);}
 }
}

@media (max-width: 1084px) {
 #header {grid-template-rows: 1fr; padding: 0 min(18vw,90px) 0 min(3vw, 30px) ;}
 #hd-logo a {padding: 15px 0;}
 #hd-logo a img {width: min(24vw,260px);}
 #hd-logo a p {display: none;}
 #btnCV { align-items: center;}
 #btnCV li a {min-width: inherit;}

 #btnGlobal {position: absolute; right: min(2vw,20px); top:50%; width: min(12vw,55px); aspect-ratio: 1/1; border-radius: 50%;  translate: 0 -50% ;z-index: 120; display: flex; display: -webkit-flex; justify-content:center; align-items: center; background:var(--tx-blue-02);}
 #btnGlobal .btnWrapGlobal { width: var(--w-30); height: var(--w-20); position: relative;}
 #btnGlobal .btnLine { height: 2px; background: #fff; position: absolute; right:0; width: 100%;}
 #btnGlobal .btnLine.btnLineT {  top: 0;}
 #btnGlobal .btnLine.btnLineM { top: 50%; transform: translateY(-50%);}
 #btnGlobal .btnLine.btnLineB { bottom: 0; }
 #btnGlobal.active .btnLine {background: #fff;}
 #btnGlobal.active .btnLine.btnLineT { display: none;}
 #btnGlobal.active .btnLine.btnLineM { transform: translateY(0) rotate(45deg) ;}
 #btnGlobal.active .btnLine.btnLineB { transform: rotate(-45deg); bottom:inherit; top: 50%;}
 #btnGlobal .btnLine.btnLineM, #btnGlobal .btnLine.btnLineB {-moz-transition: all, ease-in-out, 0.3s;  -o-transition: all, ease-in-out, 0.3s;  -webkit-transition: all, ease-in-out, 0.3s; transition: all, ease-in-out, 0.3s;}
 #btnGlobal .btnText { color: #013e7f; font-size: 1.5rem; margin: 0; position: absolute; right: 0; top: 0; line-height: 1;}
 
 #grandMenu {background: rgba(255,255,255,0.9); width: 100%; height: 100%; position: fixed; z-index: 100;  left: 0; top: 0; display: none; overflow: auto; padding: var(--w-100) 8%; backdrop-filter: blur(5px);  grid-area: inherit;}
 #grandMenu a {color: #fff;}
 #grandMenu #navGlobal {display: block;}
 #grandMenu #navGlobal li { font-size: var(--fs-18); border-bottom: 1px dotted var(--c-blue); line-height: 1;}
 #grandMenu #navGlobal li a {display: block; padding: var(--w-30) 0; position: relative; color: var(--tx-blue-02);}
 #grandMenu #navGlobal li a::after {content:""; position: absolute; right: 2vw; top: 50%; width: var(--w-15); aspect-ratio:1/1; border-top:1px solid var(--tx-blue-02); border-right: 1px solid var(--tx-blue-02); transform:  rotate(45deg) translateX(-50%);}

/* fixed */
#header.fixed {  padding:0 min(18vw,90px) 0 min(3vw,50px);}
#header.fixed #hd-logo a img {width: min(16.6vw,200px);}
#header.fixed #grandMenu #navGlobal li a {padding: var(--w-30) 0;}
}

@media (max-width: 699px) {
 #header {display: block;}
 #hd-logo {grid-area: inherit; display: block; place-items: inherit;}
 #hd-logo a {display: flex;}
 #hd-logo a p {display: block; letter-spacing: normal;}
 #hd-logo a img {width: min(30vw,260px);}
 #btnCV {grid-area: inherit; position: fixed; left: 0; bottom: 0; column-gap: 0; width: 100%;}
 #btnCV li {flex: 1;}
 #btnCV li a {border-radius: 0; font-size: var(--fs-18); padding: min(4vw,20px) 2vw; letter-spacing: normal;}

/* fixed */
#header.fixed #hd-logo a img {width: min(30vw,260px);}
#header.fixed #btnCV li a {padding: min(4vw,20px) 2vw; }
 

}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

footer

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#footer {background: #222222; color: #fff; display: flex; flex-direction: row-reverse; margin-top: auto;}
.ft__address {width: 63%;}
.ft__contact {width: 37%; background: #3b3b3b; text-align: center; padding: var(--w-50) 0}

.ft__add__inr {width: 90%; max-width: 820px; margin: 0 auto; padding: var(--w-70) 0; font-size: var(--fs-14);}
.ft__add__inr h2 {width: min(40vw,185px); margin-bottom: var(--w-50);}
.ft__add__inr h3 {font-size: var(--fs-16); font-weight: 600; margin-bottom: var(--w-10);}
.ft__add__inr p {line-height: 2;}
.ft__add__inr .copy {font-size: var(--fs-12); margin-top: var(--w-60);}

.ft__contact h2 {font-family: var(--ff-en); font-size: var(--fs-28); font-weight: 600; margin-bottom: var(--w-30);}
.ft__cont__btn {width: 80%; margin: 0 auto; text-align: left; font-size: var(--fs-20);}
.ft__cont__btn li a {display: block; color: #fff; padding: var(--w-25) 1.5em; border-bottom: 1px dashed #fff; font-weight: 500;}
.ft__cont__btn li a span {padding-left: 1.7em;}
.ft__cont__btn li a span::before {font-size: 3.5rem; font-weight: 200 !important;}
.ft__btn__contact a span::before {content: "\e158";}
.ft__btn__download a span::before {content: "\f17f";}

@media (max-width: 979px) {
.ft__address {width: 60%;}
.ft__contact {width: 40%; }
}

@media (max-width: 885px) {
#footer {display: block;}
.ft__address {width: 100%;}
.ft__contact {width: 100%;}
.ft__cont__btn { width: 90%; display: flex; justify-content: space-between; column-gap: var(--w-30);}
.ft__cont__btn li  {flex: 1;}
}

@media (max-width: 650px) {
.ft__cont__btn {display: block;}
}

#pagetop {position: fixed;bottom: 0;right:0;}
#pagetop a {display:block; width: 60px; aspect-ratio: 1/1; background-color: var(--tx-blue-02); position: relative;}
#pagetop a::before {content: ""; aspect-ratio: 1/1; width: 15px; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; left: 50%; top: 50%; translate: -50% -25%; rotate: -45deg;}