@charset 'utf-8';
/*
Theme Name: algahome
Version: 1.0.0
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700;900&family=Spartan:wght@700&display=swap');
@import url('line.css');


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i{font-style:normal}
a { color: #FFF; transition: all .2s ease-out; text-decoration: none;}
a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; height: 100%; font-family: YuGothic, '游ゴシック', 'Yu Gothic Medium', 'Yu Gothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif; font-size: 1.6rem; font-weight: 500; line-height: 1.4; -webkit-font-smoothing: antialiased; word-break: normal; color: #FFF;}
#container { position: relative; width: 100%; overflow: hidden;}
#container::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(90deg, #38CAA0, #33C8DB, #F7CD70, #E85B5B, #F45EAE, #8655D3, #4168EB, #4168EB); background-size: 1000% 1000%; -webkit-animation: AnimationName 30s linear infinite; animation: AnimationName 30s linear infinite;}
@-webkit-keyframes AnimationName { 0% { background-position: 0% 50%;} 50% { background-position: 100% 50%;} 100% { background-position: 0% 50%;}}
@keyframes AnimationName { 0% { background-position: 0% 50%;} 50% { background-position: 100% 50%;} 100% { background-position: 0% 50%;}}
#loading { z-index: 100000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #FFF url("img/common/loading.svg") center center no-repeat;}
i, time, #title li, .faq dt::before, .faq dd::before { font-family: 'Spartan', sans-serif; font-weight: 700; line-height: 1;}


/*HEADER*/
/*******************************************************************/
#header { position: absolute; top: 0; left: 0; display: flex; justify-content: space-between; width: 100%; padding: 3vw 4vw; z-index: 10001;}
.entrybtn { margin-top: 8px;}
.entrybtn a { display: inline-block; width: 218px; padding: 10px 0; text-align: left;  background: url("img/common/arr.svg") right center no-repeat; border-bottom: 2px solid #FFF; font-size: 2.1rem;}
@media only screen and (min-width: 10025px){
#logo { padding-left: 32px;}
#nav { text-align: right;}
#nav > ul { display: flex; align-items: center;}
#nav > ul > li { position: relative; margin-left: 1.6vw; padding-bottom: 16px;}
#nav > ul > li > a, #nav > ul > li > span { display: block; font-size: 1.5rem; font-weight: 700;}
#nav ul ul { pointer-events: none; opacity: 0; position: absolute; top: 100%; left: 50%; min-width: 247px; transform: translateX(-50%); transition: .2s ease-out;}
#nav ul ul li:not(:first-child) { padding-top: 7px;}
#nav ul ul li a { display: block; padding: 12px 24px; text-align: left; background: #FFF url("img/common/arr_g.svg") right 16px center no-repeat; font-size: 1.5rem; font-weight: 700; color: #333;}
#nav > ul > li:hover ul { pointer-events: auto; opacity: 1;}
#open { display: none;}
}


/*FOOTER*/
/*******************************************************************/
#footer { position: relative; padding: 96px 8vw; font-size: 1.8rem; font-weight: 700;}
#footer p { margin-bottom: 48px; font-size: 4.5rem; font-weight: 700; letter-spacing: -0.07em;}
#footer ul { float: left;}
#footer address { float: right; font-style: normal; }


/*CONTENTS*/
/*******************************************************************/
article { position: relative; padding: 96px 8vw;}
article header { position: relative; max-width: 1200px; margin: 0 auto 80px; text-align: center; z-index: 5;}
article header i { display: block; margin-bottom: 8px; font-size: 5rem;}
article header h2 { position: relative; font-size: 1.8rem; line-height: 1.2; z-index: 1;}
section { position: relative; max-width: 1200px; margin: 0 auto; z-index: 5;}
section + header, section + section { margin-top: 80px;}
section h3 { margin-bottom: 24px;}
section p { line-height: 2;}
section p:not(:last-child) { margin-bottom: 32px;}
figure { position: relative;}
.full header, .full section { max-width: initial;}
.bg { background: rgba(34,34,34,.04);}
.center { text-align: center!important;}
.right { text-align: right!important;}
.left { text-align: left!important;}
.row { display: flex; margin: 0 -20px -64px;}
.row + * { margin-top: 40px;}
.row > * { flex: 1; margin: 0 20px 64px;}
.reverse { flex-direction: row-reverse;}
.as-center { align-self: center;}
.btn a { position: relative; display: inline-block; padding: 16px 80px 16px 24px; text-align: left; background: #FFF url("img/common/arr.svg") right 24px center no-repeat; border-radius: 64px; font-size: 1.5rem; color: #222;}
.btn a:hover { background-position: right 16px center; opacity: 1;}
.fs18 { font-size: 1.8rem;}
.fs25 { font-size: 2.5rem;}
.fs50 { font-size: 5rem;}
.fs60 { font-size: 6rem;}
.underline { text-decoration: underline;}
.sp { display: none;}
.fadeInUp{ animation-name: fadeInUp;}
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0);} to { opacity: 1; transform: translate3d(0, 0, 0);}}
.animated { opacity: 0; animation-duration: 0.7s; animation-delay: 0.2s; animation-fill-mode: both;}
.effect { position: relative; display: block; overflow: hidden;}
.effect::before, .effect::after { content: ""; position: absolute; width: 150%; height: 100%; right: 0; top: 0; transform: skew(-15deg) translateX(10%); transition: all .6s cubic-bezier(.215,.61,.355,1); transition-timing-function: cubic-bezier(.215,.61,.355,1);}
.effect::before { z-index: 1; background-color: #222; transition-delay: .4s;}
.effect::after { background-color: #FFF; z-index: 2; transition-delay: .1s;}
.effect.inview:before, .effect.inview:after { transform: skew(-15deg) translateX(120%);}
.boxvisible .boxvisiblecontent { position: relative; display: inline-block; overflow: hidden;}
.boxvisible .boxvisiblecontent > span { display: inline-block; opacity: 0; transform: translateX(-50px); transition: .6s cubic-bezier(.215,.61,.355,1);}
.boxvisible .boxvisiblecontent::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background: #FFF;}
.boxvisible.inview .boxvisiblecontent::after { animation-name: boxvisible; animation-timing-function: ease-in-out; animation-duration: 0.8s;}
.boxvisible.inview .boxvisiblecontent.delay:after { animation-delay: 0.2s;}
.boxvisible.inview .boxvisiblecontent > span { opacity: 1; transform: translateX(0); transition-delay: 0.4s;}
.boxvisible.inview .boxvisiblecontent.delay > span { transition-delay: 0.6s;}
@keyframes boxvisible { 0% { left: -100%;} 20% { left: 0;} 70% { left: 0;} 100% { left: 100%;}}


/*TOP*/
#mv { position: relative; display: flex; align-items: center; height: 100vh; padding: 0 6vw;}
#mv section { max-width: initial; margin: 0;}
#mv h1 { font-size: 3.4vw; letter-spacing: -0.06em;}
#mv figure { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1;}
#mv figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#scroll { position: absolute; left: 6vw; bottom: -107px; z-index: 1;}
#scroll::after { content: ''; display: block; width: 1px; height: 213px; margin: 12px auto 0; background-color: #FFF; transform-origin: bottom; animation: scroll 3s cubic-bezier(0.84, 0.09, 0.2, 0.95) infinite;}
#scroll a { display: block; font-size: 2rem; white-space: nowrap;}
@keyframes scroll { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transform-origin: bottom; transform-origin: bottom} 25% { -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transform-origin: bottom; transform-origin: bottom} 26% { -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); -webkit-transform-origin: top; transform-origin: top} 50% {-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transform-origin: top; transform-origin: top}}
.heading { margin-bottom: 48px; text-align: left;}
.heading h2 { margin-bottom: 8px; font-size: 6.5rem; letter-spacing: -0.07em;}
.heading i { font-size: 2.2rem;}
#philosophy { display: flex; padding-top: 500px; padding-bottom: 250px; background: url("img/top/bg.png") center no-repeat;}
#philosophy section { flex: 1; margin-left: 72px;}
#philosophy section p { max-width: 700px; margin: 0 auto 50px; font-size: 3.5rem; font-weight: 700;}
.staff { display: flex; align-items: flex-start; margin-bottom: 80px;}
.staff > figure { width: 360px;}
.staff > div { position: relative; max-width: 710px; margin-top: 40px; margin-left: 72px;}
.staff.reverse > div { margin-right: 72px; margin-left: 0;}
.staff > div > i { font-size: 4rem;}
.staff > div h3 {  margin: 40px 0; font-size: 5.4rem;}
.meta { display: flex; justify-content: space-between; align-items: flex-end;}
.job { font-size: 2.4rem;}
.join { margin-left: 16px; font-size: 2rem;}
.name { display: block; font-size: 4rem; font-weight: 700;}
.more a { display: block; width: 270px; padding-bottom: 20px; text-align: center; border-bottom: 2px solid #FFF; font-size: 2.2rem; font-weight: 700;}
.meta.min .job { font-size: 1.5rem;}
.meta.min .join { font-size: 1.3rem;}
.meta.min .name { font-size: 1.8rem;}
#staff .staff > figure { width: 284px;}
#staff .staff > div h3 { font-size: 5rem;}
.deco { position: absolute; bottom: -1em; left: 0; font-size: 18.5rem; font-weight: 700; letter-spacing: -0.07em; line-height: 1; color: rgba(34,34,34,.05); white-space: nowrap; z-index: -1; pointer-events: none;}
.deco1 { left: 90%; bottom: 0;}
.staff.rside { justify-content: flex-end;}
.staff.orner { justify-content: center;}
#orner .staff.orner::after { content: ''; position: absolute; top: 80px; left: 0; width: 100vw; height: 100%; background: rgba(34,34,34,.04); z-index: -1;}
#orner .staff > div { margin-top: 0; align-self: center;}
.staff.orner > figure { width: 30%;}
.link { flex-wrap: wrap; margin: -14px;}
.link li { flex: none; width: calc(50% - 28px); margin: 14px;}
.link li a { display: flex; align-items: center; height: 213px; padding: 24px 100px 24px 80px; background: rgba(34,34,34,.08) url("img/common/arr.svg") right 80px center no-repeat; font-size: 2.4rem; font-weight: 700;}


/*PAGE*/
#title { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; padding: 0 6.4vw; text-align: center;}
#title figure { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#title figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; vertical-align: bottom; opacity: 0.33;}
#title i { position: relative; margin-bottom: 8px; font-size: 10.6rem;}
#title h1 { position: relative; font-size: 2.4rem; line-height: 1;}
#title ul { position: relative; margin-bottom: 24px;}
#title li { display: inline; font-size: 1.5rem; line-height: 1.2;}
#title li:not(:first-child)::before { content: ' > ';}
section.box { margin-top: 40px;}
.box { padding: 32px 96px; background: rgba(34,34,34,.07);}
.box h3 { margin-bottom: 24px; padding-bottom: 8px; border-bottom: 2px solid #FFF; font-size: 3.6rem;}
h3.box { margin-bottom: 32px; text-align: center; font-size: 3.6rem;}
.in { margin: 0 5%;}
.table { width: 100%; border-collapse: separate; border-spacing: 15px 24px; margin: -24px -15px;}
.table th, .table td { padding: 24px 0; border-bottom: 1px solid #FFF;}
.table th { width: 25%; text-align: left; vertical-align: top; white-space: nowrap;}
.disc li { padding-left: 1em; text-indent: -1em;}
.disc li::before { content: '■';}
.disc li:not(:first-child) { margin-top: 8px;}

.img { width: 100%; overflow: hidden;}
.img .swiper-pagination-thumbs figure { position: relative; width: 100%; padding-top: 100%; background: #EDEDED;}
.img .swiper-pagination-thumbs figure img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { width: auto; border: 0;}
.swiper-pagination-thumbs { display: flex; flex-wrap: wrap; margin: 6px -6px;}
.swiper-pagination-thumb { width: calc(100% / 5 - 12px); margin: 6px; cursor: pointer; transition: opacity .2s ease-out;}
.swiper-pagination-thumb:not(.swiper-pagination-thumb-active) { opacity: 0.5;}
#store h3 { margin-bottom: 24px; font-size: 3rem;}
#store h3 span { font-size: 4rem;}
#store table { width: 100%; margin-bottom: 24px;}
#store table th { padding: 8px; text-align: left; vertical-align: top; font-weight: 700; white-space: nowrap;}
#store table td { padding: 8px 0 8px 16px;}
.mapbtn { margin-top: 16px; text-align: right;}
.mapbtn a { display: inline-block; padding: 8px 32px; border: 1px solid #FFF; font-size: 1.4rem; font-weight: 700;}
.achievement { display: flex; justify-content: space-around; align-items: center;}
.achievement h3 { margin-right: 40px; text-align: center; font-size: 4rem; white-space: nowrap;}
.achievement h3 span { display: block; margin-top: 8px; font-size: 14rem;}
.achievement li { display: flex; justify-content: space-between; align-items: flex-end; margin: 16px 0; font-size: 3rem; font-weight: 700;}
.achievement li span  { margin-right: 40px; font-size: 5rem;}
.achievement li i { margin-left: auto; font-size: 8rem;}
.achievelist { margin-top: 40px; padding: 40px 72px; border: 1px solid #FFF; text-align: center;}
.achievelist h3 { margin: 24px; font-size: 2rem;}
.achievelist ul { flex-wrap: wrap; margin: -10px;}
.achievelist li { flex: none; width: calc(50% - 20px); margin: 10px; padding: 16px; background: rgba(34,34,34,.07);}
.achievelist li.wide { flex: 1;}
.achievelist li span { font-size: 1.4rem;}
.year { text-align: center; font-size: 2rem;}
.year span { font-size: 1.4rem;}
.year .deco { bottom: 50%; left: 50%; transform: translate(-50%,50%); font-size: 6rem;}

.message h3 { margin-bottom: 40px; font-size: 3.6rem;}
.message p { font-size: 2rem;}
.message .deco { bottom: 100%; transform: translateY(50%);}
#message header .deco { bottom: 50%; left: -1em; transform: translateY(50%); text-align: left;}
#message .row figure { flex: none; width: calc(45% - 40px);}
#message .row p { margin-top: 40px; font-weight: 700;}
#message .meta { justify-content: flex-end; text-align: right;}

.cross > li { display: flex; justify-content: space-between;}
.cross > li:not(:first-child) { margin-top: 80px;}
.cross > li:nth-child(even) { flex-direction: row-reverse;}
.cross > li figure { width: 50%;}
.cross > li div { width: 46%;}
.cross > li h3 { margin: 24px 0; padding-bottom: 8px; border-bottom: 2px solid #FFF; font-size: 3rem;}

.requirements { width: 100%; border-collapse: collapse;}
.requirements th, .requirements td { padding: 32px; border: 1px solid #FFF;}
.requirements th { width: 25%; text-align: center; vertical-align: middle; background: rgba(34,34,34,.07); white-space: nowrap; font-size: 2rem;}

.form dl { max-width: 960px; margin: 0 auto;}
.form dt { clear: both; float: left; width: 28%; padding-top: 16px; text-align: left; font-weight: 700;}
.form dd { padding: 0 0 16px 32%; text-align: left; line-height: 1.5em;}
.form dd span { display: inline-block; margin: 8px;}
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="date"] { display: inline-block; width: calc(100% - 16px); margin: 8px; padding: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); border-radius: 5px; vertical-align: middle;}
.form select { margin: 8px; padding: 12px 48px 12px 12px; vertical-align: middle; background: rgba(255,255,255,.08) url("img/common/select.svg") right 16px center no-repeat; border: 1px solid rgba(255,255,255,.3); border-radius: 5px;}
.form textarea { width: calc(100% - 16px); min-height: 100px; margin: 8px; padding: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); border-radius: 5px; border-radius: 5px;}
.form label { display: inline-block;}
.form input[type="checkbox"] { display: none;}
.form input[type="checkbox"] + span { position: relative; display: block; padding: 4px 0 4px 24px; line-height: 1;}
.form input[type="checkbox"] + span::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 16px; height: 16px; background: #FFF; border: 1px solid #CCC;}
.form input[type="checkbox"]:checked + span::before { background: #37CAA6; border: 3px solid #FFF;}
.form input[type="radio"] { display: none;}
.form input[type="radio"] + span { position: relative; display: block; padding: 2px 0 4px 24px; line-height: 1;}
.form input[type="radio"] + span::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 16px; height: 16px; background: #FFF; border: 1px solid #CCC; border-radius: 50%;}
.form input[type="radio"]:checked + span::before { background: #EC5312; border: 3px solid #FFF;}
.submit { position: relative; margin: 32px 0; text-align: center;}
.submit input[type="submit"] { display: inline-block; width: 500px; max-width: calc(100% - 16px); height: 80px; margin: 8px; background: url("img/entry/btn.png") center no-repeat; background-size: contain; text-indent: 110%; overflow: hidden; transition: .2s ease-out;}
.submit input[type="submit"]:disabled { background: #999;}
.submit input[type="submit"]:not(:disabled):hover { opacity: 0.7;}
.submit button { display: inline-block; margin: 8px; padding: 24px 48px; background: #999; border-radius: 40px; font-size: 2rem; font-weight: 700; color: #FFF;}
.must { float: right; margin-left: 16px; padding: 4px 8px; border: 1px solid #FFF; font-size: 1.3rem; color: #FFF;}
.mw_wp_form_confirm form dd { padding-top: 12px;}
.mw_wp_form_confirm form > p { display: none;}
.mw_wp_form_confirm .notice { display: none;}
.form ::-webkit-input-placeholder { font-weight: 500; color: rgba(255,255,255,.6);}
.form ::-moz-placeholder { font-weight: 500; color: rgba(255,255,255,.6);}
.form :-ms-input-placeholder { font-weight: 500; color: rgba(255,255,255,.6);}
.form .short { width: 25%!important;}
.form .mid { width: 75%!important;}

a.cta-btn {
    display: flex;
    padding: 16px;
    background: rgba(34, 34, 34, .07) url("img/common/arr.svg") right 24px center no-repeat;
    border-radius: 64px;
    border: 1px solid #FFFA;
    font-size: 2rem;
    font-weight: 700;
    color: #FFF;
    align-items: center;
    justify-content: center;
    max-width: 300px;
    margin: 0 auto;

    .icon-line {
        background: url('/img/common/LINE.png') no-repeat;
        background-size: cover;
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }
}




@media only screen and (max-width: 10024px){
body { font-size: 1.4rem;}
#header { align-items: center; padding: 16px;}
#nav { pointer-events: none; opacity: 0; transform: scale(0.9); position: fixed; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 100%; height: 100vh; margin: 0; background: rgba(34,34,34,.8); background-size: cover; overflow: auto; z-index: 500; -webkit-transition: .8s cubic-bezier(.19,1,.22,1); transition: .8s cubic-bezier(.19,1,.22,1);}
#nav > ul { margin: 24px;}
#nav > ul > li { padding: 12px 0;}
#nav > ul > li > a, #nav > ul > li > span { font-size: 1.6rem; font-weight: 700; color: #FFF;}
#nav ul ul { margin-left: 24px;}
#nav ul ul li { margin-top: 16px;}
#nav ul ul li a { font-size: 1.5rem; font-weight: 700; white-space: nowrap;}
#open { position: relative; display: block; width: 26px; height: 18px; margin-left: auto; text-align: center; border-radius: 3px; cursor: pointer; z-index: 9999;}
#open div { position: relative; display: block; width: 26px; height: 18px; transition: .2s linear;}
#open span { position: absolute; left: 0; display: block; width: 26px; height: 2px; background: #FFF; transition: .2s linear;}
#open span:nth-child(1) { top: 0;}
#open span:nth-child(2) { top: 8px;}
#open span:nth-child(3) { top: 16px;}
.open #open { position: fixed; top: 16px; right: 15px;}
.open #open span:nth-child(1) { top: 8px; background: #FFF; transform: rotate(45deg);}
.open #open span:nth-child(2) { width: 0; left: -26px;}
.open #open span:nth-child(3) { top: 8px; background: #FFF; transform: rotate(-45deg);}
.open #nav { pointer-events: auto; opacity: 1; transform: scale(1);}
}
@media only screen and (max-width: 1024px){
#footer { padding: 64px 6.4vw; font-size: 1.2rem;}
#footer p { font-size: 1.8rem;}
#footer ul { float: none; margin-bottom: 16px;}
#footer address { float: none;}

article { position: relative; padding: 64px 6.4vw;}
article header { margin-bottom: 40px;}
article header i { font-size: 3.2rem;}
section { position: relative;}
.row { display: block; margin: 0;}
.row > * { width: auto!important; margin: 0 0 40px;}
.btn { text-align: center;}
.btn a { font-size: 1.4rem;}
.fs18 { font-size: 1.6rem;}
.fs25 { font-size: 2rem;}
.fs50 { font-size: 2.4rem;}
.fs60 { font-size: 2.8rem;}
.sp { display: block;}
.pc { display: none!important;}


/*TOP*/
#mv h1 { font-size: 7.2vw; line-height: 2;}
#scroll { bottom: -40px;}
#scroll::after { height: 80px;}
#scroll a { font-size: 1rem;}
.heading h2 { font-size: 3.2rem;}
.heading i { font-size: 1.6rem;}
#philosophy { display: block; padding-top: 120px; padding-bottom: 120px; background-size: cover;}
#philosophy section { margin-left: 0;}
#philosophy section p { margin: 0 auto 24px; font-size: 2rem;}
.staff { display: block;}
.staff > figure { margin: 0 auto 24px; max-width: 80%;}
.staff > div { margin-left: 0;}
.staff.reverse > div { margin-right: 0;}
.staff > div > i { font-size: 3rem!important;}
.staff > div h3 {  margin: 24px 0; font-size: 2.2rem!important;}
.meta { display: block;}
.meta .more a { margin: 24px auto 0; font-size: 1.6rem;}
.job { font-size: 1.5rem;}
.join { font-size: 1.3rem;}
.name { font-size: 2rem;}
.deco { font-size: 8rem;}
.deco1 { left: 0; bottom: -1em;}
.staff.orner::after { left: calc(50% - 50vw);}
.staff.orner > figure { width: 80%;}
.link { margin: 0;}
.link li { margin: 0 0 14px;}
.link li a { height: auto; padding: 24px 40px; background-position: right 24px center; font-size: 1.6rem;;}


/*PAGE*/
#title i { font-size: 3.6rem;}
#title li { font-size: 1rem;}
.box { padding: 24px;}
.box h3, h3.box { font-size: 2rem;}
.titlebox { padding: 32px;}
.titlebox p { font-size: 1.6rem;}
.titlebox.imgtitle { margin-left: 0; margin-bottom: 60%;}
.titlebox.imgtitle figure { position: relative; top: 0; left: 0; transform: translateY(0); margin-bottom: -60%;}

#store h3 { font-size: 2.4rem;}
#store h3 span { font-size: 3.2rem;}
.achievement { display: block;}
.achievement h3 { margin-right: 0; font-size: 1.6rem;}
.achievement h3 span { font-size: 5rem;}
.achievement li { display: block; margin: 16px 0; text-align: center;font-size: 2rem;}
.achievement li span  { display: block; margin: 0 0 8px; font-size: 2.4rem;}
.achievement li i { margin-left: auto; font-size: 5rem;}
.achievelist { padding: 24px;}
.achievelist li span { font-size: 1.2rem;}

.cross > li { display: block;}
.cross > li figure { width: auto; text-align: center;}
.cross > li div { width: auto;}
.cross > li h3 { font-size: 2rem;}

.requirements { border-top: 1px solid #FFF;}
.requirements th, .requirements td { display: block; padding: 24px;}
.requirements th { width: auto; border-top: none; border-bottom: none; white-space: normal; font-size: 1.6rem;}

.form dt { float: none; width: auto;}
.form dd { display: block; padding: 8px 0 16px;}
.form .mid, .form .short { width: calc(60% - 16px)!important;}
.submit input[type="submit"] { height: 60px;}
.submit button { display: block; width: calc(100% - 16px);}
}




@media print {
#container { width: 1024px;}
}