/* Reset */
html { overflow-y: scroll; font-size: 0.625rem; color: #000; line-height: 1.7; word-spacing: 0; font-family: 'Josefin Sans', sans-serif; }

body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -webkit-appearance: none; font-size: 2rem; overflow-x: hidden; }

* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th { text-align: left; font-weight: normal; }

a { color: inherit; text-decoration: none; }

img { vertical-align: bottom; max-width: 100%; }

input, textarea, select, option, optgroup, button { -webkit-appearance: none; border-radius: 0; outline: none; background: none; border: none; font-family: 'Josefin Sans', sans-serif; }

.clearFix:after { display: block; clear: both; height: 0; visibility: hidden; content: '.'; zoom: 1; }

a[href^='tel:'] { pointer-events: none; }

.text-bold { font-weight: bold; }

@media only screen and (max-width: 768px) { body { font-size: 2.6vw; }
  .pc { display: none; }
  a[href^='tel:'] { pointer-events: auto; } }

.s-header { height: 100vh; width: 8rem; background-color: #f1f1f1; position: fixed; top: 0; left: 0; z-index: 999; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }

.s-header .hd-logo { display: block; width: 5.3rem; position: absolute; top: 6.7vh; left: 50%; z-index: 9; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 0.1s; transition: all 0.1s; -webkit-transition-delay: 0.25s; transition-delay: 0.25s; }

.s-header .hd-menu { position: absolute; top: 50%; left: 50%; z-index: 9; display: block; width: 3.2rem; height: 2.2rem; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.025s; transition: all 0.025s; }

.s-header .hd-menu > span { display: block; position: absolute; left: 0; width: 100%; height: 0.1rem; background-color: #545454; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }

.s-header .hd-menu > span:nth-child(1) { top: 0; }

.s-header .hd-menu > span:nth-child(2) { width: 1.9rem; top: calc(50% - 0.05rem); }

.s-header .hd-menu > span:nth-child(3) { bottom: 0; }

.s-header .hd-menu.is-active { width: 2.4rem; height: 2.4rem; }

.s-header .hd-menu.is-active > span:nth-child(1), .s-header .hd-menu.is-active > span:nth-child(3) { top: 1.15rem; left: -0.45rem; width: 3.3rem; }

.s-header .hd-menu.is-active > span:nth-child(1) { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.s-header .hd-menu.is-active > span:nth-child(2) { width: 0; left: 50%; }

.s-header .hd-menu.is-active > span:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.s-header .hd-nav { position: absolute; top: 0; left: 8rem; z-index: 9; background-color: #f1f1f1; width: 0px; overflow: hidden; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }

.s-header .hd-nav .main-logo { display: block; width: 48px; height: 65px; background-image: url(../imgs/common/arca-logo_sp.png); position: absolute; top: 6.7vh; left: 0; opacity: 0; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; }

.s-header .hd-nav.is-active { width: calc(50vw - 8rem); }

.s-header .hd-nav.is-active .main-logo { width: 156px; opacity: 1; left: 17.04545%; }

.s-header .hd-nav .grow { width: calc(50vw - 8rem); height: 100vh; position: relative; }

.s-header .hd-nav .menu-list, .s-header .hd-nav .lang-list { position: absolute; left: 17.04545%; z-index: 99; }

.s-header .hd-nav .menu-list { top: 33.78995vh; font-size: 4.078rem; font-weight: bold; line-height: 1.5; }

.s-header .hd-nav .menu-list > li { margin-bottom: 17px; }

.s-header .hd-nav .menu-list > li > a { position: relative; }

.s-header .hd-nav .menu-list > li > a::after { position: absolute; bottom: 0.2rem; left: 0.4rem; width: 0; background: #f58124; height: 2rem; content: ''; z-index: -1; -webkit-transition: all 0.35s; transition: all 0.35s; }

.s-header .hd-nav .menu-list > li > a:hover::after { width: calc(100% + 2.6rem); }

.s-header .hd-nav .menu-list > li.is-active a::after { width: calc(100% + 2.6rem); }

.s-header .hd-nav .lang-list { display: -webkit-box; display: -ms-flexbox; display: flex; top: 67.76948vh; font-size: 1.6rem; font-weight: 400; }

.s-header .hd-nav .lang-list > li { margin-right: 3.5rem; padding-left: 0.9rem; position: relative; }

.s-header .hd-nav .lang-list > li > a::after { position: absolute; bottom: 0.6rem; left: 0; width: 0; background: #f58124; height: 0.8rem; content: ''; z-index: -1; -webkit-transition: all 0.35s; transition: all 0.35s; }

.s-header .hd-nav .lang-list > li > a:hover::after { width: calc(100% + 0.5rem); }

.s-header .hd-nav .lang-list > li.is-active > a::after { width: calc(100% + 0.5rem); }
.s-header .hd-nav .lang-list > li.is-un > a{pointer-events: none; opacity: .4;}

.container { max-width: 1500px; width: 95%; margin: 0 auto; }

.mv { position: relative; width: 100%; max-width: 1920px; margin: 0 auto 6%; min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 3% 0; }

.mv-left { width: 40%; position: relative; }

.mv-left h2 { font-size: 60px; line-height: 1.2; color: #ffbd00; font-weight: bold; position: absolute; top: 50%; left: 0; background: #fff; transform: translateY(-50%); -webkit-transform: translateY(-50%); padding: 6% 0; z-index: 3; }

.mv-left h2 span { font-size: 30px; color: #000000; display: block; font-weight: normal; margin: 0 0 5%; }

.mv-right { width: 56%; position: relative; }

.mv-right figure { margin: 0 0 2%; text-align: center; }

.mv-right p { padding: 0 4%; }

/* animation */
.mv h2 span div { opacity: 0; -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

.mv.animated h2 span div { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); }

.mv h2 div { -webkit-transform: translateY(20px); transform: translateY(20px); opacity: 0; -webkit-transition: 0.7s cubic-bezier(0.8, 0, 0.4, 1); transition: 0.7s cubic-bezier(0.8, 0, 0.4, 1); }

.mv.animated h2 div { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }

.mv-right:before { width: 61%; left: -61%; height: 88%; position: absolute; bottom: 0.7em; content: ''; background-repeat: no-repeat; background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; background-position: 100% 0, 0 0, 0 100%, 100% 100%; }

.mv-right:after { width: 61%; left: -61%; height: 88%; position: absolute; bottom: 0.7em; content: ''; background-repeat: no-repeat; background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; background-position: 100% 0, 0 0, 0 100%, 100% 100%; z-index: 0; background-image: -webkit-gradient(linear, right top, left top, color-stop(100%, #f58124), to(#f58124)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, #f58124), to(#f58124)), -webkit-gradient(linear, left top, right top, color-stop(100%, #f58124), to(#f58124)), -webkit-gradient(linear, left bottom, left top, color-stop(100%, #ffffff), to(#ffffff)); background-image: linear-gradient(to left, #f58124 100%, #f58124 100%), linear-gradient(to bottom, #f58124 100%, #f58124 100%), linear-gradient(to right, #f58124 100%, #f58124 100%), linear-gradient(to top, #ffffff 100%, #ffffff 100%); -webkit-animation: bg-line 2s cubic-bezier(0.19, 1, 0.22, 1); animation: bg-line 2s cubic-bezier(0.19, 1, 0.22, 1); }

.mv-right:before { z-index: 1; background-image: -webkit-gradient(linear, right top, left top, color-stop(100%, #ffbd00), to(#ffbd00)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, #ffbd00), to(#ffbd00)), -webkit-gradient(linear, left top, right top, color-stop(100%, #ffbd00), to(#ffbd00)), -webkit-gradient(linear, left bottom, left top, color-stop(100%, #ffffff), to(#ffffff)); background-image: linear-gradient(to left, #ffbd00 100%, #ffbd00 100%), linear-gradient(to bottom, #ffbd00 100%, #ffbd00 100%), linear-gradient(to right, #ffbd00 100%, #ffbd00 100%), linear-gradient(to top, #ffffff 100%, #ffffff 100%); animation: bg-line 2s cubic-bezier(0.19, 1, 0.22, 1) infinite; -webkit-animation: bg-line 2s cubic-bezier(0.19, 1, 0.22, 1) infinite; }

@keyframes bg-line { 0% { background-size: 0 2px, 2px 0, 0 2px, 2px 0; }
  25% { background-size: 100% 2px, 2px 0, 0 2px, 2px 0; }
  50% { background-size: 100% 2px, 2px 100%, 0 2px, 2px 0; }
  75% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 0; }
  100% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; } }

@-webkit-keyframes bg-line { 0% { background-size: 0 2px, 2px 0, 0 2px, 2px 0; }
  25% { background-size: 100% 2px, 2px 0, 0 2px, 2px 0; }
  50% { background-size: 100% 2px, 2px 100%, 0 2px, 2px 0; }
  75% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 0; }
  100% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; } }

.social { text-align: center; padding: 10% 0; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; }

.social.animated { opacity: 1; }

.social h3 { font-size: 30px; margin: 0 0 25px; }

.social .btn p { font-size: 30px; display: inline-block; vertical-align: middle; padding: 0 15px; }

.social .btn a { width: 300px; padding: 12px 0 11px; display: inline-block; vertical-align: middle; background: #f7f7f7; position: relative; letter-spacing: 0.1em; }

.social .btn a span { font-weight: bold; color: #ffbd00; }

footer { max-width: 1000px; margin: 0 auto; color: #777; border-top: 1px solid #777; text-align: center; padding: 20px 0 30px; line-height: 1.6; }

footer ul { margin: 0 0 20px; font-size: 16px; }

footer p { font-size: 13px; }

footer span { margin: 0 0 0 2em; }

@media only screen and (min-width: 769px) { .sp { display: none !important; }
  .s-header .hd-logo.hidden { left: 100%; opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s; }
  .s-header .menu-list > li { -webkit-transform: translateX(-50px); transform: translateX(-50px); opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; }
  .s-header .menu-list > li:nth-child(1) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; }
  .s-header .menu-list > li:nth-child(2) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
  .s-header .menu-list > li:nth-child(3) { -webkit-transition-delay: 0.75s; transition-delay: 0.75s; }
  .s-header .menu-list.animated > li { opacity: 1; -webkit-transform: translateX(0px); transform: translateX(0px); } }

@media only screen and (max-width: 1920px) { .mv-left h2 { font-size: 2.5vw; }
  .mv-left h2 span { font-size: 1.7vw; }
  .social h3 { font-size: 1.8vw; } }

@media only screen and (max-width: 1400px) { footer ul { font-size: 14px; }
  footer p { font-size: 12px; } }

@media only screen and (max-width: 1000px) { .social h3 { font-size: 3.5vw; }
  .social .btn p { font-size: 3.5vw; }
  .social .btn a { width: 250px; }
  .mv-left { width: 100%; position: relative; padding: 6% 0; margin: 0 0 8%; }
  .mv-left:before { width: 80%; left: 10%; height: 100%; position: absolute; bottom: 0; content: ''; background-repeat: no-repeat; background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; background-position: 100% 0, 0 0, 0 100%, 100% 100%; }
  .mv-left:after { width: 80%; left: 10%; height: 100%; position: absolute; bottom: 0; content: ''; background-repeat: no-repeat; background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; background-position: 100% 0, 0 0, 0 100%, 100% 100%; z-index: 0; background-image: -webkit-gradient(linear, right top, left top, color-stop(100%, #f58124), to(#f58124)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, #f58124), to(#f58124)), -webkit-gradient(linear, left top, right top, color-stop(100%, #f58124), to(#f58124)), -webkit-gradient(linear, left bottom, left top, color-stop(100%, #ffffff), to(#ffffff)); background-image: linear-gradient(to left, #f58124 100%, #f58124 100%), linear-gradient(to bottom, #f58124 100%, #f58124 100%), linear-gradient(to right, #f58124 100%, #f58124 100%), linear-gradient(to top, #ffffff 100%, #ffffff 100%); -webkit-animation: bg-line 2s cubic-bezier(0.19, 1, 0.22, 1); animation: bg-line 2s cubic-bezier(0.19, 1, 0.22, 1); }
  .mv-left:before { z-index: 1; background-image: -webkit-gradient(linear, right top, left top, color-stop(100%, #ffbd00), to(#ffbd00)), -webkit-gradient(linear, left top, left bottom, color-stop(100%, #ffbd00), to(#ffbd00)), -webkit-gradient(linear, left top, right top, color-stop(100%, #ffbd00), to(#ffbd00)), -webkit-gradient(linear, left bottom, left top, color-stop(100%, #ffffff), to(#ffffff)); background-image: linear-gradient(to left, #ffbd00 100%, #ffbd00 100%), linear-gradient(to bottom, #ffbd00 100%, #ffbd00 100%), linear-gradient(to right, #ffbd00 100%, #ffbd00 100%), linear-gradient(to top, #ffffff 100%, #ffffff 100%); animation: bg-line 2s cubic-bezier(0.19, 1, 0.22, 1) infinite; -webkit-animation: bg-line 2s cubic-bezier(0.19, 1, 0.22, 1) infinite; }
  .mv-left h2 { position: relative; transform: translateY(0); -webkit-transform: translateY(0); padding: 4% 0; font-size: 7vw; }
  .mv-left h2 span { margin: 0 0 3%; font-size: 3.5vw; }
  .mv-right { width: 100%; }
  .mv-right:before, .mv-right:after { display: none; }
  .mv-right p { padding: 0; } }

@media only screen and (max-width: 767px) and (orientation: portrait) { .mv { margin: 60px auto 10%; } }

@media only screen and (max-width: 768px) { .pc { display: none !important; }
  .s-header { width: 100vw; height: 7rem; }
  .s-header .hd-logo { left: 1.5vw; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 13rem; }
  .s-header .hd-menu { left: auto; right: 1.5vw; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); }
  .s-header .hd-nav { width: 100vw !important; height: 0; left: 0; top: 7rem; }
  .s-header .hd-nav.is-active { height: calc(100vh - 7rem); }
  .s-header .hd-nav .grow { width: 100vw; }
  .s-header .hd-nav .main-logo { display: none; }
  footer ul { font-size: 12px; }
  footer p { font-size: 10px; }
  .social h3 { font-size: 20px; line-height: 1; margin: 0 0 15px; }
  .social .btn p { font-size: 20px; }
  .social .btn a { display: block; margin: 0 auto; }
  .copyright { font-size: 12px; } }

@media only screen and (max-width: 575px) { .s-header .hd-nav .menu-list { font-size: 7vw; left: 40%; top: 40%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  .s-header .hd-nav .lang-list { font-size: 3vw; left: 13%; top: calc(20% + 75vw); } }

@media only screen and (max-width: 479px) { body { font-size: 3.2vw; }
  .s-header { height: 14vw; }
  .s-header .hd-logo { width: 25vw; }
  .s-header .hd-nav { top: 14vw; }
  .s-header .hd-nav.is-active { height: calc(100vh - 14vw); }
  .s-header .hd-nav .lang-list { top: calc(45vh + 35vw); font-size: 4vw; }
  .s-header .hd-nav .menu-list { width: 100%; font-size: 8vw; left: 65%; } }


#modal{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; display: flex; justify-content: center; align-items: center;}
#modal-overlay{background: rgba(0,0,0,.6); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
#modal-close{position: absolute; top: 0; right: 0; width: 40px; height: 40px; cursor: pointer; z-index: 2;}
#modal-close:before,
#modal-close:after{content: ''; width: 30px; height: 1px; background: #fff; position: absolute; top: 20px; left: 7px;}
#modal-close:before{transform: rotate(45deg);}
#modal-close:after{transform: rotate(-45deg);}
#modal img{max-height: 80vh; max-width: 1100px; position: relative; z-index: 3;}

@media only screen and (max-width: 1200px) {
    #modal img{max-width: 90%;}
}